/* ================================================================
    Team — Global App Styles
   "Gilt" — Premium light theme, charcoal & warm accent
   Fonts: Valley Sans (UI) + Jost (labels/data). Utilities: tailwind.css (built).
   ================================================================ */

:root {
    /* ── Gilt Light Palette ────────────────────────────────────── */
    --c-bg:           #faf9f8; /* warm cream matte */
    --c-surface:      #ffffff;        /* card/panel surface */
    --c-surface-2:    #F4F4F4;        /* elevated hover surface */
    --c-surface-3:    #EBEBEB;        /* deepest elevation */
    --c-border:       #E5E3DF;        /* standard border */
    --c-border-dim:   #F0EEEB;        /* very subtle border */
    --c-border-hi:    #CECCCA;        /* prominent border */

    --c-text:         #1C1A17;        /* deep charcoal — almost black */
    --c-muted:        #494644;        /* warm stone grey */
    --c-muted-2:      #A8A29C;        /* tertiary / placeholder */

    --c-accent-rgb:   194,128,52;     /* "gilt" — see [data-accent] variants below */
    --c-accent:       rgb(var(--c-accent-rgb));
    --c-accent-dark:  #9e682a;        /* pressed/hover */
    --c-accent-dim:   rgba(var(--c-accent-rgb), 0.10);
    --c-accent-glow:  rgba(var(--c-accent-rgb), 0.20);
    --c-accent-nav:   rgba(28, 27, 27, 0.12);

    --c-cad-month:    #2E3A87;        /* report cadence stamps: monthly (indigo ink) */
    --c-cad-week:     #0E7468;        /* weekly (deep teal) */
    --c-cad-ink:      #ffffff;        /* text on a cadence fill */

    --c-glass:        rgba(255,255,255,0.86); /* translucent surface (cards, dropdowns, tab bar) */
    --c-line:         rgba(28,26,23,0.08);    /* hairline on glass */
    --c-line-hi:      rgba(28,26,23,0.14);
    --c-overlay:      rgba(28,26,23,0.5);     /* modal backdrop */

    --c-nav:          #FAFAFA;        /* sidebar — near white */
    --c-nav-text:     #1C1A17;        /* sidebar text */
    --c-nav-muted:    #6B6460;        /* sidebar muted text */
    --c-nav-hover:    rgba(var(--c-accent-rgb), 0.07);
    --c-nav-active:   rgba(var(--c-accent-rgb), 0.11);

    --c-danger:       #C0392B;        /* deep red */
    --c-danger-bg:    rgba(192,57,43,0.08);
    --c-warning:      #B7791F;        /* deep amber */
    --c-warning-bg:   rgba(183,121,31,0.10);
    --c-success:      #1E6B45;        /* forest green */
    --c-success-bg:   rgba(30,107,69,0.08);
    --c-info:         #1A5FA8;        /* steel blue */
    --c-info-bg:      rgba(26,95,168,0.08);
    --c-purple:       #6D3FA0;        /* plum */
    --c-purple-bg:    rgba(109,63,160,0.08);
    --c-muted-bg:     rgba(107,100,96,0.08);
    --c-orange:       #C05C1A;        /* burnt sienna */

    /* ── GA alias variables (keep for backward compat with Tailwind) */
    --ga-blue:        var(--c-accent);
    --ga-blue-dark:   var(--c-accent-dark);
    --ga-blue-light:  var(--c-accent-dim);
    --ga-bg:          var(--c-bg);
    --ga-surface:     var(--c-surface);
    --ga-border:      var(--c-border);
    --ga-text:        var(--c-text);
    --ga-muted:       var(--c-muted);
    --ga-hover:       var(--c-surface-2);
    --ga-nav:         var(--c-nav);
    --ga-green:       var(--c-success);
    --ga-green-bg:    var(--c-success-bg);
    --ga-red:         var(--c-danger);
    --ga-red-bg:      var(--c-danger-bg);
    --ga-yellow:      var(--c-warning);
    --ga-yellow-bg:   var(--c-warning-bg);
    --ga-purple:      var(--c-purple);
    --ga-orange:      var(--c-orange);

    /* ── Spacing ───────────────────────────────────────────────── */
    --sidebar-collapsed: 64px;
    --sidebar-expanded:  240px;
    --header-height:     60px;
    --tabbar-height:     64px;

    /* ── Radius scale ("Aurora" pass — softer, rounder surfaces) ── */
    --radius-sm: 10px;   /* icon buttons, pills, badges */
    --radius-md: 14px;   /* nav items, small controls */
    --radius-lg: 22px;   /* cards */
    --radius-xl: 30px;   /* hero panels, modals */

    /* ── Typography ────────────────────────────────────────────── */
    --font-ui:   'Valley Sans', 'Onest', 'DM Sans', sans-serif;
    --font-mono: 'Jost', sans-serif;
    --font-sans: var(--font-ui);

    /* ── Motion ────────────────────────────────────────────────── */
    --tr-fast:   150ms ease;
    --tr-normal: 250ms ease;
    --tr-slow:   350ms ease;
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* ── Accent variants (data-accent on <html>, chosen per device or from the outlet) ── */
:root[data-accent="ocean"]  { --c-accent-rgb: 31,111,178;  --c-accent-dark: #185a90; }
:root[data-accent="forest"] { --c-accent-rgb: 44,122,75;   --c-accent-dark: #22603b; }
:root[data-accent="plum"]   { --c-accent-rgb: 122,74,168;  --c-accent-dark: #603a86; }
:root[data-accent="coral"]  { --c-accent-rgb: 210,85,58;   --c-accent-dark: #b0432c; }
:root[data-accent="slate"]  { --c-accent-rgb: 75,90,107;   --c-accent-dark: #3a4756; }

/* ── Dark theme (data-theme="dark" on <html>; "system" follows the OS) ── */
:root[data-theme="dark"] {
    --c-bg:           #141311;
    --c-surface:      #1c1a17;
    --c-surface-2:    #242220;
    --c-surface-3:    #2d2a26;
    --c-border:       #302d29;
    --c-border-dim:   #272420;
    --c-border-hi:    #433f39;

    --c-text:         #f1ede7;
    --c-muted:        #b3aba1;
    --c-muted-2:      #7c756e;

    --c-accent-rgb:   214,150,66;
    --c-accent-dark:  #c28034;
    --c-accent-dim:   rgba(var(--c-accent-rgb), 0.16);
    --c-accent-glow:  rgba(var(--c-accent-rgb), 0.30);

    --c-cad-month:    #a3b0f5;
    --c-cad-week:     #5cc9b8;
    --c-cad-ink:      #141311;

    --c-glass:        rgba(28,26,23,0.86);
    --c-line:         rgba(255,255,255,0.08);
    --c-line-hi:      rgba(255,255,255,0.14);
    --c-overlay:      rgba(0,0,0,0.6);

    --c-nav:          #181613;
    --c-nav-text:     var(--c-text);
    --c-nav-muted:    var(--c-muted);

    --c-danger:       #ef6f61;
    --c-danger-bg:    rgba(239,111,97,0.16);
    --c-warning:      #e2a94c;
    --c-warning-bg:   rgba(226,169,76,0.16);
    --c-success:      #5cc088;
    --c-success-bg:   rgba(92,192,136,0.16);
    --c-info:         #6aa9ea;
    --c-info-bg:      rgba(106,169,234,0.16);
    --c-purple:       #b48ce0;
    --c-purple-bg:    rgba(180,140,224,0.16);
    --c-muted-bg:     rgba(255,255,255,0.07);
    --c-orange:       #e2814a;
    color-scheme: dark;
}
:root[data-theme="dark"][data-accent="ocean"]  { --c-accent-rgb: 92,158,224;  --c-accent-dark: #1f6fb2; }
:root[data-theme="dark"][data-accent="forest"] { --c-accent-rgb: 88,178,120;  --c-accent-dark: #2c7a4b; }
:root[data-theme="dark"][data-accent="plum"]   { --c-accent-rgb: 170,128,214; --c-accent-dark: #7a4aa8; }
:root[data-theme="dark"][data-accent="coral"]  { --c-accent-rgb: 240,124,98;  --c-accent-dark: #d2553a; }
:root[data-theme="dark"][data-accent="slate"]  { --c-accent-rgb: 142,158,178; --c-accent-dark: #4b5a6b; }

:root[data-theme="dark"] .avatar,
:root[data-theme="dark"] .avatar-stack__item {
    background: hsl(var(--avatar-h) 35% 24%);
    border-color: hsl(var(--avatar-h) 30% 34%);
    color: hsl(var(--avatar-h) 60% 78%);
}
:root[data-theme="dark"] .toggle-track::after { background: #e8e4de; }
:root[data-theme="dark"] .ga-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23b3aba1' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); }
:root[data-theme="dark"] .login-bg {
    background:
        radial-gradient(60% 50% at 15% 10%, var(--c-accent-dim) 0%, transparent 70%),
        radial-gradient(50% 40% at 90% 95%, var(--c-accent-dim) 0%, transparent 70%),
        var(--c-bg);
}

/* ── Reset & Base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { height: 100%; }

body {
    min-height: 100%;
    font-family: var(--font-ui);
    background-color: var(--c-bg);
    color: var(--c-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Typography ─────────────────────────────────────────────── */
.page-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--c-text);
    letter-spacing: -0.2px;
    font-family: var(--font-ui);
}

.section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--c-text);
    letter-spacing: 0.1px;
}

.label-sm {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--c-muted);
    font-family: var(--font-mono);
}

.mono {
    font-family: var(--font-mono);
    font-size: 0.875em;
}

/* ── GA Cards ───────────────────────────────────────────────── */
.ga-card {
    background: var(--c-glass);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border-radius: var(--radius-lg);
    border: 1px solid var(--c-line);
    transition: border-color var(--tr-normal), box-shadow var(--tr-normal);
}

.ga-card:hover {
    border-color: var(--c-line-hi);
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

.ga-card-elevated {
    background: var(--c-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--c-border-dim);
    box-shadow: 0 4px 20px rgba(28,26,23,0.07), 0 1px 3px rgba(28,26,23,0.05);
}

/* ── Stat Cards (like GA metric cards) ─────────────────────── */
.stat-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border-dim);
    border-radius: var(--radius-lg);
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: border-color var(--tr-normal), box-shadow var(--tr-normal), transform var(--tr-normal);
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--c-accent), transparent);
    opacity: 0;
    transition: opacity var(--tr-normal);
}

.stat-card:hover {
    border-color: var(--c-border-hi);
    box-shadow: 0 8px 24px rgba(28,26,23,0.10), 0 0 0 1px var(--c-border-dim);
    transform: translateY(-1px);
}

.stat-card:hover::before {
    opacity: 1;
}

.stat-card__label {
    font-size: 10px;
    font-weight: 600;
    color: var(--c-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: var(--font-mono);
}

.stat-card__value {
    font-size: 30px;
    font-weight: 700;
    color: var(--c-text);
    letter-spacing: -1px;
    line-height: 1.1;
    font-family: var(--font-mono);
}

.stat-card__delta {
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 3px;
    font-family: var(--font-mono);
}

.stat-card__delta--up   { color: var(--c-success); }
.stat-card__delta--down { color: var(--c-danger); }

/* ── GA Tables ──────────────────────────────────────────────── */
.ga-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    font-family: var(--font-ui);
}

.ga-table thead th {
    padding: 10px 16px;
    text-align: left;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--c-muted);
    border-bottom: 1px solid var(--c-line);
    white-space: nowrap;
    background: var(--c-glass);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    position: sticky;
    top: 0;
    z-index: 1;
    font-family: var(--font-mono);
}

.ga-table tbody tr {
    border-bottom: 1px solid var(--c-border-dim);
    transition: background var(--tr-fast);
    cursor: pointer;
}

.ga-table tbody tr:last-child { border-bottom: none; }

.ga-table tbody tr:hover {
    background: var(--c-surface-2);
}

.ga-table tbody td {
    padding: 11px 16px;
    color: var(--c-text);
    vertical-align: middle;
}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    padding: 0 16px;
    border-radius: 6px;
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .1px;
    cursor: pointer;
    transition: background var(--tr-fast), box-shadow var(--tr-fast),
                opacity var(--tr-fast), transform var(--tr-fast);
    border: none;
    outline: none;
    white-space: nowrap;
    text-decoration: none;
}

.btn:active { transform: scale(0.97); }

.btn-primary {
    background: var(--c-accent);
    color: #fff;
}
.btn-primary:hover {
    background: var(--c-accent-dark);
    box-shadow: 0 2px 12px var(--c-accent-glow);
}

.btn-secondary {
    background: var(--c-surface);
    color: var(--c-text);
    border: 1px solid var(--c-border);
}
.btn-secondary:hover {
    background: var(--c-surface-2);
    border-color: var(--c-border-hi);
}

.btn-danger {
    background: transparent;
    color: var(--c-danger);
    border: 1px solid var(--c-border);
}
.btn-danger:hover {
    background: var(--c-danger-bg);
    border-color: var(--c-danger);
}

.btn-ghost {
    background: transparent;
    color: var(--c-accent);
    border: 1px solid var(--c-accent-dim);
}
.btn-ghost:hover {
    background: var(--c-accent-dim);
    box-shadow: 0 2px 8px var(--c-accent-glow);
}

.btn-icon {
    height: 34px;
    width: 34px;
    padding: 0;
    border-radius: 999px;
    background: transparent;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--tr-fast), border-color var(--tr-fast);
    color: var(--c-muted);
}
.btn-icon:hover {
    background: var(--c-surface-2);
    border-color: var(--c-border);
    color: var(--c-text);
}

/* ── Form inputs ─────────────────────────────────────────────── */
.ga-input, .ga-select, .ga-textarea {
    width: 100%;
    height: 36px;
    padding: 0 12px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 6px;
    font-family: var(--font-ui);
    font-size: 13px;
    color: var(--c-text);
    transition: border-color var(--tr-fast), box-shadow var(--tr-fast),
                background var(--tr-fast);
    outline: none;
}

.ga-textarea {
    height: auto;
    padding: 8px 12px;
    resize: vertical;
}

.ga-input:focus, .ga-select:focus, .ga-textarea:focus {
    border-color: var(--c-accent);
    background: var(--c-surface);
    box-shadow: 0 0 0 3px var(--c-accent-dim), 0 1px 4px var(--c-accent-dim);
}

.ga-input::placeholder { color: var(--c-muted-2); }
.ga-input[readonly]    {
    background: var(--c-surface-2);
    cursor: not-allowed;
    color: var(--c-muted);
}

/* Select arrow */
.ga-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B6460' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 32px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Two fields side by side — sized off the actual container, not the
   viewport, so it correctly collapses inside a narrow sidebar panel. */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.form-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--c-muted);
    text-transform: uppercase;
    letter-spacing: 0.7px;
    font-family: var(--font-mono);
}

/* ── Modal ──────────────────────────────────────────────────── */
.ga-modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 48px 16px;
    overflow-y: auto;
}

.ga-modal__box {
    background: var(--c-surface);
    border-radius: 12px;
    width: 100%;
    max-width: 680px;
    border: 1px solid var(--c-border);
    box-shadow: 0 20px 60px rgba(28,26,23,0.18), 0 4px 16px rgba(28,26,23,0.08);
    animation: modal-in .2s cubic-bezier(0.34, 1.2, 0.64, 1);
}

.ga-modal__box--wide { max-width: 900px; }
.ga-modal__box--narrow { max-width: 480px; }

@keyframes modal-in {
    from { opacity: 0; transform: translateY(-8px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.ga-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--c-border-dim);
}

.ga-modal__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--c-text);
}

.ga-modal__body    { padding: 24px; }
.ga-modal__footer  {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 24px;
    border-top: 1px solid var(--c-border-dim);
    background: var(--c-surface-2);
    border-radius: 0 0 12px 12px;
}

/* ── ga-modal hyphen aliases (settings tabs) ────────────────── */
.ga-modal-backdrop {
    position: absolute;
    inset: 0;
    background: var(--c-overlay);
}
.ga-modal-box     { background: var(--c-surface); border-radius: 12px; border: 1px solid var(--c-border); box-shadow: 0 20px 60px rgba(28,26,23,0.18), 0 4px 16px rgba(28,26,23,0.08); animation: modal-in .2s cubic-bezier(0.34,1.2,0.64,1); position: relative; z-index: 1; }
.ga-modal-header  { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; border-bottom: 1px solid var(--c-border-dim); }
.ga-modal-title   { font-size: 15px; font-weight: 600; color: var(--c-text); }
.ga-modal-close   { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; color: var(--c-muted); transition: background .15s, color .15s; }
.ga-modal-close:hover { background: var(--c-surface-2); color: var(--c-text); }
.ga-modal-body    { padding: 24px; }
.ga-modal-footer  { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 16px 24px; border-top: 1px solid var(--c-border-dim); background: var(--c-surface-2); border-radius: 0 0 12px 12px; }

/* ── Status Badges (reservations) ───────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .5px;
    white-space: nowrap;
    text-transform: uppercase;
    font-family: var(--font-mono);
}

/* ── Task progress bar ──────────────────────────────────────── */
.ga-progress {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-width: 80px;
}
.ga-progress__track {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: var(--c-muted-bg);
    overflow: hidden;
}
.ga-progress__fill {
    height: 100%;
    border-radius: 3px;
    background: var(--c-accent);
    transition: width var(--tr-fast);
}
.ga-progress__label {
    font-size: 11px;
    font-family: var(--font-mono);
    color: var(--c-muted);
    flex-shrink: 0;
    width: 30px;
    text-align: right;
}

/* ── Toggle Switch ──────────────────────────────────────────── */
.toggle {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
}
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-track {
    position: absolute;
    inset: 0;
    background: var(--c-border);
    border-radius: 10px;
    cursor: pointer;
    transition: background var(--tr-fast), box-shadow var(--tr-fast);
}
.toggle input:checked + .toggle-track {
    background: var(--c-accent);
    box-shadow: 0 1px 6px var(--c-accent-glow);
}
.toggle-track::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.4);
    transition: transform var(--tr-fast);
}
.toggle input:checked + .toggle-track::after { transform: translateX(16px); }

/* ── Tab navigation (settings pages) ───────────────────────── */
.ga-tabs {
    display: flex;
    border-bottom: 1px solid var(--c-border-dim);
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.ga-tabs::-webkit-scrollbar { display: none; }

.ga-tab {
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 500;
    color: var(--c-muted);
    border-bottom: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--tr-fast), border-color var(--tr-fast);
    text-decoration: none;
    font-family: var(--font-ui);
}
.ga-tab:hover { color: var(--c-text); }
.ga-tab.active {
    color: var(--c-accent);
    border-bottom-color: var(--c-accent);
}

/* ── Toast notifications ────────────────────────────────────── */
.toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 8px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    box-shadow: 0 8px 32px rgba(28,26,23,0.14), 0 2px 6px rgba(28,26,23,0.08);
    font-size: 13px;
    font-weight: 500;
    min-width: 240px;
    max-width: 400px;
    pointer-events: all;
    color: var(--c-text);
    animation: toast-in .2s ease, toast-out .2s ease 3.8s forwards;
}
.toast-success { border-left: 3px solid var(--c-accent); }
.toast-error   { border-left: 3px solid var(--c-danger); }
.toast-info    { border-left: 3px solid var(--c-info); }

