/* ===================================================================
   FIGS DASHBOARD — Design System
   Minimal dark UI
   =================================================================== */

:root {
    /* Backgrounds — warm near-black scale */
    --bg-app:        #0c0c0c;
    --bg-base:       #111113;
    --bg-surface:    #18181b;
    --bg-raised:     #222226;
    --bg-overlay:    #2a2a2e;

    /* Borders */
    --border:        rgba(255,255,255,0.06);
    --border-subtle: rgba(255,255,255,0.04);
    --border-strong: rgba(255,255,255,0.12);

    /* Text */
    --text-1:  #f4f4f5;
    --text-2:  #a1a1aa;
    --text-3:  #71717a;
    --text-4:  #3f3f46;

    /* Accent — indigo */
    --accent:        #6366f1;
    --accent-dim:    rgba(99,102,241,0.15);
    --accent-hover:  #818cf8;
    --accent-text:   #a5b4fc;
    --primary:       var(--accent);
    --primary-hover: var(--accent-hover);

    /* Semantic */
    --green:    #22c55e;
    --green-bg: rgba(34,197,94,0.1);
    --amber:    #f59e0b;
    --amber-bg: rgba(245,158,11,0.1);
    --red:      #ef4444;
    --red-bg:   rgba(239,68,68,0.1);
    --blue:     #3b82f6;
    --blue-bg:  rgba(59,130,246,0.1);
    --purple:   #a855f7;
    --purple-bg:rgba(168,85,247,0.1);

    /* Background aliases (numbered scale) */
    --bg-0: #18181b;   /* solid base — used by modals & drawers */
    --bg-3: #2f2f35;   /* mid-raised — used by slider tracks & hover states */

    /* Layout */
    --sidebar-w:   216px;
    --topbar-h:    56px;
    --r-xs:  4px;
    --r-sm:  6px;
    --r:     8px;
    --r-md:  10px;
    --r-lg:  14px;
    --r-xl:  18px;

    /* Motion */
    --ease: cubic-bezier(0.16,1,0.3,1);
    --fast: 120ms;
    --base: 220ms;
    --slow: 380ms;
}

/* ======================================================
   RESET & BASE
   ====================================================== */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 14px; color-scheme: dark; }

body {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg-app);
    color: var(--text-1);
    line-height: 1.5;
    min-height: 100dvh;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--accent); color: #fff; }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--r-xs);
}

/* ======================================================
   APP SHELL
   ====================================================== */
.app-shell {
    display: flex;
    height: 100dvh;
    overflow: hidden;
}

/* ======================================================
   SIDEBAR
   ====================================================== */
.sidebar {
    width: var(--sidebar-w);
    background: var(--bg-base);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    transition: width var(--base) var(--ease), transform var(--base) var(--ease);
    overflow: hidden;
    z-index: 100;
}

.sidebar.collapsed { width: 52px; }
.sidebar.collapsed .sidebar-logo-text,
.sidebar.collapsed .nav-label,
.sidebar.collapsed .sidebar-footer .last-updated,
.sidebar.collapsed #statusText { display: none; }
.sidebar.collapsed .nav-badge { display: none !important; }
.sidebar.collapsed .sidebar-logo { justify-content: center; padding: 16px 0; }
.sidebar.collapsed .nav-item { justify-content: center; padding: 9px; }
.sidebar.collapsed .sidebar-footer { justify-content: center; }

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 18px 14px 16px;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-1);
    letter-spacing: -0.03em;
    white-space: nowrap;
}

.sidebar-logo-icon { font-size: 1.2rem; flex-shrink: 0; }

.sidebar-nav {
    flex: 1;
    padding: 10px 6px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow-y: auto;
    scrollbar-width: none;
}
.sidebar-nav::-webkit-scrollbar { display: none; }

.nav-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: var(--r-sm);
    border: none;
    background: transparent;
    color: var(--text-3);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--fast), color var(--fast);
    white-space: nowrap;
    position: relative;
    text-align: left;
    width: 100%;
}
.nav-item:hover { background: var(--bg-surface); color: var(--text-2); }
.nav-item.active { background: var(--bg-surface); color: var(--text-1); }
.nav-item.active::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 2px; height: 16px;
    border-radius: 999px;
    background: var(--accent);
    animation: navIndicator var(--base) var(--ease);
}
@keyframes navIndicator {
    from { transform: translateY(-50%) scaleY(0); opacity: 0; }
    to   { transform: translateY(-50%) scaleY(1); opacity: 1; }
}

.nav-icon { font-size: 1rem; flex-shrink: 0; width: 18px; text-align: center; }
.nav-label { flex: 1; }

.nav-badge {
    background: var(--accent);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 999px;
    min-width: 17px;
    text-align: center;
}
.nav-badge--painter { background: var(--amber); color: #000; }

.sidebar-footer {
    padding: 10px 14px 14px;
    border-top: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.connection-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--text-3);
}

.status-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--text-4);
}
.status-dot.connected { background: var(--green); animation: dotPulse 2.4s ease infinite; }
.status-dot.loading   { background: var(--amber); animation: blink 0.8s infinite; }
.status-dot.error     { background: var(--red); }
@keyframes dotPulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.5); }
    50%     { box-shadow: 0 0 0 5px rgba(34,197,94,0); }
}

@keyframes blink {
    0%,100% { opacity: 1; }
    50%      { opacity: 0.3; }
}

.last-updated {
    font-size: 0.7rem;
    color: var(--text-4);
    font-family: 'Geist Mono', monospace;
}

.feedback-trigger {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 5px 8px;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--text-3);
    font-size: 0.72rem;
    cursor: pointer;
    text-align: left;
    transition: color 0.15s, border-color 0.15s;
}
.feedback-trigger:hover { color: var(--text-1); border-color: var(--border-strong); }

.sidebar-clock {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 6px 0 2px;
    border-top: 1px solid var(--border-subtle);
    margin-top: 2px;
}

.sidebar-clock-time {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-1);
    font-family: 'Geist Mono', monospace;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

.sidebar-clock-date {
    font-size: 0.72rem;
    color: var(--text-3);
    letter-spacing: 0.01em;
}

/* Hide clock text in collapsed sidebar, keep space */
.sidebar.collapsed .sidebar-clock-time,
.sidebar.collapsed .sidebar-clock-date { display: none; }

/* ── Books-Close Block ───────────────────────────────────────────── */
.books-close-block {
    padding-top: 6px;
    border-top: 1px solid var(--border-subtle);
    margin-top: 2px;
}

.books-close-set {
    background: none;
    border: 1px dashed var(--border-strong);
    border-radius: var(--r-sm);
    color: var(--text-3);
    font-size: 0.72rem;
    padding: 4px 8px;
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: color var(--fast), border-color var(--fast);
}
.books-close-set:hover { color: var(--text-2); border-color: var(--text-3); }

.books-close-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.books-close-icon { font-size: 0.9rem; flex-shrink: 0; }

.books-close-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}

.books-close-days {
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.2;
}
.books-close-days.books-close-ok     { color: var(--green); }
.books-close-days.books-close-warn   { color: var(--amber); }
.books-close-days.books-close-urgent { color: var(--red); }

.books-close-label {
    font-size: 0.68rem;
    color: var(--text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.books-close-edit-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.72rem;
    padding: 2px 4px;
    opacity: 0.4;
    transition: opacity var(--fast);
    flex-shrink: 0;
}
.books-close-edit-btn:hover { opacity: 1; }

/* Hide in collapsed sidebar */
.sidebar.collapsed .books-close-block { display: none; }

/* ======================================================
   MAIN CONTENT
   ====================================================== */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
    background: var(--bg-app);
}

/* ======================================================
   TOP BAR
   ====================================================== */
.top-bar {
    height: var(--topbar-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-base);
    flex-shrink: 0;
}
.top-bar-left { display: flex; align-items: center; gap: 10px; }
.top-bar-right { display: flex; align-items: center; gap: 6px; }

.sidebar-toggle {
    background: transparent;
    border: none;
    color: var(--text-3);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 6px;
    border-radius: var(--r-sm);
    line-height: 1;
    transition: color var(--fast), background var(--fast);
}
.sidebar-toggle:hover { color: var(--text-1); background: var(--bg-surface); }

.page-title {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text-1);
}

/* ======================================================
   BUTTONS
   ====================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border-strong);
    background: var(--bg-raised);
    color: var(--text-2);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--fast), color var(--fast),
                border-color var(--fast), box-shadow var(--fast),
                transform var(--fast);
    white-space: nowrap;
    user-select: none;
    letter-spacing: -0.01em;
}
.btn:hover { background: var(--bg-overlay); color: var(--text-1); transform: translateY(-1px); }
.btn:active { transform: scale(0.97) translateY(0); }

.btn.primary {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    font-weight: 600;
}
.btn.primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    box-shadow: 0 0 0 3px var(--accent-dim);
}

.btn.danger  { color: var(--red);   border-color: transparent; background: transparent; }
.btn.danger:hover  { background: var(--red-bg);  color: var(--red); border-color: var(--red); }
.btn.success { color: var(--green); border-color: transparent; background: transparent; }
.btn.success:hover { background: var(--green-bg); color: var(--green); border-color: var(--green); }

.btn.sm  { padding: 4px 10px; font-size: 0.78rem; }
.btn.xs  { padding: 2px 7px;  font-size: 0.73rem; border-color: transparent; }
.btn.xs:hover { border-color: var(--border-strong); }

.icon-btn { gap: 5px; }

/* Button loading state */
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }
.btn.loading  { position: relative; color: transparent !important; pointer-events: none; }
.btn.loading::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    color: var(--text-2);
}
.btn.primary.loading::after { color: rgba(255,255,255,0.8); }

/* ======================================================
   BADGES
   ====================================================== */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border-radius: var(--r-xs);
    font-size: 0.72rem;
    font-weight: 500;
    white-space: nowrap;
    letter-spacing: 0.01em;
}
.badge.success { background: var(--green-bg);  color: var(--green);  }
.badge.warning { background: var(--amber-bg);  color: var(--amber);  }
.badge.danger  { background: var(--red-bg);    color: var(--red);    }
.badge.info    { background: var(--blue-bg);   color: var(--blue);   }
.badge.neutral { background: var(--bg-raised); color: var(--text-3); }
.badge.purple  { background: var(--purple-bg); color: var(--purple); }
.badge.accent  { background: var(--accent-dim);color: var(--accent-text); }
/* painter quality tier badges */
.badge.quality-standard   { background: rgba(59,130,246,0.12); color: #60a5fa; }
.badge.quality-showcase   { background: rgba(168,85,247,0.12); color: #c084fc; }
.badge.quality-exhibition { background: rgba(245,158,11,0.15); color: #fbbf24; }

/* ======================================================
   FORMS
   ====================================================== */
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-label { font-size: 0.78rem; font-weight: 500; color: var(--text-3); letter-spacing: 0.01em; }

.form-input {
    background: var(--bg-raised);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    color: var(--text-1);
    font-family: inherit;
    font-size: 0.85rem;
    padding: 7px 11px;
    transition: border-color var(--fast), box-shadow var(--fast), background var(--fast);
    width: 100%;
}
.form-input:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--bg-overlay);
    box-shadow: 0 0 0 3px var(--accent-dim), inset 0 1px 2px rgba(0,0,0,0.2);
}
.form-input:hover:not(:focus) {
    border-color: var(--border-strong);
    background: var(--bg-overlay);
}
.form-input::placeholder { color: var(--text-4); }
.form-input:invalid:not(:placeholder-shown) {
    border-color: var(--red);
    box-shadow: 0 0 0 3px var(--red-bg);
}
.form-input.input-error {
    border-color: var(--red);
    box-shadow: 0 0 0 3px var(--red-bg);
}
select.form-input { cursor: pointer; }
select.form-input option { background: var(--bg-surface); }
.form-textarea { resize: vertical; min-height: 80px; line-height: 1.6; }

.form-row   { display: flex; gap: 10px; }
.form-row   > .form-group { flex: 1; min-width: 0; }
.form-row-3 > .form-group { flex: 1; min-width: 90px; }

/* ======================================================
   TABS
   ====================================================== */
.tab-content {
    display: none;
    flex: 1;
    overflow-y: auto;
    padding: 18px 20px;
    animation: fadeUp var(--base) var(--ease);
}
.tab-content.active { display: flex; flex-direction: column; gap: 14px; }

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: none; }
}

.tab-toolbar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.search-input  { max-width: 260px; flex: 1; }
.filter-select { width: auto; min-width: 130px; }
.filter-select.filter-active {
    border-color: var(--accent);
    color: var(--accent-text);
    background: var(--accent-dim);
}
.clear-filters-btn {
    font-size: 0.75rem;
    padding: 4px 10px;
    opacity: 0.75;
    white-space: nowrap;
}
.clear-filters-btn:hover { opacity: 1; }

/* ======================================================
   STAT CARDS
   ====================================================== */
.overview-stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.stat-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color var(--base), box-shadow var(--base), transform var(--base);
}
.stat-card:hover { border-color: var(--border-strong); box-shadow: 0 3px 14px rgba(0,0,0,0.22); transform: scale(1.015); }

.stat-label { font-size: 0.75rem; color: var(--text-3); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; }
.stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--text-1);
}
.stat-value.danger  { color: var(--red); }
.stat-value.success { color: var(--green); }
.stat-value.warning { color: var(--amber); }

/* ======================================================
   UNASSIGNED POOL
   ====================================================== */
.unassigned-pool {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 12px 14px;
    border-left: 3px solid var(--amber);
}

.unassigned-pool-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.unassigned-pool-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.unassigned-pool-count {
    background: var(--amber-bg);
    color: var(--amber);
    border-radius: var(--r-xs);
    padding: 1px 7px;
    font-size: 0.7rem;
    font-weight: 700;
    font-family: 'Geist Mono', monospace;
}

.unassigned-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.unassigned-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 7px 10px;
    flex-wrap: wrap;
    transition: border-color var(--base), transform var(--base), box-shadow var(--base);
    animation: cardIn var(--base) var(--ease) both;
}
.unassigned-card:hover { border-color: var(--border-strong); transform: translateX(2px); box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.unassigned-card.has-pdf { cursor: pointer; }
.unassigned-card.has-pdf:hover { border-color: var(--accent); }

.unassigned-card-info {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}

.unassigned-card-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
}

.unassigned-card-client {
    font-size: 0.75rem;
    color: var(--text-3);
}

.unassigned-card-amount {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--green);
    font-family: 'Geist Mono', monospace;
}

.unassigned-card-actions {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

.assign-select {
    font-size: 0.78rem;
    padding: 4px 8px;
    height: auto;
    width: auto;
    min-width: 145px;
    background: var(--bg-surface);
    border-color: var(--border-strong);
    color: var(--text-2);
}

/* ======================================================
   PAINTER CARDS
   ====================================================== */
.painters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
    gap: 12px;
    align-content: start;
}

.painter-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: visible;
    transition: border-color var(--base), box-shadow var(--base), transform var(--base);
    animation: cardIn var(--slow) var(--ease) both;
    animation-delay: calc(var(--i, 0) * 45ms);
}
.painter-card:hover {
    border-color: var(--border-strong);
    box-shadow: 0 4px 20px rgba(0,0,0,0.28);
    transform: scale(1.008);
}

/* Painter card status: subtle top-stripe only, no border-color override */
.painter-card.painter-available {
    box-shadow: inset 0 3px 0 0 rgba(34,197,94,0.75);
}
.painter-card.painter-available:hover {
    box-shadow: inset 0 3px 0 0 rgba(34,197,94,0.75), 0 4px 20px rgba(0,0,0,0.28);
}
.painter-card.painter-partial {
    box-shadow: inset 0 3px 0 0 rgba(251,191,36,0.75);
}
.painter-card.painter-partial:hover {
    box-shadow: inset 0 3px 0 0 rgba(251,191,36,0.75), 0 4px 20px rgba(0,0,0,0.28);
}
.painter-card.painter-idle {
    box-shadow: inset 0 3px 0 0 rgba(239,68,68,0.75);
}
.painter-card.painter-idle:hover {
    box-shadow: inset 0 3px 0 0 rgba(239,68,68,0.75), 0 4px 20px rgba(0,0,0,0.28);
}
.painter-card.painter-overloaded {
    box-shadow: inset 0 3px 0 0 rgba(249,115,22,0.9);
}
.painter-card.painter-overloaded:hover {
    box-shadow: inset 0 3px 0 0 rgba(249,115,22,0.9), 0 4px 20px rgba(0,0,0,0.28);
}
.sets-column-count.overloaded-count {
    color: var(--red);
    font-weight: 700;
}

@keyframes cardIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

.painter-card-header {
    padding: 14px 16px 12px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-subtle);
    gap: 10px;
}

.painter-name {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.025em;
}

/* Edit/delete buttons hidden until card is hovered */
.painter-action-secondary {
    opacity: 0;
    transition: opacity var(--fast);
}
.painter-card:hover .painter-action-secondary { opacity: 1; }

.painter-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.painter-actions { display: flex; gap: 3px; flex-shrink: 0; align-items: center; }

.painter-check-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid var(--border-strong);
    background: transparent;
    color: var(--text-3);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color var(--fast), background var(--fast), color var(--fast);
    line-height: 1;
    padding: 0;
}
.painter-check-btn:hover {
    border-color: var(--green);
    color: var(--green);
    background: rgba(34,197,94,0.1);
}
.painter-check-btn--done {
    border-color: var(--green);
    background: var(--green);
    color: #000;
}
.painter-check-btn--done:hover {
    opacity: 0.75;
}

/* Workload bars */
.workload-bar-wrap {
    padding: 7px 14px 8px;
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.workload-bar-target-label {
    font-size: 0.7rem;
    color: var(--text-3);
}

.workload-bar-row {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.workload-bar-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.74rem;
    color: var(--text-3);
}
.workload-remaining { font-size: 0.7rem; color: var(--text-3); }
.workload-remaining.workload-over { color: var(--red); }

.workload-bar-track {
    height: 3px;
    background: var(--bg-raised);
    border-radius: 999px;
    overflow: hidden;
}

.workload-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width var(--slow) var(--ease);
}

/* Set columns */
.painter-sets {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
}

.sets-column { padding: 10px 12px; min-width: 0; }
.sets-column + .sets-column { border-left: 1px solid var(--border-subtle); }
/* Subtle zone tints — reinforces the left-border accent on set cards */
.sets-column:first-child { background: rgba(59,130,246,0.03); }
.sets-column:last-child  { background: rgba(34,197,94,0.03); }

.sets-column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.sets-column-title {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.sets-column-count {
    font-size: 0.68rem;
    color: var(--text-3);
    font-family: 'Geist Mono', monospace;
}

.sets-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-height: 72px;
}

.sets-list.drag-over {
    background: var(--accent-dim);
    border-radius: var(--r-sm);
    outline: 2px dashed var(--accent);
    outline-offset: -2px;
    outline-offset: 2px;
}

/* ======================================================
   SET CARDS
   ====================================================== */
.set-card {
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 8px 9px;
    cursor: grab;
    transition: border-color var(--base), box-shadow var(--base), transform var(--base);
    position: relative;
    user-select: none;
    animation: setCardIn var(--base) var(--ease) both;
}
.set-card:hover { border-color: var(--border-strong); box-shadow: 0 2px 10px rgba(0,0,0,0.25); transform: scale(1.018); }

/* ── Set aging color bands ───────────────────────────────────────────── */
.set-card--age-warn {
    border-left: 3px solid var(--amber);
    background: linear-gradient(90deg, rgba(245,158,11,0.06) 0%, var(--bg-raised) 50%);
}
.set-card--age-danger {
    border-left: 3px solid var(--red);
    background: linear-gradient(90deg, rgba(239,68,68,0.08) 0%, var(--bg-raised) 50%);
}
.set-card--age-warn:hover  { border-color: var(--amber); }
.set-card--age-danger:hover { border-color: var(--red); }

/* ── Last event chip ─────────────────────────────────────────────────── */
.set-last-event {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.67rem;
    color: var(--text-3);
    margin-top: 3px;
    line-height: 1;
}
.set-last-event--warn  { color: var(--amber); }
.set-last-event--danger { color: var(--red); }
.set-last-event--none  { color: var(--amber); opacity: 0.8; }
.set-card.dragging { opacity: 0.3; cursor: grabbing; transform: none; }
.drag-insert-line {
    height: 2px;
    background: var(--accent);
    border-radius: 2px;
    margin: 2px 4px;
    pointer-events: none;
    box-shadow: 0 0 6px var(--accent);
}
@keyframes setCardIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}
.set-card.drag-ghost {
    opacity: 0.95;
    transform: scale(1.04);
    box-shadow: 0 8px 28px rgba(0,0,0,0.45), 0 0 0 1px var(--accent);
    cursor: grabbing;
    z-index: 9999;
}

.set-card.drop-preview { opacity: 0.25; border-style: dashed; }

.set-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }

.set-card-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-1);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.set-card-order {
    font-size: 0.72rem;
    color: var(--text-3);
    margin-top: 2px;
}
.set-card-month {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 600;
    color: #fff;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 4px;
    padding: 1px 5px;
    margin-left: 4px;
    vertical-align: middle;
}

.set-card-badges {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
    margin-top: 5px;
}

.set-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--border-subtle);
}

.set-card-amount {
    font-size: 0.78rem;
    font-weight: 600;
    font-family: 'Geist Mono', monospace;
    color: var(--green);
}

/* set-card-actions is now defined in the overrides section below */

/* Expanded detail — smooth open/close via CSS grid rows trick */
.set-card-expand {
    display: grid !important;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--base) var(--ease);
    overflow: hidden;
}
.set-card-expand:not([hidden]) {
    grid-template-rows: 1fr;
}
.set-card-detail {
    min-height: 0;
    overflow: hidden;
    border-top: 1px solid var(--border-subtle);
    padding-top: 8px;
    margin-top: 8px;
    font-size: 0.75rem;
    color: var(--text-3);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px 8px;
}
.set-detail-row { display: contents; }
.set-detail-label { color: var(--text-4); }
.set-detail-value { color: var(--text-2); }

/* PDF badge */
.pdf-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.7rem;
    color: var(--accent-text);
    cursor: pointer;
    padding: 1px 5px;
    border-radius: var(--r-xs);
    transition: background var(--fast);
}
.pdf-badge:hover { background: var(--accent-dim); }

/* Set quick menu (double-click) */
.set-quick-menu {
    position: fixed;
    z-index: 2000;
    background: var(--bg-surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    min-width: 150px;
    padding: 4px 0;
    animation: fadeIn var(--fast) ease;
}
.set-quick-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 14px;
    background: none;
    border: none;
    color: var(--text-1);
    font-size: 0.85rem;
    cursor: pointer;
    text-align: left;
    transition: background var(--fast);
}
.set-quick-menu-item:hover { background: var(--accent-dim); color: var(--accent-text); }

/* Empty slots */
.set-slot-empty {
    height: 6px;
    border-radius: var(--r-sm);
    background: rgba(255,255,255,0.02);
}

/* Add set button */
.add-set-btn {
    width: 100%;
    border: 1px dashed var(--border);
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--text-4);
    font-family: inherit;
    font-size: 0.75rem;
    padding: 5px;
    cursor: pointer;
    transition: border-color var(--fast), color var(--fast), background var(--fast);
    margin-top: 4px;
}
.add-set-btn:hover {
    border-color: var(--accent);
    color: var(--accent-text);
    background: var(--accent-dim);
}

/* ======================================================
   OVERVIEW WORKLOAD GRID
   ====================================================== */
.workload-grid { display: flex; flex-direction: column; gap: 6px; }

.workload-row {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 11px 16px;
    display: grid;
    grid-template-columns: 160px 1fr 120px;
    align-items: center;
    gap: 14px;
    transition: border-color var(--base), transform var(--base), box-shadow var(--base);
}
.workload-row:hover { border-color: var(--border-strong); transform: scale(1.012); box-shadow: 0 2px 10px rgba(0,0,0,0.15); }

.workload-row-name { font-size: 0.88rem; font-weight: 600; }
.workload-bar-outer { background: var(--bg-raised); border-radius: 999px; height: 4px; overflow: hidden; }
.workload-bar-inner { height: 100%; border-radius: 999px; transition: width 0.6s var(--ease); }

.workload-row-meta {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: flex-end;
    font-size: 0.78rem;
    font-family: 'Geist Mono', monospace;
    color: var(--text-3);
}

/* ======================================================
   ALL SETS GRID
   ====================================================== */
.sets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 10px;
    align-content: start;
}

.asc-month-header {
    grid-column: 1 / -1;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-2);
    padding: 4px 2px 6px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 2px;
}
.asc-month-header:not(:first-child) { margin-top: 18px; }

.all-set-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 14px;
    transition: border-color var(--base), box-shadow var(--base), transform var(--base);
}
.all-set-card:hover { border-color: var(--border-strong); box-shadow: 0 2px 12px rgba(0,0,0,0.22); transform: scale(1.012); }

.all-set-title { font-size: 0.88rem; font-weight: 600; margin-bottom: 3px; line-height: 1.3; }
.all-set-sub   { font-size: 0.78rem; color: var(--text-3); margin-bottom: 8px; }

.all-set-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }

.all-set-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 8px;
    border-top: 1px solid var(--border-subtle);
    font-size: 0.78rem;
}

.all-set-amount { font-weight: 700; font-family: 'Geist Mono', monospace; color: var(--green); }

/* Live feed CSS removed — feature not in use */

/* ======================================================
   PAYMENTS
   ====================================================== */
.payments-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 10px;
}

.payment-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: border-color var(--base), box-shadow var(--base), transform var(--base);
}
.payment-card:hover { border-color: var(--border-strong); box-shadow: 0 4px 16px rgba(0,0,0,0.25); transform: translateY(-2px); }

.payment-card-header {
    padding: 12px 14px 10px;
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.payment-painter-name { font-size: 0.92rem; font-weight: 600; }

.payment-stats {
    padding: 10px 14px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    border-bottom: 1px solid var(--border-subtle);
}
.payment-stat-label { font-size: 0.7rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; }
.payment-stat-value { font-size: 0.9rem; font-weight: 600; font-family: 'Geist Mono', monospace; margin-top: 2px; }

.payment-sets-list { padding: 8px 14px 12px; display: flex; flex-direction: column; gap: 4px; }

.payment-set-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.78rem;
    padding: 2px 0;
}
.payment-set-name {
    color: var(--text-3); flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.payment-set-amount {
    font-family: 'Geist Mono', monospace;
    font-weight: 600;
    font-size: 0.78rem;
    color: var(--green);
    flex-shrink: 0;
    margin-left: 8px;
}

/* ── Payments tab redesign ─────────────────────────────────────────── */
.pay-toolbar {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 16px; border-bottom: 1px solid var(--border-subtle); flex-wrap: wrap;
}
.pay-month-title { font-size: 1rem; font-weight: 700; min-width: 130px; text-align: center; color: var(--text-1); }
.pay-rate-group  { display: flex; align-items: center; gap: 6px; }
.pay-rate-label  { font-size: 0.75rem; color: var(--text-3); white-space: nowrap; }
.pay-rate-input  { width: 110px; }

.pay-card-meta { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.pay-card-meta .badge.small,
.badge.small { font-size: 0.68rem; padding: 2px 6px; }

.pay-run-summary {
    padding: 6px 14px; background: var(--bg-overlay);
    border-top: 1px solid var(--border-subtle);
    display: flex; align-items: center; gap: 6px; font-size: 0.8rem; flex-wrap: wrap;
}
.pay-run-usd   { color: var(--text-2); font-family:'Geist Mono',monospace; font-size:0.82rem; }
.pay-run-arrow { color: var(--text-4); }
.pay-run-lkr   { color: var(--green); font-family:'Geist Mono',monospace; font-size:0.82rem; font-weight:600; }
.pay-run-total { color: var(--text-1); font-family:'Geist Mono',monospace; font-size:0.82rem; font-weight:700; margin-left:4px; }

.pay-card-actions { padding: 8px 14px 10px; border-top: 1px solid var(--border-subtle); }

.pay-set-preview { display:flex; align-items:center; gap:6px; padding:2px 0; font-size:0.8rem; }
.pay-set-prev-name {
    flex:1; color:var(--text-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
}
.pay-set-prev-amount { font-family:'Geist Mono',monospace; font-size:0.78rem; color:var(--text-2); }
.pay-more-sets  { font-size:0.75rem; color:var(--text-3); padding:2px 0; }
.pay-no-eligible { font-size:0.78rem; color:var(--text-3); padding:8px 14px; }

/* ── Payment Run Modal ─────────────────────────────────────────────── */
.pay-run-modal {
    max-width: 720px; width: 95vw; max-height: 90vh;
    display: flex; flex-direction: column;
}
.pr-header-meta { font-size:0.85rem; color:var(--text-3); display:flex; align-items:center; gap:8px; margin-top:2px; }
.pr-status-bar  { padding:8px 20px; border-bottom:1px solid var(--border-subtle); display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-height:44px; }
.pr-body        { flex:1; overflow-y:auto; padding:16px 20px; display:flex; flex-direction:column; gap:16px; }

.pr-settings-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px,1fr)); gap:12px; margin-bottom:8px; }

.pr-sets-section { border:1px solid var(--border-subtle); border-radius:8px; overflow:hidden; }
.pr-sets-header  { padding:8px 12px; font-size:0.72rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-3); background:var(--bg-overlay); border-bottom:1px solid var(--border-subtle); }
.pr-sets-list    { max-height:280px; overflow-y:auto; }

.pr-set-row            { border-bottom:1px solid var(--border-subtle); padding:8px 12px; transition:background var(--fast) var(--ease); }
.pr-set-row:last-child { border-bottom:none; }
.pr-set-row:hover      { background:var(--bg-overlay); }
.pr-set-included       { background:color-mix(in srgb, var(--accent) 6%, transparent); }
.pr-set-included:hover { background:color-mix(in srgb, var(--accent) 10%, transparent); }

.pr-set-main    { display:flex; align-items:center; gap:8px; cursor:pointer; width:100%; }
.pr-check       { width:15px; height:15px; flex-shrink:0; }
.pr-set-details { flex:1; min-width:0; display:flex; flex-direction:column; }
.pr-set-name    { font-size:0.85rem; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pr-set-client  { font-size:0.73rem; color:var(--text-3); }
.pr-set-full-val{ font-family:'Geist Mono',monospace; font-size:0.82rem; color:var(--text-2); white-space:nowrap; }

.pr-partial-row   { display:flex; align-items:center; gap:8px; padding:6px 0 0 23px; flex-wrap:wrap; }
.pr-partial-label { display:flex; align-items:center; gap:4px; font-size:0.78rem; color:var(--text-2); cursor:pointer; white-space:nowrap; }
.pr-amt-input     { width:90px; padding:4px 8px !important; font-size:0.82rem !important; }
.pr-reason-input  { flex:1; min-width:120px; padding:4px 8px !important; font-size:0.78rem !important; }
.pr-empty         { padding:20px; text-align:center; color:var(--text-3); font-size:0.85rem; }

.pr-summary       { background:var(--bg-overlay); border:1px solid var(--border-subtle); border-radius:8px; overflow:hidden; }
.pr-summary-row   { display:flex; justify-content:space-between; align-items:center; padding:7px 14px; font-size:0.85rem; border-bottom:1px solid var(--border-subtle); color:var(--text-2); }
.pr-summary-row:last-child { border-bottom:none; }
.pr-summary-row span:last-child { font-family:'Geist Mono',monospace; font-weight:600; }
.pr-grand-total   { background:var(--bg-surface); font-size:0.95rem !important; font-weight:700; color:var(--text-1) !important; }
.pr-grand-total span:last-child { color:var(--green); font-size:1.05rem; }
.pr-paid-at       { font-size:0.82rem; color:var(--text-3); }
.pr-bonus-hint    { font-size:0.72rem; color:var(--text-3); margin-top:3px; line-height:1.4; min-height:1em; }

/* ======================================================
   PERFORMANCE
   ====================================================== */
.performance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 10px;
    align-content: start;
}

.perf-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 16px;
    transition: border-color var(--base), box-shadow var(--base), transform var(--base);
}
.perf-card:hover { border-color: var(--border-strong); box-shadow: 0 4px 16px rgba(0,0,0,0.25); transform: translateY(-2px); }

.perf-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.perf-name { font-size: 0.92rem; font-weight: 600; }
.perf-pct  { font-size: 1.4rem; font-weight: 700; font-family: 'Geist Mono', monospace; letter-spacing: -0.03em; }

.perf-bar-track {
    height: 4px;
    background: var(--bg-raised);
    border-radius: 999px;
    overflow: visible;
    position: relative;
    margin-bottom: 8px;
}
.perf-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.7s var(--ease);
    max-width: 100%;
    position: relative;
}
.perf-card-bottom { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--text-3); }

