/* ════════════════════════════════════════════════════════════════════════════
   UX ENHANCEMENTS
   Button spinners · Tooltips · Empty states · Alerts · Form feedback ·
   Skeleton loaders · Modal animations · Unsaved-changes guard
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Button loading spinner ── */
@keyframes hamro-spin{to{transform:rotate(360deg)}}
.btn.is-loading{pointer-events:none;opacity:.82;position:relative}
.btn.is-loading>*{opacity:0}
.btn.is-loading::after{content:'';position:absolute;inset:0;margin:auto;width:14px;height:14px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:hamro-spin .55s linear infinite}
.btn-secondary.is-loading::after{border-color:rgba(99,112,130,.25);border-top-color:#637082}

/* ── 2. CSS Tooltips (data-tip attribute) ── */
[data-tip]{position:relative}
[data-tip]::before{content:attr(data-tip);position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%) translateY(4px);background:#0f172a;color:#e5e7eb;font-size:10px;font-weight:600;padding:5px 9px;border-radius:7px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s,transform .15s;z-index:9999;letter-spacing:.01em;box-shadow:0 4px 12px rgba(0,0,0,.25)}
[data-tip]::after{content:'';position:absolute;bottom:calc(100% + 3px);left:50%;transform:translateX(-50%);border:4px solid transparent;border-top-color:#0f172a;pointer-events:none;opacity:0;transition:opacity .15s;z-index:9999}
[data-tip]:hover::before,[data-tip]:focus-visible::before{opacity:1;transform:translateX(-50%) translateY(0)}
[data-tip]:hover::after,[data-tip]:focus-visible::after{opacity:1}
[data-tip-right]::before{left:auto;right:0;transform:translateY(4px)}
[data-tip-right]:hover::before{transform:translateY(0)}

/* ── 3. Alert auto-dismiss progress bar ── */
@keyframes alert-progress{from{width:100%}to{width:0%}}
.alert{position:relative;overflow:hidden;animation:alert-slide-in .25s ease}
@keyframes alert-slide-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.alert-progress{position:absolute;bottom:0;left:0;height:3px;background:rgba(109,93,252,.35);animation:alert-progress 5s linear forwards;border-radius:0 0 0 0}
.alert.alert-success .alert-progress{background:rgba(34,197,94,.5)}
.alert.alert-error .alert-progress{background:rgba(239,68,68,.5)}
.alert.alert-warning .alert-progress{background:rgba(245,158,11,.5)}

/* ── 4. Better empty states ── */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;text-align:center;gap:12px}
.empty-state svg{width:48px;height:48px;color:var(--line);stroke-width:1.2}
.empty-state h3{font-size:15px;font-weight:700;color:var(--ink);margin:0}
.empty-state p{font-size:12px;color:var(--muted);margin:0;max-width:280px;line-height:1.6}
.empty-state .btn{margin-top:4px}
.empty-mini{display:flex;align-items:center;gap:8px;padding:16px 20px;font-size:12px;color:var(--muted)}
.empty-mini svg{width:16px;height:16px;flex-shrink:0;opacity:.5}

/* ── 5. Form field improvements — focus ring + error shake ── */
@keyframes field-shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}
.field-wrap.has-error input,.field-wrap.has-error select,.field-wrap.has-error textarea{border-color:#ef4444!important;animation:field-shake .35s ease}
.field-error{display:flex;align-items:center;gap:4px;font-size:10px;color:#ef4444;margin-top:3px;font-weight:600}
.field-error::before{content:'⚠';font-size:9px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--purple)!important;box-shadow:0 0 0 3px rgba(109,93,252,.12)!important}

/* ── 6. Skeleton loader ── */
@keyframes skeleton-pulse{0%,100%{opacity:.45}50%{opacity:.9}}
.skeleton{background:linear-gradient(90deg,#f0f2f5 25%,#e4e7ec 50%,#f0f2f5 75%);background-size:200% 100%;animation:skeleton-slide 1.4s ease infinite;border-radius:6px}
@keyframes skeleton-slide{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skeleton-row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}
.skeleton-row .sk-avatar{width:36px;height:36px;border-radius:50%;flex-shrink:0}
.skeleton-row .sk-line{height:10px;border-radius:5px}
.skeleton-row .sk-line.wide{flex:1}
.skeleton-row .sk-line.short{width:80px}
.skeleton-row .sk-line.xshort{width:50px}
.skeleton-table{width:100%}
html[data-theme-mode="dark"] .skeleton{background:linear-gradient(90deg,#1e293b 25%,#263145 50%,#1e293b 75%);background-size:200% 100%}

/* ── 7. Unsaved-changes banner ── */
.dirty-banner{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(80px);background:#111827;color:#f1f5f9;padding:10px 18px 10px 14px;border-radius:12px;font-size:12px;font-weight:600;display:flex;align-items:center;gap:10px;z-index:9998;box-shadow:0 8px 32px rgba(0,0,0,.3);transition:transform .25s cubic-bezier(.34,1.56,.64,1);pointer-events:none}
.dirty-banner.show{transform:translateX(-50%) translateY(0)}
.dirty-banner svg{width:14px;height:14px;color:#f59e0b;flex-shrink:0}
.dirty-banner span{color:#94a3b8}

/* ── 7b. Unsaved-changes confirm dialog ── */
.unsaved-overlay{position:fixed;inset:0;background:rgba(15,23,42,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:10100;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s}
.unsaved-overlay.visible{opacity:1}
.unsaved-dialog{background:var(--surface,#fff);border-radius:20px;box-shadow:0 24px 60px rgba(15,23,42,.22),0 2px 8px rgba(15,23,42,.08);padding:32px 28px 24px;max-width:380px;width:90%;transform:scale(.93) translateY(10px);transition:transform .25s cubic-bezier(.34,1.56,.64,1),opacity .2s;opacity:0;position:relative}
.unsaved-overlay.visible .unsaved-dialog{transform:scale(1) translateY(0);opacity:1}
.unsaved-dialog-icon{width:48px;height:48px;border-radius:14px;background:#fff7ed;display:grid;place-items:center;margin:0 auto 16px}
.unsaved-dialog-icon svg{width:24px;height:24px;color:#ea580c;stroke-width:2}
.unsaved-dialog h3{font-size:16px;font-weight:800;color:var(--ink,#0f172a);text-align:center;margin:0 0 8px}
.unsaved-dialog p{font-size:13px;color:var(--muted,#64748b);text-align:center;margin:0 0 24px;line-height:1.55}
.unsaved-dialog-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.unsaved-dialog-btns button{padding:10px 16px;border-radius:12px;font-size:13px;font-weight:700;cursor:pointer;border:none;transition:background .15s,transform .1s}
.unsaved-dialog-btns button:active{transform:scale(.97)}
.unsaved-btn-cancel{background:var(--line,#e8eaf0);color:var(--ink,#0f172a)}
.unsaved-btn-cancel:hover{background:#dde1ea}
.unsaved-btn-leave{background:#ef4444;color:#fff}
.unsaved-btn-leave:hover{background:#dc2626}
html[data-theme-mode="dark"] .unsaved-dialog{background:#1e293b;box-shadow:0 24px 60px rgba(0,0,0,.5)}
html[data-theme-mode="dark"] .unsaved-dialog-icon{background:rgba(234,88,12,.12)}
html[data-theme-mode="dark"] .unsaved-btn-cancel{background:#334155;color:#f1f5f9}
html[data-theme-mode="dark"] .unsaved-btn-cancel:hover{background:#3d4f66}

/* ── 8. Modal entrance animation ── */
@keyframes modal-in{from{opacity:0;transform:scale(.95) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes modal-out{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}
.modal-card{animation:modal-in .18s cubic-bezier(.34,1.56,.64,1)}
.modal.is-closing .modal-card{animation:modal-out .15s ease forwards}

/* ── 9. Toast improvements ── */
@keyframes toast-in{from{opacity:0;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}
@keyframes toast-out{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(100%)}}
.live-toast{animation:toast-in .22s cubic-bezier(.34,1.56,.64,1)}
.live-toast.is-leaving{animation:toast-out .2s ease forwards}
.live-toast-stack{display:flex;flex-direction:column;gap:8px}

/* ── 10. Page content fade on navigation ── */
.content-area{transition:opacity .08s ease}
.content-area.is-swapping{opacity:.82;pointer-events:none}

/* ── Dark mode overrides for new UX elements ── */
html[data-theme-mode="dark"] [data-tip]::before{background:#f1f5f9;color:#0f172a}
html[data-theme-mode="dark"] [data-tip]::after{border-top-color:#f1f5f9}
html[data-theme-mode="dark"] .dirty-banner{background:#f1f5f9;color:#0f172a}
html[data-theme-mode="dark"] .dirty-banner span{color:#64748b}

/* ── Sidebar: collapsible at all sizes ── */

/* Desktop (≥769px): sidebar always visible unless body.sidebar-collapsed */
@media(min-width:1025px){
  .sidebar{transform:none;transition:transform .25s ease;width:268px}
  .main-area{margin-left:268px;transition:margin-left .25s ease}
  .sidebar-overlay{display:none!important}
  .sidebar-close{display:none!important}
  /* hamburger visible on desktop so user can collapse */
  .menu-btn{display:grid!important}

  /* Collapsed state — hamburger was clicked on desktop */
  body.sidebar-collapsed .sidebar{transform:translateX(-100%)}
  body.sidebar-collapsed .main-area{margin-left:0}
}

/* Mobile + Tablet (≤1024px): hidden by default, slide-in overlay on hamburger click */
@media(max-width:1024px){
  /* Sidebar starts below the topbar (76px tall on tablet) so the hamburger is
     never physically covered by the drawer — enabling true toggle behaviour. */
  .sidebar{inset:76px auto 0 0;transform:translateX(-100%);transition:transform .25s ease}
  .sidebar.open{transform:translateX(0)}
  .main-area{margin-left:0!important;transition:none}
  .menu-btn{display:grid!important}
  .sidebar-close{display:grid!important}
  .sidebar-overlay{position:fixed;inset:76px 0 0 0;background:rgba(7,12,22,.55);z-index:38;display:none}
  .sidebar-overlay.show{display:block}
  .topbar{z-index:41}
  /* ignore desktop collapsed class on mobile/tablet */
  body.sidebar-collapsed .sidebar{transform:translateX(-100%)}
  body.sidebar-collapsed .sidebar.open{transform:translateX(0)}
  body.sidebar-collapsed .main-area{margin-left:0!important}
}
/* At ≤768px the topbar shrinks to 65px — adjust sidebar/overlay start point */
@media(max-width:768px){
  .sidebar{inset:65px auto 0 0}
  .sidebar-overlay{inset:65px 0 0 0}
}

/* ── Unified Notification Drawer ─────────────────────────────────── */
.notif-overlay{position:fixed;inset:0;z-index:1200;background:rgba(15,23,42,.3);backdrop-filter:blur(2px)}
.notif-drawer{position:fixed;top:0;right:0;width:380px;height:100vh;background:var(--surface);border-left:1px solid var(--line);z-index:1300;display:flex;flex-direction:column;box-shadow:-8px 0 40px rgba(15,23,42,.18)}
@media(max-width:440px){.notif-drawer{width:100vw}}
.notif-drawer-header{display:flex;align-items:center;justify-content:space-between;padding:18px 16px 14px;border-bottom:1px solid var(--line);flex-shrink:0}
.notif-drawer-header>span{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:var(--ink)}
.notif-drawer-header>span svg{width:16px;height:16px;color:var(--purple)}
.notif-drawer-header-actions{display:flex;align-items:center;gap:6px}
.notif-mark-all-btn{display:flex;align-items:center;gap:5px;background:none;border:1px solid var(--line);border-radius:8px;padding:5px 10px;font-size:11px;font-weight:600;color:var(--muted);cursor:pointer;transition:all .15s}
.notif-mark-all-btn:hover{border-color:var(--purple);color:var(--purple)}
.notif-mark-all-btn:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
.notif-mark-all-btn svg{width:12px;height:12px}
.notif-drawer-close{background:none;border:none;cursor:pointer;padding:4px;border-radius:6px;color:var(--muted);display:flex;align-items:center}
.notif-drawer-close:hover{background:var(--line);color:var(--ink)}
.notif-drawer-close svg{width:16px;height:16px}
.notif-tabs{display:flex;gap:2px;padding:10px 12px;border-bottom:1px solid var(--line);overflow-x:auto;flex-shrink:0;scrollbar-width:none}
.notif-tabs::-webkit-scrollbar{display:none}
.notif-tab{background:none;border:none;padding:5px 11px;border-radius:20px;font-size:11px;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap;transition:all .15s}
.notif-tab.active,.notif-tab:hover{background:rgba(109,93,252,.1);color:var(--purple)}
.notif-tab:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
.notif-list{flex:1;overflow-y:auto;padding:8px 0}
.notif-loading,.notif-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:40px 20px;color:var(--muted);font-size:13px}
.notif-loading svg,.notif-empty svg{width:32px;height:32px;opacity:.65}
.notif-item{display:flex;align-items:flex-start;gap:10px;padding:12px 16px;border-bottom:1px solid rgba(15,23,42,.04);transition:background .12s;position:relative}
.notif-item:hover{background:rgba(109,93,252,.03)}
.notif-unread{background:rgba(109,93,252,.04)}
.notif-unread::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--purple);border-radius:0 2px 2px 0}
.notif-icon{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:rgba(109,93,252,.1)}
.notif-icon svg{width:15px;height:15px}
.notif-icon-task{background:rgba(109,93,252,.1);color:var(--purple)}
.notif-icon-invoice,.notif-icon-payroll{background:rgba(34,197,94,.1);color:#16a34a}
.notif-icon-support{background:rgba(239,68,68,.1);color:#ef4444}
.notif-icon-chat{background:rgba(59,130,246,.1);color:#3b82f6}
.notif-icon-approval{background:rgba(245,158,11,.1);color:#d97706}
.notif-icon-leave,.notif-icon-attendance{background:rgba(20,184,166,.1);color:#0d9488}
.notif-body{flex:1;min-width:0}
.notif-title{font-size:13px;font-weight:600;color:var(--ink);text-decoration:none;display:block;line-height:1.3;word-break:break-word}
.notif-title:hover{color:var(--purple)}
.notif-msg{font-size:11px;color:var(--muted);margin:3px 0 0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}
.notif-time{font-size:10px;color:var(--muted);margin-top:4px;display:block}
.notif-read-btn{background:none;border:none;cursor:pointer;padding:4px;border-radius:6px;color:var(--muted);display:flex;align-items:center;flex-shrink:0;transition:all .12s}
.notif-read-btn:hover{background:rgba(34,197,94,.1);color:#16a34a}
.notif-read-btn:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
.notif-read-btn svg{width:14px;height:14px}
.notif-drawer-footer{padding:12px 16px;border-top:1px solid var(--line);flex-shrink:0}
.notif-view-all{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;font-weight:600;color:var(--purple);text-decoration:none;padding:8px;border-radius:8px;transition:background .12s}
.notif-view-all:hover{background:rgba(109,93,252,.06)}
.notif-view-all:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
.notif-view-all svg{width:13px;height:13px}

/* ── Smart Finance Forecast ──────────────────────────────────────── */
.forecast-section{margin-bottom:32px}
.forecast-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.forecast-header h2{font-size:18px;font-weight:700;margin:4px 0 4px}
.forecast-header p{font-size:13px;color:var(--muted)}
.forecast-trend-pills{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.trend-pill{display:flex;align-items:center;gap:6px;padding:5px 12px;border-radius:20px;font-size:11px;font-weight:700;border:1px solid}
.trend-pill svg{width:12px;height:12px}
.trend-up{background:rgba(34,197,94,.08);border-color:rgba(34,197,94,.3);color:#16a34a}
.trend-down{background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.3);color:#dc2626}
.trend-stable{background:rgba(107,114,128,.08);border-color:rgba(107,114,128,.25);color:var(--muted)}
.forecast-kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
@media(max-width:900px){.forecast-kpi-row{grid-template-columns:repeat(2,1fr)}}
.forecast-kpi{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:6px}
.forecast-kpi svg{width:18px;height:18px;color:var(--purple)}
.forecast-kpi span{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.forecast-kpi strong{font-size:20px;font-weight:800;color:var(--ink)}
.forecast-kpi.kpi-danger{border-color:rgba(239,68,68,.3);background:rgba(239,68,68,.04)}
.forecast-kpi.kpi-danger strong{color:#dc2626}
.forecast-grid{display:grid;grid-template-columns:1fr 340px;gap:16px}
@media(max-width:1100px){.forecast-grid{grid-template-columns:1fr}}
.forecast-chart-panel{padding:20px}
.forecast-bars{display:flex;align-items:flex-end;gap:6px;height:120px;padding-bottom:28px;position:relative;border-bottom:1px solid var(--line);overflow-x:auto}
.forecast-bar-col{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:36px}
.bar-pair{display:flex;align-items:flex-end;gap:2px}
.bar{width:12px;min-height:3px;border-radius:4px 4px 0 0;transition:height .3s}
.bar-income{background:var(--purple)}
.bar-expense{background:rgba(239,68,68,.6)}
.projected-bar{opacity:.5;border:1px dashed currentColor}
.bar-label{font-size:9px;color:var(--muted);white-space:nowrap;font-weight:600;margin-top:4px}
.forecast-bar-col.projected .bar-label{color:var(--purple);opacity:.7}
.forecast-legend{display:flex;gap:14px;margin-top:12px}
.forecast-legend>span{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--muted)}
.forecast-legend>span::before{content:'';width:10px;height:10px;border-radius:3px;flex-shrink:0}
.leg-income::before{background:var(--purple)}
.leg-expense::before{background:rgba(239,68,68,.6)}
.leg-projected::before{background:var(--purple);opacity:.4;border:1px dashed var(--purple)}
.forecast-ar-panel{padding:20px}
.ar-total-badge{background:rgba(109,93,252,.08);border:1px solid rgba(109,93,252,.2);border-radius:10px;padding:10px 14px;font-size:13px;font-weight:700;color:var(--purple);margin-bottom:16px}
.ar-aging-rows{display:flex;flex-direction:column;gap:2px;margin-bottom:16px}
.ar-row{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border-radius:8px;background:var(--bg)}
.ar-row>div{display:flex;flex-direction:column;gap:1px}
.ar-label{font-size:12px;font-weight:600;color:var(--ink)}
.ar-count{font-size:10px;color:var(--muted)}
.ar-row strong{font-size:13px;font-weight:700;color:var(--ink)}
.ar-overdue .ar-label{color:#dc2626}
.ar-overdue{background:rgba(239,68,68,.05);border:1px solid rgba(239,68,68,.15)}
.projected-month-row{display:flex;justify-content:space-between;padding:7px 12px;font-size:12px;border-radius:6px}
.projected-month-row:nth-child(odd){background:rgba(109,93,252,.04)}
.text-success{color:#16a34a;font-weight:700}
.text-danger{color:#dc2626;font-weight:700}

/* ── Workload Heatmap ────────────────────────────────────────────── */
.heatmap-filters{margin-bottom:12px}
.heatmap-legend{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.legend-label{font-size:11px;font-weight:600;color:var(--muted)}
.legend-note{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted);margin-left:8px}
.legend-note svg{width:12px;height:12px}
.heat-cell-sample{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:4px;font-size:10px;font-weight:700}
.heatmap-scroll-wrap{overflow-x:auto;border-radius:14px;border:1px solid var(--line);background:var(--surface)}
.heatmap-table-wrap{min-width:100%}
.heatmap-table{border-collapse:collapse;width:100%;font-size:11px}
.heatmap-table thead th{position:sticky;top:0;background:var(--surface);z-index:10;border-bottom:1px solid var(--line);padding:6px 3px;text-align:center;vertical-align:bottom}
.heatmap-table thead th.heatmap-name-col{position:sticky;left:0;z-index:20;text-align:left;padding:8px 14px;min-width:160px;white-space:nowrap;background:var(--surface)}
.heatmap-table thead th.heatmap-total-col{position:sticky;right:0;background:var(--surface);border-left:1px solid var(--line);padding:6px 10px}
.heatmap-day-col{min-width:30px}
.day-name{display:block;font-size:9px;color:var(--muted);text-transform:uppercase}
.day-num{display:block;font-size:11px;font-weight:700;color:var(--ink)}
.month-badge{display:block;font-size:8px;background:var(--purple);color:#fff;border-radius:3px;padding:0 3px;margin:1px auto 0;width:fit-content}
.heatmap-today .day-num{color:var(--purple)}
.heatmap-weekend{opacity:.5}
.heatmap-name-col{position:sticky;left:0;background:var(--surface);z-index:5;border-right:1px solid var(--line);padding:8px 14px}
.heatmap-total-col{position:sticky;right:0;background:var(--surface);border-left:1px solid var(--line);text-align:center;font-weight:700;padding:6px 10px}
.heat-total{color:var(--ink)}
.heatmap-emp-name{font-size:12px;font-weight:600;color:var(--ink);white-space:nowrap}
.heatmap-emp-meta{font-size:10px;color:var(--muted);white-space:nowrap}
.heat-cell{width:28px;height:32px;text-align:center;vertical-align:middle;border:1px solid rgba(255,255,255,.04);cursor:default;font-size:9px;font-weight:700;transition:transform .1s;position:relative}
.heat-cell:hover{transform:scale(1.25);z-index:10;border-radius:3px}
.heat-cell span{line-height:1}
.heat-leave{background:rgba(109,93,252,.12)!important}
.heat-leave-icon{width:10px;height:10px;color:var(--purple)}
.heat-weekend{background:repeating-linear-gradient(45deg,rgba(0,0,0,.03),rgba(0,0,0,.03) 2px,transparent 2px,transparent 6px)!important}
.heat-today{box-shadow:inset 0 0 0 2px var(--purple)}
.intensity-0{background:var(--bg)}
.intensity-1{background:rgba(109,93,252,.12);color:var(--purple)}
.intensity-2{background:rgba(109,93,252,.25);color:var(--purple)}
.intensity-3{background:rgba(245,158,11,.3);color:#b45309}
.intensity-4{background:rgba(249,115,22,.35);color:#c2410c}
.intensity-5{background:rgba(239,68,68,.4);color:#dc2626}

/* ── Client Portal ───────────────────────────────────────────────── */
.portal-kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px}
@media(max-width:900px){.portal-kpi-row{grid-template-columns:repeat(2,1fr)}}
.portal-kpi{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:6px}
.portal-kpi svg{width:20px;height:20px;color:var(--purple)}
.portal-kpi span{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.portal-kpi strong{font-size:22px;font-weight:800;color:var(--ink)}
.portal-kpi.kpi-warn{border-color:rgba(239,68,68,.3);background:rgba(239,68,68,.04)}
.portal-kpi.kpi-warn strong{color:#dc2626}
.portal-grid{display:grid;grid-template-columns:1fr 320px;gap:16px;align-items:start}
.portal-project-detail-grid{display:grid;grid-template-columns:1fr 300px;gap:16px;align-items:start}
@media(max-width:1024px){.portal-grid,.portal-project-detail-grid{grid-template-columns:1fr}}
.portal-aside{display:flex;flex-direction:column;gap:16px}
.portal-main{display:flex;flex-direction:column;gap:16px}
.portal-panel{padding:20px}
.portal-panel .panel-header{margin-bottom:14px}
.portal-panel .panel-header h2{display:flex;align-items:center;gap:8px;font-size:15px}
.portal-panel .panel-header h2 svg{width:15px;height:15px;color:var(--purple)}
.portal-project-list{display:flex;flex-direction:column;gap:10px}
.portal-project-card{display:block;border:1px solid var(--line);border-radius:12px;padding:14px 16px;text-decoration:none;color:var(--ink);transition:all .15s;background:var(--bg)}
.portal-project-card:hover{border-color:var(--purple);background:rgba(109,93,252,.03);transform:translateY(-1px)}
.portal-project-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.portal-project-deadline{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--muted)}
.portal-project-deadline svg{width:11px;height:11px}
.portal-project-card h3{font-size:14px;font-weight:700;margin-bottom:4px}
.portal-project-card p{font-size:12px;color:var(--muted);margin-bottom:10px;line-height:1.5}
.portal-project-footer{display:flex;flex-direction:column;gap:4px}
.portal-progress-bar{height:5px;border-radius:10px;background:var(--line);overflow:hidden}
.portal-progress-fill{height:100%;border-radius:10px;background:linear-gradient(90deg,var(--purple),#8b7cff);transition:width .3s}
.portal-progress-label{font-size:10px;color:var(--muted);font-weight:600}
.portal-ticket-list,.portal-invoice-list,.portal-doc-list,.portal-meeting-list{display:flex;flex-direction:column;gap:2px}
.portal-ticket-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;background:var(--bg)}
.portal-ticket-info{flex:1;min-width:0}
.portal-ticket-info strong{display:block;font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.portal-ticket-info small{font-size:10px;color:var(--muted);display:flex;align-items:center;gap:4px}
.portal-ticket-info small svg{width:10px;height:10px}
.portal-invoice-row{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:8px;background:var(--bg);text-decoration:none;color:var(--ink);transition:background .12s}
.portal-invoice-row:hover{background:rgba(109,93,252,.05)}
.portal-invoice-row>div strong{font-size:13px;font-weight:600;display:block}
.portal-invoice-row>div small{font-size:10px;color:var(--muted)}
.portal-invoice-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.portal-invoice-right strong{font-size:13px;font-weight:700}
.portal-meeting-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;background:var(--bg)}
.portal-meeting-date{width:38px;height:38px;border-radius:10px;background:rgba(109,93,252,.1);display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0}
.portal-meeting-date strong{font-size:15px;font-weight:800;color:var(--purple);line-height:1}
.portal-meeting-date span{font-size:9px;color:var(--purple);font-weight:600;text-transform:uppercase}
.portal-meeting-row>div strong{font-size:13px;font-weight:600;display:block}
.portal-meeting-row>div small{font-size:10px;color:var(--muted);display:flex;align-items:center;gap:4px}
.portal-join-link{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:600;color:var(--purple);text-decoration:none;margin-top:3px}
.portal-join-link svg{width:11px;height:11px}
.portal-doc-row{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:8px;text-decoration:none;color:var(--ink);transition:background .12s}
.portal-doc-row:hover{background:var(--bg)}
.portal-doc-row svg{width:16px;height:16px;color:var(--purple);flex-shrink:0}
.portal-doc-row strong{font-size:12px;font-weight:600;display:block}
.portal-doc-row small{font-size:10px;color:var(--muted)}
.portal-info-list{display:flex;flex-direction:column;gap:2px;margin:0}
.portal-info-list>div{display:grid;grid-template-columns:100px 1fr;gap:8px;padding:8px 0;border-bottom:1px solid var(--line);min-width:0}
.portal-info-list>div:last-child{border-bottom:none}
.portal-info-list dt{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;flex-shrink:0}
.portal-info-list dd{font-size:13px;font-weight:600;color:var(--ink);word-break:break-word;overflow-wrap:anywhere;min-width:0}
.portal-info-list dd a{word-break:break-all;overflow-wrap:anywhere}
.portal-payment-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.portal-payment-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:12px}
.portal-payment-row:last-child{border-bottom:none}
.portal-pay-date{color:var(--muted);white-space:nowrap;flex-shrink:0;font-variant-numeric:tabular-nums}
.portal-pay-desc{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.portal-pay-amt{flex-shrink:0;color:#16a34a;font-size:13px;font-variant-numeric:tabular-nums}
.portal-task-list{display:flex;flex-direction:column;gap:4px}
.portal-task-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;background:var(--bg)}
.portal-task-row.status-done{opacity:.55}
.portal-task-info{flex:1;min-width:0}
.portal-task-info strong{font-size:13px;font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.portal-task-info small{font-size:10px;color:var(--muted);display:flex;align-items:center;gap:4px}
.portal-task-info small svg{width:10px;height:10px}
.overdue-tag{background:rgba(239,68,68,.15);color:#dc2626;padding:1px 5px;border-radius:4px;font-size:9px;font-weight:700}
.project-completion-hero{display:flex;align-items:center;gap:24px;padding:8px 0}
.completion-ring{position:relative;width:80px;height:80px;flex-shrink:0}
.completion-ring svg{transform:rotate(-90deg);width:80px;height:80px}
.completion-ring .ring-bg{fill:none;stroke:var(--line);stroke-width:3}
.completion-ring .ring-fill{fill:none;stroke:var(--purple);stroke-width:3;stroke-linecap:round;transition:stroke-dasharray .4s}
.completion-ring>span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;color:var(--ink)}
.completion-stats{display:flex;flex-direction:column;gap:6px}
.cstat{display:flex;align-items:center;gap:8px;font-size:12px}
.cstat .task-status-dot{width:8px;height:8px;border-radius:50%;background:var(--line)}
.cstat strong{font-weight:700;margin-left:auto}
.portal-milestone-list{display:flex;flex-direction:column;gap:8px}
.portal-milestone-row{display:flex;align-items:flex-start;gap:10px;padding:10px;border-radius:8px;background:var(--bg)}
.ms-status-icon svg{width:16px;height:16px;color:var(--muted);margin-top:2px}
.ms-done .ms-status-icon svg{color:#16a34a}
.ms-done strong{text-decoration:line-through;opacity:.6}
.ms-progress{height:4px;border-radius:4px;background:var(--line);margin-top:5px}
.ms-progress>div{height:100%;border-radius:4px;background:var(--purple)}
.portal-back-action{margin-top:4px}
.portal-invoice-detail .panel{padding:24px}
.invoice-amount-hero{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.inv-amount-block span{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;display:block;margin-bottom:4px}
.inv-amount-block strong{font-size:22px;font-weight:800;color:var(--ink)}
.inv-amount-block .paid{color:#16a34a}
.inv-amount-block.outstanding strong{color:#dc2626}
.invoice-notes{margin:16px 0;padding:14px;background:var(--bg);border-radius:10px}
.invoice-notes strong{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;display:block;margin-bottom:6px}
.invoice-notes p{font-size:13px;color:var(--ink);line-height:1.6}
.invoice-status-bar{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:10px;margin-top:16px;font-size:13px;font-weight:600}
.invoice-status-bar svg{width:18px;height:18px;flex-shrink:0}
.invoice-status-bar.status-paid{background:rgba(34,197,94,.08);color:#16a34a;border:1px solid rgba(34,197,94,.2)}
.invoice-status-bar.status-overdue{background:rgba(239,68,68,.08);color:#dc2626;border:1px solid rgba(239,68,68,.2)}
.invoice-status-bar.status-partially_paid{background:rgba(245,158,11,.08);color:#d97706;border:1px solid rgba(245,158,11,.2)}
.invoice-status-bar.status-sent,.invoice-status-bar.status-viewed{background:rgba(109,93,252,.06);color:var(--purple);border:1px solid rgba(109,93,252,.2)}

.portal-sidebar-cta{padding:8px 8px 4px}
.portal-sidebar-link{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:10px;font-size:12px;font-weight:700;color:rgba(255,255,255,.7);text-decoration:none;background:rgba(109,93,252,.15);border:1px solid rgba(109,93,252,.3);transition:all .15s}
.portal-sidebar-link:hover,.portal-sidebar-link.active{background:rgba(109,93,252,.3);color:#fff;border-color:rgba(109,93,252,.5)}
.portal-sidebar-link svg{width:15px;height:15px}

/* ── Portal sub-nav ─────────────────────────────────────────────── */
.portal-subnav{display:flex;align-items:center;gap:4px;padding:4px 0 16px;border-bottom:1px solid var(--line);margin-bottom:20px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.portal-subnav-item{display:flex;align-items:center;gap:6px;padding:7px 14px;border-radius:8px;font-size:12px;font-weight:700;color:var(--muted);text-decoration:none;white-space:nowrap;transition:all .15s}
.portal-subnav-item svg{width:13px;height:13px}
.portal-subnav-item:hover{background:var(--bg);color:var(--ink)}
.portal-subnav-item.active{background:rgba(109,93,252,.1);color:var(--purple)}

/* ── Portal KPI row (improved) ──────────────────────────────────── */
.portal-kpi{display:flex;align-items:center;gap:14px}
.portal-kpi-icon{width:42px;height:42px;border-radius:12px;background:rgba(109,93,252,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.portal-kpi-icon svg{width:18px;height:18px;color:var(--purple)}
.portal-kpi.kpi-warn .portal-kpi-icon{background:rgba(239,68,68,.1)}
.portal-kpi.kpi-warn .portal-kpi-icon svg{color:#dc2626}
.portal-kpi-body{display:flex;flex-direction:column;gap:1px}
.portal-kpi-body span{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.portal-kpi-body strong{font-size:20px;font-weight:800;color:var(--ink);line-height:1.1}
.portal-kpi-body small{font-size:10px;color:var(--muted)}
.portal-kpi.kpi-warn .portal-kpi-body strong{color:#dc2626}

/* ── Filter bar / pills ─────────────────────────────────────────── */
.portal-filter-bar{margin-bottom:14px}
.portal-filter-pills{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.filter-pill{padding:5px 12px;border-radius:20px;font-size:11px;font-weight:700;color:var(--muted);background:var(--surface);border:1px solid var(--line);text-decoration:none;transition:all .12s}
.filter-pill:hover{border-color:var(--purple);color:var(--purple)}
.filter-pill.active{background:rgba(109,93,252,.1);color:var(--purple);border-color:rgba(109,93,252,.3)}

/* ── Portal tickets table ───────────────────────────────────────── */
.portal-tickets-table,.portal-invoices-table{display:flex;flex-direction:column;gap:2px}
.portal-tickets-header,.portal-invoices-header{display:grid;grid-template-columns:1fr 100px 120px 100px 120px;gap:8px;padding:6px 12px;font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.portal-invoices-header{grid-template-columns:1fr 140px 100px 100px 100px 100px}
.portal-tickets-row{display:grid;grid-template-columns:1fr 100px 120px 100px 120px;gap:8px;align-items:center;padding:10px 12px;border-radius:8px;text-decoration:none;color:var(--ink);transition:background .12s}
.portal-invoices-row{display:grid;grid-template-columns:1fr 140px 100px 100px 100px 100px;gap:8px;align-items:center;padding:10px 12px;border-radius:8px;text-decoration:none;color:var(--ink);transition:background .12s}
.portal-tickets-row:hover,.portal-invoices-row:hover{background:rgba(109,93,252,.04)}
.portal-tickets-row.row-overdue,.portal-invoices-row.row-overdue{background:rgba(239,68,68,.03)}
.portal-ticket-subject strong{font-size:13px;font-weight:600;display:block}
.portal-ticket-subject small{font-size:10px;color:var(--muted)}
.portal-ticket-meta,.portal-invoice-meta{font-size:12px;color:var(--muted)}
.portal-pagination{display:flex;align-items:center;justify-content:center;gap:12px;padding:16px 0 4px;font-size:12px;color:var(--muted)}
.portal-ticket-footer{display:flex;align-items:center;gap:8px;padding:12px 0 4px;border-top:1px solid var(--line);margin-top:8px}

/* ── Ticket detail ──────────────────────────────────────────────── */
.portal-ticket-detail-grid{display:grid;grid-template-columns:1fr 280px;gap:16px;align-items:start}
@media(max-width:900px){.portal-ticket-detail-grid{grid-template-columns:1fr}}
.portal-ticket-description{font-size:14px;line-height:1.7;color:var(--ink);padding:4px 0 12px}
.portal-comments-list{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}
.portal-comment{display:flex;align-items:flex-start;gap:10px}
.portal-comment.comment-client{flex-direction:row-reverse}
.comment-avatar{width:34px;height:34px;border-radius:50%;background:rgba(109,93,252,.15);color:var(--purple);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;flex-shrink:0}
.comment-client .comment-avatar{background:rgba(34,197,94,.12);color:#16a34a}
.comment-body{flex:1;min-width:0}
.comment-client .comment-body{align-items:flex-end;display:flex;flex-direction:column}
.comment-header{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.comment-header strong{font-size:12px;font-weight:700}
.comment-header span{font-size:10px;color:var(--muted)}
.comment-text{background:var(--bg);border-radius:12px;padding:10px 14px;font-size:13px;line-height:1.6;border:1px solid var(--line)}
.comment-client .comment-text{background:rgba(109,93,252,.07);border-color:rgba(109,93,252,.15)}
.comment-attachment{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--purple);margin-top:6px;text-decoration:none}
.portal-reply-form{padding-top:16px;border-top:1px solid var(--line)}
.portal-reply-form h3{font-size:13px;font-weight:700;margin-bottom:12px}
.portal-ticket-closed-notice{display:flex;align-items:center;gap:8px;padding:12px 14px;background:rgba(34,197,94,.06);border:1px solid rgba(34,197,94,.2);border-radius:10px;font-size:13px;color:#16a34a;margin-top:16px}
.portal-ticket-closed-notice svg{width:16px;height:16px;flex-shrink:0}
.portal-ticket-closed-notice a{color:#16a34a;font-weight:700}

/* ── Ticket ID badge ────────────────────────────────────────────── */
.ticket-id-badge{display:inline-block;padding:1px 6px;border-radius:5px;background:rgba(109,93,252,.1);color:var(--purple);font-size:10px;font-weight:800;font-family:monospace;letter-spacing:.5px}

/* ── Health badge ───────────────────────────────────────────────── */
.portal-health-badge,.health-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 6px;border-radius:6px;font-size:10px;font-weight:700}
.health-badge svg{width:11px;height:11px}
.health-red,.portal-health-badge.health-red{background:rgba(239,68,68,.1);color:#dc2626}
.health-yellow,.portal-health-badge.health-yellow{background:rgba(245,158,11,.1);color:#d97706}
.health-green,.portal-health-badge.health-green{background:rgba(34,197,94,.1);color:#16a34a}

/* ── Portal approval badge ──────────────────────────────────────── */
.portal-approval-badge{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;color:var(--purple);background:rgba(109,93,252,.08);padding:2px 6px;border-radius:5px;margin-top:4px}
.portal-approval-badge svg{width:11px;height:11px}

/* ── Invoice detail grid ────────────────────────────────────────── */
.portal-invoice-detail-grid{display:grid;grid-template-columns:1fr 260px;gap:16px;align-items:start}
@media(max-width:900px){.portal-invoice-detail-grid{grid-template-columns:1fr}}
.invoice-items-table{margin:16px 0;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.inv-items-header{display:grid;grid-template-columns:1fr 80px 100px 100px;gap:8px;padding:8px 14px;background:var(--bg);font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.inv-items-row{display:grid;grid-template-columns:1fr 80px 100px 100px;gap:8px;padding:10px 14px;border-top:1px solid var(--line);font-size:13px}
.inv-items-row strong{font-weight:600}
.inv-items-row small{font-size:10px;color:var(--muted);display:block}
.inv-totals{padding:10px 14px;border-top:2px solid var(--line);background:var(--bg)}
.inv-total-row{display:flex;justify-content:space-between;font-size:13px;padding:3px 0;color:var(--muted)}
.inv-total-row.discount span:last-child{color:#16a34a}
.inv-total-row.grand-total{font-size:16px;font-weight:800;color:var(--ink);padding-top:6px;margin-top:4px;border-top:1px solid var(--line)}

/* ── Status text color helpers ──────────────────────────────────── */
.status-text-active{color:#16a34a;font-weight:700}
.status-text-prospect{color:var(--purple);font-weight:700}
.status-text-on_hold{color:#d97706;font-weight:700}
.status-text-inactive{color:var(--muted);font-weight:700}

/* ── Portal contact card ────────────────────────────────────────── */
.portal-contact-card .portal-info-list a{color:var(--purple);text-decoration:none;font-weight:600}

/* ── Archive & Trash pages ───────────────────────────────────────── */
.btn-danger-ghost{background:transparent;color:#ef4444;border:1px solid rgba(239,68,68,.3)}
.btn-danger-ghost:hover{background:rgba(239,68,68,.08);border-color:#ef4444}
.trash-warning-banner{display:flex;align-items:center;gap:10px;background:rgba(249,115,22,.08);border:1px solid rgba(249,115,22,.25);border-radius:10px;padding:12px 16px;font-size:13px;color:#c2410c;margin-bottom:24px}
.trash-warning-banner svg{width:16px;height:16px;flex-shrink:0}

.archive-section{margin-bottom:28px}
.archive-section-header{display:flex;align-items:center;gap:8px;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.archive-section-header svg{width:16px;height:16px;color:var(--muted)}
.archive-section-header h2{font-size:15px;font-weight:700;margin:0;display:flex;align-items:center;gap:8px}
.archive-section-header.danger svg{color:#ef4444}
.count-badge{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;border-radius:999px;background:rgba(109,93,252,.12);color:var(--purple);font-size:11px;font-weight:800;padding:0 6px}
.count-badge.danger{background:rgba(239,68,68,.1);color:#ef4444}

.archive-table-wrap{overflow-x:auto;border-radius:12px;border:1px solid var(--line)}
.archive-table{width:100%;border-collapse:collapse;font-size:13px}
.archive-table th{background:var(--bg);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:10px 14px;text-align:left;border-bottom:1px solid var(--line)}
.archive-table td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.archive-table tbody tr:last-child td{border-bottom:none}
.archive-table tbody tr:hover{background:rgba(109,93,252,.03)}
.th-actions,.td-actions{text-align:right}
.td-actions{display:flex;gap:6px;justify-content:flex-end;align-items:center}
.td-person{display:flex;align-items:center;gap:10px}
.td-person .avatar{flex-shrink:0}
.td-person strong{display:block;font-weight:700}
.td-person small{color:var(--muted);font-size:11px}
.trash-row td{opacity:.75}
.trash-row:hover td{opacity:1}
.dim{opacity:.55}

.inline-form{display:inline-flex}
.inline-form button{white-space:nowrap}

/* Permanent delete modal dialog */
.perm-delete-dialog{border:none;border-radius:18px;padding:0;box-shadow:0 24px 64px rgba(15,23,42,.28);max-width:440px;width:calc(100vw - 48px);background:var(--surface);color:var(--ink)}
.perm-delete-dialog::backdrop{background:rgba(15,23,42,.45);backdrop-filter:blur(3px)}
.perm-delete-dialog-inner{padding:28px 28px 24px;display:flex;flex-direction:column;gap:16px}
.perm-delete-dialog-icon{width:48px;height:48px;border-radius:14px;background:rgba(239,68,68,.1);display:flex;align-items:center;justify-content:center;color:#ef4444}
.perm-delete-dialog-icon svg{width:22px;height:22px}
.perm-delete-dialog h2{font-size:18px;font-weight:800;margin:0;color:var(--ink)}
.perm-delete-dialog-desc{font-size:13px;line-height:1.6;color:var(--muted);margin:0}
.perm-delete-dialog-desc strong{color:var(--ink)}
.perm-delete-confirm-field{display:flex;flex-direction:column;gap:6px}
.perm-delete-confirm-field label{font-size:12px;font-weight:700;color:var(--ink)}
.perm-delete-confirm-field code{background:rgba(239,68,68,.1);color:#ef4444;padding:1px 5px;border-radius:4px;font-family:monospace;font-size:12px}
.perm-delete-confirm-field input{padding:9px 12px;border:1.5px solid var(--line);border-radius:8px;font-size:14px;background:var(--bg);color:var(--ink);width:100%;box-sizing:border-box;transition:border-color .15s}
.perm-delete-confirm-field input:focus{outline:none;border-color:#ef4444}
.perm-delete-dialog-actions{display:flex;gap:8px;justify-content:flex-end}
.perm-delete-dialog-actions .btn{min-width:100px}

/* Employee card management actions */
.emp-mgmt-actions{display:flex;gap:6px;padding:8px 0 0;border-top:1px solid var(--line);margin-top:8px;justify-content:center}
.emp-mgmt-actions .inline-form{flex:1}
.emp-mgmt-actions .btn{width:100%;justify-content:center}

/* Archive & Trash universal summary bar */
.archive-summary-bar{display:flex;align-items:center;gap:10px;background:rgba(109,93,252,.06);border:1px solid rgba(109,93,252,.15);border-radius:10px;padding:10px 16px;font-size:13px;font-weight:600;color:var(--purple);margin-bottom:20px}
.archive-summary-bar svg{width:15px;height:15px}
.archive-summary-bar.danger{background:rgba(239,68,68,.06);border-color:rgba(239,68,68,.2);color:#dc2626}
.text-muted{color:var(--muted);font-size:12px}

/* Task card action dropdown menu */
.card-action-menu{position:relative;margin-left:auto}
.card-menu-trigger{background:none;border:none;cursor:pointer;padding:2px 4px;border-radius:6px;color:var(--muted);line-height:1;display:flex;align-items:center}
.card-menu-trigger:hover{background:var(--line);color:var(--ink)}
.card-menu-trigger svg{width:14px;height:14px}
.card-menu-dropdown{position:absolute;right:0;bottom:calc(100% + 4px);background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(15,23,42,.15);min-width:160px;z-index:300;overflow:hidden;display:flex;flex-direction:column}
.card-menu-dropdown a,.card-menu-dropdown button{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:12px;font-weight:600;color:var(--ink);background:none;border:none;width:100%;text-align:left;cursor:pointer;text-decoration:none;transition:background .12s}
.card-menu-dropdown a:hover,.card-menu-dropdown button:hover{background:rgba(109,93,252,.06)}
.card-menu-dropdown button.danger,.card-menu-dropdown a.danger{color:#ef4444}
.card-menu-dropdown button.danger:hover,.card-menu-dropdown a.danger:hover{background:rgba(239,68,68,.06)}
.card-menu-dropdown svg{width:13px;height:13px}

/* Sidebar Archive/Trash quick links */
.sidebar-mgmt-links{display:flex;gap:4px;padding:6px 8px;margin-bottom:4px}
.sidebar-mgmt-link{display:flex;align-items:center;gap:6px;flex:1;padding:6px 8px;border-radius:8px;font-size:11px;font-weight:600;color:rgba(255,255,255,.55);text-decoration:none;transition:background .15s,color .15s}
.sidebar-mgmt-link svg{width:12px;height:12px;flex-shrink:0}
.sidebar-mgmt-link:hover{background:rgba(255,255,255,.08);color:rgba(255,255,255,.85)}
.sidebar-mgmt-link.active{background:rgba(255,255,255,.1);color:#fff}

.content-area:has(.chat-shell){height:calc(100vh - 76px);max-width:none;padding:18px 24px 20px;display:flex;flex-direction:column;overflow:hidden}
.chat-shell{height:100%;min-height:0!important;width:100%;display:grid}
.chat-shell,.chat-main{min-height:0}
.chat-main{height:100%;overflow:hidden;position:relative;display:flex;flex-direction:column;min-width:0}
.chat-main>header{flex:0 0 auto}
.message-stream{flex:1 1 0;min-height:180px;overflow-y:auto;overscroll-behavior:contain;scroll-behavior:smooth;scrollbar-width:thin}
.message-stream::-webkit-scrollbar,.chat-member-list::-webkit-scrollbar{width:7px}
.message-stream::-webkit-scrollbar-thumb,.chat-member-list::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:999px}
.message-composer{position:sticky;bottom:0;z-index:5;flex:0 0 auto;background:var(--surface);box-shadow:0 -12px 28px rgba(15,23,42,.06)}
.message-composer textarea{min-height:42px}
.chat-start-state{min-height:280px;gap:10px;padding:28px!important}
.chat-start-state p{max-width:360px;margin:0;color:#718096;font-size:10px;line-height:1.6}
.chat-start-state .btn{min-height:34px}
.message-stream.is-scrolled-up .chat-history-strip{box-shadow:0 10px 24px rgba(15,23,42,.1)}
.chat-new-message-pill{position:absolute;left:50%;bottom:72px;z-index:6;transform:translateX(-50%);min-height:34px;padding:0 13px;border:0;border-radius:999px;background:linear-gradient(135deg,var(--purple),#3b82f6);color:#fff;display:inline-flex;align-items:center;gap:7px;font-size:9px;font-weight:900;box-shadow:0 12px 28px rgba(59,130,246,.28);cursor:pointer}
.chat-new-message-pill[hidden]{display:none}
.chat-new-message-pill svg{width:13px}
.chat-new-message-pill:hover{transform:translateX(-50%) translateY(-1px);box-shadow:0 16px 34px rgba(59,130,246,.34)}
.chat-member-list{max-height:330px;overflow:auto;padding-right:4px}
.chat-member-add select{max-height:180px;overflow:auto}
.chat-member-panel .ajax-busy{opacity:.65}

.notice-command-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:14px;margin-bottom:16px}
.notice-hero-card{padding:22px;border-radius:18px;background:radial-gradient(circle at 14% 8%,rgba(109,93,252,.45),transparent 28%),linear-gradient(135deg,#111827,#293154);color:white;box-shadow:0 16px 38px rgba(17,24,39,.16);overflow:hidden}
.notice-hero-card h2{font-size:27px;line-height:1.08;margin:7px 0 6px;letter-spacing:-.04em}
.notice-hero-card p{margin:0;color:#c4ccda;font-size:11px;line-height:1.65}
.notice-pulse-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:18px}
.notice-pulse-stats span{padding:11px;border:1px solid rgba(255,255,255,.12);border-radius:13px;background:rgba(255,255,255,.08)}
.notice-pulse-stats strong{display:block;font-size:21px;color:#fff}
.notice-pulse-stats small{font-size:8px;text-transform:uppercase;letter-spacing:.08em;color:#aeb9cc;font-weight:900}
.notice-feature-card{overflow:hidden}
.notice-feature-list,.notice-timeline,.notice-expiry-list{padding:0 16px 16px;display:grid;gap:8px}
.notice-feature-item{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:13px;background:#fbfcff}
.notice-feature-item:hover,.notice-timeline a:hover,.notice-expiry-list a:hover{transform:translateY(-1px);border-color:#cbc4ff;box-shadow:var(--shadow)}
.notice-feature-item>span{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:#edeaff;color:var(--purple)}
.notice-feature-item.category-emergency>span{background:#ffeded;color:#df3f3f}
.notice-feature-item.category-policy>span{background:#eaf3ff;color:#2563eb}
.notice-feature-item.category-event>span{background:#fff3dc;color:#c77a06}
.notice-feature-item svg{width:16px}
.notice-feature-item>i{width:14px;color:#9aa4b5}
.notice-feature-item strong,.notice-timeline strong,.notice-expiry-list strong{font-size:10px}
.notice-feature-item p{margin:3px 0;color:#647187;font-size:9px;line-height:1.55}
.notice-feature-item small,.notice-timeline small,.notice-expiry-list small{font-size:8px;color:#718096}
.notice-board-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(260px,.45fr) minmax(260px,.55fr);gap:14px;margin-bottom:16px}
.notice-timeline a{display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:9px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:12px}
.notice-timeline a>div{display:flex;flex-direction:column;min-width:0}
.notice-timeline b{font-size:7px;color:var(--purple);background:#edeaff;border-radius:999px;padding:4px 7px}
.notice-dot{width:9px;height:9px;border-radius:50%;background:var(--purple);box-shadow:0 0 0 4px rgba(109,93,252,.1)}
.notice-dot.category-emergency{background:#ef4444;box-shadow:0 0 0 4px rgba(239,68,68,.12)}
.notice-dot.category-finance{background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.12)}
.notice-dot.category-event{background:#f59e0b;box-shadow:0 0 0 4px rgba(245,158,11,.12)}
.notice-dot.category-policy{background:#3b82f6;box-shadow:0 0 0 4px rgba(59,130,246,.12)}
.notice-category-list{padding:0 16px 16px;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.notice-category-list span{padding:12px;border-radius:13px;background:#f8f9fc;border:1px solid var(--line)}
.notice-category-list strong{display:block;font-size:18px}
.notice-category-list small{font-size:8px;color:#718096;text-transform:uppercase;letter-spacing:.07em;font-weight:900}
.notice-expiry-list a{display:grid;grid-template-columns:31px minmax(0,1fr);gap:8px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:12px}
.notice-expiry-list svg{width:15px;color:#c77a06;margin:auto}
.notice-expiry-list span{display:flex;flex-direction:column;min-width:0}

.audit-filters{align-items:center;flex-wrap:wrap}
.audit-filters .search-field{min-width:300px;max-width:460px}
.audit-filters select{min-width:135px}
.audit-table-panel .status-pill{font-weight:900}
.audit-table-panel td:nth-child(5){max-width:520px;white-space:normal;line-height:1.45}
.audit-command{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:16px;align-items:stretch;margin-bottom:16px;padding:22px;border-radius:20px;background:radial-gradient(circle at 14% 8%,rgba(109,93,252,.42),transparent 30%),linear-gradient(135deg,#111827,#24345d);color:#fff;box-shadow:0 18px 44px rgba(17,24,39,.17)}
.audit-command h2{font-size:29px;line-height:1.08;margin:7px 0;letter-spacing:-.04em;color:#fff}
.audit-command p{max-width:830px;margin:0;color:#c4ccda;font-size:11px;line-height:1.65}
.audit-export-card{padding:15px;border:1px solid rgba(255,255,255,.14);border-radius:17px;background:rgba(255,255,255,.09);display:flex;flex-direction:column;justify-content:center;gap:12px}
.audit-export-card>span{font-size:9px;text-transform:uppercase;letter-spacing:.09em;color:#c4ccda;font-weight:900}
.audit-export-card div{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.audit-export-card a{height:34px;border-radius:9px;background:#fff;color:#4f46e5;display:grid;place-items:center;font-size:9px;font-weight:900}
.audit-risk-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.audit-risk-card{position:relative;overflow:hidden;padding:15px;border:1px solid var(--line);border-radius:15px;background:#fff;box-shadow:0 5px 18px rgba(20,31,57,.035)}
.audit-risk-card:after{content:'';position:absolute;right:-24px;top:-24px;width:78px;height:78px;border-radius:50%;background:currentColor;opacity:.1}
.audit-risk-card span{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.08em;font-weight:900;color:#718096}
.audit-risk-card strong{display:block;font-size:25px;margin:3px 0;color:var(--ink)}
.audit-risk-card small{font-size:8px;color:#718096}
.audit-risk-card.tone-red{color:#ef4444}.audit-risk-card.tone-amber{color:#f59e0b}.audit-risk-card.tone-blue{color:#3b82f6}.audit-risk-card.tone-green{color:#22c55e}
.audit-report-grid{display:grid;grid-template-columns:1.15fr .9fr .9fr;gap:14px;margin-bottom:16px}
.audit-report-grid.secondary{grid-template-columns:1.15fr .85fr}
.audit-trend-bars{height:190px;padding:12px 18px 18px;display:grid;grid-template-columns:repeat(7,1fr);gap:10px;align-items:end}
.audit-trend-bars span{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px}
.audit-trend-bars i{width:100%;max-width:32px;min-height:8px;border-radius:10px 10px 3px 3px;background:linear-gradient(180deg,var(--purple),#3b82f6);box-shadow:0 8px 16px rgba(79,70,229,.16)}
.audit-trend-bars small{font-size:8px;color:#718096;white-space:nowrap}
.audit-trend-bars b{font-size:9px;color:var(--ink)}
.audit-breakdown-list,.audit-watch-list,.audit-device-list{padding:0 16px 16px;display:grid;gap:8px}
.audit-breakdown-list>span{display:block;padding:11px;border:1px solid var(--line);border-radius:12px;background:#fbfcff}
.audit-breakdown-list strong{display:block;font-size:10px}
.audit-breakdown-list small{font-size:8px;color:#718096}
.audit-breakdown-list b{display:block;height:6px;margin-top:8px;border-radius:999px;background:#eef2f7;overflow:hidden}
.audit-breakdown-list i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--purple),#3b82f6)}
.audit-watch-list>div:not(.empty-mini){display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;align-items:start;padding:11px;border:1px solid var(--line);border-radius:12px;background:#fbfcff}
.audit-watch-list svg{width:17px;margin:2px auto 0}
.audit-watch-list .tone-red svg{color:#ef4444}.audit-watch-list .tone-amber svg{color:#f59e0b}.audit-watch-list .tone-blue svg{color:#3b82f6}.audit-watch-list .tone-green svg{color:#22c55e}
.audit-watch-list span{display:flex;flex-direction:column;min-width:0}
.audit-watch-list strong{font-size:10px}
.audit-watch-list small,.audit-watch-list em{font-size:8px;color:#718096;font-style:normal;line-height:1.45}
.audit-device-list span{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:8px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:12px;background:#fbfcff}
.audit-device-list svg{width:15px;color:var(--purple)}
.audit-device-list strong{font-size:9px}
.audit-device-list small{font-size:8px;color:#718096}
.audit-data-table{min-width:1020px;white-space:normal}
.audit-data-table td{vertical-align:top}
.audit-data-table td strong,.audit-data-table td small,.audit-data-table td em{display:block}
.audit-data-table td strong{font-size:10px;color:var(--ink)}
.audit-data-table td small,.audit-data-table td em{font-size:8px;color:#718096;line-height:1.45;font-style:normal;margin-top:2px}
.audit-risk-badge{display:inline-flex;align-items:center;gap:5px;padding:6px 8px;border-radius:999px;font-size:8px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}
.audit-risk-badge svg{width:12px}
.audit-risk-badge.tone-red{background:#ffeded;color:#df3f3f}.audit-risk-badge.tone-amber{background:#fff3dc;color:#c77a06}.audit-risk-badge.tone-blue{background:#eaf3ff;color:#2563eb}.audit-risk-badge.tone-green{background:#e9f9ee;color:#18a449}
.audit-row-risk-critical td:first-child{box-shadow:inset 3px 0 #ef4444}.audit-row-risk-high td:first-child{box-shadow:inset 3px 0 #f59e0b}.audit-row-risk-standard td:first-child{box-shadow:inset 3px 0 #3b82f6}.audit-row-risk-low td:first-child{box-shadow:inset 3px 0 #22c55e}
.audit-change-details summary{cursor:pointer;font-size:8px;font-weight:900;color:var(--purple)}
.audit-change-details span{display:block;margin-top:7px;padding:7px;border-radius:9px;background:#f8f9fc;border:1px solid var(--line)}
.audit-change-details b{display:block;font-size:8px;color:var(--ink)}
.audit-change-details small{overflow-wrap:anywhere}
.finance-audit-grid{display:grid;grid-template-columns:.9fr 1.1fr .8fr;gap:14px;margin-bottom:16px}
.finance-audit-command{overflow:hidden;background:radial-gradient(circle at 100% 0,rgba(109,93,252,.12),transparent 36%),#fff}
.finance-audit-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:0 16px 12px}
.finance-audit-stats span{padding:12px;border:1px solid var(--line);border-radius:13px;background:#fbfcff}
.finance-audit-stats small{display:block;font-size:8px;color:#718096;text-transform:uppercase;letter-spacing:.08em;font-weight:900}
.finance-audit-stats strong{display:block;font-size:22px;margin-top:3px;color:var(--ink)}
.finance-audit-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:0 16px 16px}
.finance-audit-actions a{height:33px;border-radius:9px;background:#f3f2ff;color:var(--purple);display:grid;place-items:center;font-size:8px;font-weight:900}
.finance-audit-actions a:hover{background:var(--purple);color:#fff}
.audit-watch-list.compact{max-height:300px;overflow:auto;padding-right:10px}
.finance-audit-mix-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:0 16px 8px}
.finance-audit-mix-list.actions{padding-bottom:16px}
.finance-audit-mix-list span{padding:10px;border:1px solid var(--line);border-radius:12px;background:#fbfcff}
.finance-audit-mix-list strong{display:block;font-size:9px}
.finance-audit-mix-list small{display:block;margin-top:2px;font-size:8px;color:#718096}
.tax-audit-command{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:16px;align-items:stretch;margin-bottom:16px;padding:23px;border-radius:20px;background:radial-gradient(circle at 10% 10%,rgba(34,197,94,.3),transparent 30%),linear-gradient(135deg,#10231b,#1f3b2f);color:#fff;box-shadow:0 18px 44px rgba(15,60,40,.16)}
.tax-audit-command h2{font-size:26px;line-height:1.12;margin:7px 0;letter-spacing:-.04em;color:#fff}
.tax-audit-command p{max-width:850px;margin:0;color:#c7dacf;font-size:11px;line-height:1.65}
.tax-audit-export-card{padding:15px;border:1px solid rgba(255,255,255,.14);border-radius:17px;background:rgba(255,255,255,.09);display:flex;flex-direction:column;justify-content:center;gap:12px}
.tax-audit-export-card>span{font-size:9px;text-transform:uppercase;letter-spacing:.09em;color:#c7dacf;font-weight:900}
.tax-audit-export-card div{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.tax-audit-export-card a{height:34px;border-radius:9px;background:#fff;color:#0f7d46;display:grid;place-items:center;font-size:9px;font-weight:900}
.tax-audit-kpi-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-bottom:16px}
.tax-audit-kpi-grid article{padding:14px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 5px 18px rgba(20,31,57,.035)}
.tax-audit-kpi-grid span{display:block;font-size:8px;text-transform:uppercase;letter-spacing:.08em;color:#718096;font-weight:900}
.tax-audit-kpi-grid strong{display:block;margin:5px 0 3px;font-size:16px;color:var(--ink);letter-spacing:-.035em}
.tax-audit-kpi-grid small{font-size:8px;color:#718096;line-height:1.45}
.tax-audit-grid{display:grid;grid-template-columns:.85fr .9fr 1.1fr;gap:14px;margin-bottom:16px}
.tax-schedule-list,.tax-cashflow-list,.tax-evidence-list{display:grid;gap:8px;padding:0 16px 16px}
.tax-schedule-list span,.tax-cashflow-list span,.tax-evidence-list span{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;padding:11px;border:1px solid var(--line);border-radius:12px;background:#fbfcff}
.tax-schedule-list strong,.tax-cashflow-list strong,.tax-evidence-list strong{font-size:10px}
.tax-schedule-list b,.tax-cashflow-list b,.tax-evidence-list b{font-size:10px;color:var(--ink);white-space:nowrap}
.tax-cashflow-list small,.tax-evidence-list small{grid-column:1/-1;font-size:8px;color:#718096;line-height:1.45}
.tax-audit-note{padding:0 16px 16px;display:grid;gap:7px}
.tax-audit-note p{display:flex;gap:7px;margin:0;padding:9px;border-radius:11px;background:#f0fdf4;color:#17673a;font-size:9px;line-height:1.5}
.tax-audit-note svg{width:14px;flex:none;margin-top:1px}
.tax-cashbook-panel{margin-bottom:16px}
.tax-cashbook-panel .data-table td:nth-child(4){white-space:normal;min-width:260px}

.dashboard-grid .panel canvas{max-width:100%}
.advanced-dashboard-grid .panel .chart-wrap.small{min-height:220px}
.chart-legend span{font-weight:800}
.topbar-lock-form{display:flex}
.dashboard-summary-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(360px,.75fr);gap:16px;margin-bottom:16px}
.dashboard-summary-panel,.dashboard-stat-shell{border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.86);box-shadow:0 10px 30px rgba(19,29,54,.055);padding:16px}
.dashboard-section-title{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:24px 0 12px;padding:0 2px}.dashboard-section-title.compact{display:block;margin:0 0 12px;padding:0}
.dashboard-section-title span{display:inline-flex;align-items:center;gap:6px;font-size:8px;text-transform:uppercase;letter-spacing:.12em;color:var(--purple);font-weight:900}.dashboard-section-title h2{margin:4px 0 2px;font-size:18px;letter-spacing:-.035em;color:var(--ink)}.dashboard-section-title p{margin:0;color:#718096;font-size:10px;line-height:1.5}
.dashboard-summary-panel .insight-grid,.dashboard-summary-panel .metric-row,.dashboard-stat-shell .stat-grid{margin-bottom:0}.dashboard-summary-panel .metric-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.dashboard-summary-panel .metric-row article{min-height:92px;border-radius:14px;background:#fbfcff}.dashboard-stat-shell{margin-bottom:16px}.dashboard-stat-shell .advanced-stat-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}.dashboard-stat-shell .stat-card{display:grid;grid-template-columns:42px minmax(0,1fr) 24px;gap:12px;border-radius:15px;background:#fff}.dashboard-stat-shell .stat-card>div:nth-child(2){min-width:0;overflow:hidden}.dashboard-stat-shell .stat-card strong{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;font-size:clamp(16px,1.05vw,18px);letter-spacing:-.04em}.dashboard-stat-shell .stat-spark{width:24px;justify-self:end;margin-left:0}.dashboard-clean-grid.advanced-dashboard-grid{grid-template-columns:minmax(0,1.45fr) minmax(340px,.85fr);gap:18px;align-items:start}.dashboard-clean-grid .dashboard-chart-panel{grid-column:1/-1}.dashboard-clean-grid>.panel{border-radius:18px;box-shadow:0 10px 28px rgba(19,29,54,.055)}.dashboard-clean-grid .chart-wide{grid-column:1/-1}.dashboard-clean-grid .panel-header{padding-bottom:8px}
.agenda-card .agenda-row.event-meeting,.agenda-card .agenda-row.event-task,.agenda-card .agenda-row.event-milestone{background:var(--surface);border-color:var(--line);border-left-width:3px;border-left-style:solid;box-shadow:0 2px 8px rgba(15,23,42,.05);color:var(--ink)}
.agenda-card .agenda-row.event-meeting{border-left-color:#6d5dfc}
.agenda-card .agenda-row.event-task{border-left-color:#3b82f6}
.agenda-card .agenda-row.event-milestone{border-left-color:#f59e0b}
.agenda-card .agenda-row.event-meeting strong,.agenda-card .agenda-row.event-task strong,.agenda-card .agenda-row.event-milestone strong{color:var(--ink);font-size:10px;font-weight:800}
.agenda-card .agenda-row.event-meeting small,.agenda-card .agenda-row.event-task small,.agenda-card .agenda-row.event-milestone small{color:var(--muted);font-size:9px;font-weight:600}
.agenda-card .agenda-row.event-meeting>span{background:#edeaff;color:#6d5dfc;box-shadow:none}
.agenda-card .agenda-row.event-task>span{background:#eaf3ff;color:#2563eb;box-shadow:none}
.agenda-card .agenda-row.event-milestone>span{background:#fff3dc;color:#c77a06;box-shadow:none}

.lock-auth{min-height:100vh;display:grid;place-items:center;padding:30px;background:radial-gradient(circle at 15% 12%,rgba(109,93,252,.28),transparent 30%),radial-gradient(circle at 85% 80%,rgba(59,130,246,.18),transparent 32%),linear-gradient(135deg,#0f172a,#111827)}
.lock-card{width:min(980px,100%);display:grid;grid-template-columns:1.05fr .95fr;border:1px solid rgba(255,255,255,.12);border-radius:24px;overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.32);background:#fff}
.lock-visual{position:relative;min-height:560px;padding:38px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;background:radial-gradient(circle at 22% 18%,rgba(109,93,252,.62),transparent 28%),linear-gradient(145deg,#111827,#263154)}.lock-visual:after{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:36px 36px;opacity:.7}.lock-visual>*{position:relative;z-index:1}.lock-badge{width:max-content;display:inline-flex;align-items:center;gap:7px;padding:8px 10px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.13);font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.lock-badge svg{width:14px}
.lock-visual h1{font-size:48px;line-height:1;margin:0 0 12px;color:#fff;letter-spacing:-.06em}.lock-visual p{max-width:420px;margin:0;color:#c4ccda;font-size:13px;line-height:1.7}.lock-clock{width:240px;padding:17px;border-radius:17px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(10px)}.lock-clock span{font-size:8px;text-transform:uppercase;letter-spacing:.12em;color:#aeb9cc;font-weight:900}.lock-clock strong{display:block;font-size:32px;color:#fff;letter-spacing:.04em}.lock-clock small{font-size:9px;color:#cbd5e1}
.lock-panel{padding:40px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.lock-company-logo{width:56px;height:56px;border-radius:16px;object-fit:cover;margin-bottom:18px;box-shadow:0 10px 24px rgba(19,29,54,.16)}.lock-panel .brand-mark{margin-bottom:18px}.lock-panel .avatar{margin-bottom:14px}.lock-panel h2{font-size:23px;margin:7px 0 3px;letter-spacing:-.04em;color:var(--ink)}.lock-panel>p{margin:0 0 22px;color:#718096;font-size:11px}.lock-form,.lock-logout{width:100%;max-width:360px}.lock-form{gap:13px}.lock-logout{margin-top:10px}.lock-form .btn{gap:8px}

.approval-command{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:16px;align-items:stretch;margin-bottom:16px;padding:22px;border-radius:20px;background:radial-gradient(circle at 12% 10%,rgba(109,93,252,.42),transparent 29%),linear-gradient(135deg,#111827,#26345d);color:#fff;box-shadow:0 18px 44px rgba(17,24,39,.17);overflow:hidden}
.approval-command h2{font-size:29px;line-height:1.08;margin:7px 0 7px;letter-spacing:-.04em;color:#fff}
.approval-command p{margin:0;max-width:820px;color:#c4ccda;font-size:11px;line-height:1.65}
.approval-sla-card{display:grid;place-items:center;text-align:center;border:1px solid rgba(255,255,255,.14);border-radius:17px;background:rgba(255,255,255,.08);backdrop-filter:blur(10px);padding:16px}
.approval-sla-card svg{width:24px;color:#fbbf24}.approval-sla-card strong{font-size:42px;line-height:1;color:#fff}.approval-sla-card span{font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.09em;color:#fff}.approval-sla-card small{font-size:8px;color:#aeb9cc}
.approval-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.approval-stat-card{display:grid;grid-template-columns:40px 1fr;gap:8px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 5px 18px rgba(20,31,57,.035)}
.approval-stat-card svg{grid-row:1/3;width:18px;height:18px;padding:10px;box-sizing:content-box;border-radius:12px;background:#f0edff;color:var(--purple)}.approval-stat-card span{font-size:9px;color:#718096;text-transform:uppercase;letter-spacing:.08em;font-weight:900}.approval-stat-card strong{font-size:23px;color:var(--ink)}
.approval-stat-card.tone-green svg{background:#e9f9ee;color:#18a449}.approval-stat-card.tone-red svg{background:#ffeded;color:#df3f3f}.approval-stat-card.tone-amber svg{background:#fff3dc;color:#c77a06}.approval-stat-card.tone-blue svg{background:#eaf3ff;color:#2563eb}
.approval-center-grid{display:grid;grid-template-columns:1.1fr .75fr .9fr;gap:14px;margin-bottom:16px}
.approval-insight-panel{overflow:hidden}.approval-insight-panel h3{margin:0 16px 8px;font-size:10px;color:#536078}
.approval-sla-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 16px 14px}
.approval-sla-strip span{padding:11px;border-radius:13px;border:1px solid var(--line);background:#f8f9fc;text-align:center}.approval-sla-strip strong{display:block;font-size:22px}.approval-sla-strip small{font-size:8px;color:#718096;text-transform:uppercase;letter-spacing:.07em;font-weight:900}.approval-sla-strip .fresh strong{color:#18a449}.approval-sla-strip .watch strong{color:#c77a06}.approval-sla-strip .breached strong{color:#df3f3f}
.approval-type-bars,.approval-workload-list,.approval-priority-list{display:grid;gap:8px;padding:0 16px 16px}
.approval-type-bars span{display:grid;grid-template-columns:95px minmax(0,1fr) 26px;gap:8px;align-items:center}.approval-type-bars small{font-size:8px;color:#718096;font-weight:900;text-transform:uppercase;letter-spacing:.05em}.approval-type-bars b{height:8px;border-radius:999px;background:#edf0f6;overflow:hidden}.approval-type-bars b i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--purple),#3b82f6)}.approval-type-bars strong{font-size:10px;text-align:right}
.approval-workload-list span{display:grid;grid-template-columns:32px 1fr auto;gap:8px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:12px;background:#fbfcff}.approval-workload-list svg{width:15px;color:var(--purple);margin:auto}.approval-workload-list strong{font-size:10px}.approval-workload-list small{font-size:8px;color:#718096}
.approval-priority-list a{display:grid;grid-template-columns:32px 1fr;gap:8px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:12px;background:#fff}.approval-priority-list a:hover{border-color:#cbc4ff;box-shadow:var(--shadow);transform:translateY(-1px)}.approval-priority-list svg{width:15px;margin:auto;color:var(--purple)}.approval-priority-list strong{font-size:10px}.approval-priority-list small{font-size:8px;color:#718096}.approval-priority-list .urgency-watch{border-left:4px solid #f59e0b}.approval-priority-list .urgency-breached{border-left:4px solid #ef4444}
.approval-workbench{padding:16px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:var(--shadow);margin-bottom:16px}
.approval-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:12px}
.approval-request-card{display:flex;flex-direction:column;gap:11px;padding:15px;border:1px solid var(--line);border-radius:15px;background:#fbfcff;min-height:300px}.approval-request-card.urgency-watch{border-left:4px solid #f59e0b}.approval-request-card.urgency-breached{border-left:4px solid #ef4444}.approval-request-card.urgency-closed{opacity:.88}
.approval-request-card header{display:flex;justify-content:space-between;align-items:center;gap:8px}.approval-type-pill{padding:5px 8px;border-radius:999px;background:#edeaff;color:var(--purple);font-size:8px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.approval-request-card h3{font-size:15px;line-height:1.25;margin:0;color:var(--ink)}.approval-request-card p{margin:0;color:#647187;font-size:10px;line-height:1.55;min-height:31px}
.approval-request-card dl{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:0}.approval-request-card dl div{padding:9px;border:1px solid #edf0f6;border-radius:11px;background:#fff}.approval-request-card dt{font-size:7px;color:#718096;text-transform:uppercase;letter-spacing:.08em;font-weight:900}.approval-request-card dd{margin:3px 0 0;font-size:10px;color:var(--ink);font-weight:800}
.approval-route-form{display:flex;gap:7px;align-items:center}.approval-route-form select{min-width:0;flex:1;height:36px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);font-size:10px;padding:0 9px}.approval-route-form.detail{margin:0 16px 12px}.approval-route-form.detail select{height:40px}
.approval-decision-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:auto}.approval-decision-actions form{display:grid;gap:7px}.approval-decision-actions textarea{width:100%;min-height:54px;resize:vertical;border:1px solid var(--line);border-radius:10px;padding:9px;font-size:10px;color:var(--ink);background:#fff}.approval-decision-actions .btn{width:100%}.approval-decision-actions.detail{padding:0 16px 16px;margin:0}.approval-decision-actions.detail textarea{min-height:76px}
.approval-closed-note{display:flex;gap:8px;align-items:flex-start;margin-top:auto;padding:10px;border-radius:12px;background:#f1f5f9;color:#647187;font-size:10px;line-height:1.5}.approval-closed-note svg{width:15px;color:#18a449;flex:none}
.approval-detail-command{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:14px;margin-bottom:16px}.approval-detail-hero{padding:22px;border-radius:19px;background:linear-gradient(135deg,#111827,#283154);color:#fff;box-shadow:0 16px 38px rgba(17,24,39,.15)}.approval-detail-hero h2{font-size:27px;line-height:1.1;margin:7px 0;color:#fff}.approval-detail-hero p{margin:0;color:#c4ccda;font-size:11px;line-height:1.65}.approval-detail-hero>div{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:17px}.approval-detail-hero span{padding:10px;border-radius:13px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1)}.approval-detail-hero strong{display:block;color:#fff;font-size:13px}.approval-detail-hero small{font-size:8px;color:#aeb9cc;text-transform:uppercase;letter-spacing:.08em;font-weight:900}
.approval-detail-actions{overflow:hidden}.approval-linked-record{display:grid;grid-template-columns:34px minmax(0,1fr);gap:9px;align-items:center;margin:0 16px 12px;padding:11px;border:1px solid var(--line);border-radius:12px;background:#fbfcff}.approval-linked-record:hover{border-color:#cbc4ff;box-shadow:var(--shadow)}.approval-linked-record svg{width:16px;color:var(--purple);margin:auto}.approval-linked-record strong{font-size:10px}.approval-linked-record small{font-size:8px;color:#718096}

.calendar-command{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;margin-bottom:16px}
.calendar-view-switch{display:flex;gap:5px;padding:5px;border:1px solid var(--line);border-radius:13px;background:var(--surface);box-shadow:0 5px 18px rgba(20,31,57,.035)}
.calendar-view-switch a{height:38px;display:inline-flex;align-items:center;gap:6px;padding:0 12px;border-radius:10px;color:#647187;font-size:10px;font-weight:900}
.calendar-view-switch a.active,.calendar-view-switch a:hover{background:linear-gradient(135deg,var(--purple),#4f8df7);color:#fff;box-shadow:0 8px 18px rgba(109,93,252,.2)}
.calendar-view-switch svg{width:14px}
.calendar-filters{margin:0;flex-wrap:wrap}
.calendar-filters select{min-width:145px}
.calendar-focus-grid{display:grid;grid-template-columns:minmax(0,1.1fr) 360px;gap:16px;margin-bottom:16px}
.calendar-focus-panel{overflow:hidden}
.calendar-focus-days{display:grid;gap:10px;padding:0 16px 16px;max-height:520px;overflow:auto}
.calendar-focus-days section{padding:12px;border:1px solid var(--line);border-radius:14px;background:#fbfcff}
.calendar-focus-days header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.calendar-focus-days header strong{font-size:10px}
.calendar-focus-days header small{font-size:8px;color:#718096}
.calendar-day-empty{margin:0;padding:10px;border-radius:10px;background:#f1f5f9;color:#718096;font-size:9px;text-align:center}
.calendar-intel-card h3{font-size:10px;margin:0 16px 8px;color:#536078}
.calendar-risk-row{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;padding:0 16px 12px}
.calendar-risk-row span{padding:10px;border-radius:12px;text-align:center;background:#f8f9fc;border:1px solid var(--line)}
.calendar-risk-row strong{display:block;font-size:17px}
.calendar-risk-row small{font-size:7px;text-transform:uppercase;letter-spacing:.08em;color:#718096;font-weight:900}
.risk-low strong{color:#64748b}.risk-medium strong{color:#2563eb}.risk-high strong{color:#c77a06}.risk-critical strong{color:#df3f3f}
.calendar-intel-list,.calendar-project-load{display:grid;gap:8px;padding:0 16px 16px}
.calendar-intel-list span,.calendar-project-load span{display:grid;grid-template-columns:28px 1fr;gap:8px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:12px}
.calendar-intel-list svg{width:14px;color:var(--purple);margin:auto}
.calendar-intel-list strong,.calendar-project-load strong{font-size:10px}
.calendar-intel-list small,.calendar-project-load small{font-size:8px;color:#718096}
.calendar-project-load span{display:flex;align-items:flex-start;flex-direction:column;gap:2px}
.calendar-day.is-focus{box-shadow:inset 0 0 0 2px rgba(109,93,252,.24)}
.calendar-day:not(.is-focus) .calendar-empty-dot{opacity:.5}
.calendar-event.risk-critical,.agenda-item.risk-critical{box-shadow:inset 0 0 0 1px rgba(239,68,68,.28);border-left-color:#ef4444!important}
.agenda-item.event-meeting,.agenda-item.event-task,.agenda-item.event-milestone{background:var(--surface);border-color:var(--line);border-left-width:3px;border-left-style:solid;box-shadow:0 2px 8px rgba(15,23,42,.05);color:var(--ink)}
.agenda-item.event-meeting{border-left-color:#6d5dfc}
.agenda-item.event-task{border-left-color:#3b82f6}
.agenda-item.event-milestone{border-left-color:#f59e0b}
.agenda-item.event-meeting strong,.agenda-item.event-task strong,.agenda-item.event-milestone strong{color:var(--ink);font-size:10px;font-weight:800}
.agenda-item.event-meeting small,.agenda-item.event-task small,.agenda-item.event-milestone small{color:var(--muted);font-size:9px;font-weight:600}
.agenda-item.event-meeting .agenda-icon{background:#edeaff;color:#6d5dfc;box-shadow:none}
.agenda-item.event-task .agenda-icon{background:#eaf3ff;color:#2563eb;box-shadow:none}
.agenda-item.event-milestone .agenda-icon{background:#fff3dc;color:#b46905;box-shadow:none}
.agenda-item.event-meeting.risk-critical,.agenda-item.event-task.risk-critical,.agenda-item.event-milestone.risk-critical{border-left-color:#ef4444!important}
.agenda-item.event-meeting.risk-high,.agenda-item.event-task.risk-high,.agenda-item.event-milestone.risk-high{border-left-color:#f97316!important}

/* ── CRM & Leads ─────────────────────────────────────────────────────── */
.crm-filters{align-items:center;flex-wrap:wrap}
.crm-filters .search-field{min-width:280px;max-width:420px}
.crm-filters select{min-width:128px}
.score-filter{display:flex;align-items:center;gap:6px;height:38px;border:1px solid var(--line);border-radius:9px;background:var(--surface);padding:0 9px}
.score-filter span{font-size:8px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:900;white-space:nowrap}
.score-filter input{width:60px;border:0;outline:0;font-size:10px;color:var(--ink);background:transparent}

/* Stage colour palette — inherited via CSS vars on the stage wrapper */
.stage-new_lead{--sc:#6d5dfc;--sb:#f0eeff}
.stage-contacted{--sc:#2563eb;--sb:#eff6ff}
.stage-meeting_scheduled{--sc:#0891b2;--sb:#ecfeff}
.stage-proposal_sent{--sc:#d97706;--sb:#fffbeb}
.stage-negotiation{--sc:#ea580c;--sb:#fff7ed}
.stage-won{--sc:#16a34a;--sb:#f0fdf4}
.stage-lost{--sc:#64748b;--sb:#f8fafc}

/* CRM hub layout */
.crm-hub{display:grid;gap:16px;margin-bottom:4px}

/* Pipeline panel */
.crm-pipeline-panel{overflow:hidden}
.crm-pipeline-board{display:flex;gap:10px;overflow-x:auto;padding:0 16px 16px;scrollbar-width:thin}
.crm-pipeline-board::-webkit-scrollbar{height:4px}
.crm-pipeline-board::-webkit-scrollbar-thumb{background:var(--line);border-radius:2px}

/* Stage columns */
.crm-stage{min-width:192px;max-width:208px;flex-shrink:0;display:flex;flex-direction:column;border-radius:12px;overflow:hidden;border:1.5px solid var(--sc,#e2e8f0)}
.crm-stage-head{display:flex;align-items:center;gap:6px;padding:9px 11px 7px;background:var(--sb,#f8fafc)}
.crm-stage-dot{width:7px;height:7px;border-radius:50%;background:var(--sc,#94a3b8);flex-shrink:0}
.crm-stage-label{font-size:8px;font-weight:900;color:var(--sc,#536078);text-transform:uppercase;letter-spacing:.06em;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crm-stage-count{font-size:18px;font-weight:900;color:var(--ink);line-height:1}
.crm-stage-meta{display:flex;justify-content:space-between;padding:3px 11px 8px;background:var(--sb,#f8fafc);border-bottom:1px solid rgba(0,0,0,.06)}
.crm-stage-meta span{font-size:8px;color:var(--sc,#718096);font-weight:700}
.crm-stage-cards{flex:1;display:flex;flex-direction:column;gap:5px;padding:9px;background:var(--surface);min-height:56px}
.crm-mini-card{display:flex;align-items:center;gap:7px;padding:7px 8px;border-radius:8px;background:var(--surface);border:1px solid var(--line);text-decoration:none;transition:border-color .12s,box-shadow .12s,transform .12s}
.crm-mini-card:hover{border-color:var(--sc,#6d5dfc);box-shadow:0 3px 10px rgba(0,0,0,.07);transform:translateY(-1px)}
.crm-mini-card-body{flex:1;min-width:0}
.crm-mini-card-body strong{display:block;font-size:9.5px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crm-mini-card-body small{font-size:8px;color:var(--muted);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crm-mini-score{width:26px;height:26px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;font-size:8px;font-weight:900;background:conic-gradient(var(--sc,#6d5dfc) calc(var(--score,50)*1%),#e2e8f0 0);color:var(--sc,#6d5dfc)}
.crm-stage-empty{padding:10px;border-radius:7px;background:#f1f5f9;color:#94a3b8;text-align:center;font-size:8px;font-style:italic}

/* Intel panels row — hot leads / follow-up / overdue */
.crm-intel-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.crm-intel-panel .panel-header h2{font-size:13px;display:flex;align-items:center;gap:6px}
.crm-intel-panel .panel-header h2 svg{width:13px;height:13px}
.crm-intel-list{display:flex;flex-direction:column;gap:6px;padding:10px 14px 14px}
.crm-intel-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:9px;border:1px solid var(--line);text-decoration:none;background:var(--surface);transition:border-color .12s,box-shadow .12s,transform .12s}
.crm-intel-item:hover{border-color:#cbc4ff;box-shadow:0 4px 12px rgba(109,93,252,.1);transform:translateY(-1px)}
.crm-intel-item.is-overdue{border-color:rgba(239,68,68,.18);background:rgba(239,68,68,.02)}
.crm-intel-item.is-overdue:hover{border-color:#ef4444;box-shadow:0 4px 12px rgba(239,68,68,.1)}
.crm-intel-item>svg:last-child{width:13px;height:13px;color:var(--muted);flex-shrink:0;opacity:.45}
.crm-score-badge{width:30px;height:30px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;font-size:8.5px;font-weight:900;background:conic-gradient(var(--purple) calc(var(--score,50)*1%),#e2e8f0 0);color:var(--purple)}
.crm-date-badge{width:30px;flex-shrink:0;text-align:center}
.crm-date-badge strong{display:block;font-size:14px;font-weight:900;color:var(--ink);line-height:1.1}
.crm-date-badge small{display:block;font-size:7.5px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.crm-date-badge.overdue strong,.crm-date-badge.overdue small{color:#ef4444}
.crm-intel-info{flex:1;min-width:0}
.crm-intel-info strong{display:block;font-size:11px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crm-intel-info small{font-size:8.5px;color:var(--muted)}
.crm-intel-empty{display:flex;align-items:center;gap:8px;padding:16px 10px;color:var(--muted);font-size:11px}
.crm-intel-empty svg{width:16px;height:16px;opacity:.4;flex-shrink:0}

/* Breakdown row — source mix / owner load */
.crm-breakdown-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.crm-breakdown-list{display:flex;flex-direction:column;gap:8px;padding:10px 14px 14px}
.crm-breakdown-item{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;border:1px solid var(--line);background:var(--surface)}
.crm-breakdown-label{flex:1;font-size:11px;font-weight:700;color:var(--ink);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crm-breakdown-nums{display:flex;flex-direction:column;align-items:flex-end;gap:1px;flex-shrink:0}
.crm-breakdown-nums strong{font-size:13px;font-weight:900;color:var(--ink)}
.crm-breakdown-nums small{font-size:8.5px;color:var(--muted)}

/* ── Lead card grid (resource list) ──────────────────────────────── */
.lead-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px;margin-bottom:20px}
.lead-card{display:flex;flex-direction:column;min-height:168px;border-radius:16px;border:1.5px solid var(--line);background:var(--surface);overflow:hidden;text-decoration:none;position:relative;transition:box-shadow .18s,transform .18s,border-color .18s}
.lead-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--sc,#94a3b8);border-radius:5px 0 0 5px}
.lead-card:hover{box-shadow:0 10px 32px rgba(15,23,42,.12);transform:translateY(-3px);border-color:var(--sc,#94a3b8)}
/* Head */
.lead-card-head{display:flex;align-items:center;gap:11px;padding:15px 14px 11px 18px}
.lead-card-avatar{width:40px;height:40px;border-radius:11px;background:var(--sb,#f0eeff);display:grid;place-items:center;flex-shrink:0;font-size:13px;font-weight:900;color:var(--sc,#6d5dfc);letter-spacing:-.5px}
.lead-card-title{flex:1;min-width:0}
.lead-card-title h3{font-size:13.5px;font-weight:800;color:var(--ink);margin:0 0 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lead-card-title h3.lc-placeholder{color:var(--muted);font-style:italic;font-weight:600}
.lead-card-title p{font-size:10.5px;color:var(--muted);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Score ring */
.lead-card-score{width:36px;height:36px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;font-size:9.5px;font-weight:900;background:conic-gradient(var(--sc,#6d5dfc) calc(var(--score,0)*1%),#e2e8f0 0);color:var(--sc,#6d5dfc);box-shadow:0 0 0 2px var(--surface)}
/* Chips */
.lead-card-chips{display:flex;gap:5px;padding:0 16px 11px 18px;flex-wrap:wrap}
.lead-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:9.5px;font-weight:700;background:#f1f5f9;color:#536076;white-space:nowrap}
.lead-chip svg{width:9px;height:9px;flex-shrink:0}
.lead-chip.stage-chip{background:var(--sb,#f0eeff);color:var(--sc,#6d5dfc);border:1px solid color-mix(in srgb,var(--sc,#6d5dfc) 18%,transparent)}
.lead-chip.value-chip{background:#f0fdf4;color:#15803d;font-size:10px;font-weight:800}
/* Meta row */
.lead-card-meta{display:flex;align-items:center;gap:12px;padding:8px 18px;border-top:1px solid var(--line);flex-wrap:wrap;margin-top:auto}
.lead-card-meta-item{display:flex;align-items:center;gap:4px;font-size:9.5px;color:var(--muted);min-width:0}
.lead-card-meta-item svg{width:10px;height:10px;flex-shrink:0}
.lead-card-meta-item span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Foot */
.lead-card-foot{display:flex;align-items:center;justify-content:space-between;padding:7px 10px 7px 18px;border-top:1px solid var(--line);background:rgba(0,0,0,.015)}
.lead-due{display:flex;align-items:center;gap:5px;font-size:9.5px;color:var(--muted)}
.lead-due svg{width:10px;height:10px;flex-shrink:0}
.lead-due.overdue{color:#ef4444;font-weight:700}
.lead-card-actions{display:flex;gap:3px}

/* ── Lead detail hero ──────────────────────────────────────────── */
.lead-hero{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:14px;margin-bottom:16px}
.lead-hero-main{border-radius:16px;overflow:hidden;border:1.5px solid var(--line);background:var(--surface)}
.lead-stage-track{display:flex;overflow:hidden;border-bottom:1px solid var(--line)}
.lead-stage-step{flex:1;padding:9px 4px;text-align:center;font-size:7.5px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);border-right:1px solid var(--line);position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lead-stage-step:last-child{border-right:0}
.lead-stage-step.current{background:var(--sb,#f0eeff);color:var(--sc,var(--purple))}
.lead-stage-step.current::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2.5px;background:var(--sc,var(--purple))}
.lead-hero-body{padding:16px 20px 18px}
.lead-hero-company{font-size:20px;font-weight:900;color:var(--ink);margin:0 0 3px}
.lead-hero-contact{font-size:13px;color:var(--muted);margin:0 0 14px}
.lead-hero-contacts{display:flex;gap:7px;flex-wrap:wrap}
.lead-cta{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:8px;font-size:11px;font-weight:700;text-decoration:none;border:1.5px solid var(--line);color:var(--ink);background:var(--surface);transition:border-color .12s,background .12s,color .12s}
.lead-cta:hover{border-color:var(--purple);background:#f0eeff;color:var(--purple)}
.lead-cta svg{width:12px;height:12px}
.lead-score-panel{border-radius:16px;background:linear-gradient(145deg,#0f172a,#1e3a5f);color:white;padding:18px;display:flex;flex-direction:column;gap:12px}
.lead-score-panel-label{font-size:8px;text-transform:uppercase;letter-spacing:.12em;color:#7dd3fc;font-weight:900}
.lead-score-big{display:flex;align-items:center;gap:12px}
.lead-score-ring{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#6d5dfc calc(var(--score,50)*1%),rgba(255,255,255,.12) 0);flex-shrink:0}
.lead-score-ring strong{font-size:22px;font-weight:900;color:#fff;line-height:1}
.lead-score-info p{margin:0 0 3px;font-size:10px;color:#94a3b8}
.lead-score-info strong{font-size:14px;font-weight:900;color:#fff;display:block}
.lead-score-info small{font-size:9px;color:#64748b}
.lead-kpis{display:flex;justify-content:space-around;border-top:1px solid rgba(255,255,255,.08);padding-top:12px}
.lead-kpi{display:flex;flex-direction:column;align-items:center;gap:2px}
.lead-kpi strong{font-size:13px;font-weight:900;color:#fff}
.lead-kpi small{font-size:8px;color:#64748b;text-transform:uppercase;letter-spacing:.06em;font-weight:800}

/* Lead convert banner */
.lead-convert-banner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;border-radius:13px;background:linear-gradient(135deg,#f0fdf4,#dcfce7);border:1.5px solid #86efac;margin-bottom:16px;flex-wrap:wrap}
.lead-convert-info{display:flex;align-items:center;gap:11px}
.lead-convert-icon{width:38px;height:38px;border-radius:9px;background:#16a34a;display:grid;place-items:center;flex-shrink:0}
.lead-convert-icon svg{width:18px;height:18px;color:white}
.lead-convert-info h3{font-size:13px;font-weight:800;color:#166534;margin:0 0 2px}
.lead-convert-info p{font-size:11px;color:#16a34a;margin:0}
.lead-convert-form{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lead-convert-form input[type=text]{height:34px;border:1.5px solid #86efac;border-radius:8px;padding:0 11px;font-size:12px;background:white;color:#166534;outline:none}
.lead-convert-form input[type=text]:focus{border-color:#16a34a}
.lead-convert-form label{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:#166534;cursor:pointer;white-space:nowrap}

/* score-ring-mini kept for any legacy use */
.score-ring-mini{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--purple) calc(var(--score,75)*1%),#e2e8f0 0);font-size:9px;font-weight:900;color:var(--purple)}

html[data-theme-mode="dark"] .chat-new-message-pill{background:linear-gradient(135deg,#615fff,#2563eb);box-shadow:0 16px 34px rgba(37,99,235,.32)}
html[data-theme-mode="dark"] .live-toast{background:#111827;border-color:#263145;color:#f8fafc;box-shadow:0 16px 36px rgba(0,0,0,.36)}
html[data-theme-mode="dark"] .live-toast span{color:#cbd5e1}
html[data-theme-mode="dark"] .live-toast small{color:#94a3b8}
html[data-theme-mode="dark"] .composer-errors{background:#450a0a;border-color:#7f1d1d;color:#fecaca}
html[data-theme-mode="dark"] .notification-row{background:#111827;border-color:#263145;color:#e5e7eb}
html[data-theme-mode="dark"] .notification-row p,html[data-theme-mode="dark"] .notification-row small{color:#94a3b8}
html[data-theme-mode="dark"] .message-stream::-webkit-scrollbar-thumb,html[data-theme-mode="dark"] .chat-member-list::-webkit-scrollbar-thumb{background:#334155}
html[data-theme-mode="dark"] .chat-sidebar nav>a.active{background:#252058;color:#fff}
html[data-theme-mode="dark"] .message-stream article:not(.mine) .bubble,html[data-theme-mode="dark"] .chat-member-note{background:#1e293b;color:#e5e7eb;border-color:#263145}
html[data-theme-mode="dark"] .bubble a{color:#bfdbfe}
html[data-theme-mode="dark"] .notice-hero-card{box-shadow:0 18px 44px rgba(0,0,0,.35)}
html[data-theme-mode="dark"] .notice-feature-item,html[data-theme-mode="dark"] .notice-timeline a,html[data-theme-mode="dark"] .notice-expiry-list a,html[data-theme-mode="dark"] .notice-category-list span{background:#111827;border-color:#263145;color:#e5e7eb}
html[data-theme-mode="dark"] .notice-feature-item p,html[data-theme-mode="dark"] .notice-feature-item small,html[data-theme-mode="dark"] .notice-timeline small,html[data-theme-mode="dark"] .notice-expiry-list small,html[data-theme-mode="dark"] .notice-category-list small{color:#94a3b8}
html[data-theme-mode="dark"] .notice-timeline b{background:#312e81;color:#c4b5fd}
html[data-theme-mode="dark"] .pagination a,html[data-theme-mode="dark"] .pagination span,html[data-theme-mode="dark"] .pagination button{background:#111827;border-color:#263145;color:#e5e7eb}
html[data-theme-mode="dark"] .pagination .active,html[data-theme-mode="dark"] .pagination span.active,html[data-theme-mode="dark"] .pagination button.active{background:var(--purple);color:#fff}
html[data-theme-mode="dark"] .dashboard-title-bold,html[data-theme-mode="dark"] .panel-header h2,html[data-theme-mode="dark"] .stat-card strong,html[data-theme-mode="dark"] .metric-row article>strong,html[data-theme-mode="dark"] .task-row strong,html[data-theme-mode="dark"] .activity-row p,html[data-theme-mode="dark"] .activity-row p strong,html[data-theme-mode="dark"] .notice-list strong,html[data-theme-mode="dark"] .project-spotlight-list strong,html[data-theme-mode="dark"] .presence-list strong,html[data-theme-mode="dark"] .finance-snapshot-grid strong,html[data-theme-mode="dark"] .donut-center strong,html[data-theme-mode="dark"] .chart-legend strong,html[data-theme-mode="dark"] .detail-grid dd,html[data-theme-mode="dark"] .person-cell strong{color:#e5e7eb!important}
html[data-theme-mode="dark"] .chart-legend span,html[data-theme-mode="dark"] .task-row small,html[data-theme-mode="dark"] .project-spotlight-list small,html[data-theme-mode="dark"] .presence-list small,html[data-theme-mode="dark"] .finance-snapshot-card footer,html[data-theme-mode="dark"] .data-table td{color:#cbd5e1}
html[data-theme-mode="dark"] .finance-status-list span,html[data-theme-mode="dark"] .budget-list a,html[data-theme-mode="dark"] .project-spotlight-list a,html[data-theme-mode="dark"] .decision-list a{background:#111827;border-color:#263145;color:#e5e7eb}
html[data-theme-mode="dark"] .progress,html[data-theme-mode="dark"] .project-spotlight-list b,html[data-theme-mode="dark"] .cashflow-lane{background:#1e293b}
html[data-theme-mode="dark"] .filter-alert{background:#422006;border-color:#92400e;color:#fbbf24}
html[data-theme-mode="dark"] .dashboard-summary-panel,html[data-theme-mode="dark"] .dashboard-stat-shell,html[data-theme-mode="dark"] .dashboard-summary-panel .metric-row article{background:#111827;border-color:#263145;color:#e5e7eb}
html[data-theme-mode="dark"] .dashboard-section-title h2,html[data-theme-mode="dark"] .lock-panel h2{color:#e5e7eb}
html[data-theme-mode="dark"] .dashboard-section-title p{color:#94a3b8}
html[data-theme-mode="dark"] .approval-stat-card,html[data-theme-mode="dark"] .approval-workbench,html[data-theme-mode="dark"] .approval-request-card,html[data-theme-mode="dark"] .approval-workload-list span,html[data-theme-mode="dark"] .approval-priority-list a,html[data-theme-mode="dark"] .approval-sla-strip span,html[data-theme-mode="dark"] .approval-linked-record{background:#111827;border-color:#263145;color:#e5e7eb}
html[data-theme-mode="dark"] .approval-request-card dl div,html[data-theme-mode="dark"] .approval-route-form select,html[data-theme-mode="dark"] .approval-decision-actions textarea,html[data-theme-mode="dark"] .approval-closed-note{background:#172033;border-color:#263145;color:#e5e7eb}
html[data-theme-mode="dark"] .approval-stat-card strong,html[data-theme-mode="dark"] .approval-request-card h3,html[data-theme-mode="dark"] .approval-request-card dd,html[data-theme-mode="dark"] .approval-detail-hero strong{color:#e5e7eb}
html[data-theme-mode="dark"] .approval-request-card p,html[data-theme-mode="dark"] .approval-request-card dt,html[data-theme-mode="dark"] .approval-workload-list small,html[data-theme-mode="dark"] .approval-priority-list small,html[data-theme-mode="dark"] .approval-sla-strip small,html[data-theme-mode="dark"] .approval-linked-record small,html[data-theme-mode="dark"] .approval-stat-card span{color:#94a3b8}
html[data-theme-mode="dark"] .calendar-view-switch,html[data-theme-mode="dark"] .calendar-focus-days section,html[data-theme-mode="dark"] .calendar-risk-row span,html[data-theme-mode="dark"] .calendar-intel-list span,html[data-theme-mode="dark"] .calendar-project-load span,html[data-theme-mode="dark"] .crm-stage,html[data-theme-mode="dark"] .crm-stage a,html[data-theme-mode="dark"] .crm-lead-list a,html[data-theme-mode="dark"] .crm-source-list span,html[data-theme-mode="dark"] .score-filter,html[data-theme-mode="dark"] .lead-action-card{background:#111827;border-color:#263145;color:#e5e7eb}
html[data-theme-mode="dark"] .calendar-view-switch a{color:#cbd5e1}
html[data-theme-mode="dark"] .calendar-day-empty,html[data-theme-mode="dark"] .crm-stage-empty{background:#1e293b;color:#94a3b8}
html[data-theme-mode="dark"] .calendar-focus-days header strong{color:#e5e7eb}
html[data-theme-mode="dark"] .calendar-focus-days header small,html[data-theme-mode="dark"] .calendar-intel-list small,html[data-theme-mode="dark"] .calendar-project-load small{color:#94a3b8}
html[data-theme-mode="dark"] .resource-link-grid>a,html[data-theme-mode="dark"] .report-grid article,html[data-theme-mode="dark"] .quick-action-list a,html[data-theme-mode="dark"] .quick-action-list button,html[data-theme-mode="dark"] .quick-action-list form button,html[data-theme-mode="dark"] .finance-mini-list a,html[data-theme-mode="dark"] .file-list a,html[data-theme-mode="dark"] .version-list a,html[data-theme-mode="dark"] .agenda-item,html[data-theme-mode="dark"] .calendar-day,html[data-theme-mode="dark"] .calendar-event,html[data-theme-mode="dark"] .sprint-health-grid article,html[data-theme-mode="dark"] .delivery-side-list a,html[data-theme-mode="dark"] .focus-task-list a,html[data-theme-mode="dark"] .advanced-task-list a,html[data-theme-mode="dark"] .team-load-list article,html[data-theme-mode="dark"] .task-brief article,html[data-theme-mode="dark"] .task-checklist>div,html[data-theme-mode="dark"] .settings-command-grid article,html[data-theme-mode="dark"] .break-desk,html[data-theme-mode="dark"] .checkout-break-summary p{background:#111827;border-color:#263145;color:#e5e7eb}
html[data-theme-mode="dark"] .resource-link-grid>a:hover,html[data-theme-mode="dark"] .report-grid article:hover,html[data-theme-mode="dark"] .quick-action-list a:hover,html[data-theme-mode="dark"] .quick-action-list button:hover,html[data-theme-mode="dark"] .finance-mini-list a:hover,html[data-theme-mode="dark"] .agenda-item:hover,html[data-theme-mode="dark"] .delivery-side-list a:hover,html[data-theme-mode="dark"] .focus-task-list a:hover,html[data-theme-mode="dark"] .advanced-task-list a:hover{background:#172033;border-color:#615fff;box-shadow:var(--shadow)}
html[data-theme-mode="dark"] .resource-link-grid strong,html[data-theme-mode="dark"] .report-grid strong,html[data-theme-mode="dark"] .quick-action-list strong,html[data-theme-mode="dark"] .finance-mini-list span,html[data-theme-mode="dark"] .file-list strong,html[data-theme-mode="dark"] .version-list strong,html[data-theme-mode="dark"] .agenda-item strong,html[data-theme-mode="dark"] .calendar-event strong,html[data-theme-mode="dark"] .sprint-health-grid strong,html[data-theme-mode="dark"] .delivery-side-list strong,html[data-theme-mode="dark"] .focus-task-list strong,html[data-theme-mode="dark"] .advanced-task-list strong,html[data-theme-mode="dark"] .team-load-list strong,html[data-theme-mode="dark"] .task-brief strong,html[data-theme-mode="dark"] .task-checklist span,html[data-theme-mode="dark"] .settings-command-grid strong,html[data-theme-mode="dark"] .break-desk strong{color:#f8fafc!important}
html[data-theme-mode="dark"] .resource-link-grid small,html[data-theme-mode="dark"] .report-grid small,html[data-theme-mode="dark"] .quick-action-list small,html[data-theme-mode="dark"] .finance-mini-list small,html[data-theme-mode="dark"] .finance-mini-list p,html[data-theme-mode="dark"] .file-list small,html[data-theme-mode="dark"] .version-list small,html[data-theme-mode="dark"] .agenda-item small,html[data-theme-mode="dark"] .calendar-event small,html[data-theme-mode="dark"] .sprint-health-grid p,html[data-theme-mode="dark"] .sprint-health-grid small,html[data-theme-mode="dark"] .delivery-side-list small,html[data-theme-mode="dark"] .focus-task-list small,html[data-theme-mode="dark"] .advanced-task-list small,html[data-theme-mode="dark"] .team-load-list small,html[data-theme-mode="dark"] .task-brief span,html[data-theme-mode="dark"] .task-brief small,html[data-theme-mode="dark"] .settings-command-grid span,html[data-theme-mode="dark"] .settings-command-grid small,html[data-theme-mode="dark"] .break-desk small,html[data-theme-mode="dark"] .checkout-break-summary p{color:#94a3b8}
html[data-theme-mode="dark"] .report-grid footer a{background:#252058;color:#ddd6fe}
html[data-theme-mode="dark"] .report-grid footer a:hover{background:var(--purple);color:#fff}
html[data-theme-mode="dark"] .audit-command{box-shadow:0 18px 44px rgba(0,0,0,.35)}
html[data-theme-mode="dark"] .audit-risk-card,html[data-theme-mode="dark"] .audit-breakdown-list>span,html[data-theme-mode="dark"] .audit-watch-list>div:not(.empty-mini),html[data-theme-mode="dark"] .audit-device-list span,html[data-theme-mode="dark"] .audit-change-details span{background:#111827;border-color:#263145;color:#e5e7eb}
html[data-theme-mode="dark"] .audit-risk-card strong,html[data-theme-mode="dark"] .audit-trend-bars b,html[data-theme-mode="dark"] .audit-breakdown-list strong,html[data-theme-mode="dark"] .audit-watch-list strong,html[data-theme-mode="dark"] .audit-device-list strong,html[data-theme-mode="dark"] .audit-data-table td strong,html[data-theme-mode="dark"] .audit-change-details b{color:#f8fafc}
html[data-theme-mode="dark"] .audit-risk-card span,html[data-theme-mode="dark"] .audit-risk-card small,html[data-theme-mode="dark"] .audit-trend-bars small,html[data-theme-mode="dark"] .audit-breakdown-list small,html[data-theme-mode="dark"] .audit-watch-list small,html[data-theme-mode="dark"] .audit-watch-list em,html[data-theme-mode="dark"] .audit-device-list small,html[data-theme-mode="dark"] .audit-data-table td small,html[data-theme-mode="dark"] .audit-data-table td em{color:#94a3b8}
html[data-theme-mode="dark"] .audit-breakdown-list b{background:#1e293b}
html[data-theme-mode="dark"] .audit-trend-bars.tall::after{background:#263145}
html[data-theme-mode="dark"] .audit-trend-bar.is-today small{color:#a78bfa}
html[data-theme-mode="dark"] .audit-risk-badge.tone-red{background:#3f1d1d;color:#fca5a5}
html[data-theme-mode="dark"] .audit-risk-badge.tone-amber{background:#422006;color:#fbbf24}
html[data-theme-mode="dark"] .audit-risk-badge.tone-blue{background:#172554;color:#93c5fd}
html[data-theme-mode="dark"] .audit-risk-badge.tone-green{background:#052e16;color:#86efac}
html[data-theme-mode="dark"] .finance-audit-command,html[data-theme-mode="dark"] .finance-audit-stats span,html[data-theme-mode="dark"] .finance-audit-mix-list span{background:#111827;border-color:#263145;color:#e5e7eb}
html[data-theme-mode="dark"] .finance-audit-stats strong,html[data-theme-mode="dark"] .finance-audit-mix-list strong{color:#f8fafc}
html[data-theme-mode="dark"] .finance-audit-stats small,html[data-theme-mode="dark"] .finance-audit-mix-list small{color:#94a3b8}
html[data-theme-mode="dark"] .finance-audit-actions a{background:#252058;color:#ddd6fe}
html[data-theme-mode="dark"] .finance-audit-actions a:hover{background:var(--purple);color:#fff}
html[data-theme-mode="dark"] .tax-audit-command{box-shadow:0 18px 44px rgba(0,0,0,.35)}
html[data-theme-mode="dark"] .tax-audit-kpi-grid article,html[data-theme-mode="dark"] .tax-schedule-list span,html[data-theme-mode="dark"] .tax-cashflow-list span,html[data-theme-mode="dark"] .tax-evidence-list span{background:#111827;border-color:#263145;color:#e5e7eb}
html[data-theme-mode="dark"] .tax-audit-kpi-grid strong,html[data-theme-mode="dark"] .tax-schedule-list b,html[data-theme-mode="dark"] .tax-cashflow-list b,html[data-theme-mode="dark"] .tax-evidence-list b,html[data-theme-mode="dark"] .tax-schedule-list strong,html[data-theme-mode="dark"] .tax-cashflow-list strong,html[data-theme-mode="dark"] .tax-evidence-list strong{color:#f8fafc}
html[data-theme-mode="dark"] .tax-audit-kpi-grid span,html[data-theme-mode="dark"] .tax-audit-kpi-grid small,html[data-theme-mode="dark"] .tax-cashflow-list small,html[data-theme-mode="dark"] .tax-evidence-list small{color:#94a3b8}
html[data-theme-mode="dark"] .tax-audit-note p{background:#052e16;color:#86efac}
html[data-theme-mode="dark"] .calendar-weekdays{background:#172033;border-color:#263145}
html[data-theme-mode="dark"] .calendar-weekdays span{color:#cbd5e1}
html[data-theme-mode="dark"] .calendar-month-grid{background:#263145}
html[data-theme-mode="dark"] .calendar-day.is-muted{background:#0f172a;color:#64748b}
html[data-theme-mode="dark"] .calendar-day-empty{background:#1e293b;color:#94a3b8}
html[data-theme-mode="dark"] .calendar-event.event-task,html[data-theme-mode="dark"] .calendar-event.event-milestone{background:#111827}
html[data-theme-mode="dark"] .quick-action-list a,html[data-theme-mode="dark"] .quick-action-list button,html[data-theme-mode="dark"] .quick-action-list form button{border-top-color:#263145}

@media(max-width:1200px){
  .notice-command-grid,.notice-board-grid,.approval-command,.approval-center-grid,.approval-detail-command,.dashboard-summary-grid,.dashboard-clean-grid.advanced-dashboard-grid,.audit-command,.audit-report-grid,.audit-report-grid.secondary,.finance-audit-grid,.tax-audit-command,.tax-audit-grid{grid-template-columns:1fr}
  .tax-audit-kpi-grid{grid-template-columns:repeat(3,1fr)}
  .calendar-command,.calendar-focus-grid,.crm-intel-row,.crm-breakdown-row,.lead-hero{grid-template-columns:1fr}
  .approval-detail-hero>div{grid-template-columns:repeat(2,1fr)}
  .dashboard-clean-grid .dashboard-chart-panel{grid-column:auto}
}
@media(max-width:768px){
  .notice-pulse-stats,.notice-category-list,.approval-stat-grid,.approval-decision-actions,.approval-sla-strip,.audit-risk-grid,.finance-audit-stats,.finance-audit-actions,.finance-audit-mix-list{grid-template-columns:1fr}
  .tax-audit-kpi-grid,.tax-audit-export-card div{grid-template-columns:1fr}
  .dashboard-summary-panel,.dashboard-stat-shell{padding:13px}.dashboard-summary-panel .metric-row{grid-template-columns:1fr}.dashboard-section-title{display:block}.lock-card{grid-template-columns:1fr}.lock-visual{min-height:340px;padding:28px}.lock-panel{padding:28px 22px}.lock-visual h1{font-size:36px}.lock-clock{width:100%}
  .audit-filters .search-field{min-width:100%;max-width:none}
  .calendar-view-switch{overflow:auto}
  .calendar-risk-row{grid-template-columns:repeat(2,1fr)}
  .crm-filters .search-field{min-width:100%;max-width:none}
  .lead-convert-banner{flex-direction:column;align-items:flex-start}
  .approval-detail-hero>div,.approval-request-card dl{grid-template-columns:1fr}
}

.checkin-card{display:grid!important;grid-template-columns:minmax(260px,1fr) minmax(170px,auto) minmax(140px,auto);gap:18px 22px;align-items:center;padding:28px!important}
.checkin-card>div:first-child{display:grid!important;grid-template-columns:48px minmax(0,1fr);gap:14px;align-items:center;width:100%;min-width:0}
.checkin-card h2{max-width:360px;font-size:18px!important;line-height:1.45;margin:3px 0 6px!important}
.checkin-card p{max-width:420px;font-size:10px!important;line-height:1.6}
.attendance-live-panel{justify-self:center;align-items:center!important;min-width:190px;padding:14px 18px;border-radius:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1)}
.attendance-live-panel strong{font-size:32px!important;letter-spacing:.03em}
.checkin-action{justify-self:end;flex-wrap:wrap;justify-content:flex-end;min-width:140px}
.checkin-action .btn{min-width:122px;min-height:46px}
.checkin-action select,.checkin-action input{min-width:150px}
.break-desk{grid-column:1/-1;display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:center!important;gap:18px;padding:16px 18px!important;margin-top:2px}
.break-desk strong{font-size:13px!important}
.break-desk small{font-size:9px!important;line-height:1.55}
.break-desk form{justify-self:end}
.break-desk .btn{min-width:140px}

@media(max-width:1280px){
  .attendance-cockpit{grid-template-columns:1fr}
  .attendance-policy-card{display:none}
}
@media(max-width:1100px){
  .checkin-card{grid-template-columns:minmax(0,1fr) minmax(170px,auto);gap:16px}
  .checkin-action{grid-column:2;grid-row:2;align-self:start}
  .break-desk{grid-column:1/-1}
}
@media(max-width:760px){
  .checkin-card{grid-template-columns:1fr;padding:22px!important}
  .checkin-card>div:first-child{grid-template-columns:44px minmax(0,1fr)}
  .attendance-live-panel,.checkin-action{justify-self:stretch;width:100%}
  .checkin-action{grid-column:auto;grid-row:auto;justify-content:stretch}
  .checkin-action .btn,.checkin-action select,.checkin-action input{width:100%;min-width:0}
  .break-desk{grid-template-columns:1fr}
  .break-desk form,.break-desk .btn{width:100%;justify-self:stretch}
}

.task-delivery-layout>main{min-width:0}
.advanced-board-toolbar{position:sticky;top:88px;z-index:12;padding:8px 0;background:linear-gradient(180deg,var(--bg) 72%,rgba(245,247,251,0));gap:10px;align-items:center;flex-wrap:wrap}
.board-lane-jump{display:flex;align-items:center;gap:6px;max-width:100%;overflow-x:auto;padding:3px 2px;scrollbar-width:thin}
.board-lane-jump a{height:30px;display:inline-flex;align-items:center;gap:6px;padding:0 9px;border:1px solid var(--line);border-radius:999px;background:#fff;color:#536078;font-size:8px;font-weight:900;letter-spacing:.02em;white-space:nowrap;box-shadow:0 4px 12px rgba(15,23,42,.035)}
.board-lane-jump a:hover{border-color:#c7c1ff;background:#f6f4ff;color:var(--purple);transform:translateY(-1px)}
.board-lane-jump span{min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#eef2f7;color:#64748b;display:grid;place-items:center;font-size:7px}
.advanced-kanban-board{min-height:0!important;max-height:calc(100vh - 170px);align-items:stretch!important;overflow-x:auto;overflow-y:hidden;padding:2px 2px 12px!important;scrollbar-width:thin;scroll-behavior:smooth;scroll-snap-type:x proximity;scroll-padding-inline:4px}
.advanced-kanban-board::-webkit-scrollbar,.kanban-cards::-webkit-scrollbar{height:8px;width:7px}
.advanced-kanban-board::-webkit-scrollbar-thumb,.kanban-cards::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:999px}
.advanced-kanban-board .kanban-column{display:flex;flex-direction:column;width:300px;min-width:300px;max-height:calc(100vh - 190px);min-height:420px;padding:0!important;overflow:hidden;border:1px solid #dfe4ee;background:#eef1f6;scroll-snap-align:start;scroll-margin-left:8px}
.advanced-kanban-board .kanban-column>header{position:sticky;top:0;z-index:2;min-height:48px;padding:12px 12px 10px!important;background:rgba(238,241,246,.96);backdrop-filter:blur(8px);border-bottom:1px solid #dfe4ee}
.advanced-kanban-board .kanban-cards{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:10px;scrollbar-width:thin}
.advanced-kanban-board .column-empty{flex:none;margin:2px}
.advanced-task-card{flex:none}
.task-status-locked{width:100%;justify-content:center;margin:8px 0 0;border:1px dashed #d8deea;background:#f8fafc;color:#64748b}
.task-status-locked svg{width:11px}

@media(max-width:1200px){
  .advanced-board-toolbar{top:78px}
  .advanced-kanban-board{max-height:calc(100vh - 150px)}
  .advanced-kanban-board .kanban-column{max-height:calc(100vh - 170px)}
}
@media(max-width:768px){
  .advanced-board-toolbar{position:static;background:transparent;padding:0}
  .advanced-kanban-board{max-height:none;overflow-x:auto}
  .advanced-kanban-board .kanban-column{width:280px;min-width:280px;max-height:70vh;min-height:380px}
}
html[data-theme-mode="dark"] .advanced-board-toolbar{background:linear-gradient(180deg,var(--bg) 72%,rgba(15,23,42,0))}
html[data-theme-mode="dark"] .board-lane-jump a{background:#111827;border-color:#263145;color:#cbd5e1}
html[data-theme-mode="dark"] .board-lane-jump a:hover{background:#1e1b4b;color:#ddd6fe;border-color:#4f46e5}
html[data-theme-mode="dark"] .board-lane-jump span{background:#1f2937;color:#cbd5e1}
html[data-theme-mode="dark"] .advanced-kanban-board .kanban-column{background:#172033;border-color:#263145}
html[data-theme-mode="dark"] .advanced-kanban-board .kanban-column>header{background:rgba(23,32,51,.96);border-color:#263145;color:#e5e7eb}
html[data-theme-mode="dark"] .task-status-locked{background:#111827;border-color:#334155;color:#cbd5e1}

.invoice-filters{align-items:stretch;flex-wrap:wrap}.invoice-filters .search-field{min-width:260px}.invoice-filters select{min-width:150px}.invoice-module-hero{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:20px;align-items:center;margin-bottom:16px;padding:24px;border-radius:18px;background:linear-gradient(125deg,#172039,#25345c);color:#fff;overflow:hidden;position:relative}.invoice-module-hero:after{content:'';position:absolute;right:-80px;top:-120px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(109,93,252,.46),transparent 68%)}.invoice-module-hero>div{position:relative;z-index:1}.invoice-module-hero h2{font-size:24px;line-height:1.18;margin:8px 0 7px;letter-spacing:-.035em}.invoice-module-hero p{max-width:660px;margin:0;color:#cbd5e1;font-size:12px;line-height:1.6}.invoice-collection-ring{width:126px;height:126px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#22c55e var(--progress),rgba(255,255,255,.18) 0);box-shadow:inset 0 0 0 12px rgba(15,23,42,.45)}.invoice-collection-ring strong{font-size:24px}.invoice-collection-ring span{font-size:9px;color:#cbd5e1;margin-top:-34px}.invoice-insight-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-bottom:16px}.invoice-insight-grid.secondary{grid-template-columns:1.2fr .8fr}.invoice-aging-list,.invoice-watch-list,.invoice-client-exposure,.invoice-status-mix,.invoice-ledger-list{padding:0 16px 16px}.invoice-aging-list span{display:block;padding:12px 0;border-top:1px solid var(--line)}.invoice-aging-list span:first-child{border-top:0}.invoice-aging-list strong,.invoice-watch-list strong,.invoice-client-exposure strong,.invoice-ledger-list strong{font-size:10px}.invoice-aging-list small,.invoice-watch-list small,.invoice-client-exposure small,.invoice-ledger-list small{display:block;font-size:8px;color:var(--muted);margin-top:2px}.invoice-aging-list b{display:block;height:6px;margin-top:8px;border-radius:999px;background:#eef2f7;overflow:hidden}.invoice-aging-list i{display:block;height:100%;border-radius:999px;background:currentColor}.tone-orange{color:#f97316!important}.invoice-watch-list a,.invoice-client-exposure a,.invoice-ledger-list span{display:flex;align-items:center;gap:10px;padding:11px 0;border-top:1px solid var(--line)}.invoice-watch-list a:first-child,.invoice-client-exposure a:first-child,.invoice-ledger-list span:first-child{border-top:0}.invoice-watch-list svg,.invoice-ledger-list svg{width:16px;color:var(--purple);flex:none}.invoice-watch-list span,.invoice-client-exposure span,.invoice-ledger-list span span{min-width:0;flex:1}.invoice-watch-list .is-overdue svg{color:var(--red)}.invoice-client-exposure b{margin-left:auto;font-size:10px;color:var(--ink)}.invoice-status-mix{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}.invoice-status-mix span{border:1px solid var(--line);border-radius:12px;padding:11px;background:#fafbfc;display:flex;flex-direction:column;gap:5px}.invoice-status-mix strong{font-size:18px}.invoice-status-mix small{font-size:8px;color:var(--muted)}

.invoice-page-header{align-items:flex-start}.invoice-reminder-form{display:inline-flex}.invoice-reminder-form .btn:disabled,.invoice-workspace-grid .btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}.invoice-command-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}.invoice-command-card{background:#fff;border:1px solid var(--line);border-radius:15px;padding:16px;box-shadow:0 5px 18px rgba(20,31,57,.035);display:flex;flex-direction:column;gap:5px}.invoice-command-card>span{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:800}.invoice-command-card>strong{font-size:21px;letter-spacing:-.03em}.invoice-command-card small{font-size:9px;color:var(--muted)}.invoice-progress{height:7px;border-radius:999px;background:#edf0f4;overflow:hidden;margin-top:auto}.invoice-progress i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--green),var(--blue))}.invoice-workspace-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:16px;align-items:start}.invoice-side-stack{display:flex;flex-direction:column;gap:16px;position:sticky;top:92px}.invoice-side-panel{overflow:hidden}.invoice-side-panel .side-form{display:flex;flex-direction:column;gap:9px}.invoice-side-panel select{height:38px;border:1px solid var(--line);border-radius:9px;background:#fff;color:#526076;padding:0 10px;font-size:10px}.invoice-sheet .invoice-signature{display:block;margin-top:14px;font-size:9px;color:var(--muted);font-weight:700}.invoice-timeline{max-height:420px;overflow:auto}.invoice-timeline.timeline-list>div{min-height:50px}.invoice-ledger-list .empty-mini{min-height:130px}.status-draft{background:#eef2f7;color:#64748b}.status-partially_paid{background:#e0f2fe;color:#0369a1}.status-cancelled{background:#f1f5f9;color:#64748b}

@media(max-width:1200px){
  .invoice-insight-grid,.invoice-insight-grid.secondary{grid-template-columns:1fr 1fr}
  .invoice-workspace-grid{grid-template-columns:1fr}
  .invoice-side-stack{position:static;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
  .invoice-command-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .invoice-module-hero{grid-template-columns:1fr}.invoice-collection-ring{margin:auto}
  .invoice-insight-grid,.invoice-insight-grid.secondary,.invoice-command-grid{grid-template-columns:1fr}
  .invoice-page-header .header-actions{width:100%}.invoice-page-header .header-actions .btn,.invoice-reminder-form{width:100%}
}
html[data-theme-mode="dark"] .invoice-command-card,html[data-theme-mode="dark"] .invoice-status-mix span{background:#111827;border-color:#263145;color:#e5e7eb}
html[data-theme-mode="dark"] .invoice-command-card small,html[data-theme-mode="dark"] .invoice-aging-list small,html[data-theme-mode="dark"] .invoice-watch-list small,html[data-theme-mode="dark"] .invoice-client-exposure small,html[data-theme-mode="dark"] .invoice-ledger-list small{color:#94a3b8}
html[data-theme-mode="dark"] .invoice-aging-list b,html[data-theme-mode="dark"] .invoice-progress{background:#263145}
html[data-theme-mode="dark"] .invoice-client-exposure b{color:#e5e7eb}
html[data-theme-mode="dark"] .invoice-side-panel select{background:#111827;color:#e5e7eb;border-color:#263145}
html[data-theme-mode="dark"] .status-draft,html[data-theme-mode="dark"] .status-cancelled{background:#1e293b;color:#cbd5e1}
html[data-theme-mode="dark"] .status-partially_paid{background:#082f49;color:#7dd3fc}

.payslip-dashboard-card{overflow:hidden}
.payslip-hero{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:12px;align-items:center;margin:0 16px 12px;padding:14px;border-radius:15px;background:linear-gradient(135deg,#172039,#293154);color:#fff;box-shadow:0 12px 28px rgba(17,24,39,.14)}
.payslip-hero>span{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:rgba(255,255,255,.12);color:#c4b5fd}
.payslip-hero svg{width:18px}
.payslip-hero div{display:flex;flex-direction:column;min-width:0}
.payslip-hero small{font-size:8px;text-transform:uppercase;letter-spacing:.09em;color:#cbd5e1;font-weight:900}
.payslip-hero strong{font-size:20px;color:#fff;letter-spacing:-.03em}
.payslip-hero em{font-style:normal;font-size:9px;color:#aeb9cc}
.payslip-hero.status-paid{background:linear-gradient(135deg,#14532d,#166534)}
.payslip-hero.status-approved{background:linear-gradient(135deg,#1e3a8a,#2563eb)}
.payslip-hero.status-pending{background:linear-gradient(135deg,#78350f,#d97706)}
.payslip-hero.status-overdue{background:linear-gradient(135deg,#7f1d1d,#dc2626)}
.payslip-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:0 16px 12px}
.payslip-kpis span{padding:10px;border:1px solid var(--line);border-radius:12px;background:#fbfcff}
.payslip-kpis strong{display:block;font-size:14px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.payslip-kpis small{font-size:8px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:800}
.payslip-mini-list{display:grid;gap:7px;padding:0 16px 16px}
.payslip-mini-list a{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:8px;align-items:center;padding:9px;border:1px solid var(--line);border-radius:11px;background:#fff}
.payslip-mini-list a:hover{border-color:#c9c2ff;box-shadow:var(--shadow);transform:translateY(-1px)}
.payslip-mini-list svg{width:14px;color:var(--purple);margin:auto}
.payslip-mini-list span{display:flex;flex-direction:column;min-width:0}
.payslip-mini-list strong{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.payslip-mini-list small{font-size:8px;color:var(--muted)}
.payslip-mini-list em{font-size:8px;font-style:normal;font-weight:900;color:var(--purple)}
html[data-theme-mode="dark"] .payslip-kpis span,html[data-theme-mode="dark"] .payslip-mini-list a{background:#111827;border-color:#263145;color:#e5e7eb}
html[data-theme-mode="dark"] .payslip-kpis strong,html[data-theme-mode="dark"] .payslip-mini-list strong{color:#f8fafc}
html[data-theme-mode="dark"] .payslip-kpis small,html[data-theme-mode="dark"] .payslip-mini-list small{color:#94a3b8}
html[data-theme-mode="dark"] .payslip-mini-list a:hover{background:#172033;border-color:#615fff}
@media(max-width:760px){
  .payslip-hero{grid-template-columns:42px minmax(0,1fr)}
  .payslip-hero .btn{grid-column:1/-1;width:100%}
  .payslip-kpis{grid-template-columns:1fr 1fr}
}
.projects-dashboard-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;margin-bottom:16px;padding:22px;border-radius:20px;background:radial-gradient(circle at 13% 12%,rgba(109,93,252,.42),transparent 30%),linear-gradient(135deg,#111827,#26345d);color:#fff;box-shadow:0 18px 44px rgba(17,24,39,.17)}
.projects-dashboard-hero h2{margin:7px 0;font-size:27px;line-height:1.1;color:#fff;letter-spacing:-.04em}.projects-dashboard-hero p{max-width:760px;margin:0;color:#c4ccda;font-size:11px;line-height:1.65}
.project-hero-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.project-hero-actions .btn-secondary{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.16);color:#fff}
.project-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.project-kpi-card{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px;border:1px solid var(--line);border-radius:15px;background:#fff;box-shadow:0 5px 18px rgba(20,31,57,.035)}
.project-kpi-card small{display:block;font-size:9px;color:#718096;font-weight:900}.project-kpi-card strong{display:block;margin:4px 0;font-size:27px;color:var(--ink);letter-spacing:-.04em}.project-kpi-card span{font-size:9px;color:#18a449;font-weight:800}
.project-kpi-card>i,.project-kpi-card>svg{width:28px;height:28px;padding:16px;box-sizing:content-box;border-radius:50%;background:currentColor;opacity:.16}.project-kpi-card.tone-amber{color:#f59e0b}.project-kpi-card.tone-green{color:#22c55e}.project-kpi-card.tone-purple{color:#6d5dfc}.project-kpi-card.tone-red{color:#ef4444}
.project-dashboard-grid{display:grid;grid-template-columns:1.15fr .8fr .9fr;gap:14px;margin-bottom:16px}.project-dashboard-grid.secondary{grid-template-columns:1.1fr 1fr .75fr .85fr}
.project-priority-list,.project-status-list,.project-today-list,.project-team-list,.project-deadline-list{display:grid;gap:8px;padding:0 16px 16px}
.project-priority-list a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:13px;background:#fbfcff}.project-priority-list strong,.project-team-list strong,.project-deadline-list strong{font-size:10px;color:var(--ink)}.project-priority-list small,.project-team-list small,.project-deadline-list small{display:block;font-size:8px;color:#718096;margin-top:2px}
.priority-pill{padding:5px 8px;border-radius:999px;font-size:8px;font-weight:900;text-transform:uppercase;background:#edeaff;color:var(--purple)}.priority-high{background:#fff3dc;color:#c77a06}.priority-urgent{background:#ffeded;color:#df3f3f}
/* ── Priority & label badge contrast fix ──────────────────────────────────
   app.css uses same-hue bg+text (amber on amber, gray on gray) ≈ 1.2:1 ratio.
   These !important overrides win because ui-fixes.css loads last and !important
   author rules are ordered by source position (later = higher priority).
   Target: WCAG AA (≥4.5:1) for all priority badges.
   ────────────────────────────────────────────────────────────────────────── */
.priority-low{background:#f1f5f9!important;color:#475569!important}
.priority-medium{background:#dbeafe!important;color:#1d4ed8!important}
.priority-high{background:#fef3c7!important;color:#92400e!important}
.priority-urgent{background:#fee2e2!important;color:#991b1b!important}
/* pill variants (client portal, module list) */
.priority-pill.priority-low{background:#f1f5f9!important;color:#475569!important}
.priority-pill.priority-medium{background:#dbeafe!important;color:#1d4ed8!important}
.priority-pill.priority-high{background:#fef3c7!important;color:#92400e!important}
.priority-pill.priority-urgent{background:#fee2e2!important;color:#991b1b!important}
/* priority dot — keeps color-coded circle, no text involved */
.priority-dot.priority-low{background:#94a3b8!important}
.priority-dot.priority-medium{background:#3b82f6!important}
.priority-dot.priority-high{background:#f59e0b!important}
.priority-dot.priority-urgent{background:#ef4444!important}
/* card label chips (custom labels: CLIENT, QA, BILLING, etc.) */
.card-labels span{background:#eef0ff!important;color:#4338ca!important;font-weight:800!important}
.card-labels .priority-label{background:inherit!important}
.project-status-donut{width:134px;height:134px;border-radius:50%;display:grid;place-items:center;margin:4px auto 14px;background:conic-gradient(#6d5dfc 0 58%,#22c55e 58% 80%,#f59e0b 80%);box-shadow:inset 0 0 0 28px #fff}.project-status-donut strong{margin-top:20px;font-size:22px;color:var(--ink)}.project-status-donut span{margin-top:-42px;font-size:9px;color:#536078}
.project-status-list span{display:block;padding:9px;border:1px solid var(--line);border-radius:12px;background:#fbfcff}.project-status-list strong{font-size:9px;color:var(--ink)}.project-status-list small{display:block;font-size:8px;color:#718096}.project-status-list b{display:block;height:6px;margin-top:7px;border-radius:999px;background:#eef2f7;overflow:hidden}.project-status-list i{display:block;height:100%;border-radius:inherit;background:currentColor}.tone-slate{color:#64748b}.tone-purple{color:#6d5dfc}
.project-today-list a{display:grid;grid-template-columns:24px minmax(0,1fr) 18px;gap:9px;align-items:center;padding:10px;border-bottom:1px solid var(--line)}.project-today-list span{font-size:8px;color:#ef4444;font-weight:900}.project-today-list strong{font-size:10px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.project-today-list svg{width:14px;color:var(--purple)}
.project-table-card{grid-column:span 2}.project-table-card .data-table a{color:var(--purple);font-weight:900}
.project-hours-bars{display:grid;gap:10px;padding:0 16px 16px}.project-hours-bars span{display:grid;grid-template-columns:50px minmax(0,1fr);gap:8px;align-items:center}.project-hours-bars small{font-size:8px;color:#718096;font-weight:900}.project-hours-bars b{position:relative;height:52px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,transparent 50%,rgba(148,163,184,.13) 50%);overflow:hidden}.project-hours-bars i{position:absolute;left:0;height:12px;border-radius:999px}.project-hours-bars .estimate{top:12px;background:#7c73ff}.project-hours-bars .spent{bottom:10px;background:#65c76a}.project-hours-bars em{grid-column:2;font-size:8px;color:#718096;font-style:normal}
.project-team-list span,.project-deadline-list a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:12px;background:#fbfcff}.project-team-list b,.project-deadline-list b{font-size:10px;color:var(--purple);white-space:nowrap}
.project-sitemap-card{margin-bottom:16px;overflow:hidden}.workspace-tree{padding:8px 22px 26px}.tree-root{width:170px;margin:0 auto 34px;padding:13px;border-radius:8px;background:#d8d8d8;text-align:center;font-size:14px;font-weight:800;color:#263145;position:relative}.tree-root:after{content:'';position:absolute;left:50%;top:100%;width:2px;height:34px;background:#3b4358}.tree-branches{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px}.tree-branches:before{content:'';position:absolute;left:6%;right:6%;top:0;height:7px;background:#3b4358}.tree-branches section{position:relative;display:grid;gap:12px;padding-top:28px}.tree-branches section:before{content:'';position:absolute;left:50%;top:0;width:2px;height:28px;background:#3b4358}.tree-branches h3,.tree-branches span{margin:0 auto;padding:12px 18px;border-radius:8px;background:#e8e8e8;color:#1f2937;text-align:center;font-size:11px;font-weight:800;min-width:150px}.tree-branches span{position:relative;background:#f1f1f1}.tree-branches span:before{content:'';position:absolute;right:100%;top:50%;width:24px;height:2px;background:#3b4358}
.invoice-action-rail{display:grid;gap:14px;padding:30px;background:#fff}.invoice-action-rail form{margin:0}.invoice-action-button{width:100%;min-height:48px;border:0;border-radius:9px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:900;cursor:pointer}.invoice-action-button svg{width:17px}.invoice-action-button:disabled{opacity:.55;cursor:not-allowed}.invoice-action-button.action-edit{background:#edf1f7;color:#263145}.invoice-action-button.action-print{background:#6551f5;color:#fff}.invoice-action-button.action-download{background:#37bce1;color:#fff}.invoice-action-button.action-send{background:#ef4f6a;color:#fff}

@media(max-width:1200px){.projects-dashboard-hero,.project-dashboard-grid,.project-dashboard-grid.secondary{grid-template-columns:1fr}.project-table-card{grid-column:auto}.project-kpi-grid{grid-template-columns:repeat(2,1fr)}.tree-branches{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.project-kpi-grid,.tree-branches{grid-template-columns:1fr}.projects-dashboard-hero{grid-template-columns:1fr}.project-hero-actions{justify-content:flex-start}.tree-branches:before,.tree-root:after,.tree-branches section:before,.tree-branches span:before{display:none}}
html[data-theme-mode="dark"] .project-kpi-card,html[data-theme-mode="dark"] .project-priority-list a,html[data-theme-mode="dark"] .project-status-list span,html[data-theme-mode="dark"] .project-team-list span,html[data-theme-mode="dark"] .project-deadline-list a,html[data-theme-mode="dark"] .invoice-action-rail{background:#111827;border-color:#263145;color:#e5e7eb}
html[data-theme-mode="dark"] .project-kpi-card strong,html[data-theme-mode="dark"] .project-priority-list strong,html[data-theme-mode="dark"] .project-status-list strong,html[data-theme-mode="dark"] .project-today-list strong,html[data-theme-mode="dark"] .project-team-list strong,html[data-theme-mode="dark"] .project-deadline-list strong{color:#f8fafc}
html[data-theme-mode="dark"] .project-kpi-card small,html[data-theme-mode="dark"] .project-priority-list small,html[data-theme-mode="dark"] .project-status-list small,html[data-theme-mode="dark"] .project-status-donut span,html[data-theme-mode="dark"] .project-team-list small,html[data-theme-mode="dark"] .project-deadline-list small,html[data-theme-mode="dark"] .project-hours-bars small,html[data-theme-mode="dark"] .project-hours-bars em{color:#94a3b8}
html[data-theme-mode="dark"] .project-status-donut{box-shadow:inset 0 0 0 28px #111827}html[data-theme-mode="dark"] .project-status-list b{background:#263145}
html[data-theme-mode="dark"] .tree-root,html[data-theme-mode="dark"] .tree-branches h3,html[data-theme-mode="dark"] .tree-branches span{background:#172033;color:#e5e7eb;border:1px solid #263145}
html[data-theme-mode="dark"] .invoice-action-button.action-edit{background:#1e293b;color:#e5e7eb}

/* Deep UI alignment pass: keep dense dashboard/module elements readable. */
.topbar-actions{min-width:0}
.icon-btn{flex:none;overflow:visible}
.icon-btn .count{right:-7px;top:-7px;min-width:18px;height:18px;border-radius:999px;font-size:8px;font-weight:900;line-height:1}
.panel,.stat-card,.metric-row article,.project-kpi-card,.invoice-command-card{min-width:0}
.panel-header{align-items:flex-start}
.panel-header>div{min-width:0}
.panel-header h2,.panel-header p{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.panel-header h2{line-height:1.25}
.panel-header p{line-height:1.45}
.text-link,.select-chip,.date-chip{flex:none;white-space:nowrap}
.advanced-stat-grid .stat-card,.stat-card{display:grid;grid-template-columns:46px minmax(0,1fr) 30px;align-items:center;gap:12px;min-height:96px}
.stat-card .stat-icon{width:42px;height:42px;flex:none}
.stat-card>div:nth-child(2){min-width:0;overflow:hidden}
.stat-card span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat-card strong{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.15}
.stat-spark{justify-self:end;min-width:23px;margin-left:0}
.metric-row article{min-height:92px;justify-content:center;gap:3px}
.metric-row article>span,.metric-row article>strong{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.metric-row article>small{min-width:0;line-height:1.35}
.metric-row article>small svg{flex:none}
.chart-wrap,.chart-wrap.small,.donut-wrap{position:relative;min-width:0;overflow:hidden}
.chart-wrap canvas,.donut-wrap canvas{display:block!important;max-width:100%!important;max-height:100%!important}
.donut-center{text-align:center}
.chart-legend{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));align-items:center}
.chart-legend span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chart-legend strong{flex:none}
.data-table th,.data-table td{vertical-align:middle}
.data-table td{max-width:320px;overflow:hidden;text-overflow:ellipsis}
.data-table td:has(.status-pill){overflow:visible}
.resource-link-grid>a,.quick-action-list a,.quick-action-list button,.finance-mini-list a,.project-spotlight-list a,.decision-list a,.notice-list article,.activity-row,.task-row{min-width:0}
.resource-link-grid span,.quick-action-list span,.finance-mini-list span,.project-spotlight-list span,.decision-list span,.notice-list article>div,.activity-row>div,.task-row>div{min-width:0}
.resource-link-grid strong,.resource-link-grid small,.quick-action-list strong,.quick-action-list small,.finance-mini-list strong,.finance-mini-list small,.project-spotlight-list strong,.project-spotlight-list small,.decision-list strong,.decision-list small,.task-row strong,.task-row small{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.agenda-feed{display:grid;gap:10px;padding:0 16px 16px}
.agenda-row{min-width:0}
.agenda-row>span{flex:none}
.agenda-row>div{min-width:0}
.agenda-row strong,.agenda-row small{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.dashboard-clean-grid>.panel{overflow:hidden}
.dashboard-summary-panel .insight-grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.insight-card{min-width:0}
.insight-card span{min-width:0}
.insight-card strong,.insight-card small{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.projects-dashboard-hero{overflow:hidden}
.workspace-tree{overflow-x:auto}
.tree-branches{min-width:900px}
.tree-branches h3,.tree-branches span{box-shadow:0 6px 14px rgba(15,23,42,.045)}
.invoice-action-rail{align-self:start}
.invoice-action-button{white-space:nowrap;line-height:1}
.timer-card{gap:16px}
.timer-start-form{flex-wrap:wrap;justify-content:flex-end}
.timer-start-form select,.timer-start-form input{min-width:170px}
.timeline-list p,.invoice-timeline p{min-width:0}
.timeline-list strong,.timeline-list small,.invoice-timeline strong,.invoice-timeline small{max-width:100%;overflow:hidden;text-overflow:ellipsis}

@media(max-width:1200px){
  .tree-branches{min-width:0}
}
@media(max-width:760px){
  .advanced-stat-grid .stat-card,.stat-card{grid-template-columns:42px minmax(0,1fr)}
  .stat-spark{display:none}
  .data-table td{max-width:220px}
  .timer-start-form{justify-content:stretch}
  .timer-start-form select,.timer-start-form input,.timer-start-form .btn{min-width:0;width:100%}
}

/* ── Chat platform redesign ──────────────────────────────────────────────── */
/* Channel type icons */
.channel-icon{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;transition:background .15s}
.channel-icon svg{width:13px;height:13px}
.channel-icon-group{background:#edeaff;color:#6d5dfc}
.channel-icon-dm{background:#e0f2fe;color:#0284c7}
html[data-theme-mode="dark"] .channel-icon-group{background:#252058;color:#c4b5fd}
html[data-theme-mode="dark"] .channel-icon-dm{background:#082f49;color:#7dd3fc}

/* Sidebar header */
.chat-sidebar-header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:18px 14px 10px}
.chat-sidebar-header>div{min-width:0}
.chat-sidebar-header h1{font-size:16px;font-weight:800;margin:2px 0 0;line-height:1.1}
.chat-sidebar-header .eyebrow{font-size:8px;letter-spacing:.1em;font-weight:900}

/* Room rows */
.chat-room-row{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:9px;padding:8px 12px;border-radius:10px;text-decoration:none;color:var(--ink);transition:background .12s;margin:1px 6px}
.chat-room-row:hover{background:rgba(109,93,252,.07)}
.chat-room-row.active{background:#edeaff;color:#4f3fd4}
.chat-room-row.active .channel-icon-group{background:#ddd6fe;color:#4f3fd4}
.chat-room-row.active .channel-icon-dm{background:#bae6fd;color:#0369a1}
html[data-theme-mode="dark"] .chat-room-row:hover{background:#172033}
html[data-theme-mode="dark"] .chat-room-row.active{background:#252058;color:#c4b5fd}
html[data-theme-mode="dark"] .chat-room-row.active .channel-icon-group{background:#312e81;color:#c4b5fd}
.room-row-body{min-width:0;display:flex;flex-direction:column}
.room-row-body strong{display:block;font-size:11px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:inherit}
.room-row-body small{display:block;font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.room-row-time{font-size:9px;color:var(--muted);flex:none;white-space:nowrap}

/* Chat main header */
.chat-main-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line);flex:none;min-height:56px}
.chat-room-identity{display:flex;align-items:center;gap:10px;flex:1 1 auto;min-width:0;overflow:hidden}
.chat-room-identity>div{flex:1 1 auto;min-width:0;overflow:hidden}
.chat-room-identity h2{font-size:14px;font-weight:800;margin:0;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.chat-room-identity p{font-size:10px;color:var(--muted);margin:1px 0 0;white-space:nowrap}
.chat-main-header .header-actions{display:flex;align-items:center;gap:4px;flex:none}

/* Pin badge */
.pin-badge{display:inline-flex;align-items:center;gap:3px;font-size:9px;font-weight:800;color:#c77a06;background:#fff3dc;padding:2px 7px 2px 5px;border-radius:999px;white-space:nowrap;flex:none;vertical-align:middle}
.pin-badge svg{width:10px;height:10px}
.is-pinned .bubble{border-left:3px solid #f59e0b;padding-left:10px}
html[data-theme-mode="dark"] .pin-badge{background:#422006;color:#fbbf24}

/* Composer — unified card style */
.message-composer{flex:none;display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:6px;padding:10px 16px 12px;border-top:1px solid var(--line)}
.composer-errors{padding:7px 11px;border-radius:8px;background:#fff0f0;color:#c53030;font-size:11px;border-left:3px solid #ef4444}
.composer-body{display:flex;flex-direction:column;gap:5px}
.composer-row{display:flex;align-items:flex-end;gap:6px;padding:6px 8px 6px 10px;border:1.5px solid var(--line);border-radius:14px;background:#fff;transition:border-color .18s,box-shadow .18s}
.composer-row:focus-within{border-color:var(--purple);box-shadow:0 0 0 3px rgba(109,93,252,.1)}
.composer-attach{flex:none;width:30px;height:30px;margin-bottom:1px;position:relative}
.composer-attach input[type="file"]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:0}
.message-composer textarea,.composer-row textarea{flex:1;border:none!important;outline:none!important;box-shadow:none!important;background:transparent;resize:none;font-size:13px;color:var(--ink);padding:4px 0;min-height:34px;max-height:130px;font-family:inherit;line-height:1.55}
.composer-send{flex:none;width:34px;height:34px;padding:0;display:grid;place-items:center;border-radius:10px;margin-bottom:1px}
.composer-send svg{width:14px;height:14px}
.composer-hint{font-size:9px;color:var(--muted);text-align:right;padding-right:4px;line-height:1.4}
.composer-hint kbd{display:inline-block;padding:1px 5px;border-radius:4px;background:#eef2f7;color:#475569;border:1px solid #d0d7e5;font-family:inherit;font-size:9px}
html[data-theme-mode="dark"] .composer-row{background:#111827;border-color:#263145}
html[data-theme-mode="dark"] .composer-row:focus-within{border-color:var(--purple);box-shadow:0 0 0 3px rgba(109,93,252,.15)}
html[data-theme-mode="dark"] .composer-errors{background:#3f1d1d;color:#fca5a5;border-color:#dc2626}
html[data-theme-mode="dark"] .composer-hint kbd{background:#1e293b;color:#94a3b8;border-color:#334155}

/* Member panel polish */
.chat-member-add-label{font-size:10px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;display:block;margin-bottom:6px}
.chat-member-select{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:5px;font-size:11px;min-height:100px;background:#fff;color:var(--ink);outline:none;transition:border-color .15s}
.chat-member-select:focus{border-color:var(--purple)}
.chat-member-add .btn-full{width:100%;justify-content:center}
.icon-btn-danger:hover{color:#ef4444!important}
html[data-theme-mode="dark"] .chat-member-select{background:#111827;border-color:#263145;color:#e5e7eb}

/* Empty states */
.chat-empty,.chat-start-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:40px 24px}
.chat-empty svg,.chat-start-state svg{width:52px;height:52px;color:var(--muted,#94a3b8);opacity:.4}
.chat-empty h3,.chat-start-state h3{font-size:17px;font-weight:800;color:var(--ink);margin:0}
.chat-empty p,.chat-start-state p{font-size:12px;color:var(--muted);max-width:300px;margin:0;line-height:1.6}

/* Image attachment in messages */
.chat-attachment.is-image img{border-radius:10px;max-width:260px;max-height:200px;display:block;margin-bottom:4px}

/* Dark mode empty-mini in sidebar */
html[data-theme-mode="dark"] .chat-sidebar .empty-mini{color:#94a3b8}

/* Attachment preview area */
.attachment-preview{padding:6px 0 0}

/* Responsive: on small screens sidebar scrolls horizontally then stacks */
@media(max-width:900px){
  .chat-room-row{grid-template-columns:28px minmax(0,1fr);gap:8px;padding:7px 10px}
  .room-row-time{display:none}
}
@media(max-width:768px){
  .chat-main-header{padding:10px 14px}
  .composer-hint{display:none}
  .message-composer{padding:8px 12px 10px}
}

/* ═══════════════════════════════════════════════════════════════
   UI SYSTEM IMPROVEMENTS  (appended by cleanup pass)
   ═══════════════════════════════════════════════════════════════ */

/* ── Topbar improvements ─────────────────────────────────────── */
.topbar { position: sticky; top: 0; z-index: 40; }
.global-search { border-radius: 10px; transition: box-shadow .15s; }
.global-search:focus-within { box-shadow: 0 0 0 3px rgba(109,93,252,.15); }
.topbar-actions .count { font-size: 9px; font-weight: 900; min-width: 16px; height: 16px; }

/* ── Cards / panels ──────────────────────────────────────────── */
.panel { border-radius: 16px; }
.card-elevated { box-shadow: 0 2px 8px rgba(15,23,42,.06), 0 0 0 1px rgba(15,23,42,.05); }
.stat-card { border-radius: 14px; transition: transform .15s, box-shadow .15s; }
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15,23,42,.1); }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn { border-radius: 10px; font-size: 12px; font-weight: 700; transition: background .12s, transform .08s, box-shadow .12s; }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--purple); }
.btn-primary:hover { background: #5547e0; box-shadow: 0 4px 14px rgba(109,93,252,.35); }
.btn-secondary:hover { border-color: var(--purple); color: var(--purple); }
.icon-btn { border-radius: 8px; transition: background .1s, color .1s; }
.icon-btn:hover { background: rgba(109,93,252,.1); color: var(--purple); }

/* ── Form improvements ───────────────────────────────────────── */
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus,
input[type="number"]:focus, input[type="search"]:focus, input[type="url"]:focus,
input[type="date"]:focus, input[type="time"]:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--purple) !important; box-shadow: 0 0 0 3px rgba(109,93,252,.12);
}
.form-field, .field-group { margin-bottom: 16px; }
.field-label { font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; display: block; margin-bottom: 5px; }

/* ── Tables ──────────────────────────────────────────────────── */
table { border-collapse: collapse; width: 100%; }
th { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 8px 12px; text-align: left; border-bottom: 2px solid var(--line); }
td { font-size: 12px; padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr:hover { background: rgba(109,93,252,.03); }
tbody tr:last-child td { border-bottom: none; }

/* ── Badges / chips ──────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; font-size: 10px; font-weight: 800; line-height: 1; white-space: nowrap; }
.badge-green { background: #dcfce7; color: #15803d; }
.badge-red { background: #fee2e2; color: #dc2626; }
.badge-yellow { background: #fef9c3; color: #a16207; }
.badge-blue { background: #dbeafe; color: #1d4ed8; }
.badge-purple { background: #ede9fe; color: #6d5dfc; }
.badge-gray { background: #f1f5f9; color: #64748b; }
html[data-theme-mode="dark"] .badge-green { background: #14532d; color: #86efac; }
html[data-theme-mode="dark"] .badge-red { background: #450a0a; color: #fecaca; }
html[data-theme-mode="dark"] .badge-yellow { background: #422006; color: #fcd34d; }
html[data-theme-mode="dark"] .badge-blue { background: #172554; color: #bfdbfe; }
html[data-theme-mode="dark"] .badge-purple { background: #312e81; color: #c4b5fd; }
html[data-theme-mode="dark"] .badge-gray { background: #1e293b; color: #cbd5e1; }

/* ── Empty states ────────────────────────────────────────────── */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 60px 24px; text-align: center; }
.empty-state i, .empty-state svg { width: 52px; height: 52px; color: var(--muted); opacity: .3; display: block; }
.empty-state h3 { font-size: 18px; font-weight: 800; margin: 0; color: var(--ink); }
.empty-state p { font-size: 12px; color: var(--muted); max-width: 320px; margin: 0; line-height: 1.6; }

/* ── Sidebar improvements ────────────────────────────────────── */
.sidebar { scrollbar-width: thin; }
.nav-item { border-radius: 10px; transition: background .12s, color .12s, transform .08s; font-size: 12px; }
.nav-item:hover { transform: translateX(2px); }
.nav-item.active { font-weight: 800; }

/* ── Module page headers ─────────────────────────────────────── */
.page-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.page-header h1 { font-size: 22px; font-weight: 800; margin: 0; }
.page-header p { font-size: 12px; color: var(--muted); margin: 4px 0 0; }

/* ── Alert improvements ──────────────────────────────────────── */
.alert { border-radius: 12px; border: 1px solid; display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; font-size: 12px; }
.alert i { width: 14px; height: 14px; flex: none; margin-top: 1px; }
.alert button { margin-left: auto; border: none; background: none; cursor: pointer; opacity: .6; }
.alert button:hover { opacity: 1; }
.alert-success { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }
.alert-error { background: #fff0f0; border-color: #fecaca; color: #dc2626; }
.alert-warning { background: #fffbeb; border-color: #fed7aa; color: #d97706; }
.alert-info { background: #eff6ff; border-color: #bfdbfe; color: #2563eb; }
html[data-theme-mode="dark"] .alert-success { background: #052e16; border-color: #166534; color: #86efac; }
html[data-theme-mode="dark"] .alert-error { background: #450a0a; border-color: #991b1b; color: #fca5a5; }
html[data-theme-mode="dark"] .alert-warning { background: #431407; border-color: #92400e; color: #fde68a; }
html[data-theme-mode="dark"] .alert-info { background: #1e3a8a; border-color: #1d4ed8; color: #bfdbfe; }

/* ── Pagination ──────────────────────────────────────────────── */
.pagination { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.page-link { display: grid; place-items: center; min-width: 32px; height: 32px; padding: 0 8px; border-radius: 8px; font-size: 11px; font-weight: 700; text-decoration: none; color: var(--ink); border: 1px solid var(--line); transition: background .1s, border-color .1s; }
.page-link:hover, .page-link.current { background: #edeaff; border-color: var(--purple); color: var(--purple); }

/* ── Avatar improvements ─────────────────────────────────────── */
.avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: #edeaff; color: var(--purple); flex: none; }
.avatar-sm { width: 28px; height: 28px; font-size: 10px; }
.avatar-lg { width: 48px; height: 48px; font-size: 16px; }
.avatar-xl { width: 64px; height: 64px; font-size: 20px; }

/* ── Scrollbar ───────────────────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
::-webkit-scrollbar-track { background: transparent; }

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

/* ── Transition defaults ─────────────────────────────────────── */
a { transition: color .1s, opacity .1s; }

/* ── Page transition progress bar ───────────────────────────────── */
#hamro-nav-bar{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--purple),#3b82f6,var(--purple));background-size:200% 100%;z-index:99999;pointer-events:none;border-radius:0 2px 2px 0;opacity:0}
#hamro-nav-bar.nav-running{opacity:1;width:72%;transition:width 2.5s cubic-bezier(.08,.62,.22,1),opacity .12s ease;animation:nav-shimmer 1.4s linear infinite}
#hamro-nav-bar.nav-done{opacity:1;width:100%;transition:width .12s ease}
#hamro-nav-bar.nav-fading{opacity:0;width:100%;transition:opacity .26s ease}
@keyframes nav-shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}

/* ── Page swap / form loading states ────────────────────────────── */
.content-area.is-swapping{opacity:.88;pointer-events:none;transition:opacity .18s ease}
form.ajax-busy{pointer-events:none}
form.ajax-busy .btn,form.ajax-busy select,form.ajax-busy input{opacity:.65;cursor:wait!important}

/* ── Quick filter chips ──────────────────────────────────────────── */
.quick-filter-chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 12px}
.quick-filter-chips .chip{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:999px;font-size:12px;font-weight:600;background:var(--surface);border:1px solid var(--line);color:var(--ink);text-decoration:none;transition:background .15s,color .15s,border-color .15s}
.quick-filter-chips .chip svg{width:13px;height:13px}
.quick-filter-chips .chip:hover{background:rgba(109,93,252,.08);border-color:var(--purple);color:var(--purple)}
.quick-filter-chips .chip.active{background:rgba(109,93,252,.12);border-color:var(--purple);color:var(--purple)}

/* ── Date navigation group ───────────────────────────────────────── */
.date-nav-group{display:flex;align-items:center;gap:4px}
.btn-icon{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;flex-shrink:0}
.btn-icon svg{width:16px;height:16px}
.btn-sm{padding:4px 10px;font-size:12px;height:auto;gap:4px}

/* ── Quick add forms in sidebar ─────────────────────────────────── */
.quick-add-form{margin-top:10px;border-top:1px solid var(--line);padding-top:10px;display:flex;flex-direction:column;gap:6px}
.quick-add-form input[type="text"],.quick-add-form input[type="number"]{width:100%;box-sizing:border-box}
.form-row-inline{display:flex;align-items:center;gap:8px}
.checkbox-inline{display:flex;align-items:center;gap:4px;font-size:13px;white-space:nowrap;cursor:pointer}
.log-time-form .form-row-inline input[type="number"]{flex:1}

/* ── Hidden module nav indicator ────────────────────────────────── */
.nav-item-hidden{opacity:.65}
.nav-item-hidden:hover{opacity:.85}
.nav-hidden-badge{width:10px!important;height:10px!important;margin-left:auto;color:var(--muted);flex-shrink:0}

/* ── Module unavailable page ─────────────────────────────────────── */
.module-unavailable-page{display:flex;align-items:center;justify-content:center;min-height:60vh;padding:40px 20px}
.module-unavailable-card{max-width:440px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px}
.mu-icon-ring{width:72px;height:72px;border-radius:50%;background:rgba(249,115,22,.1);border:2px solid rgba(249,115,22,.25);display:flex;align-items:center;justify-content:center;color:#f97316}
.mu-icon-ring svg{width:32px;height:32px}
.module-unavailable-card h1{font-size:22px;font-weight:800;margin:0}
.mu-module-name{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0}
.mu-reason{font-size:15px;color:var(--ink);line-height:1.6;margin:0;max-width:380px}
.mu-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.mu-contact{font-size:12px;color:var(--muted);margin:0}

/* ── Module visibility settings ──────────────────────────────────── */
.mv-legend{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:20px;font-size:12px;color:var(--muted);align-items:center}
.mv-legend-item{display:flex;align-items:center;gap:5px}
.mv-status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.mv-status-dot.visible{background:#22c55e}
.mv-status-dot.hidden{background:#f97316}

.mv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.mv-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:12px;transition:box-shadow .15s}
.mv-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.08)}
.mv-card.is-hidden{border-color:rgba(249,115,22,.35);background:rgba(249,115,22,.03)}
.mv-card.is-locked{opacity:.7}
.mv-card-top{display:flex;align-items:center;gap:12px}
.mv-icon-wrap{width:40px;height:40px;border-radius:10px;background:rgba(109,93,252,.12);color:var(--purple);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:opacity .2s}
.mv-icon-wrap.dim{background:rgba(249,115,22,.1);color:#f97316}
.mv-icon-wrap svg{width:18px;height:18px}
.mv-card-info{flex:1;min-width:0}
.mv-card-info strong{display:block;font-size:14px;font-weight:700}
.mv-module-key{font-size:10px;color:var(--muted);font-family:monospace;background:rgba(0,0,0,.05);padding:1px 5px;border-radius:4px}
.mv-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700}
.mv-badge.visible{background:rgba(34,197,94,.1);color:#15803d;border:1px solid rgba(34,197,94,.3)}
.mv-badge.hidden{background:rgba(249,115,22,.1);color:#c2410c;border:1px solid rgba(249,115,22,.3)}
.mv-badge.locked{background:rgba(0,0,0,.06);color:var(--muted);border:1px solid var(--line)}
.mv-badge svg{width:11px;height:11px}
.mv-hidden-meta{display:flex;align-items:flex-start;gap:6px;font-size:12px;color:var(--muted);background:rgba(249,115,22,.06);border-radius:8px;padding:8px 10px;line-height:1.5}
.mv-hidden-meta svg{width:13px;height:13px;color:#f97316;flex-shrink:0;margin-top:1px}
.mv-hidden-meta em{font-style:italic;color:var(--ink)}
.mv-actions{display:flex;flex-direction:column;gap:6px}
.mv-action-form{width:100%}
.mv-hide-form{width:100%}
.mv-hide-form summary{cursor:pointer;list-style:none;width:100%}
.mv-hide-form summary::-webkit-details-marker{display:none}
.mv-hide-inner{display:flex;flex-direction:column;gap:8px;margin-top:10px;padding:12px;background:rgba(239,68,68,.04);border:1px solid rgba(239,68,68,.2);border-radius:10px}
.mv-hide-inner label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600}
.mv-hide-inner input{width:100%;box-sizing:border-box}
.btn-danger{background:#ef4444;color:#fff;border:none}
.btn-danger:hover{background:#dc2626}
.btn-success{background:#22c55e;color:#fff;border:none}
.btn-success:hover{background:#16a34a}
.btn-full{width:100%;justify-content:center}

/* ── Audit log ───────────────────────────────────────────────────── */
/* Risk color tokens */
.risk-critical{--risk-color:#ef4444;--risk-bg:rgba(239,68,68,.08)}
.risk-high{--risk-color:#f97316;--risk-bg:rgba(249,115,22,.08)}
.risk-standard{--risk-color:#3b82f6;--risk-bg:rgba(59,130,246,.06)}
.risk-low{--risk-color:#22c55e;--risk-bg:rgba(34,197,94,.06)}

/* Risk strip */
.audit-risk-strip{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.audit-risk-strip-card{display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:12px;border:1px solid var(--risk-color,var(--line));background:var(--risk-bg,var(--surface));text-decoration:none;transition:box-shadow .15s,transform .1s}
.audit-risk-strip-card:hover{box-shadow:0 4px 12px rgba(0,0,0,.08);transform:translateY(-1px)}
.audit-risk-strip-card.active{box-shadow:0 0 0 2px var(--risk-color)}
.audit-risk-strip-card svg{width:20px;height:20px;color:var(--risk-color,var(--muted));flex-shrink:0}
.audit-risk-strip-card strong{display:block;font-size:22px;font-weight:800;color:var(--risk-color,var(--ink));line-height:1}
.audit-risk-strip-card span{font-size:11px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.risk-clear{--risk-color:var(--muted)}

/* Main layout */
.audit-log-layout{display:grid;grid-template-columns:1fr 320px;gap:20px;align-items:start}
@media(max-width:1100px){.audit-log-layout{grid-template-columns:1fr}}

/* Timeline */
.audit-timeline-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:13px;color:var(--muted)}
.audit-timeline{display:flex;flex-direction:column;gap:6px}
.audit-event{display:flex;border-radius:12px;border:1px solid var(--line);background:var(--surface);overflow:hidden;transition:box-shadow .15s}
.audit-event:hover{box-shadow:0 4px 16px rgba(0,0,0,.08)}
.audit-event-risk-bar{width:4px;flex-shrink:0;background:var(--risk-color)}
.audit-event-body{flex:1;padding:12px 14px;min-width:0}
.audit-event-top{display:flex;gap:10px;align-items:flex-start}
.audit-actor-avatar{width:36px;height:36px;border-radius:50%;background:rgba(109,93,252,.15);color:var(--purple);font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.audit-actor-avatar.sm{width:28px;height:28px;font-size:10px}
.audit-event-main{flex:1;min-width:0}
.audit-event-headline{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:4px}
.audit-event-headline strong{font-size:14px;font-weight:700}
.audit-action-icon{width:15px;height:15px;color:var(--risk-color);flex-shrink:0}
.audit-module-tag{padding:2px 8px;border-radius:999px;background:rgba(109,93,252,.1);color:var(--purple);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.audit-object-tag{padding:2px 8px;border-radius:999px;background:var(--surface-2,rgba(0,0,0,.04));color:var(--muted);font-size:11px;font-weight:600}
.audit-risk-badge{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700;background:var(--risk-bg);color:var(--risk-color);border:1px solid var(--risk-color)}
.audit-risk-badge svg{width:11px;height:11px}
.audit-event-desc{font-size:13px;color:var(--ink);margin:0 0 6px;line-height:1.5}
.audit-event-meta{display:flex;flex-wrap:wrap;gap:10px;font-size:11px;color:var(--muted)}
.audit-event-meta span{display:inline-flex;align-items:center;gap:3px}
.audit-event-meta em{font-style:normal;color:var(--muted)}
.audit-event-meta svg{width:11px;height:11px}
.audit-event-time{font-size:11px;color:var(--muted);white-space:nowrap;margin-top:2px;flex-shrink:0}

/* Diff table */
.audit-diff-table{margin-top:10px;border:1px solid var(--line);border-radius:8px;overflow:hidden;font-size:12px}
.audit-diff-head{display:grid;grid-template-columns:1fr 1fr 1fr;background:var(--surface-2,rgba(0,0,0,.03));padding:5px 10px;font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);gap:8px}
.audit-diff-row{display:grid;grid-template-columns:1fr 1fr 1fr;padding:6px 10px;border-top:1px solid var(--line);gap:8px;align-items:center}
.audit-diff-row:hover{background:rgba(0,0,0,.02)}
.audit-diff-field{font-weight:600;color:var(--ink)}
.audit-diff-before{color:#ef4444;text-decoration:line-through;word-break:break-all}
.audit-diff-after{color:#22c55e;font-weight:600;word-break:break-all}

/* Sidebar sections */
.audit-log-sidebar{display:flex;flex-direction:column;gap:16px}
.audit-trend-bars.tall{display:flex;align-items:flex-end;gap:4px;height:160px;padding:14px 16px 36px;overflow:hidden;position:relative}
.audit-trend-bars.tall::after{content:'';position:absolute;bottom:36px;left:16px;right:16px;height:1px;background:var(--line);pointer-events:none}
.audit-trend-bar{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:0;flex:1;text-decoration:none;height:100%}
.audit-trend-bar i{display:block;width:100%;flex-shrink:0;min-height:4px;border-radius:5px 5px 0 0;background:linear-gradient(to top,rgba(109,93,252,.18),rgba(167,139,250,.42));transition:background .18s,box-shadow .18s,transform .18s;transform-origin:bottom}
.audit-trend-bar:hover i{background:linear-gradient(to top,#6d5dfc,#a78bfa);box-shadow:0 -6px 18px rgba(109,93,252,.32);transform:scaleY(1.04)}
.audit-trend-bar.is-today i{background:linear-gradient(to top,#6d5dfc,#60a5fa);box-shadow:0 -5px 16px rgba(109,93,252,.28)}
.audit-trend-bar.is-today:hover i{box-shadow:0 -8px 22px rgba(109,93,252,.42)}
.audit-trend-bar small{flex-shrink:0;font-size:7.5px;color:var(--muted);white-space:nowrap;transform:rotate(-40deg);transform-origin:top left;margin-top:5px;height:26px;line-height:26px}
.audit-trend-bar.is-today small{color:var(--purple);font-weight:700}

.audit-actor-list{display:flex;flex-direction:column;gap:4px}
.audit-actor-row{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;text-decoration:none;color:inherit;transition:background .12s}
.audit-actor-row:hover{background:rgba(109,93,252,.06)}
.audit-actor-row>div{flex:1;min-width:0}
.audit-actor-row strong{display:block;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.audit-actor-row small{font-size:11px;color:var(--muted)}
.audit-actor-total{font-size:12px;font-weight:700;color:var(--muted);flex-shrink:0}
.tone-red{color:#ef4444}
.tone-amber{color:#f97316}

.audit-breakdown-list{display:flex;flex-direction:column;gap:5px}
.audit-breakdown-list a{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:6px;text-decoration:none;color:inherit;padding:4px 6px;border-radius:6px;font-size:13px;transition:background .12s}
.audit-breakdown-list a:hover{background:rgba(109,93,252,.06)}
.audit-breakdown-list strong{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.audit-breakdown-list small{color:var(--muted);font-size:11px;text-align:right;white-space:nowrap}
.audit-breakdown-list b{grid-column:span 1;height:4px;border-radius:2px;background:rgba(109,93,252,.12);overflow:hidden;width:60px}
.audit-breakdown-list b i{display:block;height:100%;background:var(--purple);border-radius:2px}
.breakdown-icon{width:13px;height:13px;color:var(--muted);flex-shrink:0}

.audit-watch-list{display:flex;flex-direction:column;gap:6px}
.audit-watch-item{display:flex;gap:8px;align-items:flex-start;padding:8px 10px;border-radius:8px;background:var(--risk-bg);border:1px solid var(--risk-color)}
.audit-watch-item svg{width:15px;height:15px;color:var(--risk-color);flex-shrink:0;margin-top:2px}
.audit-watch-item strong{display:block;font-size:12px;font-weight:700}
.audit-watch-item small{display:block;font-size:11px;color:var(--muted)}
.audit-watch-item em{display:block;font-size:11px;font-style:normal;color:var(--ink);margin-top:2px}

.audit-device-list{display:flex;flex-direction:column;gap:4px}
.audit-device-list span{display:flex;align-items:center;gap:8px;padding:5px 6px;font-size:12px}
.audit-device-list svg{width:13px;height:13px;color:var(--muted)}
.audit-device-list strong{flex:1}
.audit-device-list small{color:var(--muted);font-weight:700}

/* ── Performance: GPU compositing hints for animated elements ── */
.sidebar { will-change: transform; }
.content-area { transform: translateZ(0); }

/* ── Smoother content swap — subtle scale + fade for polish ──────── */
.content-area.is-swapping {
  opacity: .86;
  transform: scale(.998);
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}

/* ── Notification drawer — GPU compositing hint ──────────────────── */
.notif-drawer { will-change: transform; }

/* ── Table skeleton loader ───────────────────────────────────────── */
@keyframes hamro-skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}
.skeleton-row td { animation: hamro-skeleton-pulse 1.4s ease-in-out infinite; }
.skeleton-row:nth-child(2) td { animation-delay: .1s; }
.skeleton-row:nth-child(3) td { animation-delay: .2s; }
.skeleton-row td > span {
  display: inline-block;
  background: var(--line);
  border-radius: 6px;
  height: 14px;
  width: 80%;
}

/* ── content-visibility for offscreen panels (paint performance) ── */
.forecast-section,
.audit-section,
.tax-section {
  content-visibility: auto;
  contain-intrinsic-size: 0 400px;
}

/* ══════════════════════════════════════════════════════════════
   DARK MODE — comprehensive pass covering elements that were
   previously missing from the dark theme rules.
   Palette: bg #0f172a | surface #111827 | raised #172033 |
            border #263145 | text #e5e7eb | muted #94a3b8
   ══════════════════════════════════════════════════════════════ */

/* Global var overrides */
html[data-theme-mode="dark"]{--surface:#111827;--bg:#0f172a;--ink:#e5e7eb;--muted:#94a3b8;--line:#263145;--shadow:0 10px 30px rgba(0,0,0,.4)}

/* ── Kanban task cards (the main visible bug) ── */
html[data-theme-mode="dark"] .kanban-card{background:#172033;border-color:#263145;box-shadow:0 3px 8px rgba(0,0,0,.3)}
html[data-theme-mode="dark"] .kanban-card:hover{background:#1e293b;border-color:#374d6b}
html[data-theme-mode="dark"] .kanban-card .card-title,html[data-theme-mode="dark"] .kanban-card strong{color:#e5e7eb}
html[data-theme-mode="dark"] .kanban-card p,html[data-theme-mode="dark"] .kanban-card small{color:#94a3b8}
html[data-theme-mode="dark"] .card-labels .priority-label{background:#1e293b!important;color:#94a3b8!important}
html[data-theme-mode="dark"] .card-labels span{background:#1e1b4b!important;color:#c4b5fd!important}

/* ── Board tabs (Board / Time entries / Calendar / Gantt) ── */
html[data-theme-mode="dark"] .board-tabs{background:#111827;border-color:#263145}
html[data-theme-mode="dark"] .board-tabs a,html[data-theme-mode="dark"] .board-tabs button{color:#94a3b8}
html[data-theme-mode="dark"] .board-tabs a.active,html[data-theme-mode="dark"] .board-tabs button.active{background:#1e293b;color:#e5e7eb}

/* ── Filter bars & search fields ── */
html[data-theme-mode="dark"] .filter-bar{background:#111827;border-color:#263145}
html[data-theme-mode="dark"] .filter-bar select,html[data-theme-mode="dark"] .checkin-action select{background:#172033;border-color:#263145;color:#e5e7eb}
html[data-theme-mode="dark"] .search-field{background:#172033;border-color:#263145}
html[data-theme-mode="dark"] .search-field input{color:#e5e7eb;background:transparent}
html[data-theme-mode="dark"] .search-field input::placeholder{color:#64748b}
html[data-theme-mode="dark"] .date-chip,html[data-theme-mode="dark"] .select-chip{background:#172033;border-color:#263145;color:#cbd5e1}
html[data-theme-mode="dark"] .global-search{background:#172033;border-color:#263145}
html[data-theme-mode="dark"] .global-search input{color:#e5e7eb;background:transparent}
html[data-theme-mode="dark"] .global-search input::placeholder{color:#64748b}
html[data-theme-mode="dark"] .global-search kbd{background:#1e293b;border-color:#334155;color:#94a3b8}

/* ── Buttons ── */
html[data-theme-mode="dark"] .btn-secondary,html[data-theme-mode="dark"] .btn-light{background:#172033;color:#cbd5e1;border-color:#263145}
html[data-theme-mode="dark"] .btn-secondary:hover,html[data-theme-mode="dark"] .btn-light:hover{background:#1e293b;border-color:#615fff;color:#e5e7eb}
html[data-theme-mode="dark"] .icon-btn{background:#172033;border-color:#263145;color:#94a3b8}
html[data-theme-mode="dark"] .icon-btn:hover{background:#1e293b;border-color:#615fff;color:#e5e7eb}

/* ── Form controls ── */
html[data-theme-mode="dark"] .form-control,html[data-theme-mode="dark"] .app-form input,html[data-theme-mode="dark"] .app-form select,html[data-theme-mode="dark"] .app-form textarea{background:#172033;border-color:#263145;color:#e5e7eb}
html[data-theme-mode="dark"] .form-control:focus,html[data-theme-mode="dark"] .app-form input:focus,html[data-theme-mode="dark"] .app-form select:focus,html[data-theme-mode="dark"] .app-form textarea:focus{background:#1e293b;border-color:#615fff;box-shadow:0 0 0 3px rgba(109,93,252,.15)}
html[data-theme-mode="dark"] .form-control::placeholder,html[data-theme-mode="dark"] .app-form input::placeholder,html[data-theme-mode="dark"] .app-form textarea::placeholder{color:#64748b}
html[data-theme-mode="dark"] .form-section{background:#111827;border-color:#263145}
html[data-theme-mode="dark"] .form-section legend,html[data-theme-mode="dark"] .form-section label{color:#cbd5e1}
html[data-theme-mode="dark"] .form-errors{background:#450a0a;border-color:#7f1d1d;color:#fecaca}
html[data-theme-mode="dark"] .app-form .form-label,html[data-theme-mode="dark"] .field-label{color:#94a3b8}

/* ── Data tables ── */
html[data-theme-mode="dark"] .data-table th{background:#172033;border-color:#263145;color:#94a3b8}
html[data-theme-mode="dark"] .data-table tr:hover td{background:#172033}
html[data-theme-mode="dark"] .data-table td{border-color:#1e293b}

/* ── Stat cards & metric rows (global, not just dashboard-specific) ── */
html[data-theme-mode="dark"] .stat-card{background:#111827;border-color:#263145}
html[data-theme-mode="dark"] .stat-card small{color:#94a3b8}
html[data-theme-mode="dark"] .metric-row article{background:#111827;border-color:#263145}
html[data-theme-mode="dark"] .tone-purple.stat-icon{background:#1e1b4b}
html[data-theme-mode="dark"] .tone-red.stat-icon{background:#450a0a}
html[data-theme-mode="dark"] .tone-amber.stat-icon{background:#422006}
html[data-theme-mode="dark"] .tone-green.stat-icon{background:#052e16}
html[data-theme-mode="dark"] .tone-blue.stat-icon{background:#172554}

/* ── Employee cards & profile ── */
html[data-theme-mode="dark"] .employee-card{background:#111827;border-color:#263145;box-shadow:0 4px 15px rgba(0,0,0,.25)}
html[data-theme-mode="dark"] .employee-card:hover{border-color:#615fff}
html[data-theme-mode="dark"] .employee-card strong{color:#e5e7eb}
html[data-theme-mode="dark"] .employee-card small,html[data-theme-mode="dark"] .employee-card span{color:#94a3b8}
html[data-theme-mode="dark"] .profile-kpis article{background:#111827;border-color:#263145}
html[data-theme-mode="dark"] .profile-kpis strong{color:#e5e7eb}
html[data-theme-mode="dark"] .profile-kpis small{color:#94a3b8}
html[data-theme-mode="dark"] .skill-row span{background:#1e293b;color:#94a3b8}
html[data-theme-mode="dark"] .detail-grid{background:#111827;border-color:#263145}

/* ── Modals ── */
html[data-theme-mode="dark"] .modal-card{background:#111827;border:1px solid #263145;box-shadow:0 30px 80px rgba(0,0,0,.6)}
html[data-theme-mode="dark"] .modal-close{background:#172033;border-color:#263145;color:#94a3b8}
html[data-theme-mode="dark"] .modal-close:hover{background:#1e293b;border-color:#615fff;color:#e5e7eb}
html[data-theme-mode="dark"] .modal-title{color:#e5e7eb}
html[data-theme-mode="dark"] .modal-subtitle{color:#94a3b8}

/* ── Search results dropdown ── */
html[data-theme-mode="dark"] .search-results{background:#111827;border-color:#263145;box-shadow:0 20px 40px rgba(0,0,0,.5)}
html[data-theme-mode="dark"] .search-results>a{color:#e5e7eb;border-color:#1e293b}
html[data-theme-mode="dark"] .search-results>a:hover{background:#172033}
html[data-theme-mode="dark"] .search-results small{color:#94a3b8}

/* ── Notifications ── */
html[data-theme-mode="dark"] .notification-row.unread{background:#1a1f35}
html[data-theme-mode="dark"] .notification-dropdown{background:#111827;border-color:#263145}

/* ── Status badges (light-mode-only colors) ── */
html[data-theme-mode="dark"] .status-pending,html[data-theme-mode="dark"] .status-in_progress,html[data-theme-mode="dark"] .status-in_review,html[data-theme-mode="dark"] .status-testing,html[data-theme-mode="dark"] .status-sent{background:#422006!important;color:#fcd34d!important}
html[data-theme-mode="dark"] .status-rejected,html[data-theme-mode="dark"] .status-overdue,html[data-theme-mode="dark"] .status-blocked,html[data-theme-mode="dark"] .status-delayed{background:#450a0a!important;color:#fca5a5!important}
html[data-theme-mode="dark"] .status-approved,html[data-theme-mode="dark"] .status-paid,html[data-theme-mode="dark"] .status-active,html[data-theme-mode="dark"] .status-completed{background:#052e16!important;color:#86efac!important}
html[data-theme-mode="dark"] .status-on_hold,html[data-theme-mode="dark"] .status-planned,html[data-theme-mode="dark"] .status-notice{background:#172554!important;color:#93c5fd!important}
/* Fix light-mode status badge contrast too — same same-hue problem */
.status-pending,.status-in_progress,.status-in_review,.status-testing,.status-sent{background:#fef3c7!important;color:#92400e!important}
.status-rejected,.status-overdue,.status-blocked,.status-delayed{background:#fee2e2!important;color:#991b1b!important}
.status-approved,.status-paid,.status-active,.status-completed{background:#dcfce7!important;color:#166534!important}
.status-on_hold,.status-planned,.status-notice{background:#dbeafe!important;color:#1e40af!important}
.status-cancelled,.status-inactive,.status-draft{background:#f1f5f9!important;color:#475569!important}
html[data-theme-mode="dark"] .priority-low{background:#1e293b!important;color:#94a3b8!important}
html[data-theme-mode="dark"] .priority-medium{background:#172554!important;color:#93c5fd!important}
html[data-theme-mode="dark"] .priority-high{background:#451a03!important;color:#fcd34d!important}
html[data-theme-mode="dark"] .priority-urgent{background:#450a0a!important;color:#fca5a5!important}
html[data-theme-mode="dark"] .priority-pill{background:#1e293b!important;color:#94a3b8!important}
html[data-theme-mode="dark"] .priority-pill.priority-low{background:#1e293b!important;color:#94a3b8!important}
html[data-theme-mode="dark"] .priority-pill.priority-medium{background:#172554!important;color:#93c5fd!important}
html[data-theme-mode="dark"] .priority-pill.priority-high{background:#451a03!important;color:#fcd34d!important}
html[data-theme-mode="dark"] .priority-pill.priority-urgent{background:#450a0a!important;color:#fca5a5!important}

/* ── Attendance / checkin ── */
html[data-theme-mode="dark"] .checkin-action{background:#111827;border-color:#263145}
html[data-theme-mode="dark"] .checkin-action select{background:#172033;border-color:#263145;color:#e5e7eb}
html[data-theme-mode="dark"] .attendance-card,html[data-theme-mode="dark"] .attendance-grid article{background:#111827;border-color:#263145}
html[data-theme-mode="dark"] .attendance-card strong{color:#e5e7eb}
html[data-theme-mode="dark"] .attendance-card small,html[data-theme-mode="dark"] .attendance-card span{color:#94a3b8}

/* ── General missing elements ── */
html[data-theme-mode="dark"] .alert{background:#111827;border-color:#263145;color:#e5e7eb}
html[data-theme-mode="dark"] .page-header{border-color:#263145}
html[data-theme-mode="dark"] .tab-nav a{color:#94a3b8;border-color:transparent}
html[data-theme-mode="dark"] .tab-nav a.active{color:#e5e7eb;border-color:var(--purple)}
html[data-theme-mode="dark"] .detail-actions{border-color:#263145}
html[data-theme-mode="dark"] .empty-state{color:#94a3b8}
html[data-theme-mode="dark"] .empty-state h3{color:#e5e7eb}
html[data-theme-mode="dark"] .badge{background:#1e293b;color:#94a3b8}
html[data-theme-mode="dark"] .progress{background:#1e293b}
html[data-theme-mode="dark"] .action-bar,html[data-theme-mode="dark"] .toolbar{background:#111827;border-color:#263145}
html[data-theme-mode="dark"] .timeline-item{border-color:#263145}
html[data-theme-mode="dark"] .timeline-item::before{background:#263145}
html[data-theme-mode="dark"] .mini-profile{background:#111827;border-color:#263145}
html[data-theme-mode="dark"] .mini-profile strong{color:#e5e7eb}
html[data-theme-mode="dark"] .mini-profile small{color:#94a3b8}

/* ════════════════════════════════════════════════════════════════════════
   TEXT VISIBILITY & VISUAL HIERARCHY — comprehensive pass
   ════════════════════════════════════════════════════════════════════════

   Fixes three categories:
   1. Opacity values that make elements too faint (<.65)
   2. Hardcoded gray text colors below WCAG 4.5:1 on white (#8xxxxx, #9xxxxx)
   3. Missing dark-mode overrides for those hardcoded colors
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1. Opacity: stat-spark sparkline bars (app.css sets .45) ── */
.stat-spark{opacity:.72!important}

/* ── 2. Light-mode hardcoded-color contrast fixes ── */
/* stat card label text (#7b8799 → 3.1:1; fix to #536078 → 5.8:1) */
.stat-card span{color:#536078!important}
/* stat-card label weight boost — clearly secondary to the big number */
.stat-card>div>span,.stat-card>div>small{font-size:10px;font-weight:500}
.stat-card strong,.stat-card b{font-weight:700}
/* chart legend (#68758a → 3.6:1; fix to #4a5568 → 5.1:1) */
.chart-legend span{color:#4a5568!important}
/* empty states (#9aa4b5 → 2.5:1; fix to #64748b → 4.6:1) */
.empty-mini{color:#64748b!important}
.empty-state p{color:#64748b!important}
/* employee meta (#768397 → 3.4:1 → #536078 → 5.8:1) */
.employee-meta{color:#536078!important}
/* card meta: 7px is below readable minimum; bump to 8px + fix color */
.card-meta{font-size:8px!important;color:#64748b!important}
/* detail grid labels (#8a95a6 → 3.2:1 → #64748b → 4.6:1) */
.detail-grid dt{color:#64748b!important}
/* task row: stronger title / lighter meta separation */
.task-row>div>strong,.task-row strong{font-weight:700!important;color:var(--ink)!important}
.task-row>div>small,.task-row small{font-weight:400!important;color:#536078!important}
/* activity row meta */
.activity-row small{color:#536078!important}
.activity-row p{color:var(--ink)!important}
/* panel / page subtitle lines */
.panel-header p{color:#536078!important}
.page-header p{color:#536078!important}
/* person-cell secondary line */
.person-cell small{color:#536078!important}
/* audit actor secondary line */
.audit-actor-row small{color:#536078!important}
.audit-event-meta span{color:#536078!important}
.audit-event-meta em{color:#4a5568!important}
/* kanban column count badge */
.kanban-column>header>span{color:#3a4452!important}

/* ── 3. Topbar dark mode (app.css: rgba(255,255,255,.96) — pure white in dark) ── */
html[data-theme-mode="dark"] .topbar{background:rgba(15,23,42,.97)!important;border-bottom-color:#263145!important}
html[data-theme-mode="dark"] .topbar-user span,.topbar-role{color:#94a3b8}
html[data-theme-mode="dark"] .topbar-user strong{color:#e5e7eb}

/* ── 4. Dark mode — hardcoded gray text that needs light equivalents ── */
html[data-theme-mode="dark"] .stat-card span,html[data-theme-mode="dark"] .stat-card>div>span{color:#94a3b8!important}
html[data-theme-mode="dark"] .stat-card strong,html[data-theme-mode="dark"] .stat-card b{color:#e5e7eb!important}
html[data-theme-mode="dark"] .chart-legend span{color:#94a3b8!important}
html[data-theme-mode="dark"] .empty-mini{color:#94a3b8!important}
html[data-theme-mode="dark"] .empty-state p{color:#94a3b8!important}
html[data-theme-mode="dark"] .employee-meta{color:#94a3b8!important}
html[data-theme-mode="dark"] .card-meta{color:#94a3b8!important}
html[data-theme-mode="dark"] .detail-grid dt{color:#94a3b8!important}
html[data-theme-mode="dark"] .detail-grid dd{color:#cbd5e1!important}
html[data-theme-mode="dark"] .task-row{border-top-color:#1e293b!important}
html[data-theme-mode="dark"] .task-row strong{color:#e5e7eb!important}
html[data-theme-mode="dark"] .task-row small{color:#94a3b8!important}
html[data-theme-mode="dark"] .activity-row{border-top-color:#1e293b!important}
html[data-theme-mode="dark"] .activity-row p{color:#e5e7eb!important}
html[data-theme-mode="dark"] .activity-row small{color:#94a3b8!important}
html[data-theme-mode="dark"] .panel-header p{color:#94a3b8!important}
html[data-theme-mode="dark"] .page-header p{color:#94a3b8!important}
html[data-theme-mode="dark"] .person-cell small{color:#94a3b8!important}
html[data-theme-mode="dark"] .person-cell strong{color:#e5e7eb!important}
html[data-theme-mode="dark"] .audit-actor-row{background:transparent;border-color:#1e293b}
html[data-theme-mode="dark"] .audit-actor-row strong{color:#e5e7eb}
html[data-theme-mode="dark"] .audit-actor-row small{color:#94a3b8}
html[data-theme-mode="dark"] .audit-event-meta span{color:#94a3b8!important}
html[data-theme-mode="dark"] .audit-event-meta em{color:#64748b!important}
html[data-theme-mode="dark"] .audit-event-desc{color:#cbd5e1!important}
html[data-theme-mode="dark"] .audit-event-headline strong{color:#e5e7eb!important}
html[data-theme-mode="dark"] .audit-event-time{color:#94a3b8!important}
html[data-theme-mode="dark"] .kanban-column>header>span{color:#94a3b8!important}
html[data-theme-mode="dark"] .breakdown-list a strong{color:#e5e7eb!important}
html[data-theme-mode="dark"] .breakdown-list a small{color:#94a3b8!important}

/* ── 5. Dark mode — task/project rows inside panels ── */
html[data-theme-mode="dark"] .notice-list li,html[data-theme-mode="dark"] .notice-list a{border-color:#1e293b;color:#cbd5e1}
html[data-theme-mode="dark"] .project-priority-list a{background:#111827;border-color:#1e293b}
html[data-theme-mode="dark"] .project-priority-list strong,html[data-theme-mode="dark"] .project-priority-list small{color:#94a3b8}
html[data-theme-mode="dark"] .project-team-list span,html[data-theme-mode="dark"] .project-deadline-list a{background:#111827;border-color:#1e293b}
html[data-theme-mode="dark"] .project-today-list a{border-color:#1e293b}
html[data-theme-mode="dark"] .project-today-list strong{color:#e5e7eb}

/* ── 6. Dark mode — misc items found missing ── */
html[data-theme-mode="dark"] .chat-start-state p{color:#94a3b8}
html[data-theme-mode="dark"] .audit-breakdown-list a{border-color:#1e293b}
html[data-theme-mode="dark"] .audit-watch-item{border-color:#1e293b}
html[data-theme-mode="dark"] .audit-watch-item strong{color:#e5e7eb}
html[data-theme-mode="dark"] .audit-watch-item small{color:#94a3b8}
html[data-theme-mode="dark"] .audit-watch-item em{color:#94a3b8}
html[data-theme-mode="dark"] .audit-device-list span{border-color:#1e293b;color:#cbd5e1}
html[data-theme-mode="dark"] .audit-actor-total{color:#94a3b8}
html[data-theme-mode="dark"] .audit-timeline-header span{color:#94a3b8}
html[data-theme-mode="dark"] .audit-diff-table{background:#172033;border-color:#263145}
html[data-theme-mode="dark"] .audit-diff-head{background:#1e293b;color:#94a3b8}
html[data-theme-mode="dark"] .audit-diff-field{color:#94a3b8}
html[data-theme-mode="dark"] .audit-diff-before{color:#fca5a5}
html[data-theme-mode="dark"] .audit-diff-after{color:#86efac}

/* ════════════════════════════════════════════════════════════════════════
   UX IMPROVEMENTS
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1. Cursor: pointer everywhere something is clickable ── */
.kanban-card,.employee-card,.project-card,.task-row a,.audit-actor-row,
.data-table tbody tr[data-href],.notice-card a,.activity-row a,
.stat-card[href],.metric-row a,.lead-card,.crm-row,.invoice-row,
.asset-card,.doc-card,.wiki-card,.approval-card,.report-card,
.ticket-card,.portal-task-row,.checkin-card,.breakdown-list a{cursor:pointer}

/* ── 2. Focus-visible ring — all interactive elements ── */
:focus-visible{outline:2px solid var(--purple)!important;outline-offset:2px!important;border-radius:4px}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--purple)!important;outline-offset:2px!important}

/* ── 3. Alert auto-dismiss styles ── */
.alert{position:relative;overflow:hidden;transition:opacity .35s,transform .35s}
.alert-progress-bar{position:absolute;bottom:0;left:0;height:3px;width:100%;background:currentColor;opacity:.3;transform-origin:left;animation:alert-shrink 5s linear forwards}
@keyframes alert-shrink{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.alert-fading{opacity:0;transform:translateY(-6px)}
/* Alert variant icons */
.alert-success{background:#f0fdf4;color:#166534;border:1px solid #bbf7d0}
.alert-error,.alert-danger{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}
.alert-warning{background:#fffbeb;color:#92400e;border:1px solid #fde68a}
.alert-info{background:#eff6ff;color:#1e40af;border:1px solid #bfdbfe}
html[data-theme-mode="dark"] .alert-success{background:#052e16;color:#86efac;border-color:#14532d}
html[data-theme-mode="dark"] .alert-error,html[data-theme-mode="dark"] .alert-danger{background:#450a0a;color:#fca5a5;border-color:#7f1d1d}
html[data-theme-mode="dark"] .alert-warning{background:#422006;color:#fcd34d;border-color:#78350f}
html[data-theme-mode="dark"] .alert-info{background:#172554;color:#93c5fd;border-color:#1e3a8a}

/* ── 4. Branded confirm modal ── */
.ux-confirm-overlay{position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:9100;display:grid;place-items:center;backdrop-filter:blur(4px)}
.ux-confirm-overlay[hidden]{display:none}
.ux-confirm-card{background:var(--surface,#fff);border:1px solid var(--line,#e7eaf1);border-radius:18px;padding:32px 28px 24px;max-width:380px;width:calc(100vw - 32px);box-shadow:0 24px 56px rgba(15,23,42,.22);text-align:center;animation:confirm-pop .2s cubic-bezier(.34,1.56,.64,1)}
@keyframes confirm-pop{from{transform:scale(.94);opacity:0}to{transform:scale(1);opacity:1}}
.ux-confirm-icon{width:52px;height:52px;border-radius:50%;background:#fee2e2;color:#991b1b;display:grid;place-items:center;margin:0 auto 16px}
.ux-confirm-icon svg{width:24px;height:24px}
.ux-confirm-card h3{margin:0 0 8px;font-size:16px;color:var(--ink,#172033)}
.ux-confirm-body{font-size:13px;color:#536078;margin:0 0 24px;line-height:1.5}
.ux-confirm-actions{display:flex;gap:10px;justify-content:center}
.ux-confirm-actions .btn{min-width:90px}
html[data-theme-mode="dark"] .ux-confirm-card{background:#111827;border-color:#263145}
html[data-theme-mode="dark"] .ux-confirm-card h3{color:#e5e7eb}
html[data-theme-mode="dark"] .ux-confirm-body{color:#94a3b8}
html[data-theme-mode="dark"] .ux-confirm-icon{background:#450a0a;color:#fca5a5}

/* ── 5. Button loading spinner ── */
.btn-spinner{display:inline-block;width:12px;height:12px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin .6s linear infinite;margin-right:6px;vertical-align:-2px;flex-shrink:0}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── 6. Char counter ── */
.char-counter{display:block;text-align:right;font-size:10px;color:#94a3b8;margin-top:3px;transition:color .15s}
.char-counter-warn{color:#d97706}
.char-counter-over{color:#dc2626;font-weight:700}

/* ── 7. Consistent hover on data rows ── */
.data-table tbody tr:hover td{background:#f8f9fc}
.data-table tbody tr[data-href]:hover td{background:#f3f0ff;cursor:pointer}
.task-row:hover{background:#fafbff}
.activity-row:hover{background:#fafbff}
.notice-list a:hover,.audit-actor-row:hover{background:#f8f9ff}
html[data-theme-mode="dark"] .data-table tbody tr:hover td{background:#172033}
html[data-theme-mode="dark"] .data-table tbody tr[data-href]:hover td{background:#1e1b4b}
html[data-theme-mode="dark"] .task-row:hover{background:#111827}
html[data-theme-mode="dark"] .activity-row:hover{background:#111827}

/* ── 8. Table horizontal scroll ── */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.data-table{min-width:600px}

/* ── 9. Notification drawer — slide-in animation (class toggled by patched JS) ── */
.notif-drawer{transform:translateX(110%);opacity:0;transition:transform .25s cubic-bezier(.22,.68,0,1.2),opacity .2s}
.notif-drawer.notif-opening{transform:translateX(0)!important;opacity:1!important}
.notif-overlay{opacity:0;pointer-events:none;transition:opacity .2s}
.notif-overlay.notif-opening{opacity:1!important;pointer-events:auto}

/* ── 10. Notification tab count badges ── */
.notif-tab{position:relative}
.notif-tab .tab-count{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--purple);color:#fff;font-size:9px;font-weight:800;margin-left:4px;vertical-align:1px}

/* ── 11. Back/breadcrumb navigation ── */
.back-link,.breadcrumb-back{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--purple);padding:5px 10px 5px 7px;border-radius:8px;transition:background .15s,color .15s;margin-bottom:8px}
.back-link:hover,.breadcrumb-back:hover{background:rgba(109,93,252,.08);color:var(--purple)}
.back-link svg,.breadcrumb-back svg{width:14px;height:14px}

/* ── 12. Empty state CTAs ── */
.empty-state .btn,.empty-mini .btn{margin-top:12px}
.empty-state{gap:12px}

/* ── 13. AJAX busy state — dim content while loading ── */
.is-swapping{opacity:.55;pointer-events:none;transition:opacity .15s}
.content-area.is-swapping::after{content:'';position:fixed;inset:0;z-index:50;background:transparent}

/* ── 14. Form field focus ring ── */
.form-control:focus,.app-form input:focus,.app-form select:focus,.app-form textarea:focus{outline:none;border-color:var(--purple)!important;box-shadow:0 0 0 3px rgba(109,93,252,.15)!important}
html[data-theme-mode="dark"] .form-control:focus,html[data-theme-mode="dark"] .app-form input:focus,html[data-theme-mode="dark"] .app-form select:focus,html[data-theme-mode="dark"] .app-form textarea:focus{box-shadow:0 0 0 3px rgba(109,93,252,.25)!important}

/* ── 15. Disabled state clarity ── */
[disabled],[aria-disabled="true"]{opacity:.55;cursor:not-allowed!important}
.btn[disabled]{pointer-events:none}
/* Tooltip hint on disabled buttons via title attr */
[disabled][title]{cursor:not-allowed!important}

/* ── 16. Mobile touch targets ── */
@media(max-width:768px){
  .btn,.icon-btn,.nav-item a,.tab-nav a{min-height:44px}
  .icon-btn{min-width:44px;display:grid;place-items:center}
  .data-table td,.data-table th{padding:10px 12px}
  .kanban-column{min-width:260px}
  .content-area{padding:12px}
  .table-scroll{margin:0 -12px;padding:0 12px}
  .filter-bar{flex-wrap:wrap;gap:8px}
  .filter-bar select,.filter-bar input{min-height:40px;flex:1 1 160px}
}

/* ── 17. Sidebar scroll indicator ── */
.sidebar-nav{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.12) transparent}

/* ── 18. Section title visual hierarchy ── */
.section-heading{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 10px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.panel-header h2{font-size:14px;font-weight:700;letter-spacing:-.01em}
.panel-header h3{font-size:13px;font-weight:600}
.page-header h1{font-size:24px;font-weight:800;letter-spacing:-.025em;line-height:1.2}
html[data-theme-mode="dark"] .section-heading{color:#64748b;border-color:#1e293b}

/* ── 19. Table sort indicator CSS (applied by ux-improvements.js) ── */
th[data-sort]{cursor:pointer;user-select:none;white-space:nowrap;padding-right:18px!important;position:relative}
th[data-sort]::after{content:'↕';position:absolute;right:6px;top:50%;transform:translateY(-50%);opacity:.35;font-size:10px}
th[data-sort].sort-asc::after{content:'↑';opacity:1}
th[data-sort].sort-desc::after{content:'↓';opacity:1}
th[data-sort]:hover{background:#f0f1f8!important}
html[data-theme-mode="dark"] th[data-sort]:hover{background:#1e293b!important}

/* ── 20. Improved page transitions ── */
.content-area{animation:page-in .18s ease}
@keyframes page-in{from{opacity:.7;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ── 21. Tooltip via title — enhanced styling ── */
[title]:not(iframe):not(input):not(textarea){cursor:help}
button[title],a[title],[data-truncate][title]{cursor:pointer}

/* ── 22. Skip-to-content (enhances existing .skip-link from app.css) ── */
.skip-link{z-index:10000!important}

/* ── 23. Search field focus enhancement ── */
.search-field:focus-within{box-shadow:0 0 0 3px rgba(109,93,252,.15);border-color:var(--purple)!important}

/* ── 24. Card hover elevate ── */
.employee-card:hover,.project-card:hover,.kanban-card:hover,.lead-card:hover,.asset-card:hover{box-shadow:0 8px 24px rgba(15,23,42,.1)!important;transform:translateY(-1px)!important;transition:transform .15s,box-shadow .15s}
html[data-theme-mode="dark"] .employee-card:hover,html[data-theme-mode="dark"] .project-card:hover,html[data-theme-mode="dark"] .kanban-card:hover{box-shadow:0 8px 24px rgba(0,0,0,.35)!important}

/* ── 25. Inline form validation state ── */
.form-control.is-invalid,.app-form input.is-invalid,.app-form select.is-invalid,.app-form textarea.is-invalid{border-color:#dc2626!important;background:#fff5f5!important}
.field-error{display:block;font-size:11px;color:#dc2626;margin-top:4px;font-weight:500}
html[data-theme-mode="dark"] .form-control.is-invalid{background:#2d0a0a!important}
html[data-theme-mode="dark"] .field-error{color:#fca5a5}

/* ════════════════════════════════════════════════════════════════════════
   COMPREHENSIVE DARK MODE — MISSING OVERRIDES
   Covers components-extra.css, people.css, credentials.css, app.css gaps
   Color key:
     surface bg     → #111827   card bg    → #172033
     input bg       → #1e293b   ink        → #e5e7eb
     secondary text → #94a3b8   tertiary   → #64748b
     purple tint bg → #1e1b4b   blue bg    → #172554
     green bg       → #052e16   amber bg   → #422006   red bg → #450a0a
   ════════════════════════════════════════════════════════════════════════ */

/* ── Notifications: risk-level icon backgrounds ── */
html[data-theme-mode="dark"] .notification-risk-low .notification-icon{background:#1e293b;color:#94a3b8}
html[data-theme-mode="dark"] .notification-risk-medium .notification-icon{background:#172554;color:#93c5fd}
html[data-theme-mode="dark"] .notification-risk-high .notification-icon{background:#422006;color:#fcd34d}
html[data-theme-mode="dark"] .notification-risk-critical .notification-icon{background:#7f1d1d;color:#fecaca}

/* ── Leave & attendance forms ── */
html[data-theme-mode="dark"] .leave-decision-forms textarea{background:#1e293b;border-color:#334155;color:#e5e7eb}
html[data-theme-mode="dark"] .attendance-location-input{background:#172033;border-color:#263145;color:#e5e7eb}
html[data-theme-mode="dark"] .attendance-filters select,.attendance-filters select{color:#e5e7eb}
html[data-theme-mode="dark"] .attendance-roster-card dd{color:#cbd5e1}
html[data-theme-mode="dark"] .attendance-warning{background:#422006;color:#fcd34d;border-color:#78350f}

/* ── Calendar ── */
html[data-theme-mode="dark"] .calendar-weekdays{background:#111827;border-color:#263145}
html[data-theme-mode="dark"] .calendar-weekdays span{color:#94a3b8}
html[data-theme-mode="dark"] .calendar-month-grid{background:#0f172a;border-color:#263145}
html[data-theme-mode="dark"] .calendar-day{background:#111827;border-color:#263145}
html[data-theme-mode="dark"] .calendar-day.is-muted{background:#0f172a;color:#64748b}
html[data-theme-mode="dark"] .calendar-day.is-today{border-color:var(--purple)}
html[data-theme-mode="dark"] .calendar-day header span{background:#1e1b4b;color:#a5b4fc}
html[data-theme-mode="dark"] .calendar-event{background:#312e81;color:#c4b5fd;border-color:#4338ca}
html[data-theme-mode="dark"] .calendar-event span{color:#c4b5fd}
html[data-theme-mode="dark"] .calendar-event.event-task{background:#1e3a8a;color:#93c5fd}
html[data-theme-mode="dark"] .calendar-event.event-task span{color:#bfdbfe}
html[data-theme-mode="dark"] .calendar-event.event-milestone{background:#78350f;color:#fcd34d}
html[data-theme-mode="dark"] .calendar-day-empty{color:#64748b}
html[data-theme-mode="dark"] .agenda-icon{background:#1e1b4b;color:#a5b4fc}
html[data-theme-mode="dark"] .agenda-item.event-task .agenda-icon{background:#172554;color:#93c5fd}
html[data-theme-mode="dark"] .agenda-item.event-milestone .agenda-icon{background:#422006;color:#fcd34d}
html[data-theme-mode="dark"] .agenda-row>span{background:#1e1b4b;color:#a5b4fc}
html[data-theme-mode="dark"] .agenda-row.event-task>span{background:#172554;color:#93c5fd}

/* ── Finance ── */
html[data-theme-mode="dark"] .finance-filters label:not(.search-field),html[data-theme-mode="dark"] .date-filter{background:#111827}
html[data-theme-mode="dark"] .finance-filters input[type=date],html[data-theme-mode="dark"] .date-filter input{background:#172033;border-color:#263145;color:#e5e7eb}
html[data-theme-mode="dark"] .finance-mini-list h3{color:#94a3b8}
html[data-theme-mode="dark"] .cashflow-lane{background:#172033;border-color:#263145}
html[data-theme-mode="dark"] .finance-status-list span{background:#172033;border-color:#263145;color:#e5e7eb}
html[data-theme-mode="dark"] .filter-alert{background:#422006;color:#fcd34d;border-color:#78350f}

/* ── Dashboard insight cards ── */
html[data-theme-mode="dark"] .insight-card{background:#111827;border-color:#263145}
html[data-theme-mode="dark"] .insight-card>svg:first-child{background:#1e1b4b;color:#a5b4fc}
html[data-theme-mode="dark"] .insight-card.tone-red>svg:first-child{background:#450a0a;color:#fca5a5}
html[data-theme-mode="dark"] .insight-card.tone-amber>svg:first-child{background:#422006;color:#fcd34d}
html[data-theme-mode="dark"] .insight-card.tone-green>svg:first-child{background:#052e16;color:#86efac}
html[data-theme-mode="dark"] .insight-card strong{color:#e5e7eb}
html[data-theme-mode="dark"] .insight-card small,.insight-card p{color:#94a3b8}

/* ── Tasks ── */
html[data-theme-mode="dark"] .task-board-filters select{background:#172033;border-color:#263145;color:#e5e7eb}
html[data-theme-mode="dark"] .task-status-form select{background:#172033;border-color:#263145;color:#e5e7eb}
html[data-theme-mode="dark"] .sprint-health-grid article{background:#111827;border-color:#263145}
html[data-theme-mode="dark"] .sprint-health-grid p{color:#94a3b8}
html[data-theme-mode="dark"] .sprint-health-grid dl>div{background:#172033;border-color:#263145}
html[data-theme-mode="dark"] .sprint-health-grid dt{color:#94a3b8}
html[data-theme-mode="dark"] .sprint-health-grid dd{color:#e5e7eb}
html[data-theme-mode="dark"] .advanced-task-list em{color:#94a3b8}
html[data-theme-mode="dark"] .task-brief article{background:#111827;border-color:#263145}
html[data-theme-mode="dark"] .task-brief small{color:#86efac}
html[data-theme-mode="dark"] .task-checklist span{color:#94a3b8}
html[data-theme-mode="dark"] .task-checklist .complete{background:#052e16}
html[data-theme-mode="dark"] .task-checklist .complete svg{color:#86efac}
html[data-theme-mode="dark"] .task-checklist .complete span{color:#86efac;text-decoration:line-through}

/* ── Break desk (attendance clock-in panel) ── */
html[data-theme-mode="dark"] .break-desk{background:#111827;border-color:#263145}
html[data-theme-mode="dark"] .break-desk strong{color:#e5e7eb}
html[data-theme-mode="dark"] .break-desk.is-paused{background:#422006;border-color:#78350f}
html[data-theme-mode="dark"] .break-desk.is-paused strong{color:#fcd34d}
html[data-theme-mode="dark"] .checkout-break-summary p{color:#94a3b8}

/* ── Settings ── */
html[data-theme-mode="dark"] .settings-command-grid article{background:#111827;border-color:#263145}
html[data-theme-mode="dark"] .settings-command-grid strong{color:#e5e7eb}
html[data-theme-mode="dark"] .settings-command-grid small{color:#86efac}
html[data-theme-mode="dark"] .settings-section-grid label{color:#94a3b8}
html[data-theme-mode="dark"] .settings-policy-highlight{background:#1e1b4b;border-color:#3730a3}
html[data-theme-mode="dark"] .settings-policy-highlight svg{background:#1e1b4b;color:#a5b4fc}

/* ── Company settings tabs & advanced layout ──────────────────────────────── */
.cs-tabs{display:flex;align-items:center;gap:3px;padding:4px;background:white;border:1px solid var(--line);border-radius:13px;margin-bottom:18px;overflow-x:auto;flex-wrap:nowrap;box-shadow:0 2px 8px rgba(20,31,57,.04)}
.cs-tabs::-webkit-scrollbar{height:3px}.cs-tabs::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:4px}
.cs-tab{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border:0;background:transparent;border-radius:9px;color:#637082;font-size:11px;font-weight:600;white-space:nowrap;cursor:pointer;transition:background .12s,color .12s}
.cs-tab svg{width:13px;height:13px}
.cs-tab:hover{background:#f3f2ff;color:var(--purple)}
.cs-tab.active{background:linear-gradient(135deg,var(--purple),#5a49e3);color:white;box-shadow:0 4px 12px rgba(109,93,252,.22)}
.cs-panel{background:white;border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:4px}
.cs-panel.hidden{display:none}
.cs-panel-head{display:flex;align-items:center;gap:12px;padding:18px 20px 16px;border-bottom:1px solid var(--line);background:linear-gradient(to right,#fafbff,#fff)}
.cs-panel-head>svg{width:20px;height:20px;color:var(--purple);flex-shrink:0}
.cs-panel-head>div{flex:1}
.cs-panel-head h2{font-size:14px;margin:0 0 2px;color:var(--ink)}
.cs-panel-head p{font-size:11px;color:var(--muted);margin:0}
.cs-info-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-bottom:1px solid var(--line)}
.cs-info-strip>div{display:flex;align-items:flex-start;gap:10px;padding:14px 18px;border-right:1px solid var(--line)}
.cs-info-strip>div:last-child{border-right:0}
.cs-info-strip svg{width:16px;height:16px;color:var(--purple);margin-top:1px;flex-shrink:0}
.cs-info-strip>div>div{display:flex;flex-direction:column;gap:2px}
.cs-info-strip strong{font-size:11px;color:var(--ink)}
.cs-info-strip small{font-size:10px;color:var(--muted)}
.cs-toggle-list{display:flex;flex-direction:column;padding:4px 0}
.cs-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px;border-bottom:1px solid var(--line)}
.cs-toggle-row:last-child{border-bottom:0}
.cs-toggle-row:hover{background:rgba(109,93,252,.025)}
.cs-toggle-info{display:flex;flex-direction:column;gap:3px;flex:1}
.cs-toggle-info strong{font-size:12px;font-weight:700;color:var(--ink)}
.cs-toggle-info span{font-size:11px;color:var(--muted);line-height:1.45}
.cs-toggle{display:inline-flex;align-items:center;flex-shrink:0;cursor:pointer}
.cs-toggle input[type="checkbox"]{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.cs-toggle-track{width:42px;height:24px;background:#d1d5db;border-radius:12px;position:relative;transition:background .2s;flex-shrink:0;cursor:pointer}
.cs-toggle input:checked+.cs-toggle-track{background:var(--purple)}
.cs-toggle-thumb{position:absolute;width:18px;height:18px;border-radius:50%;background:white;top:3px;left:3px;transition:transform .2s;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.cs-toggle input:checked+.cs-toggle-track .cs-toggle-thumb{transform:translateX(18px)}
.cs-badge-warn{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;background:#fff3dc;color:#c77a06;font-size:9px;font-weight:800;width:fit-content;margin-top:4px}
.field-hint{display:block;font-size:10px;color:var(--muted);margin-top:3px}
.settings-section-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;padding:18px 20px}
.settings-section-grid .wide{grid-column:1/-1}
.sticky-actions{position:sticky;bottom:0;background:rgba(245,247,251,.95);backdrop-filter:blur(8px);border-top:1px solid var(--line);padding:12px 0;margin-top:6px;z-index:10}

/* ── Permission matrix ─────────────────────────────────────────────────────── */
#tab-modules.cs-panel{overflow-x:auto}
.perm-matrix-wrap{overflow-x:auto;padding:0 0 4px;-webkit-overflow-scrolling:touch}
.perm-matrix{width:100%;border-collapse:collapse;min-width:560px}
.perm-matrix th,.perm-matrix td{padding:0;border-bottom:1px solid var(--line);text-align:center}
.perm-matrix thead th{background:#fafbff;border-bottom:2px solid var(--line);padding:10px 8px;position:sticky;top:0;z-index:2}
.perm-module-col{text-align:left!important;width:180px;padding-left:20px!important;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.perm-role-col{font-size:10px;min-width:80px}
.perm-role-pill{display:inline-flex;align-items:center;padding:3px 9px;border-radius:999px;font-size:9px;font-weight:800;white-space:nowrap}
.perm-role-admin{background:#edeaff;color:#6d5dfc}
.perm-role-hr{background:#fce7f3;color:#db2777}
.perm-role-project_manager{background:#e0f2fe;color:#0284c7}
.perm-role-finance{background:#dcfce7;color:#16a34a}
.perm-role-employee{background:#fff3dc;color:#c77a06}
.perm-role-client{background:#f1f5f9;color:#475569}
.perm-row{transition:background .08s}
.perm-row:hover{background:rgba(109,93,252,.025)}
.perm-row:last-child td{border-bottom:none}
.perm-module-cell{text-align:left!important;padding:10px 14px 10px 20px!important;display:flex;align-items:center;gap:8px}
.perm-module-cell svg{width:14px;height:14px;color:var(--purple);flex-shrink:0}
.perm-module-cell span{font-size:12px;font-weight:600;color:var(--ink)}
.perm-cell{padding:8px 4px}
.perm-toggle{display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.perm-toggle input[type="checkbox"]{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.perm-track{width:36px;height:20px;background:#d1d5db;border-radius:10px;position:relative;transition:background .18s;flex-shrink:0;cursor:pointer}
.perm-toggle input:checked+.perm-track{background:var(--purple)}
.perm-thumb{position:absolute;width:14px;height:14px;border-radius:50%;background:white;top:3px;left:3px;transition:transform .18s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.perm-toggle input:checked+.perm-track .perm-thumb{transform:translateX(16px)}
.perm-matrix-legend{display:flex;gap:20px;padding:10px 20px 14px;border-top:1px solid var(--line);background:#fafbff}
.perm-matrix-legend span{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--muted)}
.perm-matrix-legend svg{width:12px;height:12px;color:var(--purple);flex-shrink:0}

/* dark mode for new settings UI */
html[data-theme-mode="dark"] .cs-tabs{background:#111827;border-color:#263145}
html[data-theme-mode="dark"] .cs-tab{color:#94a3b8}
html[data-theme-mode="dark"] .cs-tab:hover{background:#1e293b;color:#a78bfa}
html[data-theme-mode="dark"] .cs-tab.active{background:linear-gradient(135deg,var(--purple),#5a49e3);color:white}
html[data-theme-mode="dark"] .cs-panel{background:#111827;border-color:#263145}
html[data-theme-mode="dark"] .cs-panel-head{background:linear-gradient(to right,#172033,#111827);border-color:#263145}
html[data-theme-mode="dark"] .cs-panel-head h2{color:#f1f5f9}
html[data-theme-mode="dark"] .cs-panel-head p{color:#94a3b8}
html[data-theme-mode="dark"] .cs-panel-head>svg{color:#a78bfa}
html[data-theme-mode="dark"] .cs-info-strip{border-color:#263145}
html[data-theme-mode="dark"] .cs-info-strip>div{border-color:#263145}
html[data-theme-mode="dark"] .cs-info-strip strong{color:#e5e7eb}
html[data-theme-mode="dark"] .cs-info-strip small{color:#94a3b8}
html[data-theme-mode="dark"] .cs-toggle-row{border-color:#1e293b}
html[data-theme-mode="dark"] .cs-toggle-row:hover{background:rgba(255,255,255,.03)}
html[data-theme-mode="dark"] .cs-toggle-info strong{color:#e5e7eb}
html[data-theme-mode="dark"] .cs-toggle-info span{color:#94a3b8}
html[data-theme-mode="dark"] .cs-toggle-track{background:#334155}
html[data-theme-mode="dark"] .cs-toggle input:checked+.cs-toggle-track{background:var(--purple)}
html[data-theme-mode="dark"] .sticky-actions{background:rgba(15,23,42,.95);border-color:#263145}
html[data-theme-mode="dark"] .settings-section-grid label{color:#94a3b8}
html[data-theme-mode="dark"] .field-hint{color:#64748b}
html[data-theme-mode="dark"] .perm-matrix thead th{background:#172033;border-color:#263145}
html[data-theme-mode="dark"] .perm-matrix th{border-color:#1e293b}
html[data-theme-mode="dark"] .perm-matrix td{border-color:#1e293b}
html[data-theme-mode="dark"] .perm-row:hover{background:rgba(255,255,255,.03)}
html[data-theme-mode="dark"] .perm-module-cell span{color:#e5e7eb}
html[data-theme-mode="dark"] .perm-track{background:#334155}
html[data-theme-mode="dark"] .perm-toggle input:checked+.perm-track{background:var(--purple)}
html[data-theme-mode="dark"] .perm-matrix-legend{background:#172033;border-color:#263145}
html[data-theme-mode="dark"] .perm-matrix-legend span{color:#64748b}
html[data-theme-mode="dark"] .perm-role-admin{background:#2d1f6e;color:#a78bfa}
html[data-theme-mode="dark"] .perm-role-hr{background:#500724;color:#f9a8d4}
html[data-theme-mode="dark"] .perm-role-project_manager{background:#0c4a6e;color:#bae6fd}
html[data-theme-mode="dark"] .perm-role-finance{background:#064e3b;color:#a7f3d0}
html[data-theme-mode="dark"] .perm-role-employee{background:#422006;color:#fbbf24}
html[data-theme-mode="dark"] .perm-role-client{background:#1e293b;color:#cbd5e1}

/* ════════════════════════════════════════════════════════════════════════════
   COMPREHENSIVE RESPONSIVE SYSTEM
   Fills the gaps in app.css: mid-range breakpoints, table scroll, typography,
   list-view grids, form sections, module-specific layouts.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Tables: horizontal scroll without template changes ── */
.panel:has(.data-table){overflow-x:auto}
.panel:has(.data-table) .data-table{min-width:540px}
@media(max-width:768px){
  .panel{border-radius:12px}
  .data-table th,.data-table td{padding:8px 10px;font-size:11px}
  /* Sticky first column so row identity stays visible while scrolling */
  .data-table td:first-child,.data-table th:first-child{position:sticky;left:0;background:var(--surface);z-index:2}
  html[data-theme-mode="dark"] .data-table td:first-child,
  html[data-theme-mode="dark"] .data-table th:first-child{background:#111827}
}

/* ── 2. Typography scaling ── */
@media(max-width:768px){
  .page-header h1{font-size:clamp(16px,5vw,22px)!important}
  .panel-header h2,.section-title{font-size:13px!important}
  .eyebrow{font-size:8px}
}
@media(max-width:480px){
  .page-header h1{font-size:18px!important}
  .page-header p{font-size:11px}
}

/* ── 3. Mid-range breakpoints (fills the 768px→1024px gap) ── */
@media(max-width:900px){
  .stat-grid{grid-template-columns:repeat(3,1fr)!important}
  .employee-grid:not(.list-view){grid-template-columns:repeat(2,1fr)!important}
  .dashboard-grid{display:block}
  .dashboard-grid>*{margin-bottom:20px}
  .attendance-metrics{grid-template-columns:repeat(3,1fr)!important}
  .profile-kpis{grid-template-columns:repeat(3,1fr)}
  .advanced-stat-grid{grid-template-columns:repeat(2,1fr)!important}
}
@media(max-width:640px){
  .stat-grid{grid-template-columns:repeat(2,1fr)!important}
  .employee-grid:not(.list-view){grid-template-columns:repeat(2,1fr)!important}
  .attendance-metrics{grid-template-columns:repeat(2,1fr)!important}
  .profile-kpis{grid-template-columns:repeat(2,1fr)}
  .metric-row{grid-template-columns:repeat(2,1fr)!important}
}
@media(max-width:480px){
  .stat-grid{grid-template-columns:1fr 1fr!important}
  .employee-grid:not(.list-view){grid-template-columns:1fr!important}
  .attendance-metrics{grid-template-columns:1fr 1fr!important}
  .profile-kpis{grid-template-columns:1fr 1fr}
  .metric-row{grid-template-columns:1fr 1fr!important}
  .content-area{padding:14px 10px 60px!important}
}

/* ── 4. List-view grid: collapse 5-col to 3-col on tablet, 2-col on phone ── */
@media(max-width:900px){
  .employee-grid.list-view .employee-card{grid-template-columns:40px 1fr 120px!important;gap:8px}
  .employee-grid.list-view .employee-card>*:nth-child(3),
  .employee-grid.list-view .employee-card>*:nth-child(4){display:none}
}
@media(max-width:640px){
  .employee-grid.list-view .employee-card{grid-template-columns:36px 1fr!important}
  .employee-grid.list-view .employee-card>*:nth-child(n+3){display:none}
}

/* ── 5. Filter bar improvements ── */
@media(max-width:768px){
  .filter-bar{gap:6px;padding:10px}
  .filter-bar select,.filter-bar input[type=date]{flex:1 1 calc(50% - 3px);min-width:0}
  .filter-bar .btn{flex:1}
}
@media(max-width:480px){
  .filter-bar select,.filter-bar input[type=date]{flex:1 1 100%}
}

/* ── 6. Page header action buttons ── */
@media(max-width:768px){
  .header-actions{flex-wrap:wrap;gap:6px}
  .header-actions .btn{font-size:11px;padding:7px 10px}
}
@media(max-width:480px){
  .header-actions{width:100%}
  .header-actions .btn{flex:1;justify-content:center}
}

/* ── 7. Panel / card padding ── */
@media(max-width:768px){
  .panel-header{padding:14px 16px}
  .panel-body,.panel-content{padding:12px 16px}
  .panel-footer{padding:10px 16px}
}
@media(max-width:480px){
  .panel-header{padding:12px 14px}
  .panel-body,.panel-content{padding:10px 14px}
}

/* ── 8. App form: single column on mobile ── */
@media(max-width:640px){
  .app-form{grid-template-columns:1fr!important}
  .app-form .field-group{grid-column:1/-1}
  .form-row{flex-direction:column}
  .form-row>*{width:100%!important}
}

/* ── 9. Module cards (projects, tasks, CRM) ── */
@media(max-width:900px){
  .project-grid,.task-grid,.crm-grid{grid-template-columns:repeat(2,1fr)!important}
}
@media(max-width:640px){
  .project-grid,.task-grid,.crm-grid{grid-template-columns:1fr!important}
  .kanban-board{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
}
@media(max-width:480px){
  .kanban-board{grid-template-columns:1fr}
  .kanban-column{width:100%!important;min-width:0!important}
}

/* ── 10. Finance / invoice layout ── */
@media(max-width:768px){
  .invoice-layout,.finance-layout{flex-direction:column}
  .invoice-sidebar,.finance-sidebar{width:100%!important;max-width:100%}
  .invoice-meta-grid{grid-template-columns:1fr 1fr!important}
}
@media(max-width:480px){
  .invoice-meta-grid{grid-template-columns:1fr!important}
  .invoice-amount-display{font-size:24px!important}
}

/* ── 11. Audit log layout ── */
@media(max-width:900px){
  .audit-log-layout{flex-direction:column}
  .audit-log-layout aside{width:100%}
  .audit-trend-bars.tall{height:120px}
}

/* ── 12. Calendar ── */
@media(max-width:768px){
  .cal-grid{grid-template-columns:1fr!important}
  .cal-upcoming{display:none}
  .cal-header{flex-wrap:wrap;gap:8px}
  .cal-header .cal-nav{order:2;width:100%;justify-content:space-between}
}

/* ── 13. Company settings tabs ── */
@media(max-width:640px){
  .cs-tabs{gap:2px;padding:3px}
  .cs-tab{padding:6px 9px;font-size:10px}
  .cs-panel-head h2{font-size:13px}
}

/* ── 14. Topbar: hide non-essential buttons below 480px ── */
@media(max-width:480px){
  #fullscreenBtn{display:none!important}
  .topbar-divider{display:none}
}

/* ── 15. Modal / drawer: full width on phones ── */
@media(max-width:540px){
  .modal-card{width:100%!important;max-width:100%!important;border-radius:20px 20px 0 0;position:fixed;bottom:0;top:auto!important;transform:none!important;margin:0!important}
  .modal-overlay{align-items:flex-end}
}

/* ── Chat & messaging ── */
html[data-theme-mode="dark"] .chat-member-add label{color:#94a3b8}
html[data-theme-mode="dark"] .chat-member-add select{background:#172033;border-color:#263145;color:#e5e7eb}

/* ════════════════════════════════════════════════════════════════════════
   PERFORMANCE & GOALS DASHBOARD
   ════════════════════════════════════════════════════════════════════════ */
.goal-tabs { display: flex; align-items: center; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.goal-tab { padding: 8px 16px; font-size: 13px; font-weight: 700; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; text-decoration: none; transition: all .15s; }
.goal-tab:hover { color: var(--purple); }
.goal-tab.active { color: var(--purple); border-bottom-color: var(--purple); }

.goal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.goal-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); text-decoration: none; color: var(--ink); transition: all .15s; }
.goal-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--purple); }

.goal-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.goal-owner { display: flex; align-items: center; gap: 8px; min-width: 0; }
.goal-owner .avatar { flex-shrink: 0; }
.goal-owner span { display: flex; flex-direction: column; min-width: 0; }
.goal-owner strong { font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.goal-owner small { font-size: 10px; color: var(--muted); }

.goal-title { font-size: 14px; font-weight: 700; margin: 0; line-height: 1.4; }

.goal-progress { display: flex; align-items: center; gap: 8px; }
.progress-bar { flex: 1; height: 6px; background: var(--line); border-radius: 999px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--purple); border-radius: 999px; transition: width .3s; }
.goal-card.status-completed .progress-fill { background: #22c55e; }
.progress-label { font-size: 11px; font-weight: 700; color: var(--muted); }

.goal-footer { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--muted); margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line); }
.goal-footer span { display: flex; align-items: center; gap: 4px; }
.goal-footer svg { width: 12px; height: 12px; }
.overdue-chip { color: #dc2626; font-weight: 700; }

html[data-theme-mode="dark"] .goal-tabs { border-color: #263145; }
html[data-theme-mode="dark"] .goal-tab { color: #94a3b8; }
html[data-theme-mode="dark"] .goal-tab:hover { color: #a78bfa; }
html[data-theme-mode="dark"] .goal-tab.active { color: #a78bfa; border-color: #a78bfa; }
html[data-theme-mode="dark"] .goal-card { background: #111827; border-color: #263145; }
html[data-theme-mode="dark"] .goal-card:hover { border-color: #6d5dfc; }
html[data-theme-mode="dark"] .goal-owner strong { color: #e5e7eb; }
html[data-theme-mode="dark"] .goal-owner small { color: #94a3b8; }
html[data-theme-mode="dark"] .goal-title { color: #e5e7eb; }
html[data-theme-mode="dark"] .progress-bar { background: #1e293b; }
html[data-theme-mode="dark"] .progress-label { color: #94a3b8; }
html[data-theme-mode="dark"] .goal-footer { color: #94a3b8; border-color: #1e293b; }
html[data-theme-mode="dark"] .overdue-chip { color: #fca5a5; }

/* ── People / team pages ── */
html[data-theme-mode="dark"] .people-filters select,html[data-theme-mode="dark"] .filter-input{background:#172033;border-color:#263145;color:#e5e7eb}
html[data-theme-mode="dark"] .team-pulse-card{background:#111827;border-color:#263145}
html[data-theme-mode="dark"] .team-pulse-card strong{color:#e5e7eb}
html[data-theme-mode="dark"] .team-pulse-card small{color:#94a3b8}
html[data-theme-mode="dark"] .team-icon,html[data-theme-mode="dark"] .department-icon{background:#1e1b4b;color:#a5b4fc}
html[data-theme-mode="dark"] .role-chip{background:#1e1b4b;color:#a5b4fc}
html[data-theme-mode="dark"] .presence-pill{background:#1e293b;color:#94a3b8}
html[data-theme-mode="dark"] .presence-working{background:#052e16;color:#86efac}
html[data-theme-mode="dark"] .presence-completed{background:#172554;color:#93c5fd}
html[data-theme-mode="dark"] .presence-missing_checkout{background:#422006;color:#fcd34d}
html[data-theme-mode="dark"] .org-people a{background:#111827;border-color:#263145}
html[data-theme-mode="dark"] .org-people strong{color:#e5e7eb}
html[data-theme-mode="dark"] .org-people small{color:#94a3b8}

/* ── Credentials ── */
html[data-theme-mode="dark"] .credential-grid>div{background:#111827;border-color:#263145}
html[data-theme-mode="dark"] .credential-grid strong{color:#e5e7eb}
html[data-theme-mode="dark"] .credential-grid small{color:#94a3b8}
html[data-theme-mode="dark"] .security-callout{background:#052e16;color:#86efac;border-color:#14532d}

/* ── Rich text / prose areas (app.css hardcoded dark text) ── */
html[data-theme-mode="dark"] .prose-block{color:#cbd5e1}
html[data-theme-mode="dark"] .wiki-body{color:#cbd5e1;background:#111827}
html[data-theme-mode="dark"] .wiki-body h1,html[data-theme-mode="dark"] .wiki-body h2,html[data-theme-mode="dark"] .wiki-body h3,html[data-theme-mode="dark"] .wiki-body h4{color:#e5e7eb}
html[data-theme-mode="dark"] .wiki-body a{color:#a5b4fc}
html[data-theme-mode="dark"] .wiki-body code,html[data-theme-mode="dark"] .wiki-body pre{background:#172033;color:#e2e8f0;border-color:#263145}
html[data-theme-mode="dark"] .wiki-body blockquote{border-left-color:#3730a3;color:#94a3b8}
html[data-theme-mode="dark"] .thread-list p{color:#cbd5e1}
html[data-theme-mode="dark"] .thread-list small{color:#94a3b8}
html[data-theme-mode="dark"] .thread-list a{color:#a5b4fc}

/* ── Auth form labels ── */
html[data-theme-mode="dark"] .auth-form label{color:#94a3b8}
html[data-theme-mode="dark"] .detail-grid dd{color:#e5e7eb}

/* ── CRM / Leads dark mode ── */
html[data-theme-mode="dark"] .crm-stage{border-color:var(--sc,#334155)}
html[data-theme-mode="dark"] .crm-stage-head,html[data-theme-mode="dark"] .crm-stage-meta{background:#1e293b;border-color:#263145}
html[data-theme-mode="dark"] .crm-stage-cards{background:#0f172a}
html[data-theme-mode="dark"] .crm-mini-card{background:#111827;border-color:#263145}
html[data-theme-mode="dark"] .crm-mini-card:hover{box-shadow:0 3px 10px rgba(0,0,0,.3)}
html[data-theme-mode="dark"] .crm-mini-score{background:conic-gradient(var(--sc,#6d5dfc) calc(var(--score,50)*1%),#1e293b 0)}
html[data-theme-mode="dark"] .crm-stage-empty{background:#1e293b;color:#475569}
html[data-theme-mode="dark"] .crm-intel-item{background:#111827;border-color:#263145}
html[data-theme-mode="dark"] .crm-intel-item.is-overdue{background:rgba(239,68,68,.05);border-color:rgba(239,68,68,.2)}
html[data-theme-mode="dark"] .crm-score-badge{background:conic-gradient(var(--purple) calc(var(--score,50)*1%),#1e293b 0)}
html[data-theme-mode="dark"] .crm-breakdown-item{background:#111827;border-color:#263145}
html[data-theme-mode="dark"] .lead-card{background:#111827;border-color:#263145}
html[data-theme-mode="dark"] .lead-card:hover{box-shadow:0 10px 32px rgba(0,0,0,.4)}
html[data-theme-mode="dark"] .lead-card-avatar{background:#1e293b}
html[data-theme-mode="dark"] .lead-card-score{background:conic-gradient(var(--sc,#6d5dfc) calc(var(--score,0)*1%),#1e293b 0)}
html[data-theme-mode="dark"] .lead-chip{background:#1e293b;color:#94a3b8}
html[data-theme-mode="dark"] .lead-chip.stage-chip{background:rgba(109,93,252,.15);border-color:rgba(109,93,252,.2)}
html[data-theme-mode="dark"] .lead-chip.value-chip{background:rgba(21,128,61,.15);color:#4ade80}
html[data-theme-mode="dark"] .lead-card-foot{background:rgba(0,0,0,.2)}
html[data-theme-mode="dark"] .lead-hero-main{background:#111827;border-color:#263145}
html[data-theme-mode="dark"] .lead-stage-step.current{background:#1e293b}

/* ── Invoice / finance detail ── */
html[data-theme-mode="dark"] .invoice-command-card{background:#111827;border-color:#263145}
html[data-theme-mode="dark"] .invoice-command-card strong{color:#e5e7eb}
html[data-theme-mode="dark"] .invoice-command-card small{color:#94a3b8}
html[data-theme-mode="dark"] .invoice-aging-list b{color:#94a3b8}
html[data-theme-mode="dark"] .invoice-aging-list small{color:#94a3b8}
html[data-theme-mode="dark"] .invoice-client-exposure b{color:#94a3b8}
html[data-theme-mode="dark"] .invoice-side-panel select{background:#172033;border-color:#263145;color:#e5e7eb}
html[data-theme-mode="dark"] .invoice-status-mix span{background:#172033;border-color:#263145;color:#94a3b8}

/* ── Payslip / payroll ── */
html[data-theme-mode="dark"] .payslip-kpis span{background:#111827;border-color:#263145;color:#94a3b8}
html[data-theme-mode="dark"] .payslip-kpis strong{color:#e5e7eb}
html[data-theme-mode="dark"] .payslip-kpis small{color:#94a3b8}
html[data-theme-mode="dark"] .payslip-mini-list a{background:#111827;border-color:#263145}
html[data-theme-mode="dark"] .payslip-mini-list strong{color:#e5e7eb}
html[data-theme-mode="dark"] .payslip-mini-list small{color:#94a3b8}

/* ── Resource / report grids ── */
html[data-theme-mode="dark"] .resource-link-grid>a{background:#111827;border-color:#263145}
html[data-theme-mode="dark"] .resource-link-grid strong{color:#e5e7eb}
html[data-theme-mode="dark"] .resource-link-grid small{color:#94a3b8}
html[data-theme-mode="dark"] .report-grid article{background:#111827;border-color:#263145}
html[data-theme-mode="dark"] .report-grid strong{color:#e5e7eb}
html[data-theme-mode="dark"] .report-grid small{color:#94a3b8}
html[data-theme-mode="dark"] .report-grid footer a{color:#94a3b8}

/* ── Inline select elements in forms ── */
html[data-theme-mode="dark"] .inline-form select,html[data-theme-mode="dark"] .timer-start-form select,html[data-theme-mode="dark"] .timer-start-form input{background:#172033;border-color:#263145;color:#e5e7eb}

/* ── Gantt / project health ── */
html[data-theme-mode="dark"] .health-yellow{color:#fcd34d}
html[data-theme-mode="dark"] .gantt-bar{background:#1e293b;border-color:#263145}
html[data-theme-mode="dark"] .gantt-bar.health-yellow{background:#422006}

/* ── Quick-action buttons ── */
html[data-theme-mode="dark"] .quick-action-list a,html[data-theme-mode="dark"] .quick-action-list button{background:#111827;border-color:#263145;color:#e5e7eb}
html[data-theme-mode="dark"] .quick-action-list a:hover,html[data-theme-mode="dark"] .quick-action-list button:hover{background:#172033;border-color:#3730a3}

/* ── Notice board ── */
html[data-theme-mode="dark"] .notice-hero-card{background:#1e1b4b;border-color:#3730a3}
html[data-theme-mode="dark"] .notice-feature-item{background:#111827;border-color:#263145}
html[data-theme-mode="dark"] .notice-feature-item p,html[data-theme-mode="dark"] .notice-feature-item small{color:#94a3b8}
html[data-theme-mode="dark"] .notice-timeline a{background:#111827;border-color:#263145}
html[data-theme-mode="dark"] .notice-timeline b{color:#e5e7eb}

/* ── Brand logo container (white bg for logos) ── */
html[data-theme-mode="dark"] .brand-logo-mark{background:#1e293b}
html[data-theme-mode="dark"] .company-logo-preview img{background:#1e293b}

/* ── Global body & root (body + app-body only, no tag-level overrides) ── */
html[data-theme-mode="dark"] body,html[data-theme-mode="dark"] .app-body{background:#0f172a;color:#e5e7eb}

/* ═══════════════════════════════════════════════════════════════════════
   FULLSCREEN — native browser fullscreen (same as F11).
   No layout changes; the browser hides chrome. Button icon syncs via JS.
   ═══════════════════════════════════════════════════════════════════════ */
:fullscreen .topbar{backdrop-filter:none}
:fullscreen .sidebar{box-shadow:none}

/* ── Login page refresh ─────────────────────────────────────────────── */
.auth-layout{min-height:100vh;display:grid!important;grid-template-columns:1fr 1fr;background:#f1f5f9}
.auth-visual{background:linear-gradient(145deg,#0f172a 0%,#1e1b4b 55%,#111827 100%);color:#fff;position:relative;overflow:hidden;min-height:100vh}
.auth-visual:before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.045) 1px,transparent 0);background-size:26px 26px}
.auth-glow-one{width:520px;height:520px;background:rgba(109,93,252,.28);top:-220px;right:-160px}
.auth-glow-two{width:400px;height:400px;background:rgba(59,130,246,.16);bottom:-200px;left:-130px}
.auth-visual-content{position:relative;z-index:1;min-height:100vh;padding:48px 52px;display:flex;flex-direction:column;justify-content:space-between}
.auth-brand{display:flex;align-items:center;gap:12px}
.auth-brand .brand-mark{width:36px;height:36px;border-radius:10px;background:rgba(109,93,252,.75);border:1px solid rgba(109,93,252,.5);display:inline-flex;align-items:center;justify-content:center;font-size:17px;font-weight:900;color:#fff;flex-shrink:0}
.auth-brand strong{font-size:15px;font-weight:700;letter-spacing:-.02em}
.auth-story{max-width:460px;margin:auto 0}
.auth-story .eyebrow.light{font-size:10px;font-weight:800;letter-spacing:.12em;color:rgba(167,139,250,.85)}
.auth-story h1{font-size:44px;line-height:1.08;letter-spacing:-.055em;margin:16px 0 14px;font-weight:800;color:#fff}
.auth-story h1 em{font-style:normal;background:linear-gradient(135deg,#a78bfa,#60a5fa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.auth-story>p{font-size:13.5px;line-height:1.7;color:#94a3b8;margin:0 0 28px}
.auth-features{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:13px}
.auth-features li{display:flex;align-items:center;gap:12px;font-size:13px;color:#cbd5e1;font-weight:500}
.auth-features li i{width:32px;height:32px;border-radius:9px;background:rgba(109,93,252,.2);border:1px solid rgba(109,93,252,.3);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:#a78bfa}
.auth-features li i svg{width:14px;height:14px}
.auth-tagline{font-size:10px;color:#475569;font-weight:500}

.auth-form-side{display:grid;place-items:center;padding:48px 40px;background:#f1f5f9}
.auth-form-wrap{width:min(400px,100%);background:#fff;border:1px solid #e2e8f0;padding:36px;border-radius:20px;box-shadow:0 4px 6px -1px rgba(0,0,0,.05),0 20px 60px rgba(0,0,0,.07)}
.auth-form-logo{margin-bottom:20px}
.auth-form-logo .brand-mark{width:44px;height:44px;border-radius:13px;background:linear-gradient(135deg,#6d5dfc,#8b7cff);display:inline-flex;align-items:center;justify-content:center;font-size:21px;font-weight:900;color:#fff;box-shadow:0 8px 20px rgba(109,93,252,.32)}
.auth-form-wrap .eyebrow{font-size:10px;font-weight:800;letter-spacing:.1em;color:#6d5dfc}
.auth-form-wrap h2{font-size:24px;font-weight:800;letter-spacing:-.04em;color:#0f172a;margin:6px 0 4px}
.auth-form-wrap>p{font-size:13px;color:#64748b;margin:0 0 22px}
.auth-form{display:flex;flex-direction:column;gap:16px}
.auth-field-group{display:flex;flex-direction:column;gap:6px}
.auth-field-group>label{font-size:12px!important;font-weight:700!important;color:#374151!important;flex-direction:row!important;gap:0!important}
.auth-form .auth-field-group input{height:46px;border:1.5px solid #e2e8f0;border-radius:10px;padding:0 14px;font-size:13px;background:#f8fafc;color:#0f172a;transition:all .15s;width:100%;box-sizing:border-box}
.auth-form .auth-field-group input:focus{border-color:#6d5dfc!important;background:#fff!important;box-shadow:0 0 0 3px rgba(109,93,252,.1)!important}
.auth-submit-btn{height:46px;border-radius:10px;font-size:14px;font-weight:700;background:linear-gradient(135deg,#6d5dfc,#8b7cff);border:none;box-shadow:0 4px 14px rgba(109,93,252,.32);transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px;color:#fff;cursor:pointer}
.auth-submit-btn:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(109,93,252,.44)}
.auth-submit-btn svg{width:16px;height:16px}
.demo-note{margin-top:18px;display:flex;align-items:center;gap:9px;font-size:11px;color:#94a3b8;padding:11px 14px;background:#f8fafc;border-radius:10px;border:1px solid #e2e8f0}
.demo-note svg{width:14px;height:14px;color:#22c55e;flex-shrink:0}
.demo-note strong{color:#374151}
@media(max-width:900px){.auth-layout{grid-template-columns:1fr!important}.auth-visual{display:none!important}.auth-form-side{padding:32px 20px;min-height:100vh}}

/* ══════════════════════════════════════════════════════════════════════════
   Card-form layout (pf-*) — universal resource form redesign
   ══════════════════════════════════════════════════════════════════════════ */
.pf-body{max-width:900px;display:flex;flex-direction:column;gap:14px}
.pf-card{background:var(--surface,#fff);border:1px solid var(--line,#e7eaf1);border-radius:16px;overflow:hidden;box-shadow:0 5px 18px rgba(20,31,57,.035)}
.pf-card-head{display:flex;align-items:center;gap:11px;padding:14px 20px;background:#f8f9fc;border-bottom:1px solid var(--line,#e7eaf1)}
.pf-card-icon{width:32px;height:32px;border-radius:9px;background:var(--purple,#6d5dfc);display:grid;place-items:center;flex-shrink:0}
.pf-card-icon svg{width:14px;height:14px;color:#fff}
.pf-card-title{font-size:12px;font-weight:800;color:var(--ink,#172033);margin:0 0 1px}
.pf-card-desc{font-size:9px;color:var(--muted,#718096);margin:0}
.pf-body-pad{padding:18px 20px;display:flex;flex-direction:column;gap:14px}
.pf-row{display:grid;gap:14px}
.pf-row-2{grid-template-columns:1fr 1fr}
.pf-row-4{grid-template-columns:repeat(4,1fr)}
.pf-field{display:flex;flex-direction:column;gap:6px}
.pf-row .pf-field:has(textarea),.pf-row .pf-field:has(input[type=file]),.pf-row .pf-field:has(select[multiple]),.pf-row .pf-field:has(.tm-picker){grid-column:1/-1}
.pf-row .pf-field:has(input[type=checkbox]){grid-column:1/-1;flex-direction:row;align-items:center;gap:8px}
.pf-lbl{font-size:9px;font-weight:700;color:#566277;line-height:1}
.pf-lbl sup{color:#ef4444}
.pf-field input:not([type=checkbox]),.pf-field select,.pf-field textarea{width:100%;border:1.5px solid #dfe3ea;border-radius:9px;padding:10px 12px;outline:0;background:#fafbfc;color:var(--ink,#172033);font-size:12px;font-family:inherit;transition:border-color .15s,box-shadow .15s}
.pf-field select:not([multiple]){height:40px;padding:0 12px;appearance:auto}
.pf-field select[multiple]{display:none}
.pf-field input[type=checkbox]{width:16px;height:16px;flex-shrink:0;accent-color:var(--purple,#6d5dfc);margin:0}
.pf-field input:not([type=checkbox]):focus,.pf-field select:focus,.pf-field textarea:focus{border-color:var(--purple,#6d5dfc);box-shadow:0 0 0 3px rgba(109,93,252,.12);background:#fff;outline:none}
.pf-field textarea{min-height:110px;resize:vertical}
.pf-field>small{font-size:8px;color:var(--muted,#718096)}
.pf-actions{display:flex;justify-content:flex-end;align-items:center;gap:9px;padding:16px 20px;background:#f8f9fc;border:1px solid var(--line,#e7eaf1);border-radius:16px}
/* icon accent colours */
.pf-icon-blue{background:#2563eb}
.pf-icon-amber{background:#d97706}
.pf-icon-slate{background:#475569}
.pf-icon-teal{background:#0891b2}
.pf-icon-green{background:#16a34a}
.pf-icon-rose{background:#e11d48}
.pf-icon-indigo{background:#4f46e5}
.pf-icon-sky{background:#0ea5e9}
/* ── M2M chip picker (auto-enhances every select[multiple]) ── */
.tm-picker{border:1.5px solid #dfe3ea;border-radius:9px;overflow:hidden;background:#fafbfc;transition:border-color .15s,box-shadow .15s}
.tm-picker:focus-within{border-color:var(--purple,#6d5dfc);box-shadow:0 0 0 3px rgba(109,93,252,.12)}
.tm-search-bar{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#fff;border-bottom:1px solid #f0f1f5}
.tm-search-bar svg{width:13px;color:#8d98aa;flex-shrink:0}
.tm-search-bar input{border:0;outline:0;background:transparent;font-size:11px;width:100%;color:var(--ink,#172033);font-family:inherit}
.tm-search-bar input::placeholder{color:#a0aab8}
.tm-grid{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px;min-height:74px;max-height:190px;overflow-y:auto;align-content:flex-start}
.tm-empty{font-size:10px;color:#a0aab8;width:100%;text-align:center;padding:18px 0}
.tm-chip{display:flex;align-items:center;gap:7px;padding:5px 10px 5px 5px;border:1.5px solid #e2e8f0;border-radius:20px;cursor:pointer;background:#fff;transition:.15s;font-size:11px;color:#526076;user-select:none}
.tm-chip:hover{border-color:#a99ffe;background:#f8f7ff;color:var(--purple,#6d5dfc)}
.tm-chip.selected{background:#edeaff;border-color:var(--purple,#6d5dfc);color:var(--purple,#6d5dfc);font-weight:600}
.tm-chip-av{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#94a3b8,#64748b);color:#fff;display:grid;place-items:center;font-size:8px;font-weight:800;flex-shrink:0;letter-spacing:-.02em}
.tm-chip.selected .tm-chip-av{background:linear-gradient(135deg,var(--purple,#6d5dfc),#5a49e3)}
.tm-chip-check{opacity:0;transition:opacity .1s;display:flex;align-items:center}
.tm-chip.selected .tm-chip-check{opacity:1}
.tm-chip-check svg{width:11px;height:11px;color:var(--purple,#6d5dfc)}
.tm-footer{padding:7px 12px;border-top:1px solid #f0f1f5;background:#fff;font-size:9px;color:var(--muted,#718096);display:flex;align-items:center;gap:4px}
.tm-footer-count{font-weight:700;color:var(--purple,#6d5dfc)}
/* responsive */
@media(max-width:768px){.pf-row-2,.pf-row-4{grid-template-columns:1fr}}
/* dark mode */
html[data-theme-mode="dark"] .pf-card{background:#111827;border-color:#263145}
html[data-theme-mode="dark"] .pf-card-head{background:#172033;border-color:#263145}
html[data-theme-mode="dark"] .pf-body-pad{background:#111827}
html[data-theme-mode="dark"] .pf-field input:not([type=checkbox]),html[data-theme-mode="dark"] .pf-field select,html[data-theme-mode="dark"] .pf-field textarea{background:#172033;border-color:#263145;color:#e5e7eb}
html[data-theme-mode="dark"] .pf-field input:not([type=checkbox]):focus,html[data-theme-mode="dark"] .pf-field select:focus,html[data-theme-mode="dark"] .pf-field textarea:focus{background:#1e293b;border-color:#615fff}
html[data-theme-mode="dark"] .pf-actions{background:#172033;border-color:#263145}
html[data-theme-mode="dark"] .tm-picker{background:#172033;border-color:#263145}
html[data-theme-mode="dark"] .tm-search-bar,html[data-theme-mode="dark"] .tm-footer{background:#1e293b;border-color:#263145}
html[data-theme-mode="dark"] .tm-search-bar input{color:#e5e7eb}
html[data-theme-mode="dark"] .tm-chip{background:#1e293b;border-color:#2d3f55;color:#94a3b8}
html[data-theme-mode="dark"] .tm-chip:hover{background:#252f42;border-color:#a99ffe;color:#c4b8ff}
html[data-theme-mode="dark"] .tm-chip.selected{background:#1e1b3b;border-color:#7c6cfc;color:#a99ffe}
html[data-theme-mode="dark"] .tm-chip.selected .tm-chip-av{background:linear-gradient(135deg,#7c6cfc,#5a49e3)}
html[data-theme-mode="dark"] .tm-footer{background:#1e293b;border-color:#263145;color:#64748b}
html[data-theme-mode="dark"] .tm-empty{color:#4b5563}

/* ── Task review-gate banner ─────────────────────────────────────────────── */
.task-review-banner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px;margin-bottom:18px;background:linear-gradient(95deg,#fffbeb,#fff7ed);border:1.5px solid #fcd34d;border-radius:14px;flex-wrap:wrap}
.task-review-banner-body{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.task-review-banner-icon{width:36px;height:36px;border-radius:10px;background:#fef3c7;color:#d97706;display:grid;place-items:center;flex-shrink:0}
.task-review-banner-icon svg{width:17px}
.task-review-banner-body>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.task-review-banner-body strong{font-size:13px;color:#92400e}
.task-review-banner-body span{font-size:11px;color:#b45309}
.task-review-banner-actions{display:flex;gap:8px;flex-shrink:0}
html[data-theme-mode="dark"] .task-review-banner{background:linear-gradient(95deg,#1c1506,#1f1208);border-color:#854d0e}
html[data-theme-mode="dark"] .task-review-banner-icon{background:#292006;color:#fbbf24}
html[data-theme-mode="dark"] .task-review-banner-body strong{color:#fcd34d}
html[data-theme-mode="dark"] .task-review-banner-body span{color:#d97706}

/* ═══════════════════════════════════════════════════════════════════════════
   TASK BOARD  —  moved out of this file.
   The board was rebuilt (v3); its styles now live in static/css/taskboard.css,
   loaded by templates/workplace/tasks.html. The old .tb-* block that sat here
   was removed because every one of its selectors was dead once the template
   was rewritten.
═══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════
   REVIEW CENTER  (rc-*)
   ══════════════════════════════════════════════════════════ */

/* Stats strip */
.rc-stats{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.rc-stat{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 16px;flex:1 1 100px;min-width:100px}
.rc-stat svg{width:20px;height:20px;flex-shrink:0;border-radius:8px;padding:4px;box-sizing:content-box}
.rc-stat strong{display:block;font-size:20px;font-weight:700;line-height:1.1;color:var(--ink)}
.rc-stat span{font-size:11px;color:var(--muted);white-space:nowrap}
.rc-stat-green svg{background:#f0fdf4;color:#16a34a}
.rc-stat-red svg{background:#fff0f0;color:#dc2626}
.rc-stat-amber svg{background:#fffbeb;color:#d97706}
.rc-stat-blue svg{background:#eff6ff;color:#2563eb}
.rc-stat-orange svg{background:#fff7ed;color:#ea580c}
.rc-stat-indigo svg{background:#eef2ff;color:#4f46e5}

/* Filters */
.rc-filters{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:20px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 16px}
.rc-filter-group{display:flex;align-items:center;gap:8px}
.rc-filter-group label{font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap}
.rc-filter-tabs{display:flex;gap:4px}
.rc-tab{padding:5px 12px;border-radius:7px;font-size:12px;font-weight:600;color:var(--muted);text-decoration:none;border:1px solid transparent;transition:all .15s}
.rc-tab:hover{background:var(--line);color:var(--ink)}
.rc-tab.active{background:var(--purple);color:#fff;border-color:var(--purple)}
.rc-filters select{font-size:12px;padding:5px 10px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--ink);height:32px}

/* Layout */
.rc-layout{display:grid;grid-template-columns:1fr 300px;gap:20px;align-items:start}
@media(max-width:1000px){.rc-layout{grid-template-columns:1fr}}

/* Feed column */
.rc-feed-col{display:flex;flex-direction:column;gap:0}
.rc-feed-header{display:flex;align-items:center;justify-content:space-between;padding:0 0 12px;border-bottom:1px solid var(--line);margin-bottom:4px}
.rc-feed-header h2{font-size:14px;font-weight:700;display:flex;align-items:center;gap:6px;color:var(--ink);margin:0}
.rc-feed-header h2 svg{width:15px;height:15px;color:var(--purple)}
.rc-feed-count{font-size:12px;color:var(--muted);background:var(--line);border-radius:20px;padding:2px 10px}

.rc-feed{display:flex;flex-direction:column;gap:0}
.rc-feed-item{display:grid;grid-template-columns:36px 1fr auto;gap:10px;align-items:start;padding:12px 0;border-bottom:1px solid var(--line)}
.rc-feed-item:last-child{border-bottom:none}

.rc-fi-icon{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex-shrink:0}
.rc-fi-icon svg{width:16px;height:16px}
.rc-fi-green .rc-fi-icon{background:#f0fdf4;color:#16a34a}
.rc-fi-red .rc-fi-icon{background:#fff0f0;color:#dc2626}
.rc-fi-purple .rc-fi-icon{background:#f5f3ff;color:#7c3aed}
.rc-fi-blue .rc-fi-icon{background:#eff6ff;color:#2563eb}
.rc-fi-amber .rc-fi-icon{background:#fffbeb;color:#d97706}
.rc-fi-indigo .rc-fi-icon{background:#eef2ff;color:#4f46e5}
.rc-fi-slate .rc-fi-icon{background:#f8fafc;color:#64748b}
.rc-fi-orange .rc-fi-icon{background:#fff7ed;color:#ea580c}

.rc-fi-body{min-width:0}
.rc-fi-top{display:flex;align-items:center;gap:6px;margin-bottom:3px;flex-wrap:wrap}
.rc-fi-who{font-size:12px;font-weight:700;color:var(--ink)}
.rc-fi-type{font-size:10px;font-weight:600;padding:2px 7px;border-radius:20px;text-transform:uppercase;letter-spacing:.4px}
.rc-fi-time{font-size:11px;color:var(--muted);margin-left:auto}
.rc-fi-title{font-size:13px;color:var(--ink);margin:0 0 2px;font-weight:500;line-height:1.4}
.rc-fi-detail{font-size:12px;color:var(--muted);margin:0 0 2px}
.rc-fi-sub{font-size:11px;color:var(--muted);margin:0;font-style:italic}
.rc-fi-link{font-size:11px;color:var(--purple);display:inline-flex;align-items:center;gap:3px;margin-top:4px;text-decoration:none}
.rc-fi-link:hover{text-decoration:underline}
.rc-fi-link svg{width:11px;height:11px}

.rc-fi-date{font-size:11px;color:var(--muted);white-space:nowrap;padding-top:2px}

/* Badge tones */
.rc-badge-green{background:#f0fdf4;color:#15803d}
.rc-badge-red{background:#fff0f0;color:#dc2626}
.rc-badge-purple{background:#f5f3ff;color:#7c3aed}
.rc-badge-blue{background:#eff6ff;color:#2563eb}
.rc-badge-amber{background:#fffbeb;color:#d97706}
.rc-badge-indigo{background:#eef2ff;color:#4f46e5}
.rc-badge-slate{background:#f8fafc;color:#64748b}
.rc-badge-orange{background:#fff7ed;color:#ea580c}
.rc-badge-checkout{background:#f8fafc;color:#475569}
.rc-badge-attendance{background:#f0fdf4;color:#15803d}
.rc-badge-task{background:#f5f3ff;color:#7c3aed}
.rc-badge-leave{background:#fffbeb;color:#d97706}
.rc-badge-time{background:#eef2ff;color:#4f46e5}

.rc-empty{display:flex;flex-direction:column;align-items:center;gap:12px;padding:48px 0;color:var(--muted)}
.rc-empty svg{width:36px;height:36px;opacity:.4}
.rc-empty p{font-size:13px;margin:0}

/* People sidebar */
.rc-people-col{display:flex;flex-direction:column;gap:0;position:sticky;top:76px}
.rc-people-header{display:flex;align-items:center;justify-content:space-between;padding:0 0 12px;border-bottom:1px solid var(--line);margin-bottom:12px}
.rc-people-header h2{font-size:14px;font-weight:700;display:flex;align-items:center;gap:6px;color:var(--ink);margin:0}
.rc-people-header h2 svg{width:15px;height:15px;color:var(--purple)}
.rc-people-grid{display:flex;flex-direction:column;gap:8px;max-height:calc(100vh - 260px);overflow-y:auto;padding-right:2px;scrollbar-width:thin}

.rc-person{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px}
.rc-ps-working{border-left:3px solid #22c55e}
.rc-ps-checked_out{border-left:3px solid #94a3b8}
.rc-ps-on_break{border-left:3px solid #3b82f6}
.rc-ps-on_leave{border-left:3px solid #f59e0b}
.rc-ps-absent{border-left:3px solid #ef4444;opacity:.75}

.rc-person-top{display:flex;align-items:center;gap:8px}
.rc-person-info{flex:1;min-width:0}
.rc-person-info strong{display:block;font-size:12px;font-weight:700;color:var(--ink);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-person-info small{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}

.rc-status-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.rc-sd-working{background:#22c55e}
.rc-sd-checked_out{background:#94a3b8}
.rc-sd-on_break{background:#3b82f6}
.rc-sd-on_leave{background:#f59e0b}
.rc-sd-absent{background:#ef4444}

.rc-person-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rc-person-meta span{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--muted)}
.rc-person-meta svg{width:12px;height:12px}
.rc-late{font-size:10px;background:#fff0f0;color:#dc2626;border-radius:4px;padding:0 4px;font-weight:700;font-style:normal}
.rc-absent{color:#ef4444!important}
.rc-no-tasks{font-size:11px;color:var(--muted)}

.rc-person-tasks{display:flex;flex-direction:column;gap:5px}
.rc-task-row{display:flex;gap:4px;flex-wrap:wrap}
.rc-tk{font-size:10px;font-weight:600;padding:2px 7px;border-radius:20px}
.rc-tk-done{background:#f0fdf4;color:#15803d}
.rc-tk-wip{background:#f5f3ff;color:#7c3aed}
.rc-tk-overdue{background:#fff0f0;color:#dc2626}

.rc-mini-progress{height:4px;background:var(--line);border-radius:4px;overflow:hidden}
.rc-mini-fill{height:100%;background:#22c55e;border-radius:4px;transition:width .3s}

.rc-empty-people{font-size:12px;color:var(--muted);text-align:center;padding:20px 0}

/* Undo / override actions */
.rc-undo-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:6px}
.rc-undo-form{display:contents}
.rc-undo-btn{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;padding:3px 10px;border-radius:6px;border:1px solid transparent;cursor:pointer;background:none;transition:all .15s;line-height:1.4;white-space:nowrap}
.rc-undo-btn svg{width:12px;height:12px;flex-shrink:0}
.rc-undo-amber{background:#fffbeb;color:#b45309;border-color:#fde68a}
.rc-undo-amber:hover{background:#fef3c7;border-color:#f59e0b}
.rc-undo-red{background:#fff0f0;color:#b91c1c;border-color:#fecaca}
.rc-undo-red:hover{background:#fee2e2;border-color:#f87171}
.rc-undo-purple{background:#f5f3ff;color:#6d28d9;border-color:#ddd6fe;list-style:none}
.rc-undo-purple:hover{background:#ede9fe;border-color:#c4b5fd}
.rc-override-details{position:relative}
.rc-override-details summary{cursor:pointer}
.rc-override-details summary::-webkit-details-marker{display:none}
.rc-override-form{position:absolute;top:calc(100% + 4px);left:0;z-index:40;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px;display:flex;align-items:center;gap:8px;box-shadow:0 8px 24px rgba(15,23,42,.12);white-space:nowrap}
.rc-override-form select{font-size:12px;padding:4px 8px;border-radius:7px;border:1px solid var(--line);background:var(--bg);color:var(--ink);height:30px}
html[data-theme-mode="dark"] .rc-undo-amber{background:#451a03;color:#fbbf24;border-color:#92400e}
html[data-theme-mode="dark"] .rc-undo-red{background:#450a0a;color:#f87171;border-color:#7f1d1d}
html[data-theme-mode="dark"] .rc-undo-purple{background:#2e1065;color:#c4b5fd;border-color:#4c1d95}
html[data-theme-mode="dark"] .rc-override-form{background:#111827;border-color:#263145;box-shadow:0 8px 24px rgba(0,0,0,.4)}
html[data-theme-mode="dark"] .rc-override-form select{background:#0f172a;border-color:#263145;color:#e5e7eb}

/* Dark mode */
html[data-theme-mode="dark"] .rc-stat{background:#111827;border-color:#263145}
html[data-theme-mode="dark"] .rc-stat strong{color:#e5e7eb}
html[data-theme-mode="dark"] .rc-stat-green svg{background:#052e16;color:#4ade80}
html[data-theme-mode="dark"] .rc-stat-red svg{background:#450a0a;color:#f87171}
html[data-theme-mode="dark"] .rc-stat-amber svg{background:#451a03;color:#fbbf24}
html[data-theme-mode="dark"] .rc-stat-blue svg{background:#1e3a5f;color:#60a5fa}
html[data-theme-mode="dark"] .rc-stat-orange svg{background:#431407;color:#fb923c}
html[data-theme-mode="dark"] .rc-stat-indigo svg{background:#1e1b4b;color:#a5b4fc}
html[data-theme-mode="dark"] .rc-filters{background:#111827;border-color:#263145}
html[data-theme-mode="dark"] .rc-filters select{background:#0f172a;border-color:#263145;color:#e5e7eb}
html[data-theme-mode="dark"] .rc-feed-header{border-bottom-color:#263145}
html[data-theme-mode="dark"] .rc-feed-item{border-bottom-color:#1e293b}
html[data-theme-mode="dark"] .rc-fi-green .rc-fi-icon{background:#052e16;color:#4ade80}
html[data-theme-mode="dark"] .rc-fi-red .rc-fi-icon{background:#450a0a;color:#f87171}
html[data-theme-mode="dark"] .rc-fi-purple .rc-fi-icon{background:#2e1065;color:#c4b5fd}
html[data-theme-mode="dark"] .rc-fi-blue .rc-fi-icon{background:#1e3a5f;color:#60a5fa}
html[data-theme-mode="dark"] .rc-fi-amber .rc-fi-icon{background:#451a03;color:#fbbf24}
html[data-theme-mode="dark"] .rc-fi-indigo .rc-fi-icon{background:#1e1b4b;color:#a5b4fc}
html[data-theme-mode="dark"] .rc-fi-slate .rc-fi-icon{background:#1e293b;color:#94a3b8}
html[data-theme-mode="dark"] .rc-fi-who{color:#e5e7eb}
html[data-theme-mode="dark"] .rc-fi-title{color:#e5e7eb}
html[data-theme-mode="dark"] .rc-fi-detail{color:#9ca3af}
html[data-theme-mode="dark"] .rc-fi-sub{color:#6b7280}
html[data-theme-mode="dark"] .rc-fi-date{color:#4b5563}
html[data-theme-mode="dark"] .rc-people-header{border-bottom-color:#263145}
html[data-theme-mode="dark"] .rc-person{background:#111827;border-color:#263145}
html[data-theme-mode="dark"] .rc-person-info strong{color:#e5e7eb}
html[data-theme-mode="dark"] .rc-person-info small{color:#4b5563}
html[data-theme-mode="dark"] .rc-mini-progress{background:#1e293b}
html[data-theme-mode="dark"] .rc-badge-green{background:#052e16;color:#4ade80}
html[data-theme-mode="dark"] .rc-badge-red{background:#450a0a;color:#f87171}
html[data-theme-mode="dark"] .rc-badge-purple{background:#2e1065;color:#c4b5fd}
html[data-theme-mode="dark"] .rc-badge-blue{background:#1e3a5f;color:#60a5fa}
html[data-theme-mode="dark"] .rc-badge-amber{background:#451a03;color:#fbbf24}
html[data-theme-mode="dark"] .rc-badge-indigo{background:#1e1b4b;color:#a5b4fc}
html[data-theme-mode="dark"] .rc-badge-slate{background:#1e293b;color:#94a3b8}
html[data-theme-mode="dark"] .rc-badge-attendance{background:#052e16;color:#4ade80}
html[data-theme-mode="dark"] .rc-badge-task{background:#2e1065;color:#c4b5fd}
html[data-theme-mode="dark"] .rc-badge-leave{background:#451a03;color:#fbbf24}
html[data-theme-mode="dark"] .rc-badge-time{background:#1e1b4b;color:#a5b4fc}
html[data-theme-mode="dark"] .rc-badge-checkout{background:#1e293b;color:#94a3b8}

/* ── Permission settings ─────────────────────────────────────────── */
.perm-pill{display:inline-block;padding:2px 8px;border-radius:6px;font-size:11px;font-weight:700;letter-spacing:.03em}
.perm-yes{background:rgba(34,197,94,.12);color:#16a34a}
.perm-no{background:rgba(239,68,68,.1);color:#dc2626}
.perm-group-row td{background:var(--surface-alt,#f8fafc);border-top:2px solid var(--line);padding:6px 12px!important}
.perm-group-row strong{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.perm-reset-form{display:inline-flex;margin-left:10px}
.perm-reset-btn{font-size:11px!important;padding:3px 8px!important}
.badge-count{display:inline-block;background:var(--primary,#6d5dfc);color:#fff;border-radius:20px;font-size:11px;font-weight:700;padding:1px 7px;margin-left:6px;vertical-align:middle}
.panel-header-note{font-size:11px;color:var(--muted);margin:2px 0 0}
html[data-theme-mode="dark"] .perm-yes{background:rgba(34,197,94,.15);color:#4ade80}
html[data-theme-mode="dark"] .perm-no{background:rgba(239,68,68,.12);color:#f87171}
html[data-theme-mode="dark"] .perm-group-row td{background:rgba(255,255,255,.03)}

/* ── HR: Recruitment ──────────────────────────────────────────────────────── */
.recruit-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
.recruit-kpi{background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:18px 20px;text-align:center}
.recruit-kpi-val{display:block;font-size:28px;font-weight:900;color:var(--ink);line-height:1}
.recruit-kpi-lbl{display:block;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-top:6px}
.recruit-layout{display:grid;grid-template-columns:280px 1fr;gap:16px;margin-bottom:16px}
.recruit-pipeline{display:flex;align-items:flex-end;gap:10px;padding:20px;height:160px}
.pipeline-stage{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1;text-decoration:none;transition:opacity .15s}
.pipeline-stage:hover{opacity:.8}
.pipeline-stage-bar{width:100%;border-radius:6px 6px 0 0;background:var(--primary,#6d5dfc);opacity:.7;transition:height .3s}
.pipeline-stage.stage-hired .pipeline-stage-bar{background:#16a34a}
.pipeline-stage.stage-rejected .pipeline-stage-bar{background:#94a3b8}
.pipeline-stage.stage-offer .pipeline-stage-bar{background:#0891b2}
.pipeline-stage.stage-interview .pipeline-stage-bar{background:#d97706}
.pipeline-stage-count{font-size:13px;font-weight:800;color:var(--ink)}
.pipeline-stage-label{font-size:9.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.3px;text-align:center}
.recruit-job-row{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line);text-decoration:none;transition:background .12s;gap:12px}
.recruit-job-row:last-child{border-bottom:none}
.recruit-job-row:hover{background:rgba(109,93,252,.04)}
.recruit-job-title{font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:4px}
.recruit-job-meta{display:flex;gap:10px;flex-wrap:wrap}
.recruit-job-meta span{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;color:var(--muted)}
.recruit-job-meta svg{width:10px;height:10px}
.recruit-job-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.recruit-candidate-count{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--muted);font-weight:700}
.recruit-candidate-count svg{width:12px;height:12px}
.candidate-stage-pill{display:inline-block;padding:2px 10px;border-radius:20px;font-size:10px;font-weight:700;background:#f1f5f9;color:#536076}
.candidate-stage-pill.stage-applied{background:#eff6ff;color:#2563eb}
.candidate-stage-pill.stage-screening{background:#fdf4ff;color:#9333ea}
.candidate-stage-pill.stage-interview{background:#fffbeb;color:#d97706}
.candidate-stage-pill.stage-offer{background:#ecfeff;color:#0891b2}
.candidate-stage-pill.stage-hired{background:#f0fdf4;color:#16a34a}
.candidate-stage-pill.stage-rejected{background:#f8fafc;color:#64748b}

/* ── HR: Resignations & Exit ──────────────────────────────────────────────── */
.resign-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
.resign-kpi{background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:18px 20px;text-align:center}
.resign-kpi-val{display:block;font-size:28px;font-weight:900;color:var(--ink);line-height:1}
.resign-kpi-lbl{display:block;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-top:6px}
.resign-layout{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.resign-status-pill{display:inline-block;padding:2px 10px;border-radius:20px;font-size:10px;font-weight:700}
.resign-pending{background:#fff7ed;color:#c2410c}
.resign-approved{background:#f0fdf4;color:#15803d}
.resign-rejected{background:#fef2f2;color:#b91c1c}
.resign-withdrawn{background:#f8fafc;color:#64748b}
/* Exit cards */
.exit-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;padding:12px 0}
.exit-card{display:block;border:1.5px solid var(--line);border-radius:14px;padding:14px;text-decoration:none;transition:box-shadow .15s,transform .15s;background:var(--surface)}
.exit-card:hover{box-shadow:0 6px 20px rgba(15,23,42,.1);transform:translateY(-2px)}
.exit-card-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.exit-card-avatar{width:36px;height:36px;border-radius:10px;background:#f0eeff;color:#6d5dfc;display:grid;place-items:center;font-size:12px;font-weight:900;flex-shrink:0}
.exit-card-info{flex:1;min-width:0}
.exit-card-info strong{display:block;font-size:13px;font-weight:800;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.exit-card-info span{font-size:10px;color:var(--muted)}
.exit-status-pill{display:inline-block;padding:2px 8px;border-radius:20px;font-size:9.5px;font-weight:700;flex-shrink:0}
.exit-in_progress{background:#fff7ed;color:#c2410c}
.exit-completed{background:#f0fdf4;color:#15803d}
.exit-progress-bar{height:5px;background:var(--line);border-radius:10px;overflow:hidden;margin-bottom:4px}
.exit-progress-fill{height:100%;background:#6d5dfc;border-radius:10px;transition:width .3s}
.exit-progress-label{font-size:10px;color:var(--muted);margin-bottom:8px}
.exit-checks{display:flex;gap:6px}
.exit-check{width:24px;height:24px;border-radius:6px;background:var(--line);display:grid;place-items:center;color:var(--muted)}
.exit-check svg{width:12px;height:12px}
.exit-check.done{background:#f0fdf4;color:#16a34a}
/* Exit process detail */
.exit-hero{display:grid;grid-template-columns:260px 1fr;gap:16px;background:var(--surface);border:1.5px solid var(--line);border-radius:16px;padding:24px;margin-bottom:20px}
.exit-hero-progress{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border-right:1px solid var(--line);padding-right:24px}
.exit-hero-pct{font-size:48px;font-weight:900;color:var(--ink);line-height:1}
.exit-hero-label{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.exit-hero-bar{width:100%;height:8px;background:var(--line);border-radius:10px;overflow:hidden}
.exit-hero-fill{height:100%;background:#6d5dfc;border-radius:10px;transition:width .4s}
.exit-hero-meta{display:flex;flex-direction:column;gap:10px;padding-left:8px;justify-content:center}
.exit-meta-item{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink)}
.exit-meta-item svg{width:15px;height:15px;color:var(--muted);flex-shrink:0}
.exit-layout{display:grid;grid-template-columns:1fr 320px;gap:16px}
.exit-checklist{display:flex;flex-direction:column;gap:10px;padding:4px 0}
.exit-checklist-item{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1.5px solid var(--line);border-radius:12px;transition:background .15s,border-color .15s}
.exit-checklist-item.done{border-color:rgba(22,163,74,.25);background:rgba(22,163,74,.04)}
.exit-toggle-btn{width:32px;height:32px;border-radius:8px;border:none;background:var(--line);cursor:pointer;display:grid;place-items:center;flex-shrink:0;transition:background .15s;color:var(--muted)}
.exit-toggle-btn svg{width:16px;height:16px}
.exit-toggle-btn.checked{background:rgba(22,163,74,.12);color:#16a34a}
.exit-toggle-btn:hover{background:rgba(109,93,252,.1);color:#6d5dfc}
.exit-checklist-icon{width:36px;height:36px;border-radius:10px;background:var(--line);display:grid;place-items:center;flex-shrink:0}
.exit-checklist-icon svg{width:16px;height:16px;color:var(--muted)}
.exit-checklist-item.done .exit-checklist-icon{background:#f0fdf4;color:#16a34a}
.exit-checklist-item.done .exit-checklist-icon svg{color:#16a34a}
.exit-checklist-text{flex:1}
.exit-checklist-text strong{font-size:13.5px;color:var(--ink)}
.exit-check-status{font-size:11px;font-weight:700;color:var(--muted);flex-shrink:0}
.exit-checklist-item.done .exit-check-status{color:#16a34a}
.exit-detail-rows{display:flex;flex-direction:column;gap:0}
.exit-detail-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}
.exit-detail-row:last-child{border-bottom:none}
.exit-detail-row span{color:var(--muted)}
.exit-feedback-box{margin-top:14px;padding:12px 14px;background:rgba(109,93,252,.04);border-radius:10px;border:1px solid rgba(109,93,252,.12)}
.exit-feedback-label{font-size:11px;font-weight:700;color:var(--muted);display:flex;align-items:center;gap:5px;margin-bottom:6px;text-transform:uppercase;letter-spacing:.3px}
.exit-feedback-label svg{width:12px;height:12px}
.exit-feedback-box p{font-size:13px;color:var(--ink);margin:0;line-height:1.6}
/* Resignation form */
.form-center-wrap{max-width:600px}
.resignation-form-panel{padding:24px}
.resign-form-alert{display:flex;align-items:flex-start;gap:10px;background:#fff7ed;border:1px solid #fed7aa;border-radius:10px;padding:12px 14px;margin-bottom:20px;font-size:13px;color:#9a3412}
.resign-form-alert svg{width:16px;height:16px;flex-shrink:0;margin-top:1px;color:#ea580c}
/* Dark mode */
html[data-theme-mode="dark"] .recruit-kpi,.dark .resign-kpi{background:#1e293b;border-color:#263145}
html[data-theme-mode="dark"] .exit-card{background:#111827;border-color:#263145}
html[data-theme-mode="dark"] .exit-card-avatar{background:rgba(109,93,252,.15)}
html[data-theme-mode="dark"] .exit-hero{background:#1e293b;border-color:#263145}
html[data-theme-mode="dark"] .exit-toggle-btn{background:#263145;color:#94a3b8}
html[data-theme-mode="dark"] .exit-checklist-item.done{background:rgba(22,163,74,.07)}
html[data-theme-mode="dark"] .exit-feedback-box{background:rgba(109,93,252,.06);border-color:rgba(109,93,252,.15)}
html[data-theme-mode="dark"] .resign-form-alert{background:rgba(234,88,12,.08);border-color:rgba(234,88,12,.2);color:#fb923c}
@media(max-width:900px){.recruit-kpis,.resign-kpis{grid-template-columns:repeat(2,1fr)}.recruit-layout,.resign-layout,.exit-layout,.exit-hero{grid-template-columns:1fr}}

/* ── Inline M2M chip picker (project form + any select[multiple]) ───────── */
.tm-picker{border:1.5px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface);margin-top:4px}
.tm-picker-search{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);transition:background .12s}
.tm-picker-search:focus-within{background:rgba(109,93,252,.03)}
.tm-picker-search svg{color:var(--muted);flex-shrink:0}
.tm-picker-input{flex:1;border:none;outline:none;font-size:14px;color:var(--ink);background:transparent;font-family:inherit;min-width:0}
.tm-picker-input::placeholder{color:var(--muted)}
.tm-picker-grid{display:flex;flex-wrap:wrap;gap:8px;padding:14px;max-height:280px;overflow-y:auto;align-content:flex-start}
.tm-picker-footer{padding:8px 14px;border-top:1px solid var(--line);display:flex;align-items:center}
.tm-picker-count{font-size:11px;font-weight:700;color:var(--purple)}
.tm-picker-empty{font-size:13px;color:var(--muted);padding:16px 0;width:100%;text-align:center}
/* Dark mode for inline picker */
html[data-theme-mode="dark"] .tm-picker{background:#1e293b;border-color:#263145}
html[data-theme-mode="dark"] .tm-picker-search{border-color:#263145}
html[data-theme-mode="dark"] .tm-picker-footer{border-color:#263145}

/* ── Team member selector modal ─────────────────────────────────────────── */
.tm-overlay{position:fixed;inset:0;background:rgba(15,23,42,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:10200;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s}
.tm-overlay[hidden]{display:none}
.tm-overlay.tm-visible{opacity:1}
.tm-modal{background:var(--surface);border-radius:20px;box-shadow:0 24px 60px rgba(15,23,42,.2),0 2px 8px rgba(15,23,42,.06);width:640px;max-width:95vw;max-height:90vh;display:flex;flex-direction:column;transform:scale(.95) translateY(12px);transition:transform .25s cubic-bezier(.34,1.56,.64,1);overflow:hidden}
.tm-overlay.tm-visible .tm-modal{transform:scale(1) translateY(0)}
.tm-header{display:flex;align-items:flex-start;justify-content:space-between;padding:20px 20px 0;flex-shrink:0}
.tm-header h3{font-size:15px;font-weight:800;color:var(--ink);margin:0 0 4px}
.tm-count-label{font-size:12px;font-weight:700;color:var(--purple)}
.tm-close-btn{width:32px;height:32px;border-radius:9px;border:none;background:var(--line);cursor:pointer;display:grid;place-items:center;color:var(--muted);flex-shrink:0;transition:background .12s,color .12s}
.tm-close-btn:hover{background:rgba(239,68,68,.1);color:#ef4444}
.tm-close-btn:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
.tm-close-btn svg{width:14px;height:14px}
.tm-search-wrap{display:flex;align-items:center;gap:10px;margin:14px 20px 8px;border:1.5px solid var(--line);border-radius:12px;padding:8px 14px;transition:border-color .15s,box-shadow .15s;flex-shrink:0}
.tm-search-wrap:focus-within{border-color:var(--purple);box-shadow:0 0 0 3px rgba(109,93,252,.12)}
.tm-search-icon{width:15px;height:15px;color:var(--muted);flex-shrink:0}
.tm-search{flex:1;border:none;outline:none;font-size:14px;color:var(--ink);background:transparent;font-family:inherit}
.tm-search::placeholder{color:var(--muted)}
.tm-chips{display:flex;flex-wrap:wrap;gap:10px;padding:8px 20px 16px;overflow-y:auto;flex:1;min-height:180px;max-height:55vh;align-content:flex-start}
.tm-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 8px;border-radius:40px;border:1.5px solid var(--line);background:var(--bg);cursor:pointer;font-size:13px;font-weight:600;color:var(--ink);transition:border-color .12s,background .12s,box-shadow .12s;white-space:nowrap}
.tm-chip:hover{border-color:rgba(109,93,252,.35);background:rgba(109,93,252,.04)}
.tm-chip:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
.tm-chip-selected{border-color:var(--purple);background:rgba(109,93,252,.08);color:var(--purple)}
.tm-chip-selected:hover{background:rgba(109,93,252,.14)}
.tm-chip-av{width:28px;height:28px;border-radius:50%;background:#e9e5ff;color:#6d5dfc;display:grid;place-items:center;font-size:10px;font-weight:900;flex-shrink:0;transition:background .12s}
.tm-chip-selected .tm-chip-av{background:var(--purple);color:#fff}
.tm-chip-name{max-width:160px;overflow:hidden;text-overflow:ellipsis}
.tm-footer{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:14px 20px;border-top:1px solid var(--line);flex-shrink:0}
/* Dark mode */
html[data-theme-mode="dark"] .tm-modal{background:#1e293b;box-shadow:0 24px 60px rgba(0,0,0,.5)}
html[data-theme-mode="dark"] .tm-search-wrap{background:#111827;border-color:#263145}
html[data-theme-mode="dark"] .tm-search-wrap:focus-within{border-color:var(--purple)}
html[data-theme-mode="dark"] .tm-chip{background:#172033;border-color:#263145;color:#cbd5e1}
html[data-theme-mode="dark"] .tm-chip:hover{border-color:rgba(109,93,252,.45);background:rgba(109,93,252,.08)}
html[data-theme-mode="dark"] .tm-chip-selected{border-color:var(--purple);background:rgba(109,93,252,.15);color:#c4b5fd}
html[data-theme-mode="dark"] .tm-chip-av{background:#263145;color:#a78bfa}
html[data-theme-mode="dark"] .tm-chip-selected .tm-chip-av{background:var(--purple);color:#fff}
html[data-theme-mode="dark"] .tm-close-btn{background:#263145}
@media(max-width:480px){.tm-chips{gap:8px;padding:6px 14px 12px}.tm-chip{padding:6px 12px 6px 7px;font-size:12px}.tm-chip-av{width:24px;height:24px;font-size:9px}}