/*
* nb-theme.css — NidhiBook Global Theme Tokens
* ------------------------------------------------
* Single source of truth for light / dark theming.
* Toggle by setting data-theme="light" | "dark" on .
* JS helper: nbTheme.toggle() / nbTheme.apply('dark') / nbTheme.get()
*
* Usage in any page:
*
* (optional helper)
*
* Then consume tokens as:
* background: var(--nb-bg);
* color: var(--nb-text-1);
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
/* ═══════════════════════════════════════════════════════
LIGHT TOKENS (default / :root)
═══════════════════════════════════════════════════════ */
:root,
[data-theme="light"] {
/* Surfaces */
--nb-bg: #f0f4f8;
--nb-bg2: #ffffff;
--nb-bg3: #f8fafc;
--nb-sidebar-bg: #ffffff;
--nb-sidebar-bdr: #e8edf2;
--nb-card-bg: #ffffff;
--nb-card-bdr: #e2e8f0;
--nb-card-hover: #f1f5f9;
/* Text */
--nb-text-1: #0f172a;
--nb-text-2: #475569;
--nb-text-3: #94a3b8;
/* Tooltip */
--nb-tip-bg: #1e293b;
--nb-tip-txt: #f1f5f9;
--nb-tip-bdr: #334155;
/* Ambient blobs */
--nb-blob-a: rgba(37,99,235,.10);
--nb-blob-b: rgba(16,185,129,.08);
/* Sidebar items — chrome blue */
--nb-s-icon: #64748b;
--nb-s-hover-bg: rgba(37,99,235,.08);
--nb-s-hover-col: #2563eb;
--nb-s-act-bg: rgba(37,99,235,.10);
--nb-s-act-col: #1d4ed8;
--nb-s-act-bdr: rgba(37,99,235,.30);
--nb-s-div: #e2e8f0;
/* Panel headings */
--nb-panel-hd-i: #94a3b8;
--nb-panel-hd-t: #64748b;
--nb-panel-bdr: #e2e8f0;
/* Sidebar Extended Tokens */
--nb-sidebar-search-bg: #f8fafc;
--nb-sidebar-search-bdr: #e2e8f0;
--nb-sidebar-item-col: #475569;
--nb-sidebar-item-h-bg: rgba(242, 101, 34, 0.08);
--nb-sidebar-item-h-col: #f26522;
--nb-sidebar-item-a-bg: rgba(242, 101, 34, 0.12);
--nb-sidebar-item-a-col: #f26522;
--nb-sidebar-item-a-bdr: #f26522;
--nb-sidebar-icon-bg: rgba(0, 0, 0, 0.03);
--nb-sidebar-icon-col: #94a3b8;
--nb-sidebar-icon-a-bg: rgba(242, 101, 34, 0.15);
--nb-sidebar-icon-a-col: #f26522;
--nb-sidebar-brand-bg: #ffffff;
/* Table rows */
--nb-row-hover: #f8fafc;
--nb-row-bdr: #f1f5f9;
--nb-name-col: #1e293b;
--nb-sub-col: #94a3b8;
/* Back / ghost buttons */
--nb-back-bg: #f1f5f9;
--nb-back-bdr: #e2e8f0;
--nb-back-col: #475569;
--nb-back-hbg: #e2e8f0;
--nb-back-hcol: #1e293b;
/* Banner / highlight strip — chrome blue */
--nb-ban-bg: rgba(37,99,235,.05);
--nb-ban-bdr: rgba(37,99,235,.18);
--nb-ban-ico-bg: rgba(37,99,235,.10);
--nb-ban-ico-col: #2563eb;
--nb-ban-title: #1e293b;
--nb-ban-sub: #64748b;
/* Chips / pills */
--nb-chip-bg: #f1f5f9;
--nb-chip-bdr: #e2e8f0;
--nb-chip-col: #475569;
--nb-chip-i: #10b981;
/* Status bar (outlet bar) — chrome blue */
--nb-status-bg: #ffffff;
--nb-status-bdr: rgba(37,99,235,.22);
--nb-status-col: #1e293b;
--nb-status-shadow:0 2px 12px rgba(37,99,235,.08);
--nb-status-item-bg: rgba(37,99,235,.06);
--nb-status-item-bdr: rgba(37,99,235,.18);
--nb-status-lbl: #2563eb;
--nb-status-val: #1e293b;
--nb-close-bg: rgba(239,68,68,.10);
--nb-close-bdr: rgba(239,68,68,.25);
--nb-close-col: #dc2626;
/* Footer bar — chrome blue, brand-strong stays orange */
--nb-footer-bg: #ffffff;
--nb-footer-bdr: rgba(37,99,235,.18);
--nb-footer-col: #64748b;
--nb-footer-shadow:0 -2px 12px rgba(37,99,235,.06);
--nb-footer-strong:#f26522;
--nb-footer-link: #2563eb;
--nb-footer-link-h:#1d4ed8;
--nb-footer-sep: rgba(37,99,235,.25);
/* Stat cards */
--nb-stat-bg: #ffffff;
--nb-stat-bdr: #e2e8f0;
--nb-stat-lbl: #94a3b8;
--nb-stat-hbdr: #c7d2fe;
/* Dashboard cards */
--nb-dash-bg: #ffffff;
--nb-dash-bdr: #e2e8f0;
--nb-dash-shadow: 0 4px 16px rgba(0,0,0,.06);
--nb-dash-hover-shadow: 0 12px 32px rgba(0,0,0,.10);
--nb-dash-val: #0f172a;
--nb-dash-lbl: #475569;
--nb-dash-icon-txt:#ffffff;
/* Brand orange (headers, CTAs — canonical hex for section bars) */
--nb-brand-orange: #ff9303;
/* Section headers (chart/table cards) */
--nb-section-bg: var(--nb-brand-orange);
--nb-section-col: #ffffff;
--nb-section-bdr: #d97706;
/* Chart / table card body */
--nb-chart-bg: #ffffff;
--nb-chart-bdr: #e2e8f0;
--nb-table-head-bg:#f8fafc;
--nb-table-head-col:#475569;
--nb-table-row-bdr:#f1f5f9;
--nb-table-row-hover:#f8fafc;
--nb-table-cell: #1e293b;
/* Role pills */
--nb-pill-sa-bg: rgba(239,68,68,.10); --nb-pill-sa-col:#dc2626; --nb-pill-sa-bdr:rgba(239,68,68,.20);
--nb-pill-ow-bg: rgba(37,99,235,.10); --nb-pill-ow-col:#1d4ed8; --nb-pill-ow-bdr:rgba(37,99,235,.20);
/* Inputs — chrome blue focus */
--nb-input-bg: #f8faff;
--nb-input-bdr: #dde3f8;
--nb-input-focus-bdr: #2563eb;
--nb-input-focus-shadow: rgba(37,99,235,.14);
--nb-input-col: #1e293b;
--nb-input-ph: #b0bec5;
--nb-input-icon: #94a3b8;
--nb-input-icon-focus: #2563eb;
/* Scrollbar */
--nb-scr-thumb: rgba(0,0,0,.12);
/* Login page — chrome blue ambient, brand orange CTA */
--nb-login-bg: linear-gradient(135deg,#eff6ff 0%,#f5f3ff 50%,#eef2ff 100%);
--nb-login-card-bg:#ffffff;
--nb-login-card-bdr:rgba(37,99,235,.10);
--nb-login-card-shadow:0 16px 48px rgba(37,99,235,.12),0 2px 8px rgba(0,0,0,.06);
--nb-login-title: #1e293b;
--nb-login-sub: #64748b;
--nb-login-support:#94a3b8;
--nb-login-footer: rgba(71,85,105,.7);
--nb-login-footer-a:rgba(37,99,235,.7);
--nb-login-footer-ah:#2563eb;
--nb-err-bg: #fef2f2;
--nb-err-bdr: #fecaca;
--nb-err-col: #dc2626;
/* Theme toggle icon */
--nb-theme-icon: '\f186';
}
/* ═══════════════════════════════════════════════════════
DARK TOKENS
═══════════════════════════════════════════════════════ */
[data-theme="dark"] {
/* Surfaces */
--nb-bg: #080c17;
--nb-bg2: #0f1420;
--nb-bg3: #0f1420;
--nb-sidebar-bg: rgba(10,14,26,.97);
--nb-sidebar-bdr: rgba(255,255,255,.055);
--nb-card-bg: rgba(255,255,255,.04);
--nb-card-bdr: rgba(255,255,255,.08);
--nb-card-hover: rgba(255,255,255,.07);
/* Text */
--nb-text-1: #f1f5f9;
--nb-text-2: #94a3b8;
--nb-text-3: rgba(255,255,255,.35);
/* Tooltip */
--nb-tip-bg: #1a2035;
--nb-tip-txt: #e2e8f0;
--nb-tip-bdr: rgba(255,255,255,.07);
/* Ambient blobs */
--nb-blob-a: rgba(37,99,235,.18);
--nb-blob-b: rgba(16,185,129,.13);
/* Sidebar items — chrome blue */
--nb-s-icon: rgba(255,255,255,.35);
--nb-s-hover-bg: rgba(37,99,235,.14);
--nb-s-hover-col: #93c5fd;
--nb-s-act-bg: rgba(37,99,235,.20);
--nb-s-act-col: #93c5fd;
--nb-s-act-bdr: rgba(37,99,235,.40);
--nb-s-div: rgba(255,255,255,.07);
/* Panel headings */
--nb-panel-hd-i: rgba(255,255,255,.28);
--nb-panel-hd-t: rgba(255,255,255,.55);
--nb-panel-bdr: rgba(255,255,255,.055);
/* Sidebar Extended Tokens */
--nb-sidebar-search-bg: rgba(255, 255, 255, 0.04);
--nb-sidebar-search-bdr: rgba(255, 255, 255, 0.08);
--nb-sidebar-item-col: rgba(255, 255, 255, 0.55);
--nb-sidebar-item-h-bg: rgba(242, 101, 34, 0.14);
--nb-sidebar-item-h-col: #ff8c52;
--nb-sidebar-item-a-bg: rgba(242, 101, 34, 0.20);
--nb-sidebar-item-a-col: #ff8c52;
--nb-sidebar-item-a-bdr: #f26522;
--nb-sidebar-icon-bg: rgba(255, 255, 255, 0.06);
--nb-sidebar-icon-col: rgba(255, 255, 255, 0.35);
--nb-sidebar-icon-a-bg: rgba(242, 101, 34, 0.25);
--nb-sidebar-icon-a-col: #ff8c52;
--nb-sidebar-brand-bg: #0f1420;
/* Table rows */
--nb-row-hover: rgba(255,255,255,.035);
--nb-row-bdr: rgba(255,255,255,.045);
--nb-name-col: #e2e8f0;
--nb-sub-col: rgba(255,255,255,.32);
/* Back / ghost buttons */
--nb-back-bg: rgba(255,255,255,.04);
--nb-back-bdr: rgba(255,255,255,.10);
--nb-back-col: rgba(255,255,255,.45);
--nb-back-hbg: rgba(255,255,255,.09);
--nb-back-hcol: rgba(255,255,255,.80);
/* Banner — chrome blue */
--nb-ban-bg: rgba(37,99,235,.10);
--nb-ban-bdr: rgba(37,99,235,.22);
--nb-ban-ico-bg: rgba(37,99,235,.22);
--nb-ban-ico-col: #93c5fd;
--nb-ban-title: #f1f5f9;
--nb-ban-sub: rgba(255,255,255,.40);
/* Chips */
--nb-chip-bg: rgba(255,255,255,.07);
--nb-chip-bdr: rgba(255,255,255,.09);
--nb-chip-col: rgba(255,255,255,.50);
--nb-chip-i: #6ee7b7;
/* Status bar — chrome blue */
--nb-status-bg: rgba(15,20,35,.92);
--nb-status-bdr: rgba(37,99,235,.25);
--nb-status-col: #e2e8f0;
--nb-status-shadow:0 2px 16px rgba(0,0,0,.25);
--nb-status-item-bg: rgba(37,99,235,.12);
--nb-status-item-bdr: rgba(37,99,235,.25);
--nb-status-lbl: rgba(147,197,253,.85);
--nb-status-val: #f1f5f9;
--nb-close-bg: rgba(239,68,68,.15);
--nb-close-bdr: rgba(239,68,68,.30);
--nb-close-col: #fca5a5;
/* Footer bar — chrome blue, brand-strong stays orange */
--nb-footer-bg: rgba(15,20,35,.95);
--nb-footer-bdr: rgba(37,99,235,.20);
--nb-footer-col: rgba(255,255,255,.45);
--nb-footer-shadow:0 -2px 16px rgba(0,0,0,.20);
--nb-footer-strong:#fbb591;
--nb-footer-link: rgba(147,197,253,.70);
--nb-footer-link-h:#93c5fd;
--nb-footer-sep: rgba(37,99,235,.30);
/* Stat cards */
--nb-stat-bg: rgba(255,255,255,.035);
--nb-stat-bdr: rgba(255,255,255,.07);
--nb-stat-lbl: rgba(255,255,255,.38);
--nb-stat-hbdr: rgba(255,255,255,.14);
/* Dashboard cards */
--nb-dash-bg: rgba(255,255,255,.04);
--nb-dash-bdr: rgba(255,255,255,.07);
--nb-dash-shadow: 0 4px 16px rgba(0,0,0,.20);
--nb-dash-hover-shadow: 0 12px 32px rgba(0,0,0,.35);
--nb-dash-val: #f1f5f9;
--nb-dash-lbl: rgba(255,255,255,.55);
--nb-dash-icon-txt:#ffffff;
/* Section headers — same brand orange as light (readable white-on-orange) */
--nb-section-bg: var(--nb-brand-orange);
--nb-section-col: #ffffff;
--nb-section-bdr: #d97706;
/* Chart / table card body */
--nb-chart-bg: rgba(255,255,255,.03);
--nb-chart-bdr: rgba(255,255,255,.06);
--nb-table-head-bg:rgba(255,255,255,.05);
--nb-table-head-col:rgba(255,255,255,.55);
--nb-table-row-bdr:rgba(255,255,255,.05);
--nb-table-row-hover:rgba(255,255,255,.04);
--nb-table-cell: #e2e8f0;
/* Role pills */
--nb-pill-sa-bg: rgba(239,68,68,.15); --nb-pill-sa-col:#fca5a5; --nb-pill-sa-bdr:rgba(239,68,68,.28);
--nb-pill-ow-bg: rgba(37,99,235,.15); --nb-pill-ow-col:#93c5fd; --nb-pill-ow-bdr:rgba(37,99,235,.28);
/* Inputs — chrome blue focus */
--nb-input-bg: rgba(255,255,255,.05);
--nb-input-bdr: rgba(255,255,255,.09);
--nb-input-focus-bdr: rgba(37,99,235,.70);
--nb-input-focus-shadow: rgba(37,99,235,.18);
--nb-input-col: #e2e8f0;
--nb-input-ph: rgba(255,255,255,.25);
--nb-input-icon: rgba(255,255,255,.30);
--nb-input-icon-focus: #93c5fd;
/* Scrollbar */
--nb-scr-thumb: rgba(255,255,255,.10);
/* Login page */
--nb-login-bg: #0b0f1a;
--nb-login-card-bg:rgba(15,20,35,.92);
--nb-login-card-bdr:rgba(255,255,255,.07);
--nb-login-card-shadow:0 24px 64px rgba(0,0,0,.50),inset 0 1px 0 rgba(255,255,255,.06);
--nb-login-title: #f1f5f9;
--nb-login-sub: rgba(255,255,255,.38);
--nb-login-support:rgba(255,255,255,.35);
--nb-login-footer: rgba(255,255,255,.30);
--nb-login-footer-a:rgba(255,255,255,.35);
--nb-login-footer-ah:rgba(255,255,255,.70);
--nb-err-bg: rgba(239,68,68,.12);
--nb-err-bdr: rgba(239,68,68,.30);
--nb-err-col: #fca5a5;
/* Theme toggle icon */
--nb-theme-icon: '\f185';
}
/* ═══════════════════════════════════════════════════════
UTILITY CLASSES (nb- prefix, safe globally)
═══════════════════════════════════════════════════════ */
/* Brand accents — NidhiBook orange/purple (CTAs, brand moments only) */
.nb-accent-bg { background: #f26522 !important; }
.nb-accent-text { color: #f26522 !important; }
.nb-accent-purple-bg { background: #6a1f8e !important; }
.nb-accent-purple-text { color: #6a1f8e !important; }
/* Chrome accent — trust blue (UI accents, links, focus) */
.nb-chrome-bg { background: #2563eb !important; }
.nb-chrome-text { color: #2563eb !important; }
/* Cards */
.nb-card {
background: var(--nb-card-bg);
border: 1px solid var(--nb-card-bdr);
border-radius: 16px;
box-shadow: 0 1px 6px rgba(0,0,0,.06);
transition: background .25s, border-color .25s;
}
.nb-card:hover { border-color: var(--nb-stat-hbdr); }
.nb-card-header {
background: #1e293b;
border-radius: 16px 16px 0 0;
padding: 1rem 1.25rem;
color: #fff;
font-weight: 700;
font-size: 1rem;
display: flex; align-items: center; gap: 10px;
border-bottom: 3px solid #f26522;
}
.nb-card-header i { color: #f26522; }
/* Brand variant when you DO want full orange header */
.nb-card-header.nb-brand { background: #f26522; border-bottom: none; }
.nb-card-header.nb-brand i { color: rgba(255,255,255,.85); }
/* Panels */
.nb-panel {
background: var(--nb-card-bg);
border: 1px solid var(--nb-card-bdr);
border-radius: 14px; overflow: hidden;
transition: background .25s, border-color .25s;
}
.nb-panel-hd {
padding: 13px 18px;
border-bottom: 1px solid var(--nb-panel-bdr);
display: flex; align-items: center; gap: 8px;
}
.nb-panel-hd i { color: var(--nb-panel-hd-i); font-size: 13px; }
.nb-panel-hd span { font-size: 11px; font-weight: 700; color: var(--nb-panel-hd-t); text-transform: uppercase; letter-spacing: .7px; }
.nb-panel-bd { padding: 16px 18px; }
/* Tables */
.nb-table { width: 100%; border-collapse: collapse; font-family: 'Inter', sans-serif; font-size: 13px; color: var(--nb-text-1); }
.nb-table th {
background: var(--nb-bg3); color: var(--nb-text-2);
font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
padding: 10px 14px; border-bottom: 1px solid var(--nb-card-bdr); white-space: nowrap;
}
.nb-table td {
padding: 10px 14px; border-bottom: 1px solid var(--nb-row-bdr);
vertical-align: middle; color: var(--nb-text-1);
transition: color .25s;
}
.nb-table tbody tr:hover { background: var(--nb-row-hover); }
/* Alignment utilities (BS5 names; base stack is Bootstrap 4) */
.text-end { text-align: right !important; }
.text-start { text-align: left !important; }
/* Buttons */
.nb-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 16px; border-radius: 9px;
font-size: 12.5px; font-weight: 600; font-family: 'Inter', sans-serif;
cursor: pointer; border: 1.5px solid transparent; transition: all .18s;
text-decoration: none; line-height: 1.4; white-space: nowrap;
}
.nb-btn-primary { background:#f26522; border-color:#f26522; color:#fff; box-shadow:0 3px 10px rgba(242,101,34,.35); }
.nb-btn-primary:hover { background:#d9571e; border-color:#d9571e; color:#fff; transform:translateY(-1px); }
.nb-btn-success { background:#10b981; border-color:#10b981; color:#fff; }
.nb-btn-success:hover { background:#059669; color:#fff; }
.nb-btn-danger { background:rgba(239,68,68,.1); border-color:rgba(239,68,68,.25); color:#ef4444; }
.nb-btn-danger:hover { background:#ef4444; color:#fff; border-color:#ef4444; }
.nb-btn-amber { background:#f59e0b; color:#fff; border-color:transparent; box-shadow:0 2px 8px rgba(245,158,11,.3); }
.nb-btn-amber:hover { transform:translateY(-2px); box-shadow:0 6px 16px rgba(245,158,11,.4); color:#fff; }
.nb-btn-ghost { background:var(--nb-back-bg); border-color:var(--nb-back-bdr); color:var(--nb-back-col); }
.nb-btn-ghost:hover { background:var(--nb-back-hbg); color:var(--nb-back-hcol); }
.nb-btn-sm { padding: 5px 11px; font-size: 11.5px; border-radius: 7px; }
/* Badges / pills */
.nb-badge {
display: inline-flex; align-items: center; gap: 4px;
font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 20px; letter-spacing: .3px;
}
.nb-badge-indigo { background:rgba(37,99,235,.12); color:#2563eb; border:1px solid rgba(37,99,235,.22); }
.nb-badge-green { background:rgba(16,185,129,.12); color:#059669; border:1px solid rgba(16,185,129,.22); }
.nb-badge-red { background:rgba(239,68,68,.12); color:#ef4444; border:1px solid rgba(239,68,68,.22); }
.nb-badge-amber { background:rgba(245,158,11,.12); color:#d97706; border:1px solid rgba(245,158,11,.22); }
.nb-badge-violet { background:rgba(106,31,142,.12); color:#6a1f8e; border:1px solid rgba(106,31,142,.22); }
.nb-badge-gray { background:var(--nb-chip-bg); color:var(--nb-chip-col); border:1px solid var(--nb-chip-bdr); }
[data-theme="dark"] .nb-badge-indigo { color:#93c5fd; }
[data-theme="dark"] .nb-badge-green { color:#6ee7b7; }
[data-theme="dark"] .nb-badge-red { color:#fca5a5; }
[data-theme="dark"] .nb-badge-amber { color:#fcd34d; }
[data-theme="dark"] .nb-badge-violet { color:#d4a8e8; }
/* Inputs */
.nb-input-wrap {
display: flex; align-items: center;
background: var(--nb-input-bg);
border: 1.5px solid var(--nb-input-bdr);
border-radius: 10px;
transition: border-color .22s, box-shadow .22s, background .25s;
}
.nb-input-wrap:focus-within {
border-color: var(--nb-input-focus-bdr);
box-shadow: 0 0 0 3px var(--nb-input-focus-shadow);
background: var(--nb-bg2);
}
.nb-input-icon { padding: 0 14px; color: var(--nb-input-icon); font-size: 15px; flex-shrink: 0; }
.nb-input-wrap:focus-within .nb-input-icon { color: var(--nb-input-icon-focus); }
.nb-input {
flex: 1; border: none; background: transparent;
padding: 10px 14px 10px 0;
font-size: 13.5px; font-family: 'Inter', sans-serif;
color: var(--nb-input-col); outline: none;
}
.nb-input::placeholder { color: var(--nb-input-ph); }
/* Form control (standalone, no icon) */
.nb-form-control {
width: 100%; padding: 9px 13px; border-radius: 9px;
border: 1.5px solid var(--nb-card-bdr);
background: var(--nb-bg3); color: var(--nb-text-1);
font-size: 13px; font-family: 'Inter', sans-serif;
transition: border-color .15s; box-sizing: border-box;
}
.nb-form-control:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.nb-form-control::placeholder { color: var(--nb-text-3); }
/* Alerts */
.nb-alert { padding: 10px 14px; border-radius: 9px; font-size: 13px; margin-bottom: 12px; font-family: 'Inter', sans-serif; }
.nb-alert-danger { background:rgba(239,68,68,.10); color:#ef4444; border:1px solid rgba(239,68,68,.20); }
.nb-alert-success { background:rgba(16,185,129,.10); color:#059669; border:1px solid rgba(16,185,129,.20); }
.nb-alert-warning { background:rgba(245,158,11,.10); color:#d97706; border:1px solid rgba(245,158,11,.20); }
[data-theme="dark"] .nb-alert-danger { color:#fca5a5; }
[data-theme="dark"] .nb-alert-success { color:#6ee7b7; }
[data-theme="dark"] .nb-alert-warning { color:#fcd34d; }
/* Status bar (fixed outlet info strip) */
.nb-status-bar {
background: var(--nb-status-bg);
border-bottom: 1px solid var(--nb-status-bdr);
color: var(--nb-status-col);
box-shadow: var(--nb-status-shadow);
font-size: 0.82rem; font-family: 'Inter', sans-serif;
transition: background .25s, color .25s;
backdrop-filter: blur(10px);
}
.nb-status-item {
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 12px;
background: var(--nb-status-item-bg);
border: 1px solid var(--nb-status-item-bdr);
border-radius: 20px; transition: all .2s;
}
.nb-status-item:hover { filter: brightness(1.1); transform: translateY(-1px); }
.nb-status-label { font-weight: 600; color: var(--nb-status-lbl); font-size: .72rem; text-transform: uppercase; letter-spacing: .4px; }
.nb-status-value { font-weight: 700; color: var(--nb-status-val); font-size: .82rem; }
.nb-status-close {
background: var(--nb-close-bg); border: 1px solid var(--nb-close-bdr); color: var(--nb-close-col);
width: 26px; height: 26px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
cursor: pointer; transition: all .2s; margin-left: 6px; font-size: .75rem;
}
.nb-status-close:hover { filter: brightness(1.2); transform: scale(1.1); }
/* Footer bar */
.nb-footer-bar {
background: var(--nb-footer-bg);
border-top: 1px solid var(--nb-footer-bdr);
color: var(--nb-footer-col);
box-shadow: var(--nb-footer-shadow);
font-size: 0.64rem; font-family: 'Inter', sans-serif;
z-index: 999;
transition: background .25s, color .25s;
backdrop-filter: blur(10px);
}
.nb-footer-copyright { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px; }
.nb-footer-copyright strong { font-weight:700; color:var(--nb-footer-strong); }
.nb-footer-contact { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px; }
.nb-footer-link { color:var(--nb-footer-link); text-decoration:none; display:inline-flex; align-items:center; gap:4px; transition: all .18s; }
.nb-footer-link:hover { color:var(--nb-footer-link-h); transform:translateY(-1px); }
.nb-footer-link i { font-size:.85em; }
.nb-footer-sep { color:var(--nb-footer-sep); margin:0 3px; }
/* Theme toggle button (floating) */
.nb-theme-btn {
display: flex; align-items: center; justify-content: center;
width: 38px; height: 38px; border-radius: 50%;
background: var(--nb-card-bg);
border: 1.5px solid var(--nb-card-bdr);
color: var(--nb-s-icon);
cursor: pointer; transition: all .22s;
box-shadow: 0 2px 10px rgba(37,99,235,.12);
font-size: 15px;
}
.nb-theme-btn:hover { background: var(--nb-s-hover-bg); color: var(--nb-s-hover-col); border-color: rgba(37,99,235,.3); transform: scale(1.1); }
/* Scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-thumb { background: var(--nb-scr-thumb); border-radius: 10px; }
/* Responsive helpers */
@media (max-width: 991.98px) {
.nb-footer-bar { font-size: .60rem; }
}
@media (min-width: 1920px) {
.nb-footer-bar { font-size: .68rem; }
}
@media (max-width: 768px) {
.nb-status-bar { font-size: .75rem; }
.nb-status-item { padding: 3px 8px; font-size: .75rem; }
.nb-footer-bar { font-size: .62rem; }
.nb-footer-copyright, .nb-footer-contact { flex-direction: column; gap: 4px; }
.nb-footer-sep { display: none; }
}
/* ── Main shell: content fills viewport (no grey strip below short SPA pages) ── */
.page-main {
min-height: 100vh;
}
.app-content.toggle-content {
background-color: var(--nb-card-bg);
}
#app.bg-white {
min-height: calc(100vh - 10rem);
background-color: var(--nb-card-bg) !important;
}
@media (max-width: 768px) {
#app.bg-white {
min-height: calc(100vh - 8.75rem);
}
}
/* ── Modern Dashboard CSS ── */
.dashboard-container {
padding: 1.5rem;
background: transparent;
font-family: 'Inter', sans-serif;
}
/* Stat Cards */
.dashboard-card {
background: var(--nb-dash-bg) !important;
border: 1px solid var(--nb-dash-bdr) !important;
border-radius: 16px;
padding: 1.25rem;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
box-shadow: var(--nb-dash-shadow);
height: 100%;
margin-bottom: 1.5rem;
}
.dashboard-card:hover {
transform: translateY(-5px);
box-shadow: var(--nb-dash-hover-shadow);
border-color: var(--nb-stat-hbdr) !important;
}
/* Icon Wrappers */
.icon-wrapper {
width: 48px;
height: 48px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0.75rem;
background: var(--nb-ban-ico-bg);
border: 1px solid var(--nb-ban-bdr);
transition: all 0.3s ease;
}
.dashboard-card:hover .icon-wrapper {
transform: scale(1.1) rotate(5deg);
}
.icon-wrapper i {
font-size: 1.4rem;
color: var(--nb-ban-ico-col);
}
/* Metrics */
.metric-label {
font-size: 0.75rem;
font-weight: 600;
color: var(--nb-dash-lbl);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 0.25rem;
}
.metric-value {
font-size: 1.25rem;
font-weight: 800;
color: var(--nb-dash-val);
letter-spacing: -0.5px;
}
/* Section & Chart Cards */
.chart-card, .data-table-card {
background: var(--nb-chart-bg);
border: 1px solid var(--nb-chart-bdr);
border-radius: 16px;
overflow: hidden;
margin-bottom: 1.5rem;
box-shadow: var(--nb-dash-shadow);
}
.section-header {
background: var(--nb-section-bg);
padding: 1rem 1.25rem;
border-bottom: 2px solid var(--nb-section-bdr);
display: flex;
align-items: center;
justify-content: space-between;
}
.section-header h3, .section-header .card-title {
color: var(--nb-section-col) !important;
font-weight: 700;
font-size: 0.9rem;
margin: 0;
text-transform: uppercase;
letter-spacing: 1px;
}
.chart-card .card-body {
padding: 1.5rem;
}
/* Data Tables */
.table-responsive {
border-radius: 0 0 16px 16px;
}
.table {
margin: 0;
color: var(--nb-text-1);
}
.table thead th {
background: var(--nb-table-head-bg);
color: var(--nb-table-head-col);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: 2px solid var(--nb-table-row-bdr);
padding: 1rem;
}
.table tbody td {
padding: 1rem;
border-bottom: 1px solid var(--nb-table-row-bdr);
vertical-align: middle;
font-size: 0.85rem;
color: var(--nb-table-cell);
}
.table tbody tr:hover {
background: var(--nb-table-row-hover);
}
/* Theme color variants (replaces conflicting legacy bg-gradient-* classes) */
.theme-teal .icon-wrapper { --nb-ban-ico-bg: rgba(16,185,129,0.1); --nb-ban-ico-col: #10b981; --nb-ban-bdr: rgba(16,185,129,0.2); }
.theme-info .icon-wrapper { --nb-ban-ico-bg: rgba(6,182,212,0.1); --nb-ban-ico-col: #06b6d4; --nb-ban-bdr: rgba(6,182,212,0.2); }
.theme-secondary .icon-wrapper { --nb-ban-ico-bg: rgba(100,116,139,0.1); --nb-ban-ico-col: #64748b; --nb-ban-bdr: rgba(100,116,139,0.2); }
.theme-success .icon-wrapper { --nb-ban-ico-bg: rgba(34,197,94,0.1); --nb-ban-ico-col: #22c55e; --nb-ban-bdr: rgba(34,197,94,0.2); }
.theme-danger .icon-wrapper { --nb-ban-ico-bg: rgba(239,68,68,0.1); --nb-ban-ico-col: #ef4444; --nb-ban-bdr: rgba(239,68,68,0.2); }
.theme-warning .icon-wrapper { --nb-ban-ico-bg: rgba(245,158,11,0.1); --nb-ban-ico-col: #f59e0b; --nb-ban-bdr: rgba(245,158,11,0.2); }
.theme-lime .icon-wrapper { --nb-ban-ico-bg: rgba(132,204,22,0.1); --nb-ban-ico-col: #84cc16; --nb-ban-bdr: rgba(132,204,22,0.2); }
.theme-cyan .icon-wrapper { --nb-ban-ico-bg: rgba(6,182,212,0.1); --nb-ban-ico-col: #06b6d4; --nb-ban-bdr: rgba(6,182,212,0.2); }
.theme-purple .icon-wrapper { --nb-ban-ico-bg: rgba(168,85,247,0.1); --nb-ban-ico-col: #a855f7; --nb-ban-bdr: rgba(168,85,247,0.2); }
.theme-primary .icon-wrapper { --nb-ban-ico-bg: rgba(59,130,246,0.1); --nb-ban-ico-col: #3b82f6; --nb-ban-bdr: rgba(59,130,246,0.2); }
@media (max-width: 768px) {
.metric-value { font-size: 1.1rem; }
.icon-wrapper { width: 40px; height: 40px; }
}
/* ── Modern Module Cards CSS ── */
.module-cards-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.module-cards-container {
padding: 0.75rem 1.25rem 1.5rem;
font-family: 'Inter', sans-serif;
max-width: 1280px;
margin: 0 auto;
}
.module-header {
margin-bottom: 1rem;
padding: 0.85rem 1.1rem;
background: var(--nb-dash-bg);
border: 1px solid var(--nb-dash-bdr);
border-radius: 12px;
box-shadow: var(--nb-dash-shadow);
position: relative;
overflow: hidden;
}
.module-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 3px;
height: 100%;
background: linear-gradient(to bottom, var(--nb-sidebar-item-a-col, #f26522), #6a1f8e);
opacity: 0.9;
}
.module-header-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
.module-header-title {
margin: 0;
display: flex;
align-items: center;
gap: 0.65rem;
font-size: 1.05rem;
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1.25;
color: var(--nb-text-1);
}
.module-header-icon-wrap {
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 10px;
background: rgba(242, 101, 34, 0.08);
border: 1px solid rgba(242, 101, 34, 0.18);
flex-shrink: 0;
}
.module-header-icon-wrap i {
color: var(--nb-sidebar-item-a-col, #f26522);
font-size: 1.2rem;
}
.module-header-text {
min-width: 0;
}
.module-header-count {
flex-shrink: 0;
min-width: 2rem;
height: 2rem;
padding: 0 0.65rem;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
font-weight: 800;
font-variant-numeric: tabular-nums;
color: var(--nb-sidebar-item-a-col, #f26522);
background: rgba(242, 101, 34, 0.1);
border: 1px solid rgba(242, 101, 34, 0.22);
border-radius: 999px;
}
.module-header-desc {
margin: 0.35rem 0 0 0;
padding-left: 0.1rem;
color: var(--nb-text-3);
font-size: 0.78rem;
font-weight: 500;
line-height: 1.45;
}
.module-filter-container {
margin-bottom: 1rem;
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.module-filter-toolbar {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.module-filter-wrapper {
position: relative;
flex: 1;
min-width: min(100%, 260px);
max-width: 480px;
}
.module-filter-input {
width: 100%;
border-radius: 10px;
padding: 0.58rem 2.75rem 0.58rem 2.65rem;
border: 1px solid var(--nb-dash-bdr);
background: var(--nb-dash-bg);
color: var(--nb-text-1);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
font-size: 0.875rem;
box-shadow: var(--nb-dash-shadow);
}
.module-filter-input:focus {
border-color: var(--nb-sidebar-item-a-col, #f26522);
box-shadow: 0 0 0 3px rgba(242, 101, 34, 0.12);
outline: none;
}
.module-filter-input::placeholder {
color: var(--nb-text-3);
}
.filter-icon-wrapper {
position: absolute;
left: 0.95rem;
top: 50%;
transform: translateY(-50%);
color: var(--nb-text-3);
font-size: 0.95rem;
pointer-events: none;
}
.filter-clear-btn {
position: absolute;
right: 0.55rem;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
width: 28px;
height: 28px;
padding: 0;
border: none;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background: rgba(148, 163, 184, 0.14);
color: var(--nb-text-2);
transition: background 0.15s ease, color 0.15s ease;
}
.filter-clear-btn:hover {
background: rgba(242, 101, 34, 0.14);
color: var(--nb-sidebar-item-a-col, #f26522);
}
.module-filter-kbd {
display: inline-flex;
align-items: center;
gap: 0.25rem;
flex-shrink: 0;
font-size: 0.7rem;
color: var(--nb-text-3);
}
.module-filter-kbd kbd {
display: inline-block;
padding: 0.15rem 0.4rem;
font-family: inherit;
font-size: 0.68rem;
font-weight: 600;
line-height: 1.2;
color: var(--nb-text-2);
background: var(--nb-chip-bg);
border: 1px solid var(--nb-dash-bdr);
border-radius: 4px;
}
.filter-results-count {
font-size: 0.78rem;
color: var(--nb-text-3);
padding-left: 0.15rem;
}
.filter-results-count strong {
color: var(--nb-sidebar-item-a-col, #f26522);
font-weight: 700;
}
.module-cards-groups {
display: flex;
flex-direction: column;
gap: 0;
}
.module-cards-group-divider {
margin: 0.45rem 0 0.35rem;
border: 0;
border-top: 1px solid var(--nb-dash-bdr);
opacity: 1;
}
.module-cards-group-title {
margin: 0 0 0.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.02em;
color: var(--nb-text-2);
line-height: 1.25;
text-transform: uppercase;
}
.module-cards-group-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.65rem;
height: 1.65rem;
border-radius: 6px;
flex-shrink: 0;
background: color-mix(in srgb, var(--group-accent, var(--nb-sidebar-item-a-col, #f26522)) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--group-accent, var(--nb-sidebar-item-a-col, #f26522)) 28%, transparent);
}
.module-cards-group-icon i {
font-size: 0.72rem;
color: var(--group-accent, var(--nb-sidebar-item-a-col, #f26522));
}
.module-cards-group-label {
min-width: 0;
}
.module-cards-group-grid {
margin-top: 0;
}
.module-cards-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 0.65rem;
}
.module-card {
background: var(--item-card-bg, var(--nb-dash-bg));
border-radius: 12px;
padding: 0.65rem 0.85rem;
border: 1px solid var(--nb-dash-bdr);
border-left: 3px solid var(--item-color, #6c757d);
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
cursor: pointer;
position: relative;
overflow: hidden;
display: flex;
flex-direction: row;
align-items: center;
gap: 0.75rem;
box-shadow: var(--nb-dash-shadow);
text-decoration: none !important;
min-height: 4.25rem;
}
.module-card:hover {
transform: translateY(-2px);
box-shadow: var(--nb-dash-hover-shadow);
border-color: var(--nb-dash-bdr);
border-left-color: var(--item-color);
}
.module-card:focus {
outline: none;
}
.module-card:focus-visible {
outline: 2px solid var(--item-color);
outline-offset: 2px;
}
.module-card-icon {
width: 44px;
height: 44px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: transform 0.2s ease, background 0.2s ease;
border: 1px solid var(--item-color, #6c757d);
background: var(--item-icon-bg, rgba(108, 117, 125, 0.24));
}
.module-card:hover .module-card-icon {
transform: scale(1.04);
}
.module-card-icon i {
font-size: 1.2rem;
color: var(--item-color);
transition: color 0.2s ease;
}
.module-card:hover .module-card-icon i {
color: var(--item-color);
}
.module-card-content {
flex: 1;
min-width: 0;
}
.module-card-title {
font-size: 0.875rem;
font-weight: 700;
color: var(--nb-text-1);
line-height: 1.35;
letter-spacing: -0.02em;
margin: 0;
}
.module-card-arrow {
flex-shrink: 0;
font-size: 1rem;
opacity: 0.35;
transition: opacity 0.2s ease, transform 0.2s ease;
color: var(--item-color);
}
.module-card:hover .module-card-arrow {
opacity: 0.95;
transform: translateX(3px);
}
.module-cards-empty {
text-align: center;
padding: 2.5rem 1.25rem;
background: var(--nb-dash-bg);
border: 1px dashed var(--nb-dash-bdr);
border-radius: 12px;
color: var(--nb-text-3);
}
.module-cards-empty-icon {
font-size: 2.25rem;
opacity: 0.35;
margin-bottom: 0.75rem;
color: var(--nb-text-3);
}
.module-cards-empty-title {
margin: 0 0 0.35rem;
font-size: 1rem;
font-weight: 700;
color: var(--nb-text-2);
}
.module-cards-empty-text {
margin: 0;
font-size: 0.82rem;
line-height: 1.5;
max-width: 26rem;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 768px) {
.module-cards-container {
padding: 0.65rem 0.85rem 1.25rem;
}
.module-header {
padding: 0.85rem 1rem;
}
.module-header-title {
font-size: 1.05rem;
}
.module-filter-kbd {
display: none;
}
.module-cards-grid {
grid-template-columns: 1fr;
gap: 0.55rem;
}
.module-card {
padding: 0.6rem 0.75rem;
min-height: unset;
}
}