/* Perf color scale */
.perf-0    { color: var(--red); }
.perf-low  { color: var(--amber); }
.perf-mid  { color: #a3e635; }
.perf-high { color: var(--green); }
.perf-over { color: var(--green); }

.perf-bar-0    { background: var(--red); }
.perf-bar-low  { background: linear-gradient(90deg, var(--red), var(--amber)); }
.perf-bar-mid  { background: linear-gradient(90deg, var(--amber), #a3e635); }
.perf-bar-high { background: var(--green); }
.perf-bar-over { background: var(--green); }

/* ======================================================
   SECTION TITLE ROW
   ====================================================== */
.section-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.section-title {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

/* ======================================================
   MODALS
   ====================================================== */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(6px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: fadeIn var(--fast) ease;
}
.modal-overlay[hidden] { display: none !important; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal {
    background: var(--bg-surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-xl);
    padding: 22px;
    width: 100%;
    max-width: 460px;
    max-height: 92dvh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    animation: modalIn var(--base) var(--ease);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 24px 80px rgba(0,0,0,0.7);
}
.modal.modal-lg { max-width: 620px; }

@keyframes modalIn {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to   { opacity: 1; transform: none; }
}

.modal-header { display: flex; align-items: center; justify-content: space-between; }
.modal-title  { font-size: 0.95rem; font-weight: 600; letter-spacing: -0.02em; }

.modal-close {
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--text-3);
    cursor: pointer;
    font-size: 0.75rem;
    padding: 4px 8px;
    transition: background var(--fast), color var(--fast);
}
.modal-close:hover { background: var(--bg-overlay); color: var(--text-1); }

.modal-actions { display: flex; justify-content: flex-end; gap: 7px; padding-top: 2px; }

/* ======================================================
   PDF DROP ZONE
   ====================================================== */
.pdf-drop-zone {
    border: 1px dashed var(--border-strong);
    border-radius: var(--r);
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color var(--fast), background var(--fast);
}
.pdf-drop-zone:hover,
.pdf-drop-zone.drag-hover {
    border-color: var(--accent);
    background: var(--accent-dim);
}

.pdf-drop-icon { font-size: 1.6rem; margin-bottom: 6px; }
.pdf-drop-text { font-size: 0.85rem; color: var(--text-2); margin-bottom: 3px; }
.pdf-drop-hint { font-size: 0.75rem; color: var(--text-3); }
.pdf-browse-label { color: var(--accent-text); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

.pdf-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-raised);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    padding: 9px 12px;
    font-size: 0.83rem;
}
.pdf-preview[hidden] { display: none; }
.pdf-preview-icon { font-size: 1.1rem; }
.pdf-preview-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.pdf-preview-remove { background: none; border: none; color: var(--text-3); cursor: pointer; padding: 0 4px; font-size: 0.9rem; }
.pdf-preview-remove:hover { color: var(--red); }

/* ======================================================
   BATCH MODALS
   ====================================================== */
.modal-hint {
    font-size: 0.82rem;
    color: var(--text-2);
    margin: 0 0 12px;
    line-height: 1.5;
}
.modal-hint code {
    background: var(--bg-surface);
    border-radius: 3px;
    padding: 1px 5px;
    font-family: monospace;
    font-size: 0.8rem;
}

.batch-result {
    background: var(--bg-surface);
    border-radius: var(--r);
    padding: 8px 12px;
    margin-bottom: 12px;
    font-size: 0.83rem;
    color: var(--text-2);
}
.batch-result p { margin: 3px 0; }

.batch-pdf-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
    max-height: 260px;
    overflow-y: auto;
}
.batch-pdf-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-surface);
    border-radius: var(--r);
    padding: 5px 8px;
}
.batch-pdf-item-failed,
.batch-pdf-item-rejected {
    background: var(--red-bg);
    border: 1px solid rgba(239,68,68,0.25);
}
.batch-pdf-icon { font-size: 1rem; flex-shrink: 0; }
.batch-pdf-name-wrap { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.batch-pdf-name { flex: 1; font-size: 0.83rem; padding: 3px 6px; min-width: 0; width: 100%; }
.batch-pdf-rejected-name { font-size: 0.83rem; color: var(--text-2); padding: 2px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.batch-pdf-error-msg { font-size: 0.75rem; color: var(--red); padding: 0 6px; }
.batch-pdf-remove {
    background: none;
    border: none;
    color: var(--text-3);
    cursor: pointer;
    padding: 0 4px;
    font-size: 0.9rem;
    flex-shrink: 0;
}
.batch-pdf-remove:hover { color: var(--red); }

/* ======================================================
   TOASTS
   ====================================================== */
.toast-container {
    position: fixed;
    bottom: 18px;
    right: 18px;
    z-index: 9000;
    display: flex;
    flex-direction: column-reverse;
    gap: 6px;
    pointer-events: none;
}

.toast {
    background: var(--bg-surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--r);
    padding: 10px 14px;
    font-size: 0.85rem;
    max-width: 300px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    pointer-events: all;
    animation: toastIn var(--base) var(--ease);
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-2);
}
.toast.removing { animation: toastOut var(--fast) var(--ease) forwards; }
.toast.success { border-color: var(--green);  color: var(--green); }
.toast.error   { border-color: var(--red);    color: var(--red); }
.toast.info    { border-color: var(--accent); color: var(--accent-text); }
.toast-icon { display: flex; align-items: center; flex-shrink: 0; }
.toast-msg  { flex: 1; min-width: 0; }
.toast-close {
    flex-shrink: 0;
    background: none;
    border: none;
    color: currentColor;
    opacity: 0.5;
    font-size: 1rem;
    line-height: 1;
    padding: 0 2px;
    cursor: pointer;
    transition: opacity 0.1s;
}
.toast-close:hover { opacity: 1; }

@keyframes toastIn  { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to   { opacity: 0; transform: translateX(12px); } }

/* ======================================================
   EMPTY STATES
   ====================================================== */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    color: var(--text-3);
    gap: 7px;
    width: 100%;
}
.empty-icon { font-size: 2rem; margin-bottom: 4px; opacity: 0.5; }
.empty-state p { font-size: 0.88rem; }

/* ======================================================
   PROGRESS BAR
   ====================================================== */
.progress-bar { height: 3px; background: var(--bg-raised); border-radius: 999px; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 999px; background: var(--accent); transition: width 0.5s var(--ease); }

/* ======================================================
   SCROLLBAR
   ====================================================== */
* { scrollbar-width: thin; scrollbar-color: var(--bg-overlay) transparent; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg-overlay); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* ======================================================
   NO-ENTRANCE — suppress entrance animations on re-renders
   ====================================================== */
.painter-card.no-entrance,
.set-card.no-entrance { animation: none; }

/* ======================================================
   STAGGER
   ====================================================== */
.stagger > * { animation-delay: calc(var(--i, 0) * 35ms); }

/* ======================================================
   SIDEBAR TOOLTIPS (collapsed + responsive)
   ====================================================== */
.sidebar.collapsed .nav-item {
    position: relative;
    overflow: visible;
}
.sidebar.collapsed .nav-item::after {
    content: attr(data-label);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%) translateX(-6px);
    background: var(--bg-raised);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    padding: 5px 10px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-1);
    white-space: nowrap;
    box-shadow: 0 6px 20px rgba(0,0,0,0.45);
    z-index: 500;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.sidebar.collapsed .nav-item:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* ======================================================
   PAGE TITLE CROSS-FADE
   ====================================================== */
@keyframes titleFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}
.page-title.title-anim { animation: titleFadeIn var(--fast) var(--ease); }

/* ======================================================
   FEED BADGE BOUNCE
   ====================================================== */
@keyframes badgeBounce {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.45); }
    65%  { transform: scale(0.87); }
    100% { transform: scale(1); }
}
.nav-badge.badge-bounce { animation: badgeBounce 0.45s var(--ease); }

/* ======================================================
   REQUESTS / TICKETS
   ====================================================== */
.btn-sm { padding: 3px 9px; font-size: 0.75rem; }

.requests-board {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: flex-start;
    padding: 4px 0;
}

/* ── Requests tab split layout ───────────────────────────────────────── */
#tab-requests.active {
    flex-direction: column;
    gap: 0;
    height: calc(100vh - 90px);
    overflow: hidden;
}

.req-split-top {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 12px;
}

.req-split-bottom {
    flex: 0 0 auto;
    min-height: 180px;
    max-height: 42%;
    overflow-y: auto;
    padding-top: 10px;
}

/* Queued section header */
.req-queued-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 4px 2px 10px;
}
.req-queued-title {
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--text-1);
}
.req-queued-subtitle {
    font-size: 0.75rem;
    color: var(--text-3);
}
.req-queued-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}
.req-queued-select-all {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    color: var(--text-3);
    cursor: pointer;
    user-select: none;
}
.queued-set-check {
    accent-color: #22c55e;
    cursor: pointer;
    width: 14px;
    height: 14px;
}

/* Queued sets card grid */
.queued-sets-board {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start;
}

.empty-state--queued {
    padding: 20px 0;
    color: var(--text-3);
    font-size: 0.85rem;
}

/* Individual queued set card */
.queued-set-card {
    background: rgba(34, 197, 94, 0.06);
    border: 1px solid rgba(34, 197, 94, 0.25);
    border-radius: var(--r-md);
    padding: 12px 14px;
    min-width: 190px;
    max-width: 240px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.queued-set-card:hover {
    border-color: rgba(34, 197, 94, 0.5);
    box-shadow: 0 2px 10px rgba(34, 197, 94, 0.12);
}
.queued-set-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.queued-set-painter {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-1);
}
.queued-set-ready {
    font-size: 0.68rem;
    font-weight: 700;
    color: #22c55e;
    letter-spacing: 0.03em;
}
.queued-set-name {
    font-size: 0.8rem;
    color: var(--text-2);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.queued-set-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
}
.queued-quality {
    color: var(--text-3);
}
.queued-set-amount {
    font-weight: 700;
    color: #22c55e;
}
.queued-set-actions {
    margin-top: 2px;
}
.btn.success {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
}
.btn.success:hover {
    background: rgba(34, 197, 94, 0.25);
    border-color: rgba(34, 197, 94, 0.5);
}

.ticket-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    padding: 14px 16px;
    width: 260px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
}

.ticket-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    border-radius: var(--r-md) 0 0 var(--r-md);
    background: var(--accent);
}

.ticket-fulfilled-card::before { background: var(--green); }
.qa-ticket::before { background: var(--purple); }
.transfer-ticket::before { background: var(--red); }
.transfer-ticket {
    border-color: rgba(239,68,68,0.3);
    background: rgba(239,68,68,0.04);
}
.ticket-overdue {
    border-color: rgba(239,68,68,0.45);
    background: rgba(239,68,68,0.04);
}
.ticket-overdue::before { background: var(--red); }

.ticket-set-name {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-1);
}

/* Locked set card (default state — normal appearance, no dragging) */
.set-card.set-locked {
    cursor: default;
}
.set-card.set-locked:hover {
    transform: none;
    box-shadow: none;
}

/* Unlocked set card — purple border signals it's in editable/moveable mode */
.set-card.set-unlocked {
    border-color: var(--purple);
}
.set-card.set-unlocked:hover {
    border-color: var(--purple);
}

.ticket-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.ticket-painter {
    font-weight: 600;
    color: var(--text-1);
    font-size: 0.92rem;
}

.ticket-due {
    font-size: 0.72rem;
    color: var(--text-3);
    white-space: nowrap;
}

.ticket-due.overdue   { color: var(--red);   font-weight: 600; }
.ticket-due.due-today { color: var(--red);   font-weight: 600; }
.ticket-due.due-soon  { color: var(--amber); font-weight: 600; }
.ticket-due-today { border-left: 3px solid var(--red) !important; }
.ticket-due-soon  { border-left: 3px solid var(--amber) !important; }

.ticket-note {
    font-size: 0.78rem;
    color: var(--text-2);
    line-height: 1.4;
}

.ticket-fulfilled {
    font-size: 0.75rem;
    color: var(--green);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ticket-fulfilled-label { color: var(--text-3); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; }

.ticket-opened {
    font-size: 0.72rem;
    color: var(--text-3);
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.ticket-footer-chips {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.ticket-actions {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}

.ticket-info-block {
    background: var(--bg-raised);
    border-radius: var(--r-sm);
    padding: 10px 12px;
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ticket-info-row {
    font-size: 0.82rem;
    color: var(--text-2);
}

/* ======================================================
   SAMPLES
   ====================================================== */
.samples-board {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-content: flex-start;
}

.sample-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    padding: 12px 14px;
    width: 280px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    animation: fadeIn var(--base) var(--ease);
}
.sample-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--accent);
    border-top-left-radius: var(--r-md);
    border-bottom-left-radius: var(--r-md);
}
.sample-passed-card::before { background: var(--green); }

.sample-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.sample-painter {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--text-1);
}
.sample-due {
    font-size: 0.75rem;
    color: var(--text-3);
    font-family: 'Geist Mono', monospace;
}
.sample-due.overdue { color: var(--red); font-weight: 600; }

.sample-set-label {
    font-size: 0.78rem;
    color: var(--accent-text);
    background: var(--accent-dim);
    padding: 3px 7px;
    border-radius: var(--r-xs);
}
.sample-set-link {
    cursor: pointer;
    text-decoration: underline dotted;
    text-underline-offset: 2px;
}
.sample-set-link:hover { opacity: 0.8; }
.sample-note {
    font-size: 0.82rem;
    color: var(--text-2);
    font-style: italic;
    line-height: 1.4;
}
.sample-status-badge { margin-top: 4px; }
.sample-actions {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}

/* Painter card samples section */
.painter-samples-section {
    border-top: 1px solid var(--border-subtle);
    padding-top: 12px;
    margin-top: 12px;
}
.painter-samples-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    cursor: pointer;
    user-select: none;
    gap: 6px;
}
.painter-samples-header::after {
    content: '▾';
    font-size: 0.75rem;
    color: var(--text-4);
    transition: transform var(--fast);
    flex-shrink: 0;
}
.painter-samples-header.samples-open { margin-bottom: 8px; }
.painter-samples-header.samples-open::after { transform: rotate(180deg); }
.painter-samples-header:hover .painter-samples-title { color: var(--text-1); }
.painter-samples-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-2);
}
.painter-samples-count {
    font-size: 0.72rem;
    color: var(--text-3);
    background: var(--bg-raised);
    padding: 2px 6px;
    border-radius: var(--r-xs);
}
.painter-samples-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ── Painter Corrections Dropdown ────────────────────────────────── */
.painter-corrections-section {
    border-top: 1px solid var(--border-subtle);
    padding-top: 12px;
    margin-top: 10px;
}
.painter-corrections-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
    gap: 6px;
    margin-bottom: 0;
}
.painter-corrections-header::after {
    content: '▾';
    font-size: 0.75rem;
    color: var(--text-4);
    transition: transform var(--fast);
    flex-shrink: 0;
}
.painter-corrections-header.corr-header-open::after { transform: rotate(180deg); }
.painter-corrections-header:hover .painter-corrections-title { color: var(--text-1); }
.painter-corrections-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-2);
}
.corr-badge {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-3);
    background: var(--bg-raised);
    padding: 2px 6px;
    border-radius: var(--r-xs);
    min-width: 18px;
    text-align: center;
}
.corr-badge-yellow { background: rgba(234,179,8,0.15); color: #ca8a04; }
.corr-badge-red    { background: rgba(239,68,68,0.15);  color: var(--red); }

.painter-corrections-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 8px;
}
.corr-empty {
    font-size: 0.75rem;
    color: var(--text-4);
    text-align: center;
    padding: 6px 0;
}
.corr-item {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 6px 8px;
    border-radius: var(--r-sm);
    background: var(--bg-base);
    border: 1px solid var(--border-subtle);
}
.corr-item.corr-warn-yellow { border-color: rgba(234,179,8,0.4); background: rgba(234,179,8,0.05); }
.corr-item.corr-warn-red    { border-color: rgba(239,68,68,0.4);  background: rgba(239,68,68,0.05); }
.corr-item-resolved { opacity: 0.55; }
.corr-checkbox-wrap {
    display: flex;
    align-items: flex-start;
    padding-top: 2px;
    cursor: pointer;
    flex-shrink: 0;
}
.corr-checkbox { cursor: pointer; accent-color: var(--green); }
.corr-content { flex: 1; min-width: 0; }
.corr-note {
    font-size: 0.78rem;
    color: var(--text-1);
    line-height: 1.35;
    word-break: break-word;
}
.corr-note-resolved { text-decoration: line-through; color: var(--text-3); }
.corr-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
    flex-wrap: wrap;
}
.corr-age {
    font-size: 0.68rem;
    color: var(--text-3);
}
.corr-age.corr-warn-yellow { color: #ca8a04; font-weight: 600; }
.corr-age.corr-warn-red    { color: var(--red); font-weight: 700; }
.corr-by {
    font-size: 0.68rem;
    color: var(--text-4);
}
.corr-del-btn {
    background: none;
    border: none;
    color: var(--text-4);
    cursor: pointer;
    font-size: 0.7rem;
    padding: 0 2px;
    line-height: 1;
    margin-left: auto;
}
.corr-del-btn:hover { color: var(--red); }
.corr-resolved-header {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-4);
    padding: 4px 2px 2px;
}
.corr-add-row { padding: 4px 0 2px; }
.corr-add-btn {
    background: none;
    border: 1px dashed var(--border);
    border-radius: var(--r-sm);
    color: var(--text-3);
    font-size: 0.73rem;
    padding: 4px 8px;
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: border-color var(--fast), color var(--fast);
}
.corr-add-btn:hover { border-color: var(--accent); color: var(--accent); }
.corr-input-row { display: flex; flex-direction: column; gap: 6px; padding: 4px 0; }
.corr-set-select {
    width: 100%;
    padding: 5px 8px;
    font-size: 0.75rem;
    background: var(--bg-input, var(--bg-hover));
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--text-1);
    font-family: inherit;
    box-sizing: border-box;
}
.corr-set-select:focus { outline: none; border-color: var(--accent); }
.corr-set-tag {
    font-size: 0.67rem;
    font-weight: 600;
    color: var(--accent);
    background: rgba(var(--accent-rgb, 99,102,241), 0.08);
    border-radius: 3px;
    padding: 1px 5px;
    display: inline-block;
    margin-bottom: 2px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.corr-set-tag-resolved { opacity: 0.6; }
.corr-textarea {
    width: 100%;
    padding: 6px 8px;
    font-size: 0.78rem;
    background: var(--bg-input, var(--bg-hover));
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--text-1);
    resize: vertical;
    font-family: inherit;
    line-height: 1.4;
    box-sizing: border-box;
}
.corr-textarea:focus { outline: none; border-color: var(--accent); }
.corr-input-actions { display: flex; gap: 6px; justify-content: flex-end; }

/* ── Correction Modal ────────────────────────────────────────────── */
.corr-modal-body { display: flex; flex-direction: column; gap: 16px; padding: 4px 0 0; }

.corr-modal-steps {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.corr-modal-step {
    display: flex;
    align-items: center;
    gap: 6px;
    transition: opacity 0.2s;
}
.corr-step-num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--bg-base);
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.corr-step-label { font-size: 0.82rem; color: var(--text-2); font-weight: 500; }
.corr-modal-step-sep { color: var(--text-4); font-size: 0.9rem; margin: 0 2px; }

.corr-modal-meta {
    background: var(--bg-base);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 12px 16px;
}
.corr-meta-grid { display: flex; flex-direction: column; gap: 6px; }
.corr-meta-row {
    display: flex;
    gap: 12px;
    font-size: 0.82rem;
    line-height: 1.4;
}
.corr-meta-label {
    color: var(--text-3);
    min-width: 80px;
    flex-shrink: 0;
    font-weight: 500;
}
.corr-meta-val { color: var(--text-1); }

/* ── Corrections Tab ────────────────────────────────────────────── */
.ct-tab-header {
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--bg-surface);
    position: sticky;
    top: 0;
    z-index: 10;
}
.ct-tab-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.ct-tab-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.ct-tab-body {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ct-painter-group,
.ct-date-group {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
}

.ct-painter-header,
.ct-date-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--bg-raised);
    border-bottom: 1px solid var(--border);
}
.ct-painter-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-1);
    flex: 1;
}
.ct-date-header {
    font-weight: 600;
    font-size: 0.84rem;
    color: var(--text-2);
}
.ct-open-badge {
    background: rgba(239,68,68,0.12);
    color: var(--red);
    border: 1px solid rgba(239,68,68,0.25);
    border-radius: 20px;
    padding: 1px 8px;
    font-size: 0.72rem;
    font-weight: 700;
}
.ct-open-badge--yellow { background: rgba(234,179,8,0.12); color: #ca8a04; border-color: rgba(234,179,8,0.3); }
.ct-open-badge--red    { background: rgba(239,68,68,0.12);  color: var(--red); border-color: rgba(239,68,68,0.3); }
.ct-all-resolved {
    font-size: 0.72rem;
    color: var(--green);
    font-weight: 600;
}
.ct-corrections { display: flex; flex-direction: column; }

.ct-corr-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-subtle);
    transition: background 0.15s;
}
.ct-corr-item:last-child { border-bottom: none; }
.ct-corr-item:hover { background: var(--bg-overlay); }
.ct-corr-item.corr-warn-yellow { background: rgba(234,179,8,0.04); border-left: 2px solid rgba(234,179,8,0.5); }
.ct-corr-item.corr-warn-red    { background: rgba(239,68,68,0.04); border-left: 2px solid rgba(239,68,68,0.5); }
.ct-corr-item.ct-resolved { opacity: 0.5; }
.ct-corr-left { padding-top: 2px; flex-shrink: 0; }
.ct-corr-body { flex: 1; min-width: 0; }
.ct-corr-actions { flex-shrink: 0; display: flex; align-items: center; }

.ct-set-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 4px;
}
.ct-client {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ct-setname {
    font-size: 0.8rem;
    color: var(--text-2);
    font-weight: 500;
}
.ct-painter-tag {
    font-size: 0.72rem;
    color: var(--text-3);
    background: var(--bg-base);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1px 6px;
}
.ct-note {
    font-size: 0.84rem;
    color: var(--text-1);
    line-height: 1.4;
    margin-bottom: 4px;
}
.ct-note-resolved { text-decoration: line-through; color: var(--text-3); }
.ct-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.72rem;
    color: var(--text-3);
}
.ct-age { color: var(--text-3); }
.ct-age.corr-warn-yellow { color: #ca8a04; font-weight: 600; }
.ct-age.corr-warn-red    { color: var(--red); font-weight: 700; }
.ct-timer { color: var(--accent); font-weight: 500; }
.ct-by { color: var(--text-4); }
.ct-resolved-at { color: var(--green); }

.sample-slot-empty {
    padding: 8px 10px;
    background: var(--bg-base);
    border: 1px dashed var(--border);
    border-radius: var(--r-sm);
    text-align: center;
    color: var(--text-4);
    font-size: 0.75rem;
}

.sample-mini-card {
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 7px 9px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: border-color var(--fast), box-shadow var(--fast);
}
.sample-mini-card:hover {
    border-color: var(--border-strong);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.sample-mini-card.sample-passed {
    border-color: rgba(34,197,94,0.3);
    background: rgba(34,197,94,0.05);
}
.sample-mini-card.sample-overdue {
    border-color: rgba(239,68,68,0.3);
    background: rgba(239,68,68,0.05);
}

.sample-mini-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.sample-mini-due {
    font-size: 0.72rem;
    color: var(--text-3);
    font-family: 'Geist Mono', monospace;
}
.sample-mini-set {
    font-size: 0.74rem;
    color: var(--text-2);
}

.badge.xs {
    padding: 1px 4px;
    font-size: 0.65rem;
}

/* ======================================================
   RESPONSIVE
   ====================================================== */
@media (max-width: 900px) {
    :root { --sidebar-w: 52px; }
    .sidebar .sidebar-logo-text,
    .sidebar .nav-label,
    .sidebar .last-updated,
    .sidebar #statusText { display: none; }
    .sidebar .nav-item { justify-content: center; padding: 9px; overflow: visible; position: relative; }
    .sidebar .sidebar-logo { justify-content: center; padding: 16px 0; }
    .sidebar .sidebar-footer { justify-content: center; }
    .painters-grid { grid-template-columns: 1fr; }
    /* Tooltips for icon-only responsive sidebar */
    .sidebar .nav-item::after {
        content: attr(data-label);
        position: absolute;
        left: calc(100% + 10px);
        top: 50%;
        transform: translateY(-50%) translateX(-6px);
        background: var(--bg-raised);
        border: 1px solid var(--border-strong);
        border-radius: var(--r-sm);
        padding: 5px 10px;
        font-size: 0.78rem;
        font-weight: 500;
        color: var(--text-1);
        white-space: nowrap;
        box-shadow: 0 6px 20px rgba(0,0,0,0.45);
        z-index: 500;
        pointer-events: none;
        opacity: 0;
        transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease);
    }
    .sidebar .nav-item:hover::after {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }
}

@media (max-width: 600px) {
    body { overflow: auto; }
    .app-shell { flex-direction: column; height: auto; }
    .sidebar {
        width: 100%; height: auto;
        flex-direction: row;
        border-right: none;
        border-bottom: 1px solid var(--border);
        overflow-x: auto;
    }
    .sidebar-logo { display: none; }
    .sidebar-nav { flex-direction: row; flex-wrap: nowrap; padding: 6px; gap: 2px; }
    .sidebar-footer { display: none; }
    .nav-item { flex-direction: column; font-size: 0.62rem; gap: 2px; padding: 5px 8px; min-width: 50px; }
    .nav-icon { font-size: 1.1rem; }
    .main-content { overflow: visible; }
    .tab-content { padding: 10px 12px; }
    .painter-sets { grid-template-columns: 1fr; }
    .sets-column + .sets-column { border-left: none; border-top: 1px solid var(--border-subtle); }
}


/* ── Set Card Progress Section ───────────────────────────────────── */
.set-progress-section {
    padding: 8px 10px;
    margin: 4px 0;
    background: var(--bg-raised);
    border-radius: var(--r-sm);
    border: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.set-progress-no-target {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    font-size: 0.76rem;
    color: var(--text-3);
}

.set-progress-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.74rem;
}

.set-progress-days { font-weight: 600; }
.set-progress-logged { color: var(--text-3); }

.set-progress-bar-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.set-progress-bar-bg {
    flex: 1;
    height: 7px;
    background: var(--bg-overlay);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

/* Expected line (ghost bar sitting on top) */
.set-progress-bar-expected {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    background: rgba(255,255,255,0.12);
    border-radius: 10px;
    transition: width 0.4s var(--ease);
    z-index: 0;
}

/* Actual bar */
.set-progress-bar-actual {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    border-radius: 10px;
    transition: width 0.4s var(--ease);
    z-index: 1;
}

.set-progress-pct {
    font-size: 0.76rem;
    font-weight: 700;
    min-width: 32px;
    text-align: right;
}

.set-progress-footer {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.set-progress-footer > :last-child { margin-left: auto; }

/* ── Progress Modal ──────────────────────────────────────────────── */
.progress-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 10px;
    background: var(--bg-overlay);
    outline: none;
    padding: 0;
    border: none;
    cursor: pointer;
}
.progress-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    border: 2px solid var(--bg-base);
    transition: background var(--fast);
}
.progress-slider::-webkit-slider-thumb:hover { background: var(--accent-hover); }
.progress-slider::-moz-range-thumb {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    border: 2px solid var(--bg-base);
}

.form-label-hint {
    font-weight: 700;
    color: var(--accent-text);
    margin-left: 4px;
}

.progress-info-card {
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 4px;
}

.progress-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.83rem;
    color: var(--text-2);
}
.progress-info-row strong { color: var(--text-1); font-size: 0.88rem; }

/* ======================================================
   CHECK-IN TAB
   ====================================================== */

/* ── tab-content override: let the tab be the scroll root ── */
#tab-checkin {
    padding: 0;
    overflow-y: auto;
    /* display is controlled by .tab-content / .tab-content.active above */
}

#tab-checkin.active {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ── Idle screen ─────────────────────────────────────── */
.ci-idle-wrap {
    width: 100%;
    max-width: 560px;
    padding: 48px 24px 64px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.ci-idle-hero {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ci-idle-date {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-3);
    font-weight: 500;
}

.ci-idle-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-1);
    margin: 0;
}

.ci-idle-sub {
    font-size: 0.9rem;
    color: var(--text-2);
    margin: 0;
}

.ci-start-btn {
    margin-top: 20px;
    align-self: flex-start;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--r-md);
    padding: 10px 24px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity var(--fast), transform var(--fast);
}
.ci-start-btn:hover { opacity: 0.88; transform: translateY(-1px); }
.ci-start-btn:active { transform: none; }

/* Painter list on idle */
.ci-painter-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ci-painter-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--r-md);
    background: var(--bg-1);
    border: 1px solid var(--border-subtle);
    transition: background var(--fast);
}
.ci-painter-row:hover { background: var(--bg-2); }
.ci-painter-done     { opacity: 0.55; }

.ci-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--bg-3);
    color: var(--text-2);
    font-size: 0.75rem;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

.ci-painter-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ci-painter-name { font-size: 0.88rem; font-weight: 600; color: var(--text-1); }
.ci-painter-meta { font-size: 0.75rem; color: var(--text-3); }

.ci-status-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.ci-dot-done    { background: var(--green); }
.ci-dot-partial { background: var(--amber); }
.ci-dot-none    { background: var(--border-strong); }

.ci-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 48px 0;
    color: var(--text-3);
    font-size: 0.9rem;
}

/* ── Flow screen ─────────────────────────────────────── */
.ci-flow-wrap {
    width: 100%;
    max-width: 600px;
    padding: 20px 24px 80px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Flow header: exit | steps | counter */
.ci-flow-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 4px;
}

.ci-exit-btn {
    background: none;
    border: none;
    font-size: 0.78rem;
    color: var(--text-3);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--r-sm);
    transition: color var(--fast), background var(--fast);
    flex-shrink: 0;
}
.ci-exit-btn:hover { color: var(--text-1); background: var(--bg-2); }

.ci-steps {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.ci-step {
    width: 9px; height: 9px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    transition: transform var(--fast), background var(--fast);
    padding: 0;
}
.ci-step:hover { transform: scale(1.4); }
.ci-step-done  { background: var(--green); }
.ci-step-cur   { background: var(--accent); transform: scale(1.35); }
.ci-step-todo  { background: var(--border-strong); }

.ci-counter {
    font-size: 0.75rem;
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* Painter identity card */
.ci-painter-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 20px;
    background: var(--bg-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-lg);
    text-align: center;
}

.ci-card-avatar {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 4px;
}

.ci-card-name {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-1);
}

.ci-card-meta {
    font-size: 0.78rem;
    color: var(--text-3);
}

/* Set cards */
.ci-sets-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ci-set-card {
    background: var(--bg-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color var(--fast);
}
.ci-set-card:focus-within { border-color: var(--accent); }

.ci-set-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.ci-set-title {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ci-set-client {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ci-set-order {
    font-size: 0.75rem;
    color: var(--text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ci-set-badges {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.ci-logged-tag {
    font-size: 0.66rem;
    padding: 2px 7px;
    border-radius: 99px;
    background: color-mix(in srgb, var(--green) 15%, transparent);
    color: var(--green);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* Percentage row */
.ci-pct-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Slider — custom styled track with dynamic fill */
.ci-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 7px;
    border-radius: 99px;
    background: linear-gradient(
        to right,
        var(--accent) 0%,
        var(--accent) var(--ci-fill, 0%),
        rgba(255,255,255,0.13) var(--ci-fill, 0%),
        rgba(255,255,255,0.13) 100%
    );
    outline: none;
    cursor: pointer;
    transition: height var(--fast);
    box-shadow: 0 0 0 1.5px rgba(255,255,255,0.1);
}
.ci-slider:hover { height: 9px; }
.ci-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--accent);
    border: 2.5px solid var(--bg-0);
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    cursor: pointer;
    transition: transform var(--fast);
}
.ci-slider::-webkit-slider-thumb:hover { transform: scale(1.2); }
.ci-slider::-moz-range-thumb {
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--accent);
    border: 2.5px solid var(--bg-0);
    cursor: pointer;
}

.ci-pct-pill {
    min-width: 40px;
    text-align: center;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    padding: 2px 8px;
    border-radius: 99px;
}

/* Note textarea */
.ci-note {
    width: 100%;
    background: var(--bg-0);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-sm);
    color: var(--text-1);
    font-size: 0.82rem;
    font-family: inherit;
    padding: 8px 10px;
    resize: vertical;
    min-height: 52px;
    transition: border-color var(--fast);
    box-sizing: border-box;
}
.ci-note:focus {
    outline: none;
    border-color: var(--accent);
}
.ci-note::placeholder { color: var(--text-3); }

/* Navigation bar */
.ci-nav {
    display: flex;
    gap: 8px;
    align-items: center;
    padding-top: 4px;
}

.ci-nav-btn {
    padding: 10px 18px;
    border-radius: var(--r-md);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: opacity var(--fast), transform var(--fast);
}
.ci-nav-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.ci-nav-btn:not(:disabled):hover { transform: translateY(-1px); }
.ci-nav-btn:active:not(:disabled) { transform: none; }

.ci-nav-prev {
    background: var(--bg-2);
    color: var(--text-2);
    border: 1px solid var(--border-subtle);
}

.ci-nav-skip {
    background: var(--bg-2);
    color: var(--text-3);
    border: 1px solid var(--border-subtle);
}

.ci-nav-save {
    flex: 1;
    background: var(--accent);
    color: #fff;
}

/* ── Figure-level rows ───────────────────────────────────────────── */
.ci-fig-loading {
    font-size: 0.8rem;
    color: var(--text-3);
    padding: 12px 0;
    text-align: center;
}

.ci-fig-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ci-fig-row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 4px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-subtle);
}
.ci-fig-row:last-child { border-bottom: none; }

.ci-fig-name {
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--text-1);
    align-self: center;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ci-fig-val {
    font-size: 0.75rem;
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    align-self: center;
    justify-self: end;
}

/* The pct-row inside a figure row spans full width */
.ci-fig-pct-row {
    grid-column: 1 / -1;
}

.ci-fig-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid var(--border-subtle);
    margin-top: 4px;
}

.ci-fig-total {
    font-size: 0.78rem;
    color: var(--text-3);
}

.ci-fig-avg {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--accent);
}

