/* ===================================================================
   ANIMOOX STUDIO — Office Management System
   Design System v4.3 — Sequence-style Dark Sidebar + Animoox Colors
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

* { box-sizing: border-box; margin: 0; padding: 0; }

/* ===================================================================
   COLOR TOKENS
   Sidebar: ALWAYS dark (Sequence style)
   Content: Light default, Dark when toggled
   Brand: Animoox Purple (#6B4FE8) + Green (#1DB584) merged
   =================================================================== */
:root {
  /* ── Animoox Brand ── */
  --accent:        #1DB584;
  --accent-dark:   #158f68;
  --accent-light:  #4ECFA3;
  --accent-glow:   rgba(29,181,132,0.20);
  --accent-subtle: rgba(29,181,132,0.12);

  /* ── Animoox original Purple (invoice/finance/kanban) ── */
  --violet:       #6B4FE8;
  --violet-dark:  #4F35C4;
  --violet-light: #8B6FF0;
  --violet-glow:  rgba(107,79,232,0.18);

  /* ── Sidebar — LIGHT in light mode (default) ── */
  --sb-bg:           #ffffff;
  --sb-border:       #e8eaf2;
  --sb-text:         #6b7280;
  --sb-text-hover:   #1a1a2e;
  --sb-active-bg:    rgba(99,51,251,0.10);
  --sb-active-text:  #6333FB;
  --sb-section:      #aab0c0;
  --sb-icon-dim:     #aab0c0;
  --sb-footer-bg:    #fafbfd;
  --sb-brand:        #1a1a2e;
  --sb-user-name:    #1a1a2e;

  /* ── Content area — LIGHT mode (default) ── */
  --bg:        #f0f2f8;
  --card:      #ffffff;
  --card2:     #f5f6fb;
  --card3:     #eaecf4;
  --border:        #e3e6f0;
  --border-strong: #cdd0e0;
  --text:          #111827;
  --text-muted:    #6b7280;
  --text-dim:      #9ca3af;

  /* ── Topbar (light) ── */
  --topbar-bg:     #ffffff;
  --topbar-border: #e3e6f0;

  /* ── Shadows (light) ── */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.07);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.09);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.12);

  /* ── Status colors ── */
  --success:    #1DB584;
  --success-bg: rgba(29,181,132,0.10);
  --danger:     #EF4444;
  --danger-bg:  rgba(239,68,68,0.10);
  --warning:    #F59E0B;
  --warning-bg: rgba(245,158,11,0.10);
  --info:       #6B4FE8;
  --info-bg:    rgba(107,79,232,0.10);

  /* ── Layout ── */
  --sidebar-w: 230px;
  --topbar-h:  60px;

  /* ── Radius ── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   18px;
  --radius-pill: 999px;

  /* ── Transitions ── */
  --t-fast: 0.15s ease;
  --t-base: 0.22s ease;
  --t-slow: 0.32s cubic-bezier(0.4,0,0.2,1);
}

/* ===================================================================
   DARK MODE — content area only (sidebar stays same)
   =================================================================== */
[data-theme="dark"] {
  /* Sidebar dark */
  --sb-bg:           #141920;
  --sb-border:       rgba(255,255,255,0.07);
  --sb-text:         rgba(255,255,255,0.68);
  --sb-text-hover:   rgba(255,255,255,0.88);
  --sb-active-bg:    rgba(133,94,255,0.16);
  --sb-active-text:  #a78bfa;
  --sb-section:      rgba(255,255,255,0.42);
  --sb-icon-dim:     rgba(255,255,255,0.55);
  --sb-footer-bg:    rgba(255,255,255,0.04);
  --sb-brand:        rgba(255,255,255,0.92);
  --sb-user-name:    rgba(255,255,255,0.85);

  --bg:        #0f1117;
  --card:      #1a1e2a;
  --card2:     #222636;
  --card3:     #2a2f42;
  --border:        #2e3348;
  --border-strong: #3a3f58;
  --text:          #f0f2f8;
  --text-muted:    #b4bcd0;
  --text-dim:      #8893ad;

  --topbar-bg:     #1a1e2a;
  --topbar-border: #2e3348;

  --shadow-sm: 0 1px 4px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.5);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.6);

  --success-bg: rgba(29,181,132,0.13);
  --danger-bg:  rgba(239,68,68,0.13);
  --warning-bg: rgba(245,158,11,0.13);
  --info-bg:    rgba(107,79,232,0.13);
  --accent-subtle: rgba(29,181,132,0.13);
  --violet-glow:   rgba(107,79,232,0.20);
}

