/* ============================================================================
   BM HRMS - Design Foundation (V3 theme, systematised)
   ----------------------------------------------------------------------------
   Three layers, per the design-system method:
     1. PRIMITIVE  raw values - rarely change
     2. SEMANTIC   what a value MEANS - this is what dark mode swaps
     3. COMPONENT  per-component settings - built from semantic

   Colours are V3's approved palette, unchanged - only restructured.
   Motion, spacing and layout are NEW (V3 had none).

   This file is the readable source. It gets embedded into Index.html,
   because Apps Script cannot load a separate .css file.
   ========================================================================== */


/* ===========================================================================
   LAYER 1 - PRIMITIVES
   =========================================================================== */
:root {

  /* --- Brand greens (from V3) --- */
  --green-900: #0E2A1C;
  --green-800: #0F5634;
  --green-700: #16784A;
  --green-600: #1E8E55;
  --green-400: #3DBA7B;
  --green-300: #6FD6A0;
  --green-100: #E3F2EA;

  /* --- Neutrals (from V3) --- */
  --sand-50:  #F3F6F4;
  --sand-100: #F7FAF8;
  --sand-200: #DCE5DF;
  --sand-300: #8A9A91;
  --sand-600: #5D6F65;
  --sand-900: #14231B;
  --white:    #FFFFFF;

  /* --- Status hues (from V3) --- */
  --amber-600: #A8690F;  --amber-100: #FCF0DA;
  --red-600:   #C23A28;  --red-100:   #FBE5E1;
  --blue-600:  #2B6CA3;  --blue-100:  #E2EEF8;
  --plum-600:  #7A4BA6;  --plum-100:  #F0E7F8;

  /* --- Space scale: 4px base -------------------------------------------
     Replaces the 20+ ad-hoc values. Everything snaps to this.            */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* --- Type scale --- */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   16px;
  --text-lg:   20px;
  --text-xl:   26px;
  --text-2xl:  34px;

  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Figtree", "Segoe UI", system-ui, sans-serif;
  --font-arabic:  "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --font-mono:    ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* --- Radius --- */
  --radius-sm:   6px;
  --radius:     12px;
  --radius-lg:  16px;
  --radius-full: 999px;

  /* --- Duration ---------------------------------------------------------
     Three speeds only. Was: .05s .1s .15s .22s scattered inline.         */
  --duration-instant: 90ms;   /* press / tap feedback     */
  --duration-fast:   150ms;   /* colour, opacity, hover   */
  --duration-normal: 200ms;   /* transform, shadow        */
  --duration-slow:   280ms;   /* panels, page enter       */

  /* --- Easing --- */
  --ease-out:    cubic-bezier(.22, .8, .3, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.3, .5, 1);

  /* --- Elevation --- */
  --shadow-sm: 0 1px 2px rgba(15,50,30,.06);
  --shadow:    0 1px 2px rgba(15,50,30,.06), 0 8px 24px rgba(15,50,30,.07);
  --shadow-lg: 0 8px 16px rgba(15,50,30,.10), 0 24px 48px rgba(15,50,30,.12);

  /* --- Stacking order: named, so panels never fight each other --- */
  --z-base:     0;
  --z-sticky:  10;
  --z-nav:     20;
  --z-panel:   30;
  --z-overlay: 40;
  --z-dialog:  50;
  --z-toast:   60;
}


/* ===========================================================================
   LAYER 2 - SEMANTIC  (light mode)
   These names say what a colour is FOR. Dark mode swaps only this layer.
   =========================================================================== */
