/* ============================================================================
   /includes/_gridos_tokens.css
   Gridos — ONE source of truth for palette, type and shell components.

   Load this FIRST, before any module stylesheet, in all five portals:
     hrms/  ess/  candidate/  employer/  admin/

     <link rel="stylesheet" href="<?= SITE_URL ?>/includes/_gridos_tokens.css">

   ----------------------------------------------------------------------------
   WHY THIS FILE EXISTS

   The palette was never really the problem. HRMS, ESS, includes/theme.css and
   assets/css/saas.css already agreed on every value: #0b1118 background,
   #131c27 panel, #3a9fd1 brand, #14b8b8 accent, Inter / Fraunces / JetBrains
   Mono, 10px radius. Three things had drifted:

     1. NAMING. HRMS/ESS say --panel --ink --line --brand --good --danger
        --faint. candidate/employer/admin say --card --text --border-soft
        --accent --ok --err --dim. Same colours, different words, so a component
        copied between portals silently resolved to nothing.

     2. candidate/_theme.php encoded a DIFFERENT brand (#43b2c1 cyan instead of
        #3a9fd1 blue) plus Tailwind-family semantics (#34d399, #f59e0b, #f87171,
        #ec4899, #a78bfa). It was written to fix the inconsistency and was then
        never included by a single file — the only mention of its name anywhere
        in the tree is inside its own docblock. Adopting it as-is would have
        standardised the drift rather than removed it.

     3. admin used #0d7377 and #059669, off-palette entirely.

   So: values are declared ONCE below, under the canonical HRMS names. Every
   other name is an ALIAS pointing at the same custom property with var(). There
   is no second copy of any hex. Change --brand here and all five portals move.

   ----------------------------------------------------------------------------
   WHAT IT DOES NOT DO

   It does not delete any per-page <style> block. Those still override this file
   wherever they hardcode a hex — candidate carries 3,744 lines of inline CSS
   across 37 pages, employer 1,319 across 50. Loading this file gets the shell,
   nav, cards, buttons and both themes consistent immediately; sweeping the
   hardcoded hex to var() is the follow-up, and can be done page by page without
   breaking anything.
   ============================================================================ */


/* ============================================================================
   1. CANONICAL PALETTE — dark (default)
   The only place a colour is written down.
   ============================================================================ */
:root{
  /* surfaces */
  --bg:#0b1118;
  --panel:#131c27;
  --raised:#1c2836;
  --line:rgba(255,255,255,.07);
  --line-strong:rgba(255,255,255,.14);

  /* text */
  --ink:#e8eef6;
  --ink-2:#c2cdda;
  --muted:#8a99ad;
  --faint:#7c8b9e;   /* 4.9:1 on a dark panel; it was #5b6878 at 3.0 */

  /* brand + semantics */
  --brand:#3a9fd1;
  --brand-ink:#5cc0ee;   /* brand, readable as text on a dark surface */
  --good-ink:#57c79b; --warn-ink:#e8b76a; --danger-ink:#e79a9a;   /* status, readable as text on dark */
  --brand-dk:#2f8cbb;
  --brand-2:#14b8b8;
  --good:#3aa97a;
  --warn:#e0a14a;
  --danger:#d96a6a;
  --info:#7aa9d6;
  --accent-pink:#d67d8a;
  --accent-violet:#9b8ed6;
  --accent-amber:#d6a25f;

  /* states */
  --hover:rgba(255,255,255,.04);
  --active:rgba(58,159,209,.12);
  --shadow:0 12px 40px rgba(0,0,0,.45);
  /* CHANGED 2026-08-02 — was linear-gradient(135deg,var(--brand-btn,#1c6f9c),var(--brand-btn-dk,#17607f)).
     The candidate portal drives almost every primary control from --gradient:
     buttons, the CV-strength ring, section headings, the "Improve CV" and
     "Edit Profile" buttons, the logo tile. Blue -> teal reads as TEAL at button
     size, which is why the portal looked teal-branded while HRMS and ESS looked
     blue — those two use a FLAT var(--brand) for primary actions.

     Kept as a gradient so nothing loses its depth, but held inside the blue
     family. One line, and every primary control in all 23 candidate pages moves
     onto the system colour without editing a single page.

     --brand-2 (#14b8b8) is still the teal accent and is unchanged; it just stops
     being the thing users read as "the brand colour".

     To go fully flat like HRMS, set this to: var(--brand) */
  /* THE PRIMARY FILL, which is not the same thing as the brand colour.
     White text sits on this; --brand sits on the page as text and as an
     accent. They were one value, which is why the buttons failed in the
     light theme while the brand itself was right. */
  --brand-btn:#3a9fd1; --brand-btn-dk:#2f8cbb;
  --gradient:linear-gradient(135deg,var(--brand-btn),var(--brand-btn-dk));

  /* geometry */
  --radius:10px;
  --radius-sm:7px;
  --radius-lg:14px;
  --sidebar-w:260px;
  --topbar-h:60px;

  /* type */
  --ff:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --serif:'Fraunces',Georgia,serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;
  --ar:'IBM Plex Sans Arabic','Noto Naskh Arabic','Sakkal Majalla','Geeza Pro','Inter',sans-serif;
}