/* No-figures fallback */
.ci-no-figures {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ci-fig-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.ci-fig-action-btn {
    background: var(--bg-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-sm);
    color: var(--text-2);
    font-size: 0.78rem;
    font-weight: 500;
    padding: 5px 12px;
    cursor: pointer;
    transition: background var(--fast), color var(--fast);
}
.ci-fig-action-btn:hover { background: var(--bg-3); color: var(--text-1); }
.ci-fig-save-btn {
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}
.ci-fig-save-btn:hover { background: color-mix(in srgb, var(--accent) 25%, transparent); }

/* Inline add-figures form */
.ci-add-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background: var(--bg-0);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    margin-top: 4px;
}

.ci-fig-input-row {
    display: flex;
    gap: 8px;
}

.ci-fig-input-name {
    flex: 1;
    background: var(--bg-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-sm);
    color: var(--text-1);
    font-size: 0.82rem;
    font-family: inherit;
    padding: 6px 9px;
}
.ci-fig-input-name:focus { outline: none; border-color: var(--accent); }

.ci-fig-input-val {
    width: 90px;
    background: var(--bg-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-sm);
    color: var(--text-1);
    font-size: 0.82rem;
    font-family: inherit;
    padding: 6px 9px;
}
.ci-fig-input-val:focus { outline: none; border-color: var(--accent); }

.ci-add-form-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

/* ======================================================
   AT-RISK VIEW
   ====================================================== */

.at-risk-count {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--red);
    background: color-mix(in srgb, var(--red) 12%, transparent);
    padding: 2px 10px;
    border-radius: 99px;
}

.at-risk-table {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    overflow: hidden;
}

.at-risk-thead {
    display: grid;
    grid-template-columns: 120px 1fr 72px 72px 60px 100px 80px;
    gap: 8px;
    padding: 8px 14px;
    background: var(--bg-2);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-3);
}

.at-risk-row {
    display: grid;
    grid-template-columns: 120px 1fr 72px 72px 60px 100px 80px;
    gap: 8px;
    padding: 10px 14px;
    align-items: center;
    border-top: 1px solid var(--border-subtle);
    cursor: pointer;
    transition: background var(--fast);
    font-size: 0.82rem;
}
.at-risk-row:hover { background: var(--bg-1); }
.at-risk-overdue { border-left: 3px solid var(--red); }
.at-risk-behind  { border-left: 3px solid var(--amber); }

.ar-painter { color: var(--text-2); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar-set { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ar-set-client { font-weight: 600; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar-set-order  { font-size: 0.73rem; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar-pct  { font-variant-numeric: tabular-nums; color: var(--text-2); }
.ar-gap  { font-weight: 700; font-variant-numeric: tabular-nums; }
.ar-gap-overdue { color: var(--red); }
.ar-gap-behind  { color: var(--amber); }
.ar-deadline { display: flex; flex-direction: column; gap: 1px; }
.ar-days { font-size: 0.71rem; color: var(--text-3); }
.ar-badge { display: flex; }

/* ======================================================
   SET TIMELINE DRAWER
   ====================================================== */

.drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 900;
    animation: fadeIn var(--base) var(--ease);
}

.drawer {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(440px, 100vw);
    background: var(--bg-surface);
    border-left: 1px solid rgba(255,255,255,0.14);
    box-shadow: -16px 0 56px rgba(0,0,0,0.55);
    z-index: 901;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 260ms cubic-bezier(0.4,0,0.2,1);
}
.drawer.drawer-open { transform: translateX(0); }

.drawer-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
}

.drawer-header-left { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.drawer-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.drawer-sub {
    font-size: 0.75rem;
    color: var(--text-3);
}

.drawer-close {
    background: none;
    border: none;
    font-size: 1rem;
    color: var(--text-3);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: var(--r-sm);
    transition: color var(--fast), background var(--fast);
    flex-shrink: 0;
    margin-left: 8px;
}
.drawer-close:hover { color: var(--text-1); background: var(--bg-2); }

.drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px 32px;
}

.drawer-loading, .drawer-error {
    font-size: 0.85rem;
    color: var(--text-3);
    text-align: center;
    padding: 40px 0;
}

/* Timeline summary block */
.tl-summary {
    background: var(--bg-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    padding: 12px 14px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tl-summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--text-2);
}
.tl-summary-row strong { color: var(--text-1); }

/* Timeline list */
.tl-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.tl-empty {
    font-size: 0.85rem;
    color: var(--text-3);
    text-align: center;
    padding: 32px 0;
}

.tl-item {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 0 12px;
    padding-bottom: 18px;
    position: relative;
}

/* vertical connector line */
.tl-item:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 9px;
    top: 18px;
    bottom: 0;
    width: 2px;
    background: var(--border-subtle);
}

.tl-dot {
    width: 16px; height: 16px;
    border-radius: 50%;
    border: 2.5px solid var(--bg-0);
    margin-top: 2px;
    flex-shrink: 0;
    z-index: 1;
}
.tl-dot-event    { background: var(--text-3); }
.tl-dot-progress { background: var(--accent); }

.tl-content { min-width: 0; }

.tl-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-1);
    line-height: 1.3;
}

.tl-sub {
    font-size: 0.78rem;
    color: var(--text-2);
    margin-top: 2px;
}

.tl-progress-bar-wrap {
    height: 4px;
    background: var(--bg-3);
    border-radius: 99px;
    margin: 5px 0;
    overflow: hidden;
}
.tl-progress-bar {
    height: 100%;
    background: var(--accent);
    border-radius: 99px;
    transition: width var(--base) var(--ease);
}

.tl-date {
    font-size: 0.71rem;
    color: var(--text-3);
    margin-top: 3px;
}

/* ======================================================
   GLOBAL SEARCH
   ====================================================== */

.search-btn-inner {
    display: flex;
    align-items: center;
    gap: 6px;
}
.search-btn-inner kbd {
    font-size: 0.65rem;
    background: var(--bg-3);
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    padding: 1px 5px;
    color: var(--text-3);
    font-family: inherit;
    line-height: 1.4;
}

.search-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 8vh;
    animation: fadeIn var(--base) var(--ease);
}
.search-overlay[hidden] { display: none !important; }

.search-modal {
    background: var(--bg-raised);
    border: 1.5px solid rgba(255,255,255,0.18);
    border-radius: var(--r-lg);
    box-shadow: 0 32px 80px rgba(0,0,0,0.6);
    width: min(560px, calc(100vw - 32px));
    overflow: hidden;
    animation: modalIn var(--base) var(--ease);
    max-height: 70vh;
    display: flex;
    flex-direction: column;
}

.search-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    flex-shrink: 0;
}

.search-icon { font-size: 1rem; flex-shrink: 0; }

.search-input {
    flex: 1;
    background: none;
    border: none;
    color: var(--text-1);
    font-size: 0.95rem;
    font-family: inherit;
    outline: none;
}
.search-input::placeholder { color: var(--text-3); }

.search-esc-hint {
    font-size: 0.68rem;
    background: var(--bg-2);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    padding: 2px 6px;
    color: var(--text-3);
    font-family: inherit;
    flex-shrink: 0;
}

.search-results {
    overflow-y: auto;
    padding: 8px 8px 10px;
    flex: 1;
}

.search-empty {
    padding: 24px 16px;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-3);
}

.search-group { margin-bottom: 4px; }

.search-group-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-3);
    padding: 6px 10px 4px;
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: none;
    border: none;
    border-radius: var(--r-md);
    padding: 8px 10px;
    cursor: pointer;
    text-align: left;
    transition: background var(--fast);
}
.search-result-item:hover,
.search-result-item.search-result-selected { background: var(--bg-2); }

.search-result-icon { font-size: 1rem; flex-shrink: 0; }

.search-result-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.search-result-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-sub {
    font-size: 0.73rem;
    color: var(--text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* painter card highlight from search */
@keyframes searchPulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent); }
    50%  { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 20%, transparent); }
    100% { box-shadow: 0 0 0 0 transparent; }
}
.search-highlight { animation: searchPulse 1.8s ease; }

/* ========================== SCHEDULE TAB ========================== */

.schedule-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.summary-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.25rem;
}

.summary-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.summary-card-icon {
    font-size: 1.5rem;
}

.summary-card-title {
    font-size: 0.875rem;
    color: var(--text-2);
    font-weight: 500;
}

.summary-card-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-1);
}

.schedule-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
}

.schedule-tab {
    background: transparent;
    border: none;
    padding: 0.75rem 1.5rem;
    cursor: pointer;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-2);
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}

.schedule-tab:hover {
    color: var(--text-1);
    background: var(--hover);
}

.schedule-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.schedule-sheet {
    display: none;
}

.schedule-sheet.active {
    display: block;
}

.schedule-table-container {
    overflow-x: auto;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.schedule-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.schedule-table thead {
    background: var(--bg-2);
    border-bottom: 1px solid var(--border);
}

.schedule-table th {
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--text-1);
    white-space: nowrap;
}

.schedule-table tbody tr {
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
}

.schedule-table tbody tr:hover {
    background: var(--hover);
}

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

.schedule-table td {
    padding: 0.875rem 1rem;
    color: var(--text-2);
}

.schedule-table td strong {
    color: var(--text-1);
    font-weight: 600;
}

.status-badge {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.status-pending {
    background: color-mix(in srgb, #f59e0b 15%, transparent);
    color: #f59e0b;
}

.status-painting {
    background: color-mix(in srgb, #3b82f6 15%, transparent);
    color: #3b82f6;
}

.status-not-arrived {
    background: color-mix(in srgb, #6b7280 15%, transparent);
    color: #6b7280;
}

.status-qa {
    background: color-mix(in srgb, #8b5cf6 15%, transparent);
    color: #8b5cf6;
}

.status-arrived {
    background: color-mix(in srgb, #10b981 15%, transparent);
    color: #10b981;
}

.assigned-cell {
    font-size: 0.8125rem;
    color: var(--text-3);
}

.schedule-loading {
    padding: 3rem;
    text-align: center;
    color: var(--text-3);
}

.no-data {
    padding: 3rem;
    text-align: center;
    color: var(--text-3);
    font-size: 0.9375rem;
}

.error-message {
    padding: 2rem;
    text-align: center;
    color: #ef4444;
    font-size: 0.9375rem;
}


/* ========================== SETS LINKING ========================== */

.sets-list {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 150px;
}

.set-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    background: var(--bg-2);
    border-radius: 4px;
    font-size: 0.75rem;
    border-left: 3px solid var(--border);
}

.set-item.set-status-planned {
    border-left-color: #9ca3af;
}

.set-item.set-status-active {
    border-left-color: #3b82f6;
}

.set-item.set-status-qa {
    border-left-color: #f59e0b;
}

.set-item.set-status-completed {
    border-left-color: #10b981;
}

.set-number {
    font-weight: 600;
    color: var(--text-1);
    min-width: 2rem;
}

.set-painter {
    color: var(--text-2);
    font-size: 0.7rem;
    flex: 1;
}

.set-amount {
    color: var(--text-3);
    font-size: 0.7rem;
    font-weight: 500;
}

.no-sets {
    color: var(--text-3);
    font-size: 0.875rem;
}

/* Responsive: make sets column wider */
.schedule-table th:last-child,
.schedule-table td:last-child {
    min-width: 200px;
}


/* ========================== USER INFO ========================== */

.user-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem;
    margin-top: auto;
    border-top: 1px solid var(--border);
}

.user-details {
    flex: 1;
    min-width: 0;
}

.user-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-role {
    font-size: 0.75rem;
    color: var(--text-3);
    margin-top: 0.125rem;
}

.btn-logout {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-logout:hover {
    background: var(--hover);
    border-color: var(--accent);
}

.btn-logout span {
    font-size: 1.125rem;
}

.user-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.btn-icon-sidebar {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.5rem;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s;
}
.btn-icon-sidebar:hover {
    background: var(--hover);
    border-color: var(--accent);
}

.form-error {
    color: #ef4444;
    font-size: 0.8rem;
    min-height: 1.1em;
    margin: -4px 0 4px;
}

/* ── Online dot (users table) ──────────────────────────────────────── */
.th-online { width: 28px; padding: 0 !important; }
.td-online  { width: 28px; text-align: center; padding: 0 !important; }
.online-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.online-dot--on  { background: #22c55e; box-shadow: 0 0 4px rgba(34,197,94,0.6); }
.online-dot--off { background: var(--bg-overlay); }

/* ========================== USER MANAGEMENT ========================== */

.users-container {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow-x: auto;
}

.users-table {
    width: 100%;
    border-collapse: collapse;
}

.users-table thead {
    background: var(--bg-2);
    border-bottom: 1px solid var(--border);
}

.users-table th {
    padding: 0.875rem 1rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-2);
}

.users-table tbody tr {
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
}

.users-table tbody tr:hover {
    background: var(--hover);
}

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

.users-table td {
    padding: 1rem;
    color: var(--text-2);
}

.users-table td strong {
    color: var(--text-1);
    font-weight: 600;
}

.role-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: capitalize;
}

.role-admin {
    background: color-mix(in srgb, #f59e0b 15%, transparent);
    color: #f59e0b;
}

.role-painter {
    background: color-mix(in srgb, #3b82f6 15%, transparent);
    color: #3b82f6;
}

.table-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.btn-icon {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.5rem;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-icon:hover {
    background: var(--hover);
    border-color: var(--accent);
}

.btn-icon.btn-danger:hover {
    background: color-mix(in srgb, #ef4444 15%, transparent);
    border-color: #ef4444;
}

.password-display {
    padding: 1rem 0;
}

.password-value {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.75rem;
    font-family: 'Geist Mono', monospace;
    font-size: 0.9375rem;
    color: var(--text-2);
}

.password-value-highlight {
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    border: 1px solid var(--accent);
    border-radius: 6px;
    padding: 0.875rem;
    font-family: 'Geist Mono', monospace;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--accent);
    text-align: center;
    letter-spacing: 0.05em;
}

.loading-cell,
.no-data {
    text-align: center;
    color: var(--text-3);
    padding: 2rem !important;
}


.role-management {
    background: color-mix(in srgb, #8b5cf6 15%, transparent);
    color: #8b5cf6;
}

.no-actions {
    color: var(--text-3);
    font-size: 0.875rem;
}


/* ========================================================================
   TV DASHBOARD - Large screen / TV display styling
   ======================================================================== */

.tv-dashboard {
    padding: 2rem;
    background: var(--bg-1);
    min-height: 100vh;
}

.tv-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.tv-metric-card {
    background: var(--bg-2);
    border: 1px solid var(--border-1);
    border-radius: 16px;
    padding: 2.5rem;
    text-align: center;
    transition: all 0.3s ease;
}

.tv-metric-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.tv-metric-label {
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--text-2);
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tv-metric-value {
    font-size: 5rem;
    font-weight: 700;
    color: var(--text-1);
    font-family: 'Geist Mono', monospace;
    line-height: 1;
}

.tv-metric-value.success {
    color: var(--success);
}

.tv-metric-value.warning {
    color: var(--warning);
}

.tv-metric-value.danger {
    color: var(--danger);
}

.tv-section {
    margin-bottom: 3rem;
}

.tv-section-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-1);
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border-1);
}

.tv-status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}

.tv-status-card {
    background: var(--bg-2);
    border: 1px solid var(--border-1);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
}

.tv-status-label {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--text-2);
    margin-bottom: 0.75rem;
}

.tv-status-value {
    font-size: 3rem;
    font-weight: 700;
    font-family: 'Geist Mono', monospace;
    color: var(--text-1);
}

.tv-status-value.pending {
    color: var(--text-3);
}

.tv-status-value.active {
    color: var(--info);
}

.tv-status-value.qa {
    color: var(--warning);
}

.tv-status-value.completed {
    color: var(--success);
}

.tv-painters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.tv-painter-card {
    background: var(--bg-2);
    border: 1px solid var(--border-1);
    border-radius: 12px;
    padding: 1.5rem;
}

.tv-painter-name {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-1);
    margin-bottom: 0.75rem;
}

.tv-painter-workload {
    font-size: 2.5rem;
    font-weight: 700;
    font-family: 'Geist Mono', monospace;
    margin-bottom: 0.5rem;
}

.tv-painter-workload.available {
    color: var(--success);
}

.tv-painter-workload.full {
    color: var(--warning);
}

.tv-painter-workload.overloaded {
    color: var(--danger);
}

.tv-painter-sets {
    font-size: 1.125rem;
    color: var(--text-2);
}

.tv-build-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.tv-build-card {
    background: var(--bg-2);
    border: 1px solid var(--border-1);
    border-radius: 12px;
    padding: 1.5rem;
}

.tv-build-type {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-1);
    margin-bottom: 0.5rem;
}


/* Responsive adjustments for even larger displays */
@media (min-width: 1920px) {
    .tv-metric-value {
        font-size: 6rem;
    }
    
    .tv-section-title {
        font-size: 2.5rem;
    }
    
    .tv-status-value {
        font-size: 3.5rem;
    }
}

/* Full-screen mode helper */
.tv-dashboard.fullscreen {
    padding: 3rem;
}

.tv-dashboard.fullscreen .tv-metric-value {
    font-size: 7rem;
}

.tv-dashboard.fullscreen .tv-section-title {
    font-size: 3rem;
}

/* Request ticket sample info */
.ticket-sample-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    font-size: 0.875rem;
    border-top: 1px solid var(--border-1);
    margin-top: 0.5rem;
}

.ticket-sample-label {
    color: var(--text-2);
    font-weight: 500;
}

/* Checkbox label styling */
.checkbox-label {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    width: auto;
    margin: 0;
}

/* TV Dashboard - Overdue/Behind indicators */
.tv-status-badge {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tv-status-badge.overdue {
    background: var(--danger-bg);
    color: var(--danger);
    border: 2px solid var(--danger);
    animation: pulse 2s ease-in-out infinite;
}

.tv-status-badge.behind {
    background: var(--warning-bg);
    color: var(--warning);
    border: 2px solid var(--warning);
}

.tv-painter-card.overdue-card {
    border: 3px solid var(--danger);
    background: linear-gradient(135deg, var(--bg-2) 0%, color-mix(in srgb, var(--danger) 10%, var(--bg-2)) 100%);
}

.tv-painter-card.behind-card {
    border: 2px solid var(--warning);
    background: linear-gradient(135deg, var(--bg-2) 0%, color-mix(in srgb, var(--warning) 8%, var(--bg-2)) 100%);
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

/* =====================================================================
   TV DASHBOARD AUTO-ROTATION
   ===================================================================== */

.tv-controls {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--bg-1);
    padding: 1rem;
    border-bottom: 2px solid var(--border);
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.tv-control-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.tv-control-btn:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.tv-control-btn:active {
    transform: translateY(0);
}

#tvAutoRotateIcon {
    font-size: 1.3rem;
}

.tv-rotation-dots {
    display: flex;
    gap: 0.75rem;
    padding: 0.5rem;
}

.tv-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--text-3);
    cursor: pointer;
    transition: all 0.3s;
    opacity: 0.3;
}

.tv-dot:hover {
    opacity: 0.6;
    transform: scale(1.2);
}

.tv-dot.active {
    opacity: 1;
    background: var(--primary);
    transform: scale(1.3);
    box-shadow: 0 0 8px var(--primary);
}

.tv-timer-bar {
    flex: 1;
    height: 4px;
    background: var(--bg-2);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.tv-timer-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--primary), var(--success));
    border-radius: 2px;
}

.tv-timer-bar.animating::before {
    animation: timerProgress 5s linear;
}

@keyframes timerProgress {
    from {
        width: 0%;
    }
    to {
        width: 100%;
    }
}

/* TV Views */
.tv-view {
    display: none;
    animation: tvFadeIn 0.5s ease-in-out;
}

.tv-view.active {
    display: block;
}

@keyframes tvFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tv-section-full {
    margin-top: 0;
}

/* TV At Risk Cards */
.tv-at-risk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
    gap: 1.5rem;
}

.tv-at-risk-card {
    background: var(--bg-2);
    border-radius: 12px;
    padding: 1.5rem;
    border: 2px solid var(--border);
    animation: tvSlideIn 0.4s ease-out;
    animation-delay: calc(var(--i) * 0.05s);
    animation-fill-mode: both;
}

.tv-at-risk-card.overdue {
    border-color: var(--danger);
    background: linear-gradient(135deg, var(--bg-2) 0%, color-mix(in srgb, var(--danger) 10%, var(--bg-2)) 100%);
}

.tv-at-risk-card.behind {
    border-color: var(--warning);
    background: linear-gradient(135deg, var(--bg-2) 0%, color-mix(in srgb, var(--warning) 8%, var(--bg-2)) 100%);
}

@keyframes tvSlideIn {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.tv-at-risk-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.tv-at-risk-icon {
    font-size: 1.8rem;
}

.tv-at-risk-painter {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-1);
}

.tv-at-risk-set {
    font-size: 1.1rem;
    color: var(--text-2);
    margin-bottom: 1rem;
    font-weight: 500;
}

.tv-at-risk-progress {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.tv-progress-bar-bg {
    height: 28px;
    background: var(--bg-3);
    border-radius: 14px;
    position: relative;
    overflow: hidden;
}

.tv-progress-bar-expected {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--text-3);
    opacity: 0.3;
    transition: width 0.6s ease;
}

.tv-progress-bar-actual {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--success));
    border-radius: 14px;
    transition: width 0.6s ease;
}

.tv-at-risk-stats {
    display: flex;
    justify-content: space-between;
    font-size: 1rem;
    color: var(--text-2);
    font-weight: 600;
}

.tv-at-risk-stats span {
    padding: 0.375rem 0.75rem;
    background: var(--bg-3);
    border-radius: 6px;
}

/* =====================================================================
   MOBILE RESPONSIVE DESIGN
   ===================================================================== */

@media (max-width: 768px) {
    /* Hide sidebar on mobile, show hamburger menu */
    .sidebar {
        position: fixed;
        left: -280px;
        transition: left 0.3s ease;
        z-index: 200;
    }

    .sidebar.mobile-open {
        left: 0;
        box-shadow: 4px 0 12px rgba(0, 0, 0, 0.3);
    }

    /* Mobile overlay when sidebar is open */
    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 199;
    }

    .sidebar-overlay.active {
        display: block;
    }

    /* Main content takes full width */
    .main-content {
        margin-left: 0;
        width: 100%;
    }

    /* Top bar adjustments */
    .top-bar {
        padding: 0.75rem;
        gap: 0.5rem;
    }

    .page-title {
        font-size: 1.2rem;
    }

    .sidebar-toggle {
        display: block !important;
        font-size: 1.5rem;
        padding: 0.5rem;
    }

    .top-bar-right {
        gap: 0.25rem;
    }

    .top-bar-right .btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
    }

    /* Hide button labels on mobile, show icons only */
    .top-bar-right .btn span:not(.search-btn-inner) {
        display: none;
    }

    .search-btn-inner kbd {
        display: none;
    }

    /* Mobile grid adjustments */
    .painters-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .overview-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .workload-grid {
        grid-template-columns: 1fr;
    }

    .sets-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    /* Mobile cards - more compact */
    .painter-card {
        padding: 1rem;
    }

    .painter-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .painter-sets {
        gap: 0.5rem;
    }

    .set-item {
        padding: 0.75rem;
        font-size: 0.9rem;
    }

    /* Mobile tabs toolbar */
    .tab-toolbar {
        flex-direction: column;
        gap: 0.5rem;
    }

    .tab-toolbar-multi {
        flex-wrap: wrap;
    }

    .search-input,
    .filter-select {
        width: 100%;
    }

    /* TV Dashboard - mobile adjustments */
    .tv-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        padding: 0.75rem;
    }

    .tv-control-btn {
        width: 100%;
        justify-content: center;
    }

    .tv-rotation-dots {
        justify-content: center;
    }

    .tv-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .tv-metric-card {
        padding: 1rem;
    }

    .tv-metric-value {
        font-size: 2rem;
    }

    .tv-painters-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

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

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

    .tv-at-risk-grid {
        grid-template-columns: 1fr;
    }

    /* Modals - full screen on mobile */
    .modal {
        width: 100%;
        max-width: 100%;
        height: 100vh;
        max-height: 100vh;
        margin: 0;
        border-radius: 0;
    }

    .modal-lg {
        width: 100%;
        max-width: 100%;
    }

    /* Forms - mobile friendly */
    .form-row {
        flex-direction: column;
    }

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

    /* At-risk table - mobile layout */
    .at-risk-table {
        font-size: 0.85rem;
    }

    .at-risk-thead,
    .at-risk-row {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }

    .at-risk-row {
        padding: 0.75rem;
    }

    /* Unassigned pool - mobile */
    .unassigned-list {
        grid-template-columns: 1fr;
    }

    /* Performance grid */
    .performance-grid {
        grid-template-columns: 1fr;
    }

    /* Payments grid */
    .payments-grid {
        grid-template-columns: 1fr;
    }

    /* Samples board */
    .samples-board {
        grid-template-columns: 1fr;
    }

    /* Requests board */
    .requests-board {
        grid-template-columns: 1fr;
    }

    /* Drawer - full screen on mobile */
    .drawer {
        width: 100%;
        max-width: 100%;
    }

    /* Search overlay - full screen */
    .search-modal {
        width: 95%;
        max-height: 80vh;
    }

    /* Toast notifications - bottom on mobile */
    .toast-container {
        top: auto;
        bottom: 1rem;
        right: 1rem;
        left: 1rem;
    }

    .toast {
        margin-bottom: 0.5rem;
    }

    /* Painters add form - mobile */
    .builders-add-form {
        flex-direction: column;
    }

    .builders-add-form input {
        width: 100%;
    }

    /* Badge adjustments */
    .badge,
    .status-badge,
    .workload-badge {
        font-size: 0.7rem;
        padding: 0.25rem 0.5rem;
    }

    /* Stat cards - smaller text */
    .stat-card {
        padding: 1rem;
    }

    .stat-value {
        font-size: 1.5rem;
    }

    /* Section titles */
    .section-title {
        font-size: 1.2rem;
    }

    .tv-section-title {
        font-size: 1.5rem;
    }

    /* Users table - scroll */
    .users-container {
        overflow-x: auto;
    }

    .users-table {
        min-width: 600px;
    }

    /* Connection status - smaller */
    .sidebar-clock-time {
        font-size: 1rem;
    }

    .sidebar-clock-date {
        font-size: 0.75rem;
    }
}

/* Extra small phones */
@media (max-width: 480px) {
    .tv-metrics-grid {
        grid-template-columns: 1fr;
    }

    .overview-stats {
        grid-template-columns: 1fr;
    }

    .tv-build-grid,
    .tv-status-grid {
        grid-template-columns: 1fr;
    }

    .tv-metric-value {
        font-size: 1.75rem;
    }

    .page-title {
        font-size: 1rem;
    }

    .top-bar-right .btn {
        padding: 0.4rem 0.6rem;
        font-size: 0.8rem;
    }

}

/* Landscape tablets */
@media (min-width: 769px) and (max-width: 1024px) {
    .painters-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

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

    .tv-metrics-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Touch-friendly adjustments */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .btn,
    .nav-item,
    .set-item,
    .painter-card {
        min-height: 44px; /* iOS recommended touch target */
    }

    .nav-item {
        padding: 1rem;
    }

    /* Remove hover effects on touch devices */
    .btn:hover,
    .nav-item:hover,
    .set-item:hover {
        transform: none;
    }

    /* Tap highlight */
    * {
        -webkit-tap-highlight-color: rgba(var(--primary-rgb), 0.1);
    }
}

/* =====================================================================
   UI/UX IMPROVEMENTS
   ===================================================================== */

/* Loading States */
.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid var(--bg-3);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.loading-spinner-large {
    width: 48px;
    height: 48px;
    border-width: 4px;
}

.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(var(--bg-1-rgb, 15, 23, 42), 0.8);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    border-radius: inherit;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Skeleton Loading */
.skeleton {
    background: linear-gradient(90deg, var(--bg-2) 25%, var(--bg-3) 50%, var(--bg-2) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton-text {
    height: 1em;
    margin: 0.5em 0;
}

.skeleton-card {
    height: 200px;
}

.skeleton-painter-card {
    height: 180px;
    border-radius: var(--r-xl);
    animation-delay: calc(var(--i, 0) * 80ms);
}

/* Tooltips */
.tooltip {
    position: relative;
    cursor: help;
}

.tooltip::before,
.tooltip::after {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.tooltip::before {
    content: attr(data-tooltip);
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    padding: 0.5rem 0.75rem;
    background: var(--bg-overlay);
    color: var(--text-1);
    font-size: 0.875rem;
    white-space: nowrap;
    border-radius: 6px;
    margin-bottom: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 1000;
}

.tooltip::after {
    content: '';
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--bg-overlay);
    margin-bottom: 2px;
}

.tooltip:hover::before,
.tooltip:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Keyboard Focus States */
*:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 4px;
}

.btn:focus-visible,
.nav-item:focus-visible,
.form-input:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Smooth Transitions */
.smooth-transition {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Copy Button */
.copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.75rem;
    color: var(--text-2);
    cursor: pointer;
    transition: all 0.2s;
}

.copy-btn:hover {
    background: var(--bg-overlay);
    color: var(--text-1);
    border-color: var(--primary);
}

.copy-btn.copied {
    background: var(--success-bg);
    color: var(--success);
    border-color: var(--success);
}

.copy-btn.copied::after {
    content: '✓ Copied!';
    margin-left: 0.25rem;
}

/* Quick Actions Floating Button */
.quick-actions {
    position: fixed;
    bottom: 90px;
    right: 2rem;
    z-index: 150;
}

.quick-action-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.quick-action-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.quick-action-btn:active {
    transform: scale(0.95);
}

.quick-actions-menu {
    position: absolute;
    bottom: 70px;
    right: 0;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    min-width: 200px;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.quick-actions-menu.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}

.quick-action-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 8px;
    color: var(--text-1);
    cursor: pointer;
    transition: background 0.2s;
}

.quick-action-item:hover {
    background: var(--bg-3);
}

.quick-action-item span:first-child {
    font-size: 1.2rem;
}

/* Improved Empty States */
.empty-state {
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--text-3);
}

.empty-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.5;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.empty-state p {
    margin: 0.5rem 0;
    font-size: 1.1rem;
    color: var(--text-2);
}

.empty-state-actions {
    margin-top: 1.5rem;
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Status Indicator Dot */
.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 0.5rem;
}

.status-dot.success {
    background: var(--success);
    box-shadow: 0 0 8px var(--success);
}

.status-dot.warning {
    background: var(--warning);
    box-shadow: 0 0 8px var(--warning);
}

.status-dot.danger {
    background: var(--danger);
    box-shadow: 0 0 8px var(--danger);
}

.status-dot.pulse {
    animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.3);
        opacity: 0.7;
    }
}

/* Progress Bar Component */
.progress-bar {
    width: 100%;
    height: 8px;
    background: var(--bg-3);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--success));
    border-radius: 4px;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.progress-bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmer 1.5s infinite;
}

/* Confirmation Dialog */
.confirm-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.92) translateY(6px);
    background: var(--bg-surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-xl);
    padding: 20px;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 20px 60px rgba(0,0,0,0.6);
    z-index: 1001;
    min-width: 340px;
    max-width: 90vw;
    opacity: 0;
    transition: opacity var(--base) var(--ease), transform var(--base) var(--ease);
}

.confirm-dialog.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) translateY(0);
}

.confirm-dialog-icon {
    width: 36px;
    height: 36px;
    background: var(--amber-bg);
    border-radius: var(--r);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--amber);
    margin-bottom: 12px;
}

.confirm-dialog-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-1);
    margin-bottom: 0.5rem;
}

.confirm-dialog-message {
    font-size: 0.85rem;
    color: var(--text-2);
    line-height: 1.55;
    margin-bottom: 16px;
}

.confirm-dialog-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* Breadcrumbs */
.breadcrumbs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    font-size: 0.875rem;
    color: var(--text-3);
}

.breadcrumb-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.breadcrumb-item a {
    color: var(--text-2);
    text-decoration: none;
    transition: color 0.2s;
}

.breadcrumb-item a:hover {
    color: var(--primary);
}

.breadcrumb-separator {
    color: var(--text-4);
}

.breadcrumb-item:last-child {
    color: var(--text-1);
    font-weight: 500;
}

/* Keyboard Shortcut Badge */
.kbd {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-family: 'Geist Mono', monospace;
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    color: var(--text-2);
}

/* Notification Badge */
.notification-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: var(--danger);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    animation: bounce-in 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes bounce-in {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

/* Slide-in Panel */
.slide-panel {
    position: fixed;
    top: 0;
    right: -400px;
    width: 400px;
    max-width: 90vw;
    height: 100vh;
    background: var(--bg-1);
    border-left: 1px solid var(--border);
    box-shadow: -4px 0 12px rgba(0, 0, 0, 0.3);
    z-index: 200;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
}

.slide-panel.open {
    right: 0;
}

.slide-panel-header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    background: var(--bg-1);
    z-index: 10;
}

.slide-panel-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-1);
}

.slide-panel-body {
    padding: 1.5rem;
}

/* Accordion */
.accordion-item {
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 0.5rem;
    overflow: hidden;
}

.accordion-header {
    padding: 1rem;
    background: var(--bg-2);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.2s;
}

.accordion-header:hover {
    background: var(--bg-3);
}

.accordion-icon {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.accordion-item.open .accordion-icon {
    transform: rotate(180deg);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.accordion-item.open .accordion-content {
    max-height: 1000px;
}

.accordion-body {
    padding: 1rem;
    background: var(--bg-1);
}

/* Micro-interactions */
.ripple {
    position: relative;
    overflow: hidden;
}

.ripple::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    opacity: 0;
}

.ripple:active::after {
    width: 300px;
    height: 300px;
    opacity: 1;
    transition: width 0.6s, height 0.6s, opacity 0.3s;
    opacity: 0;
}

/* Contextual Help */
.help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--bg-3);
    color: var(--text-3);
    font-size: 0.75rem;
    font-weight: 700;
    cursor: help;
    margin-left: 0.5rem;
}

