/* ==========================================================================
   CLYPTUS ATS — design system
   A working instrument, not a brochure. Calm surfaces, dense information,
   one accent colour (set by the organisation) carrying all emphasis.
   Accent-derived variables are injected per-request by Site.master.
   ========================================================================== */

:root {
    /* Neutrals — a cool ink ramp, not pure grey */
    --ink:        #10151F;
    --ink-2:      #283041;
    --muted:      #667085;
    --muted-2:    #8B93A5;
    --line:       #E4E7EC;
    --line-soft:  #EEF0F4;
    --canvas:     #F6F7F9;
    --surface:    #FFFFFF;

    /* Status — muted, so they never shout over the accent */
    --ok:      #10794A;  --ok-bg:      #E6F4ED;
    --warn:    #9A6206;  --warn-bg:    #FDF3E2;
    --danger:  #B3261E;  --danger-bg:  #FCEDEC;
    --info:    #1B5E8A;  --info-bg:    #E7F1F8;

    /* Type */
    --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
    --font-body:    'Inter', system-ui, -apple-system, sans-serif;

    /* Rhythm */
    --r-sm: 6px;  --r:  9px;  --r-lg: 13px;
    --sp:   4px;
    --shadow-1: 0 1px 2px rgba(16,21,31,.05);
    --shadow-2: 0 4px 14px rgba(16,21,31,.08);
    --shadow-3: 0 12px 34px rgba(16,21,31,.13);
}

* { box-sizing: border-box; }

body {
    font-family: var(--font-body);
    background: var(--canvas);
    color: var(--ink);
    font-size: 14px;
    line-height: 1.5;
    /* numbers in tables must line up */
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
    margin: 0;
}

h1,h2,h3,h4,h5,h6, .display {
    font-family: var(--font-display);
    color: var(--ink);
    letter-spacing: -0.011em;
    font-weight: 600;
}
h3 { font-size: 1.28rem; }
h5 { font-size: 1rem; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }

code, .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .86em; }

/* Eyebrow: a small label that says what a block IS. Used sparingly. */
.eyebrow {
    font-size: .68rem; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; color: var(--muted-2);
}

/* ===================== Shell ===================== */

.shell { display: flex; min-height: 100vh; }