@keyframes toast-in  { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes toast-out { from { opacity:1; } to { opacity:0; transform: translateY(8px); } }

/* ── Loading skeleton ───────────────────────────────────────── */
.skeleton {
    background: linear-gradient(90deg, var(--c-surface-2) 25%, var(--c-border-dim) 50%, var(--c-surface-2) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.6s infinite;
    border-radius: 4px;
}
@keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ── Scrollbar (global slimmer) ─────────────────────────────── */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--c-border-hi); }

/* ── Utility: visually-hidden ───────────────────────────────── */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ── Page load stagger animation ────────────────────────────── */
@keyframes fade-up {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.stagger-children > * {
    animation: fade-up 0.35s ease both;
}
.stagger-children > *:nth-child(1)  { animation-delay: 0ms; }
.stagger-children > *:nth-child(2)  { animation-delay: 50ms; }
.stagger-children > *:nth-child(3)  { animation-delay: 100ms; }
.stagger-children > *:nth-child(4)  { animation-delay: 150ms; }
.stagger-children > *:nth-child(5)  { animation-delay: 200ms; }
.stagger-children > *:nth-child(6)  { animation-delay: 250ms; }
.stagger-children > *:nth-child(7)  { animation-delay: 300ms; }
.stagger-children > *:nth-child(n+8){ animation-delay: 350ms; }

.animate-fade-up {
    animation: fade-up 0.4s ease both;
}

/* ── Subtle accent shadow ───────────────────────────────────── */
.glow-accent {
    box-shadow: 0 2px 12px var(--c-accent-glow);
}

.text-accent   { color: var(--c-accent); }
.text-muted    { color: var(--c-muted); }
.text-danger   { color: var(--c-danger); }
.text-warning  { color: var(--c-warning); }

/* ── Terminal / code inline ─────────────────────────────────── */
.code-inline {
    font-family: var(--font-mono);
    font-size: 12px;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border-dim);
    border-radius: 4px;
    padding: 1px 6px;
    color: var(--c-accent);
}
/* ── Glass utilities (shared across all pages) ────────────────── */

/* Metric / stat chip card */
.ga-glass-card {
    background: var(--c-glass);
    backdrop-filter: blur(22px) saturate(165%) brightness(1.01);
    -webkit-backdrop-filter: blur(22px) saturate(165%) brightness(1.01);
    border: 1px solid var(--c-line);
    border-radius: 14px;
    position: relative;
    overflow: hidden;
    box-shadow: none;
    transition: transform 220ms var(--ease-spring), background 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
.ga-glass-card::before {
    content: '';
    position: absolute;
    top: 0; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--c-glass) 38%, var(--c-glass) 62%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}
.ga-glass-card > * { position: relative; z-index: 1; }
.ga-glass-card:hover {
    transform: translateY(-5px) scale(1.018);
    background: rgba(244,244,244,0.95);
    border-color: var(--c-line-hi);
    box-shadow:
        0 4px 16px rgba(28,26,23,0.06),
        0 1px 4px rgba(28,26,23,0.03);
}
/* Color tint overlay — add <span class="ga-glass-card-accent"> as first child */
.ga-glass-card-accent {
    position: absolute;
    inset: 0;
    background: linear-gradient(140deg, var(--stat-accent, transparent) 0%, transparent 52%);
    pointer-events: none;
    border-radius: inherit;
    z-index: 0;
}

/* Section / group container card */
.ga-glass-section {
    background: var(--c-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--c-line);
    border-bottom: 1px solid rgba(221,217,210,0.55);
    border-radius: 14px;
    box-shadow: none;
    overflow: hidden;
    transition: box-shadow 250ms ease, transform 250ms ease;
    margin-bottom: 16px;
}
.ga-glass-section:hover {
    box-shadow:
        0 4px 16px rgba(28,26,23,0.06),
        0 1px 4px rgba(28,26,23,0.03);
    transform: translateY(-1px);
}

/* Floating dropdown (context menus, status pickers) */
.ga-glass-dropdown {
    background: var(--c-glass) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    border: 1px solid var(--c-line) !important;
    box-shadow:
        0 12px 44px rgba(0,0,0,0.10),
        0 3px 12px rgba(0,0,0,0.06),
        inset 0 1px 0 var(--c-line) !important;
}

/* Tag pill with color-keyed border (use with inline style for color) */
.ga-tag-pill {
    border-width: 1px;
    border-style: solid;
}

/* Table / list row with status left-edge accent */
.ga-accent-row {
    transition: background 120ms ease, box-shadow 140ms ease;
    border-left-style: solid;
    border-left-width: 3px;
}
.ga-accent-row:hover {
    background: color-mix(in srgb, var(--row-accent, #9a8c67) 4%, transparent) !important;
    box-shadow: inset 4px 0 20px var(--row-color, var(--c-accent-dim));
}

/* Mobile card list item with status left-edge accent */
.ga-accent-card {
    transition: background 120ms ease, box-shadow 140ms ease;
    border-left-style: solid;
    border-left-width: 3px;
    border-radius: 0;
}
.ga-accent-card:hover {
    background: color-mix(in srgb, var(--row-accent, #9a8c67) 4%, transparent) !important;
    box-shadow: inset 4px 0 20px var(--row-color, var(--c-accent-dim));

}

/* Animated time / status pill badge */
.ga-time-badge {
    transition: transform 150ms var(--ease-spring), box-shadow 150ms ease;
}
.ga-accent-row:hover .ga-time-badge,
.ga-accent-card:hover .ga-time-badge {
    transform: scale(1.1) translateY(-1px);
}
/* ── Sidebar — frosted glass ───────────────────────────────── */
#sidebar {
    border-right: 1px solid var(--c-line) !important;
}

/* ── Page content area ──────────────────────────────────────── */


/* ── Header — frosted glass ─────────────────────────────────── */
header {
    backdrop-filter: blur(20px) saturate(180%) brightness(1.02) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(1.02) !important;
}

/* ── Dropdown menus — frosted glass ─────────────────────────── */
#restaurant-menu,
#user-menu {
    background: var(--c-glass) !important;
    backdrop-filter: blur(20px) saturate(180%) brightness(1.02) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(1.02) !important;
    border: 1px solid var(--c-line) !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.09), 0 2px 8px rgba(0,0,0,0.05) !important;
}

/* ── Modal backdrop ─────────────────────────────────────────── */
#modal-backdrop {
    background: var(--c-overlay);
    backdrop-filter: blur(4px);
}


/* ── Responsive tweaks ──────────────────────────────────────── */
@media (max-width: 768px) {
    .ga-modal { padding: 16px; }
    .ga-modal__box { max-width: 100%; }
}



/* ── App shell ──────────────────────────────────────────────── */
[x-cloak] { display: none !important; }

.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* Sidebar labels vanish when the rail is collapsed */
.sidebar-collapsed .sidebar-label { display: none; }

.nav-item {
    position: relative;
    display: flex;
    align-items: center;
    height: 40px;
    margin: 2px 10px;
    padding: 0 12px;
    border-radius: var(--radius-md);
    color: var(--c-text);
    text-decoration: none;
    overflow: hidden;
    transition: background var(--tr-fast), color var(--tr-fast);
}
.nav-item:hover      { background: var(--c-nav-hover); }
.nav-item.is-active  { background: var(--c-nav-active); color: var(--c-accent); box-shadow: inset 0 0 0 1px var(--c-accent-glow); }
.nav-item__icon  { font-size: 20px; flex-shrink: 0; }
.nav-item__label { margin-left: 12px; font-size: 13px; font-weight: 500; white-space: nowrap; flex: 1; }
.nav-item.is-active .nav-item__label { font-weight: 600; color: var(--c-text); }
.nav-item__badge {
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 999px;
    background: var(--c-danger); color: #fff;
    font: 700 9px/18px var(--font-mono);
    text-align: center;
}
.nav-item__dot {
    display: none;
    position: absolute; top: 6px; right: 6px;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--c-danger);
}
.sidebar-collapsed .nav-item        { justify-content: center; padding: 0; }
.sidebar-collapsed .nav-item__dot   { display: block; }

/* Avatars */
.avatar {
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    border-radius: 10px;
    --avatar-h: 34;                       /* hue, set inline per person (avatar_hue()) */
    background: hsl(var(--avatar-h) 55% 90%);
    border: 1px solid hsl(var(--avatar-h) 45% 78%);
    color: hsl(var(--avatar-h) 45% 32%);
    font-family: var(--font-mono);
    font-weight: 700;
    cursor: pointer;
    transition: box-shadow var(--tr-fast), transform var(--tr-fast);
    -webkit-tap-highlight-color: transparent;
}
.avatar:hover  { box-shadow: 0 0 0 3px hsl(var(--avatar-h) 55% 90% / 0.7); }
.avatar:active { transform: scale(0.96); }
.avatar-sm { width: 28px; height: 28px; font-size: 11px; border-radius: 8px; }
.avatar-md { width: 34px; height: 34px; font-size: 12px; }

/* Outlet pills (header) */
.outlet-pill {
    display: inline-flex; align-items: center;
    height: 24px; padding: 0 10px;
    border-radius: 999px;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    color: var(--c-text);
    font-size: 12px; font-weight: 500;
    white-space: nowrap;
}
.outlet-pill--more { color: var(--c-muted); font-family: var(--font-mono); }
.outlet-pill__dot { width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--pill, var(--c-accent)); flex-shrink: 0; }

/* Appearance settings */
.theme-choice {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 10px; border-radius: 12px; border: 2px solid var(--c-border); background: var(--c-surface);
    cursor: pointer; color: var(--c-text); transition: border-color var(--tr-fast), box-shadow var(--tr-fast);
}
.theme-choice:hover { border-color: var(--c-border-hi); }
.theme-choice.is-active { border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-dim); }
.theme-choice__preview { width: 100%; height: 56px; border-radius: 8px; border: 1px solid var(--c-border); position: relative; overflow: hidden; }
.theme-choice__preview::after { content: ''; position: absolute; left: 10px; top: 10px; width: 40%; height: 8px; border-radius: 4px; background: var(--c-accent); }
.theme-choice__preview--light  { background: linear-gradient(#ffffff, #faf9f8); }
.theme-choice__preview--dark   { background: linear-gradient(#1c1a17, #141311); }
.theme-choice__preview--system { background: linear-gradient(100deg, #ffffff 50%, #1c1a17 50%); }
.accent-choice { display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; cursor: pointer; color: var(--c-muted); }
.accent-choice__swatch {
    width: 40px; height: 40px; border-radius: 50%; background: var(--sw);
    display: flex; align-items: center; justify-content: center; color: #fff;
    border: 3px solid transparent; box-shadow: 0 0 0 2px var(--c-surface);
    transition: transform var(--tr-fast), border-color var(--tr-fast);
}
.accent-choice:hover .accent-choice__swatch { transform: scale(1.06); }
.accent-choice.is-active .accent-choice__swatch { border-color: var(--c-surface); box-shadow: 0 0 0 2px var(--sw); }
.accent-choice.is-active { color: var(--c-text); font-weight: 600; }
.accent-choice__label { font-size: 11px; }

/* Dropdown / sheet rows */
.menu-item {
    display: flex; align-items: center; gap: 12px;
    width: 100%;
    padding: 8px 16px;
    font-size: 13px; font-weight: 500;
    color: var(--c-muted);
    text-decoration: none;
    text-align: left;
    background: none; border: 0; cursor: pointer;
    transition: background var(--tr-fast), color var(--tr-fast);
    -webkit-tap-highlight-color: transparent;
}
.menu-item:hover, .menu-item.is-active { background: var(--c-surface-2); color: var(--c-text); }
.menu-item.is-active { color: var(--c-accent); }
.menu-item--danger:hover { color: var(--c-danger); }
.menu-item--lg { padding: 12px 20px; font-size: 14px; }

/* Mobile bottom tab bar */
.tabbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    display: flex;
    height: calc(var(--tabbar-height) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--c-glass);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-top: 1px solid var(--c-border);
}
.tabbar__item {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-width: 0;
    color: var(--c-muted);
    text-decoration: none;
    background: none; border: 0; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--tr-fast);
}
.tabbar__icon {
    font-size: 24px;
    padding: 3px 14px;
    border-radius: 999px;
    transition: background var(--tr-fast), transform var(--tr-fast);
}
.tabbar__label { font-size: 10.5px; font-weight: 600; letter-spacing: .2px; }
.tabbar__item.is-active { color: var(--c-accent); }
.tabbar__item.is-active .tabbar__icon { background: var(--c-accent-dim); }
.tabbar__item:active .tabbar__icon { transform: scale(0.92); }

/* Bottom sheet */
.sheet {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    max-height: 85dvh;
    display: flex; flex-direction: column;
    background: var(--c-surface);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -12px 40px rgba(28,26,23,0.18);
    overflow: hidden;
}
.sheet__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.sheet__handle {
    width: 36px; height: 4px;
    margin: 10px auto 12px;
    border-radius: 2px;
    background: var(--c-border-hi);
}

/* Login backdrop: soft warm glow on the cream ground */
.login-bg {
    background:
        radial-gradient(60% 50% at 15% 10%, var(--c-accent-glow) 0%, transparent 70%),
        radial-gradient(50% 40% at 90% 95%, var(--c-accent-dim) 0%, transparent 70%),
        var(--c-bg);
}

/* App shell backdrop ("Aurora" pass): same warm-glow language as .login-bg,
   fixed behind the whole shell so the sidebar/header glass panels and the
   floating cards all sit on one continuous ambient ground. Negative z-index
   keeps it behind in-flow content without an explicit stacking wrapper. */
.aurora-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(55% 45% at 88% 100%, var(--c-accent-glow) 0%, transparent 70%),
        radial-gradient(40% 35% at 8% 0%, var(--c-accent-dim) 0%, transparent 70%),
        var(--c-bg);
}
.aurora-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(100deg, var(--c-line) 0 1px, transparent 1px 40px);
    mask-image: linear-gradient(to left, black, transparent 60%);
    -webkit-mask-image: linear-gradient(to left, black, transparent 60%);
    opacity: 0.6;
}
:root[data-theme="dark"] .aurora-bg { opacity: 0.7; }

/* Cross-page transitions (Chrome/Safari; ignored elsewhere) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 120ms ease-out both view-fade-out; }
::view-transition-new(root) { animation: 180ms ease-out both view-fade-in; }
@keyframes view-fade-out { to { opacity: 0; } }
@keyframes view-fade-in  { from { opacity: 0; transform: translateY(4px); } }

/* Comfortable touch targets on touch devices */
@media (pointer: coarse) {
    .btn, .btn-icon, .ga-input, .ga-select { min-height: 40px; }
    .btn-icon { min-width: 40px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
    @view-transition { navigation: none; }
}

/* ── Today screen ───────────────────────────────────────────── */
.today-hero {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 14px;
    padding: 28px 16px 8px;
    margin-bottom: 8px;
}
.today-hero__title {
    font-size: 30px; font-weight: 700; letter-spacing: -0.6px; line-height: 1.15;
    color: var(--c-text);
}
.today-hero__summary { margin-top: 4px; font-size: 15px; color: var(--c-muted); }
@media (min-width: 640px) { .today-hero__title { font-size: 38px; } }

/* Progress ring */
.today-progress { position: relative; width: 64px; height: 64px; flex-shrink: 0; }
.today-progress svg { display: block; }
.today-progress__track { fill: none; stroke: var(--c-border-dim); stroke-width: 6; }
.today-progress__fill  {
    fill: none; stroke: var(--c-accent); stroke-width: 6; stroke-linecap: round;
    transition: stroke-dasharray 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.today-progress__label {
    position: absolute; inset: 0;
    display: flex; align-items: baseline; justify-content: center;
    font-family: var(--font-mono); color: var(--c-text);
    line-height: 64px;
}
.today-progress__label strong { font-size: 18px; font-weight: 700; }
.today-progress__label span   { font-size: 11px; color: var(--c-muted); }
.today-progress__label .material-icons-round { align-self: center; color: var(--c-accent); }
.today-progress.is-complete .today-progress__fill { stroke: var(--c-success); }
.today-progress.is-complete .today-progress__label .material-icons-round { color: var(--c-success); animation: pop 500ms var(--ease-spring) both; }
@keyframes pop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Small info cards (shift, meeting) */
.today-card { display: flex; align-items: center; gap: 14px; padding: 16px; }
.today-card__icon {
    width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--c-accent-dim); color: var(--c-accent);
}
.today-card__icon .material-icons-round { font-size: 22px; }
.today-card__title { font-size: 15px; font-weight: 600; margin-top: 2px; }
.today-card__sub   { font-size: 12.5px; color: var(--c-muted); margin-top: 2px; }
.today-shift--shift   .today-card__icon { background: var(--c-info-bg);    color: var(--c-info); }
.today-shift--off     .today-card__icon { background: var(--c-success-bg); color: var(--c-success); }
.today-shift--leave   .today-card__icon { background: var(--c-warning-bg); color: var(--c-warning); }
.today-shift--absence .today-card__icon { background: var(--c-danger-bg);  color: var(--c-danger); }
.today-shift--none    .today-card__icon { background: var(--c-muted-bg);   color: var(--c-muted); }
.today-card--live { border-color: rgba(30,107,69,0.35); box-shadow: 0 0 0 3px var(--c-success-bg), 0 4px 20px rgba(28,26,23,0.08); }
.today-card--live .today-card__icon { background: var(--c-success-bg); color: var(--c-success); }
.today-live { display: inline-flex; align-items: center; gap: 6px; color: var(--c-success); font-weight: 600; }
.today-live__dot {
    width: 8px; height: 8px; border-radius: 50%; background: var(--c-success);
    box-shadow: 0 0 0 0 rgba(30,107,69,0.5); animation: live-pulse 1.6s ease-out infinite;
}
@keyframes live-pulse { to { box-shadow: 0 0 0 8px rgba(30,107,69,0); } }

/* Avatar stack */
.avatar-stack { display: flex; }
.avatar-stack__item {
    --avatar-h: 34;
    width: 26px; height: 26px; border-radius: 50%; margin-left: -6px;
    display: inline-flex; align-items: center; justify-content: center;
    background: hsl(var(--avatar-h) 55% 88%); border: 2px solid var(--c-surface);
    font: 700 9px/1 var(--font-mono); color: hsl(var(--avatar-h) 45% 32%); letter-spacing: .2px;
}
.avatar-stack__item:first-child { margin-left: 0; }
.avatar-stack__more { background: var(--c-accent-dim); color: var(--c-accent); }

/* Week strip */
.today-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.today-week__day {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 8px 2px 6px; border-radius: 10px;
    color: var(--c-text); text-decoration: none;
    transition: background var(--tr-fast);
}
.today-week__day:hover { background: var(--c-surface-2); }
.today-week__day.is-today { background: var(--c-accent-dim); }
.today-week__day.is-today .today-week__num { color: var(--c-accent); }
.today-week__dow { font: 600 9.5px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .5px; color: var(--c-muted); }
.today-week__num { font: 600 15px/1.2 var(--font-mono); }
.today-week__shift { display: block; width: 18px; height: 4px; border-radius: 2px; background: var(--c-border-dim); }
.today-week__shift--shift   { background: var(--c-info); }
.today-week__shift--day_off { background: var(--c-success); opacity: .55; }
.today-week__shift--leave   { background: var(--c-warning); }
.today-week__shift--absence { background: var(--c-danger); }
.today-week__marks { display: flex; align-items: center; gap: 3px; height: 16px; }
.today-week__mark {
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
    font: 700 9.5px/16px var(--font-mono); text-align: center;
}
.today-week__mark--task { background: var(--c-accent); color: #fff; }
.today-week__mark--meeting { font-size: 14px; color: var(--c-purple); }
.today-week__legend { display: flex; gap: 12px; margin-top: 10px; font-size: 10.5px; color: var(--c-muted); }
.today-week__legend span { display: inline-flex; align-items: center; gap: 5px; }
.today-week__legend i { width: 12px; height: 4px; }

/* Task groups & rows */
.today-group { padding: 6px 0 2px; }
.today-group__title {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 12px 4px;
    font: 600 10.5px/1 var(--font-mono); text-transform: uppercase; letter-spacing: 1px;
    color: var(--c-muted);
}
.today-group__count {
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
    background: var(--c-surface-2); color: var(--c-muted);
    font-size: 10px; line-height: 18px; text-align: center;
}
.today-group--late .today-group__title { color: var(--c-danger); }
.today-group--late .today-group__count { background: var(--c-danger-bg); color: var(--c-danger); }
.today-group--done .today-group__title { color: var(--c-success); }

.today-task {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 10px 12px; border-radius: 10px;
    transition: background var(--tr-fast);
}
.today-task:hover { background: var(--c-surface-2); }
.today-task__check {
    width: 24px; height: 24px; margin-top: 1px; flex-shrink: 0;
    border-radius: 50%; border: 2px solid var(--c-border-hi);
    background: var(--c-surface); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; padding: 0;
    transition: background var(--tr-fast), border-color var(--tr-fast), transform var(--tr-fast);
    -webkit-tap-highlight-color: transparent;
}
.today-task__check .material-icons-round { font-size: 16px; transform: scale(0); transition: transform 200ms var(--ease-spring); }
.today-task__check:hover { border-color: var(--c-accent); }
.today-task__check:active { transform: scale(0.9); }
.today-task.is-late .today-task__check { border-color: var(--c-danger); }
.today-task.is-done .today-task__check { background: var(--c-success); border-color: var(--c-success); }
.today-task.is-done .today-task__check .material-icons-round { transform: scale(1); }
.today-task.htmx-request .today-task__check { opacity: .5; }
.today-task__body { min-width: 0; flex: 1; }
.today-task__title { display: block; font-size: 14px; font-weight: 500; color: var(--c-text); text-decoration: none; line-height: 1.35; }
.today-task__title:hover { color: var(--c-accent); }
.today-task.is-done .today-task__title { color: var(--c-muted); text-decoration: line-through; text-decoration-color: var(--c-border-hi); }
.today-task__meta { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 12px; color: var(--c-muted); min-width: 0; }
.today-task__dot { opacity: .5; }
.today-task__prio {
    padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase;
    font-family: var(--font-mono);
}
.today-task__prio--urgent { background: var(--c-danger-bg);  color: var(--c-danger); }
.today-task__prio--high   { background: var(--c-warning-bg); color: var(--c-warning); }
@media (pointer: coarse) {
    .today-task { padding: 12px; }
    .today-task__check { width: 28px; height: 28px; }
}

/* Events */
.today-event { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 10px; }
.today-event:hover { background: var(--c-surface-2); }
.today-event__icon {
    width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--c-surface-2); color: var(--c-muted);
}
.today-event__icon .material-icons-round { font-size: 17px; }
.today-event__text { font-size: 13.5px; line-height: 1.4; }
.today-event__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 2px; font-size: 11.5px; color: var(--c-muted); }
.today-event__task {
    width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--c-accent-dim); color: var(--c-accent);
}
.today-event__task.is-done { background: var(--c-success-bg); color: var(--c-success); }

/* Empty states */
.today-empty { text-align: center; padding: 36px 24px 40px; }
.today-empty--compact { padding: 24px 24px 28px; }
.today-empty__icon {
    width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 30% 30%, var(--c-accent-glow), var(--c-accent-dim));
    color: var(--c-accent);
}
.today-empty__icon .material-icons-round { font-size: 28px; }
.today-empty__title { font-size: 15px; font-weight: 600; }
.today-empty__sub { font-size: 13px; color: var(--c-muted); margin-top: 3px; max-width: 360px; margin-left: auto; margin-right: auto; }

