/* ═══════════════════════════════════════════════════════════════
   app.css — CAHanapBuhay Blade System
   Shared by: layouts/employee, layouts/admin, layouts/superadmin
   DO NOT use in landing.blade.php (use landing.css instead)

   Color ratio target
   ─ Light  →  60% white/off-white  ·  30% green  ·  10% other
   ─ Dark   →  60% dark             ·  30% green  ·  10% other
   The green stays consistent across both themes.
   "Other" (status colors) never change — they are semantic signals.
═══════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────
   LIGHT THEME (default)
   All surface and text tokens are white-based.
   Green tokens are shared with dark — same hue, just green.
─────────────────────────────────────────────────────────────── */
:root {
  /* ── Surfaces (60% white) ─────────────────────── */
  --bg:            #f4f6fb;      /* page background */
  --surface:       #ffffff;      /* card / panel background */
  --surface-alt:   #f0f4f0;      /* subtle hover / inset tint */
  --surface-inset: #e8edf2;      /* deeper inset e.g. stat cards */

  /* Muted / disabled surface — hidden badges, closed/withdrawn pills, hover states */
  --light-gray:    #f3f4f6;

  /* ── Text (readable on white) ─────────────────── */
  --text:          #1a1a2e;      /* headings, primary body */
  --text-mid:      #374151;      /* secondary body, sub-labels */
  --text-muted:    #6b7280;      /* placeholders, meta, dates */

  /* ── Green brand (30%) ────────────────────────── */
  --green:         #2d7a4f;      /* primary action, icons, accents */
  --green-dark:    #1f5c3a;      /* hover / deeper green */
  --green-mid:     #3a8f5f;      /* gradient midpoint */
  --green-light:   #e8f5ee;      /* tinted bg for green elements */
  --green-muted:   #5a9e78;      /* scrollbar thumb, soft accents */

  /* Active/selected accent (liked/saved/etc). Equal to the base green tokens
     in light mode; only diverges in dark mode where the base green is muted
     down but active states still need to pop. */
  --green-active:     var(--green);
  --green-active-bg:  var(--green-light);

  /* Text/icon color for anything sitting on a --green-light tinted
     background (badges, avatar initials, small icon tiles, etc).
     Light mode: dark green reads fine on the pale tint (old behavior).
     Dark mode: overridden below to a brighter green, because the tint
     itself is dark there too — dark-on-dark would be invisible. */
  --green-on-tint: var(--green-dark);

  /* ── Borders & structure ──────────────────────── */
  --border:        #e5e7eb;      /* panel borders, dividers */
  --border-strong: #d1d5db;      /* input borders, strong dividers */

  /* ── Shadows ──────────────────────────────────── */
  --shadow-sm:     0 1px 4px rgba(0,0,0,0.08);
  --shadow:        0 4px 16px rgba(0,0,0,0.10);
  --shadow-md:     0 6px 24px rgba(0,0,0,0.13);

  /* ── Radius ───────────────────────────────────── */
  --radius:        14px;
  --radius-sm:     8px;
  --radius-xs:     6px;
}


