/* ==========================================================================
   lead4ward Brand Overrides for Metronic v9 (Tailwind CSS 4)
   Loaded AFTER styles.css to override Metronic defaults.

   Structure (sections grow per phase):
     1.  Brand Color Tokens             [Phase B — base]
     2.  Typography                     [Phase B — base]
     2b. (reserved — wider container)   [Phase D — user-facing]
     3.  Header & Footer                [Phase D]
     3b. Sidebar                        [Phase D]
     4.  Auth Page Polish               [Phase B — current]
     5.  Iframe Container               [Phase D — event pages]
     6.  Card Enhancements              [Phase C+]
     15. DataTable Modernization        [Phase C — admin]
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Brand Color Tokens
   --------------------------------------------------------------------------
   Canonical lead4ward brand palette. These are the official brand colors:
     - lead4ward green: #86c440
     - lead4ward blue:  #035ea0
     - lead4ward gold:  #fbad18
   Do not introduce new color variants — reference the variables below.
   -------------------------------------------------------------------------- */
:root {
  /* lead4ward brand palette (canonical) */
  --l4w-green: #86c440;
  --l4w-gold:  #fbad18;
  --l4w-blue:  #035ea0;

  /* Override Metronic primary with lead4ward green so any `--tw-primary`
     consumer (buttons, links, focus rings, etc.) picks up our brand. The
     -active / -light / -clarity variants are derived shades of --l4w-green. */
  --tw-primary:         #86c440;
  --tw-primary-active:  #73a937;
  --tw-primary-light:   #e8f5d6;
  --tw-primary-clarity: rgba(134, 196, 64, 0.2);
  --tw-primary-inverse: #ffffff;

  /* Theme-aware surface/text tokens (light mode defaults). */
  --l4w-surface:        #e9ebec;
  --l4w-surface-border: #d5d8db;
  --l4w-text:           #69696b;
  --l4w-text-menu:      #3f4254;
  --l4w-text-muted:     #7e8299;
  --l4w-icon:           #84c501;
  --l4w-hover-bg:       #c8c8ce;
  --l4w-bg:             #f5f5f5;
}

/* Dark-mode adjustments. Metronic toggles dark via `html.dark`.
   Admin pages hard-lock dark mode (set in includes/admin_page_start.php);
   user-facing pages default to light and read kt-theme from localStorage. */
html.dark {
  /* Metronic surface tokens */
  --accent:              #2b2b40;
  --accent-foreground:   #cdcdde;
  --popover:             #1e1e2d;
  --popover-foreground:  #9899ac;

  /* Brand surface/text tokens — remap for dark mode so the sidebar, header,
     and body don't stay light-grey while the rest of the page is dark.
     The light-mode values in :root above are unchanged. */
  --l4w-surface:        #1e1e2d;   /* sidebar + header background */
  --l4w-surface-border: #2b2b40;   /* surface dividers */
  --l4w-text:           #b5b5c3;   /* body text */
  --l4w-text-menu:      #e1e3ea;   /* sidebar menu items */
  --l4w-text-muted:     #6c7293;   /* muted helper text */
  --l4w-hover-bg:       #2b2b40;   /* menu / button hover background */
  --l4w-bg:             #151521;   /* main content background */
}

html.dark main#content {
  background-color: var(--l4w-bg);
}
html.dark body {
  background-color: var(--l4w-bg);
  color: var(--l4w-text);
}


/* --------------------------------------------------------------------------
   2. Typography
   -------------------------------------------------------------------------- */
body {
  font-family: 'Heebo', 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--l4w-text);
}


/* --------------------------------------------------------------------------
   4. Auth Page Polish
   Small adjustments specific to auth_layout.php so the form panel looks
   on-brand. Sections 3 / 3b (user header, sidebar) come online in Phase D
   when the main app shell modernizes; auth pages are standalone so they
   don't need them.
   -------------------------------------------------------------------------- */

/* Right-panel hero block background — the branded side of the two-column
   sign-in. Uses the lead4ward grass-field photo (kept from the legacy site
   for brand continuity) with a subtle green tint as fallback. The image is
   hidden by the layout on mobile (via Tailwind `hidden lg:flex`) so phones
   get a clean form-only view. */
