/* ============================================================================
   KAISA theme - "Clean slate" (chosen 2026-09-29)

   One layer, loaded LAST, over everything else. It does two things:

     1. Re-points the existing tokens (--gk-*, --btn-*, --sb-*, Bootstrap's --bs-*)
        at one neutral palette, so every screen built on them changes with no
        view edits.
     2. Restyles the shared shell - sidebar, page headers, cards, tables, forms -
        where the old rules painted gradients or literal colours that tokens
        cannot reach.

   The base is neutral white and gray; terra is kept for what you can act on:
   buttons, links, focus, the current menu item. Everything else stays quiet.

   Selectors are prefixed with body.app-body. That out-ranks the older
   "[data-bs-theme=dark] .thing" rules (attribute + class) without !important,
   and scopes the theme to the signed-in app: public pages and sign-in pages
   keep their own brand styling.

   To undo the whole look, remove the one <link> to this file in _Layout.
   ============================================================================ */

:root {
    --kt-font: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

    /* Warm canvas (option B, 2026-09-29): a soft cream page behind white cards, with lines and
       fills warmed to match so nothing reads as a cold gray box on a warm page. */
    --kt-page: #fbf8f4;
    --kt-surface: #ffffff;
    --kt-surface-alt: #fcfaf7;
    --kt-hover: #f7f2eb;
    --kt-line: #ece5da;
    --kt-line-soft: #f4eee6;
    --kt-ink: #111827;
    --kt-ink-2: #374151;
    --kt-muted: #6b7280;

    /* Terra, darkened until white text on it passes AA (4.9:1). */
    --kt-accent: #c2461b;
    --kt-accent-hover: #a63a15;
    --kt-accent-ink: #9a3412;
    --kt-accent-tint: #fdf0ea;
    --kt-accent-tint-2: #fbe2d6;
    --kt-accent-ring: rgba(194, 70, 27, 0.28);

    --kt-danger: #b42318;
    --kt-danger-tint: #fef3f2;
    --kt-warning: #b54708;
    --kt-warning-tint: #fffaeb;
    --kt-success: #067647;
    --kt-success-tint: #ecfdf3;
    --kt-info: #175cd3;
    --kt-info-tint: #eff8ff;

    --kt-radius: 10px;
    --kt-radius-sm: 8px;
    --kt-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    --kt-shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08);

    /* ---- the old tokens, re-pointed ---- */
    --gk-primary: var(--kt-accent);
    --gk-primary-strong: var(--kt-accent-hover);
    --gk-ink: var(--kt-ink);
    --gk-muted: var(--kt-muted);
    --gk-line: var(--kt-line);
    --gk-soft-line: var(--kt-line-soft);
    --gk-surface: var(--kt-surface);
    --gk-surface-alt: var(--kt-surface-alt);
    --gk-radius: var(--kt-radius);
    --gk-shadow: var(--kt-shadow-md);
    --gk-shadow-sm: var(--kt-shadow);

    --btn-radius: var(--kt-radius-sm);
    --btn-primary-bg: var(--kt-accent);
    --btn-primary-bg-hover: var(--kt-accent-hover);
    --btn-primary-fg: #fff;
    --btn-primary-lift: var(--kt-shadow);
    --btn-primary-lift-hover: var(--kt-shadow-md);
    --btn-primary-press: inset 0 1px 2px rgba(0, 0, 0, 0.18);
    --btn-tint-bg: var(--kt-accent-tint);
    --btn-tint-bg-hover: var(--kt-accent-tint-2);
    --btn-tint-fg: var(--kt-accent-ink);
    --btn-quiet-fg: var(--kt-ink-2);
    --btn-quiet-fg-hover: var(--kt-ink);
    --btn-quiet-bg-hover: var(--kt-hover);

    --bs-body-font-family: var(--kt-font);
    --bs-body-bg: var(--kt-page);
    --bs-body-color: var(--kt-ink);
    --bs-emphasis-color: var(--kt-ink);
    --bs-secondary-color: var(--kt-muted);
    --bs-tertiary-bg: var(--kt-surface-alt);
    --bs-border-color: var(--kt-line);
    --bs-border-radius: var(--kt-radius-sm);
    --bs-link-color: var(--kt-accent-ink);
    --bs-link-hover-color: var(--kt-accent-hover);
    --bs-primary: var(--kt-accent);
    --bs-primary-rgb: 194, 70, 27;
    --bs-focus-ring-color: var(--kt-accent-ring);

    --gs-active-bg: var(--kt-accent-tint);
    --gs-active-ring: var(--kt-accent-ring);
}