.help-icon:hover {
    background: var(--primary);
    color: white;
}

/* Compact Mode Toggle */
.compact-mode .painter-card,
.compact-mode .set-item,
.compact-mode .stat-card {
    padding: 0.75rem;
}

.compact-mode .painter-name,
.compact-mode .set-title {
    font-size: 0.95rem;
}

/* Print Styles */
@media print {
    .sidebar,
    .top-bar,
    .modal-overlay,
    .quick-actions,
    .toast-container {
        display: none !important;
    }

    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
    }

    .painter-card,
    .set-item,
    .stat-card {
        page-break-inside: avoid;
    }
}

/* =====================================================================
   MOBILE UI FIXES
   ===================================================================== */

/* Hide keyboard shortcuts panel on mobile */
@media (max-width: 768px) {
    #shortcutsPanel {
        display: none !important;
    }

    /* Ensure quick actions button is properly sized on mobile */
    .quick-action-btn {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
    }

    .quick-actions {
        bottom: 1rem;
        right: 1rem;
    }

    /* Improve tooltip positioning on mobile */
    .tooltip::before,
    .tooltip::after {
        display: none;
    }

    /* Better modal sizing on mobile */
    .confirm-dialog {
        min-width: 90vw;
        max-width: 90vw;
    }

    /* Improve slide panels on mobile */
    .slide-panel {
        width: 100vw;
        max-width: 100vw;
    }
}

/* Hide keyboard shortcuts help trigger on mobile */
@media (max-width: 768px) {
    .quick-action-item[onclick*="toggleShortcutsPanel"] {
        display: none;
    }
}

/* =====================================================================
   MOBILE SIDEBAR — consolidated (replaces all duplicate 768px blocks)
   ===================================================================== */

@media (max-width: 768px) {
    /* ── App shell: allow fixed sidebar to escape overflow containment.
          Without this, iOS Safari traps position:fixed children inside
          overflow:hidden parents, causing the overlay to appear above
          the sidebar. Body scroll is locked via JS when sidebar opens. ── */
    .app-shell {
        overflow: visible !important;
    }

    /* ── Sidebar: off-screen left, slides in on .mobile-open ── */
    .sidebar {
        position: fixed !important;
        top: 0 !important;
        left: -280px !important;
        width: 280px !important;
        max-width: 280px !important;
        height: 100dvh !important;
        flex-direction: column !important;
        flex-shrink: 0 !important;
        border-right: 1px solid var(--border-strong) !important;
        border-bottom: none !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        background: var(--bg-base) !important;
        z-index: 1000 !important;          /* must beat overlay (999) */
        transition: left 0.28s cubic-bezier(.4,0,.2,1) !important;
        box-shadow: none !important;
    }
    .sidebar.mobile-open {
        left: 0 !important;
        box-shadow: 8px 0 32px rgba(0,0,0,0.45) !important;
    }

    /* ── Overlay behind the sidebar ── */
    .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 999;
    }
    .sidebar-overlay.active { display: block; }

    /* ── Sidebar internals ── */
    .sidebar-logo {
        display: flex !important;
        justify-content: flex-start !important;
        padding: 18px 16px 12px !important;
    }
    .sidebar-nav {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        padding: 6px 8px !important;
        gap: 2px !important;
        flex: 1 !important;
        overflow-x: hidden;
    }
    .sidebar-footer {
        display: flex !important;
        flex-direction: column !important;
    }
    .nav-item {
        display: flex !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        padding: 11px 14px !important;
        font-size: 0.88rem !important;
        min-width: unset !important;
        width: 100% !important;
    }
    .nav-label { display: inline !important; }
    .nav-icon  { font-size: 1.1rem !important; }

    /* ── App shell: full-height column so main fills screen ── */
    .app-shell {
        flex-direction: column !important;
        height: 100dvh !important;
        overflow: hidden !important;
    }
    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
        flex: 1 1 0 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    /* ── User panel ── */
    .user-info {
        padding: 0.75rem !important;
        gap: 0.5rem !important;
        max-width: 280px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    .user-details {
        flex: 1 !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }
    .user-name {
        font-size: 0.875rem !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    .user-role {
        font-size: 0.75rem !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    .btn-logout {
        flex-shrink: 0 !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .btn-logout span { font-size: 1.25rem !important; }
}

/* Very small screens */
@media (max-width: 360px) {
    .sidebar,
    .sidebar.mobile-open {
        width: 90vw !important;
        max-width: 90vw !important;
    }
    .sidebar         { left: -90vw !important; }
    .sidebar.mobile-open { left: 0 !important; }
    .user-info       { max-width: 90vw !important; padding: 0.5rem !important; }
    .user-name       { font-size: 0.8rem !important; }
}

/* =====================================================================
   NEW TV DASHBOARD VIEWS STYLES
   ===================================================================== */

/* View 1: Top Performers */
#tvTopPerformersGrid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 2rem;
}

.tv-top-performer {
    background: var(--bg-2);
    border: 2px solid var(--border);
    border-radius: 16px;
    padding: 1.5rem 2rem;
    transition: all 0.3s ease;
}

.tv-top-performer.rank-1 {
    border-color: gold;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), var(--bg-2));
    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3);
}

.tv-top-performer.rank-2 {
    border-color: silver;
    background: linear-gradient(135deg, rgba(192, 192, 192, 0.1), var(--bg-2));
}

.tv-top-performer.rank-3 {
    border-color: #cd7f32;
    background: linear-gradient(135deg, rgba(205, 127, 50, 0.1), var(--bg-2));
}

.tv-performer-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.tv-rank {
    font-size: 2rem;
    font-weight: 900;
    color: var(--primary);
    min-width: 3rem;
}

.tv-performer-name {
    flex: 1;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-1);
}

.tv-performer-pct {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--success);
}

.tv-progress-bar {
    margin-bottom: 0.75rem;
}

.tv-progress-bg {
    height: 32px;
    background: var(--bg-3);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
}

.tv-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--success));
    border-radius: 16px;
    transition: width 1s ease-out;
}

.tv-performer-stats {
    display: flex;
    justify-content: space-between;
    font-size: 1.2rem;
    color: var(--text-2);
    font-weight: 600;
}

/* View 2: Loser Board */
#tvLoserBoardGrid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 2rem;
}

.tv-loser-card {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: var(--bg-2);
    border: 2px solid var(--border);
    border-radius: 12px;
    padding: 1.25rem 1.75rem;
    transition: all 0.3s ease;
}

.tv-loser-card.top-loser {
    border-color: var(--danger);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), var(--bg-2));
}

.tv-loser-rank {
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--danger);
    min-width: 3rem;
}

.tv-loser-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tv-loser-painter {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-1);
}

.tv-loser-set {
    font-size: 1.1rem;
    color: var(--text-2);
}

.tv-loser-days {
    display: flex;
    align-items: center;
}

.tv-overdue-badge {
    padding: 0.625rem 1.25rem;
    background: var(--danger);
    color: white;
    border-radius: 8px;
    font-size: 1.3rem;
    font-weight: 700;
}

/* View 3 & 4: Amila/Roman & Mgmt/Hasara Boards */
#tvAmilaRomanGrid,
#tvMgmtHasaraGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    padding: 2rem;
}

.tv-ar-section,
.tv-mh-section {
    background: var(--bg-2);
    border: 2px solid var(--border);
    border-radius: 16px;
    padding: 1.5rem;
}

.tv-ar-title,
.tv-mh-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-1);
    margin: 0 0 1rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--border);
}

.tv-ar-list,
.tv-mh-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.tv-ar-item,
.tv-mh-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1rem;
    background: var(--bg-3);
    border-radius: 8px;
    border: 1px solid var(--border);
    transition: all 0.2s ease;
}

.tv-mh-item.warning {
    border-color: var(--warning);
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), var(--bg-3));
}

.tv-mh-item.critical {
    border-color: var(--danger);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), var(--bg-3));
}

.tv-ar-rank {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-2);
    min-width: 2rem;
}

.tv-ar-painter,
.tv-mh-painter {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-1);
    min-width: 120px;
}

.tv-ar-value,
.tv-ar-note,
.tv-ar-date,
.tv-mh-set,
.tv-mh-value,
.tv-mh-days,
.tv-mh-month,
.tv-mh-risk {
    font-size: 1rem;
    color: var(--text-2);
}

.tv-ar-value,
.tv-mh-value {
    margin-left: auto;
    font-weight: 600;
    color: var(--primary);
}

.tv-mh-days,
.tv-mh-month,
.tv-mh-risk {
    margin-left: auto;
    font-weight: 600;
}

.tv-empty-small {
    text-align: center;
    padding: 1rem;
    color: var(--text-3);
    font-size: 1rem;
}

.tv-empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    font-size: 1.5rem;
    color: var(--text-3);
}

/* Responsive adjustments for TV dashboard */
@media (max-width: 1400px) {
    #tvAmilaRomanGrid,
    #tvMgmtHasaraGrid {
        grid-template-columns: 1fr;
    }
}

/* ======================================================
   MODE SWITCHER — GTA-style
   ====================================================== */

/* Floating trigger button */
.mode-trigger {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px 10px 14px;
    background: var(--bg-raised);
    border: 1px solid var(--border-strong);
    border-radius: 40px;
    color: var(--text-1);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 4px 24px rgba(0,0,0,0.5), 0 0 0 1px var(--border);
    transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease), background var(--fast) var(--ease);
}
.mode-trigger:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 0 1px var(--border-strong);
    background: var(--bg-overlay);
}
.mode-trigger:active { transform: translateY(0); }
.mode-trigger-icon { font-size: 1.1rem; line-height: 1; }
.mode-trigger-label { font-size: 0.75rem; }

/* Order mode: trigger gets amber ring */
[data-mode="orders"] .mode-trigger {
    border-color: rgba(245,158,11,0.5);
    box-shadow: 0 4px 24px rgba(0,0,0,0.5), 0 0 0 1px rgba(245,158,11,0.25), 0 0 16px rgba(245,158,11,0.1);
}

/* Admin mode: trigger gets purple ring */
[data-mode="admin"] .mode-trigger {
    border-color: rgba(139,92,246,0.5);
    box-shadow: 0 4px 24px rgba(0,0,0,0.5), 0 0 0 1px rgba(139,92,246,0.25), 0 0 16px rgba(139,92,246,0.1);
}

/* Full-screen overlay */
.mode-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mode-overlay[hidden] { display: none; }

.mode-overlay-bg {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    animation: modeOverlayIn var(--base) var(--ease) both;
}

@keyframes modeOverlayIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.mode-overlay-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    animation: modeContentIn var(--slow) var(--ease) both;
}

@keyframes modeContentIn {
    from { opacity: 0; transform: scale(0.92) translateY(20px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.mode-overlay-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 4px;
}

.mode-overlay-subtitle {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-1);
    letter-spacing: -0.02em;
    margin-bottom: 16px;
}

.mode-cards {
    display: flex;
    gap: 20px;
}

.mode-card {
    position: relative;
    width: 220px;
    padding: 36px 24px 32px;
    background: var(--bg-surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-xl);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    overflow: hidden;
    transition: transform var(--base) var(--ease), border-color var(--base) var(--ease), box-shadow var(--base) var(--ease);
    animation: modeCardIn var(--slow) var(--ease) both;
}
.mode-card:nth-child(2) { animation-delay: 60ms; }
.mode-card:nth-child(3) { animation-delay: 120ms; }

@keyframes modeCardIn {
    from { opacity: 0; transform: translateY(30px) scale(0.94); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.mode-card:hover {
    transform: translateY(-6px) scale(1.03);
    border-color: var(--accent);
    box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px var(--accent), 0 0 40px var(--accent-dim);
}

.mode-card.mode-card--active {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent), 0 0 40px var(--accent-dim);
}

/* Orders card hover accent = amber */
.mode-card-orders:hover,
.mode-card-orders.mode-card--active {
    border-color: #f59e0b;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px #f59e0b, 0 0 40px rgba(245,158,11,0.15);
}

/* Admin card hover accent = purple */
.mode-card-admin:hover,
.mode-card-admin.mode-card--active {
    border-color: #8b5cf6;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px #8b5cf6, 0 0 40px rgba(139,92,246,0.15);
}

.mode-card-glow {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--base) var(--ease);
    background: radial-gradient(circle at 50% 0%, var(--accent-dim), transparent 70%);
    pointer-events: none;
}
.mode-card:hover .mode-card-glow,
.mode-card.mode-card--active .mode-card-glow { opacity: 1; }
.mode-card-orders .mode-card-glow { background: radial-gradient(circle at 50% 0%, rgba(245,158,11,0.12), transparent 70%); }
.mode-card-admin .mode-card-glow  { background: radial-gradient(circle at 50% 0%, rgba(139,92,246,0.12), transparent 70%); }

.mode-card-icon {
    font-size: 3rem;
    line-height: 1;
    filter: drop-shadow(0 0 12px rgba(255,255,255,0.1));
}
.mode-card-name {
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--text-1);
}
.mode-card-desc {
    font-size: 0.78rem;
    color: var(--text-3);
    text-align: center;
    line-height: 1.4;
}

.mode-card-active-indicator {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--text-4);
    margin-top: 8px;
    transition: background var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.mode-card.mode-card--active .mode-card-active-indicator {
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
}
.mode-card-orders.mode-card--active .mode-card-active-indicator {
    background: #f59e0b;
    box-shadow: 0 0 8px #f59e0b;
}
.mode-card-admin.mode-card--active .mode-card-active-indicator {
    background: #8b5cf6;
    box-shadow: 0 0 8px #8b5cf6;
}

.mode-overlay-hint {
    margin-top: 20px;
    font-size: 0.75rem;
    color: var(--text-4);
}
.mode-overlay-hint kbd {
    background: var(--bg-raised);
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 0.7rem;
    color: var(--text-3);
}

/* ── App shell transitions between modes ── */
.app-shell, .orders-mode-shell, .admin-mode-shell {
    transition: opacity 200ms var(--ease), transform 200ms var(--ease);
    transform-origin: top center;
    will-change: opacity, transform;
}
.mode-exiting {
    opacity: 0 !important;
    transform: scale(0.985) translateY(-8px) !important;
    pointer-events: none !important;
}
@keyframes modeEnter {
    from { opacity: 0; transform: translateY(14px) scale(0.99); }
    to   { opacity: 1; transform: none; }
}
.mode-entering {
    animation: modeEnter 320ms var(--ease) both;
}

/* Sub-tab panel enter animation */
@keyframes panelEnter {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
.panel-entering {
    animation: panelEnter 200ms var(--ease) both;
}

/* ── ORDER mode theme overrides ── */
[data-mode="orders"] {
    --bg-app:        #0d0f14;
    --bg-base:       #111318;
    --bg-surface:    #181b22;
    --bg-raised:     #1e2128;
    --bg-overlay:    #252931;
    --accent:        #6366f1;
    --accent-hover:  #818cf8;
    --accent-dim:    rgba(99,102,241,0.12);
    --accent-text:   #a5b4fc;
    --border:        rgba(255,255,255,0.07);
    --border-strong: rgba(255,255,255,0.13);
}

/* ── Orders / Admin mode shells ── */
.orders-mode-shell,
.admin-mode-shell {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: var(--bg-app);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.orders-mode-shell[hidden],
.admin-mode-shell[hidden] { display: none; }

.admin-sub-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 24px;
    flex-wrap: wrap;
}
.admin-sub-tab {
    padding: 6px 14px;
    border-radius: var(--r-sm);
    font-size: 0.82rem;
    font-weight: 500;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-2);
    cursor: pointer;
    transition: all 0.15s;
}
.admin-sub-tab:hover { background: var(--surface-3); color: var(--text-1); }
.admin-sub-tab.active {
    background: var(--accent-dim);
    border-color: var(--accent);
    color: var(--accent);
}
.admin-tab-content { padding: 20px 24px; }
.orphaned-header { margin-bottom: 12px; }
.orphaned-title { font-size: 1rem; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.orphaned-sub { font-size: 0.8rem; color: var(--text-3); margin-top: 4px; }
.orphaned-row td { color: var(--text-2); }

/* Admin tile grid */
.admin-tiles-wrap { padding: 8px 0; }
.admin-tiles-section-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-3);
    margin-bottom: 14px;
}
.admin-tiles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}
.admin-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 22px 12px 18px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
    text-align: center;
}
.admin-tile:hover {
    background: var(--surface-3);
    border-color: var(--accent);
    transform: translateY(-2px);
}
.admin-tile-icon { font-size: 1.8rem; line-height: 1; }
.admin-tile-label { font-size: 0.83rem; font-weight: 600; color: var(--text-1); }

.orders-mode-header {
    height: 60px;
    display: flex;
    align-items: center;
    padding: 0 28px;
    border-bottom: 1px solid var(--border-strong);
    background: var(--bg-base);
    flex-shrink: 0;
}
.orders-mode-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
}

.orders-mode-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 28px 40px;
}

.orders-mode-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}
.orders-mode-placeholder-icon { font-size: 4rem; opacity: 0.4; }
.orders-mode-placeholder-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-1);
    letter-spacing: -0.02em;
}
.orders-mode-placeholder-text {
    font-size: 0.9rem;
    color: var(--text-3);
    max-width: 360px;
    line-height: 1.6;
}

/* ======================================================
   QA SECTION
   ====================================================== */

/* Summary bar */
.qa-summary-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px 16px;
    background: var(--bg-surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-lg);
    margin-bottom: 16px;
}
.qa-stat-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: var(--r);
    cursor: pointer;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    transition: background var(--fast), border-color var(--fast);
    user-select: none;
}
.qa-stat-pill:hover        { background: var(--bg-overlay); border-color: var(--border-strong); }
.qa-stat-pill .qa-stat-label { font-size: 0.78rem; color: var(--text-3); }
.qa-stat-pill .qa-stat-count { font-size: 0.9rem;  font-weight: 700; color: var(--text-1); }
.qa-stat-pill.pending_qa   { border-color: rgba(245,158,11,0.3); }
.qa-stat-pill.in_corrections { border-color: rgba(239,68,68,0.3); }
.qa-stat-pill.basing       { border-color: rgba(59,130,246,0.3); }
.qa-stat-pill.passed        { border-color: rgba(34,197,94,0.3); }
.qa-stat-pill.turd          { border-color: rgba(168,85,247,0.3); }
.qa-stat-pill.total         { border-color: var(--border-strong); }

/* Kanban board */
.qa-board {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 8px;
    align-items: flex-start;
    min-height: 260px;
}
.qa-column {
    flex: 0 0 260px;
    background: var(--bg-surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-lg);
    overflow: hidden;
}
.qa-column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-raised);
}
.qa-column-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-1);
    letter-spacing: -0.01em;
}
.qa-column-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    max-height: 70vh;
    overflow-y: auto;
}
.qa-col-empty {
    color: var(--text-4);
    font-size: 0.78rem;
    text-align: center;
    padding: 12px 0;
}

/* QA Card */
.qa-card {
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 11px 13px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    transition: border-color var(--fast), box-shadow var(--fast);
    animation: fadeIn var(--base) var(--ease);
}
.qa-card:hover { border-color: var(--border-strong); box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
.qa-card--turd {
    border-color: rgba(239,68,68,0.4);
    background: rgba(239,68,68,0.04);
}
.qa-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}
.qa-card-value {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-1);
    letter-spacing: -0.02em;
}
.qa-card-name {
    font-size: 0.82rem;
    color: var(--text-1);
    font-weight: 500;
    line-height: 1.4;
}
.qa-card-painter {
    font-size: 0.78rem;
    color: var(--text-3);
}
.qa-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 2px;
}
.qa-turd-badge { font-size: 0.68rem; letter-spacing: 0.04em; }
.qa-card-note {
    font-size: 0.78rem;
    color: var(--text-2);
    background: var(--bg-overlay);
    border-radius: var(--r-xs);
    padding: 4px 8px;
    line-height: 1.45;
    border-left: 2px solid var(--border-strong);
}
.qa-card-meta {
    font-size: 0.73rem;
    color: var(--text-3);
}
.qa-card-actions {
    display: flex;
    gap: 5px;
    margin-top: 4px;
    flex-wrap: wrap;
}

/* QA Status Pills (in modal) */
.qa-status-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}
.qa-status-pill {
    padding: 5px 12px;
    border-radius: var(--r);
    border: 1px solid var(--border-strong);
    background: var(--bg-raised);
    color: var(--text-2);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--fast), border-color var(--fast), color var(--fast);
}
.qa-status-pill:hover  { background: var(--bg-overlay); color: var(--text-1); }
.qa-status-pill.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.btn.active { background: var(--red-bg); color: var(--red); border-color: var(--red); }

/* Daily QA Check section */
.qa-daily-section {
    margin-top: 20px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-lg);
    overflow: hidden;
}
.qa-daily-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--bg-surface);
    border: none;
    color: var(--text-1);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    letter-spacing: -0.01em;
}
.qa-daily-toggle:hover { background: var(--bg-raised); }
.qa-daily-toggle svg   { transition: transform var(--fast); flex-shrink: 0; }
.qa-daily-month        { color: var(--text-3); font-size: 0.78rem; font-weight: 400; margin-left: 4px; }

.qa-daily-body {
    border-top: 1px solid var(--border);
    padding: 12px 16px;
    background: var(--bg-base);
}
.qa-daily-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-2);
}
.qa-daily-scroll { overflow-x: auto; }
.qa-daily-table {
    border-collapse: collapse;
    font-size: 0.76rem;
    min-width: 600px;
    width: 100%;
}
.qa-daily-table th,
.qa-daily-table td {
    border: 1px solid var(--border);
    padding: 0;
}
.qa-daily-table thead th {
    background: var(--bg-raised);
    color: var(--text-3);
    font-weight: 600;
    text-align: center;
    padding: 5px 4px;
    min-width: 28px;
}
.qa-day-th { min-width: 28px; width: 28px; }
.qa-day-painter {
    padding: 5px 10px;
    color: var(--text-2);
    white-space: nowrap;
    background: var(--bg-surface);
    font-weight: 500;
    min-width: 110px;
    position: sticky;
    left: 0;
    z-index: 1;
}
.qa-day-cell {
    width: 28px;
    min-width: 28px;
    height: 28px;
    text-align: center;
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 700;
    transition: background var(--fast);
    color: transparent; /* show via background color, text only as fallback */
}
.qa-day-cell:hover                 { background: var(--bg-overlay) !important; }
.qa-day-yes                        { background: rgba(34,197,94,0.25);  color: var(--green); }
.qa-day-yes_corrected              { background: rgba(245,158,11,0.25); color: var(--amber); }
.qa-day-absent                     { background: rgba(239,68,68,0.2);   color: var(--red);   }
.qa-day-pending                    { background: rgba(99,102,241,0.2);  color: var(--accent-text); }
.qa-day-corrections                { background: rgba(245,158,11,0.25); color: var(--amber); }
.qa-day-basing                     { background: rgba(59,130,246,0.25); color: var(--blue); }

/* ======================================================
   DAILY QA CHECK MODAL
   ====================================================== */
.daily-check-modal {
    max-width: 480px;
    width: 100%;
}
.daily-check-date {
    font-size: 0.78rem;
    color: var(--text-3);
    margin-top: 2px;
}

/* Progress */
.daily-check-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0 6px;
}
.daily-check-progress-bar {
    flex: 1;
    height: 4px;
    background: var(--bg-overlay);
    border-radius: 99px;
    overflow: hidden;
}
.daily-check-progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 99px;
    transition: width 0.3s var(--ease);
}
.daily-check-progress-label {
    font-size: 0.75rem;
    color: var(--text-3);
    white-space: nowrap;
    min-width: 40px;
    text-align: right;
}

/* Painter display */
.daily-check-painter {
    text-align: center;
    padding: 24px 0 20px;
}
.daily-check-painter-name {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--text-1);
    line-height: 1.1;
}
.daily-check-painter-num {
    font-size: 0.78rem;
    color: var(--text-3);
    margin-top: 5px;
}

/* Status buttons */
.daily-check-btns {
    display: flex;
    gap: 8px;
    justify-content: center;
    padding: 0 0 8px;
}
.dqc-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 72px;
    height: 72px;
    border-radius: var(--r-lg);
    border: 2px solid transparent;
    background: var(--bg-raised);
    cursor: pointer;
    transition: background var(--fast), border-color var(--fast), transform var(--fast);
    flex-shrink: 0;
}
.dqc-btn:hover { transform: translateY(-2px); }
.dqc-btn-label {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
}
.dqc-btn-title {
    font-size: 0.6rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.7;
}

/* Color variants */
.dqc-btn--green  { color: var(--green);        border-color: rgba(34,197,94,0.2); }
.dqc-btn--green:hover,  .dqc-btn--green.dqc-btn--active  { background: rgba(34,197,94,0.15);  border-color: var(--green); }
.dqc-btn--amber  { color: var(--amber);        border-color: rgba(245,158,11,0.2); }
.dqc-btn--amber:hover,  .dqc-btn--amber.dqc-btn--active  { background: rgba(245,158,11,0.15); border-color: var(--amber); }
.dqc-btn--blue   { color: var(--blue);         border-color: rgba(59,130,246,0.2); }
.dqc-btn--blue:hover,   .dqc-btn--blue.dqc-btn--active   { background: rgba(59,130,246,0.15); border-color: var(--blue);  }
.dqc-btn--red    { color: var(--red);          border-color: rgba(239,68,68,0.2); }
.dqc-btn--red:hover,    .dqc-btn--red.dqc-btn--active    { background: rgba(239,68,68,0.15);  border-color: var(--red);   }
.dqc-btn--purple { color: var(--purple);       border-color: rgba(168,85,247,0.2); }
.dqc-btn--purple:hover, .dqc-btn--purple.dqc-btn--active { background: rgba(168,85,247,0.15); border-color: var(--purple); }

.dqc-btn--active { transform: translateY(-2px); }

/* Footer */
.daily-check-footer {
    display: flex;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    margin-top: 8px;
}

/* Summary */
.daily-check-complete {
    padding: 8px 0 4px;
    text-align: center;
}
.daily-check-complete-icon {
    font-size: 2.4rem;
    color: var(--green);
    line-height: 1;
    margin-bottom: 8px;
}
.daily-check-complete-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-1);
    margin-bottom: 18px;
}
.daily-check-summary-grid {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.daily-check-summary-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 60px;
    padding: 10px 8px;
    border-radius: var(--r-md);
    background: var(--bg-raised);
}
.dqc-summary-label { font-size: 1.1rem; font-weight: 800; }
.dqc-summary-count { font-size: 1.4rem; font-weight: 700; line-height: 1; }
.dqc-summary-title { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.6; }

.dqc-summary--green  .dqc-summary-label, .dqc-summary--green  .dqc-summary-count { color: var(--green); }
.dqc-summary--amber  .dqc-summary-label, .dqc-summary--amber  .dqc-summary-count { color: var(--amber); }
.dqc-summary--blue   .dqc-summary-label, .dqc-summary--blue   .dqc-summary-count { color: var(--blue);  }
.dqc-summary--red    .dqc-summary-label, .dqc-summary--red    .dqc-summary-count { color: var(--red);   }
.dqc-summary--purple .dqc-summary-label, .dqc-summary--purple .dqc-summary-count { color: var(--purple);}

.daily-check-pending-list   { text-align: left; }
.daily-check-pending-label  { font-size: 0.78rem; color: var(--text-3); margin: 0 0 6px; }
.daily-check-pending-tags   { display: flex; flex-wrap: wrap; gap: 5px; }
.dqc-pending-tag {
    background: rgba(99,102,241,0.15);
    color: var(--accent-text);
    border-radius: var(--r-sm);
    padding: 3px 8px;
    font-size: 0.78rem;
    font-weight: 500;
}

/* Set picker sub-step */
.dqc-btn--sm {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}
.dqc-btn--sm .dqc-btn-label { font-size: 1rem; }
.daily-check-set-picker-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 0 10px;
}
.daily-check-set-picker-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-1);
}
.daily-check-set-pool {
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--text-3);
}
.daily-check-set-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-height: 300px;
    overflow-y: auto;
    padding-bottom: 4px;
}
.dqc-set-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    background: var(--bg-raised);
    text-align: left;
    cursor: pointer;
    transition: background var(--fast), border-color var(--fast);
    font-size: 0.88rem;
    color: var(--text-1);
    width: 100%;
}
.dqc-set-row:hover { background: var(--bg-overlay); border-color: var(--border-strong); }
.dqc-set-name { flex: 1; font-weight: 500; }
.dqc-set-qa-badge {
    font-size: 0.7rem;
    color: var(--text-3);
    background: var(--bg-base);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 1px 6px;
    white-space: nowrap;
}
.dqc-set-row--none {
    color: var(--text-3);
    border-style: dashed;
    font-style: italic;
    justify-content: center;
}

/* ── Daily QA Page (dedicated tab) ─────────────────────────────────── */
.dqp-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 0 14px;
}
.dqp-month-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-1);
    min-width: 130px;
    text-align: center;
}
.dqp-table-wrap {
    overflow-x: auto;
    overflow-y: auto;
    max-height: calc(100vh - 140px);
    border-radius: var(--r-md);
    border: 1px solid var(--border);
}
.dqp-table {
    min-width: 100%;
}
.dqp-painter-th {
    min-width: 160px;
    text-align: left;
    padding: 6px 10px;
}
.dqp-painter-td {
    white-space: nowrap;
    padding: 5px 10px;
    font-size: 0.82rem;
}
.dqp-today-th {
    background: rgba(99,102,241,0.18) !important;
    color: var(--accent-text) !important;
    font-weight: 700;
}
.dqp-today-col {
    background: rgba(99,102,241,0.07) !important;
}
.dqp-cell {
    cursor: default;
    user-select: none;
    transition: filter 0.1s;
}
/* Filled cells brighten on hover so users know they can double-click */
.dqp-cell[class*="qa-day-"]:hover {
    filter: brightness(1.3);
    cursor: zoom-in;
}
.dqp-cell:hover {
    outline: 1px solid var(--border-strong);
    outline-offset: -1px;
}
/* Empty cells get a subtle crosshair on hover to hint double-click to add */
.dqp-cell:not([class*="qa-day-"]):hover {
    background: rgba(255,255,255,0.04);
    cursor: cell;
}