/* ===================================================================
   SMOOTH TRANSITIONS
   =================================================================== */
body, .content-wrap, .topbar, .card, .stat-card, .module-card,
.data-table-wrap, .data-table-toolbar,
.data-table-grid td, .data-table-grid th,
.field-input, select, textarea,
.sub-tabs, .nav-bar, .pay-tab-bar,
.pmodal-box, .pmodal-body, .pmodal-foot,
.modal-box, .modal-body, .modal-footer {
  transition:
    background-color var(--t-slow),
    border-color     var(--t-slow),
    color            var(--t-slow);
}

/* ===================================================================
   BASE
   =================================================================== */
html { height: 100%; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ===================================================================
   APP SHELL
   =================================================================== */
.app-shell { display: flex; min-height: 100vh; }

/* ===================================================================
   SIDEBAR — always dark, Sequence style
   =================================================================== */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--sb-bg);
  border-right: 1px solid var(--sb-border);
  display: flex; flex-direction: column;
  position: fixed; top: 0; left: 0;
  height: 100vh; z-index: 200;
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.08) transparent;
}

/* Brand */
.sidebar-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 16px 15px;
  border-bottom: 1px solid var(--sb-border);
  text-decoration: none; flex-shrink: 0;
}
.sidebar-logo {
  width: 34px; height: 34px; border-radius: 9px;
  background: #6333FB;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.sidebar-logo img { width: 100%; height: 100%; display: block; object-fit: cover; }
.sidebar-logo-letter {
  font-size: 16px; font-weight: 800; color: #fff; line-height: 1;
}
.sidebar-name {
  font-size: 14px; font-weight: 700; color: var(--sb-brand);
  display: block; letter-spacing: -0.2px;
}
.sidebar-sub {
  font-size: 9px; font-weight: 600; color: var(--sb-section);
  letter-spacing: 1.4px; text-transform: uppercase; display: block;
}

/* Nav */
.sidebar-nav { padding: 10px 8px; flex: 1; }
.nav-section-label {
  font-size: 9px; font-weight: 700;
  color: var(--sb-section);
  letter-spacing: 1.2px; text-transform: uppercase;
  padding: 14px 10px 5px; display: block;
}
.sidebar-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--radius-md);
  font-size: 13px; font-weight: 500;
  color: var(--sb-text);
  text-decoration: none; cursor: pointer;
  border: none; background: transparent;
  width: 100%; text-align: left; font-family: inherit;
  margin-bottom: 2px;
  transition: background var(--t-fast), color var(--t-fast);
}
.sidebar-nav-item:hover {
  background: var(--sb-active-bg);
  color: var(--sb-text-hover);
}
.sidebar-nav-item.active {
  background: var(--sb-active-bg);
  color: var(--sb-active-text);
  font-weight: 600;
}
.nav-icon { width: 18px; font-size: 15px; flex-shrink: 0; opacity: 0.7; }
.sidebar-nav-item.active .nav-icon { opacity: 1; }
.nav-badge {
  margin-left: auto; font-size: 9px; font-weight: 700;
  background: var(--accent); color: #fff;
  padding: 2px 7px; border-radius: var(--radius-pill);
}