/* ── Task cards ─────────────────────────────────────────────── */
.tcards { display: flex; flex-direction: column; gap: 8px; }

.tcard {
    position: relative;
    z-index: 0;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(28,26,23,0.05);
    transition: box-shadow var(--tr-fast), border-color var(--tr-fast), opacity var(--tr-fast), transform var(--tr-fast);
    touch-action: pan-y;
}
/* :hover already opens a stacking context via `transform`; without a z-index
   bump, a later row (plain DOM order, no transform) paints over an open
   status/more-actions dropdown that overflows below this card's own box. */
.tcard:hover, .tcard:focus-within { z-index: 5; }
/* Only clip while a swipe is in flight: the status / more-actions dropdowns
   open outside the card and must not be cut off at rest. */
.tcard.is-swiping, .tcard.is-settling { overflow: hidden; }
.tcard:hover { border-color: var(--c-border-hi); box-shadow: 0 4px 16px rgba(28,26,23,0.08); transform: translateY(-1px); }
.tcard.is-late { border-left: 3px solid var(--c-danger); }
/* Fade the content, not the card: opacity on .tcard would create a stacking
   context and bury its dropdown menus under the next card. */
.tcard.is-done .tcard__check, .tcard.is-done .tcard__body, .tcard.is-done .tstatus, .tcard.is-done .tcard__more { opacity: .72; }
.tcard.htmx-request { opacity: .6; }
.tcard.htmx-swapping { opacity: 0; transform: scale(0.98); }
.tcard__row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 12px 12px 14px; position: relative; background: var(--c-surface); border-radius: inherit; }

/* swipe backdrops (revealed as the row is dragged) */
.tcard::before, .tcard::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 50%;
    display: flex; align-items: center;
    font-family: 'Material Icons Round'; font-size: 22px; color: #fff;
    opacity: 0; transition: opacity var(--tr-fast);
    pointer-events: none; /* invisible at rest — must never swallow clicks on the row's buttons */
}
.tcard::before { left: 0; background: var(--c-success); content: 'check'; padding-left: 20px; justify-content: flex-start; }
.tcard::after  { right: 0; background: var(--c-warning); content: 'update'; padding-right: 20px; justify-content: flex-end; }
.tcard.is-done::before { background: var(--c-muted); content: 'undo'; }
.tcard:not([data-can-postpone])::after { background: var(--c-border-hi); content: 'block'; }
.tcard.is-swiping-right::before, .tcard.is-swiping-left::after { opacity: 1; }
.tcard.is-swiping .tcard__row { transition: none; }
.tcard.is-swiping .tcard__row, .tcard.is-settling .tcard__row { z-index: 1; } /* row rides above both backdrops while dragged */
.tcard.is-settling .tcard__row { transition: transform 200ms var(--ease-spring); }

.tcard__check {
    width: 26px; height: 26px; margin-top: 1px; flex-shrink: 0;
    border-radius: 50%; border: 2px solid var(--c-border-hi);
    background: var(--c-surface); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; padding: 0;
    transition: background var(--tr-fast), border-color var(--tr-fast), transform var(--tr-fast);
    -webkit-tap-highlight-color: transparent;
}
.tcard__check .material-icons-round { font-size: 17px; transform: scale(0); transition: transform 200ms var(--ease-spring); }
.tcard__check:hover { border-color: var(--c-accent); }
.tcard__check:active { transform: scale(0.9); }
.tcard__check--static { cursor: default; border-style: dashed; }
.tcard.is-late .tcard__check { border-color: var(--c-danger); }
.tcard.is-done .tcard__check { background: var(--c-success); border-color: var(--c-success); }
.tcard.is-done .tcard__check .material-icons-round { transform: scale(1); }

.tcard__body { flex: 1; min-width: 0; }
.tcard[data-edit-modal] .tcard__body { cursor: pointer; }
.tcard__title { font-size: 14px; font-weight: 500; line-height: 1.35; color: var(--c-text); overflow-wrap: anywhere; }
.tcard.is-done .tcard__title { color: var(--c-muted); text-decoration: line-through; text-decoration-color: var(--c-border-hi); }
.tcard__notes {
    font-size: 12px; color: var(--c-muted); margin-top: 2px; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tcard__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 5px; font-size: 12px; color: var(--c-muted); }
.tcard__list { color: var(--c-accent); text-decoration: none; font-weight: 500; }
.tcard__list:hover { text-decoration: underline; }
.tcard__people, .tcard__due { display: inline-flex; align-items: center; gap: 3px; color: var(--c-muted); font-size: 12px; }
.tcard__due.is-late { color: var(--c-danger); font-weight: 600; }
.tcard__dot { opacity: .5; }
.tcard__prio {
    padding: 1px 7px; border-radius: 999px; font: 700 10px/1.6 var(--font-mono); letter-spacing: .3px; text-transform: uppercase;
}
.tcard__prio--urgent { background: var(--c-danger-bg);  color: var(--c-danger); }
.tcard__prio--high   { background: var(--c-warning-bg); color: var(--c-warning); }
.tcard__docs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; }
.tcard__docs:empty { display: none; }
.tcard__doc {
    display: inline-flex; align-items: center; gap: 2px; max-width: 220px;
    padding: 2px 6px 2px 4px; border-radius: 6px;
    background: var(--c-surface-2); font-size: 11.5px;
}
.tcard__doc a { display: inline-flex; align-items: center; gap: 3px; color: var(--c-accent); text-decoration: none; min-width: 0; }
.tcard__doc a:first-child:hover { text-decoration: underline; }
.tcard__doc button { display: inline-flex; background: none; border: 0; padding: 0 2px; color: var(--c-muted); cursor: pointer; }
.tcard__doc button:hover { color: var(--c-danger); }
/* Inline "attach" affordance living at the end of the meta row instead of
   its own always-rendered row — keeps undocumented cards compact. */
