/*
 * Klocktoba enterprise design system (Fluent-2 inspired).
 * Loaded AFTER site.css / workforce.css: it defines the design tokens and re-skins the existing
 * class names (sidebar, topbar, .btn-*, .data-table, .stat-card, .dash-*, .form-control ...) so every
 * current screen picks up the new look without markup changes.
 * Themes: [data-theme="light"] (default) | "dark" | "contrast".  Text size: [data-fontsize="sm|md|lg|xl"].
 * See docs/UX-REDESIGN.md for the token reference.
 */

/* ============ 1. Design tokens ============ */
:root {
    /* brand */
    --kl-primary: #0f6f73;          /* Klocktoba dark teal: 5.9:1 with white text */
    --kl-primary-hover: #0b5c60;
    --kl-primary-press: #094a4d;
    --kl-on-primary: #ffffff;
    --kl-navy: #0b1a2e;             /* matches the logo background so the sidebar logo sits flush */
    --kl-navy-2: #001f4d;           /* Klocktoba primary navy */
    --kl-accent-1: #16c6c8;         /* teal */
    --kl-accent-2: #0f6f73;
    --kl-gold: #ffc107;
    --kl-gradient: linear-gradient(135deg, #001f4d 0%, #0f6f73 62%, #16c6c8 100%);

    /* semantic */
    --kl-success: #16a34a;
    --kl-warning: #b45309;
    --kl-danger: #dc2626;
    --kl-success-bg: #e8f8ee;
    --kl-warning-bg: #fef3c7;
    --kl-danger-bg: #fee2e2;
    --kl-info-bg: #e3f4f4;

    /* surfaces + text */
    --kl-bg: #f8fafc;
    --kl-surface: #ffffff;
    --kl-surface-2: #f7f9fc;
    --kl-surface-glass: rgba(255, 255, 255, .78);
    --kl-border: #e2e7ee;
    --kl-border-strong: #c7d0db;
    --kl-text: #1b2232;
    --kl-text-2: #4b5768;
    --kl-text-muted: #667386;      /* 4.9:1 on white (AA) */
    --kl-link: #0f6f73;
    --kl-focus: #0f6f73;

    /* shape + elevation + motion */
    --kl-radius-sm: 6px;
    --kl-radius: 10px;
    --kl-radius-lg: 14px;
    --kl-shadow-1: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
    --kl-shadow-2: 0 4px 12px rgba(16, 24, 40, .08), 0 2px 4px rgba(16, 24, 40, .05);
    --kl-shadow-3: 0 16px 40px rgba(16, 24, 40, .18);
    --kl-ease: cubic-bezier(.2, .8, .2, 1);
    --kl-dur: .16s;

    /* type scale (root size is driven by the Text size setting) */
    --kl-font: 'Segoe UI Variable', 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif;
    --kl-topbar-h: 60px;
    color-scheme: light;
}

:root[data-theme="dark"] {
    --kl-primary: #16c6c8;
    --kl-primary-hover: #3ad4d6;
    --kl-primary-press: #6fe0e1;
    --kl-on-primary: #04201f;
    --kl-navy: #0b1a2e;
    --kl-navy-2: #0b1a2e;
    --kl-success: #4ade80;
    --kl-warning: #fbbf24;
    --kl-danger: #f87171;
    --kl-success-bg: rgba(74, 222, 128, .14);
    --kl-warning-bg: rgba(251, 191, 36, .14);
    --kl-danger-bg: rgba(248, 113, 113, .14);
    --kl-info-bg: rgba(22, 198, 200, .14);
    --kl-bg: #0b1220;
    --kl-surface: #151b29;
    --kl-surface-2: #1b2334;
    --kl-surface-glass: rgba(21, 27, 41, .78);
    --kl-border: #2a3347;
    --kl-border-strong: #3b475f;
    --kl-text: #e8ecf3;
    --kl-text-2: #b6c0d0;
    --kl-text-muted: #94a1b5;
    --kl-link: #4fd8da;
    --kl-focus: #4fd8da;
    --kl-shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
    --kl-shadow-2: 0 4px 14px rgba(0, 0, 0, .45);
    --kl-shadow-3: 0 16px 40px rgba(0, 0, 0, .6);
    color-scheme: dark;
}

:root[data-theme="contrast"] {
    --kl-primary: #ffff00;
    --kl-primary-hover: #ffffff;
    --kl-primary-press: #ffffff;
    --kl-on-primary: #000000;
    --kl-navy: #000000;
    --kl-navy-2: #000000;
    --kl-success: #00ff7f;
    --kl-warning: #ffd700;
    --kl-danger: #ff6b6b;
    --kl-success-bg: #000000;
    --kl-warning-bg: #000000;
    --kl-danger-bg: #000000;
    --kl-info-bg: #000000;
    --kl-bg: #000000;
    --kl-surface: #000000;
    --kl-surface-2: #000000;
    --kl-surface-glass: #000000;
    --kl-border: #ffffff;
    --kl-border-strong: #ffffff;
    --kl-text: #ffffff;
    --kl-text-2: #ffffff;
    --kl-text-muted: #e6e6e6;
    --kl-link: #8ab4ff;
    --kl-focus: #ffff00;
    --kl-gradient: none;
    --kl-shadow-1: none;
    --kl-shadow-2: none;
    --kl-shadow-3: 0 0 0 2px #fff;
    color-scheme: dark;
}

:root[data-fontsize="sm"] { font-size: 14px; }
:root[data-fontsize="md"] { font-size: 16px; }
:root[data-fontsize="lg"] { font-size: 18px; }
:root[data-fontsize="xl"] { font-size: 20px; }

/* ============ 2. Base ============ */
html, body {
    font-family: var(--kl-font);
    background: var(--kl-bg);
    color: var(--kl-text);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .section-heading, .settings-card-title, .manual-toc-title { color: var(--kl-text); letter-spacing: -.01em; }
h1 { font-size: 1.6rem; font-weight: 650; }
a { color: var(--kl-link); }
.muted, .empty-state, .site-footer, .directory-contact { color: var(--kl-text-muted); }

/* WCAG 2.4.7 - visible focus on everything interactive */
:focus-visible { outline: 3px solid var(--kl-focus); outline-offset: 2px; border-radius: 4px; }
.skip-link { position: absolute; left: .75rem; top: -4rem; z-index: 1000; background: var(--kl-primary); color: var(--kl-on-primary); padding: .6rem 1rem; border-radius: var(--kl-radius-sm); font-weight: 600; text-decoration: none; transition: top var(--kl-dur); }
.skip-link:focus { top: .75rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ============ 3. Navigation shell ============ */
.sidebar {
    background: linear-gradient(180deg, var(--kl-navy) 0%, var(--kl-navy-2) 100%);
    color: #c9d3e3;
    width: 264px;
    border-right: 1px solid rgba(255, 255, 255, .06);
}
:root[data-theme="contrast"] .sidebar { border-right: 2px solid #fff; background: #000; }
.sidebar-brand { border-bottom: 1px solid rgba(255, 255, 255, .08); }
.sidebar-logo { box-shadow: 0 0 0 2px rgba(255, 255, 255, .18); }
.sidebar-brand small, .sidebar-section-toggle, .sidebar-section-label { color: #8b9ab3; }
.sidebar-section-toggle { font-weight: 600; letter-spacing: .08em; }
.sidebar-section-toggle:hover { color: #fff; }
.sidebar-nav { padding: .5rem .5rem 1rem; gap: 1px; }
.sidebar-nav a {
    color: #c9d3e3;
    border-left: 0;
    border-radius: var(--kl-radius-sm);
    padding: .55rem .8rem;
    margin: 1px 0;
    position: relative;
    transition: background var(--kl-dur) var(--kl-ease), color var(--kl-dur) var(--kl-ease);
}
.sidebar-nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.sidebar-nav a.active { background: rgba(0, 120, 212, .28); color: #fff; font-weight: 600; }
.sidebar-nav a.active::before {
    content: ""; position: absolute; left: -.5rem; top: 22%; bottom: 22%; width: 3px;
    border-radius: 0 3px 3px 0; background: #4fb0ff;
}
:root[data-theme="contrast"] .sidebar-nav a.active { background: #ffff00; color: #000; }
:root[data-theme="contrast"] .sidebar-nav a.active::before { background: #000; }
.sidebar-collapse-btn { background: rgba(255, 255, 255, .08); color: #c9d3e3; }
.nav-subgroup-title { color: #8b9ab3; }

.topbar {
    position: sticky; top: 0; z-index: 80;
    min-height: var(--kl-topbar-h);
    padding: .5rem 1.25rem;
    gap: .75rem;
    background: var(--kl-surface-glass);
    backdrop-filter: saturate(1.4) blur(14px);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    border-bottom: 1px solid var(--kl-border);
    box-shadow: var(--kl-shadow-1);
}
.sidebar-toggle-btn { color: var(--kl-text); }
.topbar-title { color: var(--kl-text); font-weight: 650; font-size: 1.02rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 28vw; }
.topbar-auth { gap: .35rem; }
.topbar-auth a:not(.kl-icon-btn), .topbar-auth .link-button { color: var(--kl-link); }
.topbar-user { color: var(--kl-text-2); }

/* search trigger (opens the command palette) */
.kl-search {
    flex: 1 1 360px; max-width: 520px; margin: 0 auto 0 1rem;
    display: flex; align-items: center; gap: .6rem;
    padding: .5rem .85rem;
    background: var(--kl-surface-2); color: var(--kl-text-muted);
    border: 1px solid var(--kl-border); border-radius: 999px;
    font: inherit; font-size: .92rem; cursor: pointer; text-align: left;
    transition: border-color var(--kl-dur), box-shadow var(--kl-dur);
}
.kl-search:hover { border-color: var(--kl-primary); box-shadow: 0 0 0 3px rgba(0, 120, 212, .12); }
.kl-search svg { width: 1.05rem; height: 1.05rem; flex-shrink: 0; }
.kl-search span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kl-kbd { font-size: .72rem; padding: .1rem .4rem; border: 1px solid var(--kl-border-strong); border-radius: 4px; color: var(--kl-text-muted); background: var(--kl-surface); }

.kl-icon-btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 2.4rem; height: 2.4rem; border-radius: 50%;
    background: transparent; border: 0; color: var(--kl-text-2); cursor: pointer; text-decoration: none;
    transition: background var(--kl-dur);
}
.kl-icon-btn:hover { background: var(--kl-surface-2); color: var(--kl-text); }
.kl-icon-btn svg { width: 1.2rem; height: 1.2rem; }
.wf-topbar-bell { margin-right: 0; width: 2.4rem; height: 2.4rem; justify-content: center; border-radius: 50%; color: var(--kl-text-2); }
.wf-topbar-bell:hover { background: var(--kl-surface-2); color: var(--kl-text); }
.wf-badge { background: var(--kl-danger); }
:root[data-theme="dark"] .wf-badge { color: #0b0f19; }
.wf-status-chip { border-color: var(--kl-border); background: var(--kl-surface); color: var(--kl-text-2); }

/* profile menu */
.kl-profile { position: relative; }
.kl-profile-btn {
    display: flex; align-items: center; gap: .6rem; padding: .25rem .6rem .25rem .3rem;
    background: transparent; border: 1px solid transparent; border-radius: 999px; color: var(--kl-text); font: inherit; cursor: pointer;
}
.kl-profile-btn:hover, .kl-profile-btn[aria-expanded="true"] { background: var(--kl-surface-2); border-color: var(--kl-border); }
.kl-avatar {
    width: 2.2rem; height: 2.2rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: var(--kl-gradient); background-color: var(--kl-primary); color: #fff; font-weight: 700; font-size: .85rem; flex-shrink: 0;
}
:root[data-theme="contrast"] .kl-avatar { background: #ffff00; color: #000; }
.kl-profile-meta { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.kl-profile-name { font-weight: 600; font-size: .88rem; }
.kl-profile-role { font-size: .74rem; color: var(--kl-text-muted); }

.kl-menu {
    position: absolute; right: 0; top: calc(100% + .5rem); z-index: 120; min-width: 300px;
    background: var(--kl-surface); border: 1px solid var(--kl-border); border-radius: var(--kl-radius-lg);
    box-shadow: var(--kl-shadow-3); padding: .5rem; animation: kl-pop .14s var(--kl-ease);
}
.kl-menu[hidden] { display: none; }
@keyframes kl-pop { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
.kl-menu-head { display: flex; gap: .75rem; align-items: center; padding: .6rem .6rem .8rem; border-bottom: 1px solid var(--kl-border); margin-bottom: .5rem; }
.kl-menu-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--kl-text-muted); padding: .35rem .6rem .25rem; font-weight: 600; }
.kl-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .25rem; padding: .2rem .4rem .5rem; }
.kl-seg button {
    padding: .45rem .3rem; font: inherit; font-size: .82rem; cursor: pointer; color: var(--kl-text);
    background: var(--kl-surface-2); border: 1px solid var(--kl-border); border-radius: var(--kl-radius-sm);
}
.kl-seg button:hover { border-color: var(--kl-primary); }
.kl-seg button[aria-pressed="true"] { background: var(--kl-primary); border-color: var(--kl-primary); color: var(--kl-on-primary); font-weight: 600; }
.kl-menu a, .kl-menu .kl-menu-item {
    display: flex; width: 100%; align-items: center; gap: .6rem; padding: .55rem .6rem; border-radius: var(--kl-radius-sm);
    color: var(--kl-text) !important; text-decoration: none !important; background: none; border: 0; font: inherit; font-size: .92rem; cursor: pointer; text-align: left; font-weight: 400 !important;
}
.kl-menu a:hover, .kl-menu .kl-menu-item:hover { background: var(--kl-surface-2); }
.kl-menu form { margin: 0; }

/* command palette */
.kl-palette-backdrop { position: fixed; inset: 0; z-index: 200; background: rgba(8, 12, 22, .55); backdrop-filter: blur(3px); display: flex; justify-content: center; align-items: flex-start; padding: 12vh 1rem 1rem; }
.kl-palette-backdrop[hidden] { display: none; }
.kl-palette { width: min(640px, 100%); background: var(--kl-surface); border: 1px solid var(--kl-border); border-radius: var(--kl-radius-lg); box-shadow: var(--kl-shadow-3); overflow: hidden; animation: kl-pop .16s var(--kl-ease); }
.kl-palette input { width: 100%; box-sizing: border-box; padding: 1rem 1.15rem; font: inherit; font-size: 1.05rem; color: var(--kl-text); background: transparent; border: 0; border-bottom: 1px solid var(--kl-border); }
.kl-palette input:focus { outline: none; }
.kl-palette ul { list-style: none; margin: 0; padding: .4rem; max-height: 50vh; overflow: auto; }
.kl-palette li a { display: flex; align-items: center; gap: .7rem; padding: .6rem .75rem; border-radius: var(--kl-radius-sm); color: var(--kl-text); text-decoration: none; }
.kl-palette li a small { margin-left: auto; color: var(--kl-text-muted); }
.kl-palette li a[aria-selected="true"], .kl-palette li a:hover { background: var(--kl-primary); color: var(--kl-on-primary); }
.kl-palette li a[aria-selected="true"] small { color: inherit; opacity: .85; }
.kl-palette li a svg { width: 1.1rem; height: 1.1rem; flex-shrink: 0; }
.kl-palette-empty { padding: 1.25rem; color: var(--kl-text-muted); text-align: center; }
.kl-palette-foot { padding: .5rem .9rem; border-top: 1px solid var(--kl-border); font-size: .75rem; color: var(--kl-text-muted); display: flex; gap: 1rem; }

@media (max-width: 899px) {
    .sidebar { width: 280px; }
    .topbar { padding: .45rem .75rem; }
    .kl-search { flex: 0 0 auto; margin: 0 0 0 auto; padding: 0; width: 2.4rem; height: 2.4rem; justify-content: center; border-radius: 50%; }
    .kl-search span, .kl-search .kl-kbd { display: none; }
    .kl-profile-meta { display: none; }
    .kl-profile-btn { padding: .2rem; }
    .topbar-title { max-width: 34vw; }
    .container, .container-wide { padding: 1.25rem .9rem; }
}
@media (min-width: 900px) { .sidebar-collapsed .sidebar { width: 68px; } }

/* page container: wider, breathing room */
.container { max-width: 760px; }
.container-wide { max-width: 1280px; }
.site-footer { border-top-color: var(--kl-border); }

/* ============ 4. Components (re-skin of existing classes) ============ */
.btn-primary, .btn, .btn-clock-in, .btn-clock-out, .btn-approve, .btn-reject, .btn-secondary, .btn-lunch-start, .btn-lunch-end {
    border-radius: var(--kl-radius-sm); font-weight: 600; font-family: inherit;
    transition: background var(--kl-dur) var(--kl-ease), transform var(--kl-dur) var(--kl-ease), box-shadow var(--kl-dur) var(--kl-ease);
}
.btn-primary { background: var(--kl-primary); color: var(--kl-on-primary); box-shadow: var(--kl-shadow-1); }
.btn-primary:hover:not(:disabled) { background: var(--kl-primary-hover); box-shadow: var(--kl-shadow-2); transform: translateY(-1px); }
.btn-primary:active:not(:disabled) { background: var(--kl-primary-press); transform: none; }
.btn-primary:disabled { opacity: .5; }
.btn-clock-in, .btn-approve { background: var(--kl-success); color: #fff; }
.btn-clock-out, .btn-reject { background: var(--kl-danger); color: #fff; }
.btn-clock-in:hover:not(:disabled), .btn-approve:hover:not(:disabled), .btn-clock-out:hover:not(:disabled), .btn-reject:hover:not(:disabled) { filter: brightness(.92); }
:root[data-theme="dark"] .btn-clock-in, :root[data-theme="dark"] .btn-approve, :root[data-theme="dark"] .btn-clock-out, :root[data-theme="dark"] .btn-reject { color: #0b0f19; }
:root[data-theme="contrast"] .btn-clock-in, :root[data-theme="contrast"] .btn-approve, :root[data-theme="contrast"] .btn-clock-out, :root[data-theme="contrast"] .btn-reject, :root[data-theme="contrast"] .btn-secondary { color: #000; border: 2px solid #fff; }
.btn-secondary { background: var(--kl-surface-2); color: var(--kl-text); border: 1px solid var(--kl-border-strong); }
.btn-secondary:hover:not(:disabled) { background: var(--kl-border); }
.btn-lunch-start { background: var(--kl-warning); color: #fff; }
.btn-lunch-end { background: var(--kl-primary); color: var(--kl-on-primary); }
:root[data-theme="dark"] .btn-lunch-start { color: #0b0f19; }

.result-card, .stat-card, .settings-card, .directory-card, .manual-toc, .clock-widget-card {
    background: var(--kl-surface); border: 1px solid var(--kl-border); border-radius: var(--kl-radius); box-shadow: var(--kl-shadow-1); color: var(--kl-text);
}
.stat-card { border-top: 3px solid var(--kl-primary); padding: 1rem 1.25rem; min-width: 170px; transition: box-shadow var(--kl-dur), transform var(--kl-dur); }
.stat-card:hover { box-shadow: var(--kl-shadow-2); transform: translateY(-1px); }
.stat-card .stat-value, .stat-card.stat-remaining .stat-value { color: var(--kl-text); font-size: 1.85rem; font-variant-numeric: tabular-nums; }
.stat-card .stat-label { color: var(--kl-text-muted); }
.settings-card-desc { color: var(--kl-text-2); }
.settings-card:hover, .directory-card:hover, .dash-quick-access .settings-card:hover { border-color: var(--kl-primary); box-shadow: var(--kl-shadow-2); }

.info-note { background: var(--kl-info-bg); border: 1px solid var(--kl-border); border-left: 4px solid var(--kl-primary); color: var(--kl-text); border-radius: var(--kl-radius-sm); }
.status-banner { background: var(--kl-success-bg); border: 1px solid var(--kl-border); border-left: 4px solid var(--kl-success); color: var(--kl-text); border-radius: var(--kl-radius-sm); }
.text-danger, .field-error, .validation-summary, .status-error { color: var(--kl-danger); }
.form-group label, .detail-list dt, .week-nav .week-label, .insight-bar-label, .insight-bar-value, .insight-week-value { color: var(--kl-text); }
.form-control { background: var(--kl-surface); color: var(--kl-text); border: 1px solid var(--kl-border-strong); border-radius: var(--kl-radius-sm); transition: border-color var(--kl-dur), box-shadow var(--kl-dur); }
.form-control:focus { border-color: var(--kl-primary); box-shadow: 0 0 0 3px rgba(0, 120, 212, .25); }
.password-toggle, .week-nav a, .breadcrumb a, .manual-toc a, .topbar-auth a { color: var(--kl-link); }

/* tables */
.table-scroll { border: 1px solid var(--kl-border); border-radius: var(--kl-radius); background: var(--kl-surface); box-shadow: var(--kl-shadow-1); }
.data-table { background: var(--kl-surface); color: var(--kl-text); }
.data-table th, .data-table td { border-bottom: 1px solid var(--kl-border); padding: .7rem .9rem; }
.data-table th { background: var(--kl-surface-2); color: var(--kl-text-2); font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; position: sticky; top: 0; }
.data-table tbody tr { transition: background var(--kl-dur); }
.data-table tbody tr:hover { background: var(--kl-surface-2); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tfoot th { text-transform: none; font-size: .92rem; color: var(--kl-text); }
.role-pill { background: var(--kl-info-bg); color: var(--kl-link); }

/* status badges: softer, readable pills */
.badge { font-size: .76rem; padding: .2rem .65rem; letter-spacing: .01em; }
.badge-pending, .badge-flagged { background: var(--kl-warning-bg); color: var(--kl-warning); }
.badge-approved, .badge-in { background: var(--kl-success-bg); color: var(--kl-success); }
:root:not([data-theme="dark"]):not([data-theme="contrast"]) .badge-approved, :root:not([data-theme="dark"]):not([data-theme="contrast"]) .badge-in { color: #0f7a37; }
.badge-rejected, .badge-overtime, .badge-out { background: var(--kl-danger-bg); color: var(--kl-danger); }
:root:not([data-theme="dark"]):not([data-theme="contrast"]) .badge-rejected, :root:not([data-theme="dark"]):not([data-theme="contrast"]) .badge-overtime, :root:not([data-theme="dark"]):not([data-theme="contrast"]) .badge-out { color: #b91c1c; }
.badge-cancelled, .badge-deactivated { background: var(--kl-surface-2); color: var(--kl-text-2); border: 1px solid var(--kl-border); }
:root[data-theme="contrast"] .badge { border: 1px solid #fff; }
.week-nav .badge-current { background: var(--kl-info-bg); color: var(--kl-link); }

/* dashboard "command centre" (re-themed from gold to the enterprise palette) */
.dash-hero { background: var(--kl-gradient), var(--kl-navy); background-color: var(--kl-navy); border-radius: var(--kl-radius-lg); box-shadow: var(--kl-shadow-2); padding: 1.75rem 2rem; position: relative; overflow: hidden; }
.dash-hero::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: rgba(255, 255, 255, .08); pointer-events: none; }
:root[data-theme="contrast"] .dash-hero { background: #000; border: 2px solid #fff; }
.dash-hero h1, .dash-hero .muted { color: #fff; }
.dash-hero .muted { opacity: .88; }
.dash-card { background: var(--kl-surface); border: 1px solid var(--kl-border); border-left: 4px solid var(--kl-primary); border-radius: var(--kl-radius); box-shadow: var(--kl-shadow-1); color: var(--kl-text); }
a.dash-card:hover { box-shadow: var(--kl-shadow-2); transform: translateY(-2px); }
.dash-card-value { color: var(--kl-text); font-variant-numeric: tabular-nums; }
.dash-card-unit, .dash-card-arrow { color: var(--kl-primary); }
.dash-card-label { color: var(--kl-text-muted); }
.dash-card-detail { border-top-color: var(--kl-border); }
.dash-cta-card { background: var(--kl-gradient), var(--kl-navy); background-color: var(--kl-navy); border-left-color: var(--kl-accent-1); color: #fff; }
.dash-cta-card .dash-card-value, .dash-cta-card .dash-card-unit, .dash-cta-card .dash-card-label { color: #fff; }

/* directory + avatars */
.directory-photo-placeholder, .profile-photo-placeholder, .name-pill__avatar { background: var(--kl-gradient); background-color: var(--kl-primary); color: #fff; }
:root[data-theme="contrast"] .directory-photo-placeholder, :root[data-theme="contrast"] .profile-photo-placeholder, :root[data-theme="contrast"] .name-pill__avatar { background: #ffff00; color: #000; }
.directory-name { color: var(--kl-text); }

/* insights charts */
.insight-bar-track { background: var(--kl-surface-2); }
.insight-week-bar { background-color: var(--kl-primary); }
.insight-week-bar.is-today { background-color: var(--kl-success); }
.insight-week-label, .insight-caveat, .insight-generated-at { color: var(--kl-text-muted); }
.manual-section { border-top-color: var(--kl-border); }
.feedback-thumb { border-color: var(--kl-border); }

/* Bootstrap workforce screens (.wf-bs scope) follow the same tokens */
.wf-bs { --bs-body-bg: transparent; --bs-body-color: var(--kl-text); --bs-border-color: var(--kl-border); --bs-secondary-color: var(--kl-text-muted); --bs-emphasis-color: var(--kl-text); --bs-card-bg: var(--kl-surface); --bs-primary: var(--kl-primary); --bs-light: var(--kl-surface-2); --bs-link-color: var(--kl-link); }
.wf-bs .card { background: var(--kl-surface); border-color: var(--kl-border); border-radius: var(--kl-radius); box-shadow: var(--kl-shadow-1); color: var(--kl-text); }
.wf-bs .card-header, .wf-bs .card-footer { background: var(--kl-surface-2); border-color: var(--kl-border); }
.wf-bs .table { --bs-table-bg: transparent; --bs-table-color: var(--kl-text); --bs-table-border-color: var(--kl-border); --bs-table-striped-bg: var(--kl-surface-2); --bs-table-hover-bg: var(--kl-surface-2); color: var(--kl-text); }
.wf-bs .form-control, .wf-bs .form-select { background-color: var(--kl-surface); color: var(--kl-text); border-color: var(--kl-border-strong); }
.wf-bs .modal-content, .wf-bs .offcanvas, .wf-bs .dropdown-menu { background: var(--kl-surface); color: var(--kl-text); border-color: var(--kl-border); border-radius: var(--kl-radius-lg); }
.wf-bs .text-muted, .wf-bs .text-secondary { color: var(--kl-text-muted) !important; }
.wf-bs .bg-light { background-color: var(--kl-surface-2) !important; }

/* ============ 5. Time clock (Views/Shared/_ClockWidget.cshtml) ============ */
.kl-clock {
    display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: center;
    background: var(--kl-gradient), var(--kl-navy); background-color: var(--kl-navy); color: #fff;
    border-radius: var(--kl-radius-lg); padding: 1.75rem 2rem; box-shadow: var(--kl-shadow-2); margin-top: 1rem; position: relative; overflow: hidden;
}
.kl-clock::after { content: ""; position: absolute; right: -70px; bottom: -90px; width: 260px; height: 260px; border-radius: 50%; background: rgba(255, 255, 255, .07); pointer-events: none; }
:root[data-theme="contrast"] .kl-clock { background: #000; border: 2px solid #fff; }
.kl-clock-time { font-size: clamp(2.6rem, 8vw, 4.2rem); font-weight: 300; letter-spacing: .02em; font-variant-numeric: tabular-nums; line-height: 1.05; }
.kl-clock-date { opacity: .85; margin-top: .25rem; }
.kl-clock-state { display: flex; align-items: center; gap: .5rem; margin-top: 1rem; font-size: 1.05rem; }
.kl-clock-since { opacity: .8; }
.kl-clock-dot { width: .7rem; height: .7rem; border-radius: 50%; background: #9aa5b8; display: inline-block; flex-shrink: 0; }
.kl-clock-in .kl-clock-state .kl-clock-dot { background: #4ade80; animation: kl-pulse 2s infinite; }
.kl-clock-lunch .kl-clock-state .kl-clock-dot { background: #fbbf24; animation: kl-pulse 1.2s infinite; }
.kl-clock-disabled .kl-clock-state .kl-clock-dot { background: #f87171; }
@keyframes kl-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .5); } 70% { box-shadow: 0 0 0 .5rem rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }
.kl-clock-elapsed { margin-top: .75rem; font-size: 1.6rem; font-variant-numeric: tabular-nums; font-weight: 600; }
.kl-clock-elapsed small { font-size: .8rem; font-weight: 400; opacity: .8; margin-left: .5rem; }
.kl-clock-side { max-width: 280px; display: flex; flex-direction: column; gap: .75rem; align-items: flex-start; position: relative; z-index: 1; }
.kl-clock-chip { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .8rem; border-radius: 999px; background: rgba(255, 255, 255, .14); font-size: .85rem; }
.kl-clock-chip[data-gps="ok"] .kl-clock-dot { background: #4ade80; }
.kl-clock-chip[data-gps="bad"] .kl-clock-dot { background: #f87171; }
.kl-clock-chip[data-gps="prompt"] .kl-clock-dot { background: #fbbf24; }
.kl-clock-note { margin: 0; font-size: .88rem; opacity: .9; }
.kl-clock .clock-widget-disabled { color: #fecaca; }

.kl-clock-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 1rem; }
.kl-clock-actions-secondary { margin-top: .75rem; }
.kl-big-btn {
    display: flex; align-items: center; justify-content: center; gap: .75rem; min-height: 4.25rem; padding: 1rem 1.25rem;
    font: inherit; font-size: 1.15rem; font-weight: 650; border: 0; border-radius: var(--kl-radius); cursor: pointer; color: #fff;
    box-shadow: var(--kl-shadow-2); transition: transform var(--kl-dur) var(--kl-ease), box-shadow var(--kl-dur) var(--kl-ease), filter var(--kl-dur);
}
.kl-big-btn svg { width: 1.7rem; height: 1.7rem; flex-shrink: 0; }
.kl-big-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--kl-shadow-3); filter: brightness(1.05); }
.kl-big-btn:active:not(:disabled) { transform: scale(.98); }
.kl-big-btn:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }
.kl-big-btn.kl-big-in { background: var(--kl-success); }
.kl-big-btn.kl-big-out { background: var(--kl-danger); }
.kl-big-btn.kl-big-lunch { background: var(--kl-surface); color: var(--kl-text); border: 1px solid var(--kl-border-strong); box-shadow: var(--kl-shadow-1); min-height: 3.25rem; font-size: 1rem; }
:root[data-theme="dark"] .kl-big-btn.kl-big-in, :root[data-theme="dark"] .kl-big-btn.kl-big-out { color: #0b0f19; }
:root[data-theme="contrast"] .kl-big-btn.kl-big-in, :root[data-theme="contrast"] .kl-big-btn.kl-big-out { color: #000; border: 2px solid #fff; }
.kl-big-btn.is-working { pointer-events: none; }
.kl-big-btn.is-working svg { animation: kl-spin .9s linear infinite; }
@keyframes kl-spin { to { transform: rotate(360deg); } }
.kl-clock-status { margin-top: 1rem; padding: .7rem 1rem; border-radius: var(--kl-radius-sm); background: var(--kl-info-bg); border: 1px solid var(--kl-border); border-left: 4px solid var(--kl-primary); color: var(--kl-text); font-style: normal; }
.kl-clock-status.status-error { border-left-color: var(--kl-danger); background: var(--kl-danger-bg); color: var(--kl-text); }
@media (max-width: 640px) {
    .kl-clock { grid-template-columns: 1fr; padding: 1.25rem; text-align: center; }
    .kl-clock-state, .kl-clock-side { justify-content: center; align-items: center; margin-left: auto; margin-right: auto; }
    .kl-clock-actions { grid-template-columns: 1fr; }
    .kl-big-btn { min-height: 4.5rem; } /* >=44px touch targets, thumb friendly */
}

/* ============ 6. Directory ============ */
.kl-page-head { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.kl-toolbar { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; margin: 1rem 0 .5rem; }
.kl-toolbar .form-control { max-width: none; width: auto; }
.kl-toolbar-search { flex: 1 1 260px; }
.kl-view-toggle { padding: 0; grid-auto-columns: auto; }
.kl-view-toggle button { padding: .5rem 1rem; }
.kl-people { display: grid; gap: 1rem; margin-top: 1rem; }
.kl-people[data-view="grid"] { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.kl-people[data-view="list"] { grid-template-columns: 1fr; gap: .5rem; }
.kl-person { background: var(--kl-surface); border: 1px solid var(--kl-border); border-radius: var(--kl-radius); box-shadow: var(--kl-shadow-1); padding: 1.1rem; display: flex; flex-direction: column; gap: .9rem; transition: box-shadow var(--kl-dur), transform var(--kl-dur), border-color var(--kl-dur); }
.kl-person:hover, .kl-person:focus-within { box-shadow: var(--kl-shadow-2); border-color: var(--kl-primary); transform: translateY(-2px); }
.kl-person[hidden] { display: none; }
.kl-person-main { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .75rem; text-decoration: none; color: inherit; min-width: 0; }
.kl-person-photo { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.kl-person-initials { display: inline-flex; align-items: center; justify-content: center; background: var(--kl-gradient); background-color: var(--kl-primary); color: #fff; font-weight: 700; font-size: 1.5rem; }
:root[data-theme="contrast"] .kl-person-initials { background: #ffff00; color: #000; }
.kl-person-text { display: flex; flex-direction: column; min-width: 0; max-width: 100%; }
.kl-person-name { font-weight: 650; color: var(--kl-text); }
.kl-person-sub { font-size: .85rem; color: var(--kl-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kl-person-actions { display: flex; gap: .5rem; justify-content: center; }
.kl-chip-btn { padding: .35rem .9rem; border: 1px solid var(--kl-border-strong); border-radius: 999px; font-size: .82rem; font-weight: 600; text-decoration: none; color: var(--kl-link); background: var(--kl-surface-2); }
.kl-chip-btn:hover { border-color: var(--kl-primary); background: var(--kl-info-bg); }
.kl-people[data-view="list"] .kl-person { flex-direction: row; align-items: center; padding: .65rem 1rem; }
.kl-people[data-view="list"] .kl-person-main { flex-direction: row; text-align: left; flex: 1; }
.kl-people[data-view="list"] .kl-person-photo { width: 44px; height: 44px; font-size: 1rem; }
.kl-people[data-view="list"] .kl-person:hover { transform: none; }
@media (max-width: 640px) { .kl-people[data-view="list"] .kl-person { flex-wrap: wrap; } }

/* directory profile card */
.directory-profile-card { background: var(--kl-surface); border: 1px solid var(--kl-border); border-radius: var(--kl-radius-lg); box-shadow: var(--kl-shadow-1); padding: 1.5rem; }

/* ============ 7. Command-centre dashboards (klocktoba-insights.js / klocktoba-dashboards.js) ============ */
.kl-hero-status { font-weight: 600; }
.kl-hero-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.1rem; position: relative; z-index: 1; }
.kl-hero-btn { padding: .55rem 1.1rem; border-radius: 999px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .35); color: #fff; text-decoration: none; font-weight: 600; font-size: .9rem; backdrop-filter: blur(4px); transition: background var(--kl-dur); }
.kl-hero-btn:hover { background: rgba(255, 255, 255, .3); color: #fff; }
:root[data-theme="contrast"] .kl-hero-btn { background: #000; border: 2px solid #fff; }

.kl-panel { background: var(--kl-surface); border: 1px solid var(--kl-border); border-radius: var(--kl-radius); box-shadow: var(--kl-shadow-1); padding: 1.15rem 1.25rem; margin-top: 1.25rem; color: var(--kl-text); }
.kl-page-head h2.kl-panel-title { margin: 0; }
.row > * > .kl-panel { margin-top: 0; }
.kl-panel-title { font-size: 1.02rem; font-weight: 650; margin: 0 0 .9rem; color: var(--kl-text); }
.kl-panel-title small { font-weight: 400; color: var(--kl-text-muted); margin-left: .4rem; font-size: .8rem; }
.kl-sub { font-size: .9rem; font-weight: 650; margin: 0 0 .7rem; color: var(--kl-text-2); }
.kl-note { font-size: .85rem; color: var(--kl-text-muted); margin: 1rem 0 0; }
.kl-quick { display: flex; flex-wrap: wrap; gap: .5rem; }
.kl-error { color: var(--kl-danger); }
.kl-empty, .kl-allclear { color: var(--kl-text-muted); margin: .5rem 0; }
.kl-allclear { color: var(--kl-success); font-weight: 600; }

.kl-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; margin: 1rem 0 0; }
.kl-kpi { display: flex; flex-direction: column; gap: .2rem; padding: 1rem 1.15rem; background: var(--kl-surface); border: 1px solid var(--kl-border); border-radius: var(--kl-radius); border-top: 3px solid var(--kl-border-strong); box-shadow: var(--kl-shadow-1); text-decoration: none; color: var(--kl-text); min-width: 0; transition: box-shadow var(--kl-dur), transform var(--kl-dur); }
a.kl-kpi:hover { box-shadow: var(--kl-shadow-2); transform: translateY(-2px); color: var(--kl-text); }
.kl-kpi-ok { border-top-color: var(--kl-success); }
.kl-kpi-warn { border-top-color: var(--kl-warning); }
.kl-kpi-bad { border-top-color: var(--kl-danger); }
.kl-kpi-info { border-top-color: var(--kl-primary); }
.kl-kpi-label { font-size: .76rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--kl-text-muted); }
.kl-kpi-value { font-size: 2rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kl-kpi-value small { font-size: 1rem; font-weight: 500; color: var(--kl-text-muted); margin-left: .15rem; }
.kl-kpi-trend { font-size: .8rem; color: var(--kl-text-muted); }
.kl-trend-good { color: var(--kl-success); font-weight: 600; }
.kl-trend-bad { color: var(--kl-danger); font-weight: 600; }
:root:not([data-theme="dark"]):not([data-theme="contrast"]) .kl-trend-good { color: #0f7a37; }
:root:not([data-theme="dark"]):not([data-theme="contrast"]) .kl-trend-bad { color: #b91c1c; }

.kl-cc-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.5rem; margin-top: 1.25rem; }
@media (max-width: 900px) { .kl-cc-grid { grid-template-columns: 1fr; } }

/* charts: one hue per meaning, always paired with a legend label + data table (never colour alone) */
.kl-seg-ok { fill: var(--kl-success); background: var(--kl-success); }
.kl-seg-warn { fill: var(--kl-warning); background: var(--kl-warning); }
.kl-seg-bad { fill: var(--kl-danger); background: var(--kl-danger); }
.kl-seg-info { fill: var(--kl-primary); background: var(--kl-primary); }
.kl-seg-muted { fill: var(--kl-border-strong); background: var(--kl-border-strong); }
:root:not([data-theme="dark"]):not([data-theme="contrast"]) .kl-seg-warn { fill: #d97706; background: #d97706; }
.kl-seg-ok-stroke { stroke: var(--kl-success); }
.kl-seg-warn-stroke { stroke: var(--kl-warning); }
.kl-seg-bad-stroke { stroke: var(--kl-danger); }
.kl-seg-info-stroke { stroke: var(--kl-primary); }
.kl-seg-muted-stroke { stroke: var(--kl-border-strong); }
.kl-chart { width: 100%; height: auto; max-height: 260px; display: block; }
.kl-grid { stroke: var(--kl-border); stroke-width: 1; }
.kl-axis { fill: var(--kl-text-muted); font-size: 10px; font-family: var(--kl-font); }
.kl-bar rect { transition: opacity var(--kl-dur); }
.kl-bar:hover rect { opacity: .8; }
.kl-legend { list-style: none; margin: .6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; font-size: .82rem; color: var(--kl-text-2); }
.kl-legend li { display: inline-flex; align-items: center; gap: .4rem; }
.kl-legend-col { flex-direction: column; flex-wrap: nowrap; gap: .45rem; }
.kl-swatch { width: .8rem; height: .8rem; border-radius: 3px; display: inline-block; fill: none; }
.kl-donut-wrap { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.kl-donut-wrap:empty { display: none; }
.kl-donut { width: 170px; height: 170px; flex-shrink: 0; }
.kl-donut-track { stroke: var(--kl-surface-2); }
.kl-donut-value { font-size: 22px; font-weight: 700; fill: var(--kl-text); font-family: var(--kl-font); }
.kl-donut-label { font-size: 10px; fill: var(--kl-text-muted); font-family: var(--kl-font); }

.kl-actions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.kl-action { display: flex; align-items: center; gap: .75rem; padding: .65rem .8rem; border-radius: var(--kl-radius-sm); background: var(--kl-surface-2); border: 1px solid var(--kl-border); border-left: 4px solid var(--kl-primary); }
.kl-action-warn { border-left-color: var(--kl-warning); }
.kl-action-bad { border-left-color: var(--kl-danger); }
.kl-action-count { font-weight: 700; font-size: 1.15rem; min-width: 1.6rem; text-align: center; font-variant-numeric: tabular-nums; }
.kl-action-text { flex: 1; font-size: .9rem; color: var(--kl-text-2); }

/* ============ 8. Customise dashboards ============ */
.kl-customise { position: relative; margin-left: auto; align-self: flex-start; }
.kl-customise-bar { justify-content: flex-end; margin-bottom: .25rem; }
.kl-customise-menu { right: 0; min-width: 260px; padding: .5rem; }
.kl-check { display: flex; gap: .6rem; align-items: center; padding: .4rem .6rem; border-radius: var(--kl-radius-sm); cursor: pointer; font-size: .92rem; }
.kl-check:hover { background: var(--kl-surface-2); }
.kl-check input { width: 1.05rem; height: 1.05rem; accent-color: var(--kl-primary); }
[data-kl-panel][hidden], .wf-page .row > [hidden] { display: none !important; }

/* ============ 9. Schedule, rota and overtime ============ */
.kl-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .75rem; }
@media (max-width: 1100px) { .kl-week { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .kl-week { grid-template-columns: 1fr; } }
.kl-day { background: var(--kl-surface); border: 1px solid var(--kl-border); border-radius: var(--kl-radius); padding: .8rem; box-shadow: var(--kl-shadow-1); min-height: 7rem; display: flex; flex-direction: column; gap: .5rem; }
.kl-day-today { border-color: var(--kl-primary); box-shadow: 0 0 0 2px rgba(0, 120, 212, .25); }
.kl-day-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; font-size: .85rem; color: var(--kl-text-2); }
.kl-day-head strong { color: var(--kl-text); }
.kl-shift { --kl-shift: var(--kl-primary); border-left: 4px solid var(--kl-shift); background: var(--kl-surface-2); border-radius: var(--kl-radius-sm); padding: .5rem .65rem; }
.kl-shift-time { font-weight: 650; font-variant-numeric: tabular-nums; }
.kl-shift-meta, .kl-shift-notes { font-size: .8rem; color: var(--kl-text-muted); }
.kl-off { color: var(--kl-text-muted); font-size: .85rem; }
.kl-leave { font-size: .8rem; font-weight: 600; color: var(--kl-primary); background: var(--kl-info-bg); border-radius: var(--kl-radius-sm); padding: .25rem .5rem; text-align: center; }

.kl-rota-wrap { overflow-x: auto; border: 1px solid var(--kl-border); border-radius: var(--kl-radius); background: var(--kl-surface); box-shadow: var(--kl-shadow-1); }
.kl-rota { width: 100%; min-width: 980px; border-collapse: collapse; color: var(--kl-text); }
.kl-rota th, .kl-rota td { border-bottom: 1px solid var(--kl-border); border-right: 1px solid var(--kl-border); padding: .35rem; vertical-align: top; font-weight: 400; }
.kl-rota thead th { background: var(--kl-surface-2); text-align: center; font-size: .82rem; position: sticky; top: 0; z-index: 1; }
.kl-rota .kl-rota-name { text-align: left; min-width: 11rem; position: sticky; left: 0; background: var(--kl-surface); z-index: 2; }
.kl-rota thead .kl-rota-name { background: var(--kl-surface-2); z-index: 3; }
.kl-rota .kl-rota-today { background: var(--kl-info-bg); }
.kl-rota-cell { min-width: 8.5rem; display: table-cell; }
.kl-rota-leave { background: repeating-linear-gradient(135deg, transparent 0 6px, var(--kl-info-bg) 6px 12px); }
.kl-chip { --kl-shift: var(--kl-primary); display: block; width: 100%; text-align: left; margin-bottom: .25rem; padding: .3rem .45rem; border: 1px solid var(--kl-border); border-left: 4px solid var(--kl-shift); border-radius: var(--kl-radius-sm); background: var(--kl-surface); color: var(--kl-text); cursor: pointer; font: inherit; font-size: .8rem; }
.kl-chip:hover { box-shadow: var(--kl-shadow-2); }
.kl-chip-draft { border-style: dashed; border-left-style: solid; background: var(--kl-surface-2); }
.kl-chip-time { display: block; font-weight: 650; font-variant-numeric: tabular-nums; }
.kl-chip-meta { display: block; color: var(--kl-text-muted); font-size: .74rem; }
.kl-chip-add { display: block; width: 100%; padding: .1rem 0; border: 1px dashed var(--kl-border-strong); border-radius: var(--kl-radius-sm); background: transparent; color: var(--kl-text-muted); cursor: pointer; font-size: 1rem; line-height: 1.2; opacity: .55; }
.kl-chip-add:hover, .kl-chip-add:focus-visible { opacity: 1; border-color: var(--kl-primary); color: var(--kl-primary); }
.kl-swatch-draft { background: var(--kl-surface-2); border: 1px dashed var(--kl-border-strong); }
.kl-swatch-leave { background: var(--kl-info-bg); border: 1px solid var(--kl-primary); }
:root[data-theme="contrast"] .kl-chip, :root[data-theme="contrast"] .kl-day, :root[data-theme="contrast"] .kl-shift { border-color: #fff; }

/* print: drop the chrome */
@media print {
    .sidebar, .topbar, .site-footer, .kl-palette-backdrop, .skip-link { display: none !important; }
    html, body { background: #fff; color: #000; }
}

/* ============ 10. Shift swaps ============ */
.kl-swap { border: 1px solid var(--kl-border); border-radius: var(--kl-radius); background: var(--kl-surface-2); padding: .85rem 1rem; margin-bottom: .75rem; }
.kl-swap-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.kl-swap-body { display: grid; grid-template-columns: 1fr auto 1fr; gap: .75rem; align-items: center; }
.kl-swap-arrow { font-size: 1.4rem; color: var(--kl-primary); }
.kl-swap-actions { margin-top: .6rem; display: flex; gap: .4rem; flex-wrap: wrap; }
@media (max-width: 560px) { .kl-swap-body { grid-template-columns: 1fr; } .kl-swap-arrow { transform: rotate(90deg); justify-self: center; } }

/* The content column is a flex column, so a centred .container would shrink to its content; fill the column up to the container max-width. */
.content-area > .container { width: 100%; box-sizing: border-box; }

/* ============ 11. Klocktoba branding ============ */
/* Bootstrap-scoped screens (.wf-bs) take the brand colour instead of Bootstrap blue. */
.wf-bs { --bs-primary: var(--kl-primary); --bs-link-color: var(--kl-link); --bs-link-hover-color: var(--kl-primary-hover); }
.wf-bs .btn-primary { --bs-btn-bg: var(--kl-primary); --bs-btn-border-color: var(--kl-primary); --bs-btn-color: var(--kl-on-primary);
    --bs-btn-hover-bg: var(--kl-primary-hover); --bs-btn-hover-border-color: var(--kl-primary-hover); --bs-btn-hover-color: var(--kl-on-primary);
    --bs-btn-active-bg: var(--kl-primary-press); --bs-btn-active-border-color: var(--kl-primary-press); --bs-btn-active-color: var(--kl-on-primary);
    --bs-btn-disabled-bg: var(--kl-primary); --bs-btn-disabled-border-color: var(--kl-primary); --bs-btn-disabled-color: var(--kl-on-primary); }
.wf-bs .btn-outline-primary { --bs-btn-color: var(--kl-link); --bs-btn-border-color: var(--kl-primary); --bs-btn-hover-bg: var(--kl-primary); --bs-btn-hover-border-color: var(--kl-primary); --bs-btn-hover-color: var(--kl-on-primary); }
.wf-bs .form-check-input:checked { background-color: var(--kl-primary); border-color: var(--kl-primary); }
.wf-bs .form-control:focus, .wf-bs .form-select:focus { border-color: var(--kl-primary); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--kl-primary) 25%, transparent); }

/* Logo lock-up in the sidebar: full logo normally, icon only when the sidebar is collapsed to the rail. */
.sidebar-brand { padding: .85rem 1rem; }
.brand-logo { display: block; width: auto; max-width: 100%; }
.brand-logo-full { height: 2.9rem; }
.brand-logo-icon { display: none; height: 2.4rem; }
.sidebar-brand-inner { overflow: visible; }
@media (min-width: 900px) {
    .sidebar-collapsed .brand-logo-full { display: none; }
    .sidebar-collapsed .brand-logo-icon { display: block; }
}

/* Theme-aware logos: the light-background logo in the light theme, the dark one otherwise. */
.kl-logo-themed .kl-logo-dark { display: none; }
:root[data-theme="dark"] .kl-logo-themed .kl-logo-light, :root[data-theme="contrast"] .kl-logo-themed .kl-logo-light { display: none; }
:root[data-theme="dark"] .kl-logo-themed .kl-logo-dark, :root[data-theme="contrast"] .kl-logo-themed .kl-logo-dark { display: block; }
/* ============ 12. Avatars (profile picture or initials) ============ */
.kl-av { --kl-av-size: 40px; position: relative; display: inline-grid; place-items: center; flex: 0 0 auto; width: var(--kl-av-size); height: var(--kl-av-size);
    border-radius: 50%; overflow: hidden; color: #fff; font-weight: 700; font-size: calc(var(--kl-av-size) * .38); line-height: 1; letter-spacing: .02em; vertical-align: middle; user-select: none;
    background: var(--kl-av-bg, linear-gradient(135deg, #001f4d 0%, #0f6f73 100%)); box-shadow: 0 0 0 2px var(--kl-surface), 0 1px 3px rgba(16, 24, 40, .28); transition: box-shadow var(--kl-dur) var(--kl-ease), transform var(--kl-dur) var(--kl-ease); }
.kl-av-xs { --kl-av-size: 24px; } .kl-av-sm { --kl-av-size: 32px; } .kl-av-md { --kl-av-size: 40px; } .kl-av-lg { --kl-av-size: 56px; } .kl-av-xl { --kl-av-size: 96px; }
.kl-av-c0 { --kl-av-bg: linear-gradient(135deg, #001f4d, #0f6f73); } .kl-av-c1 { --kl-av-bg: linear-gradient(135deg, #0f6f73, #16c6c8); }
.kl-av-c2 { --kl-av-bg: linear-gradient(135deg, #1e3a8a, #3b82f6); } .kl-av-c3 { --kl-av-bg: linear-gradient(135deg, #4c1d95, #8b5cf6); }
.kl-av-c4 { --kl-av-bg: linear-gradient(135deg, #7c2d12, #f59e0b); } .kl-av-c5 { --kl-av-bg: linear-gradient(135deg, #14532d, #22c55e); }
.kl-av-c6 { --kl-av-bg: linear-gradient(135deg, #831843, #ec4899); } .kl-av-c7 { --kl-av-bg: linear-gradient(135deg, #334155, #64748b); }
.kl-av-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; background: var(--kl-surface-2); }
.kl-av-failed .kl-av-img { display: none; }
:root[data-theme="contrast"] .kl-av { background: #ffff00; color: #000; box-shadow: 0 0 0 2px #fff; }
:root[data-theme="dark"] .kl-av { box-shadow: 0 0 0 2px var(--kl-surface), 0 1px 4px rgba(0, 0, 0, .6); }

/* top bar button */
.kl-profile-btn { gap: .6rem; padding: .25rem .6rem .25rem .25rem; border-radius: 999px; }
.kl-profile-btn:hover .kl-av, .kl-profile-btn[aria-expanded="true"] .kl-av { box-shadow: 0 0 0 2px var(--kl-surface), 0 0 0 4px var(--kl-primary); }
.kl-profile-btn:focus-visible { outline: 3px solid var(--kl-focus); outline-offset: 2px; }
.kl-profile-caret { width: 1rem; height: 1rem; color: var(--kl-text-muted); transition: transform var(--kl-dur) var(--kl-ease); }
.kl-profile-btn[aria-expanded="true"] .kl-profile-caret { transform: rotate(180deg); }
.kl-profile-name-first { display: none; }
@media (max-width: 900px) { .kl-profile-meta { display: flex !important; } .kl-profile-role { display: none; } .kl-profile-name-full { display: none; } .kl-profile-name-first { display: inline; } }
@media (max-width: 560px) { .kl-profile-meta, .kl-profile-caret { display: none !important; } .kl-profile-btn { padding: .2rem; } }

/* dropdown header */
.kl-menu-head { align-items: flex-start; gap: .85rem; }
.kl-menu-id { display: flex; flex-direction: column; min-width: 0; gap: .1rem; }
.kl-menu-id strong { font-size: 1rem; color: var(--kl-text); overflow-wrap: anywhere; }
.kl-menu-id span { font-size: .8rem; color: var(--kl-text-2); }
.kl-menu-id .kl-menu-empno { font-variant-numeric: tabular-nums; color: var(--kl-text-muted); }
.kl-menu-id .kl-menu-role { align-self: flex-start; margin-top: .3rem; padding: .1rem .6rem; border-radius: 999px; background: var(--kl-info-bg); color: var(--kl-link); font-size: .72rem; font-weight: 700; }

/* people lists: avatar + name */
.kl-who { display: inline-flex; align-items: center; gap: .6rem; min-width: 0; }
.kl-who > span:last-child { min-width: 0; overflow-wrap: anywhere; }

/* profile picture card (My Details, Employees > Edit) */
.kl-pp { display: flex; gap: 1.25rem; align-items: center; }
.kl-pp-preview { flex: 0 0 auto; }
.kl-pp-body { min-width: 0; flex: 1; }
.kl-pp-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.kl-pp-btn { padding: .45rem .95rem; border: 1px solid var(--kl-border-strong); border-radius: var(--kl-radius-sm); background: var(--kl-surface); color: var(--kl-link); font: inherit; font-size: .9rem; font-weight: 650; cursor: pointer; }
.kl-pp-btn:hover:not(:disabled) { border-color: var(--kl-primary); background: var(--kl-info-bg); }
.kl-pp-btn.primary { background: var(--kl-primary); border-color: var(--kl-primary); color: var(--kl-on-primary); }
.kl-pp-btn.danger { color: var(--kl-danger); }
.kl-pp-btn:disabled { opacity: .55; cursor: not-allowed; }
.kl-pp-btn:focus-visible { outline: 3px solid var(--kl-focus); outline-offset: 2px; }
.kl-pp-hint { margin: .5rem 0 0; font-size: .84rem; color: var(--kl-text-muted); line-height: 1.45; }
.kl-pp-msg { margin: .6rem 0 0; font-size: .9rem; font-weight: 600; min-height: 1.3em; }
.kl-pp-msg.ok { color: var(--kl-success); } .kl-pp-msg.bad { color: var(--kl-danger); }
:root:not([data-theme="dark"]):not([data-theme="contrast"]) .kl-pp-msg.ok { color: #0f7a37; }
:root:not([data-theme="dark"]):not([data-theme="contrast"]) .kl-pp-msg.bad { color: #b91c1c; }
@media (max-width: 560px) { .kl-pp { flex-direction: column; align-items: flex-start; } }
.kl-who-center { display: grid; place-items: center; margin-bottom: .75rem; }

.kl-hero-who { display: flex; align-items: center; gap: 1rem; }
.kl-hero-who .kl-av { box-shadow: 0 0 0 3px rgba(255, 255, 255, .85), 0 2px 8px rgba(0, 0, 0, .35); }
.kl-clock-state .kl-av { margin-right: .5rem; box-shadow: 0 0 0 2px rgba(255, 255, 255, .8); }
@media (max-width: 480px) { .kl-hero-who { align-items: flex-start; } }

/* ============ 12. Sortable grids, pager, grid toolbar (SortHeaderTagHelper, _Pager, klocktoba-grid.js) ============ */
.status-banner-error { background: var(--kl-danger-bg); border-left-color: var(--kl-danger); }
.kl-sort-link { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.kl-sort-link:hover, .kl-sort-link:focus-visible { text-decoration: underline; color: var(--kl-link); }
.kl-sort-arrow { font-size: .7em; line-height: 1; color: var(--kl-primary); }
.kl-sort-arrow-idle { color: var(--kl-text-muted); opacity: .55; }
th[aria-sort="ascending"], th[aria-sort="descending"] { background: var(--kl-info-bg) !important; }
.kl-grid-toolbar { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: end; margin: 0 0 .9rem; }
.kl-grid-toolbar .form-label { margin-bottom: .2rem; font-size: .8rem; color: var(--kl-text-muted); }
.kl-grid-toolbar .kl-grow { flex: 1 1 14rem; min-width: 12rem; }
.kl-pager { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; padding: .7rem .9rem; border-top: 1px solid var(--kl-border); font-size: .88rem; color: var(--kl-text-muted); }
.kl-pager nav ul { display: flex; gap: .25rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.kl-pager a, .kl-pager span.kl-page-current { display: inline-block; min-width: 2.1rem; text-align: center; padding: .3rem .55rem; border: 1px solid var(--kl-border); border-radius: var(--kl-radius-sm); color: var(--kl-text); text-decoration: none; }
.kl-pager a:hover, .kl-pager a:focus-visible { background: var(--kl-surface-2); border-color: var(--kl-primary); }
.kl-pager span.kl-page-current { background: var(--kl-primary); color: var(--kl-on-primary); border-color: var(--kl-primary); font-weight: 600; }
.kl-pager .kl-page-disabled { opacity: .45; pointer-events: none; }
.kl-empty { padding: 2rem 1rem; text-align: center; color: var(--kl-text-muted); }
.kl-chip { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 600; background: var(--kl-surface-2); border: 1px solid var(--kl-border); color: var(--kl-text-2); }
.kl-chip-ok { background: var(--kl-success-bg); border-color: var(--kl-success); color: var(--kl-text); }
.kl-chip-warn { background: var(--kl-warning-bg); border-color: var(--kl-warning); color: var(--kl-text); }
.kl-chip-bad { background: var(--kl-danger-bg); border-color: var(--kl-danger); color: var(--kl-text); }
.kl-merge-field { font-family: Consolas, monospace; font-size: .8rem; cursor: pointer; }
.kl-preview-frame { width: 100%; min-height: 24rem; border: 1px solid var(--kl-border); border-radius: var(--kl-radius); background: #fff; }
.kl-sms-bubble { max-width: 22rem; background: #e5e7eb; color: #111827; border-radius: 1.1rem; padding: .75rem 1rem; font-size: .92rem; white-space: pre-wrap; }
.kl-colour-row { display: flex; align-items: center; gap: .5rem; }
.kl-colour-row input[type="color"] { width: 2.6rem; height: 2.4rem; padding: .1rem; border: 1px solid var(--kl-border); border-radius: var(--kl-radius-sm); background: var(--kl-surface); }
.kl-sort-btn { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: .3rem; font: inherit; text-transform: inherit; letter-spacing: inherit; color: inherit; }
.kl-sort-btn:hover, .kl-sort-btn:focus-visible { text-decoration: underline; color: var(--kl-link); }
.kl-sort-btn:focus-visible { outline: 2px solid var(--kl-focus); outline-offset: 2px; border-radius: 3px; }
dialog.kl-confirm { border: 1px solid var(--kl-border); border-radius: var(--kl-radius-lg); background: var(--kl-surface); color: var(--kl-text); padding: 1.4rem 1.5rem; max-width: min(26rem, 92vw); box-shadow: var(--kl-shadow-3); }
dialog.kl-confirm::backdrop { background: rgba(11, 26, 46, .55); }
dialog.kl-confirm p { margin: 0 0 1.2rem; font-size: 1rem; }
.kl-confirm-actions { display: flex; gap: .6rem; justify-content: flex-end; }
.btn-danger { background: var(--kl-danger); color: #fff; border: 1px solid var(--kl-danger); }
.btn-danger:hover { filter: brightness(.92); }
.wf-bs th .kl-sort-link, .data-table th .kl-sort-link { color: inherit; text-decoration: none; }
.wf-bs th .kl-sort-link:hover, .wf-bs th .kl-sort-link:focus-visible { color: var(--kl-link); text-decoration: underline; }
.wf-bs .modal-content { background: var(--kl-surface); color: var(--kl-text); }
.wf-bs h2.kl-panel-title, .wf-page h2.kl-panel-title { font-size: 1.05rem; font-weight: 650; }
.kl-grid-toolbar .form-label { display: block; }
.kl-grid-toolbar .form-control { width: 100%; box-sizing: border-box; }
.kl-grid-toolbar > div { min-width: 7rem; }
.kl-grid-toolbar > div.kl-grow { min-width: 12rem; }
.kl-grid-toolbar a.btn { text-decoration: none; display: inline-block; }
.kl-grid-toolbar a.btn-secondary { color: var(--kl-text); }
.kl-grid-toolbar a.btn { padding: .65rem 1.1rem; line-height: 1.2; border-radius: var(--kl-radius-sm); }