/* ==========================================================================
   Field Sales Activity Tracker — design system
   Port of the PlantVest pattern (design.md): monochrome ink neutrals, four
   semantic accent triads, role-named type scale, flat hairline surfaces.
   Colour only ever means state. Light is the default; a dark theme swaps
   the same tokens (see the dark blocks below) and follows the OS unless
   the ft_theme cookie pins a choice.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens — the entire palette of the system. Nothing outside this list.
   The dark blocks near the end of the file redefine these 1:1; every
   component rule below reads tokens only, so it never needs duplicating.
   -------------------------------------------------------------------------- */

:root {
    color-scheme: light;

    /* neutrals (ink) */
    --ink-950: #0A0A0A;
    --ink-950-rgb: 10, 10, 10;
    --ink-800: #262626;
    --ink-600: #525252;
    --ink-400: #A3A3A3;
    --ink-300: #D4D4D4;
    --ink-200: #E5E5E5;
    --ink-100: #F5F5F5;
    --ink-50: #FAFAFA;

    /* surfaces + on-primary text — the whites the theme inverts */
    --surface: #FFFFFF;
    --on-primary: #FFFFFF;
    --primary-overlay: rgba(255, 255, 255, 0.16);
    --primary-overlay-border: rgba(255, 255, 255, 0.3);

    /* accents (only colour permitted) — solid / bg / border triads */
    --danger: #B4342F;       --danger-bg: #F9EFEE;  --danger-border: #ECCCCB;
    --warn:   #8F6311;       --warn-bg:   #F7F3EC;  --warn-border:   #E6DAC4;
    --ok:     #2F6B48;       --ok-bg:     #EEF3F0;  --ok-border:     #CBDAD1;
    --info:   #2B5C8A;       --info-bg:   #EEF2F6;  --info-border:   #CAD6E2;

    /* shape + motion */
    --radius-card: 12px;
    --radius-control: 8px;
    --shadow-float: 0 4px 16px rgba(10, 10, 10, 0.06);
    --duration: 150ms;

    /* type (registers, not sizes) */
    --font-display: "Instrument Serif", Georgia, serif;
    --font-body: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;

    /* Bootstrap primary follows the ink scale — no framework blue anywhere.
       body-bg/border are set too, so Bootstrap's own floating layers
       (dropdowns, modals, disabled controls) theme along with ours. */
    --bs-primary: #0A0A0A;
    --bs-primary-rgb: 10, 10, 10;
    --bs-link-color: #0A0A0A;
    --bs-link-hover-color: #525252;
    --bs-body-bg: #FAFAFA;
    --bs-body-color: #262626;
    --bs-border-color: #E5E5E5;
    --bs-secondary-bg: #F5F5F5;   /* disabled controls — on-palette, not Bootstrap grey */
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

body {
    background: var(--ink-50);
    color: var(--ink-800);
    font-family: var(--font-body);
    font-size: 14px;   /* body register */
    line-height: 24px;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--ink-950);
    font-family: var(--font-body);
}

a { color: var(--ink-950); }

a:hover { color: var(--ink-950); }

.text-muted { color: var(--ink-600) !important; }

/* Bootstrap colour utilities remapped onto sanctioned tokens — the raw
   framework defaults (blue/green/yellow) never reach the screen. */
.text-primary { color: var(--ink-950) !important; }
.text-success { color: var(--ok) !important; }
.text-danger  { color: var(--danger) !important; }
.text-warning { color: var(--warn) !important; }
.text-info    { color: var(--info) !important; }

.bg-body-tertiary { background-color: var(--ink-100) !important; }

::selection { background: var(--ink-100); }

/* Numeric data + tables: mono, aligned */
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Global focus ring — nothing can opt out silently */
:focus-visible {
    outline: 2px solid var(--ink-950);
    outline-offset: 2px;
}