.tcard__attach {
    width: 20px; height: 20px; margin-left: auto; border-radius: 999px; border: 1px dashed var(--c-border-hi);
    background: none; color: var(--c-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    opacity: .55; transition: opacity var(--tr-fast), color var(--tr-fast), border-color var(--tr-fast);
}
.tcard:hover .tcard__attach, .tcard__attach:focus-visible { opacity: 1; }
.tcard__attach:hover { color: var(--c-accent); border-color: var(--c-accent); }

.tcard__side { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.tcard__more { width: 30px; height: 30px; }
.tcard__progress { height: 3px; background: var(--c-border-dim); }
.tcard__progress span { display: block; height: 100%; background: var(--c-accent); transition: width 300ms ease; }

/* ── Task table (list view) ────────────────────────────────────────
   Same .tcard component as the kanban board, but rendered as a data-
   table row on desktop: checkbox | task | date | status | priority |
   progress | assignees | menu, each a .tcard__cell grid column. Below
   1024px the grid collapses back to a wrapping flex row (no room for
   eight columns on a phone), styled close to the pre-table meta line. */
.tcard--table .tcard__row { flex-wrap: wrap; row-gap: 6px; }
.tcard--table .tcard__cell--task { flex: 1 1 100%; min-width: 0; }
.tcard--table .tcard__empty { color: var(--c-border-hi); }
.tcard--table .tcard__side { margin-left: auto; }
/* Title + attach icon: shrink-to-fit so the icon sits right after the text
   instead of drifting to the far edge of the (often much wider) task column. */
.tcard__task-head { display: inline-flex; align-items: flex-start; gap: 4px; max-width: 100%; }
/* The list-name chip (assignees column, "My tasks" ctx) inherited the base
   body font outside its old .tcard__meta wrapper — much bigger than every
   other column — so size and clamp it like the other cell text. */
.tcard--table .tcard__cell--assignees .tcard__list {
    font-size: 12.5px; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
@media (min-width: 1024px) {
    .ttable__head, .tcard--table .tcard__row {
        display: grid;
        grid-template-columns: 34px minmax(0,1fr) 128px 156px 100px 56px 132px 34px;
        column-gap: 12px;
        align-items: center;
    }
    .tcard--table .tcard__cell--task { flex: initial; }
    .tcard--table .tcard__side { margin-left: 0; }
}
.ttable__head {
    display: none;                      /* shown as a grid row at ≥1024px, see below */
    padding: 0 12px 8px 14px;
    border-bottom: 1px solid var(--c-border-dim);
    margin-bottom: 8px;
    font: 600 11px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .6px; color: var(--c-muted);
}
@media (min-width: 1024px) { .ttable__head { display: grid; } }

/* Inline "add new task" row above the table body */
.tquickadd {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; margin-bottom: 8px;
    border: 1px dashed var(--c-border-hi); border-radius: 12px;
    color: var(--c-muted); transition: border-color var(--tr-fast);
}
.tquickadd:focus-within { border-color: var(--c-accent); border-style: solid; }
.tquickadd .material-icons-round { font-size: 18px; flex-shrink: 0; }
.tquickadd input { flex: 1; min-width: 0; border: 0; background: none; font-size: 14px; color: var(--c-text); outline: none; }
.tquickadd input::placeholder { color: var(--c-muted); }

/* Priority flag (own column in the table view) */
.tflag { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.tflag .material-icons-round { font-size: 15px; }
.tflag--low    { color: var(--c-muted); }
.tflag--medium { color: var(--c-info); }
.tflag--high   { color: var(--c-warning); }
.tflag--urgent { color: var(--c-danger); }

/* Circular progress ring (own column in the table view) */
.tprogress-ring {
    --pct: 0%;
    width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    background: conic-gradient(var(--c-accent) var(--pct), var(--c-border-dim) 0);
}
.tprogress-ring::before { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--c-surface); }
.tprogress-ring span { position: relative; font: 700 9px/1 var(--font-mono); color: var(--c-text); }
.tprogress-ring.is-done { background: var(--c-success); }
.tprogress-ring.is-done span { color: var(--c-success); }

/* "+" add-assignee button appended to an avatar-stack */
.avatar-stack__add {
    width: 22px; height: 22px; margin-left: 4px; flex-shrink: 0;
    border-radius: 50%; border: 1px dashed var(--c-border-hi); background: none;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--c-muted); cursor: pointer; transition: color var(--tr-fast), border-color var(--tr-fast);
}
.avatar-stack__add:hover { color: var(--c-accent); border-color: var(--c-accent); }

/* Status pill */
.tstatus {
    display: inline-flex; align-items: center; gap: 2px;
    height: 26px; padding: 0 6px 0 10px; border-radius: 999px; border: 1px solid transparent;
    font-size: 11.5px; font-weight: 600; white-space: nowrap; cursor: pointer;
    transition: filter var(--tr-fast);
}
.tstatus:hover { filter: brightness(0.95); }
.tstatus--static { padding-right: 10px; cursor: default; }
.tstatus--todo   { background: var(--c-muted-bg);   color: var(--c-muted); }
.tstatus--doing  { background: var(--c-info-bg);    color: var(--c-info); }
.tstatus--review { background: var(--c-warning-bg); color: var(--c-warning); }
.tstatus--done   { background: var(--c-success-bg); color: var(--c-success); }
.tstatus__dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.tstatus__dot.tstatus--todo   { background: var(--c-muted); }
.tstatus__dot.tstatus--doing  { background: var(--c-info); }
.tstatus__dot.tstatus--review { background: var(--c-warning); }
.tstatus__dot.tstatus--done   { background: var(--c-success); }
@media (max-width: 480px) {
    .tstatus { font-size: 0; padding: 0 4px 0 8px; gap: 0; }
    .tstatus::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
}

/* Kanban board */
.tboard { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 12px; align-items: start; overflow-x: auto; padding-bottom: 8px; }
.tboard__col { background: var(--c-surface-2); border-radius: 12px; padding: 8px; min-height: 160px; }
.tboard__head {
    display: flex; align-items: center; gap: 8px; padding: 6px 8px 10px;
    font: 600 11px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .8px; color: var(--c-muted);
}
.tboard__count { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--c-surface); text-align: center; line-height: 20px; }
.tboard__cards { display: flex; flex-direction: column; gap: 8px; min-height: 60px; border-radius: 10px; transition: background var(--tr-fast), outline-color var(--tr-fast); outline: 2px dashed transparent; }
.tboard__cards.is-over { outline-color: var(--c-accent); background: var(--c-accent-dim); }
.tcard--board { cursor: grab; }
.tcard--board:active { cursor: grabbing; }
.tcard--board.is-dragging { opacity: .4; }
.tcard--board .tcard__row { padding: 10px 10px 10px 12px; }
@media (max-width: 1023px) {
    .tboard { grid-template-columns: 1fr; }
}

/* Deadline shortcut chips */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chip {
    height: 26px; padding: 0 10px; border-radius: 999px;
    border: 1px solid var(--c-border); background: var(--c-surface);
    font-size: 12px; font-weight: 500; color: var(--c-text); cursor: pointer;
    transition: background var(--tr-fast), border-color var(--tr-fast), color var(--tr-fast);
}
.chip:hover { border-color: var(--c-accent); color: var(--c-accent); background: var(--c-accent-dim); }
.chip--muted { color: var(--c-muted); }

/* Modals become bottom sheets on small screens */
@media (max-width: 767px) {
    .ga-modal { align-items: flex-end; padding: 0; }
    .ga-modal__box {
        max-width: 100% !important; max-height: 92dvh; overflow-y: auto;
        border-radius: 20px 20px 0 0; border-bottom: 0;
        padding-bottom: env(safe-area-inset-bottom);
        animation: sheet-up 260ms cubic-bezier(0.22, 1, 0.36, 1);
    }
    .ga-modal__box::before {
        content: ''; display: block; width: 36px; height: 4px; margin: 10px auto 0; border-radius: 2px; background: var(--c-border-hi);
    }
}
@keyframes sheet-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── Sidebar panel (slide-in from the right; used for quick-create forms
   like "New task" instead of a centered modal) ──────────────────────── */
.ga-modal--sidebar { justify-content: flex-end; align-items: stretch; padding: 0; }
.ga-modal--sidebar .ga-modal__box {
    width: 100%;
    max-width: 440px;
    height: 100%;
    max-height: 100%;
    margin: 0;
    border-radius: 0;
    border: 0;
    border-left: 1px solid var(--c-border);
    box-shadow: -24px 0 60px rgba(28,26,23,0.16), -4px 0 16px rgba(28,26,23,0.06);
    display: flex;
    flex-direction: column;
    animation: sidebar-in 280ms var(--ease-spring);
}
.ga-modal--sidebar .ga-modal__box::before { content: none; } /* no bottom-sheet drag handle */
.ga-modal--sidebar .ga-modal__header { flex-shrink: 0; }
.ga-modal--sidebar .ga-modal__body   { flex: 1; min-height: 0; overflow-y: auto; }
.ga-modal--sidebar .ga-modal__footer { flex-shrink: 0; border-radius: 0; }
@keyframes sidebar-in {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}
/* Fields inside a sidebar stack full-width — the panel is too narrow for a
   side-by-side grid (that pattern is for the ~680px centered modal only). */
.ga-modal--sidebar .form-row { display: flex; flex-direction: column; gap: 16px; }

/* Prominent "task title" field — reads like a title, not a boxed input */
.ga-panel-title {
    width: 100%;
    border: 0; border-bottom: 2px solid var(--c-border);
    background: transparent;
    padding: 4px 0 10px;
    font-family: var(--font-ui);
    font-size: 16px; font-weight: 600; color: var(--c-text);
    outline: none;
    transition: border-color var(--tr-fast);
}
.ga-panel-title::placeholder { color: var(--c-muted-2); font-weight: 500; }
.ga-panel-title:focus { border-bottom-color: var(--c-accent); }

/* Label with a leading icon (deadline / priority fields) */
.form-label--icon { display: inline-flex; align-items: center; gap: 4px; }
.form-label--icon .material-icons-round { color: var(--c-muted-2); }

/* Priority segmented control — pick one of a small color-coded set */
.seg-control { display: flex; gap: 6px; }
.seg-control__input {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.seg-control__label {
    flex: 1; text-align: center; padding: 8px 4px; border-radius: 8px;
    border: 1px solid var(--c-border); background: var(--c-surface);
    font-size: 12.5px; font-weight: 600; color: var(--c-muted); cursor: pointer;
    transition: background var(--tr-fast), border-color var(--tr-fast), color var(--tr-fast);
}
.seg-control__label:hover { border-color: var(--c-border-hi); color: var(--c-text); }
.seg-control__input:checked + .seg-control__label { color: #fff; border-color: transparent; }
.seg-control__input:checked + .seg-control__label--low    { background: var(--c-muted); }
.seg-control__input:checked + .seg-control__label--medium { background: var(--c-info); }
.seg-control__input:checked + .seg-control__label--high   { background: var(--c-warning); }
.seg-control__input:checked + .seg-control__label--urgent { background: var(--c-danger); }
.seg-control__input:focus-visible + .seg-control__label { outline: 2px solid var(--c-accent); outline-offset: 2px; }

/* Small inline hint box (e.g. "assigned to everyone on the list") */
.panel-note {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 10px 12px; border-radius: 10px;
    background: var(--c-surface-2); color: var(--c-muted); font-size: 12px; line-height: 1.5;
}
.panel-note .material-icons-round { font-size: 16px; margin-top: 1px; flex-shrink: 0; }

/* ── Calendar: agenda list ──────────────────────────────────── */
.agenda { display: flex; flex-direction: column; gap: 6px; max-width: 860px; }
.agenda__day {
    display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px;
    padding: 10px 0; border-bottom: 1px solid var(--c-border-dim);
}
.agenda__day.is-past { opacity: .6; }
.agenda__day.is-empty .agenda__body { padding-top: 6px; }
.agenda__date { display: flex; flex-direction: column; align-items: center; padding-top: 4px; }
.agenda__dow { font: 600 10px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .6px; color: var(--c-muted); }
.agenda__num { font: 600 22px/1.2 var(--font-mono); color: var(--c-text); margin-top: 3px; }
.agenda__today { font: 700 9px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .5px; color: var(--c-accent); margin-top: 3px; }
.agenda__day.is-today .agenda__num {
    width: 36px; height: 36px; line-height: 36px; text-align: center; border-radius: 50%;
    background: var(--c-accent); color: #fff; margin-top: 2px;
}
.agenda__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.agenda__head { display: flex; align-items: center; gap: 8px; min-height: 28px; }
.agenda__add { margin-left: auto; opacity: .5; }
.agenda__day:hover .agenda__add, .agenda__add:focus-visible { opacity: 1; }
.agenda__item {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px; border-radius: 8px;
    font-size: 13px; color: var(--c-text); text-decoration: none;
    background: var(--c-surface); border: 1px solid var(--c-border-dim);
    transition: border-color var(--tr-fast), background var(--tr-fast);
}
a.agenda__item:hover { border-color: var(--c-border-hi); background: var(--c-surface-2); }
.agenda__time { font: 600 11px/1 var(--font-mono); color: var(--c-muted); min-width: 36px; }
.agenda__item--meeting .material-icons-round { color: var(--c-purple); }
.agenda__item--event   .material-icons-round { color: var(--c-success); }
.agenda__item--task    .material-icons-round { color: var(--c-accent); }
.agenda__item--task.is-done { color: var(--c-muted); text-decoration: line-through; }
.agenda__item--task.is-done .material-icons-round { color: var(--c-success); }
.agenda__item--task.is-late { border-color: rgba(192,57,43,0.35); }
.agenda__item--task.is-late .agenda__time { color: var(--c-danger); }
.agenda__nothing { font-size: 12px; color: var(--c-muted-2); padding: 4px 0; }
@media (pointer: coarse) { .agenda__add { opacity: 1; } }

/* Month grid on small screens: dots instead of labels */
@media (max-width: 639px) {
    .cal-day { min-height: 64px !important; padding: 6px 4px !important; }
    .cal-items { flex-direction: row; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
    .cal-items > * {
        width: 7px; height: 7px; padding: 0 !important; border-radius: 50%;
        font-size: 0 !important; line-height: 0; overflow: hidden; background: currentColor !important;
    }
    .cal-items > * .material-icons-round, .cal-items > * form, .cal-items > * .cal-chip__x { display: none; }
    .cal-items > .cal-more { display: none; }
}
/* ── Notifications ──────────────────────────────────────────── */
.bell__badge {
    position: absolute; top: 2px; right: 2px;
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
    background: var(--c-danger); color: #fff;
    font: 700 9px/16px var(--font-mono); text-align: center;
    box-shadow: 0 0 0 2px var(--c-surface);
}
.notif {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 10px 16px; text-decoration: none; color: var(--c-text);
    border-bottom: 1px solid var(--c-border-dim);
    transition: background var(--tr-fast);
}
.notif:last-child { border-bottom: 0; }
.notif:hover { background: var(--c-surface-2); }
.notif.is-unread { background: var(--c-accent-dim); }
.notif--lg { padding: 14px 20px; }
.notif__icon {
    width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--c-surface-2); color: var(--c-muted);
}
.notif.is-unread .notif__icon { background: var(--c-accent-dim); color: var(--c-accent); }
.notif__icon--success { background: var(--c-success-bg); color: var(--c-success); }
.notif__icon--warning { background: var(--c-warning-bg); color: var(--c-warning); }
.notif.is-unread .notif__icon--success { background: var(--c-success-bg); color: var(--c-success); }
.notif.is-unread .notif__icon--warning { background: var(--c-warning-bg); color: var(--c-warning); }
.notif__icon .material-icons-round { font-size: 17px; }
.notif__title { display: block; font-size: 13px; font-weight: 500; line-height: 1.35; }
.notif.is-unread .notif__title { font-weight: 600; }
.notif__body  { display: block; font-size: 12px; color: var(--c-muted); margin-top: 1px; line-height: 1.4; }
.notif__time  { display: block; font: 500 11px/1.4 var(--font-mono); color: var(--c-muted-2); margin-top: 3px; }
.notif__dot   { width: 8px; height: 8px; border-radius: 50%; background: var(--c-accent); flex-shrink: 0; margin-top: 6px; }

/* ── Weekly recap ───────────────────────────────────────────── */
.recap {
    display: flex; align-items: center; gap: 14px; padding: 14px 16px;
    border-radius: 12px; border: 1px solid var(--c-accent-glow);
    background: linear-gradient(120deg, var(--c-accent-dim), transparent 70%), var(--c-surface);
}
.recap__badge {
    width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--c-accent); color: #fff; box-shadow: 0 4px 14px var(--c-accent-glow);
}
.recap__line { font-size: 14px; margin-top: 2px; }
.recap__line strong { font-family: var(--font-mono); font-weight: 700; }

/* ── Command palette ────────────────────────────────────────── */
.palette-trigger {
    display: inline-flex; align-items: center; gap: 8px;
    height: 34px; padding: 0 12px 0 14px; border-radius: 999px;
    background: var(--c-surface-2); border: 1px solid var(--c-border);
    color: var(--c-muted); cursor: pointer; min-width: 200px;
    transition: border-color var(--tr-fast), color var(--tr-fast);
}
.palette-trigger:hover { border-color: var(--c-border-hi); color: var(--c-text); }
.palette__kbd {
    font: 600 10px/1 var(--font-mono); padding: 3px 5px; border-radius: 4px;
    border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-muted); white-space: nowrap;
}
.palette {
    position: relative; width: 100%; max-width: 560px;
    background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 14px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.25);
    overflow: hidden;
}
.palette__input { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--c-border); }
.palette__input input { flex: 1; min-width: 0; background: none; border: 0; outline: none; font: 500 15px var(--font-ui); color: var(--c-text); }
.palette__input input::placeholder { color: var(--c-muted-2); }
.palette__list { max-height: 60vh; overflow-y: auto; padding: 6px; }
.palette__item {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 9px 10px; border-radius: 8px; border: 0; background: none; text-align: left;
    color: var(--c-text); cursor: pointer;
}
.palette__item.is-active { background: var(--c-accent-dim); }
.palette__icon { font-size: 18px; color: var(--c-muted); flex-shrink: 0; }
.palette__item.is-active .palette__icon { color: var(--c-accent); }
.palette__type { font: 600 10px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .6px; color: var(--c-muted-2); flex-shrink: 0; }

/* ── Confetti canvas ────────────────────────────────────────── */
.confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 100; }

/* ── Meeting room mode ──────────────────────────────────────── */
.room-mode #sidebar, .room-mode header, .room-mode #tabbar { display: none !important; }
.room-mode #page-main { padding-bottom: 24px !important; }
.room-bar {
    position: sticky; top: -20px; z-index: 30;
    margin: -20px -16px 20px; padding: 14px 20px;
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    background: var(--c-glass); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-bottom: 1px solid var(--c-border);
}
@media (min-width: 640px) { .room-bar { margin: -24px -24px 24px; top: -24px; } }
.room-bar__title { font-size: 16px; font-weight: 700; letter-spacing: -0.2px; min-width: 0; flex: 1; }
.room-bar__timer { font: 700 22px/1 var(--font-mono); letter-spacing: 1px; color: var(--c-accent); font-variant-numeric: tabular-nums; }
.room-bar__meta { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--c-muted); }
/* -- Analytics   Themed Report Sections ----------------------- */
.ana-section-wrap {
    border: 1px solid var(--c-border-dim);
    border-radius: 10px;
    overflow: hidden;
    background: var(--c-surface);
}

.ana-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 20px;
    cursor: pointer;
    background: var(--c-surface-2);
    border-bottom: 1px solid var(--c-border-dim);
    transition: background var(--tr-fast);
    user-select: none;
    list-style: none;
    border: none;
    width: 100%;
    text-align: left;
}

.ana-section-header:hover {
    background: var(--c-surface-3);
}

.ana-section-icon {
    font-size: 18px;
    color: var(--c-accent);
    flex-shrink: 0;
}

.ana-section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--c-text);
    font-family: var(--font-ui);
    flex: 1;
}

.ana-section-sub {
    color: var(--c-muted-2);
    font-size: 10px;
}

.ana-section-chevron {
    font-size: 18px;
    color: var(--c-muted-2);
    transition: transform var(--tr-normal);
    flex-shrink: 0;
}

.ana-section-chevron.collapsed {
    transform: rotate(-90deg);
}

.ana-section-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ana-section-body.hidden {
    display: none;
}

.ana-topic-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.ana-chart-wrap {
    position: relative;
    height: 230px;
}

.ana-chart-wrap--tall {
    height: 280px;
}

.ana-chart-wrap--short {
    height: 180px;
}

.ana-toggle {
    font-size: 10px;
    font-weight: 600;
    color: var(--c-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    background: transparent;
    border: 1px solid var(--c-border);
    border-radius: 4px;
    padding: 3px 9px;
    cursor: pointer;
    font-family: var(--font-mono);
    transition: background var(--tr-fast), color var(--tr-fast), border-color var(--tr-fast);
    flex-shrink: 0;
}

.ana-toggle:hover {
    background: var(--c-surface-2);
    color: var(--c-text);
    border-color: var(--c-border-hi);
}

.ana-table-wrap {
    overflow-x: auto;
    max-height: 300px;
    overflow-y: auto;
    border-top: 1px solid var(--c-border-dim);
    margin-top: 8px;
}

.ana-table-wrap.hidden {
    display: none;
}

/* Retention stat large number */
.ana-retention-pct {
    font-size: 44px;
    font-weight: 800;
    color: var(--c-accent);
    font-family: var(--font-mono);
    letter-spacing: -2px;
    line-height: 1;
}

/* No-show rate colour coding in tables */
.rate-high   { color: var(--c-danger);  font-weight: 600; }
.rate-medium { color: var(--c-warning); font-weight: 600; }
.rate-low    { color: var(--c-success); }

/* Loading state */
.ana-loading-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--c-accent), var(--c-info), transparent);
    background-size: 200% 100%;
    animation: ana-bar-slide 1.2s linear infinite;
    border-radius: 0 0 10px 10px;
    width: 100%;
    opacity: 0;
    transition: opacity var(--tr-fast);
    pointer-events: none;
}
.ana--loading .ana-loading-bar {
    opacity: 1;
}
@keyframes ana-bar-slide {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.ana--loading .stat-card__value,
.ana--loading .stat-card__delta,
.ana--loading .ana-section-sub {
    color: transparent !important;
    background: linear-gradient(90deg, var(--c-surface-2) 25%, var(--c-border-dim) 50%, var(--c-surface-2) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s infinite;
    border-radius: 4px;
    pointer-events: none;
    user-select: none;
}

.ana--loading .ana-section-sub {
    min-width: 80px;
    display: inline-block;
}

.ana--loading canvas {
    opacity: 0.25;
    transition: opacity var(--tr-normal);
}

.ana--loading .btn-primary[data-ana-apply] {
    opacity: 0.6;
    pointer-events: none;
    cursor: wait;
}

/* ── Top Findings Banner ────────────────────────────────────── */
.ana-findings-banner {
    background: var(--c-surface);
    border: 1px solid var(--c-border-dim);
    border-left: 3px solid var(--c-accent);
    border-radius: 10px;
    overflow: hidden;
}

.ana-findings-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 16px;
    background: var(--c-surface-2);
    border-bottom: 1px solid var(--c-border-dim);
}

.ana-findings-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--c-text);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-family: var(--font-mono);
    flex: 1;
}

.ana-findings-period {
    font-size: 10px;
    color: var(--c-muted-2);
    font-family: var(--font-mono);
}

.ana-findings-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    padding: 4px 0;
}

.ana-finding-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 9px 16px;
    font-size: 13px;
    color: var(--c-text);
    border-bottom: 1px solid var(--c-border-dim);
    width: 100%;
    line-height: 1.4;
    transition: background var(--tr-fast);
}

.ana-finding-item:last-child { border-bottom: none; }

.ana-finding-item:hover { background: var(--c-surface-2); }

.ana-finding-icon {
    font-size: 14px;
    flex-shrink: 0;
    margin-top: 1px;
}

.ana-finding-icon--up      { color: var(--c-success); }
.ana-finding-icon--down    { color: var(--c-danger); }
.ana-finding-icon--warning { color: var(--c-warning); }
.ana-finding-icon--neutral { color: var(--c-muted-2); }
.ana-finding-icon--info    { color: var(--c-info); }

.ana-finding-text strong { font-weight: 600; }
.ana-finding-text em { font-style: normal; color: var(--c-muted); font-size: 12px; }

/* ── Health badges on stat cards ────────────────────────────── */
.ana-health-badge {
    font-size: 10px;
    font-weight: 700;
    font-family: var(--font-mono);
    letter-spacing: 0.5px;
    padding: 1px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    line-height: 1.6;
    display: none;
}

.ana-health-badge.on-track  { display: inline-block; background: var(--c-success-bg); color: var(--c-success); }
.ana-health-badge.watch     { display: inline-block; background: var(--c-warning-bg); color: var(--c-warning); }
.ana-health-badge.action    { display: inline-block; background: var(--c-danger-bg);  color: var(--c-danger); }

/* ── Insight callout cards ──────────────────────────────────── */
.ana-insight-callout {
    background: linear-gradient(135deg, var(--c-accent-dim) 0%, transparent 60%);
    border: 1px solid var(--c-border-dim);
    border-left: 3px solid var(--c-accent);
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ana-insight-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    color: var(--c-muted);
    line-height: 1.45;
}

.ana-insight-item .material-icons {
    font-size: 14px;
    flex-shrink: 0;
    margin-top: 1px;
}

.ana-insight-item strong { color: var(--c-text); font-weight: 600; }

/* ── Trend narrative micro-label ────────────────────────────── */
.ana-trend-narrative {
    font-size: 11px;
    color: var(--c-muted-2);
    font-family: var(--font-mono);
    padding: 6px 2px 2px;
    display: none;
    gap: 4px;
    align-items: center;
}

.ana-trend-narrative.visible { display: flex; }
.ana-trend-narrative .material-icons { font-size: 13px; }

/* ── KPI tooltip icon ───────────────────────────────────────── */
.ana-tip-icon {
    font-size: 11px;
    color: var(--c-muted-2);
    cursor: help;
    line-height: 1;
    flex-shrink: 0;
    transition: color var(--tr-fast);
}

.ana-tip-icon:hover { color: var(--c-accent); }

/* ── Best/worst row highlight in tables ─────────────────────── */
.ana-row-best td:first-child::before {
    content: '\1F525';
    margin-right: 5px;
    font-size: 11px;
}

.ana-row-worst td:first-child::before {
    content: '\26A0\FE0F';
    margin-right: 4px;
    font-size: 11px;
}

.ana-row-best  { background: var(--c-success-bg) !important; }
.ana-row-worst { background: var(--c-warning-bg) !important; }

/* ── Chat (Claude-style thread) ─────────────────────────────── */
/* Bubble-less agent replies with a mark on the left, soft user bubbles on
   the right, one centred reading column, floating composer. Markup lives in
   app/views/chat/. */
:root {
    --chat-col:      760px;
    --chat-user-bg:  rgba(28,26,23,0.065);
    --chat-code-bg:  rgba(28,26,23,0.05);
}
:root[data-theme="dark"] {
    --chat-user-bg:  rgba(255,255,255,0.08);
    --chat-code-bg:  rgba(255,255,255,0.06);
}