[data-bs-theme="dark"] {
    --kt-page: #0e1116;
    --kt-surface: #161a21;
    --kt-surface-alt: #1b2029;
    --kt-hover: #222834;
    --kt-line: #2a303b;
    --kt-line-soft: #222731;
    --kt-ink: #e6e8ec;
    --kt-ink-2: #c4c9d2;
    --kt-muted: #98a1af;

    --kt-accent: #c2461b;
    --kt-accent-hover: #d4562a;
    --kt-accent-ink: #f29a74;
    --kt-accent-tint: rgba(217, 88, 43, 0.14);
    --kt-accent-tint-2: rgba(217, 88, 43, 0.24);
    --kt-accent-ring: rgba(242, 154, 116, 0.35);

    --kt-danger: #f97066;
    --kt-danger-tint: rgba(240, 68, 56, 0.14);
    --kt-warning: #fdb022;
    --kt-warning-tint: rgba(247, 144, 9, 0.14);
    --kt-success: #47cd89;
    --kt-success-tint: rgba(23, 178, 106, 0.14);
    --kt-info: #84caff;
    --kt-info-tint: rgba(46, 144, 250, 0.14);

    --kt-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    --kt-shadow-md: 0 6px 16px rgba(0, 0, 0, 0.45);

    --gk-primary: var(--kt-accent);
    --gk-primary-strong: var(--kt-accent-hover);
    --gk-ink: var(--kt-ink);
    --gk-muted: var(--kt-muted);
    --gk-line: var(--kt-line);
    --gk-soft-line: var(--kt-line-soft);
    --gk-surface: var(--kt-surface);
    --gk-surface-alt: var(--kt-surface-alt);

    --btn-primary-bg: var(--kt-accent);
    --btn-primary-bg-hover: var(--kt-accent-hover);
    --btn-tint-bg: var(--kt-accent-tint);
    --btn-tint-bg-hover: var(--kt-accent-tint-2);
    --btn-tint-fg: var(--kt-accent-ink);
    --btn-quiet-fg: var(--kt-ink-2);
    --btn-quiet-fg-hover: var(--kt-ink);
    --btn-quiet-bg-hover: var(--kt-hover);

    --bs-body-bg: var(--kt-page);
    --bs-body-color: var(--kt-ink);
    --bs-emphasis-color: var(--kt-ink);
    --bs-secondary-color: var(--kt-muted);
    --bs-tertiary-bg: var(--kt-surface-alt);
    --bs-border-color: var(--kt-line);
    --bs-link-color: var(--kt-accent-ink);
    --bs-link-hover-color: #f7b08f;
}

/* ============================================================
   Pastel hues for icon chips (option B). A hue class sets --hue-bg / --hue-fg and anything inside
   that paints a chip or a line reads them - so a module keeps one colour everywhere it appears.
   The foregrounds pass AA on their own tint in both themes.
   ============================================================ */