/* Skip link: first tab stop on every authed page */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    background: var(--surface);
    color: var(--ink-950);
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-control);
    box-shadow: var(--shadow-float);
    padding: .5rem 1rem;
    font-weight: 500;
    text-decoration: none;
}

.skip-link:focus { left: .75rem; top: .75rem; }

/* --------------------------------------------------------------------------
   Type scale (role-named)
   -------------------------------------------------------------------------- */

.page-title {
    font-family: var(--font-display);
    font-size: 28px;
    line-height: 34px;
    font-weight: 400;
    color: var(--ink-950);
}

.section-heading {
    font-size: 15px;
    line-height: 22px;
    font-weight: 600;
    color: var(--ink-950);
}

.meta-label {
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 16px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-600);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
    --bs-btn-font-size: 14px;
    --bs-btn-border-radius: var(--radius-control);
    --bs-btn-transition: color var(--duration) ease-out, background-color var(--duration) ease-out,
        border-color var(--duration) ease-out;
    cursor: pointer;
    font-weight: 500;
}

.btn .icon { width: 16px; height: 16px; flex: none; }

.btn[disabled] { opacity: .55; }

/* The one primary action on a screen: solid black */
.btn-primary {
    --bs-btn-bg: var(--ink-950);
    --bs-btn-border-color: var(--ink-950);
    --bs-btn-color: var(--on-primary);
    --bs-btn-hover-bg: var(--ink-800);
    --bs-btn-hover-border-color: var(--ink-800);
    --bs-btn-hover-color: var(--on-primary);
    --bs-btn-active-bg: var(--ink-800);
    --bs-btn-active-border-color: var(--ink-800);
    --bs-btn-active-color: var(--on-primary);
    --bs-btn-disabled-bg: var(--ink-950);
    --bs-btn-disabled-border-color: var(--ink-950);
    --bs-btn-disabled-color: var(--on-primary);
    --bs-btn-focus-shadow-rgb: var(--ink-950-rgb);
}

.btn-outline-primary {
    --bs-btn-color: var(--ink-950);
    --bs-btn-border-color: var(--ink-950);
    --bs-btn-hover-bg: var(--ink-950);
    --bs-btn-hover-border-color: var(--ink-950);
    --bs-btn-hover-color: var(--on-primary);
    --bs-btn-active-bg: var(--ink-950);
    --bs-btn-active-border-color: var(--ink-950);
    --bs-btn-active-color: var(--on-primary);
    --bs-btn-disabled-color: var(--ink-950);
    --bs-btn-disabled-border-color: var(--ink-950);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-focus-shadow-rgb: var(--ink-950-rgb);
}

.btn-outline-secondary {
    --bs-btn-color: var(--ink-800);
    --bs-btn-border-color: var(--ink-200);
    --bs-btn-hover-bg: var(--ink-100);
    --bs-btn-hover-border-color: var(--ink-300);
    --bs-btn-hover-color: var(--ink-950);
    --bs-btn-active-bg: var(--ink-100);
    --bs-btn-active-border-color: var(--ink-300);
    --bs-btn-active-color: var(--ink-950);
    --bs-btn-disabled-color: var(--ink-400);
    --bs-btn-disabled-border-color: var(--ink-200);
    --bs-btn-disabled-bg: transparent;
}

/* Destructive actions: accent-outlined, never a saturated solid fill */
.btn-outline-danger {
    --bs-btn-color: var(--danger);
    --bs-btn-border-color: var(--danger-border);
    --bs-btn-hover-bg: var(--danger-bg);
    --bs-btn-hover-border-color: var(--danger);
    --bs-btn-hover-color: var(--danger);
    --bs-btn-active-bg: var(--danger-bg);
    --bs-btn-active-border-color: var(--danger);
    --bs-btn-active-color: var(--danger);
    --bs-btn-disabled-color: var(--ink-400);
    --bs-btn-disabled-border-color: var(--ink-200);
    --bs-btn-disabled-bg: transparent;
}