/* Footer */
.sidebar-footer {
  padding: 10px 8px 14px;
  border-top: 1px solid var(--sb-border);
  background: var(--sb-footer-bg);
  flex-shrink: 0;
}
.sidebar-user {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: var(--radius-md);
  cursor: default;
}
.sidebar-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; flex-shrink: 0;
}
.sidebar-user-name {
  font-size: 13px; font-weight: 600; color: var(--sb-user-name);
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-user-role {
  font-size: 10px; color: var(--sb-text);
  display: block; text-transform: capitalize;
}
.sidebar-theme-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px 6px;
}
.sidebar-theme-label { font-size: 12px; color: var(--sb-text); font-weight: 500; }
.sidebar-logout-btn {
  width: calc(100% - 20px); margin: 4px 10px 0;
  padding: 9px 14px; border-radius: var(--radius-md);
  border: 1px solid var(--sb-border);
  background: var(--sb-footer-bg);
  color: var(--sb-text); font-family: inherit;
  font-size: 12px; font-weight: 500; cursor: pointer;
  text-align: left; display: flex; align-items: center; gap: 8px;
  transition: background var(--t-fast), color var(--t-fast);
}
.sidebar-logout-btn:hover {
  background: rgba(239,68,68,0.12);
  color: #f87171; border-color: rgba(239,68,68,0.2);
}

/* ===================================================================
   THEME TOGGLE — pill switch
   =================================================================== */
.theme-toggle {
  position: relative; width: 42px; height: 23px;
  background: var(--card3);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-pill); cursor: pointer;
  transition: background var(--t-slow), border-color var(--t-slow);
  outline: none; padding: 0; flex-shrink: 0;
}
.theme-toggle:focus-visible { box-shadow: 0 0 0 3px var(--accent-glow); }
[data-theme="dark"] .theme-toggle {
  background: var(--accent-subtle);
  border-color: var(--accent-glow);
}
.theme-toggle-knob {
  position: absolute; top: 2px; left: 2px;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--text-dim);
  transition: transform var(--t-slow), background var(--t-slow);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; line-height: 1;
}
[data-theme="dark"] .theme-toggle-knob {
  transform: translateX(19px);
  background: var(--accent);
}
.theme-toggle-icon { display: block; font-style: normal; user-select: none; pointer-events: none; }

/* ===================================================================
   CONTENT AREA
   =================================================================== */
.content-wrap {
  margin-left: var(--sidebar-w);
  min-height: 100vh;
  display: flex; flex-direction: column;
  flex: 1; background: var(--bg);
}

/* Topbar */
.topbar {
  height: var(--topbar-h);
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--topbar-border);
  display: flex; align-items: center;
  padding: 0 24px; gap: 14px;
  position: sticky; top: 0; z-index: 100;
  box-shadow: var(--shadow-sm);
}
.topbar-left { flex: 1; min-width: 0; }
.topbar-title {
  font-size: 16px; font-weight: 700;
  color: var(--text); letter-spacing: -0.3px;
}
.topbar-subtitle { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.topbar-role-badge {
  font-size: 10.5px; font-weight: 600;
  padding: 3px 10px; border-radius: var(--radius-pill);
  background: var(--accent-subtle); color: var(--accent);
  border: 1px solid var(--accent-glow); text-transform: capitalize;
}
[data-theme="dark"] .topbar-role-badge { color: var(--accent-light); }
.topbar-logout {
  font-size: 12px; font-weight: 500; padding: 6px 13px;
  background: var(--card2); border: 1px solid var(--border);
  color: var(--text-muted); border-radius: var(--radius-md);
  cursor: pointer; font-family: inherit;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.topbar-logout:hover { color: var(--danger); border-color: var(--danger); background: var(--danger-bg); }

/* Page content */
.page-content { padding: 24px 24px 80px; flex: 1; }
.main-wrap { padding: 24px 24px 80px; }

/* Page header */
.page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 22px; gap: 14px; flex-wrap: wrap;
}
.page-title { font-size: 20px; font-weight: 800; color: var(--text); letter-spacing: -0.4px; }
.page-subtitle { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; }
.page-header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.section-title {
  font-size: 10.5px; font-weight: 700; color: var(--text-dim);
  letter-spacing: 1.2px; text-transform: uppercase; margin: 22px 0 12px;
}

/* Sub-tabs */
.sub-tabs {
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--topbar-border);
  position: sticky; top: var(--topbar-h); z-index: 90;
}
.sub-tabs-inner {
  display: flex; overflow-x: auto; gap: 0;
  scrollbar-width: none; padding: 0 22px;
}
.sub-tabs-inner::-webkit-scrollbar { display: none; }
.sub-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 12px 15px; border: none; background: transparent;
  cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 500;
  color: var(--text-muted); white-space: nowrap;
  border-bottom: 2px solid transparent;
  text-decoration: none;
  transition: color var(--t-fast);
}
.sub-tab:hover { color: var(--text); }
.sub-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
[data-theme="dark"] .sub-tab.active { color: var(--accent-light); border-bottom-color: var(--accent-light); }