/* ── Cell popover ───────────────────────────────────────────────────── */
.dqc-cell-popover {
    position: fixed;
    z-index: 9999;
    background: var(--bg-modal);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-lg);
    box-shadow: 0 8px 32px rgba(0,0,0,0.45);
    padding: 12px;
    min-width: 280px;
    max-width: 340px;
}
.dqcp-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.dqcp-header--sets {
    flex-wrap: wrap;
}
.dqcp-name {
    font-weight: 700;
    color: var(--text-1);
    font-size: 0.9rem;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dqcp-date {
    font-size: 0.78rem;
    color: var(--text-3);
    white-space: nowrap;
}
.dqcp-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-3);
    font-size: 0.9rem;
    padding: 2px 5px;
    border-radius: var(--r-sm);
    margin-left: auto;
    flex-shrink: 0;
}
.dqcp-close:hover { background: var(--bg-overlay); color: var(--text-1); }
.dqcp-back {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--accent-text);
    font-size: 0.8rem;
    padding: 2px 6px;
    border-radius: var(--r-sm);
    white-space: nowrap;
}
.dqcp-back:hover { background: var(--bg-overlay); }
.dqcp-set-heading {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-1);
    flex: 1;
}
.dqcp-pool {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-3);
}
.dqcp-status-btns {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.dqcp-status-btns .dqc-btn {
    flex: 1;
    min-width: 48px;
}
.dqcp-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}
.dqcp-set-chip {
    font-size: 0.75rem;
    color: var(--text-2);
    background: var(--bg-overlay);
    border-radius: var(--r-sm);
    padding: 2px 7px;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dqcp-clear-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    cursor: pointer;
    color: var(--red, #ef4444);
    font-size: 0.75rem;
    padding: 3px 10px;
    white-space: nowrap;
    margin-left: auto;
}
.dqcp-clear-btn:hover { background: rgba(239,68,68,0.1); border-color: var(--red, #ef4444); }
.dqcp-set-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-height: 260px;
    overflow-y: auto;
}

/* ── Orders Tab ─────────────────────────────────────────────────────── */

.ord-fallback-banner {
    padding: 8px 16px;
    background: var(--amber-bg, rgba(245,158,11,0.12));
    color: var(--amber, #d97706);
    border-bottom: 1px solid rgba(245,158,11,0.25);
    font-size: 0.82rem;
    font-weight: 500;
    text-align: center;
}

.ord-toolbar {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 0 10px;
    flex-wrap: wrap;
}
.ord-sheet-tabs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    flex: 1;
}
.ord-sheet-tab {
    padding: 5px 12px;
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    background: var(--bg-raised);
    color: var(--text-2);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--fast), color var(--fast), border-color var(--fast);
    white-space: nowrap;
}
.ord-sheet-tab:hover { background: var(--bg-overlay); color: var(--text-1); }
.ord-sheet-tab--active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.ord-toolbar-right {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}
.ord-search { width: 200px; }
.ord-status-filter { width: 140px; }

/* Budget bar */
.ord-budget-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    background: var(--bg-raised);
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    margin-bottom: 14px;
    font-size: 0.8rem;
}
.ord-budget-label  { color: var(--text-2); white-space: nowrap; }
.ord-budget-track  { flex: 1; height: 6px; background: var(--bg-overlay); border-radius: 3px; overflow: hidden; }
.ord-budget-fill   { height: 100%; background: var(--green, #22c55e); border-radius: 3px; transition: width 0.4s; }
.ord-budget-fill--warn { background: var(--amber, #f59e0b); }
.ord-budget-fill--over { background: var(--red,   #ef4444); }
.ord-budget-remain { color: var(--text-3); white-space: nowrap; font-size: 0.78rem; }

/* Sections */
.ord-section { margin-bottom: 32px; }
.ord-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--bg-raised);
    border-left: 3px solid var(--accent);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    margin-bottom: 8px;
}
.ord-section-name   { font-weight: 700; font-size: 0.92rem; color: var(--text-1); }
.ord-section-count  { font-size: 0.73rem; color: var(--text-3); background: var(--bg-overlay); padding: 1px 7px; border-radius: 10px; }
.ord-section-budget { font-size: 0.75rem; color: var(--text-3); margin-left: auto; }
.ord-section-total  { font-size: 0.82rem; font-weight: 700; color: var(--accent-text); }

/* Table */
.ord-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.ord-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}
.ord-table thead th {
    text-align: left;
    padding: 8px 12px;
    color: var(--text-3);
    font-weight: 700;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: var(--bg-raised);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    border-bottom: 2px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 1;
}
.ord-row { border-bottom: 1px solid var(--border); transition: background 0.1s; }
.ord-row:last-child { border-bottom: none; }
.ord-row:hover { background: var(--bg-overlay); }
.ord-td { padding: 9px 12px; vertical-align: middle; }

/* Column widths */
.ord-client {
    font-weight: 700;
    color: var(--text-1);
    white-space: nowrap;
    min-width: 130px;
    font-size: 0.85rem;
}
.ord-client--link {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
    transition: color 0.15s, text-decoration-color 0.15s;
}
.ord-client--link:hover {
    color: var(--accent);
    text-decoration-color: var(--accent);
}
.ord-desc {
    color: var(--text-2);
    max-width: 240px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}
.ord-samples { white-space: nowrap; }
.ord-instr  {
    color: var(--text-3);
    font-size: 0.73rem;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ord-amounts { white-space: nowrap; }
.ord-total     { font-weight: 700; white-space: nowrap; color: var(--text-1); font-size: 0.88rem; }
.ord-set-total { font-weight: 600; white-space: nowrap; color: var(--green, #22c55e); font-size: 0.88rem; }
.ord-status-cell { white-space: nowrap; }
.ord-painter {
    color: var(--text-3);
    font-size: 0.73rem;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Tier chips */
.ord-tier {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: var(--r-sm);
    margin-right: 3px;
    white-space: nowrap;
}
.ord-tier--std { background: rgba(99,102,241,0.18); color: var(--accent-text); border: 1px solid rgba(99,102,241,0.2); }
.ord-tier--shw { background: rgba(245,158,11,0.18); color: #d97706; border: 1px solid rgba(245,158,11,0.2); }
.ord-tier--exh { background: rgba(34,197,94,0.18);  color: #16a34a; border: 1px solid rgba(34,197,94,0.2); }

/* Tier colour legend */
.ord-th--tier { position: relative; white-space: nowrap; }
.tier-legend-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px; height: 18px;
    margin-left: 5px;
    background: rgba(148,163,184,0.3);
    border: 1px solid rgba(148,163,184,0.5);
    border-radius: 50%;
    font-size: 0.7rem;
    color: var(--text-2);
    cursor: pointer;
    vertical-align: middle;
    line-height: 1;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tier-legend-btn:hover, .tier-legend-btn--active {
    background: rgba(99,102,241,0.35);
    color: var(--text-1);
    border-color: rgba(99,102,241,0.6);
}
.tier-legend-popup {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 200;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    padding: 10px 14px;
    min-width: 200px;
}
.tier-legend {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tier-legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
}
.tier-legend-chip {
    flex-shrink: 0;
    min-width: 36px;
    text-align: center;
    font-size: 0.72rem !important;
}
.tier-legend-name {
    font-size: 0.82rem;
    color: var(--text-1);
    font-weight: 600;
}
/* Inline legend in client detail popup */
.cli-detail-sets .tier-legend {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px 16px;
    padding: 8px 10px;
    background: rgba(0,0,0,0.15);
    border-radius: var(--r-sm);
    margin-bottom: 10px;
}
.cli-detail-sets .tier-legend-item {
    gap: 6px;
}
.cli-detail-sets .tier-legend-text strong { font-size: 0.72rem; }
.cli-detail-sets .tier-legend-text span   { font-size: 0.64rem; }

/* Status badges */
.ord-status-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: var(--r-sm);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}
.ord-status--green  { background: rgba(34,197,94,0.15);  color: #16a34a; }
.ord-status--blue   { background: rgba(59,130,246,0.15); color: #2563eb; }
.ord-status--amber  { background: rgba(245,158,11,0.15); color: #d97706; }
.ord-status--purple { background: rgba(168,85,247,0.15); color: #9333ea; }
.ord-status--red    { background: rgba(239,68,68,0.15);  color: #dc2626; }
.ord-status--teal   { background: rgba(20,184,166,0.15); color: #0d9488; }
.ord-status--gray   { background: rgba(107,114,128,0.12); color: var(--text-3); }

/* Samples badges */
.ord-samples-badge {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: var(--r-sm);
    text-transform: uppercase;
}
.ord-samples--yes  { background: rgba(34,197,94,0.15);  color: #16a34a; }
.ord-samples--no   { background: rgba(239,68,68,0.12);  color: #dc2626; }
.ord-samples--done { background: rgba(99,102,241,0.15); color: var(--accent-text); }

.ord-loading, .ord-empty, .ord-error {
    padding: 40px;
    text-align: center;
    color: var(--text-3);
    font-size: 0.9rem;
}
.ord-error { color: #dc2626; }

/* ── Sets linking ───────────────────────────────────────────────────── */

/* Sets badge in the last column */
.ord-sets-cell { white-space: nowrap; }
.ord-sets-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: var(--r-sm);
    cursor: default;
}
.ord-sets-badge--linked {
    background: rgba(99,102,241,0.18);
    color: var(--accent-text);
    border: 1px solid rgba(99,102,241,0.2);
}
.ord-sets-badge--none {
    background: transparent;
    color: var(--text-3);
    font-weight: 400;
    font-size: 0.68rem;
}
.ord-sets-caret {
    display: inline-block;
    transition: transform 0.2s;
    transform: rotate(0deg);
    font-size: 0.8rem;
    line-height: 1;
}
.ord-sets-caret--open {
    transform: rotate(90deg);
}

/* Clickable rows that have sets */
.ord-row--has-sets { cursor: pointer; }
.ord-row--has-sets:hover { background: var(--bg-overlay) !important; }
.ord-row--expanded { background: var(--bg-raised) !important; border-bottom: none; }
.ord-row--expanded .ord-sets-badge--linked {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* Expanded sets panel */
.ord-sets-row { border-bottom: 1px solid var(--border); }
.ord-sets-panel {
    padding: 0 !important;
    background: var(--bg-base);
}
.ord-sets-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 16px 14px 28px;
    border-top: 1px solid var(--border);
    background: linear-gradient(to bottom, var(--bg-raised), var(--bg-base));
    border-left: 3px solid var(--accent);
}

/* Linked set mini-card */
.ord-set-card {
    background: var(--bg-overlay);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 10px 13px;
    min-width: 180px;
    max-width: 240px;
    flex: 1 1 180px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.ord-set-card:hover {
    border-color: rgba(99,102,241,0.4);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.ord-set-card-top {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: nowrap;
    overflow: hidden;
}
.ord-set-num {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-3);
    background: var(--bg-raised);
    padding: 2px 6px;
    border-radius: var(--r-sm);
    white-space: nowrap;
    flex-shrink: 0;
}
.ord-set-status {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: var(--r-sm);
    text-transform: capitalize;
    flex-shrink: 0;
}
.ord-set-quality {
    font-size: 0.65rem;
    color: var(--text-3);
    margin-left: auto;
    flex-shrink: 0;
}
.ord-set-month {
    font-size: 0.62rem;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    background: rgba(99,102,241,0.2);
    border: 1px solid rgba(99,102,241,0.25);
    border-radius: 4px;
    padding: 1px 5px;
    margin-left: auto;
    white-space: nowrap;
    flex-shrink: 0;
}
.ord-set-name {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-1);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ord-set-painter {
    font-size: 0.7rem;
    color: var(--text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ord-set-amount {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--green, #22c55e);
    margin-top: 2px;
}

/* ── Linked set context menu ─────────────────────────────────────────── */
.linked-set-menu {
    background: var(--bg-card, #1e2130);
    border: 1px solid var(--border, rgba(255,255,255,0.1));
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 200px;
}
.lsm-btn {
    background: none;
    border: none;
    color: var(--text-1, #f1f5f9);
    font-size: 0.82rem;
    padding: 7px 12px;
    text-align: left;
    border-radius: 5px;
    cursor: pointer;
    white-space: nowrap;
}
.lsm-btn:hover { background: var(--bg-raised, rgba(255,255,255,0.06)); }
.ord-set-card { cursor: default; }

/* ── Schedule linked inventory/building pills ─────────────────────── */
.ord-linked-pill { cursor: pointer; transition: opacity 0.15s, transform 0.1s; }
.ord-linked-pill:hover { opacity: 0.8; transform: scale(1.03); }
.ord-linked-pill--none { opacity: 0.4; }
.ord-inv-cell, .ord-bld-cell { white-space: nowrap; }

/* ── Schedule linked popup entries ───────────────────────────────── */
.ord-popup-entry {
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 0.75rem;
}
.ord-popup-entry:last-child { margin-bottom: 0; }
.ord-popup-row {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    padding: 4px 0;
    font-size: 0.875rem;
    border-bottom: 1px solid var(--border);
}
.ord-popup-row:last-child { border-bottom: none; }
.ord-popup-label {
    font-weight: 600;
    color: var(--text-3);
    min-width: 110px;
    flex-shrink: 0;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Audit Log ───────────────────────────────────────────────────── */
.audit-log-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-top: 12px;
}

.audit-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.audit-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg-surface);
    color: var(--text-2);
    font-weight: 600;
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.audit-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: top;
    color: var(--text-1);
}

.audit-table tr:last-child td { border-bottom: none; }
.audit-table tr:hover td { background: var(--bg-surface); }

.audit-action {
    font-family: 'Geist Mono', monospace;
    font-size: 0.76rem;
    background: var(--bg-raised);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    padding: 2px 6px;
    color: var(--accent-text);
    white-space: nowrap;
}

.audit-action.auth    { color: var(--blue,    #60a5fa); }
.audit-action.set     { color: var(--green,   #4ade80); }
.audit-action.painter { color: var(--amber,   #fbbf24); }
.audit-action.request { color: var(--purple,  #c084fc); }
.audit-action.qa      { color: var(--red,     #f87171); }
.audit-action.user    { color: var(--text-2); }

.audit-meta {
    font-size: 0.75rem;
    color: var(--text-3);
    max-width: 320px;
    word-break: break-word;
}

.audit-meta-change {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    flex-wrap: wrap;
}

.audit-meta-old { text-decoration: line-through; opacity: 0.6; }
.audit-meta-arrow { color: var(--text-4); }
.audit-meta-new { color: var(--text-1); }

.audit-time {
    font-size: 0.74rem;
    color: var(--text-3);
    white-space: nowrap;
}

.audit-pagination {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
    padding: 12px 0 4px;
    font-size: 0.82rem;
    color: var(--text-3);
}

/* =====================================================================
   PERSONALIZATION / PREFERENCES
   ===================================================================== */

/* Prefs modal sizing */
.modal-sm { max-width: 380px; }

/* Prefs modal body */
.prefs-body {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 20px 24px;
}

.prefs-section { display: flex; flex-direction: column; gap: 10px; }

.prefs-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-3);
}

/* Color swatches */
.prefs-swatches {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.pref-swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    background: var(--swatch);
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s;
    flex-shrink: 0;
}
.pref-swatch:hover { transform: scale(1.15); }
.pref-swatch.active {
    border-color: var(--text-1);
    transform: scale(1.1);
    box-shadow: 0 0 0 3px var(--accent-dim);
}

/* Background grid */
.pref-bg-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.pref-bg-swatch {
    aspect-ratio: 16 / 9;
    border-radius: var(--r);
    border: 2px solid transparent;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    transition: border-color 0.15s, transform 0.15s;
    background: var(--bg-raised);
}
.pref-bg-swatch:hover { border-color: var(--border-strong); transform: scale(1.04); }
.pref-bg-swatch.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-dim); }
.pref-bg-swatch--custom { border-style: dashed; }
.pref-bg-swatch--custom.active { border-style: solid; }

.pref-bg-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 4px;
    font-size: 0.62rem;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 60%);
    pointer-events: none;
}

.pref-bg-upload-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 2px;
}
.pref-bg-filename {
    font-size: 0.75rem;
    color: var(--text-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* has-bg — show body background through main content area */
body.has-bg {
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}
body.has-bg .main-content { background: transparent; }

/* Toggle rows */
.pref-toggle-row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 1px 12px;
    padding: 10px 14px;
    background: var(--bg-raised);
    border-radius: var(--r);
    border: 1px solid var(--border);
    cursor: pointer;
    user-select: none;
}
.pref-toggle-row:hover { border-color: var(--border-strong); }

.pref-toggle-label {
    font-size: 0.82rem;
    color: var(--text-1);
    grid-column: 1;
    grid-row: 1;
}
.pref-toggle-sub {
    font-size: 0.72rem;
    color: var(--text-3);
    grid-column: 1;
    grid-row: 2;
}

.pref-toggle-input { display: none; }

.pref-toggle-track {
    grid-column: 2;
    grid-row: 1 / 3;
    width: 36px;
    height: 20px;
    border-radius: 10px;
    background: var(--bg-overlay);
    border: 1px solid var(--border-strong);
    position: relative;
    transition: background 0.2s, border-color 0.2s;
    flex-shrink: 0;
}
.pref-toggle-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--text-3);
    transition: transform 0.2s, background 0.2s;
}
.pref-toggle-input:checked + .pref-toggle-track {
    background: var(--accent);
    border-color: var(--accent);
}
.pref-toggle-input:checked + .pref-toggle-track::after {
    transform: translateX(16px);
    background: #fff;
}

/* ── Compact Mode ─────────────────────────────────────────────────── */
body.compact .ticket-card { padding: 8px 10px; gap: 5px; }
body.compact .card        { padding: 10px 12px; }
body.compact .painter-card { padding: 10px 12px; gap: 6px; }
body.compact .set-row     { padding: 5px 10px; }
body.compact .nav-item    { padding: 6px 12px; }
body.compact .ticket-actions { margin-top: 6px; }

/* =====================================================================
   QA — PAINTER-GROUPED LAYOUT
   ===================================================================== */

/* Painter cards: two-column layout for Planned + Active only */
.painter-sets-two-col {
    grid-template-columns: 1fr 1fr;
}

/* QA / Graveyard painter-grouped board */
.qa-painter-board {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 0;
}

.qa-painter-section {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
}

.qa-painter-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--bg-raised);
    border-bottom: 1px solid var(--border);
}

.qa-painter-section-name {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--text-1);
    flex: 1;
}
.qa-painter-section-name .painter-link {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
}
.qa-painter-section-name .painter-link:hover { color: var(--accent); }

.qa-painter-section-rows {
    display: flex;
    flex-direction: column;
}

/* QA row — individual set entry */
.qa-row {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-subtle);
    transition: background 0.12s;
}
.qa-row:last-child { border-bottom: none; }
.qa-row:hover { background: var(--bg-raised); }
.qa-row--turd { border-left: 3px solid var(--red); }

.qa-row-main {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.qa-row-left {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.qa-row-value {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-1);
}

.qa-row-title {
    font-size: 0.82rem;
    color: var(--text-2);
    flex: 1;
    min-width: 0;
}

.qa-row-meta {
    font-size: 0.72rem;
    color: var(--text-3);
    white-space: nowrap;
}

.qa-row-note {
    font-size: 0.75rem;
    color: var(--text-3);
    font-style: italic;
    padding-left: 2px;
}

.qa-row-actions {
    display: flex;
    gap: 6px;
    margin-top: 2px;
}

/* Graveyard section subtle green tint on header */
.graveyard-section .qa-painter-section-header {
    border-left: 3px solid var(--green);
}

.graveyard-row { opacity: 0.85; }
.graveyard-row:hover { opacity: 1; background: var(--bg-raised); }
.graveyard-row.gy-has-pdf { cursor: default; }
.graveyard-row.gy-has-pdf:hover { border-left: 2px solid var(--accent); padding-left: calc(12px - 2px); }
.gy-pdf-badge { cursor: pointer; font-size: 0.8rem; opacity: 0.7; }
.gy-pdf-badge:hover { opacity: 1; }

/* =====================================================================
   ORDERS MODE — SUB-TABS (Schedule / Inventory)
   ===================================================================== */

.ord-sub-tabs {
    display: flex;
    gap: 4px;
    margin-left: 16px;
}

.ord-sub-tab {
    padding: 5px 14px;
    border-radius: var(--r-sm);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-2);
    transition: all 0.15s;
}
.ord-sub-tab:hover { background: var(--bg-raised); color: var(--text-1); }
.ord-sub-tab--active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* =====================================================================
   INVENTORY — TOOLBAR & STATS BAR
   ===================================================================== */

.inv-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    flex-wrap: wrap;
}

.inv-stats-bar {
    display: flex;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
    margin: 0 16px 16px;
}

.inv-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 8px;
    cursor: pointer;
    border-right: 1px solid var(--border);
    transition: background 0.12s;
}
.inv-stat:last-child { border-right: none; }
.inv-stat:hover { background: var(--bg-raised); }

.inv-stat-label {
    font-size: 0.7rem;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.inv-stat-count {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-1);
    margin-top: 2px;
}

.inv-stat--missing  .inv-stat-count { color: var(--red); }
.inv-stat--awaiting .inv-stat-count { color: var(--amber); }
.inv-stat--completed .inv-stat-count { color: var(--green); }

/* =====================================================================
   INVENTORY — ROW LIST
   ===================================================================== */

#invBody {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0 16px 16px;
}

.inv-row {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-left-width: 4px;
    border-radius: var(--r-md);
    margin-bottom: 6px;
    padding: 10px 14px;
    transition: box-shadow 0.12s;
}
.inv-row:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.25); }

/* Priority left-border colors */
.inv-row--normal     { border-left-color: var(--border); }
.inv-row--needs_soon { border-left-color: var(--amber); }
.inv-row--urgent     { border-left-color: var(--red); }

/* Missing items row tint */
.inv-row--missing { background: color-mix(in srgb, var(--red) 6%, var(--bg-surface)); }

.inv-row-main {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.inv-row-client {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.inv-row-client-name {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--text-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inv-row-order-desc {
    font-size: 0.8rem;
    color: var(--text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inv-row-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.inv-row-value {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--green);
    min-width: 60px;
    text-align: right;
}

.inv-row-date {
    font-size: 0.78rem;
    color: var(--text-3);
    min-width: 70px;
    text-align: center;
}

/* Inline status select */
.inv-status-select {
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 3px 8px;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    background: var(--bg-raised);
    color: var(--text-1);
    appearance: auto;
}
.inv-status-select:focus { outline: 2px solid var(--accent); }

.inv-status--not_started       { color: var(--text-3); }
.inv-status--awaiting_boxes    { color: var(--amber); }
.inv-status--completed         { color: var(--green); }
.inv-status--completed_missing { color: var(--red); }

.inv-row-actions {
    display: flex;
    gap: 4px;
}

.inv-row-notes {
    margin-top: 6px;
    font-size: 0.78rem;
    color: var(--text-3);
    font-style: italic;
    padding-left: 2px;
}
.inv-row-notes--missing { color: var(--red); font-style: normal; font-weight: 500; }

/* =====================================================================
   INVENTORY — MODAL: PRIORITY PILLS
   ===================================================================== */

.inv-priority-pills {
    display: flex;
    gap: 6px;
}

.inv-priority-pill {
    padding: 5px 14px;
    border-radius: var(--r-sm);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    color: var(--text-2);
    transition: all 0.12s;
}

.inv-priority-pill--normal.active    { background: var(--bg-raised); border-color: var(--accent); color: var(--accent); }
.inv-priority-pill--needs_soon.active{ background: color-mix(in srgb, var(--amber) 15%, transparent); border-color: var(--amber); color: var(--amber); }
.inv-priority-pill--urgent.active    { background: color-mix(in srgb, var(--red) 15%, transparent);   border-color: var(--red);   color: var(--red); }

/* =====================================================================
   PREMIUM UI POLISH — comprehensive upgrade
   ===================================================================== */

/* ── Subtle dot-grid background ──────────────────────────────────────── */
body {
    background-image: radial-gradient(rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 22px 22px;
}

/* ── Topbar: glass blur + live KPI strip ─────────────────────────────── */
.top-bar {
    background: rgba(17,17,19,0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    position: relative;   /* anchor for absolute KPI */
}

.topbar-kpi {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    pointer-events: none;
    white-space: nowrap;
}

.topbar-kpi-chip {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-3);
    padding: 2px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-raised);
    letter-spacing: 0.01em;
    transition: color var(--fast), border-color var(--fast);
}
.topbar-kpi-chip--amber { color: var(--amber); border-color: rgba(245,158,11,0.25); background: var(--amber-bg); }
.topbar-kpi-chip--green { color: var(--green); border-color: rgba(34,197,94,0.25);  background: var(--green-bg);  }
.topbar-kpi-chip--blue  { color: var(--blue);  border-color: rgba(59,130,246,0.25); background: rgba(59,130,246,0.08); }
.topbar-kpi-sep { font-size: 0.65rem; color: var(--text-4); }

/* ── Page title: subtle gradient ─────────────────────────────────────── */
.page-title {
    background: linear-gradient(135deg, var(--text-1) 60%, var(--text-3));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Painter cards: status-aware hover glow ──────────────────────────── */
.painter-card {
    transition: transform var(--base) var(--ease),
                box-shadow var(--base) var(--ease),
                border-color var(--base) var(--ease);
}
.painter-card:hover {
    transform: translateY(-3px);
    border-color: rgba(99,102,241,0.3);
    box-shadow: 0 8px 32px rgba(0,0,0,0.45), 0 0 0 1px rgba(99,102,241,0.12);
}
.painter-available:hover {
    border-color: rgba(34,197,94,0.4) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(34,197,94,0.12) !important;
}
.painter-partial:hover {
    border-color: rgba(251,191,36,0.4) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(251,191,36,0.12) !important;
}
.painter-idle:hover {
    border-color: rgba(239,68,68,0.4) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(239,68,68,0.12) !important;
}

/* ── Sidebar active item: ambient glow ───────────────────────────────── */
.nav-item.active {
    background: linear-gradient(90deg, rgba(99,102,241,0.12), transparent);
}
.nav-item.active::before {
    box-shadow: 2px 0 12px rgba(99,102,241,0.4);
}

/* ── Buttons: smoother press + primary shine effect ──────────────────── */
.btn {
    position: relative;
    overflow: hidden;
}
.btn.primary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, transparent 60%);
    pointer-events: none;
    border-radius: inherit;
}
.btn:active { transform: scale(0.95) translateY(1px) !important; }

/* ── Form inputs: premium focus glow ─────────────────────────────────── */
.form-input:focus {
    border-color: var(--accent);
    background: var(--bg-overlay);
    box-shadow: 0 0 0 3px var(--accent-dim), 0 1px 3px rgba(0,0,0,0.2);
    outline: none;
}

/* ── Toast: depleting progress bar ───────────────────────────────────── */
.toast {
    position: relative;
    overflow: hidden;
    max-width: 340px;
    padding: 11px 16px;
    font-size: 0.84rem;
    border-radius: var(--r-md);
    box-shadow: 0 12px 36px rgba(0,0,0,0.5);
}
.toast::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 100%;
    background: currentColor;
    opacity: 0.35;
    transform-origin: left;
    animation: toastProgress 3.4s linear forwards;
}
@keyframes toastProgress {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

/* ── Undo toast ──────────────────────────────────────────────────────── */
.toast.undo-toast {
    max-width: 380px;
    gap: 10px;
}
.toast.undo-toast::after {
    animation-duration: 15s;
}
.toast-msg {
    flex: 1;
    min-width: 0;
}
.toast-undo-btn {
    flex-shrink: 0;
    padding: 3px 11px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1.5px solid currentColor;
    border-radius: var(--r);
    background: transparent;
    color: inherit;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity var(--fast), background var(--fast);
    white-space: nowrap;
}
.toast-undo-btn:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.12);
}

/* ── Search modal: quick-jump grid ───────────────────────────────────── */
.search-quick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 5px;
    padding: 4px 2px;
}
.search-quick-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 10px 6px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: background var(--fast), border-color var(--fast), transform var(--fast);
}
.search-quick-tile:hover {
    background: var(--bg-overlay);
    border-color: var(--border-strong);
    transform: translateY(-1px);
}
.search-quick-tile-icon  { font-size: 1.1rem; line-height: 1; }
.search-quick-tile-label { font-size: 0.72rem; color: var(--text-2); font-weight: 500; white-space: nowrap; }

/* ── Search: result badge (amount, arrow etc.) ───────────────────────── */
.search-result-badge {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* ── Search: empty state ─────────────────────────────────────────────── */
.search-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 28px 16px;
    font-size: 0.84rem;
    color: var(--text-3);
}

/* ── Search: footer hints ────────────────────────────────────────────── */
.search-footer {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 16px;
    border-top: 1px solid var(--border);
    background: var(--bg-surface);
    flex-shrink: 0;
}
.search-hint {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 0.68rem;
    color: var(--text-4);
}
.search-hint kbd {
    font-size: 0.62rem;
    padding: 1px 4px;
    background: var(--bg-raised);
    border: 1px solid var(--border-strong);
    border-radius: 3px;
    color: var(--text-3);
    font-family: inherit;
}

/* ── kbd: universal polish ───────────────────────────────────────────── */
kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-family: inherit;
    font-weight: 500;
    padding: 2px 5px;
    background: var(--bg-raised);
    border: 1px solid var(--border-strong);
    border-bottom-width: 2px;
    border-radius: var(--r-xs);
    color: var(--text-2);
    line-height: 1.4;
    white-space: nowrap;
}

/* ── Keyboard shortcuts modal ────────────────────────────────────────── */
.shortcuts-modal {
    max-width: 500px;
    width: 100%;
}
.shortcuts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding-top: 4px;
}
.shortcuts-section-title {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 10px;
}
.shortcut-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    font-size: 0.82rem;
    color: var(--text-2);
    border-bottom: 1px solid var(--border-subtle);
}
.shortcut-row:last-child { border-bottom: none; }
.shortcut-keys {
    display: flex;
    gap: 3px;
    flex-shrink: 0;
    min-width: 80px;
}

/* ── Empty states: more expressive ───────────────────────────────────── */
.empty-state {
    border: 1px dashed var(--border-strong);
    border-radius: var(--r-lg);
    background: var(--bg-surface);
    margin: 8px 0;
}
.empty-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-raised);
    border-radius: 50%;
    font-size: 1.4rem;
    margin-bottom: 4px;
    opacity: 0.7;
}

/* ── Modal: smoother close + border shimmer ──────────────────────────── */
.modal {
    box-shadow: 0 0 0 1px rgba(255,255,255,0.06),
                0 24px 80px rgba(0,0,0,0.7),
                0 4px 16px rgba(99,102,241,0.06);
}

/* ── Stat cards: subtle gradient lift ────────────────────────────────── */
.stat-card {
    background: linear-gradient(160deg, var(--bg-surface) 0%, var(--bg-raised) 100%);
    border-color: var(--border-strong);
}
.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 24px rgba(0,0,0,0.35), 0 0 0 1px rgba(99,102,241,0.1);
}

/* ── Workload bar: animated fill on load ─────────────────────────────── */
.workload-bar-fill {
    transition: width var(--slow) var(--ease) !important;
}

/* ── Search icon: color ──────────────────────────────────────────────── */
.search-icon { color: var(--text-3); flex-shrink: 0; }

/* ── Responsive: hide KPI chips on narrow screens ────────────────────── */
@media (max-width: 900px) {
    .topbar-kpi { display: none; }
    .page-title { -webkit-text-fill-color: var(--text-1); }
}

/* =====================================================================
   3D CARD TILT EFFECT
   ===================================================================== */

/* Give the grid a perspective context so each card has depth */
.painter-card {
    position: relative;
}

/* JS owns the transform for 3D tilt — strip the CSS translateY so
   they don't compete with each other */
.painter-card:hover,
.painter-card.painter-available:hover,
.painter-card.painter-partial:hover,
.painter-card.painter-idle:hover {
    transform: none; /* JS overrides this via element.style.transform */
}

/* =====================================================================
   PAINTER CARD READABILITY & UX IMPROVEMENTS
   ===================================================================== */

/* ── Column headers: brighter & colour-coded ─────────────────────────── */
.sets-column-title {
    color: var(--text-3);          /* was text-4 — much more readable */
    font-size: 0.7rem;
}
.sets-column-count {
    color: var(--text-3);          /* was text-4 */
    background: var(--bg-overlay);
    padding: 1px 5px;
    border-radius: 999px;
    border: 1px solid var(--border);
}
/* Blue tint for "Planned" column header */
.sets-column:first-child .sets-column-title { color: var(--blue); }
/* Green tint for "Active" column header */
.sets-column:last-child  .sets-column-title { color: var(--green); }

/* ── Set card: status-based left border accent ───────────────────────── */
.set-card[data-status="planned"] { border-left: 2px solid rgba(59,130,246,0.5); }
.set-card[data-status="active"]  { border-left: 2px solid rgba(34,197,94,0.5);  }
.set-card[data-status="queued"]  { border-left: 2px solid rgba(251,191,36,0.8); background: rgba(251,191,36,0.04); }
.set-card[data-status="queued"]:hover { border-color: rgba(251,191,36,0.6); }

/* ── Queued badge — amber pill on planned-column cards ready to activate ── */
.set-queued-badge {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(251,191,36,0.18);
    color: rgb(180,130,0);
    border: 1px solid rgba(251,191,36,0.45);
    border-radius: 4px;
    padding: 1px 5px;
}

/* ── Set card: restructured header ──────────────────────────────────── */
.set-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}
.set-card-info { flex: 1; min-width: 0; }

/* Batch-print checkbox — hidden until painter card enters select mode */
.sc-print-check {
    display: none;
    flex-shrink: 0;
    margin-top: 3px;
    width: 14px;
    height: 14px;
    cursor: pointer;
    accent-color: var(--accent);
}
.painter-card--selecting .sc-print-check { display: block; }
.painter-card--selecting .set-card { cursor: default; }
.painter-card--selecting .set-card:has(.sc-print-check:checked) {
    outline: 2px solid var(--accent);
    border-radius: var(--r-sm);
}
.painter-print-select-btn.active,
.painter-card--selecting .painter-print-select-btn { background: var(--accent-dim); color: var(--accent-text); }

.set-card-name {
    font-size: 0.82rem;    /* slightly larger — was 0.8rem */
    font-weight: 600;
    color: var(--text-1);
    line-height: 1.3;
}

/* Set number: dim, client: bright — easy to distinguish */
.set-card-setnum { font-size: 0.7rem; color: var(--text-4); font-family: 'Geist Mono', monospace; }
.set-card-sep    { font-size: 0.7rem; color: var(--text-4); margin: 0 2px; }
.set-card-client { font-size: 0.72rem; color: var(--text-2); font-weight: 500; }
/* Figure count — subtle, monospace */
.set-card-figs   { font-size: 0.68rem; color: var(--text-3); font-family: 'Geist Mono', monospace; }

/* Top-right: amount stacked above due-month badge */
.set-card-top-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    flex-shrink: 0;
}

/* Amount: moved to top-right for immediate scannability */
.set-card-amount {
    font-size: 0.8rem;
    font-weight: 700;
    font-family: 'Geist Mono', monospace;
    color: var(--green);
    line-height: 1;
}

/* Due-month badge: sits under the amount in the top-right */
.set-card-month {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-2);
    background: var(--bg-overlay);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-xs);
    padding: 2px 6px;
    margin-left: 0;
    white-space: nowrap;
}

/* ── Set card: chips (lock + pdf) in top-right corner ────────────────── */
.set-card-chips {
    display: flex;
    justify-content: flex-end;
    gap: 3px;
    margin-top: 3px;
}
.sc-chip {
    font-size: 0.72rem;
    line-height: 1;
    opacity: 0.65;
    transition: opacity var(--fast);
    cursor: default;
    user-select: none;
}
.sc-chip:hover { opacity: 1; }
.sc-chip--pdf { cursor: pointer; }

/* ── Set card: actions overlay bottom-right on hover — zero layout cost ── */
.set-card-footer { display: none; }
.set-card-actions {
    position: absolute;
    bottom: 5px;
    right: 6px;
    display: flex;
    align-items: center;
    gap: 2px;
    opacity: 0;
    transition: opacity var(--fast);
}
.set-card:hover .set-card-actions { opacity: 1; }

/* ── Set card: padding increase for breathing room ───────────────────── */
.set-card { padding: 9px 11px; }

/* ── Workload bar: slightly taller & better contrast ─────────────────── */
.workload-bar-track { height: 4px; }

/* Planned label row: make the value more prominent */
.workload-bar-label {
    font-size: 0.74rem;
}
.workload-bar-label span:last-child {
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* ── Add-set button: dashed border CTA feel ──────────────────────────── */
.add-set-btn {
    width: 100%;
    margin-top: 5px;
    padding: 5px;
    font-size: 0.72rem;
    color: var(--text-4);
    background: none;
    border: 1px dashed var(--border-strong);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: color var(--fast), border-color var(--fast), background var(--fast);
    text-align: center;
}
.add-set-btn:hover {
    color: var(--text-2);
    border-color: var(--accent);
    background: var(--accent-dim);
}

/* ── Lock All toolbar button ─────────────────────────────────────────── */
.lock-all-btn {
    margin-left: auto;   /* push to right of toolbar */
    color: var(--text-3);
    border-color: var(--border-strong);
    font-size: 0.8rem;
    gap: 4px;
}
.lock-all-btn:hover { color: var(--amber); border-color: var(--amber); background: var(--amber-bg); }

/* =====================================================================
   DRAG CONFIRM DIALOG
   ===================================================================== */

#dragConfirmDialog {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
#dragConfirmDialog[hidden] { display: none; }
#dragConfirmBox {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px 24px;
    min-width: 280px;
    max-width: 380px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.35);
}
#dragConfirmMsg {
    font-size: 0.92rem;
    color: var(--text-1);
    margin-bottom: 16px;
    line-height: 1.5;
}
.drag-confirm-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* =====================================================================
   GLOBAL NAVIGATION: painter links + set PDF links
   ===================================================================== */