.btn-danger {
    --bs-btn-bg: var(--danger);
    --bs-btn-border-color: var(--danger);
    --bs-btn-color: var(--on-primary);
    --bs-btn-hover-bg: var(--danger);
    --bs-btn-hover-border-color: var(--danger);
    --bs-btn-hover-color: var(--on-primary);
    --bs-btn-active-bg: var(--danger);
    --bs-btn-active-border-color: var(--danger);
    --bs-btn-active-color: var(--on-primary);
    --bs-btn-disabled-bg: var(--danger);
    --bs-btn-disabled-border-color: var(--danger);
    --bs-btn-disabled-color: var(--on-primary);
}

/* Icon-only action buttons (table row actions) — always labelled */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
}

/* --------------------------------------------------------------------------
   Navbar
   -------------------------------------------------------------------------- */

.ft-navbar {
    background: var(--surface);
    border-bottom: 1px solid var(--ink-200);
    position: sticky;
    top: 0;
    z-index: 1030;
}

.ft-navbar .navbar-brand {
    color: var(--ink-950);
    font-family: var(--font-display);
    font-size: 19px;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
}

.ft-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-control);
    background: var(--ink-950);
    color: var(--on-primary);
    flex: none;
}

.ft-navbar .nav-link {
    color: var(--ink-600);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border-radius: var(--radius-control);
    padding: .4rem .75rem;
    transition: color var(--duration) ease-out, background-color var(--duration) ease-out;
}

.ft-navbar .nav-link:hover { color: var(--ink-950); background: var(--ink-100); }

.ft-navbar .nav-link.active { color: var(--ink-950); background: var(--ink-100); }

/* Collapsed menu: Bootstrap's blue focus glow goes; ink focus ring remains */
.navbar-toggler:focus { box-shadow: none; }

/* Collapsed nav links are stacked touch targets — give them real height */
@media (max-width: 991.98px) {
    .ft-navbar .nav-link { padding: .7rem .75rem; }
}

.ft-user {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: var(--ink-800);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    padding: .25rem .5rem;
    cursor: pointer;
    transition: background-color var(--duration) ease-out, border-color var(--duration) ease-out;
}

.ft-user:hover, .ft-user.show { background: var(--ink-100); border-color: var(--ink-200); }

.ft-user.dropdown-toggle::after { display: none; }

.ft-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ink-100);
    color: var(--ink-600);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    flex: none;
    user-select: none;
}

.dropdown-menu {
    --bs-dropdown-border-color: var(--ink-200);
    --bs-dropdown-border-radius: var(--radius-card);
    --bs-dropdown-link-color: var(--ink-800);
    --bs-dropdown-link-hover-color: var(--ink-950);
    --bs-dropdown-link-hover-bg: var(--ink-100);
    --bs-dropdown-header-color: var(--ink-600);
    box-shadow: var(--shadow-float); /* floating layer */
}

/* --------------------------------------------------------------------------
   Cards — white, hairline border, no shadow
   -------------------------------------------------------------------------- */

.card {
    --bs-card-border-color: var(--ink-200);
    --bs-card-border-radius: var(--radius-card);
    --bs-card-bg: var(--surface);
    --bs-card-cap-bg: var(--surface);
    --bs-card-color: var(--ink-800);
}

.card-header {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink-950);
    border-bottom: 1px solid var(--ink-200);
    padding: .8rem 1.15rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.card-header .icon { color: var(--ink-600); }

/* --------------------------------------------------------------------------
   Stat cards — mono meta label, serif display figure
   -------------------------------------------------------------------------- */

.stat-card {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    background: var(--surface);
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-card);
    padding: 1.15rem;
    height: 100%;
}

.stat-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-control);
    background: var(--ink-100);
    color: var(--ink-600);
    flex: none;
}

.stat-card-icon .icon { width: 16px; height: 16px; }