:root {
  --ground:        var(--sand-50);    /* page background        */
  --surface:       var(--white);      /* cards, panels          */
  --surface-2:     var(--sand-100);   /* table headers, wells   */
  --ink:           var(--sand-900);   /* main text              */
  --muted:         var(--sand-600);   /* secondary text         */
  --faint:         var(--sand-300);   /* hints, placeholders    */
  --line:          var(--sand-200);   /* borders, dividers      */

  --brand:         var(--green-700);
  --brand-strong:  var(--green-800);
  --brand-soft:    var(--green-100);
  --brand-ink:     var(--white);      /* text ON brand          */

  --side:          var(--green-900);  /* sidebar background     */
  --side-ink:      #D5E6DC;
  --side-muted:    #8FB09D;
  --side-hover:    #163A28;
  --side-active:   #1F5A3B;

  --ok:   var(--green-600); --ok-soft:   var(--green-100);
  --warn: var(--amber-600); --warn-soft: var(--amber-100);
  --crit: var(--red-600);   --crit-soft: var(--red-100);
  --info: var(--blue-600);  --info-soft: var(--blue-100);
  --plum: var(--plum-600);  --plum-soft: var(--plum-100);

  --off: #E9EEEB;                     /* weekly off day cell    */

  /* Focus ring - one definition, used everywhere */
  --ring-width:  2px;
  --ring-offset: 2px;
  --ring-color:  var(--brand);

  --opacity-disabled: .5;

  /* Semantic spacing */
  --spacing-component: var(--space-4);
  --spacing-section:   var(--space-6);
}

/* --- DARK MODE -----------------------------------------------------------
   Only the semantic layer is redefined. Nothing else in the app changes.
   Two selectors: system preference, and the manual toggle.               */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #0B1510; --surface: #111E17; --surface-2: #15241C;
    --ink: #E4EEE8; --muted: #9AB0A3; --faint: #6E8579; --line: #223429;
    --brand: var(--green-400); --brand-strong: var(--green-300);
    --brand-soft: #173826; --brand-ink: #06150D;
    --side: #08110C; --side-ink: #D5E6DC; --side-muted: #7E9C8B;
    --side-hover: #11231A; --side-active: #1A3A29;
    --ok: #4CC486; --ok-soft: #153323;
    --warn: #E3A844; --warn-soft: #3A2C12;
    --crit: #F07A67; --crit-soft: #3D1D18;
    --info: #6FB0E6; --info-soft: #15293A;
    --plum: #B894DC; --plum-soft: #2B2038;
    --off: #1B2B22;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow:    0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
    --shadow-lg: 0 8px 16px rgba(0,0,0,.5), 0 24px 48px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #0B1510; --surface: #111E17; --surface-2: #15241C;
  --ink: #E4EEE8; --muted: #9AB0A3; --faint: #6E8579; --line: #223429;
  --brand: var(--green-400); --brand-strong: var(--green-300);
  --brand-soft: #173826; --brand-ink: #06150D;
  --side: #08110C; --side-ink: #D5E6DC; --side-muted: #7E9C8B;
  --side-hover: #11231A; --side-active: #1A3A29;
  --ok: #4CC486; --ok-soft: #153323;
  --warn: #E3A844; --warn-soft: #3A2C12;
  --crit: #F07A67; --crit-soft: #3D1D18;
  --info: #6FB0E6; --info-soft: #15293A;
  --plum: #B894DC; --plum-soft: #2B2038;
  --off: #1B2B22;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow:    0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
  --shadow-lg: 0 8px 16px rgba(0,0,0,.5), 0 24px 48px rgba(0,0,0,.4);
}


/* ===========================================================================
   LAYER 3 - COMPONENT TOKENS
   Change a component's look here, in one place.
   =========================================================================== */
:root {
  /* Button */
  --btn-h:         38px;
  --btn-h-sm:      32px;
  --btn-h-lg:      46px;
  --btn-pad-x:     var(--space-4);
  --btn-radius:    var(--radius-sm);
  --btn-bg:        var(--brand);
  --btn-fg:        var(--brand-ink);
  --btn-hover-bg:  var(--brand-strong);

  /* Input */
  --input-h:       38px;
  --input-pad:     var(--space-2) var(--space-3);
  --input-bg:      var(--surface);
  --input-border:  var(--line);
  --input-radius:  var(--radius-sm);

  /* Card */
  --card-bg:       var(--surface);
  --card-border:   var(--line);
  --card-pad:      var(--space-5);
  --card-radius:   var(--radius);
  --card-shadow:   var(--shadow-sm);

  /* Table - data-heavy app, so compact rows by default */
  --row-h:         40px;
  --row-h-comfy:   52px;
  --cell-pad:      var(--space-2) var(--space-3);
  --row-hover:     var(--surface-2);
  --row-selected:  var(--brand-soft);

  /* Badge / pill */
  --badge-pad:     3px var(--space-2);
  --badge-radius:  var(--radius-full);
  --badge-size:    var(--text-xs);

  /* Side panel (employee profile drawer) */
  --panel-w:       460px;

  /* Chrome */
  --nav-w:         232px;
  --header-h:      56px;
  --tabbar-h:      60px;   /* mobile bottom tabs */
}


