/* ================================================================
   modules.css — Components, Modules & UI Patterns
   Enviro Pro Energies Control Center
================================================================ */

/* ── DARK MODE TRANSITIONS ── */
.card,.table-card,.modal,.notif-panel,.navbar,.sidebar{transition:background .25s,border-color .25s;}
.form-input{background:var(--bg);color:var(--text);transition:background .25s;}
select.form-input option{background:var(--card);color:var(--text);}
.select-filter{background:var(--card);color:var(--text-mid);border:1px solid var(--border-strong);}
.pag-btn,.pag-size{background:var(--card);color:var(--text-mid);}
thead th{background:var(--bg);}
[data-theme="dark"] .navbar{background:rgba(22,32,53,0.97);}
[data-theme="dark"] .notif-item:hover{background:#1e2d45;}
[data-theme="dark"] thead th{background:linear-gradient(to bottom,#1a2640,#162035);}
[data-theme="dark"] tbody td{border-bottom-color:rgba(148,163,184,0.08);}
[data-theme="dark"] .pagination-bar{background:var(--card);}
[data-theme="dark"] tbody tr:hover td{background:rgba(255,255,255,0.03);}
[data-theme="dark"] .form-input:focus{background:var(--card);}
[data-theme="dark"] .btn-outline:hover{background:rgba(76,194,180,0.1);}
/* ── DASHBOARD LAYOUT DRAG & DROP ── */
.dash-layout-item{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--bg);border-radius:10px;border:1px solid var(--border);cursor:grab;transition:box-shadow .15s,opacity .15s,transform .15s;user-select:none;}
.dash-layout-item:active{cursor:grabbing;}
.dash-layout-item.dragging{opacity:.4;transform:scale(0.98);will-change:transform;}
.dash-layout-item.drag-over{box-shadow:0 0 0 2px var(--primary);border-color:var(--primary);}
.drag-handle{color:var(--text-faint);font-size:16px;cursor:grab;flex-shrink:0;padding:0 4px;}
.drag-handle:hover{color:var(--text-mid);}
/* ── SOUND TOGGLE BUTTON ── */
.sound-toggle-btn{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:8px;border:1px solid var(--border-strong);background:var(--bg);font-size:12px;cursor:pointer;color:var(--text-mid);transition:all .15s;font-family:'Inter',sans-serif;}
.sound-toggle-btn.active{background:var(--emerald-light);color:var(--emerald);border-color:var(--emerald);}
.sound-wave{display:inline-flex;align-items:flex-end;gap:1.5px;height:14px;}
.sound-wave span{display:block;width:2.5px;background:currentColor;border-radius:2px;animation:soundWave .8s ease-in-out infinite;}
.sound-wave span:nth-child(1){height:4px;animation-delay:0s;}
.sound-wave span:nth-child(2){height:10px;animation-delay:.15s;}
.sound-wave span:nth-child(3){height:6px;animation-delay:.3s;}
.sound-wave span:nth-child(4){height:12px;animation-delay:.1s;}
.sound-wave span:nth-child(5){height:5px;animation-delay:.25s;}
@keyframes soundWave{0%,100%{transform:scaleY(1)}50%{transform:scaleY(0.4)}}
body:not(.sound-on) .sound-wave span{animation:none;transform:scaleY(0.3);opacity:.4;}

#warm-light-overlay{position:fixed;inset:0;pointer-events:none;z-index:99999;background:rgba(255,180,50,0);transition:background .4s;}
body.warm-light #warm-light-overlay{background:rgba(255,180,50,0.07);}
body.warm-light-strong #warm-light-overlay{background:rgba(255,160,30,0.14);}
/* ── FONT SIZE LEVELS ── */
/* ── FONT SIZE SCALING ── */
/* base font-size set via fs-* class applied by settings.js on load */
/* XS: 11px */
body.fs-xs{font-size:11px;}
body.fs-xs *:not(script):not(style):not(i):not(canvas):not(.logo-mark):not(.notif-badge):not([class*="ring"]):not(.inv-kpi-val):not(.inv-kpi-lbl):not(.bkpi-val):not(.bkpi-lbl){font-size:11px!important;}
body.fs-xs .page-title{font-size:19px!important;}body.fs-xs .kpi-val{font-size:19px!important;}body.fs-xs .inv-kpi-val,.fs-xs .bkpi-val{font-size:28px!important;}body.fs-xs .inv-kpi-lbl,.fs-xs .bkpi-lbl{font-size:11.5px!important;}body.fs-xs .form-section-title{font-size:12px!important;}body.fs-xs .btn-sm{font-size:10px!important;}
/* S: 12px */
body.fs-small{font-size:12px;}
body.fs-small *:not(script):not(style):not(i):not(canvas):not(.logo-mark):not(.notif-badge):not([class*="ring"]):not(.inv-kpi-val):not(.inv-kpi-lbl):not(.bkpi-val):not(.bkpi-lbl){font-size:12px!important;}
body.fs-small .page-title{font-size:22px!important;}body.fs-small .kpi-val{font-size:22px!important;}body.fs-small .inv-kpi-val,body.fs-small .bkpi-val{font-size:28px!important;}body.fs-small .inv-kpi-lbl,body.fs-small .bkpi-lbl{font-size:11.5px!important;}body.fs-small .form-section-title{font-size:14px!important;}body.fs-small .btn-sm{font-size:11px!important;}
/* M: 13px — default */
body.fs-medium{font-size:13px;}
body.fs-medium *:not(script):not(style):not(i):not(canvas):not(.logo-mark):not(.notif-badge):not([class*="ring"]):not(.inv-kpi-val):not(.inv-kpi-lbl):not(.bkpi-val):not(.bkpi-lbl){font-size:13px;}
body.fs-medium .page-title{font-size:26px;}body.fs-medium .kpi-val{font-size:26px;}body.fs-medium .inv-kpi-val,body.fs-medium .bkpi-val{font-size:28px!important;}body.fs-medium .inv-kpi-lbl,body.fs-medium .bkpi-lbl{font-size:11.5px!important;}body.fs-medium .form-section-title{font-size:15px;}
/* L: 15px */
body.fs-large{font-size:15px;}
body.fs-large *:not(script):not(style):not(i):not(canvas):not(.logo-mark):not(.notif-badge):not([class*="ring"]):not(.inv-kpi-val):not(.inv-kpi-lbl):not(.bkpi-val):not(.bkpi-lbl){font-size:15px!important;}
body.fs-large .page-title{font-size:28px!important;}body.fs-large .kpi-val{font-size:28px!important;}body.fs-large .inv-kpi-val,body.fs-large .bkpi-val{font-size:28px!important;}body.fs-large .inv-kpi-lbl,body.fs-large .bkpi-lbl{font-size:11.5px!important;}body.fs-large .form-section-title{font-size:17px!important;}body.fs-large .btn-sm{font-size:13px!important;}body.fs-large .nav-item{font-size:14px!important;}
/* XL: 17px */
body.fs-xl{font-size:17px;}
body.fs-xl *:not(script):not(style):not(i):not(canvas):not(.logo-mark):not(.notif-badge):not([class*="ring"]):not(.inv-kpi-val):not(.inv-kpi-lbl):not(.bkpi-val):not(.bkpi-lbl){font-size:17px!important;}
body.fs-xl .page-title{font-size:32px!important;}body.fs-xl .kpi-val{font-size:32px!important;}body.fs-xl .form-section-title{font-size:19px!important;}body.fs-xl .btn-sm{font-size:15px!important;}body.fs-xl .nav-item{font-size:16px!important;}
/* Font size picker buttons */
.fs-btn{border-radius:10px;border:1.5px solid var(--border-strong);background:var(--bg);cursor:pointer;color:var(--text-mid);transition:all .18s;font-family:'Inter',sans-serif;font-weight:700;line-height:1;text-align:center;min-width:44px;}
.fs-btn:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-glow);}
.fs-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 3px 10px rgba(15,82,87,0.35);transform:translateY(-2px);}
/* warm light segment */
.wl-btn{padding:7px 16px;border-radius:8px;border:1px solid var(--border-strong);background:var(--bg);font-size:13px;cursor:pointer;color:var(--text-mid);transition:all .15s;font-family:'Inter',sans-serif;}
.wl-btn.active{background:linear-gradient(135deg,#F59E0B,#FBBF24);color:#fff;border-color:#F59E0B;box-shadow:0 2px 8px rgba(245,158,11,0.3);}

.theme-toggle-btn{width:36px;height:36px;border-radius:8px;border:1px solid var(--border);background:var(--card);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:17px;transition:all .2s;flex-shrink:0;}
.theme-toggle-btn:hover{border-color:var(--primary);}
/* ── BULK IMPORT DROP ZONE ── */
.drop-zone{border:2px dashed var(--border-strong);border-radius:10px;padding:28px 20px;text-align:center;cursor:pointer;transition:all .2s;background:var(--bg);}
.drop-zone:hover,.drop-zone.dragover{border-color:var(--primary);background:var(--primary-glow);}
.drop-zone-icon{font-size:30px;margin-bottom:8px;}
/* ── RENEWAL HISTORY ROWS ── */
.rh-row{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:8px;background:var(--bg);margin-bottom:6px;}
.rh-date{font-family:'DM Mono',monospace;font-size:12px;font-weight:700;color:var(--primary);min-width:96px;}
.rh-amount{font-family:'DM Mono',monospace;font-size:12px;color:var(--emerald);min-width:80px;}
.rh-note{font-size:12px;color:var(--text-muted);flex:1;}
.rh-added{font-size:10px;color:var(--text-faint);font-family:'DM Mono',monospace;}
/* ── CHART CONTAINERS ── */
.chart-box{position:relative;display:flex;flex-direction:column;align-items:center;}
/* ── TASK MODULE ── */
.task-board{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px;}
.task-col{background:var(--bg);border-radius:var(--radius);padding:14px;min-height:200px;}
.task-col-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;padding-bottom:10px;border-bottom:2px solid var(--border);}
.task-col-title{font-family:'Inter',sans-serif;font-weight:700;font-size:12px;letter-spacing:.5px;text-transform:uppercase;}
.task-col-count{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:1px 8px;font-size:11px;font-weight:700;}
.task-card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin-bottom:8px;cursor:pointer;transition:all .2s;box-shadow:var(--shadow-sm);}
.task-card:hover{border-color:var(--primary);box-shadow:var(--shadow);}
.task-card-title{font-weight:600;font-size:13px;color:var(--text);margin-bottom:6px;line-height:1.4;}
.task-card-meta{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px;}
.task-pill{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:20px;font-size:10px;font-weight:600;}
.task-pill.priority-low{background:rgba(16,185,129,.12);color:#047857;}
.task-pill.priority-medium{background:rgba(245,158,11,.12);color:#B45309;}
.task-pill.priority-high{background:rgba(239,68,68,.12);color:#DC2626;}
.task-pill.priority-urgent{background:rgba(127,29,29,.15);color:#7F1D1D;animation:pulse-urgent 1.5s infinite;}
@keyframes pulse-urgent{0%,100%{opacity:1;}50%{opacity:.6;}}
.task-pill.overdue{background:rgba(239,68,68,.15);color:#DC2626;}
.task-status-pending{border-left:3px solid var(--text-muted);}
.task-status-inprogress{border-left:3px solid var(--cyan);}
.task-status-hold{border-left:3px solid var(--amber);}
.task-status-completed{border-left:3px solid var(--emerald);opacity:.75;}
/* Task report cards */
.treport-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:20px;}
@media(max-width:1100px){.task-board{grid-template-columns:repeat(2,1fr);}.treport-grid{grid-template-columns:repeat(3,1fr);}}

/* ════ ALL NOTES MODULE — Notebook Style v2 ══════════════════ */

/* ── Left panel list items ──────────────────────────────────── */
.nl-item{
  border-left:4px solid transparent;
  display:flex;flex-direction:column;padding:14px 16px 12px;
  cursor:pointer;position:relative;
  transition:background .18s,border-color .18s,box-shadow .2s,transform .15s;
  border-radius:10px;
  margin:5px 8px;
  border:1.5px solid var(--border);
  border-left:4px solid transparent;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.nl-item:hover{
  background:rgba(46,139,110,.07);
  border-color:rgba(46,139,110,.35);
  border-left-color:var(--primary);
  transform:translateY(-2px) scale(1.01);
  box-shadow:0 6px 20px rgba(46,139,110,.15),0 2px 8px rgba(0,0,0,.1);
  z-index:2;
}
.nl-item.active{
  background:linear-gradient(90deg,rgba(46,139,110,.13),rgba(46,139,110,.05));
  border-color:rgba(46,139,110,.4);
  border-left-color:var(--primary);
  box-shadow:0 4px 14px rgba(46,139,110,.18);
}
.nl-item .nl-title{font-size:13.5px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:4px;padding-right:24px;line-height:1.3;}
.nl-item .nl-preview{font-size:12px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.5;margin-bottom:5px;font-weight:500;}
.nl-item .nl-meta{display:flex;align-items:center;gap:6px;}
.nl-item .nl-date{font-size:10px;color:var(--text-faint);}
.nl-dates{display:flex;flex-direction:column;gap:2px;margin-top:5px;}
.nl-date-row{display:flex;align-items:center;gap:4px;font-size:9.5px;color:var(--text-faint);}
.nl-date-lbl{font-weight:700;letter-spacing:.3px;color:var(--text-faint);opacity:.7;white-space:nowrap;}
.nl-date-val{font-family:'DM Mono',monospace;font-size:9px;color:var(--text-faint);}
.nl-item .nl-cat-pill{font-size:9px;font-weight:700;padding:1px 6px;border-radius:10px;background:rgba(46,139,110,.12);color:var(--primary);letter-spacing:.3px;text-transform:uppercase;}
.nl-item .nl-pin{position:absolute;top:12px;right:10px;font-size:11px;opacity:.7;}
/* Color accent strips */
.nl-item.nc-yellow{border-left:5px solid #eab308 !important; background:rgba(234,179,8,.04);}
.nl-item.nc-blue{border-left:5px solid #3b82f6 !important; background:rgba(53,167,155,.04);}
.nl-item.nc-green{border-left:5px solid #10b981 !important; background:rgba(16,185,129,.04);}
.nl-item.nc-pink{border-left:5px solid #ec4899 !important; background:rgba(236,72,153,.04);}
.nl-item.nc-purple{border-left:5px solid #3AA07F !important; background:rgba(58,160,127,.04);}
.nl-item.nc-default{border-left:5px solid transparent !important;}
.nl-item.active.nc-yellow{background:rgba(234,179,8,.12);border-color:rgba(234,179,8,.4);border-left-color:#eab308 !important;}
.nl-item.active.nc-blue{background:rgba(53,167,155,.12);border-color:rgba(53,167,155,.4);border-left-color:#3b82f6 !important;}
.nl-item.active.nc-green{background:rgba(16,185,129,.12);border-color:rgba(16,185,129,.4);border-left-color:#10b981 !important;}
.nl-item.active.nc-pink{background:rgba(236,72,153,.12);border-color:rgba(236,72,153,.4);border-left-color:#ec4899 !important;}
.nl-item.active.nc-purple{background:rgba(58,160,127,.12);border-color:rgba(58,160,127,.4);border-left-color:#3AA07F !important;}
/* Dark mode color bars */
[data-theme=dark] .nl-item.nc-yellow{background:rgba(234,179,8,.08);}
[data-theme=dark] .nl-item.nc-blue{background:rgba(53,167,155,.08);}
[data-theme=dark] .nl-item.nc-green{background:rgba(16,185,129,.08);}
[data-theme=dark] .nl-item.nc-pink{background:rgba(236,72,153,.08);}
[data-theme=dark] .nl-item.nc-purple{background:rgba(58,160,127,.08);}
/* Dark mode — strong readable fonts */
[data-theme=dark] .nl-item{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.09);box-shadow:0 1px 4px rgba(0,0,0,.25);}
[data-theme=dark] .nl-item .nl-title{color:#f8fafc;font-weight:700;}
[data-theme=dark] .nl-item .nl-preview{color:#cbd5e1;font-weight:500;}
[data-theme=dark] .nl-item .nl-date{color:#94a3b8;}
[data-theme=dark] .nl-item .nl-cat-pill{background:rgba(46,139,110,.25);color:#c4b5fd;}
[data-theme=dark] .nl-item:hover{background:rgba(46,139,110,.12);border-color:rgba(46,139,110,.5);box-shadow:0 8px 24px rgba(0,0,0,.4),0 0 0 1px rgba(46,139,110,.25);}
[data-theme=dark] .nl-item:hover .nl-title{color:#ffffff;}
[data-theme=dark] .nl-item:hover .nl-preview{color:#e2e8f0;}
[data-theme=dark] .nl-item.active{background:linear-gradient(90deg,rgba(46,139,110,.18),rgba(46,139,110,.07));border-color:rgba(46,139,110,.5);}
[data-theme=dark] .nl-item.active .nl-title{color:#ffffff;}
[data-theme=dark] .nl-item.active .nl-preview{color:#e2e8f0;}

/* ── Left panel header ──────────────────────────────────────── */
.nl-header-section{
  background:linear-gradient(135deg,var(--primary) 0%,#1F7A5C 100%);
  padding:18px 16px 14px;
  flex-shrink:0;
}
.nl-header-title{font-size:18px;font-weight:800;color:#fff;letter-spacing:-.3px;margin-bottom:12px;}
.nl-header-new-btn{
  display:flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.3);
  color:#fff;font-size:12px;font-weight:600;
  padding:7px 14px;border-radius:20px;cursor:pointer;
  transition:all .18s;width:100%;justify-content:center;
}
.nl-header-new-btn:hover{background:rgba(255,255,255,.3);}
.nl-header-actions{display:flex;gap:6px;margin-top:10px;}
.nl-header-icon-btn{
  flex:1;display:flex;align-items:center;justify-content:center;gap:4px;
  background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.2);
  color:rgba(255,255,255,.9);font-size:11px;font-weight:500;
  padding:5px 8px;border-radius:8px;cursor:pointer;transition:all .15s;
}
.nl-header-icon-btn:hover{background:rgba(255,255,255,.25);}

/* ── KPI mini strip ─────────────────────────────────────────── */
.nc-mini-kpi{
  padding:10px 0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  border-right:1px solid var(--border);
  background:var(--card);
}
.nc-mini-kpi:last-child{border-right:none;}
.nc-mini-kpi .val{font-size:20px;font-weight:800;color:var(--primary);font-family:'DM Mono',monospace;line-height:1.1;}
.nc-mini-kpi .lbl{font-size:9px;color:var(--text-faint);text-transform:uppercase;letter-spacing:.6px;margin-top:2px;}

/* ── Editor: NO background color — always neutral ───────────── */
#notes-editor-bg{background:var(--card)!important;}

/* ── Toolbar formatting buttons ─────────────────────────────── */
.nf-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:5px;cursor:pointer;
  font-size:13px;color:var(--text-muted);border:1px solid transparent;
  transition:all .15s;user-select:none;font-weight:600;
}
.nf-btn:hover{background:var(--bg);border-color:var(--border);color:var(--text);}
.nf-btn.active{background:rgba(46,139,110,.15);border-color:rgba(46,139,110,.3);color:var(--primary);}
.nf-sep{width:1px;height:18px;background:var(--border);margin:0 3px;flex-shrink:0;}

/* ── Checklist ──────────────────────────────────────────────── */
.nc-todo-section{margin-bottom:8px;}
.nc-todo-heading{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--text-faint);padding:6px 0 4px;margin-top:4px;display:flex;align-items:center;gap:6px;}
.nc-todo-heading::after{content:'';flex:1;height:1px;background:var(--border);}
.nc-checklist-item{display:flex;align-items:flex-start;gap:8px;padding:4px 6px;border-radius:6px;transition:background .12s;cursor:default;}
.nc-checklist-item:hover{background:rgba(0,0,0,.03);}
.nc-checklist-item.cl-drag-over{border-top:2px solid var(--primary);margin-top:-2px;background:rgba(15,82,87,0.05);}
[data-theme=dark] .nc-checklist-item:hover{background:rgba(255,255,255,.04);}
[data-theme=dark] .nc-checklist-item.cl-drag-over{background:rgba(46,139,110,0.08);}
.nc-cl-drag{cursor:grab;font-size:16px;color:var(--text-faint);padding:0 1px;flex-shrink:0;margin-top:2px;user-select:none;line-height:1;opacity:0.4;transition:opacity .15s;}
.nc-cl-drag:hover{opacity:1;color:var(--primary);}
.nc-cl-drag:active{cursor:grabbing;}
.nc-check{
  width:17px;height:17px;border-radius:4px;border:2px solid #94a3b8;
  cursor:pointer;flex-shrink:0;margin-top:3px;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;background:transparent;
}
.nc-check.checked{background:#10b981;border-color:#10b981;}
.nc-check svg{display:none;}
.nc-check.checked svg{display:block;}
.nc-cl-text{
  flex:1;font-size:13.5px;line-height:1.6;color:var(--text);
  outline:none;background:transparent;border:none;
  font-family:'Inter',sans-serif;padding:0;cursor:text;min-width:0;transition:all .2s;
}
.nc-cl-text.done{text-decoration:line-through;color:var(--text-faint);opacity:.6;}
.nc-cl-del{opacity:0;cursor:pointer;font-size:12px;color:var(--text-faint);padding:0 4px;transition:opacity .15s;flex-shrink:0;margin-top:4px;}
.nc-checklist-item:hover .nc-cl-del{opacity:1;}

/* ── Rich text editor area ──────────────────────────────────── */
#editor-rich-content{
  flex:1;min-height:160px;outline:none;
  font-size:14px;line-height:1.85;color:var(--text);
  font-family:'Inter',sans-serif;padding:0;word-break:break-word;
}
#editor-rich-content:empty::before{content:attr(data-placeholder);color:var(--text-faint);pointer-events:none;}
#editor-rich-content h1{font-size:20px;font-weight:700;margin:12px 0 4px;line-height:1.3;}
#editor-rich-content h2{font-size:16px;font-weight:700;margin:10px 0 4px;line-height:1.3;}
#editor-rich-content h3{font-size:14px;font-weight:700;margin:8px 0 4px;line-height:1.3;}
#editor-rich-content blockquote{border-left:3px solid var(--primary);padding:4px 0 4px 14px;margin:8px 0;color:var(--text-muted);font-style:italic;}
#editor-rich-content ul,#editor-rich-content ol{padding-left:20px;margin:4px 0;}
#editor-rich-content li{margin:2px 0;}
#editor-rich-content code{background:var(--bg);border:1px solid var(--border);border-radius:4px;padding:1px 5px;font-size:12.5px;font-family:'DM Mono',monospace;}
#editor-rich-content pre{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:10px 14px;margin:8px 0;overflow-x:auto;}
#editor-rich-content pre code{background:none;border:none;padding:0;}
#editor-rich-content a{color:var(--primary);text-decoration:underline;}
#editor-rich-content hr{border:none;border-top:1px solid var(--border);margin:12px 0;}
#editor-rich-content img{max-width:100%;border-radius:8px;margin:6px 0;display:block;}
#editor-rich-content table{border-collapse:collapse;width:100%;margin:8px 0;}
#editor-rich-content td,#editor-rich-content th{border:1px solid var(--border);padding:5px 10px;font-size:13px;}
#editor-rich-content th{background:var(--bg);font-weight:700;}

/* ── Attachments ────────────────────────────────────────────── */
.nc-attach-item{
  display:flex;align-items:center;gap:10px;
  padding:8px 12px;background:var(--bg);
  border:1px solid var(--border);border-radius:8px;
  cursor:pointer;transition:all .15s;min-width:0;
}
.nc-attach-item:hover{border-color:var(--primary);background:rgba(46,139,110,.04);}
.nc-attach-icon{font-size:22px;flex-shrink:0;}
.nc-attach-info{flex:1;min-width:0;}
.nc-attach-name{font-size:12px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.nc-attach-size{font-size:10px;color:var(--text-faint);}
.nc-attach-del{font-size:13px;color:var(--text-faint);cursor:pointer;padding:3px;border-radius:4px;transition:all .15s;flex-shrink:0;}
.nc-attach-del:hover{color:var(--red);background:rgba(239,68,68,.1);}
.nc-attach-dl{font-size:18px;color:var(--primary);cursor:pointer;padding:4px 6px;border-radius:6px;transition:all .15s;flex-shrink:0;}
.nc-attach-dl:hover{color:#fff;background:var(--primary);}

/* ── Reminder system ────────────────────────────────────────── */
.nr-badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;
  cursor:pointer;transition:all .15s;
}
.nr-badge.nr-set{background:rgba(245,158,11,.15);color:#d97706;border:1px solid rgba(245,158,11,.3);}
.nr-badge.nr-none{background:var(--bg);color:var(--text-muted);border:1px solid var(--border);}
.nr-badge.nr-overdue{background:rgba(239,68,68,.12);color:var(--red);border:1px solid rgba(239,68,68,.3);animation:nr-pulse 2s infinite;}
.nr-badge.nr-soon{background:rgba(245,158,11,.18);color:#b45309;border:1px solid rgba(245,158,11,.4);}
@keyframes nr-pulse{0%,100%{opacity:1;}50%{opacity:.6;}}

/* Reminder modal overlay */
#note-reminder-modal{
  position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.45);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
#note-reminder-modal .nrm-box{
  background:var(--card);border-radius:18px;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
  width:460px;max-width:95vw;overflow:hidden;
}
.nrm-header{
  background:linear-gradient(135deg,#f59e0b,#d97706);
  padding:18px 22px 14px;
}
.nrm-title{font-size:16px;font-weight:800;color:#fff;margin-bottom:2px;}
.nrm-subtitle{font-size:11px;color:rgba(255,255,255,.8);}
.nrm-body{padding:20px 22px;}
.nrm-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--text-muted);margin-bottom:6px;}
.nrm-calendar{
  border:1.5px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:16px;
}
.nrm-cal-header{
  background:var(--bg);padding:10px 14px;display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--border);
}
.nrm-cal-month{font-size:13px;font-weight:700;color:var(--text);}
.nrm-cal-nav{width:26px;height:26px;border-radius:6px;border:1px solid var(--border);background:var(--card);color:var(--text);cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:all .15s;}
.nrm-cal-nav:hover{background:var(--primary);color:#fff;border-color:var(--primary);}
.nrm-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:0;}
.nrm-cal-day-name{text-align:center;font-size:10px;font-weight:700;color:var(--text-faint);padding:6px 0;background:var(--bg);text-transform:uppercase;}
.nrm-cal-day{
  text-align:center;padding:6px 2px;font-size:12px;cursor:pointer;
  transition:all .15s;position:relative;color:var(--text);
}
.nrm-cal-day:hover:not(.nrm-cal-empty):not(.nrm-cal-past){background:rgba(46,139,110,.1);color:var(--primary);}
.nrm-cal-day.nrm-cal-today{font-weight:700;color:var(--primary);}
.nrm-cal-day.nrm-cal-today::after{content:'';display:block;width:4px;height:4px;border-radius:50%;background:var(--primary);margin:-2px auto 0;}
.nrm-cal-day.nrm-cal-selected{background:var(--primary);color:#fff!important;border-radius:6px;font-weight:700;}
.nrm-cal-day.nrm-cal-selected::after{display:none;}
.nrm-cal-day.nrm-cal-past{color:var(--text-faint);cursor:not-allowed;}
.nrm-cal-day.nrm-cal-empty{cursor:default;}
.nrm-time-row{display:flex;gap:10px;align-items:center;margin-bottom:16px;}
.nrm-time-input{
  flex:1;padding:9px 12px;border:1.5px solid var(--border);border-radius:10px;
  background:var(--bg);color:var(--text);font-size:13px;font-family:'Inter',sans-serif;
  outline:none;transition:border-color .15s;
}
.nrm-time-input:focus{border-color:var(--primary);}
.nrm-quick-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;}
.nrm-quick-btn{
  font-size:11px;font-weight:600;padding:5px 12px;border-radius:20px;
  border:1.5px solid var(--border);background:var(--bg);color:var(--text-muted);
  cursor:pointer;transition:all .15s;
}
.nrm-quick-btn:hover{border-color:var(--primary);color:var(--primary);background:rgba(46,139,110,.06);}
.nrm-quick-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
.nrm-repeat-row{display:flex;gap:8px;align-items:center;margin-bottom:20px;}
.nrm-repeat-sel{padding:7px 10px;border:1.5px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text);font-size:12px;outline:none;font-family:'Inter',sans-serif;}
.nrm-footer{display:flex;gap:10px;padding:0 22px 20px;}
.nrm-btn-save{flex:1;padding:10px;border-radius:10px;background:var(--primary);color:#fff;font-weight:700;font-size:13px;border:none;cursor:pointer;font-family:'Inter',sans-serif;transition:all .15s;}
.nrm-btn-save:hover{opacity:.9;}
.nrm-btn-clear{padding:10px 16px;border-radius:10px;background:rgba(239,68,68,.1);color:var(--red);font-weight:600;font-size:12px;border:1px solid rgba(239,68,68,.2);cursor:pointer;font-family:'Inter',sans-serif;transition:all .15s;}
.nrm-btn-clear:hover{background:rgba(239,68,68,.2);}
.nrm-btn-cancel{padding:10px 16px;border-radius:10px;background:var(--bg);color:var(--text-muted);font-weight:600;font-size:12px;border:1px solid var(--border);cursor:pointer;font-family:'Inter',sans-serif;}

/* Reminder notification toast */
.nr-notify{
  position:fixed;bottom:24px;right:24px;z-index:99999;
  background:linear-gradient(135deg,#f59e0b,#d97706);
  color:#fff;padding:14px 18px;border-radius:14px;
  box-shadow:0 8px 32px rgba(245,158,11,.4);
  display:flex;align-items:flex-start;gap:12px;min-width:280px;max-width:360px;
  animation:nr-slidein .3s ease;
}
@keyframes nr-slidein{from{transform:translateX(120%);opacity:0;}to{transform:translateX(0);opacity:1;}}
.nr-notify-icon{font-size:22px;flex-shrink:0;margin-top:1px;}
.nr-notify-body{flex:1;}
.nr-notify-title{font-size:13px;font-weight:700;margin-bottom:2px;}
.nr-notify-msg{font-size:11px;opacity:.9;}
.nr-notify-countdown{font-size:10px;opacity:.7;margin-top:4px;}
.nr-notify-countdown strong{opacity:1;}
.nr-notify-close{font-size:16px;cursor:pointer;opacity:.8;flex-shrink:0;padding:2px;}

/* Left panel reminder indicator on nl-item */
.nl-item .nl-reminder{font-size:10px;margin-top:2px;display:flex;align-items:center;gap:3px;}
.nl-item .nl-reminder.overdue{color:var(--red);}
.nl-item .nl-reminder.soon{color:#d97706;}
.nl-item .nl-reminder.set{color:var(--text-faint);}

/* ── Big checklist button ───────────────────────────────────── */
.nf-checklist-btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 22px;border-radius:10px;cursor:pointer;
  font-size:13.5px;font-weight:700;color:#fff;letter-spacing:.1px;
  background:linear-gradient(135deg,#2E8B6E 0%,#3AA07F 100%);
  border:none;outline:none;transition:all .18s;
  box-shadow:0 2px 10px rgba(46,139,110,.4);font-family:'Inter',sans-serif;
}
.nf-checklist-btn:hover{box-shadow:0 6px 18px rgba(46,139,110,.5);}
.nf-checklist-btn:active{box-shadow:0 2px 8px rgba(46,139,110,.3);}

/* ── Color dot selected ─────────────────────────────────────── */
.nc-color-dot{transition:all .15s;cursor:pointer;}
.nc-color-dot.selected{transform:scale(1.35);outline:2px solid var(--primary);outline-offset:2px;}
[data-theme=dark] .nc-color-dot.selected{outline-color:#7ED6C9;}
/* ── Notes list panel drag-to-reorder ─────────────────────────────── */
.nl-drag-handle {
  display: inline-block;
  font-size: 14px;
  color: var(--text-faint);
  cursor: grab;
  padding: 0 4px 0 0;
  user-select: none;
  opacity: 0;
  transition: opacity .15s;
  flex-shrink: 0;
  line-height: 1;
}
.nl-item:hover .nl-drag-handle { opacity: 0.6; }
.nl-draggable { position: relative; }
.nl-drag-active { opacity: 0.4 !important; }
.nl-drag-over {
  border-color: var(--primary) !important;
  background: rgba(46,139,110,0.06) !important;
  box-shadow: 0 0 0 2px rgba(46,139,110,0.2);
}

/* ── KPI card color variants ───────────────────────────────────────── */
.kpi-card.amber{background:linear-gradient(135deg,#92400E 0%,#D97706 100%);color:#fff;border-color:rgba(255,255,255,0.1);}
.kpi-card.purple{background:linear-gradient(135deg,#4C1D95 0%,#6D28D9 100%);color:#fff;border-color:rgba(255,255,255,0.1);}

/* ── Client Portal / Portal Manager ─────────────────────────── */
.pm-tab{color:var(--text-muted)!important;border-bottom:2px solid transparent!important;}
.pm-tab.active{color:var(--primary)!important;border-bottom:2px solid var(--primary)!important;}
.pm-tab:hover{color:var(--text)!important;}

/* Timeline type selector buttons */
.tl-type-btn{padding:6px 12px;border:1.5px solid var(--border);border-radius:7px;background:var(--card);font-size:12px;font-weight:600;color:var(--text-muted);cursor:pointer;transition:all .15s;white-space:nowrap;}
.tl-type-btn:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-glow);}
.tl-type-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}

/* Notification panel font size override */
.notif-panel,.notif-item,.notif-title,.notif-sub,.notif-panel-title{font-size:12px!important;}
.notif-panel-title{font-size:13px!important;font-weight:700!important;}
.notif-title{font-size:12px!important;font-weight:500!important;}
.notif-sub{font-size:11px!important;}

/* ══════════════════════════════════════════
   Smart Date Input
   Used by: Domain, Hosting, Service, Email,
            Meeting date fields
   ══════════════════════════════════════════ */
.smart-date-wrap { position:relative; display:flex; align-items:center; width:100%; }
.smart-date-wrap input.smart-date-text { padding-right: 32px !important; font-family:'DM Mono',monospace; letter-spacing:.5px; }
.smart-date-wrap input.smart-date-text.date-error { border-color: var(--red) !important; box-shadow: 0 0 0 2px rgba(239,68,68,0.15); }
.smart-date-wrap .smart-date-cal-btn { position:absolute; right:8px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; color:var(--text-muted); padding:2px; display:flex; align-items:center; z-index:2; }
.smart-date-wrap .smart-date-cal-btn:hover { color:var(--primary); }
.smart-date-wrap input.smart-date-hidden { position:absolute; opacity:0; pointer-events:none; width:1px; height:1px; top:0; left:0; }
input.date-error { border-color: var(--red) !important; box-shadow: 0 0 0 2px rgba(239,68,68,0.15); }

/* Sidebar compact styles moved to layout.css */

/* ── Notes Page Layout Fix ──────────────────────────────────── */
#page-notes.active{display:flex!important;flex-direction:column;}
#page-notes>*{flex-shrink:0;}
#page-notes>div{height:100%;}

/* ── Nav Item Click Fix ─────────────────────────────────────── */
.nav-item span,.nav-item i,.nav-item svg{pointer-events:none;}

/* ══════════════════════════════════════════════════════════════
   DARK MODE FIX — Search inputs inside dropdowns
   All customer/domain/hosting/service/email search boxes use
   hardcoded background:#f8fafc which becomes white-on-white
   in dark mode. This override fixes all of them globally.
   Affects: #cust-drop-search, #dom-cust-search, #host-cust-search,
            #svc-cust-search, #bemail-cust-search, #stmt-cust-search,
            #rpt-cust-search, and any future similar inputs.
   ══════════════════════════════════════════════════════════════ */
[data-theme="dark"] input[style*="background:#f8fafc"],
[data-theme="dark"] input[style*="background: #f8fafc"] {
  background: var(--card) !important;
  color: var(--text) !important;
  border-color: var(--border-strong) !important;
}
[data-theme="dark"] input[style*="background:#f8fafc"]::placeholder,
[data-theme="dark"] input[style*="background: #f8fafc"]::placeholder {
  color: var(--text-faint) !important;
}
/* ID-based fallback — covers all known search inputs explicitly */
[data-theme="dark"] #cust-drop-search,
[data-theme="dark"] #dom-cust-search,
[data-theme="dark"] #host-cust-search,
[data-theme="dark"] #svc-cust-search,
[data-theme="dark"] #bemail-cust-search,
[data-theme="dark"] #stmt-cust-search,
[data-theme="dark"] #rpt-cust-search {
  background: var(--card) !important;
  color: var(--text) !important;
  border-color: var(--border-strong) !important;
}
[data-theme="dark"] #cust-drop-search::placeholder,
[data-theme="dark"] #dom-cust-search::placeholder,
[data-theme="dark"] #host-cust-search::placeholder,
[data-theme="dark"] #svc-cust-search::placeholder,
[data-theme="dark"] #bemail-cust-search::placeholder,
[data-theme="dark"] #stmt-cust-search::placeholder,
[data-theme="dark"] #rpt-cust-search::placeholder {
  color: var(--text-faint) !important;
}

/* ══════════════════════════════════════════════════════════════
   HR MODULE — Premium Detail View (Employee Profile)
   Companion to modules/hr.js · requires no HTML changes
   ══════════════════════════════════════════════════════════════ */

/* ── Modal shell: rounded premium card ────────────────────────── */
#hr-detail.modal, #hr-detail .modal{
  border-radius:22px !important;
  overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.28) !important;
}
/* subtle entrance polish for the detail modal */
#hr-detail.modal-overlay.open .modal{transform:translateY(0) scale(1);}

#hr-detail.modal, #hr-detail .modal{padding:26px 28px;}
[data-theme="dark"] #hr-detail.modal, [data-theme="dark"] #hr-detail .modal{background:#131c31;}

/* ── Info tiles (Contact / Email) ─────────────────────────────── */
#hr-detail-contact,#hr-detail-email{
  padding:12px 16px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--card);
  box-shadow:var(--shadow-sm,0 1px 3px rgba(0,0,0,.06));
  transition:border-color .18s, transform .18s, box-shadow .18s;
}
#hr-detail-contact:hover,#hr-detail-email:hover{
  border-color:rgba(46,139,110,.4);
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(46,139,110,.14);
}

/* ── Section titles (📄 Documents, 🏖️ Leave Records etc.) ─────── */
#hr-detail h4, #hr-detail .hr-sec-title{
  font-size:13px !important;
  font-weight:800;
  letter-spacing:.4px;
  margin:18px 0 10px;
  display:flex;
  align-items:center;
  gap:8px;
}
#hr-detail h4::after, #hr-detail .hr-sec-title::after{
  content:'';
  flex:1;
  height:1px;
  background:linear-gradient(90deg,var(--border),transparent);
}

/* ── Document & Leave cards (direct children rendered by JS) ──── */
#hr-detail-documents > div:not([style*="text-align"]),
#hr-detail-leaves > div:not([style*="text-align"]){
  background:var(--card) !important;
  border:1px solid var(--border) !important;
  border-radius:14px !important;
  box-shadow:var(--shadow-sm,0 1px 3px rgba(0,0,0,.05));
  transition:border-color .18s, transform .18s, box-shadow .18s !important;
}
#hr-detail-documents > div:not([style*="text-align"]):hover,
#hr-detail-leaves > div:not([style*="text-align"]):hover{
  border-color:rgba(46,139,110,.45) !important;
  transform:translateX(3px);
  box-shadow:0 8px 22px rgba(46,139,110,.13);
}
[data-theme="dark"] #hr-detail-documents > div:not([style*="text-align"]),
[data-theme="dark"] #hr-detail-leaves > div:not([style*="text-align"]){
  background:rgba(255,255,255,.03) !important;
  border-color:rgba(255,255,255,.09) !important;
}

/* ── Action buttons on doc cards ──────────────────────────────── */
#hr-detail-documents .btn, #hr-detail-leaves .btn{
  transition:all .16s;
}
#hr-detail-documents .btn:hover, #hr-detail-leaves .btn:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(0,0,0,.14);
}

/* ── Upload rows: premium file inputs ─────────────────────────── */
#hr-detail label, #hr-detail .hr-upload-label{
  display:block;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--text-faint);
  margin:14px 0 6px;
}
#hr-detail input[type="file"]{
  width:100%;
  padding:9px 12px;
  border:1.5px dashed var(--border-strong);
  border-radius:12px;
  background:var(--bg);
  font-size:12px;
  color:var(--text-mid);
  cursor:pointer;
  transition:border-color .18s, background .18s;
}
#hr-detail input[type="file"]:hover{
  border-color:var(--primary);
  background:rgba(46,139,110,.05);
}
#hr-detail input[type="file"]::file-selector-button{
  margin-right:12px;
  padding:7px 16px;
  border:none;
  border-radius:9px;
  background:linear-gradient(135deg,#2E8B6E,#3AA07F);
  color:#fff;
  font-size:11.5px;
  font-weight:700;
  font-family:'Inter',sans-serif;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(46,139,110,.35);
  transition:opacity .15s, transform .15s;
}
#hr-detail input[type="file"]::file-selector-button:hover{
  opacity:.92;
  transform:translateY(-1px);
}

/* ── Add Leave button ─────────────────────────────────────────── */
#hr-detail .btn-outline{
  border-radius:10px;
  font-weight:600;
  transition:all .16s;
}
#hr-detail .btn-outline:hover{
  border-color:var(--primary);
  color:var(--primary);
  background:rgba(46,139,110,.07);
}

/* ── Status log rows polish ───────────────────────────────────── */
#hr-detail-statuslog > div{
  border-bottom:1px dashed var(--border) !important;
}

/* ── Document preview modal ───────────────────────────────────── */
#doc-preview.modal, #doc-preview .modal{
  border-radius:20px !important;
  max-height:85vh;
  overflow:auto;
  box-shadow:0 24px 70px rgba(0,0,0,.3) !important;
}
#doc-preview-title{
  font-family:'Inter',sans-serif;
  font-size:14px;
  font-weight:700;
}