/* Accents on icon tiles only when they encode state */
.stat-card-icon.tone-ok     { background: var(--ok-bg);     color: var(--ok); }
.stat-card-icon.tone-warn   { background: var(--warn-bg);   color: var(--warn); }
.stat-card-icon.tone-danger { background: var(--danger-bg); color: var(--danger); }
.stat-card-icon.tone-info   { background: var(--info-bg);   color: var(--info); }

.stat-card-label {
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 16px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-600);
}

.stat-card-value {
    font-family: var(--font-display);
    font-size: 36px;
    line-height: 40px;
    font-weight: 400;
    color: var(--ink-950);
    /* Proportional figures — a large standalone number reads tighter than
       tabular-nums (which is reserved for columns that must align). */
}

.stat-card-value .fs-6 { font-family: var(--font-body); font-size: 13px !important; }

.stat-card-hint { color: var(--ink-600); font-size: 13px; line-height: 18px; }

/* Danger state on the card itself (people missing > 0) */
.stat-card-danger { border-color: var(--danger-border); }

/* Progress bar under stat values */
.stat-progress {
    height: 4px;
    border-radius: 2px;
    background: var(--ink-100);
    overflow: hidden;
    margin-top: .5rem;
}

.stat-progress > div { height: 100%; border-radius: 2px; background: var(--ink-950); }

/* --------------------------------------------------------------------------
   Page header block
   -------------------------------------------------------------------------- */

.page-block { margin-bottom: 1.4rem; }

.page-block h1 {
    font-family: var(--font-display);
    font-size: 28px;
    line-height: 34px;
    font-weight: 400;
    margin-bottom: .2rem;
}

.page-block .page-sub { color: var(--ink-600); margin: 0; }

/* --------------------------------------------------------------------------
   Dashboard section heads — one row: section name, meta context, action link
   -------------------------------------------------------------------------- */

.dash-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .35rem 1rem;
    margin: 2.2rem 0 1rem;
}

.dash-section-head .section-heading { margin: 0; }

.dash-section-head .dash-head-link { margin-left: auto; white-space: nowrap; }

/* --------------------------------------------------------------------------
   Dashboard month chart — single-series SVG bars (monochrome by design:
   colour only encodes state, and an activity type is a category, not a state)
   -------------------------------------------------------------------------- */

.ft-chart { position: relative; }

.ft-chart svg { display: block; width: 100%; height: auto; }

.ft-chart .bar {
    fill: var(--ink-600);
    transition: fill var(--duration) ease-out;
}

/* The hovered/focused day lifts to full ink — the mark responds visibly */
.ft-chart .bar-group:hover .bar,
.ft-chart .bar-group:focus-within .bar { fill: var(--ink-950); }

.ft-chart .bar-today { fill: var(--ink-950); }

/* The hit target is the whole day column, never just the painted bar */
.ft-chart .bar-hit { fill: transparent; }

.ft-chart .grid-line { stroke: var(--ink-200); stroke-width: 1; shape-rendering: crispEdges; }

.ft-chart .axis-text {
    fill: var(--ink-600);
    font-family: var(--font-mono);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
}

.ft-chart .today-text { fill: var(--ink-950); }

.chart-tip {
    position: absolute;
    z-index: 5;
    display: none;
    pointer-events: none;
    background: var(--surface);
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-control);
    box-shadow: var(--shadow-float);
    padding: .5rem .75rem;
    min-width: 160px;
}

.chart-tip .tip-date {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-600);
    margin-bottom: .15rem;
}

.chart-tip .tip-row {
    display: flex;
    justify-content: space-between;
    gap: 1.25rem;
    font-size: 12px;
    line-height: 19px;
}

.chart-tip .tip-row strong { color: var(--ink-950); font-variant-numeric: tabular-nums; }
.chart-tip .tip-row span { color: var(--ink-600); }