/* ===========================================================================
   MOTION SYSTEM
   The live app currently has NO motion. These are the only animations
   the app needs; everything reuses them.
   =========================================================================== */

/* Any element that responds to the mouse gets this one line. */
.interactive,
button, .btn, a.navlink, .tab, .row-click, input, select, textarea {
  transition:
    background-color var(--duration-fast) var(--ease-in-out),
    border-color     var(--duration-fast) var(--ease-in-out),
    color            var(--duration-fast) var(--ease-in-out),
    box-shadow       var(--duration-normal) var(--ease-out),
    transform        var(--duration-instant) var(--ease-out),
    opacity          var(--duration-fast) ease;
}

/* Content arriving: cards, table rows, list items */
@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
/* Side panel / drawer sliding in from the right */
@keyframes slide-in {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: none; }
}
/* Toast dropping from the top */
@keyframes drop-in {
  from { opacity: 0; transform: translate(-50%, -12px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
/* Loading placeholder shimmer */
@keyframes shimmer {
  from { background-position: -320px 0; }
  to   { background-position:  320px 0; }
}
/* Spinner */
@keyframes spin { to { transform: rotate(360deg); } }

.anim-rise  { animation: rise    var(--duration-slow) var(--ease-out) both; }
.anim-slide { animation: slide-in var(--duration-slow) var(--ease-out) both; }
.anim-drop  { animation: drop-in var(--duration-normal) var(--ease-spring) both; }

/* Stagger: lets a list appear in sequence instead of all at once.
   Use style="--i:0", "--i:1" ... on the children. Caps at 8 so a
   300-row employee table never crawls. */
.anim-stagger > * {
  animation: rise var(--duration-slow) var(--ease-out) both;
  animation-delay: calc(min(var(--i, 0), 8) * 40ms);
}

/* Skeleton block shown while server data loads */
.skeleton {
  background: linear-gradient(90deg,
    var(--surface-2) 0%, var(--line) 50%, var(--surface-2) 100%);
  background-size: 320px 100%;
  animation: shimmer 1.2s linear infinite;
  border-radius: var(--radius-sm);
  color: transparent !important;
  min-height: 1em;
}

/* Spinner, for buttons mid-save */
.spinner {
  width: 15px; height: 15px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  display: inline-block;
  animation: spin .6s linear infinite;
  vertical-align: -2px;
}

/* ACCESSIBILITY: honour the OS "reduce motion" setting. Required -
   some staff get motion sickness from moving interfaces. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ===========================================================================
   STATE SYSTEM
   One definition of hover / focus / active / disabled / error,
   so every control in every module behaves the same way.
   =========================================================================== */

/* Focus ring - keyboard users only, so the mouse doesn't show rings */
:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 var(--ring-offset) var(--surface),
    0 0 0 calc(var(--ring-offset) + var(--ring-width)) var(--ring-color);
  border-radius: var(--radius-sm);
}

button:hover:not(:disabled), .btn:hover:not(:disabled) { background: var(--btn-hover-bg); }
button:active:not(:disabled), .btn:active:not(:disabled) { transform: translateY(1px); }

button:disabled, .btn:disabled, [aria-disabled="true"] {
  opacity: var(--opacity-disabled);
  pointer-events: none;
  cursor: not-allowed;
}

/* Mid-save: dim it and show a wait cursor */
[aria-busy="true"] { opacity: .7; pointer-events: none; cursor: wait; }

input:hover:not(:disabled), select:hover:not(:disabled) { border-color: var(--faint); }
input:focus, select:focus, textarea:focus {
  border-color: var(--brand);
  outline: none;
  box-shadow: 0 0 0 3px var(--brand-soft);
}

/* Validation error - never colour alone; pair with a message */
.is-error, [aria-invalid="true"] {
  border-color: var(--crit) !important;
  box-shadow: 0 0 0 3px var(--crit-soft) !important;
}
.error-text {
  color: var(--crit);
  font-size: var(--text-sm);
  margin-top: var(--space-1);
  display: block;
}


/* ===========================================================================
   LAYOUT PRIMITIVES
   Replaces the 44 hand-written grids. Compose pages from these instead
   of writing new CSS on every page.
   =========================================================================== */

/* Vertical rhythm - children spaced evenly, no margin juggling */
.stack    { display: flex; flex-direction: column; gap: var(--space-4); }
.stack-sm { display: flex; flex-direction: column; gap: var(--space-2); }
.stack-lg { display: flex; flex-direction: column; gap: var(--space-6); }

/* Horizontal row that wraps on small screens */
.row     { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.row-tight { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.row-end { margin-left: auto; }   /* pushes an item to the right */

/* Fixed-count grids - collapse to 1 column on phones */
.grid-2, .grid-3, .grid-4 { display: grid; gap: var(--space-4); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Self-sizing grid - no breakpoints needed. Used for dashboard cards. */
.grid-auto {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

/* Form field pairs */
.fields {
  display: grid;
  gap: var(--space-3) var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.field > label { font-size: var(--text-sm); font-weight: 600; color: var(--muted); }
.field-wide { grid-column: 1 / -1; }

/* Page section header: title left, actions right */
.bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

/* Wide tables: scroll the table, never the page (stops sideways scrolling) */
.table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll > table { min-width: max-content; }

@media (max-width: 760px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .fields { grid-template-columns: minmax(0, 1fr); }
  :root { --card-pad: var(--space-4); }
}


/* ===========================================================================
   BASE ELEMENTS - so existing pages inherit the theme with no edits
   =========================================================================== */
* { box-sizing: border-box; }
html, body { width: 100%; overflow-x: hidden; }   /* no sideways scrolling */
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}
h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; line-height: 1.2; }
h2 { font-size: var(--text-lg); }
h3 { font-size: var(--text-md); }
a  { color: var(--brand); }

.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--card-pad);
  box-shadow: var(--card-shadow);
}
.sub   { color: var(--muted); font-size: var(--text-sm); }
.faint { color: var(--faint); font-size: var(--text-sm); }

button, .btn {
  height: var(--btn-h);
  padding: 0 var(--btn-pad-x);
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 0;
  border-radius: var(--btn-radius);
  font: 600 var(--text-base)/1 var(--font-body);
  cursor: pointer;
}
.btn-sm    { height: var(--btn-h-sm); padding: 0 var(--space-3); font-size: var(--text-sm); }
.btn-quiet { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.btn-quiet:hover:not(:disabled) { background: var(--surface-2); }
.btn-danger { background: var(--crit); }
.btn-danger:hover:not(:disabled) { filter: brightness(.92); }

input, select, textarea {
  height: var(--input-h);
  padding: var(--input-pad);
  background: var(--input-bg);
  color: var(--ink);
  border: 1px solid var(--input-border);
  border-radius: var(--input-radius);
  font: var(--text-base)/1.4 var(--font-body);
  width: 100%;
  min-width: 0;
}
textarea { height: auto; min-height: 84px; resize: vertical; }
::placeholder { color: var(--faint); }

table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
th {
  text-align: left;
  padding: var(--cell-pad);
  background: var(--surface-2);
  color: var(--muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
  position: sticky; top: 0; z-index: var(--z-sticky);
}
td { padding: var(--cell-pad); border-top: 1px solid var(--line); height: var(--row-h); }
tbody tr:hover { background: var(--row-hover); }
tbody tr.is-selected { background: var(--row-selected); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.mid, th.mid { text-align: center; }

/* Status pills - meaning carried by text, not colour alone */
.pill {
  display: inline-block;
  padding: var(--badge-pad);
  border-radius: var(--badge-radius);
  font-size: var(--badge-size);
  font-weight: 600;
  white-space: nowrap;
}
.pill-ok   { background: var(--ok-soft);   color: var(--ok); }
.pill-warn { background: var(--warn-soft); color: var(--warn); }
.pill-crit { background: var(--crit-soft); color: var(--crit); }
.pill-info { background: var(--info-soft); color: var(--info); }
.pill-plum { background: var(--plum-soft); color: var(--plum); }
.pill-off  { background: var(--off);       color: var(--muted); }

.arabic { font-family: var(--font-arabic); direction: rtl; }
.hidden { display: none !important; }