/* ============================================================
   NIXERS PRO — dashboard.css
   Shared / global styles: theme vars, base, sidebar, topbar,
   panels, tables, badges, buttons, forms, modals, toast,
   floating chat, profile dropdown, pagination, utilities.
   Load this BEFORE any role-specific CSS (admin.css, etc.)
   ============================================================ */

/* ============================================================
   THEME VARIABLES
   ============================================================ */
:root {
  --accent: #eab308;
  --accent-dark: #b45309;
  --accent-glow: rgba(234,179,8,0.12);
  --danger: #ef4444;
  --sidebar-w: 268px;
  --sidebar-w-collapsed: 64px;
  --radius: 13px;
  --radius-sm: 9px;
  --trans: 0.2s ease;
}

/* LIGHT THEME (default) */
[data-theme="light"] {
  --bg: #f0f4f8;
  --bg2: #e8edf5;
  --surface: #ffffff;
  --surface2: #f1f5f9;
  --surface3: #e2e8f0;
  --border: rgba(0,0,0,0.08);
  --border2: rgba(0,0,0,0.14);
  --text: #0f172a;
  --text2: #475569;
  --text3: #94a3b8;
  --shadow: 0 8px 32px rgba(0,0,0,0.1);
  --card-shadow: 0 2px 12px rgba(0,0,0,0.07);
  --input-bg: #f8fafc;
  --topbar-bg: rgba(255,255,255,0.90);
}

/* DARK THEME */
[data-theme="dark"] {
  --bg: #090d18;
  --bg2: #0d1424;
  --surface: #111827;
  --surface2: #1a2235;
  --surface3: #243048;
  --border: rgba(255,255,255,0.07);
  --border2: rgba(255,255,255,0.12);
  --text: #e2e8f0;
  --text2: #94a3b8;
  --text3: #64748b;
  --shadow: 0 8px 32px rgba(0,0,0,0.5);
  --card-shadow: 0 2px 12px rgba(0,0,0,0.4);
  --input-bg: #0d1424;
  --topbar-bg: rgba(9,13,24,0.90);
}

/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  min-height: 100vh;
  transition: background var(--trans), color var(--trans);
}
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(234,179,8,0.25); border-radius:8px; }
a { text-decoration:none; color:inherit; }
button { cursor:pointer; font-family:'DM Sans',sans-serif; }
img { max-width:100%; }

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar {
  width: var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  position: fixed;
  height: 100vh;
  overflow-y: auto;
  z-index: 900;
  display: flex;
  flex-direction: column;
  transition: transform var(--trans), width var(--trans), background var(--trans);
}

/* Collapsed (icon-only) mode */
.sidebar.collapsed { width: var(--sidebar-w-collapsed); }
.sidebar.collapsed .sb-logo h2,
.sidebar.collapsed .sb-logo small,
.sidebar.collapsed .nav-section-label,
.sidebar.collapsed .sb-nav a span:not(.nb),
.sidebar.collapsed .sb-admin-info,
.sidebar.collapsed .sb-bottom .sb-admin-card i.fa-chevron-right { display:none; }
.sidebar.collapsed .sb-logo { justify-content:center; padding:1.5rem 0.5rem 1.1rem; }
.sidebar.collapsed .sb-nav a { justify-content:center; padding:0.72rem 0; }
.sidebar.collapsed .sb-nav a i { width:auto; margin:0; }
.sidebar.collapsed .sb-bottom { padding:0.5rem; }
.sidebar.collapsed .sb-admin-card { justify-content:center; }

.sb-logo {
  padding: 1.5rem 1.25rem 1.1rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.sb-logo-mark {
  width: 38px; height: 38px;
  background: var(--accent);
  border-radius: 10px;
  display: flex; align-items:center; justify-content:center;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 800; color: #0a0f1a; font-size:1rem; flex-shrink:0;
}
.sb-logo h2 { font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:1.1rem; color:var(--text); letter-spacing:-0.3px; }
.sb-logo h2 span { color:var(--accent); }
.sb-logo small { color:var(--text3); font-size:0.68rem; letter-spacing:1.5px; text-transform:uppercase; }

.nav-section-label {
  padding: 1rem 1.25rem 0.3rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text3);
}