.chart-tip .tip-total {
    border-top: 1px solid var(--ink-200);
    margin-top: .2rem;
    padding-top: .2rem;
}

/* The chart's table twin keeps the drilldown pattern of the report page */
.chart-table { border-top: 1px solid var(--ink-200); }

/* --------------------------------------------------------------------------
   Tables — data-table pattern: mono meta headers, hairline dividers
   -------------------------------------------------------------------------- */

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--ink-800);
    --bs-table-border-color: var(--ink-200);
    --bs-table-hover-bg: var(--ink-50);
    --bs-table-hover-color: var(--ink-950);
    color: var(--ink-800);
    margin-bottom: 0;
}

.table > :not(caption) > * > * { vertical-align: middle; padding: .65rem .75rem; }

.table thead th {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-600);
    border-bottom: 1px solid var(--ink-200);
    white-space: nowrap;
}

.table tbody td { border-bottom: 1px solid var(--ink-200); }

.table tbody tr:last-child td { border-bottom: 0; }

.table-hover > tbody > tr { transition: background-color var(--duration) ease-out; }

.table-light { --bs-table-bg: var(--ink-50); --bs-table-color: var(--ink-800); }

.table .fw-semibold { color: var(--ink-950); }

/* --------------------------------------------------------------------------
   Badges — tinted background, hairline border, coloured text.
   Never a solid saturated fill. Always renders its text label.
   -------------------------------------------------------------------------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 16px;
    border-radius: 999px;
    padding: .28em .65em;
    border: 1px solid transparent;
}

.badge .icon { width: 16px; height: 16px; flex: none; }

/* Redundant colour dot — the label is the message, never the dot */
.badge::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

/* Dot OR icon, not both — an icon-bearing badge drops the dot */
.badge:has(.icon)::before { display: none; }

.badge-ok     { background: var(--ok-bg);     border-color: var(--ok-border);     color: var(--ok); }
.badge-warn   { background: var(--warn-bg);   border-color: var(--warn-border);   color: var(--warn); }
.badge-danger { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger); }
.badge-info   { background: var(--info-bg);   border-color: var(--info-border);   color: var(--info); }
.badge-neutral{ background: var(--ink-100);   border-color: var(--ink-200);       color: var(--ink-600); }

a.badge { text-decoration: none; }

/* "you" chip next to a person's name — metadata, not state: neutral */
.badge-you {
    background: var(--ink-100);
    color: var(--ink-600);
    border: 1px solid var(--ink-200);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: .2em .55em;
    vertical-align: middle;
}

/* --------------------------------------------------------------------------
   Photo thumbnails + lightbox links
   -------------------------------------------------------------------------- */

.thumb {
    display: block;
    height: 64px;
    width: auto;
    border-radius: var(--radius-control);
    border: 1px solid var(--ink-200);
    transition: border-color var(--duration) ease-out;
}

a[data-lightbox] { cursor: zoom-in; }

a[data-lightbox]:hover .thumb,
a[data-lightbox]:focus-visible .thumb { border-color: var(--ink-600); }

/* --------------------------------------------------------------------------
   Forms — one control look: hover-darken then focus-darken borders
   -------------------------------------------------------------------------- */

.form-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-800);
    margin-bottom: .35rem;
}

.form-control, .form-select {
    border: 1px solid var(--ink-200);
    color: var(--ink-800);
    background: var(--surface);
    font-size: 14px;
    border-radius: var(--radius-control);
    min-height: 38px;
    transition: border-color var(--duration) ease-out;
}

.form-control:hover, .form-select:hover { border-color: var(--ink-300); }

.form-control:focus, .form-select:focus {
    border-color: var(--ink-950);
    box-shadow: none;
}

.form-control::placeholder { color: var(--ink-400); }

.form-control-sm, .form-select-sm { min-height: 32px; }

.form-text { color: var(--ink-600); font-size: 13px; }