/* nav-bar compat (payroll uses pay-tab-bar) */
.nav-bar { background: var(--topbar-bg); border-bottom: 1px solid var(--topbar-border); position: sticky; top: var(--topbar-h); z-index: 90; }
.nav-row { padding: 0 22px; display: flex; overflow-x: auto; gap: 0; scrollbar-width: none; }
.nav-row::-webkit-scrollbar { display: none; }
.nav-tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 12px 15px; border: none; background: transparent;
  cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 500;
  color: var(--text-muted); white-space: nowrap;
  border-bottom: 2px solid transparent; text-decoration: none;
}
.nav-tab:hover { color: var(--text); }
.nav-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
[data-theme="dark"] .nav-tab.active { color: var(--accent-light); border-bottom-color: var(--accent-light); }
.nav-tab .nav-badge {
  font-size: 9px; padding: 2px 6px; border-radius: var(--radius-pill);
  background: var(--accent-subtle); color: var(--accent); font-weight: 700;
}

/* ===================================================================
   LOGIN
   =================================================================== */
.login-wrap {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 24px; position: relative; overflow: hidden;
  background: #0d1520;
}
.login-wrap::before {
  content:''; position:absolute; width:500px; height:500px; border-radius:50%;
  background:radial-gradient(circle, rgba(29,181,132,0.18) 0%, transparent 70%);
  top:-150px; right:-150px; pointer-events:none;
}
.login-wrap::after {
  content:''; position:absolute; width:400px; height:400px; border-radius:50%;
  background:radial-gradient(circle, rgba(107,79,232,0.12) 0%, transparent 70%);
  bottom:-100px; left:-100px; pointer-events:none;
}
.login-card {
  position:relative; z-index:2;
  background: #1a1e2a; border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-xl); padding: 36px 32px 30px;
  width:100%; max-width:380px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6);
  animation: fadeUp 0.5s cubic-bezier(0.16,1,0.3,1);
}
.login-theme-btn { position:fixed; top:18px; right:18px; z-index:100; }
@keyframes fadeUp { from {opacity:0;transform:translateY(20px);} to {opacity:1;transform:translateY(0);} }
.brand-mark { text-align:center; margin-bottom:22px; }
.brand-logo {
  width:70px; height:70px; border-radius:50%;
  background: rgba(29,181,132,0.12); border: 1px solid rgba(29,181,132,0.25);
  color: var(--accent);
  display:inline-flex; align-items:center; justify-content:center; margin-bottom:12px;
}
.brand-eyebrow { font-size:10px; font-weight:600; color:var(--accent); letter-spacing:1.8px; text-transform:uppercase; }
.brand-name { font-size:22px; font-weight:700; color:#f0f2f8; letter-spacing:-0.3px; margin:4px 0 0; }
.brand-tagline { font-size:12px; color:rgba(255,255,255,0.4); margin-top:3px; }
.divider { height:1px; background:rgba(255,255,255,0.08); margin:20px 0; }

.tab-switch {
  display:flex; background:rgba(255,255,255,0.06);
  border-radius:var(--radius-md); padding:4px; margin-bottom:20px;
  border:1px solid rgba(255,255,255,0.08);
}
.tab-switch button {
  flex:1; padding:8px 12px; border:none; background:transparent;
  border-radius:var(--radius-sm); font-family:inherit; font-size:13px;
  font-weight:600; color:rgba(255,255,255,0.4); cursor:pointer;
}
.tab-switch button.active { background:rgba(255,255,255,0.10); color:var(--accent); }

/* ===================================================================
   FORM FIELDS
   =================================================================== */
.field { margin-bottom: 14px; }
.field-label { display:block; font-size:12px; font-weight:600; color:var(--text-muted); margin-bottom:6px; }
.field-input {
  width:100%; padding:10px 13px;
  border:1px solid var(--border); border-radius:var(--radius-md);
  font-family:inherit; font-size:14px;
  color:var(--text); background:var(--card2);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-slow);
}
.field-input::placeholder { color:var(--text-dim); }
.field-input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); }
.field-input:disabled { background:var(--card3); cursor:not-allowed; color:var(--text-dim); }