.sb {
    width: 244px; flex: 0 0 244px;
    background: var(--sb-bg); color: var(--sb-fg);
    display: flex; flex-direction: column;
    position: fixed; inset: 0 auto 0 0; z-index: 1040;
    border-right: 1px solid rgba(255,255,255,.05);
}
.sb-brand {
    display: flex; align-items: center; gap: 10px;
    padding: 18px 18px 14px;
    color: var(--sb-strong); text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.sb-brand:hover { text-decoration: none; color: var(--sb-strong); }
.sb-brand img { max-height: 30px; max-width: 132px; object-fit: contain; display: block; }
.sb-brand .bm { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.sb-brand .bm-org {
    font-family: var(--font-display); font-weight: 700; font-size: .96rem;
    color: var(--sb-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-brand .bm-prod {
    font-size: .64rem; letter-spacing: .13em; text-transform: uppercase;
    color: var(--accent-on-dark); font-weight: 600;
}
/* Logo mark fallback: the org's initial in the accent */
.sb-mark {
    width: 30px; height: 30px; flex: 0 0 30px; border-radius: 8px;
    background: var(--accent); color: var(--accent-fg);
    display: grid; place-items: center;
    font-family: var(--font-display); font-weight: 700; font-size: .95rem;
}

.sb-nav { padding: 10px 10px 24px; overflow-y: auto; flex: 1; }
.sb-group { margin-top: 14px; }
.sb-group-label {
    font-size: .63rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--sb-fg); opacity: .5; padding: 6px 10px 4px;
}

/* Nav item. The active state uses a left rail — the "spine" motif — rather
   than a filled block, so the sidebar stays quiet while still being obvious. */
.sb-link {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; margin-bottom: 1px;
    border-radius: var(--r-sm);
    color: var(--sb-fg); font-size: .855rem; font-weight: 500;
    text-decoration: none; position: relative;
    transition: background .12s ease, color .12s ease;
}
.sb-link:hover { background: var(--sb-hover); color: var(--sb-strong); text-decoration: none; }
.sb-link i { width: 17px; text-align: center; font-size: .98rem; opacity: .85; }
.sb-link.active {
    background: var(--sb-hover); color: var(--sb-strong); font-weight: 600;
}
.sb-link.active::before {
    content: ""; position: absolute; left: -10px; top: 6px; bottom: 6px;
    width: 3px; border-radius: 0 3px 3px 0; background: var(--accent);
}
.sb-link.active i { opacity: 1; color: var(--accent-on-dark); }
.sb-sub .sb-link { padding-left: 34px; font-size: .81rem; }

/* ===================== Topbar ===================== */

.main { flex: 1; margin-left: 244px; min-width: 0; display: flex; flex-direction: column; }

.topbar {
    height: 56px; background: var(--surface);
    border-bottom: 1px solid var(--line);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 20px; position: sticky; top: 0; z-index: 1020;
}
.topbar .crumb {
    font-size: .82rem; color: var(--muted);
    display: inline-flex; align-items: center; gap: 6px;
    min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.topbar .crumb strong { color: var(--ink); font-weight: 600; }
.topbar .crumb .crumb-ico { font-size: .95rem; color: var(--accent); opacity: .9; }
.topbar .crumb .crumb-grp { color: var(--muted); }
.topbar .crumb .crumb-sep { color: var(--line); font-weight: 400; }

/* Module 65: a page's primary action, always in the same pixel. Collapses to
   nothing when the page doesn't fill the placeholder. */
.topbar-actions { display: flex; align-items: center; gap: .4rem; margin-left: auto; }
.topbar-actions:empty { display: none; }
@media (max-width: 640px) {
    .topbar .crumb .crumb-grp, .topbar .crumb .crumb-sep { display: none; }
}

.userchip {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 10px 5px 6px; border-radius: 999px;
    border: 1px solid var(--line); background: var(--surface);
    color: var(--ink); font-size: .82rem; font-weight: 500; cursor: pointer;
}
.userchip:hover { background: var(--canvas); }
.userchip .av {
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--accent-tint); color: var(--accent-deep);
    display: grid; place-items: center; font-weight: 700; font-size: .7rem;
}

/* ============================================================
   Module 65 — content width system

   THE BUG UNDERNEATH THIS
   Every rule below used to target `.content`. Site.master wraps page content
   in `<main class="page-body">` and `.content` is applied NOWHERE — so the
   padding never applied, the 992px padding override never applied, and,
   worst, the `min-width: 0` that stops a wide table pushing past the viewport
   never applied either. That last one is why tables could run off-screen.
   `.page-body` is now the styled class and `.content` is kept as an alias so
   any page using it still works.

   THE WIDTHS
   There was no maximum, so on a 1920px monitor a two-field form was 1850px
   wide with the label at one edge and the input at the other. Pages were
   patching it individually with six different values (820, 900, 760, 420,
   280, 260). Three named choices instead of a number someone types:

     (default)  1600px  — dashboards, mixed pages
     .narrow     760px  — single-column forms
     .full        none  — wide report grids that want every pixel
   ============================================================ */
.page-body,
.content {
    padding: 22px;
    flex: 1;
    min-width: 0;
    width: 100%;
    max-width: var(--content-max, 1600px);
    margin-inline: auto;
}
.page-body.narrow, .content.narrow { --content-max: 760px; }
.page-body.wide,   .content.wide   { --content-max: 1280px; }
.page-body.full,   .content.full   { --content-max: none; }

/* Flex children default to min-width:auto, which makes a wide table push past
   the viewport instead of scrolling. Force them to shrink. */
.main, .page-body, .content, .card, .table-responsive { min-width: 0; }
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------------------------------------------------------------------
   Module 76 — this used to be a blanket `.card { overflow: hidden }`.

   The intent was narrow and correct: a wide table inside a card should
   scroll inside the rounded corners rather than spill past them. The
   blast radius was the whole application. `overflow` other than
   `visible` CLIPS every absolutely-positioned descendant, so on every
   card in the product it silently cut off:

       * every Bootstrap dropdown menu   (.dropdown-menu)
       * every tooltip and popover
       * the searchable-select options panel

   That is the "Status" menu on PostJob.aspx appearing as a sliver
   behind the next job card. Nothing was wrong with that page — the
   menu opened, rendered, and was clipped by its own card.

   The rule now applies only where a scroller actually exists:
     * `.has-scroller` is added at runtime by guardOverflow() in
       reports.js whenever it wraps a table, and
     * the :has() rule below catches scrollers written into the markup.
       :has() is unsupported in older browsers; there the card simply
       keeps visible overflow, which is the safe direction to fail.
   --------------------------------------------------------------------- */
.card { overflow: visible; }

.card.has-scroller { overflow: hidden; }
.card:has(> .table-responsive),
.card:has(> .rpt-autoscroll),
.card:has(> .card-body > .table-responsive),
.card:has(> .card-body > .rpt-autoscroll) { overflow: hidden; }

/* A card that clips must still not clip an OPEN menu inside it. When one
   is open the card yields, and the scroller keeps its own rounding so
   the corners still look right.

   The doubled `.card.card` is deliberate. Without it these land at
   specificity (0,3,0) — exactly tying
   `.card:has(> .card-body > .table-responsive)` above, so which one won
   would depend on nothing but the order of the lines in this file. That
   is precisely the sort of accident that put the original bug here.
   Doubling the class takes these to (0,4,0) and makes "an open menu is
   never clipped" a fact rather than a coincidence. */
.card.card:has(.dropdown-menu.show),
.card.card:has(.ss-wrap.ss-open),
.card.card:has(.dropdown-menu.show) .card,
.card.card:has(.ss-wrap.ss-open) .card { overflow: visible; }

.card > .table-responsive,
.card > .rpt-autoscroll { border-radius: inherit; }

.page-foot {
    padding: 14px 22px; color: var(--muted-2); font-size: .76rem;
    border-top: 1px solid var(--line-soft);
}

/* ===================== Surfaces ===================== */

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-1);
}
.card-header {
    background: var(--surface);
    border-bottom: 1px solid var(--line-soft);
    font-weight: 600; font-size: .9rem;
    padding: 12px 16px;
    border-radius: var(--r) var(--r) 0 0;
}
.card-body { padding: 16px; }

/* Page header: title + actions, with an eyebrow that names the section */
.page-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.page-head h3 { margin: 2px 0 2px; }
.page-head .sub { color: var(--muted); font-size: .85rem; margin: 0; }

/* ===================== Stat tiles ===================== */

.tile {
    display: block; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r); padding: 14px 16px; text-decoration: none;
    color: var(--ink); transition: border-color .12s, box-shadow .12s, transform .12s;
}
.tile:hover {
    border-color: var(--accent-soft); box-shadow: var(--shadow-2);
    transform: translateY(-1px); text-decoration: none; color: var(--ink);
}
.tile .t-label { font-size: .74rem; color: var(--muted); font-weight: 500; }
.tile .t-value {
    font-family: var(--font-display); font-size: 1.72rem; font-weight: 700;
    line-height: 1.15; margin-top: 2px; letter-spacing: -0.02em;
}
.tile .t-foot { font-size: .72rem; color: var(--accent); font-weight: 600; margin-top: 2px; }