.chat {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.chat-col {
    width: 100%;
    max-width: var(--chat-col);
    margin: 0 auto;
    padding: 0 16px;
}
@media (min-width: 640px) { .chat-col { padding: 0 24px; } }

/* Slim top bar */
.chat-top {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 52px;
}
.chat-top__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.chat-clear {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 10px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--c-muted);
    cursor: pointer;
    transition: background var(--tr-fast), color var(--tr-fast);
}
.chat-clear .material-icons-round { font-size: 18px; }
.chat-clear:hover { background: var(--c-muted-bg); color: var(--c-danger); }
.chat-clear:disabled { opacity: .5; cursor: default; background: transparent; color: var(--c-muted); }
.chat-agent {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 12px 0 6px;
    border-radius: 999px;
    background: var(--c-glass);
    border: 1px solid var(--c-line);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--c-text);
}
.chat-agent .chat-mark { width: 22px; height: 22px; }
.chat-agent .chat-mark svg { width: 13px; height: 13px; }
.chat-agent__status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 500;
    color: var(--c-muted);
}
.chat-agent__status::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 999px;
    background: var(--c-success);
}

/* Scrolling thread */
.chat-scroll {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
    /* Soft fade so rows don't slam into the top bar while scrolling. */
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 28px);
    mask-image: linear-gradient(to bottom, transparent, #000 28px);
}
.chat--empty .chat-scroll { -webkit-mask-image: none; mask-image: none; }
.chat-thread {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 12px 0 28px;
}

.chat-day {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 6px 0 -4px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--c-muted-2);
}
.chat-day::before, .chat-day::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--c-line);
}

/* Rows */
.chat-row {
    display: flex;
    gap: 14px;
    animation: fade-up 220ms ease both;
}
.chat-row--user { justify-content: flex-end; }
.chat-row--user .chat-body {
    max-width: 78%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.chat-row--agent .chat-body { flex: 1; min-width: 0; padding-top: 3px; }

.chat-mark {
    flex-shrink: 0;
    width: 30px; height: 30px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--c-accent-dim);
    color: var(--c-accent);
}
.chat-mark svg { width: 17px; height: 17px; }
.chat-row--error .chat-mark { background: var(--c-danger-bg); color: var(--c-danger); }
.chat-row--error .chat-md   { color: var(--c-danger); }

.chat-bubble {
    padding: 11px 16px;
    border-radius: 20px 20px 6px 20px;
    background: var(--chat-user-bg);
    color: var(--c-text);
    font-size: 15px;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.chat-row--pending .chat-bubble { opacity: .55; }

/* Hover meta: time + copy */
.chat-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    height: 22px;
    opacity: 0;
    transition: opacity var(--tr-fast);
}
.chat-meta--end { justify-content: flex-end; }
.chat-row:hover .chat-meta,
.chat-row:focus-within .chat-meta { opacity: 1; }
.chat-meta__time {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--c-muted-2);
    padding: 0 4px;
}
.chat-meta__btn {
    width: 24px; height: 24px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--c-muted-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--tr-fast), color var(--tr-fast);
}
.chat-meta__btn:hover { background: var(--c-muted-bg); color: var(--c-text); }
.chat-meta__btn .material-icons-round { font-size: 15px; }
@media (hover: none) { .chat-meta { opacity: 1; } }

/* Rendered Markdown (agent replies) */
.chat-md {
    font-size: 15px;
    line-height: 1.65;
    color: var(--c-text);
    overflow-wrap: anywhere;
}
.chat-md > * + * { margin-top: 12px; }
.chat-md h2, .chat-md h3, .chat-md h4 {
    font-family: var(--font-ui);
    font-weight: 600;
    letter-spacing: -0.2px;
    line-height: 1.3;
    margin-top: 20px;
}
.chat-md h2 { font-size: 18px; }
.chat-md h3 { font-size: 16px; }
.chat-md h4 { font-size: 15px; }
.chat-md > :first-child { margin-top: 0; }
.chat-md ul, .chat-md ol { padding-left: 22px; }
.chat-md ul { list-style: disc; }
.chat-md ol { list-style: decimal; }
.chat-md li { margin: 4px 0; padding-left: 2px; }
.chat-md li::marker { color: var(--c-muted-2); }
.chat-md strong { font-weight: 600; }
.chat-md a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 2px; }
.chat-md a:hover { color: var(--c-accent-dark); }
.chat-md blockquote {
    padding: 2px 0 2px 14px;
    border-left: 3px solid var(--c-border-hi);
    color: var(--c-muted);
}
.chat-md hr { border: 0; border-top: 1px solid var(--c-line); margin: 16px 0; }
.chat-md code {
    font-family: 'Cascadia Code', 'JetBrains Mono', Consolas, ui-monospace, monospace;
    font-size: 13px;
    padding: 2px 6px;
    border-radius: 6px;
    background: var(--chat-code-bg);
    border: 1px solid var(--c-line);
}
.chat-md pre {
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--c-surface-2);
    border: 1px solid var(--c-line);
    overflow-x: auto;
}
.chat-md pre code {
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 13px;
    line-height: 1.6;
    white-space: pre;
}
.chat-md del { color: var(--c-muted); }
.chat-md li > ul, .chat-md li > ol, .chat-md li > .chat-code { margin-top: 4px; }
.chat-md li.chat-task { list-style: none; margin-left: -20px; }
.chat-md li.chat-task input { margin-right: 6px; vertical-align: -1px; accent-color: var(--c-accent); }

/* Collapsible <details> sections */
.chat-details {
    border: 1px solid var(--c-line);
    border-radius: 12px;
    padding: 0 14px;
}
.chat-details > summary {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 0;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.chat-details > summary::-webkit-details-marker { display: none; }
.chat-details > summary::before {
    content: 'chevron_right';
    font-family: 'Material Icons Round';
    font-size: 18px;
    font-weight: normal;
    color: var(--c-muted-2);
    transition: transform var(--tr-fast);
}
.chat-details[open] > summary::before { transform: rotate(90deg); }
.chat-details > summary:hover { color: var(--c-accent); }
.chat-details > :not(summary) { margin-top: 0; padding-bottom: 12px; }
.chat-details > :not(summary) + :not(summary) { padding-top: 0; }

/* Fenced code: language label + copy button above the block */
.chat-code {
    border: 1px solid var(--c-line);
    border-radius: 14px;
    background: var(--c-surface-2);
    overflow: hidden;
}
.chat-code__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px 6px 16px;
    border-bottom: 1px solid var(--c-line);
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--c-muted-2);
}
.chat-code__copy {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--c-muted-2);
    font: inherit;
    cursor: pointer;
    transition: background var(--tr-fast), color var(--tr-fast);
}
.chat-code__copy:hover { background: var(--c-muted-bg); color: var(--c-text); }
.chat-code__copy .material-icons-round { font-size: 14px; }
.chat-md .chat-code pre { border: 0; border-radius: 0; background: transparent; margin: 0; }

/* Tables: scroll sideways inside the reading column instead of overflowing it */
.chat-table { overflow-x: auto; margin-left: -2px; margin-right: -2px; }
.chat-md table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 1.45;
    overflow-wrap: normal;
    font-variant-numeric: tabular-nums;
}
.chat-md th, .chat-md td {
    padding: 9px 14px 9px 0;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--c-line);
}
.chat-md th {
    font-weight: 600;
    white-space: nowrap;
    border-bottom-color: var(--c-border-hi);
}
.chat-md th:last-child, .chat-md td:last-child { padding-right: 0; }
.chat-md tbody tr:last-child td { border-bottom: 0; }
.chat-md tbody tr:hover td { background: var(--c-muted-bg); }
.chat-md .is-center { text-align: center; }
.chat-md .is-right  { text-align: right; }

/* Reply still streaming in: blinking caret after the last text */
.chat-row--streaming .chat-md > :last-child::after {
    content: '';
    display: inline-block;
    width: 7px; height: 1em;
    margin-left: 2px;
    vertical-align: -2px;
    border-radius: 2px;
    background: var(--c-accent);
    animation: chat-caret 1s steps(2, start) infinite;
}
.chat-row--streaming .chat-md > .chat-table:last-child::after,
.chat-row--streaming .chat-md > .chat-code:last-child::after { display: none; }
@keyframes chat-caret { to { visibility: hidden; } }

/* "Thinking" row while openclaw answers */
.chat-thinking .chat-mark { animation: chat-mark-pulse 1.4s ease-in-out infinite; }
.chat-thinking__dots {
    display: inline-flex;
    gap: 5px;
    align-items: center;
    height: 30px;
}
.chat-thinking__dots i {
    width: 7px; height: 7px;
    border-radius: 999px;
    background: var(--c-muted-2);
    animation: chat-dot 1.2s ease-in-out infinite;
}
.chat-thinking__dots i:nth-child(2) { animation-delay: .15s; }
.chat-thinking__dots i:nth-child(3) { animation-delay: .3s; }
@keyframes chat-dot        { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@keyframes chat-mark-pulse { 0%, 100% { box-shadow: 0 0 0 0 var(--c-accent-glow); } 50% { box-shadow: 0 0 0 6px transparent; } }

/* Empty state: greeting above a centred composer */
.chat-hello {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    padding: 24px 0 28px;
    animation: fade-up 320ms ease both;
}
.chat-hello .chat-mark { width: 48px; height: 48px; margin-bottom: 6px; }
.chat-hello .chat-mark svg { width: 26px; height: 26px; }
.chat-hello h1 {
    font-family: var(--font-ui);
    font-size: 30px;
    font-weight: 500;
    letter-spacing: -0.5px;
    line-height: 1.15;
    color: var(--c-text);
}
.chat-hello p { font-size: 14.5px; color: var(--c-muted); max-width: 40ch; }
@media (min-width: 640px) { .chat-hello h1 { font-size: 36px; } }

/* Greeting hugs the bottom of the upper half, composer the top of the lower
   half → the pair reads as vertically centred. `margin-top:auto` (not
   justify-content) so a short viewport scrolls instead of clipping. */
.chat--empty .chat-scroll { display: flex; flex-direction: column; }
.chat--empty .chat-scroll > .chat-col { margin-top: auto; }
.chat--empty .chat-thread { display: none; }
.chat--empty .chat-composer-wrap { flex: 1 1 0; }

/* Composer */
.chat-composer-wrap {
    flex-shrink: 0;
    padding-top: 4px;
    padding-bottom: 8px;
}
.chat-composer {
    position: relative;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 34px rgba(28,26,23,0.08), 0 1px 2px rgba(28,26,23,0.05);
    transition: border-color var(--tr-fast), box-shadow var(--tr-fast);
}
.chat-composer:focus-within {
    border-color: var(--c-border-hi);
    box-shadow: 0 12px 40px rgba(28,26,23,0.11), 0 0 0 4px var(--c-accent-dim);
}
:root[data-theme="dark"] .chat-composer {
    box-shadow: 0 10px 34px rgba(0,0,0,0.35);
}
.chat-composer textarea {
    display: block;
    width: 100%;
    min-height: 52px;
    max-height: 220px;
    padding: 15px 18px 4px;
    background: transparent;
    border: 0;
    outline: 0;
    resize: none;
    font-family: var(--font-ui);
    font-size: 15px;
    line-height: 1.5;
    color: var(--c-text);
}
.chat-composer textarea::placeholder { color: var(--c-muted-2); }
.chat-composer__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 8px 8px 16px;
}
.chat-composer__hint {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--c-muted-2);
}
.chat-composer__hint kbd {
    font: inherit;
    padding: 1px 5px;
    border-radius: 5px;
    border: 1px solid var(--c-border);
    background: var(--c-surface-2);
    color: var(--c-muted);
}
.chat-send {
    width: 34px; height: 34px;
    border: 0;
    border-radius: 11px;
    background: var(--c-accent);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--tr-fast), transform var(--tr-fast), opacity var(--tr-fast);
}
.chat-send:hover:not(:disabled) { background: var(--c-accent-dark); }
.chat-send:active:not(:disabled) { transform: scale(0.94); }
.chat-send:disabled {
    background: var(--c-muted-bg);
    color: var(--c-muted-2);
    cursor: default;
}
.chat-send .material-icons-round { font-size: 20px; }
.chat-disclaimer {
    margin-top: 10px;
    text-align: center;
    font-size: 11.5px;
    color: var(--c-muted-2);
}

/* ================================================================
   Page system — shared chrome for every working page, in the same
   language as the Today hero and the Chat thread: an eyebrow label
   over a big title, elevated cards, accent icon blocks, soft empty
   states and staggered fade-ups. Markup lives in app/views/.
   ================================================================ */

/* ── Page header ─────────────────────────────────────────────── */
.page-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px 24px; flex-wrap: wrap;
    margin-bottom: 22px;
    animation: fade-up 0.4s ease both;
}
.page-head__text { min-width: 0; flex: 1 1 320px; }
.page-head__eyebrow {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-bottom: 6px;
}
.page-head__title {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    font-size: 26px; font-weight: 700; letter-spacing: -0.5px; line-height: 1.15;
    color: var(--c-text);
}
@media (min-width: 640px) { .page-head__title { font-size: 30px; } }
.page-head__title .badge { position: relative; top: 1px; }
.page-head__sub { margin-top: 6px; font-size: 14px; color: var(--c-muted); max-width: 64ch; }
.page-head__sub a { color: var(--c-accent); text-decoration: none; }
.page-head__sub a:hover { text-decoration: underline; }
.page-head__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── Compact title merged into the top header bar (list/settings pages) ── */
.header-title { font-size: 16px; font-weight: 700; letter-spacing: -0.2px; color: var(--c-text); }
.header-title__sub { font-size: 13px; color: var(--c-muted); }
.header-title__sub::before { content: '·'; margin-right: 8px; }

/* Pill-shaped "back" link above a detail page's title */
.page-back {
    display: inline-flex; align-items: center; gap: 4px;
    height: 28px; padding: 0 12px 0 6px; border-radius: 999px;
    background: var(--c-glass); border: 1px solid var(--c-line);
    font-size: 12.5px; font-weight: 500; color: var(--c-muted);
    text-decoration: none;
    transition: color var(--tr-fast), border-color var(--tr-fast), background var(--tr-fast);
}
.page-back .material-icons-round { font-size: 16px; transition: transform var(--tr-fast); }
.page-back:hover { color: var(--c-text); border-color: var(--c-line-hi); background: var(--c-surface); }
.page-back:hover .material-icons-round { transform: translateX(-2px); }

/* Section titles with a leading accent icon (Today: "My tasks") */
.section-title__icon { font-size: 18px; color: var(--c-accent); }
.section-link { font-size: 12px; font-weight: 500; color: var(--c-accent); text-decoration: none; white-space: nowrap; }
.section-link:hover { text-decoration: underline; }

/* ── Stat strip (quick counts under a page header) ───────────── */
.stat-strip {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px;
    margin-bottom: 20px;
}
.stat-pill {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    background: var(--c-surface); border: 1px solid var(--c-border-dim); border-radius: 16px;
    box-shadow: 0 2px 10px rgba(28,26,23,0.04);
    text-decoration: none; color: var(--c-text);
    transition: transform var(--tr-fast), box-shadow var(--tr-fast), border-color var(--tr-fast);
}
a.stat-pill:hover { transform: translateY(-1px); border-color: var(--c-border); box-shadow: 0 6px 18px rgba(28,26,23,0.08); }
.stat-pill__icon {
    width: 36px; height: 36px; border-radius: 11px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--c-accent-dim); color: var(--c-accent);
}
.stat-pill__icon .material-icons-round { font-size: 19px; }
.stat-pill > span:not(.stat-pill__icon) { display: flex; flex-direction: column; min-width: 0; }
.stat-pill__value { display: block; font: 700 21px/1.1 var(--font-mono); letter-spacing: -0.5px; font-variant-numeric: tabular-nums; }
.stat-pill__label { display: block; font: 600 10px/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .8px; color: var(--c-muted); margin-top: 2px; }
.stat-pill--danger  .stat-pill__icon { background: var(--c-danger-bg);  color: var(--c-danger); }
.stat-pill--danger  .stat-pill__value { color: var(--c-danger); }
.stat-pill--success .stat-pill__icon { background: var(--c-success-bg); color: var(--c-success); }
.stat-pill--info    .stat-pill__icon { background: var(--c-info-bg);    color: var(--c-info); }
.stat-pill--warning .stat-pill__icon { background: var(--c-warning-bg); color: var(--c-warning); }
.stat-pill--purple  .stat-pill__icon { background: var(--c-purple-bg);  color: var(--c-purple); }
.stat-pill--muted   .stat-pill__icon { background: var(--c-muted-bg);   color: var(--c-muted); }
.stat-pill--dim { opacity: .6; }

/* ── Tiles (link cards: task lists, meetings, reports) ───────── */
.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.tile {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; gap: 12px;
    padding: 18px;
    background: var(--c-surface); border: 1px solid var(--c-border-dim); border-radius: var(--radius-lg);
    box-shadow: 0 4px 20px rgba(28,26,23,0.06), 0 1px 3px rgba(28,26,23,0.04);
    color: var(--c-text); text-decoration: none;
    transition: transform 220ms var(--ease-spring), box-shadow var(--tr-normal), border-color var(--tr-normal);
}
.tile::before {
    content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
    background: linear-gradient(90deg, var(--tile-accent, var(--c-accent)), transparent 70%);
    opacity: 0; transition: opacity var(--tr-normal);
}
a.tile:hover {
    transform: translateY(-3px);
    border-color: var(--c-border);
    box-shadow: 0 14px 34px rgba(28,26,23,0.11), 0 2px 6px rgba(28,26,23,0.05);
}
a.tile:hover::before { opacity: 1; }
.tile__top { display: flex; align-items: flex-start; gap: 12px; }
.tile__icon {
    width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--tile-icon-bg, var(--c-accent-dim)); color: var(--tile-accent, var(--c-accent));
}
.tile__icon .material-icons-round { font-size: 21px; }
.tile__text { min-width: 0; flex: 1; }
.tile__title { font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: -0.1px; }
.tile__sub { font-size: 12.5px; color: var(--c-muted); margin-top: 3px; line-height: 1.4; }
.tile__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tile__foot {
    display: flex; align-items: center; gap: 14px; flex-wrap: nowrap;
    margin-top: auto; padding-top: 12px; border-top: 1px solid var(--c-border-dim);
    font-size: 12px; color: var(--c-muted);
}
.tile__foot > span { display: inline-flex; align-items: center; gap: 4px; min-width: 0; white-space: nowrap; flex-shrink: 1; overflow: hidden; }
.tile__foot > .tile__arrow { flex-shrink: 0; }
.tile__foot .material-icons-round { font-size: 15px; color: var(--c-muted-2); }
.tile__arrow { margin-left: auto; color: var(--c-muted-2); transition: transform var(--tr-fast), color var(--tr-fast); }
.tile__arrow .material-icons-round { font-size: 18px; }
a.tile:hover .tile__arrow { transform: translateX(3px); color: var(--c-accent); }
.tile__progress { height: 5px; border-radius: 3px; background: var(--c-border-dim); overflow: hidden; }
.tile__progress span { display: block; height: 100%; border-radius: 3px; background: var(--tile-accent, var(--c-accent)); transition: width 600ms cubic-bezier(0.22, 1, 0.36, 1); }
.tile__progress--done span { background: var(--c-success); }
.tile--archived { opacity: .72; }
.tile--archived .tile__icon { background: var(--c-muted-bg); color: var(--c-muted); }
.tile-slot { position: relative; height: 100%; display: flex; }
.tile-slot > .tile { flex: 1; min-width: 0; }
.tile-slot__assign {
    position: absolute; top: 14px; right: 14px; z-index: 2;
    width: 30px; height: 30px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    background: var(--c-surface); border: 1px solid var(--c-border-dim); color: var(--c-muted);
    opacity: 0; transition: opacity var(--tr-fast), color var(--tr-fast), border-color var(--tr-fast);
}
.tile-slot__assign .material-icons-round { font-size: 16px; }
.tile-slot:hover .tile-slot__assign, .tile-slot__assign:focus-visible { opacity: 1; }
.tile-slot__assign:hover { color: var(--c-accent); border-color: var(--c-accent); }