/* ───────────────────────────────────────────────────────────────
   DARK THEME
   Only the surface/background tokens flip — 60% dark.
   Green tokens stay near-identical (slightly brighter for contrast).
   Status colors (yellow/red/blue) are untouched — semantic signals.
─────────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  /* ── Surfaces (60% dark) ──────────────────────── */
  --bg:            #0f1117;      /* page background */
  --surface:       #1c1f2b;      /* card / panel background */
  --surface-alt:   #252836;      /* hover / inset tint */
  --surface-inset: #1a1d28;      /* deeper inset e.g. stat cards */

  /* Muted / disabled surface — lighter than --surface so "hidden/closed"
     badges stay visually distinct from an ordinary card, not just black */
  --light-gray:    #262a38;

  /* ── Text (readable on dark) ──────────────────── */
  --text:          #e8eaf0;      /* headings, primary body */
  --text-mid:      #b0b8c8;      /* secondary body, sub-labels */
  --text-muted:    #7a8494;      /* placeholders, meta, dates */

  /* ── Green brand (30%) — deeper/muted for dark bg ── */
  --green:         #2c6e48;      /* darker, more muted than the light-theme green */
  --green-dark:    #1a4a30;      /* deeper hover state */
  --green-mid:     #33754c;      /* gradient midpoint */
  --green-light:   #142219;      /* dark-tinted green bg (subtler, closer to surface) */
  --green-muted:   #3c6b4e;      /* scrollbar thumb, soft accents */

  /* Active/selected accent — deliberately brighter than the base --green above.
     The base palette goes darker/quieter in dark mode, but liked/saved/selected
     states still need to read clearly against dark surfaces, so they use this
     separate, livelier tone instead of the muted base green. */
  --green-active:     #3fa868;
  --green-active-bg:  rgba(63, 168, 104, 0.16);
  --green-on-tint:    #3fa868;

  /* ── Borders & structure ──────────────────────── */
  --border:        #2e3347;      /* panel borders, dividers */
  --border-strong: #3d4460;      /* input borders, strong dividers */

  /* ── Shadows (stronger on dark) ───────────────── */
  --shadow-sm:     0 1px 4px rgba(0,0,0,0.35);
  --shadow:        0 4px 16px rgba(0,0,0,0.45);
  --shadow-md:     0 6px 24px rgba(0,0,0,0.55);
}


/* ───────────────────────────────────────────────────────────────
   ADMIN BLUE PALETTE
   Parallel token set to --green*, same structure/contrast levels,
   used only inside the .admin-shell scope below. Kept as its own
   named set (not just overriding --green directly at :root) so the
   employee/landing side keeps its green identity untouched.
─────────────────────────────────────────────────────────────── */
:root {
  --blue:         #1e3a5f;
  --blue-dark:    #14283f;
  --blue-mid:     #2c527f;
  --blue-light:   #e8edf5;
  --blue-muted:   #4a6d94;

  /* Constant white — for text sitting on a fixed-color surface (topbar,
     banners, solid buttons, tooltips) that is NOT meant to follow the
     light/dark surface tokens. Using var(--white) (which aliases to
     --surface) for this was the bug: in dark mode --surface goes dark,
     so text using that alias went from white to near-black and vanished
     against the still-colored background it sits on. */
  --on-brand:     #ffffff;
}

[data-theme="dark"] {
  --blue:         #3a6591;
  --blue-dark:    #2c527f;
  --blue-mid:     #4a7ba8;
  --blue-light:   #16283d;
  --blue-muted:   #4a6d94;

  /* Dark-mode "inverted" button look: light pill, dark text — used by
     the admin shell's primary action buttons instead of solid blue,
     so they read as bright accents against the dark surface instead
     of blending into it. */
  --btn-invert-bg:   #eef3fa;
  --btn-invert-text: #14283f;
}

/* ───────────────────────────────────────────────────────────────
   ADMIN SHELL SCOPE — blue rebrand
   Add class="admin-shell" to <body> in layouts/admin.blade.php.
   This remaps the --green* aliases to --blue* tokens ONLY within
   that subtree. Custom properties resolve at var()-use time against
   the nearest ancestor that defines them, so every existing admin
   rule written as var(--green...) picks up blue automatically —
   no need to touch each declaration individually. Employee/landing
   pages never get this class, so they keep the green tokens as-is.
─────────────────────────────────────────────────────────────── */
.admin-shell {
  --green:        var(--blue);
  --green-dark:   var(--blue-dark);
  --green-mid:    var(--blue-mid);
  --green-light:  var(--blue-light);
  --green-muted:  var(--blue-muted);
}