/* ----------------------------------------------------------------------------
   1b. LIGHT THEME — neutrals only.
   Brand and semantic hues are identical in both themes, which is why they are
   not repeated here. Every alias in section 2 is a var() reference, so the
   whole system flips from these thirteen lines.
   ---------------------------------------------------------------------------- */
html[data-theme="light"]{
  --bg:#f5f6f8;
  --panel:#ffffff;
  --raised:#fbfbfd;
  --line:rgba(14,22,32,.08);
  --line-strong:rgba(14,22,32,.14);
  --ink:#0e1620;
  --ink-2:#2c3845;
  --muted:#5b6b80;
  /* 4.6:1 on white. It was #8c9aae, which is 2.86:1 — under the 4.5 a person
     needs to read small text, and this is the colour of every section label,
     date and caption in the light theme. */
  --faint:#667689;
  --brand-ink:#1c6f9c;   /* brand, readable as text on a light surface (5.5:1) */
  --good-ink:#1f7a52; --warn-ink:#8a5a10; --danger-ink:#a33a3a;   /* status, readable as text on light (5:1+) */
  --hover:rgba(14,22,32,.04);
  --active:rgba(58,159,209,.10);
  --shadow:0 6px 24px rgba(14,22,32,.08);
  --brand:#1c6f9c;   /* the same blue as buttons and tabs; #3a9fd1 here made icons two blues */
  --accent-violet:#6d5bd0;   /* 5:1 on white; #9b8ed6 was 2.6 */
  --brand-dk:#17607f;

  /* light-fill-fix ---------------------------------------------------------
     THE GRADIENT IS A FILL, AND IN LIGHT MODE IT WAS TOO PALE TO CARRY WHITE.
     Every primary button, active pill and step marker is white text on
     --gradient. Against #3a9fd1..#2f8cbb that is 3.3-3.6:1; a person needs
     4.5. Darkening the fill here keeps the white text white and takes it to
     5.4:1 — the alternative, black text, makes a live button look disabled.
     The dark theme keeps the original pair. */
  --brand-btn:#1c6f9c; --brand-btn-dk:#17607f;   /* white on this is 5.4:1 */
  --gradient:linear-gradient(135deg,var(--brand-btn),var(--brand-btn-dk));

  /* A LINE AT 20% ALPHA IS NOT A LINE ON WHITE.
     These are written once as rgba(<colour>,.2) and used on both themes. Over
     a dark panel they read as a soft edge; over white they measure 1.14:1,
     which is invisible — the border is in the markup and absent on screen.
     Same hues, enough alpha to actually draw. */
  --ring-good:rgba(16,122,82,.55);
  --ring-warn:rgba(138,90,16,.55);
  --ring-danger:rgba(163,58,58,.55);
  --ring-brand:rgba(28,111,156,.45);
}