/* ── Tile grid search (task lists, reports, …) ───────────────── */
.list-search { position: relative; margin-bottom: 14px; max-width: 340px; }
.list-search .material-icons-round {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    font-size: 18px; color: var(--c-muted-2); pointer-events: none;
}
.list-search .ga-input { padding-left: 38px; width: 100%; }
/* ── Report tiles: department colour, New / Draft badges ─────── */
.dept--sales      { --tile-accent: var(--c-success); }
.dept--operations { --tile-accent: var(--c-info); }
.dept--hr         { --tile-accent: var(--c-purple); }
.dept--marketing  { --tile-accent: var(--c-orange); }
.dept--social     { --tile-accent: var(--c-danger); }
.dept--website    { --tile-accent: var(--c-accent); }
.dept--finance    { --tile-accent: var(--c-warning); }
.dept--other      { --tile-accent: var(--c-muted); }
.rtile { gap: 14px; }
.rtile::before { opacity: .9; }
.rtile--new { border-color: color-mix(in srgb, var(--c-success) 35%, var(--c-border-dim)); }
.rtile__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 26px; }
.dept-badge {
    display: inline-flex; align-items: center; gap: 6px;
    height: 26px; padding: 0 10px 0 8px; border-radius: 8px;
    background: color-mix(in srgb, var(--tile-accent) 14%, transparent);
    color: var(--tile-accent);
    font-size: 12px; font-weight: 600; letter-spacing: .2px; white-space: nowrap;
}
.dept-badge .material-icons-round { font-size: 16px; }
.rtile__flags { display: inline-flex; gap: 6px; flex-shrink: 0; }
.rbadge {
    display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
}
.rbadge--new     { background: var(--c-success); color: var(--c-surface); box-shadow: 0 0 0 3px var(--c-success-bg); }
.rbadge--draft   { background: var(--c-warning-bg); color: var(--c-warning); }
.rbadge--partial { background: var(--c-muted-bg); color: var(--c-muted); }
.rtile__body { display: flex; flex-direction: column; gap: 6px; }
.rtile__title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rtile__outlet { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--c-muted); }
.rtile__outlet .material-icons-round { font-size: 15px; color: var(--c-muted-2); }
.tile__foot .rtile__fresh, .tile__foot .rtile__fresh .material-icons-round { color: var(--c-success); font-weight: 600; }

/* Month groups: sticky header + gap between months */
.rgroups { display: flex; flex-direction: column; gap: 36px; }
.rgroup__head {
    position: sticky; top: -20px; z-index: 5;
    display: flex; align-items: baseline; gap: 10px;
    margin: -8px 0 14px; padding: 12px 0 10px;
    background: color-mix(in srgb, var(--c-bg) 88%, transparent); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
    border-bottom: 1px solid var(--c-border-dim);
}
@media (min-width: 640px) { .rgroup__head { top: -24px; } }
.rgroup__month { font-size: 17px; font-weight: 700; letter-spacing: -0.2px; color: var(--c-text); }
.rgroup__count { font: 600 11px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .6px; color: var(--c-muted-2); }

/* Type + period stamp, pinned just above the foot so it lines up across a row */
.rstamp {
    display: inline-flex; align-items: stretch; align-self: flex-start; max-width: 100%;
    margin-top: auto; height: 26px; border-radius: 7px; overflow: hidden;
    border: 1px solid var(--c-border-dim); background: var(--c-surface-2);
    font-size: 12px; color: var(--c-text); white-space: nowrap;
}
.rstamp + .tile__foot { margin-top: 0; }
.rstamp__type {
    display: inline-flex; align-items: center; gap: 5px; padding: 0 9px 0 7px; flex-shrink: 0;
    font-size: 10.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
    color: var(--c-muted); border-right: 1px solid var(--c-border-dim);
}
.rstamp__type .material-icons-round { font-size: 15px; }
.rstamp__period { display: block; line-height: 24px; padding: 0 10px; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
/* Monthly / weekly: solid fill on the type segment so they stand out at a glance */
.rstamp--monthly { border-color: var(--c-cad-month); }
.rstamp--monthly .rstamp__type { background: var(--c-cad-month); color: var(--c-cad-ink); border-right: 0; }
.rstamp--weekly  { border-color: var(--c-cad-week); }
.rstamp--weekly  .rstamp__type { background: var(--c-cad-week); color: var(--c-cad-ink); border-right: 0; }
.rstamp--daily .rstamp__type { color: var(--c-text); }

/* Daily series card: one link per day */
.rseries__days { display: flex; flex-wrap: wrap; gap: 6px; }
.rseries__day {
    display: inline-flex; align-items: center; height: 26px; padding: 0 9px; border-radius: 7px;
    background: var(--c-surface-2); border: 1px solid var(--c-border-dim);
    font-size: 12px; color: var(--c-text); text-decoration: none; white-space: nowrap;
    transition: border-color var(--tr-fast), color var(--tr-fast);
}
.rseries__day:hover { color: var(--c-accent); border-color: var(--c-accent); }
.rseries__day--new { color: var(--c-success); font-weight: 600; border-color: color-mix(in srgb, var(--c-success) 40%, var(--c-border-dim)); }

.tile--live { border-color: rgba(30,107,69,0.35); box-shadow: 0 0 0 3px var(--c-success-bg), 0 4px 20px rgba(28,26,23,0.08); }
.tile--live .tile__icon { background: var(--c-success-bg); color: var(--c-success); }

/* ── Filter chips (outlet / department / project pickers) ────── */
.fchips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fchips + .fchips { margin-top: 8px; }
.fchips__label { font: 600 10px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .8px; color: var(--c-muted-2); margin-right: 4px; }
.fchip {
    display: inline-flex; align-items: center; gap: 6px;
    height: 30px; padding: 0 12px; border-radius: 999px;
    background: var(--c-surface); border: 1px solid var(--c-border);
    font-size: 12.5px; font-weight: 500; color: var(--c-muted);
    text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: background var(--tr-fast), border-color var(--tr-fast), color var(--tr-fast);
}
.fchip .material-icons-round { font-size: 15px; }
.fchip:hover { border-color: var(--c-border-hi); color: var(--c-text); }
.fchip.is-active { background: var(--c-accent-dim); border-color: var(--c-accent-glow); color: var(--c-accent); font-weight: 600; }
.fchip__count {
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
    background: var(--c-muted-bg); color: var(--c-muted);
    font: 600 10px/18px var(--font-mono); text-align: center;
}
.fchip.is-active .fchip__count { background: var(--c-accent); color: #fff; }
.fchip-group { display: inline-flex; align-items: center; gap: 2px; }
.fchip-group .btn-icon { width: 26px; height: 26px; }
.fchip-group .btn-icon .material-icons-round { font-size: 14px; }
.fchips__manage { width: 30px; height: 30px; margin-left: 2px; }
.fchips__manage .material-icons-round { font-size: 16px; }

/* ── Manage-projects modal list ───────────────────────────────── */
.manage-list { display: flex; flex-direction: column; gap: 2px; }
.manage-list__row {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 4px; border-radius: 10px;
}
.manage-list__row:hover { background: var(--c-surface-2); }
.manage-list__name { flex: 1; font-size: 13.5px; font-weight: 500; color: var(--c-text); }

/* Segmented view switch (list / board, agenda / month) */
.seg-tabs {
    display: inline-flex; align-items: center; gap: 2px;
    padding: 3px; border-radius: 999px;
    background: var(--c-muted-bg); border: 1px solid var(--c-line);
}
.seg-tabs__item {
    display: inline-flex; align-items: center; gap: 5px;
    height: 28px; padding: 0 12px; border-radius: 999px;
    font-size: 12.5px; font-weight: 500; color: var(--c-muted);
    text-decoration: none; white-space: nowrap; cursor: pointer; border: 0; background: transparent;
    transition: background var(--tr-fast), color var(--tr-fast), box-shadow var(--tr-fast);
}
.seg-tabs__item .material-icons-round { font-size: 16px; }
.seg-tabs__item:hover { color: var(--c-text); }
.seg-tabs__item.active { background: var(--c-surface); color: var(--c-text); font-weight: 600; box-shadow: 0 1px 4px rgba(28,26,23,0.10); }

/* Settings shell sub-nav: scrolls horizontally instead of wrapping on narrow screens */
.settings-subnav-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.settings-subnav-wrap::-webkit-scrollbar { display: none; }
.settings-subnav { width: max-content; }

/* ── Data card (a table or list with a header row) ───────────── */
.data-card {
    background: var(--c-surface); border: 1px solid var(--c-border-dim); border-radius: var(--radius-lg);
    box-shadow: 0 4px 20px rgba(28,26,23,0.07), 0 1px 3px rgba(28,26,23,0.05);
    overflow: hidden;
}
.data-card + .data-card { margin-top: 16px; }
.data-card__head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 16px 20px 12px;
}
.data-card__head--divided { border-bottom: 1px solid var(--c-border-dim); padding-bottom: 14px; }
.data-card__title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: .1px; }
.data-card__count {
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
    background: var(--c-surface-2); color: var(--c-muted);
    font: 600 10.5px/20px var(--font-mono); text-align: center;
}
.data-card__sub { font-size: 12px; color: var(--c-muted); margin-top: 2px; }
.data-card__body { padding: 0 20px 20px; }
.data-card__foot {
    display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap;
    padding: 14px 20px; border-top: 1px solid var(--c-border-dim); background: var(--c-surface-2);
}
.data-card .ga-table thead th { background: var(--c-surface-2); backdrop-filter: none; -webkit-backdrop-filter: none; position: static; border-bottom-color: var(--c-border-dim); }
.data-card .ga-table tbody tr { cursor: default; }
.data-card .ga-table tbody tr[onclick] { cursor: pointer; }
.data-card .ga-table tbody td { padding: 12px 16px; }
.data-card .ga-table tbody td:first-child, .data-card .ga-table thead th:first-child { padding-left: 20px; }
.data-card .ga-table tbody td:last-child,  .data-card .ga-table thead th:last-child  { padding-right: 20px; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-actions { display: inline-flex; align-items: center; gap: 2px; justify-content: flex-end; }
.table-actions .btn-icon { width: 30px; height: 30px; }
.table-actions .btn-icon .material-icons-round { font-size: 17px; }
.row-chevron { color: var(--c-muted-2); transition: transform var(--tr-fast), color var(--tr-fast); }
.row-chevron .material-icons-round { font-size: 18px; }
tr:hover .row-chevron { transform: translateX(3px); color: var(--c-accent); }

/* Person cell: avatar + name + secondary line */
.person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.person__name { font-size: 13px; font-weight: 500; line-height: 1.3; }
.person__sub  { font-size: 11.5px; color: var(--c-muted); line-height: 1.3; margin-top: 1px; }
.person__you  { font: 600 9px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .5px; color: var(--c-accent); margin-left: 6px; }

/* Role pills */
.role-pill {
    display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 9px; border-radius: 999px;
    font: 600 10.5px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .5px;
}
.role-pill .material-icons-round { font-size: 13px; }
.role-pill--admin   { background: var(--c-purple-bg); color: var(--c-purple); }
.role-pill--manager { background: var(--c-info-bg);   color: var(--c-info); }
.role-pill--staff   { background: var(--c-muted-bg);  color: var(--c-muted); }

/* Status dot + label (e.g. "Can log in") */
.status-dot { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.status-dot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.status-dot--ok   { color: var(--c-success); }
.status-dot--warn { color: var(--c-warning); }
.status-dot--off  { color: var(--c-muted-2); }
.status-dot--bad  { color: var(--c-danger); }
.sync-indicator__refresh { margin-left: 10px; font-size: 12px; font-weight: 600; color: var(--c-accent); text-decoration: underline; }

/* ── Callouts ────────────────────────────────────────────────── */
.notice {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 16px; border-radius: 16px;
    border: 1px solid var(--c-border-dim); background: var(--c-surface);
    font-size: 13px; line-height: 1.5; color: var(--c-text);
}
.notice__icon {
    width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--c-accent-dim); color: var(--c-accent);
}
.notice__icon .material-icons-round { font-size: 19px; }
.notice__body { min-width: 0; flex: 1; }
.notice__title { font-weight: 600; margin-bottom: 2px; }
.notice__body p { color: var(--c-muted); }
.notice--warning { background: linear-gradient(120deg, var(--c-warning-bg), transparent 60%), var(--c-surface); border-color: rgba(183,121,31,0.25); }
.notice--warning .notice__icon { background: var(--c-warning-bg); color: var(--c-warning); }
.notice--success { background: linear-gradient(120deg, var(--c-success-bg), transparent 60%), var(--c-surface); border-color: rgba(30,107,69,0.25); }
.notice--success .notice__icon { background: var(--c-success-bg); color: var(--c-success); }
.notice--accent  { background: linear-gradient(120deg, var(--c-accent-dim), transparent 60%), var(--c-surface); border-color: var(--c-accent-glow); }
.notice--danger  { background: linear-gradient(120deg, var(--c-danger-bg), transparent 60%), var(--c-surface); border-color: rgba(192,57,43,0.25); }
.notice--danger .notice__icon { background: var(--c-danger-bg); color: var(--c-danger); }

/* Secret reveal (new API key) */
.secret {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px 10px 14px; border-radius: 12px;
    background: var(--c-surface-2); border: 1px dashed var(--c-border-hi);
    font-family: 'Cascadia Code', 'JetBrains Mono', Consolas, ui-monospace, monospace;
    font-size: 13px; overflow-wrap: anywhere;
}
.secret code { flex: 1; min-width: 0; user-select: all; }
.secret .btn-icon { flex-shrink: 0; }

/* ── Pagination ──────────────────────────────────────────────── */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.pager__info { font: 500 12px var(--font-mono); color: var(--c-muted); }
.pager__nav { display: flex; align-items: center; gap: 6px; }
.pager__btn {
    display: inline-flex; align-items: center; gap: 4px;
    height: 32px; padding: 0 12px; border-radius: 999px;
    background: var(--c-surface); border: 1px solid var(--c-border);
    font-size: 12.5px; font-weight: 500; color: var(--c-text); text-decoration: none;
    transition: border-color var(--tr-fast), background var(--tr-fast);
}
.pager__btn .material-icons-round { font-size: 16px; }
.pager__btn:hover { border-color: var(--c-border-hi); background: var(--c-surface-2); }
.pager__btn.is-disabled { opacity: .4; pointer-events: none; }

/* ── Empty state (page-level alias of the Today one) ─────────── */
.empty { text-align: center; padding: 44px 24px 48px; }
.empty--compact { padding: 22px 20px 26px; }
.empty--compact .empty__icon { width: 48px; height: 48px; margin-bottom: 10px; }
.empty--compact .empty__icon .material-icons-round { font-size: 24px; }
.empty--compact .empty__title { font-size: 14.5px; }
.empty--compact .empty__sub { font-size: 12.5px; }
.empty__icon {
    width: 60px; height: 60px; margin: 0 auto 14px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 30% 30%, var(--c-accent-glow), var(--c-accent-dim));
    color: var(--c-accent);
}
.empty__icon .material-icons-round { font-size: 30px; }
.empty__title { font-size: 16px; font-weight: 600; letter-spacing: -0.1px; }
.empty__sub { font-size: 13px; color: var(--c-muted); margin: 4px auto 0; max-width: 40ch; line-height: 1.5; }
.empty__sub a { color: var(--c-accent); }
.empty__actions { display: flex; justify-content: center; gap: 8px; margin-top: 16px; flex-wrap: wrap; }

/* ── Settings cards ──────────────────────────────────────────── */
.settings-card {
    background: var(--c-surface); border: 1px solid var(--c-border-dim); border-radius: var(--radius-lg);
    box-shadow: 0 4px 20px rgba(28,26,23,0.07), 0 1px 3px rgba(28,26,23,0.05);
    overflow: hidden;
}
.settings-card + .settings-card { margin-top: 16px; }
.settings-card__head { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; }
.settings-card__head--divided { border-bottom: 1px solid var(--c-border-dim); }
.settings-card__icon {
    width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--c-accent-dim); color: var(--c-accent);
}
.settings-card__icon .material-icons-round { font-size: 22px; }
.settings-card__icon--success { background: var(--c-success-bg); color: var(--c-success); }
.settings-card__icon--warning { background: var(--c-warning-bg); color: var(--c-warning); }
.settings-card__icon--muted   { background: var(--c-muted-bg);   color: var(--c-muted); }
.settings-card__icon--info    { background: var(--c-info-bg);    color: var(--c-info); }
.settings-card__text { min-width: 0; flex: 1; }
.settings-card__title { font-size: 15px; font-weight: 600; letter-spacing: -0.1px; }
.settings-card__desc { font-size: 12.5px; color: var(--c-muted); margin-top: 2px; line-height: 1.5; }
.settings-card__body { padding: 20px; }
.settings-card__head + .settings-card__body { padding-top: 4px; }
.settings-card__foot {
    display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap;
    padding: 14px 20px; border-top: 1px solid var(--c-border-dim); background: var(--c-surface-2);
}
.settings-card__section { padding: 14px 20px 6px; border-top: 1px solid var(--c-border-dim); }

/* Toggle rows inside a settings card */
.pref-row {
    display: flex; align-items: center; gap: 14px;
    padding: 13px 20px; border-top: 1px solid var(--c-border-dim);
    cursor: pointer; transition: background var(--tr-fast);
}
.pref-row:hover { background: var(--c-surface-2); }
.pref-row__icon {
    width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--c-surface-2); color: var(--c-muted);
    transition: background var(--tr-fast), color var(--tr-fast);
}
.pref-row__icon .material-icons-round { font-size: 18px; }
.pref-row:has(input:checked) .pref-row__icon { background: var(--c-accent-dim); color: var(--c-accent); }
.pref-row__text { flex: 1; min-width: 0; }
.pref-row__label { display: block; font-size: 14px; font-weight: 500; }
.pref-row__hint  { display: block; font-size: 12px; color: var(--c-muted); margin-top: 1px; }

/* Key/value definition rows */
.kv { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px 16px; font-size: 12.5px; align-items: baseline; margin: 0; }
.kv dt { color: var(--c-muted); }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) { .kv { grid-template-columns: 1fr; gap: 2px 0; } .kv dd { margin-bottom: 8px; } }

