@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap');

/* ═══════════════════════════════════════════════════════════════════════════
   TwinAI HR — design kit
   ---------------------------------------------------------------------------
   One place that decides how the HR platform looks. Every page loads this LAST,
   so it is the final word. If a value here disagrees with a page, the page is
   wrong, not this file. Adding a style inline on one page is how a design
   standard stops being one.

   Structure is taken from the Course design standard (CourseBuilder page_kit):
     - one accent doing all the work
     - three type sizes and nothing else
     - two line heights, 1.5 for interface, 1.7 for prose
     - four radii, 3 inline / 4 small block / 6 panel / 999 pill
     - one box family, four accent weights, a 3px left rule
     - hairline borders on white
     - Lato, monospace only for things you type or compare
     - no emoji, no em dashes

   Colour is TwinAI's own, not the course's, because the logo is blue and it
   appears on every page and every email. MD's call, 2026-09-06.

   Character: a restrained gradient and a little translucency on the things that
   should feel pressable or lifted, buttons and raised cards. Used sparingly on
   purpose. Flat everywhere else.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* ── colour ─────────────────────────────────────────────────────────── */
    --k-accent:     #0055FF;   /* the one accent: headings, links, active controls */
    --k-accent-lift:#2E6BFF;   /* only the far end of a button gradient */
    --k-accent-deep:#0044CC;   /* pressed state */
    --k-deep:       #0B1120;   /* titles, anything sitting above body text */
    --k-mist:       #9DC4F5;   /* rules, borders on tinted panels, a box's left rule */
    --k-line:       #E4E9EB;   /* every hairline border on white */
    --k-ink:        #3d3d3d;   /* prose */
    --k-body:       #747474;   /* secondary prose, not for long passages */
    --k-mute:       #a8b0b6;   /* captions and tiny labels only, never prose */

    --k-tint:       #EEF4FF;   /* the accent at panel strength */
    --k-page:       #F4F6FA;   /* the ground */
    --k-surface:    #FFFFFF;

    /* semantic, separate from the accent and never used as decoration */
    --k-good:       #00A896;
    --k-warn:       #B7791F;
    --k-warn-bg:    #FDF6E3;
    --k-bad:        #DC2626;

    /* ── type: three sizes, no more ─────────────────────────────────────── */
    --k-head:  16px;
    --k-body-size: 12.5px;
    --k-small: 11px;
    --k-lh-ui:   1.5;
    --k-lh-prose:1.7;
    --k-face: Lato, 'Lato Extended', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    --k-mono: ui-monospace, SFMono-Regular, Menlo, 'Cascadia Mono', monospace;

    /* ── four radii ─────────────────────────────────────────────────────── */
    --k-r-chip:  3px;
    --k-r-block: 4px;
    --k-r-panel: 6px;
    --k-r-pill:  999px;

    /* ── lift: used sparingly ───────────────────────────────────────────── */
    --k-shadow:      0 1px 2px rgba(11, 17, 32, .05);
    --k-shadow-lift: 0 1px 2px rgba(11, 17, 32, .06), 0 6px 18px rgba(11, 17, 32, .07);
    --k-btn-shadow:  0 1px 2px rgba(0, 85, 255, .28), 0 6px 16px rgba(0, 85, 255, .22);
}

/* Dark is a straight re-mapping of the same tokens, so every component below
   keeps working without a single component-level dark rule. */
[data-theme="dark"] {
    --k-deep:    #F1F5F9;
    --k-mist:    #2C4E7A;
    --k-line:    #263247;
    --k-ink:     #E4E9F2;
    --k-body:    #9AA5B8;
    --k-mute:    #6B7689;
    --k-tint:    #16233A;
    --k-page:    #0B1120;
    --k-surface: #131C2E;
    --k-accent:  #5B8CFF;
    --k-accent-lift:#7BA3FF;
    --k-warn-bg: #2A2418;
    --k-shadow:      0 1px 2px rgba(0, 0, 0, .4);
    --k-shadow-lift: 0 1px 2px rgba(0, 0, 0, .45), 0 8px 24px rgba(0, 0, 0, .4);
}

/* ── base ───────────────────────────────────────────────────────────────── */
body {
    font-family: var(--k-face);
    font-size: var(--k-body-size);
    line-height: var(--k-lh-ui);
    color: var(--k-ink);
    background: var(--k-page);
}
a { color: var(--k-accent); }