/* ══════════════════════════════════════════════════════════════
   HR PHASE 1 — Attendance Calendar
   ══════════════════════════════════════════════════════════════ */
.hr-cal-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:4px;
}
.hr-cal-hdr{
  text-align:center;
  font-size:9.5px;
  font-weight:800;
  color:var(--text-faint);
  padding:4px 0;
  text-transform:uppercase;
  letter-spacing:.5px;
}
.hr-cal-day{
  aspect-ratio:1;
  border-radius:9px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11.5px;
  font-family:'DM Mono',monospace;
  color:var(--text-muted);
  cursor:pointer;
  transition:all .14s;
  position:relative;
  border:1px solid transparent;
  background:var(--bg);
}
.hr-cal-day:hover{
  transform:scale(1.08);
  border-color:rgba(46,139,110,.4);
  z-index:2;
}
.hr-cal-day.today{
  border:1.5px solid var(--primary);
  color:var(--primary);
  font-weight:800;
  box-shadow:0 0 0 2px rgba(46,139,110,.12);
}
.hr-cal-dot{
  position:absolute;
  bottom:3px;
  width:4px;
  height:4px;
  border-radius:50%;
}
@keyframes hrPulse{
  0%,100%{opacity:1;}
  50%{opacity:.5;}
}

/* HR dashboard KPI hover */
#hr-dash > .card{
  transition:transform .18s,box-shadow .18s;
}
#hr-dash > .card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow);
}