/* Login fields always dark */
.login-card .field-input {
  background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.10);
  color:#f0f2f8;
}
.login-card .field-input::placeholder { color:rgba(255,255,255,0.25); }
.login-card .field-input:focus { border-color:var(--accent); background:rgba(255,255,255,0.08); }
.login-card .field-label { color:rgba(255,255,255,0.5); }

.field-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.hint-inline { color:var(--text-dim); font-weight:400; font-size:11px; }

/* ===================================================================
   BUTTONS
   =================================================================== */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:6px; padding:9px 16px;
  border:1px solid var(--border); border-radius:var(--radius-md);
  background:var(--card2); color:var(--text);
  font-family:inherit; font-size:13px; font-weight:600;
  cursor:pointer; white-space:nowrap;
  transition: all var(--t-fast);
}
.btn:hover { background:var(--card3); border-color:var(--border-strong); }
.btn:active { transform:scale(0.98); }
.btn-primary {
  background:var(--accent); color:#fff; border-color:var(--accent);
  box-shadow: 0 4px 14px rgba(29,181,132,0.35);
}
.btn-primary:hover { background:var(--accent-dark); border-color:var(--accent-dark); }
.btn-primary:disabled { background:var(--card3); border-color:var(--border); color:var(--text-dim); cursor:not-allowed; box-shadow:none; }
.btn-violet {
  background:var(--violet); color:#fff; border-color:var(--violet);
  box-shadow: 0 4px 14px rgba(107,79,232,0.35);
}
.btn-violet:hover { background:var(--violet-dark); border-color:var(--violet-dark); }
.btn-block { width:100%; }
.btn-lg { padding:11px 20px; font-size:14px; }
.btn-sm { padding:6px 11px; font-size:12px; }
.btn-ghost { border-color:transparent; background:transparent; }
.btn-ghost:hover { background:var(--card2); }
.btn-danger { color:var(--danger); border-color:transparent; background:transparent; }
.btn-danger:hover { background:var(--danger-bg); border-color:var(--danger); }
.link { color:var(--accent); font-size:13px; font-weight:500; text-decoration:none; cursor:pointer; }
[data-theme="dark"] .link { color:var(--accent-light); }
.link:hover { text-decoration:underline; }

/* Login btn */
.login-card .btn-primary { box-shadow:0 4px 20px rgba(29,181,132,0.4); }