/* ── sidebar ────────────────────────────────────────────────────────────── */
.sidebar {
    background: var(--k-surface);
    border-right: 1px solid var(--k-line);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.sidebar-header { border-bottom: 1px solid var(--k-line); }
.sidebar-brand  { font-size: var(--k-head); font-weight: 900; color: var(--k-deep); letter-spacing: -.01em; }
.nav-section-label {
    font-size: var(--k-small); letter-spacing: .09em; text-transform: uppercase;
    color: var(--k-mute); font-weight: 700;
}
.sidebar-nav .nav-item {
    font-size: var(--k-body-size); color: var(--k-body); font-weight: 400;
    border-radius: var(--k-r-block); border-left: 3px solid transparent;
}
.sidebar-nav .nav-item:hover { background: var(--k-tint); color: var(--k-accent); }
.sidebar-nav .nav-item.active {
    /* a touch of translucent accent rather than a solid block */
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--k-accent) 14%, transparent),
        color-mix(in srgb, var(--k-accent) 4%, transparent));
    color: var(--k-accent); font-weight: 700;
    border-left-color: var(--k-accent);
}
.sidebar-footer { border-top: 1px solid var(--k-line); }

/* ── page header ────────────────────────────────────────────────────────── */
.page-title {
    font-size: var(--k-head); font-weight: 900; color: var(--k-deep);
    letter-spacing: -.01em; line-height: var(--k-lh-ui);
}
.page-subtitle { font-size: var(--k-body-size); color: var(--k-body); }

/* ── panels ─────────────────────────────────────────────────────────────── */
.card {
    background: var(--k-surface);
    border: 1px solid var(--k-line);
    border-radius: var(--k-r-panel);
    box-shadow: var(--k-shadow);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.card-header { border-bottom: 1px solid var(--k-line); }
.card-title {
    font-size: var(--k-small); font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--k-mute);
}

/* Stat tiles are the one place a gradient earns its keep: they are the summary,
   so a faint lift separates them from the panels below without adding a rule. */
.stat-card, .mini-stat {
    background: linear-gradient(160deg,
        var(--k-surface) 0%,
        color-mix(in srgb, var(--k-accent) 4%, var(--k-surface)) 100%);
    border: 1px solid var(--k-line);
    border-radius: var(--k-r-panel);
    box-shadow: var(--k-shadow-lift);
}
.stat-label {
    font-size: var(--k-small); letter-spacing: .06em; text-transform: uppercase;
    color: var(--k-mute); font-weight: 700;
}
.stat-value {
    font-size: var(--k-head); font-weight: 900; color: var(--k-deep);
    font-variant-numeric: tabular-nums;
}

/* ── tables ─────────────────────────────────────────────────────────────── */
.data-table { font-size: var(--k-body-size); }
.data-table thead th {
    background: transparent;
    font-size: var(--k-small); font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--k-mute);
    border-bottom: 1px solid var(--k-line);
}
.data-table td {
    border-bottom: 1px solid var(--k-line);
    color: var(--k-ink);
    font-variant-numeric: tabular-nums;
}
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: var(--k-tint); }

/* ── pills: translucent, so they sit in the surface rather than on it ───── */
.pill {
    font-size: var(--k-small); font-weight: 700; border-radius: var(--k-r-pill);
    padding: 2px 10px; letter-spacing: .01em;
}
.pill.ok,       .status-submitted, .status-approved {
    background: color-mix(in srgb, var(--k-good) 14%, transparent); color: var(--k-good);
}
.pill.wait,     .status-pending {
    background: color-mix(in srgb, var(--k-warn) 16%, transparent); color: var(--k-warn);
}
.pill.crit,     .status-needs-revision {
    background: color-mix(in srgb, var(--k-bad) 12%, transparent);  color: var(--k-bad);
}
.pill.info,     .status-reviewed {
    background: color-mix(in srgb, var(--k-accent) 12%, transparent); color: var(--k-accent);
}