/* ============================================================================
   2. ALIASES — the candidate / employer / admin / saas naming scheme.
   Pure references. No values. This is what makes a component copied from HRMS
   into candidate resolve correctly, and vice versa.
   ============================================================================ */
:root{
  /* surfaces */
  --bg-2:        var(--raised);
  --card:        var(--panel);
  --card-2:      var(--raised);
  --bg-base:     var(--bg);
  --bg-surface:  var(--panel);
  --bg-surface-2:var(--raised);
  --dark:        var(--raised);

  /* borders */
  --border-soft: var(--line);
  --border:      var(--line-strong);

  /* text */
  --text:        var(--ink);
  --text-main:   var(--ink);
  --text-dim:    var(--muted);
  --dim:         var(--faint);

  /* brand + semantics */
  --accent:      var(--brand);
  --accent-2:    var(--brand-2);
  --accent2:     var(--brand-2);
  --accent-ink:  var(--brand-ink);
  --ok:          var(--good);
  --success:     var(--good);
  --err:         var(--danger);
  --red:         var(--danger);
  --pink:        var(--accent-pink);
  --violet:      var(--accent-violet);
  --amber:       var(--accent-amber);

  /* sidebar (admin naming) */
  --sb-bg:         var(--panel);
  --sb-text:       var(--muted);
  --sb-text-hover: var(--ink);

  /* type (saas.css naming) */
  --fs: var(--serif);
}


/* ============================================================================
   3. BASE
   ============================================================================ */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--ff);
  background:var(--bg);
  color:var(--ink);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
html[dir="rtl"] body{font-family:var(--ar)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
.mono{font-family:var(--mono)}
.serif,.fs{font-family:var(--serif)}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:6px;border:2px solid var(--bg)}
::selection{background:rgba(58,159,209,.35);color:#fff}

/* icon helper — HRMS .i, used identically everywhere */
.i{width:16px;height:16px;flex-shrink:0;stroke:currentColor;fill:none;
   stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.i-lg{width:18px;height:18px}
.i-sm{width:14px;height:14px}


/* ============================================================================
   4. SHELL
   HRMS/ESS wrap in .app ; employer/candidate wrap in .layout. Both are
   supported so no markup has to change.
   ============================================================================ */
/* FIXED 2026-08-02 — this block used to force height:100vh + overflow:hidden on
   .app AND .layout, and the same on .main, with scrolling delegated to a .page
   child. That is the HRMS/ESS model and it is correct THERE, because those
   portals always render <div class="page"> inside <main>.

   The candidate portal does not. 13 of its 14 shell pages have .main with NO
   .page child — dashboard, applications, profile, matches, exams, interviews,
   contracts, offer_letters, onboarding, onboarding_tasks_view, video_interviews.
   Their own model is:

       .layout{display:grid;grid-template-columns:260px 1fr;min-height:100vh}
       .main{padding:28px 36px 60px;max-width:1600px}      <- no height, no overflow

   i.e. the whole document scrolls normally. Imposing the fixed-height model on
   them clipped every page at the viewport with no scrollable child, so scrolling
   died outright.

   The fixed-height model is now applied ONLY where a .page child actually
   exists, via :has(). Everything else keeps its own scroll behaviour. Grid
   columns still apply everywhere, which was the part that was wanted. */
.app,.layout{
  display:grid;
  grid-template-columns:var(--sidebar-w) 1fr;
  min-height:100vh;
}
/* REMOVED 2026-08-02 — the ":has(.page) => height:100vh; overflow:hidden" model.

   I added it assuming .page meant "this portal scrolls its content pane like
   HRMS". It does not. Checking the shells:

       employer/_employer_shell.css   .layout{min-height:100vh}
                                      .main{padding:28px 36px 60px}
       candidate (inline)             .layout{min-height:100vh}
                                      .main{padding:28px 36px 60px}

   Neither sets a height or an overflow — BOTH scroll the document. Only HRMS and
   ESS use the fixed-pane model, and they declare it themselves in their own
   _shell.css. So this file never needed to declare it, and every time it did it
   broke a page that was not written for it: candidate scrolling died, then
   video_interviews overlapped, then video_interviews stretched.

   A token file should describe colour, type and spacing. Layout mechanics belong
   to each portal's own shell. Removed rather than patched again. */

.main{min-width:0}
/* .page keeps its padding wherever it appears, but is NOT made a scroll
   container here — HRMS and ESS already do that in their own _shell.css. */
.main > .page{min-width:0}
/* no .page child: the document scrolls, which is the candidate portal's model.
   Padding is deliberately NOT set here — candidate pages set their own. */
.main:not(:has(> .page)){
  display:block;
  height:auto;
  overflow:visible;
}


/* ============================================================================
   5. TOPBAR   (.top in HRMS/ESS, .topbar in candidate)
   ============================================================================ */
.top,.topbar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:14px;
  background:var(--panel);
  border-bottom:1px solid var(--line);
  padding:0 22px;
  min-width:0;
  min-height:var(--topbar-h);
}
.top .crumbs,.topbar .crumbs{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);min-width:0}
.top .crumbs b,.topbar .crumbs b{color:var(--ink);font-weight:600}
.top .spacer,.topbar .spacer{flex:1}
.top .actions,.topbar .actions{display:flex;align-items:center;gap:8px;flex-shrink:0}

