/* =========================================
   TimeBeing — app.css
   Neutral gray/white palette, Flexbox layout
   ========================================= */

/* --- Custom Properties --- */
:root {
    --color-bg:          #F5F3ED;
    --color-card:        #ffffff;
    --color-surface:     #ffffff;
    --color-border:      #e0e0e0;
    --color-sidebar-bg:  #ffffff;
    --color-sidebar-txt: #c8c8d8;
    --color-sidebar-hover: #EDECEA;
    --color-sidebar-active: #EDECEA;
    --color-accent:      #88BC86;
    --color-accent-dark: #6fa36d;
    --color-text:        #1a1a2e;
    --color-text-muted:  #6b7080;
    --color-error-bg:    #fef2f2;
    --color-error-txt:   #b91c1c;
    --color-error-border:#fca5a5;

    --sidebar-width:     240px;
    --font:              'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --radius:            6px;
    --shadow:            0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow-x: hidden; }
body { font-family: var(--font); background: var(--color-bg); color: var(--color-text); font-size: 15px; line-height: 1.5; letter-spacing: 0.01em; }
body.section-time,
body.section-wellbeing,
body.section-projects,
body.section-settings,
body.section-admin,
body.section-reports,
body.section-dashboard { background: var(--color-bg); }
.dash-greeting-icon.hs-settings,
.dash-greeting-icon.hs-admin,
.dash-greeting-icon.hs-reports,
.dash-greeting-icon.hs-notifs { background: #E8EDF2; color: #395D7F; }
.dash-insight-icon.hs-settings,
.dash-insight-icon.hs-admin,
.dash-insight-icon.hs-reports,
.dash-insight-icon.hs-notifs { background: #E8EDF2; color: #395D7F; }
.dash-greeting-sub { font-size: 14px; color: var(--color-text-muted); margin-top: 3px; }
a { color: inherit; text-decoration: none; }
ul  { list-style: none; }

/* =========================================
   App Shell + Top Nav
   ========================================= */
.app-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.main-content { flex: 1; }

/* --- Top Nav Bar --- */
.tnav {
    display: flex;
    align-items: center;
    width: 100%;
    height: 60px;
    padding: 20px 30px 0;
    gap: 30px;
}

/* Brand (left) */
.tnav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}
.tnav-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 4px;
    width: 22px;
    height: 22px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}
.tnav-hamburger span {
    display: block;
    width: 18px;
    height: 2px;
    background: #555;
    border-radius: 2px;
    transition: transform .2s, opacity .2s;
}
.tnav-brand-link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}
.tnav-logo {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tnav-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.tnav-brand-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text);
    white-space: nowrap;
}

/* Nav links (center) — white track with Brand Primary text; Brand Accent for hover + active pill. */
.tnav-links {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
    justify-content: center;
    background: var(--color-card, #fff);
    padding: 2px;
    border-radius: 100px;
}
.tnav-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 40px;
    padding: 0 20px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-primary, #395D7F);
    text-decoration: none;
    white-space: nowrap;
    transition: background .13s, color .13s;
}
.tnav-link:hover {
    background: transparent;
    color: var(--color-accent, #88BC86);
    text-decoration: none;
}
.tnav-link.active {
    background: var(--color-accent, #88BC86);
    color: #fff;
    font-weight: 600;
    border-radius: 20px;
    cursor: default;
    pointer-events: none;
}

/* Utility bar (right) */
.tnav-utils {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    justify-content: flex-end;
}

/* Grouped icon tray — pill container for bell + gear + avatar */
.topbar-icon-tray {
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 4px;
}
.topbar-icon-tray .topbar-bell-btn,
.topbar-icon-tray .topbar-icon-btn,
.topbar-icon-tray .topbar-avatar-btn {
    border: none;
    width: 36px;
    height: 36px;
}
.topbar-icon-tray .topbar-bell-btn,
.topbar-icon-tray .topbar-icon-btn {
    background: transparent;
    color: var(--color-text);
}
.topbar-icon-tray .topbar-bell-btn:hover,
.topbar-icon-tray .topbar-icon-btn:hover {
    background: rgba(0,0,0,.06);
}

/* Mobile nav dropdown */
.tnav-mobile-menu[hidden] { display: none !important; }
.tnav-mobile-menu {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    z-index: 199;
    background: #fff;
    border-bottom: 1px solid #ececec;
    display: flex;
    flex-direction: column;
    padding: 8px 16px 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
}
.tnav-mobile-menu .tnav-link {
    padding: 11px 10px;
    font-size: 15px;
    border-radius: 8px;
}

/* Search bar inside mobile drawer */
#tnav-search-slot {
    display: contents; /* transparent wrapper — children flow as if direct children of drawer */
}
#tnav-search-slot .gs-wrap {
    width: 100%;
    flex: none;
    max-width: none;
    margin-bottom: 8px;
}
#tnav-search-slot .gs-wrap.gs-open .gs-expandable,
#tnav-search-slot .gs-wrap .gs-expandable {
    max-width: none;
    overflow: visible;
}
#tnav-search-slot .gs-input {
    width: 100%;
}

/* When nav is compact: hide search from utils (JS moves it, but guard with CSS too) */
.tnav[data-compact] .tnav-utils .gs-wrap {
    display: none;
}
/* Also remove the extra margin-left from wb toggle at compact size (utils is tighter) */
.tnav[data-compact] .wb-mode-toggle {
    margin-left: 0;
}

/* --- Main Content --- */
.main-content {
    padding: 32px 32px 80px;
    min-width: 0;
}

/* =========================================
   Page Header
   ========================================= */
.page-header {
    max-width: 680px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.page-back-link {
    display: inline-block;
    font-size: 13px;
    color: var(--color-text-muted);
    text-decoration: none;
    margin-bottom: 6px;
}
.page-back-link:hover { color: var(--color-accent); }
.page-header-actions { flex-shrink: 0; padding-top: 4px; }

/* Submission view */
.sv-summary {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
}
.sv-stat {
    background: #f8f9fb;
    border-radius: 10px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 100px;
}
.sv-stat-value { font-size: 22px; font-weight: 700; color: var(--color-text); }
.sv-stat-label { font-size: 12px; color: var(--color-text-muted); }
.sv-day-group  { margin-bottom: 20px; }
.sv-day-header {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--color-border);
}
.sv-day-name  { font-size: 14px; font-weight: 600; color: var(--color-text); }
.sv-day-date  { font-size: 13px; color: var(--color-text-muted); }
.sv-day-total { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--color-accent); }

.page-header h1 {
    font-size: 28px;
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: -0.5px;
    margin-bottom: 4px;
}

.page-header h2 {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-accent);
    margin-bottom: 12px;
}

.page-header p {
    font-size: 15px;
    color: var(--color-text-muted);
    line-height: 1.6;
}

/* =========================================
   Login Page
   ========================================= */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    /* This rule is mostly cosmetic — html body .login-page at line 8474
       overrides with !important to the auth-canvas light-blue. Leaving a
       sensible default here so any render path that bypasses the
       guest layout (e.g. an exception view) lands on the brand canvas
       instead of the previous unbranded dark navy. */
    background: var(--color-bg);
    padding: 24px;
}

.login-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    box-shadow: var(--shadow);
    padding: 40px;
    width: 100%;
    max-width: 420px;
}

.login-header {
    text-align: center;
    margin-bottom: 28px;
}

/* Match the signup card's left-aligned heading + sub so the two auth
   pages feel like one set. Color is pinned to literal #395D7F (homepage
   CTA navy) rather than var(--color-accent-dark) — the auth pages
   shouldn't drift to brand green when --color-accent-dark inherits the
   in-app accent. */
.login-heading {
    font-family: 'Caveat', cursive;
    font-size: 2.6rem;
    font-weight: 700;
    color: #395D7F;
    margin: 0 0 8px;
    letter-spacing: 0;
    line-height: 1.2;
}
.login-sub {
    font-size: 14px;
    color: var(--color-text-muted);
    margin: 0 0 28px;
    line-height: 1.6;
}

.login-logo {
    width: 180px;
    height: auto;
    margin-bottom: 10px;
}

.login-header h1 {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 6px;
}

.login-header p {
    font-size: 14px;
    color: var(--color-text-muted);
}

.demo-creds {
    margin-top: 24px;
    padding: 14px 16px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 13px;
    color: var(--color-text-muted);
}
.demo-creds-title {
    margin: 0 0 8px;
    font-weight: 600;
    color: var(--color-text);
}
.demo-creds ul {
    margin: 0;
    padding: 0 0 0 16px;
    line-height: 1.7;
}

/* ═══════════════════════════════════════════════════════
   REGISTER — Split panel layout
   ═══════════════════════════════════════════════════════ */
.register-split {
    display: flex;
    min-height: 100vh;
}

/* Left: form panel */
.register-form-panel {
    flex: 0 0 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface);
    padding: 48px 40px;
}
.register-form-inner {
    width: 100%;
    max-width: 400px;
}
.register-heading {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--color-text);
    margin: 0 0 8px;
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.register-sub {
    font-size: 15px;
    color: var(--color-text-muted);
    margin: 0 0 28px;
}
.register-divider {
    text-align: center;
    color: #aaa;
    margin: 12px 0;
    font-size: .85rem;
    position: relative;
}
.register-divider span {
    background: var(--color-surface);
    padding: 0 10px;
    position: relative;
    z-index: 1;
}
.register-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0; right: 0;
    border-top: 1px solid var(--color-border);
}
.register-free-note {
    text-align: center;
    margin-top: 14px;
    font-size: 12px;
    color: var(--color-text-muted);
}
.register-signin-link {
    margin-top: 10px;
    text-align: center;
    font-size: 13px;
    color: var(--color-text-muted);
}
.register-signin-link a {
    color: var(--color-accent);
    font-weight: 600;
    text-decoration: none;
}

/* Auth page: match marketing site focus ring */
body.auth-body .form-group input:focus {
    box-shadow: 0 0 0 3px rgba(57,93,127,.15);
}

/* ── Signup page ── */
.signup-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #EEF3F7;
}
.signup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 40px;
}
.signup-header-link {
    font-size: 14px;
    color: var(--color-text-muted);
    text-decoration: none;
}
.signup-header-link strong {
    color: var(--color-accent);
    font-weight: 600;
}
.signup-header-link:hover strong { text-decoration: underline; }
.signup-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 24px 60px;
}
.signup-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    padding: 44px 48px;
    width: 100%;
    max-width: 440px;
}
.signup-heading {
    font-family: 'Caveat', cursive;
    /* Fluid so the cursive heading scales down on narrow phones instead of
       overflowing the card; wraps as a last resort on the smallest screens. */
    font-size: clamp(1.9rem, 7vw, 2.6rem);
    font-weight: 700;
    color: #395D7F;
    margin: 0 0 8px;
    letter-spacing: 0;
    line-height: 1.2;
    overflow-wrap: break-word;
}
.signup-sub {
    font-size: 14px;
    color: var(--color-text-muted);
    margin: 0 0 28px;
    line-height: 1.6;
}
@media (max-width: 520px) {
    .signup-header { padding: 16px 20px; }
    .signup-card { padding: 32px 24px; }
}

/* --- Searchable project picker (TBProjectPicker) ---
   Themed via --color-* so the results dropdown is dark-mode safe (no hardcoded
   white). Used on the daily/weekly time forms in place of a giant <select>. */
.pp { position: relative; }
.pp-control { position: relative; display: flex; align-items: center; }
.pp-input {
    width: 100%;
    padding: 8px 30px 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface, #fff);
    color: var(--color-text);
    font: inherit;
    font-size: 14px;
}
.pp-input:focus { outline: 2px solid var(--color-accent); outline-offset: -1px; }
.pp-clear {
    position: absolute;
    right: 6px;
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}
.pp-clear:hover { color: var(--color-text); }
.pp-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 50;
    max-height: 260px;
    overflow-y: auto;
    background: var(--color-card, #fff);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: var(--shadow, 0 4px 16px rgba(0,0,0,.12));
}
.pp-hidden { display: none; }
.pp-section, .pp-empty {
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-text-muted);
}
.pp-empty { text-transform: none; font-weight: 400; font-size: 13px; }
.pp-result {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 8px 12px;
    cursor: pointer;
    border-top: 1px solid var(--color-border);
}
.pp-result:first-child { border-top: none; }
.pp-result:hover, .pp-result.pp-active { background: var(--color-surface, #f5f5f5); }
.pp-result-name { font-size: 14px; color: var(--color-text); }
.pp-result-name mark { background: rgba(91,106,240,.18); color: inherit; padding: 0 1px; border-radius: 2px; }
.pp-result-meta { font-size: 12px; color: var(--color-text-muted); }

/* --- Form Elements --- */
.form-group {
    margin-bottom: 16px;
}

/* Horizontal strip for "tag this entry" checkboxes (Recurring, Meeting,
   Break, Time off) on the Add Time form. Each label is an inline-flex
   .recur-toggle-label so it flows in the row; flex-wrap drops the strip
   to a second line on narrower viewports instead of forcing horizontal
   scroll. Replaces the previous one-per-row .form-group stack that wasted
   most of the form's horizontal real estate. */
.entry-flag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    margin: 0 0 16px;
    align-items: center;
}
@media (max-width: 640px) {
    .entry-flag-row { gap: 10px 18px; }
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 6px;
}

.form-group input:not(.color-swatch-input) {
    width: 100%;
    padding: 9px 12px;
    font-size: 14px;
    font-family: var(--font);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    transition: border-color .15s, box-shadow .15s;
    outline: none;
}

.form-group input:not(.color-swatch-input):focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(91,106,240,.12);
}

/* --- Buttons --- */
.btn-primary {
    display: inline-block;
    background: var(--color-accent);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font);
    padding: 10px 18px;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background .15s;
}
.btn-primary:hover { background: var(--color-accent-dark); }

/* Auth-page buttons match the marketing homepage CTAs — navy #395D7F with
   #264766 hover — independent of --color-accent so they don't drift to
   brand green when the in-app accent is live. Applies to /login, /signup,
   and any other view that wraps content in .login-page or .signup-page. */
.login-page .btn-primary,
.signup-page .btn-primary { background: #395D7F; }
.login-page .btn-primary:hover,
.signup-page .btn-primary:hover { background: #264766; }

.btn-full { width: 100%; text-align: center; margin-top: 4px; }
.btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #444;
    font-size: 14px;
    font-weight: 500;
    font-family: var(--font);
    padding: 10px 18px;
    border: 1px solid #dadce0;
    border-radius: var(--radius);
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, box-shadow .15s;
}
.btn-google:hover { background: #f8f9fa; box-shadow: 0 1px 3px rgba(0,0,0,.12); }

/* --- Alerts --- */
.alert {
    padding: 10px 14px;
    border-radius: var(--radius);
    font-size: 13px;
    margin-bottom: 16px;
}
.alert-error {
    background: var(--color-error-bg);
    color: var(--color-error-txt);
    border: 1px solid var(--color-error-border);
}

/* --- Test Credentials Card --- */
.test-credentials {
    margin-top: 28px;
    padding: 16px;
    background: #f8f8fb;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.credentials-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--color-text-muted);
    margin-bottom: 10px;
}

.test-credentials table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.test-credentials td {
    padding: 3px 6px 3px 0;
    color: var(--color-text-muted);
}

.test-credentials td:first-child {
    font-weight: 600;
    color: var(--color-text);
    width: 72px;
}

/* =========================================
   Daily Timesheet
   ========================================= */

/* Daily two-column layout */
.daily-two-col {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 24px;
    align-items: start;
}
.daily-col-form,
.daily-col-entries { min-width: 0; }

.daily-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
}
.daily-card-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 20px;
    color: var(--color-text);
}
.daily-entries-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.daily-entries-header .daily-card-title { margin-bottom: 0; }
.daily-entries-header .hours-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font-size: 13px;
}

/* Header + day nav */
.daily-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}
.daily-nav-group {
    display: flex;
    align-items: center;
    gap: 10px;
}
.daily-title {
    display: flex;
    align-items: center;
    gap: 8px;
}
.daily-title h2 {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}
.ts-view-toggle {
    display: flex;
    background: var(--color-primary, #395D7F);
    border-radius: 100px;
    padding: 3px;
    gap: 2px;
}
.ts-view-btn {
    padding: 5px 14px;
    border-radius: 100px;
    border: none;
    background: transparent;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    cursor: pointer;
    transition: background .15s, color .15s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
.ts-view-btn.active,
.ts-view-btn-active {
    background: var(--color-accent, #88BC86);
    color: #fff;
    font-weight: 600;
}

/* On phone, the green pill sub-nav (used across admin + timesheet pages)
   wraps to multiple rows so every tab is visible at a glance. The
   container's pill radius is reduced from 100px to a softer 18px so the
   wrapped state looks like an intentional rounded block instead of a
   broken capsule. Individual buttons keep their full pill shape. */
@media (max-width: 720px) {
    .ts-view-toggle {
        flex-wrap: wrap;
        border-radius: 18px;
        justify-content: center;
        row-gap: 3px;
    }
    .ts-view-btn {
        white-space: nowrap;
    }
}

.daily-title h1 {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.4px;
    margin-bottom: 2px;
}


.day-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.day-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.today-badge {
    font-size: 11px;
    font-weight: 700;
    background: var(--color-accent);
    color: #fff;
    padding: 2px 7px;
    border-radius: 20px;
}

.day-nav-btn {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-muted);
    padding: 5px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    transition: background .15s, color .15s;
    white-space: nowrap;
}
.day-nav-btn:hover { background: #f0f0f5; color: var(--color-text); }
.today-jump { background: #f0f0f5; }

/* Flash messages */
.flash {
    padding: 10px 16px;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 16px;
}
.flash-success {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}
.flash-warn {
    background: #fffbeb;
    color: #92400e;
    border: 1px solid #fde68a;
}
.flash-timer {
    background: color-mix(in srgb, var(--color-accent) 8%, var(--color-card));
    color: var(--color-text);
    border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
}

/* Hours summary bar */
.hours-summary {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    border-radius: var(--radius);
    margin-bottom: 20px;
    border: 1px solid transparent;
}
.hours-empty  { background: #f8f8fb; border-color: var(--color-border); }
.hours-ok     { background: #f0fdf4; border-color: #bbf7d0; }
.hours-over   { background: #fff7ed; border-color: #fed7aa; }

.hours-total {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text);
}
.hours-flag {
    font-size: 13px;
    color: var(--color-text-muted);
}
.hours-over .hours-flag { color: #c2410c; font-weight: 500; }

/* Entry form card */
.entry-form-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 24px;
    max-width: 720px;
}
.entry-form-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 18px;
}

/* =========================================
   Weekly Grid
   ========================================= */
.weekly-grid-wrap {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 24px;
    overflow-x: auto;
}
.weekly-grid-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 16px;
}
.weekly-grid {
    width: 100%;
    border-collapse: collapse;
    min-width: 700px;
}
.weekly-grid th {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-text-muted);
    padding: 6px 8px 10px;
    text-align: center;
    border-bottom: 2px solid var(--color-border);
    white-space: nowrap;
}
.weekly-grid th:first-child,
.weekly-grid th:nth-child(2) { text-align: left; }
.weekly-grid td {
    padding: 6px 4px;
    text-align: center;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}
.weekly-grid td:first-child,
.weekly-grid td:nth-child(2) { text-align: left; padding-left: 0; }
.weekly-grid th:first-child { width: 22%; }
.weekly-grid th:nth-child(2) { width: 18%; }
.weekly-grid select {
    width: 100%;
    padding: 5px 8px;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    font-size: 13px;
    background: var(--color-bg);
    color: var(--color-text);
}
.weekly-grid input[type="number"] {
    width: 58px;
    padding: 5px 4px;
    text-align: center;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    font-size: 13px;
    background: var(--color-bg);
    color: var(--color-text);
}
.weekly-grid input[type="number"]:focus,
.weekly-grid select:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(14,165,233,.15);
}
.weekly-grid .row-total {
    font-weight: 600;
    font-size: 13px;
    color: var(--color-text);
    min-width: 48px;
}
.weekly-grid .row-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-muted);
    font-size: 16px;
    padding: 2px 6px;
    line-height: 1;
    border-radius: 4px;
}
.weekly-grid .row-remove:hover { color: #dc2626; background: #fef2f2; }
.weekly-grid-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 14px;
    gap: 12px;
}
.weekly-grid-footer .btn-add-row {
    background: none;
    border: 1px dashed var(--color-border);
    border-radius: 6px;
    padding: 7px 14px;
    font-size: 13px;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: border-color .15s, color .15s;
}
.weekly-grid-footer .btn-add-row:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}
.weekly-existing {
    margin-top: 28px;
}
.weekly-existing-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 12px;
}
.weekly-grid .col-total td {
    font-weight: 700;
    border-top: 2px solid var(--color-border);
    border-bottom: none;
    font-size: 13px;
    padding-top: 10px;
}
.weekly-submit-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 0 4px;
    border-top: 1px solid var(--color-border);
    margin-top: 8px;
    flex-wrap: wrap;
}
.weekly-week-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.weekly-week-range {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
}

.form-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--color-text);
}

.form-row {
    display: flex;
    gap: 16px;
    margin-bottom: 0;
}
.form-group-project { flex: 2; }
.form-group-hours   { flex: 1; min-width: 100px; }

.form-group select,
.form-group textarea {
    width: 100%;
    padding: 9px 12px;
    font-size: 14px;
    font-family: var(--font);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    resize: vertical;
}
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(91,106,240,.12);
}