.kd-hue-blue   { --hue-bg: #dbeafe; --hue-fg: #1d4ed8; }
.kd-hue-green  { --hue-bg: #d1fae5; --hue-fg: #047857; }
.kd-hue-amber  { --hue-bg: #fef3c7; --hue-fg: #b45309; }
.kd-hue-teal   { --hue-bg: #ccfbf1; --hue-fg: #0f766e; }
.kd-hue-peach  { --hue-bg: #ffe4d6; --hue-fg: #c2410c; }
.kd-hue-violet { --hue-bg: #ede9fe; --hue-fg: #6d28d9; }
.kd-hue-rose   { --hue-bg: #ffe4e6; --hue-fg: #be123c; }

[data-bs-theme="dark"] .kd-hue-blue   { --hue-bg: rgba(59, 130, 246, 0.18);  --hue-fg: #93c5fd; }
[data-bs-theme="dark"] .kd-hue-green  { --hue-bg: rgba(16, 185, 129, 0.18);  --hue-fg: #6ee7b7; }
[data-bs-theme="dark"] .kd-hue-amber  { --hue-bg: rgba(245, 158, 11, 0.18);  --hue-fg: #fcd34d; }
[data-bs-theme="dark"] .kd-hue-teal   { --hue-bg: rgba(20, 184, 166, 0.18);  --hue-fg: #5eead4; }
[data-bs-theme="dark"] .kd-hue-peach  { --hue-bg: rgba(249, 115, 22, 0.18);  --hue-fg: #fdba74; }
[data-bs-theme="dark"] .kd-hue-violet { --hue-bg: rgba(139, 92, 246, 0.2);   --hue-fg: #c4b5fd; }
[data-bs-theme="dark"] .kd-hue-rose   { --hue-bg: rgba(244, 63, 94, 0.18);   --hue-fg: #fda4af; }

.kd-icon-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 8px;
    background: var(--hue-bg, var(--kt-surface-alt));
    color: var(--hue-fg, var(--kt-muted));
    font-size: 0.9rem;
}

/* ============================================================
   Type and page
   ============================================================ */

body.app-body {
    font-family: var(--kt-font);
    font-size: 0.9375rem;
    background: var(--kt-page);
    color: var(--kt-ink);
    -webkit-font-smoothing: antialiased;
}

/* Amounts and counts line up in columns and do not jiggle as they change. */
body.app-body :is(.metric-value, .kd-tile-value, table td, .badge) {
    font-variant-numeric: tabular-nums;
}

/* Every heading the old theme set in a serif, now in the one sans. */
body.app-body :is(.page-hero, .detail-hero, .profile-header) :is(h1, h2, h3, h4),
body.app-body :is(.section-title, .detail-title),
body.app-body .app-main .card-header :is(h5, h6),
body.app-body .app-main :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--kt-font);
    font-weight: 650;
    letter-spacing: -0.015em;
    color: var(--kt-ink);
}

/* Links at element specificity on purpose - the same weight as site.css's own "a" rule, which this
   replaces by coming later. Anything with a class (.btn, .nav-link, a dashboard tile) keeps its own
   colour; a class-prefixed rule here painted every link-styled button terra-on-terra. */
a { color: var(--kt-accent-ink); }
a:hover { color: var(--kt-accent-hover); }
:where([data-bs-theme="dark"]) a:hover { color: #f7b08f; }

body.app-body *:focus-visible {
    outline: 2px solid var(--kt-accent);
    outline-offset: 2px;
}

body.app-body .text-muted { color: var(--kt-muted) !important; }

body.app-body .app-footer {
    background: var(--kt-surface);
    border-top: 1px solid var(--kt-line);
    backdrop-filter: none;
}

/* ============================================================
   Page headers: flat, bordered, no gradient or coloured edge
   ============================================================ */

body.app-body :is(.page-hero, .detail-hero, .profile-header),
body.app-body .app-main > .d-flex.justify-content-between.align-items-center.mb-4,
body.app-body .app-main > .d-flex.justify-content-between.align-items-start.mb-4,
body.app-body .app-main > .d-flex.justify-content-between.align-items-center.mb-4.flex-wrap,
body.app-body .app-main > .d-flex.justify-content-between.align-items-start.gap-3.flex-wrap.mb-4 {
    background: var(--kt-surface);
    border: 1px solid var(--kt-line);
    border-left-width: 1px;
    border-radius: var(--kt-radius);
    box-shadow: none;
}

body.app-body .detail-kicker {
    color: var(--kt-muted);
    font-weight: 600;
    letter-spacing: 0.02em;
}

body.app-body .detail-kicker i { color: var(--kt-accent); }

/* ============================================================
   Cards, tables, forms
   ============================================================ */

body.app-body .card {
    --bs-card-bg: var(--kt-surface);
    --bs-card-border-color: var(--kt-line);
    --bs-card-cap-bg: transparent;
    background: var(--kt-surface);
    border-color: var(--kt-line);
    border-radius: var(--kt-radius);
    box-shadow: var(--kt-shadow);
}

body.app-body .card-header {
    background: transparent;
    border-bottom: 1px solid var(--kt-line-soft);
}

body.app-body .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--kt-ink);
    --bs-table-border-color: var(--kt-line-soft);
    --bs-table-hover-bg: var(--kt-hover);
    --bs-table-hover-color: var(--kt-ink);
}

body.app-body .table > thead > tr > th,
body.app-body .table-light {
    --bs-table-bg: var(--kt-surface-alt);
    --bs-table-color: var(--kt-muted);
    background: var(--kt-surface-alt);
    color: var(--kt-muted);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    border-bottom: 1px solid var(--kt-line);
}

body.app-body :is(.form-control, .form-select) {
    background-color: var(--kt-surface);
    border-color: var(--kt-line);
    border-radius: var(--kt-radius-sm);
    color: var(--kt-ink);
}

body.app-body :is(.form-control, .form-select):focus {
    border-color: var(--kt-accent);
    box-shadow: 0 0 0 3px var(--kt-accent-ring);
}

body.app-body .input-group-text {
    background: var(--kt-surface-alt);
    border-color: var(--kt-line);
    color: var(--kt-muted);
}

body.app-body .dropdown-menu {
    --bs-dropdown-bg: var(--kt-surface);
    --bs-dropdown-border-color: var(--kt-line);
    --bs-dropdown-link-color: var(--kt-ink);
    --bs-dropdown-link-hover-bg: var(--kt-hover);
    --bs-dropdown-link-hover-color: var(--kt-ink);
    border-radius: var(--kt-radius);
    box-shadow: var(--kt-shadow-md);
}

body.app-body .modal-content {
    background: var(--kt-surface);
    border: 1px solid var(--kt-line);
    border-radius: 14px;
}

body.app-body .nav-tabs .nav-link.active,
body.app-body .nav-pills .nav-link.active {
    color: var(--kt-accent-ink);
    border-bottom-color: var(--kt-accent);
}

body.app-body .nav-pills .nav-link.active {
    background: var(--kt-accent-tint);
}

/* ============================================================
   Sidebar: light rail, terra only on the current item
   ============================================================ */

body.app-body #sidebar {
    --sb-terra: var(--kt-accent);
    --sb-terra-d: var(--kt-accent-hover);
    --sb-amber: var(--kt-accent);
    --sb-cream: var(--kt-ink);
    --sb-bg-1: var(--kt-surface);
    --sb-bg-2: var(--kt-surface);
    --sb-ink-soft: var(--kt-ink-2);
    --sb-ink-faint: var(--kt-muted);
    --sb-line: var(--kt-line);
    background: var(--kt-surface);
    border-right: 1px solid var(--kt-line);
    box-shadow: none;
}

body.app-body #sidebar .sidebar-brand-mark {
    background: var(--kt-surface);
    border: 1px solid var(--kt-line);
    box-shadow: none;
}

body.app-body #sidebar .sidebar-brand:hover .sidebar-brand-mark {
    transform: none;
    box-shadow: var(--kt-shadow);
}

body.app-body #sidebar .sidebar-brand-title { color: var(--kt-ink); font-weight: 700; }
body.app-body #sidebar .sidebar-brand-subtitle { color: var(--kt-muted); font-weight: 500; }

body.app-body #sidebar :is(.sidebar-toggle-btn, .sidebar-footer-btn, .sidebar-search-btn),
body.app-body #sidebar .sidebar-footer .app-notification-button {
    background: var(--kt-surface-alt) !important;
    border: 1px solid var(--kt-line) !important;
    color: var(--kt-muted) !important;
}

body.app-body #sidebar :is(.sidebar-toggle-btn, .sidebar-footer-btn, .sidebar-search-btn):hover,
body.app-body #sidebar .sidebar-footer .app-notification-button:hover {
    background: var(--kt-hover) !important;
    color: var(--kt-ink) !important;
}

body.app-body #sidebar .sidebar-search-kbd {
    border-color: var(--kt-line);
    color: var(--kt-muted);
    background: var(--kt-surface);
}

body.app-body #sidebar .sidebar-link {
    font-weight: 500;
    color: var(--kt-ink-2) !important;
}

body.app-body #sidebar .sidebar-link i:not(.sidebar-caret) { color: var(--kt-muted); }

body.app-body #sidebar .sidebar-link:hover,
body.app-body #sidebar .sidebar-link:focus {
    background: var(--kt-hover);
    color: var(--kt-ink) !important;
    transform: none;
}

body.app-body #sidebar .sidebar-link:hover i:not(.sidebar-caret) {
    color: var(--kt-ink);
    transform: none;
}

body.app-body #sidebar .sidebar-link.active {
    background: var(--kt-accent-tint) !important;
    color: var(--kt-accent-ink) !important;
    font-weight: 600;
    box-shadow: none;
}

