/* ── Reset & base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --brand:        #16a34a;
  --brand-dark:   #15803d;
  --brand-light:  #dcfce7;
  --bg:           #f8fafc;
  --bg-card:      #ffffff;
  --bg-sidebar:   #111827;
  --border:       #e2e8f0;
  --border-dark:  #cbd5e1;
  --text:         #0f172a;
  --text-muted:   #64748b;
  --text-light:   #94a3b8;
  --danger:       #dc2626;
  --danger-bg:    #fef2f2;
  --warning:      #d97706;
  --warning-bg:   #fffbeb;
  --info:         #2563eb;
  --info-bg:      #eff6ff;
  --success:      #16a34a;
  --success-bg:   #f0fdf4;
  --radius:       8px;
  --radius-lg:    12px;
  --shadow-sm:    0 1px 3px rgba(0,0,0,.08);
  --shadow:       0 4px 12px rgba(0,0,0,.08);
  --sidebar-w:    220px;
  --font:         -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

html, body { height: 100%; font-family: var(--font); font-size: 14px; color: var(--text); background: var(--bg); }

/* Smooth theme transition (applied to key elements only to avoid lag) */
body, .card, .sidebar, .main-content, .btn, .form-control, thead th, tbody td, tfoot td, .badge, .metric-card, .modal {
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

/* ── Layout ───────────────────────────────────────────────── */
.layout { display: flex; height: 100vh; overflow: hidden; }

/* ── Sidebar ──────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: var(--bg-sidebar);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 16px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.brand-icon {
  width: 32px; height: 32px;
  background: var(--brand);
  color: #fff;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px;
  flex-shrink: 0;
}
.brand-name { color: #fff; font-weight: 600; font-size: 14px; }
.brand-sub  { color: rgba(255,255,255,.4); font-size: 11px; margin-top: 1px; }

.sidebar-nav { flex: 1; padding: 12px 8px; }
.nav-section-label {
  color: rgba(255,255,255,.3);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 12px 8px 4px;
}
.nav-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 6px;
  color: rgba(255,255,255,.6);
  text-decoration: none;
  font-size: 13px;
  transition: all .15s;
  margin-bottom: 1px;
}
.nav-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.nav-link.active { background: var(--brand); color: #fff; }
.nav-link svg { flex-shrink: 0; opacity: .8; }
.nav-link.active svg { opacity: 1; }

.sidebar-footer {
  padding: 12px 16px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.sidebar-user { color: rgba(255,255,255,.5); font-size: 12px; display: flex; align-items: center; gap: 6px; }
.logout-btn {
  color: rgba(255,255,255,.4);
  font-size: 12px;
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,.15);
  transition: all .15s;
}
.logout-btn:hover { color: #fff; border-color: rgba(255,255,255,.4); }

/* ── Main content ─────────────────────────────────────────── */
.main-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px;
  background: var(--bg);
}

/* ── Page header ──────────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
}
.page-header-left h1 { font-size: 20px; font-weight: 600; color: var(--text); }
.page-header-left p  { color: var(--text-muted); font-size: 13px; margin-top: 3px; }
.page-header-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }

/* ── Metric cards ─────────────────────────────────────────── */
.metric-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 18px; }
.metric-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: 3px solid var(--border-dark);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  box-shadow: var(--shadow-sm);

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;

  min-height: 110px;
}
.metric-card .mc-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 6px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.metric-card .mc-value {
  font-size: clamp(15px, 1.8vw, 22px);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 4px;
  color: var(--text);
}
.metric-card .mc-sub {
  font-size: 11px;
  color: var(--text-light);
}