/* Reaction picker */
.reaction-picker {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.reaction-option {
    cursor: pointer;
    display: flex;
    align-items: center;
}

.reaction-option input[type="radio"],
.reaction-option input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Inline "Like this task?" layout */
.reaction-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.reaction-row-label {
    margin: 0;
    font-weight: 500;
    color: var(--color-text);
}

.reaction-option span {
    display: inline-block;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    color: var(--color-text-muted);
    background: var(--color-surface);
    transition: all .15s;
    cursor: pointer;
}
.reaction-option:hover span { border-color: var(--color-accent); color: var(--color-accent); }
.reaction-option input:checked + span {
    border-color: transparent;
    color: #fff;
    font-weight: 600;
}

.reaction-opt-up   input:checked + span { background: #16a34a; }
.reaction-opt-down input:checked + span { background: #dc2626; }

/* Form actions */
.form-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}

.btn-cancel {
    font-size: 14px;
    color: var(--color-text-muted);
    padding: 8px 4px;
    transition: color .15s;
}
.btn-cancel:hover { color: var(--color-text); }

/* Entry list */
.no-entries {
    font-size: 14px;
    color: var(--color-text-muted);
    padding: 24px 18px;
}

.entry-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.entry-item {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 14px 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    transition: border-color .15s;
}
.entry-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.entry-item:hover   { border-color: #c8c8d8; }
.entry-editing      { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(91,106,240,.08); }

.entry-main {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 0;
}

.entry-hours {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text);
    white-space: nowrap;
    min-width: 64px;
}
.hrs-label {
    font-size: 12px;
    font-weight: 400;
    color: var(--color-text-muted);
    margin-left: 2px;
}

.entry-detail { flex: 1; min-width: 0; }

.entry-client {
    font-size: 12px;
    font-weight: 400;
    color: var(--color-text-muted);
    margin-bottom: 2px;
}
.entry-project {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
}

.entry-notes {
    font-size: 13px;
    color: var(--color-text-muted);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Entry accordion drawer */
.entry-drawer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.2s ease;
}
.entry-drawer.open { grid-template-rows: 1fr; }
.entry-drawer-inner {
    overflow: hidden;
    padding: 0 0 0 80px;
}
.entry-drawer.open .entry-drawer-inner {
    padding-top: 8px;
    padding-bottom: 4px;
}
.entry-drawer-notes {
    font-size: 13px;
    color: var(--color-text-muted);
    margin: 0 0 6px;
    line-height: 1.4;
}
.entry-drawer-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.entry-dtag {
    font-size: 11px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
}
.entry-dtag-meeting  { background: #eff6ff; border-color: #bfdbfe; color: #2563eb; }
.entry-dtag-break    { background: #fefce8; border-color: #fde68a; color: #b45309; }
.entry-dtag-pto      { background: #f5f3ff; border-color: #c4b5fd; color: #6d28d9; }
.entry-dtag-recurring{ background: #f0fdf4; border-color: #bbf7d0; color: #16a34a; }
.entry-icon-expand svg      { transition: transform 0.2s; }
.entry-icon-expand-open svg { transform: rotate(180deg); }

/* Reaction badges on entries */
.reaction-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
}
.reaction-badge-up   { background: #dcfce7; color: #16a34a; }
.reaction-badge-down { background: #fee2e2; color: #dc2626; }

/* Pending approval avatar */
.sub-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #395D7F;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.entry-icon-approve:hover { background: #dcfce7; color: #16a34a; border-color: #bbf7d0; }

/* Entry action buttons */
.entry-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.entry-action-btn {
    font-size: 12px;
    color: var(--color-text-muted);
    padding: 4px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: none;
    cursor: pointer;
    font-family: var(--font);
    transition: background .15s, color .15s, border-color .15s;
    text-decoration: none;
    display: inline-block;
}
.entry-action-btn:hover       { background: #f0f0f5; color: var(--color-text); }
.entry-action-delete:hover    { background: #fee2e2; color: #dc2626; border-color: #fca5a5; }

.entry-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
}
.entry-icon-btn:hover      { background: #f0f0f5; color: var(--color-text); }
.entry-icon-delete:hover   { background: #fee2e2; color: #dc2626; border-color: #fca5a5; }
.entry-icon-stop:hover     { background: #fff7ed; color: #ea580c; border-color: #fdba74; }

/* =========================================
   Weekly Timesheet
   ========================================= */

.week-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
}

.week-stats {
    display: flex;
    gap: 0;
    margin-bottom: 24px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--color-surface);
}

.week-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 12px;
    border-right: 1px solid var(--color-border);
    text-align: center;
}
.week-stat:last-child { border-right: none; }

.stat-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1;
    margin-bottom: 4px;
}
.stat-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
}
.stat-warning .stat-value { color: #c2410c; }

.week-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
}

.week-day {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 160px;
    transition: border-color .15s;
}
.week-day:hover        { border-color: #c8c8d8; }
.week-day-today        { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(91,106,240,.08); }
.week-day-future       { background: #fafafa; }
.week-day-over         { border-color: #fed7aa; }

.week-day-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.week-day-name {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--color-text-muted);
}

.week-day-date {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background .15s;
}
.week-day-date:hover         { background: #f0f0f5; }
.week-day-date-today         { background: var(--color-accent); color: #fff; }
.week-day-date-today:hover   { background: var(--color-accent-dark); }

.week-day-hours {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}
.hours-ok-text   { color: #16a34a; }
.hours-over-text { color: #c2410c; }

.overtime-flag {
    font-size: 10px;
    font-weight: 700;
    background: #fed7aa;
    color: #c2410c;
    padding: 1px 5px;
    border-radius: 4px;
}

.week-day-entries {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: hidden;
}

.week-entry {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    overflow: hidden;
}

.week-entry-hours   { font-weight: 600; color: var(--color-text); white-space: nowrap; flex-shrink: 0; }
.week-entry-project { color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.reaction-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.reaction-dot-up   { background: #16a34a; }
.reaction-dot-down { background: #dc2626; }

.week-no-entries { font-size: 11px; color: #ccc; font-style: italic; }

.week-day-link {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-accent);
    text-align: center;
    padding: 4px 0 0;
    border-top: 1px solid var(--color-border);
    margin-top: auto;
    transition: color .15s;
}
.week-day-link:hover { color: var(--color-accent-dark); }

/* =========================================
   Projects
   ========================================= */

.section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.section-header h1 {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.4px;
    margin-bottom: 2px;
}

.section-header h2 {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-accent);
}

.section-subheading {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text);
    margin: 28px 0 12px;
}

.btn-secondary {
    display: inline-block;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font);
    padding: 9px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background .15s;
    text-decoration: none;
}
.btn-secondary:hover { background: #f0f0f5; }

/* Project status filter buttons (inside daily-card header) */
.proj-filter-row {
    display: flex;
    gap: 6px;
    margin-bottom: 20px;
}
.proj-filter-btn {
    font-size: 13px;
    font-weight: 500;
    padding: 5px 14px;
    border-radius: 20px;
    color: var(--color-text-muted);
    background: transparent;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.proj-filter-btn:hover           { background: #f1f3f8; color: var(--color-text); }
.proj-filter-btn-active          { background: #395D7F; color: #fff; }
.proj-filter-btn-active:hover    { background: #2d4d6a; color: #fff; }

/* Badge inside ts-view-toggle button (e.g. overdue count) */
.ts-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 5px;
    border-radius: 10px;
    background: #e05252;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

/* Filter tabs */
.filter-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0;
}

.filter-tab {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-muted);
    padding: 8px 14px;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .15s, border-color .15s;
    text-decoration: none;
}
.filter-tab:hover       { color: var(--color-text); }
.filter-tab-active      { color: var(--color-accent); border-color: var(--color-accent); font-weight: 600; }

/* Data table */
.data-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
}
.daily-card .data-table-wrap {
    border: none;
    border-radius: 0;
    margin: 0 -24px -24px;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.data-table th {
    padding: 10px 16px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
    background: #fafafa;
    white-space: nowrap;
}

.data-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
    color: var(--color-text);
}

.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover td      { background: #fafafa; }
.row-warning td                    { background: #fff7ed !important; }

.td-primary { font-weight: 600; }
.td-sub     { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }

/* Status badges */
.status-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    text-transform: capitalize;
}
.status-active    { background: #dcfce7; color: #16a34a; }
.status-completed { background: #dbeafe; color: #2563eb; }
.status-archived  { background: #f3f4f6; color: #6b7280; }

.text-danger  { color: #dc2626; }
.overdue-tag  {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    background: #fee2e2;
    color: #dc2626;
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 4px;
}
.overdue-days {
    font-weight: 700;
    color: #dc2626;
}

/* Manage page two-column grid */
.manage-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    margin-bottom: 8px;
    align-items: start;
}

/* Projects Dashboard two-column layout */
.projects-panel-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 20px;
    align-items: start;
}
@media (max-width: 960px) {
    .projects-panel-layout { grid-template-columns: 1fr; }
    /* Grid items default to min-width: auto (intrinsic content width). On phone
       a long input's min-content was pushing the column past the viewport and
       eating the right padding. Allow both children to shrink. */
    .projects-sidebar,
    .projects-main { min-width: 0; }
}
.projects-sidebar .entry-form-card {
    max-width: none;
    margin-bottom: 16px;
}
.projects-sidebar .entry-form-card:last-child { margin-bottom: 0; }

/* Inline add form (clients) */
.inline-add-form {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.inline-add-form input {
    flex: 1;
    min-width: 120px;
    padding: 8px 10px;
    font-size: 13px;
    font-family: var(--font);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    outline: none;
}
.inline-add-form input:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(91,106,240,.1);
}

/* Simple list (clients) */
.simple-list { display: flex; flex-direction: column; gap: 6px; }
.simple-list-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border);
}
.simple-list-item:last-child { border-bottom: none; }
.simple-list-name { font-size: 14px; font-weight: 600; flex: 1; }
.simple-list-sub  { font-size: 12px; color: var(--color-text-muted); flex: 1; }

/* Empty state */
.empty-state {
    text-align: center;
    padding: 60px 24px;
}
.empty-state-title { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.empty-state-sub   { font-size: 14px; color: var(--color-text-muted); }

/* =========================================
   Dashboard
   ========================================= */

.dash-greeting {
    margin-bottom: 55px;
    margin-top: 28px;
}

.dash-welcome {
    font-size: 14px;
    color: var(--color-text-muted);
    margin-bottom: 16px;
}

.dash-welcome strong {
    color: var(--color-accent);
    font-weight: 600;
}

.dash-insight-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.dash-insight-icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
}

.dash-insight {
    font-size: 26px;
    font-weight: 700;
    color: var(--color-text, #111827);
    line-height: 1.3;
    letter-spacing: -0.3px;
    max-width: 80%;
}

/* AI hero lockout notice */
.ai-hero-lockout {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding: 12px 16px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    color: #92400e;
    font-size: 13px;
    line-height: 1.5;
}

/* AI hero input (timesheet page) */
.ai-hero-input-wrap {
    display: flex;
    align-items: stretch;
    margin-top: 20px;
    border-radius: 10px;
    border: 1px solid var(--color-border);
    background: var(--color-card);
    overflow: hidden;
    max-width: 860px;
}
.ai-hero-textarea {
    flex: 1;
    border: none;
    outline: none;
    padding: 14px 18px;
    font-size: 14px;
    font-family: var(--font);
    color: var(--color-text-muted);
    resize: none;
    background: transparent;
    line-height: 1.5;
}
@media (max-width: 720px) {
    .ai-hero-textarea { font-size: 13px; }
}
.ai-hero-btn {
    width: 52px;
    flex-shrink: 0;
    background: #4E7396;
    border: none;
    color: #fff;
    font-size: 26px;
    font-weight: 300;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}
.ai-hero-btn:hover { background: #3d5c78; }
.ai-hero-mic-btn {
    display: none;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: var(--color-surface);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background .15s, color .15s;
    flex-shrink: 0;
    margin: 0 4px;
}
.ai-hero-mic-btn:hover { background: var(--color-border); color: var(--color-text); }
.ai-hero-mic-btn.ql-mic-active {
    background: #fee2e2;
    color: #dc2626;
    animation: mic-pulse 1s ease-in-out infinite;
}
@keyframes mic-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0.3); }
    50%       { box-shadow: 0 0 0 6px rgba(220,38,38,0); }
}

/* Dashboard tabs (manager) */
/* Two-card dashboard layout */
.dash-two-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: stretch;
}

.dash-card {
    background: var(--color-card);
    border-radius: 10px;
    border: 1px solid var(--color-border);
    padding: 24px;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.dash-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.dash-card-title {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: var(--color-text, #111827);
}

.dash-card-toggle {
    display: flex;
    background: var(--color-primary, #395D7F);
    border-radius: 100px;
    padding: 3px;
    gap: 2px;
}

.dash-toggle-btn {
    padding: 5px 14px;
    border-radius: 100px;
    border: none;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    color: #fff;
    background: transparent;
    transition: background .15s, color .15s;
}

.dash-toggle-btn.active {
    background: var(--color-accent, #88BC86);
    color: #fff;
    font-weight: 600;
}

.dash-card-panel {
    display: flex;
    flex-direction: column;
    gap: 30px;
    flex: 1;
}
#wb-team.dash-card-panel { gap: 4px; }

/* Stat cards */
.dash-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.dash-stat-card {
    background: #f8f9fb;
    border: 1px solid #e2e6ed;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: border-color .15s;
}
.dash-stat-ok       { background: #f0fdf4; border-color: #6ee7a0; }
.dash-stat-warn     { background: #fffbeb; border-color: #fcd34d; }
.dash-stat-bad      { background: #fef2f2; border-color: #fca5a5; }
.dash-stat-card.hs-great   { background: #f0fdf4; border-color: #4ade80; }
.dash-stat-card.hs-good    { background: #f0fdf4; border-color: #6ee7a0; }
.dash-stat-card.hs-neutral { background: #f8f9fb; border-color: #cbd5e1; }
.dash-stat-card.hs-tired   { background: #fffbeb; border-color: #fcd34d; }
.dash-stat-card.hs-stressed{ background: #fef2f2; border-color: #fca5a5; }

.dash-stat-value {
    font-size: 32px;
    font-weight: 800;
    color: var(--color-text);
    line-height: 1;
    letter-spacing: -1px;
}
.dash-stat-denom {
    font-size: 16px;
    font-weight: 400;
    color: var(--color-text-muted);
    letter-spacing: 0;
}

.dash-stat-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--color-text-muted);
    margin-top: 2px;
}

.dash-stat-sub {
    font-size: 11px;
    color: var(--color-text-muted);
    margin-top: 2px;
}

/* WellScore card colours */
.hs-great    { border-color: #86efac; background: #f0fdf4; }
.hs-good     { border-color: #93c5fd; background: #eff6ff; }
.hs-neutral  { border-color: #d8b4fe; background: #faf5ff; }
.hs-tired    { border-color: #fcd34d; background: #fffbeb; }
.hs-stressed { border-color: #fca5a5; background: #fef2f2; }

/* Main panels layout */
.dash-panels {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 16px;
    align-items: start;
}

.dash-right-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Equal-split panels — team dashboard 50/50 */
.dash-panels-equal {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
}
.dash-panels-equal .dash-right-col {
    height: 100%;
}
.dash-panels-equal .dash-right-col .dash-panel:last-child {
    flex: 1;
}

/* Panel card */
.dash-panel {
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
}

.dash-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 10px;
    border-bottom: none;
}

.dash-panel-header h3 {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.dash-panel-link {
    font-size: 12px;
    color: var(--color-accent);
    font-weight: 500;
    transition: color .15s;
}
.dash-panel-link:hover { color: var(--color-accent-dark); }

.entry-list-scroll {
    max-height: 312px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}
.entry-list-scroll::-webkit-scrollbar { width: 4px; }
.entry-list-scroll::-webkit-scrollbar-track { background: transparent; }
.entry-list-scroll::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 2px; }

#dash-recent-entries {
    position: relative;
}
/* Fade gradient only when the inner list actually overflows. JS toggles
   .is-overflowing on the scroll element when scrollHeight > clientHeight
   (see dashboard/hero.blade.php). Without the gate the fade washed out
   short single-row lists. */
#dash-recent-entries:has(.entry-list-scroll.is-overflowing)::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 68px;
    background: linear-gradient(to bottom, transparent, var(--color-surface, #fff));
    pointer-events: none;
    border-radius: 0 0 10px 10px;
}

.dash-panel .entry-list,
.daily-card .entry-list { border-radius: 0; border: none; }
.dash-panel .entry-item,
.daily-card .entry-item { border-radius: 0; border-left: none; border-right: none; border-top: none; }
.dash-panel .entry-item:first-child,
.daily-card .entry-item:first-child { border-top: none; }

.dash-panel-footer-link {
    display: block;
    text-align: center;
    font-size: 13px;
    color: var(--color-accent);
    font-weight: 500;
    padding: 12px;
    border-top: 1px solid var(--color-border);
    transition: background .15s;
}
.dash-panel-footer-link:hover { background: rgba(0,0,0,.03); }

.dash-panel-empty {
    font-size: 13px;
    color: var(--color-text-muted);
    padding: 16px 18px;
}

/* Overdue list */
.dash-overdue-list {
    list-style: none;
    padding: 8px 0;
}

.dash-overdue-item {
    padding: 10px 18px;
    border-bottom: 1px solid var(--color-border);
}
.dash-overdue-item:last-child { border-bottom: none; }

.dash-overdue-name {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 2px;
}

.dash-overdue-meta {
    font-size: 12px;
    color: var(--color-text-muted);
}

/* Quick links */
.quick-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 18px;
}

.quick-link {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text);
    padding: 6px 12px;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    background: var(--color-surface);
    transition: background .15s, border-color .15s, color .15s;
    text-decoration: none;
    white-space: nowrap;
}
.quick-link:hover { background: #f0f0f5; border-color: #c8c8d8; }

/* =========================================
   Monthly Calendar
   ========================================= */

.month-calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 16px;
}

.month-day-header {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--color-text-muted);
    padding: 6px 0;
}

.month-cell {
    min-height: 80px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: border-color .15s;
}
.month-cell:hover    { border-color: #c8c8d8; }
/* When the whole cell is wrapped in <a>, reset link colors + cursor so it
   reads like a date tile and not a hyperlink. The hover ring above gives
   the click affordance the user needs. */
.month-cell-link     { text-decoration: none; color: inherit; cursor: pointer; }
.month-cell-link:hover { background: #f5f7fb; border-color: var(--color-accent); }
.month-cell-empty    { background: transparent; border-color: transparent; }
.month-cell-future   { background: #fafafa; }
.month-cell-today    { border-color: var(--color-accent); box-shadow: 0 0 0 2px rgba(91,106,240,.1); }

.heat-light { background: #f0fdf4; border-color: #bbf7d0; }
.heat-half  { background: #dcfce7; border-color: #86efac; }
.heat-full  { background: #bbf7d0; border-color: #4ade80; }

.month-day-num {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background .15s;
    text-decoration: none;
    flex-shrink: 0;
}
.month-day-num:hover    { background: rgba(0,0,0,.06); }
.month-day-num-today    { background: var(--color-accent) !important; color: #fff; }

.month-hours {
    font-size: 12px;
    font-weight: 600;
    color: #166534;
}

.month-reactions {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
    margin-top: auto;
}

.happiness-score { color: #16a34a; }

.month-legend {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: 4px;
}
.legend-item { display: flex; align-items: center; gap: 5px; }
.legend-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    border: 1px solid rgba(0,0,0,.08);
}
.heat-light-swatch { background: #f0fdf4; border-color: #bbf7d0; }
.heat-half-swatch  { background: #dcfce7; border-color: #86efac; }
.heat-full-swatch  { background: #bbf7d0; border-color: #4ade80; }
.legend-sep { color: var(--color-border); }


/* ============================================================
   REPORTS
   ============================================================ */

/* Sub-navigation tabs */
.report-subnav {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--color-border);
    padding-bottom: 0;
}
.report-subnav-link {
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-secondary);
    text-decoration: none;
    border-radius: 6px 6px 0 0;
    border: 2px solid transparent;
    border-bottom: none;
    margin-bottom: -2px;
    transition: color 0.15s;
}
.report-subnav-link:hover {
    color: var(--color-text);
}
.report-subnav-link.active {
    color: var(--color-accent);
    border-color: var(--color-border);
    border-bottom-color: var(--color-surface);
    background: var(--color-surface);
}

/* Filter bar */
.report-filter-bar {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 20px;
}
.filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.filter-group label {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Summary bar */
.report-summary-bar {
    display: flex;
    gap: 24px;
    align-items: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 14px 20px;
    margin-bottom: 20px;
    font-size: 14px;
    color: var(--color-text-secondary);
    flex-wrap: wrap;
}
.report-summary-bar strong {
    color: var(--color-text);
}

/* Per-user blocks (hours report) */
.report-user-block {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
}
.report-user-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg);
}
.report-user-name {
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}
.report-user-meta {
    font-size: 14px;
    color: var(--color-text-secondary);
}
.report-inner-table {
    border-radius: 0;
    border: none;
    margin: 0;
}
/* Specificity bump: .daily-card .data-table-wrap (line 1605) sets negative
   side margins to bleed a top-level table to the card edges, but that rule
   also matches inner report tables nested two levels deep inside .daily-card
   and visibly clipped them against .report-user-block's overflow:hidden.
   Anchoring both selectors here wins the cascade and keeps inner tables flush. */
.daily-card .data-table-wrap.report-inner-table {
    margin: 0;
}
.report-inner-table .data-table {
    border-radius: 0;
}

/* Direct-reports picker on the admin edit-employee form. Scroll-locked
   list of checkboxes so 60+ candidates don't blow the form's height.
   Selectors chain .reports-picker__row inside .reports-picker so they
   outrank the more-specific .form-group label + .form-group input rules
   from line ~552-571 that would otherwise block-stack the label, hide
   the flex layout, and stretch the checkbox to 100% width. */
.reports-picker {
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 6px 8px;
    background: #fff;
}
.reports-picker .reports-picker__row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 6px;
    margin: 0;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text);
}
.reports-picker .reports-picker__row:hover { background: #f5f5f2; }
.reports-picker .reports-picker__row input[type="checkbox"] {
    width: auto;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
    cursor: pointer;
}
.reports-picker .reports-picker__name { flex: 1; min-width: 0; }
.reports-picker .reports-picker__hint {
    margin-left: auto;
    font-size: 12px;
    color: var(--color-text-muted);
    font-style: italic;
    white-space: nowrap;
}

/* Mini progress bars */
.mini-bar-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}
.mini-bar {
    height: 8px;
    border-radius: 4px;
    background: var(--color-accent);
    min-width: 2px;
    flex-shrink: 0;
}
.mini-bar-pct {
    font-size: 12px;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

/* Severity badges (overtime) */
.severity-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}
.severity-low {
    background: #e8f5e9;
    color: #2e7d32;
}
.severity-medium {
    background: #fff8e1;
    color: #f57f17;
}
.severity-high {
    background: #ffebee;
    color: #c62828;
}
.row-warning {
    background: #fff8f8;
}
.row-warning:hover {
    background: #ffeded !important;
}
.text-danger {
    color: #c62828;
}

/* Trend bars (wellbeing weekly chart) */
.report-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 20px;
}
.report-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin: 0 0 16px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.trend-bars {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 100px;
}
.trend-bar-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1;
}
.trend-bar-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-secondary);
}
.trend-bar-wrap {
    width: 100%;
    height: 64px;
    display: flex;
    align-items: flex-end;
    background: var(--color-bg);
    border-radius: 4px;
    overflow: hidden;
}
.trend-bar {
    width: 100%;
    border-radius: 4px 4px 0 0;
    transition: height 0.3s;
}
.hs-great-bar  { background: #43a047; }
.hs-good-bar   { background: #7cb342; }
.hs-neutral-bar{ background: #fdd835; }
.hs-tired-bar  { background: #fb8c00; }
.hs-stressed-bar{ background: #e53935; }
.trend-bar-date {
    font-size: 10px;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

/* WellScore cell */
.hs-score-cell {
    display: inline-block;
    font-weight: 700;
    font-size: 15px;
    padding: 4px 10px;
    border-radius: 8px;
}
.hs-great   { color: #2e7d32; background: #e8f5e9; }
.hs-good    { color: #558b2f; background: #f1f8e9; }
.hs-neutral { color: #f57f17; background: #fff8e1; }
.hs-tired   { color: #e65100; background: #fff3e0; }
.hs-stressed{ color: #c62828; background: #ffebee; }

/* Status badges for hs — class is status-hs-{hsClass} where hsClass = hs-great etc */
.status-badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.status-hs-hs-great   { background: #e8f5e9; color: #2e7d32; }
.status-hs-hs-good    { background: #f1f8e9; color: #558b2f; }
.status-hs-hs-neutral { background: #fff8e1; color: #f57f17; }
.status-hs-hs-tired   { background: #fff3e0; color: #e65100; }
.status-hs-hs-stressed { background: #ffebee; color: #c62828; }

/* Reaction breakdown */
.reaction-breakdown {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.rb-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    cursor: default;
}

/* Reaction badges (shared) */
.reaction-badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.reaction-badge-up   { background: #e8f5e9; color: #2e7d32; }
.reaction-badge-down { background: #ffebee; color: #c62828; }

/* Mini-bar colour variants (break compliance) */
.mini-bar-good { background: #43a047; }
.mini-bar-mid  { background: #fb8c00; }
.mini-bar-low  { background: #e53935; }

/* ============================================================
   BREAK LOGGING (daily timesheet)
   ============================================================ */
.break-section {
    margin-top: 28px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 20px;
}
.break-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.break-section-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    color: var(--color-text);
}
.break-section-total {
    font-size: 13px;
    color: var(--color-text-secondary);
    background: var(--color-bg);
    padding: 2px 10px;
    border-radius: 20px;
    border: 1px solid var(--color-border);
}
.break-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}
.break-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 14px;
}
.break-time {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text);
}
.break-duration {
    font-size: 12px;
    color: var(--color-text-secondary);
    background: var(--color-surface);
    padding: 1px 8px;
    border-radius: 10px;
    border: 1px solid var(--color-border);
}
.break-in-progress {
    font-size: 12px;
    color: var(--color-accent);
    font-style: italic;
}
.break-empty {
    font-size: 13px;
    color: var(--color-text-secondary);
    margin: 0 0 16px;
}
.break-form {
    border-top: 1px solid var(--color-border);
    padding-top: 16px;
    margin-top: 4px;
}
.break-form-row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}
.break-form-submit {
    align-self: flex-end;
}

/* ============================================================
   BURNTRACK™ CARD (manager team dashboard)
   ============================================================ */

/* Employee avatar selector */
/* bt-selector, bt-avatar-btn, bt-avatar, bt-name removed — replaced by #bt-member-select dropdown */

/* Per-employee gauge panel */
.bt-panel {
    padding: 0;
}
.bt-gauge-row  { display: flex; align-items: center; gap: 20px; padding: 16px 20px 20px; }
.bt-gauge-wrap { flex: 0 0 auto; width: 240px; }
.bt-gauge-svg  { width: 100%; display: block; }
.bt-signals-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.bt-drivers    { min-width: 0; margin-top: 0; }
.bt-drivers-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--color-text-secondary);
    margin-bottom: 8px;
}
.bt-driver-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--color-text);
    padding: 7px 10px;
    border-radius: 8px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    margin-bottom: 6px;
    line-height: 1.35;
}
.bt-driver-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.bt-drivers-clear .bt-driver-chip {
    color: #3d7a3d;
    background: rgba(135,188,135,0.1);
    border-color: rgba(135,188,135,0.3);
}
.bt-drivers-cool .bt-driver-chip {
    color: #3d7a3d;
    background: rgba(135,188,135,0.08);
    border-color: rgba(135,188,135,0.25);
}
.bt-drivers-label-cool {
    color: #3d7a3d;
}

/* ============================================================
   SETTINGS
   ============================================================ */
.settings-subnav {
    display: flex;
    gap: 4px;
    margin-bottom: 24px;
    border-bottom: 2px solid var(--color-border);
    padding-bottom: 0;
}
.settings-subnav-link {
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-secondary);
    text-decoration: none;
    border-radius: 6px 6px 0 0;
    border: 2px solid transparent;
    border-bottom: none;
    margin-bottom: -2px;
    transition: color 0.15s;
}
.settings-subnav-link:hover { color: var(--color-text); }
.settings-subnav-link.active {
    color: var(--color-accent);
    border-color: var(--color-border);
    border-bottom-color: var(--color-surface);
    background: var(--color-surface);
}

.settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}
.settings-grid-narrow {
    grid-template-columns: 480px;
}
.settings-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 24px;
}
.settings-card-title {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    margin: 0 0 20px;
}
.settings-card-desc {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin: -12px 0 20px;
    line-height: 1.6;
}
/* Notification rules list (settings/notifications) */
.notif-rule-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-top: 16px;
}
.notif-rule-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}
.notif-rule-item:last-child { border-bottom: none; }
.notif-rule-item:nth-child(even) { background: #fafafa; }
.notif-rule-main { flex: 1; min-width: 0; }
.notif-rule-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 2px;
}
.notif-rule-trigger {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-bottom: 4px;
}
.notif-rule-msg {
    font-size: 13px;
    color: var(--color-text);
    line-height: 1.5;
    margin-top: 4px;
}
.notif-rule-resolution {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: 4px;
    font-style: italic;
}
.notif-rule-badges {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}
.notif-rule-channel,
.notif-rule-escalation,
.notif-rule-type {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}
.notif-rule-channel {
    background: #eff6ff;
    color: #1d4ed8;
}
.notif-rule-escalation {
    background: #fff7ed;
    color: #c2410c;
}
.notif-rule-type {
    background: #f0fdf4;
    color: #15803d;
}

.settings-readonly {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
}
.settings-readonly-note {
    font-size: 13px;
    color: var(--color-text-secondary);
}
.settings-info-box {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 14px;
    color: var(--color-text-secondary);
    margin-bottom: 20px;
}
.hours-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}
.hours-input {
    width: 100px;
}
.hours-input-unit {
    font-size: 14px;
    color: var(--color-text-secondary);
}
.field-error {
    font-size: 13px;
    color: #c62828;
    margin-top: 4px;
}

/* ============================================================
   ADMIN PANEL
   ============================================================ */
.admin-greeting {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-accent);
    border-radius: 10px;
    padding: 18px 22px;
    margin-bottom: 20px;
}

.admin-greeting-hello {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 5px;
    letter-spacing: -.2px;
}

.admin-greeting-insight {
    font-size: 14px;
    color: var(--color-text-muted);
    line-height: 1.55;
    margin: 0;
}

.admin-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
.admin-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.admin-stat-card {
    background: var(--color-bg);
    border: 1px solid #ddd8cf;
    border-radius: 12px;
    padding: 22px 16px;
    text-align: center;
}
@media (max-width: 640px) {
    .admin-stat-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .admin-stat-card { padding: 14px 12px; }
    .admin-stat-card .wb-stat-value { font-size: 26px; }
    .admin-stat-card .wb-stat-label { font-size: 10px; margin-top: 4px; }
}
.admin-stat-value {
    font-size: 32px;
    font-weight: 800;
    color: var(--color-text);
    line-height: 1;
    margin-bottom: 6px;
}
.admin-stat-label {
    font-size: 13px;
    color: var(--color-text-secondary);
    font-weight: 500;
}
.admin-quick-actions {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 20px 24px;
}
.row-editing {
    background: #f0f4ff;
}
.row-editing:hover {
    background: #e8eeff !important;
}

@media (max-width: 768px) {
    .settings-grid        { grid-template-columns: 1fr; }
    .settings-grid-narrow { grid-template-columns: 1fr; }
    .admin-stats          { grid-template-columns: repeat(2, 1fr); }
    .settings-subnav      { flex-wrap: wrap; gap: 2px; }
    .branding-grid        { grid-template-columns: 1fr; }

}

/* ============================================================
   BRANDING PAGE
   ============================================================ */
.branding-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}

/* Color input pair */
.color-fields {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.color-field-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.color-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}
.color-swatch-input {
    width: 44px;
    height: 36px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 2px;
    cursor: pointer;
    background: none;
    flex-shrink: 0;
}
.color-hex-input {
    font-family: monospace;
    font-size: 14px;
    width: 110px;
    padding: 6px 10px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-bg, #fff);
    color: var(--color-text, #111);
    outline: none;
}
.color-hex-input:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(91,106,240,.1);
}

/* Current logo */
.current-logo-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
    padding: 10px 14px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}
.current-logo-preview {
    max-height: 40px;
    max-width: 140px;
    object-fit: contain;
}
.remove-logo-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #c62828;
    cursor: pointer;
}
.file-input {
    padding: 6px 8px;
    font-size: 13px;
}

/* Live preview panel */
.branding-preview {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    overflow: hidden;
    margin-top: 20px;
}
.preview-topnav {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 14px;
    background: #fff;
    border-bottom: 1px solid var(--color-border);
}
.preview-topnav-brand {
    font-weight: 700;
    font-size: 12px;
    color: #111;
    white-space: nowrap;
    margin-right: 4px;
}
.preview-topnav-links {
    display: flex;
    gap: 4px;
}
.preview-tnav-link {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 100px;
    transition: color 0.2s;
}
.preview-tnav-active {
    background: var(--color-accent);
    color: #fff !important;
}
.preview-logo {
    max-height: 20px;
    max-width: 80px;
    object-fit: contain;
}
.preview-tabs {
    display: flex;
    gap: 2px;
    padding: 3px;
    transition: background 0.2s;
}
.preview-tab-btn {
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    padding: 3px 10px;
    border-radius: 100px;
}
.preview-tab-active {
    background: rgba(255,255,255,0.25);
}
.preview-main {
    flex: 1;
    background: var(--color-bg, #f5f5f5);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.preview-btn {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    width: fit-content;
    transition: background 0.2s;
}
.preview-text {
    font-size: 11px;
    color: var(--color-text-muted);
}

/* ── Daily timesheet: task & billable in entry list ─────────────────── */
.entry-task {
    display: inline-block;
    font-size: 11px;
    color: var(--color-text-secondary);
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 1px 6px;
    margin-left: 6px;
}

/* ── Billable row in timesheet form ──────────────────────────────────── */
#billable-row {
    margin-top: -4px;
}
.task-billable-check {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--color-text);
    cursor: pointer;
    padding: 6px 0;
    user-select: none;
}
.task-billable-check input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: var(--color-accent);
    cursor: pointer;
}

/* ── Project variety badges ──────────────────────────────────────────── */
.variety-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}
.variety-good { background: #d1fae5; color: #065f46; }
.variety-ok   { background: #fef9c3; color: #854d0e; }
.variety-low  { background: #fee2e2; color: #991b1b; }

.report-card-sub {
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════
   NOTIFICATION RULES ADMIN
   ═══════════════════════════════════════════════════════════════════════ */

/* Philosophy banner */
.notif-philosophy {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: linear-gradient(135deg, #eef2ff 0%, #f0fdf4 100%);
    border: 1px solid #c7d2fe;
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 24px;
    font-size: 13px;
    color: var(--color-text);
    line-height: 1.6;
}
.notif-philosophy-icon {
    font-size: 22px;
    flex-shrink: 0;
    margin-top: 1px;
}

/* Group header */
.notif-group {
    margin-bottom: 28px;
}
.notif-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.notif-group-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: 10px;
}
.notif-group-count {
    font-size: 12px;
    color: var(--color-text-secondary);
}

/* Rule type pill */
.notif-type-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}
.notif-type-employee { background: #dbeafe; color: #1e40af; }
.notif-type-manager  { background: #ede9fe; color: #5b21b6; }

/* Rule card */
.notif-rule-card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    transition: opacity 0.2s;
}
.notif-rule-inactive {
    opacity: 0.55;
}
.notif-rule-main {
    flex: 1;
    min-width: 0;
}
.notif-rule-identity {
    margin-bottom: 10px;
}
.notif-rule-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.notif-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
}
.notif-badge-off { background: #f3f4f6; color: #6b7280; }

/* Meta row */
.notif-rule-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: var(--color-text-secondary);
}
.notif-meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
}
.notif-meta-label {
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.04em;
}

/* Escalation tags */
.notif-escalation-tag {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
}
.notif-esc-manager  { background: #dbeafe; color: #1e40af; }
.notif-esc-hr       { background: #fef9c3; color: #854d0e; }
.notif-esc-admin    { background: #fee2e2; color: #991b1b; }
.notif-esc-positive { background: #d1fae5; color: #065f46; }
.notif-esc-none     { background: #f3f4f6; color: #6b7280; }

/* Message previews */
.notif-message-preview {
    border-radius: 7px;
    padding: 10px 14px;
    margin-top: 8px;
}
.notif-msg-employee {
    background: #f0fdf4;
    border-left: 3px solid #4ade80;
}
.notif-msg-manager {
    background: #fef9c3;
    border-left: 3px solid #facc15;
}
.notif-msg-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    display: block;
    margin-bottom: 4px;
}
.notif-msg-text {
    font-size: 12px;
    color: var(--color-text);
    line-height: 1.5;
    margin: 0;
    font-style: italic;
}

/* Rule actions */
.notif-rule-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}

/* Form */
.notif-form-card {
    margin-bottom: 28px;
}
.notif-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-bottom: 20px;
}
@media (max-width: 860px) {
    .notif-form-grid { grid-template-columns: 1fr; }
}
.notif-form-section {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
    margin: 0 0 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border);
}
.notif-form-hint {
    font-size: 12px;
    color: var(--color-text-secondary);
    margin: -8px 0 16px;
    line-height: 1.5;
}
.notif-form-hint code {
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 11px;
}

/* Message label tags */
.notif-label-tag {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-left: 6px;
    vertical-align: middle;
}
.notif-tag-nudge  { background: #d1fae5; color: #065f46; }
.notif-tag-action { background: #fef9c3; color: #854d0e; }

/* Radio group */
.radio-group {
    display: flex;
    gap: 16px;
}
.radio-option {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    cursor: pointer;
}
.radio-option input[type="radio"] {
    accent-color: var(--color-accent);
    width: 15px;
    height: 15px;
}

/* ═══════════════════════════════════════════════════════════════════════
   CLIENTS & TASKS HIERARCHY  (Admin → Clients & Tasks)
   ═══════════════════════════════════════════════════════════════════════ */

/* Client block */
.hierarchy-client {
    background: var(--color-card);
    border: 1px solid var(--color-accent);
    border-radius: 12px;
    margin-bottom: 20px;
    overflow: hidden;
}
.hierarchy-client-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: color-mix(in srgb, var(--color-accent) 6%, var(--color-card));
    border-bottom: 1px solid var(--color-border);
    gap: 12px;
}
.hierarchy-client-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text);
}
.hierarchy-count {
    font-size: 11px;
    color: var(--color-text-secondary);
    margin-left: 10px;
}

/* Project block (nested inside client) */
.hierarchy-project {
    border-top: 1px solid var(--color-border);
}
.hierarchy-project-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px 10px 32px;
    background: var(--color-bg-alt);
    gap: 12px;
}
.hierarchy-project-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.hierarchy-project-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
}

/* Tasks container */
.hierarchy-tasks {
    padding: 0 20px 12px 48px;
}
.hierarchy-task-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
}
.hierarchy-task-row:last-of-type {
    border-bottom: none;
}
.hierarchy-task-inactive {
    opacity: 0.5;
}
.hierarchy-task-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    flex: 1;
    min-width: 120px;
}
.hierarchy-task-desc {
    font-size: 11px;
    color: var(--color-text-secondary);
    margin-top: 2px;
}

/* Task meta row (billable, archived badges) */
.task-item-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* Task badges */
.task-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.task-billable    { background: #d1fae5; color: #065f46; }
.task-nonbillable { background: #f3f4f6; color: #6b7280; }
.task-archived    { background: #fef9c3; color: #92400e; }

/* Empty state inside tasks */
.task-empty {
    font-size: 12px;
    color: var(--color-text-secondary);
    padding: 8px 0;
    margin: 0;
    font-style: italic;
}

/* Project + Tasks block (manage page) */
.project-task-block {
    border-bottom: 1px solid var(--color-border);
    padding: 14px 0;
}
.project-task-block:last-child { border-bottom: none; }
.project-task-block-open { background: transparent; }
.project-task-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.project-task-name {
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.project-task-meta {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: 3px;
}
.task-panel {
    margin-top: 12px;
    padding: 12px 0 0 16px;
    border-left: 2px solid var(--color-border);
}
.task-list { display: flex; flex-direction: column; gap: 6px; }
.task-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border);
}
.task-item:last-child { border-bottom: none; }
.task-item-info { flex: 1; min-width: 0; }
.task-item-name { font-size: 13px; font-weight: 600; }
.task-item-desc { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }
.task-inactive { opacity: 0.5; }

/* Inline task-add form */
.task-add-form {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--color-border);
}
.task-add-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.task-add-row .form-control {
    padding: 6px 10px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 12px;
    outline: none;
}
.task-add-row .form-control:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(91,106,240,.1);
}
.task-rate-input {
    width: 80px !important;
}

/* ═══════════════════════════════════════════════════════
   EMPLOYEE DASHBOARD — two-column layout
   ═══════════════════════════════════════════════════════ */
.dash-card .bt-fill {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.dash-mini-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.dash-mini-stat {
    background: #f8f9fb;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.dash-mini-stat.dash-stat-ok   { background: #f0fdf4; }
.dash-mini-stat.dash-stat-warn { background: #fffbeb; }
.dash-mini-stat.dash-stat-bad  { background: #fef2f2; }

/* WellScore insight strip (inside panel, below score display) */
.dash-wellscore-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 10px;
}
.dash-wellscore-insight {
    display: flex;
    align-items: center;
    flex: 1;
    padding: 12px 14px;
    border-radius: 8px;
    background: color-mix(in srgb, #22c55e 7%, var(--color-card));
    border: 1px solid color-mix(in srgb, #22c55e 20%, transparent);
}
.dash-wellscore-insight-inner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.dash-wellscore-insight-icon {
    font-size: 20px;
    flex-shrink: 0;
    line-height: 1;
    padding-top: 1px;
}
.dash-wellscore-insight-title {
    font-weight: 700;
    font-size: 13px;
    color: var(--color-text);
    margin-bottom: 3px;
}
.dash-wellscore-insight-text {
    font-size: 12px;
    color: var(--color-text-muted);
    line-height: 1.5;
}

/* Positive notification card */
.dash-notif-card {
    display: flex;
    gap: 14px;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
    border: 1px solid transparent;
}
.dash-notif-positive {
    background: color-mix(in srgb, #22c55e 8%, var(--color-card));
    border-color: color-mix(in srgb, #22c55e 25%, transparent);
}
.dash-notif-icon {
    font-size: 24px;
    flex-shrink: 0;
    line-height: 1;
    padding-top: 2px;
}
.dash-notif-title {
    font-weight: 700;
    font-size: 14px;
    color: var(--color-text);
    margin-bottom: 4px;
}
.dash-notif-text {
    font-size: 13px;
    color: var(--color-text-muted);
    line-height: 1.5;
}
.dash-notif-source {
    font-size: 11px;
    color: var(--color-text-muted);
    margin-top: 8px;
    opacity: .7;
}

/* WellScore display inside panel */
.dash-hs-display {
    padding: 16px 24px;
    text-align: center;
    flex-shrink: 0;
    min-width: 130px;
    border-radius: 10px;
}
.dash-hs-display .dash-stat-value { font-size: 36px; }
.dash-hs-display .dash-stat-label { font-size: 13px; margin-top: 2px; }
.dash-hs-display .dash-stat-sub   { font-size: 11px; margin-top: 4px; }

/* WellScore hero — match BurnTrack gauge visual weight */
.dash-wellscore-row .dash-hs-display {
    width: 240px;
    padding: 28px 24px;
}
.dash-wellscore-row .dash-hs-display .dash-stat-value { font-size: 52px; letter-spacing: -2px; }

/* BurnTrack signal (employee view) */
.dash-burntrack-signal {
    border-radius: 8px;
    padding: 12px 14px;
    margin-top: 4px;
    margin-bottom: 4px;
}
.dash-burntrack-ok      { background: color-mix(in srgb, #22c55e 8%, var(--color-card));  border-left: 3px solid #22c55e; }
.dash-burntrack-caution { background: color-mix(in srgb, #f59e0b 8%, var(--color-card));  border-left: 3px solid #f59e0b; }
.dash-burntrack-risk    { background: color-mix(in srgb, #ef4444 8%, var(--color-card));  border-left: 3px solid #ef4444; }
.dash-burntrack-signal .burntrack-name { font-weight: 600; font-size: 13px; margin-bottom: 3px; }
.dash-burntrack-signal .burntrack-meta { font-size: 12px; color: var(--color-text-muted); }
.dash-burntrack-signal a { color: var(--color-accent); }

/* ═══════════════════════════════════════════════════════
   WELL-BEING DASHBOARD (balance page)
   ═══════════════════════════════════════════════════════ */
.wb-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}
.wb-stat-card {
    background: #f8f9fb;
    border: 1px solid #e2e6ed;
    border-radius: 12px;
    padding: 18px 16px;
    text-align: center;
}
.wb-stat-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1;
}
.wb-stat-denom {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-muted);
}
.wb-stat-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-top: 6px;
}
.wb-stat-sub {
    font-size: 11px;
    color: var(--color-text-muted);
    margin-top: 4px;
}
/* hs-* state colours for wb-stat-card */
.wb-stat-card.hs-great   { background: #f0fdf4; border-color: #4ade80; }
.wb-stat-card.hs-good    { background: #f0fdf4; border-color: #6ee7a0; }
.wb-stat-card.hs-neutral { background: #f8f9fb; border-color: #cbd5e1; }
.wb-stat-card.hs-tired   { background: #fffbeb; border-color: #fcd34d; }
.wb-stat-card.hs-stressed{ background: #fef2f2; border-color: #fca5a5; }

/* Well-being redesign — card grid replacing .wb-panels */
.wb-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
@media (max-width: 700px) {
    .wb-cards-grid { grid-template-columns: 1fr; }
}

/* 5-col and 4-col stat overrides for well-being stats row */
.wb-stats-5col { grid-template-columns: repeat(5, 1fr); }
.wb-stats-4col { grid-template-columns: repeat(4, 1fr); }
/* On phone the multi-col scorecards squeeze labels until they clip
   ("WELLSCOR…"). Collapse back to a 2-col grid below 720px. */
@media (max-width: 720px) {
    .wb-stats-5col,
    .wb-stats-4col {
        grid-template-columns: repeat(2, 1fr);
    }
    .dash-mini-stat { padding: 14px; }
}

/* hs-* colours for dash-mini-stat (well-being stats) */
.dash-mini-stat.hs-great    { background: #f0fdf4; }
.dash-mini-stat.hs-good     { background: #f0fdf4; }
.dash-mini-stat.hs-neutral  { background: #f8f9fb; }
.dash-mini-stat.hs-tired    { background: #fffbeb; }
.dash-mini-stat.hs-stressed { background: #fef2f2; }

/* Secondary nav links in well-being header bar */
.wb-header-link {
    font-size: 0.85rem;
    color: var(--text-muted, #6b7280);
    text-decoration: none;
    white-space: nowrap;
}
.wb-header-link:hover { color: var(--accent-color); }

/* dash-stat-denom — small unit label inside stat value */
.dash-stat-denom {
    font-size: 0.6em;
    font-weight: 400;
    margin-left: 2px;
}

.wb-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.wb-panel {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 20px;
}
.wb-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.wb-panel-header h3 {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
}
.wb-panel-sub {
    font-size: 11px;
    color: var(--color-text-muted);
}
.wb-panel-link {
    font-size: 12px;
    color: var(--color-accent);
    text-decoration: none;
}
.wb-panel-link-sm {
    font-size: 11px;
    color: var(--color-accent);
    text-decoration: none;
}
.wb-empty {
    font-size: 13px;
    color: var(--color-text-muted);
    padding: 8px 0;
}

/* Bar chart */
.wb-bar-chart {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    height: 100px;
    margin-bottom: 8px;
}
.wb-bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}
.wb-bar-wrap {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
}
.wb-bar {
    width: 100%;
    border-radius: 4px 4px 0 0;
    min-height: 2px;
    background: var(--color-border);
    transition: height .3s;
}
.wb-bar-ok   { background: var(--color-accent); }
.wb-bar-over { background: #ef4444; }
.wb-bar-label { font-size: 11px; color: var(--color-text-muted); margin-top: 4px; }
.wb-bar-val   { font-size: 10px; color: var(--color-text-muted); }

/* Mood bars */
.wb-mood-list { display: flex; flex-direction: column; gap: 8px; }
.wb-mood-row  {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    border-radius: 6px;
    padding: 2px 4px;
    margin: 0 -4px;
    transition: background .15s ease;
    outline: none;
}
.wb-mood-row:hover,
.wb-mood-row:focus-visible,
.wb-mood-row.is-tooltip-open { background: rgba(57, 93, 127, 0.04); cursor: default; }
.wb-mood-emoji { font-size: 16px; width: 20px; text-align: center; }
.wb-mood-label { font-size: 12px; width: 56px; color: var(--color-text-muted); }
.wb-mood-bar-wrap { flex: 1; height: 8px; background: var(--color-border); border-radius: 4px; overflow: hidden; }
.wb-mood-bar  { height: 100%; border-radius: 4px; }
.wb-mood-up   { background: #22c55e; }
.wb-mood-down { background: #ef4444; }
.wb-mood-pct { font-size: 11px; color: var(--color-text-muted); width: 30px; text-align: right; }

/* One-line legend explaining the sparkline-vs-score distinction. */
.wb-mood-legend {
    font-size: 11.5px;
    color: var(--color-text-muted);
    line-height: 1.5;
    margin: 4px 0 10px;
}

/* Heartbeat — animate the sparkline SVG inside a hovered/focused row.
   Cardiac rhythm: quick double-pulse + pause, looping at ~55 bpm. */
@keyframes mood-heartbeat {
    0%, 40%, 100% { transform: scale(1); }
    10%           { transform: scale(1.18); }
    20%           { transform: scale(1); }
    30%           { transform: scale(1.10); }
}
.wb-mood-row .sparkline-svg {
    transform-origin: center;
    transition: transform .2s ease;
    will-change: transform;
}
.wb-mood-row:hover .sparkline-svg,
.wb-mood-row:focus-visible .sparkline-svg,
.wb-mood-row.is-tooltip-open .sparkline-svg {
    animation: mood-heartbeat 1.1s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .wb-mood-row:hover .sparkline-svg,
    .wb-mood-row:focus-visible .sparkline-svg,
    .wb-mood-row.is-tooltip-open .sparkline-svg { animation: none; }
}

/* Hover tooltip — explains the score's top drivers + trend.
   Position: fixed so it escapes ancestor overflow (e.g., the
   dashboard's .bt-team-scroll). JS sets top/left on open, picking
   right of row, then left, then below — whichever fits the viewport. */
.wb-mood-tooltip {
    position: fixed;
    top: 0;
    left: 0;
    width: 260px;
    padding: 12px 14px;
    background: var(--color-card, #fff);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(12, 24, 51, 0.12);
    z-index: 50;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--color-text);
}
.wb-mood-row:hover .wb-mood-tooltip,
.wb-mood-row:focus-visible .wb-mood-tooltip,
.wb-mood-row.is-tooltip-open .wb-mood-tooltip {
    opacity: 1;
    pointer-events: auto;
}
.wb-mood-tooltip__head {
    font-weight: 700;
    font-size: 13px;
    color: var(--color-text);
    margin-bottom: 8px;
}
.wb-mood-tooltip__factors {
    list-style: none;
    margin: 0 0 6px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.wb-mood-tooltip__factors li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 12px;
}
.wb-mood-tooltip__factors li span { color: var(--color-text-secondary); }
.wb-mood-tooltip__factors li strong {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--color-text);
}
.wb-mood-tooltip__clear {
    font-size: 12px;
    color: #16a34a;
    margin: 0 0 6px;
}
.wb-mood-tooltip__trend {
    font-size: 11.5px;
    color: var(--color-text-secondary);
    margin: 6px 0 0;
    padding-top: 6px;
    border-top: 1px solid var(--color-border);
}
.wb-mood-tooltip__note {
    font-size: 10.5px;
    color: var(--color-text-muted);
    line-height: 1.5;
    margin: 8px 0 0;
    padding-top: 6px;
    border-top: 1px solid var(--color-border);
}

/* Break list in balance panel */
.wb-break-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.wb-break-item { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.wb-break-date { color: var(--color-text-muted); width: 72px; flex-shrink: 0; }
.wb-break-time { color: var(--color-text); }
.wb-break-dur  { margin-left: auto; font-weight: 600; color: var(--color-accent); font-size: 11px; }
.wb-break-total { font-size: 12px; color: var(--color-text-muted); margin-top: 12px; border-top: 1px solid var(--color-border); padding-top: 8px; }

/* Balance signals */
.wb-signal-panel {}
.wb-signals { display: flex; flex-direction: column; gap: 10px; }
.wb-signal  { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; padding: 10px 12px; border-radius: 8px; }
.wb-signal-icon { flex-shrink: 0; font-weight: 700; }
.wb-signal-good    { background: color-mix(in srgb, #22c55e 8%, var(--color-card)); color: var(--color-text); }
.wb-signal-caution { background: color-mix(in srgb, #f59e0b 8%, var(--color-card)); color: var(--color-text); }
.wb-signal-warn    { background: color-mix(in srgb, #ef4444 8%, var(--color-card)); color: var(--color-text); }
.wb-resource-link { font-size: 12px; color: var(--color-accent); text-decoration: none; }
.wb-resource-link:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════
   BREAK COMPLIANCE PAGE
   ═══════════════════════════════════════════════════════ */
.wb-compliance-history { display: flex; flex-direction: column; gap: 16px; }
.wb-compliance-day {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    overflow: hidden;
}
.wb-compliance-day-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: color-mix(in srgb, var(--color-accent) 4%, var(--color-card));
    border-bottom: 1px solid var(--color-border);
}
.wb-compliance-day-label { font-weight: 600; font-size: 13px; color: var(--color-text); }
.wb-compliance-day-total { font-size: 12px; color: var(--color-text-muted); display: flex; align-items: center; gap: 8px; }
.wb-compliance-badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 12px; }
.wb-badge-ok  { background: color-mix(in srgb, #22c55e 15%, transparent); color: #16a34a; }
.wb-badge-low { background: color-mix(in srgb, #f59e0b 15%, transparent); color: #b45309; }
.wb-compliance-breaks { padding: 10px 16px; display: flex; flex-direction: column; gap: 6px; }
.wb-compliance-break-row { display: flex; align-items: center; gap: 12px; font-size: 13px; }

/* ═══════════════════════════════════════════════════════
   HEALTH RESOURCES PAGE
   ═══════════════════════════════════════════════════════ */
.wb-resource-section { margin-bottom: 32px; }
.wb-resource-category {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.wb-resource-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.wb-resource-card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: border-color .15s, box-shadow .15s;
}
.wb-resource-card:hover {
    border-color: var(--color-accent);
    box-shadow: 0 4px 16px rgba(0,0,0,.06);
}
.wb-resource-card-body { flex: 1; }
.wb-resource-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 8px;
}
.wb-resource-desc {
    font-size: 13px;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin: 0;
}
.wb-resource-card-footer { margin-top: auto; }
.wb-resource-btn {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-accent);
    text-decoration: none;
    padding: 6px 14px;
    border: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent);
    border-radius: 6px;
    transition: background .15s;
}
.wb-resource-btn:hover {
    background: color-mix(in srgb, var(--color-accent) 8%, transparent);
}
.wb-resource-note {
    font-size: 12px;
    color: var(--color-text-muted);
    padding: 14px 16px;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    margin-top: 8px;
}

/* ═══════════════════════════════════════════════════════
   FLOATING TIMER WIDGET
   ═══════════════════════════════════════════════════════ */
#ft-widget {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

/* FAB */
/* ── SVG Stopwatch FAB ────────────────────────────────────────── */
.ft-fab {
    width: 60px;
    height: 75px;
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
    flex-shrink: 0;
}
.ft-fab svg { width: 100%; height: 100%; overflow: visible; }
.ft-fab:hover:not(.ft-fab-running) .ft-fab-glow { fill: #E9EDF1; }
.ft-fab.ft-fab-locked { opacity: 0.5; cursor: not-allowed; }
.ft-fab.ft-fab-locked:hover { transform: none !important; }

/* Top group (stem + crossbar + green handle) */
.ft-fab-top {
    transition: transform .35s cubic-bezier(.34,1.56,.64,1);
    transform-origin: 25px 12px;
}

/* Clock face — blue underneath, white glow on top */
.ft-fab-face {
    fill: var(--color-primary, #395D7F);
    stroke: var(--color-primary, #395D7F);
    stroke-width: 6;
    transition: stroke-width .35s ease, r .35s ease;
}
.ft-fab-glow {
    fill: white;
    opacity: 1;
    transition: fill .2s ease, opacity .3s ease, r .35s ease;
    pointer-events: none;
}

/* Clock hands */
.ft-fab-hands line {
    transition: opacity .3s ease, transform .35s ease;
    transform-origin: 25px 40px;
}

/* Timer text */
.ft-fab-text {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 500;
    fill: white;
    text-anchor: middle;
    dominant-baseline: central;
    font-size: 18px;
    letter-spacing: 0.5px;
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
}
.ft-fab-text.size-medium { font-size: 14px; letter-spacing: 0.3px; }
.ft-fab-text.size-long   { font-size: 12px; letter-spacing: 0.2px; }

/* ── Running state (staggered: hands → glow → text) ──────────── */
.ft-fab.ft-fab-running .ft-fab-top { transform: translateY(5px); }
.ft-fab.ft-fab-running .ft-fab-hand-hour { transform: rotate(210deg); }
.ft-fab.ft-fab-running .ft-fab-hand-minute { transform: rotate(150deg); }
.ft-fab.ft-fab-running .ft-fab-hands line { opacity: 0; transition-delay: .08s; }
.ft-fab.ft-fab-running .ft-fab-face { stroke-width: 2; r: 24; transition-delay: .08s; }
.ft-fab.ft-fab-running .ft-fab-glow { opacity: 0; r: 24; transition-delay: .1s; }
.ft-fab.ft-fab-running .ft-fab-text { opacity: 1; transition-delay: .22s; }

/* ── Ping effect on start ─────────────────────────────────────── */
.ft-fab-ping {
    fill: none;
    stroke: var(--color-accent, #88BC86);
    stroke-width: 3;
    r: 22.5;
    opacity: 0;
    pointer-events: none;
}
@keyframes ft-ping-out {
    0%   { r: 24; stroke-width: 3; opacity: .6; }
    50%  { r: 34; stroke-width: 1.5; opacity: .3; }
    100% { r: 40; stroke-width: 0.5; opacity: 0; }
}
@keyframes ft-ping-out-2 {
    0%   { r: 24; stroke-width: 2; opacity: .35; }
    60%  { r: 32; stroke-width: 1; opacity: .15; }
    100% { r: 38; stroke-width: 0.5; opacity: 0; }
}
/* Triggered by ft-fab-running — fires once after transition settles */
.ft-fab.ft-fab-running .ft-fab-ping-1 { animation: ft-ping-out .5s ease-out .35s forwards; }
.ft-fab.ft-fab-running .ft-fab-ping-2 { animation: ft-ping-out-2 .6s ease-out .43s forwards; }

/* Overlay */
.ft-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,.8);
    z-index: 999;
    opacity: 1;
    transition: opacity .2s ease;
}
.ft-overlay.ft-hidden {
    display: block !important;
    opacity: 0;
    pointer-events: none;
}
body.comfort-dark .ft-overlay { background: rgba(0,0,0,.75); }

/* Popup */
.ft-popup {
    position: absolute;
    bottom: calc(100% + 10px);
    right: 0;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 20px;
    width: max-content; min-width: 320px;
    box-shadow: 0 4px 16px rgba(0,0,0,.09);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* On phone widths the popup escapes the widget and spans the viewport
   (minus a 20px side gutter) — same pattern as the marketing homepage.
   The FAB stays 60x75 at bottom:28 in-app, so the popup is anchored
   high enough to clear it with breathing room. */
@media (max-width: 720px) {
    .ft-popup {
        position: fixed;
        left: 20px;
        right: 20px;
        bottom: 115px;
        width: auto;
        max-width: none;
        min-width: 0;
        max-height: calc(100svh - 135px);
        overflow-y: auto;
        padding: 24px;
        gap: 18px;
    }
}
.ft-popup-body { display: flex; gap: 8px; align-items: center; }
.ft-popup-selects { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ft-sel {
    width: 100%;
    min-width: 280px;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 13px;
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-text);
    cursor: pointer;
}
.ft-project-wrap { position: relative; }
.ft-proj-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,.1);
    max-height: 220px;
    overflow-y: auto;
    z-index: 1200;
}
.ft-proj-item {
    padding: 8px 12px;
    font-size: 13px;
    color: var(--color-text);
    cursor: pointer;
    border-bottom: 1px solid var(--color-border);
    outline: none;
    transition: background .1s;
}
.ft-proj-item:last-child { border-bottom: none; }
.ft-proj-item:hover,
.ft-proj-item:focus { background: color-mix(in srgb, var(--color-accent) 8%, var(--color-card)); }
.ft-popup-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ft-popup-actions-row {
    display: flex;
    gap: 8px;
}
.ft-save-btn {
    width: 36px;
    align-self: stretch;
    border: none;
    cursor: default;
    background: transparent;
    color: var(--color-border);
    font-size: 28px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color .15s, transform .12s;
    padding: 0;
}
.ft-save-btn.ft-save-ready { cursor: pointer; }
.ft-save-btn.ft-save-ready:hover { color: var(--color-text-muted); transform: scale(1.12); }
.ft-save-btn.ft-save-done { color: #22a861; cursor: pointer; }
.ft-save-btn.ft-save-done:hover { color: #1a9152; transform: scale(1.12); }
.ft-stop-btn {
    width: 100%;
    padding: 12px 0;
    border: none;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    background: #ef4444;
    color: #fff;
    transition: background .12s;
}
.ft-stop-btn:hover { background: #dc2626; }
.ft-cancel-btn {
    flex: 1;
    padding: 12px 0;
    border: none;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    background: #1e293b;
    color: #fff;
    transition: background .12s;
}
.ft-cancel-btn:hover { background: #0f172a; color: #fff; }
.ft-split-btn {
    flex: 1;
    padding: 12px 0;
    border: 1.5px solid var(--color-border);
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color .12s, border-color .12s, opacity .12s;
}
.ft-split-btn:disabled { opacity: 0.35; cursor: default; pointer-events: none; }
.ft-split-btn:not(:disabled):hover { color: var(--color-text); border-color: var(--color-text-muted); }

.ft-hidden { display: none !important; }

/* ── Laps section ─────────────────────────────────────────────────────────── */
.ft-divider { border: none; border-top: 1px solid var(--color-border); margin: 4px 0; }
.ft-popup-current { display: flex; flex-direction: column; gap: 8px; }
.ft-laps { display: flex; flex-direction: column; gap: 6px; padding-bottom: 4px; }
.ft-laps-list { display: flex; flex-direction: column; gap: 8px; }

.ft-lap-row {
    background: var(--color-bg); border: 1px solid var(--color-border);
    border-left-width: 3px;
    border-radius: 6px; padding: 8px 10px; font-size: 13px;
}
.ft-lap-view { display: flex; align-items: center; gap: 8px; }
.ft-lap-text { flex: 1; min-width: 0; overflow: hidden; }
.ft-lap-ticker { display: block; white-space: nowrap; }
.ft-lap-text:hover .ft-lap-ticker { animation: ft-ticker 4s linear infinite; }
@keyframes ft-ticker {
    0%   { transform: translateX(0); }
    40%  { transform: translateX(var(--ticker-dist, 0px)); }
    60%  { transform: translateX(var(--ticker-dist, 0px)); }
    100% { transform: translateX(0); }
}
.ft-lap-time {
    font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
    color: var(--color-text); flex-shrink: 0;
}
.ft-lap-edit-btn {
    background: none; border: none; cursor: pointer; padding: 2px 4px;
    color: var(--color-text-muted); font-size: 13px; flex-shrink: 0;
    transition: color .12s;
}
.ft-lap-edit-btn:hover { color: var(--color-text); }

.ft-lap-edit { display: flex; align-items: center; gap: 8px; }
.ft-lap-edit-fields { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ft-lap-done-btn {
    flex-shrink: 0; background: var(--color-accent); color: #fff;
    border: none; border-radius: 6px; padding: 5px 10px;
    font-size: 11px; font-weight: 600; cursor: pointer; transition: opacity .12s;
}
.ft-lap-done-btn:hover { opacity: .85; }

/* Stop disabled */
.ft-stop-btn:disabled {
    opacity: 0.4; cursor: not-allowed;
    background: #ef4444;
}

/* Success message */
.ft-success {
    text-align: center; padding: 10px 0 2px; font-size: 13px;
    font-weight: 600; color: #22a861;
}

/* ── Session header ───────────────────────────────────────────────────────── */
.ft-section-label {
    font-size: 10px; font-weight: 700; letter-spacing: .08em;
    color: var(--color-text-muted); text-transform: uppercase;
}
.ft-current-heading {
    font-size: 13px; font-weight: 700;
    color: var(--color-text);
}
.ft-session-header {
    display: none;
}
.ft-session-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ft-session-time {
    font-size: 32px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    color: var(--color-text);
    line-height: 1;
}
/* ── Splits header ────────────────────────────────────────────────────────── */
.ft-splits-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.ft-splits-total {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* ── Assignment rows ──────────────────────────────────────────────────────── */
.ft-assignment-row {
    border: 1px solid var(--color-border);
    border-radius: 8px;
}
.ft-assignment-display {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.12s;
}
.ft-assignment-display:hover {
    background: var(--color-surface, #f8fafc);
}
.ft-assignment-icon {
    color: var(--color-text-muted);
    flex-shrink: 0;
}
.ft-assignment-info {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
}
.ft-assignment-label {
    display: none;
}
.ft-assignment-value {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ft-assignment-check {
    flex-shrink: 0;
}
.ft-assignment-input {
    padding: 8px 10px;
    border-top: 1px solid var(--color-border);
    border-radius: 0 0 8px 8px;
    background: var(--color-surface, #f8fafc);
}
.ft-assignment-field {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 13px;
    background: var(--color-bg);
    color: var(--color-text);
    box-sizing: border-box;
}

/* ── Prefill flash (project field highlighted after global-search Add Time) ─ */
@keyframes prefill-flash {
    0%   { box-shadow: 0 0 0 0   rgba(139,90,168,0);    background: transparent; }
    25%  { box-shadow: 0 0 0 4px rgba(139,90,168,0.35); background: rgba(139,90,168,0.08); }
    55%  { box-shadow: 0 0 0 0   rgba(139,90,168,0);    background: transparent; }
    80%  { box-shadow: 0 0 0 4px rgba(139,90,168,0.25); background: rgba(139,90,168,0.06); }
    100% { box-shadow: 0 0 0 0   rgba(139,90,168,0);    background: transparent; }
}
.prefill-flash {
    animation: prefill-flash 1.4s ease forwards;
    border-radius: 6px;
}

/* ── Well-Being Card redesign (wbc-) ─────────────────────────────────────── */
.wbc-hero { display: flex; align-items: flex-start; gap: 16px; }
.wbc-hero-score { flex-shrink: 0; text-align: center; }
.wbc-score-num {
    font-size: 44px; font-weight: 800; line-height: 1;
    color: var(--color-text); font-variant-numeric: tabular-nums;
}
.wbc-score-denom { font-size: 16px; font-weight: 500; color: var(--color-text-muted); }
.wbc-score-band {
    font-size: 10px; font-weight: 700; letter-spacing: .08em;
    color: var(--color-text-muted); text-transform: uppercase; margin-top: 2px;
}
.wbc-hero-right { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding-top: 2px; }
.wbc-status-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 700; letter-spacing: .04em;
    border-radius: 999px; padding: 3px 10px; width: fit-content;
}
.wbc-status-all-clear { background: #dcfce7; color: #16a34a; }
.wbc-status-heads-up  { background: #fef3c7; color: #d97706; }
.wbc-hero-headline { font-size: 14px; font-weight: 700; color: var(--color-text); line-height: 1.3; }
.wbc-hero-sub { font-size: 12px; color: var(--color-text-muted); line-height: 1.4; }

.wbc-stats-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wbc-stat-box {
    border: 1px solid var(--color-border); border-radius: 10px;
    padding: 12px 14px; display: flex; flex-direction: column; gap: 3px;
}
.wbc-stat-label {
    font-size: 10px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--color-text-muted);
}
.wbc-stat-num {
    font-size: 28px; font-weight: 800; line-height: 1;
    color: var(--color-text); font-variant-numeric: tabular-nums;
}
.wbc-stat-denom { font-size: 13px; font-weight: 500; color: var(--color-text-muted); }
.wbc-stat-unit  { font-size: 13px; font-weight: 500; color: var(--color-text-muted); margin-left: 1px; }
.wbc-stat-band  { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.wbc-stat-sub   { font-size: 11px; color: var(--color-text-muted); margin-top: 1px; }

.wbc-bar-wrap { height: 4px; background: var(--color-border); border-radius: 99px; overflow: hidden; margin-top: 6px; }
.wbc-bar { height: 100%; border-radius: 99px; transition: width .3s; }

.wbc-day-bars { display: flex; align-items: flex-end; gap: 4px; margin-top: 6px; height: 40px; }
.wbc-day-bar  { flex: 1; border-radius: 3px; min-height: 8px; transition: height .2s; }
.wbc-empty    { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 16px 8px 8px; }

.wbc-signals { display: flex; flex-direction: column; gap: 6px; }
.wbc-signals-label {
    font-size: 10px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 2px;
}
.wbc-signal {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: 8px; border-left: 3px solid transparent;
    background: var(--color-bg);
}
.wbc-signal-watch { border-left-color: #f87171; }
.wbc-signal-good  { border-left-color: #86efac; }
.wbc-signal-act   { border-left-color: #D94040; }
.wbc-signal-body  { flex: 1; min-width: 0; }
.wbc-signal-members {
    font-size: 10px; font-weight: 600; color: var(--color-text-muted);
    margin-bottom: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wbc-signal-title  { font-size: 13px; font-weight: 600; color: var(--color-text); }
.wbc-signal-detail { font-size: 11px; color: var(--color-text-muted); margin-top: 1px; }
.wbc-badge { flex-shrink: 0; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.wbc-badge-watch { background: #fef3c7; color: #d97706; }
.wbc-badge-good  { background: #dcfce7; color: #16a34a; }
.wbc-badge-act   { background: #fee2e2; color: #dc2626; }

.wbc-team-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.wbc-team-stat {
    border: 1px solid var(--color-border); border-radius: 10px;
    padding: 12px 10px; display: flex; flex-direction: column; gap: 2px;
}
.wbc-members { display: flex; flex-direction: column; gap: 8px; }
.wbc-members-header { display: flex; align-items: center; justify-content: space-between; }
.wbc-avatars { display: flex; flex-wrap: wrap; gap: 6px; }
.wbc-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700; cursor: default; flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════
   GLOBAL PROJECT SEARCH
   ═══════════════════════════════════════════════════════ */

/* Notification bell */
.topbar-bell-wrap {
    position: relative;
    flex-shrink: 0;
}

.topbar-bell-btn {
    background: #fff;
    border: 1px solid #DCE9E0;
    color: #374151;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: background .15s, color .15s, border-color .15s;
}
.topbar-bell-btn:hover,
.topbar-bell-btn.notif-btn-active {
    background: #f3f4f6;
    color: #111827;
    border-color: #d1d5db;
}

.topbar-bell-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    border: 2px solid var(--color-sidebar-bg);
    line-height: 1;
}

/* Dropdown panel */
.notif-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 340px;
    max-height: min(480px, calc(100vh - 120px));
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    z-index: 500;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.notif-dropdown.notif-open { display: block; }

.notif-dropdown-header {
    padding: 14px 16px 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: .5px;
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
}

.notif-dropdown-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border);
}
.notif-dropdown-item:last-child { border-bottom: none; }

.notif-item-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}
.notif-item-danger  .notif-item-icon { background: #fef2f2; color: #dc2626; }
.notif-item-warning .notif-item-icon { background: #fff7ed; color: #d97706; }
.notif-item-success .notif-item-icon { background: #f0fdf4; color: #16a34a; }
.notif-item-info    .notif-item-icon { background: #eff6ff; color: #2563eb; }

.notif-item-body { flex: 1; min-width: 0; }

.notif-dismiss-btn {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: #9ca3af;
    font-size: 16px;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 4px;
    opacity: 0;
    transition: opacity .15s, color .15s;
    align-self: flex-start;
    margin-top: 1px;
}
.notif-dropdown-item:hover .notif-dismiss-btn { opacity: 1; }
.notif-dismiss-btn:hover { color: #374151; }

.notif-item-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 2px;
    line-height: 1.4;
}
.notif-item-danger  .notif-item-title { color: #dc2626; }
.notif-item-warning .notif-item-title { color: #d97706; }
.notif-item-success .notif-item-title { color: #16a34a; }

.notif-item-text {
    font-size: 12px;
    color: var(--color-text-muted);
    line-height: 1.5;
}

.notif-dropdown-empty {
    padding: 20px 16px;
    font-size: 13px;
    color: var(--color-text-muted);
    text-align: center;
}

/* Gear + Avatar topbar icon buttons */
.topbar-icon-wrap {
    position: relative;
    flex-shrink: 0;
}
.topbar-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #fff;
    border: 1px solid #DCE9E0;
    border-radius: 50%;
    color: #374151;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.topbar-icon-btn:hover,
.topbar-icon-btn.tb-icon-active {
    background: #f3f4f6;
    color: #111827;
    border-color: #d1d5db;
}
.topbar-avatar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--color-accent);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .5px;
    cursor: pointer;
    transition: opacity .15s;
}
.topbar-avatar-btn:hover,
.topbar-avatar-btn.tb-icon-active { opacity: .85; }

/* Shared dropdown panel for gear + avatar */
.topbar-icon-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 180px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.10);
    z-index: 2000;
    overflow: hidden;
    padding: 6px 0;
}
.topbar-icon-dropdown.tb-dd-open { display: block; }

/* ── Desktop hover menus (checklist, bell, gear, avatar) ── */
@media (hover: hover) and (pointer: fine) {

    /* Invisible bridge fills the gap between button and dropdown so the
       mouse never leaves the wrap's hover area mid-travel. */
    .topbar-bell-wrap::after,
    .setup-check-wrap::after,
    .topbar-icon-wrap::after {
        content: '';
        position: absolute;
        top: 100%;
        left: -8px;
        right: -8px;
        height: 12px;
    }

    /* Always rendered, hidden via opacity/visibility/pointer-events
       so they never intercept clicks while invisible.
       The 200ms hide-delay bridges the gap: dropdown stays visible long
       enough for the mouse to travel from the button into the dropdown
       (which is inside the same wrap, so :hover is restored on arrival). */
    .topbar-bell-wrap   .notif-dropdown,
    .setup-check-wrap   .setup-check-dropdown,
    .topbar-icon-wrap   .topbar-icon-dropdown {
        display: block !important;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-4px);
        transition: opacity .15s ease .2s, transform .15s ease .2s, visibility 0s linear .2s;
    }

    /* Show on hover — 180ms delay prevents accidental open when
       quickly passing through an icon to reach search or other controls */
    .topbar-bell-wrap:hover   .notif-dropdown,
    .setup-check-wrap:hover   .setup-check-dropdown,
    .topbar-icon-wrap:hover   .topbar-icon-dropdown {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
        transition: opacity .15s ease .18s, transform .15s ease .18s, visibility 0s linear .18s;
    }

    /* Show via JS click — instant, no delay */
    .notif-dropdown.notif-open,
    .setup-check-dropdown.notif-open,
    .topbar-icon-dropdown.tb-dd-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
        transition: opacity .12s ease, transform .12s ease, visibility 0s;
    }
}

.topbar-dd-item {
    display: block;
    width: 100%;
    padding: 9px 16px;
    font-size: 13.5px;
    color: #374151;
    text-decoration: none;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s;
}
.topbar-dd-item:hover { background: #f3f4f6; }
.topbar-dd-item.active { color: var(--color-accent); font-weight: 500; }
.topbar-dd-logout { color: #ef4444; }
.topbar-dd-logout:hover { background: #fef2f2; }

.topbar-dd-divider {
    padding: 8px 16px 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: #9ca3af;
}
.topbar-dd-divider-line {
    height: 1px;
    background: #f0f0f0;
    margin: 4px 0;
}

/* Topbar search trigger button + wrapper. The wrapper exists so the
   responsive hamburger script can reflow it into the mobile drawer. */
.gs-wrap {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}
.gs-circle-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: var(--color-card);
    color: var(--color-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .15s, color .15s, border-color .15s;
}
.gs-circle-btn:hover { background: rgba(0,0,0,.06); }

/* Global search modal — centered overlay with backdrop blur, click-to-dismiss.
   Mirrors the timer popup's overlay pattern (#ft-overlay). */
.gs-overlay {
    position: fixed; inset: 0; z-index: 999;
    background: rgba(245, 243, 239, 0.72);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 18vh 20px 20px;
    transition: opacity .18s ease;
}
.gs-overlay.gs-hidden { opacity: 0; pointer-events: none; }
.gs-modal {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 24px 64px rgba(12, 24, 51, .14);
    width: min(720px, 100%);
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    transition: transform .18s ease;
}
.gs-overlay.gs-hidden .gs-modal { transform: translateY(-8px); }

.gs-close-btn {
    position: absolute; top: 12px; right: 12px;
    background: transparent; border: none; cursor: pointer;
    color: var(--color-text-muted, #6b7280);
    padding: 6px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    transition: background .12s, color .12s;
}
.gs-close-btn:hover { background: rgba(0,0,0,.04); color: var(--color-text); }

.gs-modal-input {
    width: 100%;
    padding: 26px 56px 20px 28px;
    border: none; outline: none;
    background: #fff;
    color: var(--color-text);
    font-size: 18px; font-weight: 500;
    font-family: inherit;
    line-height: 1.2;
}
.gs-modal-input::placeholder { color: var(--color-text-muted, #6b7280); font-weight: 400; }

.gs-modal-body {
    border-top: 1px solid var(--color-border, #e5e7eb);
    flex: 1;
    overflow-y: auto;
    padding-bottom: 8px;
}
.gs-section-label {
    padding: 14px 28px 8px;
    font-size: 11px; font-weight: 700; letter-spacing: .06em;
    color: var(--color-text-muted, #6b7280);
}
.gs-results { display: flex; flex-direction: column; padding: 0 12px; }

.gs-item {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; border-radius: 10px;
    transition: background .08s ease;
}
.gs-item:hover,
.gs-item.is-focused {
    background: rgba(57, 93, 127, 0.04);
}
.gs-item-info { flex: 1; min-width: 0; }
.gs-item-name {
    font-size: 14px; font-weight: 700;
    color: var(--color-text, #0C1833);
    line-height: 1.3;
}
.gs-item-name mark {
    background: #fef3c7; color: inherit;
    padding: 0 2px; border-radius: 2px;
}
.gs-item-meta {
    font-size: 12.5px;
    color: var(--color-text-muted, #6b7280);
    margin-top: 3px;
}

.gs-row-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent; border: none; cursor: pointer;
    font-size: 11.5px; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase;
    color: var(--color-accent, #88BC86);
    padding: 6px 10px; border-radius: 6px;
    font-family: inherit;
    text-decoration: none;
    transition: background .12s;
    flex-shrink: 0;
}
.gs-row-btn:hover { background: rgba(136, 188, 134, .12); }
.gs-row-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.gs-row-btn svg { width: 14px; height: 14px; }
.gs-row-btn.gs-start-btn { color: var(--color-primary, #395D7F); }
.gs-row-btn.gs-start-btn:hover { background: rgba(57, 93, 127, .10); }

.gs-empty {
    padding: 28px 20px;
    text-align: center;
    color: var(--color-text-muted, #6b7280);
    font-size: 13.5px;
}

@media (max-width: 640px) {
    .gs-overlay { padding-top: 10vh; align-items: stretch; }
    .gs-modal { max-height: 86vh; }
    .gs-modal-input { font-size: 16px; padding: 20px 50px 16px 20px; }
    .gs-section-label { padding: 12px 20px 6px; }
    .gs-item { padding: 12px 12px; }
}

/* ═══════════════════════════════════════════════════════
   TIME RECUR — Recurring entry form + badge
   ═══════════════════════════════════════════════════════ */

/* Recurring toggle checkbox row */
.recur-toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text);
    cursor: pointer;
    user-select: none;
}
.recur-toggle-label input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: var(--color-accent);
    cursor: pointer;
}

/* Options panel (hidden/visible) */
.recur-options {
    margin-top: 10px;
    padding: 14px 16px;
    background: color-mix(in srgb, var(--color-accent) 5%, #fff);
    border: 1px solid color-mix(in srgb, var(--color-accent) 20%, var(--color-border));
    border-radius: 10px;
    overflow: hidden;
    transition: opacity .15s, margin-top .15s;
}
.recur-options-hidden {
    display: none;
}

/* Recurring badge (entry list) */
.task-recurring {
    background: color-mix(in srgb, #7c3aed 12%, transparent);
    color: #7c3aed;
}

/* Stop Recur button */
.entry-action-stop {
    color: #c2410c;
}
.entry-action-stop:hover {
    background: #fff3ee;
    color: #9a3412;
}

/* ═══════════════════════════════════════════════════════
   ADMIN AI CHAT
   ═══════════════════════════════════════════════════════ */

.ai-chat-wrap {
    max-width: 760px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Preset question chips */
.ai-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ai-chip {
    font-size: 12px;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid var(--color-border);
    background: #fff;
    color: var(--color-text);
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
.ai-chip:hover {
    background: color-mix(in srgb, var(--color-accent) 8%, #fff);
    border-color: var(--color-accent);
    color: var(--color-accent);
}

/* Conversation thread */
.ai-thread {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 16px;
    min-height: 260px;
    max-height: 500px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ai-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    font-size: 13px;
}
.ai-msg { display: flex; }
.ai-msg-user      { justify-content: flex-end; }
.ai-msg-assistant { justify-content: flex-start; }
.ai-msg-error     { justify-content: flex-start; }

.ai-bubble {
    max-width: 85%;
    font-size: 13.5px;
    line-height: 1.6;
    padding: 10px 14px;
    border-radius: 12px;
}
.ai-bubble-user {
    background: var(--color-accent);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.ai-bubble-assistant {
    background: #f3f4f8;
    color: var(--color-text);
    border-bottom-left-radius: 4px;
}
.ai-bubble-error {
    background: #fff0f0;
    color: #b91c1c;
    border: 1px solid #fca5a5;
    border-bottom-left-radius: 4px;
}

/* Typing dots */
.ai-typing {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 14px;
    background: #f3f4f8;
    border-radius: 12px;
    border-bottom-left-radius: 4px;
    width: fit-content;
}
.ai-typing span {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--color-text-muted);
    animation: ai-bounce 1.2s infinite;
}
.ai-typing span:nth-child(2) { animation-delay: .2s; }
.ai-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes ai-bounce {
    0%, 80%, 100% { transform: translateY(0); opacity: .4; }
    40%            { transform: translateY(-5px); opacity: 1; }
}
.ai-hidden { display: none !important; }

/* Input row */
.ai-input-row {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}
.ai-input {
    flex: 1;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 13px;
    resize: none;
    line-height: 1.5;
    color: var(--color-text);
    background: #fff;
    transition: border-color .15s;
}
.ai-input:focus { outline: none; border-color: var(--color-accent); }
.ai-send-btn {
    flex-shrink: 0;
    width: 40px; height: 40px;
    border-radius: 10px;
    background: var(--color-accent);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .12s;
}
.ai-send-btn:hover  { background: var(--color-accent-dark); }
.ai-send-btn:disabled { opacity: .5; cursor: default; }

.ai-footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    color: var(--color-text-muted);
}
.ai-model-note { font-style: italic; }
/* Subtle trial-cap nudge — quiet by design, only appears near the end of the
   trial AI budget. Shared by the dashboard AI box and the admin chat composer. */
.ai-trial-hint {
    font-size: 11px;
    color: var(--color-text-muted);
    margin: 8px 0 0;
    text-align: center;
}
.ai-trial-hint a { color: var(--color-accent); font-weight: 600; text-decoration: none; }
.ai-trial-hint a:hover { text-decoration: underline; }
.ai-clear-btn {
    font-size: 11px;
    color: var(--color-text-muted);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}
.ai-clear-btn:hover { color: #b91c1c; }

/* ═══════════════════════════════════════════════════════
   QUICK LOG FAB (Employee AI Time Entry)
   ═══════════════════════════════════════════════════════ */

#ql-widget {
    position: fixed;
    bottom: 28px;   /* sit above the timer FAB */
    right: 90px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.ql-fab {
    width:52px; height: 52px;
    border-radius: 50%;
    background: #4E7396;
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 3px 12px rgba(78,115,150,.4);
    transition: background .15s, transform .12s;
}
.ql-fab:hover { background: #3d5c78; transform: scale(1.08); }

.ql-panel {
    position: absolute;
    bottom: 56px;
    right: 0;
    width: 340px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0,0,0,.16);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ql-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ql-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: 6px;
}
.ql-close {
    background: none; border: none;
    font-size: 18px; line-height: 1;
    color: var(--color-text-muted);
    cursor: pointer; padding: 0 4px;
}
.ql-close:hover { color: var(--color-text); }

.ql-textarea {
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 12.5px;
    resize: none;
    line-height: 1.5;
    color: var(--color-text);
    box-sizing: border-box;
    min-height: 100px;
}
.ql-textarea:focus { outline: none; border-color: #059669; }

/* Preview list */
.ql-preview { font-size: 12.5px; max-width: 100%; }
.ql-preview-list { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; }
.ql-entry-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: #f8fafb;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 10px 14px;
    min-width: 200px;
    max-width: 280px;
    flex: 1;
}
.ql-entry-skip { opacity: .5; }
.ql-entry-hours {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-accent);
    flex-shrink: 0;
    min-width: 32px;
}
.ql-entry-info { flex: 1; min-width: 0; }
.ql-entry-project { font-weight: 600; color: var(--color-text); display: block; }
.ql-entry-task {
    display: block;
    color: var(--color-text-secondary);
    font-size: 11.5px;
    font-weight: 500;
    margin-top: 1px;
}
.ql-entry-notes {
    display: block;
    color: var(--color-text-muted);
    font-size: 11.5px;
    margin-top: 1px;
}
.ql-flag {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    border-radius: 4px;
    padding: 1px 5px;
    margin-top: 3px;
}
.ql-flag-warn    { background: #fff7ed; color: #c2410c; }
.ql-flag-info    { background: #eff6ff; color: #2563eb; }
.ql-flag-meeting { background: #f0fdf4; color: #15803d; }

/* Action buttons */
.ql-actions { display: flex; gap: 10px; margin-top: 10px; align-items: center; flex-wrap: wrap; }
.ql-parse-btn {
    padding: 8px 16px;
    border-radius: 8px;
    background: #059669;
    color: #fff;
    border: none;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s;
}
.ql-parse-btn:hover    { background: #047857; }
.ql-parse-btn:disabled { opacity: .6; cursor: default; }

.ql-confirm-btn {
    padding: 8px 16px;
    border-radius: 8px;
    background: var(--color-accent);
    color: #fff;
    border: none;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s;
}
.ql-confirm-btn:hover    { background: var(--color-accent-dark); }
.ql-confirm-btn:disabled { opacity: .6; cursor: default; }

.ql-msg {
    font-size: 12.5px;
    font-weight: 500;
    border-radius: 8px;
    padding: 7px 12px;
    text-align: left;
    border: 1px solid transparent;
}
.ql-msg-success { background: #ecfdf5; color: #166534; border-color: #6ee7b7; }
.ql-msg-error   { background: #fef2f2; color: #991b1b; border-color: #fca5a5; }
.ql-msg-warn    { background: #fffbeb; color: #92400e; border-color: #fcd34d; }
.ql-hidden      { display: none !important; }

/* =========================================================
   TEAMS PAGE
   ========================================================= */
.team-project-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
}

.team-project-pill {
    display: inline-block;
    padding: 2px 8px;
    background: var(--color-accent-light, #eff6ff);
    color: var(--color-accent, #2563eb);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 500;
}

/* =========================================================
   ACCESS CONTROL PAGE
   ========================================================= */
.access-check {
    color: #16a34a;
    font-size: 14px;
    font-weight: 700;
}

.access-cross {
    color: var(--color-muted, #9ca3af);
    font-size: 13px;
}

.access-role-form {
    display: inline-flex;
}

.access-role-select {
    padding: 5px 8px;
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: 6px;
    font-size: 12.5px;
    background: var(--color-bg, #fff);
    color: var(--color-text, #111);
    cursor: pointer;
}

/* =========================================================
   REPORTING / EXPORT PAGE
   ========================================================= */
.export-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.export-section {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 12px;
    padding: 22px 24px;
}

.export-section-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text, #111);
    margin-bottom: 16px;
    letter-spacing: -0.1px;
}

/* Report type cards */
.export-type-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.export-type-card {
    cursor: pointer;
}

.export-type-card input[type="radio"] {
    display: none;
}

.export-type-inner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 2px solid var(--color-border, #e5e7eb);
    border-radius: 10px;
    transition: border-color .12s, background .12s;
}

.export-type-card input[type="radio"]:checked + .export-type-inner {
    border-color: var(--color-accent, #2563eb);
    background: #eff6ff;
}

.export-type-card:hover .export-type-inner {
    border-color: var(--color-accent, #2563eb);
}

.export-type-icon {
    flex-shrink: 0;
    color: var(--color-accent, #2563eb);
    margin-top: 2px;
}

.export-type-card input[type="radio"]:not(:checked) + .export-type-inner .export-type-icon {
    color: var(--color-muted, #9ca3af);
}

.export-type-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.export-type-body strong {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text, #111);
}

.export-type-body span {
    font-size: 11.5px;
    color: var(--color-muted, #6b7280);
    line-height: 1.4;
}

/* Filters */
.export-filter-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.export-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.export-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text, #374151);
}

.export-input {
    padding: 8px 10px;
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: 8px;
    font-size: 13px;
    color: var(--color-text, #111);
    background: var(--color-bg, #fff);
    transition: border-color .12s;
}

.export-input:focus {
    outline: none;
    border-color: var(--color-accent, #2563eb);
    box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}

/* Format + submit row */
.export-bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.export-format-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.export-format-btns {
    display: flex;
    gap: 6px;
}

.export-format-btn {
    cursor: pointer;
}

.export-format-btn input[type="radio"] {
    display: none;
}

.export-format-btn span {
    display: inline-block;
    padding: 7px 18px;
    border: 1.5px solid var(--color-border, #d1d5db);
    border-radius: 20px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--color-muted, #6b7280);
    transition: border-color .12s, color .12s, background .12s;
}

.export-format-btn input[type="radio"]:checked + span {
    border-color: var(--color-accent, #2563eb);
    color: var(--color-accent, #2563eb);
    background: #eff6ff;
    font-weight: 600;
}

.export-format-btn:hover span {
    border-color: var(--color-accent, #2563eb);
    color: var(--color-accent, #2563eb);
}

.export-submit-btn {
    display: inline-flex;
    align-items: center;
    padding: 10px 24px;
    background: var(--color-accent, #2563eb);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s;
}

.export-submit-btn:hover { background: var(--color-accent-dark, #1d4ed8); }

/* Footer note */
.export-note {
    font-size: 12px;
    color: var(--color-muted, #6b7280);
    padding: 0 4px;
}


/* =========================================================
   RESPONSIVE — 1066px and below
   ========================================================= */
@media (max-width: 960px) {

    /* ---------- Top nav: show hamburger, hide brand name ---------- */
    .tnav { padding: 0 16px; }
    .tnav-hamburger { display: flex; }
    .tnav-links     { display: none; }
    .tnav-brand-name { display: none; }

    /* ---------- Main content ---------- */
    .main-content {
        padding: 20px 16px 120px;
    }

    /* Notification dropdown: fixed to viewport so it never clips off-screen */
    .notif-dropdown {
        position: fixed;
        top: 66px;
        left: 16px;
        right: 16px;
        width: auto;
        transform: none;
    }

    /* ---------- Timesheet: Daily ---------- */
    .daily-two-col { grid-template-columns: 1fr; }
    .daily-header {
        flex-direction: column;
        gap: 12px;
    }

    .form-row {
        flex-direction: column;
        gap: 0;
    }

    .entry-form-card {
        padding: 16px;
    }

    .entry-main {
        gap: 10px;
    }

    .entry-actions {
        flex-direction: column;
        gap: 4px;
    }

    /* ---------- Timesheet: Weekly ---------- */
    .week-stats {
        overflow-x: auto;
    }
    .week-stat {
        min-width: 80px;
    }

    .week-grid {
        grid-template-columns: repeat(7, minmax(120px, 1fr));
        overflow-x: auto;
        display: flex;
        flex-wrap: nowrap;
        gap: 6px;
        padding-bottom: 8px;
    }
    .week-day {
        min-width: 130px;
        flex-shrink: 0;
    }

    /* ---------- Monthly calendar ---------- */
    .month-calendar {
        grid-template-columns: repeat(7, minmax(42px, 1fr));
        gap: 2px;
    }
    .month-cell {
        min-height: 56px;
        padding: 5px;
    }
    .month-day-num {
        font-size: 12px;
        width: 22px;
        height: 22px;
    }
    .month-hours {
        font-size: 10px;
    }

    /* ---------- Dashboard ---------- */
    .dash-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .dash-panels {
        grid-template-columns: 1fr;
    }

    .dash-two-cards {
        grid-template-columns: 1fr;
    }

    .dash-insight {
        font-size: 20px;
        max-width: 100%;
    }

    /* ---------- Admin stats ---------- */
    .admin-stats {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* ---------- Manage grid (employees) ---------- */
    .manage-grid {
        grid-template-columns: 1fr;
    }
    /* Grid children default to min-width: auto (intrinsic content width).
       Without this, a long form field forces the column past the viewport
       and eats main-content's right padding. */
    .manage-grid > * { min-width: 0; }

    /* ---------- Admin branding grid ---------- */
    .branding-grid {
        grid-template-columns: 1fr !important;
    }
    .branding-grid > * { min-width: 0; }

    /* ---------- Reports ---------- */
    .report-subnav {
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 4px;
    }

    .settings-subnav {
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 4px;
    }

    .report-summary-bar {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* ---------- Well-being / balance grids ---------- */
    .wb-grid,
    .compliance-grid,
    .wellbeing-grid {
        grid-template-columns: 1fr !important;
    }

    /* ---------- Export page ---------- */
    .export-type-grid {
        grid-template-columns: 1fr;
    }

    .export-filter-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .export-bottom-row {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .export-submit-btn {
        width: 100%;
        justify-content: center;
    }

    /* ---------- Section headers ---------- */
    .section-header {
        flex-direction: column;
    }

    /* ---------- Data tables ---------- */
    /* Horizontal scroll wrapper + frozen leftmost column (matches the
       marketing comparison-table pattern). Forces a min-width on the
       table so narrow viewports get a real scroll, and pins the first
       column so the row label stays visible while the data scrolls. */
    .data-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .data-table {
        min-width: 640px;
        border-collapse: separate;
        border-spacing: 0;
    }
    .data-table th:first-child,
    .data-table td:first-child {
        position: sticky;
        left: 0;
        background: var(--color-card);
        z-index: 1;
        box-shadow: 4px 0 8px -6px rgba(0, 0, 0, .12);
    }
    .data-table thead th:first-child {
        background: var(--color-bg);
        z-index: 2;
    }

    /* ---------- FAB widgets ---------- */
    #timer-widget,
    #ql-widget {
        bottom: 28px;
    }
    #timer-widget { right: 16px; }
    #ql-widget    { right: 90px; }

    .ql-panel {
        bottom: 64px;
        right: 16px;
        width: calc(100vw - 32px);
        max-width: 400px;
    }

    #timer-panel {
        bottom: 64px;
        right: 16px;
        width: calc(100vw - 32px);
        max-width: 340px;
    }

    /* ---------- Hierarchy (clients) ---------- */
    .hierarchy-task-row {
        flex-wrap: wrap;
    }

    /* ---------- AI chat ---------- */
    .ai-chat-wrap {
        max-width: 100%;
    }
    .ai-chip-row {
        flex-wrap: wrap;
    }
}

/* =========================================================
   RESPONSIVE — 480px and below
   ========================================================= */
@media (max-width: 480px) {

    .main-content {
        padding: 16px 12px 120px;
    }

    .gs-topbar {
        margin: -16px -12px 16px -12px;
        padding: 0 12px;
    }

    .dash-stats {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .dash-stat-value {
        font-size: 24px;
    }

    .export-filter-grid {
        grid-template-columns: 1fr;
    }

    .week-day {
        min-width: 110px;
    }

    .entry-hours {
        font-size: 16px;
        min-width: 48px;
    }

    .admin-stats {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px;
    }

    .form-row {
        flex-direction: column;
    }

    .reaction-picker {
        gap: 5px;
    }
    .reaction-option span {
        padding: 5px 10px;
        font-size: 12px;
    }
}

/* ==========================================================
   Manager Lockout / Accountability
   ========================================================== */

/* Lockout banner on timesheet pages */
.lockout-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    border: 1px solid;
}
.lockout-banner-active {
    background: rgba(220, 38, 38, .08);
    border-color: rgba(220, 38, 38, .25);
    color: var(--color-text);
}
.lockout-banner-grace {
    background: rgba(245, 158, 11, .08);
    border-color: rgba(245, 158, 11, .3);
    color: var(--color-text);
}
.lockout-banner-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
}
.lockout-banner-active .lockout-banner-icon { color: #dc2626; background: rgba(220,38,38,.12); }
.lockout-banner-grace  .lockout-banner-icon { color: #d97706; background: rgba(245,158,11,.12); }
.lockout-banner-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.lockout-banner-body strong {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
}
.lockout-banner-body span {
    font-size: 13px;
    color: var(--color-text-muted);
}
.lockout-banner-btn {
    flex-shrink: 0;
    padding: 7px 14px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid;
}
.lockout-banner-active .lockout-banner-btn {
    background: #dc2626;
    color: #fff;
    border-color: #dc2626;
}
.lockout-banner-grace .lockout-banner-btn {
    background: none;
    color: #d97706;
    border-color: rgba(245,158,11,.4);
}

/* All-clear / resolved success banner */
.lockout-resolved-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    background: rgba(22, 163, 74, .08);
    border: 1px solid rgba(22, 163, 74, .25);
    border-radius: 10px;
    margin-bottom: 24px;
    color: #16a34a;
}
.lockout-resolved-banner svg { flex-shrink: 0; }
.lockout-resolved-banner div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.lockout-resolved-banner strong {
    font-size: 15px;
    font-weight: 700;
    color: #15803d;
}
.lockout-resolved-banner span {
    font-size: 13px;
    color: #16a34a;
}

/* Accountability page header bar */
.accountability-header-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}
.accountability-count {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
}
.lockout-active-badge {
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    background: rgba(220,38,38,.1);
    color: #dc2626;
    border: 1px solid rgba(220,38,38,.2);
}
.lockout-grace-badge {
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    background: rgba(245,158,11,.1);
    color: #d97706;
    border: 1px solid rgba(245,158,11,.25);
}

/* Employee card on accountability page */
.accountability-employee-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    margin-bottom: 16px;
    overflow: hidden;
}
.accountability-employee-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);
}
.accountability-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}
.accountability-employee-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
}
.accountability-employee-role {
    font-size: 12px;
    color: var(--color-text-muted);
}
.accountability-warn-count {
    margin-left: auto;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
}

/* Individual warning row */
.accountability-warning-row {
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);
}
.accountability-warning-row:last-child { border-bottom: none; }
.warning-active  { border-left: 3px solid #dc2626; }
.warning-grace   { border-left: 3px solid #d97706; }
.warning-escalated { border-left: 3px solid #7c3aed; }

.accountability-warning-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.accountability-warning-desc {
    font-size: 13px;
    color: var(--color-text-muted);
    margin-bottom: 4px;
}
.accountability-warning-meta {
    font-size: 12px;
    color: var(--color-text-muted);
}

/* Warning badges */
.warn-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    white-space: nowrap;
}
.warn-badge-active    { background: rgba(220,38,38,.1);  color: #dc2626; border: 1px solid rgba(220,38,38,.2); }
.warn-badge-grace     { background: rgba(245,158,11,.1); color: #d97706; border: 1px solid rgba(245,158,11,.2); }
.warn-badge-escalated { background: rgba(124,58,237,.1); color: #7c3aed; border: 1px solid rgba(124,58,237,.2); }

/* Resolution form */
.accountability-resolve-wrap { padding: 12px 20px 16px; }
.accountability-resolve-toggle {
    background: none;
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: all .15s;
}
.accountability-resolve-toggle:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}
.accountability-resolve-form {
    margin-top: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}
.resolve-field {
    margin-bottom: 14px;
}
.resolve-field label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 5px;
    color: var(--color-text);
}
.resolve-field select,
.resolve-field textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 13px;
    font-family: inherit;
}
.resolve-field textarea { resize: vertical; min-height: 72px; }
.field-required { color: #dc2626; }
.resolve-actions {
    display: flex;
    gap: 10px;
}

/* Empty state */
.accountability-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--color-text-muted);
}
.accountability-empty svg { opacity: .3; margin-bottom: 16px; }
.accountability-empty h3 { font-size: 18px; font-weight: 600; color: var(--color-text); margin-bottom: 6px; }
.accountability-empty p  { font-size: 14px; }

/* Recently resolved */
.recently-resolved-section {
    margin-top: 32px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    overflow: hidden;
}
.recently-resolved-section summary {
    padding: 14px 20px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
}
.recently-resolved-section summary::-webkit-details-marker { display: none; }
.recently-resolved-count {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    font-size: 11px;
    padding: 2px 8px;
}
.recently-resolved-list { border-top: 1px solid var(--color-border); }
.recently-resolved-row {
    display: flex;
    gap: 20px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--color-border);
    font-size: 13px;
}
.recently-resolved-row:last-child { border-bottom: none; }
.recently-resolved-left { min-width: 180px; }
.recently-resolved-name { font-weight: 600; color: var(--color-text); display: block; }
.recently-resolved-type { color: var(--color-text-muted); display: block; margin-top: 2px; }
.recently-resolved-right { flex: 1; }
.recently-resolved-action { font-weight: 500; color: var(--color-text); display: block; margin-bottom: 4px; }
.recently-resolved-note {
    border-left: 3px solid var(--color-border);
    margin: 6px 0;
    padding-left: 10px;
    color: var(--color-text-muted);
    font-style: italic;
    font-size: 12px;
}
.recently-resolved-date { color: var(--color-text-muted); font-size: 12px; }

/* Nav alert badge */
.nav-alert-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #d97706;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    margin-left: 6px;
    vertical-align: middle;
}
.nav-alert-badge-locked { background: #dc2626; }

/* Admin accountability table */
.admin-accountability-table-wrap {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
}
.admin-accountability-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.admin-accountability-table th {
    padding: 12px 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg);
}
.admin-accountability-table th.text-center,
.admin-accountability-table td.text-center { text-align: center; }
.admin-accountability-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    vertical-align: middle;
}
.admin-accountability-table tr:last-child td { border-bottom: none; }
.admin-accountability-table .row-has-active { background: rgba(220,38,38,.03); }
.accountability-manager-name { font-weight: 600; }
.accountability-manager-email { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }
.accountability-status-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.status-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 20px;
    white-space: nowrap;
}
.status-badge-ok          { background: rgba(22,163,74,.1);  color: #16a34a; border: 1px solid rgba(22,163,74,.2); }
.status-badge-burntrack   { background: rgba(220,38,38,.08); color: #dc2626; border: 1px solid rgba(220,38,38,.2); }
.status-badge-escalated   { background: rgba(124,58,237,.1); color: #7c3aed; border: 1px solid rgba(124,58,237,.2); }
.admin-accountability-notes {
    font-size: 12px;
    color: var(--color-text-muted);
    line-height: 1.8;
}

/* On phone the table has too many columns to fit. Mirror the marketing
   comparison-table pattern: horizontal scroll on the wrapper, fix the
   table to a min-width so it forces overflow, and pin the Manager
   column (first th + td) to the left so the labels stay visible while
   the data columns scroll. A subtle right-edge shadow hints at the
   freeze. */
@media (max-width: 720px) {
    .admin-accountability-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .admin-accountability-table {
        min-width: 720px;
        border-collapse: separate;
        border-spacing: 0;
    }
    .admin-accountability-table th:first-child,
    .admin-accountability-table td:first-child {
        position: sticky;
        left: 0;
        background: var(--color-card);
        z-index: 1;
        box-shadow: 4px 0 8px -6px rgba(0, 0, 0, .12);
    }
    .admin-accountability-table thead th:first-child {
        background: var(--color-bg);
        z-index: 2;
    }
    /* Active-alert rows are tinted; use an opaque approximation of
       rgba(220,38,38,.03) on white so the sticky cell doesn't reveal
       the row underneath. */
    .admin-accountability-table tr.row-has-active td:first-child {
        background: #fef8f8;
    }
}
.admin-accountability-notes p { margin: 0 0 4px; }
.admin-accountability-notes strong { color: var(--color-text); }

/* ============================================================
   TIMESHEET SUBMISSION & APPROVAL
   ============================================================ */

/* Submission status banners (week/daily views) */
.submission-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.5;
}
.submission-banner svg { flex-shrink: 0; margin-top: 1px; }
.submission-banner div { display: flex; flex-direction: column; gap: 2px; }
.submission-banner strong { font-weight: 600; }
.submission-banner span  { color: var(--color-text-muted); font-size: 13px; }
.submission-banner a     { color: inherit; text-decoration: underline; }
.submission-banner-approved {
    background: rgba(22,163,74,.08);
    border: 1px solid rgba(22,163,74,.2);
    color: #15803d;
}
.submission-banner-pending {
    background: rgba(234,179,8,.08);
    border: 1px solid rgba(234,179,8,.25);
    color: #a16207;
}
.submission-banner-rejected {
    background: rgba(220,38,38,.07);
    border: 1px solid rgba(220,38,38,.2);
    color: #b91c1c;
}

/* Week submit bar */
.week-submit-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.btn-submit-week {
    background: var(--color-accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 9px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.btn-submit-week:hover { background: var(--color-accent-dark); }
.submit-note {
    font-size: 13px;
    color: var(--color-text-muted);
}

/* Submit status badges */
.submit-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 20px;
}
.badge-approved {
    background: rgba(22,163,74,.1);
    color: #15803d;
    border: 1px solid rgba(22,163,74,.2);
}
.badge-pending {
    background: rgba(234,179,8,.1);
    color: #a16207;
    border: 1px solid rgba(234,179,8,.25);
}
.badge-rejected {
    background: rgba(220,38,38,.08);
    color: #b91c1c;
    border: 1px solid rgba(220,38,38,.2);
}

/* Locked day link */
.week-day-link-locked {
    color: var(--color-text-muted) !important;
    cursor: default;
    text-decoration: none;
    font-style: italic;
}

/* Manager approval queue */
.ts-approval-header-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.ts-approval-card {
    background: var(--color-card-bg, #fff);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 20px 22px;
    margin-bottom: 12px;
}
.ts-approval-employee {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.ts-approval-employee-info { display: flex; flex-direction: column; gap: 2px; }
.ts-approval-name  { font-size: 15px; font-weight: 600; color: var(--color-text); }
.ts-approval-role  { font-size: 12px; color: var(--color-text-muted); }
.ts-approval-week-info {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 14px;
}
.ts-approval-week-range {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
}
.ts-approval-meta {
    display: flex;
    gap: 14px;
    font-size: 13px;
    color: var(--color-text-muted);
}
.ts-approval-submitted { color: var(--color-text-muted); }
.ts-approval-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}
.ts-btn-approve { padding: 8px 18px; font-size: 13px; }
.ts-btn-reject-toggle { padding: 8px 18px; font-size: 13px; }
.ts-reject-form-wrap {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--color-border);
}

/* Admin finance timesheets */
.ts-finance-summary-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--color-text-muted);
    margin-bottom: 24px;
    padding: 12px 16px;
    background: var(--color-card-bg, #fff);
    border: 1px solid var(--color-border);
    border-radius: 10px;
}
.ts-finance-summary-bar strong { color: var(--color-text); }
.ts-finance-divider { color: var(--color-border); }
.ts-finance-week-group {
    margin-bottom: 28px;
}
.ts-finance-week-header {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.ts-finance-week-label {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text);
}
.ts-finance-week-total {
    font-size: 13px;
    color: var(--color-text-muted);
}
.ts-finance-section-header { margin-bottom: 16px; }
.ts-finance-section-title  { font-size: 17px; font-weight: 700; color: var(--color-text); display: flex; align-items: center; margin: 0 0 4px; }
.ts-finance-section-sub    { font-size: 13px; color: var(--color-text-muted); margin: 0; }

/* ═══════════════════════════════════════════════
   Well-Being Mode
   ═══════════════════════════════════════════════ */

/* Topbar toggle */
.wb-mode-toggle {
    display: none;
    cursor: pointer;
    align-items: center;
    flex-shrink: 0;
    outline: none;
}
.wb-toggle-track {
    width: 44px;
    height: 26px;
    background: #dde0e4;
    border-radius: 13px;
    position: relative;
    transition: background 220ms ease;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.12);
}
.wb-toggle-thumb {
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: 3px;
    left: 3px;
    transition: transform 220ms ease, background 220ms ease;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

/* Active (on) state */
.wb-mode-toggle.wb-on .wb-toggle-track {
    background: #b5d5c5;
}
.wb-mode-toggle.wb-on .wb-toggle-thumb {
    transform: translateX(18px);
    background: #fff;
}

/* Smart-prompt pulse */
.wb-mode-toggle.wb-prompted .wb-toggle-track {
    animation: wb-pulse 2.4s ease-in-out infinite;
}
@keyframes wb-pulse {
    0%,100% { box-shadow: inset 0 1px 3px rgba(0,0,0,0.12); }
    50%      { box-shadow: inset 0 1px 3px rgba(0,0,0,0.12), 0 0 0 3px rgba(181,213,197,0.5); }
}

/* ═══════════════════════════════════════════════════════
   WELCOME MODAL — first-login experience
   ═══════════════════════════════════════════════════════ */
.wlc-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 20, 35, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1200;
    padding: 24px;
    animation: wlcFadeIn .25s ease;
}
body.wlc-open { overflow: hidden; }
.wlc-overlay.wlc-hiding {
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}
.wlc-modal {
    background: #fff;
    border-radius: 16px;
    padding: 40px 40px 32px;
    width: 100%;
    max-width: 480px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.18);
    animation: wlcSlideUp .28s ease;
}
@keyframes wlcFadeIn  { from { opacity: 0 } to { opacity: 1 } }
@keyframes wlcSlideUp { from { opacity: 0; transform: translateY(16px) } to { opacity: 1; transform: none } }

.wlc-logo-row { margin-bottom: 24px; }
.wlc-logo     { height: 28px; width: auto; }

.wlc-heading {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--color-text);
    letter-spacing: -0.02em;
    margin: 0 0 8px;
    line-height: 1.2;
}
.wlc-subtitle {
    font-size: 14px;
    color: var(--color-text-muted);
    margin: 0 0 24px;
    line-height: 1.55;
}
.wlc-steps {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.wlc-step {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
}
.wlc-step-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #EEF3F7;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #395D7F;
    flex-shrink: 0;
}
.wlc-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.wlc-btn-tour {
    display: block;
    width: 100%;
    text-align: center;
    background: #395D7F;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 11px 24px;
    border-radius: 8px;
    text-decoration: none;
    transition: background .15s;
}
.wlc-btn-tour:hover { background: #87BC87; color: #fff; }
.wlc-btn-skip {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 13px;
    color: var(--color-text-muted);
    text-decoration: underline;
    padding: 4px 8px;
    transition: color .15s;
}
.wlc-btn-skip:hover { color: var(--color-text); }

/* Modal checklist items (admin welcome) */
.wlc-checks {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 24px;
}
.wlc-check-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--color-text);
    font-size: 14px;
    font-weight: 500;
    border: 1px solid var(--color-border);
    transition: background .12s;
}
.wlc-check-item:hover { background: #f9fafb; }
.wlc-check-done { color: var(--color-text-muted); }
.wlc-check-done .wlc-check-label { text-decoration: line-through; }
.wlc-check-box { flex-shrink: 0; width: 20px; height: 20px; }
.wlc-check-arrow { margin-left: auto; flex-shrink: 0; color: #d1d5db; width: 14px; height: 14px; }
.wlc-btn-dismiss-icon {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 12px;
    color: var(--color-text-muted);
    text-decoration: underline;
    padding: 4px 8px;
    transition: color .15s;
}
.wlc-btn-dismiss-icon:hover { color: var(--color-text); }

/* ═══════════════════════════════════════════════════════
   SETUP CHECKLIST ICON — topbar (admin only)
   ═══════════════════════════════════════════════════════ */
.setup-check-wrap { position: relative; flex-shrink: 0; }

.setup-check-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 300px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    z-index: 500;
    overflow: hidden;
}
.setup-check-dropdown.notif-open { display: block; }

.setup-check-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--color-border);
    text-decoration: none;
    color: var(--color-text);
    font-size: 13px;
    font-weight: 500;
    transition: background .12s;
}
.setup-check-item:hover { background: #f9fafb; }
.setup-check-item:last-of-type { border-bottom: none; }
.setup-check-icon { flex-shrink: 0; width: 18px; height: 18px; color: #9ca3af; }
.setup-item-done .setup-check-label { color: var(--color-text-muted); text-decoration: line-through; }
.setup-item-done .setup-check-icon { color: #16a34a; }

.setup-check-footer { padding: 10px 16px; border-top: 1px solid var(--color-border); }
.setup-dismiss-link {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 12px;
    color: var(--color-text-muted);
    text-decoration: underline;
    padding: 0;
}
.setup-dismiss-link:hover { color: var(--color-text); }

/* "Checklist moved here" pulse — fires when welcome modal is first closed */
@keyframes setup-pulse-ring {
    0%   { box-shadow: 0 0 0 0   rgba(57, 93, 127, 0.50); background: rgba(57, 93, 127, 0.12); }
    60%  { box-shadow: 0 0 0 9px rgba(57, 93, 127, 0);    background: rgba(57, 93, 127, 0.06); }
    100% { box-shadow: 0 0 0 0   rgba(57, 93, 127, 0);    background: transparent; }
}
.setup-btn-pulse {
    border-radius: 8px;
    animation: setup-pulse-ring 0.7s ease-out 0s 3;
}

/* Full-screen overlay */
.wb-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 30, 24, 0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 500ms ease;
}
.wb-overlay.wb-visible { opacity: 1; pointer-events: auto; }
.wb-overlay[hidden]    { display: none; }

.wb-overlay-inner {
    text-align: center;
    color: #e8f5ee;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    padding: 24px;
}

.wb-message {
    font-size: 1.6rem;
    font-weight: 300;
    letter-spacing: 0.01em;
    max-width: 520px;
    line-height: 1.4;
    opacity: 0;
    transition: opacity 600ms ease;
}
.wb-message.wb-msg-visible { opacity: 1; }

.wb-timer {
    font-size: 3rem;
    font-variant-numeric: tabular-nums;
    font-weight: 200;
    color: #b5d5c5;
    letter-spacing: 0.04em;
}

.wb-end-btn {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.28);
    color: #e8f5ee;
    padding: 11px 32px;
    border-radius: 50px;
    cursor: pointer;
    font-size: 0.95rem;
    transition: background 160ms, border-color 160ms;
}
.wb-end-btn:hover {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.5);
}

/* Suppress floating widgets and toasts while in Well-Being Mode */
body.wb-active #ft-fab,
body.wb-active #ft-widget,
body.wb-active #ql-widget,
body.wb-active .notif-toast { display: none !important; }

/* Post-session feedback modal */
.wb-feedback-modal {
    position: fixed;
    inset: 0;
    background: rgba(20,30,24,0.55);
    z-index: 910;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wb-feedback-modal[hidden] { display: none; }

.wb-feedback-inner {
    background: #fff;
    border-radius: 16px;
    padding: 32px;
    max-width: 360px;
    width: 90%;
    display: flex;
    flex-direction: column;
    gap: 18px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.18);
}
.wb-feedback-heading { font-size: 1.1rem; font-weight: 600; margin: 0; color: #1a1a2e; }

.wb-reactions { display: flex; gap: 8px; flex-wrap: wrap; }
.wb-reaction-btn {
    padding: 7px 15px;
    border-radius: 20px;
    border: 1px solid #ececec;
    background: #f8f9fb;
    cursor: pointer;
    font-size: 0.875rem;
    color: #444;
    transition: background 120ms, border-color 120ms, color 120ms;
}
.wb-reaction-btn:hover    { background: var(--color-bg); }
.wb-reaction-btn.selected { background: var(--color-bg); border-color: #b5d5c5; font-weight: 600; color: #1a1a2e; }

.wb-note {
    width: 100%;
    border: 1px solid #ececec;
    border-radius: 8px;
    padding: 9px 11px;
    font-size: 0.9rem;
    resize: none;
    box-sizing: border-box;
    font-family: inherit;
    color: #333;
}
.wb-note:focus { outline: none; border-color: #b5d5c5; }

.wb-feedback-submit {
    background: #1a1a2e;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 11px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 500;
    transition: opacity 160ms;
}
.wb-feedback-submit:hover { opacity: 0.88; }

/* ═══════════════════════════════════════════════════════
   RANDOM ACTS OF KINDNESS TOAST
   ═══════════════════════════════════════════════════════ */
.rak-toast {
    position: fixed;
    bottom: 28px;
    left: 28px;
    max-width: 320px;
    background: var(--color-bg, #F5F3ED);
    border: 1px solid #d6d0c5;
    border-radius: 12px;
    padding: 14px 40px 14px 18px;
    font-size: 13.5px;
    color: var(--color-text, #111827);
    line-height: 1.55;
    box-shadow: 0 4px 20px rgba(0,0,0,.10);
    z-index: 1500;
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity .35s ease, transform .35s ease;
}
.rak-toast.rak-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.rak-toast.rak-hiding {
    opacity: 0;
    transform: translateY(8px);
}
.rak-close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 13px;
    color: var(--color-text-muted, #9ca3af);
    padding: 2px 4px;
    line-height: 1;
}
.rak-close:hover { color: var(--color-text, #111827); }

/* ═══════════════════════════════════════════════════════
   WELLBEING MODE CARD (balance page)
   ═══════════════════════════════════════════════════════ */
.wb-mode-card { padding: 16px 20px; }
.wb-mode-inner {
    display: flex;
    align-items: center;
    gap: 14px;
}
.wb-mode-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #E8EDF2;
    color: #395D7F;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wb-mode-icon-active {
    background: #EFF6EF;
    color: #4d8b4d;
}
.wb-mode-info { flex: 1; min-width: 0; }
.wb-mode-label { font-size: 14px; font-weight: 600; color: var(--color-text); }
.wb-mode-sub { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }
.wb-mode-feedback { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--color-border); }
.wb-mode-reactions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.wb-reaction-btn {
    background: #f3f4f6;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 13px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
.wb-reaction-btn:hover { background: #e9edf1; }

/* ── Toggle switch (.tb-toggle-*) ────────────────────────────────────── */
.tb-toggle-label { display: inline-flex; align-items: center; cursor: pointer; gap: 0; }
.tb-toggle-input { position: absolute; opacity: 0; width: 0; height: 0; }
.tb-toggle-track {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    background: #d1d5db;
    border-radius: 11px;
    transition: background .2s;
    flex-shrink: 0;
}
.tb-toggle-input:checked + .tb-toggle-track { background: var(--color-accent, #87BC87); }
.tb-toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: transform .2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.tb-toggle-input:checked + .tb-toggle-track .tb-toggle-thumb { transform: translateX(18px); }

/* ── Master Notification Panel ───────────────────────────────────────── */
.mn-notice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    color: #92400e;
    margin-bottom: 2rem;
}
.mn-section {
    margin-bottom: 2.5rem;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    overflow: hidden;
}
.mn-section-header {
    background: var(--color-bg, #F5F3ED);
    border-bottom: 1px solid var(--color-border);
    padding: 14px 20px;
}
.mn-section-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: 8px;
}
.mn-section-icon { font-size: 16px; }
.mn-count-badge {
    background: var(--color-accent, #87BC87);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 10px;
    padding: 1px 7px;
}
.mn-section-sub {
    font-size: 12px;
    color: var(--color-text-secondary);
    display: block;
    margin-top: 3px;
}
.mn-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.mn-table th {
    text-align: left;
    padding: 10px 16px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-border);
    background: #fafafa;
}
.mn-table td {
    padding: 11px 16px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
}
.mn-table tr:last-child td { border-bottom: none; }
.mn-table tr.mn-row-inactive td { opacity: .55; }
.mn-table tr.mn-role-group td {
    padding: 6px 16px;
    background: #f8f8f8;
    border-bottom: 1px solid var(--color-border);
}
.mn-name { font-weight: 600; color: var(--color-text); }
.mn-meta { font-size: 11px; color: var(--color-text-secondary); margin-top: 2px; }
.mn-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mn-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
    padding: 2px 7px;
}
.mn-badge-on     { background: #d1fae5; color: #065f46; }
.mn-badge-off    { background: #fee2e2; color: #991b1b; }
.mn-badge-system { background: #e5e7eb; color: #6b7280; }
.mn-role-pill {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    border-radius: 10px;
    padding: 2px 8px;
}
.mn-role-employee { background: #dbeafe; color: #1e40af; }
.mn-role-manager  { background: #ede9fe; color: #5b21b6; }
.mn-role-admin    { background: #fef3c7; color: #92400e; }
.mn-settings-link {
    display: inline-block;
    font-size: 11px;
    color: var(--color-accent);
    text-decoration: none;
    margin-left: 6px;
    white-space: nowrap;
}
.mn-settings-link:hover { text-decoration: underline; }
.mn-toggle-form { display: inline-flex; }
.mn-edit-row td { background: #f9fafb; }
.mn-inline-form {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 4px 0;
}
.mn-inline-input {
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 13px;
    background: #fff;
}
.mn-test-btn { color: var(--color-accent); }
.mn-system-note {
    font-size: 12px;
    color: var(--color-text-secondary);
    padding: 10px 16px;
    border-top: 1px solid var(--color-border);
    background: #fafafa;
}
.mn-empty {
    padding: 24px 20px;
    font-size: 13px;
    color: var(--color-text-secondary);
    text-align: center;
}
.wb-reaction-btn.selected { background: var(--color-accent); border-color: var(--color-accent-dark); color: #fff; }

/* ── Plan limit banners ──────────────────────────────────────── */
.plan-banner {
    padding: 12px 18px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 16px;
}
.plan-banner a { font-weight: 600; text-decoration: underline; }
.plan-banner-warning {
    background: #fffbeb;
    border: 1px solid #f59e0b;
    color: #92400e;
}
.plan-banner-warning a { color: #92400e; }
.plan-banner-danger {
    background: #fef2f2;
    border: 1px solid #dc2626;
    color: #7f1d1d;
}
.plan-banner-danger a { color: #7f1d1d; }

/* ── Well-Being Mode Refresh ─────────────────────────────────────────────── */

/* Overlay softening — overrides original .wb-overlay */
.wb-overlay {
    background: rgba(15, 30, 20, 0.82) !important;
}
.wb-overlay-inner {
    gap: 28px;
    padding: 40px 24px;
    text-align: center;
}

/* Human message */
.wb-human-message {
    font-size: 1.5rem;
    font-weight: 200;
    letter-spacing: 0.04em;
    color: #c8e6d0;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.7s ease, transform 0.7s ease;
    max-width: 460px;
    line-height: 1.5;
}
.wb-human-message.wb-msg-visible {
    opacity: 1;
    transform: translateY(0);
}

/* SVG ring timer */
.wb-ring-wrap {
    position: relative;
    width: 140px;
    height: 140px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.6s ease 0.2s, transform 0.6s ease 0.2s;
}
.wb-ring-wrap.wb-ring-visible {
    opacity: 1;
    transform: translateY(0);
}
.wb-ring-svg {
    transform: rotate(-90deg);
}
.wb-ring-track {
    fill: none;
    stroke: rgba(135,188,135,0.18);
    stroke-width: 8;
}
.wb-ring-fill {
    fill: none;
    stroke: #87BC87;
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset 1s linear;
}
.wb-ring-fill.wb-ring-complete {
    stroke: #6aaa6a;
    animation: wb-ring-pulse 1.2s ease-in-out 2;
}
@keyframes wb-ring-pulse {
    0%, 100% { stroke-opacity: 1; }
    50%       { stroke-opacity: 0.5; }
}
.wb-ring-time {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #c8e6d0;
}
.wb-ring-elapsed {
    font-size: 1.6rem;
    font-weight: 200;
    letter-spacing: 0.02em;
    line-height: 1;
}
.wb-ring-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(200,230,208,0.55);
    margin-top: 4px;
}

/* Duration toggle pills */
.wb-duration-toggle {
    display: flex;
    gap: 8px;
    opacity: 0;
    transition: opacity 0.5s ease 0.4s;
}
.wb-duration-toggle.wb-ring-visible {
    opacity: 1;
}
.wb-dur-btn {
    padding: 6px 16px;
    border-radius: 20px;
    border: 1px solid rgba(135,188,135,0.35);
    background: rgba(135,188,135,0.1);
    color: #c8e6d0;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.wb-dur-btn.wb-dur-active {
    background: rgba(135,188,135,0.3);
    border-color: rgba(135,188,135,0.7);
}
.wb-dur-btn:hover {
    background: rgba(135,188,135,0.2);
}

/* Leaves */
.wb-leaves {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 901;
    overflow: hidden;
}
.wb-leaf {
    position: absolute;
    top: -40px;
    width: 16px;
    height: 24px;
    background: rgba(135, 188, 135, 0.32);
    border-radius: 60% 40% 60% 40% / 60% 40% 60% 40%;
    transform-origin: center center;
    opacity: 0;
    animation: wb-leaf-fall 11s ease-in infinite;
    animation-play-state: paused;
}
.wb-leaves.wb-leaves-active .wb-leaf {
    animation-play-state: running;
}
.wb-leaves.wb-leaves-slowing .wb-leaf {
    animation-duration: 22s !important;
}
@keyframes wb-leaf-fall {
    0%   { transform: translateY(0) translateX(0) rotate(0deg);    opacity: 0; }
    5%   { opacity: 0.55; }
    80%  { opacity: 0.4; }
    100% { transform: translateY(110vh) translateX(35px) rotate(200deg); opacity: 0; }
}

/* Ambient sound pills */
.wb-sound-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.5s ease 0.6s;
}
.wb-sound-row.wb-ring-visible {
    opacity: 1;
}
.wb-sound-btn {
    padding: 5px 12px;
    border-radius: 16px;
    border: 1px solid rgba(200,230,208,0.2);
    background: transparent;
    color: rgba(200,230,208,0.6);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}
.wb-sound-btn.wb-sound-active {
    background: rgba(135,188,135,0.2);
    border-color: rgba(135,188,135,0.5);
    color: #c8e6d0;
}
.wb-sound-btn:hover {
    color: #c8e6d0;
}

/* Screen look-away hint */
.wb-lookaway {
    font-size: 13px;
    color: rgba(200,230,208,0.55);
    letter-spacing: 0.03em;
    opacity: 0;
    transition: opacity 1s ease;
    text-align: center;
    max-width: 320px;
}
.wb-lookaway.wb-lookaway-visible {
    opacity: 1;
}

/* Early exit flow */
.wb-leave-row {
    opacity: 0;
    transition: opacity 0.5s ease 0.8s;
}
.wb-leave-row.wb-ring-visible {
    opacity: 1;
}
.wb-leave-link {
    background: none;
    border: none;
    color: rgba(200,230,208,0.45);
    font-size: 13px;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    text-decoration-color: rgba(200,230,208,0.2);
    transition: color 0.2s;
}
.wb-leave-link:hover {
    color: rgba(200,230,208,0.75);
}
.wb-early-exit-prompt {
    text-align: center;
    color: #c8e6d0;
    display: none;
}
.wb-early-exit-prompt p {
    font-size: 14px;
    font-weight: 300;
    margin: 0 0 12px;
}
.wb-early-exit-btns {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.wb-stay-btn {
    padding: 7px 18px;
    border-radius: 20px;
    border: 1px solid rgba(135,188,135,0.4);
    background: rgba(135,188,135,0.15);
    color: #c8e6d0;
    font-size: 13px;
    cursor: pointer;
}
.wb-leave-now-btn {
    padding: 7px 18px;
    border-radius: 20px;
    border: 1px solid rgba(200,230,208,0.2);
    background: transparent;
    color: rgba(200,230,208,0.6);
    font-size: 13px;
    cursor: pointer;
}

/* Exit toast */
.wb-exit-toast {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #1a2e22;
    color: #c8e6d0;
    padding: 12px 24px;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.01em;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.4s ease;
    z-index: 950;
    white-space: nowrap;
}
.wb-exit-toast.wb-toast-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* =========================================================
   DASHBOARD — mobile stacking (must come after desktop rules)
   ========================================================= */
@media (max-width: 768px) {
    .dash-wellscore-row                          { flex-direction: column; }
    .dash-wellscore-row .dash-hs-display         { width: 100%; }
    .dash-wellscore-insight                      { width: 100%; }

    .bt-gauge-row                                { flex-direction: column; align-items: stretch; }
    .bt-gauge-wrap                               { width: 100%; }
    .bt-gauge-svg                                { width: 100%; max-width: 260px; margin: 0 auto; display: block; }
    .bt-signals-col                              { width: 100%; }

    /* Mobile nav search — fill full drawer width */
    #tnav-search-slot .gs-expandable             { flex: 1; min-width: 0; }
    #tnav-search-slot .gs-input                  { width: 100%; }
}

/* Well-Being Mode: break stat card pulsate on session end */
@keyframes wb-stat-pulse {
    0%   { transform: scale(1);    background-color: inherit; }
    15%  { transform: scale(1.07); background-color: #dcfce7; }
    30%  { transform: scale(1);    background-color: inherit; }
    50%  { transform: scale(1.07); background-color: #dcfce7; }
    70%  { transform: scale(1);    background-color: inherit; }
    100% { transform: scale(1);    background-color: inherit; }
}
.wb-stat-pulse {
    animation: wb-stat-pulse 1.4s ease-in-out forwards;
}

/* =========================================================
   INVOICES
   ========================================================= */
.inv-status-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 3px 10px;
    border-radius: 100px;
}
.inv-status-draft   { background: #f3f4f6; color: #6b7080; }
.inv-status-sent    { background: #dbeafe; color: #1d4ed8; }
.inv-status-viewed  { background: #e0e7ff; color: #4338ca; }
.inv-status-paid    { background: #dcfce7; color: #16a34a; }
.inv-status-void    { background: #fef2f2; color: #dc2626; }

.inv-project-group .data-table { margin-bottom: 0; }
.inv-project-group .data-table-wrap { border-radius: 0 0 8px 8px; }

/* =========================================================
   ORG CHART
   ========================================================= */
.org-chart {
    display: flex;
    justify-content: center;
    padding: 8px 0;
    min-width: fit-content;
}
.org-tree-node {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.org-tree-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 12px;
    white-space: nowrap;
    position: relative;
}
.org-tree-name {
    font-weight: 600;
    color: var(--color-text);
    font-size: 11px;
}
.org-tree-card .role-badge {
    font-size: 9px;
    padding: 1px 6px;
}
.org-tree-children {
    display: flex;
    gap: 4px;
    padding-top: 20px;
    position: relative;
}
.org-tree-children-wrap {
    flex-wrap: wrap;
    justify-content: center;
    max-width: 600px;
}

/* Connector lines */
.org-tree-children::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 10px;
    background: var(--color-border);
}
.org-tree-children::after {
    content: '';
    position: absolute;
    top: 10px;
    left: calc(50% - 50% + 24px);
    right: calc(50% - 50% + 24px);
    height: 1px;
    background: var(--color-border);
}
.org-tree-children > .org-tree-node {
    position: relative;
    padding-top: 10px;
}
.org-tree-children > .org-tree-node::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 10px;
    background: var(--color-border);
}

/* Single child — just a straight line */
.org-tree-children:has(> :only-child)::after { display: none; }
.org-tree-children:has(> :only-child)::before { height: 20px; }
.org-tree-children:has(> :only-child) > .org-tree-node::before { display: none; }
.org-tree-children:has(> :only-child) > .org-tree-node { padding-top: 0; }

/* =========================================================
   REPORTS — Overview Dashboard
   ========================================================= */
.rpt-stat-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: .875rem;
    margin-bottom: 1.5rem;
}
.rpt-stat-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 1rem 1.25rem;
}
.rpt-stat-value {
    font-size: 1.65rem;
    font-weight: 800;
    color: var(--color-text);
    line-height: 1;
    margin-bottom: .25rem;
}
.rpt-stat-label {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-text-secondary);
}
.rpt-stat-sub {
    font-size: .75rem;
    color: var(--color-text-muted, var(--color-text-secondary));
    margin-top: .2rem;
}
.rpt-stat-card.rpt-stat-accent {
    border-color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 6%, var(--color-surface));
}
.rpt-stat-card.rpt-stat-accent .rpt-stat-value { color: var(--color-accent); }

.rpt-charts-grid {
    display: grid;
    grid-template-columns: 3fr 2fr;
    grid-template-rows: auto auto;
    gap: 1rem;
}
.rpt-chart-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
}
.rpt-chart-title {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-text-secondary);
    margin-bottom: 1rem;
}
.rpt-chart-canvas-wrap {
    position: relative;
}

/* Date filter bar for dashboard */
.rpt-date-filter {
    display: flex;
    align-items: center;
    gap: .625rem;
}
.rpt-date-filter input[type="date"] {
    font-size: .8rem;
    padding: 5px 10px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    color: var(--color-text);
}
.rpt-date-filter .btn-sm {
    font-size: .8rem;
    padding: 5px 14px;
}

@media (max-width: 1100px) {
    .rpt-stat-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .rpt-stat-grid   { grid-template-columns: repeat(2, 1fr); }
    .rpt-charts-grid { grid-template-columns: 1fr; }
}

/* =========================================
   Appearance & Accessibility
   ========================================= */

/* --- Appearance settings page --- */
.appearance-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
@media (max-width: 768px) {
    .appearance-grid { grid-template-columns: 1fr; }
}

.settings-card-sub {
    font-size: .85rem;
    color: var(--color-text-muted);
    margin: -4px 0 18px;
}

.appearance-options {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.appearance-option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .12s;
}
.appearance-option:hover {
    background: rgba(0,0,0,.03);
}

.appearance-option-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--color-bg);
    color: var(--color-text);
    flex-shrink: 0;
}
.appearance-option-icon-text {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.02em;
}
.appearance-option-none .appearance-option-icon { display: none; }
.appearance-option-none { padding-left: 64px; }

.appearance-option-body {
    flex: 1;
    min-width: 0;
}
.appearance-option-body strong {
    display: block;
    font-size: .875rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
}
.appearance-option-body span {
    display: block;
    font-size: .78rem;
    color: var(--color-text-muted);
    line-height: 1.3;
    margin-top: 1px;
}

/* Toggle switch */
.appearance-toggle {
    flex-shrink: 0;
    position: relative;
    width: 44px;
    height: 24px;
}
.appearance-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.toggle-track {
    display: block;
    width: 44px;
    height: 24px;
    border-radius: 12px;
    background: #d1d5db;
    transition: background .15s;
    position: relative;
}
.toggle-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
    transition: transform .15s;
}
.appearance-toggle input:checked + .toggle-track {
    background: var(--color-accent);
}
.appearance-toggle input:checked + .toggle-track::after {
    transform: translateX(20px);
}

/* ── Comfort Filter Themes ────────────────────────────────────── */

/* Dark */
body.comfort-dark {
    /* GitHub-inspired dark palette — neutral cool-gray with a faint
       blue lean. Battle-tested for long productivity sessions:
       enough contrast to read comfortably, low enough chroma to
       avoid the eye fatigue of high-saturation tinted darks. */
    --color-bg: #0d1117;            /* canvas-default */
    --color-card: #161b22;          /* canvas-subtle */
    --color-surface: #21262d;       /* canvas-inset (inputs, hovers) */
    --color-border: #30363d;        /* border-default */
    --color-sidebar-bg: #010409;    /* canvas-overlay (sidebar deeper than bg) */
    --color-sidebar-txt: #adb5bd;
    --color-sidebar-hover: #21262d;
    --color-sidebar-active: #1f2937;
    --color-text: #e6edf3;          /* fg-default */
    --color-text-muted: #9ca3af;    /* lifted from GitHub fg-muted for readability */
    --color-text-secondary: #9ca3af;
    --color-error-bg: #25171c;      /* danger-subtle */
    --color-error-txt: #ff7b72;     /* danger-fg */
    --color-error-border: #f85149;
    --shadow: 0 1px 3px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2);
}
body.comfort-dark,
body.comfort-dark.section-time,
body.comfort-dark.section-wellbeing,
body.comfort-dark.section-projects,
body.comfort-dark.section-settings,
body.comfort-dark.section-admin,
body.comfort-dark.section-reports,
body.comfort-dark.section-dashboard {
    background: #0d1117 !important;
}
body.comfort-dark .daily-card,
body.comfort-dark .data-table thead th,
body.comfort-dark .topbar,
body.comfort-dark .topbar-dd,
body.comfort-dark .ts-approval-card,
body.comfort-dark .ts-finance-summary-bar {
    background: var(--color-card);
    border-color: var(--color-border);
}
body.comfort-dark .data-table tbody tr:hover { background: #21262d; }
body.comfort-dark .form-control,
body.comfort-dark .export-input,
body.comfort-dark select,
body.comfort-dark input[type="date"],
body.comfort-dark input[type="text"],
body.comfort-dark input[type="email"],
body.comfort-dark input[type="password"],
body.comfort-dark input[type="number"],
body.comfort-dark textarea {
    background: #21262d;
    border-color: #30363d;
    color: #e6edf3;
}
body.comfort-dark .flash-success { background: #14532d; color: #86efac; border-color: #166534; }
body.comfort-dark .appearance-option:hover { background: rgba(255,255,255,.04); }
body.comfort-dark .appearance-option-icon { background: #21262d; }
body.comfort-dark .toggle-track { background: #30363d; }
body.comfort-dark .sidebar { background: var(--color-sidebar-bg); border-color: var(--color-border); }
body.comfort-dark .dash-greeting { color: var(--color-text); }

/* Dark — month calendar. Base cells/stats already use --color-surface, but
   the heat scale, future cells, and hover states are hardcoded light values
   that show as white tiles on the dark canvas. Remap to a GitHub-style dark
   green ramp so the heatmap still reads. */
body.comfort-dark .month-cell-future { background: var(--color-bg); }
body.comfort-dark .month-cell:hover { border-color: #484f58; }
body.comfort-dark .month-cell-link:hover { background: #2d333b; }
body.comfort-dark .month-day-num:hover { background: rgba(255,255,255,.08); }
body.comfort-dark .heat-light, body.comfort-dark .heat-light-swatch { background: #0e4429; border-color: #006d32; }
body.comfort-dark .heat-half,  body.comfort-dark .heat-half-swatch  { background: #006d32; border-color: #2ea043; }
body.comfort-dark .heat-full,  body.comfort-dark .heat-full-swatch  { background: #1a7f37; border-color: #3fb950; }
body.comfort-dark .month-hours { color: #7ee2a8; }

/* Dark — overdue/warning table rows. Base uses a light amber fill with
   !important, so the dark override must also be !important to win. */
body.comfort-dark .row-warning td { background: #2a1f12 !important; }

/* Dark — notification rules: intro banner + message-preview boxes all use
   hardcoded pastel fills that wash out light text on the dark canvas. */
body.comfort-dark .notif-philosophy {
    background: linear-gradient(135deg, #161b22 0%, #13211a 100%);
    border-color: #30363d;
}
body.comfort-dark .notif-msg-employee { background: rgba(74,222,128,.08); }
body.comfort-dark .notif-msg-manager  { background: rgba(250,204,21,.10); }

/* Dark — table row hover. The base .data-table sets the hover fill at the
   td level (#fafafa), which out-specifies the tr-level dark override above,
   so every table on the app flashed a white row on hover. Match the td. */
body.comfort-dark .data-table tbody tr:hover td { background: #21262d; }

/* Dark — other light list/row hovers + the selected export-type card. */
body.comfort-dark .reports-picker .reports-picker__row:hover { background: #21262d; }
body.comfort-dark .quick-link:hover { background: #21262d; border-color: #484f58; }
body.comfort-dark .wlc-check-item:hover { background: #21262d; }
body.comfort-dark .export-type-card input[type="radio"]:checked + .export-type-inner { background: rgba(56,93,127,.18); }

body.comfort-dark .ts-view-btn { color: var(--color-text-muted); background: var(--color-card); border-color: var(--color-border); }
body.comfort-dark .ts-view-btn-active { background: var(--color-primary, #395D7F); color: #fff; border-color: var(--color-primary, #395D7F); }

/* Dark — nav bar */
body.comfort-dark .tnav-links { background: #21262d; }
body.comfort-dark .tnav-link { color: #8b949e; }
body.comfort-dark .tnav-link:hover { color: #e6edf3; text-decoration-color: var(--color-brand-accent, var(--color-accent)); }
body.comfort-dark .tnav-link.active { background: var(--color-accent, #88BC86); color: #fff; }

/* Dark — icon tray & search */
body.comfort-dark .topbar-icon-tray { background: #21262d; border-color: #30363d; }
body.comfort-dark .topbar-icon-tray .topbar-bell-btn:hover,
body.comfort-dark .topbar-icon-tray .topbar-icon-btn:hover { background: rgba(255,255,255,.08); }
body.comfort-dark .gs-circle-btn { background: #21262d; border-color: #30363d; color: #8b949e; }
body.comfort-dark .gs-circle-btn:hover { background: #1f2937; color: #e6edf3; }
body.comfort-dark .gs-input { background: #21262d; border-color: #30363d; color: #e6edf3; }
body.comfort-dark .gs-results { background: #161b22; border-color: #30363d; }

/* Dark — dropdowns */
body.comfort-dark .topbar-icon-dropdown,
body.comfort-dark .notif-dropdown { background: #161b22; border-color: #30363d; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
body.comfort-dark .topbar-dd-item { color: #c9d1d9; }
body.comfort-dark .topbar-dd-item:hover,
body.comfort-dark .topbar-dd-item.active { background: #21262d; color: #e6edf3; }
body.comfort-dark .topbar-dd-divider { color: #6e7681; border-color: #30363d; }
body.comfort-dark .topbar-dd-divider-line { border-color: #30363d; }
body.comfort-dark .notif-dropdown-header { color: #8b949e; border-color: #30363d; }
body.comfort-dark .notif-dropdown-item { border-color: #30363d; }
body.comfort-dark .notif-dropdown-empty { color: #6e7681; }

/* Dark — dashboard cards & stat badges */
body.comfort-dark .dash-insight { color: var(--color-text); }
body.comfort-dark .dash-insight-icon { background: #21262d; color: #8b949e; }
body.comfort-dark .dash-greeting-sub { color: var(--color-text-muted); }
body.comfort-dark .dash-stat-label { color: var(--color-text-muted); }
body.comfort-dark .dash-stat-value { color: var(--color-text); }
body.comfort-dark .dash-ai-input-wrap { background: var(--color-card); border-color: var(--color-border); }
body.comfort-dark .dash-ai-input { background: transparent; color: var(--color-text); }
body.comfort-dark .dash-ai-btn { background: var(--color-accent); }
body.comfort-dark .dash-panel { background: var(--color-card); border-color: var(--color-border); }
body.comfort-dark .dash-panel-header { border-color: var(--color-border); }
body.comfort-dark .dash-pill,
body.comfort-dark .dash-toggle-btn { background: #21262d; color: var(--color-text-muted); border-color: var(--color-border); }
body.comfort-dark .dash-pill.active,
body.comfort-dark .dash-toggle-btn.active { background: var(--color-accent); color: #fff; }

/* Dark — time entry rows */
body.comfort-dark .te-row { border-color: var(--color-border); }
body.comfort-dark .te-row:hover { background: #21262d; }
body.comfort-dark .te-project-name,
body.comfort-dark .te-task-name { color: var(--color-text); }
body.comfort-dark .te-meta { color: var(--color-text-muted); }
body.comfort-dark .te-hours { color: var(--color-text); }

/* Dark — wellbeing signals */
body.comfort-dark .wb-signal-card { background: var(--color-card); border-color: var(--color-border); }
body.comfort-dark .wb-mode-card { background: var(--color-card); border-color: var(--color-border); }
body.comfort-dark .wb-mode-label { color: var(--color-text); }
body.comfort-dark .wb-mode-sub { color: var(--color-text-muted); }

/* Dark — misc UI */
body.comfort-dark .empty-state { color: var(--color-text-muted); }
body.comfort-dark .settings-card-title { color: var(--color-text); }
body.comfort-dark .badge,
body.comfort-dark .severity-badge { border-color: var(--color-border); }
body.comfort-dark .topbar-bell-badge { background: #ef4444; color: #fff; }
body.comfort-dark .btn-secondary { background: #21262d; color: var(--color-text); border-color: var(--color-border); }
body.comfort-dark .btn-secondary:hover { background: #1f2937; }
body.comfort-dark hr { border-color: var(--color-border); }

/* Dark — floating timer */
body.comfort-dark .ft-popup { box-shadow: 0 4px 24px rgba(0,0,0,.4); }
body.comfort-dark .ft-cancel-btn { background: #30363d; }
body.comfort-dark .ft-cancel-btn:hover { background: #444c56; }
body.comfort-dark .ft-current-heading { color: var(--color-text); }
body.comfort-dark .ft-proj-results { box-shadow: 0 4px 16px rgba(0,0,0,.4); }
/* Stopwatch glow circle was hard-coded white — use the surface
   tone (one step up from card) so the timer clock face stays
   visually distinct from the page background instead of melting
   into it. The hover override below has higher specificity than
   .ft-fab-glow alone, so the dark hover rule has to match the
   same selector shape to win. */
body.comfort-dark .ft-fab-glow { fill: #21262d; }
body.comfort-dark .ft-fab:hover:not(.ft-fab-running) .ft-fab-glow { fill: #21262d; }

/* Dark — global search overlay (Cmd+K modal) */
body.comfort-dark .gs-overlay { background: rgba(0,0,0,.55); }
body.comfort-dark .gs-modal { background: var(--color-card); box-shadow: 0 24px 64px rgba(0,0,0,.5); }
body.comfort-dark .gs-modal-input { background: var(--color-card); color: var(--color-text); }
body.comfort-dark .gs-modal-input::placeholder { color: var(--color-text-muted); }
body.comfort-dark .gs-modal-body { border-color: var(--color-border); }
body.comfort-dark .gs-section-label { color: var(--color-text-muted); background: var(--color-card); }
body.comfort-dark .gs-item:hover,
body.comfort-dark .gs-item.is-focused { background: rgba(255,255,255,.04); }
body.comfort-dark .gs-close-btn { color: var(--color-text-muted); }
body.comfort-dark .gs-close-btn:hover { background: rgba(255,255,255,.06); color: var(--color-text); }

/* Dark — notifications dropdown header had a hard-coded white bg
   making the top strip glare even though the body went dark. */
body.comfort-dark .notif-dropdown-header { background: var(--color-card); color: var(--color-text-muted); }

/* Dark — topbar icon dropdowns (Getting Started checklist, gear menu)
   already get card bg from the earlier topbar-icon-dropdown rule, but
   the inner item rows + dividers stayed white because their inline
   styles in the partial override classes. !important keeps the bg
   dark for the whole dropdown body. */
body.comfort-dark .topbar-icon-dropdown { background: var(--color-card) !important; border-color: var(--color-border) !important; }
body.comfort-dark .topbar-icon-dropdown > * { color: var(--color-text); }
body.comfort-dark .topbar-icon-dropdown hr { border-color: var(--color-border); }

/* Search overlay z-index needs to clear the floating timer
   (#ft-widget sits at 1100). */
body .gs-overlay { z-index: 1200; }

/* Dark — notification severity colors. The light-mode reds and
   ambers (#dc2626, #d97706) are too intense on a near-black
   background — they shout instead of inform. Swapped for the
   desaturated GitHub Primer accent tones used elsewhere in the
   dark theme. Icon background tints also reduced from pastel
   washes to dark translucent panels. */
body.comfort-dark .notif-item-danger  .notif-item-icon { background: rgba(248, 81, 73, .15); color: #ff7b72; }
body.comfort-dark .notif-item-warning .notif-item-icon { background: rgba(210, 153, 34, .15); color: #d29922; }
body.comfort-dark .notif-item-success .notif-item-icon { background: rgba(63, 185, 80, .15); color: #3fb950; }
body.comfort-dark .notif-item-info    .notif-item-icon { background: rgba(88, 166, 255, .15); color: #58a6ff; }
body.comfort-dark .notif-item-danger  .notif-item-title { color: #ff7b72; }
body.comfort-dark .notif-item-warning .notif-item-title { color: #d29922; }
body.comfort-dark .notif-item-success .notif-item-title { color: #3fb950; }

/* Same desaturation for any other red/amber accent surfaces. */
body.comfort-dark .nav-alert-badge { background: #f85149; color: #fff; }
body.comfort-dark .lockout-banner { background: #25171c; border-color: #f85149; color: var(--color-text); }
body.comfort-dark .lockout-banner strong { color: #ff7b72; }

/* Password show/hide eyeball toggle. The script in layouts/app
   wraps every input[type=password] with .pw-toggle-wrap; this CSS
   positions the toggle button on the right side of the input. */
.pw-toggle-wrap {
    position: relative;
    display: block;
}
.pw-toggle-wrap > input {
    width: 100%;
}
.pw-toggle-btn {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    padding: 4px;
    margin: 0;
    cursor: pointer;
    color: var(--color-text-muted, #6b7280);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: color .12s, background .12s;
}
.pw-toggle-btn:hover { color: var(--color-text, #111); background: rgba(0,0,0,.04); }
.pw-toggle-btn:focus-visible { outline: 2px solid var(--color-accent, #88BC86); outline-offset: 1px; }
body.comfort-dark .pw-toggle-btn { color: var(--color-text-muted); }
body.comfort-dark .pw-toggle-btn:hover { color: var(--color-text); background: rgba(255,255,255,.06); }

/* Dark — Plan & Billing page. The view is built almost entirely
   with inline styles (40+ instances) so class-level overrides
   can't help. Targeting the wrapper class with attribute selectors
   to flip the most common patterns; !important is necessary to
   beat the inline declarations. */
body.comfort-dark .admin-plan-page [style*="background:#fff"],
body.comfort-dark .admin-plan-page [style*="background: #fff"],
body.comfort-dark .admin-plan-page [style*="background:#f9fafb"],
body.comfort-dark .admin-plan-page [style*="background: #f9fafb"] {
    background: var(--color-card) !important;
}
body.comfort-dark .admin-plan-page [style*="background:#f3f4f6"],
body.comfort-dark .admin-plan-page [style*="background: #f3f4f6"] {
    background: var(--color-surface) !important;
}
body.comfort-dark .admin-plan-page [style*="background:#f8fafc"] {
    background: var(--color-card) !important;
}
body.comfort-dark .admin-plan-page [style*="border:1px solid #e5e7eb"],
body.comfort-dark .admin-plan-page [style*="border:1px dashed #cbd5e1"] {
    border-color: var(--color-border) !important;
}
body.comfort-dark .admin-plan-page [style*="border:2px solid #e5e7eb"] {
    border-color: var(--color-border) !important;
}
body.comfort-dark .admin-plan-page [style*="color:#111"],
body.comfort-dark .admin-plan-page [style*="color: #111"] {
    color: var(--color-text) !important;
}
body.comfort-dark .admin-plan-page [style*="color:#374151"],
body.comfort-dark .admin-plan-page [style*="color: #374151"] {
    color: var(--color-text) !important;
}
body.comfort-dark .admin-plan-page [style*="color:#6b7280"],
body.comfort-dark .admin-plan-page [style*="color: #6b7280"],
body.comfort-dark .admin-plan-page [style*="color:#0C1833"],
body.comfort-dark .admin-plan-page [style*="color:#4b5563"] {
    color: var(--color-text-muted) !important;
}
/* Trial banner specifically — keeps its sage-green identity but
   on a dark surface. */
body.comfort-dark .admin-plan-page [style*="background:linear-gradient(135deg,#f0fdf4"] {
    background: rgba(63, 185, 80, .08) !important;
    border-color: #3fb950 !important;
}
body.comfort-dark .admin-plan-page [style*="color:#166534"] { color: #3fb950 !important; }
body.comfort-dark .admin-plan-page [style*="color:#4b7c59"] { color: var(--color-text-muted) !important; }

/* Password show/hide eyeball toggle. The script in layouts/app
   .notif-rule-item:nth-child(even) had a hard-coded #fafafa zebra
   stripe which became a glaring light strip in dark mode. Plus
   the channel / escalation / type pill backgrounds are pastel
   washes that don't work on a dark surface. */
body.comfort-dark .notif-rule-item { background: var(--color-card); }
body.comfort-dark .notif-rule-item:nth-child(even) { background: var(--color-surface); }
body.comfort-dark .notif-rule-list { border-color: var(--color-border); }
body.comfort-dark .notif-rule-channel    { background: rgba(88, 166, 255, .15); color: #58a6ff; }
body.comfort-dark .notif-rule-escalation { background: rgba(210, 153, 34, .15); color: #d29922; }
body.comfort-dark .notif-rule-type       { background: rgba(63, 185, 80, .15); color: #3fb950; }
body.comfort-dark .notif-badge-off       { background: rgba(125, 133, 144, .2); color: var(--color-text-muted); }

/* Dark — Getting Started checklist dropdown. Distinct class name
   (.setup-check-*) wasn't covered by the generic icon-dropdown
   override; it was sitting on its own white background with white
   hovers. Full coverage now. */
body.comfort-dark .setup-check-dropdown {
    background: var(--color-card);
    border-color: var(--color-border);
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
body.comfort-dark .setup-check-item {
    background: var(--color-card);
    color: var(--color-text);
    border-color: var(--color-border);
}
body.comfort-dark .setup-check-item:hover { background: #21262d; }
body.comfort-dark .setup-check-footer { border-color: var(--color-border); }
body.comfort-dark .setup-item-done .setup-check-label { color: var(--color-text-muted); }
body.comfort-dark .setup-check-icon { color: var(--color-text-muted); }

/* Dark — AI chat (Time Being AI panel) */
body.comfort-dark .ai-thread { background: var(--color-card); border-color: var(--color-border); }
body.comfort-dark .ai-chip { background: var(--color-card); border-color: var(--color-border); color: var(--color-text); }
body.comfort-dark .ai-chip:hover { background: #21262d; border-color: var(--color-accent); color: var(--color-accent); }
body.comfort-dark .ai-bubble-assistant { background: #21262d; color: var(--color-text); }
body.comfort-dark .ai-bubble-error { background: #2d1515; color: #f87171; border-color: #7f1d1d; }
body.comfort-dark .ai-typing { background: #21262d; }
body.comfort-dark .ai-input { background: #21262d; border-color: var(--color-border); color: var(--color-text); }
body.comfort-dark .ai-input:focus { border-color: var(--color-accent); }
body.comfort-dark .ai-input::placeholder { color: #6e7681; }

/* Dark — onboarding nudge banners (verify email + set password).
   Inline styles on the elements make !important necessary; the
   inline path is preserved so the banners render right when CSS is
   blocked, and the dark override only kicks in inside comfort-dark. */
body.comfort-dark .banner-warning {
    background: #1d1c11 !important;       /* attention-subtle (GitHub) */
    border-left-color: #9e6a03 !important;
    color: #e6edf3 !important;             /* body text: fg-default */
}
body.comfort-dark .banner-warning strong {
    color: #d29922 !important;             /* heading: attention accent */
}
body.comfort-dark .banner-warning button,
body.comfort-dark .banner-warning a {
    color: #d29922 !important;
    border-color: #9e6a03 !important;
}
body.comfort-dark .banner-info {
    background: #0d1b2a !important;       /* accent-subtle (GitHub) */
    border-left-color: #1f6feb !important;
    color: #e6edf3 !important;             /* body text: fg-default */
}
body.comfort-dark .banner-info strong {
    color: #58a6ff !important;             /* heading: accent-fg */
}
body.comfort-dark .banner-info button,
body.comfort-dark .banner-info a {
    color: #58a6ff !important;
    border-color: #1f6feb !important;
}

/* Dark — dashboard cards & layout */
body.comfort-dark .dash-card { background: var(--color-card); border-color: var(--color-border); }
body.comfort-dark .dash-card-toggle { background: var(--color-accent); }
body.comfort-dark .dash-toggle-btn { color: rgba(255,255,255,.7); }
body.comfort-dark .dash-toggle-btn.active { background: var(--color-primary, #395D7F); color: #fff; }
body.comfort-dark .dash-stat-card { background: #21262d; border-color: var(--color-border); }
body.comfort-dark .dash-stat-ok,
body.comfort-dark .dash-stat-card.hs-great,
body.comfort-dark .dash-stat-card.hs-good { background: #1a2e1a; border-color: #2d6a2d; }
body.comfort-dark .dash-stat-warn,
body.comfort-dark .dash-stat-card.hs-tired { background: #2e2a1a; border-color: #6a5a2d; }
body.comfort-dark .dash-stat-bad,
body.comfort-dark .dash-stat-card.hs-stressed { background: #2e1a1a; border-color: #6a2d2d; }
body.comfort-dark .dash-stat-card.hs-neutral { background: #21262d; border-color: var(--color-border); }

/* Dark — WellScore card colors */
body.comfort-dark .hs-great { background: #1a2e1a; border-color: #2d6a2d; }
body.comfort-dark .hs-good  { background: #1a2440; border-color: #2d4d8a; }
body.comfort-dark .hs-neutral { background: #252040; border-color: #4a3d7a; }
body.comfort-dark .hs-tired { background: #2e2a1a; border-color: #6a5a2d; }
body.comfort-dark .hs-stressed { background: #2e1a1a; border-color: #6a2d2d; }
body.comfort-dark .hs-settings,
body.comfort-dark .hs-reports { background: #21262d; color: #8b949e; }

/* Dark — AI input */
body.comfort-dark .ai-hero-input-wrap { background: var(--color-card); border-color: var(--color-border); }
body.comfort-dark .ai-hero-textarea { color: var(--color-text); }
body.comfort-dark .ai-hero-textarea::placeholder { color: var(--color-text-muted); }
body.comfort-dark .ai-hero-btn { background: #3d5c78; }
body.comfort-dark .ai-hero-btn:hover { background: #4E7396; }
body.comfort-dark .ai-hero-lockout { background: #2e2a1a; border-color: #6a5a2d; color: #fcd34d; }

/* Dark — entry items */
body.comfort-dark .entry-item { border-color: var(--color-border); background: transparent; }
body.comfort-dark .entry-item:hover { background: #21262d; }
body.comfort-dark .entry-project { color: var(--color-text-muted); }
body.comfort-dark .entry-task { color: var(--color-text); }
body.comfort-dark .entry-hours { color: var(--color-text); }
body.comfort-dark .entry-icon-btn { color: var(--color-text-muted); }
body.comfort-dark .entry-icon-btn:hover { color: var(--color-text); background: rgba(255,255,255,.06); }

/* Dark — panel footer */
body.comfort-dark .dash-panel-footer-link:hover { background: #21262d; }

/* Dark — wellbeing mini stats */
body.comfort-dark .dash-mini-stat { background: #21262d; border-color: var(--color-border); }

/* Dark — wellbeing signals */
body.comfort-dark .wb-signal-item { background: var(--color-card); border-color: var(--color-border); }
body.comfort-dark .wbc-stat { background: #21262d; border-color: var(--color-border); }
body.comfort-dark .wbc-stat-band { color: var(--color-text-muted); }

/* Dark — flash messages */
body.comfort-dark .flash { background: var(--color-card); border-color: var(--color-border); color: var(--color-text); }

/* Dark — gradient fade on scrollable entry list */
body.comfort-dark #dash-recent-entries:has(.entry-list-scroll.is-overflowing)::after {
    background: linear-gradient(to bottom, transparent, var(--color-bg));
}

/* Dark — remaining white panel/modal/menu surfaces that hardcoded #fff and
   so rendered as bright white boxes (often light-on-light text) on the dark
   canvas. Route them all through the themed card surface. */
body.comfort-dark .tnav-mobile-menu,
body.comfort-dark .ql-panel,
body.comfort-dark .wlc-modal,
body.comfort-dark .wb-feedback-inner,
body.comfort-dark .mn-section,
body.comfort-dark .reports-picker {
    background: var(--color-card);
    border-color: var(--color-border);
}

/* Dim */
body.comfort-dim {
    --color-bg: #e8e6e0;
    --color-card: #f0eee8;
    --color-surface: #f0eee8;
    --color-border: #d0cec8;
    --color-text: #4a4a55;
    --color-text-muted: #7a7a88;
    --color-text-secondary: #7a7a88;
    --shadow: 0 1px 2px rgba(0,0,0,.05);
}
body.comfort-dim,
body.comfort-dim.section-time,
body.comfort-dim.section-wellbeing,
body.comfort-dim.section-projects,
body.comfort-dim.section-settings,
body.comfort-dim.section-admin,
body.comfort-dim.section-reports,
body.comfort-dim.section-dashboard {
    background: #e8e6e0;
}

/* Warm */
body.comfort-warm {
    --color-bg: #f7f0e6;
    --color-card: #fdf8f0;
    --color-surface: #fdf8f0;
    --color-border: #e6ddd0;
    --color-sidebar-bg: #faf5ec;
    --color-text: #3d3225;
    --color-text-muted: #7a6e5e;
    --color-text-secondary: #7a6e5e;
}
body.comfort-warm,
body.comfort-warm.section-time,
body.comfort-warm.section-wellbeing,
body.comfort-warm.section-projects,
body.comfort-warm.section-settings,
body.comfort-warm.section-admin,
body.comfort-warm.section-reports,
body.comfort-warm.section-dashboard {
    background: #f7f0e6;
}

/* Blue light */
body.comfort-blue-light {
    --color-bg: #f5f0e4;
    --color-card: #faf6ec;
    --color-surface: #faf6ec;
    --color-border: #e2dcd0;
    --color-text: #2e2a22;
    --color-text-muted: #6e6a5e;
    --color-text-secondary: #6e6a5e;
    --color-accent: #b87a2a;
    --color-accent-dark: #8e5a18;
}
body.comfort-blue-light,
body.comfort-blue-light.section-time,
body.comfort-blue-light.section-wellbeing,
body.comfort-blue-light.section-projects,
body.comfort-blue-light.section-settings,
body.comfort-blue-light.section-admin,
body.comfort-blue-light.section-reports,
body.comfort-blue-light.section-dashboard {
    background: #f5f0e4;
}

/* Anti-headache */
body.comfort-anti-headache {
    --color-bg: #eeece8;
    --color-card: #f5f3f0;
    --color-surface: #f5f3f0;
    --color-border: #ddd9d4;
    --color-text: #555050;
    --color-text-muted: #8a8580;
    --color-text-secondary: #8a8580;
    --color-accent: #6e7a8a;
    --color-accent-dark: #555f6d;
    --shadow: none;
}
body.comfort-anti-headache,
body.comfort-anti-headache.section-time,
body.comfort-anti-headache.section-wellbeing,
body.comfort-anti-headache.section-projects,
body.comfort-anti-headache.section-settings,
body.comfort-anti-headache.section-admin,
body.comfort-anti-headache.section-reports,
body.comfort-anti-headache.section-dashboard {
    background: #eeece8;
}

/* High contrast */
body.comfort-high-contrast {
    --color-bg: #ffffff;
    --color-card: #ffffff;
    --color-surface: #ffffff;
    --color-border: #000000;
    --color-sidebar-bg: #000000;
    --color-sidebar-txt: #ffffff;
    --color-sidebar-hover: #222222;
    --color-sidebar-active: #333333;
    --color-accent: #0000cc;
    --color-accent-dark: #000099;
    --color-text: #000000;
    --color-text-muted: #333333;
    --color-text-secondary: #333333;
    --shadow: 0 0 0 1px #000;
}
body.comfort-high-contrast,
body.comfort-high-contrast.section-time,
body.comfort-high-contrast.section-wellbeing,
body.comfort-high-contrast.section-projects,
body.comfort-high-contrast.section-settings,
body.comfort-high-contrast.section-admin,
body.comfort-high-contrast.section-reports,
body.comfort-high-contrast.section-dashboard {
    background: #ffffff;
}
body.comfort-high-contrast .daily-card,
body.comfort-high-contrast .data-table,
body.comfort-high-contrast .form-control,
body.comfort-high-contrast input,
body.comfort-high-contrast select,
body.comfort-high-contrast textarea {
    border: 2px solid #000 !important;
}
body.comfort-high-contrast .sidebar { background: #000; }
body.comfort-high-contrast .sidebar a { color: #fff; }

/* ── Accessibility Utility Classes ────────────────────────────── */

/* Easy read — zoom scales all explicit font-sizes */
body.a11y-easy-read .main-content {
    zoom: 1.15;
    -moz-transform: scale(1.15);
    -moz-transform-origin: top left;
    line-height: 1.8;
    letter-spacing: 0.02em;
}

/* Reduced motion */
body.a11y-reduced-motion,
body.a11y-reduced-motion *,
body.a11y-reduced-motion *::before,
body.a11y-reduced-motion *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}

/* Screen reader enhancements */
body.a11y-screen-reader a:focus,
body.a11y-screen-reader button:focus,
body.a11y-screen-reader input:focus,
body.a11y-screen-reader select:focus,
body.a11y-screen-reader textarea:focus,
body.a11y-screen-reader [tabindex]:focus {
    outline: 3px solid var(--color-accent) !important;
    outline-offset: 2px !important;
}

/* Dyslexia friendly — Lexend by Google, designed for reading fluency */
body.a11y-dyslexia-friendly {
    font-family: 'Lexend', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    letter-spacing: 0.02em;
    word-spacing: 0.08em;
    line-height: 1.7;
}
body.a11y-dyslexia-friendly * {
    font-family: inherit !important;
}
body.a11y-dyslexia-friendly .sidebar { font-family: inherit !important; }

/* Colorblind mode — replace red/green with blue/orange */
body.a11y-colorblind-mode .severity-high,
body.a11y-colorblind-mode .mini-bar-low { background: #d97706; color: #fff; }
body.a11y-colorblind-mode .severity-low,
body.a11y-colorblind-mode .mini-bar-good { background: #2563eb; color: #fff; }
body.a11y-colorblind-mode .flash-success { background: #dbeafe; color: #1e40af; border-color: #93c5fd; }
body.a11y-colorblind-mode .flash-error,
body.a11y-colorblind-mode .alert-error { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
body.a11y-colorblind-mode .wb-signal-good { border-left-color: #2563eb; }
body.a11y-colorblind-mode .wb-signal-warn { border-left-color: #d97706; }

/* ── BurnTrack Live ─────────────────────────────────────────────── */

/* ── Elevated BurnTrack Dashboard Card ───────────────────────── */
.bt-card { display:block; cursor:pointer; }
.bt-card:hover { opacity:.95; }
.bt-card-header { font-size:13px; font-weight:600; color:var(--color-text-muted); text-transform:uppercase; letter-spacing:.5px; margin-bottom:16px; }
.bt-card-main { display:flex; gap:24px; align-items:flex-start; }
.bt-gauge-area { display:flex; flex-direction:column; align-items:center; flex-shrink:0; width:200px; }
.bt-gauge-wrap { width:200px; height:120px; position:relative; }
.bt-gauge-svg { width:100%; height:100%; }
.bt-gauge-score { display:flex; align-items:baseline; justify-content:center; margin-top:-12px; }
.bt-gauge-num { font-size:44px; font-weight:800; line-height:1; letter-spacing:-2px; color:var(--color-text); }
.bt-gauge-denom { font-size:18px; font-weight:400; color:var(--color-text-muted); margin-left:2px; }
.bt-gauge-trend { font-size:14px; font-weight:700; margin-top:4px; text-align:center; }
.bt-factors-area { flex:1; min-width:0; padding-top:8px; }
.bt-factors-header { font-size:12px; font-weight:600; color:var(--color-text-muted); margin-bottom:12px; }
.bt-factor-row { display:flex; align-items:center; gap:8px; font-size:13px; padding:5px 0; color:var(--color-text); }
.bt-factor-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
/* Team burn rate scroll on dashboard */
.bt-team-scroll { max-height:340px; overflow-y:auto; position:relative; }
.bt-team-scroll.is-overflowing::after {
    content: '';
    position: sticky;
    bottom: 0; left: 0; right: 0;
    display: block;
    height: 48px;
    background: linear-gradient(to bottom, transparent, var(--color-card, #fff));
    pointer-events: none;
    margin-top: -48px;
}

.bt-card-insight { display:flex; align-items:flex-start; gap:10px; padding:14px 16px; background:var(--color-bg); border-radius:10px; font-size:13px; color:var(--color-text-secondary); line-height:1.5; margin-top:18px; }
.bt-insight-icon { flex-shrink:0; font-size:18px; margin-top:1px; }

/* Signal feed — chat style */
.live-feed-card { margin-bottom:16px; }
.live-feed-wrap { position:relative; }
.live-feed { max-height:224px; overflow-y:auto; }
.live-feed-wrap:has(.live-feed.is-overflowing)::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 56px;
    background: linear-gradient(to bottom, transparent, var(--color-card, #fff));
    pointer-events: none;
    border-radius: 0 0 10px 10px;
}
.live-feed-row { display:flex; align-items:center; gap:8px; padding:7px 0; border-bottom:1px solid var(--color-border); font-size:13px; }
.live-feed-row:last-child { border-bottom:none; }
.live-feed-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.live-feed-name { font-weight:600; flex-shrink:0; min-width:90px; }
.live-feed-you { color:var(--color-accent); }
.live-feed-text { flex:1; color:var(--color-text-secondary); }
.live-feed-time { font-size:10px; color:var(--color-text-muted); flex-shrink:0; white-space:nowrap; }
.live-feed-level { font-size:9px; font-weight:700; color:#fff; padding:2px 6px; border-radius:8px; flex-shrink:0; }
.live-feed-empty { display:flex; align-items:center; gap:10px; padding:20px 0; justify-content:center; color:var(--color-text-muted); font-size:13px; }



/* Section labels */
.live-section-label { display:flex; align-items:center; }
.live-section-you-badge { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; background:#2E4057; color:#fff; padding:3px 12px; border-radius:10px; }
.live-section-team-badge { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; background:#4E7396; color:#fff; padding:3px 12px; border-radius:10px; }

/* Signal cards */
.live-signal-list { display:flex; flex-direction:column; gap:10px; }
.live-signal-card { padding:12px 16px; border-radius:6px; background:var(--color-bg); }
.live-signal-header { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.live-signal-icon { font-size:16px; flex-shrink:0; }
.live-signal-title { font-weight:600; font-size:14px; flex:1; }
.live-signal-level { font-size:10px; font-weight:700; color:#fff; padding:2px 8px; border-radius:10px; text-transform:uppercase; letter-spacing:.5px; flex-shrink:0; }
.live-signal-detail { font-size:13px; color:var(--color-text-secondary); line-height:1.5; }
.live-signal-meta { margin-top:6px; }
.live-signal-category { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; color:var(--color-text-muted); }
.live-team-header { display:flex; justify-content:space-between; align-items:center; padding:4px 0; }
.live-team-signals { padding-top:12px; border-top:1px solid var(--color-border); margin-top:8px; }

/* Pulse */
.live-pulse { display:inline-block; width:8px; height:8px; border-radius:50%; background:#87BC87; margin-right:4px; animation:live-pulse-anim 2s ease-in-out infinite; }
.live-pulse-err { background:#D94040; }
@keyframes live-pulse-anim { 0%,100% { opacity:1; } 50% { opacity:.3; } }

/* ── Cross-document View Transitions for landing → login morph ─────────────
   Mirrors the rules in layouts/guest. Loaded via layouts/app since /login uses
   the authed layout shell even when the user isn't logged in. */
@view-transition { navigation: auto; }
.site-header__logo img { view-transition-name: tb-logo; }
::view-transition-group(tb-logo) { animation-duration: 0.4s; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
::view-transition-group(root)    { animation-duration: 0.3s; }

/* Shared site-header for /login + /signup — matches landing exactly, including
   layout container so the logo lands at the same pixel position as on /. */

/* Override the body bg AND override existing .login-page / .signup-page layout
   rules with higher specificity. The original .login-page was a centering flex
   container with a dark-navy bg; we replace that so the header sits at top and
   the card centers in the remaining space. */
body.auth-body,
html body .login-page,
html body .signup-page {
    background: #D9E7F6 !important;
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
html body .login-page,
html body .signup-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
}

/* Header — match /lp/css/header.css verbatim (.site-header + .site-header__inner). */
.login-page .site-header,
.signup-page .site-header {
    position: relative;
    z-index: 50;
    padding-top: 20px;
    padding-bottom: 20px;
    flex: 0 0 auto;          /* don't grow / shrink inside the page column */
}
.login-page .site-header__inner,
.signup-page .site-header__inner {
    width: 100%;
    max-width: 1360px;
    margin-inline: auto;
    padding-inline: clamp(20px, 4vw, 48px);
    display: flex;
    align-items: center;
    gap: 24px;
    /* Match the marketing topnav row height — its .btn--primary CTA is 50px
       tall and determines the inner height there. Equalizing here keeps the
       vertically-centered logo at the same pixel position as on /. */
    min-height: 50px;
}
/* .site-header__logo + canvas/img sizing + mobile override come from
   lp/css/header.css, loaded on the login page via @push('head') in
   resources/views/auth/login.blade.php. Same source as the marketing
   pages — single point of truth, no drift. */
.login-page .site-header__cta,
.signup-page .site-header__cta {
    margin-left: auto;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: #6b7c8d;
}
.login-page .site-header__cta .btn--ghost,
.signup-page .site-header__cta .btn--ghost {
    display: inline-flex; align-items: center; gap: 6px;
    color: #395D7F; font-weight: 600; text-decoration: none;
    /* Asymmetric L/R padding: the trailing arrow → carries built-in
       whitespace, so trimming right padding optically balances the row. */
    padding: 8px 10px 8px 14px; border-radius: 999px; transition: background .15s;
}
.login-page .site-header__cta .btn--ghost:hover,
.signup-page .site-header__cta .btn--ghost:hover { background: rgba(57, 93, 127, 0.08); }

/* Login card: center inside the remaining space (since .login-page is now a
   top-aligned column flex, we let the card grow into the space below the header).
   width: calc(100% - 40px) gives a 20px gutter each side on phones so the card
   doesn't touch the viewport edges; max-width caps the width on desktop. */
.login-page > .login-card {
    margin: auto;
    width: calc(100% - 40px);
    max-width: 420px;
}

/* Site-header CTA: on phone the "Already have an account?" / "New here?" hint
   text is long enough to push the action button off-screen. Hide the hint
   below 520px and let the button alone (already self-explanatory) carry the
   row. */
@media (max-width: 520px) {
    .login-page .site-header__hint,
    .signup-page .site-header__hint {
        display: none;
    }
    .login-page .site-header__inner,
    .signup-page .site-header__inner {
        padding-inline: 16px;
        gap: 12px;
    }
}

/* ── Sign-in wrap disclaimer (signup + login) ──────────────────────────────
   Conspicuous-by-adjacency Terms / Privacy notice next to the CTA button. */
.signin-wrap {
    margin: 14px 0 0;
    text-align: center;
    font-size: 12px;
    line-height: 1.5;
    color: #6b7c8d;
}
.signin-wrap--login {
    margin-top: 16px;
    font-size: 11px;
}
.signin-wrap a {
    color: #395D7F;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 500;
}
.signin-wrap a:hover { color: #1a2b3d; }