/* ============================================================================
   Clyptus ATS — appearance preferences                      assets/prefs.css
   ----------------------------------------------------------------------------
   Dark mode, text size and page zoom. Loaded LAST so it wins.

   WHY THIS IS SMALL
   Two things already existed and did most of the work:

     1. theme.css keeps its neutrals in eight variables (--ink, --muted,
        --line, --canvas, --surface and friends) and references them 162
        times against only 20 hard-coded hex values. Redefining those eight
        flips nearly the whole application.

     2. Bootstrap here is 5.3.3, which has native dark support built in.
        Setting data-bs-theme="dark" on <html> re-themes every card, table,
        form control, dropdown, modal, alert and badge without a line from
        us. This file sets that attribute alongside its own.

   So dark mode is a palette swap, not a rewrite. What it ISN'T is complete:
   288 hard-coded hex values remain inside individual pages' <style> blocks,
   and each is a light patch until it's tokenised. The worst are fixed; the
   rest are listed in DARKMODE.md.

   THE THREE CONTROLS
     data-theme  = light | dark          (also sets data-bs-theme)
     data-text   = s | m | l | xl        scales TYPE only, layout reflows
     data-zoom   = 90 | 100 | 110 | 125  scales EVERYTHING, like Ctrl +/-
   ============================================================================ */

/* ===========================================================================
   1. Dark palette
   ---------------------------------------------------------------------------
   Not pure black. #0F1218 at the back with lifted card surfaces keeps the
   depth cues that a flat black destroys, and reduces the halation that makes
   white-on-black text vibrate.

   Measured against --surface #171B24 (WCAG AA needs 4.5:1 for body text).
   These are computed, not estimated — every value passes AA, including the
   one I expected to fail:

     --ink     #E8EAF0 = 14.33:1     --ok     #6EE7A8 = 11.21:1
     --ink-2   #C3C8D4 = 10.28:1     --warn   #F0C46A = 10.51:1
     --muted   #98A0B0 =  6.56:1     --danger #F79389 =  7.79:1
     --muted-2 #7C8494 =  4.58:1     --info   #7FC2EC =  8.89:1

   Each status colour was also checked against its own tinted fill
   (success 9.30, warning 8.77, danger 7.03, info 7.71) — those pairings are
   what a badge or an alert actually renders, and they are easy to get wrong
   by checking only against the page background.
   =========================================================================== */
[data-theme="dark"] {
    --ink:        #E8EAF0;
    --ink-2:      #C3C8D4;
    --muted:      #98A0B0;
    --muted-2:    #7C8494;
    --line:       #2A303C;
    --line-soft:  #222732;
    --canvas:     #0F1218;
    --surface:    #171B24;

    /* Status colours re-tuned: the light-mode ink shades are unreadable on a
       dark fill, and the light fills glow. Foregrounds lifted, fills dropped. */
    --ok:      #6EE7A8;  --ok-bg:      #12301F;
    --warn:    #F0C46A;  --warn-bg:    #35280D;
    --danger:  #F79389;  --danger-bg:  #3A1B18;
    --info:    #7FC2EC;  --info-bg:    #12293A;

    --shadow-1: 0 1px 2px rgba(0,0,0,.45);
    --shadow-2: 0 4px 14px rgba(0,0,0,.5);
    --shadow-3: 0 12px 34px rgba(0,0,0,.62);

    color-scheme: dark;   /* native scrollbars, form controls, date pickers */
}

/* The accent is set per-request by Site.master from Branding, so it can be any
   hue the organisation picked. A colour chosen to look right on white is
   usually too dark on #0F1218, so lift the on-dark variants. --accent itself
   is left alone: buttons keep the brand colour. */
[data-theme="dark"] {
    --accent-tint:    rgba(255,255,255,.07);
    --accent-soft:    #A9B6FF;
    --accent-on-dark: #A9B6FF;
}

/* ---- surfaces that were white by name rather than by token --------------- */
[data-theme="dark"] body { background: var(--canvas); color: var(--ink); }