input[type="file"].form-control { padding: .3rem .55rem; }

input[type="date"].form-control { color-scheme: light; }

/* --------------------------------------------------------------------------
   Tabs (submit page) — active tab is the black button
   -------------------------------------------------------------------------- */

.ft-tabs .nav-link {
    color: var(--ink-600);
    font-weight: 500;
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .85rem;
    transition: color var(--duration) ease-out, background-color var(--duration) ease-out,
        border-color var(--duration) ease-out;
}

.ft-tabs .nav-link:hover { color: var(--ink-950); background: var(--ink-100); }

.ft-tabs .nav-link.active {
    color: var(--on-primary);
    background: var(--ink-950);
}

.ft-tabs .nav-link .badge {
    background: var(--ink-100);
    border-color: var(--ink-200);
    color: var(--ink-600);
}

/* No dot inside tab count badges */
.ft-tabs .nav-link .badge::before { display: none; }

.ft-tabs .nav-link.active .badge {
    background: var(--primary-overlay);
    border-color: var(--primary-overlay-border);
    color: var(--on-primary);
}

/* --------------------------------------------------------------------------
   Person card (submit page) — completion is a state, so the ok accent
   -------------------------------------------------------------------------- */

.person-card { border-left: 3px solid var(--ink-200); }

.person-card.is-done { border-left-color: var(--ok); }

/* --------------------------------------------------------------------------
   Alerts / flash — accent triads: tinted bg, hairline border, solid text
   -------------------------------------------------------------------------- */

.alert {
    border-radius: var(--radius-control);
    border-width: 1px;
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: 14px;
}

.alert .icon { width: 16px; height: 16px; flex: none; margin-top: 4px; }

.alert-success { background: var(--ok-bg);     color: var(--ok);     border-color: var(--ok-border); }
.alert-danger  { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-border); }
.alert-warning { background: var(--warn-bg);   color: var(--warn);   border-color: var(--warn-border); }
.alert-info    { background: var(--info-bg);   color: var(--info);   border-color: var(--info-border); }
.alert-secondary { background: var(--ink-100); color: var(--ink-800); border-color: var(--ink-200); }

.alert .btn-close { flex: none; margin-top: 4px; }

/* Pending-requests card on admin/teams: warn hairline only.
   Direct property — Bootstrap's .border-warning sets border-color itself,
   so overriding just the custom property loses the cascade. */
.card.border-warning { border-color: var(--warn-border); }

/* --------------------------------------------------------------------------
   Empty states — one look app-wide
   -------------------------------------------------------------------------- */

.empty-state {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--ink-600);
}

.empty-state .icon {
    width: 16px;
    height: 16px;
    color: var(--ink-400);
    margin-bottom: .6rem;
}

.empty-state p { margin: 0; }

.empty-state a { color: var(--ink-950); font-weight: 500; }

/* --------------------------------------------------------------------------
   Login page — flat monochrome, no gradients
   -------------------------------------------------------------------------- */

.login-page {
    position: relative;   /* anchor for the corner theme toggle */
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
    background: var(--ink-50);
}

.login-card {
    width: 100%;
    max-width: 400px;
    background: var(--surface);
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-card);
    padding: 2.25rem 2rem;
}

.login-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .8rem;
    margin-bottom: 1.5rem;
}

.login-brand .ft-brand-mark { width: 44px; height: 44px; }

.login-brand h1 {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 400;
    margin: 0;
    color: var(--ink-950);
}

.login-brand p { color: var(--ink-600); font-size: 13px; margin: 0; }

/* --------------------------------------------------------------------------
   Lightbox — a floating layer, so it may use the one shadow
   -------------------------------------------------------------------------- */

.lightbox-modal .modal-dialog {
    max-width: min(92vw, 1000px);
    margin-top: 4vh;
}

.lightbox-modal .modal-content {
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-float);
}

.lightbox-body { position: relative; padding: .5rem; }