.icon-btn{
  position:relative;width:38px;height:38px;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:var(--panel);color:var(--ink);
  display:grid;place-items:center;cursor:pointer;
  transition:border-color .15s,background .15s;
}
.icon-btn:hover{border-color:var(--brand-ink,var(--brand));background:var(--hover)}


/* ============================================================================
   6. NAVIGATION — the "tabs" consistency fix.

   Four portals had four vocabularies for the same control:
     hrms/ess    .side-link
     candidate   .sb-link
     employer    .navlink
     admin       .nav-item
   All four are styled identically here. Nothing has to be renamed, and a link
   copied between portals now looks right immediately.
   ============================================================================ */
.side-link,.sb-link,.navlink,.nav-item{
  display:flex;align-items:center;gap:11px;
  padding:9px 12px;
  margin-inline:8px;
  border-radius:var(--radius-sm);
  color:var(--muted);
  font-size:13.5px;font-weight:500;
  cursor:pointer;
  transition:background .14s,color .14s;
  /* logical properties: correct in LTR and RTL with no mirror rules */
  border-inline-start:2px solid transparent;
}
.side-link:hover,.sb-link:hover,.navlink:hover,.nav-item:hover{
  background:var(--hover);color:var(--ink);
}
.side-link.active,.sb-link.active,.navlink.active,.nav-item.active,
.side-link.on,.sb-link.on,.navlink.on,.nav-item.on{
  background:var(--active);
  color:var(--brand-ink,var(--brand));
  border-inline-start-color:var(--brand-ink,var(--brand));
  font-weight:600;
}
.side-link .i,.sb-link .i,.navlink .i,.nav-item .i{opacity:.85}
.side-link.active .i,.sb-link.active .i,.navlink.active .i,.nav-item.active .i{opacity:1}

/* Section captions above a group of links.
   HRMS uses .side-section as the CONTAINER and puts the caption in .side-label
   inside it; text-transform and letter-spacing inherit, so styling the container
   as a caption put every link in that group in uppercase. Skip those. */
.side-section:not(:has(> .side-label)),.sb-section,.nav-section,.side-label{
  padding:16px 20px 6px;
  font-size:10.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--faint);
}

/* sidebar container — .side (hrms/ess), .sidebar (employer/candidate/admin) */
.side,.sidebar{
  background:var(--panel);
  border-inline-end:1px solid var(--line);
  display:flex;flex-direction:column;
  min-height:0;overflow-y:auto;
}