/* ===================== SIGNATURE: the pipeline spine =====================
   Recruitment is a pipeline, so stages render as connected nodes rather than
   a flat badge. The filled portion shows how far a candidate has travelled.  */

.spine { display: flex; align-items: flex-start; gap: 0; overflow-x: auto; padding: 4px 0 2px; }
.spine-node { display: flex; flex-direction: column; align-items: center; min-width: 78px; position: relative; }
.spine-node::before,
.spine-node::after {
    content: ""; position: absolute; top: 8px; height: 2px; background: var(--line);
}
.spine-node::before { left: 0;   width: 50%; }
.spine-node::after  { right: 0;  width: 50%; }
.spine-node:first-child::before,
.spine-node:last-child::after { display: none; }

.spine-dot {
    width: 11px; height: 11px; border-radius: 50%;
    background: var(--surface); border: 2px solid var(--line);
    position: relative; z-index: 1; margin-bottom: 7px;
}
.spine-label {
    font-size: .68rem; color: var(--muted-2); text-align: center;
    line-height: 1.25; padding: 0 4px; font-weight: 500;
}
/* Completed */
.spine-node.done::before, .spine-node.done::after { background: var(--accent-soft); }
.spine-node.done .spine-dot { background: var(--accent-soft); border-color: var(--accent-soft); }
.spine-node.done .spine-label { color: var(--muted); }
/* Where they are now */
.spine-node.here::before { background: var(--accent-soft); }
.spine-node.here .spine-dot {
    background: var(--accent); border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-tint);
}
.spine-node.here .spine-label { color: var(--accent-deep); font-weight: 700; }
/* Terminal negative stage (rejected etc.) */
.spine-node.stopped .spine-dot {
    background: var(--danger); border-color: var(--danger);
    box-shadow: 0 0 0 4px var(--danger-bg);
}
.spine-node.stopped .spine-label { color: var(--danger); font-weight: 700; }