/* OAuth divider + Google button */
.oauth-divider { display:flex; align-items:center; gap:10px; margin:16px 0; }
.oauth-divider::before, .oauth-divider::after { content:''; flex:1; height:1px; background:rgba(255,255,255,0.12); }
.oauth-divider span { font-size:11px; color:rgba(255,255,255,0.4); text-transform:uppercase; letter-spacing:0.5px; }
.btn-google {
  background:#fff; color:#3c4043; border:1px solid #dadce0;
  display:flex; align-items:center; justify-content:center;
}
.btn-google:hover { background:#f8f9fa; border-color:#dadce0; }
.btn-google:disabled { opacity:0.6; cursor:not-allowed; }

/* ===================================================================
   ALERTS
   =================================================================== */
.alert { padding:10px 14px; border-radius:var(--radius-md); font-size:13px; font-weight:500; margin-bottom:12px; display:none; }
.alert.show { display:block; }
.alert-error   { background:var(--danger-bg);  color:var(--danger);  border:1px solid rgba(239,68,68,0.25); }
.alert-success { background:var(--success-bg); color:var(--success); border:1px solid rgba(29,181,132,0.25); }
.alert-info    { background:var(--info-bg);    color:var(--info);    border:1px solid rgba(107,79,232,0.25); }

/* ===================================================================
   TOAST
   =================================================================== */
.toast {
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(80px);
  background:var(--card3); color:var(--text); border:1px solid var(--border);
  padding:10px 20px; border-radius:var(--radius-pill);
  font-size:13px; font-weight:500; white-space:nowrap;
  box-shadow:var(--shadow-lg); z-index:9999;
  opacity:0; transition:all var(--t-slow); pointer-events:none;
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.toast.success { background:#1DB584; color:#fff; border-color:#1DB584; }
.toast.error   { background:#EF4444; color:#fff; border-color:#EF4444; }
[data-theme="dark"] .toast { background:#2a2f42; border-color:#3a3f58; }

/* ===================================================================
   LOADING
   =================================================================== */
.loading-full { position:fixed; inset:0; background:var(--bg); display:flex; align-items:center; justify-content:center; z-index:9990; }
.spinner { width:34px; height:34px; border-radius:50%; border:3px solid var(--border); border-top-color:var(--accent); animation:spin 0.8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ===================================================================
   LEGACY — app-header hidden (replaced by sidebar)
   =================================================================== */
.app-header { display: none !important; }
.nav-burger  { display: none !important; }
.header-nav  { display: none !important; }

/* Kept for old JS compat */
.role-badge {
  font-size:10.5px; font-weight:600; padding:3px 10px;
  background:var(--accent-subtle); color:var(--accent);
  border:1px solid var(--accent-glow);
  border-radius:var(--radius-pill); text-transform:capitalize;
}
.user-menu { display:flex; align-items:center; gap:8px; }
.user-avatar { width:28px; height:28px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; }
.user-name { font-size:12px; color:var(--text-muted); }
.logout-btn { background:var(--card2); border:1px solid var(--border); color:var(--text-muted); padding:7px 12px; border-radius:var(--radius-md); font-family:inherit; font-size:12px; cursor:pointer; }
.logout-btn:hover { color:var(--danger); }

/* ===================================================================
   STAT CARDS
   =================================================================== */
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:22px; }
.stat-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:18px 18px 16px;
  display:flex; flex-direction:column; gap:8px; position:relative; overflow:hidden;
}
.stat-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--accent);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
}
.stat-card.green::before  { background:var(--success); }
.stat-card.red::before    { background:var(--danger); }
.stat-card.amber::before  { background:var(--warning); }
.stat-card.violet::before { background:var(--violet); }
.stat-card.blue::before   { background:var(--info); }

.stat-card-icon {
  width:38px; height:38px; border-radius:var(--radius-md);
  background:var(--accent-subtle); color:var(--accent);
  display:flex; align-items:center; justify-content:center; font-size:17px;
}
.stat-card.green  .stat-card-icon { background:var(--success-bg); color:var(--success); }
.stat-card.red    .stat-card-icon { background:var(--danger-bg);  color:var(--danger); }
.stat-card.amber  .stat-card-icon { background:var(--warning-bg); color:var(--warning); }
.stat-card.violet .stat-card-icon { background:var(--info-bg);    color:var(--violet); }
.stat-card.blue   .stat-card-icon { background:var(--info-bg);    color:var(--info); }

.stat-label { font-size:11px; font-weight:600; color:var(--text-muted); letter-spacing:0.2px; }
.stat-value { font-size:22px; font-weight:800; color:var(--text); letter-spacing:-0.5px; line-height:1; }
.stat-sub   { font-size:11px; color:var(--text-dim); }

/* ===================================================================
   MODULE CARDS
   =================================================================== */
.module-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px; }
.module-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:18px;
  text-decoration:none; color:inherit;
  display:flex; flex-direction:column; min-height:145px;
  transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.module-card:hover { transform:translateY(-2px); border-color:var(--accent); box-shadow:0 6px 20px var(--accent-glow); }
.module-card.disabled { opacity:0.4; cursor:not-allowed; pointer-events:none; }
.module-icon {
  width:40px; height:40px; border-radius:var(--radius-md);
  background:var(--accent-subtle); color:var(--accent);
  display:flex; align-items:center; justify-content:center; margin-bottom:12px; font-size:19px;
}
.module-title { font-size:14px; font-weight:700; margin-bottom:3px; }
.module-desc  { font-size:12px; color:var(--text-muted); line-height:1.5; flex:1; }
.module-status {
  display:inline-flex; font-size:10px; font-weight:700;
  padding:3px 8px; border-radius:var(--radius-pill);
  background:var(--card2); color:var(--text-muted);
  letter-spacing:0.4px; text-transform:uppercase; margin-top:10px; align-self:flex-start;
}
.module-status.ready { background:var(--success-bg); color:var(--success); }
.module-status.soon  { background:var(--warning-bg); color:var(--warning); }

/* ===================================================================
   CARDS
   =================================================================== */
.card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:18px; }
.card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.card-title { font-size:14px; font-weight:700; color:var(--text); }