body.app-body #sidebar .sidebar-link.active i { color: var(--kt-accent-ink) !important; }

body.app-body #sidebar .sidebar-link::before { background: var(--kt-accent); }

/* A group heading whose page is open is context, not the current page: no fill, just ink. */
body.app-body #sidebar .sidebar-group-toggle.active {
    background: transparent !important;
    color: var(--kt-ink) !important;
}

body.app-body #sidebar .sidebar-group-toggle.active i { color: var(--kt-ink) !important; }
body.app-body #sidebar .sidebar-group-toggle.active::before { height: 0; }

body.app-body #sidebar .sidebar-submenu .sidebar-link { color: var(--kt-muted) !important; }
body.app-body #sidebar .sidebar-submenu .sidebar-link.active { color: var(--kt-accent-ink) !important; }

body.app-body #sidebar .sidebar-profile-btn {
    background: var(--kt-surface-alt);
    border-color: var(--kt-line);
    color: var(--kt-ink);
}

body.app-body #sidebar :is(.sidebar-profile-identity, .sidebar-profile-more) { color: var(--kt-ink); }

body.app-body #sidebar :is(.sidebar-profile-identity, .sidebar-profile-more):is(:hover, :focus) {
    background: var(--kt-hover);
    color: var(--kt-ink);
}

body.app-body #sidebar .sidebar-profile-role { color: var(--kt-muted); }

body.app-body #sidebar .avatar {
    background: var(--kt-accent-tint);
    color: var(--kt-accent-ink);
}

/* ============================================================
   Dashboard (Views/Home/Index.cshtml)
   ============================================================ */

.kd { display: flex; flex-direction: column; gap: 1.25rem; }

.kd-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem 1.5rem;
    align-items: end;
}

.kd-date { margin: 0; color: var(--kt-muted); font-size: 0.85rem; font-weight: 500; }

body.app-body .app-main h1.kd-hello {
    margin: 0.15rem 0 0;
    font-size: clamp(1.4rem, 2.2vw, 1.75rem);
    font-weight: 700;
    letter-spacing: -0.02em;
}




.kd-quick {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.kd-quick a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 36px;
    padding: 0 0.8rem;
    border: 1px solid var(--kt-line);
    border-radius: 999px;
    background: var(--kt-surface);
    color: var(--kt-ink-2);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
}

.kd-quick a:hover { border-color: var(--kt-accent); color: var(--kt-accent-ink); background: var(--kt-accent-tint); }
.kd-quick a i { color: var(--hue-fg, var(--kt-accent)); }

.kd-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 1.25rem;
    align-items: start;
}

.kd-main, .kd-rail { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }

.kd-card {
    background: var(--kt-surface);
    border: 1px solid var(--kt-line);
    border-radius: var(--kt-radius);
    box-shadow: var(--kt-shadow);
}

.kd-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.9rem 1.1rem;
    border-bottom: 1px solid var(--kt-line-soft);
}

body.app-body .app-main .kd-card-head :is(h2, h3) {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.98rem;
    font-weight: 650;
}

.kd-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.45rem;
    border-radius: 999px;
    background: var(--kt-accent-tint);
    color: var(--kt-accent-ink);
    font-size: 0.75rem;
    font-weight: 700;
}

.kd-link { font-size: 0.85rem; font-weight: 500; text-decoration: none; }

/* ---- Your day ---- */

.kd-tasks { list-style: none; margin: 0; padding: 0; }

.kd-task {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.1rem;
    border-bottom: 1px solid var(--kt-line-soft);
}

.kd-task:last-child { border-bottom: 0; }
.kd-task:hover { background: var(--kt-surface-alt); }