.l4w-auth-hero {
  background-color: var(--tw-primary-clarity);
  background-image: url('../media/bg/bg_grass.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Hero text uses lead4ward blue with a soft white glow — preserves the
   legacy brand voice ("Come join the fun!" was bright blue on the grass
   on the old Metronic v5 site) while staying readable over the photo. */
.l4w-auth-hero-headline {
  color: var(--l4w-blue);
  text-shadow: 0 1px 20px #ffffff, 0 0 8px rgba(255, 255, 255, 0.9);
}
.l4w-auth-hero-tagline {
  color: var(--l4w-blue);
  text-shadow: 0 1px 16px #ffffff, 0 0 6px rgba(255, 255, 255, 0.8);
}

/* Logo size in the auth header. */
.l4w-auth-logo {
  max-height: 48px;
  width: auto;
}

/* Subtle accent under the auth headline. */
.l4w-auth-divider {
  height: 3px;
  width: 48px;
  background: var(--tw-primary);
  border-radius: 9999px;
}

/* Pill-shaped button — matches the legacy login's friendly feel. Apply by
   adding `l4w-btn-pill` alongside `kt-btn kt-btn-primary` (or any kt-btn).
   Mobile-friendly: 9999px radius is independent of width. */
.l4w-btn-pill {
  border-radius: 9999px !important;
}


/* ==========================================================================
   3b. v9 Admin Sidebar (kt-sidebar / kt-menu)
   ==========================================================================
   Metronic v9's `kt-menu-*` classes ship as variant hooks only — they
   provide accordion JS bindings and active-state plumbing but NO base
   styling for padding, hover, spacing, or color. Without these rules the
   sidebar from `admin_sidebar.php` renders as a
   flat unstyled list.

   These rules give the v9 admin sidebar a look that matches the legacy
   `admin/admin_menu.php` dark sidebar (Batch 8) — same spacing, same
   hover, same active indicator, same green icon accent. Scoped to
   `.kt-sidebar` so they only apply to the v9 admin shell.
   -------------------------------------------------------------------------- */

/* Outer container — small gap between rows. */
.kt-sidebar .kt-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Menu item link — the visible row in the sidebar (icon + label). */
.kt-sidebar .kt-menu-item .kt-menu-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  color: #b5b5c3;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color 0.12s ease, color 0.12s ease;
}

/* Icon (KeenIcon) inside the link — brand green by default, white on hover/active. */
.kt-sidebar .kt-menu-item .kt-menu-link .kt-menu-icon {
  display: inline-flex;
  width: 20px;
  flex-shrink: 0;
  justify-content: center;
}
.kt-sidebar .kt-menu-item .kt-menu-link .kt-menu-icon i {
  font-size: 18px;
  color: #86c440;
  text-align: center;
  transition: color 0.12s ease;
}

/* Title text — inherit color from the link so hover/active states propagate. */
.kt-sidebar .kt-menu-item .kt-menu-link .kt-menu-title {
  color: inherit;
}

/* Hover state */
.kt-sidebar .kt-menu-item:hover > .kt-menu-link,
.kt-sidebar .kt-menu-item .kt-menu-link:hover {
  background-color: #2b2b40;
  color: #ffffff;
}
.kt-sidebar .kt-menu-item:hover > .kt-menu-link .kt-menu-icon i,
.kt-sidebar .kt-menu-item .kt-menu-link:hover .kt-menu-icon i {
  color: #ffffff;
}

/* Active state — soft blue tint + left accent bar, matches legacy admin_menu.php */
.kt-sidebar .kt-menu-item.active > .kt-menu-link {
  background-color: rgba(3, 94, 160, 0.18);
  color: #ffffff;
  border-left: 3px solid #035ea0;
  padding-left: 9px; /* compensate for the 3px border so text stays aligned */
}
.kt-sidebar .kt-menu-item.active > .kt-menu-link .kt-menu-icon i {
  color: #ffffff;
}

/* Section heading — small uppercase label between item groups. Metronic
   ships only 2 rules for this class (both inside .demo1.kt-sidebar-collapse),
   so the base styling is entirely on us. */
.kt-sidebar .kt-menu-heading {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7e8299;
  padding: 14px 12px 6px;
  margin: 0;
}