/* ===================================================================
   WELCOME CARD
   =================================================================== */
.welcome-card {
  background:linear-gradient(135deg, #0d2b1f 0%, #123528 60%, #1a4535 100%);
  border:1px solid rgba(29,181,132,0.2);
  color:#fff; border-radius:var(--radius-xl);
  padding:26px 28px; margin-bottom:22px; position:relative; overflow:hidden;
}
[data-theme="dark"] .welcome-card {
  background:linear-gradient(135deg, #0a1a14 0%, #0f2a20 60%, #142e24 100%);
}
.welcome-card::before {
  content:''; position:absolute; width:280px; height:280px; border-radius:50%;
  background:radial-gradient(circle, rgba(29,181,132,0.25) 0%, transparent 70%);
  top:-80px; right:-60px; pointer-events:none;
}
.welcome-eyebrow { font-size:10px; font-weight:600; color:rgba(255,255,255,0.55); letter-spacing:1.8px; text-transform:uppercase; margin-bottom:5px; }
.welcome-title { font-size:22px; font-weight:800; color:#fff; letter-spacing:-0.4px; margin-bottom:5px; }
.welcome-text  { font-size:13px; color:rgba(255,255,255,0.7); max-width:500px; }

/* ===================================================================
   DATA TABLE
   =================================================================== */
.data-table-wrap { background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; }
.data-table-toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:13px 16px; border-bottom:1px solid var(--border); }
.data-table-grid { width:100%; border-collapse:collapse; font-size:13px; }
.data-table-grid th { background:var(--card2); padding:10px 13px; text-align:left; font-size:10.5px; font-weight:700; color:var(--text-muted); letter-spacing:0.5px; text-transform:uppercase; border-bottom:1px solid var(--border); white-space:nowrap; }
.data-table-grid td { padding:11px 13px; border-bottom:1px solid var(--border); color:var(--text); vertical-align:middle; }
.data-table-grid tr:last-child td { border-bottom:none; }
.data-table-grid tr:hover td { background:var(--card2); cursor:pointer; }
.data-table-grid .empty-row td { text-align:center; padding:40px; color:var(--text-muted); }

/* ===================================================================
   STATUS PILLS
   =================================================================== */
.pill { display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:var(--radius-pill); font-size:11px; font-weight:600; white-space:nowrap; }
.pill-green  { background:var(--success-bg); color:var(--success); }
.pill-red    { background:var(--danger-bg);  color:var(--danger); }
.pill-amber  { background:var(--warning-bg); color:var(--warning); }
.pill-violet { background:var(--info-bg);    color:var(--violet); }
.pill-gray   { background:var(--card3);      color:var(--text-muted); }

/* ===================================================================
   SEARCH
   =================================================================== */
.search-input-wrap { position:relative; flex:1; max-width:260px; }
.search-input-wrap::before { content:'🔍'; position:absolute; left:10px; top:50%; transform:translateY(-50%); font-size:11px; pointer-events:none; }
.search-input { width:100%; padding:8px 12px 8px 30px; background:var(--card2); border:1px solid var(--border); border-radius:var(--radius-md); font-family:inherit; font-size:13px; color:var(--text); }
.search-input::placeholder { color:var(--text-dim); }
.search-input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); }