[data-theme="dark"] .card,
[data-theme="dark"] .card-header.bg-white,
[data-theme="dark"] .bg-white,
[data-theme="dark"] .topbar,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .list-group-item,
[data-theme="dark"] .accordion-item,
[data-theme="dark"] .offcanvas {
    background-color: var(--surface) !important;
    color: var(--ink);
    border-color: var(--line);
}

[data-theme="dark"] .bg-light,
[data-theme="dark"] .table-light,
[data-theme="dark"] thead.table-light th {
    background-color: var(--line-soft) !important;
    color: var(--ink) !important;
}

[data-theme="dark"] .border,
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-start,
[data-theme="dark"] .border-end { border-color: var(--line) !important; }

[data-theme="dark"] .text-dark  { color: var(--ink) !important; }
[data-theme="dark"] .text-muted { color: var(--muted) !important; }
[data-theme="dark"] hr          { border-color: var(--line); opacity: 1; }

/* Form controls: Bootstrap 5.3 handles most of this, but controls that were
   given an explicit white background in page CSS need forcing. */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .input-group-text {
    background-color: #10141C;
    border-color: var(--line);
    color: var(--ink);
}
[data-theme="dark"] .form-control::placeholder { color: var(--muted-2); }
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background-color: #10141C;
    color: var(--ink);
    border-color: var(--accent);
}
[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-control[readonly] { background-color: #0C1016; color: var(--muted); }

/* Tables — striping and hover both assume a light base */
[data-theme="dark"] .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--ink);
    --bs-table-border-color: var(--line);
    --bs-table-striped-bg: rgba(255,255,255,.028);
    --bs-table-striped-color: var(--ink);
    --bs-table-hover-bg: rgba(255,255,255,.055);
    --bs-table-hover-color: var(--ink);
}

/* Bootstrap's soft alerts are near-white fills */
[data-theme="dark"] .alert-success { background: var(--ok-bg);     color: var(--ok);     border-color: transparent; }
[data-theme="dark"] .alert-warning { background: var(--warn-bg);   color: var(--warn);   border-color: transparent; }
[data-theme="dark"] .alert-danger  { background: var(--danger-bg); color: var(--danger); border-color: transparent; }
[data-theme="dark"] .alert-info,
[data-theme="dark"] .alert-primary { background: var(--info-bg);   color: var(--info);   border-color: transparent; }
[data-theme="dark"] .alert-secondary { background: var(--line-soft); color: var(--ink-2); border-color: transparent; }

