/* ==========================================================================
   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;
}