.sb-nav a {
  display: flex; align-items:center; gap:0.7rem;
  padding: 0.68rem 1.25rem;
  color: var(--text2); font-size:0.855rem; font-weight:500;
  transition: all var(--trans);
  position: relative; border-left:3px solid transparent;
}
.sb-nav a:hover { color:var(--text); background:var(--surface2); }
.sb-nav a.active { color:var(--accent); background:var(--accent-glow); border-left-color:var(--accent); }
.sb-nav a i { width:17px; text-align:center; font-size:0.85rem; opacity:0.8; flex-shrink:0; }
.sb-nav a.active i { opacity:1; }
.sb-nav a .nb {
  margin-left:auto;
  background:var(--accent); color:#0a0f1a;
  font-size:0.6rem; font-weight:800;
  padding:0.1rem 0.45rem; border-radius:20px;
  min-width:18px; text-align:center;
}
.sb-nav a .nb.red { background:var(--danger) !important; color:white; }

.sb-bottom { padding:0.85rem 1.1rem; border-top:1px solid var(--border); margin-top:auto; }
.sb-admin-card {
  display:flex; align-items:center; gap:0.65rem;
  padding:0.65rem 0.75rem;
  background:var(--surface2); border-radius:var(--radius-sm);
  cursor:pointer; transition:var(--trans);
}
.sb-admin-card:hover { background:var(--surface3); }
.sb-admin-info { flex:1; min-width:0; }
.sb-admin-info .name { font-weight:600; font-size:0.83rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sb-admin-info small { color:var(--text3); font-size:0.68rem; }

/* ============================================================
   MAIN AREA
   ============================================================ */
.main { margin-left:var(--sidebar-w); min-height:100vh; display:flex; flex-direction:column; transition: margin-left var(--trans); }
.main.expanded { margin-left:var(--sidebar-w-collapsed); }

.topbar {
  position: sticky; top:0; z-index:800;
  background: var(--topbar-bg);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  padding: 0 1.75rem; height:62px;
  display: flex; align-items:center; gap:1rem;
  transition: background var(--trans);
}
.topbar-title { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.05rem; white-space:nowrap; }

.tb-search { flex:1; max-width:300px; position:relative; }
.tb-search input {
  width:100%; background:var(--surface2); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:0.5rem 1rem 0.5rem 2.2rem;
  color:var(--text); font-size:0.82rem; font-family:'DM Sans',sans-serif; outline:none;
  transition:var(--trans);
}
.tb-search input:focus { border-color:var(--accent); background:var(--surface); }
.tb-search i { position:absolute; left:0.75rem; top:50%; transform:translateY(-50%); color:var(--text3); font-size:0.78rem; }

.tb-actions { display:flex; align-items:center; gap:0.6rem; margin-left:auto; }

.ib {
  background: var(--surface); border:1px solid var(--border); color:var(--text2);
  width:36px; height:36px; border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:var(--trans); font-size:0.85rem; position:relative;
}
.ib:hover { border-color:var(--accent); color:var(--accent); }
.ib .dot { position:absolute; top:6px; right:6px; width:7px; height:7px; background:var(--danger); border-radius:50%; border:2px solid var(--bg); }
#menuBtn { display:none; }
.theme-btn {
  background:var(--surface); border:1px solid var(--border); color:var(--text2);
  width:36px; height:36px; border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:var(--trans); font-size:0.9rem;
}
.theme-btn:hover { border-color:var(--accent); color:var(--accent); }

.top-avatar {
  width:36px; height:36px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:0.9rem;
  cursor:pointer; border:2px solid var(--accent);
  overflow:hidden; position:relative; flex-shrink:0;
  background:rgba(234,179,8,0.15); color:var(--accent);
}
.top-avatar img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }

.page-content { padding:1.5rem 1.75rem; flex:1; }

/* Impersonation banner */
.impersonate-banner {
  background: rgba(234,179,8,0.15);
  border:1px solid rgba(234,179,8,0.35);
  border-radius:var(--radius-sm);
  padding:0.35rem 0.85rem;
  font-size:0.8rem;
  color:var(--accent);
  display:flex; align-items:center; gap:0.5rem;
  flex-shrink:0;
}
.impersonate-banner button {
  background:none; border:none; color:var(--accent);
  font-size:0.75rem; cursor:pointer; display:flex; align-items:center; gap:0.3rem;
}