/* ============================================================================
   7. CARDS, BUTTONS, CHIPS
   ============================================================================ */
.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
}
.card-h{
  display:flex;align-items:center;gap:10px;
  margin:-18px -18px 16px;padding:14px 18px;
  border-bottom:1px solid var(--line);
  font-weight:600;font-size:14px;
}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;
  border-radius:var(--radius-sm);
  border:1px solid var(--line-strong);
  background:var(--raised);color:var(--ink);
  font-size:13.5px;font-weight:500;cursor:pointer;
  transition:background .14s,border-color .14s,opacity .14s;
  white-space:nowrap;
}
.btn:hover{background:var(--hover);border-color:var(--brand-ink,var(--brand))}
.btn-primary,.btn.primary{background:var(--brand-btn,var(--brand));border-color:var(--brand-btn,var(--brand));color:#fff}
.btn-primary:hover,.btn.primary:hover{background:var(--brand-btn-dk,var(--brand-dk));border-color:var(--brand-btn-dk,var(--brand-dk))}
.btn-danger,.btn.danger{background:#c93c3c;border-color:#c93c3c;color:#fff}
.btn-ghost,.btn.ghost{background:transparent;border-color:var(--line)}
.btn-sm{padding:6px 11px;font-size:12.5px}
.btn:disabled{opacity:.5;cursor:not-allowed}

.chip,.pill,.badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 10px;border-radius:999px;
  font-size:11.5px;font-weight:600;
  background:var(--raised);color:var(--ink-2);
  border:1px solid var(--line);
}
.chip.good,.pill.good,.badge.good      {background:rgba(58,169,122,.15);color:var(--good-ink,var(--good));border-color:transparent}
.chip.warn,.pill.warn,.badge.warn      {background:rgba(224,161,74,.15);color:var(--warn-ink,var(--warn));border-color:transparent}
.chip.danger,.pill.danger,.badge.danger{background:rgba(217,106,106,.15);color:var(--danger-ink,var(--danger));border-color:transparent}
.chip.brand,.pill.brand,.badge.brand   {background:var(--active);color:var(--brand-ink,var(--brand));border-color:transparent}


/* ============================================================================
   8. FORMS
   ============================================================================ */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field > label{font-size:12.5px;font-weight:600;color:var(--muted)}
.field input,.field select,.field textarea,
input.inp,select.inp,textarea.inp{
  background:var(--bg);
  border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);
  padding:9px 12px;
  color:var(--ink);
  font-size:13.5px;
  width:100%;
  transition:border-color .14s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--brand-ink,var(--brand));
}
.field input::placeholder,.field textarea::placeholder{color:var(--faint)}


/* ============================================================================
   9. PAGE HEAD + EMPTY STATE
   ============================================================================ */
.page-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.page-head h1{font-family:var(--serif);font-weight:400;font-size:26px;margin:0;color:var(--ink)}
.page-sub{color:var(--muted);font-size:13px;margin-top:3px}
.page-actions{margin-inline-start:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}

.empty{text-align:center;padding:44px 20px;color:var(--muted)}
.empty h3{color:var(--ink);font-weight:600;margin:0 0 6px;font-size:15px}


/* ============================================================================
   10. RESPONSIVE — one breakpoint, same behaviour in all five portals
   ============================================================================ */
@media (max-width:900px){
  .app,.layout{grid-template-columns:1fr}
  html[dir="rtl"] .app,html[dir="rtl"] .layout{grid-template-columns:1fr}
  .side,.sidebar{
    position:fixed;inset-block:0;inset-inline-start:0;
    width:min(84vw,var(--sidebar-w));
    z-index:70;
    transform:translateX(-100%);
    transition:transform .22s ease;
    box-shadow:var(--shadow);
  }
  html[dir="rtl"] .side,html[dir="rtl"] .sidebar{transform:translateX(100%)}
  .side.open,.sidebar.open{transform:translateX(0)}
  .main > .page,.page{padding:18px 16px}
  .page-head h1{font-size:21px}
}