/* HR table — slightly tighter rows for 8 columns */
#page-hr tbody td{ padding:12px 14px; }
#page-hr tbody td:last-child{ padding-right:16px; }
#page-hr thead th{ padding:11px 14px; }
@media(max-width:1100px){
  #page-hr tbody td:nth-child(4), #page-hr thead th:nth-child(4){ display:none; }
}

/* ══════════════════════════════════════════════════════════════
   HR ATTENDANCE REGISTER — month grid
   ══════════════════════════════════════════════════════════════ */
.hr-reg-row{
  display:grid;
  align-items:stretch;
  border-bottom:1px solid var(--border);
}
.hr-reg-row:last-child{ border-bottom:none; }

.hr-reg-name{
  position:sticky;
  left:0;
  z-index:2;
  background:var(--card);
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-right:1px solid var(--border);
  cursor:pointer;
  transition:background .15s;
  min-width:0;
}
.hr-reg-name:hover{ background:var(--bg); }
.hr-reg-head{
  cursor:default;
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.8px;
  color:var(--text-faint);
  padding:10px 12px;
}
.hr-reg-head:hover{ background:var(--card); }

.hr-reg-day-hdr{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:9.5px;
  font-weight:800;
  color:var(--text-faint);
  font-family:'DM Mono',monospace;
  padding:10px 0;
  border-bottom:1px solid var(--border);
  background:var(--bg);
}
.hr-reg-day-hdr.sun{ color:var(--red); }
.hr-reg-day-hdr.today{
  color:var(--primary);
  box-shadow:inset 0 -2px 0 var(--primary);
}