/* ============================================================
   PANELS
   ============================================================ */
.panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); transition:background var(--trans); }
.panel-hdr {
  padding:0.9rem 1.25rem; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; gap:0.75rem; flex-wrap:wrap;
}
.panel-hdr h5 {
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:0.9rem; margin:0;
  display:flex; align-items:center; gap:0.5rem;
}
.panel-hdr h5 i { color:var(--accent); }
.panel-body { padding:1.1rem 1.25rem; }

/* ============================================================
   DATA TABLE
   ============================================================ */
.dt { width:100%; border-collapse:collapse; }
.dt th {
  padding:0.65rem 1rem; font-size:0.68rem; font-weight:700;
  text-transform:uppercase; letter-spacing:1px; color:var(--text3);
  border-bottom:1px solid var(--border); text-align:left; white-space:nowrap;
  background:var(--surface2);
}
.dt td { padding:0.8rem 1rem; border-bottom:1px solid var(--border); font-size:0.845rem; vertical-align:middle; }
.dt tr:last-child td { border-bottom:none; }
.dt tr:hover td { background:rgba(234,179,8,0.03); }

.user-cell { display:flex; align-items:center; gap:0.65rem; }
.u-av {
  width:34px; height:34px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:0.78rem; flex-shrink:0;
  overflow:hidden; position:relative;
}
.u-av img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }

