@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --bg:#f0f2f7;
  --sidebar-bg:#1e2235;
  --surface:#fff;
  --surface2:#f7f8fc;
  --border:#e8eaf2;
  --border2:#d8dce8;
  --text:#1a1d2e;
  --text2:#5a6080;
  --text3:#9098b8;
  --accent:#5b7fff;
  --accent-light:#eef1ff;
  --accent-dark:#3d5fe0;
  --red:#ff4d4f;
  --red-light:#fff1f0;
  --red-border:#ffccc7;
  --orange:#fa8c16;
  --orange-light:#fff7e6;
  --orange-border:#ffd591;
  --green:#52c41a;
  --green-light:#f6ffed;
  --green-border:#b7eb8f;
  --blue:#1677ff;
  --blue-light:#e6f4ff;
  --blue-border:#91caff;
  --purple:#722ed1;
  --purple-light:#f9f0ff;
  --radius:10px;
  --radius-sm:6px;
  --shadow:0 2px 12px rgba(30,34,53,.08);
  --shadow-md:0 6px 28px rgba(30,34,53,.14);
}

/* ── DARK THEME ─────────────────────────────────────────────────── */
html.dark {
  --bg:#0f1117;
  --sidebar-bg:#080a10;
  --surface:#161b27;
  --surface2:#1e2435;
  --border:#252d42;
  --border2:#2e3850;
  --text:#e2e8f4;
  --text2:#8892ab;
  --text3:#4e5a72;
  --accent:#6b8fff;
  --accent-light:#1a2344;
  --accent-dark:#4d6fdf;
  --red:#ff6b6b;
  --red-light:#2a1515;
  --red-border:#5c2020;
  --orange:#ffa940;
  --orange-light:#2a1f0a;
  --orange-border:#5c3d0a;
  --green:#73d13d;
  --green-light:#142a0a;
  --green-border:#2a5214;
  --blue:#4096ff;
  --blue-light:#0f1f3d;
  --blue-border:#1a3d6e;
  --purple:#b37feb;
  --purple-light:#1e0f38;
  --shadow:0 2px 12px rgba(0,0,0,.4);
  --shadow-md:0 6px 28px rgba(0,0,0,.6);
}
html.dark .tasks-table tbody tr.row-reply{background:#1f0e0e;}
html.dark .tasks-table tbody tr.row-reply:hover{background:#2a1212;}
html.dark .tasks-table tbody tr.row-wait{background:#1f1608;}
html.dark .tasks-table tbody tr.row-wait:hover{background:#2a1e0c;}
html.dark .tasks-table tbody tr.row-resolved{background:#0e1f08;}
html.dark .tasks-table tbody tr.row-resolved:hover{background:#122808;}
html.dark .tasks-table tbody tr.row-vyezdnye{background:#150e2a;}
html.dark .tasks-table tbody tr.row-vyezdnye:hover{background:#1d1238;}
html.dark .tasks-table tbody tr.row-oborudovanie{background:#150e2a;}
html.dark .tasks-table tbody tr.row-oborudovanie-fix{background:#2a1200;}
html.dark .tasks-table tbody tr.row-oborudovanie-fix:hover{background:#381900;}
html.dark .tasks-table tbody tr.row-oborudovanie-in-repair{background:#001f1f;}
html.dark .tasks-table tbody tr.row-oborudovanie-in-repair:hover{background:#002a2a;}
html.dark .tasks-table tbody tr.row-oborudovanie-repair-done{background:#0a1f00;}
html.dark .tasks-table tbody tr.row-oborudovanie-repair-done:hover{background:#0e2800;}
html.dark .tasks-table tbody tr.row-oborudovanie-send-back{background:#001533;}
html.dark .tasks-table tbody tr.row-oborudovanie-send-back:hover{background:#001c44;}
html.dark .tasks-table tbody tr.row-oborudovanie-returned{background:#1a0a33;}
html.dark .tasks-table tbody tr.row-oborudovanie-returned:hover{background:#220d44;}
html.dark .tasks-table tbody tr.row-hidden{background:#111520;opacity:.5;}
html.dark .tasks-table tbody tr.row-unread{background:#0f1c2e;}
html.dark .tasks-table tbody tr.row-unread:hover{background:#14253d;}
html.dark .tasks-table thead th{background:var(--surface2);color:var(--text3);border-color:var(--border);}
html.dark .tasks-table tbody td{border-color:var(--border);}
html.dark .tasks-table tbody tr:hover>td{background:var(--surface2);}
html.dark .sb-reply{background:#2a1515;}
html.dark .sb-wait{background:#2a1f0a;}
html.dark .sb-resolved{background:#142a0a;}
html.dark .sb-none{background:#1e2435;}
html.dark .sb-vyezdnye{background:#1e0f38;border-color:#5c3d8a;}
html.dark .sb-oborudovanie{background:#1e0f38;border-color:#5c3d8a;}
html.dark .sb-hidden{background:#1e2435;border-color:#2e3850;color:#4e5a72;}
html.dark .sb-oborudovanie-fix{background:#2a1200;border-color:#6b2800;}
html.dark .sb-oborudovanie-in-repair{background:#001f1f;border-color:#0a5c5c;}
html.dark .sb-oborudovanie-repair-done{background:#0a1f00;border-color:#1f5c00;}
html.dark .sb-oborudovanie-send-back{background:#001533;border-color:#0a3d80;}
html.dark .sb-oborudovanie-returned{background:#1a0a33;border-color:#5c2d99;}
html.dark .sb-intra-open{background:#0f1f3d;border-color:#1a3d6e;}
html.dark .sb-intra-work{background:#2a1f0a;border-color:#5c3d0a;}
html.dark .sb-intra-done{background:#142a0a;border-color:#2a5214;}
html.dark .sb-intra-hold{background:#1e2435;border-color:#2e3850;}
html.dark .sb-intra-other{background:#1e2435;border-color:#2e3850;}
html.dark .chip-reply.chip-on{background:#2a1515;border-color:#5c2020;color:#ff6b6b;}
html.dark .chip-wait.chip-on{background:#2a1f0a;border-color:#5c3d0a;color:#ffa940;}
html.dark .chip-resolved.chip-on{background:#142a0a;border-color:#2a5214;color:#73d13d;}
html.dark .chip-hidden.chip-on{background:#1e2435;border-color:#2e3850;color:#4e5a72;}
html.dark .chip-unmarked.chip-on{background:#1e2435;border-color:#252d42;color:#8892ab;}
html.dark .chip-vyezdnye.chip-on{background:#1e0f38;border-color:#5c3d8a;color:#b37feb;}
html.dark .chip-oborudovanie.chip-on{background:#1e0f38;border-color:#5c3d8a;color:#b37feb;}
html.dark .chip-oborudovanie-fix.chip-on{background:#2a1200;border-color:#6b2800;color:#ff7a45;}
html.dark .chip-oborudovanie-in-repair.chip-on{background:#001f1f;border-color:#0a5c5c;color:#36cfc9;}
html.dark .chip-oborudovanie-repair-done.chip-on{background:#0a1f00;border-color:#1f5c00;color:#73d13d;}
html.dark .chip-oborudovanie-send-back.chip-on{background:#001533;border-color:#0a3d80;color:#4096ff;}
html.dark .chip-oborudovanie-returned.chip-on{background:#1a0a33;border-color:#5c2d99;color:#b37feb;}
html.dark .chip-all.chip-on{background:var(--accent);}
html.dark .settings-overlay,.dark .confirm-overlay{background:rgba(0,0,0,.7);}
html.dark input,html.dark select,html.dark textarea{background:var(--surface2)!important;color:var(--text)!important;border-color:var(--border)!important;}
html.dark input::placeholder{color:var(--text3)!important;}
html.dark .login-box,html.dark .settings-box,html.dark .confirm-box{background:var(--surface);border:1px solid var(--border);}
html.dark .isp-dropdown-inner{background:var(--surface2);}
html.dark .update-banner{background:#1a2235;border-color:#2e3850;color:var(--text2);}
html.dark .mark-btn{background:var(--surface2)!important;color:var(--text2)!important;border-color:var(--border)!important;}
html.dark .mbtn-active.mbtn-reply{background:#2a1515!important;border-color:#5c2020!important;color:#ff6b6b!important;}
html.dark .mbtn-active.mbtn-wait{background:#2a1f0a!important;border-color:#5c3d0a!important;color:#ffa940!important;}
html.dark .mbtn-active.mbtn-resolve{background:#142a0a!important;border-color:#2a5214!important;color:#73d13d!important;}
html.dark .mbtn-active.mbtn-vyezdnye{background:#1e0f38!important;border-color:#5c3d8a!important;color:#b37feb!important;}
html.dark .mbtn-active.mbtn-oborudovanie{background:#1e0f38!important;border-color:#5c3d8a!important;color:#b37feb!important;}
html.dark .mbtn-active.mbtn-oborudovanie-fix{background:#2a1200!important;border-color:#6b2800!important;color:#ff7a45!important;}
html.dark .mbtn-active.mbtn-oborudovanie-in-repair{background:#001f1f!important;border-color:#0a5c5c!important;color:#36cfc9!important;}
html.dark .mbtn-active.mbtn-oborudovanie-repair-done{background:#0a1f00!important;border-color:#1f5c00!important;color:#73d13d!important;}
html.dark .mbtn-active.mbtn-oborudovanie-send-back{background:#001533!important;border-color:#0a3d80!important;color:#4096ff!important;}
html.dark .mbtn-active.mbtn-oborudovanie-returned{background:#1a0a33!important;border-color:#5c2d99!important;color:#b37feb!important;}
html.dark .stat-card{background:var(--surface);border-color:var(--border);}
html.dark .stat-card.active{background:var(--accent-light);}
html.dark .pg-btn{background:var(--surface);border-color:var(--border);}
html.dark .pg-btn.pg-active{background:var(--accent);}
html.dark .stats-card{background:var(--surface);border-color:var(--border);}
html.dark .stats-kpi-card{background:var(--surface);border-color:var(--border);}
html.dark .stats-reply-client{background:#2a1515;border-color:#5c2020;}
html.dark .stats-reply-staff{background:#142a0a;border-color:#2a5214;}
html.dark .stats-reply-none{background:#2a1f0a;border-color:#5c3d0a;}
html.dark .stats-oldest-item{background:#2a1515;border-color:#5c2020;}
html.dark .stats-oldest-item:hover{background:#381818;}
html.dark .stats-table td,html.dark .stats-table th{border-color:var(--border);}
html.dark .stats-table tr:hover td{background:var(--surface2);}

body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;font-size:13px;line-height:1.5;}

/* ── LAYOUT ─────────────────────────────────────────────── */
.app-layout{display:flex;height:100vh;overflow:hidden;}
.main-area{flex:1;display:flex;flex-direction:column;min-width:0;height:100vh;overflow:hidden;}

/* ── SIDEBAR ─────────────────────────────────────────────── */
.sidebar-logo{padding:22px 20px 18px;border-bottom:1px solid rgba(255,255,255,.08);}
.logo-mark{display:flex;align-items:center;gap:10px;}
.logo-icon{width:32px;height:32px;background:var(--accent);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:800;flex-shrink:0;}
.logo-text{font-size:16px;font-weight:700;color:#fff;letter-spacing:-.3px;}
.logo-sub{font-size:11px;color:#8b92b0;margin-top:1px;}
.sidebar-nav{flex:1;padding:12px 10px;display:flex;flex-direction:column;gap:2px;}
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-sm);color:#8b92b0;cursor:pointer;transition:all .15s;font-size:13px;font-weight:500;user-select:none;}
.nav-item:hover{background:rgba(255,255,255,.06);color:#d0d4e8;}
.nav-item.active{background:rgba(255,255,255,.1);color:#fff;}
.nav-badge{margin-left:auto;background:var(--accent);color:#fff;font-size:10px;font-weight:700;border-radius:10px;padding:1px 7px;min-width:20px;text-align:center;line-height:1.6;}
.nav-badge.red{background:var(--red);}
.sidebar-user{padding:14px 14px 14px;border-top:1px solid rgba(255,255,255,.08);position:relative;}
.sidebar-user-inner{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.user-avatar{width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0;}
.user-name{font-size:12px;font-weight:600;color:#fff;}
.user-email{font-size:11px;color:#8b92b0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px;}
.sidebar-user-actions{display:flex;gap:6px;}
.sidebar-logout{flex:1;background:rgba(255,255,255,.07);border:none;border-radius:var(--radius-sm);color:#8b92b0;font-family:'Inter',sans-serif;font-size:11px;padding:6px;cursor:pointer;transition:all .15s;}
.sidebar-logout:hover{background:rgba(255,255,255,.12);color:#fff;}
.sidebar-notif-btn{width:30px;height:30px;background:rgba(255,255,255,.07);border:none;border-radius:var(--radius-sm);color:#8b92b0;cursor:pointer;display:flex;align-items:center;justify-content:center;position:relative;transition:all .15s;flex-shrink:0;}
.sidebar-notif-btn:hover{background:rgba(255,255,255,.12);color:#fff;}
.sidebar-notif-badge{position:absolute;top:-4px;right:-4px;background:var(--red);color:#fff;font-size:9px;font-weight:700;border-radius:8px;padding:1px 4px;min-width:14px;text-align:center;line-height:1.4;}

/* ── TOPBAR ──────────────────────────────────────────────── */
.topbar{height:52px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 16px;gap:8px;flex-shrink:0;z-index:40;}
.topbar-logo{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.topbar-logo-icon{width:28px;height:28px;background:var(--accent);border-radius:6px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:800;flex-shrink:0;}
.topbar-logo-text{font-size:14px;font-weight:700;color:var(--text);white-space:nowrap;}
.topbar-sep{width:1px;height:20px;background:var(--border);flex-shrink:0;margin:0 2px;}
.topbar-title{font-size:14px;font-weight:700;color:var(--text);white-space:nowrap;}
.topbar-subtitle{font-size:12px;color:var(--text3);white-space:nowrap;}
.topbar-meta{display:flex;align-items:center;gap:14px;font-size:11px;color:var(--text3);white-space:nowrap;flex-shrink:0;}
.topbar-meta span{color:var(--accent);font-weight:600;}
/* Иконки-кнопки в топбаре */
.topbar-icon-btn{width:32px;height:32px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text2);cursor:pointer;display:flex;align-items:center;justify-content:center;position:relative;transition:all .15s;flex-shrink:0;}
.topbar-icon-btn:hover{border-color:var(--accent);color:var(--accent);}
/* Уведомления */
.topbar-notif-wrap{position:relative;flex-shrink:0;}
.topbar-notif-badge{position:absolute;top:-4px;right:-4px;background:var(--red);color:#fff;font-size:9px;font-weight:700;border-radius:8px;padding:1px 4px;min-width:14px;text-align:center;line-height:1.4;pointer-events:none;}
/* Пользователь */
.topbar-user{display:flex;align-items:center;gap:7px;flex-shrink:0;}
.topbar-username{font-size:12px;font-weight:600;color:var(--text2);white-space:nowrap;}
/* Выйти */
.topbar-logout-btn{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text2);font-family:'Inter',sans-serif;font-size:11px;font-weight:600;padding:5px 12px;cursor:pointer;transition:all .15s;flex-shrink:0;white-space:nowrap;}
.topbar-logout-btn:hover{border-color:var(--red);color:var(--red);}

/* ── CONTENT ─────────────────────────────────────────────── */
.content-area{padding:18px 24px;display:flex;flex-direction:column;gap:14px;flex:1;min-height:0;overflow:hidden;}

/* ── STAT CARDS ──────────────────────────────────────────── */
.stat-cards{display:flex;gap:12px;flex-wrap:wrap;}
.stat-card{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius);padding:14px 18px;flex:1;min-width:150px;display:flex;align-items:center;gap:12px;box-shadow:var(--shadow);cursor:pointer;transition:all .15s;}
.stat-card:hover{box-shadow:var(--shadow-md);border-color:var(--border2);}
.stat-card.active{border-color:var(--accent);background:var(--accent-light);}
.stat-card-icon{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.sci-blue{background:#e0e8ff;color:var(--accent);}
.sci-red{background:#ffe8e8;color:var(--red);}
.sci-green{background:#e8f8ef;color:var(--green);}
.sci-orange{background:#fff0dc;color:var(--orange);}
.stat-card-val{font-size:26px;font-weight:700;color:var(--text);line-height:1;margin-bottom:2px;}
.stat-card-lbl{font-size:11px;color:var(--text3);}

/* ── MAIN PANEL ──────────────────────────────────────────── */
.tasks-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);display:flex;flex-direction:column;flex:1;min-width:0;min-height:0;overflow:hidden;}
.tasks-split{display:flex;gap:14px;flex:1;min-height:0;overflow:hidden;}
.detail-col{width:380px;flex-shrink:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden;}
.detail-col.hidden{display:none;}

/* ── FILTER AREA ─────────────────────────────────────────── */
/* filter-area and filter-row defined at bottom */
.filter-select{appearance:none;background:var(--surface2) url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%239098b8' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 9px center;border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text2);font-family:'Inter',sans-serif;font-size:12px;padding:6px 26px 6px 10px;cursor:pointer;outline:none;transition:border-color .15s;}
.filter-select:hover,.filter-select:focus{border-color:var(--accent);}
.filter-search{margin-left:auto;min-width:200px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-family:'Inter',sans-serif;font-size:12px;padding:6px 10px 6px 30px;outline:none;transition:border-color .15s;background-image:url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Ccircle cx='6' cy='6' r='4.5' stroke='%239098b8' stroke-width='1.3'/%3E%3Cpath d='M9.5 9.5L12 12' stroke='%239098b8' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:10px center;}
.filter-search:focus{border-color:var(--accent);}
.filter-search::placeholder{color:var(--text3);}

/* ── STATUS CHIPS ────────────────────────────────────────── */
.status-chips-row{display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding-bottom:12px;}
.s-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;user-select:none;transition:all .18s;border:2px solid transparent;white-space:nowrap;position:relative;}
/* Chip OFF — базовый стиль (перекрывается цветными правилами ниже) */
.chip-off{background:transparent!important;opacity:.5;}
.chip-off .s-dot{opacity:0;}
/* Chip OFF — цветные обводки сохраняются для каждого типа */
.chip-reply.chip-off{border-color:var(--red)!important;color:var(--red)!important;}
.chip-wait.chip-off{border-color:var(--orange)!important;color:var(--orange)!important;}
.chip-resolved.chip-off{border-color:var(--green)!important;color:var(--green)!important;}
.chip-hidden.chip-off{border-color:#bbb!important;color:#888!important;}
.chip-vyezdnye.chip-off{border-color:var(--purple)!important;color:var(--purple)!important;}
.chip-oborudovanie.chip-off{border-color:var(--purple)!important;color:var(--purple)!important;}
.chip-unmarked.chip-off{border-color:var(--border2)!important;color:var(--text3)!important;}
/* Chip ON — яркий, чёткий */
.chip-all.chip-on{background:var(--accent);color:#fff;border-color:var(--accent);}
.chip-reply.chip-on{background:var(--red-light);border-color:var(--red);color:var(--red);}
.chip-wait.chip-on{background:var(--orange-light);border-color:var(--orange);color:var(--orange);}
.chip-resolved.chip-on{background:var(--green-light);border-color:var(--green);color:var(--green);}
.chip-hidden.chip-on{background:#f0f0f0;border-color:#bbb;color:#666;}
.chip-unmarked.chip-on{background:var(--surface2);border-color:var(--border2);color:var(--text2);}
.chip-mentioned.chip-on{background:var(--orange-light);border-color:var(--orange-border);color:var(--orange);}
.chip-vyezdnye.chip-on{background:var(--purple-light);border-color:var(--purple);color:var(--purple);}
.chip-oborudovanie.chip-on{background:var(--purple-light);border-color:var(--purple);color:var(--purple);}
.s-chip:hover{opacity:.9;transform:translateY(-1px);}
.s-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.s-count{font-size:10px;font-weight:700;background:rgba(0,0,0,.1);border-radius:8px;padding:0 5px;line-height:1.7;min-width:18px;text-align:center;}
.chip-all.chip-on .s-count{background:rgba(255,255,255,.3);}

/* ── BULK BAR (see bottom of file) ────────────────── */
.bulk-check-wrap{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text3);cursor:pointer;}
.bulk-check-wrap input{accent-color:var(--accent);cursor:pointer;}
.bulk-action-btn{display:flex;align-items:center;gap:5px;padding:5px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text2);font-family:'Inter',sans-serif;font-size:12px;cursor:pointer;transition:all .15s;}
.bulk-action-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light);}
.tf-info{margin-left:auto;font-size:12px;color:var(--text3);}

/* Column chooser */
.col-chooser-wrap{position:relative;margin-left:auto;}
.col-chooser-btn{display:flex;align-items:center;gap:5px;padding:5px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text2);font-family:'Inter',sans-serif;font-size:12px;cursor:pointer;transition:all .15s;}
.col-chooser-btn:hover{border-color:var(--accent);color:var(--accent);}
.col-menu{position:absolute;right:0;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-md);z-index:100;min-width:180px;overflow:hidden;display:none;}
.col-menu-item{display:flex;align-items:center;gap:8px;padding:9px 14px;font-size:12px;color:var(--text2);cursor:pointer;transition:background .1s;}
.col-menu-item:hover{background:var(--surface2);}
.col-menu-item input{accent-color:var(--accent);}

/* ── TABLE ───────────────────────────────────────────────── */
.table-wrap{flex:1;overflow-y:auto;min-height:0;overflow-x:auto;}
.tasks-table{width:100%;border-collapse:collapse;}
.tasks-table thead th{background:var(--surface2);padding:9px 12px;text-align:left;font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--border);white-space:nowrap;position:sticky;top:0;z-index:1;}
.tasks-table tbody tr{border-bottom:1px solid var(--border);cursor:pointer;transition:filter .1s;}
.tasks-table tbody tr:last-child{border-bottom:none;}
.tasks-table tbody tr:hover{box-shadow: inset 0 0 0 1000px rgba(0,0,0,0.03);}
.tasks-table tbody td{padding:9px 12px;vertical-align:middle;}
.tasks-table tbody tr.active-row {
  box-shadow: 0 0 0 1px #667eea, 0 4px 12px rgba(102, 126, 234, 0.2);
  border-radius: 6px;
  background: white;
  position: relative;
  z-index: 5;
  transition: all 0.2s ease;
}

/* tank-num в активной строке жирный */
.tasks-table tbody tr.active-row .task-num {
  font-weight: 700;
  /* Можете добавить легкое изменение цвета для акцента */
  /* color: #667eea; */
}

.col-check{width:36px;}
.col-num{width:72px;white-space:nowrap;}
.col-title{min-width:160px;}
.col-author{width:170px;}
.col-date{width:100px;white-space:nowrap;}
.col-prev{width:160px;}
.col-status{width:180px;}

/* Unread dot */
.unread-dot-inline{display:inline-block;width:7px;height:7px;background:var(--accent);border-radius:50%;margin-left:5px;vertical-align:middle;flex-shrink:0;}

/* Task cells */
.task-num-link{font-size:13px;font-weight:700;color:var(--text2);text-decoration:none;transition:color .15s;}
.task-num-link:hover{color:var(--accent);}
.task-title-main{font-size:13px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:400px;}
.task-title-sub{font-size:11px;color:var(--text3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px;}
.client-info{display:flex;align-items:center;gap:7px;}
.client-avatar{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0;}
.client-name{font-size:12px;font-weight:500;color:var(--text);}
.client-org{font-size:11px;color:var(--text3);}
.date-main{font-size:12px;color:var(--text2);}
.date-sub{font-size:10px;color:var(--text3);margin-top:1px;}
.preview-text{font-size:11px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px;}
.note-indicator{font-size:11px;color:#389e0d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px;}
.comment-count-badge{font-size:10px;color:var(--text3);margin-top:3px;}

/* Status badges */
.status-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:12px;font-size:11px;font-weight:600;white-space:nowrap;border:1px solid transparent;}
.status-badge .dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.sb-reply{background:var(--red-light);border-color:var(--red-border);color:var(--red);}
.sb-reply .dot{background:var(--red);}
.sb-wait{background:var(--orange-light);border-color:var(--orange-border);color:var(--orange);}
.sb-wait .dot{background:var(--orange);}
.sb-resolved{background:var(--green-light);border-color:var(--green-border);color:var(--green);}
.sb-resolved .dot{background:var(--green);}
.sb-none{background:var(--surface2);border-color:var(--border2);color:var(--text3);}
.sb-none .dot{background:var(--text3);}
.sb-vyezdnye{background:var(--purple-light);border-color:#d3adf7;color:var(--purple);}
.sb-vyezdnye .dot{background:var(--purple);}
.sb-oborudovanie{background:var(--purple-light);border-color:#d3adf7;color:var(--purple);}
.sb-oborudovanie .dot{background:var(--purple);}
.sb-hidden{background:#f5f5f5;border-color:#d9d9d9;color:#888;}
.sb-hidden .dot{background:#bbb;}
.sb-external{background:var(--red-light);border-color:var(--red-border);color:var(--red);}
.sb-external .dot{background:var(--red);}
.sb-internal{background:var(--green-light);border-color:var(--green-border);color:var(--green);}
.sb-internal .dot{background:var(--green);}
.sb-intra-open{background:#e6f4ff;border-color:#91caff;color:#0958d9;}
.sb-intra-open .dot{background:#1677ff;}
.sb-intra-work{background:#fff7e6;border-color:#ffd591;color:#d46b08;}
.sb-intra-work .dot{background:#fa8c16;}
.sb-intra-done{background:#f6ffed;border-color:#b7eb8f;color:#389e0d;}
.sb-intra-done .dot{background:#52c41a;}
.sb-intra-hold{background:#fffbe6;border-color:#ffe58f;color:#ad6800;}
.sb-intra-hold .dot{background:#faad14;}
.sb-intra-other{background:var(--surface2);border-color:var(--border2);color:var(--text2);}
.sb-intra-other .dot{background:var(--text3);}
.sb-custom{background:var(--surface2);border-color:var(--border2);color:var(--text2);}
.sb-custom .dot{background:currentColor;}

/* ── MODAL ───────────────────────────────────────────────── */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(20,24,40,.5);backdrop-filter:blur(4px);z-index:200;align-items:center;justify-content:center;padding:24px;}
.modal-overlay.open{display:flex;}
.modal{background:var(--surface);border-radius:14px;box-shadow:0 12px 48px rgba(20,24,40,.2);width:680px;max-width:100%;max-height:90vh;display:flex;flex-direction:column;overflow:hidden;}
.modal-header{padding:18px 20px 0;border-bottom:1px solid var(--border);flex-shrink:0;}
.modal-header-top{display:flex;align-items:flex-start;gap:12px;margin-bottom:10px;}
.modal-title{font-size:16px;font-weight:700;color:var(--text);line-height:1.35;}
.modal-subtitle{font-size:12px;color:var(--text3);margin-top:3px;}
.modal-ext-link{font-size:12px;color:var(--accent);text-decoration:none;font-weight:600;padding:5px 10px;border:1px solid var(--blue-border);border-radius:var(--radius-sm);background:var(--blue-light);white-space:nowrap;transition:all .15s;}
.modal-ext-link:hover{background:var(--accent);color:#fff;border-color:var(--accent);}
.modal-close-btn{background:none;border:none;font-size:20px;color:var(--text3);cursor:pointer;line-height:1;padding:3px;transition:color .15s;flex-shrink:0;}
.modal-close-btn:hover{color:var(--text);}
.modal-tabs-row{display:flex;gap:0;}
.detail-tab{padding:9px 14px;font-size:12px;font-weight:500;color:var(--text3);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .15s;white-space:nowrap;}
.detail-tab:hover{color:var(--text2);}
.detail-tab.active{color:var(--accent);border-bottom-color:var(--accent);}
.modal-scroll-body{flex:1;overflow-y:auto;min-height:0;}
.modal-footer{border-top:1px solid var(--border);flex-shrink:0;}

/* Tags in modal header */
.detail-tag{display:inline-flex;align-items:center;padding:2px 9px;border-radius:12px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;}
.priority-high{background:var(--red-light);border:1px solid var(--red-border);color:var(--red);}
.priority-med{background:var(--orange-light);border:1px solid var(--orange-border);color:var(--orange);}
.tag-green{background:var(--green-light);border:1px solid var(--green-border);color:var(--green);}
.tag-purple{background:var(--purple-light);border:1px solid #d3adf7;color:var(--purple);}
.tag-grey{background:#f5f5f5;border:1px solid #d9d9d9;color:#888;}

/* ── DETAIL SECTIONS ─────────────────────────────────────── */
.detail-section{padding:14px 20px;border-bottom:1px solid var(--border);}
.detail-section-title{font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;}
.detail-meta-grid{display:flex;flex-direction:column;gap:7px;}
.detail-meta-row{display:flex;align-items:center;gap:8px;}
.detail-meta-label{font-size:11px;color:var(--text3);min-width:90px;}
.detail-meta-val{font-size:12px;color:var(--text);font-weight:500;}
.client-dot{width:8px;height:8px;border-radius:50%;background:var(--green);display:inline-block;margin-right:4px;}
.detail-description{font-size:12px;color:var(--text2);line-height:1.65;white-space:pre-wrap;word-break:break-word;}
.detail-description blockquote,.intradesk-quote-block{border-left:3px solid var(--border2);padding-left:10px;color:var(--text3);font-style:italic;margin:4px 0;font-size:11px;}
.last-activity-item{display:flex;gap:10px;align-items:flex-start;}
.la-avatar{width:32px;height:32px;border-radius:50%;background:var(--accent);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.la-name{font-size:12px;font-weight:600;color:var(--text);}
.la-time{font-size:10px;color:var(--text3);margin-left:6px;}
.la-text{font-size:11px;color:var(--text2);margin-top:3px;line-height:1.5;}

/* Mark buttons */
.detail-marks{display:flex;gap:6px;flex-wrap:wrap;padding:10px 20px;border-bottom:1px solid var(--border);}
.mark-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:var(--radius-sm);font-size:12px;font-weight:500;border:1.5px solid var(--border);background:var(--surface2);color:var(--text2);cursor:pointer;transition:all .15s;position:relative;}
.mark-btn:hover{border-color:var(--border2);}/* Ховер с брендовым фоном для цветных кнопок */
.mark-btn.mbtn-reply:hover   {}
.mark-btn.mbtn-wait:hover    {}
.mark-btn.mbtn-resolve:hover {}
.mark-btn.mbtn-vyezdnye:hover{}
.mark-btn.mbtn-oborudovanie:hover{}
.mark-btn.mbtn-hidden:hover  {}
.mark-btn.mbtn-oborudovanie-fix:hover{}
.mark-btn.mbtn-oborudovanie-buy:hover{}
/* old class names */
.active-reply   {background:var(--red-light)!important;border-color:var(--red)!important;color:var(--red)!important;font-weight:700;}
.active-wait    {background:var(--orange-light)!important;border-color:var(--orange)!important;color:var(--orange)!important;font-weight:700;}
.active-resolve {background:var(--green-light)!important;border-color:var(--green)!important;color:var(--green)!important;font-weight:700;}
.active-vyezdnye{background:var(--purple-light)!important;border-color:#d3adf7!important;color:var(--purple)!important;font-weight:700;}
.active-oborudovanie{background:var(--purple-light)!important;border-color:#d3adf7!important;color:var(--purple)!important;font-weight:700;}
.active-hide    {background:#f5f5f5!important;border-color:#bbb!important;color:#666!important;font-weight:700;}
/* Mark buttons — неактивные всегда серые, только активная получает цвет */
.mbtn-reply, .mbtn-wait, .mbtn-resolve, .mbtn-vyezdnye,
.mbtn-oborudovanie, .mbtn-hidden, .mbtn-oborudovanie-fix,
.mbtn-oborudovanie-buy, .mbtn-oborudovanie-client-sent,
.mbtn-oborudovanie-in-repair, .mbtn-oborudovanie-repair-done,
.mbtn-oborudovanie-send-back, .mbtn-oborudovanie-returned {
  border-color: var(--border2) !important;
  color: var(--text2) !important;
  background: var(--surface2) !important;
}
/* Hover: показываем цвет кнопки */
.mark-btn.mbtn-reply:hover    { border-color:var(--red)!important;    color:var(--red)!important;    background:var(--red-light)!important; }
.mark-btn.mbtn-wait:hover     { border-color:var(--orange)!important;  color:var(--orange)!important;  background:var(--orange-light)!important; }
.mark-btn.mbtn-resolve:hover  { border-color:var(--green)!important;   color:var(--green)!important;   background:var(--green-light)!important; }
.mark-btn.mbtn-vyezdnye:hover { border-color:var(--purple)!important;  color:var(--purple)!important;  background:var(--purple-light)!important; }
.mark-btn.mbtn-oborudovanie:hover { border-color:var(--purple)!important; color:var(--purple)!important; background:var(--purple-light)!important; }
.mark-btn.mbtn-hidden:hover   { border-color:#bbb!important;           color:#666!important;           background:#f5f5f5!important; }
.mark-btn.mbtn-oborudovanie-fix:hover { border-color:#13c2c2!important; color:#08979c!important; background:#e6fffb!important; }
.mark-btn.mbtn-oborudovanie-buy:hover { border-color:#eb2f96!important; color:#c41d7f!important; background:#fff0f6!important; }
.mark-btn.mbtn-oborudovanie-client-sent:hover { border-color:#fa541c!important; color:#d4380d!important; background:#fff2e8!important; }
.mark-btn.mbtn-oborudovanie-in-repair:hover   { border-color:#13c2c2!important; color:#08979c!important; background:#e6fffb!important; }
.mark-btn.mbtn-oborudovanie-repair-done:hover { border-color:#52c41a!important; color:#389e0d!important; background:#f6ffed!important; }
.mark-btn.mbtn-oborudovanie-send-back:hover   { border-color:#1677ff!important; color:#0958d9!important; background:#e6f4ff!important; }
.mark-btn.mbtn-oborudovanie-returned:hover    { border-color:#722ed1!important; color:#531dab!important; background:#f9f0ff!important; }
/* Активная кнопка: полный цвет + жирный */
.mbtn-active { font-weight:700; }
.mbtn-active.mbtn-reply    { background:var(--red-light)!important;    border-color:var(--red)!important;    color:var(--red)!important; }
.mbtn-active.mbtn-wait     { background:var(--orange-light)!important;  border-color:var(--orange)!important;  color:var(--orange)!important; }
.mbtn-active.mbtn-resolve  { background:var(--green-light)!important;   border-color:var(--green)!important;   color:var(--green)!important; }
.mbtn-active.mbtn-vyezdnye { background:var(--purple-light)!important;  border-color:var(--purple)!important;  color:var(--purple)!important; }
.mbtn-active.mbtn-oborudovanie { background:var(--purple-light)!important; border-color:var(--purple)!important; color:var(--purple)!important; }
.mbtn-active.mbtn-hidden   { background:#f5f5f5!important; border-color:#bbb!important; color:#666!important; }
.mbtn-active.mbtn-oborudovanie-fix { background:#e6fffb!important; border-color:#13c2c2!important; color:#08979c!important; }
.mbtn-active.mbtn-oborudovanie-buy { background:#fff0f6!important; border-color:#eb2f96!important; color:#c41d7f!important; }
.mbtn-active.mbtn-oborudovanie-client-sent { background:#fff2e8!important; border-color:#fa541c!important; color:#d4380d!important; }
.mbtn-active.mbtn-oborudovanie-in-repair   { background:#e6fffb!important; border-color:#13c2c2!important; color:#08979c!important; }
.mbtn-active.mbtn-oborudovanie-repair-done { background:#f6ffed!important; border-color:#52c41a!important; color:#389e0d!important; }
.mbtn-active.mbtn-oborudovanie-send-back   { background:#e6f4ff!important; border-color:#1677ff!important; color:#0958d9!important; }
.mbtn-active.mbtn-oborudovanie-returned    { background:#f9f0ff!important; border-color:#722ed1!important; color:#531dab!important; }
.mbtn-active.mbtn-active/* Who set a mark */
.sp-mark-setby{display:flex;flex-wrap:wrap;gap:4px;padding:4px 16px 8px;}
.mset-item{font-size:10px;color:var(--text3);background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:2px 8px;}

/* Note */
.detail-note-section{padding:10px 20px;border-bottom:1px solid var(--border);}
.detail-note-empty{font-size:12px;color:var(--text3);cursor:pointer;padding:7px 12px;border:1px dashed var(--border2);border-radius:var(--radius-sm);text-align:center;transition:all .15s;}
.detail-note-empty:hover{border-color:var(--accent);color:var(--accent);}
.detail-note-text{font-size:12px;color:#389e0d;background:#f6ffed;border:1px solid #b7eb8f;border-radius:var(--radius-sm);padding:8px 12px;cursor:pointer;line-height:1.5;}
.detail-note-editor{display:flex;flex-direction:column;gap:6px;}
.detail-note-editor textarea{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-family:'Inter',sans-serif;font-size:12px;padding:8px;resize:vertical;min-height:70px;outline:none;transition:border-color .15s;width:100%;}
.detail-note-editor textarea:focus{border-color:var(--accent);}
.detail-note-actions{display:flex;gap:6px;}

/* Composer */
.detail-composer{padding:12px 20px 16px;}
.composer-textarea{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-family:'Inter',sans-serif;font-size:12px;padding:10px 12px;resize:none;outline:none;min-height:68px;transition:border-color .15s;line-height:1.5;}
.composer-textarea:focus{border-color:var(--accent);background:#fff;}
.composer-textarea::placeholder{color:var(--text3);}
.composer-footer{display:flex;align-items:center;gap:8px;margin-top:8px;}
.composer-tools{display:flex;gap:4px;}
.composer-tool{width:28px;height:28px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface2);color:var(--text3);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;font-size:12px;font-weight:700;}
.composer-tool:hover{border-color:var(--accent);color:var(--accent);}
.btn-send{margin-left:auto;background:var(--accent);border:none;border-radius:var(--radius-sm);color:#fff;font-family:'Inter',sans-serif;font-size:12px;font-weight:700;padding:7px 20px;cursor:pointer;transition:background .15s;}
.btn-send:hover{background:var(--accent-dark);}
.btn-send:disabled{opacity:.5;cursor:not-allowed;}
.autocomplete-popup{position:absolute;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);min-width:160px;z-index:300;box-shadow:var(--shadow-md);overflow:hidden;}
.autocomplete-item{padding:7px 12px;font-size:12px;cursor:pointer;color:var(--text2);}
.autocomplete-item:hover,.autocomplete-item.selected{background:var(--accent-light);color:var(--accent);}
.mention-tag{color:var(--accent);font-weight:600;}

/* Comments */
.detail-comments-list{padding:10px 20px;display:flex;flex-direction:column;gap:10px;}
.detail-comment{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;}
.detail-comment.own{border-color:#b7eb8f;background:#f6ffed;}
.dc-header{display:flex;align-items:center;gap:6px;margin-bottom:6px;}
.dc-author{font-size:12px;font-weight:600;color:var(--text);}
.dc-time{font-size:10px;color:var(--text3);}
.dc-edited{font-size:10px;color:var(--text3);font-style:italic;}
.dc-text{font-size:12px;color:var(--text2);line-height:1.55;white-space:pre-wrap;word-break:break-word;}
.dc-actions{display:flex;gap:6px;margin-top:6px;}
.dc-btn{font-size:10px;color:var(--text3);cursor:pointer;padding:2px 6px;border:1px solid var(--border);border-radius:4px;background:var(--surface);transition:all .15s;}
.dc-btn:hover{border-color:var(--accent);color:var(--accent);}
.dc-btn.del:hover{border-color:var(--red);color:var(--red);}

/* History */
.history-entry{padding:10px 20px;border-bottom:1px solid var(--border);}
.he-header{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.he-author{font-size:12px;font-weight:600;}
.he-author.staff{color:var(--accent);}
.he-author.client{color:var(--red);}
.he-time{font-size:10px;color:var(--text3);margin-left:auto;}
.he-type{display:inline-block;font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--text3);background:var(--surface2);border:1px solid var(--border);border-radius:3px;padding:1px 6px;margin-bottom:4px;}
.he-type.comment{color:var(--accent);background:var(--accent-light);border-color:var(--blue-border);}
.he-text{font-size:12px;color:var(--text2);line-height:1.6;white-space:pre-wrap;word-break:break-word;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 10px;}
.he-pill{font-size:12px;color:var(--text2);}

/* ── SETTINGS MODAL ──────────────────────────────────────── */
.settings-overlay{display:none;position:fixed;inset:0;background:rgba(20,24,40,.5);backdrop-filter:blur(3px);z-index:200;align-items:center;justify-content:center;padding:24px;}
.settings-overlay.open{display:flex;}
.settings-box{background:var(--surface);border-radius:14px;box-shadow:var(--shadow-md);max-width:980px;width:100%;max-height:88vh;overflow-y:auto;}
.settings-header{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid var(--border);}
.settings-title{font-size:15px;font-weight:700;color:var(--text);}
.settings-body{padding:20px 24px 24px;}
.settings-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
.settings-tab-btn{border:1px solid var(--border);background:var(--surface2);color:var(--text2);font-family:inherit;font-size:12px;font-weight:600;border-radius:var(--radius-sm);padding:6px 10px;cursor:pointer;}
.settings-tab-btn.active{background:var(--accent-light);border-color:var(--accent);color:var(--accent);}
.settings-tab-pane{display:block;}
.settings-section-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text3);margin-bottom:12px;}
.form-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px;}
.form-field{display:flex;flex-direction:column;gap:5px;flex:1;min-width:160px;}
.form-field label{font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.05em;}
.form-field input{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-family:'Inter',sans-serif;font-size:12px;padding:8px 11px;outline:none;transition:border-color .2s;}
.form-field select{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-family:'Inter',sans-serif;font-size:12px;padding:8px 11px;outline:none;transition:border-color .2s;}
.form-field input:focus{border-color:var(--accent);}
.form-field select:focus{border-color:var(--accent);}
.users-table{width:100%;border-collapse:collapse;font-size:12px;margin-top:10px;}
.users-table th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--text3);padding:6px 10px;border-bottom:1px solid var(--border);}
.users-table td{padding:8px 10px;border-bottom:1px solid var(--border);color:var(--text2);vertical-align:middle;}
.users-table tr:last-child td{border-bottom:none;}
.inline-pass{background:var(--surface2);border:1px solid var(--border);border-radius:4px;color:var(--text);font-family:'Inter',sans-serif;font-size:11px;padding:4px 8px;width:130px;outline:none;}
.inline-pass:focus{border-color:var(--accent);}

/* ── CONFIRM MODAL ───────────────────────────────────────── */
.confirm-overlay{display:none;position:fixed;inset:0;background:rgba(20,24,40,.5);z-index:300;align-items:center;justify-content:center;}
.confirm-overlay.open{display:flex;}
.confirm-box{background:var(--surface);border-radius:12px;padding:24px 28px;max-width:360px;width:100%;box-shadow:var(--shadow-md);}
.confirm-title{font-size:15px;font-weight:700;color:var(--text);margin-bottom:8px;}
.confirm-msg{font-size:13px;color:var(--text2);margin-bottom:16px;}
.confirm-actions{display:flex;gap:8px;}

/* ── MENTIONS ────────────────────────────────────────────── */
.mentions-dropdown{position:absolute;top:calc(100% + 8px);right:0;min-width:280px;background:var(--sidebar-bg);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);box-shadow:0 8px 32px rgba(0,0,0,.4);z-index:100;display:none;overflow:hidden;max-height:300px;overflow-y:auto;}
.mentions-dropdown.open{display:block;}
.mentions-dd-header{padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.08);font-size:12px;font-weight:600;color:#fff;}
.mention-item{padding:9px 14px;display:flex;align-items:center;gap:8px;cursor:pointer;transition:background .1s;border-bottom:1px solid rgba(255,255,255,.06);}
.mention-item:hover{background:rgba(255,255,255,.07);}
.mention-item.unread{background:rgba(250,140,22,.1);}
.m-dot{width:6px;height:6px;border-radius:50%;background:var(--orange);flex-shrink:0;}
.m-dot.read{background:rgba(255,255,255,.2);}
.m-task{font-size:12px;font-weight:700;color:var(--accent);}
.m-by{font-size:11px;color:rgba(255,255,255,.6);}
.m-time{font-size:10px;color:rgba(255,255,255,.35);margin-left:auto;white-space:nowrap;}
.mentions-empty{padding:16px 14px;font-size:12px;color:rgba(255,255,255,.35);text-align:center;}

/* ── UPDATE BANNER ───────────────────────────────────────── */
.update-banner{display:none;align-items:center;gap:10px;background:var(--accent-light);border:1px solid #c7d4ff;border-radius:var(--radius);padding:10px 16px;font-size:12px;color:var(--accent);font-weight:500;}
.update-banner.visible{display:flex;}
.update-banner-btn{background:var(--accent);border:none;border-radius:var(--radius-sm);color:#fff;font-family:'Inter',sans-serif;font-size:11px;font-weight:700;padding:5px 14px;cursor:pointer;margin-left:auto;}

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:5px;padding:7px 16px;border-radius:var(--radius-sm);font-family:'Inter',sans-serif;font-size:12px;font-weight:700;cursor:pointer;transition:all .15s;white-space:nowrap;border:none;}
.btn-primary{background:var(--accent);color:#fff;}
.btn-primary:hover{background:var(--accent-dark);}
.btn-default{background:var(--surface2);border:1px solid var(--border);color:var(--text2);}
.btn-default:hover{border-color:var(--accent);color:var(--accent);}
.btn-danger{background:var(--red-light);border:1px solid var(--red-border);color:var(--red);}
.btn-danger:hover{background:#ffe0de;}
.btn:disabled{opacity:.45;cursor:not-allowed;}

/* ── LOGIN ───────────────────────────────────────────────── */
.login-overlay{position:fixed;inset:0;background:linear-gradient(135deg,#e8ecf7,#f5f7ff);z-index:300;display:flex;align-items:center;justify-content:center;}
.login-overlay.hidden{display:none;}
.login-box{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:36px 40px;width:360px;box-shadow:0 8px 40px rgba(30,34,53,.12);}
.login-logo{display:flex;align-items:center;gap:10px;margin-bottom:6px;}
.login-logo-icon{width:36px;height:36px;background:var(--accent);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;font-weight:800;}
.login-logo-text{font-size:18px;font-weight:800;color:var(--text);}
.login-sub{font-size:12px;color:var(--text3);margin-bottom:24px;}
.login-field{margin-bottom:14px;}
.login-field label{display:block;font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px;}
.login-field input{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-family:'Inter',sans-serif;font-size:13px;padding:10px 13px;outline:none;transition:border-color .2s;}
.login-field input:focus{border-color:var(--accent);background:#fff;}
.login-btn{width:100%;margin-top:6px;background:var(--accent);border:none;border-radius:var(--radius-sm);color:#fff;font-family:'Inter',sans-serif;font-size:13px;font-weight:700;padding:11px;cursor:pointer;transition:background .15s;}
.login-btn:hover{background:var(--accent-dark);}
.login-error{font-size:12px;color:var(--red);min-height:18px;margin-top:8px;text-align:center;}

/* ── STATE BOX / SPINNER ─────────────────────────────────── */
.state-box{padding:48px 24px;text-align:center;color:var(--text3);}
.state-box .icon{font-size:36px;margin-bottom:12px;display:block;}
.state-box .msg{font-size:14px;margin-bottom:6px;color:var(--text2);}
.state-box .sub{font-size:12px;}
.spinner{display:inline-block;width:28px;height:28px;border:2px solid var(--border2);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;margin-bottom:12px;}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── TOAST ───────────────────────────────────────────────── */
.toast-wrap{position:fixed;bottom:20px;right:20px;z-index:400;display:flex;flex-direction:column;gap:6px;pointer-events:none;}
.toast{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:10px 16px;font-size:12px;color:var(--text2);max-width:320px;box-shadow:var(--shadow-md);animation:toastIn .2s ease;}
.toast.success{border-color:var(--green-border);background:var(--green-light);color:#389e0d;}
.toast.warn{border-color:var(--red-border);background:var(--red-light);color:var(--red);}
.toast.info{border-color:#91caff;background:var(--blue-light);color:var(--blue);}
.toast.mention{border-color:var(--orange-border);background:var(--orange-light);color:var(--orange);}
@keyframes toastIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ── MISC ────────────────────────────────────────────────── */
.divider{border:none;border-top:1px solid var(--border);margin:14px 0;}
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:#b8bdd4;}

/* ── ROW COLORS BY STATUS ────────────────────────────────── */
.tasks-table tbody tr.row-reply    { background: #fff5f5; }
.tasks-table tbody tr.row-reply:hover    { background: #ffeeee; }
.tasks-table tbody tr.row-wait     { background: #fffbf0; }
.tasks-table tbody tr.row-wait:hover     { background: #fff4d6; }
.tasks-table tbody tr.row-resolved { background: #f6ffed; }
.tasks-table tbody tr.row-resolved:hover { background: #effde3; }
.tasks-table tbody tr.row-vyezdnye { background: #f9f0ff; }
.tasks-table tbody tr.row-vyezdnye:hover { background: #f3e6ff; }
.tasks-table tbody tr.row-oborudovanie { background: #f9f0ff; }
.tasks-table tbody tr.row-oborudovanie:hover { background: #f3e6ff; }
.tasks-table tbody tr.row-hidden   { background: #fafafa; opacity:.6; }
.tasks-table tbody tr.row-external { background: #fff9f0; }
.tasks-table tbody tr.row-external:hover { background: #fff3e0; }
.tasks-table tbody tr.row-internal { background: #f0fff4; }
.tasks-table tbody tr.row-internal:hover { background: #e4ffe9; }
.tasks-table tbody tr.row-reply    td:first-child { box-shadow: inset 3px 0 0 var(--red); }
.tasks-table tbody tr.row-wait     td:first-child { box-shadow: inset 3px 0 0 var(--orange); }
.tasks-table tbody tr.row-resolved td:first-child { box-shadow: inset 3px 0 0 var(--green); }
.tasks-table tbody tr.row-vyezdnye td:first-child { box-shadow: inset 3px 0 0 var(--purple); }
.tasks-table tbody tr.row-oborudovanie td:first-child { box-shadow: inset 3px 0 0 var(--purple); }
.tasks-table tbody tr.row-hidden   td:first-child { box-shadow: inset 3px 0 0 #ccc; }
.tasks-table tbody tr.row-external td:first-child { box-shadow: inset 3px 0 0 var(--orange); }
.tasks-table tbody tr.row-internal td:first-child { box-shadow: inset 3px 0 0 var(--green); }

/* ── CHIP ACTIVE/INACTIVE ────────────────────────────────── */
.s-chip.chip-active {
  opacity: 1;
  box-shadow: 0 0 0 2px currentColor;
  filter: none;
}
.s-chip.chip-inactive {
  opacity: .45;
  filter: grayscale(.5);
  box-shadow: none;
}
.s-chip.chip-active.s-chip-all { background: var(--accent); color: #fff; box-shadow: 0 0 0 2px var(--accent-dark); }
.s-chip.chip-inactive.s-chip-all { background: var(--surface2); border-color: var(--border); color: var(--text3); box-shadow: none; }

/* ── TASK MODAL BOX ──────────────────────────────────────── */
.task-modal-box {
  max-width: 780px;
  width: 100%;
  max-height: 90vh;
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.task-modal-box .modal-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.modal-open-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
  border: 1px solid var(--blue-border);
  border-radius: var(--radius-sm);
  padding: 5px 12px;
  background: var(--accent-light);
  transition: all .15s;
  white-space: nowrap;
}
.modal-open-link:hover { background: #d6e0ff; }

/* ── SETTINGS MODAL BODY ─────────────────────────────────── */
.modal-body-pad { padding: 20px 24px 24px; }

/* ── UNREAD DOT INLINE ───────────────────────────────────── */
.unread-dot-inline {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  margin-left: 5px;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ── COLUMN PICKER MENU ──────────────────────────────────── */
.col-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  min-width: 190px;
  z-index: 100;
  padding: 6px 0;
  overflow: hidden;
}
.col-menu.open { display: block; }
.col-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  font-size: 12px;
  color: var(--text2);
  cursor: pointer;
  transition: background .1s;
  user-select: none;
}
.col-menu-item:hover { background: var(--surface2); }
.col-menu-item input[type=checkbox] { accent-color: var(--accent); width: 14px; height: 14px; cursor: pointer; }

/* ── NO SEPARATE DETAIL COLUMN IN THIS VERSION ───────────── */
.tasks-list-col { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden; }

/* ── SIDE PANEL HEADER OVERRIDE ─────────────────────────── */
.detail-col .modal-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.detail-col .detail-marks {
  padding: 8px 16px;
  flex-wrap: wrap;
}
.detail-col .detail-note-section {
  padding: 8px 16px;
}
.detail-col #modal-body {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 14px 16px;
}
.detail-col .detail-composer {
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.detail-col .detail-tabs {
  padding: 0 16px;
  flex-shrink: 0;
}

/* ── SIDE PANEL (sp-*) ───────────────────────────────────── */
.sp-header { display:flex; align-items:flex-start; gap:10px; padding:14px 16px; border-bottom:1px solid var(--border); flex-shrink:0; }
.sp-badges { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:5px; }
.sp-header-actions { display:flex; gap:6px; align-items:center; flex-shrink:0; }
.sp-ext-link { display:flex; align-items:center; justify-content:center; gap:6px; width:100%; padding:8px 12px; border:1px solid var(--accent-border,rgba(91,127,255,.35)); border-radius:var(--radius-sm); background:var(--accent-light); color:var(--accent); text-decoration:none; font-size:12px; font-weight:600; letter-spacing:.04em; transition:all .15s; box-sizing:border-box; }
.sp-ext-link:hover { background:var(--accent); color:#fff; border-color:var(--accent); }
.sp-close-btn { background:none; border:none; font-size:20px; color:var(--text3); cursor:pointer; line-height:1; padding:3px; transition:color .15s; }
.sp-close-btn:hover { color:var(--text); }
.sp-marks { display:flex; flex-wrap:wrap; gap:5px; padding:8px 16px; border-bottom:1px solid var(--border); flex-shrink:0;justify-content: center; }
.sp-note { padding:8px 16px; border-bottom:1px solid var(--border); flex-shrink:0; }
.sp-tabs { display:flex; padding:0 16px; border-bottom:1px solid var(--border); flex-shrink:0; }
.sp-body { flex:1; overflow-y:auto; min-height:0; padding:12px 16px; }
.sp-composer { padding:10px 16px; border-top:1px solid var(--border); flex-shrink:0; }
.sp-section { margin-bottom:12px; }
.sp-section-title { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text3); margin-bottom:6px; }

/* ── WHO-ANSWERED LABEL (inside client cell) ─────────────── */
.who-label { display:block; font-size:10px; font-weight:600; margin-top:2px; letter-spacing:.02em; }
.who-internal { color: var(--green); }
.who-external { color: var(--red); }
.who-none     { color: var(--text3); font-weight:400; }

/* ── AVATAR RING (who answered) ──────────────────────────── */
.client-avatar.ring-internal {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--green);
}
.client-avatar.ring-external {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--red);
}
.client-avatar.ring-none {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--border2);
}

/* ── UNREAD ROW — more visible ───────────────────────────── */
.tasks-table tbody tr.row-unread {
  background: #eef2ff !important;
}
.tasks-table tbody tr.row-unread:hover {
  background: #e4eaff !important;
}
.tasks-table tbody tr.row-unread td:first-child {
  box-shadow: inset 3px 0 0 var(--accent);
}
.tasks-table tbody tr.row-unread .task-num {
  color: var(--accent);
  font-weight: 700;
}
.unread-dot-inline {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  margin-left: 5px;
  vertical-align: middle;
  box-shadow: 0 0 0 2px rgba(91,127,255,.25);
}

/* ── INLINE STATUS PICKER ─────────────────────────────────── */
.inline-status-picker {
  position: relative;
  display: inline-block;
  cursor: pointer;
}
.inline-status-picker .isp-dropdown {
  display: none;
  position: fixed; /* fixed so it escapes any overflow:hidden parent */
  z-index: 500;
}
/* Невидимая зона между бейджем и списком — курсор не выходит из «цепочки» hover */
.inline-status-picker .isp-dropdown::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  height: 10px;
}
.inline-status-picker .isp-dropdown.isp-drop-up::before {
  top: auto;
  bottom: -10px;
  height: 10px;
}
.inline-status-picker:hover .isp-dropdown,
.inline-status-picker.isp-open .isp-dropdown {
  display: block;
}
.isp-dropdown-inner {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  min-width: 160px;
  padding: 4px 0;
  white-space: nowrap;
}
.isp-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  font-size: 12px;
  color: var(--text2);
  cursor: pointer;
  transition: background .1s;
}
.isp-item:hover { background: var(--surface2); color: var(--text); }
.isp-item.isp-active { font-weight: 600; background: var(--accent-light); color: var(--accent); }
.isp-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

/* Hide update banner — auto-reload is on */
.update-banner { display: none !important; }

/* ── DATE AGO ────────────────────────────────────────────── */
.date-ago {
  font-size: 10px;
  color: var(--accent);
  margin-top: 1px;
  font-weight: 500;
}

/* ══════════════════════════════════════════════════════
   STATISTICS PAGE
   ══════════════════════════════════════════════════════ */
#stats-page {
  flex-direction: column;
  overflow-y: auto;
  background: var(--bg);
  padding: 20px 24px;
  gap: 16px;
}
.stats-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: var(--radius-sm);
  background: var(--surface2); border: 1px solid var(--border);
  color: var(--text2); font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all .15s; white-space: nowrap;
}
.stats-btn:hover { border-color: var(--accent); color: var(--accent); }
.stats-btn.active { background: var(--accent-light); border-color: var(--accent); color: var(--accent); }

/* KPI row */
.stats-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 28px 24px 60px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── KPI cards ──────────────────────────────────────────────── */
.stats-kpi-row  { display:flex; gap:12px; flex-wrap:wrap; }
.stats-kpi-card {
  flex: 1; min-width: 140px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: box-shadow .15s;
}
.stats-kpi-card:hover { box-shadow: 0 4px 18px rgba(0,0,0,.09); }
.stats-kpi-icon { opacity: .75; margin-bottom: 2px; }
.stats-kpi-val  { font-size: 30px; font-weight: 800; line-height: 1; }
.stats-kpi-lbl  { font-size: 12px; color: var(--text3); font-weight: 500; }

.stats-kpi-blue   { border-top: 3px solid var(--accent); }
.stats-kpi-blue   .stats-kpi-val, .stats-kpi-blue   .stats-kpi-icon { color: var(--accent); }
.stats-kpi-accent { border-top: 3px solid var(--s-indigo); }
.stats-kpi-accent .stats-kpi-val, .stats-kpi-accent .stats-kpi-icon { color: var(--s-indigo); }
.stats-kpi-green  { border-top: 3px solid var(--s-teal); }
.stats-kpi-green  .stats-kpi-val, .stats-kpi-green  .stats-kpi-icon { color: var(--s-teal); }
.stats-kpi-orange { border-top: 3px solid var(--orange); }
.stats-kpi-orange .stats-kpi-val, .stats-kpi-orange .stats-kpi-icon { color: var(--orange); }
.stats-kpi-red    { border-top: 3px solid var(--red); }
.stats-kpi-red    .stats-kpi-val, .stats-kpi-red    .stats-kpi-icon { color: var(--red); }
.stats-kpi-teal   { border-top: 3px solid #0d9488; }
.stats-kpi-teal   .stats-kpi-val, .stats-kpi-teal   .stats-kpi-icon { color: #0d9488; }
.stats-kpi-indigo { border-top: 3px solid #7c3aed; }
.stats-kpi-indigo .stats-kpi-val, .stats-kpi-indigo .stats-kpi-icon { color: #7c3aed; }

/* ── Shared card ────────────────────────────────────────────── */
.stats-charts-row { display:flex; gap:16px; flex-wrap:wrap; }
.stats-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
}
.stats-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text2);
  letter-spacing: .02em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

/* ── Timing ─────────────────────────────────────────────────── */
.stats-timing-grid { display:flex; gap:10px; }
.stats-timing-cell {
  flex: 1; text-align: center;
  padding: 12px 8px;
  background: var(--surface2);
  border-radius: 10px;
}
.stats-timing-val  { font-size: 20px; font-weight: 800; color: var(--accent); }
.stats-timing-muted .stats-timing-val { color: var(--text2); font-size: 17px; }
.stats-timing-lbl  { font-size: 11px; color: var(--text3); margin-top: 3px; }
.stats-timing-note { font-size: 11px; color: var(--text3); margin-top: 8px; }

/* ── Month heatmap (12 cells) ───────────────────────────────── */
.stats-month-hm {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.stats-month-hm-cell {
  flex: 1;
  min-width: 40px;
  height: 56px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: default;
  transition: transform .12s;
  background: color-mix(in srgb, var(--accent) calc(var(--hi) * 100%), var(--surface2));
}
.stats-month-hm-cell[style*="--hi:0.000"] { background: var(--surface2); }
.stats-month-hm-cell:hover { transform: scale(1.08); z-index: 5; position: relative; }
.stats-month-hm-val {
  font-size: 14px;
  font-weight: 800;
  color: rgba(255,255,255,0);
  line-height: 1;
  transition: color .12s;
}
.stats-month-hm-cell:hover .stats-month-hm-val { color: white; }
.stats-month-hm-lbl {
  font-size: 10px;
  font-weight: 700;
  color: var(--text2);
}
html.dark .stats-month-hm-cell:hover .stats-month-hm-val { color: rgba(255,255,255,.95); }

/* ── Heatmap ─────────────────────────────────────────────────── */
.stats-heatmap-wrap  { display:flex; flex-direction:column; gap:2px; overflow-x:auto; }
.stats-heatmap-hours { display:flex; align-items:center; gap:2px; padding-left:34px; }
.stats-heatmap-corner{ width:34px; flex-shrink:0; }
.stats-hm-hlbl { width:22px; flex-shrink:0; font-size:9px; color:var(--text3); text-align:center; }
.stats-hm-row  { display:flex; align-items:center; gap:2px; }
.stats-hm-dlbl { width:32px; flex-shrink:0; font-size:10px; color:var(--text2); font-weight:700; text-align:right; padding-right:5px; }
.stats-hm-cell {
  width: 22px; height: 22px;
  border-radius: 4px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 8px; font-weight: 700;
  cursor: default;
  transition: transform .1s;
  /* colour: interpolate from --surface2 → accent using --hi (0–1) */
  background: color-mix(in srgb, var(--accent) calc(var(--hi) * 100%), var(--surface2));
  color: transparent;   /* hide number by default, show on hover via title */
}
.stats-hm-cell[style*="--hi:0.000"] { background: var(--surface2); }
.stats-hm-cell:hover  { transform: scale(1.35); z-index: 5; position: relative; }
/* show number only when there's activity */
.stats-hm-cell span   { pointer-events: none; color: rgba(255,255,255,.0); }
.stats-hm-cell:hover span { color: white; }

.stats-hm-legend {
  display:flex; align-items:center; gap:3px;
  margin-top:8px; padding-left:34px;
  font-size:10px; color:var(--text3);
}
.stats-hm-leg-cell {
  width: 20px; height: 13px; border-radius: 3px;
  background: color-mix(in srgb, var(--accent) calc(var(--hi) * 100%), var(--surface2));
}
.stats-hm-leg-lbl { margin: 0 5px; }

/* dark mode: text on hot cells */
html.dark .stats-hm-cell:hover span { color: rgba(255,255,255,.95); }

/* ── Line chart ─────────────────────────────────────────────── */
.stats-line-chart   { display:flex; flex-direction:column; gap:4px; position:relative; }
.stats-svg          { width:100%; height:130px; display:block; overflow:visible; }
.stats-line-xlabels {
  display:flex; justify-content:space-between;
  font-size:10px; color:var(--text3); padding:0 2px;
}
.stats-line-xlabels span { flex:1; text-align:center; }
.line-dot { cursor:pointer; transition:r .12s; }
.line-dot:hover { r:7; }
.stats-line-tooltip {
  position: absolute;
  background: var(--text);
  color: var(--surface);
  font-size: 12px; font-weight: 600;
  padding: 5px 11px;
  border-radius: 7px;
  pointer-events: none;
  white-space: nowrap;
  z-index: 20;
  box-shadow: 0 3px 10px rgba(0,0,0,.2);
}

/* ── Open-tickets week/month compare ────────────────────────── */
.stats-open-wrap { display:flex; gap:16px; align-items: stretch; }
.stats-open-chart { flex:1; min-width:0; }
.stats-open-compare {
  display: flex;
  flex-direction: column;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  flex-shrink: 0;
  min-width: 100px;
  overflow: hidden;
}
.soc-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 14px;
}
.soc-divider { height:1px; background:var(--border); flex-shrink:0; }
.soc-val {
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
}
.soc-label {
  font-size: 9px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}
.soc-sep { display: none; }
.stats-wdiff {
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 8px;
  margin-top: 3px;
  white-space: nowrap;
}
.stats-wdiff-up   { background: color-mix(in srgb,var(--red)    15%,transparent); color: var(--red); }
.stats-wdiff-down { background: color-mix(in srgb,var(--green)  15%,transparent); color: var(--green); }
.stats-wdiff-flat { background: var(--surface2); color: var(--text3); }

/* ── Activity hover label ────────────────────────────────────── */
.stats-act-hover-label {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 5px;
  z-index: 10;
}
.stats-activity-col:hover .stats-act-hover-label { opacity: 1; }
.stats-activity-col:hover .stats-activity-bar { filter: brightness(1.2) saturate(1.15); }
.stats-activity-bar { transition: filter .15s, height .2s; }
.sahl-cr { color: var(--accent); }
.sahl-sep { color: var(--text3); margin: 0 1px; }
.sahl-cl  { color: var(--green); }

/* ── Activity tooltip (floating, kept for other use) ─────────── */
.stats-act-tooltip {
  display: none;
  position: fixed;
  background: var(--text);
  color: var(--surface);
  font-size: 12px;
  line-height: 1.5;
  padding: 6px 12px;
  border-radius: 7px;
  pointer-events: none;
  white-space: nowrap;
  z-index: 9999;
  box-shadow: 0 3px 12px rgba(0,0,0,.22);
}

/* ── Bar chart (generic) ────────────────────────────────────── */
.stats-bar-chart { display:flex; flex-direction:column; gap:9px; }
.stats-bar-row   { display:flex; align-items:center; gap:10px; }
.stats-bar-label {
  font-size: 12px; color: var(--text2);
  width: 88px; flex-shrink: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stats-bar-track {
  flex: 1; height: 10px;
  background: var(--surface2); border-radius: 5px; overflow: hidden;
  position: relative;
}
.stats-bar-fill  { height:10px; border-radius:5px; transition:width .5s cubic-bezier(.4,0,.2,1); }
.stats-bar-count { font-size:12px; font-weight:700; color:var(--text2); width:28px; text-align:right; flex-shrink:0; }
.stats-bar-pct   { font-size:11px; color:var(--text3); width:34px; text-align:right; flex-shrink:0; }

/* ── Executor bars ──────────────────────────────────────────── */
.stats-exec-bar-done {
  position: absolute; left:0; top:0; height:100%;
  background: color-mix(in srgb, var(--s-teal) 40%, var(--surface2));
  border-radius: 5px; transition: width .5s;
}
.stats-exec-bar-open {
  position: absolute; left:0; top:0; height:100%;
  background: var(--s-indigo); border-radius: 5px;
  transition: width .5s;
}
.stats-exec-open-badge {
  font-size: 11px; color: var(--s-indigo);
  background: color-mix(in srgb, var(--s-indigo) 12%, transparent);
  padding: 1px 7px; border-radius: 10px;
  white-space: nowrap; flex-shrink: 0;
}
.stats-exec-legend {
  display: flex; gap: 16px;
  margin-top: 6px; padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 11px; color: var(--text3);
}
.stats-exec-leg-item { display:flex; align-items:center; gap:5px; }
.stats-exec-leg-dot  { width:10px; height:10px; border-radius:2px; flex-shrink:0; }

/* ── Repeat clients ─────────────────────────────────────────── */
.stats-repeat-grid { display:flex; flex-direction:column; gap:9px; }
.stats-repeat-row  { display:flex; align-items:center; gap:10px; }
.stats-repeat-name {
  font-size: 12px; color: var(--text2);
  width: 160px; flex-shrink: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stats-repeat-track {
  flex: 1; height: 12px;
  background: var(--surface2); border-radius: 6px;
  position: relative; overflow: hidden;
}
.stats-repeat-bar-total {
  position: absolute; left:0; top:0; height:100%;
  background: color-mix(in srgb, var(--accent) 25%, var(--surface2));
  border-radius: 6px; transition: width .5s;
}
.stats-repeat-bar-open {
  position: absolute; left:0; top:0; height:100%;
  background: var(--accent); border-radius: 6px; transition: width .5s;
}
.stats-repeat-counts { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.stats-repeat-total  { font-size:13px; font-weight:700; color:var(--text); min-width:20px; text-align:right; }
.stats-repeat-open   {
  font-size: 11px; color: var(--accent);
  background: var(--accent-light);
  padding: 1px 7px; border-radius: 10px;
}

/* ── Donut + legend ─────────────────────────────────────────── */
.stats-donut-wrap { display:flex; justify-content:center; margin-bottom:14px; }
.stats-donut-svg  { width:140px; height:140px; transform:rotate(-90deg); }
.stats-donut-svg text { transform:rotate(90deg); transform-origin:70px 70px; }
.stats-legend      { display:flex; flex-direction:column; gap:7px; }
.stats-legend-item { display:flex; align-items:center; gap:8px; font-size:12px; }
.stats-legend-dot  { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.stats-legend-lbl  { flex:1; color:var(--text2); }
.stats-legend-val  { font-weight:700; color:var(--text); min-width:24px; text-align:right; }
.stats-legend-pct  { color:var(--text3); min-width:36px; text-align:right; }

/* ── Empty state ────────────────────────────────────────────── */
.stats-empty { color:var(--text3); font-size:13px; text-align:center; padding:20px 0; }

/* ── Dark tweaks ────────────────────────────────────────────── */
html.dark .stats-kpi-card:hover { box-shadow: 0 4px 22px rgba(0,0,0,.4); }
html.dark .stats-card           { background: var(--surface); }

/* ── Topbar nav tabs ──────────────────────────────────── */
.topbar-nav-tabs { display:flex; gap:2px; background:var(--surface2); border-radius:8px; padding:3px; }
.nav-tab {
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 14px; border:none; background:transparent;
  color:var(--text3); font-size:12px; font-weight:500;
  font-family:inherit; cursor:pointer; border-radius:6px;
  transition:all .15s; white-space:nowrap;
}
.nav-tab:hover { background:var(--surface); color:var(--text2); }
.nav-tab-active { background:var(--surface)!important; color:var(--accent)!important; font-weight:700; box-shadow:0 1px 4px rgba(0,0,0,.1); }

/* ── Activity chart (16 weeks bars) ──────────────────── */
.stats-activity-chart { display:flex; gap:6px; align-items:flex-end; height:130px; }
.stats-activity-chart-14 { gap:3px; }
.stats-activity-col { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; height:100%; justify-content:flex-end; }
.stats-activity-bar-wrap { flex:1; width:100%; display:flex; flex-direction:column; justify-content:flex-end; position:relative; }
.stats-activity-bar { width:100%; background:var(--accent); border-radius:3px 3px 0 0; transition:height .4s; position:relative; z-index:2; }
.stats-activity-bar-green { background:var(--green); }
.stats-activity-bar-bg { background:var(--border2); position:absolute; bottom:0; left:0; z-index:1; width:100%; }
.stats-activity-count { font-size:9px; font-weight:700; color:var(--text3); min-height:13px; }
.stats-activity-label { font-size:9px; color:var(--text3); white-space:nowrap; transform:rotate(-35deg); transform-origin:center; margin-top:3px; }

/* ── Oldest open list ────────────────────────────────── */
.stats-oldest-list { display:flex; flex-direction:column; gap:6px; }
.stats-oldest-item {
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; background:var(--surface2);
  border-radius:8px; cursor:pointer; transition:background .12s; font-size:12px;
}
.stats-oldest-item:hover { background:var(--accent-light); }
.stats-oldest-num  { font-weight:700; color:var(--accent); flex-shrink:0; min-width:48px; }
.stats-oldest-name { flex:1; color:var(--text2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stats-oldest-age  { font-weight:700; flex-shrink:0; }

/* ── Timing periods table ────────────────────────────── */
.stats-timing-periods { display:flex; flex-direction:column; gap:0; }
.stats-timing-period-row {
  display:grid; grid-template-columns:80px 1fr 1fr 60px;
  gap:8px; align-items:center;
  padding:7px 10px; border-radius:8px;
  font-size:12px;
  transition:background .1s;
}
.stats-timing-period-row:hover { background:var(--surface2); }
.stats-timing-period-hdr {
  display:grid; grid-template-columns:80px 1fr 1fr 60px;
  gap:8px; padding:0 10px 6px;
  font-size:10px; font-weight:700; color:var(--text3);
  text-transform:uppercase; letter-spacing:.05em;
  border-bottom:1px solid var(--border); margin-bottom:4px;
}
.stats-tpr-period { color:var(--text2); font-weight:600; }
.stats-tpr-val    { font-weight:700; color:var(--accent); }
.stats-tpr-med    { font-weight:700; color:var(--s-teal,#0d9488); }
.stats-tpr-cnt    { color:var(--text3); font-size:11px; text-align:right; }
.stats-timing-note { font-size:11px; color:var(--text3); padding:0 10px; }

/* ── Clients expandable list ─────────────────────────── */
.stats-clients-card { }
.stats-clients-header {
  display:flex; align-items:center; gap:8px; cursor:pointer;
  user-select:none;
}
.stats-clients-toggle {
  margin-left:auto; font-size:11px; color:var(--text3);
  background:var(--surface2); border:1px solid var(--border);
  border-radius:6px; padding:2px 10px; cursor:pointer;
  transition:all .15s; flex-shrink:0;
}
.stats-clients-toggle:hover { border-color:var(--accent); color:var(--accent); }
.stats-clients-filter {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.stats-clients-check-wrap {
  display:flex; align-items:center; gap:6px;
  font-size:12px; color:var(--text2); cursor:pointer; user-select:none;
  background:var(--surface2); border:1px solid var(--border);
  border-radius:6px; padding:4px 10px; transition:all .15s;
}
.stats-clients-check-wrap:hover { border-color:var(--accent); }
.stats-clients-check-wrap input { cursor:pointer; accent-color:var(--accent); }
.stats-clients-list { display:flex; flex-direction:column; gap:7px; }
.stats-clients-row  { display:flex; align-items:center; gap:10px; }
.stats-clients-row-clickable { cursor:pointer; border-radius:6px; transition:background .13s; padding:3px 4px; margin:-3px -4px; }
.stats-clients-row-clickable:hover { background:var(--surface2); }
.stats-clients-name {
  font-size:12px; color:var(--text2);
  width:200px; flex-shrink:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.stats-clients-track {
  flex:1; height:12px; background:var(--surface2); border-radius:6px;
  position:relative; overflow:hidden;
}
.stats-clients-bar-total {
  position:absolute; left:0; top:0; height:100%;
  background:var(--accent); opacity:.25; border-radius:6px; transition:width .4s;
}
.stats-clients-bar-open {
  position:absolute; left:0; top:0; height:100%;
  background:var(--accent); border-radius:6px; transition:width .4s;
}
.stats-clients-counts { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.stats-clients-total { font-size:13px; font-weight:700; color:var(--text); min-width:20px; text-align:right; }
.stats-clients-open-badge {
  font-size:11px; color:var(--accent);
  background:var(--accent-light); padding:1px 7px; border-radius:10px;
  white-space:nowrap;
}

/* ── Exec load bars ──────────────────────────────────── */
.stats-exec-open-badge {
  font-size:11px; color:var(--s-indigo,#4f46e5);
  background:color-mix(in srgb, var(--s-indigo,#4f46e5) 10%, transparent);
  padding:1px 7px; border-radius:10px; white-space:nowrap; flex-shrink:0;
}
.stats-exec-legend { display:flex; gap:16px; margin-top:4px; padding-top:8px; border-top:1px solid var(--border); font-size:11px; color:var(--text3); }
.stats-exec-leg-item { display:flex; align-items:center; gap:5px; }
.stats-exec-leg-dot  { width:10px; height:10px; border-radius:2px; flex-shrink:0; }
.stats-exec-bar-done { position:absolute; left:0; top:0; height:100%; background:color-mix(in srgb, var(--green) 35%, var(--surface2)); border-radius:4px; transition:width .5s; }
.stats-exec-bar-open { position:absolute; left:0; top:0; height:100%; background:var(--accent); border-radius:4px; transition:width .5s; }

/* ── Bar pct ─────────────────────────────────────────── */
.stats-bar-pct { font-size:11px; color:var(--text3); width:34px; text-align:right; flex-shrink:0; }

/* ── Dark tweaks ─────────────────────────────────────── */
html.dark .stats-kpi-card:hover { box-shadow:0 4px 20px rgba(0,0,0,.4); }
html.dark .stats-card { background:var(--surface); }

/* ══════════════════════════════════════════════════════════════
   FILTER AREA — tab-bar, chip-dropdown, pagination, bulk
   ══════════════════════════════════════════════════════════════ */

/* ── filter-area wrapper ──────────────────────────────── */
.filter-area { padding: 12px 16px 0; border-bottom: 1px solid var(--border); }

/* ── Tab bar ──────────────────────────────────────────── */
.tab-bar {
  display: flex;
  gap: 2px;
  margin-bottom: 0;
  border-bottom: 2px solid var(--border);
}
.tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: none;
  background: transparent;
  color: var(--text3);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  border-radius: 4px 4px 0 0;
  transition: color .15s, border-color .15s, background .15s;
  white-space: nowrap;
}
.tab-btn:hover { background: var(--surface2); color: var(--text1); }
.tab-btn-active { color: var(--accent) !important; border-bottom-color: var(--accent) !important; font-weight: 700; }
.tab-cnt {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 18px; padding: 0 5px;
  border-radius: 10px; background: var(--surface2);
  color: var(--text3); font-size: 11px; font-weight: 700;
  transition: background .15s, color .15s;
}
.tab-btn-active .tab-cnt { background: var(--accent-light); color: var(--accent); }

/* ── Filter row ───────────────────────────────────────── */
.filter-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px 0 12px;
}
.filter-row-advanced{
  border-top:1px dashed var(--border);
  margin-top:-4px;
  padding-top:10px;
  align-items:stretch;
}
.filter-native-hidden{display:none!important;}

.adv-filter-wrap{
  position:relative;
  min-width:180px;
  max-width:260px;
  flex:1 1 180px;
}
.adv-filter-btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:7px 10px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--surface2);
  color:var(--text2);
  font-family:inherit;
  font-size:12px;
  cursor:pointer;
  transition:border-color .15s,color .15s,background .15s;
}
.adv-filter-btn:hover{
  border-color:var(--accent);
  color:var(--accent);
}
.adv-filter-btn span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-align:left;
}
.adv-filter-wrap.open .adv-filter-btn{
  border-color:var(--accent);
  color:var(--accent);
  background:var(--accent-light);
}
.adv-filter-panel{
  display:none;
  position:absolute;
  top:calc(100% + 4px);
  left:0;
  right:0;
  z-index:320;
  max-height:260px;
  overflow:auto;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:0 8px 24px rgba(0,0,0,.13);
  padding:6px;
}
.adv-filter-panel.open{display:block;}
.adv-filter-actions{
  display:flex;
  gap:6px;
  padding:2px 2px 8px;
  margin:0 0 4px;
  border-bottom:1px solid var(--border);
}
.adv-filter-action-btn{
  flex:1;
  border:1px solid var(--border);
  background:var(--surface2);
  color:var(--text2);
  border-radius:6px;
  font-family:inherit;
  font-size:11px;
  padding:4px 6px;
  cursor:pointer;
  transition:border-color .15s,color .15s,background .15s;
}
.adv-filter-action-btn:hover:not(:disabled){
  border-color:var(--accent);
  color:var(--accent);
}
.adv-filter-action-btn:disabled{
  opacity:.5;
  cursor:not-allowed;
}
.adv-filter-item{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 7px;
  border-radius:6px;
  font-size:12px;
  color:var(--text2);
  cursor:pointer;
  user-select:none;
}
.adv-filter-item:hover{background:var(--surface2);}
.adv-filter-item input{
  margin-top:0;
  accent-color:var(--accent);
  cursor:pointer;
}
.adv-filter-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  flex-shrink:0;
  box-shadow:0 0 0 1px rgba(0,0,0,.08);
}
.adv-filter-text{
  flex:1;
  min-width:0;
  line-height:1.35;
  word-break:break-word;
}
.adv-filter-empty{
  padding:8px 10px;
  color:var(--text3);
  font-size:12px;
}
.adv-filter-search-wrap{
  padding:4px 2px 6px;
  margin-bottom:4px;
  border-bottom:1px solid var(--border);
}
.adv-filter-search{
  width:100%;
  box-sizing:border-box;
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--surface2);
  color:var(--text);
  font-family:inherit;
  font-size:12px;
  padding:5px 9px;
  outline:none;
  transition:border-color .15s;
}
.adv-filter-search:focus{border-color:var(--accent);}

/* ── Chip Dropdown ────────────────────────────────────── */
.chip-dropdown-wrap { position: relative; flex-shrink: 0; }
.chip-dropdown-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface2); color: var(--text2);
  font-size: 12px; font-weight: 500; font-family: inherit;
  cursor: pointer; white-space: nowrap;
  transition: border-color .15s, color .15s;
}
.chip-dropdown-btn:hover { border-color: var(--accent); color: var(--accent); }
.chip-dropdown-panel {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 300;
  min-width: 210px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.13);
  padding: 6px 0;
  overflow: hidden;
}
/* JS toggles chip-dd-open */
.chip-dropdown-panel.chip-dd-open { display: block; }
.chip-dd-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  cursor: pointer; font-size: 13px; color: var(--text2);
  transition: background .1s; user-select: none;
}
.chip-dd-item:hover { background: var(--surface2); }
.chip-dd-item.chip-dd-active { color: var(--accent); background: var(--accent-light); font-weight: 600; }
.chip-dd-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.chip-dd-lbl { flex: 1; }
.chip-dd-cnt {
  font-size: 11px; font-weight: 700; color: var(--text3);
  background: var(--surface2); border-radius: 10px;
  padding: 1px 6px; min-width: 22px; text-align: center;
}
.chip-dd-item.chip-dd-active .chip-dd-cnt { color: var(--accent); background: var(--accent-light); }
html.dark .chip-dropdown-panel { box-shadow: 0 8px 24px rgba(0,0,0,.45); }

/* ── Pagination ───────────────────────────────────────── */
.pagination-bar {
  display: flex; align-items: center; gap: 4px;
  padding: 10px 16px; border-top: 1px solid var(--border);
  flex-shrink: 0; flex-wrap: wrap;
}
.pg-btn {
  min-width: 30px; height: 28px; padding: 0 7px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface2); color: var(--text2);
  font-family: inherit; font-size: 12px; font-weight: 500;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all .12s;
}
.pg-btn:hover { border-color: var(--accent); color: var(--accent); }
.pg-btn.pg-active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.pg-info { font-size: 11px; color: var(--text3); margin-left: 6px; white-space: nowrap; }

/* ── Bulk bar ─────────────────────────────────────────── */
.bulk-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 16px; background: var(--accent-light);
  border-bottom: 1px solid var(--border);
  font-size: 12px; flex-shrink: 0; flex-wrap: wrap;
}
.bulk-check-wrap  { display: flex; align-items: center; gap: 6px; color: var(--text2); cursor: pointer; }
.bulk-sel-info    { color: var(--text3); }
.bulk-sel-count   { font-weight: 700; color: var(--accent); }
.bulk-sep         { width: 1px; height: 16px; background: var(--border2); flex-shrink: 0; }
.bulk-status-label{ color: var(--text3); white-space: nowrap; }
.bulk-status-sel  {
  padding: 3px 8px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface);
  font-family: inherit; font-size: 11px; color: var(--text2); cursor: pointer;
}

/* ══════════════════════════════════════════════════════════════
   STATISTICS EXTRAS
   ══════════════════════════════════════════════════════════════ */

/* ── Period tab switcher ──────────────────────────────── */
.stats-period-tabs {
  display: flex; gap: 2px;
  background: var(--surface2); border-radius: 7px; padding: 2px;
  margin-left: auto; flex-shrink: 0;
}
.stats-period-tab {
  font-size: 11px; font-weight: 500; font-family: inherit;
  padding: 3px 9px; border: none;
  background: transparent; color: var(--text3);
  border-radius: 5px; cursor: pointer;
  transition: all .12s; white-space: nowrap;
}
.stats-period-tab:hover { color: var(--text2); background: var(--surface); }
.stats-period-tab.active { background: var(--surface); color: var(--accent); font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,.08); }

/* ── Timing rows ──────────────────────────────────────── */
.stats-timing-rows { display: flex; flex-direction: column; gap: 0; }
.stats-timing-row-label {
  font-size: 11px; font-weight: 700; color: var(--text3);
  text-transform: uppercase; letter-spacing: .05em;
  padding: 0 2px 5px;
}
.stats-timing-grid { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 0; }
.stats-timing-cell {
  flex: 1; min-width: 80px; text-align: center;
  padding: 11px 8px; background: var(--surface2); border-radius: 10px;
}
.stats-timing-val { font-size: 20px; font-weight: 800; color: var(--accent); line-height: 1.1; }
.stats-timing-muted .stats-timing-val { color: var(--text2); font-size: 17px; }
.stats-timing-lbl  { font-size: 10px; color: var(--text3); margin-top: 4px; }
.stats-timing-note { font-size: 11px; color: var(--text3); }

/* ── Exec bar colours ─────────────────────────────────── */
.stats-exec-bar-done {
  position: absolute; left: 0; top: 0; height: 100%;
  background: color-mix(in srgb, var(--green) 30%, var(--surface2));
  border-radius: 4px; transition: width .5s;
}
.stats-exec-bar-open {
  position: absolute; left: 0; top: 0; height: 100%;
  background: var(--accent); border-radius: 4px; transition: width .5s;
}