/* Painter name — clickable anywhere outside the painters tab */
.painter-link {
    cursor: pointer;
    border-bottom: 1px dotted var(--text-4);
    transition: color var(--fast), border-color var(--fast);
}
.painter-link:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* Set name — double-click to open PDF */
.set-pdf-link {
    cursor: pointer;
    transition: color var(--fast);
}
.set-pdf-link:hover {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Flash animation when a painter card is jumped to */
@keyframes painterCardFlash {
    0%   { outline: 2px solid transparent; outline-offset: 3px; }
    25%  { outline: 2px solid var(--accent); outline-offset: 3px; }
    100% { outline: 2px solid transparent; outline-offset: 3px; }
}
.painter-card-flash {
    animation: painterCardFlash 1s var(--ease) forwards !important;
}

/* =====================================================================
   PAINTER POPUP
   ===================================================================== */

.pp-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn var(--fast) ease both;
}
.pp-overlay[hidden] { display: none !important; }

.pp-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-xl);
    width: min(540px, 100%);
    max-height: 82vh;
    overflow-y: auto;
    padding: 24px;
    box-shadow: 0 32px 96px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.04);
    animation: popupIn 220ms var(--ease) both;
}

@keyframes popupIn {
    from { opacity: 0; transform: scale(0.90) translateY(16px); }
    to   { opacity: 1; transform: scale(1)    translateY(0); }
}
@keyframes popupOut {
    from { opacity: 1; transform: scale(1)    translateY(0); }
    to   { opacity: 0; transform: scale(0.92) translateY(10px); }
}
@keyframes fadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Header */
.pp-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.pp-name {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-1);
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-bottom: 8px;
}
.pp-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-close {
    flex-shrink: 0;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--text-3);
    font-size: 0.85rem;
    width: 30px;
    height: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--fast), color var(--fast);
    margin-top: 2px;
}
.pp-close:hover { background: var(--bg-overlay); color: var(--text-1); }

/* Progress bar */
.pp-progress { margin-bottom: 20px; }
.pp-progress-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
}
.pp-bar-track {
    height: 5px;
    background: var(--bg-raised);
    border-radius: 99px;
    overflow: hidden;
}
.pp-bar-fill {
    height: 100%;
    border-radius: 99px;
    transition: width 0.4s var(--ease);
}

/* Columns */
.pp-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.pp-col {}
.pp-col-title {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-3);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.pp-col-count {
    background: var(--bg-raised);
    color: var(--text-3);
    border-radius: 99px;
    padding: 1px 7px;
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}

/* Set rows inside popup */
.pp-set-row {
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 8px 10px;
    margin-bottom: 6px;
}
.pp-set-name {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-1);
    margin-bottom: 4px;
    line-height: 1.3;
}
.pp-set-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* =====================================================================
   MY WORK TAB — painter personal dashboard
   ===================================================================== */

.mw-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 28px 24px 60px;
}

/* Hero greeting */
.mw-hero {
    margin-bottom: 28px;
}
.mw-greeting {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--text-1);
    margin-bottom: 10px;
}
.mw-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.mw-stat {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 99px;
    border: 1px solid;
}
.mw-stat--active  { color: var(--green);  background: var(--green-bg);  border-color: rgba(34,197,94,0.25); }
.mw-stat--planned { color: var(--blue);   background: var(--blue-bg);   border-color: rgba(59,130,246,0.25); }
.mw-stat--qa      { color: var(--amber);  background: var(--amber-bg);  border-color: rgba(245,158,11,0.25); }
.mw-stat--unpaid  { color: var(--red);    background: var(--red-bg);    border-color: rgba(239,68,68,0.25); }

/* Two-column grid */
.mw-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 20px;
    align-items: start;
}
@media (max-width: 860px) {
    .mw-grid { grid-template-columns: 1fr; }
}

/* Sections */
.mw-section {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 16px 18px;
    margin-bottom: 16px;
}
.mw-section-title {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-3);
    margin-bottom: 12px;
}
.mw-empty {
    color: var(--text-4);
    font-size: 0.83rem;
    margin: 0;
    padding: 4px 0;
}
.mw-empty-active {
    text-align: center;
    padding: 28px 16px 20px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--r-md);
    margin-bottom: 4px;
}
.mw-empty-active-icon { font-size: 2rem; margin-bottom: 10px; }
.mw-empty-active-text { font-size: 0.92rem; color: var(--text-2); font-weight: 500; margin: 0 0 4px; }
.mw-empty-active-sub  { font-size: 0.78rem; color: var(--text-3); margin: 0; }

/* Active set cards */
.mw-set-card {
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 12px 14px;
    margin-bottom: 10px;
}
.mw-set-card--active {
    border-left: 3px solid var(--green);
}
.mw-set-card:last-child { margin-bottom: 0; }

.mw-set-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.mw-set-info { flex: 1; min-width: 0; }
.mw-set-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-1);
    line-height: 1.3;
    margin-bottom: 3px;
}
.mw-set-sub { font-size: 0.78rem; color: var(--text-3); }
.mw-set-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}
.mw-set-amount {
    font-size: 0.9rem;
    font-weight: 700;
    font-family: 'Geist Mono', monospace;
    color: var(--green);
}
.mw-set-actions {
    display: flex;
    gap: 6px;
    margin-top: 10px;
}

/* ── Painter note input (My Work active sets) ────────────────────────── */
.mw-painter-note-wrap {
    margin-top: 8px;
}
.mw-painter-note-input {
    width: 100%;
    box-sizing: border-box;
    font-size: 0.78rem;
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-1);
    color: var(--text-1);
    outline: none;
    transition: border-color var(--fast), box-shadow var(--fast);
}
.mw-painter-note-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-alpha, rgba(99,102,241,.15));
}
.mw-painter-note-input::placeholder { color: var(--text-3); }

/* ── Painter note callout (management set cards) ─────────────────────── */
.set-card-painter-note {
    font-size: 0.72rem;
    color: var(--text-2);
    background: var(--bg-1);
    border-left: 2px solid var(--amber, #f59e0b);
    border-radius: 0 4px 4px 0;
    padding: 3px 7px;
    margin: 4px 0 2px;
    word-break: break-word;
}

/* Progress bar inside active set card */
.mw-progress { margin-bottom: 4px; }
.mw-progress-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    margin-bottom: 5px;
}
.mw-bar-track {
    position: relative;
    height: 6px;
    background: var(--bg-overlay);
    border-radius: 99px;
    overflow: hidden;
    margin-bottom: 5px;
}
.mw-bar-expected {
    position: absolute;
    inset: 0;
    height: 100%;
    background: rgba(255,255,255,0.08);
    border-radius: 99px;
}
.mw-bar-actual {
    position: absolute;
    inset: 0;
    height: 100%;
    border-radius: 99px;
    transition: width 0.4s var(--ease);
}

/* Compact list (planned, requests, samples) */
.mw-list { display: flex; flex-direction: column; gap: 6px; }
.mw-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 10px;
    background: var(--bg-raised);
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
}
.mw-list-name {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-1);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mw-list-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.mw-list-amount {
    font-size: 0.78rem;
    font-weight: 600;
    font-family: 'Geist Mono', monospace;
    color: var(--green);
}

/* QA rows */
.mw-qa-row {
    padding: 10px 12px;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    margin-bottom: 6px;
}
.mw-qa-row:last-child { margin-bottom: 0; }
.mw-qa-row--turd { border-left: 3px solid var(--red); }
.mw-qa-top {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.mw-qa-name {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-1);
    margin-left: 2px;
}
.mw-qa-note {
    font-size: 0.78rem;
    color: var(--text-2);
    margin-top: 6px;
    padding: 6px 8px;
    background: var(--bg-overlay);
    border-radius: var(--r-xs);
    border-left: 2px solid var(--amber);
}

/* Earnings summary */
.mw-earnings-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: var(--bg-raised);
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
    margin-bottom: 8px;
}
.mw-earnings-amount {
    font-size: 1rem;
    font-weight: 700;
    font-family: 'Geist Mono', monospace;
    color: var(--amber);
}

/* =====================================================================
   BUILDING VIEW
   ===================================================================== */

/* Toolbar */
.bld-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.bld-toolbar .form-input {
    flex: 0 0 auto;
}
.bld-toolbar .ord-search {
    flex: 1 1 180px;
    min-width: 140px;
}

/* Table wrapper */
.bld-table-wrap {
    overflow-x: auto;
    padding: 0 0 40px;
}

.bld-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    min-width: 900px;
}

.bld-th {
    position: sticky;
    top: 0;
    background: var(--bg-sidebar);
    z-index: 2;
    padding: 8px 10px;
    text-align: left;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-3);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.bld-row {
    border-bottom: 1px solid var(--border-subtle, var(--border));
    transition: background 0.1s;
}
.bld-row:hover { background: var(--bg-raised); }
.bld-row[data-status="urgent"] {
    background: rgba(239,68,68,0.05);
}
.bld-row[data-status="urgent"]:hover {
    background: rgba(239,68,68,0.1);
}

.bld-td {
    padding: 6px 10px;
    vertical-align: middle;
    color: var(--text-1);
}
.bld-td--date    { color: var(--text-3); font-size: 0.76rem; white-space: nowrap; min-width: 80px; }
.bld-td--client  { font-weight: 500; min-width: 110px; white-space: nowrap; }
.bld-td--order   { min-width: 160px; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bld-td--builder { min-width: 100px; white-space: nowrap; color: var(--text-2); }
.bld-td--val     { font-family: 'Geist Mono', monospace; font-size: 0.78rem; white-space: nowrap; text-align: right; color: var(--text-2); min-width: 70px; }
.bld-td--std-val { color: var(--green); font-weight: 600; }
.bld-td--status  { min-width: 130px; }
.bld-td--notes   { min-width: 180px; }
.bld-td--due     { font-size: 0.78rem; white-space: nowrap; color: var(--text-3); min-width: 80px; }
.bld-td--actions { width: 60px; text-align: center; white-space: nowrap; }
.bld-td--actions .btn { opacity: 0; transition: opacity 0.15s; padding: 2px 6px; font-size: 0.7rem; }
.bld-row:hover .bld-td--actions .btn { opacity: 1; }
.bld-td--del     { width: 32px; text-align: center; }
.bld-td--del .btn { opacity: 0; transition: opacity 0.15s; padding: 2px 6px; font-size: 0.7rem; }
.bld-row:hover .bld-td--del .btn { opacity: 1; }
.bld-row--urgent { background: rgba(239,68,68,0.05); }
.bld-row--urgent:hover { background: rgba(239,68,68,0.1); }
.bld-totals-row { border-top: 2px solid var(--border-strong); background: var(--bg-raised); }
.bld-totals-label { font-size: 0.72rem; color: var(--text-3); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.bld-totals-val { color: var(--text-1) !important; font-weight: 600; }
.bld-totals-std { color: var(--accent-text) !important; }

/* Order info panel in Add Building Entry modal */
.bld-order-info {
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    overflow: hidden;
    font-size: 0.82rem;
}
.bld-order-info-header {
    display: grid;
    grid-template-columns: 1fr 80px 80px 80px;
    gap: 4px;
    padding: 4px 10px;
    background: var(--bg-raised);
    color: var(--text-3);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--border);
}
.bld-order-info-tier { text-align: right; }
.bld-order-info-row {
    display: grid;
    grid-template-columns: 1fr 80px 80px 80px;
    gap: 4px;
    padding: 6px 10px;
    align-items: center;
}
.bld-order-info-row--total {
    background: var(--bg-raised);
    color: var(--text-2);
}
.bld-order-info-row--remainder {
    background: rgba(99,102,241,0.12);
    color: #a5b4fc;
    font-weight: 600;
    border-top: 1px solid rgba(99,102,241,0.25);
}
.bld-order-info-label {
    font-weight: 500;
    color: var(--text-3);
    font-size: 0.78rem;
}
.bld-order-info-row--remainder .bld-order-info-label {
    color: #818cf8;
}
.bld-order-info-val {
    text-align: right;
    font-family: 'Geist Mono', monospace;
    font-size: 0.8rem;
}

/* Status select — color-coded like screenshot */
.bld-status-select {
    width: 100%;
    padding: 4px 8px;
    font-size: 0.79rem;
    font-weight: 600;
    border-radius: var(--r-sm);
    border: none;
    cursor: pointer;
    appearance: auto;
}
.bld-status-select:focus { outline: none; }

.bld-status--not-built {
    background: rgba(100,100,120,0.2);
    color: var(--text-2);
}
.bld-status--in-building {
    background: rgba(99,102,241,0.25);
    color: #a5b4fc;
}
.bld-status--built {
    background: rgba(34,197,94,0.25);
    color: #4ade80;
}
.bld-status--urgent {
    background: rgba(239,68,68,0.3);
    color: #f87171;
}
.bld-status--primed {
    background: rgba(20,184,166,0.2);
    color: #5eead4;
}
.bld-status--completed {
    background: rgba(99,102,241,0.2);
    color: #a5b4fc;
}
.bld-status--delivered {
    background: rgba(139,92,246,0.2);
    color: #c4b5fd;
}
.bld-row--completed {
    opacity: 0.65;
}
.bld-row--delivered {
    opacity: 0.5;
    text-decoration: line-through;
    text-decoration-color: var(--text-3);
}

/* ── Monthly Summary ─────────────────────────────────────────────── */
.mth-summary { display: flex; flex-direction: column; gap: 20px; }
.mth-stats-row { display: flex; gap: 12px; flex-wrap: wrap; }
.mth-stat-card {
    flex: 1; min-width: 120px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 14px 16px;
    text-align: center;
}
.mth-stat-val { font-size: 1.4rem; font-weight: 700; color: var(--text-1); }
.mth-stat-lbl { font-size: 0.74rem; color: var(--text-3); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
.mth-section { display: flex; flex-direction: column; gap: 8px; }
.mth-section-title { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-3); }
.mth-tier-table, .mth-painters-list { display: flex; flex-direction: column; gap: 6px; }
.mth-tier-row, .mth-painter-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    font-size: 0.85rem;
}
.mth-tier-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.mth-tier-label, .mth-painter-name { flex: 1; color: var(--text-1); }
.mth-tier-count { color: var(--text-3); font-size: 0.8rem; }
.mth-tier-val, .mth-painter-val { font-weight: 600; color: var(--accent); min-width: 70px; text-align: right; }
.mth-painter-rank { color: var(--text-3); font-size: 0.8rem; min-width: 24px; }
.mth-empty { color: var(--text-3); text-align: center; padding: 40px 0; font-size: 0.9rem; }
.mw-timeline-btn { opacity: 0.7; }
.mw-timeline-btn:hover { opacity: 1; }

/* Notes input */
.bld-notes-input {
    width: 100%;
    padding: 4px 8px;
    font-size: 0.79rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    color: var(--text-2);
    transition: border-color 0.15s, background 0.15s;
}
.bld-notes-input:hover {
    border-color: var(--border);
    background: var(--bg-overlay);
}
.bld-notes-input:focus {
    outline: none;
    border-color: var(--blue);
    background: var(--bg-overlay);
}
.bld-notes-input::placeholder { color: var(--text-4); }

/* ── Set Duration Badge ─────────────────────────────────────────────── */
.set-duration-badge {
    font-size: 0.65rem;
    padding: 1px 5px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

/* ── Fulfill Modal: Painter Workload ─────────────────────────────────── */
.fulfill-workload {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin: 4px 0 2px;
}
.fulfill-workload-chip {
    font-size: 0.73rem;
    padding: 2px 8px;
    background: var(--bg-overlay);
    border: 1px solid var(--border);
    border-radius: 20px;
    color: var(--text-2);
}
.fulfill-workload-chip.chip-over {
    background: rgba(239,68,68,0.1);
    border-color: rgba(239,68,68,0.3);
    color: var(--red);
}

/* ── Throughput Section ──────────────────────────────────────────────── */
.throughput-section {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}
.throughput-loading {
    color: var(--text-4);
    font-size: 0.82rem;
    padding: 12px 0;
}
.throughput-header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 14px;
}
.throughput-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-1);
}
.throughput-sub {
    font-size: 0.75rem;
    color: var(--text-4);
}
.throughput-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 500px;
}
.throughput-row {
    display: grid;
    grid-template-columns: 130px 1fr 60px 50px;
    align-items: center;
    gap: 10px;
}
.throughput-name {
    font-size: 0.8rem;
    color: var(--text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.throughput-bar-wrap {
    height: 6px;
    background: var(--bg-overlay);
    border-radius: 3px;
    overflow: hidden;
}
.throughput-bar {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s var(--ease);
}
.throughput-bar--fast  { background: var(--green); }
.throughput-bar--ok    { background: var(--blue); }
.throughput-bar--slow  { background: var(--amber); }
.throughput-days {
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    text-align: right;
}
.throughput-days--fast  { color: var(--green); }
.throughput-days--ok    { color: var(--blue); }
.throughput-days--slow  { color: var(--amber); }
.throughput-count {
    font-size: 0.72rem;
    color: var(--text-4);
    text-align: right;
}

/* ── Painter Popup: Notes ────────────────────────────────────────────── */
.pp-notes-section {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}
.pp-notes-header {
    margin-bottom: 8px;
}
.pp-notes-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
    max-height: 180px;
    overflow-y: auto;
}
.pp-note {
    background: var(--bg-overlay);
    border-radius: var(--r-sm);
    padding: 6px 10px;
}
.pp-note-content {
    font-size: 0.82rem;
    color: var(--text-1);
    line-height: 1.4;
    word-break: break-word;
}
.pp-note-meta {
    font-size: 0.7rem;
    color: var(--text-4);
    margin-top: 3px;
}
.pp-notes-empty {
    font-size: 0.78rem;
    color: var(--text-4);
    padding: 4px 0;
}
.pp-notes-form {
    display: flex;
    gap: 6px;
    align-items: center;
}
.pp-notes-input {
    flex: 1;
    font-size: 0.8rem;
    padding: 5px 9px;
}

/* ── Permissions Modal ───────────────────────────────────────────────── */
.perms-modal {
    width: min(760px, 96vw);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}
.modal-subtitle {
    font-size: 0.8rem;
    color: var(--text-3);
    margin-top: 2px;
}
.perms-body {
    overflow-y: auto;
    padding: 0 24px 8px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.perms-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.perms-section-title {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-3);
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border);
}
.perms-section-desc {
    font-size: 0.78rem;
    color: var(--text-4);
    margin: 0;
}
.perms-table {
    width: 100%;
    border-collapse: collapse;
}
.perms-th-label {
    text-align: left;
    font-size: 0.73rem;
    font-weight: 600;
    color: var(--text-3);
    padding: 6px 0 8px;
    width: 55%;
}
.perms-th-role {
    text-align: center;
    font-size: 0.73rem;
    font-weight: 600;
    color: var(--text-3);
    padding: 6px 0 8px;
    width: 15%;
}
.perms-row {
    border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.04));
}
.perms-row:last-child { border-bottom: none; }
.perms-td-label {
    padding: 10px 0;
    vertical-align: middle;
}
.perms-perm-name {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-1);
}
.perms-perm-desc {
    font-size: 0.72rem;
    color: var(--text-4);
    margin-top: 2px;
}
.perm-cell {
    text-align: center;
    vertical-align: middle;
    padding: 10px 0;
}

/* Toggle switch */
.perm-toggle {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}
.perm-toggle.perm-locked {
    cursor: default;
    opacity: 0.5;
}
.perm-checkbox {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.perm-toggle-track {
    display: inline-block;
    width: 34px;
    height: 18px;
    background: var(--bg-overlay);
    border: 1px solid var(--border-strong);
    border-radius: 9px;
    position: relative;
    transition: background 0.18s, border-color 0.18s;
}
.perm-checkbox:checked + .perm-toggle-track {
    background: var(--blue);
    border-color: var(--blue);
}
.perm-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    background: var(--text-3);
    border-radius: 50%;
    transition: transform 0.18s, background 0.18s;
}
.perm-checkbox:checked + .perm-toggle-track .perm-toggle-thumb {
    transform: translateX(16px);
    background: #fff;
}

/* ── Duplicates Tab ──────────────────────────────────────────────────── */
#duplicatesContainer {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 4px 0;
}

.dup-group {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    animation: fadeSlideIn 0.18s ease both;
    animation-delay: calc(var(--i, 0) * 0.04s);
}

.dup-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--bg-raised);
    border-bottom: 1px solid var(--border);
    gap: 10px;
}

.dup-group-title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}

.dup-group-client {
    font-weight: 600;
    color: var(--text-1);
    font-size: 0.875rem;
}

.dup-group-order {
    color: var(--text-2);
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dup-group-amount {
    color: var(--accent-text);
    font-size: 0.8rem;
    font-family: var(--font-mono, monospace);
}

.dup-group-sep {
    color: var(--text-4);
    font-size: 0.75rem;
}

.dup-group-sets {
    display: flex;
    flex-direction: column;
}

.dup-set-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--border-subtle);
    flex-wrap: wrap;
}

.dup-set-row:last-child {
    border-bottom: none;
}

.dup-set-row.dup-set-unassigned {
    background: rgba(245, 158, 11, 0.04);
}

.dup-set-info {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
}

.dup-set-name {
    font-size: 0.85rem;
    color: var(--text-1);
    font-weight: 500;
}

.dup-set-painter {
    font-size: 0.8rem;
    color: var(--text-2);
}

.dup-set-badges {
    display: flex;
    align-items: center;
    gap: 5px;
}

.dup-set-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

/* =====================================================================
   DENSITY SYSTEM — 3-way toggle: spacious / comfortable / compact
   ===================================================================== */
:root {
    --card-pad: 14px;
    --grid-gap: 12px;
}
body[data-density="spacious"] {
    --card-pad: 22px;
    --grid-gap: 18px;
}
body[data-density="compact"] {
    --card-pad: 8px;
    --grid-gap: 8px;
}
/* Apply density vars to cards that previously had hard-coded padding */
.all-set-card  { padding: var(--card-pad); }
.ticket-card   { padding: var(--card-pad) calc(var(--card-pad) + 2px); }
.sets-grid     { gap: var(--grid-gap); }
.requests-board { gap: var(--grid-gap); }

/* Density segmented control in prefs panel */
.pref-density-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    gap: 12px;
}
.pref-density-btns {
    display: flex;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    overflow: hidden;
    flex-shrink: 0;
}
.pref-density-btn {
    background: transparent;
    border: none;
    border-right: 1px solid var(--border-strong);
    padding: 5px 14px;
    font-size: 0.8rem;
    font-family: inherit;
    color: var(--text-2);
    cursor: pointer;
    transition: background var(--fast), color var(--fast);
    white-space: nowrap;
}
.pref-density-btn:last-child { border-right: none; }
.pref-density-btn:hover      { background: var(--bg-overlay); color: var(--text-1); }
.pref-density-btn.active     { background: var(--accent); color: #fff; font-weight: 500; }

/* =====================================================================
   COLUMN VISIBILITY POPOVER (All Sets)
   ===================================================================== */
.col-vis-wrap { position: relative; }
.col-vis-popover {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--bg-raised);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    padding: 6px 0;
    min-width: 170px;
    z-index: 400;
    box-shadow: 0 8px 28px rgba(0,0,0,0.45);
    animation: fadeInDown 120ms var(--ease) forwards;
}
.col-vis-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    cursor: pointer;
    font-size: 0.82rem;
    color: var(--text-2);
    user-select: none;
    transition: background var(--fast), color var(--fast);
}
.col-vis-item:hover { background: var(--bg-overlay); color: var(--text-1); }
.col-vis-item input[type="checkbox"] {
    accent-color: var(--accent);
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
/* Hide all-set-card fields based on visibility classes */
.all-set-card.hide-setnum  .asc-setnum  { display: none; }
.all-set-card.hide-client  .asc-client  { display: none; }
.all-set-card.hide-quality .asc-quality { display: none; }
.all-set-card.hide-figs    .asc-figs    { display: none; }
.all-set-card.hide-status  .asc-status  { display: none; }
.all-set-card.hide-amount  .all-set-amount { display: none; }
.all-set-card.hide-pdf     .asc-pdf     { display: none; }

/* =====================================================================
   BULK ACTION TOOLBAR
   ===================================================================== */
.bulk-toolbar {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%) translateY(90px);
    background: var(--bg-raised);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-lg);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 500;
    box-shadow: 0 16px 48px rgba(0,0,0,0.55);
    transition: transform var(--base) var(--ease), opacity var(--base) var(--ease);
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
}
.bulk-toolbar.visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
}
.bulk-count {
    font-size: 0.82rem;
    color: var(--text-2);
    padding-right: 10px;
    border-right: 1px solid var(--border);
    min-width: 70px;
}
/* Card selection checkbox */
.asc-check {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    opacity: 0;
    cursor: pointer;
    z-index: 2;
    transition: opacity var(--fast);
}
.all-set-card:hover .asc-check,
.all-set-card.asc-selected .asc-check { opacity: 1; }
.all-set-card.asc-selected {
    outline: 2px solid var(--accent);
    outline-offset: -1px;
    background: var(--accent-dim);
}

/* =====================================================================
   QUICK-ACTION CHIPS (Request Cards)
   ===================================================================== */
.ticket-chip-row {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin: 7px 0 3px;
}
.ticket-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 500;
    border: 1px solid transparent;
    cursor: pointer;
    background: none;
    font-family: inherit;
    transition: background var(--fast), border-color var(--fast), transform 80ms;
    line-height: 1.5;
}
.ticket-chip:active { transform: scale(0.95); }
.ticket-chip.tc-approve {
    background: var(--green-bg);
    border-color: rgba(34,197,94,0.3);
    color: var(--green);
}
.ticket-chip.tc-approve:hover { background: rgba(34,197,94,0.2); border-color: rgba(34,197,94,0.5); }
.ticket-chip.tc-reject {
    background: var(--red-bg);
    border-color: rgba(239,68,68,0.3);
    color: var(--red);
}
.ticket-chip.tc-reject:hover { background: rgba(239,68,68,0.2); border-color: rgba(239,68,68,0.5); }
.ticket-chip.tc-assign {
    background: var(--accent-dim);
    border-color: rgba(99,102,241,0.3);
    color: var(--accent-text);
}
.ticket-chip.tc-assign:hover { background: rgba(99,102,241,0.2); border-color: rgba(99,102,241,0.5); }
.ticket-chip.tc-sample {
    background: var(--amber-bg);
    border-color: rgba(245,158,11,0.3);
    color: var(--amber);
}
.ticket-chip.tc-sample:hover { background: rgba(245,158,11,0.2); border-color: rgba(245,158,11,0.5); }
.ticket-chip.tc-edit {
    background: rgba(99,102,241,0.08);
    border-color: rgba(99,102,241,0.25);
    color: var(--accent);
}
.ticket-chip.tc-edit:hover { background: rgba(99,102,241,0.18); border-color: rgba(99,102,241,0.5); }
.ticket-chip.tc-history {
    background: transparent;
    border-color: rgba(148,163,184,0.25);
    color: var(--text-3);
    font-size: 0.7rem;
}
.ticket-chip.tc-history:hover { background: rgba(148,163,184,0.1); color: var(--text-1); }
.req-history-panel {
    margin-top: 8px;
    padding: 8px 10px;
    border-top: 1px solid var(--border);
    background: rgba(0,0,0,0.12);
    border-radius: 6px;
    font-size: 0.75rem;
}
.req-hist-entry {
    padding: 6px 0;
    border-bottom: 1px solid rgba(148,163,184,0.1);
}
.req-hist-entry:last-child { border-bottom: none; }
.req-hist-meta { color: var(--text-3); margin-bottom: 3px; font-size: 0.7rem; }
.req-hist-change { color: var(--text-2); margin: 2px 0; }
.req-hist-field { color: var(--text-3); font-weight: 600; margin-right: 4px; }
.req-hist-old { text-decoration: line-through; color: var(--danger); }
.req-hist-new { color: var(--success); }
.req-hist-empty { color: var(--text-3); font-style: italic; padding: 4px 0; }

/* ── Request Notes ─────────────────────────────────────────────────── */
.req-notes-panel {
    margin-top: 8px;
    border-top: 1px solid var(--border);
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.req-notes-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-height: 180px;
    overflow-y: auto;
    scrollbar-width: thin;
}
.req-note-row {
    background: var(--bg-raised);
    border-radius: 7px;
    padding: 7px 10px;
}
.req-note-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 3px;
}
.req-note-author { font-size: 0.73rem; font-weight: 700; color: var(--accent); }
.req-note-time   { font-size: 0.68rem; color: var(--text-3); }
.req-note-content { font-size: 0.81rem; color: var(--text-1); line-height: 1.4; word-break: break-word; }
.req-note-empty, .req-notes-loading {
    font-size: 0.78rem;
    color: var(--text-3);
    padding: 4px 0;
    text-align: center;
}
.req-note-form {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.req-note-anon-input,
.req-note-input {
    background: var(--bg-input, var(--bg-raised));
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 5px 9px;
    font-size: 0.81rem;
    color: var(--text-1);
    width: 100%;
    box-sizing: border-box;
    transition: border-color var(--fast);
}
.req-note-anon-input:focus,
.req-note-input:focus { outline: none; border-color: var(--accent); }
.req-note-input-row { display: flex; gap: 5px; align-items: center; }
.req-note-input-row .req-note-input { flex: 1; width: auto; }

/* =====================================================================
   PAINTER AVAILABILITY
   ===================================================================== */
.avail-badge {
    font-size: 0.67rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.avail-limited {
    background: var(--amber-bg);
    color: var(--amber);
    border-color: rgba(245,158,11,0.3);
}
.avail-away {
    background: var(--red-bg);
    color: var(--red);
    border-color: rgba(239,68,68,0.3);
}

/* Dim away painters slightly */
.painter-card:has(.avail-away) {
    opacity: 0.72;
}

/* Dormant availability badge */
.avail-dormant {
    background: var(--bg-surface-2, #2a2a3a);
    color: var(--text-3);
    border-color: rgba(156,163,175,0.2);
}
.painter-card.painter-dormant {
    opacity: 0.45;
    filter: grayscale(0.6);
}
.avail-dormant-btn { color: var(--text-3) !important; }

/* ── Urgency badges ──────────────────────────────────────────────── */
.urg-overdue {
    background: rgba(239,68,68,0.15);
    color: var(--red);
    border-color: rgba(239,68,68,0.3);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.urg-now {
    background: rgba(245,158,11,0.14);
    color: var(--amber);
    border-color: rgba(245,158,11,0.28);
    font-size: 0.65rem;
    font-weight: 600;
}
.urg-next {
    background: rgba(234,179,8,0.1);
    color: #ca8a04;
    border-color: rgba(234,179,8,0.25);
    font-size: 0.65rem;
}
.urg-header-badge { font-size: 0.68rem; }
.set-card-month--urgent { color: var(--amber); font-weight: 600; }

/* Pulse on overdue set cards */
.set-card:has(.urg-overdue) {
    border-color: rgba(239,68,68,0.35);
    box-shadow: 0 0 0 1px rgba(239,68,68,0.15) inset;
}

/* ── URGENT flag ─────────────────────────────────────────────────── */
.urg-flag {
    background: rgba(239,68,68,0.18);
    color: var(--red);
    border: 1px solid rgba(239,68,68,0.45);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    animation: urgPulse 2s ease-in-out infinite;
}
@keyframes urgPulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
    50%      { box-shadow: 0 0 0 4px rgba(239,68,68,0.2); }
}
.set-card--urgent {
    border-color: rgba(239,68,68,0.5) !important;
    box-shadow: 0 0 0 1px rgba(239,68,68,0.2) inset;
}

/* Urgent nav badge */
.urgent-nav-badge { background: var(--red) !important; color: #fff !important; }

/* Urgent checkbox in modals */
.urgent-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(239,68,68,0.06);
    border: 1px solid rgba(239,68,68,0.25);
    border-radius: var(--r-sm);
    cursor: pointer;
    user-select: none;
}
.urgent-checkbox { accent-color: var(--red); width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.urgent-checkbox-text { font-size: 0.85rem; font-weight: 700; color: var(--red); }
.urgent-checkbox-hint { font-size: 0.72rem; color: var(--text-3); margin-top: 2px; display: block; }

/* ── Urgent tab ──────────────────────────────────────────────────── */
.urgent-tab-header {
    padding: 20px 20px 8px;
}
.urgent-tab-title {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--red);
    letter-spacing: -0.01em;
}
.urgent-tab-subtitle {
    font-size: 0.78rem;
    color: var(--text-3);
    margin-top: 4px;
}
.urgent-sets-grid { padding: 0 16px 24px; }
.urgent-sets-list { display: flex; flex-direction: column; gap: 12px; }
.urgent-group { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.urgent-group-header {
    padding: 8px 14px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-2);
    background: var(--bg-raised);
    border-bottom: 1px solid var(--border);
}
.urgent-group-sets { display: flex; flex-direction: column; }
.urgent-set-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-subtle);
}
.urgent-set-row:last-child { border-bottom: none; }
.urgent-set-info { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.urgent-set-name { font-size: 0.85rem; font-weight: 600; color: var(--text-1); }
.urgent-set-client { font-size: 0.75rem; color: var(--text-3); }
.urgent-set-setnum { font-size: 0.72rem; color: var(--text-4); }
.urgent-set-meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.urgent-set-amount { font-size: 0.8rem; font-weight: 700; color: var(--green); }
.urgent-set-due { font-size: 0.72rem; color: var(--text-3); }
.urgent-set-actions { display: flex; gap: 5px; flex-shrink: 0; }

/* ── TV urgent view ──────────────────────────────────────────────── */
.tv-urgent-empty {
    text-align: center;
    padding: 60px 20px;
    font-size: 1.2rem;
    color: var(--text-3);
}
.tv-urgent-header {
    text-align: center;
    padding: 20px 0 16px;
}
.tv-urgent-title {
    font-size: 2rem;
    font-weight: 900;
    color: var(--red);
    letter-spacing: 0.05em;
    animation: urgPulse 2s ease-in-out infinite;
}
.tv-urgent-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 24px;
    max-width: 900px;
    margin: 0 auto;
}
.tv-urgent-row {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(239,68,68,0.08);
    border: 1px solid rgba(239,68,68,0.3);
    border-radius: var(--r);
    padding: 16px 20px;
}
.tv-urgent-flag { font-size: 1.5rem; flex-shrink: 0; }
.tv-urgent-row-info { flex: 1; min-width: 0; }
.tv-urgent-row-name { font-size: 1.1rem; font-weight: 700; color: var(--text-1); }
.tv-urgent-row-sub  { font-size: 0.85rem; color: var(--text-3); margin-top: 2px; }
.tv-urgent-row-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.tv-urgent-status { font-size: 0.75rem; font-weight: 800; color: var(--red); letter-spacing: 0.06em; }
.tv-urgent-amount { font-size: 0.9rem; font-weight: 700; color: var(--green); }

/* ── Daily pace tracker (My Work) ───────────────────────────────── */
.mw-pace {
    background: var(--bg-surface-2, rgba(255,255,255,0.03));
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 12px 14px;
    margin-bottom: 12px;
}
.mw-pace-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
    flex-wrap: wrap;
    gap: 4px;
}
.mw-pace-month { font-size: 0.78rem; color: var(--text-2); font-weight: 600; }
.mw-pace-status { font-size: 0.75rem; font-weight: 600; }
.mw-pace-track {
    height: 4px;
    background: var(--border);
    border-radius: 99px;
    margin-bottom: 10px;
    overflow: hidden;
}
.mw-pace-fill--elapsed {
    height: 100%;
    background: var(--blue);
    border-radius: 99px;
    transition: width 0.4s ease;
}
.mw-pace-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.mw-pace-stat { text-align: center; }
.mw-pace-stat-val {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    font-family: 'Geist Mono', monospace;
    color: var(--text-1);
    line-height: 1.2;
}
.mw-pace-stat-lbl {
    display: block;
    font-size: 0.67rem;
    color: var(--text-3);
    margin-top: 2px;
}