/* ===================== Candidate rows ===================== */

.crow {
    display: flex; align-items: center; gap: 12px;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r); padding: 11px 14px; margin-bottom: 7px;
    transition: border-color .12s, box-shadow .12s;
}
.crow:hover { border-color: var(--accent-soft); box-shadow: var(--shadow-2); }
.avatar {
    width: 36px; height: 36px; flex: 0 0 36px; border-radius: 9px;
    background: var(--accent-tint); color: var(--accent-deep);
    display: grid; place-items: center;
    font-family: var(--font-display); font-weight: 700; font-size: .82rem;
}
.crow .cname { font-weight: 600; font-size: .92rem; }
.crow .cmeta { font-size: .77rem; color: var(--muted); }

.chip {
    display: inline-block; padding: 2px 8px; border-radius: 5px;
    background: var(--canvas); border: 1px solid var(--line);
    font-size: .72rem; color: var(--ink-2); font-weight: 500;
    margin: 0 3px 3px 0;
}
.chip-accent { background: var(--accent-tint); border-color: var(--accent-soft); color: var(--accent-deep); }

/* ===================== Badges / status ===================== */

.badge { font-weight: 600; font-size: .7rem; padding: 3px 8px; border-radius: 5px; letter-spacing: .01em; }
.bg-success { background: var(--ok-bg)     !important; color: var(--ok)     !important; }
.bg-warning { background: var(--warn-bg)   !important; color: var(--warn)   !important; }
.bg-danger  { background: var(--danger-bg) !important; color: var(--danger) !important; }
.bg-info    { background: var(--info-bg)   !important; color: var(--info)   !important; }
.bg-primary { background: var(--accent)    !important; color: var(--accent-fg) !important; }
.bg-secondary { background: var(--canvas)  !important; color: var(--muted)  !important; border: 1px solid var(--line); }

/* ===================== Forms ===================== */

.form-label {
    font-size: .74rem; font-weight: 600; color: var(--ink-2);
    margin-bottom: 3px; letter-spacing: .005em;
}
.form-control, .form-select {
    border: 1px solid var(--line); border-radius: var(--r-sm);
    font-size: .875rem; padding: 7px 10px; color: var(--ink);
    background: var(--surface); transition: border-color .12s, box-shadow .12s;
}
.form-control:focus, .form-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-tint);
    outline: none;
}
.form-control::placeholder { color: var(--muted-2); }
.form-text { font-size: .74rem; color: var(--muted); }

/* Search field: the most-used control in the app, so it gets weight */
.searchbar { position: relative; }
.searchbar .form-control { padding-left: 36px; height: 42px; font-size: .92rem; border-radius: var(--r); }
.searchbar i {
    position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
    color: var(--muted-2); font-size: 1rem; pointer-events: none;
}

/* ===================== Buttons ===================== */