.lightbox-body img {
    display: block;
    max-width: 100%;
    max-height: 78vh;
    margin: 0 auto;
    border-radius: var(--radius-control);
    background: var(--ink-100);
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--ink-200);
    background: var(--surface);
    color: var(--ink-800);
    cursor: pointer;
    box-shadow: var(--shadow-float);
    transition: background-color var(--duration) ease-out, color var(--duration) ease-out;
}

.lightbox-nav:hover { background: var(--ink-100); color: var(--ink-950); }

.lightbox-nav.prev { left: .9rem; }
.lightbox-nav.next { right: .9rem; }

.lightbox-nav:disabled { opacity: .35; cursor: default; box-shadow: none; }

.lightbox-toolbar {
    display: flex;
    justify-content: center;
    gap: .75rem;
    padding: .65rem .5rem .4rem;
}

/* --------------------------------------------------------------------------
   Utility bits
   -------------------------------------------------------------------------- */

.icon {
    display: inline-block;
    vertical-align: -.15em;
    width: 16px;   /* default size; specific contexts override */
    height: 16px;
}

[role="button"] { cursor: pointer; }

details > summary { cursor: pointer; }

/* Disclosure affordance: a chevron that flips when the group is open */
details.drilldown > summary .icon {
    width: 14px;
    height: 14px;
    color: var(--ink-600);
    transition: transform var(--duration) ease-out;
}

details.drilldown[open] > summary .icon { transform: rotate(180deg); }

.chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: 1px solid var(--ink-200);
    background: var(--ink-100);
    border-radius: 999px;
    padding: .25rem .7rem .25rem .6rem;
    font-size: 13px;
    color: var(--ink-800);
}

.chip .icon { width: 16px; height: 16px; color: var(--ink-600); }

.btn-link-icon {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: var(--ink-950);
    text-decoration: none;
    font-weight: 500;
    font-size: 13px;
}

.btn-link-icon:hover { text-decoration: underline; color: var(--ink-950); }

.card-footer-note {
    border-top: 1px solid var(--ink-200);
    color: var(--ink-600);
    font-size: 13px;
    padding: .65rem 1.15rem;
}

.file-selection {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-600);
    margin-top: .3rem;
    min-height: 0;
    word-break: break-word;
}

/* --------------------------------------------------------------------------
   Theme toggle — moon in light, sun in dark. CSS picks the icon so the
   system-following mode (no data-theme attribute) needs no JS state.
   -------------------------------------------------------------------------- */

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--ink-600);
    cursor: pointer;
    flex: none;
    transition: background-color var(--duration) ease-out, border-color var(--duration) ease-out,
        color var(--duration) ease-out;
}

.theme-toggle:hover {
    background: var(--ink-100);
    border-color: var(--ink-200);
    color: var(--ink-950);
}

.theme-toggle .icon { width: 16px; height: 16px; }

/* Light shows the moon (first icon); dark blocks below flip it to the sun */
.theme-toggle .icon:last-child { display: none; }