/* ───────────────────────────────────────────────────────────────
   STATUS COLORS — never change between themes
   These are semantic: pending=yellow, approved=green, rejected=red
   They always sit in a lightly tinted container so contrast holds.
─────────────────────────────────────────────────────────────── */
:root,
[data-theme="dark"] {
  /* Pending / warning */
  --status-pending-text: #ca8a04;
  --status-pending-bg:   #fefce8;
  --status-pending-border: #fde68a;

  /* Approved / success */
  --status-ok-text:   #16a34a;
  --status-ok-bg:     #f0fdf4;

  /* Rejected / error */
  --status-err-text:  #dc2626;
  --status-err-bg:    #fff0f0;
  --status-err-border:#fecaca;

  /* Info / blue */
  --status-info-text: #1d4ed8;
  --status-info-bg:   #eff6ff;
  --status-info-border:#bfdbfe;

  /* Notice / amber */
  --status-notice-text:  #ca8a04;
  --status-notice-bg:    #fefce8;
  --status-notice-border:#fde68a;

  /* Urgent / orange-red */
  --status-urgent-text:  #c2410c;
  --status-urgent-bg:    #fff7ed;

  /* Purple / in-demand */
  --status-purple-text:  #7e22ce;
  --status-purple-bg:    #fdf4ff;
  --status-purple-border:#e9d5ff;
}


/* ───────────────────────────────────────────────────────────────
   COMPATIBILITY ALIASES
   The dashboard and other child blades use the old landing-page
   variable names. These aliases map them to the new token system
   so those blades work without a full rewrite.

   IMPORTANT: these only need to be declared ONCE, in :root — a
   custom property is resolved at *use* time, not at definition
   time, so `--white: var(--surface)` automatically follows
   whatever --surface resolves to on the current theme. There is
   no need to redeclare it inside [data-theme="dark"]; doing so
   for a var()-based alias is redundant. The one exception is
   --green-mid below, because that's a literal hex value rather
   than a reference to an already-themed token, so it genuinely
   needs its own value per theme.

   Long-term: replace usages with the canonical names above.
─────────────────────────────────────────────────────────────── */
:root {
  --white:      var(--surface);       /* was hardcoded white */
  --off-white:  var(--surface-alt);   /* was #f8faf8 / #f0f4f0 */
  --text-dark:  var(--text);          /* was #1a2e1e */
  --muted:      var(--text-muted);    /* was a hardcoded fallback, now theme-aware */
  --radius:     14px;                 /* same value, explicit alias */
  --radius-sm:  8px;
}

[data-theme="dark"] {
  --green-mid:  #33754c;              /* matches the darker dark-theme green set above */
}


/* ═══════════════════════════════════════════════════════════════
   TEXT SIZE (Settings → Appearance)
   Driven by data-font-size="small|medium|large" on <html>, set by
   /public/js/appearance.js (see partials/appearance-init.blade.php
   for the no-flash inline bootstrap that runs before this file
   even loads).

   Why this works app-wide with zero per-component changes:
   every font-size in this codebase is authored in rem, while every
   padding/margin/radius/gap is authored in px (verified across
   app.css and the shared *.blade.php component styles). Changing
   the ROOT font-size therefore rescales all text — and only text —
   because rem is relative to the root, px is not. No existing rule
   needs to change.

   Medium (16px) matches the un-themed browser default, so it is a
   true no-op baseline — anyone who never opens Settings gets
   exactly today's sizing.
═══════════════════════════════════════════════════════════════ */
html {
  font-size: 16px; /* fallback if data-font-size is ever absent */
}

html[data-font-size="small"]  { font-size: 14px; }
html[data-font-size="medium"] { font-size: 16px; }
html[data-font-size="large"]  { font-size: 18px; }

/* Slightly compress the scale on narrow viewports so "Large" doesn't
   force excess wrapping/overflow on phones — this is the "responsive"
   half of the requirement, layered on top of the "functional" half
   above. Medium still lines up with the platform default. */
@media (max-width: 640px) {
  html[data-font-size="small"]  { font-size: 13px; }
  html[data-font-size="medium"] { font-size: 15px; }
  html[data-font-size="large"]  { font-size: 17px; }
}