.btn {
    font-size: .845rem; font-weight: 600; border-radius: var(--r-sm);
    padding: 7px 14px; transition: background .12s, border-color .12s, transform .06s;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
    background: var(--accent); border-color: var(--accent); color: var(--accent-fg);
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-fg);
}
.btn-outline-primary { color: var(--accent); border-color: var(--accent-soft); background: transparent; }
.btn-outline-primary:hover { background: var(--accent-tint); border-color: var(--accent); color: var(--accent-deep); }
.btn-outline-secondary { color: var(--ink-2); border-color: var(--line); background: var(--surface); }
.btn-outline-secondary:hover { background: var(--canvas); color: var(--ink); border-color: var(--muted-2); }
.btn-sm { padding: 5px 10px; font-size: .79rem; }

/* ===================== Tables ===================== */

.table { font-size: .85rem; color: var(--ink); margin-bottom: 0; }
.table > thead > tr > th {
    font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--muted); font-weight: 700; background: var(--canvas);
    border-bottom: 1px solid var(--line); padding: 9px 12px; white-space: nowrap;
}
.table > tbody > tr > td { padding: 9px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.table > tbody > tr:hover > td { background: var(--accent-tint); }
.table-sm > tbody > tr > td, .table-sm > thead > tr > th { padding: 6px 10px; }

/* Keep rows one line tall: give text columns room, stop short columns from
   squeezing long text into three-line stacks. */
.table td.col-wide  { min-width: 200px; }
.table td.col-mid   { min-width: 150px; }
.table td.col-tight { white-space: nowrap; width: 1%; }
.table th.col-tight { white-space: nowrap; width: 1%; }
.table .cell-name { font-weight: 600; white-space: nowrap; }
.table .cell-sub  { color: var(--muted); font-size: .78rem; }

/* ===================== Alerts ===================== */

.alert { border: 1px solid transparent; border-radius: var(--r); font-size: .85rem; padding: 11px 14px; }
.alert-success { background: var(--ok-bg);     border-color: #C4E6D5; color: var(--ok); }
.alert-warning { background: var(--warn-bg);   border-color: #F2DDB4; color: var(--warn); }
.alert-danger  { background: var(--danger-bg); border-color: #F3CFCD; color: var(--danger); }
.alert-info    { background: var(--info-bg);   border-color: #C8DFEE; color: var(--info); }
.alert-secondary { background: var(--canvas); border-color: var(--line); color: var(--muted); }

/* ===================== Empty states =====================
   An empty screen is an invitation to act, not a dead end. */
.empty { text-align: center; padding: 44px 20px; }
.empty i { font-size: 1.9rem; color: var(--muted-2); }
.empty h6 { font-family: var(--font-display); margin: 10px 0 3px; color: var(--ink); font-weight: 600; }
.empty p { color: var(--muted); font-size: .85rem; margin-bottom: 14px; }

/* ===================== Accessibility & motion ===================== */

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 3px;
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
    .tile:hover { transform: none; }
}

/* ===================== Responsive ===================== */

.sb-toggle { display: none; background: none; border: 0; color: var(--ink); font-size: 1.3rem; }

/* Laptop widths (1366px is the common case): give the content back some room
   so tables fit at 100% zoom instead of forcing the user to zoom out. */
@media (max-width: 1440px) {
    .sb   { width: 214px; flex: 0 0 214px; }
    .main { margin-left: 214px; }
    .content { padding: 18px 16px; }
    .table > thead > tr > th { padding: 8px 10px; }
    .table > tbody > tr > td { padding: 8px 10px; }
}

@media (max-width: 992px) {
    .sb { transform: translateX(-100%); transition: transform .2s ease; }
    .sb.open { transform: translateX(0); box-shadow: var(--shadow-3); }
    .main { margin-left: 0; }
    .sb-toggle { display: block; }
    .page-body, .content { padding: 16px 14px; }
    .sb-backdrop {
        position: fixed; inset: 0; background: rgba(16,21,31,.45);
        z-index: 1035; display: none;
    }
    .sb-backdrop.show { display: block; }
}