1643 lines
92 KiB
CSS
1643 lines
92 KiB
CSS
@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;
|
||
}
|
||
.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; }
|
||
|
||
/* ── 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-compare {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
margin: 6px 0 12px;
|
||
flex-wrap: wrap;
|
||
}
|
||
.soc-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 2px;
|
||
}
|
||
.soc-val {
|
||
font-size: 22px;
|
||
font-weight: 800;
|
||
color: var(--text);
|
||
line-height: 1;
|
||
}
|
||
.soc-label {
|
||
font-size: 10px;
|
||
color: var(--text3);
|
||
text-transform: uppercase;
|
||
letter-spacing: .04em;
|
||
}
|
||
.soc-sep {
|
||
color: var(--text3);
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
align-self: center;
|
||
}
|
||
.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 tooltip ───────────────────────────────────────── */
|
||
.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;
|
||
}
|