.kd-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--kt-line); }
.kd-task-overdue .kd-dot { background: var(--kt-danger); }
.kd-task-attention .kd-dot { background: var(--kt-warning); }

.kd-task-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    background: var(--hue-bg, var(--kt-surface-alt));
    color: var(--hue-fg, var(--kt-muted));
}

.kd-task-text { min-width: 0; }
.kd-task-title { display: block; font-weight: 600; color: var(--kt-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kd-task-detail { display: block; font-size: 0.8rem; color: var(--kt-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.kd-when {
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: var(--kt-surface-alt);
    color: var(--kt-muted);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.kd-task-overdue .kd-when { background: var(--kt-danger-tint); color: var(--kt-danger); }
.kd-task-attention .kd-when { background: var(--kt-warning-tint); color: var(--kt-warning); }

.kd-open {
    min-height: 32px !important;
    padding: 0 0.75rem !important;
    border: 1px solid var(--kt-line) !important;
    background: var(--kt-surface) !important;
    color: var(--kt-ink-2) !important;
    font-size: 0.8rem !important;
}

.kd-open:hover { border-color: var(--kt-accent) !important; color: var(--kt-accent-ink) !important; }

.kd-empty {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.4rem 1.1rem;
    color: var(--kt-muted);
}

.kd-empty i { font-size: 1.5rem; color: var(--kt-success); }

.kd-card-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.7rem 1.1rem;
    border-top: 1px solid var(--kt-line-soft);
    color: var(--kt-muted);
    font-size: 0.82rem;
}

/* ---- metric tiles ---- */

.kd-period { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.kd-period .form-select { width: auto; min-height: 34px; padding-top: 0.2rem; padding-bottom: 0.2rem; font-size: 0.85rem; }

.kd-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 0.75rem;
    padding: 1rem 1.1rem 1.1rem;
}

.kd-tile {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.85rem 0.95rem 0.6rem;
    border: 1px solid var(--kt-line);
    border-radius: var(--kt-radius-sm);
    background: var(--kt-surface);
    color: var(--kt-ink);
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.kd-tile:hover { border-color: var(--kt-accent); box-shadow: var(--kt-shadow-md); color: var(--kt-ink); }

.kd-tile-label { display: flex; align-items: center; gap: 0.4rem; color: var(--kt-muted); font-size: 0.8rem; font-weight: 600; }
.kd-tile-label { gap: 0.5rem; }
.kd-tile-value { font-size: 1.55rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.kd-tile-sub { color: var(--kt-muted); font-size: 0.78rem; min-height: 2.2em; }

.kd-spark { display: block; width: 100%; height: 30px; margin-top: 0.2rem; }
.kd-spark polyline { fill: none; stroke: var(--hue-fg, var(--kt-accent)); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kd-spark .kd-spark-area { fill: var(--hue-bg, var(--kt-accent-tint)); stroke: none; opacity: 0.7; }
.kd-spark-caption { color: var(--kt-muted); font-size: 0.7rem; }

/* ---- the rail ---- */

.kd-rail-list { list-style: none; margin: 0; padding: 0.35rem 0; }
.kd-rail-list > li { padding: 0.6rem 1.1rem; }
.kd-rail-list > li + li { border-top: 1px solid var(--kt-line-soft); }

.kd-ann summary { list-style: none; cursor: pointer; }
.kd-ann summary::-webkit-details-marker { display: none; }
.kd-ann-title { display: block; font-weight: 600; color: var(--kt-ink); }
.kd-ann-meta { display: flex; gap: 0.4rem; align-items: center; color: var(--kt-muted); font-size: 0.75rem; }
.kd-ann-body { margin: 0.5rem 0 0; color: var(--kt-ink-2); font-size: 0.86rem; white-space: pre-line; }

.kd-event { display: flex; gap: 0.75rem; align-items: flex-start; text-decoration: none; color: var(--kt-ink); }
.kd-event:hover { color: var(--kt-ink); }
.kd-event:hover .kd-event-title { color: var(--kt-accent-ink); }

.kd-event-date {
    flex: 0 0 auto;
    width: 2.75rem;
    padding: 0.25rem 0;
    border: 1px solid var(--kt-line);
    border-radius: var(--kt-radius-sm);
    text-align: center;
    line-height: 1.1;
}

.kd-event-date b { display: block; font-size: 1.05rem; }
.kd-event-date span { display: block; color: var(--kt-accent-ink); font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.kd-event-title { display: block; font-weight: 600; }
.kd-event-meta { display: block; color: var(--kt-muted); font-size: 0.78rem; }

.kd-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.85rem 1.1rem 1rem; }

.kd-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 100%;
    min-height: 32px;
    padding: 0 0.7rem;
    border: 1px solid var(--kt-line);
    border-radius: 999px;
    color: var(--kt-ink-2);
    font-size: 0.82rem;
    font-weight: 500;
    text-decoration: none;
}

.kd-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kd-chip:hover { border-color: var(--kt-accent); color: var(--kt-accent-ink); background: var(--kt-accent-tint); }

/* Your day lives in the rail now, which is 340px wide: the "when" chip moves under the title so
   the title keeps its room, and Open sits beside both. */
.kd-rail .kd-task { grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 0.2rem 0.6rem; padding: 0.7rem 0.9rem; }
.kd-rail .kd-task .kd-dot, .kd-rail .kd-task .kd-task-icon { grid-row: 1 / span 2; }
.kd-rail .kd-task .kd-when { grid-column: 3; justify-self: start; }
.kd-rail .kd-task .kd-open { grid-column: 4; grid-row: 1 / span 2; }
.kd-rail .kd-card-head, .kd-rail .kd-card-foot { padding-left: 0.9rem; padding-right: 0.9rem; }
.kd-rail .kd-task-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
}

/* One column below 1200px. The two columns dissolve so the sections can be re-ordered as one
   list: what needs you first, then the news, then the numbers - rather than Your day being
   pushed below everything in the left column. */
@media (max-width: 1199.98px) {
    .kd-grid { display: flex; flex-direction: column; align-items: stretch; }
    .kd-main, .kd-rail { display: contents; }
    .kd-grid > * > .kd-card { order: 5; }
    .kd-grid .kd-sec-day { order: 1; }
    .kd-grid .kd-sec-ann { order: 2; }
    .kd-grid .kd-sec-overview { order: 3; }
    .kd-grid .kd-sec-events { order: 4; }
}

@media (max-width: 767.98px) {
    .kd-head { grid-template-columns: minmax(0, 1fr); }
    .kd-task, .kd-rail .kd-task { grid-template-columns: auto minmax(0, 1fr) auto; }
    .kd-task-icon, .kd-rail .kd-task .kd-task-icon { display: none; }
    .kd-task-title, .kd-task-detail { white-space: normal; }
    .kd-task .kd-when, .kd-rail .kd-task .kd-when { grid-column: 2; justify-self: start; }
    .kd-task .kd-open, .kd-rail .kd-task .kd-open { grid-column: 3; grid-row: 1 / span 2; }
    .kd-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    .kd-tile { transition: none; }
}

/* Row hover: neutral in both themes. The older rules painted a warm tint in light and a navy
   block in dark, with !important; these match their weight and, coming last, replace them. */
html body.app-body.app-modern .app-main table.table-hover > tbody > tr:hover > *,
html body.app-body.app-modern .app-main table.table tbody tr[data-href]:hover > * {
    --bs-table-bg-state: var(--kt-hover);
    --bs-table-hover-bg: var(--kt-hover);
    --bs-table-hover-color: var(--kt-ink);
    background: var(--kt-hover) !important;
    background-color: var(--kt-hover) !important;
    box-shadow: inset 0 0 0 9999px var(--kt-hover) !important;
    color: var(--kt-ink) !important;
}

html body.app-body.app-modern .app-main table.table-hover > tbody > tr:hover > * a:not(.btn),
html body.app-body.app-modern .app-main table.table tbody tr[data-href]:hover > * a:not(.btn) {
    color: var(--kt-accent-ink) !important;
}

/* Zebra rows: a neutral stripe instead of the brand-orange tint, in both themes and on the
   phone card layout. Same weight as responsive.css's rules, and later. */
html body.app-body.app-modern .app-main table.table tbody tr:nth-child(even):not(:hover) > td,
html body.app-body.app-modern .app-main table.table tbody tr:nth-child(even):not(:hover) > th {
    background-color: var(--kt-surface-alt) !important;
}

@media (max-width: 768px) {
    html body.app-body .table-mobile tbody tr:nth-child(even) {
        background: var(--kt-surface-alt) !important;
    }
}

/* ---- Administration Dashboard (2026-10-01) ---- */

.ad-health {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem;
}

.ad-light {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem 0.95rem;
    border: 1px solid var(--kt-line);
    border-left-width: 4px;
    border-radius: var(--kt-radius-sm);
    background: var(--kt-surface);
    color: var(--kt-ink);
    text-decoration: none;
    box-shadow: var(--kt-shadow);
}

.ad-light:hover { color: var(--kt-ink); box-shadow: var(--kt-shadow-md); }

.ad-light-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 2rem;
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
}

.ad-light-title { display: block; font-weight: 650; }
.ad-light-detail { display: block; font-size: 0.78rem; color: var(--kt-muted); }

.ad-good { border-left-color: var(--kt-success); }
.ad-good .ad-light-icon { background: var(--kt-success-tint); color: var(--kt-success); }
.ad-warn { border-left-color: var(--kt-warning); }
.ad-warn .ad-light-icon { background: var(--kt-warning-tint); color: var(--kt-warning); }
.ad-bad { border-left-color: var(--kt-danger); }
.ad-bad .ad-light-icon { background: var(--kt-danger-tint); color: var(--kt-danger); }

.kd-task.ad-sub { padding-top: 0.5rem; padding-bottom: 0.5rem; cursor: pointer; }
.kd-task.ad-sub .kd-task-title { font-weight: 500; }
.kd-task.ad-sub .kd-task-detail .badge { font-size: 0.68rem; }

.ad-tool-row { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 0.75rem; align-items: baseline; }
.ad-tool-group { color: var(--kt-muted); font-size: 0.8rem; font-weight: 650; }
.ad-tool-links { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; }
.ad-tool { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.88rem; text-decoration: none; }

@media (max-width: 576px) {
    .ad-tool-row { grid-template-columns: 1fr; gap: 0.35rem; }
    .kd-task.ad-sub { grid-template-columns: minmax(0, 1fr) auto; }
    .kd-task.ad-sub > span:empty, .kd-task.ad-sub .kd-when { display: none; }
}

/* ---- Detail pages: summary + rail (2026-10-02, Fund Request and Project) ---- */

.dl-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    grid-template-areas: "main rail";
    gap: 1rem;
    align-items: start;
}

/* The rail is first in the source (phones show it first); on a wide screen it moves right. */
.dl-rail { grid-area: rail; display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.dl-rail > .card, .dl-rail > .alert { margin: 0 !important; }
.dl-main { grid-area: main; min-width: 0; }

@media (min-width: 1200px) {
    .dl-rail { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; }
}

@media (max-width: 991.98px) {
    .dl-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "rail" "main"; }
}

/* A family's page: the section menu on the left, the chosen section on the right. On a phone the
   menu becomes a row of chips that scrolls sideways above the content. */
.fam-grid {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}
.fam-nav { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.5rem; }
.fam-nav a {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.45rem 0.6rem; border-radius: var(--kt-radius-sm);
    color: var(--kt-ink); text-decoration: none; font-size: 0.9rem;
}
.fam-nav a:hover { background: var(--kt-hover); }
.fam-nav a.active { background: var(--kt-accent-tint); color: var(--kt-accent-ink); font-weight: 600; }
.fam-nav .fam-code { width: 1.5rem; flex: 0 0 1.5rem; font-weight: 700; color: var(--kt-muted); }
.fam-nav a.active .fam-code { color: inherit; }
.fam-nav .fam-count { margin-left: auto; font-size: 0.75rem; color: var(--kt-muted); font-variant-numeric: tabular-nums; }
/* One line per section; the full title is in the link's tooltip. */
.fam-nav .fam-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Families list: the register at a glance. */
.fam-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
.fam-tile { display: block; padding: 0.85rem 1rem; border-radius: var(--kt-radius-sm); background: var(--kt-surface);
            border: 1px solid var(--kt-line); color: var(--kt-ink); text-decoration: none; }
a.fam-tile:hover { background: var(--kt-hover); }
.fam-tile-n { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.fam-tile-l { font-size: 0.8rem; color: var(--kt-muted); }
.fam-tile-warn { border-color: var(--bs-warning-border-subtle); }
.fam-tile-warn .fam-tile-n { color: var(--bs-warning-text-emphasis); }
@media (max-width: 767.98px) { .fam-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fam-nav-heading { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--kt-muted); padding: 0.6rem 0.6rem 0.2rem; }
.fam-q { padding: 0.75rem 0; border-top: 1px solid var(--kt-line-soft); }
.fam-q:first-child { border-top: 0; }
.fam-q-text { white-space: pre-line; }
.fam-q-text .fam-q-no { font-weight: 700; margin-right: 0.35rem; }
.fam-q.unanswered .fam-q-text { color: var(--kt-muted); }
.fam-chip { display: inline-block; padding: 0.15rem 0.55rem; margin: 0.15rem 0.25rem 0 0; border-radius: 999px;
            background: var(--kt-surface-alt); border: 1px solid var(--kt-line); font-size: 0.85rem; }
@media (min-width: 1200px) {
    .fam-nav-card { position: sticky; top: 1rem; }
}
@media (max-width: 991.98px) {
    .fam-grid { grid-template-columns: minmax(0, 1fr); }
    .fam-nav { flex-direction: row; overflow-x: auto; white-space: nowrap; }
    .fam-nav-heading { display: none; }
    .fam-nav .fam-count { display: none; }
}

/* New family: three steps on one form. The step list only works as tabs once the script runs. */
.fam-steps { display: flex; gap: 0.5rem; list-style: none; padding: 0; margin: 0 0 1rem; flex-wrap: wrap; }
.fam-steps li { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.85rem; border-radius: 999px;
                border: 1px solid var(--kt-line); color: var(--kt-muted); font-size: 0.9rem; }
.fam-steps-on .fam-steps li { cursor: pointer; }
.fam-steps .fam-step-no { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%;
                          background: var(--kt-surface-alt); font-weight: 700; font-size: 0.8rem; }
.fam-steps li.active { border-color: var(--kt-accent); color: var(--kt-accent-ink); background: var(--kt-accent-tint); font-weight: 600; }
.fam-steps li.active .fam-step-no { background: var(--kt-accent); color: #fff; }
.fam-steps li.done { color: var(--kt-ink); }
.fam-steps li.done .fam-step-no { background: var(--kt-accent-tint); color: var(--kt-accent-ink); }
@media (max-width: 575.98px) {
    /* On a phone the three pills would stack; the numbers, and the current step's name, are enough. */
    .fam-steps { flex-wrap: nowrap; }
    .fam-steps-on .fam-steps li:not(.active) .fam-step-label { display: none; }
}
.fam-quick-roster { table-layout: fixed; min-width: 760px; }
@media (min-width: 768px) {
    .fam-roster { table-layout: fixed; }
    .fam-roster td { overflow-wrap: anywhere; }
}
.fam-roster tr[data-member-row] { cursor: pointer; }

/* Section editor: C...K jump links, and a save bar that stays in view on the long sections. */
.fam-section-jump { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.fam-section-jump a { display: inline-grid; place-items: center; min-width: 2.25rem; height: 2.25rem; border-radius: 0.5rem;
                      border: 1px solid var(--kt-line); color: var(--kt-ink-2); font-weight: 600; text-decoration: none; }
.fam-section-jump a:hover { background: var(--kt-hover); }
.fam-section-jump a.active { background: var(--kt-accent); border-color: var(--kt-accent); color: #fff; }
.fam-savebar { position: sticky; bottom: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
               margin: 0 -0.25rem 1rem; padding: 0.75rem 0.25rem; background: var(--kt-page); border-top: 1px solid var(--kt-line); }
.fam-quick-roster .form-control, .fam-quick-roster .form-select { width: 100%; min-width: 0; }
.fam-quick-roster td { padding: 0.35rem 0.4rem; }
.fam-quick-roster th { font-size: 0.8rem; font-weight: 600; white-space: nowrap; }

.dl-figures { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1rem; align-items: baseline; }
.dl-figures dt { color: var(--kt-muted); font-weight: 500; font-size: 0.85rem; }
.dl-figures dd { margin: 0; text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }

.dl-more { text-decoration: none; }
.dl-more .bi, .dl-fold .bi { transition: transform 0.15s ease; }
.dl-more[aria-expanded="true"] .bi, .dl-fold:not(.collapsed) .bi { transform: rotate(180deg); }
.dl-fold { color: var(--kt-muted); text-decoration: none; padding: 0.15rem 0.4rem; }
.dl-fold:hover { color: var(--kt-ink); }

@media (prefers-reduced-motion: reduce) {
    .dl-more .bi, .dl-fold .bi { transition: none; }
}

/* ============================================================
   Access page tabs (2026-10-02): the open tab reads as open -
   ink for the others, terra and weight for this one - and the
   row scrolls on a phone without a heavy scrollbar under it.
   ============================================================ */

body.app-body .access-tabs .nav-tabs {
    scrollbar-width: none;
}

body.app-body .access-tabs .nav-tabs::-webkit-scrollbar {
    display: none;
}

body.app-body .access-tabs .nav-link {
    color: var(--kt-ink-2);
}

body.app-body .access-tabs .nav-link:hover {
    color: var(--kt-ink);
}

body.app-body .access-tabs .nav-link.active {
    color: var(--kt-accent-ink);
    font-weight: 600;
}

/* Wide grids - the Access matrix, the Roles grid, a person's levels - keep scrolling sideways inside
   their box on narrow screens (2026-10-03). site.css turns .table-responsive to overflow: visible
   below 992px so stacked .table-mobile cards can show their dropdowns; a grid that cannot stack
   would then widen the whole page. Opt-in, so no other table changes. */
@media (max-width: 991.98px) {
    body.app-body .table-responsive.table-scroll {
        overflow-x: auto;
    }
}

/* Access > Roles grid (2026-10-03): modules down, roles across. No sideways scroll box on wide
   screens, so the role names can stay pinned to the top while the modules scroll past. Changed
   cells are marked until saved, and the save bar stays in reach at the bottom. */
body.app-body #rolesGrid thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--kt-surface);
    box-shadow: inset 0 -1px 0 var(--kt-line);
    vertical-align: bottom;
}
body.app-body #rolesGrid .roles-grid-module { min-width: 12rem; text-align: left; }
body.app-body #rolesGrid .roles-grid-role { min-width: 8.5rem; }
body.app-body #rolesGrid .roles-grid-area th {
    background: var(--kt-surface-alt);
    color: var(--kt-muted);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
body.app-body #rolesGrid td.roles-grid-changed {
    background: var(--kt-warning-tint);
    box-shadow: inset 3px 0 0 var(--kt-warning);
}
body.app-body .roles-grid-bar {
    position: sticky;
    bottom: 0;
    z-index: 3;
    background: var(--kt-surface);
}
@media (max-width: 991.98px) {
    body.app-body .roles-grid-wrap { overflow-x: auto; }
}

/* ---- The browser's file control (2026-10-07) ----
   Every .form-control is at least 42px tall, but the "Choose Files" plate inside a file input is
   sized for a shorter box, so it floated with a gap above, below and to its left. It fills the box
   now, edge to edge, the same height as the fields beside it. */
body.app-body input[type="file"].form-control {
    padding: 0 0.75rem 0 0;
    line-height: 40px;
    overflow: hidden;
}

body.app-body input[type="file"].form-control::file-selector-button {
    height: 40px;
    margin: 0 0.75rem 0 0;
    padding: 0 1rem;
    border: 0;
    border-inline-end: 1px solid var(--kt-line);
    border-radius: 0;
    background: var(--kt-surface-alt);
    color: var(--kt-ink);
    font-weight: 500;
}

/* ---- Card headers in dark mode (2026-10-07) ----
   site.css paints every card header a white gradient with !important, in either theme, while the
   title inside turns light for dark mode - so "Receipts", "Next step" and the rest were light text
   on a white strip. In dark mode the header shows the card's own surface, as this file meant it to
   (body.app-body .card-header above). */
[data-bs-theme="dark"] .app-main .card-header {
    background: transparent !important;
    color: var(--kt-ink);
}