/* Console-style log block */
.log-block {
    padding: 12px 14px; border-radius: 12px; max-height: 260px; overflow: auto; margin: 0;
    background: #1c1a17; color: #e8e4de; border: 1px solid var(--c-border);
    font: 11.5px/1.6 'Cascadia Code', 'JetBrains Mono', Consolas, ui-monospace, monospace;
    white-space: pre-wrap; overflow-wrap: anywhere;
}
:root[data-theme="dark"] .log-block { background: #0f0e0d; }

/* ── Checkable option lists (employee pickers, outlet access…) ─ */
.check-list {
    display: flex; flex-direction: column; gap: 2px;
    padding: 6px; border-radius: 12px;
    border: 1px solid var(--c-border); background: var(--c-surface);
    max-height: 220px; overflow-y: auto;
}
.check-list--flat { border: 0; padding: 0; background: transparent; max-height: none; }
.check-item {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 10px; border-radius: 9px;
    font-size: 13px; color: var(--c-text); cursor: pointer;
    transition: background var(--tr-fast);
}
.check-item:hover { background: var(--c-surface-2); }
.check-item:has(input:checked) { background: var(--c-accent-dim); }
.check-item:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.check-item__meta { margin-left: auto; font-size: 10.5px; color: var(--c-muted); white-space: nowrap; }
.check-item .avatar-sm { width: 24px; height: 24px; font-size: 9.5px; border-radius: 7px; }

/* Native checkbox restyle so raw inputs match the accent */
.ga-check {
    appearance: none; -webkit-appearance: none;
    width: 17px; height: 17px; flex-shrink: 0; margin: 0;
    border-radius: 5px; border: 1.5px solid var(--c-border-hi); background: var(--c-surface);
    display: inline-grid; place-content: center; cursor: pointer;
    transition: background var(--tr-fast), border-color var(--tr-fast), box-shadow var(--tr-fast);
}
.ga-check::before {
    content: ''; width: 9px; height: 9px;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    background: #fff; transform: scale(0); transition: transform 160ms var(--ease-spring);
}
.ga-check:hover { border-color: var(--c-accent); }
.ga-check:checked { background: var(--c-accent); border-color: var(--c-accent); }
.ga-check:checked::before { transform: scale(1); }
.ga-check:focus-visible { box-shadow: 0 0 0 3px var(--c-accent-dim); outline: 0; }
.ga-check:disabled { opacity: .5; cursor: not-allowed; }

/* ── Occurrence rows (meeting detail) ────────────────────────── */
.occ {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 20px; border-bottom: 1px solid var(--c-border-dim);
    color: var(--c-text); text-decoration: none;
    transition: background var(--tr-fast);
}
.occ:last-child { border-bottom: 0; }
.occ:hover { background: var(--c-surface-2); }
.occ__date {
    width: 46px; flex-shrink: 0; text-align: center;
    padding: 5px 0; border-radius: 12px; background: var(--c-surface-2);
}
.occ__mon { display: block; font: 600 9.5px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .6px; color: var(--c-muted); }
.occ__day { display: block; font: 700 19px/1.15 var(--font-mono); margin-top: 2px; }
.occ--live .occ__date { background: var(--c-success-bg); color: var(--c-success); }
.occ--live .occ__mon  { color: var(--c-success); }
.occ--done .occ__date { opacity: .7; }
.occ--cancelled { opacity: .6; }
.occ__body { flex: 1; min-width: 0; }
.occ__title { font-size: 14px; font-weight: 500; }
.occ__sub { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--c-muted); margin-top: 2px; }
.occ__status { flex-shrink: 0; }

/* ── Meeting occurrence hero ─────────────────────────────────── */
.meet-hero {
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    padding: 22px 24px;
    background: var(--c-surface); border: 1px solid var(--c-border-dim); border-radius: var(--radius-xl);
    box-shadow: 0 4px 20px rgba(28,26,23,0.07), 0 1px 3px rgba(28,26,23,0.05);
    margin-bottom: 20px;
}
.meet-hero::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(60% 120% at 0% 0%, var(--meet-tint, var(--c-accent-dim)) 0%, transparent 60%);
    pointer-events: none;
}
.meet-hero > * { position: relative; }
.meet-hero--live { --meet-tint: var(--c-success-bg); border-color: rgba(30,107,69,0.35); box-shadow: 0 0 0 3px var(--c-success-bg), 0 4px 20px rgba(28,26,23,0.08); }
.meet-hero--done { --meet-tint: var(--c-success-bg); }
.meet-hero--cancelled { --meet-tint: var(--c-danger-bg); }
.meet-hero__icon {
    width: 56px; height: 56px; border-radius: 18px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--c-accent-dim); color: var(--c-accent);
}
.meet-hero__icon .material-icons-round { font-size: 28px; }
.meet-hero--live .meet-hero__icon { background: var(--c-success-bg); color: var(--c-success); animation: chat-mark-pulse 1.6s ease-in-out infinite; }
.meet-hero--done .meet-hero__icon { background: var(--c-success-bg); color: var(--c-success); }
.meet-hero--cancelled .meet-hero__icon { background: var(--c-danger-bg); color: var(--c-danger); }
.meet-hero__text { flex: 1 1 260px; min-width: 0; }
.meet-hero__title { font-size: 22px; font-weight: 700; letter-spacing: -0.4px; line-height: 1.2; }
@media (min-width: 640px) { .meet-hero__title { font-size: 26px; } }
.meet-hero__meta { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; margin-top: 8px; font-size: 13px; color: var(--c-muted); }
.meet-hero__meta > span { display: inline-flex; align-items: center; gap: 5px; }
.meet-hero__meta .material-icons-round { font-size: 16px; color: var(--c-muted-2); }
.meet-hero__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Attendance list */
.attend { display: flex; flex-direction: column; gap: 2px; }
.attend__row {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 10px; border-radius: 10px; font-size: 13px;
    transition: background var(--tr-fast);
}
label.attend__row { cursor: pointer; }
label.attend__row:hover { background: var(--c-surface-2); }
.attend__row .avatar-sm { width: 26px; height: 26px; font-size: 10px; border-radius: 8px; }
.attend__name { flex: 1; min-width: 0; }
.attend__state { font-size: 11px; font-weight: 600; }
.attend__row.is-present .attend__state { color: var(--c-success); }
.attend__row.is-absent  { color: var(--c-muted); }
.attend__row.is-absent .attend__state { color: var(--c-muted-2); }
.attend__row.is-absent .avatar-sm { opacity: .55; }

/* Topic rows */
.topic {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: 10px; font-size: 13.5px;
    transition: background var(--tr-fast);
}
.topic:hover { background: var(--c-surface-2); }
.topic__num { width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--c-accent-dim); color: var(--c-accent); font: 700 10.5px/1 var(--font-mono); }
.topic__text { flex: 1; min-width: 0; }
.topic form { margin: 0; }

/* Action-item rows (meeting detail) */
.action-row {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 10px 12px; border-radius: 12px;
    transition: background var(--tr-fast);
}
.action-row:hover { background: var(--c-surface-2); }
.action-row__text { flex: 1 1 200px; min-width: 0; font-size: 13.5px; }
.action-row__who { font-size: 11.5px; color: var(--c-muted); margin-top: 1px; }
.action-row__meta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.action-row.is-done .action-row__text { color: var(--c-muted); text-decoration: line-through; text-decoration-color: var(--c-border-hi); }

/* Minute body */
.minute-body { font-size: 14px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.minute-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font: 500 11.5px var(--font-mono); color: var(--c-muted-2); margin-top: 14px; }

