/* ============================================================================
   CeraMix UI kit  -  ceramix-ui.css
   ----------------------------------------------------------------------------
   The single source of truth for the CeraMix product UI (new deep-plum / ember
   brand). Every module - Leave, Attendance, and the ones still to come
   (Appraisal, Asset, Recruitment) - draws its shell and components from HERE, so
   the product looks and behaves as ONE thing even though it is built in parts.

   HOW TO USE
     Link this file once per page:
       <link rel="stylesheet" href="ceramix-ui.css">
     Load the brand fonts (Google Fonts or self-hosted):
       Unbounded (display), Manrope (body/UI), JetBrains Mono (labels).
     Then compose pages from the components below - do not re-invent styles in a
     module. If a module needs something new, add it here so every module gets it.

   CONTENTS
     1. Design tokens (:root)          6. Stat tiles
     2. Base / reset / typography      7. Action queue (cross-module)
     3. App shell (sidebar + topbar)   8. Status pills (presence + leave)
        incl. the REFRESH / "as at t"  9. Filter bar (date range + filters)
        freshness chip                10. Data table
     4. Page header + tabs            11. Buttons
     5. Cards                         12. Modal + toast + utilities

   HOUSE RULES baked in: closed palette, ember used sparingly (one accent per
   view), light hairline rules (never heavy black), calm and spacious. Copy uses
   hyphen "-" only, never the long dash; never the word "AI" in client copy.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. DESIGN TOKENS
   The closed brand palette + spacing/type scales. Change a value here and it
   updates everywhere. Do not introduce colours outside this set.
   ---------------------------------------------------------------------------- */
:root{
  /* Brand palette (from the CeraMix Brand Guide) */
  --plum:#271A44;         /* foundation: sidebar, dark bands, headings on light */
  --ember:#FF5C2B;        /* THE accent - one per view: active state, key flag, primary button */
  --violet:#6B1FB3;       /* secondary accent: links, "go" chevrons, hairline divider, figures */
  --ember-label:#EC671A;  /* small mono labels / section numbers */
  --ink:#171123;          /* body text */
  --grey:#6E6880;         /* secondary text, captions */
  --hairline:#E8E3F0;     /* table rules, borders, dividers */
  --paper:#FAF8FC;        /* tinted fills, page background, callout backgrounds */
  --white:#FFFFFF;

  /* Tints derived from plum (for subtle fills - not new colours) */
  --plum-tint:rgba(39,26,68,.07);
  --plum-tint2:rgba(39,26,68,.13);

  /* Functional status hues - kept low-saturation so they read as UI, not brand.
     Used ONLY for status pills / signals (presence, leave, approvals). */
  --ok:#2F8F6B;           /* in / present / approved (calm green) */
  --ok-bg:#E7F4EE;
  --warn:#C9772A;         /* late / attention (calm amber) */
  --warn-bg:#FBF0E4;
  --stop:#B04A4A;         /* absent unexplained / rejected (muted red) */
  --stop-bg:#F7EAEA;
  --info:#4A63B0;         /* on leave / informational (muted blue) */
  --info-bg:#EAEDF7;
  --rest:#8A8398;         /* rest day / holiday / neutral off */
  --rest-bg:#F0EEF4;

  /* Type */
  --font-display:'Unbounded',sans-serif;
  --font-body:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;

  /* Shape + depth */
  --radius:14px;          /* cards, tiles */
  --radius-sm:9px;        /* buttons, chips, inputs */
  --shadow:0 4px 18px rgba(39,26,68,.07);   /* card hover lift */
  --shadow-lg:0 24px 70px rgba(23,17,35,.4);/* modal */

  /* Layout */
  --side-w:222px;         /* sidebar width */
  --top-h:60px;           /* topbar height */
  --wrap-max:1180px;      /* content max width */
}

/* ----------------------------------------------------------------------------
   2. BASE / RESET / TYPOGRAPHY
   ---------------------------------------------------------------------------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  font-size:14px;
  line-height:1.5;
}
h1,h2,h3{font-family:var(--font-display);font-weight:500;margin:0;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}

/* .mono = the small, spaced, uppercase technical label used for eyebrows,
   column labels, footers, section numbers. */
.mono{font-family:var(--font-mono);letter-spacing:.08em;text-transform:uppercase}

/* ----------------------------------------------------------------------------
   3. APP SHELL  (sidebar + topbar + content wrapper)
   Every module page uses this identical frame, so navigating between modules
   feels seamless.
   ---------------------------------------------------------------------------- */
.cx-app{display:flex;min-height:100vh}