[data-theme="dark"] .badge.bg-info.text-dark,
[data-theme="dark"] .badge.bg-warning.text-dark { color: #1B1F27 !important; }

/* The notification centre in Site.master was written with literal light greys */
[data-theme="dark"] .nc-bell:hover { background: rgba(255,255,255,.07); color: var(--ink); }
[data-theme="dark"] .nc-menu,
[data-theme="dark"] .nc-item        { background: var(--surface); color: var(--ink); }
[data-theme="dark"] .nc-item        { border-bottom-color: var(--line-soft); }
[data-theme="dark"] .nc-item:hover  { background: rgba(255,255,255,.05); }
[data-theme="dark"] .nc-head        { border-bottom-color: var(--line); }
[data-theme="dark"] .nc-title       { color: var(--ink); }
[data-theme="dark"] .nc-detail,
[data-theme="dark"] .nc-empty       { color: var(--muted); }
[data-theme="dark"] .nc-foot        { background: var(--line-soft); }
[data-theme="dark"] .nc-dot         { border-color: var(--surface); }

/* The drop zone and sticky form footer added on Add candidate */
[data-theme="dark"] .drop      { background: var(--line-soft); border-color: var(--line); }
[data-theme="dark"] .drop.done { background: var(--ok-bg); border-color: var(--ok); }
[data-theme="dark"] .form-foot { background: rgba(23,27,36,.93); border-top-color: var(--line); }

/* Dashboard pipeline */
[data-theme="dark"] .pipeline { background: var(--surface); border-color: var(--line); }
[data-theme="dark"] .pl-step:hover { background: rgba(255,255,255,.06); }

/* Images and charts: knock back the glare without inverting them */
[data-theme="dark"] img:not([src*=".svg"]):not(.no-dim) { filter: brightness(.92); }

/* ===========================================================================
   2. Text size
   ---------------------------------------------------------------------------
   Scales TYPE only, by moving the root font size. Anything sized in rem grows
   and the layout reflows around it — which is what someone who finds the text
   small actually wants. Pixel-sized things (icon boxes, the sidebar width)
   deliberately stay put so the shell doesn't distort.

   theme.css sets body { font-size: 14px }, an absolute value that would ignore
   all of this, so it is re-expressed in rem here.
   =========================================================================== */
html            { font-size: 16px; }
html[data-text="s"]  { font-size: 15px; }
html[data-text="m"]  { font-size: 16px; }
html[data-text="l"]  { font-size: 17.6px; }   /* +10% */
html[data-text="xl"] { font-size: 19.2px; }   /* +20% */

body { font-size: .875rem; }                  /* was 14px, now scales */

/* Report grids are dense on purpose; let them grow a little less than prose. */
html[data-text="l"]  .rpt, html[data-text="l"]  .table-sm { font-size: .93em; }
html[data-text="xl"] .rpt, html[data-text="xl"] .table-sm { font-size: .90em; }

/* ===========================================================================
   3. Page zoom
   ---------------------------------------------------------------------------
   Scales EVERYTHING — type, spacing, borders — the way Ctrl and +/- does.
   The browser's own zoom already does this; the reason to have it in the
   application is that it PERSISTS with the user's account rather than with
   the browser, so a shared machine or a locked-down kiosk keeps the setting.

   `zoom` is used rather than `transform: scale()` deliberately: transform
   doesn't reflow, so it leaves the page the wrong size and creates a
   scrollbar. `zoom` is now standard and supported everywhere this app runs.
   Applied to .shell rather than <body> so fixed-position layers keep working.
   =========================================================================== */
.shell { zoom: 1; }
html[data-zoom="90"]  .shell { zoom: .9; }
html[data-zoom="100"] .shell { zoom: 1; }
html[data-zoom="110"] .shell { zoom: 1.1; }
html[data-zoom="125"] .shell { zoom: 1.25; }

/* The sidebar is position:fixed, so zoom on .shell doesn't move it — it needs
   the same factor, and the main column needs a matching margin, or the two
   drift apart. */
html[data-zoom="90"]  .sb { zoom: .9; }
html[data-zoom="110"] .sb { zoom: 1.1; }
html[data-zoom="125"] .sb { zoom: 1.25; }

/* ===========================================================================
   4. The Appearance menu itself
   =========================================================================== */
.ap-menu { min-width: 250px; padding: 10px 12px; }
.ap-row  { margin-bottom: 12px; }
.ap-row:last-child { margin-bottom: 0; }
.ap-cap {
    font-size: .66rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--muted-2); margin-bottom: 5px;
}
.ap-seg { display: flex; gap: 4px; }
.ap-seg button {
    flex: 1 1 0; padding: 5px 4px; font-size: .78rem; line-height: 1.2;
    border: 1px solid var(--line); border-radius: 7px;
    background: transparent; color: var(--ink-2); cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}
.ap-seg button:hover  { background: var(--accent-tint); color: var(--ink); }
.ap-seg button[aria-pressed="true"] {
    background: var(--accent); border-color: var(--accent); color: var(--accent-fg);
    font-weight: 600;
}
.ap-seg .ap-a1 { font-size: .70rem; }
.ap-seg .ap-a2 { font-size: .80rem; }
.ap-seg .ap-a3 { font-size: .92rem; }
.ap-seg .ap-a4 { font-size: 1.05rem; }
.ap-note { font-size: .68rem; color: var(--muted); margin-top: 9px; }
.ap-reset { font-size: .7rem; }

/* ===========================================================================
   5. Print — always light, always 100%
   Nobody wants a dark page to eat a print cartridge, and a zoomed page prints
   at the wrong size.
   =========================================================================== */