/* ===================================================================
   MODALS
   =================================================================== */
.modal-overlay, .pmodal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.55);
  z-index:500; display:none; align-items:center; justify-content:center;
  padding:20px; backdrop-filter:blur(4px);
}
.modal-overlay.show, .pmodal-overlay.show {
  display:flex;
}
.modal-box, .pmodal-box {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius-xl); width:100%; max-width:560px;
  box-shadow:var(--shadow-lg); animation:fadeUp 0.22s ease;
  max-height:92vh; display:flex; flex-direction:column;
}
.modal-header, .pmodal-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px 15px; border-bottom:1px solid var(--border); flex-shrink:0;
}
.modal-title, .pmodal-title { font-size:15px; font-weight:700; color:var(--text); }
.modal-close, .pmodal-close {
  width:28px; height:28px; border-radius:50%; border:none;
  background:var(--card2); color:var(--text-muted);
  cursor:pointer; font-size:15px;
  display:flex; align-items:center; justify-content:center;
}
.modal-close:hover, .pmodal-close:hover { background:var(--card3); color:var(--text); }
.modal-body, .pmodal-body { padding:18px 22px; overflow-y:auto; flex:1; }
.modal-footer, .pmodal-foot { padding:13px 22px 18px; border-top:1px solid var(--border); display:flex; gap:10px; justify-content:flex-end; flex-shrink:0; }

/* ===================================================================
   QUICK LINKS
   =================================================================== */
.dash-quick-link {
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 13px; border-radius:var(--radius-md);
  background:var(--card2); border:1px solid var(--border);
  color:var(--text); text-decoration:none; font-size:13px; font-weight:500;
}
.dash-quick-link:hover { background:var(--accent-subtle); border-color:var(--accent); color:var(--accent); }
[data-theme="dark"] .dash-quick-link:hover { color:var(--accent-light); }

/* ===================================================================
   MOBILE SIDEBAR
   =================================================================== */
.sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:190; }
.mobile-topbar {
  display:none; height:54px;
  background:var(--topbar-bg); border-bottom:1px solid var(--topbar-border);
  align-items:center; padding:0 14px; gap:12px;
  position:sticky; top:0; z-index:150;
}
.mobile-menu-btn {
  width:34px; height:34px; border-radius:var(--radius-md);
  background:var(--card2); border:1px solid var(--border);
  color:var(--text); cursor:pointer; font-size:17px;
  display:flex; align-items:center; justify-content:center;
}
.mobile-brand { font-size:14px; font-weight:700; color:var(--text); flex:1; }

/* ===================================================================
   FOOTER
   =================================================================== */
.app-footer { text-align:center; padding:22px; font-size:12px; color:var(--text-dim); }

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width:900px) {
  .sidebar { transform:translateX(-100%); transition:transform var(--t-slow); }
  .sidebar.open { transform:translateX(0); box-shadow:var(--shadow-lg); }
  .sidebar-overlay { display:block; }
  .content-wrap { margin-left:0; }
  .mobile-topbar { display:flex; }
  .topbar { display:none; }
  .page-content { padding:16px 14px 60px; }
  .main-wrap { padding:16px 14px 60px; }
  .stat-grid { grid-template-columns:1fr 1fr; gap:10px; }
  .module-grid { grid-template-columns:1fr 1fr; gap:10px; }
}
@media (max-width:480px) {
  .module-grid { grid-template-columns:1fr; }
  .stat-value { font-size:20px; }
  .page-title { font-size:17px; }
}