/* Sidebar (deep-plum). Holds the CeraMix logo and the module nav. */
.cx-side{width:var(--side-w);flex:0 0 var(--side-w);background:var(--plum);color:#EFEAF7;display:flex;flex-direction:column}
.cx-side .brand{padding:20px 22px 16px}
.cx-side .brand img{height:26px;display:block}   /* use assets/ceramix-logo-on-dark.png */
.cx-nav{margin-top:6px;display:flex;flex-direction:column}
.cx-nav a{display:flex;align-items:center;gap:12px;padding:11px 22px;color:#C9C0DD;font-weight:600;font-size:13.5px;border-left:3px solid transparent}
.cx-nav a .ic{width:16px;height:16px;opacity:.85;flex:0 0 auto}
.cx-nav a:hover{color:#fff;background:rgba(255,255,255,.04)}
.cx-nav a.active{color:#fff;border-left-color:var(--ember);background:rgba(255,92,43,.10)} /* ember marks the current module */
.cx-side .foot{margin-top:auto;padding:18px 22px;font-size:10px;color:#7E72A0;border-top:1px solid rgba(255,255,255,.07)}

/* Main column + topbar */
.cx-main{flex:1;min-width:0;display:flex;flex-direction:column}
.cx-top{height:var(--top-h);background:#fff;border-bottom:1px solid var(--hairline);display:flex;align-items:center;justify-content:space-between;padding:0 26px}
.cx-crumb{font-size:12.5px;color:var(--grey)}
.cx-crumb b{color:var(--ink);font-weight:700}
.cx-top .right{display:flex;align-items:center;gap:16px}

/* Tenant chip - shows WHICH client tenant is in view (multi-tenant product). */
.cx-tenant{display:flex;align-items:center;gap:8px;background:var(--paper);border:1px solid var(--hairline);border-radius:999px;padding:5px 12px 5px 6px;font-weight:700;font-size:12.5px}
.cx-tenant .av{width:22px;height:22px;border-radius:50%;background:var(--plum);color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800}

/* User block */
.cx-who{display:flex;align-items:center;gap:9px}
.cx-who .av{width:30px;height:30px;border-radius:50%;background:var(--violet);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px}
.cx-who small{display:block;color:var(--grey);font-size:11px;font-weight:600}
.cx-who b{font-size:13px}

/* REFRESH / FRESHNESS CHIP  ------------------------------------------------
   Critical for data that is a snapshot (e.g. Attendance off the biometric feed).
   ALWAYS show when the data was last refreshed so the UI never implies it is
   more live than it is. Put it in the topbar right, or under a page title.
   Markup:
     <span class="cx-refresh"><i></i> As at 09:14 &middot; refreshed 6 min ago</span>
   Add .stale (amber) when the data is older than your freshness threshold. */
.cx-refresh{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;color:var(--grey);background:var(--paper);border:1px solid var(--hairline);border-radius:999px;padding:5px 11px}
.cx-refresh i{width:7px;height:7px;border-radius:50%;background:var(--ok);display:block}  /* live dot */
.cx-refresh.stale{color:var(--warn);border-color:var(--warn-bg)}
.cx-refresh.stale i{background:var(--warn)}

/* Content wrapper */
.cx-wrap{padding:26px 30px 60px;max-width:var(--wrap-max)}

/* ----------------------------------------------------------------------------
   4. PAGE HEADER + TABS
   ---------------------------------------------------------------------------- */
.cx-pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:18px;flex-wrap:wrap}
.cx-eyebrow{color:var(--ember-label);font-size:10.5px;margin-bottom:8px} /* pair with .mono */
.cx-pagehead h1{font-size:24px}
.cx-pagehead .sub{color:var(--grey);font-size:14px;margin-top:7px;max-width:640px}
.cx-pagehead .sub b{color:var(--ink);font-weight:800}
.cx-under{height:2px;width:38px;background:var(--ember);margin-top:10px;border-radius:2px} /* the ember title underline */

/* Segmented tabs (e.g. Team overview / Approvals / Email previews) */
.cx-tabs{display:flex;gap:4px;background:#fff;border:1px solid var(--hairline);border-radius:10px;padding:4px}
.cx-tabs button{border:0;background:transparent;font-family:inherit;font-weight:700;font-size:13px;color:var(--grey);padding:8px 14px;border-radius:7px;cursor:pointer}
.cx-tabs button.active{background:var(--plum);color:#fff}
.cx-tabs .count{display:inline-block;margin-left:6px;background:var(--ember);color:#fff;border-radius:999px;font-size:10px;padding:1px 6px;font-weight:800;vertical-align:middle}

/* ----------------------------------------------------------------------------
   5. CARDS
   ---------------------------------------------------------------------------- */
.cx-card{background:#fff;border:1px solid var(--hairline);border-radius:var(--radius);overflow:hidden}
.cx-card .ch{padding:15px 18px;border-bottom:1px solid var(--hairline);display:flex;align-items:center;justify-content:space-between}
.cx-card .ch h3{font-size:13.5px}
.cx-card .cb{padding:14px 18px}

/* ----------------------------------------------------------------------------
   6. STAT TILES  (the "at a glance" numbers)
   Ember reserved for the ONE tile that should pull the eye (add .alert).
   ---------------------------------------------------------------------------- */
.cx-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.cx-tiles.cols-3{grid-template-columns:repeat(3,1fr)}
.cx-tile{background:#fff;border:1px solid var(--hairline);border-radius:var(--radius);padding:16px 18px;display:block;transition:border-color .15s,box-shadow .15s}
a.cx-tile:hover{border-color:var(--violet);box-shadow:var(--shadow)}
.cx-tile .k{font-size:10.5px;color:var(--grey)}     /* pair with .mono for the label */
.cx-tile .v{font-family:var(--font-display);font-weight:500;font-size:30px;line-height:1.1;margin-top:8px;color:var(--plum)}
.cx-tile .v small{font-size:14px;color:var(--grey);font-weight:500;font-family:var(--font-body)}
.cx-tile .s{font-size:12px;color:var(--grey);margin-top:5px}
.cx-tile .go{font-size:11.5px;color:var(--violet);font-weight:700;margin-top:9px;display:inline-block}
.cx-tile.alert{border-color:rgba(255,92,43,.5)}
.cx-tile.alert .v{color:var(--ember)}

/* ----------------------------------------------------------------------------
   7. ACTION QUEUE  (the cross-module "Needs your action" list on the home page)
   Each row carries a module chip so mixed items read clearly.
   ---------------------------------------------------------------------------- */
.cx-queue{background:#fff;border:1px solid var(--hairline);border-radius:var(--radius);overflow:hidden}
.cx-qrow{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--hairline);cursor:pointer}
.cx-qrow:last-child{border-bottom:0}
.cx-qrow:hover{background:var(--paper)}
.cx-qrow .main{flex:1;min-width:0}
.cx-qrow .main .t{font-weight:700;font-size:13.5px}
.cx-qrow .main .d{color:var(--grey);font-size:12px;margin-top:2px}
.cx-qrow .go{color:var(--violet);font-weight:800;font-size:18px;flex:0 0 auto}

/* Module chip - one muted colour family per module, so the eye can group. */
.cx-chip{flex:0 0 auto;font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:4px 9px;border-radius:6px;min-width:82px;text-align:center;background:var(--plum-tint);color:var(--plum)}
.cx-chip.leave{background:rgba(107,31,179,.10);color:var(--violet)}
.cx-chip.attendance{background:var(--info-bg);color:var(--info)}
.cx-chip.appraisal{background:var(--plum-tint);color:var(--plum)}
.cx-chip.asset{background:rgba(110,104,128,.12);color:var(--grey)}
.cx-chip.recruit{background:rgba(107,31,179,.10);color:var(--violet)}

/* Small ember "attention" flag used on a queue row or tile. */
.cx-flag{font-size:10.5px;font-weight:800;color:var(--ember);background:rgba(255,92,43,.08);border:1px solid rgba(255,92,43,.3);padding:3px 8px;border-radius:6px;white-space:nowrap}

/* ----------------------------------------------------------------------------
   8. STATUS PILLS  (presence + leave taxonomy - the shared status vocabulary)
   Use the SAME pill everywhere a person's state is shown so "On leave" looks
   identical in Attendance, Leave and on the home page. This is what lets the
   modules reconcile visually (e.g. approved leave shows as "On leave", never
   "Absent").
   Markup: <span class="cx-status in">In building</span>
   ---------------------------------------------------------------------------- */
.cx-status{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;padding:3px 10px;border-radius:999px;line-height:1.4}
.cx-status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.9}
.cx-status.in{color:var(--ok);background:var(--ok-bg)}          /* checked in, not out */
.cx-status.left{color:var(--rest);background:var(--rest-bg)}    /* checked in and out - left for day */
.cx-status.notin{color:var(--grey);background:var(--plum-tint)} /* expected, not in yet */
.cx-status.late{color:var(--warn);background:var(--warn-bg)}    /* in, after start time */
.cx-status.leave{color:var(--info);background:var(--info-bg)}   /* approved leave (reconciled from Leave module) */
.cx-status.absent{color:var(--stop);background:var(--stop-bg)}  /* unexplained absence */
.cx-status.rest{color:var(--rest);background:var(--rest-bg)}    /* rest day / public holiday */
/* Approval / generic outcomes reuse the same scale: */
.cx-status.approved{color:var(--ok);background:var(--ok-bg)}
.cx-status.pending{color:var(--warn);background:var(--warn-bg)}
.cx-status.rejected{color:var(--stop);background:var(--stop-bg)}

/* ----------------------------------------------------------------------------
   9. FILTER BAR  (one consistent pattern reused on every report / list view)
   Date-range picker + filter selects + applied-filter chips + actions.
   Learned once, works in every module.
   ---------------------------------------------------------------------------- */
.cx-filterbar{background:#fff;border:1px solid var(--hairline);border-radius:var(--radius);padding:14px 16px;display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.cx-field{display:flex;flex-direction:column;gap:5px}
.cx-field label{font-size:10px;color:var(--grey)} /* pair with .mono */
.cx-field input,.cx-field select{font-family:inherit;font-size:13px;color:var(--ink);background:#fff;border:1px solid var(--hairline);border-radius:var(--radius-sm);padding:8px 11px;min-width:150px}
.cx-field input:focus,.cx-field select:focus{outline:none;border-color:var(--violet)}
.cx-filterbar .spacer{flex:1}
/* Applied-filter chips (removable) sit below the bar. */
.cx-applied{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.cx-applied .chip{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;background:var(--plum-tint);color:var(--plum);border-radius:999px;padding:5px 10px}
.cx-applied .chip b{color:var(--grey);font-weight:600}
.cx-applied .chip .x{cursor:pointer;color:var(--grey);font-weight:800}

/* ----------------------------------------------------------------------------
   10. DATA TABLE  (light hairline rules, never heavy black, never splits a page)
   ---------------------------------------------------------------------------- */
.cx-table{width:100%;border-collapse:collapse;font-size:13px}
.cx-table th{text-align:left;font-size:10px;color:var(--grey);text-transform:uppercase;letter-spacing:.05em;font-weight:800;font-family:var(--font-mono);padding:10px 12px;border-bottom:2px solid var(--hairline)}
.cx-table td{padding:11px 12px;border-bottom:1px solid var(--hairline);color:var(--ink)}
.cx-table tbody tr:hover{background:var(--paper)}
.cx-table .name{font-weight:700}
.cx-table .num{text-align:right;font-family:var(--font-mono)} /* numeric columns right-aligned, mono */

/* ----------------------------------------------------------------------------
   11. BUTTONS
   Primary = ember (use once per view). Secondary = outline. Ghost = quiet.
   ---------------------------------------------------------------------------- */
.cx-btn{font-family:inherit;font-weight:800;font-size:13.5px;border-radius:var(--radius-sm);padding:11px 18px;cursor:pointer;border:1px solid transparent;display:inline-block}
.cx-btn.primary{background:var(--ember);color:#fff}
.cx-btn.primary:hover{filter:brightness(.96)}
.cx-btn.secondary{background:#fff;border-color:var(--hairline);color:var(--ink)}
.cx-btn.secondary:hover{border-color:var(--grey)}
.cx-btn.ghost{background:transparent;color:var(--violet);padding:11px 6px}

/* ----------------------------------------------------------------------------
   12. MODAL + TOAST + UTILITIES
   ---------------------------------------------------------------------------- */
.cx-scrim{position:fixed;inset:0;background:rgba(23,17,35,.45);display:none;align-items:center;justify-content:center;padding:24px;z-index:50}
.cx-scrim.show{display:flex}
.cx-modal{background:#fff;border-radius:16px;max-width:560px;width:100%;max-height:90vh;overflow:auto;box-shadow:var(--shadow-lg)}
.cx-modal .mh{background:var(--plum);color:#fff;padding:20px 22px;position:relative}
.cx-modal .mh .x{position:absolute;top:14px;right:16px;cursor:pointer;color:#C9C0DD;font-size:20px;border:0;background:0}
.cx-modal .mb{padding:20px 22px}

.cx-toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--plum);color:#fff;padding:13px 22px;border-radius:12px;font-weight:700;font-size:13.5px;opacity:0;transition:.25s;z-index:60;box-shadow:var(--shadow-lg)}
.cx-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* Small helpers */
.cx-note{font-size:11.5px;color:var(--grey);background:var(--paper);border:1px dashed var(--hairline);border-radius:10px;padding:12px 14px}
.cx-note b{color:var(--ember-label)}
.cx-muted{color:var(--grey)}
.cx-hot{color:var(--ember);font-weight:800}

/* ----------------------------------------------------------------------------
   RESPONSIVE: collapse the sidebar and stack tiles on narrow screens.
   (Prototype-level; production may use a proper off-canvas drawer.)
   ---------------------------------------------------------------------------- */
@media (max-width:820px){
  .cx-side{display:none}
  .cx-tiles,.cx-tiles.cols-3{grid-template-columns:repeat(2,1fr)}
}