/* ── Capacity Planning table ─────────────────────────────────────── */
.cap-wrap { padding: 20px 24px; }
.cap-header { margin-bottom: 20px; }
.cap-title { font-size: 1.15rem; font-weight: 700; margin: 0 0 4px; }
.cap-subtitle { font-size: 0.78rem; color: var(--text-3); margin: 0 0 12px; }
.cap-legend { display: flex; gap: 6px; flex-wrap: wrap; }
.cap-leg {
    font-size: 0.68rem; font-weight: 600; padding: 2px 8px;
    border-radius: 4px; border: 1px solid transparent;
}
.cap-table-wrap { overflow-x: auto; }
.cap-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}
.cap-table th {
    text-align: left;
    padding: 8px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.cap-month-hdr { text-align: center; min-width: 110px; }
.cap-month-current { color: var(--text-1) !important; }
.cap-now-pill {
    background: var(--blue);
    color: #fff;
    font-size: 0.6rem;
    padding: 1px 5px;
    border-radius: 99px;
    vertical-align: middle;
    margin-left: 3px;
}
.cap-table tbody tr { border-bottom: 1px solid var(--border); }
.cap-table tbody tr:hover { background: var(--bg-surface-2, rgba(255,255,255,0.02)); }
.cap-name {
    padding: 8px 10px;
    white-space: nowrap;
    min-width: 140px;
}
.cap-painter-name { font-weight: 600; display: block; }
.cap-painter-target { font-size: 0.7rem; color: var(--text-3); }
.cap-name-hdr { min-width: 140px; }
.cap-cell {
    padding: 6px 8px;
    text-align: center;
    vertical-align: top;
}
.cap-cell-pct { font-weight: 700; font-size: 0.82rem; line-height: 1.2; }
.cap-cell-val { font-size: 0.7rem; color: var(--text-3); margin-top: 1px; }
.cap-cell-count { opacity: 0.7; }
.cap-bar { height: 3px; background: var(--border); border-radius: 99px; margin-top: 4px; overflow: hidden; }
.cap-bar-fill { height: 100%; border-radius: 99px; background: currentColor; }

/* Cell colour states */
.cap-empty  { color: var(--text-3); }
.cap-empty  .cap-bar-fill { background: var(--border); }
.cap-low    { color: var(--text-2); }
.cap-low    .cap-bar-fill { background: var(--text-3); }
.cap-medium { color: var(--blue); }
.cap-medium .cap-bar-fill { background: var(--blue); }
.cap-near   { color: var(--amber); }
.cap-near   .cap-bar-fill { background: var(--amber); }
.cap-full   { color: var(--green); }
.cap-full   .cap-bar-fill { background: var(--green); }
.cap-over   { color: var(--red); }
.cap-over   .cap-bar-fill { background: var(--red); }

/* Legend matches */
.cap-leg.cap-empty  { background: rgba(156,163,175,0.1); color: var(--text-3); border-color: var(--border); }
.cap-leg.cap-low    { background: rgba(156,163,175,0.12); color: var(--text-2); border-color: var(--border); }
.cap-leg.cap-medium { background: rgba(59,130,246,0.1); color: var(--blue); border-color: rgba(59,130,246,0.2); }
.cap-leg.cap-near   { background: rgba(245,158,11,0.1); color: var(--amber); border-color: rgba(245,158,11,0.2); }
.cap-leg.cap-full   { background: rgba(34,197,94,0.1); color: var(--green); border-color: rgba(34,197,94,0.2); }
.cap-leg.cap-over   { background: rgba(239,68,68,0.1); color: var(--red); border-color: rgba(239,68,68,0.2); }

.cap-summary-row { background: var(--bg-surface-2, rgba(255,255,255,0.03)); }
.cap-summary-label { font-weight: 700; font-size: 0.8rem; color: var(--text-2); }
.cap-summary { border-top: 1px solid var(--border); }
.cap-summary .cap-cell-pct { font-size: 0.78rem; }

/* =====================================================================
   DAILY REVIEW TAB
   ===================================================================== */
.dr-wrap { display: flex; flex-direction: column; height: 100%; }

.dr-toolbar {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px; border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.dr-month-title { font-weight: 700; font-size: 0.92rem; min-width: 130px; text-align: center; }
.dr-legend { display: flex; gap: 6px; margin-left: auto; }
.dr-leg {
    font-size: 0.68rem; font-weight: 600; padding: 2px 8px;
    border-radius: 4px; border: 1px solid transparent;
}
.dr-leg--pass    { background: rgba(34,197,94,0.12);  color: var(--green); border-color: rgba(34,197,94,0.25); }
.dr-leg--partial { background: rgba(245,158,11,0.12); color: var(--amber); border-color: rgba(245,158,11,0.25); }
.dr-leg--fail    { background: rgba(239,68,68,0.12);  color: var(--red);   border-color: rgba(239,68,68,0.25); }
.dr-leg--absent  { background: var(--bg-surface-2, rgba(255,255,255,0.04)); color: var(--text-3); border-color: var(--border); }

.dr-table-wrap {
    overflow: auto;
    flex: 1;
}

.dr-table {
    border-collapse: collapse;
    font-size: 0.78rem;
    white-space: nowrap;
    min-width: 100%;
}
.dr-table th {
    position: sticky; top: 0; z-index: 2;
    background: var(--bg-surface);
    padding: 6px 8px;
    text-align: center;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--border);
}
.dr-th-name { text-align: left; min-width: 130px; max-width: 160px; }
.dr-th-months { min-width: 36px; }
.dr-th-stat   { min-width: 70px; }
.dr-day-hdr   { min-width: 44px; }

/* Frozen first 6 columns */
.dr-table th:nth-child(-n+6),
.dr-table td:nth-child(-n+6) {
    position: sticky;
    background: var(--bg-surface);
    z-index: 1;
}
.dr-table th:nth-child(1), .dr-table td:nth-child(1) { left: 0; min-width: 130px; max-width: 160px; }
.dr-table th:nth-child(2), .dr-table td:nth-child(2) { left: 130px; }
.dr-table th:nth-child(3), .dr-table td:nth-child(3) { left: 166px; }
.dr-table th:nth-child(4), .dr-table td:nth-child(4) { left: 236px; }
.dr-table th:nth-child(5), .dr-table td:nth-child(5) { left: 306px; }
.dr-table th:nth-child(6), .dr-table td:nth-child(6) { left: 376px; border-right: 2px solid var(--border); }

.dr-cat-row td { background: var(--bg-surface-2, rgba(255,255,255,0.04)); }
.dr-cat-label {
    padding: 6px 10px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.dr-cat-row--uncategorized .dr-cat-label { color: var(--text-3); opacity: 0.5; }

.dr-painter-row:hover td { background: var(--bg-surface-2, rgba(255,255,255,0.02)) !important; }
.dr-painter-row { border-bottom: 1px solid var(--border); }

.dr-name {
    padding: 5px 8px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dr-months, .dr-target, .dr-daily {
    padding: 5px 6px;
    text-align: center;
    color: var(--text-3);
    font-size: 0.73rem;
}
.dr-stat {
    padding: 5px 6px;
    text-align: center;
    font-family: 'Geist Mono', monospace;
    font-size: 0.73rem;
}
.dr-stat--good { color: var(--green); font-weight: 600; }
.dr-stat--warn { color: var(--red); }

/* Day cells */
.dr-cell {
    padding: 3px 2px;
    text-align: center;
    cursor: pointer;
    transition: background 0.1s;
    min-width: 44px;
    vertical-align: middle;
}
.dr-cell:hover { filter: brightness(1.15); }
.dr-cell-val { font-size: 0.68rem; font-weight: 600; display: block; }

.dr-cell--pass    { background: rgba(34,197,94,0.18);  color: var(--green); }
.dr-cell--partial { background: rgba(245,158,11,0.18); color: var(--amber); }
.dr-cell--fail    { background: rgba(239,68,68,0.18);  color: var(--red);   }
.dr-cell--absent  { background: rgba(156,163,175,0.1); color: var(--text-3); }
.dr-cell--empty   { cursor: pointer; }
.dr-cell--empty:hover { background: var(--bg-surface-2, rgba(255,255,255,0.05)); }
.dr-cell--future  { cursor: default !important; opacity: 0.3; }
.dr-cell--future:hover { background: transparent; }
.dr-cell--wknd    { background: rgba(0,0,0,0.06); cursor: default; }
.dr-today-col     { outline: 2px solid var(--blue) !important; outline-offset: -1px; }
.dr-wknd-col      { background: rgba(0,0,0,0.06); }

/* Popover */
.dr-popover-overlay {
    position: fixed; inset: 0; z-index: 1000;
    background: transparent;
}
.dr-popover {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1001;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    box-shadow: 0 8px 32px rgba(0,0,0,0.35);
    width: 340px;
    padding: 16px;
}
.dr-popover-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 14px;
}
.dr-popover-title { font-weight: 700; font-size: 0.88rem; }
.dr-status-row { display: flex; gap: 6px; flex-wrap: wrap; }
.dr-status-btn { flex: 1; min-width: 60px; }
.dr-status-btn--active[data-status="pass"]    { background: rgba(34,197,94,0.18);  color: var(--green); border-color: rgba(34,197,94,0.4); }
.dr-status-btn--active[data-status="partial"] { background: rgba(245,158,11,0.18); color: var(--amber); border-color: rgba(245,158,11,0.4); }
.dr-status-btn--active[data-status="fail"]    { background: rgba(239,68,68,0.18);  color: var(--red);   border-color: rgba(239,68,68,0.4); }
.dr-status-btn--active[data-status="absent"]  { background: rgba(156,163,175,0.12); color: var(--text-2); border-color: var(--border-strong); }
.dr-popover-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* =====================================================================
   AT-RISK BANNER (Painters tab)
   ===================================================================== */
.at-risk-banner {
    border: 1px solid rgba(239,68,68,0.22);
    border-radius: var(--r);
    background: rgba(239,68,68,0.04);
    margin-bottom: 16px;
    overflow: hidden;
}
.at-risk-banner-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    cursor: pointer;
    user-select: none;
    transition: background var(--fast);
}
.at-risk-banner-header:hover { background: rgba(239,68,68,0.07); }
.at-risk-banner-icon  { font-size: 0.85rem; color: var(--red); }
.at-risk-banner-title { font-weight: 600; font-size: 0.82rem; color: var(--red); flex: 1; }
.at-risk-banner-count {
    font-size: 0.7rem;
    font-weight: 700;
    background: var(--red);
    color: #fff;
    padding: 1px 7px;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
}
.at-risk-banner-chevron { color: var(--text-3); font-size: 0.78rem; transition: transform var(--fast); }
.at-risk-banner-body { padding: 0 14px 12px; }

/* =====================================================================
   MY WORK — ENHANCED
   ===================================================================== */

/* Hero top row: greeting + availability side by side */
.mw-hero-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.mw-greeting {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--text-1);
    margin-bottom: 0;
}

/* Availability toggle */
.mw-avail-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}
.mw-avail-label {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.mw-avail-toggle {
    display: flex;
    gap: 5px;
}
.mw-avail-btn {
    padding: 4px 12px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
    background: var(--bg-overlay);
    color: var(--text-3);
    cursor: pointer;
    font-size: 0.76rem;
    font-weight: 500;
    font-family: inherit;
    transition: all var(--fast);
    white-space: nowrap;
}
.mw-avail-btn:hover { border-color: var(--border-strong); color: var(--text-2); }
.mw-avail-btn.active--available { background: var(--green-bg);  border-color: rgba(34,197,94,0.35);  color: var(--green); }
.mw-avail-btn.active--limited   { background: var(--amber-bg);  border-color: rgba(245,158,11,0.35); color: var(--amber); }
.mw-avail-btn.active--away      { background: var(--red-bg);    border-color: rgba(239,68,68,0.35);  color: var(--red);   }
.mw-avail-btn.active--dormant   { background: var(--bg-elevated); border-color: var(--border-strong); color: var(--text-3); }

/* Monthly target bar */
.mw-target {
    background: var(--bg-overlay);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 10px 12px;
    margin-bottom: 14px;
}
.mw-target-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.mw-target-label { font-size: 0.74rem; color: var(--text-3); font-weight: 500; }
.mw-target-pct   { font-size: 0.78rem; font-weight: 700; }
.mw-target-bar {
    height: 5px;
    background: var(--bg-base);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 6px;
}
.mw-target-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s var(--ease);
}
.mw-target-sub {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    color: var(--text-3);
}

/* Queued / Ready badge in stat pills */
.mw-stat--queued {
    color: rgb(180,130,0);
    background: rgba(251,191,36,0.12);
    border-color: rgba(251,191,36,0.35);
}

/* Queued list rows */
.mw-list-row--queued {
    background: rgba(251,191,36,0.04);
    border-left: 2px solid rgba(251,191,36,0.5);
    border-radius: var(--r-xs);
    padding-left: 8px;
}

/* Section accent for "Ready to Activate" */
.mw-section--queued {
    border-color: rgba(251,191,36,0.2);
    background: rgba(251,191,36,0.03);
}
.mw-section--queued .mw-section-title { color: rgb(180,130,0); }

/* List meta text helpers */
.mw-list-client { color: var(--text-3); font-size: 0.78rem; }
.mw-list-figs   { color: var(--text-4); font-size: 0.74rem; }

/* Progress footer */
.mw-progress-days   { font-weight: 600; }
.mw-progress-log    { color: var(--text-3); font-size: 0.76rem; }
.mw-progress-footer { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.mw-progress-detail { color: var(--text-3); font-size: 0.72rem; }

/* QA note/corrections polish */
.mw-qa-corrections { color: var(--text-3); font-size: 0.74rem; margin-top: 4px; }
.mw-qa-note { color: var(--text-2); font-size: 0.78rem; margin-top: 4px; font-style: italic; }

/* Paid-up empty state */
.mw-empty--paid { color: var(--green); }
.mw-empty-inline { color: var(--text-3); font-size: 0.82rem; }

/* Earnings label */
.mw-earnings-label { color: var(--text-2); }

/* New request button */
.mw-new-request-btn { margin-top: 8px; width: 100%; }
.mw-new-request-btn--painter {
    background: #fff;
    color: #111;
    border-color: #fff;
    font-weight: 600;
}
.mw-new-request-btn--painter:hover { background: #e5e5e5; border-color: #e5e5e5; }

/* ── 3. RESPONSIVE OVERRIDES AT ≤600px ─────────────────────────────── */

@media (max-width: 600px) {

    /* ── Scrollbar hiding ── */
    ::-webkit-scrollbar {
        display: none;
    }
    * {
        scrollbar-width: none;
    }

    /* ── Sidebar + overlay handled by the consolidated 768px block above ── */

    /* ── Shell layout: column so main fills the screen ── */
    body {
        overflow: hidden;
    }
    .app-shell {
        flex-direction: column;
        height: 100dvh;
        overflow: hidden;
    }

    /* Main content fills full height (no bottom nav) */
    .main-content {
        flex: 1 1 0;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        margin-left: 0 !important;
        width: 100% !important;
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* Tab contents */
    .tab-content {
        padding: 12px 12px 0;
    }

    /* ── Topbar: keep only toggle + title, hide action buttons ── */
    .top-bar {
        padding: 0 12px;
        height: 52px;
        flex-shrink: 0;
    }
    .top-bar-right .btn:not(#modeBtn):not(#searchBtn) {
        display: none;
    }
    /* Hide add-painter button from topbar on mobile */
    #addPainterBtn {
        display: none !important;
    }
    /* Keep mode/search buttons but make them compact */
    #modeBtn,
    #searchBtn {
        padding: 6px 8px;
        font-size: 0.8rem;
    }

    /* ── Painter grid: single column ── */
    .painters-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    /* ── Painter card: disable hover scale on touch ── */
    .painter-card:hover {
        transform: none;
    }

    /* ── Painter card 3-column sets → stacked vertically ── */
    .painter-sets {
        grid-template-columns: 1fr !important;
        gap: 0;
    }

    .sets-column {
        border-left: none !important;
        border-top: 1px solid var(--border-subtle);
        padding: 8px 10px;
    }

    .sets-column:first-child {
        border-top: 1px solid var(--border-subtle);
    }

    /* Sticky column label on mobile */
    .sets-column-header {
        position: sticky;
        top: 0;
        background: var(--bg-surface);
        z-index: 1;
        padding: 6px 0 6px;
        margin-bottom: 6px;
    }

    /* ── All-Sets grid: single column ── */
    .sets-grid {
        grid-template-columns: 1fr !important;
    }

    /* ── Modals: bottom-sheet style ── */
    .modal-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .modal,
    .modal.modal-lg {
        max-width: 100%;
        width: 100%;
        max-height: 90dvh;
        border-radius: 20px 20px 0 0;
        animation: mobileSheetIn var(--base) var(--ease);
        margin: 0;
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }

    @keyframes mobileSheetIn {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Drag handle for modals */
    .modal-header::before {
        content: '';
        display: block;
        width: 36px;
        height: 4px;
        background: var(--border-strong);
        border-radius: 2px;
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
    }

    .modal {
        position: relative;
        padding-top: 28px;
    }

    /* ── Forms: stack rows & prevent iOS zoom ── */
    .form-row,
    .form-row-3 {
        flex-direction: column !important;
        gap: 8px;
    }

    .form-input,
    .form-input[type="text"],
    .form-input[type="number"],
    .form-input[type="email"],
    .form-input[type="password"],
    .form-input[type="date"],
    .form-input[type="url"],
    select.form-input,
    textarea.form-input {
        font-size: 16px !important; /* CRITICAL: prevents iOS Safari zoom */
    }

    /* ── My Work tab ── */
    .mw-wrap {
        padding: 14px 12px 16px;
        max-width: 100%;
    }

    .mw-hero {
        margin-bottom: 16px;
    }

    .mw-greeting {
        font-size: 1.2rem;
    }

    .mw-stats {
        flex-wrap: wrap;
        gap: 6px;
    }

    .mw-grid {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }

    .mw-section {
        padding: 12px 14px;
        margin-bottom: 10px;
    }

    /* ── Requests board: no fixed height, normal scroll ── */
    #tab-requests.active {
        height: auto !important;
        overflow: visible !important;
        flex-direction: column;
        gap: 0;
    }

    .req-split-top {
        overflow-y: visible;
        max-height: none;
        border-bottom: 2px solid var(--border-strong);
        padding-bottom: 12px;
    }

    .req-split-bottom {
        overflow-y: visible;
        max-height: none;
        min-height: auto;
    }

    .requests-board {
        flex-direction: column;
    }

    /* ── QA board: single column ── */
    .qa-board {
        flex-direction: column;
        overflow-x: visible;
    }

    .qa-column {
        flex: 1 1 100%;
        width: 100%;
    }

    .qa-column-body {
        max-height: none;
    }

    /* ── Toast: top of screen on mobile ── */
    .toast-container {
        top: 60px !important;
        bottom: auto !important;
        right: 12px;
        left: 12px;
    }


    /* ── Touch targets ── */
    .btn {
        min-height: 44px;
        padding: 10px 14px;
    }

    .btn.btn-sm {
        min-height: 38px;
        padding: 7px 10px;
    }

    .nav-item {
        min-height: 48px;
    }

    /* ── Prevent horizontal overflow ── */
    .tab-content,
    .painters-grid,
    .requests-board,
    .qa-board,
    .mw-wrap {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* ── Painter card: no horizontal overflow ── */
    .painter-card {
        overflow: hidden;
    }

    /* ── Set card action buttons: larger tap area ── */
    .set-card-actions .btn,
    .set-actions .btn {
        min-height: 40px;
    }

    /* ── Samples board: single column ── */
    .samples-board {
        grid-template-columns: 1fr !important;
    }

    /* ── Performance & Payments: single column ── */
    .performance-grid,
    .payments-grid {
        grid-template-columns: 1fr !important;
    }

    /* ── Duplicate list: single column ── */
    .dup-grid,
    .duplicates-grid {
        grid-template-columns: 1fr !important;
    }

    /* ── Daily QA tab ── */
    .dq-grid,
    .dq-table-wrap {
        overflow-x: auto;
    }

    /* ── Graveyard: single column ── */
    .graveyard-grid {
        grid-template-columns: 1fr !important;
    }

    /* ── Overview stats: 2 columns ── */
    .overview-stats {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px;
    }

    /* ── Remove hover scale on all cards (touch devices) ── */
    .set-card:hover,
    .qa-card:hover {
        transform: none;
    }
}

/* ── 4. TOUCH-DEVICE OVERRIDES (pointer: coarse) ────────────────────── */

@media (pointer: coarse) {
    /* Ensure all interactive elements meet 44px minimum */
    .btn {
        min-height: 44px;
    }

    .btn.btn-sm {
        min-height: 38px;
    }

    .nav-item {
        min-height: 48px;
    }

    /* Checkbox & radio targets */
    input[type="checkbox"],
    input[type="radio"] {
        min-width: 20px;
        min-height: 20px;
    }

    /* Prevent double-tap zoom on buttons */
    .btn,
    .nav-item {
        touch-action: manipulation;
    }

    /* Remove hover states on touch (they stick after tap) */
    .painter-card:hover {
        transform: none;
        box-shadow: none;
    }

    .painter-card.painter-available:hover {
        box-shadow: inset 0 3px 0 0 rgba(34, 197, 94, 0.75);
    }

    .painter-card.painter-partial:hover {
        box-shadow: inset 0 3px 0 0 rgba(251, 191, 36, 0.75);
    }

    .painter-card.painter-idle:hover {
        box-shadow: inset 0 3px 0 0 rgba(239, 68, 68, 0.75);
    }

    .painter-card.painter-overloaded:hover {
        box-shadow: inset 0 3px 0 0 rgba(239, 68, 68, 0.75);
    }
}

/* ── 5. SAFE-AREA & NOTCH SUPPORT ───────────────────────────────────── */

/* Ensure main content clears the iPhone home indicator */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    @media (max-width: 600px) {
        .main-content {
            padding-bottom: env(safe-area-inset-bottom);
        }
    }
}

/* ── 6. EXTRA SMALL PHONES (≤400px) ────────────────────────────────── */

@media (max-width: 400px) {
    .mbn-label {
        font-size: 0.54rem;
    }

    .mbn-icon {
        font-size: 1.1rem;
    }

    .top-bar {
        padding: 0 8px;
    }

    .tab-content {
        padding: 8px 8px 0;
    }

    .painter-card {
        border-radius: var(--r);
    }

    .overview-stats {
        grid-template-columns: 1fr !important;
    }

    .mw-greeting {
        font-size: 1.05rem;
    }
}

/* ── END MOBILE OPTIMISATION ─────────────────────────────────────────── */

/* =====================================================================
   CLIENTS VIEW
   ===================================================================== */

/* ── Toolbar ─────────────────────────────────────────────────────────── */
.cli-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px 10px;
    flex-wrap: wrap;
}
.cli-toolbar .ord-search { flex: 1; min-width: 180px; }
.cli-filter { width: 160px; }

/* ── Stats bar ───────────────────────────────────────────────────────── */
.cli-stats-bar {
    display: flex;
    gap: 2px;
    padding: 0 20px 14px;
}
.cli-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 18px;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: background var(--fast);
    min-width: 80px;
}
.cli-stat:hover { background: var(--bg-surface); }
.cli-stat-num   { font-size: 1.3rem; font-weight: 700; line-height: 1; }
.cli-stat-label { font-size: 0.7rem; color: var(--text-3); white-space: nowrap; }

/* ── Empty state ─────────────────────────────────────────────────────── */
.cli-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 80px 24px;
    color: var(--text-3);
    text-align: center;
}
.cli-empty-icon { font-size: 2.5rem; }

/* ── Card grid ───────────────────────────────────────────────────────── */
.cli-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
    padding: 0 20px 24px;
}

.cli-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 14px 16px;
    cursor: pointer;
    transition: border-color var(--fast), box-shadow var(--fast), transform var(--fast);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cli-card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.cli-card-top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.cli-card-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 700;
    flex-shrink: 0;
}
.cli-card-info    { flex: 1; min-width: 0; }
.cli-card-name    { font-size: 0.95rem; font-weight: 600; color: var(--text-1); }
.cli-card-contact { font-size: 0.78rem; color: var(--text-2); margin-top: 2px; }
.cli-card-country { font-size: 0.75rem; color: var(--text-3); margin-top: 2px; }

.cli-card-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity var(--fast);
}
.cli-card:hover .cli-card-actions { opacity: 1; }

.cli-card-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.cli-meta-item {
    font-size: 0.78rem;
    color: var(--text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cli-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 8px;
    border-top: 1px solid var(--border-subtle);
}
.cli-sets-badge {
    font-size: 0.75rem;
    padding: 3px 8px;
    border-radius: 20px;
    background: var(--bg-raised);
    color: var(--text-3);
    border: 1px solid var(--border);
}
.cli-sets-badge--active {
    background: rgba(99,102,241,.12);
    color: var(--accent);
    border-color: var(--accent);
}
.cli-card-note { font-size: 0.85rem; cursor: default; }

/* ── Detail panel ────────────────────────────────────────────────────── */
.cli-detail-loading {
    padding: 40px;
    text-align: center;
    color: var(--text-3);
}
.cli-detail-wrap {
    padding: 4px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.cli-detail-header {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.cli-detail-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    flex-shrink: 0;
}
.cli-detail-meta  { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.cli-detail-row   { font-size: 0.88rem; color: var(--text-2); }
.cli-detail-row a { color: var(--accent); text-decoration: none; }
.cli-detail-row a:hover { text-decoration: underline; }
.cli-detail-notes { font-style: italic; color: var(--text-3); }

.cli-detail-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.cli-detail-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
}
.cli-detail-stat-num   { font-size: 1.4rem; font-weight: 700; line-height: 1; }
.cli-detail-stat-label { font-size: 0.7rem; color: var(--text-3); }

.cli-detail-section-title {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 8px;
}
.cli-detail-set-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
    background: var(--bg-raised);
    margin-bottom: 6px;
}
.cli-detail-set-info { flex: 1; min-width: 0; }
.cli-detail-set-name { font-size: 0.88rem; font-weight: 500; color: var(--text-1); }
.cli-detail-set-sub  { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 3px; }
.cli-detail-set-sub span { font-size: 0.74rem; color: var(--text-3); }
.cli-detail-set-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.cli-detail-set-amount { font-size: 0.88rem; font-weight: 600; color: var(--green); }

/* ── Schedule order rows inside detail ───────────────────────────────── */
.cli-ord-sheet-group { margin-bottom: 14px; }
.cli-ord-sheet-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--accent);
    padding: 4px 0 6px;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 6px;
}
.cli-detail-ord-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--r-sm);
    background: var(--bg-raised);
    margin-bottom: 4px;
}
.cli-detail-ord-row .cli-detail-set-right { flex-direction: column; align-items: flex-end; gap: 4px; }

/* ── Client schedule order rows ─────────────────────────────────────── */
.cli-sched-ord-row {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
}
.cli-sched-ord-row:last-child { border-bottom: none; }
.cli-sched-ord-row--link {
    cursor: pointer;
}
.cli-sched-ord-row--link:hover {
    background: rgba(99,102,241,0.08);
}
.cli-sched-ord-row--link:hover .cli-sched-ord-desc::after {
    content: ' ↗';
    font-size: 0.7rem;
    color: var(--accent-text);
    opacity: 0.7;
}

/* Schedule row highlight when navigated to from client popup */
@keyframes ord-row-flash {
    0%   { background: rgba(99,102,241,0.3); }
    60%  { background: rgba(99,102,241,0.15); }
    100% { background: transparent; }
}
.ord-row--highlight {
    animation: ord-row-flash 1.8s ease-out forwards;
}
.cli-sched-ord-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}
.cli-sched-ord-desc {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-1);
    flex: 1;
}
.cli-sched-ord-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.cli-sched-ord-amt  { font-size: 0.78rem; }
.cli-sched-ord-settotal { font-size: 0.72rem; color: var(--text-3); }
.cli-sched-ord-sub {
    display: flex;
    gap: 10px;
    font-size: 0.75rem;
    color: var(--text-3);
    margin-top: 3px;
    flex-wrap: wrap;
}
.cli-ord-linked-sets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

/* ── Client order groups ─────────────────────────────────────────────── */
.cli-ord-group {
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
    margin-bottom: 8px;
}
.cli-ord-group--done { opacity: 0.7; }
.cli-ord-group--done:hover { opacity: 1; }

.cli-ord-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    background: var(--bg-raised);
    cursor: default;
}
.cli-ord-group-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-1);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cli-ord-group-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.cli-ord-group-total {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-1);
}

.cli-ord-set-list {
    border-top: 1px solid var(--border);
}
.cli-ord-set-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    border-bottom: 1px solid var(--border);
    font-size: 0.82rem;
}
.cli-ord-set-row:last-child { border-bottom: none; }
.cli-ord-set-name {
    font-weight: 500;
    color: var(--text-1);
    min-width: 0;
    flex-shrink: 0;
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cli-ord-set-meta {
    display: flex;
    gap: 8px;
    color: var(--text-3);
    flex: 1;
    font-size: 0.78rem;
    flex-wrap: wrap;
}
.cli-ord-set-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.cli-ord-set-amount {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-2);
    min-width: 52px;
    text-align: right;
}

/* ── Builder management modal ────────────────────────────────────────── */
.mgr-builder-list  { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; padding: 0; }
.mgr-builder-row   { display: flex; align-items: center; gap: 8px; }
.mgr-builder-input { flex: 1; font-size: 0.88rem; }

/* ── Mobile ──────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .cli-grid { grid-template-columns: 1fr; padding: 0 12px 20px; }
    .cli-toolbar { padding: 12px 12px 8px; }
    .cli-stats-bar { padding: 0 12px 10px; }
    .cli-detail-stats { grid-template-columns: repeat(2, 1fr); }
    .cli-card-actions { opacity: 1; }
}

/* =====================================================================
   LUNCH TAB
   ===================================================================== */
.lunch-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 20px;
    padding: 20px;
    align-items: start;
    max-width: 1100px;
}
@media (max-width: 900px) {
    .lunch-layout { grid-template-columns: 1fr; }
}

.lunch-panel-title {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 14px;
    color: var(--text-1);
}