/* ── Calendar month grid ─────────────────────────────────────── */
.cal {
    background: var(--c-surface); border: 1px solid var(--c-border-dim); border-radius: var(--radius-lg);
    box-shadow: 0 4px 20px rgba(28,26,23,0.07), 0 1px 3px rgba(28,26,23,0.05);
    overflow: hidden;
}
.cal__dow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--c-border-dim); background: var(--c-surface-2); }
.cal__dow span { padding: 9px 0; text-align: center; font: 600 10px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .8px; color: var(--c-muted); }
.cal__dow span:nth-child(n+6) { color: var(--c-muted-2); }
.cal__week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--c-border-dim); }
.cal__week:last-child { border-bottom: 0; }
.cal-day {
    position: relative; min-height: 112px; padding: 8px;
    display: flex; flex-direction: column; gap: 4px;
    border-right: 1px solid var(--c-border-dim); cursor: pointer;
    transition: background var(--tr-fast);
}
.cal-day:last-child { border-right: 0; }
.cal-day:hover { background: var(--c-surface-2); }
.cal-day.is-out { background: repeating-linear-gradient(135deg, transparent 0 6px, var(--c-line) 6px 7px); }
.cal-day.is-out .cal-day__num, .cal-day.is-out .cal-items { opacity: .45; }
.cal-day.is-today { background: linear-gradient(180deg, var(--c-accent-dim), transparent 55%); }
.cal-day__head { display: flex; align-items: center; justify-content: space-between; }
.cal-day__num {
    width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    font: 600 12px/1 var(--font-mono); color: var(--c-muted);
}
.cal-day.is-today .cal-day__num { background: var(--c-accent); color: #fff; box-shadow: 0 2px 8px var(--c-accent-glow); }
.cal-day__add { width: 22px; height: 22px; opacity: 0; }
.cal-day__add .material-icons-round { font-size: 15px; }
.cal-day:hover .cal-day__add { opacity: 1; }
.cal-items { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal-chip {
    display: flex; align-items: center; gap: 4px;
    padding: 2px 7px; border-radius: 7px;
    font-size: 11px; font-weight: 500; line-height: 1.5;
    color: var(--chip-fg); background: var(--chip-bg);
    text-decoration: none; overflow: hidden; white-space: nowrap;
    transition: filter var(--tr-fast), transform var(--tr-fast);
}
.cal-chip .material-icons-round { font-size: 12px; flex-shrink: 0; }
.cal-chip__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
a.cal-chip:hover { filter: brightness(0.94); transform: translateX(1px); }
.cal-chip--meeting { --chip-fg: var(--c-purple);  --chip-bg: var(--c-purple-bg); }
.cal-chip--event   { --chip-fg: var(--c-success); --chip-bg: var(--c-success-bg); }
.cal-chip--task    { --chip-fg: var(--c-accent);  --chip-bg: var(--c-accent-dim); }
.cal-chip--task.is-done { text-decoration: line-through; opacity: .65; }
.cal-chip--task.is-late { --chip-fg: var(--c-danger); --chip-bg: var(--c-danger-bg); }
.cal-chip--sched { font-family: var(--font-mono); font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: .4px; }
.cal-chip--shift   { --chip-fg: var(--c-info);    --chip-bg: var(--c-info-bg); }
.cal-chip--day_off { --chip-fg: var(--c-muted);   --chip-bg: var(--c-muted-bg); }
.cal-chip--leave   { --chip-fg: var(--c-warning); --chip-bg: var(--c-warning-bg); }
.cal-chip--absence { --chip-fg: var(--c-danger);  --chip-bg: var(--c-danger-bg); }
.cal-chip__x { display: inline-flex; opacity: 0; border: 0; background: none; color: inherit; padding: 0; cursor: pointer; line-height: 0; }
.cal-chip:hover .cal-chip__x { opacity: .8; }
.cal-more { font: 600 10px/1 var(--font-mono); color: var(--c-muted); padding: 2px 7px; }
.cal-legend { display: flex; align-items: center; gap: 6px 16px; flex-wrap: wrap; margin-top: 14px; font-size: 11.5px; color: var(--c-muted); }
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cal-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
@media (pointer: coarse) { .cal-day__add { opacity: 1; } }

/* Agenda polish: cards instead of hairline rows */
.agenda { gap: 8px; max-width: 900px; }
.agenda__day {
    padding: 12px 14px; border: 1px solid var(--c-border-dim); border-radius: 18px;
    background: var(--c-surface); box-shadow: 0 2px 10px rgba(28,26,23,0.04);
    transition: box-shadow var(--tr-fast);
}
.agenda__day:hover { box-shadow: 0 6px 20px rgba(28,26,23,0.08); }
.agenda__day.is-today { border-color: var(--c-accent-glow); background: linear-gradient(120deg, var(--c-accent-dim), transparent 45%), var(--c-surface); }
.agenda__day.is-empty { background: transparent; box-shadow: none; border-style: dashed; }
.agenda__day.is-empty:hover { box-shadow: none; }

/* ── Notification day groups ─────────────────────────────────── */
.notif-day {
    padding: 14px 20px 6px;
    font: 600 10.5px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .8px; color: var(--c-muted-2);
}
.notif-day + .notif { border-top: 1px solid var(--c-border-dim); }

/* ── Report viewer ───────────────────────────────────────────── */
.report-page { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.report-frame {
    background: var(--c-surface); border: 1px solid var(--c-border-dim); border-radius: var(--radius-lg);
    box-shadow: 0 4px 20px rgba(28,26,23,0.07), 0 1px 3px rgba(28,26,23,0.05);
    overflow: hidden; flex: 1 1 auto; min-height: 420px;
}
.report-frame iframe { width: 100%; height: 100%; border: 0; background: #fff; }

/* Compact share/sources bar above the report frame — replaces full-size .notice cards
   so the iframe below keeps most of the vertical space. */
.report-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; flex-shrink: 0; }
.report-toolbar-item {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 7px 12px; border-radius: 999px;
    border: 1px solid var(--c-border-dim); background: var(--c-surface);
    font-size: 12.5px; color: var(--c-muted); line-height: 1.4;
}
.report-toolbar-item__icon { font-size: 16px; flex-shrink: 0; color: var(--c-muted-2); }
.report-toolbar-item.is-active { border-color: var(--c-accent-glow); background: var(--c-accent-dim); color: var(--c-text); }
.report-toolbar-item.is-active .report-toolbar-item__icon { color: var(--c-accent); }
.report-toolbar-item code {
    font-family: 'Cascadia Code', 'JetBrains Mono', Consolas, ui-monospace, monospace;
    font-size: 11.5px; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.report-toolbar-item__action {
    background: none; border: none; padding: 0; margin: 0; font: inherit; font-weight: 600;
    color: var(--c-accent); cursor: pointer; white-space: nowrap;
}
.report-toolbar-item__action:hover { text-decoration: underline; }
.report-toolbar-item__action--danger { color: var(--c-danger); }
.report-toolbar-item form { display: contents; }
.report-toolbar-sources > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; }
.report-toolbar-sources > summary::-webkit-details-marker { display: none; }
.report-toolbar-sources ul { margin-top: 8px; padding-left: 24px; }
.report-toolbar-sources[open] { flex-basis: 100%; }
.meta-chip {
    display: inline-flex; align-items: center; gap: 5px;
    height: 26px; padding: 0 10px; border-radius: 999px;
    background: var(--c-surface-2); border: 1px solid var(--c-border-dim);
    font-size: 12px; color: var(--c-muted); white-space: nowrap;
}
.meta-chip .material-icons-round { font-size: 14px; color: var(--c-muted-2); }
.meta-chip--mono { font-family: var(--font-mono); }

/* ── Theme preview swatches (Appearance) ─────────────────────── */
.theme-choice { border-radius: 16px; padding: 12px; }
.theme-choice__preview { height: 64px; border-radius: 10px; }
.theme-choice__preview::before {
    content: ''; position: absolute; left: 10px; top: 24px; width: 65%; height: 5px; border-radius: 3px;
    background: currentColor; opacity: .12;
}
.theme-choice__preview--light { color: #1c1a17; }
.theme-choice__preview--dark  { color: #f1ede7; }
.theme-choice__preview--system { color: #8a857f; }

/* ── Channel chips (event log) ───────────────────────────────── */
.chan {
    display: inline-flex; align-items: center; gap: 6px;
    height: 24px; padding: 0 9px 0 6px; border-radius: 999px;
    font-size: 12px; font-weight: 500; white-space: nowrap;
    background: var(--c-muted-bg); color: var(--c-muted);
}
.chan .material-icons-round { font-size: 14px; }
.chan--whatsapp { background: var(--c-success-bg); color: var(--c-success); }
.chan--signal   { background: var(--c-info-bg);    color: var(--c-info); }

/* ── Filter bar (event log) ──────────────────────────────────── */
.filter-bar {
    display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
    padding: 14px 16px; margin-bottom: 16px;
    background: var(--c-glass); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid var(--c-line); border-radius: 18px;
}
.filter-bar .form-group { flex: 1 1 140px; min-width: 120px; margin: 0; }
.filter-bar .form-group--date { flex: 0 1 150px; }
.filter-bar__actions { display: flex; align-items: center; gap: 8px; }

/* ── Login polish ────────────────────────────────────────────── */
.login-card { border-radius: var(--radius-xl); }
.login-logo { box-shadow: 0 12px 32px var(--c-accent-glow), 0 2px 6px rgba(28,26,23,0.10); }
.page-head--center { flex-direction: column; align-items: center; text-align: center; }
.page-head--center .page-head__eyebrow, .page-head--center .page-head__title { justify-content: center; }
.page-head--center .page-head__text { flex: 0 1 auto; }

/* Pill variant of the underline tabs (Tasks: My tasks / All lists) */
.ga-tabs--pill { border-bottom: 0; gap: 4px; }
.ga-tabs--pill .ga-tab { border-bottom: 0; border-radius: 999px; padding: 7px 14px; display: inline-flex; align-items: center; gap: 4px; }
.ga-tabs--pill .ga-tab:hover { background: var(--c-muted-bg); }
.ga-tabs--pill .ga-tab.active { background: var(--c-accent-dim); font-weight: 600; }

/* ── Nextcloud file explorer (Attach from Nextcloud) ─────────────
   Markup: app/views/tasks/_nextcloud_picker.php · logic: ncPicker in app.js.
   A fixed-height explorer: toolbar → [places rail | listing] → selection footer. */
.ga-modal__box--explorer {
    max-width: 860px;
    height: min(640px, calc(100dvh - 96px));
    display: flex; flex-direction: column;
    overflow: hidden;
}
.ncx-header { flex-shrink: 0; padding: 14px 20px; }
.ncx-title { display: inline-flex; align-items: center; gap: 10px; }
.ncx-title__logo {
    width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--c-info-bg); color: var(--c-info);
}

/* Toolbar */
.ncx-toolbar {
    flex-shrink: 0;
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--c-border-dim);
    background: var(--c-surface);
}
.ncx-nav { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; }
.ncx-nav__btn {
    width: 30px; height: 30px; border-radius: 8px; border: 0; padding: 0;
    background: transparent; color: var(--c-muted); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background var(--tr-fast), color var(--tr-fast);
}
.ncx-nav__btn .material-icons-round { font-size: 19px; }
.ncx-nav__btn:hover:not(:disabled) { background: var(--c-surface-2); color: var(--c-text); }
.ncx-nav__btn:disabled { opacity: .32; cursor: default; }

.ncx-crumbs {
    flex: 1 1 200px; min-width: 0;
    display: flex; align-items: center; gap: 2px;
    height: 32px; padding: 0 6px;
    border: 1px solid var(--c-border); border-radius: 8px;
    background: var(--c-bg);
    overflow-x: auto; scrollbar-width: none; white-space: nowrap;
}
.ncx-crumbs::-webkit-scrollbar { display: none; }
.ncx-crumb {
    display: inline-flex; align-items: center; gap: 4px;
    height: 24px; padding: 0 7px; border-radius: 6px; border: 0;
    background: transparent; font: 500 12.5px var(--font-ui); color: var(--c-muted);
    cursor: pointer; white-space: nowrap; max-width: 220px;
    transition: background var(--tr-fast), color var(--tr-fast);
}
.ncx-crumb > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.ncx-crumb .material-icons-round { font-size: 16px; }
.ncx-crumb:hover { background: var(--c-surface-2); color: var(--c-text); }
.ncx-crumb.is-current { color: var(--c-text); font-weight: 600; cursor: default; }
.ncx-crumb.is-current:hover { background: transparent; }
.ncx-crumb--search { color: var(--c-accent) !important; }
.ncx-crumb__sep { font-size: 16px; color: var(--c-muted-2); flex-shrink: 0; }
.ncx-crumb__more { position: relative; }
.ncx-crumb__menu {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 5;
    min-width: 180px; padding: 4px;
    background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 10px;
    box-shadow: 0 10px 30px rgba(28,26,23,0.14);
}
.ncx-crumb__menu button {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 6px 8px; border: 0; border-radius: 6px; background: transparent;
    font: 500 12.5px var(--font-ui); color: var(--c-text); cursor: pointer; text-align: left;
}
.ncx-crumb__menu button .material-icons-round { font-size: 16px; color: var(--c-warning); }
.ncx-crumb__menu button:hover { background: var(--c-surface-2); }

.ncx-search { position: relative; flex: 0 1 260px; min-width: 150px; }
.ncx-search__icon { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); font-size: 17px; color: var(--c-muted-2); pointer-events: none; }
.ncx-search__input {
    width: 100%; height: 32px; padding: 0 30px 0 32px;
    border: 1px solid var(--c-border); border-radius: 8px; background: var(--c-surface);
    font: 500 12.5px var(--font-ui); color: var(--c-text); outline: none;
    transition: border-color var(--tr-fast), box-shadow var(--tr-fast);
}
.ncx-search__input::placeholder { color: var(--c-muted-2); }
.ncx-search__input::-webkit-search-cancel-button { display: none; }
.ncx-search__input:focus { border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-dim); }
.ncx-search__clear {
    position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
    width: 22px; height: 22px; border: 0; border-radius: 6px; padding: 0;
    background: transparent; color: var(--c-muted); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.ncx-search__clear .material-icons-round { font-size: 15px; }
.ncx-search__clear:hover { background: var(--c-surface-2); color: var(--c-text); }

.ncx-viewtoggle {
    display: inline-flex; flex-shrink: 0; padding: 2px;
    border: 1px solid var(--c-border); border-radius: 8px; background: var(--c-bg);
}
.ncx-viewtoggle__btn {
    width: 28px; height: 26px; border: 0; border-radius: 6px; padding: 0;
    background: transparent; color: var(--c-muted); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background var(--tr-fast), color var(--tr-fast);
}
.ncx-viewtoggle__btn .material-icons-round { font-size: 17px; }
.ncx-viewtoggle__btn:hover { color: var(--c-text); }
.ncx-viewtoggle__btn.is-active { background: var(--c-surface); color: var(--c-accent); box-shadow: 0 1px 2px rgba(28,26,23,0.10); }

/* Body: places rail + listing */
.ncx-body { flex: 1; min-height: 0; display: flex; }
.ncx-side {
    flex: 0 0 190px; min-width: 0;
    padding: 10px 8px;
    border-right: 1px solid var(--c-border-dim);
    background: var(--c-bg);
    overflow-y: auto;
    display: flex; flex-direction: column; gap: 2px;
}
.ncx-side__label {
    font: 600 10px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .8px;
    color: var(--c-muted-2); padding: 4px 10px 6px;
}
.ncx-side__label--recent { margin-top: 12px; }
.ncx-side__item {
    display: flex; align-items: center; gap: 8px; width: 100%;
    height: 30px; padding: 0 10px; border: 0; border-radius: 8px;
    background: transparent; font: 500 12.5px var(--font-ui); color: var(--c-text);
    cursor: pointer; text-align: left;
    transition: background var(--tr-fast), color var(--tr-fast);
}
.ncx-side__item > span:last-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ncx-side__item .material-icons-round { font-size: 17px; color: var(--c-muted); flex-shrink: 0; }
.ncx-side__item:hover { background: var(--c-surface-2); }
.ncx-side__item.is-active { background: var(--c-accent-dim); color: var(--c-accent); font-weight: 600; }
.ncx-side__item.is-active .material-icons-round { color: var(--c-accent); }
.ncx-side__empty { font: 400 11.5px/1.45 var(--font-ui); color: var(--c-muted-2); padding: 2px 10px; }

.ncx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--c-surface); }
.ncx-status {
    flex-shrink: 0; display: flex; align-items: center; gap: 10px;
    min-height: 30px; padding: 4px 16px;
    font: 500 11.5px var(--font-ui); color: var(--c-muted);
    border-bottom: 1px solid var(--c-border-dim);
}
.ncx-status.is-empty { min-height: 0; padding: 0; border-bottom: 0; }
.ncx-status--search { background: var(--c-accent-dim); color: var(--c-accent); }
.ncx-status--warn { color: var(--c-warning); }
.ncx-status__action {
    margin-left: auto; border: 0; background: transparent; padding: 2px 6px; border-radius: 6px;
    font: 600 11.5px var(--font-ui); color: var(--c-accent); cursor: pointer;
}
.ncx-status__action:hover { background: var(--c-surface); }

/* Column headers (list view) */
.ncx-cols {
    flex-shrink: 0; display: grid; align-items: center;
    grid-template-columns: 34px minmax(0, 1fr) 118px 78px 24px; gap: 10px;
    padding: 0 12px 0 14px; height: 30px;
    border-bottom: 1px solid var(--c-border-dim);
}
.ncx-col {
    display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 6px; margin-left: -6px;
    border: 0; border-radius: 6px; background: transparent;
    font: 600 10.5px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .6px;
    color: var(--c-muted-2); cursor: pointer; white-space: nowrap;
    transition: color var(--tr-fast), background var(--tr-fast);
}
.ncx-col--name { grid-column: 2; }
.ncx-col--modified { grid-column: 3; }
.ncx-col--size { grid-column: 4; justify-content: flex-end; margin-left: 0; margin-right: -6px; }
.ncx-col:hover { color: var(--c-text); background: var(--c-surface-2); }
.ncx-col.is-active { color: var(--c-text); }
.ncx-col__arrow { font-size: 13px; opacity: 0; transition: opacity var(--tr-fast), transform var(--tr-fast); }
.ncx-col.is-active .ncx-col__arrow { opacity: 1; }
.ncx-col.is-desc .ncx-col__arrow { transform: rotate(180deg); }

/* Listing */
.ncx-list { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 8px 10px; outline: none; }
.ncx-list:focus-visible { box-shadow: inset 0 0 0 2px var(--c-accent-dim); }
.ncx-row {
    display: grid; align-items: center;
    grid-template-columns: 34px minmax(0, 1fr) 118px 78px 24px; gap: 10px;
    padding: 5px 4px 5px 6px; border-radius: 8px;
    font: 500 13px var(--font-ui); color: var(--c-text);
    cursor: pointer; user-select: none;
    transition: background var(--tr-fast), box-shadow var(--tr-fast);
}
.ncx-row:hover { background: var(--c-surface-2); }
.ncx-row.is-cursor { box-shadow: inset 0 0 0 1.5px var(--c-accent); }
.ncx-row.is-selected { background: var(--c-accent-dim); }
.ncx-row.is-selected:hover { background: var(--c-accent-glow); }
.ncx-row__name { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ncx-row__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ncx-row__sub { font: 400 11px var(--font-ui); color: var(--c-muted-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ncx-row__modified, .ncx-row__size { font: 500 12px var(--font-mono); color: var(--c-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ncx-row__size { text-align: right; }
.ncx-row__chev { font-size: 18px; color: var(--c-muted-2); opacity: 0; transition: opacity var(--tr-fast), transform var(--tr-fast); }
.ncx-row--dir:hover .ncx-row__chev { opacity: 1; transform: translateX(2px); }
.ncx-row--dir .ncx-row__title { font-weight: 600; }

/* Type icons */
.ncx-icon {
    position: relative; width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--c-muted-bg); color: var(--c-muted);
}
.ncx-icon .material-icons-round { font-size: 20px; }
.ncx-icon--sm { width: 28px; height: 28px; border-radius: 7px; }
.ncx-icon--sm .material-icons-round { font-size: 17px; }
.ncx-icon--folder  { background: var(--c-warning-bg); color: var(--c-warning); }
.ncx-icon--pdf     { background: var(--c-danger-bg);  color: var(--c-danger); }
.ncx-icon--doc     { background: var(--c-info-bg);    color: var(--c-info); }
.ncx-icon--sheet   { background: var(--c-success-bg); color: var(--c-success); }
.ncx-icon--slides  { background: rgba(192,92,26,0.10); color: var(--c-orange); }
.ncx-icon--image   { background: var(--c-purple-bg);  color: var(--c-purple); }
.ncx-icon--video   { background: var(--c-purple-bg);  color: var(--c-purple); }
.ncx-icon--audio   { background: var(--c-info-bg);    color: var(--c-info); }
.ncx-icon--archive { background: var(--c-warning-bg); color: var(--c-warning); }
.ncx-icon--code    { background: var(--c-muted-bg);   color: var(--c-text); }
.ncx-icon--text    { background: var(--c-muted-bg);   color: var(--c-muted); }
/* Selected-file check overlay (list view) */
.ncx-icon__check {
    position: absolute; inset: 0; border-radius: inherit;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--c-accent); color: #fff; font-size: 20px !important;
    transform: scale(0); opacity: 0;
    transition: transform 180ms var(--ease-spring), opacity var(--tr-fast);
}
.ncx-row.is-selected .ncx-icon__check { transform: scale(1); opacity: 1; }

/* Grid view */
.ncx-list--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; align-content: start; padding: 10px; }
.ncx-list--grid .ncx-row {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
    padding: 12px 8px 10px; border: 1px solid transparent;
}
.ncx-list--grid .ncx-row:hover { border-color: var(--c-border); }
.ncx-list--grid .ncx-row.is-selected { border-color: var(--c-accent); }
.ncx-list--grid .ncx-icon { width: 52px; height: 52px; border-radius: 14px; }
.ncx-list--grid .ncx-icon .material-icons-round { font-size: 30px; }
.ncx-list--grid .ncx-row__name { width: 100%; align-items: center; }
.ncx-list--grid .ncx-row__title { font-size: 12px; max-width: 100%; }
.ncx-list--grid .ncx-row__sub { max-width: 100%; }
.ncx-list--grid .ncx-row__modified { font-size: 10.5px; color: var(--c-muted-2); }
.ncx-list--grid .ncx-row__size, .ncx-list--grid .ncx-row__chev { display: none; }
.ncx-list--grid .ncx-skel { flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px; }
.ncx-list--grid .ncx-skel__icon { width: 52px; height: 52px; border-radius: 14px; }
.ncx-list--grid .ncx-skel__bar { width: 70% !important; }
.ncx-list--grid .ncx-skel__bar--sm, .ncx-list--grid .ncx-skel__bar--xs { display: none; }
.ncx-list--grid .ncx-empty { grid-column: 1 / -1; }

/* Loading skeleton */
.ncx-skel { display: flex; align-items: center; gap: 10px; padding: 6px 4px 6px 6px; }
.ncx-skel__icon { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; }
.ncx-skel__bar { height: 11px; border-radius: 6px; width: var(--w, 40%); flex-shrink: 0; }
.ncx-skel__bar--sm { width: 70px; margin-left: auto; }
.ncx-skel__bar--xs { width: 42px; }
.ncx-skel__icon, .ncx-skel__bar {
    background: linear-gradient(90deg, var(--c-surface-2) 25%, var(--c-surface-3) 50%, var(--c-surface-2) 75%);
    background-size: 200% 100%;
    animation: ncx-shimmer 1.2s linear infinite;
}
@keyframes ncx-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Empty / error */
.ncx-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    min-height: 220px; padding: 24px; text-align: center;
}
.ncx-empty__icon { font-size: 40px; color: var(--c-muted-2); }
.ncx-empty__text { font: 500 13px/1.5 var(--font-ui); color: var(--c-muted); max-width: 380px; }
.ncx-empty--error .ncx-empty__icon { color: var(--c-danger); }
.ncx-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }

/* Footer */
.ncx-footer { flex-shrink: 0; justify-content: space-between; gap: 16px; padding: 12px 20px; }
.ncx-footer__selection { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.ncx-footer__hint { font: 400 12px var(--font-ui); color: var(--c-muted-2); }
.ncx-footer__file { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ncx-footer__name { font: 600 13px var(--font-ui); color: var(--c-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ncx-footer__path { font: 400 11px var(--font-mono); color: var(--c-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ncx-footer__clear { border: 0; background: transparent; padding: 2px 6px; border-radius: 6px; font: 600 11.5px var(--font-ui); color: var(--c-muted); cursor: pointer; flex-shrink: 0; }
.ncx-footer__clear:hover { color: var(--c-danger); background: var(--c-danger-bg); }
.ncx-footer__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ncx-footer .btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }

/* Narrow screens: drop the places rail and the secondary columns */
@media (max-width: 767px) {
    .ga-modal__box--explorer { height: 92dvh; max-height: 92dvh; overflow: hidden; }
    .ncx-side { display: none; }
    .ncx-toolbar { flex-wrap: wrap; gap: 8px; }
    .ncx-crumbs { flex-basis: 100%; order: 3; }
    .ncx-search { flex: 1 1 0; min-width: 110px; }
    .ncx-cols, .ncx-row { grid-template-columns: 34px minmax(0, 1fr) 78px 24px; }
    .ncx-col--modified, .ncx-row__modified { display: none; }
    .ncx-col--size { grid-column: 3; }
    .ncx-footer { flex-direction: column; align-items: stretch; }
    .ncx-footer__actions { justify-content: flex-end; }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .ncx-side { flex-basis: 160px; }
}

/* ── Team overview roster (people by outlet, with their workload) ─
   One .data-card per outlet; each row is a button that pulls the employee's
   tasks into the #team-drawer sidebar over htmx. */
.roster { display: flex; flex-direction: column; padding: 6px 10px 12px; }
.roster-row {
    position: relative;
    display: grid; align-items: center; gap: 4px 12px;
    grid-template-columns: 34px minmax(0, 1fr) 58px auto 136px 24px;
    width: 100%; padding: 10px; border: 0; border-radius: 12px;
    background: transparent; color: var(--c-text); text-align: left; cursor: pointer;
    font: inherit;
    transition: background var(--tr-fast);
}
.roster-row:hover { background: var(--c-surface-2); }
.roster-row:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; }
.roster-row:hover .row-chevron { transform: translateX(3px); color: var(--c-accent); }
/* Divider that stops short of the avatar, so the rows read as one list */
.roster-row + .roster-row::before {
    content: ''; position: absolute; top: 0; left: 56px; right: 10px;
    height: 1px; background: var(--c-border-dim);
}
.roster-row + .roster-row:hover::before { background: transparent; }
.roster-row > .avatar { cursor: pointer; }
.roster-row__who { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.roster-row__name { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.roster-row__sub { font-size: 11.5px; color: var(--c-muted); line-height: 1.3; }
.roster-row__count { display: flex; align-items: baseline; justify-content: flex-end; gap: 4px; white-space: nowrap; }
.roster-row__count-value { font: 700 17px/1 var(--font-mono); letter-spacing: -0.3px; font-variant-numeric: tabular-nums; }
.roster-row__count-label { font: 600 9.5px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .6px; color: var(--c-muted-2); }
.roster-row__count.is-clear .roster-row__count-value { color: var(--c-success); }
.roster-row__outlets {
    flex-shrink: 0; padding: 1px 7px; border-radius: 999px;
    background: var(--c-muted-bg); color: var(--c-muted);
    font: 600 10px/1.5 var(--font-mono); white-space: nowrap;
}
.roster-row__flag:empty { display: none; }
.roster-row__late {
    display: inline-flex; align-items: center; gap: 3px; white-space: nowrap;
    padding: 2px 8px; border-radius: 999px;
    background: var(--c-danger-bg); color: var(--c-danger);
    font: 700 10px/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .3px;
}
.roster-row__late .material-icons-round { font-size: 12px; }

/* Completion gauge — on a roster row and, wider, in the outlet card header */
.roster-gauge { display: flex; align-items: center; gap: 8px; min-width: 0; }
.roster-gauge__bar { flex: 1; min-width: 52px; height: 6px; border-radius: 3px; background: var(--c-border-dim); overflow: hidden; }
.roster-gauge__bar > span { display: block; height: 100%; border-radius: 3px; background: var(--c-accent); transition: width 600ms cubic-bezier(0.22, 1, 0.36, 1); }
.roster-gauge__bar.is-complete > span { background: var(--c-success); }
.roster-gauge__pct { flex-shrink: 0; min-width: 34px; text-align: right; font: 600 11.5px/1 var(--font-mono); color: var(--c-muted); font-variant-numeric: tabular-nums; }
.roster-gauge__pct.is-empty { color: var(--c-muted-2); }
.roster-gauge--head { flex: 0 0 auto; width: 190px; }

/* Drawer: employee header, compact counters, loading skeleton */
.team-drawer__title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.stat-strip--compact { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 8px; margin-bottom: 14px; }
.stat-strip--compact .stat-pill { padding: 10px 12px; gap: 10px; }
.stat-strip--compact .stat-pill__icon { width: 30px; height: 30px; }
.stat-strip--compact .stat-pill__icon .material-icons-round { font-size: 17px; }
.stat-strip--compact .stat-pill__value { font-size: 18px; }
.roster-skel { display: flex; flex-direction: column; gap: 14px; padding: 8px 0; }
.roster-skel__bar {
    height: 13px; border-radius: 6px; width: var(--w, 60%);
    background: linear-gradient(90deg, var(--c-surface-2) 25%, var(--c-surface-3) 50%, var(--c-surface-2) 75%);
    background-size: 200% 100%;
    animation: ncx-shimmer 1.2s linear infinite;
}
.today-task__check--static { cursor: default; }
.today-task__check--static:hover { border-color: var(--c-border-hi); }
.today-task.is-done .today-task__check--static:hover { border-color: var(--c-success); }

/* Narrow screens: the numbers move to a second line under the name, so a
   long position or email never squeezes the counters out of the row */
@media (max-width: 719px) {
    .roster-row {
        grid-template-columns: 34px minmax(0, 1fr) auto 24px;
        grid-template-areas:
            "avatar who  count chev"
            "avatar flag gauge gauge";
        gap: 8px 10px;
    }
    .roster-row > .avatar      { grid-area: avatar; align-self: start; }
    .roster-row__who           { grid-area: who; }
    .roster-row > .row-chevron { grid-area: chev; }
    .roster-row__count         { grid-area: count; }
    .roster-row__flag          { grid-area: flag; }
    .roster-row > .roster-gauge { grid-area: gauge; }
    .roster-row + .roster-row::before { left: 10px; }
    .roster-gauge--head { width: 100%; }
}