/* AMS design system -- shared by templates/index.html and templates/login.html.
   Colors, radius and shadow scales existed before the redesign (unchanged
   values, just moved out of two drifting inline <style> blocks into one
   file). Spacing and type scales are new in Phase 1 -- see
   tasks/redesign-plan.md. Changing a value here changes it everywhere;
   that is the point of this file existing. */

:root {
    /* Surfaces: cooler and a shade deeper than plain white, so panels lift
       off the page instead of blending into it. */
    --bg: #eef1f6; --surface: #ffffff; --surface2: #f5f7fa; --surface3: #eaeef4;
    --border: #e2e7ef; --border2: #cdd5e1;

    /* Text: higher contrast at the top of the scale for readability, with
       the muted steps kept distinct rather than merely lighter. */
    --text: #131a29; --text2: #545f73; --text3: #838ea2;

    --accent: #2563eb; --accent2: #1d4ed8; --accent-soft: #eff4ff;
    --green: #0f9d63; --green-soft: #e9f8f1;
    --red: #dc2f45;   --red-soft: #fdeef0;
    --amber: #c47708; --amber-soft: #fdf4e6;
    --purple: #6d5cf7; --purple-soft: #f0edfe;

    --sidebar-w: 232px;
    --radius: 12px; --radius-sm: 8px; --radius-lg: 16px;

    /* Layered shadows: a tight contact shadow plus a wider ambient one reads
       as depth; a single blurred shadow reads as a smudge. */
    --shadow-sm: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.04);
    --shadow-md: 0 2px 4px rgba(16,24,40,.05), 0 6px 16px rgba(16,24,40,.07);
    --shadow-lg: 0 4px 8px rgba(16,24,40,.05), 0 16px 32px rgba(16,24,40,.10);

    --font: 'DM Sans', sans-serif; --mono: 'DM Mono', monospace;

    /* Spacing scale -- new. Replaces ad-hoc pixel values (5,6,7,9,10,14,15...)
       with eight steps; existing hand-picked values are not being hunted down
       and replaced wholesale, but every new/touched screen uses these. */
    --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
    --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;

    /* Type scale -- new. --tx-base (13px) matches the body font-size the app
       already uses everywhere, so existing unconverted markup keeps reading
       at the same size while touched screens move onto the named steps. */
    --tx-xs: 11px; --tx-sm: 12px; --tx-base: 13px; --tx-md: 15px;
    --tx-lg: 18px; --tx-xl: 22px; --tx-2xl: 28px;
}

/* Duotone icon set (Phase 0 direction C, approved 2026-09-22): an outline
   base at reduced opacity plus one accent shape at full strength. The
   <symbol> defs live in templates/_icon_sprite.html, included once per page;
   a screen references one with <svg class="ico"><use href="#icon-payroll"></use></svg>.
   This file only carries the .ico sizing rules (bottom of file). */
/* Responsive table -- opt-in via class="tbl-responsive" on a <table class="tbl">
   already carrying class="tbl" (a screen adopts this by adding the second
   class and a data-label="Column Name" attribute on each <td>; nothing
   else about the table's markup or its Jinja loop changes). Below 768px --
   the same breakpoint the sidebar already collapses at, not a new one --
   each row becomes a card: the header row disappears, and every cell shows
   its column name to its left, read from data-label rather than duplicated
   in the markup. A cell whose content isn't a simple value (a button stack,
   a stack of inputs) opts out of the label/value split with class="wide" on
   the <td> and just stacks full-width instead. See tasks/redesign-plan.md. */
@media (max-width: 768px) {
    /* Overrides the table's own inline min-width:900px (several of these
       tables carry one, to force the horizontal-scroll behaviour this
       pattern replaces). Without this the table still lays out at 900px+
       and each "card" row is just the left sliver of a 900px flex box --
       every value pushed off-screen to the right, invisible without
       scrolling. !important because an inline style attribute otherwise
       always wins over any stylesheet rule, media query or not. */
    .tbl-responsive { min-width: 0 !important; width: 100%; }
    .tbl-responsive, .tbl-responsive thead, .tbl-responsive tbody, .tbl-responsive tfoot,
    .tbl-responsive th, .tbl-responsive td, .tbl-responsive tr { display: block; }
    .tbl-responsive thead { display: none; }
    .tbl-responsive tbody tr, .tbl-responsive tfoot tr {
        background: var(--surface); border: 1px solid var(--border);
        border-radius: var(--radius-sm); margin-bottom: var(--sp-3);
        padding: var(--sp-2) var(--sp-3);
    }
    .tbl-responsive td {
        display: flex; flex-wrap: wrap; justify-content: space-between;
        align-items: baseline; gap: 4px var(--sp-3); min-width: 0;
        border-bottom: 1px solid var(--surface3); padding: 7px 2px; text-align: right;
    }
    .tbl-responsive td:last-child { border-bottom: none; }
    .tbl-responsive td::before {
        content: attr(data-label); font-family: var(--font); font-size: 10px; font-weight: 700;
        color: var(--text3); text-transform: uppercase; letter-spacing: .3px; text-align: left;
    }
    .tbl-responsive td.rowhead {
        background: var(--surface2);
        margin: calc(var(--sp-2) * -1) calc(var(--sp-3) * -1) 6px;
        padding: 8px var(--sp-3); border-radius: var(--radius-sm) var(--radius-sm) 0 0;
        border-bottom: 1px solid var(--border);
    }
    .tbl-responsive td.rowhead::before { display: none; }
    .tbl-responsive td.wide { display: block; text-align: left; }
    .tbl-responsive td.wide::before { display: block; margin-bottom: 6px; }
    /* Empty-state rows ("No payslips yet.") are one colspan cell with no label. */
    .tbl-responsive td[colspan] { display: block; text-align: center; }
    .tbl-responsive td[colspan]::before { display: none; }
    /* Spacer cells (a totals row's blank Actions column) carry nothing on a card. */
    .tbl-responsive td.empty-cell { display: none; }
}

/* .ico, not .icon -- the app already uses .icon (with .nav-item .icon and
   similar higher-specificity rules) for the emoji spans being replaced
   screen by screen. Reusing that name would fight those rules on every
   unconverted screen instead of coexisting with them during the migration. */
.ico { width: 16px; height: 16px; display: inline-block; vertical-align: -3px; flex-shrink: 0; color: currentColor; }
.ico-lg { width: 20px; height: 20px; vertical-align: -5px; }