/* ── Form panel ─────────────────────────────────────────── */
.lunch-form-panel {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 18px;
}
.lunch-section-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: var(--text-3);
    margin-bottom: 8px;
}
.lunch-radio-group {
    display: flex;
    gap: 16px;
    margin-bottom: 8px;
}
.lunch-radio {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    cursor: pointer;
}
.lunch-check-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.88rem;
    cursor: pointer;
    color: var(--text-2);
}
.lunch-items-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.lunch-item-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.lunch-item-label {
    font-size: 0.9rem;
    color: var(--text-1);
}
.lunch-counter {
    display: flex;
    align-items: center;
    gap: 8px;
}
.lunch-counter-btn {
    width: 28px;
    height: 28px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border-strong);
    background: var(--bg-raised);
    color: var(--text-1);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--base);
}
.lunch-counter-btn:hover { background: var(--bg-hover); }
.lunch-counter-val {
    min-width: 20px;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-1);
}
.lunch-extra-label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-2);
    margin-bottom: 4px;
}
.lunch-warning {
    background: rgba(255,180,0,0.12);
    border: 1px solid rgba(255,180,0,0.35);
    border-radius: var(--r-sm);
    padding: 8px 10px;
    font-size: 0.82rem;
    color: var(--amber, #f5a623);
    margin-bottom: 12px;
}

/* ── Report panel ───────────────────────────────────────── */
.lunch-report-panel {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 18px;
}
.lunch-report-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 8px;
}
.lunch-order-count {
    font-size: 0.8rem;
    color: var(--text-3);
}
.lunch-report-body { display: flex; flex-direction: column; gap: 2px; }
.lunch-empty { color: var(--text-3); font-size: 0.88rem; padding: 20px 0; text-align: center; }

.lunch-groups { display: flex; flex-direction: column; gap: 10px; }
.lunch-group {
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 10px 12px;
}
.lunch-group-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 2px;
}
.lunch-group-code {
    font-size: 1rem;
    font-weight: 900;
    font-family: monospace;
    color: var(--accent);
    letter-spacing: .5px;
}
.lunch-group-count {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-1);
}
.lunch-group-desc {
    font-size: 0.82rem;
    color: var(--text-2);
    margin-bottom: 4px;
}
.lunch-group-people {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.lunch-person {
    font-size: 0.75rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 99px;
    padding: 1px 8px;
    color: var(--text-2);
    display: flex;
    align-items: center;
    gap: 4px;
}
.lunch-del-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-3);
    font-size: 0.7rem;
    padding: 0;
    line-height: 1;
}
.lunch-del-btn:hover { color: var(--danger); }

.lunch-extras-section {
    margin-top: 14px;
    padding: 12px;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
}
.lunch-extras-title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--text-3);
    margin-bottom: 6px;
}
.lunch-extra-row {
    font-size: 0.85rem;
    color: var(--text-1);
    margin-bottom: 3px;
}
.lunch-extra-who { font-weight: 600; }

.lunch-summary-flags {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 14px;
}
.lunch-flag {
    font-size: 0.85rem;
    padding: 6px 10px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
}
.lunch-flag--yes { border-color: var(--accent); color: var(--text-1); }
.lunch-flag--no  { color: var(--text-3); }

/* ── Hasara Dash ─────────────────────────────────────────────────────── */
.hasara-wrap { padding: 24px; max-width: 900px; }
.hasara-month { margin-bottom: 36px; }
.hasara-month-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--text-1);
}
.hasara-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.hasara-table th {
    text-align: left;
    font-weight: 600;
    padding: 7px 14px;
    border-bottom: 2px solid var(--border);
    color: var(--text-2);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.hasara-table td {
    padding: 6px 14px;
    border-bottom: 1px solid var(--border);
}
.hasara-table tbody tr:hover td { background: var(--bg-2); }
.hasara-num { text-align: right; font-variant-numeric: tabular-nums; }
.hasara-unk-hdr { color: var(--text-3); }
.hasara-unk { color: var(--text-3); }
.hasara-unk-nonzero { color: #dc2626 !important; font-weight: 700; }

/* ── Analytics Tab ───────────────────────────────────────────────────── */
.anl-shell { display: flex; flex-direction: column; height: 100%; }
.anl-sub-tabs {
    display: flex; flex-wrap: wrap; gap: 4px;
    padding: 12px 16px; border-bottom: 1px solid var(--border);
    background: var(--bg-base); flex-shrink: 0;
}
.anl-tab {
    padding: 6px 14px; border-radius: var(--r-sm);
    font-size: 0.82rem; font-weight: 500; cursor: pointer;
    border: 1px solid var(--border); background: transparent;
    color: var(--text-2); transition: all 0.15s;
}
.anl-tab:hover { background: var(--bg-2); color: var(--text-1); }
.anl-tab--active { background: var(--accent); color: #fff; border-color: var(--accent); }
.anl-content { flex: 1; overflow-y: auto; }
.anl-wrap { padding: 20px 24px; max-width: 960px; }
.anl-month { margin-bottom: 32px; }
.anl-month-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 10px; }
.anl-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.anl-table th { text-align: left; font-size: 0.76rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--text-3); padding: 6px 12px; border-bottom: 2px solid var(--border); }
.anl-table td { padding: 6px 12px; border-bottom: 1px solid var(--border); }
.anl-table tbody tr:hover td { background: var(--bg-2); }
.anl-num  { text-align: right; font-variant-numeric: tabular-nums; }
.anl-bold { font-weight: 600; }
.anl-total-row td { font-weight: 600; background: var(--bg-2); }

/* Painter Capacity */
.cap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 12px; }
.cap-card { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--r); padding: 14px 16px; }
.cap-name { font-weight: 600; margin-bottom: 10px; }
.cap-bar-wrap { height: 6px; background: var(--bg-3); border-radius: 3px; margin-bottom: 10px; overflow: hidden; }
.cap-bar { height: 100%; border-radius: 3px; transition: width 0.4s ease; }
.cap-load--free { background: var(--c-success,#22c55e); }
.cap-load--ok   { background: #3b82f6; }
.cap-load--busy { background: #f59e0b; }
.cap-load--full { background: var(--c-danger,#dc2626); }
.cap-stats { display: flex; flex-wrap: wrap; gap: 6px; font-size: 0.78rem; }
.cap-stat { padding: 2px 7px; border-radius: 10px; background: var(--bg-3); color: var(--text-2); }
.cap-stat--total { font-weight: 700; color: var(--text-1); }
.cap-legend { display: flex; align-items: center; gap: 4px; font-size: 0.8rem; color: var(--text-3); margin-bottom: 4px; }
.cap-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }

/* Set Timeline */
.anl-timeline-wrap { max-width: 640px; }
.anl-set-list { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.anl-set-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px;
    background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--r-sm);
    text-align: left; cursor: pointer; font-size: 0.85rem; }
.anl-set-row:hover { background: var(--bg-2); }
.anl-set-client { font-weight: 600; flex-shrink: 0; }
.anl-set-name   { color: var(--text-2); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anl-set-status { font-size: 0.75rem; padding: 2px 7px; border-radius: 10px;
    background: var(--bg-3); color: var(--text-3); flex-shrink: 0; }
.anl-status-active    { background: rgba(59,130,246,0.15); color: #60a5fa; }
.anl-status-qa        { background: rgba(245,158,11,0.15); color: #fbbf24; }
.anl-status-completed { background: rgba(34,197,94,0.15);  color: #4ade80; }

/* Overdue Alerts */
.oa-section { margin-bottom: 28px; }
.oa-title { font-size: 0.95rem; font-weight: 700; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.oa-count { background: var(--c-danger,#dc2626); color: #fff; font-size: 0.75rem;
    padding: 1px 7px; border-radius: 10px; font-weight: 600; }
.oa-days--amber { color: #f59e0b; font-weight: 700; }
.oa-days--red   { color: var(--c-danger,#dc2626); font-weight: 700; }
.oa-row--critical td { background: rgba(220,38,38,0.06); }
.anl-ok-banner { margin: 32px auto; max-width: 360px; text-align: center;
    padding: 24px; background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.3);
    border-radius: var(--r); font-size: 1.1rem; font-weight: 600; color: #4ade80; }

/* Daily Summary */
.ds-wrap { max-width: 860px; }
.ds-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 8px; }
.ds-title { font-size: 1.2rem; font-weight: 700; }
.ds-kpi-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-bottom: 24px; }
.ds-kpi { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--r); padding: 14px 16px; }
.ds-kpi-val   { font-size: 2rem; font-weight: 800; line-height: 1; }
.ds-kpi-label { font-size: 0.78rem; color: var(--text-3); margin-top: 4px; }
.ds-kpi-sub   { font-size: 0.72rem; color: var(--text-3); margin-top: 2px; }
.ds-kpi--active  { border-color: #3b82f6; }
.ds-kpi--active .ds-kpi-val { color: #60a5fa; }
.ds-kpi--qa      { border-color: #f59e0b; }
.ds-kpi--qa .ds-kpi-val { color: #fbbf24; }
.ds-kpi--urgent  { border-color: var(--c-danger,#dc2626); }
.ds-kpi--urgent .ds-kpi-val { color: var(--c-danger,#dc2626); }
.ds-sections { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ds-section { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--r); padding: 16px; }
.ds-section--painters { grid-column: 1 / -1; }
.ds-section-title { font-size: 0.9rem; font-weight: 700; margin-bottom: 10px; }
.ds-list { margin: 0; padding-left: 18px; font-size: 0.85rem; line-height: 1.8; }
.ds-none { color: var(--text-3); font-size: 0.85rem; font-style: italic; }

/* Print styles for daily summary */
@media print {
    .sidebar, .top-bar, .anl-sub-tabs, .btn { display: none !important; }
    .main-content, .tab-content, .anl-content, .anl-shell { overflow: visible !important; }
    .ds-kpi-row { grid-template-columns: repeat(5, 1fr); }
    .ds-sections { grid-template-columns: 1fr 1fr; }
    .ds-section--painters { grid-column: 1 / -1; }
}

/* =====================================================================
   FILTER CHIPS
   ===================================================================== */
.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 0 8px;
}
.filter-chips[hidden] { display: none; }
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    background: rgba(99,102,241,0.12);
    border: 1px solid rgba(99,102,241,0.25);
    border-radius: 100px;
    font-size: 0.72rem;
    color: var(--accent-text);
    white-space: nowrap;
}
.filter-chip-x {
    background: none;
    border: none;
    color: currentColor;
    opacity: 0.6;
    font-size: 0.85rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    transition: opacity 0.1s;
}
.filter-chip-x:hover { opacity: 1; }

/* =====================================================================
   BULK REQUEST SELECTION BAR
   ===================================================================== */
.req-bulk-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(99,102,241,0.1);
    border: 1px solid rgba(99,102,241,0.2);
    border-radius: var(--r);
    margin-bottom: 8px;
    font-size: 0.8rem;
}
.req-bulk-bar[hidden] { display: none; }
.req-bulk-count { color: var(--accent-text); font-weight: 600; flex: 1; }
.req-bulk-check {
    width: 15px; height: 15px;
    cursor: pointer;
    flex-shrink: 0;
    accent-color: var(--accent);
}

/* =====================================================================
   RECENTLY VIEWED CLIENTS
   ===================================================================== */
.cli-recent-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 2px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
}
.cli-recent-label {
    font-size: 0.68rem;
    color: var(--text-3);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}
.cli-recent-chip {
    padding: 3px 10px;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: 100px;
    font-size: 0.75rem;
    color: var(--text-2);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.cli-recent-chip:hover {
    border-color: var(--accent);
    color: var(--accent-text);
}

/* =====================================================================
   SORTABLE SCHEDULE COLUMN HEADERS
   ===================================================================== */
.ord-th--sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.ord-th--sortable:hover { color: var(--text-1); }
.ord-sort-hint {
    font-size: 0.6rem;
    opacity: 0.4;
    margin-left: 3px;
}

/* =====================================================================
   AVAILABILITY BADGE ON SET CARDS
   ===================================================================== */
.set-card-top-right .avail-badge {
    font-size: 0.6rem;
    padding: 2px 5px;
}

/* ── DQ Page table group headers ─────────────────────────────────────── */
.dqp-table-group-row td.dqp-table-group-label {
    background: var(--bg-raised);
    color: var(--accent);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 6px 10px;
    border-top: 1px solid var(--border-strong);
    border-bottom: 1px solid var(--border);
}

/* ── Hitler tab ───────────────────────────────────────────────────────── */
.hc-painter-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 16px;
    align-content: flex-start;
}
.hc-table-header {
    width: 100%;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    padding: 8px 4px 4px;
    border-bottom: 1px solid var(--border);
    margin-top: 6px;
}
.hc-painter-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    min-width: 160px;
    max-width: 200px;
}
.hc-painter-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-1);
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hc-painter-name--clickable {
    cursor: pointer;
    user-select: none;
}
.hc-painter-name--clickable:hover { color: var(--accent); }
.hc-painter-card--editing {
    border-color: var(--accent);
    min-width: 220px;
    max-width: 260px;
}
.hc-edit-panel { padding-top: 4px; }
.hc-edit-row {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 5px 0;
    border-bottom: 1px solid var(--border);
}
.hc-edit-row:last-of-type { border-bottom: none; }
.hc-edit-label {
    font-size: 0.7rem;
    color: var(--text-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hc-edit-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}
.hc-edit-input {
    width: 60px;
    padding: 3px 6px;
    font-size: 0.8rem;
    background: var(--bg-input, var(--bg-hover));
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-1);
    text-align: center;
}
.hc-edit-input:focus { outline: none; border-color: var(--accent); }
.hc-edit-pct-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--accent);
    min-width: 36px;
}
.hc-edit-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    padding-top: 8px;
}
.hc-set-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    padding: 2px 0;
}
.hc-set-name {
    color: var(--text-2);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hc-set-pct {
    font-weight: 700;
    color: var(--text-3);
    white-space: nowrap;
}
.hc-set-pct--today { color: var(--green); }
.hc-set-prompt {
    font-size: 0.78rem;
    color: var(--text-2);
    padding: 8px 0 4px;
    font-weight: 600;
}
.hc-figures-wrap {
    max-height: 380px;
    overflow-y: auto;
    scrollbar-width: thin;
}
.hc-set-name-label {
    font-size: 0.75rem;
    color: var(--text-3);
}
.hc-pdf-preview {
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}
.hc-pdf-toggle-btn {
    width: 100%;
    background: var(--bg-raised);
    border: none;
    color: var(--text-2);
    font-size: 0.82rem;
    font-weight: 500;
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background var(--fast);
}
.hc-pdf-toggle-btn:hover { background: var(--bg-hover); }
.hc-pdf-chevron { font-size: 0.75rem; color: var(--text-3); }
.hc-pdf-frame-wrap { height: 300px; }
.hc-pdf-frame {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* ── Needs-attention digest panel ────────────────────────────────── */
.digest-panel {
    margin: 0 0 12px;
    border: 1px solid rgba(251,191,36,.25);
    border-radius: 10px;
    overflow: hidden;
    background: rgba(251,191,36,.04);
}
.digest-panel-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    cursor: pointer;
    user-select: none;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-2);
}
.digest-panel-header:hover { background: rgba(251,191,36,.06); }
.digest-panel-icon { font-size: 1rem; }
.digest-panel-count {
    margin-left: 4px;
    background: rgba(251,191,36,.2);
    color: #fbbf24;
    border-radius: 12px;
    padding: 1px 8px;
    font-size: 0.75rem;
}
.digest-panel-chevron { margin-left: auto; color: var(--text-3); transition: transform .2s; }
.digest-panel-chevron.open { transform: rotate(180deg); }
.digest-panel-body { display: none; border-top: 1px solid rgba(251,191,36,.15); }
.digest-panel-body.open { display: block; }
.digest-section { padding: 8px 14px 4px; }
.digest-section + .digest-section { border-top: 1px solid var(--bg-raised); }
.digest-section-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 4px;
}
.digest-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 6px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.82rem;
}
.digest-row:hover { background: var(--bg-raised); }
.digest-painter { color: var(--text-1); }
.digest-meta { color: var(--text-3); font-size: 0.78rem; }
.digest-age { color: var(--text-3); font-size: 0.78rem; margin-left: auto; }

/* ── Timeline comment items ──────────────────────────────────────── */
.tl-dot-comment { background: var(--primary); }
.tl-comment .tl-comment-text {
    color: var(--text-1);
    background: var(--bg-raised);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 0.85rem;
    line-height: 1.5;
}
.tl-comment .tl-sub { color: var(--text-3); font-size: 0.78rem; margin-top: 3px; }

/* ── Timeline drawer footer (comment form) ───────────────────────── */
.drawer-footer {
    padding: 10px 16px;
    border-top: 1px solid var(--bg-raised);
    background: var(--bg-0);
    flex-shrink: 0;
}
.drawer-comment-form {
    display: flex;
    gap: 8px;
}
.drawer-comment-form input {
    flex: 1;
    min-width: 0;
}

/* ── Drawer flex layout fix (needed for sticky footer) ──────────── */
#setTimelineDrawer {
    display: flex;
    flex-direction: column;
}
#setTimelineDrawer .drawer-body {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* ══════════════════════════════════════════════════════════════
   COLOUR THEMES
   Each block overrides the CSS custom properties defined in :root.
   "midnight" is the default (no override needed).
══════════════════════════════════════════════════════════════ */

/* 2. Ember — warm charcoal + orange */
[data-theme="ember"] {
    --bg-app:        #0d0a07;
    --bg-base:       #131009;
    --bg-surface:    #1a1510;
    --bg-raised:     #231e16;
    --bg-overlay:    #2d261c;
    --bg-0:          #1a1510;
    --bg-3:          #3a3028;
    --border:        rgba(249,115,22,0.10);
    --border-subtle: rgba(249,115,22,0.05);
    --border-strong: rgba(249,115,22,0.22);
    --text-1:        #fef3e2;
    --text-2:        #c4956a;
    --text-3:        #7a5c40;
    --text-4:        #3d2e1e;
    --accent:        #f97316;
    --accent-dim:    rgba(249,115,22,0.15);
    --accent-hover:  #fb923c;
    --accent-text:   #fdba74;
}

/* 3. Ocean — deep navy + cyan */
[data-theme="ocean"] {
    --bg-app:        #040d16;
    --bg-base:       #071525;
    --bg-surface:    #0c1e33;
    --bg-raised:     #122640;
    --bg-overlay:    #182f50;
    --bg-0:          #0c1e33;
    --bg-3:          #1e3555;
    --border:        rgba(6,182,212,0.10);
    --border-subtle: rgba(6,182,212,0.05);
    --border-strong: rgba(6,182,212,0.22);
    --text-1:        #f0f9ff;
    --text-2:        #7ececa;
    --text-3:        #3d7a90;
    --text-4:        #1a3d50;
    --accent:        #06b6d4;
    --accent-dim:    rgba(6,182,212,0.15);
    --accent-hover:  #22d3ee;
    --accent-text:   #67e8f9;
}

/* 4. Synthwave — near-black purple + fuchsia */
[data-theme="synthwave"] {
    --bg-app:        #08050f;
    --bg-base:       #0d0816;
    --bg-surface:    #140d22;
    --bg-raised:     #1c1230;
    --bg-overlay:    #241840;
    --bg-0:          #140d22;
    --bg-3:          #2e1d4e;
    --border:        rgba(232,121,249,0.10);
    --border-subtle: rgba(232,121,249,0.05);
    --border-strong: rgba(232,121,249,0.22);
    --text-1:        #fdf4ff;
    --text-2:        #c4a0e8;
    --text-3:        #7a5a9a;
    --text-4:        #3d2060;
    --accent:        #e879f9;
    --accent-dim:    rgba(232,121,249,0.15);
    --accent-hover:  #f0abfc;
    --accent-text:   #f5d0fe;
}

/* 5. Nord — cool arctic grays */
[data-theme="nord"] {
    --bg-app:        #191d28;
    --bg-base:       #1e2330;
    --bg-surface:    #252b3b;
    --bg-raised:     #2d3448;
    --bg-overlay:    #363d54;
    --bg-0:          #252b3b;
    --bg-3:          #404a60;
    --border:        rgba(136,192,208,0.10);
    --border-subtle: rgba(136,192,208,0.05);
    --border-strong: rgba(136,192,208,0.22);
    --text-1:        #eceff4;
    --text-2:        #9aafbe;
    --text-3:        #5e7385;
    --text-4:        #2e3d4e;
    --accent:        #88c0d0;
    --accent-dim:    rgba(136,192,208,0.15);
    --accent-hover:  #9ecfdf;
    --accent-text:   #b8dde8;
}

/* 6. Toxic — near-black + neon lime */
[data-theme="toxic"] {
    --bg-app:        #050a05;
    --bg-base:       #080f08;
    --bg-surface:    #0e170d;
    --bg-raised:     #141f13;
    --bg-overlay:    #1c2b1a;
    --bg-0:          #0e170d;
    --bg-3:          #263522;
    --border:        rgba(132,204,22,0.10);
    --border-subtle: rgba(132,204,22,0.05);
    --border-strong: rgba(132,204,22,0.22);
    --text-1:        #f0fdf4;
    --text-2:        #86aa70;
    --text-3:        #4d7040;
    --text-4:        #243518;
    --accent:        #84cc16;
    --accent-dim:    rgba(132,204,22,0.15);
    --accent-hover:  #a3e635;
    --accent-text:   #bef264;
}

/* 7. Crimson — dark + deep rose */
[data-theme="crimson"] {
    --bg-app:        #0a0707;
    --bg-base:       #110909;
    --bg-surface:    #180d0d;
    --bg-raised:     #201212;
    --bg-overlay:    #2a1818;
    --bg-0:          #180d0d;
    --bg-3:          #341a1a;
    --border:        rgba(244,63,94,0.10);
    --border-subtle: rgba(244,63,94,0.05);
    --border-strong: rgba(244,63,94,0.22);
    --text-1:        #fff1f2;
    --text-2:        #c08090;
    --text-3:        #7a4a54;
    --text-4:        #3d1a20;
    --accent:        #f43f5e;
    --accent-dim:    rgba(244,63,94,0.15);
    --accent-hover:  #fb7185;
    --accent-text:   #fda4af;
}

/* 8. Caramel — warm brown + gold */
[data-theme="caramel"] {
    --bg-app:        #0f0c08;
    --bg-base:       #171310;
    --bg-surface:    #201a14;
    --bg-raised:     #2a231b;
    --bg-overlay:    #352c22;
    --bg-0:          #201a14;
    --bg-3:          #403328;
    --border:        rgba(217,119,6,0.10);
    --border-subtle: rgba(217,119,6,0.05);
    --border-strong: rgba(217,119,6,0.22);
    --text-1:        #fffbeb;
    --text-2:        #c4956a;
    --text-3:        #8a6040;
    --text-4:        #3d2810;
    --accent:        #d97706;
    --accent-dim:    rgba(217,119,6,0.15);
    --accent-hover:  #f59e0b;
    --accent-text:   #fcd34d;
}

/* 9. Slate — cool gray + lavender */
[data-theme="slate"] {
    --bg-app:        #0c0d12;
    --bg-base:       #111218;
    --bg-surface:    #171920;
    --bg-raised:     #1f212a;
    --bg-overlay:    #282b36;
    --bg-0:          #171920;
    --bg-3:          #303440;
    --border:        rgba(129,140,248,0.10);
    --border-subtle: rgba(129,140,248,0.05);
    --border-strong: rgba(129,140,248,0.22);
    --text-1:        #f8fafc;
    --text-2:        #94a3b8;
    --text-3:        #5c6880;
    --text-4:        #2a3040;
    --accent:        #818cf8;
    --accent-dim:    rgba(129,140,248,0.15);
    --accent-hover:  #a5b4fc;
    --accent-text:   #c7d2fe;
}

/* 10. Moonlight — deep blue-black + deep violet */
[data-theme="moonlight"] {
    --bg-app:        #080b12;
    --bg-base:       #0e1220;
    --bg-surface:    #141a2e;
    --bg-raised:     #1c2340;
    --bg-overlay:    #242c52;
    --bg-0:          #141a2e;
    --bg-3:          #2a3460;
    --border:        rgba(124,58,237,0.12);
    --border-subtle: rgba(124,58,237,0.06);
    --border-strong: rgba(124,58,237,0.28);
    --text-1:        #f0f4ff;
    --text-2:        #8899cc;
    --text-3:        #4d5c8a;
    --text-4:        #1e2644;
    --accent:        #7c3aed;
    --accent-dim:    rgba(124,58,237,0.15);
    --accent-hover:  #8b5cf6;
    --accent-text:   #c4b5fd;
}

/* ── Theme Picker Modal ──────────────────────────────────────────── */
.theme-picker-modal .modal-body { padding-bottom: 20px; }

.theme-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    padding: 4px 0;
}
@media (max-width: 560px) {
    .theme-grid { grid-template-columns: repeat(3, 1fr); }
}

.theme-card {
    border: 2px solid var(--border-strong);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.theme-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.theme-card.tc-active {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent), 0 4px 16px rgba(0,0,0,0.4);
}
.theme-card-swatch {
    height: 62px;
    padding: 10px 10px 8px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 3px;
}
.theme-card-bar1 {
    height: 3px;
    width: 55%;
    border-radius: 2px;
    opacity: 0.95;
}
.theme-card-bar2 {
    height: 2px;
    width: 80%;
    background: rgba(255,255,255,0.12);
    border-radius: 1px;
}
.theme-card-bar3 {
    height: 2px;
    width: 40%;
    background: rgba(255,255,255,0.06);
    border-radius: 1px;
}
.theme-card-dot {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    margin-left: auto;
    margin-top: -2px;
    flex-shrink: 0;
    opacity: 0.9;
    align-self: flex-start;
}
.theme-card-swatch-row {
    display: flex;
    align-items: flex-end;
    gap: 6px;
}
.theme-card-swatch-lines { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.theme-card-foot {
    padding: 6px 8px 7px;
    background: var(--bg-raised);
}
.theme-card-name {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-1);
    display: block;
}
.theme-card-desc {
    font-size: 0.6rem;
    color: var(--text-3);
    margin-top: 1px;
    display: block;
}
.tc-active .theme-card-name { color: var(--accent); }

/* ── Theme group label ───────────────────────────────────────────── */
.theme-group-label {
    grid-column: 1 / -1;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-3);
    padding: 6px 0 2px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 2px;
}
.theme-group-label:first-child { padding-top: 0; }

/* ══════════════════════════════════════════════════════════════
   POP-CULTURE THEMES
══════════════════════════════════════════════════════════════ */

/* The Matrix */
[data-theme="matrix"] {
    --bg-app:        #000000;
    --bg-base:       #020702;
    --bg-surface:    #060f06;
    --bg-raised:     #0a1a0a;
    --bg-overlay:    #0f2510;
    --bg-0:          #060f06;
    --bg-3:          #163316;
    --border:        rgba(0,255,65,0.10);
    --border-subtle: rgba(0,255,65,0.05);
    --border-strong: rgba(0,255,65,0.22);
    --text-1:        #ccffcc;
    --text-2:        #44bb44;
    --text-3:        #1d6b1d;
    --text-4:        #0a3a0a;
    --accent:        #00ff41;
    --accent-dim:    rgba(0,255,65,0.15);
    --accent-hover:  #33ff66;
    --accent-text:   #99ffaa;
}

/* Cyberpunk 2077 */
[data-theme="cyberpunk"] {
    --bg-app:        #060408;
    --bg-base:       #0c0810;
    --bg-surface:    #120e1c;
    --bg-raised:     #1a1228;
    --bg-overlay:    #221834;
    --bg-0:          #120e1c;
    --bg-3:          #2e1e44;
    --border:        rgba(252,238,9,0.10);
    --border-subtle: rgba(252,238,9,0.05);
    --border-strong: rgba(252,238,9,0.22);
    --text-1:        #fffbe0;
    --text-2:        #c4a800;
    --text-3:        #7a6800;
    --text-4:        #3a3000;
    --accent:        #fcee09;
    --accent-dim:    rgba(252,238,9,0.15);
    --accent-hover:  #fff044;
    --accent-text:   #fff5a0;
}

/* Vaporwave */
[data-theme="vaporwave"] {
    --bg-app:        #0d0620;
    --bg-base:       #130830;
    --bg-surface:    #1a0e42;
    --bg-raised:     #221552;
    --bg-overlay:    #2a1c62;
    --bg-0:          #1a0e42;
    --bg-3:          #341d78;
    --border:        rgba(255,113,206,0.10);
    --border-subtle: rgba(255,113,206,0.05);
    --border-strong: rgba(255,113,206,0.24);
    --text-1:        #fff0ff;
    --text-2:        #cc88cc;
    --text-3:        #7744aa;
    --text-4:        #3a1a60;
    --accent:        #ff71ce;
    --accent-dim:    rgba(255,113,206,0.15);
    --accent-hover:  #ff99dd;
    --accent-text:   #ffccee;
}

/* Tron */
[data-theme="tron"] {
    --bg-app:        #000408;
    --bg-base:       #000a14;
    --bg-surface:    #001020;
    --bg-raised:     #00162c;
    --bg-overlay:    #001e3a;
    --bg-0:          #001020;
    --bg-3:          #002848;
    --border:        rgba(0,240,255,0.10);
    --border-subtle: rgba(0,240,255,0.05);
    --border-strong: rgba(0,240,255,0.22);
    --text-1:        #e0f8ff;
    --text-2:        #4cc8e0;
    --text-3:        #1a7080;
    --text-4:        #053040;
    --accent:        #00f0ff;
    --accent-dim:    rgba(0,240,255,0.15);
    --accent-hover:  #33f5ff;
    --accent-text:   #88f8ff;
}

/* Breaking Bad */
[data-theme="heisenberg"] {
    --bg-app:        #050b0a;
    --bg-base:       #080f0e;
    --bg-surface:    #0c1716;
    --bg-raised:     #121e1c;
    --bg-overlay:    #182824;
    --bg-0:          #0c1716;
    --bg-3:          #1e3430;
    --border:        rgba(59,143,232,0.10);
    --border-subtle: rgba(59,143,232,0.05);
    --border-strong: rgba(59,143,232,0.22);
    --text-1:        #e0f0ff;
    --text-2:        #7aaad0;
    --text-3:        #3d6880;
    --text-4:        #153040;
    --accent:        #3b8fe8;
    --accent-dim:    rgba(59,143,232,0.15);
    --accent-hover:  #60aaff;
    --accent-text:   #a0ccff;
}

/* Stranger Things */
[data-theme="upside-down"] {
    --bg-app:        #070002;
    --bg-base:       #0f0004;
    --bg-surface:    #180006;
    --bg-raised:     #200009;
    --bg-overlay:    #2c000e;
    --bg-0:          #180006;
    --bg-3:          #360010;
    --border:        rgba(230,57,70,0.10);
    --border-subtle: rgba(230,57,70,0.05);
    --border-strong: rgba(230,57,70,0.22);
    --text-1:        #fff0f0;
    --text-2:        #cc7070;
    --text-3:        #7a3a40;
    --text-4:        #3a1018;
    --accent:        #e63946;
    --accent-dim:    rgba(230,57,70,0.15);
    --accent-hover:  #ff5560;
    --accent-text:   #ffaaaa;
}

/* GTA Vice City */
[data-theme="vice-city"] {
    --bg-app:        #060314;
    --bg-base:       #0a0520;
    --bg-surface:    #10082e;
    --bg-raised:     #160c3c;
    --bg-overlay:    #1c1050;
    --bg-0:          #10082e;
    --bg-3:          #281660;
    --border:        rgba(255,45,120,0.10);
    --border-subtle: rgba(255,45,120,0.05);
    --border-strong: rgba(255,45,120,0.24);
    --text-1:        #fff0f8;
    --text-2:        #cc6688;
    --text-3:        #7a3355;
    --text-4:        #3a0e2a;
    --accent:        #ff2d78;
    --accent-dim:    rgba(255,45,120,0.15);
    --accent-hover:  #ff5a99;
    --accent-text:   #ffaacc;
}

/* Doom */
[data-theme="doom"] {
    --bg-app:        #100200;
    --bg-base:       #180400;
    --bg-surface:    #220600;
    --bg-raised:     #2e0800;
    --bg-overlay:    #3c0a00;
    --bg-0:          #220600;
    --bg-3:          #4e1000;
    --border:        rgba(255,69,0,0.10);
    --border-subtle: rgba(255,69,0,0.05);
    --border-strong: rgba(255,69,0,0.24);
    --text-1:        #fff0e8;
    --text-2:        #cc7755;
    --text-3:        #7a3320;
    --text-4:        #3a1008;
    --accent:        #ff4500;
    --accent-dim:    rgba(255,69,0,0.15);
    --accent-hover:  #ff6633;
    --accent-text:   #ffaa88;
}

/* Fallout / Pip-Boy */
[data-theme="pip-boy"] {
    --bg-app:        #030a04;
    --bg-base:       #060f08;
    --bg-surface:    #0a180c;
    --bg-raised:     #0e2212;
    --bg-overlay:    #122e16;
    --bg-0:          #0a180c;
    --bg-3:          #1a3c1e;
    --border:        rgba(0,255,102,0.10);
    --border-subtle: rgba(0,255,102,0.05);
    --border-strong: rgba(0,255,102,0.22);
    --text-1:        #e0ffe8;
    --text-2:        #44cc66;
    --text-3:        #1d7040;
    --text-4:        #0a3820;
    --accent:        #00ff66;
    --accent-dim:    rgba(0,255,102,0.15);
    --accent-hover:  #33ff88;
    --accent-text:   #99ffbb;
}

/* The Witcher */
[data-theme="witcher"] {
    --bg-app:        #0a0803;
    --bg-base:       #110f05;
    --bg-surface:    #181508;
    --bg-raised:     #211c0c;
    --bg-overlay:    #2c2510;
    --bg-0:          #181508;
    --bg-3:          #3a3018;
    --border:        rgba(212,160,23,0.10);
    --border-subtle: rgba(212,160,23,0.05);
    --border-strong: rgba(212,160,23,0.22);
    --text-1:        #fdf8e8;
    --text-2:        #c8a860;
    --text-3:        #7a6430;
    --text-4:        #3a2c10;
    --accent:        #d4a017;
    --accent-dim:    rgba(212,160,23,0.15);
    --accent-hover:  #e8b830;
    --accent-text:   #f5d878;
}