/* Login page: the toggle floats in the top corner, no navbar there */
.login-page .theme-toggle {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

/* --------------------------------------------------------------------------
   Motion — one duration, killed entirely under reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}

/* --------------------------------------------------------------------------
   Dark theme — the same tokens on an inverted ground: ink-950 stays the
   strongest value (now near-white), surfaces darken, accent solids lift
   for contrast. Applied either when the OS prefers dark and the user has
   not pinned a choice, or when <html data-theme="dark"> (the ft_theme
   cookie, rendered server-side by page_header). The block is written
   twice — once per trigger — because plain CSS has no mixins.

   The extra specificity on the fixup rules (:root[...]/:root:not([...]))
   is what lets them override the light rules above regardless of order.
   -------------------------------------------------------------------------- */

/* Trigger 1: the OS prefers dark and no explicit light choice was made */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --ink-950: #FAFAFA;
        --ink-950-rgb: 250, 250, 250;
        --ink-800: #E5E5E5;
        --ink-600: #A3A3A3;
        --ink-400: #737373;
        --ink-300: #404040;
        --ink-200: #2E2E2E;
        --ink-100: #1F1F1F;
        --ink-50: #141414;

        --surface: #1C1C1C;
        --on-primary: #0A0A0A;
        --primary-overlay: rgba(10, 10, 10, 0.2);
        --primary-overlay-border: rgba(10, 10, 10, 0.38);

        --danger: #E58C86;  --danger-bg: #2A1715;  --danger-border: #5C2E2A;
        --warn:   #D9B36A;  --warn-bg:   #292113;  --warn-border:   #5C4A22;
        --ok:     #7FC09B;  --ok-bg:     #14231B;  --ok-border:     #2C4A39;
        --info:   #85B3DE;  --info-bg:   #15212E;  --info-border:   #2C4460;

        --shadow-float: 0 4px 16px rgba(0, 0, 0, 0.45);

        --bs-primary: #FAFAFA;
        --bs-primary-rgb: 250, 250, 250;
        --bs-link-color: #FAFAFA;
        --bs-link-hover-color: #E5E5E5;
        --bs-body-bg: #141414;
        --bs-body-color: #E5E5E5;
        --bs-border-color: #2E2E2E;
        --bs-secondary-bg: #1F1F1F;
    }

    /* Date pickers follow the theme (the base rule pins them to light) */
    :root:not([data-theme="light"]) input[type="date"].form-control { color-scheme: dark; }

    /* Bootstrap's close button is a black-stroke SVG — invert it */
    :root:not([data-theme="light"]) .btn-close { filter: invert(1); }

    /* Sun in, moon out */
    :root:not([data-theme="light"]) .theme-toggle .icon:first-child { display: none; }
    :root:not([data-theme="light"]) .theme-toggle .icon:last-child { display: inline-block; }
}

/* Trigger 2: an explicit dark choice in the ft_theme cookie */
:root[data-theme="dark"] {
    color-scheme: dark;

    --ink-950: #FAFAFA;
    --ink-950-rgb: 250, 250, 250;
    --ink-800: #E5E5E5;
    --ink-600: #A3A3A3;
    --ink-400: #737373;
    --ink-300: #404040;
    --ink-200: #2E2E2E;
    --ink-100: #1F1F1F;
    --ink-50: #141414;

    --surface: #1C1C1C;
    --on-primary: #0A0A0A;
    --primary-overlay: rgba(10, 10, 10, 0.2);
    --primary-overlay-border: rgba(10, 10, 10, 0.38);

    --danger: #E58C86;  --danger-bg: #2A1715;  --danger-border: #5C2E2A;
    --warn:   #D9B36A;  --warn-bg:   #292113;  --warn-border:   #5C4A22;
    --ok:     #7FC09B;  --ok-bg:     #14231B;  --ok-border:     #2C4A39;
    --info:   #85B3DE;  --info-bg:   #15212E;  --info-border:   #2C4460;

    --shadow-float: 0 4px 16px rgba(0, 0, 0, 0.45);

    --bs-primary: #FAFAFA;
    --bs-primary-rgb: 250, 250, 250;
    --bs-link-color: #FAFAFA;
    --bs-link-hover-color: #E5E5E5;
    --bs-body-bg: #141414;
    --bs-body-color: #E5E5E5;
    --bs-border-color: #2E2E2E;
    --bs-secondary-bg: #1F1F1F;
}

:root[data-theme="dark"] input[type="date"].form-control { color-scheme: dark; }

:root[data-theme="dark"] .btn-close { filter: invert(1); }

:root[data-theme="dark"] .theme-toggle .icon:first-child { display: none; }
:root[data-theme="dark"] .theme-toggle .icon:last-child { display: inline-block; }