.hr-reg-cell{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:10.5px;
  font-family:'DM Mono',monospace;
  cursor:pointer;
  min-height:34px;
  border-right:1px solid rgba(148,163,184,.07);
  transition:transform .1s, box-shadow .1s;
  color:var(--text-faint);
}
.hr-reg-cell:hover{
  transform:scale(1.12);
  box-shadow:0 2px 8px rgba(0,0,0,.18);
  border-radius:6px;
  z-index:3;
  position:relative;
}
.hr-reg-cell.sun{ background:rgba(148,163,184,.07); }
.hr-reg-cell.today{ box-shadow:inset 0 0 0 1.5px var(--primary); border-radius:6px; }

.hr-reg-tot{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:800;
  font-family:'DM Mono',monospace;
  padding:8px 0;
  border-left:1px solid var(--border);
  background:var(--bg);
  position:sticky;
  right:0;
}
[data-theme="dark"] .hr-reg-name{ background:#162035; }
[data-theme="dark"] .hr-reg-name:hover{ background:#1a2740; }
[data-theme="dark"] .hr-reg-day-hdr{ background:rgba(255,255,255,.03); }
[data-theme="dark"] .hr-reg-tot{ background:rgba(255,255,255,.03); }

/* ══════════════════════════════════════════════════════════════
   INCOME & EXPENSE — Phase A polish
   ══════════════════════════════════════════════════════════════ */
#modal-income .cmodal-header{background:linear-gradient(135deg,#047857,#10b981)!important;}
#fin-tabbtn-income,#fin-tabbtn-expenses,#fin-tabbtn-budget,#fin-tabbtn-pl{white-space:nowrap;}
#fin-income-list .table-card{overflow:visible;}
#fin-income-list tbody tr:hover td{background:linear-gradient(to right,rgba(16,185,129,0.04),transparent);}
#modal-accounts .modal-body{max-height:70vh;overflow-y:auto;}
#fin-accounts-list{border:1px solid var(--border);border-radius:12px;overflow:hidden;}

/* ══════════════════════════════════════════════════════════════
   NOTICE BOARD MODULE — modules/noticeboard.js
   Super Admin cards & chips · staff dashboard strip · modal
   (category chips, live preview, audience picker, pin switch)
   ══════════════════════════════════════════════════════════════ */

/* ── Staff dashboard strip ── */
#staff-notice-strip{flex-direction:column;align-items:flex-start;gap:10px}
.staff-notice-card{
  width:50%;min-width:320px;max-width:100%;box-sizing:border-box;
  position:relative;border-radius:14px;padding:14px 16px 12px;
  background:var(--card,#fff);border:1px solid var(--border,#e5e7eb);
  box-shadow:0 1px 3px rgba(15,23,42,.07),0 4px 14px -6px rgba(15,23,42,.08);
  display:flex;align-items:flex-start;gap:13px;
  animation:nbIn .35s cubic-bezier(.2,.9,.3,1.2) both;
  transition:box-shadow .2s ease,transform .2s ease;
}
.staff-notice-card:hover{box-shadow:0 4px 10px rgba(15,23,42,.10),0 10px 24px -8px rgba(15,23,42,.14);transform:translateY(-1px)}
.staff-notice-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:14px 0 0 14px;background:var(--nb-accent,#35A79B)}
.staff-notice-card.nb-pinned{background:linear-gradient(120deg,#fef3c7cc,#fffbeb 55%,var(--card,#fff));border-color:#f59e0b66}
.staff-notice-card.nb-urgent{border-color:#ef444477;box-shadow:0 0 0 3px #ef44441a,0 4px 14px -6px rgba(239,68,68,.25);animation:nbIn .35s cubic-bezier(.2,.9,.3,1.2) both,nbPulse 2.2s ease-in-out 1s infinite}
@keyframes nbIn{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes nbPulse{0%,100%{box-shadow:0 0 0 3px #ef44441a,0 4px 14px -6px rgba(239,68,68,.25)}50%{box-shadow:0 0 0 6px #ef444426,0 4px 18px -6px rgba(239,68,68,.35)}}
.nb-strip-icon{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0;background:color-mix(in srgb,var(--nb-accent,#35A79B) 14%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--nb-accent,#35A79B) 28%,transparent)}
.nb-strip-new{display:inline-block;font-size:7.5px;font-weight:600;letter-spacing:.4px;color:#fff;background:linear-gradient(90deg,#0F5257,#2E8B6E);border-radius:5px;padding:1.5px 6px;margin-left:7px;vertical-align:2px;animation:nbBlink 1.6s ease-in-out infinite}
@keyframes nbBlink{0%,100%{opacity:1}50%{opacity:.55}}
.nb-strip-x{opacity:0;background:#f1f5f9;border:none;cursor:pointer;color:#64748b;font-size:13px;width:26px;height:26px;border-radius:8px;flex-shrink:0;line-height:1;transition:opacity .15s,background .15s,color .15s}
.staff-notice-card:hover .nb-strip-x{opacity:1}
.nb-strip-x:hover{background:#fee2e2;color:#ef4444}
@media (max-width:900px){.staff-notice-card{width:100%;min-width:0}}

/* ── Super Admin page: chips & cards ── */
.nb-chip{cursor:pointer;padding:7px 14px;border-radius:999px;font-size:12.5px;font-weight:600;border:1px solid var(--border,#e5e7eb);background:var(--card,#fff);color:var(--text-mid,#64748b);user-select:none;display:inline-flex;align-items:center;gap:6px;transition:all .18s ease;box-shadow:0 1px 2px rgba(15,23,42,.05)}
.nb-chip:hover{transform:translateY(-1px);box-shadow:0 3px 8px rgba(15,23,42,.10)}
.nb-chip.off{opacity:.42}
.nb-chip .cnt{font-size:10.5px;font-weight:800;background:rgba(120,120,140,.12);border-radius:999px;padding:1px 7px}
.nb-chip.on .cnt{background:rgba(255,255,255,.28)}
.nb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:14px}
.nb-card{
  position:relative;background:var(--card,#fff);border:1px solid var(--border,#e5e7eb);
  border-radius:16px;padding:16px 18px;display:flex;flex-direction:column;gap:10px;min-width:0;
  box-shadow:0 1px 3px rgba(15,23,42,.06),0 6px 18px -8px rgba(15,23,42,.08);
  transition:transform .2s ease,box-shadow .2s ease;
  animation:nbIn .3s ease both;
}
.nb-card:hover{transform:translateY(-2px);box-shadow:0 4px 10px rgba(15,23,42,.09),0 14px 30px -10px rgba(15,23,42,.15)}
.nb-card.expired{opacity:.62}
.nb-card.nb-urgent-card{box-shadow:0 0 0 3px #ef444417,0 1px 3px rgba(15,23,42,.06)}
.nb-card .nb-title{font-weight:700;font-size:14.5px;line-height:1.35;word-break:break-word}
.nb-card .nb-body{font-size:13px;color:var(--text-mid,#64748b);line-height:1.6;word-break:break-word}
.nb-badge{font-size:10px;font-weight:700;padding:2.5px 9px;border-radius:7px;white-space:nowrap;letter-spacing:.3px}
.nb-pinflag{font-size:10px;font-weight:800;color:#b45309;background:#fef3c7;border:1px solid #fcd34d;border-radius:7px;padding:2px 8px}
.nb-actions{display:flex;gap:5px;flex-shrink:0;opacity:.55;transition:opacity .15s}
.nb-card:hover .nb-actions{opacity:1}
.nb-actions .btn{padding:4px 9px;font-size:13px}
.nb-meta{display:flex;flex-wrap:wrap;gap:5px 14px;font-size:11.5px;color:var(--text-faint,#94a3b8);margin-top:auto}
.nb-readwrap{margin-top:2px}
.nb-readbar{height:5px;border-radius:99px;background:#e2e8f0;overflow:hidden;margin-bottom:4px}
.nb-readbar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#10b981,#34d399);transition:width .4s ease}
.nb-readtxt{font-size:10.5px;font-weight:600;color:#059669}
.nb-clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.nb-open .nb-clamp{display:block;-webkit-line-clamp:unset;overflow:visible}
.nb-more{background:none;border:none;padding:0;margin-top:4px;font-size:11.5px;font-weight:700;color:var(--primary,#26755C);cursor:pointer}

/* ── Modal: category chips, live preview, audience picker ── */
.nb-catchips{display:flex;flex-wrap:wrap;gap:7px;margin-top:2px}
.nb-catchip{cursor:pointer;border:1.5px solid var(--border,#e5e7eb);background:var(--card,#fff);border-radius:999px;padding:5px 12px 5px 9px;font-size:12px;font-weight:600;color:var(--text-mid,#64748b);display:inline-flex;align-items:center;gap:6px;transition:all .15s ease;user-select:none}
.nb-catchip:hover{transform:translateY(-1px)}
.nb-catchip.on{color:#fff;box-shadow:0 3px 8px -2px rgba(15,23,42,.3)}
#nb-f-icon{display:none!important}
.nb-charcount{font-size:10.5px;color:var(--text-faint,#94a3b8);text-align:right;margin-top:2px}
.nb-livepreview{margin:4px 0 2px;border:1px dashed var(--border,#cbd5e1);border-radius:12px;padding:11px 13px;background:linear-gradient(120deg,#f8fafc,#f1f5f9)}
.nb-livepreview .lp-label{font-size:9.5px;font-weight:800;letter-spacing:1px;color:#94a3b8;margin-bottom:7px}
.nb-lp-card{display:flex;gap:11px;align-items:flex-start;background:#fff;border:1px solid #e2e8f0;border-left:4px solid #35A79B;border-radius:11px;padding:10px 12px;box-shadow:0 2px 6px rgba(15,23,42,.06)}
.nb-lp-icon{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;background:#35A79B22}
.nb-lp-title{font-weight:700;font-size:12.5px;line-height:1.3}
.nb-lp-body{font-size:11.5px;color:#64748b;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:2px}
.nb-lp-empty{font-size:11.5px;color:#94a3b8;font-style:italic}
.nb-aud{border:1.5px solid var(--border,#e5e7eb);border-radius:13px;background:var(--card,#fff);padding:12px 14px;box-shadow:0 1px 3px rgba(15,23,42,.05)}
.nb-aud>label.all-row{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;cursor:pointer;padding:2px 0 8px;border-bottom:1px solid var(--border,#eef2f7);margin-bottom:8px}
.nb-aud label{display:flex;align-items:center;gap:9px;font-size:13px;cursor:pointer;padding:4.5px 0}
.nb-aud label small{color:var(--text-faint,#94a3b8);font-size:11px}
.nb-aud-list{max-height:170px;overflow-y:auto}
.nb-aud-list label{border-radius:8px;padding:5px 8px;margin:0 -8px}
.nb-aud-list label:hover{background:#f1f5f9}
.nb-aud-list label.nb-off{opacity:.45;cursor:default}
.nb-aud-list label.nb-off:hover{background:none}
.nb-av{width:26px;height:26px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;color:#fff;background:linear-gradient(135deg,#2E8B6E,#3AA07F)}
#nb-aud-summary{font-size:11.5px;color:var(--text-faint,#94a3b8);margin-top:9px;padding-top:8px;border-top:1px dashed var(--border,#e2e8f0)}
#nb-aud-summary b{color:#059669}
.nb-quicksel{display:flex;gap:6px;margin:0 0 8px}
.nb-quicksel button{border:1px solid var(--border,#e2e8f0);background:#f8fafc;border-radius:7px;font-size:10.5px;font-weight:700;color:#64748b;padding:3px 10px;cursor:pointer}
.nb-quicksel button:hover{background:#e0e7ff;color:#26755C;border-color:#c7d2fe}
/* pin toggle */
.nb-pinrow{display:flex;align-items:center;gap:10px;margin-top:12px;cursor:pointer;user-select:none}
.nb-pinswitch{position:relative;width:38px;height:21px;border-radius:99px;background:#cbd5e1;transition:background .2s;flex-shrink:0}
.nb-pinswitch::after{content:'';position:absolute;top:2.5px;left:2.5px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .2s}
.nb-pinrow input{display:none}
.nb-pinrow input:checked + .nb-pinswitch{background:#f59e0b}
.nb-pinrow input:checked + .nb-pinswitch::after{left:19.5px}
.nb-pinrow span{font-size:13px;color:var(--text,#334155)}
.nb-pinrow small{color:var(--text-faint,#94a3b8);font-size:11px}

/* ── Notice Board dark-mode adjustments ── */
[data-theme="dark"] .nb-livepreview{background:linear-gradient(120deg,rgba(255,255,255,.03),rgba(255,255,255,.06))}
[data-theme="dark"] .nb-lp-card{background:var(--card);border-color:var(--border-strong)}
[data-theme="dark"] .nb-readbar{background:rgba(255,255,255,.08)}
[data-theme="dark"] .nb-quicksel button{background:rgba(255,255,255,.04);border-color:var(--border-strong);color:var(--text-mid)}
[data-theme="dark"] .nb-strip-x{background:rgba(255,255,255,.06)}

/* ── Premium Post/Edit Announcement modal (JS-rebuilt layout) ── */
.nbx{border-radius:22px!important;overflow:hidden;padding:0!important;background:var(--card,#fff);
  box-shadow:0 30px 80px -12px rgba(15,23,42,.4)!important}
.nbx-head{background:linear-gradient(120deg,#0F5257 0%,#2E8B6E 100%);
  padding:20px 26px 18px;display:flex;align-items:center;gap:14px;position:relative}
.nbx-head::after{content:'';position:absolute;inset:0;background:radial-gradient(600px 80px at 20% 0%,rgba(255,255,255,.18),transparent);pointer-events:none}
.nbx-head-ic{width:44px;height:44px;border-radius:13px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);
  display:flex;align-items:center;justify-content:center;font-size:21px;flex-shrink:0;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 4px 12px rgba(0,0,0,.18)}
.nbx-head-t{color:#fff!important;font-size:16.5px!important;font-weight:800!important;letter-spacing:-.2px;background:none!important}
.nbx-head-s{color:rgba(255,255,255,.78);font-size:11.5px;margin-top:3px;font-weight:500}
.nbx-x{margin-left:auto;width:30px;height:30px;border-radius:9px;border:none;background:rgba(255,255,255,.15);
  color:#fff;font-size:14px;cursor:pointer;flex-shrink:0;transition:all .2s;display:flex;align-items:center;justify-content:center}
.nbx-x:hover{background:rgba(255,255,255,.3);transform:rotate(90deg)}

.nbx-grid{display:grid;grid-template-columns:1.45fr 1fr;gap:22px;padding:22px 26px}
@media (max-width:860px){.nbx-grid{grid-template-columns:1fr;padding:18px}}
.nbx-sec{margin-bottom:15px;min-width:0}
.nbx-label{font-size:10.5px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;
  color:var(--text-faint,#94a3b8);display:flex;align-items:center;gap:6px;margin:0 0 7px}
.nbx-label .req{color:#ef4444}
.nbx-opt{text-transform:none;letter-spacing:.2px;font-weight:600;font-size:10px;color:var(--text-faint);opacity:.8}
.nbx-row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:520px){.nbx-row2{grid-template-columns:1fr}}

/* inputs — soft, rounded, glowing focus */
.nbx .form-input{width:100%;box-sizing:border-box;border-radius:12px!important;
  border:1.5px solid var(--border,#e2e8f0)!important;background:var(--bg,#f8fafc)!important;
  padding:11px 14px!important;font-size:13.5px!important;color:var(--text,#1e293b)!important;
  outline:none;transition:border-color .15s,box-shadow .15s,background .15s}
.nbx .form-input:focus{border-color:#2E8B6E!important;box-shadow:0 0 0 4px rgba(46,139,110,.13)!important;background:var(--card,#fff)!important}
.nbx textarea.form-input{min-height:112px;resize:vertical;line-height:1.65}
[data-theme="dark"] .nbx .form-input:focus{background:var(--card)!important}

/* side panel — preview + audience */
.nbx-side{background:linear-gradient(160deg,#f8faff 0%,#f4f2ff 100%);border:1px solid #e6e8fb;border-radius:16px;
  padding:15px 15px 13px;align-self:start;min-width:0}
[data-theme="dark"] .nbx-side{background:linear-gradient(160deg,rgba(46,139,110,.09),rgba(58,160,127,.06));border-color:rgba(58,160,127,.25)}
.nbx-side-lbl{font-size:9.5px;font-weight:800;letter-spacing:1.4px;color:#6FC7B8;margin:0 0 9px}
.nbx-side .nbx-side-lbl:nth-of-type(2){margin-top:15px}
@media (max-width:860px){.nbx-side{position:static}}

.nbx .nb-livepreview{margin:0;background:var(--card,#fff);border:1px solid var(--border,#e2e8f0);border-radius:13px;padding:12px}
.nbx .nb-livepreview .lp-label{font-size:9px}
.nbx .nb-lp-card{box-shadow:0 3px 10px rgba(15,23,42,.08)}
.nbx .nb-aud{background:var(--card,#fff);border-radius:13px}

/* category chips — bigger, softer */
.nbx .nb-catchips{gap:8px}
.nbx .nb-catchip{border-radius:11px;padding:7px 13px;font-size:12.5px;background:var(--bg,#f8fafc)}
.nbx .nb-catchip.on{transform:translateY(-1px)}

/* pin switch vertical alignment inside the row */
.nbx .nb-pinrow{margin-top:9px}
.nbx .nb-pinrow>span:last-child{font-size:13px;color:var(--text,#334155)}

/* footer — gradient primary button (holds #nb-post-label) */
.nbx .modal-footer{padding:14px 26px!important;border-top:1px solid var(--border,#eef2f7);background:var(--bg,#f8fafc)}
.nbx button:has(#nb-post-label){background:linear-gradient(90deg,#26755C,#2E8B6E)!important;color:#fff!important;
  border:none!important;padding:10px 24px!important;border-radius:11px!important;font-weight:700!important;font-size:13px!important;
  box-shadow:0 4px 14px rgba(46,139,110,.4)!important;transition:all .18s!important}
.nbx button:has(#nb-post-label):hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(46,139,110,.5)!important}
/* ── form spacing fixes (v3) ── */
.nbx .form-input{padding:8px 13px!important;font-size:13px!important}
.nbx input.form-input{height:38px}
.nbx textarea.form-input{min-height:84px}
.nbx-sec{margin-bottom:11px}
.nbx-grid{gap:18px;padding:18px 24px}
.nbx-label{margin-bottom:5px}
.nbx .nb-catchip{padding:6px 12px;font-size:12px}

/* ══════════════════════════════════════════════════════════════
   PREMIUM PAGE HEADER — gradient banner for all module pages
   (applied by applyPremiumHeaders() in router.js)
   ══════════════════════════════════════════════════════════════ */
.page-header.ph-premium{
  align-items:center;
  padding:20px 26px;
  border-radius:18px;
  background:linear-gradient(120deg,#0F5257 0%,#2E8B6E 100%);
  border:1px solid rgba(255,255,255,0.16);
  box-shadow:0 10px 30px -8px rgba(46,139,110,0.45);
  position:relative;
  overflow:hidden;
  margin-bottom:22px;
}
.page-header.ph-premium::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(600px 90px at 18% 0%,rgba(255,255,255,0.16),transparent 70%);
}
/* decorative background shapes (like Staff Management header) —
   layered soft-glow circles, purely visual */
.page-header.ph-premium::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(520px 240px at 96% -40%,rgba(255,255,255,0.14),transparent 62%),
    radial-gradient(340px 190px at 78% 135%,rgba(255,255,255,0.08),transparent 60%),
    radial-gradient(150px 150px at 5% 55%,rgba(255,255,255,0.10),transparent 70%),
    radial-gradient(260px 130px at 45% -60%,rgba(255,255,255,0.07),transparent 60%);
}
.page-header.ph-premium > *{position:relative;z-index:1;}
.page-header.ph-premium .ph-icon{
  width:46px;height:46px;border-radius:13px;flex-shrink:0;
  background:rgba(255,255,255,0.16);border:1px solid rgba(255,255,255,0.28);
  display:flex;align-items:center;justify-content:center;font-size:22px;
  box-shadow:0 4px 12px rgba(0,0,0,0.18);
  margin-right:14px;
}
.page-header.ph-premium .page-title{
  color:#fff;font-size:22px;font-weight:800;letter-spacing:-.3px;
}
.page-header.ph-premium .page-subtitle{color:rgba(255,255,255,0.78);margin-top:3px}
/* action buttons — contrast on the gradient */
.page-header.ph-premium .header-actions .btn-primary{
  background:#fff;color:#0F5257;
  box-shadow:0 3px 12px rgba(0,0,0,0.22);
}
.page-header.ph-premium .header-actions .btn-primary:hover{background:#eef1ff}
.page-header.ph-premium .header-actions .btn-outline{
  background:rgba(255,255,255,0.14);border-color:rgba(255,255,255,0.45);color:#fff;
}
.page-header.ph-premium .header-actions .btn-outline:hover{background:rgba(255,255,255,0.26);color:#fff}

/* ── Staff Management — same blue gradient everywhere ── */
/* Page header (staff.js renders its own premium header — force the brand gradient) */
#page-staff .page-header,
#page-staff .page-header.ph-premium{
  background:linear-gradient(120deg,#0F5257 0%,#2E8B6E 100%)!important;
  border:1px solid rgba(255,255,255,0.16)!important;
  box-shadow:0 10px 30px -8px rgba(33,60,142,0.45)!important;
}
#page-staff .page-header::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(520px 240px at 96% -40%,rgba(255,255,255,0.14),transparent 62%),
    radial-gradient(340px 190px at 78% 135%,rgba(255,255,255,0.08),transparent 60%),
    radial-gradient(150px 150px at 5% 55%,rgba(255,255,255,0.10),transparent 70%),
    radial-gradient(260px 130px at 45% -60%,rgba(255,255,255,0.07),transparent 60%);
}
#page-staff .page-header > *{position:relative;z-index:1;}
#page-staff .page-header{position:relative;overflow:hidden}
#page-staff .page-header .page-title{color:#fff!important}
#page-staff .page-header .page-subtitle{color:rgba(255,255,255,0.78)!important}
#page-staff .page-header .header-actions .btn-primary{background:#fff!important;color:#0F5257!important}
#page-staff .page-header .header-actions .btn-primary:hover{background:#eef1ff!important}

/* Staff modals: Add Staff, Module Access, Status, Reset Password */
#modal-add-staff .cmodal-header,
#modal-staff-perms .cmodal-header,
#modal-staff-status .cmodal-header,
#modal-staff-password .cmodal-header{
  background:linear-gradient(120deg,#0F5257 0%,#2E8B6E 100%)!important;
}

/* ── Staff Management buttons — blue theme ── */
/* "+ Add Staff" — gradient fill instead of white */
#page-staff .page-header .btn-primary{
  background:linear-gradient(120deg,#0F5257 0%,#2E8B6E 100%)!important;
  color:#fff!important;border:none!important;
  box-shadow:0 3px 12px rgba(33,60,142,0.35)!important;
  border-radius:9px!important;
}
#page-staff .page-header .btn-primary:hover{
  box-shadow:0 6px 18px rgba(33,60,142,0.5)!important;
  transform:translateY(-1px);
}

/* Table action buttons (Access / Status / Reset / Revoke / Delete) — uniform outline */
#staff-table-body button{
  background:#fff!important;
  border:1px solid rgba(88,95,225,0.35)!important;
  color:#0F5257!important;
  border-radius:8px!important;
  font-weight:600!important;
  transition:all .15s ease!important;
}
#staff-table-body button:hover{
  background:rgba(88,95,225,0.08)!important;
  border-color:#2E8B6E!important;
  transform:translateY(-1px);
  box-shadow:0 3px 8px rgba(33,60,142,0.15);
}
/* destructive actions keep a red accent */
#staff-table-body button[onclick*="evoke"],
#staff-table-body button[onclick*="elete"]{
  border-color:rgba(239,68,68,0.35)!important;
  color:#DC2626!important;
}
#staff-table-body button[onclick*="evoke"]:hover,
#staff-table-body button[onclick*="elete"]:hover{
  background:rgba(239,68,68,0.06)!important;
  border-color:#EF4444!important;
  box-shadow:0 3px 8px rgba(239,68,68,0.15);
}

/* ── Staff modals: breathing room at top of body ── */
/* Status & Reset modals have no section-label (which normally supplies the
   top margin), so their first field sat flush against the header. */
#modal-staff-status   .modal-customer-enhanced > div:nth-of-type(2),
#modal-staff-password .modal-customer-enhanced > div:nth-of-type(2){
  padding-top:18px !important;
}
/* also give Add Staff / Module Access a touch more air under the header */
#modal-add-staff .modal-customer-enhanced .cmodal-section-label:first-of-type,
#modal-staff-perms .modal-customer-enhanced .cmodal-section-label:first-of-type{
  margin-top:18px;
}

/* ── GLOBAL modal header — brand blue gradient ── */
/* ID-scoped rules didn't catch staff modals (staff.js builds its own header),
   so apply the brand gradient to EVERY enhanced-modal header app-wide. */
.modal-overlay .cmodal-header{
  background:linear-gradient(120deg,#0F5257 0%,#2E8B6E 100%)!important;
}
/* semantic-colored modals keep their meaning */
#modal-income  .cmodal-header{background:linear-gradient(135deg,#047857,#10b981)!important}
#modal-expense .cmodal-header{background:linear-gradient(135deg,#b91c1c,#ef4444)!important}
#modal-budget  .cmodal-header{background:linear-gradient(135deg,#b45309,#f59e0b)!important}