/* Color variants — border-top accent + value color */
.metric-card.green  { border-top-color: var(--success); }
.metric-card.blue   { border-top-color: var(--info); }
.metric-card.red    { border-top-color: var(--danger); }
.metric-card.amber  { border-top-color: var(--warning); }
.metric-card.purple { border-top-color: #7c3aed; }
.metric-card.teal   { border-top-color: #0891b2; }
.metric-card.gray   { border-top-color: #64748b; }
.metric-card.pink   { border-top-color: #db2777; }
.metric-card.cyan   { border-top-color: #0891b2; }

.metric-card.green  .mc-value { color: var(--success); }
.metric-card.blue   .mc-value { color: var(--info); }
.metric-card.red    .mc-value { color: var(--danger); }
.metric-card.amber  .mc-value { color: var(--warning); }
.metric-card.purple .mc-value { color: #7c3aed; }
.metric-card.teal   .mc-value { color: #0891b2; }
.metric-card.gray   .mc-value { color: #64748b; }
.metric-card.pink   .mc-value { color: #db2777; }
.metric-card.cyan   .mc-value { color: #0891b2; }

/* ── Cards ────────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}
.card-header h2 { font-size: 14px; font-weight: 600; }
.card-body { padding: 20px; }
.card-body-flush { padding: 0; }

/* ── Grid helpers ─────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }

/* ── Tables ───────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }

thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 11px 16px;
  border-bottom: 2px solid var(--border-dark);
  white-space: nowrap;
}
thead th:first-child { border-radius: 0; padding-left: 18px; }
thead th:last-child  { padding-right: 18px; }

/* Light header variant — add class="thead-light" to <thead> for subtle gray background */
.thead-light th {
  background: #f1f5f9;
  color: var(--text-muted);
}

tbody td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: middle;
  font-size: 13px;
}
tbody td:first-child { padding-left: 18px; }
tbody td:last-child  { padding-right: 18px; }
tbody tr { transition: background .1s ease; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: #eff6ff !important; color: var(--text) !important; }

tfoot td {
  padding: 12px 16px;
  font-weight: 700;
  border-top: 2px solid var(--border-dark);
  font-size: 13px;
}
tfoot td:first-child { padding-left: 18px; }
tfoot td:last-child  { padding-right: 18px; }

/* Table utility classes */
.td-num     { text-align: right; font-variant-numeric: tabular-nums; }
.td-actions { white-space: nowrap; text-align: right; }
.td-muted   { color: var(--text-muted); font-size: 12px; }
.td-mono    { font-family: monospace; font-size: 12px; }
.td-bold    { font-weight: 700; }
.thead-dark th {
  background: #1e293b;
  color: #e2e8f0;
  border-bottom-color: #334155;
}

/* ── Badges ───────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.badge-green   { background: var(--success-bg); color: var(--success); }
.badge-blue    { background: var(--info-bg);    color: var(--info); }
.badge-red     { background: var(--danger-bg);  color: var(--danger); }
.badge-amber   { background: var(--warning-bg); color: var(--warning); }
.badge-gray    { background: #f1f5f9;           color: var(--text-muted); }

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: all .15s;
  white-space: nowrap;
}
.btn-primary   { background: var(--brand);   color: #fff; border-color: var(--brand); }
.btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn-secondary { background: #fff; color: var(--text); border-color: var(--border-dark); }
.btn-secondary:hover { background: #f8fafc; }
.btn-danger    { background: var(--danger-bg); color: var(--danger); border-color: #fecaca; }
.btn-danger:hover { background: #fee2e2; }
.btn-sm        { padding: 5px 10px; font-size: 12px; }
.btn-icon      { padding: 6px 8px; }

/* ── Forms ────────────────────────────────────────────────── */
.form-grid   { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px 20px; }
.form-full   { grid-column: 1 / -1; }
.form-group  { display: flex; flex-direction: column; gap: 5px; }
.form-group label { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.form-control {
  width: 100%;
  padding: 8px 11px;
  border: 1px solid var(--border-dark);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--text);
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.form-control:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(22,163,74,.12);
}
select.form-control { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 30px; }
textarea.form-control { resize: vertical; min-height: 80px; }
.form-hint { font-size: 11px; color: var(--text-light); }

/* ── Search / filter bar ──────────────────────────────────── */
.filter-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.filter-bar .form-control { max-width: 220px; }
.filter-bar .form-control-search { max-width: 300px; }

/* ── Flash messages ───────────────────────────────────────── */
.flash-container { margin-bottom: 16px; display: flex; flex-direction: column; gap: 8px; }
.flash {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
}
.flash-success { background: var(--success-bg); color: var(--success); border: 1px solid #bbf7d0; }
.flash-danger  { background: var(--danger-bg);  color: var(--danger);  border: 1px solid #fecaca; }
.flash-warning { background: var(--warning-bg); color: var(--warning); border: 1px solid #fde68a; }
.flash-info    { background: var(--info-bg);    color: var(--info);    border: 1px solid #bfdbfe; }
.flash-close   { background: none; border: none; cursor: pointer; font-size: 18px; color: inherit; opacity: .6; line-height: 1; padding: 0 4px; }

/* ── Avatar ───────────────────────────────────────────────── */
.avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--info-bg);
  color: var(--info);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
  flex-shrink: 0;
}
.emp-cell { display: flex; align-items: center; gap: 9px; }

/* ── Modal ────────────────────────────────────────────────── */
.modal-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 999;
  align-items: center;
  justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.modal-header h3 { font-size: 15px; font-weight: 600; }
.modal-close { background: none; border: none; cursor: pointer; font-size: 22px; color: var(--text-muted); line-height: 1; }
.modal-body { padding: 20px; }
.modal-footer { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; }

/* ── Line items (PO / Invoice) ────────────────────────────── */
.line-items-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 8px; }
.line-items-table th { background: #f8fafc; padding: 8px 10px; text-align: left; font-size: 11px; font-weight: 600; color: var(--text-muted); border-bottom: 1px solid var(--border); }
.line-items-table td { padding: 6px 6px; vertical-align: middle; }
.line-items-table td input, .line-items-table td select { width: 100%; padding: 5px 8px; border: 1px solid var(--border-dark); border-radius: 5px; font-size: 12px; }
.line-items-table td input:focus, .line-items-table td select:focus { outline: none; border-color: var(--brand); }
.remove-row-btn { background: none; border: none; color: var(--danger); cursor: pointer; font-size: 16px; padding: 2px 6px; }
.add-row-btn { margin-top: 8px; }

/* ── Login page ───────────────────────────────────────────── */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 50%, #bbf7d0 100%);
}
.login-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(0,0,0,.12);
  padding: 40px 36px;
  width: 100%;
  max-width: 380px;
}
.login-logo { text-align: center; margin-bottom: 28px; }
.login-logo .logo-circle {
  width: 56px; height: 56px;
  background: var(--brand);
  border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 800; color: #fff;
  margin-bottom: 12px;
}
.login-logo h1 { font-size: 20px; font-weight: 700; }
.login-logo p  { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.login-card .form-group { margin-bottom: 16px; }
.login-card .btn-primary { width: 100%; justify-content: center; padding: 10px; }

/* ── Payslip preview ──────────────────────────────────────── */
.payslip-preview {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.payslip-header-bar {
  background: var(--brand);
  color: #fff;
  padding: 14px 20px;
  display: flex; align-items: center; justify-content: space-between;
}
.payslip-section { padding: 16px 20px; border-bottom: 1px solid var(--border); }
.payslip-section:last-child { border-bottom: none; }
.payslip-section h4 { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 12px; }
.payslip-row { display: flex; justify-content: space-between; padding: 5px 0; font-size: 13px; border-bottom: 1px solid #f1f5f9; }
.payslip-row:last-child { border-bottom: none; }
.payslip-total { font-weight: 700; font-size: 15px; background: var(--success-bg); padding: 12px 20px; display: flex; justify-content: space-between; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

/* ── Profit/loss colors ───────────────────────────────────── */
.text-success { color: var(--success); }
.text-danger  { color: var(--danger); }
.text-muted   { color: var(--text-muted); }
.text-right   { text-align: right; }
.fw-600       { font-weight: 600; }

/* ── Empty state ──────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-muted);
}
.empty-state svg { opacity: .3; margin-bottom: 12px; }
.empty-state p   { font-size: 14px; }

/* ── Tabs ─────────────────────────────────────────────────── */
.tabs { display: flex; gap: 2px; border-bottom: 2px solid var(--border); margin-bottom: 20px; }
.tab-btn { background: none; border: none; padding: 10px 16px; font-size: 13px; font-weight: 500; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all .15s; }
.tab-btn.active { color: var(--brand); border-bottom-color: var(--brand); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ── Page Tabs (scrollable link-based tabs, mobile-friendly) ── */
.page-tabs-wrap {
  position: relative;
  margin-bottom: 20px;
}
/* Fade hint on the right to indicate more tabs are scrollable */
.page-tabs-wrap::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 36px;
  background: linear-gradient(to right, transparent, var(--bg));
  pointer-events: none;
  border-radius: 0 var(--radius) 0 0;
}
.page-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* IE/Edge */
  scroll-behavior: smooth;
}
.page-tabs::-webkit-scrollbar { display: none; }
.page-tab {
  padding: 11px 18px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  transition: color .15s;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;   /* accessible touch target */
  flex-shrink: 0;
}
.page-tab:hover { color: var(--text); }
.page-tab.active {
  border-bottom-color: var(--brand);
  color: var(--brand);
}
@media (max-width: 768px) {
  .page-tab { padding: 10px 14px; font-size: 12px; }
  /* Widen fade hint on mobile where scrolling is more likely */
  .page-tabs-wrap::after { width: 48px; }
}

/* ── Divider ──────────────────────────────────────────────── */
.divider { border: none; border-top: 1px solid var(--border); margin: 20px 0; }

/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

/* ══ Mobile Responsive ═══════════════════════════════════════ */
@media (max-width: 768px) {
  :root { --sidebar-w: 0px; }

  /* Sidebar hidden by default on mobile */
  .sidebar {
    position: fixed;
    left: -240px;
    top: 0;
    bottom: 0;
    width: 240px;
    z-index: 1000;
    transition: left .25s ease;
    box-shadow: 4px 0 20px rgba(0,0,0,.3);
  }
  .sidebar.open { left: 0; }

  /* Mobile overlay */
  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 999;
  }
  .sidebar-overlay.show { display: block; }

  /* Main content takes full width */
  .main-content {
    margin-left: 0 !important;
    padding: 16px !important;
    width: 100%;
  }

  /* Mobile top bar */
  .mobile-topbar {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #111827;
    border-bottom: 1px solid #1f2937;
    position: sticky;
    top: 0;
    z-index: 100;
    min-height: 52px;
  }
  .mobile-menu-btn {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
  }
  .mobile-topbar-title {
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    flex: 1;
  }

  /* Page header stacks on mobile */
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .page-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
  }

  /* Metric grid: 2 cols on mobile */
  [style*="grid-template-columns:repeat(5"] ,
  [style*="grid-template-columns:repeat(4"] ,
  [style*="grid-template-columns:repeat(6"] {
    grid-template-columns: repeat(2,1fr) !important;
  }
  [style*="grid-template-columns:repeat(3"] {
    grid-template-columns: repeat(2,1fr) !important;
  }

  /* 2-col grids become 1-col */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:1fr 360px"],
  [style*="grid-template-columns:1fr 300px"],
  [style*="grid-template-columns:1.4fr 1fr"],
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns:repeat(2,1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* Fallback: collapse any inline CSS grid into a single column.
     Templates use many inline `grid-template-columns` styles, so this ensures
     every page remains readable on small screens. */
  [style*="display:grid"][style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Stack card headers for narrow screens */
  .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  /* Tables: horizontal scroll */
  .table-wrap, [style*="overflow-x:auto"] { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Cards */
  .card { border-radius: 10px; }

  /* Hide some columns on very small screens */
  .hide-mobile { display: none !important; }

  /* Modals full screen on mobile */
  [id^="m-"] > div {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    position: fixed;
    bottom: 0;
    max-height: 92vh;
    overflow-y: auto;
  }

  /* Login page */
  .login-page > div { flex-direction: column !important; }
  .login-page [style*="flex:1"] { display: none !important; }
  .login-page [style*="width:380px"] {
    width: 100% !important;
    padding: 32px 24px !important;
  }

  /* Filter bars */
  [id$="-filter"] { flex-direction: column !important; }
  [id$="-filter"] select,
  [id$="-filter"] input { min-width: unset !important; width: 100% !important; }
}

@media (max-width: 480px) {
  [style*="grid-template-columns:repeat(2,1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
  }
  .main-content { padding: 12px !important; }
}

/* Hide mobile topbar on desktop */
.mobile-topbar { display: none; }

/* ── Main content on desktop: sits beside sidebar ──────────── */
@media (min-width: 769px) {
  .main-content {
    /* Extra scroll padding so anchors aren't hidden */
    scroll-padding-top: 16px;
  }
}

/* Balance page row hovers */
.balance-row:hover td,
.balance-row:hover { background: #f0f7ff !important; color: #0f172a !important; }

/* ══ Responsive Layout System ════════════════════════════════ */

/* ── KPI gradient card grid ────────────────────────────────── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.kpi-card {
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  color: #fff;
  position: relative;
  overflow: hidden;
  min-height: 100px;
}
.kpi-card-icon {
  position: absolute;
  right: -10px;
  top: -10px;
  opacity: .1;
  font-size: 80px;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
.kpi-card-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .8;
  position: relative;
}
.kpi-card-value {
  font-size: 26px;
  font-weight: 900;
  margin: 6px 0 2px;
  line-height: 1.1;
  position: relative;
}
.kpi-card-sub {
  font-size: 11px;
  opacity: .7;
  position: relative;
}

/* ── Stat grids (metric-card children) ─────────────────────── */
.stat-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.stat-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.stat-grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 18px; }
.stat-grid-6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 18px; }
.stat-grid-7 { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; margin-bottom: 18px; }

/* ── Two-panel content grids ───────────────────────────────── */
.content-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.content-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.info-grid-3    { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* ── Page layout: main content + right sidebar ─────────────── */
.layout-main-sidebar {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 20px;
  align-items: start;
}
/* ── Page layout: left sidebar + main content ──────────────── */
.layout-sidebar-main {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 20px;
  align-items: start;
}

/* ── Letters workspace ─────────────────────────────────────── */
.letters-hero {
  background: linear-gradient(135deg, #f8fbff 0%, #eef5ff 52%, #f8fafc 100%);
  border: 1px solid #dbeafe;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 18px 20px;
  margin-bottom: 16px;
}
.letters-hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.letters-hero h1 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}
.letters-hero p {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
}
.letters-hero-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.letters-inline-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.letters-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text-muted);
}
.letters-chip strong {
  color: var(--text);
  font-size: 12px;
}
.letters-filter-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 14px 16px;
  margin-bottom: 16px;
}
.letters-filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.letters-filter-head h2 {
  font-size: 13px;
  font-weight: 700;
}
.letters-filter-head span {
  font-size: 12px;
  color: var(--text-muted);
}
.letters-segmented {
  display: inline-flex;
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
  gap: 3px;
}
.letters-segmented a {
  text-decoration: none;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  padding: 7px 12px;
  border-radius: 999px;
}
.letters-segmented a.active {
  background: #fff;
  color: var(--text);
  box-shadow: var(--shadow-sm);
}
.letters-register-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.letters-register-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.letters-register-head h2 {
  font-size: 14px;
  font-weight: 700;
}
.letters-register-head p {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.letters-register-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.letters-register-table {
  min-width: 1120px;
}
.letters-register-table thead th {
  background: #f8fafc;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.letters-register-table tbody tr:hover td {
  background: #f8fbff !important;
}
.letters-register-table tbody td {
  vertical-align: top;
  padding-top: 12px;
  padding-bottom: 12px;
}
.letters-number {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
}
.letters-subject {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  display: inline-block;
  margin-bottom: 4px;
}
.letters-subject:hover {
  color: var(--info);
}
.letters-muted-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.letters-meta-line {
  font-size: 11px;
  color: var(--text-muted);
}
.letters-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.letters-priority-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
}
.letters-link-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  background: #ecfeff;
  color: #0f766e;
}
.letters-party-card,
.letters-section-soft {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.letters-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.letters-form-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.letters-form-section-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: #f8fafc;
}
.letters-form-section-head h2 {
  font-size: 13px;
  font-weight: 700;
}
.letters-form-section-head p {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 3px;
}
.letters-form-section-body {
  padding: 16px;
}
.letters-direction-switch {
  display: flex;
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: 999px;
  padding: 4px;
  gap: 4px;
}
.letters-direction-option {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
}
.letters-direction-option.active {
  background: #fff;
  color: var(--text);
  box-shadow: var(--shadow-sm);
}
.letters-record-header {
  background: linear-gradient(135deg, #f8fbff 0%, #eef5ff 52%, #f8fafc 100%);
  border: 1px solid #dbeafe;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 18px 20px;
  margin-bottom: 16px;
}
.letters-record-title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
}
.letters-record-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.letters-record-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.letters-overview-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.letters-overview-item {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
}
.letters-overview-item .label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-light);
  font-weight: 700;
  margin-bottom: 5px;
}
.letters-overview-item .value {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.letters-sidebar-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.letters-info-list {
  display: flex;
  flex-direction: column;
}
.letters-info-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.letters-info-row:last-child {
  border-bottom: none;
}
.letters-info-row .k {
  color: var(--text-muted);
}
.letters-info-row .v {
  color: var(--text);
  font-weight: 600;
  text-align: right;
  word-break: break-word;
}
.letters-timeline {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.letters-timeline-item {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  align-items: start;
}
.letters-timeline-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eff6ff;
  color: var(--info);
  font-size: 13px;
  font-weight: 700;
}
.letters-timeline-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  padding: 10px 12px;
}
.letters-timeline-card h3 {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 4px;
}
.letters-timeline-card p {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.65;
}
[data-theme="dark"] .letters-hero,
[data-theme="dark"] .letters-record-header {
  background: linear-gradient(135deg, #172554 0%, #0f172a 100%);
  border-color: #1d4ed8;
}
[data-theme="dark"] .letters-form-section-head,
[data-theme="dark"] .letters-register-table thead th {
  background: #111827;
}
[data-theme="dark"] .letters-segmented,
[data-theme="dark"] .letters-overview-item,
[data-theme="dark"] .letters-party-card,
[data-theme="dark"] .letters-section-soft,
[data-theme="dark"] .letters-timeline-card {
  background: #0f172a;
}
[data-theme="dark"] .letters-direction-option.active {
  background: #1e293b;
}

/* ── Responsive breakpoints ────────────────────────────────── */
@media (max-width: 1200px) {
  .stat-grid-6 { grid-template-columns: repeat(3, 1fr); }
  .stat-grid-7 { grid-template-columns: repeat(4, 1fr); }
  .letters-overview-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard-hero-grid { grid-template-columns: 1fr; }
  .dashboard-chip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  .stat-grid-5          { grid-template-columns: repeat(3, 1fr); }
  .stat-grid-7          { grid-template-columns: repeat(3, 1fr); }
  .kpi-grid             { grid-template-columns: repeat(2, 1fr); }
  .layout-main-sidebar  { grid-template-columns: 1fr; }
  .layout-sidebar-main  { grid-template-columns: 1fr; }
  .info-grid-3          { grid-template-columns: 1fr 1fr; }
  .letters-form-grid    { grid-template-columns: 1fr; }
  .letters-record-toolbar,
  .letters-hero-top     { flex-direction: column; }
}

@media (max-width: 768px) {
  .stat-grid-3,
  .stat-grid-4,
  .stat-grid-6,
  .stat-grid-7   { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .stat-grid-5   { grid-template-columns: repeat(3, 1fr); gap: 8px; } /* 3+2 layout, avoids lone last card */
  .metric-grid   { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .content-grid-2,
  .content-grid-3 { grid-template-columns: 1fr; }
  .info-grid-3   { grid-template-columns: 1fr; }
  .kpi-grid      { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .kpi-card      { padding: 14px 16px; min-height: 80px; }
  .kpi-card-value { font-size: 20px; }
  .letters-overview-grid { grid-template-columns: 1fr; }
  .letters-filter-head { flex-direction: column; align-items: flex-start; }
  .letters-segmented { width: 100%; overflow-x: auto; }
  .letters-hero-actions { width: 100%; }
}

@media (max-width: 480px) {
  .dashboard-hero {
    padding: 18px 16px;
    border-radius: 20px;
  }

  .dashboard-hero-headline {
    flex-direction: column;
    align-items: flex-start;
  }

  .dashboard-chip-row,
  .dashboard-hero-meta,
  .po-stats-bar {
    grid-template-columns: 1fr;
  }

  .dashboard-section-head h2 {
    font-size: 16px;
  }

  .dashboard-card-note {
    font-size: 10px;
  }

  .dashboard-fin-row,
  .dashboard-capex-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .dashboard-fin-value,
  .dashboard-capex-row span:last-child {
    white-space: normal;
  }

  .dashboard-chart-legend {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .kpi-grid       { grid-template-columns: 1fr 1fr; }
  .kpi-card-value { font-size: 18px; }
  .stat-grid-3,
  .stat-grid-4,
  .stat-grid-5,
  .stat-grid-6,
  .stat-grid-7   { grid-template-columns: 1fr 1fr; }
}
.balance-row:hover td span,
.balance-row:hover td a { color: inherit; }

/* ── Additional responsive fixes ──────────────────────────── */
@media (max-width: 768px) {

  /* Catch more inline grid patterns */
  [style*="grid-template-columns:1fr 2fr"],
  [style*="grid-template-columns:2fr 1fr"],
  [style*="grid-template-columns:auto 1fr"],
  [style*="grid-template-columns:1fr auto"] {
    grid-template-columns: 1fr !important;
  }

  /* Tables: force horizontal scroll on all tables */
  table { min-width: 500px; }
  .card table, div table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Buttons wrap and fit */
  .btn { white-space: nowrap; }
  .page-header-actions .btn { flex: 1; min-width: 0; justify-content: center; }

  /* Form controls full width */
  .form-control { width: 100% !important; }

  /* Filter forms stack */
  form[method="GET"] > div:first-child {
    flex-direction: column !important;
  }
  form[method="GET"] select,
  form[method="GET"] input[type="text"] {
    width: 100% !important;
    min-width: unset !important;
  }

  /* Invoice/PO detail grids */
  [style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Stat cards: 2 col min */
  .metric-card { min-width: 0; }

  /* Bulk action bar wraps */
  #bulk-bar > div { flex-wrap: wrap !important; }

  /* Main content padding top to account for topbar */
  .main-content { padding-top: 12px !important; }

  /* Layout: column on mobile (topbar → content) */
  .layout { height: auto !important; min-height: 100vh; flex-direction: column; overflow: visible !important; }
  .main-content { height: auto !important; overflow: visible !important; }

  /* Sticky topbar height compensation */
  .main-content-wrapper { padding-top: 0; }

  /* Prevent any rogue element from causing horizontal page scroll */
  body { overflow-x: hidden; }

  /* Tighter metric card padding so 2-col grids fit narrow screens */
  .metric-card { padding: 12px 10px; min-height: 90px; }
  .metric-card .mc-value { font-size: clamp(14px, 4vw, 22px); }
  .metric-card .mc-sub  { font-size: 10px; }

}

@media (max-width: 480px) {
  /* Metric cards: 1 col on very small */
  [style*="grid-template-columns:repeat(5"],
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns:repeat(2"] {
    grid-template-columns: 1fr !important;
  }

  /* Font size adjustments */
  .mc-value { font-size: 22px !important; }
  h1 { font-size: 20px !important; }

  /* Full width buttons on tiny screens */
  .page-header-actions { flex-direction: column; }
  .page-header-actions .btn { width: 100%; }

  /* Invoice view sidebar stacks */
  [style*="grid-template-columns:1fr 360px"],
  [style*="grid-template-columns:1fr 300px"] {
    grid-template-columns: 1fr !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   DARK THEME
   Toggle via: document.documentElement.setAttribute('data-theme','dark')
   Persisted in localStorage key: 'mof-theme'
═══════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --bg:          #0f172a;
  --bg-card:     #1e293b;
  --bg-sidebar:  #020617;
  --border:      #334155;
  --border-dark: #475569;
  --text:        #f1f5f9;
  --text-muted:  #94a3b8;
  --text-light:  #64748b;
  --shadow-sm:   0 1px 3px rgba(0,0,0,.4);
  --shadow:      0 4px 12px rgba(0,0,0,.5);
  --danger-bg:   #450a0a;
  --warning-bg:  #431407;
  --info-bg:     #172554;
  --success-bg:  #052e16;
  --brand-light: #052e16;
}

/* ── Dark: body & layout ────────────────────────────────────── */
[data-theme="dark"] body { color: var(--text); background: var(--bg); }

/* ── Dark: sidebar ─────────────────────────────────────────── */
[data-theme="dark"] .sidebar { background: var(--bg-sidebar); }
[data-theme="dark"] .nav-link:hover { background: rgba(255,255,255,.07); }
[data-theme="dark"] .mobile-topbar  { background: #020617; border-color: #1e293b; }

/* ── Dark: cards ────────────────────────────────────────────── */
[data-theme="dark"] .card            { background: var(--bg-card); border-color: var(--border); }
[data-theme="dark"] .card-header     { border-color: var(--border); }
[data-theme="dark"] .modal           { background: var(--bg-card); }
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer    { border-color: var(--border); }

/* ── Dark: forms ────────────────────────────────────────────── */
[data-theme="dark"] .form-control {
  background: #0f172a;
  border-color: var(--border-dark);
  color: var(--text);
}
[data-theme="dark"] .form-control:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(22,163,74,.2); }
[data-theme="dark"] select.form-control { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); }

/* ── Dark: buttons ──────────────────────────────────────────── */
[data-theme="dark"] .btn-secondary       { background: #1e293b; color: var(--text); border-color: var(--border-dark); }
[data-theme="dark"] .btn-secondary:hover { background: #334155; }
[data-theme="dark"] .btn-danger          { background: #450a0a; color: #fca5a5; border-color: #7f1d1d; }
[data-theme="dark"] .btn-danger:hover    { background: #7f1d1d; }

/* ── Dark: tables ───────────────────────────────────────────── */
[data-theme="dark"] tbody td              { border-color: var(--border); }
[data-theme="dark"] tfoot td              { border-color: var(--border-dark); }
[data-theme="dark"] thead th              { border-color: var(--border-dark); }
[data-theme="dark"] tbody tr:hover td     { background: #1e3a5f !important; color: var(--text) !important; }
[data-theme="dark"] .thead-light th       { background: #1e293b; border-color: var(--border-dark); }
[data-theme="dark"] .balance-row:hover td { background: #1e3a5f !important; }

/* ── Dark: badges ───────────────────────────────────────────── */
[data-theme="dark"] .badge-gray   { background: #334155; color: #94a3b8; }
[data-theme="dark"] .badge-green  { background: #052e16; color: #4ade80; }
[data-theme="dark"] .badge-blue   { background: #172554; color: #93c5fd; }
[data-theme="dark"] .badge-red    { background: #450a0a; color: #fca5a5; }
[data-theme="dark"] .badge-amber  { background: #431407; color: #fbbf24; }

/* ── Dark: flash messages ───────────────────────────────────── */
[data-theme="dark"] .flash-success { background: #052e16; color: #4ade80; border-color: #166534; }
[data-theme="dark"] .flash-danger  { background: #450a0a; color: #fca5a5; border-color: #7f1d1d; }
[data-theme="dark"] .flash-warning { background: #431407; color: #fbbf24; border-color: #92400e; }
[data-theme="dark"] .flash-info    { background: #172554; color: #93c5fd; border-color: #1e40af; }

/* ── Dark: metric cards ─────────────────────────────────────── */
[data-theme="dark"] .metric-card { background: var(--bg-card); border-color: var(--border); }
[data-theme="dark"] .metric-card.green  { border-top-color: #16a34a; }
[data-theme="dark"] .metric-card.blue   { border-top-color: #2563eb; }
[data-theme="dark"] .metric-card.red    { border-top-color: #dc2626; }
[data-theme="dark"] .metric-card.amber  { border-top-color: #d97706; }
[data-theme="dark"] .metric-card.purple { border-top-color: #7c3aed; }
[data-theme="dark"] .metric-card.teal   { border-top-color: #0891b2; }
[data-theme="dark"] .dashboard-section-head h2 { color: var(--text); }
[data-theme="dark"] .dashboard-fin-row.is-emphasis { background: #13213a; }
[data-theme="dark"] .po-stat { background: linear-gradient(180deg, #172033, #111827); border-color: var(--border); }
[data-theme="dark"] .po-stat.amber { background: linear-gradient(180deg, #3a2611, #24180b); border-color: #92400e; }
[data-theme="dark"] .po-stat.green { background: linear-gradient(180deg, #0f2a1c, #0a1c13); border-color: #166534; }
[data-theme="dark"] .po-stat.blue { background: linear-gradient(180deg, #15233f, #0f172a); border-color: #1d4ed8; }

/* ── Dark: tabs ─────────────────────────────────────────────── */
[data-theme="dark"] .tabs           { border-color: var(--border); }
[data-theme="dark"] .tab-btn        { color: var(--text-muted); }
[data-theme="dark"] .tab-btn.active { color: var(--brand); }
[data-theme="dark"] .page-tab.active { color: #60a5fa; border-bottom-color: #60a5fa; }
[data-theme="dark"] .page-tabs-wrap::after { background: linear-gradient(to right, transparent, var(--bg)); }

/* ── Dark: line items table ─────────────────────────────────── */
[data-theme="dark"] .line-items-table th           { background: #1e293b; border-color: var(--border); }
[data-theme="dark"] .line-items-table td input,
[data-theme="dark"] .line-items-table td select    { background: #0f172a; border-color: var(--border-dark); color: var(--text); }

/* ── Dark: login page ───────────────────────────────────────── */
[data-theme="dark"] .login-page { background: linear-gradient(135deg,#0f172a 0%,#1e293b 60%,#0a1628 100%); }
[data-theme="dark"] .login-card { background: #1e293b; box-shadow: 0 8px 40px rgba(0,0,0,.5); }

/* ── Dark: scrollbar ────────────────────────────────────────── */
[data-theme="dark"] ::-webkit-scrollbar-thumb  { background: #334155; }
[data-theme="dark"] ::-webkit-scrollbar-track  { background: #1e293b; }

/* ── Dark: hardcoded bg overrides (inline styles on templates) ─ */
[data-theme="dark"] [style*="background:#f8fafc"],
[data-theme="dark"] [style*="background: #f8fafc"]      { background: #1a2744 !important; }
[data-theme="dark"] [style*="background:#fff;"],
[data-theme="dark"] [style*="background:#ffffff"]        { background: var(--bg-card) !important; }
[data-theme="dark"] [style*="background:white"],
[data-theme="dark"] [style*="background: white"]         { background: var(--bg-card) !important; }
[data-theme="dark"] [style*="background:#f0fdf4"]        { background: #052e16 !important; }
[data-theme="dark"] [style*="background:#fff5f5"]        { background: #450a0a !important; }
[data-theme="dark"] [style*="background:#fffbeb"]        { background: #431407 !important; }
[data-theme="dark"] [style*="background:#eff6ff"]        { background: #172554 !important; }
[data-theme="dark"] [style*="background:#f1f5f9"]        { background: #1e293b !important; }
[data-theme="dark"] [style*="background:#fef3c7"]        { background: #431407 !important; }
[data-theme="dark"] [style*="background:#f0f7ff"]        { background: #1e3a5f !important; }

/* ── Dark: hardcoded text color overrides ───────────────────── */
[data-theme="dark"] [style*="color:#0f172a"]  { color: var(--text) !important; }
[data-theme="dark"] [style*="color:#1e293b"]  { color: var(--text) !important; }
[data-theme="dark"] [style*="color:#374151"]  { color: var(--text-muted) !important; }
[data-theme="dark"] [style*="color:#64748b"]  { color: var(--text-muted) !important; }
[data-theme="dark"] [style*="color:#94a3b8"]  { color: var(--text-light) !important; }

/* ── Dark: border overrides ─────────────────────────────────── */
[data-theme="dark"] [style*="border:1px solid #e2e8f0"],
[data-theme="dark"] [style*="border: 1px solid #e2e8f0"],
[data-theme="dark"] [style*="border-bottom:1px solid var(--border)"],
[data-theme="dark"] [style*="border-top:1px solid var(--border)"]  { border-color: var(--border) !important; }

/* ── Dark: filter bars & search bars ───────────────────────── */
[data-theme="dark"] .filter-bar        { background: transparent; }

/* ── Dark: payslip preview ──────────────────────────────────── */
[data-theme="dark"] .payslip-section   { border-color: var(--border); }
[data-theme="dark"] .payslip-row       { border-color: var(--border); }
[data-theme="dark"] .payslip-total     { background: #052e16; }

/* ── Theme toggle button ─────────────────────────────────────── */
.theme-toggle-btn {
  background: none;
  border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.6);
  cursor: pointer;
  padding: 5px 8px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
  flex-shrink: 0;
}
.theme-toggle-btn:hover { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.3); }
[data-theme="dark"] .theme-toggle-btn { color: #fbbf24; border-color: rgba(251,191,36,.3); }
[data-theme="dark"] .theme-toggle-btn:hover { background: rgba(251,191,36,.1); }

/* ── Notification bell (topbar, for mobile) ─────────────────── */
.topbar-bell-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,.7);
  cursor: pointer;
  padding: 5px 7px;
  position: relative;
  display: flex;
  align-items: center;
}
.topbar-bell-btn:hover { color: #fff; }
.topbar-bell-badge {
  position: absolute;
  top: 1px; right: 1px;
  width: 14px; height: 14px;
  background: #dc2626;
  border-radius: 50%;
  font-size: 8px;
  font-weight: 800;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  display: none;
}

/* ── Dashboard page system ─────────────────────────────────── */
.dashboard-shell {
  display: flex;
  flex-direction: column;
}

.dashboard-shell .card {
  margin-bottom: 16px;
}

.dashboard-shell .card-header {
  padding: 12px 16px;
}

.dashboard-shell .card-header h2 {
  font-size: 14px;
  font-weight: 700;
}

.dashboard-shell .table-wrap thead th {
  padding: 9px 14px;
  font-size: 10px;
}

.dashboard-shell .table-wrap tbody td,
.dashboard-shell .table-wrap tfoot td {
  padding: 10px 14px;
}

.dashboard-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at top right, rgba(59,130,246,.24), transparent 34%),
    radial-gradient(circle at bottom left, rgba(16,185,129,.20), transparent 28%),
    linear-gradient(135deg, #0f172a 0%, #173153 55%, #1e3a5f 100%);
  border: 1px solid rgba(37,99,235,.15);
  border-radius: 24px;
  padding: 24px;
  margin-bottom: 18px;
  box-shadow: 0 18px 42px rgba(15,23,42,.18);
}

.dashboard-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.09) 0.8px, transparent 0.8px);
  background-size: 26px 26px;
  opacity: .22;
  pointer-events: none;
}

.dashboard-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(260px, .95fr);
  gap: 18px;
  align-items: stretch;
}

.dashboard-kicker,
.dashboard-section-kicker {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 800;
}

.dashboard-kicker {
  color: rgba(191,219,254,.82);
  margin-bottom: 8px;
}

.dashboard-hero-headline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.dashboard-hero-headline h1 {
  margin: 0;
  font-size: clamp(28px, 3.2vw, 38px);
  line-height: 1.05;
  color: #fff;
  font-weight: 900;
  letter-spacing: -.03em;
}

.dashboard-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(15,23,42,.28);
  border: 1px solid rgba(255,255,255,.16);
  color: #d1fae5;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  backdrop-filter: blur(8px);
}

.dashboard-hero-subtitle {
  margin: 10px 0 0;
  color: rgba(226,232,240,.78);
  font-size: 14px;
}

.dashboard-clock {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: #fff;
}

.dashboard-divider {
  margin: 0 6px;
  opacity: .35;
}

.dashboard-chip-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.dashboard-chip {
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(15,23,42,.28);
  border: 1px solid rgba(255,255,255,.12);
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 76px;
  backdrop-filter: blur(8px);
}

.dashboard-chip-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .09em;
  font-weight: 800;
  color: rgba(191,219,254,.78);
}

.dashboard-chip strong {
  color: #fff;
  font-size: 18px;
  line-height: 1.15;
}

.dashboard-unit-inline {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  opacity: .58;
  text-transform: uppercase;
}

.dashboard-chip.is-alert {
  background: rgba(127,29,29,.22);
  border-color: rgba(252,165,165,.25);
}

.dashboard-hero-panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
  border-radius: 20px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
}

.dashboard-hero-panel-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 800;
  color: rgba(226,232,240,.78);
}

.dashboard-hero-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.dashboard-hero-btn {
  justify-content: center;
  min-height: 42px;
}

.dashboard-hero-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.dashboard-hero-meta-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(15,23,42,.26);
  border: 1px solid rgba(255,255,255,.08);
}

.dashboard-hero-meta-item span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  color: rgba(191,219,254,.72);
}

.dashboard-hero-meta-item strong {
  font-size: 18px;
  color: #fff;
  font-weight: 900;
}

.dashboard-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 6px 0 12px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(37,99,235,.10);
  background: rgba(255,255,255,.78);
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
  backdrop-filter: blur(10px);
}

.dashboard-section-kicker {
  color: var(--brand);
  margin-bottom: 3px;
}

.dashboard-section-head h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text);
}

.dashboard-card-note {
  margin-top: 3px;
  font-size: 11px;
  color: var(--text-muted);
}

.kpi-card-glow {
  position: absolute;
  inset: auto -20% -40% auto;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(255,255,255,.10);
  filter: blur(8px);
}

.kpi-card {
  box-shadow: 0 14px 30px rgba(15,23,42,.16);
}

.dashboard-fin-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border);
}

.dashboard-fin-row.is-emphasis {
  background: #f8fafc;
}

.dashboard-fin-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--text-muted);
}

.dashboard-fin-label.is-emphasis {
  color: var(--text);
  font-weight: 700;
}

.dashboard-fin-value {
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dashboard-fin-value.is-emphasis {
  font-size: 13px;
  font-weight: 900;
}

.dashboard-capex-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 18px;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.dashboard-chart-legend {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.po-stats-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 16px 18px 8px;
}

.po-stat {
  border-radius: 16px;
  padding: 14px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, #fff, #f8fafc);
}

.po-stat-val {
  font-size: 24px;
  line-height: 1;
  font-weight: 900;
  color: var(--text);
}

.po-stat-lbl {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.po-stat-sub {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-muted);
}

.po-stat.amber { border-color: #fcd34d; background: linear-gradient(180deg, #fffbeb, #fff7ed); }
.po-stat.green { border-color: #86efac; background: linear-gradient(180deg, #f0fdf4, #ecfdf5); }
.po-stat.blue { border-color: #93c5fd; background: linear-gradient(180deg, #eff6ff, #eef2ff); }

.quick-actions-grid a {
  min-height: 56px;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}

.quick-actions-grid a:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(15,23,42,.10);
}

.dashboard-empty {
  border: 1px dashed var(--border-dark);
  border-radius: 18px;
  background: linear-gradient(180deg, #fbfdff, #f8fafc);
  text-align: center;
}

.dashboard-empty p {
  font-size: 13px;
  color: var(--text-muted);
}

.dashboard-empty a {
  color: var(--info);
  font-weight: 700;
  text-decoration: none;
}

.dashboard-empty a:hover {
  text-decoration: underline;
}

.dashboard-contract-row,
.dash-inv-row,
.dash-po-item {
  transition: background .16s ease, transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.dashboard-contract-row:hover,
.dash-inv-row:hover {
  background: #f8fbff;
}

.dashboard-contract-row:hover {
  transform: translateX(2px);
}

.dash-inv-row {
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 9px 8px;
  margin: 0 -8px;
}

.dash-inv-row:hover {
  border-color: #dbeafe;
  transform: translateX(2px);
}

.dash-po-item {
  border-left: 3px solid transparent;
}

.dash-po-item:hover {
  border-left-color: var(--info);
  box-shadow: inset 0 0 0 1px rgba(37,99,235,.10);
}

@media (min-width: 1025px) {
  .dashboard-section-head {
    position: sticky;
    top: 12px;
    z-index: 4;
  }
}

[data-theme="dark"] .dashboard-section-head {
  background: rgba(15,23,42,.82);
  border-color: rgba(59,130,246,.20);
  box-shadow: 0 12px 28px rgba(2,6,23,.22);
}

[data-theme="dark"] .dashboard-empty {
  background: linear-gradient(180deg, #121c2f, #0f172a);
  border-color: var(--border);
}

[data-theme="dark"] .dashboard-contract-row:hover,
[data-theme="dark"] .dash-inv-row:hover {
  background: #12233d;
}

[data-theme="dark"] .dash-inv-row:hover {
  border-color: #1d4ed8;
}

[data-theme="dark"] .dash-po-item:hover {
  box-shadow: inset 0 0 0 1px rgba(59,130,246,.22);
}

/* ── Dashboard final responsive overrides ─────────────────── */
.dashboard-shell {
  gap: 18px;
}

.dashboard-shell .kpi-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.dashboard-shell .stat-grid-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.dashboard-shell .content-grid-2 {
  gap: 18px;
  align-items: start;
}

.dashboard-shell .card {
  overflow: hidden;
}

.dashboard-shell .dashboard-section-head {
  position: static;
  top: auto;
}

.dashboard-shell .dashboard-contract-row,
.dashboard-shell .dash-inv-row,
.dashboard-shell .dash-po-item {
  scroll-margin-top: 18px;
}

@media (max-width: 1024px) {
  .dashboard-shell .dashboard-hero-grid,
  .dashboard-shell .content-grid-2 {
    grid-template-columns: 1fr;
  }

  .dashboard-shell .kpi-grid,
  .dashboard-shell .dashboard-chip-row,
  .dashboard-shell .stat-grid-5,
  .dashboard-shell .po-stats-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-shell .dashboard-hero-panel {
    padding: 16px;
  }
}

@media (max-width: 768px) {
  .dashboard-shell {
    gap: 14px;
  }

  .dashboard-shell .dashboard-hero {
    padding: 18px;
    border-radius: 20px;
  }

  .dashboard-shell .dashboard-chip-row,
  .dashboard-shell .kpi-grid,
  .dashboard-shell .stat-grid-5,
  .dashboard-shell .po-stats-bar,
  .dashboard-shell .dashboard-hero-meta {
    grid-template-columns: 1fr 1fr;
  }

  .dashboard-shell .quick-actions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .dashboard-shell .dash-inv-row {
    padding: 10px 8px;
    align-items: flex-start;
  }

  .dashboard-shell .dashboard-section-head {
    padding: 8px 10px;
    border-radius: 14px;
  }
}

@media (max-width: 560px) {
  .dashboard-shell .dashboard-hero-headline {
    flex-direction: column;
    align-items: flex-start;
  }

  .dashboard-shell .dashboard-chip-row,
  .dashboard-shell .dashboard-hero-meta,
  .dashboard-shell .kpi-grid,
  .dashboard-shell .stat-grid-5,
  .dashboard-shell .po-stats-bar,
  .dashboard-shell .quick-actions-grid {
    grid-template-columns: 1fr !important;
  }

  .dashboard-shell .dashboard-fin-row,
  .dashboard-shell .dashboard-capex-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .dashboard-shell .dashboard-fin-value,
  .dashboard-shell .dashboard-capex-row span:last-child,
  .dashboard-shell .dash-po-item-top,
  .dashboard-shell .dash-po-item-staff {
    white-space: normal;
  }

  .dashboard-shell .dash-po-item-top {
    flex-wrap: wrap;
  }

  .dashboard-shell .dashboard-chart-legend {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

/* ── Dashboard redesign v2 ─────────────────────────────────── */
.dashboard-shell-v2 {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 6px;
  border-radius: 30px;
  background: linear-gradient(180deg, #f3f7f4, #eef3f0);
}

.dashboard-hero-v2 {
  position: relative;
  overflow: hidden;
  margin-bottom: 0;
  padding: 28px;
  border-radius: 28px;
  border: 1px solid #d9e6de;
  background: linear-gradient(180deg, #fcfefc, #f4f8f5);
  box-shadow: 0 24px 54px rgba(15,23,42,.08);
}

.dashboard-hero-v2::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, #16a34a, #0ea5e9);
}

.dashboard-hero-v2::after {
  display: none;
}

.dashboard-hero-grid {
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, .85fr);
  gap: 24px;
  align-items: stretch;
}

.dashboard-kicker {
  margin-bottom: 10px;
  color: var(--brand-dark);
  font-size: 12px;
  letter-spacing: .14em;
}

.dashboard-hero-headline {
  align-items: center;
}

.dashboard-hero-headline h1 {
  color: var(--text);
  font-size: clamp(34px, 4vw, 48px);
  line-height: 1.02;
}

.dashboard-live-pill {
  background: #ecfdf5;
  border-color: #bbf7d0;
  color: #15803d;
  font-size: 12px;
}

.dashboard-hero-subtitle-v2 {
  max-width: 760px;
  margin-top: 14px;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.6;
}

.dashboard-clock {
  color: var(--text);
}

.dashboard-divider {
  opacity: .28;
}

.dashboard-chip-row-v2 {
  margin-top: 24px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.dashboard-chip {
  min-height: 0;
  padding: 16px 18px;
  gap: 8px;
  border-radius: 20px;
  border: 1px solid #dbe7e0;
  background: #fdfefd;
  box-shadow: 0 8px 18px rgba(15,23,42,.04);
  backdrop-filter: none;
}

.dashboard-chip-label {
  color: var(--text-muted);
  font-size: 11px;
  letter-spacing: .08em;
}

.dashboard-chip strong {
  color: var(--text);
  font-size: clamp(24px, 3vw, 30px);
  line-height: 1.05;
}

.dashboard-unit-inline {
  font-size: 11px;
  opacity: .62;
}

.dashboard-chip.dashboard-chip-alert,
.dashboard-chip.is-alert {
  background: #fffaf2;
  border-color: #fed7aa;
}

.dashboard-hero-panel-v2 {
  gap: 20px;
  padding: 22px;
  border-radius: 24px;
  border: 1px solid #d9e2ea;
  background: #fdfefd;
  box-shadow: 0 12px 28px rgba(15,23,42,.05);
  backdrop-filter: none;
}

.dashboard-hero-panel-title {
  color: var(--text);
  font-size: 12px;
  letter-spacing: .12em;
}

.dashboard-hero-note {
  margin-top: 8px;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.6;
}

.dashboard-hero-actions-v2 {
  grid-template-columns: 1fr;
  gap: 12px;
}

.dashboard-hero-btn {
  justify-content: flex-start;
  min-height: 46px;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 700;
}

.dashboard-hero-meta-v2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.dashboard-hero-meta-item {
  gap: 5px;
  padding: 14px 15px;
  border-radius: 18px;
  background: #f8fbf9;
  border: 1px solid #e3ebe6;
}

.dashboard-hero-meta-item span {
  color: var(--text-muted);
  font-size: 11px;
}

.dashboard-hero-meta-item strong {
  color: var(--text);
  font-size: 24px;
}

.dashboard-focus-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.dashboard-focus-card {
  padding: 20px;
  border-radius: 24px;
  border: 1px solid #dce7e1;
  border-top: 4px solid #cbd5e1;
  background: #fdfefd;
  box-shadow: 0 14px 28px rgba(15,23,42,.05);
}

.dashboard-focus-kicker {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-muted);
}

.dashboard-focus-card h2 {
  margin: 14px 0 10px;
  color: var(--text);
  font-size: clamp(28px, 3.4vw, 36px);
  line-height: 1;
}

.dashboard-focus-card p {
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.6;
}

.dashboard-focus-meta {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #e5ece8;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.dashboard-focus-card-success { border-top-color: #22c55e; }
.dashboard-focus-card-success h2 { color: #15803d; }
.dashboard-focus-card-info { border-top-color: #3b82f6; }
.dashboard-focus-card-info h2 { color: #1d4ed8; }
.dashboard-focus-card-warning { border-top-color: #f59e0b; }
.dashboard-focus-card-warning h2 { color: #b45309; }
.dashboard-focus-card-neutral { border-top-color: #94a3b8; }

.dashboard-section-head-v2 {
  display: block;
  margin: 6px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.dashboard-section-kicker {
  margin-bottom: 6px;
  color: var(--brand-dark);
  font-size: 12px;
}

.dashboard-section-head-v2 h2 {
  margin: 0;
  font-size: clamp(24px, 3vw, 30px);
  line-height: 1.15;
  letter-spacing: -.02em;
}

.dashboard-section-summary {
  margin: 10px 0 0;
  max-width: 700px;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.65;
  text-align: left;
}

.dashboard-panel-grid {
  display: grid;
  gap: 20px;
  align-items: start;
}

.dashboard-panel-grid-wide {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.dashboard-panel-grid-ops {
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
}

.dashboard-side-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.dashboard-feature-card {
  margin-bottom: 0 !important;
  border: 1px solid #dde6ef;
  border-radius: 26px;
  overflow: hidden;
  background: #fbfdfb;
  box-shadow: 0 18px 42px rgba(15,23,42,.06);
}

.dashboard-card-headline {
  align-items: flex-start;
  gap: 14px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid #e6edf3;
  background: #f9fcfa;
}

.dashboard-card-headline h2 {
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -.02em;
}

.dashboard-card-note,
.dashboard-card-note-dark {
  margin-top: 8px;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.55;
}

.dashboard-card-headline-warning {
  background: #fbf8f0;
}

.dashboard-card-headline-dark {
  background: #f1f7f3;
}

.dashboard-card-headline-dark h2,
.dashboard-card-headline-dark .dashboard-card-note-dark {
  color: var(--text);
}

.dashboard-inline-link {
  color: var(--brand-dark);
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}

.dashboard-inline-link:hover {
  text-decoration: underline;
}

.dashboard-balance-row {
  gap: 18px;
  padding: 16px 24px;
  border-bottom: 1px solid #e9eef3;
}

.dashboard-balance-row span {
  color: var(--text-muted);
  font-size: 15px;
  font-weight: 600;
}

.dashboard-balance-row strong {
  font-size: 18px;
  font-weight: 800;
}

.dashboard-balance-row-strong {
  background: #f8fbf9;
}

.dashboard-callout {
  gap: 18px;
  padding: 20px 24px;
}

.dashboard-callout p {
  margin: 5px 0 0;
  font-size: 14px;
  color: var(--text-muted);
}

.dashboard-callout-title {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.dashboard-callout strong {
  font-size: 22px;
  font-weight: 900;
}

.dashboard-callout.is-positive { background: #f0fbf4; }
.dashboard-callout.is-danger { background: #fff6f5; }

.dashboard-trend-panel {
  gap: 14px;
  padding: 20px 24px 18px;
}

.dashboard-trend-row {
  grid-template-columns: 92px minmax(0, 1fr) 64px 38px;
  gap: 12px;
}

.dashboard-trend-label,
.dashboard-trend-value,
.dashboard-trend-count {
  font-size: 14px;
  font-weight: 700;
}

.dashboard-trend-track {
  height: 30px;
  background: #e8eef2;
}

.dashboard-trend-bar {
  padding-left: 12px;
  background: linear-gradient(90deg, #16a34a, #2563eb);
  font-size: 12px;
}

.dashboard-trend-count {
  min-width: 32px;
  background: #edf6ff;
}

.dashboard-chart-legend-v2 {
  justify-content: flex-start;
  gap: 20px;
  padding: 0 24px 22px;
}

.dashboard-chart-legend-v2 span {
  font-size: 12px;
}

.dashboard-chart-legend-v2 i {
  background: linear-gradient(90deg, #16a34a, #2563eb);
}

.dashboard-mini-kpis {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 20px 24px;
}

.dashboard-mini-kpi {
  padding: 18px;
  border-radius: 20px;
  border: 1px solid #dfe7ee;
  border-top: 4px solid #cbd5e1;
  background: #fff;
}

.dashboard-mini-kpi span {
  font-size: 11px;
  letter-spacing: .11em;
}

.dashboard-mini-kpi strong {
  margin-top: 10px;
  font-size: 42px;
}

.dashboard-mini-kpi small {
  margin-top: 10px;
  color: var(--text-muted);
  font-size: 14px;
}

.dashboard-mini-kpi.is-green { border-top-color: #22c55e; }
.dashboard-mini-kpi.is-green strong { color: var(--success); }
.dashboard-mini-kpi.is-amber { border-top-color: #f59e0b; }
.dashboard-mini-kpi.is-amber strong { color: var(--warning); }
.dashboard-mini-kpi.is-red { border-top-color: #ef4444; }
.dashboard-mini-kpi.is-red strong { color: var(--danger); }

.dashboard-list-head {
  padding: 0 24px 12px;
  border-bottom: 1px solid #e7edf3;
}

.dashboard-list-head span {
  font-size: 12px;
  letter-spacing: .12em;
}

.dashboard-list-stack {
  padding: 6px 18px 18px;
}

.dashboard-list-stack-compact {
  padding-top: 8px;
}

.dashboard-list-stack-tight {
  gap: 6px;
}

.dashboard-list-item-v2 {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  padding: 16px 14px;
  margin-top: 8px;
  border: 1px solid #e4ece6;
  border-radius: 20px;
  background: #fdfefd;
  border-bottom: 1px solid #eef2f6;
}

.dashboard-list-topline {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.dashboard-list-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--brand-dark);
}

.dashboard-list-subtitle {
  margin-top: 5px;
  font-size: 14px;
}

.dashboard-list-facts,
.dashboard-po-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}

.dashboard-list-fact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.dashboard-fact-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.dashboard-list-side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 8px;
  min-width: 120px;
}

.dashboard-list-amount {
  font-size: 20px;
}

.dashboard-person-row {
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 14px;
  padding: 14px 24px;
  border-bottom: 1px solid #ecf0f4;
}

.dashboard-person-avatar {
  width: 44px;
  height: 44px;
  background: #f3f8f5;
  color: var(--brand-dark);
  font-size: 13px;
}

.dashboard-person-copy strong {
  font-size: 16px;
}

.dashboard-person-copy span,
.dashboard-person-meta span {
  font-size: 14px;
}

.dashboard-person-meta strong {
  font-size: 16px;
}

.dashboard-actions-grid {
  padding: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.dashboard-actions-grid a {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 96px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid #dce7e0;
  background: #f7fbf8;
  color: var(--text);
  text-decoration: none;
  box-shadow: 0 8px 16px rgba(15,23,42,.04);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.dashboard-actions-grid a:hover {
  transform: translateY(-2px);
  border-color: #b9d8c1;
  box-shadow: 0 14px 24px rgba(15,23,42,.08);
}

.dashboard-actions-grid a span {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
}

.dashboard-actions-grid a small {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.55;
}

.dashboard-po-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 20px 24px 14px;
}

.dashboard-po-stats .po-stat {
  border-radius: 20px;
  padding: 18px;
  background: #fdfefd;
}

.dashboard-po-stats .po-stat-val {
  font-size: 42px;
}

.dashboard-po-stats .po-stat-lbl {
  font-size: 12px;
}

.dashboard-po-stats .po-stat-sub {
  font-size: 13px;
}

.dashboard-po-row {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  margin: 0 18px;
  padding: 14px 16px;
  border: 1px solid #e4ece6;
  border-radius: 18px;
  background: #fdfefd;
  text-decoration: none;
  color: inherit;
  transition: background .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.dashboard-list-item-v2,
.dashboard-person-row,
.dashboard-po-row {
  transition: background .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.dashboard-list-item-v2:hover,
.dashboard-person-row:hover,
.dashboard-po-row:hover {
  background: #f8fbf9;
}

.dashboard-list-item-v2:hover,
.dashboard-po-row:hover {
  border-color: #dce7e0;
  transform: translateX(2px);
}

.dashboard-person-row:hover {
  transform: translateX(2px);
}

.dashboard-po-main strong {
  font-size: 16px;
}

.dashboard-po-main span {
  margin-top: 6px;
  font-size: 14px;
  color: var(--text-muted);
}

.dashboard-po-title-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dashboard-po-person {
  display: block;
}

.dashboard-po-meta span:first-child {
  margin-bottom: 8px;
  font-size: 20px;
  font-weight: 800;
}

.dashboard-po-meta .dashboard-fact-label {
  margin-bottom: 8px;
}

.dashboard-table-wrap {
  padding: 0 24px;
}

.dashboard-profit-table {
  font-size: 15px;
}

.dashboard-profit-table thead th {
  font-size: 12px;
  letter-spacing: .08em;
}

.dashboard-profit-table thead th:nth-child(n+2),
.dashboard-profit-table tbody td:nth-child(n+2) {
  text-align: right;
}

.dashboard-profit-table tbody td:first-child {
  font-weight: 700;
}

.dashboard-profit-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 18px 24px 24px;
  padding: 18px 20px;
  border-radius: 20px;
  font-size: 15px;
  font-weight: 700;
}

.dashboard-profit-total strong {
  font-size: 32px;
  font-weight: 900;
}

.dashboard-profit-total.is-positive { background: #eefaf2; }
.dashboard-profit-total.is-danger { background: #fff4f4; }

.is-positive { color: var(--success); }
.is-info { color: var(--info); }
.is-warning { color: var(--warning); }
.is-danger { color: var(--danger); }

@media (max-width: 1180px) {
  .dashboard-focus-strip,
  .dashboard-panel-grid-wide,
  .dashboard-panel-grid-ops,
  .dashboard-hero-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .dashboard-chip-row-v2,
  .dashboard-hero-meta-v2,
  .dashboard-mini-kpis,
  .dashboard-actions-grid,
  .dashboard-po-stats {
    grid-template-columns: 1fr 1fr;
  }

  .dashboard-list-item-v2,
  .dashboard-person-row,
  .dashboard-po-row {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .dashboard-list-side {
    align-items: flex-start;
    min-width: 0;
  }

  .dashboard-po-meta,
  .dashboard-person-meta {
    text-align: left;
  }
}

@media (max-width: 640px) {
  .dashboard-shell-v2 {
    gap: 18px;
  }

  .dashboard-hero-v2,
  .dashboard-feature-card,
  .dashboard-focus-card {
    border-radius: 22px;
  }

  .dashboard-hero-v2 {
    padding: 22px 18px;
  }

  .dashboard-card-headline,
  .dashboard-balance-row,
  .dashboard-callout,
  .dashboard-trend-panel,
  .dashboard-mini-kpis,
  .dashboard-person-row,
  .dashboard-table-wrap,
  .dashboard-profit-total,
  .dashboard-po-stats {
    padding-left: 18px;
    padding-right: 18px;
  }

  .dashboard-chip-row-v2,
  .dashboard-hero-meta-v2,
  .dashboard-mini-kpis,
  .dashboard-actions-grid,
  .dashboard-po-stats,
  .dashboard-focus-strip {
    grid-template-columns: 1fr;
  }

  .dashboard-card-headline {
    flex-direction: column;
  }

  .dashboard-hero-headline {
    flex-direction: column;
    align-items: flex-start;
  }

  .dashboard-trend-row {
    grid-template-columns: 78px minmax(0, 1fr) 52px;
  }

  .dashboard-trend-count {
    display: none;
  }

  .dashboard-balance-row,
  .dashboard-callout,
  .dashboard-profit-total {
    flex-direction: column;
    align-items: flex-start;
  }

  .dashboard-list-item-v2,
  .dashboard-po-row,
  .dashboard-person-row {
    border-radius: 18px;
  }

  .dashboard-list-facts,
  .dashboard-po-facts {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .dashboard-list-side,
  .dashboard-po-meta {
    align-items: flex-start;
    text-align: left;
  }

  .dashboard-list-subtitle,
  .dashboard-person-copy strong {
    white-space: normal;
  }

  .dashboard-chart-legend-v2 {
    flex-direction: column;
    gap: 8px;
    padding: 0 18px 18px;
  }

  .dashboard-po-row,
  .dashboard-list-item-v2 {
    margin: 0;
    padding: 14px 0;
  }

  .dashboard-profit-table,
  .dashboard-profit-table thead,
  .dashboard-profit-table tbody,
  .dashboard-profit-table tr,
  .dashboard-profit-table th,
  .dashboard-profit-table td {
    display: block;
    width: 100%;
  }

  .dashboard-profit-table thead {
    display: none;
  }

  .dashboard-profit-table tbody {
    display: grid;
    gap: 12px;
    padding-bottom: 16px;
  }

  .dashboard-profit-table tr {
    padding: 14px;
    border: 1px solid #dfe7e1;
    border-radius: 18px;
    background: #fdfefd;
  }

  .dashboard-profit-table td {
    position: relative;
    padding: 8px 0 8px 92px;
    text-align: left !important;
    border-bottom: 1px solid #edf2ee;
  }

  .dashboard-profit-table td:last-child {
    border-bottom: 0;
  }

  .dashboard-profit-table td::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    top: 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
}

[data-theme="dark"] .dashboard-hero-v2,
[data-theme="dark"] .dashboard-feature-card,
[data-theme="dark"] .dashboard-focus-card,
[data-theme="dark"] .dashboard-chip,
[data-theme="dark"] .dashboard-hero-panel-v2,
[data-theme="dark"] .dashboard-mini-kpi,
[data-theme="dark"] .dashboard-po-stats .po-stat,
[data-theme="dark"] .dashboard-actions-grid a {
  background: #0f172a;
  border-color: var(--border);
  box-shadow: none;
}

[data-theme="dark"] .dashboard-hero-v2::before {
  background: linear-gradient(90deg, #22c55e, #38bdf8);
}

[data-theme="dark"] .dashboard-live-pill,
[data-theme="dark"] .dashboard-hero-meta-item,
[data-theme="dark"] .dashboard-balance-row-strong,
[data-theme="dark"] .dashboard-callout.is-positive,
[data-theme="dark"] .dashboard-profit-total.is-positive,
[data-theme="dark"] .dashboard-profit-total.is-danger,
[data-theme="dark"] .dashboard-callout.is-danger,
[data-theme="dark"] .dashboard-chip.dashboard-chip-alert,
[data-theme="dark"] .dashboard-chip.is-alert,
[data-theme="dark"] .dashboard-card-headline-warning,
[data-theme="dark"] .dashboard-card-headline-dark {
  background: #111c30;
  border-color: var(--border);
}

[data-theme="dark"] .dashboard-hero-headline h1,
[data-theme="dark"] .dashboard-chip strong,
[data-theme="dark"] .dashboard-hero-panel-title,
[data-theme="dark"] .dashboard-hero-meta-item strong,
[data-theme="dark"] .dashboard-focus-card h2,
[data-theme="dark"] .dashboard-card-headline h2,
[data-theme="dark"] .dashboard-list-title,
[data-theme="dark"] .dashboard-actions-grid a span,
[data-theme="dark"] .dashboard-po-main strong {
  color: var(--text);
}

[data-theme="dark"] .dashboard-hero-note,
[data-theme="dark"] .dashboard-hero-subtitle-v2,
[data-theme="dark"] .dashboard-focus-card p,
[data-theme="dark"] .dashboard-focus-meta,
[data-theme="dark"] .dashboard-section-summary,
[data-theme="dark"] .dashboard-balance-row span,
[data-theme="dark"] .dashboard-callout p,
[data-theme="dark"] .dashboard-trend-label,
[data-theme="dark"] .dashboard-trend-value,
[data-theme="dark"] .dashboard-card-note,
[data-theme="dark"] .dashboard-card-note-dark,
[data-theme="dark"] .dashboard-mini-kpi small,
[data-theme="dark"] .dashboard-list-subtitle,
[data-theme="dark"] .dashboard-person-copy span,
[data-theme="dark"] .dashboard-person-meta span,
[data-theme="dark"] .dashboard-chart-legend-v2 span,
[data-theme="dark"] .dashboard-po-main span,
[data-theme="dark"] .dashboard-actions-grid a small,
[data-theme="dark"] .dashboard-chip-label {
  color: var(--text-muted);
}

[data-theme="dark"] .dashboard-focus-meta,
[data-theme="dark"] .dashboard-balance-row,
[data-theme="dark"] .dashboard-list-head,
[data-theme="dark"] .dashboard-person-row,
[data-theme="dark"] .dashboard-list-item-v2 {
  border-color: var(--border);
}

[data-theme="dark"] .dashboard-trend-track {
  background: #162133;
}

[data-theme="dark"] .dashboard-list-item-v2:hover,
[data-theme="dark"] .dashboard-person-row:hover,
[data-theme="dark"] .dashboard-po-row:hover,
[data-theme="dark"] .dashboard-actions-grid a:hover {
  background: #12233d;
  border-color: #1d4ed8;
}

[data-theme="dark"] .dashboard-person-avatar {
  background: #12233d;
  color: #86efac;
}

[data-theme="dark"] .dashboard-shell-v2 {
  background: linear-gradient(180deg, #0b1320, #0e1625);
}

[data-theme="dark"] .dashboard-list-item-v2,
[data-theme="dark"] .dashboard-po-row,
[data-theme="dark"] .dashboard-profit-table tr {
  background: #0f172a;
  border-color: var(--border);
}

[data-theme="dark"] .dashboard-profit-table td {
  border-color: var(--border);
}

/* ── Sidebar notification bell icon (desktop) ───────────────── */
.notif-bell-wrap { position: relative; }
.notif-bell-wrap .notif-dropdown-panel {
  position: fixed;
  left: var(--sidebar-w);
  top: 0;
  width: 340px;
  max-height: 100vh;
  overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: none;
  box-shadow: 4px 0 20px rgba(0,0,0,.15);
  z-index: 998;
  display: none;
}
[data-theme="dark"] .notif-dropdown-panel { background: #1e293b; border-color: var(--border); }

/* ── Dashboard quick-stat mini trend ───────────────────────── */
.trend-up   { color: var(--success); font-size: 11px; font-weight: 700; }
.trend-down { color: var(--danger);  font-size: 11px; font-weight: 700; }
.trend-flat { color: var(--text-muted); font-size: 11px; }

/* ── Improved empty state ───────────────────────────────────── */
[data-theme="dark"] .empty-state { color: var(--text-muted); }

/* ── Audit timeline dots ────────────────────────────────────── */
.audit-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 3px;
}
.audit-dot.dot-danger  { background: var(--danger); }
.audit-dot.dot-success { background: var(--success); }
.audit-dot.dot-warning { background: var(--warning); }
.audit-dot.dot-info    { background: var(--info); }
.audit-dot.dot-gray    { background: var(--text-muted); }

/* ── Notification grouped header ─────────────────────────────── */
.notif-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}

/* ── User card activity indicator ───────────────────────────── */
.user-activity-dot {
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block; margin-right: 4px;
}
.activity-online  { background: #22c55e; box-shadow: 0 0 0 2px rgba(34,197,94,.3); }
.activity-recent  { background: #f59e0b; }
.activity-offline { background: #94a3b8; }

/* ══════════════════════════════════════════════════════════════
   SETTINGS TABS
═══════════════════════════════════════════════════════════════ */
.settings-tabs {
  display: flex;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-card);
  padding: 8px;
  margin-bottom: 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.settings-tab {
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color .15s, background .15s, border-color .15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.settings-tab:hover {
  color: var(--text);
  background: var(--bg);
  border-color: var(--border);
}
.settings-tab.active {
  color: #0f172a;
  background: #dbeafe;
  border-color: #93c5fd;
}
.settings-tab .tab-badge {
  font-size: 10px;
  background: var(--info-bg);
  color: var(--info);
  padding: 1px 6px;
  border-radius: 10px;
  font-weight: 700;
}
[data-theme="dark"] .settings-tab.active {
  color: #60a5fa;
  background: rgba(37,99,235,.22);
  border-color: rgba(96,165,250,.5);
}

/* ══════════════════════════════════════════════════════════════
   MOBILE FIXES — page-header-actions upload forms/labels
   Ensures <form> and <label> wrappers around file inputs
   also stretch to full width on small screens.
═══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  /* Stretch form wrappers inside action bar */
  .page-header-actions {
    align-items: stretch !important;
  }
  .page-header-actions form {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  .page-header-actions form label,
  .page-header-actions form > label {
    width: 100% !important;
    display: flex !important;
  }
  .page-header-actions form label .btn,
  .page-header-actions form .btn,
  .page-header-actions form label span.btn {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    flex: 1 !important;
  }
  /* Dashboard invoice rows: prevent overflow on tiny screens */
  .dash-inv-row {
    flex-wrap: wrap;
    gap: 4px !important;
  }
  .dash-inv-row > a { min-width: 0 !important; flex: 1 1 100%; }
  .dash-inv-row > span:not(.badge) { min-width: 0 !important; }

  /* Dashboard quick actions stack cleanly on narrow screens */
  .quick-actions-grid { grid-template-columns: 1fr !important; }

  /* Settings mini-tabs: keep compact and two-per-row feel on mobile */
  .settings-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow-x: visible;
    gap: 8px;
  }
  .settings-tab  {
    justify-content: center;
    width: 100%;
    white-space: normal;
    text-align: center;
    min-height: 40px;
  }

  /* Reduce inner card padding on mobile */
  .card-body { padding: 12px !important; }
}

/* ── Dashboard recent invoice rows ─────────────────────────── */
.dash-inv-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

/* ── Dashboard PO stacked card rows ─────────────────────────── */
.dash-po-item {
  display: block;
  padding: 9px 18px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  transition: background .12s;
}
.dash-po-item:last-child { border-bottom: none; }
.dash-po-item:hover { background: var(--info-bg); }
.dash-po-item-top {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 3px;
  overflow: hidden;
}
.dash-po-item-num {
  font-size: 12px;
  font-weight: 700;
  color: var(--info);
  white-space: nowrap;
  flex-shrink: 0;
}
.dash-po-item-dot {
  color: var(--text-muted);
  opacity: .4;
  flex-shrink: 0;
}
.dash-po-item-amount {
  font-size: 12px;
  font-weight: 700;
  color: var(--success);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.dash-po-item-staff {
  font-size: 11px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Revenue chart responsive label/value columns ───────────── */
.rev-lbl {
  width: 52px;
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-align: right;
  letter-spacing: .02em;
}
.rev-val {
  width: 44px;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── Hide on extra-small screens (≤480px) ───────────────────── */
@media (max-width: 480px) {
  .rev-lbl { width: 34px; font-size: 9px; }
  .rev-val { width: 32px; font-size: 10px; }
  .hide-xs { display: none !important; }
}

/* ── KPI card hover lift (desktop only) ─────────────────────── */
@media (min-width: 769px) {
  .kpi-card {
    cursor: default;
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,.22);
  }
}

/* ── Metric card hover (desktop) ────────────────────────────── */
@media (min-width: 769px) {
  .metric-card {
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .metric-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow);
  }
}


/* ---------------------------------------------------------------
   DASHBOARD V3 � Modern SaaS, compact, KPI-first
   Self-contained, prefixed `dv3-`. No legacy dependencies.
   --------------------------------------------------------------- */

.dash-v3 {
  --dv3-bg:        #f4f6f8;
  --dv3-surface:   #ffffff;
  --dv3-border:    #e2e8f0;
  --dv3-border-strong:#cbd5e1;
  --dv3-text:      #0f172a;
  --dv3-text-2:    #475569;
  --dv3-text-3:    #94a3b8;
  --dv3-accent:    #16a34a;
  --dv3-accent-2:  #22c55e;
  --dv3-accent-soft:#f0fdf4;
  --dv3-positive:  #15803d;
  --dv3-warning:   #b45309;
  --dv3-warning-soft:#fffbeb;
  --dv3-danger:    #b91c1c;
  --dv3-danger-soft:#fef2f2;
  --dv3-info:      #1d4ed8;
  --dv3-radius:    10px;
  --dv3-shadow:    0 1px 2px rgba(15,23,42,.06), 0 0 0 1px rgba(15,23,42,.02);

  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--dv3-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  margin: -8px -8px 0;
  padding: 14px 16px 18px;
  background: var(--dv3-bg);
  border-radius: 12px;
}

/* Topbar */
.dv3-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0 6px;
  flex-wrap: wrap;
}
.dv3-topbar-left { min-width: 0; }
.dv3-title {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--dv3-text);
}
.dv3-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--dv3-text-2);
  margin-top: 2px;
}
.dv3-clock { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--dv3-text); }
.dv3-dot { color: var(--dv3-text-3); }

.dv3-topbar-right {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.dv3-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  background: var(--dv3-surface);
  color: var(--dv3-text);
  border: 1px solid var(--dv3-border-strong);
  text-decoration: none;
  transition: background .12s, border-color .12s, transform .08s;
}
.dv3-btn:hover { background: #f4f4f5; border-color: #a1a1aa; }
.dv3-btn:active { transform: translateY(1px); }
.dv3-btn-primary {
  background: var(--dv3-accent);
  color: #fff !important;
  border-color: var(--dv3-accent);
}
.dv3-btn-primary:hover {
  background: #15803d;
  border-color: #15803d;
  color: #fff !important;
}

/* KPI grid */
.dv3-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.dv3-kpi {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 14px 12px;
  background: var(--dv3-surface);
  border: 1px solid var(--dv3-border);
  border-radius: var(--dv3-radius);
  text-decoration: none;
  color: inherit;
  transition: border-color .12s, transform .08s, box-shadow .12s;
  box-shadow: var(--dv3-shadow);
  min-height: 92px;
}
.dv3-kpi:hover {
  border-color: var(--dv3-border-strong);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(15,23,42,.06);
}
.dv3-kpi-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--dv3-text-2);
  letter-spacing: .01em;
}
.dv3-kpi-value {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--dv3-text);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.dv3-kpi-unit {
  font-size: 12px;
  font-weight: 500;
  color: var(--dv3-text-3);
  margin-left: 4px;
  letter-spacing: 0;
}
.dv3-kpi-meta {
  font-size: 12px;
  color: var(--dv3-text-3);
  margin-top: auto;
}
.dv3-kpi.is-positive .dv3-kpi-value { color: var(--dv3-positive); }
.dv3-kpi.is-warning  { background: var(--dv3-warning-soft); border-color: #fde68a; }
.dv3-kpi.is-warning  .dv3-kpi-value { color: var(--dv3-warning); }
.dv3-kpi.is-danger   { background: var(--dv3-danger-soft); border-color: #fecaca; }
.dv3-kpi.is-danger   .dv3-kpi-value { color: var(--dv3-danger); }

/* Card */
.dv3-card {
  background: var(--dv3-surface);
  border: 1px solid var(--dv3-border);
  border-radius: var(--dv3-radius);
  padding: 16px 18px;
  box-shadow: var(--dv3-shadow);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dv3-kpi, .dv3-card { background-clip: padding-box; }
.dv3-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.dv3-card-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--dv3-text);
  letter-spacing: -0.01em;
}
.dv3-card-sub {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--dv3-text-3);
}
.dv3-link {
  font-size: 12px;
  font-weight: 500;
  color: var(--dv3-text-2);
  text-decoration: none;
  white-space: nowrap;
  padding: 4px 0;
}
.dv3-link:hover { color: var(--dv3-accent); }

/* Chart (CSS grid + grid-row positioning so bar height comes from track, not %) */
.dv3-chart {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 10px;
  padding: 6px 0 0;
}
.dv3-chart-col {
  display: grid;
  grid-template-rows: auto 160px auto auto;
  align-items: end;
  justify-items: center;
  gap: 4px;
  min-width: 0;
}
.dv3-chart-value {
  font-size: 11px;
  font-weight: 600;
  color: var(--dv3-text-2);
  font-variant-numeric: tabular-nums;
  align-self: end;
}
.dv3-chart-bar-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border-bottom: 1px solid var(--dv3-border);
  background: linear-gradient(180deg, transparent 0%, transparent calc(100% - 1px), var(--dv3-border) 100%);
}
.dv3-chart-bar {
  width: 60%;
  max-width: 32px;
  min-height: 4px;
  background-color: var(--dv3-accent);
  background-image: linear-gradient(180deg, var(--dv3-accent-2), var(--dv3-accent));
  border-radius: 4px 4px 0 0;
  transition: opacity .15s;
  display: block;
}
.dv3-chart-col:hover .dv3-chart-bar { opacity: .82; }
.dv3-chart-label {
  font-size: 11px;
  color: var(--dv3-text-2);
  font-weight: 500;
  margin-top: 2px;
}
.dv3-chart-count {
  font-size: 10px;
  color: var(--dv3-text-3);
}

/* Split: two cards side by side */
.dv3-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* List rows */
.dv3-list { list-style: none; margin: 0; padding: 0; }
.dv3-list li + li { border-top: 1px solid var(--dv3-border); }
.dv3-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.dv3-list-row:hover .dv3-list-title { color: var(--dv3-accent); }
.dv3-list-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}
.dv3-list-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--dv3-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dv3-list-sub {
  font-size: 12px;
  color: var(--dv3-text-3);
}
.dv3-list-side {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.dv3-list-amount {
  font-size: 13px;
  font-weight: 600;
  color: var(--dv3-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dv3-list-amount-soft {
  font-weight: 500;
  color: var(--dv3-text-2);
  font-size: 12px;
}

/* Pills */
.dv3-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  white-space: nowrap;
  letter-spacing: .01em;
}
.pill-green  { background: #f0fdf4; color: #15803d; }
.pill-amber  { background: #fffbeb; color: #b45309; }
.pill-red    { background: #fef2f2; color: #b91c1c; }
.pill-blue   { background: #eff6ff; color: #1d4ed8; }
.pill-gray   { background: #f3f4f6; color: #475569; }

/* Empty state */
.dv3-empty {
  padding: 24px 8px;
  text-align: center;
  color: var(--dv3-text-3);
  font-size: 13px;
}

/* Quicklinks */
.dv3-quicklinks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  padding: 10px 0 4px;
  border-top: 1px solid var(--dv3-border);
}
.dv3-quicklinks a {
  font-size: 12px;
  color: var(--dv3-text-2);
  text-decoration: none;
  font-weight: 500;
}
.dv3-quicklinks a:hover { color: var(--dv3-accent); }

/* Responsive */
@media (max-width: 1100px) {
  .dash-v3 .dv3-kpi-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 820px) {
  .dash-v3 .dv3-kpi-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .dash-v3 .dv3-split { grid-template-columns: 1fr; }
  .dash-v3 .dv3-title { font-size: 20px; }
  .dash-v3 .dv3-kpi-value { font-size: 22px; }
}
@media (max-width: 520px) {
  .dash-v3 { font-size: 13px; }
  .dash-v3 .dv3-topbar-right { width: 100%; }
  .dash-v3 .dv3-btn { flex: 1 1 auto; justify-content: center; }
  .dash-v3 .dv3-card { padding: 14px; }
  .dash-v3 .dv3-chart { gap: 6px; min-height: 180px; }
  .dash-v3 .dv3-chart-bar-wrap { height: 110px; }
  .dash-v3 .dv3-chart-value { font-size: 10px; }
  .dash-v3 .dv3-chart-bar { max-width: 28px; }
  .dash-v3 .dv3-list-amount { font-size: 12px; }
  .dash-v3 .dv3-quicklinks { gap: 6px 14px; }
}

/* Dark theme */
[data-theme="dark"] .dash-v3 {
  --dv3-bg:        #0b0f14;
  --dv3-surface:   #111827;
  --dv3-border:    #1f2937;
  --dv3-border-strong:#334155;
  --dv3-text:      #f1f5f9;
  --dv3-text-2:    #94a3b8;
  --dv3-text-3:    #64748b;
  --dv3-accent-soft:#052e16;
  --dv3-warning-soft:#1c1407;
  --dv3-danger-soft:#1c0a0a;
  --dv3-shadow:    0 1px 2px rgba(0,0,0,.5);
}
[data-theme="dark"] .dash-v3 .dv3-btn-primary {
  background: #f8fafc;
  color: #0b0f14;
  border-color: #f8fafc;
}
[data-theme="dark"] .dash-v3 .dv3-btn-primary:hover {
  background: #e2e8f0;
  border-color: #e2e8f0;
}
[data-theme="dark"] .dash-v3 .pill-green { background: #052e16; color: #86efac; }
[data-theme="dark"] .dash-v3 .pill-amber { background: #1c1407; color: #fbbf24; }
[data-theme="dark"] .dash-v3 .pill-red   { background: #1c0a0a; color: #fca5a5; }
[data-theme="dark"] .dash-v3 .pill-blue  { background: #0b1224; color: #93c5fd; }
[data-theme="dark"] .dash-v3 .pill-gray  { background: #1f2937; color: #cbd5e1; }
[data-theme="dark"] .dash-v3 .dv3-kpi.is-warning .dv3-kpi-value { color: #fbbf24; }
[data-theme="dark"] .dash-v3 .dv3-kpi.is-danger  .dv3-kpi-value { color: #fca5a5; }
[data-theme="dark"] .dash-v3 .dv3-kpi.is-positive .dv3-kpi-value { color: #86efac; }

/* --- Dashboard v3 � metric-card overrides + charts row + tables --- */

.dv3-metric-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-bottom: 0 !important;
}
.dv3-metric-grid a.metric-card {
  text-decoration: none;
  color: inherit;
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.dv3-metric-grid a.metric-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(15,23,42,.08);
}

/* Charts row: two side-by-side */
.dv3-charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Grouped (paired) bar chart */
.dv3-chart-bar-pair {
  gap: 3px;
  padding: 0 8%;
  align-items: flex-end !important;
}
.dv3-chart-bar-pair .dv3-chart-bar {
  width: auto;
  flex: 1 1 0;
  max-width: none;
}
.dv3-chart-bar-exp {
  background-image: linear-gradient(180deg, #f87171, #ef4444) !important;
  background-color: #ef4444 !important;
}
.dv3-chart-bar-rev {
  background-image: linear-gradient(180deg, #4ade80, #16a34a) !important;
  background-color: #16a34a !important;
}
.dv3-chart-value.is-positive { color: var(--dv3-positive); }
.dv3-chart-value.is-danger   { color: var(--dv3-danger); }

.dv3-chart-legend {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 8px;
  font-size: 11px;
  color: var(--dv3-text-2);
  flex-wrap: wrap;
  border-top: 1px solid var(--dv3-border);
  margin-top: 4px;
}
.dv3-chart-legend span { display: inline-flex; align-items: center; gap: 5px; }
.dv3-leg {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 2px;
}
.dv3-leg-exp { background: #ef4444; }
.dv3-leg-rev { background: #16a34a; }
.dv3-leg-spacer { flex: 1; }
.dv3-leg-total { font-weight: 600; font-size: 12px; }
.dv3-leg-total.is-positive { color: var(--dv3-positive); }
.dv3-leg-total.is-danger   { color: var(--dv3-danger); }

/* Tables on dashboard */
.dv3-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--dv3-border);
  border-radius: 8px;
}
.dv3-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  min-width: 100%;
}
.dv3-table thead th {
  background: #f8fafc;
  text-align: left;
  padding: 9px 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--dv3-text-2);
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--dv3-border);
  white-space: nowrap;
}
.dv3-table thead th.num { text-align: right; }
.dv3-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
  color: var(--dv3-text);
}
.dv3-table tbody tr:last-child td { border-bottom: none; }
.dv3-table tbody tr:hover td { background: #f8fafc; }
.dv3-table td.num,
.dv3-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dv3-table td.muted { color: var(--dv3-text-2); }
.dv3-table .dv3-pill { margin-right: 4px; }
.dv3-table .is-positive { color: var(--dv3-positive); }
.dv3-table .is-danger   { color: var(--dv3-danger); }
.dv3-table tfoot td {
  padding: 10px 12px;
  background: #f8fafc;
  border-top: 1px solid var(--dv3-border);
  font-weight: 600;
}

/* Responsive */
@media (max-width: 1100px) {
  .dv3-metric-grid { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
}
@media (max-width: 820px) {
  .dv3-metric-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .dv3-charts-row { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  /* Card-style tables on mobile */
  .dv3-table-wrap { border: none; border-radius: 0; overflow: visible; }
  .dv3-table thead { display: none; }
  .dv3-table, .dv3-table tbody, .dv3-table tr, .dv3-table td { display: block; width: 100%; }
  .dv3-table tbody tr {
    border: 1px solid var(--dv3-border);
    border-radius: 8px;
    margin-bottom: 8px;
    padding: 4px 0;
    background: #fff;
  }
  .dv3-table tbody tr:hover td { background: transparent; }
  .dv3-table td {
    border-bottom: 1px dashed #f1f5f9;
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    text-align: right;
  }
  .dv3-table td:last-child { border-bottom: none; }
  .dv3-table td::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 600;
    color: var(--dv3-text-2);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-right: auto;
    text-align: left;
  }
  .dv3-table td.num { text-align: right; justify-content: space-between; }
  .dv3-table tfoot { display: block; }
  .dv3-table tfoot tr { border: 1px solid var(--dv3-border-strong); border-radius: 8px; background: #f8fafc; }
}

/* Dark theme */
[data-theme="dark"] .dv3-table thead th,
[data-theme="dark"] .dv3-table tfoot td { background: #1f2937; }
[data-theme="dark"] .dv3-table tbody td { border-bottom-color: #1f2937; color: #e2e8f0; }
[data-theme="dark"] .dv3-table tbody tr:hover td { background: #1a2433; }
[data-theme="dark"] .dv3-table-wrap { border-color: #1f2937; }
[data-theme="dark"] .dv3-chart-legend { border-top-color: #1f2937; color: #94a3b8; }
[data-theme="dark"] .dv3-metric-grid a.metric-card:hover { box-shadow: 0 6px 16px rgba(0,0,0,.4); }
@media (max-width: 640px) {
  [data-theme="dark"] .dv3-table tbody tr { background: #111827; border-color: #1f2937; }
  [data-theme="dark"] .dv3-table td { border-bottom-color: #1f2937; }
}

/* ── Alerts strip ─────────────────────────────────────────── */
.dv3-alerts {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dv3-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  color: inherit;
  transition: filter .12s;
  border: 1px solid transparent;
}
.dv3-alert:hover { filter: brightness(.96); }
.dv3-alert-amber {
  background: var(--dv3-warning-soft);
  color: var(--dv3-warning);
  border-color: #fde68a;
}
.dv3-alert-red {
  background: var(--dv3-danger-soft);
  color: var(--dv3-danger);
  border-color: #fecaca;
}
.dv3-alert-cta {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  opacity: .75;
  flex-shrink: 0;
}
.dv3-alert svg { flex-shrink: 0; }

/* Dark theme alerts */
[data-theme="dark"] .dv3-alert-amber {
  background: #2d1f07;
  color: #fbbf24;
  border-color: #78450a;
}
[data-theme="dark"] .dv3-alert-red {
  background: #2d0a0a;
  color: #fca5a5;
  border-color: #7f1d1d;
}

/* ── Metric card entrance animation ──────────────────────── */
@keyframes dv3-fadein {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dv3-metric-grid .metric-card {
  animation: dv3-fadein .25s ease both;
}
.dv3-metric-grid .metric-card:nth-child(1) { animation-delay: .03s; }
.dv3-metric-grid .metric-card:nth-child(2) { animation-delay: .06s; }
.dv3-metric-grid .metric-card:nth-child(3) { animation-delay: .09s; }
.dv3-metric-grid .metric-card:nth-child(4) { animation-delay: .12s; }
.dv3-metric-grid .metric-card:nth-child(5) { animation-delay: .15s; }
.dv3-metric-grid .metric-card:nth-child(6) { animation-delay: .18s; }
.dv3-metric-grid .metric-card:nth-child(7) { animation-delay: .21s; }
.dv3-metric-grid .metric-card:nth-child(8) { animation-delay: .24s; }

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .dv3-metric-grid .metric-card { animation: none; }
}
/* ── Savings add-form responsive grid ───────────────────────── */
@media (max-width: 768px) {
  .sav-add-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .sav-add-grid button[type="submit"] {
    grid-column: 1 / -1;
    width: 100%;
    height: auto !important;
    padding: 10px !important;
  }
  .sav-add-grid > div:first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 480px) {
  .sav-add-grid {
    grid-template-columns: 1fr !important;
  }
  .sav-add-grid > div:first-child {
    grid-column: 1 / -1;
  }
}

/* ═══════════════════════════════════════════════════════════════
   BALANCE & PAYMENTS — clean mobile-first responsive layer
   ═══════════════════════════════════════════════════════════════ */

/* ── Financial Summary (Balance tab): semantic div-based layout ── */
.bal-fin {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-top: none;
  border-radius: 0 0 var(--radius-lg, 12px) var(--radius-lg, 12px);
  overflow: hidden;
}
.bal-fin-section-head {
  background: var(--accent, #1e3a5f);
  padding: 10px 18px;
  border-top: 3px solid rgba(255,255,255,.06);
}
.bal-fin-section-head:first-child { border-top: none; }
.bal-fin-section-title {
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.bal-fin-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--border, #e2e8f0);
  transition: background .12s;
}
.bal-fin-row:last-child { border-bottom: none; }
.bal-fin-row:hover { background: #f0f7ff; }
.bal-fin-label {
  flex: 1 1 60%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text, #0f172a);
}
.bal-fin-label > span:first-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bal-fin-value {
  flex: 0 0 auto;
  text-align: right;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text, #0f172a);
}
.bal-fin-row.is-bold .bal-fin-label { font-weight: 700; }
.bal-fin-row.is-bold .bal-fin-value { font-weight: 800; font-size: 15px; }
.bal-fin-row.is-indent { padding-left: 34px; }
.bal-fin-badge {
  display: inline-block;
  font-size: 9px;
  background: #fef3c7;
  color: #92400e;
  padding: 1px 6px;
  border-radius: 8px;
  font-weight: 700;
  flex-shrink: 0;
}
.bal-fin-highlight {
  background: #eff6ff;
  border-bottom: 2px solid #3b82f6 !important;
}
.bal-fin-highlight .bal-fin-label { color: #1e40af; font-size: 12px; }
.bal-fin-check.is-positive { background: #f0fdf4; border-top: 2px solid #86efac; }
.bal-fin-check.is-positive .bal-fin-label { color: #059669; }
.bal-fin-check.is-positive .bal-fin-value { color: #059669; font-size: 18px !important; font-weight: 900 !important; }
.bal-fin-check.is-negative { background: #fff5f5; border-top: 2px solid #fca5a5; }
.bal-fin-check.is-negative .bal-fin-label { color: #dc2626; }
.bal-fin-check.is-negative .bal-fin-value { color: #dc2626; font-size: 18px !important; font-weight: 900 !important; }
.bal-fin-date {
  background: #f8fafc;
}
.bal-fin-date .bal-fin-label { color: var(--text-muted, #64748b); font-size: 12px; }
.bal-fin-date .bal-fin-value { color: var(--text, #0f172a); font-weight: 600; }

/* ── Force card view on mobile, hide table view + toggle buttons ── */
@media (max-width: 768px) {
  .balance-page #view-pay-table,
  .balance-page #view-sav-table,
  .balance-page #view-ldg-table { display: none !important; }
  .balance-page #view-pay-card,
  .balance-page #view-sav-card,
  .balance-page #view-ldg-card { display: grid !important; }
  .balance-page #btn-pay-table,
  .balance-page #btn-pay-card,
  .balance-page #btn-sav-table,
  .balance-page #btn-sav-card,
  .balance-page #btn-ldg-table,
  .balance-page #btn-ldg-card { display: none !important; }

  .balance-page #view-pay-card,
  .balance-page #view-sav-card,
  .balance-page #view-ldg-card {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 10px !important;
  }

  .balance-page .balance-ledger-filter > div[style*="flex:1"] { display: none !important; }

  .balance-page #ledger-name-view,
  .balance-page #ledger-name-edit { width: 100%; justify-content: space-between; }
  .balance-page #ledger-name-edit form { flex-wrap: wrap; }
  .balance-page #ledger-name-edit input[type="text"] { max-width: 100% !important; flex: 1 1 100%; }

  .balance-page .sav-add-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .balance-page .sav-add-grid > button[type="submit"] {
    grid-column: 1 / -1;
    height: 42px !important;
  }

  div[id^="m-"][style*="position:fixed"] > div {
    max-height: 92vh !important;
    overflow-y: auto !important;
    padding: 18px !important;
    width: min(420px, 95vw) !important;
  }
  div[id^="m-"][style*="position:fixed"] > div h2 { font-size: 15px !important; }
  div[id^="m-"][style*="position:fixed"] form > div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  .balance-page #edit-summary-form div[style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* Financial Summary header bar (gradient) */
  .balance-page[data-tab="balance"] .card > div[style*="linear-gradient"][style*="display:flex"][style*="justify-content:space-between"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px;
    padding: 14px 16px !important;
  }
  .balance-page[data-tab="balance"] .card > div[style*="linear-gradient"] .btn { text-align: center; }

  /* Tighter rows on mobile */
  .bal-fin-row { padding: 10px 14px; gap: 10px; font-size: 12px; }
  .bal-fin-label { font-size: 12px; }
  .bal-fin-value { font-size: 12px; }
  .bal-fin-row.is-bold .bal-fin-value { font-size: 14px; }
  .bal-fin-row.is-indent { padding-left: 24px; }
  .bal-fin-section-head { padding: 9px 14px; }
  .bal-fin-check.is-positive .bal-fin-value,
  .bal-fin-check.is-negative .bal-fin-value { font-size: 16px !important; }
}

@media (max-width: 480px) {
  .balance-page .sav-add-grid { grid-template-columns: 1fr !important; }
}