/* ── buttons: the gradient lives here ───────────────────────────────────── */
.btn {
    font-family: var(--k-face);
    font-size: var(--k-small); font-weight: 700; letter-spacing: .02em;
    border-radius: var(--k-r-pill);
    border: 1px solid transparent;
    transition: filter .15s, box-shadow .15s, transform .05s;
}
.btn:active { transform: translateY(1px); }
.btn-primary, .btn:not(.btn-ghost):not(.btn-secondary):not(.btn-danger):not(.btn-icon) {
    background: linear-gradient(135deg, var(--k-accent) 0%, var(--k-accent-lift) 100%);
    color: #fff;
    box-shadow: var(--k-btn-shadow);
}
.btn-primary:hover, .btn:not(.btn-ghost):not(.btn-secondary):not(.btn-danger):not(.btn-icon):hover {
    filter: brightness(1.06);
}
.btn-secondary, .btn-ghost {
    background: var(--k-surface);
    color: var(--k-accent);
    border: 1px solid var(--k-line);
    box-shadow: none;
}
.btn-secondary:hover, .btn-ghost:hover { background: var(--k-tint); }
.btn-danger {
    background: linear-gradient(135deg, var(--k-bad) 0%, #EF4444 100%);
    color: #fff; box-shadow: 0 1px 2px rgba(220,38,38,.28), 0 6px 16px rgba(220,38,38,.2);
}

/* ── forms ──────────────────────────────────────────────────────────────── */
.form-label {
    font-size: var(--k-small); font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--k-mute);
}
.form-input, .form-select, .form-textarea {
    font-family: var(--k-face); font-size: var(--k-body-size);
    background: var(--k-surface);
    border: 1px solid var(--k-line);
    border-radius: var(--k-r-block);
    color: var(--k-ink);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
    border-color: var(--k-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--k-accent) 16%, transparent);
    outline: none;
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--k-mute); }

/* ── the one box family, four weights ───────────────────────────────────── */
.kbox {
    border: 1px solid var(--k-line);
    border-left: 3px solid var(--k-mist);
    border-radius: 0 var(--k-r-block) var(--k-r-block) 0;
    background: var(--k-tint);
    padding: 10px 13px;
    margin: 0 0 8px;
}
.kbox > b     { display: block; font-size: var(--k-small); color: var(--k-deep); font-weight: 700; }
.kbox > span  { display: block; font-size: var(--k-small); color: var(--k-body); line-height: var(--k-lh-prose); }
.kbox.accent  { border-left-color: var(--k-accent);
                background: linear-gradient(100deg,
                    color-mix(in srgb, var(--k-accent) 8%, var(--k-surface)),
                    var(--k-surface)); }
.kbox.plain   { border-left-color: var(--k-line); background: var(--k-surface); }
.kbox.warm    { border-left-color: var(--k-warn); background: var(--k-warn-bg); }

/* ── prose gets the taller line height, interface keeps 1.5 ─────────────── */
.prose, .comment-text, .report-summary { line-height: var(--k-lh-prose); color: var(--k-ink); }

code, .mono { font-family: var(--k-mono); font-size: var(--k-small); }

/* ═══════════════════════════════════════════════════════════════════════════
   Density
   ---------------------------------------------------------------------------
   MD's rule: most screens should fit in one window without scrolling. These
   pages are scanned, not read, so generous padding costs a row of data rather
   than buying calm. The type sizes above already shrank the text; this shrinks
   the space around it to match, otherwise the page just looks under-filled.
   ═══════════════════════════════════════════════════════════════════════════ */

.main-content { padding: 16px 20px; }

.page-header  { margin-bottom: 12px; }

.card {
    padding: 12px 15px;
    margin-bottom: 8px;
}
.card-header {
    margin-bottom: 8px;
    padding-bottom: 7px;
}

.stat-card, .mini-stat { padding: 10px 12px; }
.stat-value { line-height: 1.25; }

.data-table th { padding: 7px 12px; }
.data-table td { padding: 8px 12px; }

.btn     { padding: 6px 14px; }
.btn-sm  { padding: 4px 11px; }
.btn-lg  { padding: 8px 18px; }

.form-group  { margin-bottom: 10px; }
.form-input, .form-select { padding: 7px 10px; }
.form-textarea { padding: 8px 10px; }

/* Empty and loading states were sized for a roomier layout and leave a hole
   the size of a real table. */
.empty-state, .loading-row { padding: 12px; font-size: var(--k-body-size); color: var(--k-mute); }