@media print {
    html[data-zoom] .shell, html[data-zoom] .sb { zoom: 1 !important; }
    html { font-size: 16px !important; }
    [data-theme="dark"] {
        --ink: #10151F; --ink-2: #283041; --muted: #667085; --muted-2: #8B93A5;
        --line: #E4E7EC; --line-soft: #EEF0F4; --canvas: #fff; --surface: #fff;
        color-scheme: light;
    }
    [data-theme="dark"] body,
    [data-theme="dark"] .card,
    [data-theme="dark"] .bg-white { background: #fff !important; color: #10151F !important; }
    [data-theme="dark"] img { filter: none !important; }
}

/* Respect a user who has asked the OS to reduce motion. */
@media (prefers-reduced-motion: reduce) {
    .ap-seg button { transition: none; }
}

/* ============================================================================
   6. Pages that paint their own surfaces
   ----------------------------------------------------------------------------
   23 pages write literal colours inside their own <style> block — 147 rules in
   total. They can't be reached by re-defining a token, because they never used
   one.

   These overrides live HERE rather than in each page for two reasons: editing
   23 working pages to change a colour risks breaking a form for no functional
   gain, and this file already loads after every page's <style>, so it wins
   without needing !important on everything.

   Covered below: the four heaviest pages (69 of the 147 rules). The remaining
   19 pages are listed in DARKMODE.md — each is cosmetic, and each is a
   two-line addition to this section when someone hits it.

   The attendance and timesheet status cells keep their MEANING — green is
   present, amber is half day, red is a weekend — and change only in lightness.
   A recruiter reading a dark screen and a printed copy must see the same
   thing.
   ============================================================================ */

/* ---- Timesheet/Consultant.aspx and Timesheet/ReviewSheet.aspx ------------ */
[data-theme="dark"] .ts-offrow,
[data-theme="dark"] .rv-offrow   { background: rgba(255,255,255,.025); }
[data-theme="dark"] .ts-daycell,
[data-theme="dark"] .rv-daycell  { color: var(--ink-2); }
[data-theme="dark"] .ts-dow,
[data-theme="dark"] .rv-dow      { background: #1C212C; color: var(--muted); }
[data-theme="dark"] .ts-dow.we,
[data-theme="dark"] .rv-dow.we   { background: #3A1B18; color: #F79389; }
[data-theme="dark"] .ts-reopen   { background: #35280D; }
[data-theme="dark"] .rv-NS,
[data-theme="dark"] .rv-notsub   { background: #2E2611; color: #E8C877; }

[data-theme="dark"] .ts-Present, [data-theme="dark"] .ts-Working  { background: #12301F; color: #6EE7A8; }
[data-theme="dark"] .ts-Fullday                                    { background: #0F2A33; color: #7FD8EC; }
[data-theme="dark"] .ts-Halfday                                    { background: #35280D; color: #F0C46A; }
[data-theme="dark"] .ts-Leave, [data-theme="dark"] .ts-Absent      { background: #3A1B18; color: #F79389; }
/* Module 78: `.ts-WeekOff` matches nothing — the class the timesheet grid
   actually emits is `.ts-Weekend` (from the DayStatus value), so weekly-off
   cells kept their light #e9ecef in dark mode. It matters more now that
   internal Sundays are Weekend rather than Holiday: before this fix they
   were picked up by the .ts-Holiday half of this rule and looked correct
   by accident. `.ts-WeekOff` is kept in case any page emits it. */
[data-theme="dark"] .ts-Holiday,
[data-theme="dark"] .ts-Weekend,
[data-theme="dark"] .ts-WeekOff   { background: #232833; color: #98A0B0; }

[data-theme="dark"] .rv-kpi .k   { background: var(--surface); border-color: var(--line); }
[data-theme="dark"] .rv-kpi .k b { color: var(--ink); }

/* ---- Default.aspx (the careers page) -------------------------------------
   The hero is already a dark gradient with white text, so it needs nothing.
   Only the cards below it are white. */
[data-theme="dark"] .job-card       { background: var(--surface); border-color: var(--line); }
[data-theme="dark"] .job-card .jt   { color: var(--ink); }
[data-theme="dark"] .job-card:hover { background: #1C212C; }
[data-theme="dark"] .cr-org         { color: var(--ink); }

/* ---- TeamPerformance.aspx ------------------------------------------------ */
[data-theme="dark"] .tp-card        { background: var(--surface); border-color: var(--line); }
[data-theme="dark"] .tp-card.mine   { background: #1B2130; border-color: var(--accent); }
[data-theme="dark"] .tp-name        { color: var(--ink); }
[data-theme="dark"] .tp-who         { color: var(--muted); }
[data-theme="dark"] .tp-bar         { background: #232833; }
[data-theme="dark"] .tp-medal       { background: #232833; color: var(--muted); }
[data-theme="dark"] .tp-medal.gold  { background: #40320C; color: #F0C46A; }
[data-theme="dark"] .tp-medal.silver{ background: #2A2F38; color: #C3C8D4; }
[data-theme="dark"] .tp-medal.bronze{ background: #3A2A18; color: #D9A273; }

/* ---- Payslips.aspx -------------------------------------------------------- */
[data-theme="dark"] .ps-card        { background: var(--surface); border-color: var(--line); }
[data-theme="dark"] .ps-card.locked { background: #2A2410; }
[data-theme="dark"] .ps-period      { color: var(--ink); }
[data-theme="dark"] .ps-fig         { color: var(--muted); }
[data-theme="dark"] .ps-fig b       { color: var(--ink); }
[data-theme="dark"] .ps-net         { color: #6EE7A8; }
[data-theme="dark"] .ps-why         { color: #F0C46A; }

/* ---- the next tier: 4 more pages ----------------------------------------- */

/* Default.aspx — careers. The hero is a dark gradient already and needs
   nothing; these are the cards and chips under it. */
[data-theme="dark"] .jc-chip     { background: #232833; color: var(--ink-2); border-color: var(--line); }
[data-theme="dark"] .meta        { color: var(--muted); }
[data-theme="dark"] .t-imm       { background: #12301F; color: #6EE7A8; }
[data-theme="dark"] .t-urg       { background: #3A1B18; color: #F79389; }

/* Timesheet/AttendanceReports.aspx — the day matrix */
[data-theme="dark"] .ar-ns        { background: #2E2611; color: #E8C877; }
[data-theme="dark"] .ar-dow       { background: #1C212C; color: var(--muted); }
[data-theme="dark"] .ar-dow-sun   { background: #3A1B18; color: #F79389; }
[data-theme="dark"] .ar-dow-sat   { background: #33290F; color: #E8C877; }
[data-theme="dark"] .ar-dow-lead  { background: #1C212C; }

/* Candidates.aspx */
[data-theme="dark"] .filter-sidebar  { color: var(--muted); }
[data-theme="dark"] .top-search      { background: #10141C; border-color: var(--line); color: var(--ink); }
[data-theme="dark"] .candidate-card  { background: var(--surface); border-color: var(--line); }
[data-theme="dark"] .candidate-card .avatar { background: #23304A; color: #A9C4FF; }
[data-theme="dark"] .cand-name       { color: var(--ink); }
[data-theme="dark"] .cand-sub,
[data-theme="dark"] .cand-meta       { color: var(--muted); }
[data-theme="dark"] .skill-chip      { background: #232833; color: var(--ink-2); }

/* Notifications.aspx */
[data-theme="dark"] .nf-card     { background: var(--surface); border-color: var(--line); }
[data-theme="dark"] .nf-ico      { background: #232833; }
[data-theme="dark"] .nf-t        { color: var(--ink); }
[data-theme="dark"] .nf-d        { color: var(--muted); }
[data-theme="dark"] .nf-clear    { background: #12301F; color: #6EE7A8; }

/* Login.aspx and the sign-in card */
[data-theme="dark"] .login-card,
[data-theme="dark"] .auth-card   { background: var(--surface); border-color: var(--line); }