/* Online indicator */
.online-dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
.online-dot.online  { background:#34d399; }
.online-dot.offline { background:var(--text3); }
.online-dot.away    { background:var(--accent); }

/* ============================================================
   BADGES
   ============================================================ */
.badge {
  display:inline-flex; align-items:center; gap:0.25rem;
  padding:0.18rem 0.6rem; border-radius:20px;
  font-size:0.68rem; font-weight:600; white-space:nowrap;
}
.b-admin       { background:rgba(139,92,246,0.18); color:#a78bfa; }
.b-manager     { background:rgba(234,179,8,0.18);  color:var(--accent); }
.b-worker      { background:rgba(59,130,246,0.18); color:#60a5fa; }
.b-active      { background:rgba(16,185,129,0.15); color:#34d399; }
.b-inactive    { background:rgba(239,68,68,0.15);  color:#f87171; }
.b-pending     { background:rgba(234,179,8,0.15);  color:var(--accent); }
.b-published   { background:rgba(16,185,129,0.15); color:#34d399; }
.b-hidden      { background:rgba(100,116,139,0.15);color:#94a3b8; }
.b-planning    { background:rgba(59,130,246,0.15); color:#60a5fa; }
.b-completed   { background:rgba(16,185,129,0.15); color:#34d399; }
.b-on-hold     { background:rgba(249,115,22,0.15); color:#fb923c; }
.b-approved    { background:rgba(16,185,129,0.15); color:#34d399; }
.b-rejected    { background:rgba(239,68,68,0.15);  color:#f87171; }
.b-draft       { background:rgba(100,116,139,0.15);color:#94a3b8; }
.b-processed   { background:rgba(59,130,246,0.15); color:#60a5fa; }
.b-paid        { background:rgba(16,185,129,0.15); color:#34d399; }
.b-open        { background:rgba(59,130,246,0.15); color:#60a5fa; }
.b-in-progress { background:rgba(234,179,8,0.15);  color:var(--accent); }
.b-closed      { background:rgba(100,116,139,0.15);color:#94a3b8; }
.b-good        { background:rgba(16,185,129,0.15); color:#34d399; }
.b-fair        { background:rgba(234,179,8,0.15);  color:var(--accent); }
.b-damaged     { background:rgba(239,68,68,0.15);  color:#f87171; }
.b-critical    { background:rgba(239,68,68,0.22);  color:#f87171; }
.b-high        { background:rgba(249,115,22,0.18); color:#fb923c; }
.b-medium      { background:rgba(234,179,8,0.15);  color:var(--accent); }
.b-low         { background:rgba(59,130,246,0.15); color:#60a5fa; }
.b-safety      { background:rgba(239,68,68,0.18);  color:#f87171; }
.b-announcement{ background:rgba(234,179,8,0.18);  color:var(--accent); }
.b-update      { background:rgba(59,130,246,0.18); color:#60a5fa; }
.b-general     { background:rgba(139,92,246,0.18); color:#a78bfa; }
.b-maintenance { background:rgba(249,115,22,0.18); color:#fb923c; }
.b-expiring    { background:rgba(249,115,22,0.18); color:#fb923c; }

.status-dot { width:6px; height:6px; border-radius:50%; display:inline-block; margin-right:4px; flex-shrink:0; }
.sd-active   { background:#34d399; }
.sd-inactive { background:#f87171; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display:inline-flex; align-items:center; gap:0.4rem;
  padding:0.52rem 1rem; border-radius:var(--radius-sm);
  font-size:0.83rem; font-weight:600; border:none;
  cursor:pointer; transition:var(--trans);
  font-family:'DM Sans',sans-serif; white-space:nowrap;
}
.btn-accent  { background:var(--accent); color:#0a0f1a; }
.btn-accent:hover { background:#fbbf24; box-shadow:0 4px 14px rgba(234,179,8,0.35); }
.btn-outline { background:transparent; border:1px solid var(--border2); color:var(--text2); }
.btn-outline:hover { border-color:var(--accent); color:var(--accent); }
.btn-danger  { background:rgba(239,68,68,0.12); color:#f87171; border:1px solid rgba(239,68,68,0.2); }
.btn-danger:hover { background:var(--danger); color:white; }
.btn-sm  { padding:0.35rem 0.7rem;  font-size:0.77rem; }
.btn-xs  { padding:0.22rem 0.55rem; font-size:0.71rem; }

.abt { background:none; border:none; color:var(--text3); padding:0.3rem 0.45rem; border-radius:6px; cursor:pointer; transition:var(--trans); font-size:0.8rem; }
.abt:hover      { background:var(--surface2); color:var(--text); }
.abt.inf:hover  { background:rgba(59,130,246,0.12); color:#60a5fa; }
.abt.suc:hover  { background:rgba(16,185,129,0.12); color:#34d399; }
.abt.dan:hover  { background:rgba(239,68,68,0.12);  color:#f87171; }
.abt.warn:hover { background:rgba(234,179,8,0.12);  color:var(--accent); }

/* ============================================================
   FILTER BAR
   ============================================================ */
.filter-bar {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:0.9rem 1.1rem; margin-bottom:1.1rem;
  display:flex; gap:0.6rem; flex-wrap:wrap; align-items:center;
}
.finp {
  background:var(--input-bg); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:0.46rem 0.8rem; color:var(--text); font-size:0.81rem;
  font-family:'DM Sans',sans-serif; outline:none; transition:var(--trans);
}
.finp:focus { border-color:var(--accent); }
.finp::placeholder { color:var(--text3); }

/* ============================================================
   MODAL
   ============================================================ */
.modal-ov {
  position:fixed; inset:0; background:rgba(0,0,0,0.55);
  backdrop-filter:blur(12px); z-index:2000;
  display:none; align-items:center; justify-content:center;
  padding:1rem; overflow-y:auto;
}
.modal-ov.open { display:flex; }
.modal-box {
  background:var(--surface); border:1px solid var(--border); border-radius:18px;
  width:100%; max-height:90vh; overflow-y:auto;
  position:relative; animation:mopen 0.22s ease;
}
@keyframes mopen {
  from { transform:scale(0.96) translateY(12px); opacity:0; }
  to   { transform:scale(1) translateY(0); opacity:1; }
}
.modal-box.sm { max-width:460px; }
.modal-box.md { max-width:640px; }
.modal-box.lg { max-width:960px; }
.modal-box.xl { max-width:1100px; }

.mhdr {
  padding:1.1rem 1.4rem; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; background:var(--surface); z-index:5;
  border-radius:18px 18px 0 0;
}
.mhdr h4 { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:0.95rem; margin:0; display:flex; align-items:center; gap:0.5rem; }
.mhdr h4 i { color:var(--accent); }
.mbody { padding:1.4rem; }
.mftr {
  padding:0.9rem 1.4rem; border-top:1px solid var(--border);
  display:flex; justify-content:flex-end; gap:0.6rem;
  position:sticky; bottom:0; background:var(--surface);
  border-radius:0 0 18px 18px;
}
.xbtn { background:none; border:none; color:var(--text3); cursor:pointer; font-size:1rem; padding:0.3rem; border-radius:6px; transition:var(--trans); }
.xbtn:hover { color:var(--text); background:var(--surface2); }

/* ============================================================
   TABS
   ============================================================ */
.tabs {
  display:flex; gap:0; border-bottom:1px solid var(--border);
  margin-bottom:1.2rem; overflow-x:auto;
}
.tab-btn {
  background:none; border:none; border-bottom:2px solid transparent;
  color:var(--text3); padding:0.6rem 1rem;
  font-size:0.82rem; font-weight:600; cursor:pointer;
  transition:var(--trans); white-space:nowrap; font-family:'DM Sans',sans-serif;
}
.tab-btn:hover { color:var(--text); }
.tab-btn.active { color:var(--accent); border-bottom-color:var(--accent); }
.tab-btn .nb { margin-left:0.4rem; }

/* ============================================================
   FORM ELEMENTS
   ============================================================ */
.fg { margin-bottom:0.9rem; }
.fl { display:block; font-size:0.72rem; font-weight:700; color:var(--text3); margin-bottom:0.35rem; text-transform:uppercase; letter-spacing:0.5px; }
.fc {
  width:100%; background:var(--input-bg); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:0.58rem 0.85rem;
  color:var(--text); font-family:'DM Sans',sans-serif; font-size:0.855rem;
  outline:none; transition:var(--trans);
}
.fc:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(234,179,8,0.1); }
.fc::placeholder { color:var(--text3); }
textarea.fc { resize:vertical; }

.frow  { display:grid; grid-template-columns:1fr 1fr;     gap:0.85rem; }
.frow3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:0.85rem; }

.section-divider { border:none; border-top:1px solid var(--border); margin:1.1rem 0; }

.day-check { display:flex; align-items:center; gap:0.4rem; font-size:0.82rem; cursor:pointer; padding:0.3rem 0.6rem; background:var(--surface2); border-radius:6px; }

/* ============================================================
   TOGGLE / SWITCH
   ============================================================ */
.sw-row { display:flex; align-items:center; justify-content:space-between; padding:0.55rem 0; }
.sw-info .sw-label { font-size:0.855rem; font-weight:500; }
.sw-info .sw-desc  { font-size:0.72rem; color:var(--text3); }
.sw { position:relative; display:inline-block; width:38px; height:21px; flex-shrink:0; }
.sw input { opacity:0; width:0; height:0; }
.sw-sl { position:absolute; cursor:pointer; inset:0; background:var(--surface3); border-radius:21px; transition:0.28s; border:1px solid var(--border); }
.sw-sl:before { content:''; position:absolute; height:13px; width:13px; left:3px; bottom:3px; background:var(--text3); border-radius:50%; transition:0.28s; }
.sw input:checked + .sw-sl { background:var(--accent); border-color:var(--accent); }
.sw input:checked + .sw-sl:before { transform:translateX(17px); background:white; }

/* ============================================================
   PROGRESS BAR
   ============================================================ */
.pb { background:var(--surface2); border-radius:10px; overflow:hidden; }
.pb-fill { height:100%; border-radius:10px; background:var(--accent); transition:width 0.5s ease; }

/* ============================================================
   TOAST
   ============================================================ */
.toast-wrap { position:fixed; bottom:1.25rem; right:1.25rem; z-index:9999; display:flex; flex-direction:column; gap:0.5rem; pointer-events:none; }
.toast {
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:0.75rem 1.1rem; display:flex; align-items:center; gap:0.65rem;
  font-size:0.83rem; box-shadow:var(--shadow); pointer-events:all; min-width:240px;
  animation:tin 0.28s ease;
}
@keyframes tin { from{transform:translateX(100%);opacity:0;} to{transform:translateX(0);opacity:1;} }
.toast.success { border-left:3px solid #34d399; }
.toast.error   { border-left:3px solid #f87171; }
.toast.info    { border-left:3px solid #60a5fa; }
.toast.warn    { border-left:3px solid var(--accent); }

/* ============================================================
   FLOATING CHAT WIDGET
   ============================================================ */
.fc-btn {
  position:fixed; bottom:1.4rem; right:1.4rem;
  width:50px; height:50px; background:var(--accent); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:0 6px 20px rgba(234,179,8,0.4);
  z-index:1400; transition:var(--trans); color:#0a0f1a; font-size:1rem;
}
.fc-btn:hover { transform:scale(1.07); }
.fc-widget {
  position:fixed; bottom:4.8rem; right:1.4rem;
  width:340px; background:var(--surface); border:1px solid var(--border);
  border-radius:16px; z-index:1400; display:none; flex-direction:column;
  overflow:hidden; box-shadow:var(--shadow); max-height:450px;
}
.fc-widget.open { display:flex; }
.fc-hdr { background:var(--surface2); padding:0.85rem 1.1rem; display:flex; align-items:center; gap:0.65rem; border-bottom:1px solid var(--border); }
.fc-msgs { flex:1; overflow-y:auto; padding:0.75rem; display:flex; flex-direction:column; gap:0.45rem; }
.fc-inp { padding:0.65rem; border-top:1px solid var(--border); display:flex; gap:0.5rem; }
.fc-inp input { flex:1; background:var(--surface2); border:1px solid var(--border); border-radius:8px; padding:0.5rem 0.75rem; color:var(--text); font-family:'DM Sans',sans-serif; font-size:0.8rem; outline:none; }
.fc-inp input:focus { border-color:var(--accent); }

/* ============================================================
   DROPDOWN PROFILE MENU
   ============================================================ */
.profile-dropdown {
  position:absolute; top:calc(100% + 8px); right:0;
  background:var(--surface); border:1px solid var(--border2); border-radius:var(--radius);
  width:220px; box-shadow:var(--shadow); z-index:500;
  overflow:hidden; display:none; animation:mopen 0.18s ease;
}
.profile-dropdown.open { display:block; }
.pd-head { padding:0.85rem 1rem; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:0.6rem; }
.pd-head .pd-av { width:36px; height:36px; border-radius:9px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:0.9rem; overflow:hidden; position:relative; }
.pd-head .pd-av img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.pd-item { display:flex; align-items:center; gap:0.6rem; padding:0.65rem 1rem; font-size:0.83rem; cursor:pointer; transition:var(--trans); }
.pd-item:hover { background:var(--surface2); }
.pd-item i { width:16px; color:var(--text3); font-size:0.8rem; }
.pd-item.danger { color:#f87171; background:none; border:none; width:100%; font-family:'DM Sans',sans-serif; font-size:0.83rem; }
.pd-item.danger i { color:#f87171; }
.pd-item.danger:hover { background:rgba(239,68,68,0.08); }
/* ============================================================
   PAGINATION
   ============================================================ */
.pagination-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0.5rem;
  flex-wrap: wrap;
  gap: 0.75rem;
  border-top: 1px solid var(--border);
  margin-top: 0.5rem;
}
.pagination-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.pagination-btn {
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text2);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.75rem;
  transition: all 0.2s;
}
.pagination-btn:hover:not(:disabled) {
  background: var(--accent);
  color: #0a0f1a;
  border-color: var(--accent);
}
.pagination-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.pagination-active {
  background: var(--accent);
  color: #0a0f1a;
  border-color: var(--accent);
}
.pagination-numbers { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.page-number {
  min-width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text2);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.75rem;
  transition: all 0.2s;
}
.page-number:hover:not(.pagination-active) { background: var(--surface2); border-color: var(--accent); }
.per-page-select {
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text2);
  border-radius: 6px;
  font-size: 0.75rem;
  cursor: pointer;
}
.pagination-info { font-size: 0.75rem; color: var(--text3); }

/* ============================================================
   MISC UTILITIES
   ============================================================ */
.empty-state { text-align:center; padding:2.5rem 1rem; color:var(--text3); }
.empty-state i { font-size:2.2rem; opacity:0.3; display:block; margin-bottom:0.6rem; }

.grid2 { display:grid; grid-template-columns:1fr 1fr;     gap:1.1rem; }
.grid3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:0.85rem; }

hr.div { border:none; border-top:1px solid var(--border); margin:0.85rem 0; }

.info-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.5rem 1rem; }
.info-item .il { font-size:0.68rem; color:var(--text3); text-transform:uppercase; letter-spacing:0.5px; font-weight:700; }
.info-item .iv { font-size:0.855rem; font-weight:500; margin-top:0.1rem; }

.sidebar-ov { position:fixed; inset:0; z-index:890; background:rgba(0,0,0,0.5); display:none; }
.sidebar-ov.show { display:block; }

.color-sw { width:30px; height:30px; border-radius:7px; cursor:pointer; border:2px solid transparent; transition:var(--trans); }
.color-sw:hover, .color-sw.sel { border-color:var(--text); transform:scale(1.1); }

.smini { background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:0.9rem 1rem; text-align:center; }
.smini .snum { font-family:'Space Grotesk',sans-serif; font-size:1.55rem; font-weight:800; color:var(--accent); }
.smini .slbl { font-size:0.72rem; color:var(--text3); margin-top:0.2rem; }

/* ============================================================
   COMPACT MODE
   ============================================================ */
body.compact .page-content { padding:0.85rem 1.1rem; }
body.compact .stat-card { padding:0.85rem 1rem; }
body.compact .dt td { padding:0.55rem 0.85rem; }
body.compact .panel-body { padding:0.75rem 1rem; }

/* ============================================================
   BREADCRUMB
   ============================================================ */
.breadcrumb-bar {
  position:fixed; bottom:1.25rem; left:calc(var(--sidebar-w) + 1.25rem);
  background:var(--surface); border:1px solid var(--border);
  border-radius:20px; padding:0.4rem 0.85rem;
  font-size:0.75rem; color:var(--text3);
  display:flex; align-items:center; gap:0.4rem;
  z-index:100; box-shadow:var(--card-shadow);
}

/* ============================================================
   SKELETON LOADERS
   ============================================================ */
.skeleton-overlay { position:absolute; inset:0; background:var(--surface); z-index:100; padding:1.5rem 1.75rem; }
.skel-row { height:52px; background:var(--surface2); border-radius:8px; margin-bottom:8px; animation:shimmer 1.4s infinite; }
@keyframes shimmer { 0%{opacity:1;} 50%{opacity:0.5;} 100%{opacity:1;} }
.skel-text { height:14px; background:var(--surface2); border-radius:4px; animation:shimmer 1.4s infinite; }
.skel-text.short { width:40%; }
.skel-text.med   { width:65%; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
  .charts-grid, .charts-grid2 { grid-template-columns:1fr; }
}

@media (max-width: 768px) {
  .sidebar { transform:translateX(-100%); }
  .sidebar.mobile-open { transform:translateX(0); }
  .sidebar-ov.show { display:block; }
  .main { margin-left:0 !important; }
  .topbar { padding:0 1rem; }
  .page-content { padding:1rem; }
  .grid2, .grid3 { grid-template-columns:1fr; }
  .frow, .frow3 { grid-template-columns:1fr; }
  #menuBtn { display:flex !important; }
  .tb-search { display:none; }
  .modal-box { border-radius:0 !important; max-height:100vh !important; min-height:100vh; }
  .modal-ov { padding:0; align-items:flex-end; }
  .breadcrumb-bar { left:1.25rem; }
}

@media (max-width: 520px) {
  .topbar-title { font-size:0.88rem; }
  .tb-actions .theme-btn { display:flex; }
}

/* ============================================================
   PRINT STYLES
   ============================================================ */
@media print {
  .sidebar, .topbar, .fc-btn, .fc-widget, .toast-wrap, .breadcrumb-bar { display:none !important; }
  .main { margin-left:0 !important; }
  body { background:white; color:black; }
  .modal-ov { position:static; background:none; backdrop-filter:none; }
  .modal-box { box-shadow:none; border:none; }
}