/* Victoria HQ 2.0 — Design System */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Palette */
  --accent:        #635BFF;
  --accent-hover:  #4F46E5;
  --accent-light:  #EEF2FF;
  --green:         #1CA355;
  --green-light:   #ECFDF5;
  --red:           #C0392B;
  --red-light:     #FEF2F2;
  --amber:         #B45309;
  --amber-light:   #FFFBEB;
  --blue:          #2563EB;
  --blue-light:    #EFF6FF;

  /* Surfaces */
  --surface-1:     #FFFFFF;
  --surface-2:     #F6F9FC;
  --surface-3:     #EEF2F7;

  /* Text */
  --text-primary:  #1A1D23;
  --text-secondary:#4B5563;
  --text-muted:    #9CA3AF;

  /* Border */
  --border:        #E5E7EB;
  --border-strong: #D1D5DB;

  /* Layout */
  --topbar-h:  56px;
  --sidebar-w: 220px;
  --radius:    8px;
  --radius-lg: 12px;

  /* Shadow */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.12);
}

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

html { font-size:14px; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size:14px;
  line-height:1.5;
  color:var(--text-primary);
  background:var(--surface-2);
  -webkit-font-smoothing:antialiased;
}

/* ── TOP BAR ────────────────────────────────────────────────── */
.topbar {
  position:fixed; top:0; left:0; right:0; height:var(--topbar-h);
  background:var(--surface-1);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center;
  padding:0 20px 0 0;
  z-index:200;
  box-shadow:var(--shadow-sm);
}

.topbar-brand {
  width:var(--sidebar-w);
  flex-shrink:0;
  display:flex; align-items:center; gap:10px;
  padding:0 20px;
  border-right:1px solid var(--border);
  height:100%;
}
.brand-mark {
  width:30px; height:30px;
  background:var(--accent); border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.brand-mark svg { width:16px; height:16px; stroke:#fff; }
.brand-name { font-size:15px; font-weight:700; color:var(--text-primary); letter-spacing:-.2px; }

.topbar-center {
  flex:1;
  padding:0 24px;
  font-size:13px; color:var(--text-secondary);
}

.topbar-right {
  display:flex; align-items:center; gap:12px;
  margin-left:auto;
}

.topbar-stat {
  font-size:13px; font-weight:600;
  padding:4px 10px;
  border-radius:20px;
  background:var(--surface-2);
  border:1px solid var(--border);
  color:var(--text-primary);
}
.topbar-stat.positive { background:var(--green-light); border-color:#A7F3D0; color:var(--green); }
.topbar-stat.negative { background:var(--red-light); border-color:#FCA5A5; color:var(--red); }

.topbar-date {
  font-size:12px; color:var(--text-muted);
  padding:0 4px;
}

/* ── ICON BTN ───────────────────────────────────────────────── */
.icon-btn {
  position:relative;
  width:34px; height:34px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--surface-1);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:var(--text-secondary);
  transition:background .15s, border-color .15s;
}
.icon-btn:hover { background:var(--surface-2); border-color:var(--border-strong); }
.icon-btn svg   { width:16px; height:16px; }

.notif-badge {
  position:absolute; top:-3px; right:-3px;
  min-width:16px; height:16px;
  background:var(--red); color:#fff;
  font-size:10px; font-weight:700;
  border-radius:8px; padding:0 4px;
  line-height:16px; text-align:center;
}

/* ── USER MENU ──────────────────────────────────────────────── */
.user-menu {
  position:relative;
  display:flex; align-items:center; gap:8px;
  cursor:pointer;
  padding:4px 8px; border-radius:var(--radius);
  border:1px solid transparent;
  transition:background .15s, border-color .15s;
  color:var(--text-secondary);
  user-select:none;
}
.user-menu:hover { background:var(--surface-2); border-color:var(--border); }
.user-avatar {
  width:28px; height:28px;
  border-radius:50%;
  background:var(--accent); color:#fff;
  font-size:12px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.user-name { font-size:13px; font-weight:500; color:var(--text-primary); }
.user-dropdown {
  display:none;
  position:absolute; top:calc(100% + 6px); right:0;
  min-width:180px;
  background:var(--surface-1);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  padding:6px;
  z-index:300;
}
.user-menu.open .user-dropdown { display:block; }
.dropdown-item {
  display:flex; align-items:center; gap:8px;
  width:100%; padding:8px 10px;
  background:none; border:none; border-radius:var(--radius);
  font:inherit; font-size:13px; cursor:pointer;
  color:var(--text-primary); text-align:left;
  transition:background .1s;
}
.dropdown-item:hover { background:var(--surface-2); }
.dropdown-item.text-danger { color:var(--red); }
.dropdown-item svg { width:14px; height:14px; flex-shrink:0; }
.dropdown-divider { height:1px; background:var(--border); margin:4px 0; }

/* ── NOTIFICATION PANEL ─────────────────────────────────────── */
.notif-panel {
  position:fixed; top:var(--topbar-h); right:16px;
  width:340px; max-height:480px;
  background:var(--surface-1);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  z-index:250; display:none;
  flex-direction:column; overflow:hidden;
}
.notif-panel.open { display:flex; }
.notif-panel-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid var(--border);
  font-weight:600; font-size:13px;
}
#notif-list { overflow-y:auto; flex:1; }
.notif-item {
  padding:12px 16px; border-bottom:1px solid var(--border);
  font-size:13px;
}
.notif-item.unread { background:var(--accent-light); }
.notif-item-title { font-weight:600; margin-bottom:2px; }
.notif-item-msg   { color:var(--text-muted); font-size:12px; }
.overlay-backdrop {
  display:none; position:fixed; inset:0; z-index:200;
}
.overlay-backdrop.open { display:block; }

/* ── LAYOUT ─────────────────────────────────────────────────── */
.app-layout {
  display:flex;
  margin-top:var(--topbar-h);
  min-height:calc(100vh - var(--topbar-h));
}

/* ── SIDEBAR ────────────────────────────────────────────────── */
.sidebar {
  width:var(--sidebar-w); flex-shrink:0;
  background:var(--surface-1);
  border-right:1px solid var(--border);
  position:fixed; top:var(--topbar-h); left:0; bottom:0;
  overflow-y:auto;
  padding:16px 0;
  display:flex; flex-direction:column;
  z-index:100;
}
.nav-section { margin-bottom:4px; }
.nav-section-label {
  font-size:10px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-muted);
  padding:10px 16px 4px;
}
.nav-item {
  display:flex; align-items:center; gap:9px;
  padding:8px 16px; margin:1px 8px;
  border-radius:var(--radius);
  color:var(--text-secondary);
  text-decoration:none; font-size:13px; font-weight:500;
  transition:background .12s, color .12s;
  cursor:pointer;
}
.nav-item svg { width:15px; height:15px; flex-shrink:0; }
.nav-item:hover { background:var(--surface-2); color:var(--text-primary); }
.nav-item.active { background:var(--accent-light); color:var(--accent); font-weight:600; }
.sidebar-bottom { margin-top:auto; border-top:1px solid var(--border); padding-top:8px; }

/* ── MAIN CONTENT ───────────────────────────────────────────── */
.main-content {
  flex:1;
  margin-left:var(--sidebar-w);
  min-height:calc(100vh - var(--topbar-h));
  padding:28px 32px;
}

/* ── PAGE HEADER ────────────────────────────────────────────── */
.page-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:24px;
  gap:16px;
}
.page-title {
  font-size:22px; font-weight:700;
  color:var(--text-primary); letter-spacing:-.4px;
}
.page-subtitle { font-size:13px; color:var(--text-muted); margin-top:2px; }

/* ── STAT GRID ──────────────────────────────────────────────── */
.stat-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:16px;
  margin-bottom:24px;
}
.stat-card {
  background:var(--surface-1);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:20px;
  box-shadow:var(--shadow-sm);
}
.stat-card-top {
  display:flex; align-items:flex-start; justify-content:space-between;
  margin-bottom:12px;
}
.stat-label { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); }
.stat-icon {
  width:32px; height:32px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
}
.stat-icon svg { width:16px; height:16px; }
.stat-icon.purple { background:var(--accent-light); color:var(--accent); }
.stat-icon.purple svg { stroke:var(--accent); }
.stat-icon.green  { background:var(--green-light); color:var(--green); }
.stat-icon.green svg  { stroke:var(--green); }
.stat-icon.red    { background:var(--red-light); }
.stat-icon.red svg    { stroke:var(--red); }
.stat-icon.amber  { background:var(--amber-light); }
.stat-icon.amber svg  { stroke:var(--amber); }
.stat-icon.blue   { background:var(--blue-light); }
.stat-icon.blue svg   { stroke:var(--blue); }
.stat-value {
  font-size:26px; font-weight:700;
  color:var(--text-primary); letter-spacing:-.5px;
  line-height:1.1;
}
.stat-value.green  { color:var(--green); }
.stat-value.red    { color:var(--red); }
.stat-value.accent { color:var(--accent); }
.stat-meta { font-size:12px; color:var(--text-muted); margin-top:6px; }
.stat-meta.up   { color:var(--green); }
.stat-meta.down { color:var(--red); }

/* ── CARD ───────────────────────────────────────────────────── */
.card {
  background:var(--surface-1);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  margin-bottom:20px;
}
.card-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px;
  border-bottom:1px solid var(--border);
  gap:12px;
}
.card-title { font-size:14px; font-weight:700; color:var(--text-primary); display:flex;align-items:center;gap:8px; }
.card-title svg { width:15px; height:15px; stroke:var(--accent); }
.card-body { padding:20px; }

/* ── TABLE ──────────────────────────────────────────────────── */
.table-wrapper { overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
thead th {
  padding:10px 14px;
  font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em;
  color:var(--text-muted);
  background:var(--surface-2);
  border-bottom:1px solid var(--border);
  text-align:left; white-space:nowrap;
}
tbody td {
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  font-size:13px;
  vertical-align:middle;
}
tbody tr:last-child td { border-bottom:none; }
tbody tr:hover td { background:var(--surface-2); }
.td-primary { font-weight:600; color:var(--text-primary); }
.td-actions { display:flex; gap:6px; }
.td-mono { font-family:monospace; }

/* ── BUTTONS ────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius:var(--radius);
  font:inherit; font-size:13px; font-weight:600;
  border:1px solid transparent;
  cursor:pointer; white-space:nowrap;
  transition:background .12s, border-color .12s, box-shadow .12s, transform .06s;
  text-decoration:none;
}
.btn:active { transform:scale(.98); }
.btn svg { width:14px; height:14px; flex-shrink:0; }
.btn-primary   { background:var(--accent); color:#fff; border-color:var(--accent); }
.btn-primary:hover { background:var(--accent-hover); border-color:var(--accent-hover); }
.btn-secondary { background:var(--surface-1); color:var(--text-primary); border-color:var(--border-strong); }
.btn-secondary:hover { background:var(--surface-2); }
.btn-success   { background:var(--green); color:#fff; border-color:var(--green); }
.btn-danger    { background:var(--red-light); color:var(--red); border-color:#FCA5A5; }
.btn-danger:hover { background:#FEE2E2; }
.btn-ghost     { background:transparent; color:var(--text-secondary); border-color:transparent; }
.btn-ghost:hover { background:var(--surface-2); }
.btn-sm        { padding:5px 10px; font-size:12px; }
.btn:disabled  { opacity:.55; cursor:not-allowed; transform:none; }
.btn-group { display:flex; gap:8px; flex-wrap:wrap; }

/* ── FORMS ──────────────────────────────────────────────────── */
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-grid .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-secondary); }
.form-group input,
.form-group select,
.form-group textarea {
  padding:8px 11px;
  border:1px solid var(--border-strong);
  border-radius:var(--radius);
  font:inherit; font-size:13px;
  background:var(--surface-1); color:var(--text-primary);
  transition:border-color .12s, box-shadow .12s;
  outline:none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(99,91,255,.12);
}
.form-group input[type=number] { font-variant-numeric:tabular-nums; }
.form-group textarea { resize:vertical; min-height:70px; }
.form-actions { display:flex; gap:8px; justify-content:flex-end; padding-top:8px; }

/* ── WEEKLY SHEET SPECIAL ───────────────────────────────────── */
.weekly-grid {
  overflow-x:auto;
}
.weekly-table {
  width:100%; border-collapse:collapse;
  font-size:13px;
}
.weekly-table th, .weekly-table td {
  padding:8px 10px;
  border:1px solid var(--border);
  text-align:center;
  min-width:80px;
}
.weekly-table thead th {
  background:var(--surface-2);
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:var(--text-muted);
}
.weekly-table .row-label {
  text-align:left; font-weight:600; color:var(--text-primary);
  background:var(--surface-2); min-width:100px;
}
.weekly-table .total-col { font-weight:700; background:var(--accent-light); color:var(--accent); }
.weekly-table .day-total { font-weight:700; background:var(--surface-3); }
.weekly-table input {
  width:100%; border:none; background:transparent;
  text-align:right; font:inherit; font-size:13px;
  padding:0; outline:none; min-width:70px;
  color:var(--text-primary);
}
.weekly-table input:focus { background:var(--accent-light); border-radius:4px; }

.kpi-bar {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px;
  padding:16px 20px; background:var(--surface-2); border-radius:var(--radius-lg);
  border:1px solid var(--border); margin-bottom:20px;
}
.kpi-item { text-align:center; }
.kpi-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); margin-bottom:4px; }
.kpi-value { font-size:20px; font-weight:700; color:var(--text-primary); }
.kpi-value.good { color:var(--green); }
.kpi-value.warn { color:var(--amber); }
.kpi-value.bad  { color:var(--red); }

/* ── BADGES ─────────────────────────────────────────────────── */
.badge {
  display:inline-flex; align-items:center;
  padding:2px 8px; border-radius:20px;
  font-size:11px; font-weight:700;
  text-transform:capitalize; white-space:nowrap;
}
.badge-draft     { background:var(--surface-3); color:var(--text-muted); }
.badge-submitted { background:var(--green-light); color:var(--green); }
.badge-paid      { background:var(--green-light); color:var(--green); }
.badge-unpaid    { background:var(--amber-light); color:var(--amber); }
.badge-overdue   { background:var(--red-light); color:var(--red); }
.badge-matched   { background:var(--green-light); color:var(--green); }
.badge-variance  { background:var(--amber-light); color:var(--amber); }
.badge-pending   { background:var(--surface-3); color:var(--text-muted); }
.badge-current   { background:var(--current); color:var(--text-primary); }
.badge-actual    { background:var(--blue-light); color:var(--blue); }
.badge-forecast  { background:var(--surface-3); color:var(--text-muted); }

/* ── ALERTS ─────────────────────────────────────────────────── */
.alert {
  display:flex; align-items:flex-start; gap:10px;
  padding:12px 14px; border-radius:var(--radius);
  font-size:13px; border:1px solid;
  margin-bottom:12px;
}
.alert svg { width:15px; height:15px; flex-shrink:0; margin-top:1px; }
.alert-info    { background:var(--blue-light);  border-color:#BFDBFE; color:#1E40AF; }
.alert-info svg { stroke:#1E40AF; }
.alert-success { background:var(--green-light); border-color:#A7F3D0; color:var(--green); }
.alert-success svg { stroke:var(--green); }
.alert-warning { background:var(--amber-light); border-color:#FCD34D; color:var(--amber); }
.alert-warning svg { stroke:var(--amber); }
.alert-danger  { background:var(--red-light);   border-color:#FCA5A5; color:var(--red); }
.alert-danger svg  { stroke:var(--red); }

/* ── MODAL ──────────────────────────────────────────────────── */
.modal-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(17,24,39,.5); z-index:500;
  align-items:center; justify-content:center;
  padding:20px;
}
.modal-overlay.open { display:flex; }
.modal {
  background:var(--surface-1);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  width:100%; max-width:600px;
  max-height:90vh; overflow:auto;
  animation:modal-in .2s ease;
}
@keyframes modal-in { from{transform:translateY(-12px);opacity:0} to{transform:none;opacity:1} }
.modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 24px; border-bottom:1px solid var(--border); position:sticky; top:0;
  background:var(--surface-1); z-index:2;
}
.modal-title { font-size:16px; font-weight:700; color:var(--text-primary); }
.modal-close {
  width:30px; height:30px; border:none; background:none;
  cursor:pointer; border-radius:6px; display:flex;align-items:center;justify-content:center;
  color:var(--text-muted); transition:background .12s;
}
.modal-close:hover { background:var(--surface-2); }
.modal-close svg { width:16px; height:16px; }
.modal-body { padding:24px; }

/* ── TOAST ──────────────────────────────────────────────────── */
#toast-container {
  position:fixed; bottom:24px; right:24px;
  display:flex; flex-direction:column; gap:8px; z-index:600;
  pointer-events:none;
}
.toast {
  display:flex; align-items:center; gap:10px;
  padding:12px 16px; border-radius:var(--radius-lg);
  background:var(--text-primary); color:#fff;
  font-size:13px; font-weight:500;
  box-shadow:var(--shadow-lg);
  pointer-events:all;
  animation:toast-in .2s ease;
  min-width:240px; max-width:360px;
}
.toast svg { width:15px; height:15px; flex-shrink:0; }
@keyframes toast-in { from{transform:translateY(8px);opacity:0} to{transform:none;opacity:1} }
.toast.success { background:#18181B; }
.toast.error   { background:var(--red); }
.toast.info    { background:var(--blue); }

/* ── FILTERS / CONTROLS ─────────────────────────────────────── */
.controls {
  display:flex; align-items:center; gap:10px;
  margin-bottom:18px; flex-wrap:wrap;
}
.filter-input {
  padding:7px 11px; border:1px solid var(--border-strong);
  border-radius:var(--radius); font:inherit; font-size:13px;
  background:var(--surface-1); color:var(--text-primary); outline:none;
  transition:border-color .12s;
}
.filter-input:focus { border-color:var(--accent); }

/* ── CASH FLOW TABLE ────────────────────────────────────────── */
.cf-row-negative td { background:var(--red-light) !important; color:var(--red); }
.cf-row-actual td   { background:var(--blue-light) !important; }

/* ── KEY-VALUE PAIR DISPLAY ─────────────────────────────────── */
.key-input-wrap { display:flex; gap:6px; }
.key-input-wrap input { flex:1; }
.key-reveal { padding:8px 10px; border:1px solid var(--border-strong); border-radius:var(--radius); background:var(--surface-2); font:inherit; font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap; }

/* ── TABS ────────────────────────────────────────────────────── */
.tabs { display:flex; gap:2px; margin-bottom:20px; border-bottom:1px solid var(--border); }
.tab {
  padding:10px 16px; border:none; background:none;
  font:inherit; font-size:13px; font-weight:500;
  color:var(--text-secondary); cursor:pointer;
  border-bottom:2px solid transparent;
  transition:color .12s, border-color .12s;
  margin-bottom:-1px;
}
.tab:hover { color:var(--text-primary); }
.tab.active { color:var(--accent); border-bottom-color:var(--accent); font-weight:600; }
.tab-panel { display:none; }
.tab-panel.active { display:block; }

/* ── UTILITIES ──────────────────────────────────────────────── */
.text-muted    { color:var(--text-muted); }
.text-secondary{ color:var(--text-secondary); }
.text-green    { color:var(--green); }
.text-red      { color:var(--red); }
.text-accent   { color:var(--accent); }
.text-amber    { color:var(--amber); }
.fw-600 { font-weight:600; }
.fw-700 { font-weight:700; }
.fs-12  { font-size:12px; }
.fs-13  { font-size:13px; }
.mt-4   { margin-top:4px; }
.mt-8   { margin-top:8px; }
.mt-16  { margin-top:16px; }
.mb-8   { margin-bottom:8px; }
.mb-16  { margin-bottom:16px; }
.mb-24  { margin-bottom:24px; }
.p-16   { padding:16px; }
.p-24   { padding:24px; }
.gap-8  { gap:8px; }
.flex   { display:flex; }
.items-center { align-items:center; }

/* ── SPINNER ────────────────────────────────────────────────── */
.spinner {
  width:24px; height:24px;
  border:2px solid var(--border);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:spin .7s linear infinite;
  margin:auto;
}
@keyframes spin { to { transform:rotate(360deg); } }
.page-loading { display:flex; align-items:center; justify-content:center; height:200px; }

/* ── EMPTY STATE ────────────────────────────────────────────── */
.empty-state { text-align:center; padding:48px 24px; }
.empty-state-icon { width:48px; height:48px; margin:0 auto 12px; color:var(--text-muted); }
.empty-state-icon svg { width:48px; height:48px; stroke:var(--text-muted); }
.empty-state-title { font-size:15px; font-weight:600; color:var(--text-primary); margin-bottom:6px; }
.empty-state-sub { font-size:13px; color:var(--text-muted); }

/* ── CHART ──────────────────────────────────────────────────── */
.chart-wrap { position:relative; }

/* ── NAV WEEK PICKER ────────────────────────────────────────── */
.week-nav {
  display:flex; align-items:center; gap:12px;
  margin-bottom:20px;
}
.week-nav-btn {
  width:32px; height:32px; border:1px solid var(--border-strong);
  border-radius:var(--radius); background:var(--surface-1);
  cursor:pointer; display:flex;align-items:center;justify-content:center;
  color:var(--text-secondary); transition:background .12s;
}
.week-nav-btn:hover { background:var(--surface-2); }
.week-nav-btn svg { width:14px; height:14px; }
.week-nav-label {
  font-size:14px; font-weight:600; color:var(--text-primary);
}
.week-nav-sub { font-size:12px; color:var(--text-muted); }

/* ── Phase 2: VAT, Dividends, HMRC ────────────────────── */

/* Badge variants */
.badge-overdue  { background:#fef2f2; color:#dc2626; }
.badge-draft    { background:#faf5ff; color:#7c3aed; }
.badge-accepted { background:var(--green-light); color:var(--green); }

/* Alert variants */
.alert-success { background:#f0fdf4; border-color:#86efac; color:#15803d; }
.alert-warn    { background:#fffbeb; border-color:#fcd34d; color:#b45309; }
.alert-danger  { background:#fef2f2; border-color:#fca5a5; color:#dc2626; }
.alert         { display:flex; align-items:flex-start; gap:10px; padding:12px 16px;
                 border:1px solid; border-radius:var(--radius); font-size:13px; line-height:1.5; }
.alert svg     { flex-shrink:0; margin-top:1px; }

/* VAT 9-box layout */
.vat-boxes     { display:flex; flex-direction:column; gap:0; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.vat-box-row   { display:grid; grid-template-columns:56px 1fr auto;
                 align-items:center; padding:10px 16px; border-bottom:1px solid var(--border); gap:16px; }
.vat-box-row:last-child { border-bottom:none; }
.vat-box-row:nth-child(odd) { background:var(--surface-1); }
.vat-box-num   { font-size:11px; font-weight:700; color:var(--text-muted); text-transform:uppercase; }
.vat-box-label { font-size:13px; color:var(--text-secondary); }
.vat-box-value { font-size:14px; font-weight:600; text-align:right; min-width:100px; }

/* Key input wrap */
.key-input-wrap          { display:flex; gap:6px; }
.key-input-wrap input    { flex:1; }
.key-reveal              { padding:0 10px; font-size:12px; border:1px solid var(--border); border-radius:var(--radius);
                           background:var(--surface-2); cursor:pointer; white-space:nowrap; }

/* Empty state */
.empty-state       { text-align:center; padding:60px 24px; }
.empty-state-icon  { margin-bottom:16px; }
.empty-state-title { font-size:18px; font-weight:600; color:var(--text-primary); margin-bottom:8px; }
.empty-state-sub   { font-size:14px; color:var(--text-muted); }

/* Filter input */
.filter-input { border:1px solid var(--border); border-radius:var(--radius); padding:6px 10px;
                font-size:13px; background:var(--surface-1); color:var(--text-primary); }

/* Alert code tags */
.alert code { background:rgba(0,0,0,.07); padding:1px 4px; border-radius:3px; font-size:12px; }

/* Progress bar */
.progress-bar { height:6px; background:var(--surface-2); border-radius:3px; overflow:hidden; margin-top:4px; }
.progress-fill { height:100%; background:var(--green); border-radius:3px; transition:width .3s; }

/* Wide modal */
.modal.wide { max-width:720px; }

/* ── Phase 3: Morning Overview ────────────────────────────── */

/* Featured nav item */
.nav-section-featured { border-bottom: 1px solid var(--border); padding-bottom: 8px; margin-bottom: 4px; }
.nav-item-morning     { font-weight: 700 !important; color: var(--text-primary) !important; position: relative; }
.nav-item-morning.active, .nav-item-morning:hover { background: linear-gradient(90deg, hsl(38 95% 50% / .12), transparent) !important; }
.live-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: #22c55e; margin-left: auto;
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .5; transform: scale(.8); }
}

/* Page shell */
.morning-shell   { max-width: 960px; margin: 0 auto; padding-bottom: 40px; }
.morning-header  { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
.morning-title   { font-size: 28px; font-weight: 700; color: var(--text-primary); margin: 0; }
.morning-date    { font-size: 14px; color: var(--text-muted); margin-top: 4px; }
.briefing-timestamp { font-size: 12px; color: var(--text-muted); white-space: nowrap; }

/* Balance update card */
.balance-update-card {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px; margin-bottom: 16px;
}

/* Headline */
.morning-headline       { border-radius: var(--radius); padding: 20px 24px; margin-bottom: 16px; border-left: 4px solid; }
.morning-headline.headline-ok       { background: #f0fdf4; border-color: #22c55e; }
.morning-headline.headline-warning  { background: #fffbeb; border-color: #f59e0b; }
.morning-headline.headline-critical { background: #fef2f2; border-color: #dc2626; }
.morning-greeting       { font-size: 13px; color: var(--text-muted); margin-bottom: 6px; }
.morning-headline-text  { font-size: 16px; font-weight: 600; color: var(--text-primary); line-height: 1.5; }

/* Plain English summary */
.morning-plain-english {
  background: var(--surface-2); border-radius: var(--radius);
  padding: 12px 16px; font-size: 13px; color: var(--text-secondary); line-height: 1.6;
}

/* Cash summary 3-card grid */
.morning-cash-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 640px) { .morning-cash-grid { grid-template-columns: 1fr; } }

.cash-card {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px;
}
.cash-card-protected { border-color: hsl(38 95% 50% / .4); background: #fffbeb; }
.cash-card-free      { border-color: hsl(142 72% 29% / .3); }
.cash-card-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-bottom: 8px; }
.cash-card-value { font-size: 28px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.cash-card-sub   { font-size: 12px; color: var(--text-muted); }

/* Two-column layout */
.morning-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 0; }
@media (max-width: 700px) { .morning-two-col { grid-template-columns: 1fr; } }
.morning-two-col .card { margin-bottom: 16px; }

/* Pay cards */
.morning-pay-today .card-header { border-bottom-color: #fca5a5; }
.morning-pay-week  .card-header { border-bottom-color: #fcd34d; }

/* Watch card */
.watch-card { border-left: 3px solid var(--green); }

/* Warnings */
.warning-pill {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: var(--radius);
  margin-bottom: 8px; font-size: 13px;
}
.warning-pill:last-child { margin-bottom: 0; }
.warning-pill-critical { background: #fef2f2; color: #dc2626; }
.warning-pill-high     { background: #fffbeb; color: #b45309; }
.warning-pill-medium   { background: #f0f9ff; color: #0369a1; }
.warning-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: currentColor;
}

/* Loading state */
.morning-loading { text-align: center; padding: 60px; }

/* Chat */
.chat-thread {
  max-height: 400px; overflow-y: auto; margin-bottom: 12px;
  padding: 4px 0;
}
.chat-message         { display: flex; flex-direction: column; margin-bottom: 12px; }
.chat-message-user    { align-items: flex-end; }
.chat-message-assistant { align-items: flex-start; }
.chat-bubble {
  max-width: 80%; padding: 10px 14px; border-radius: 12px;
  font-size: 13px; line-height: 1.6;
}
.chat-message-user .chat-bubble {
  background: var(--accent); color: #fff; border-bottom-right-radius: 4px;
}
.chat-message-assistant .chat-bubble {
  background: var(--surface-2); color: var(--text-primary); border-bottom-left-radius: 4px;
}
.chat-meta { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

/* Typing indicator */
.chat-typing { display: flex; gap: 4px; align-items: center; padding: 12px 16px; }
.chat-typing span {
  width: 6px; height: 6px; background: var(--text-muted); border-radius: 50%;
  animation: typing-bounce .8s ease-in-out infinite;
}
.chat-typing span:nth-child(2) { animation-delay: .15s; }
.chat-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30%            { transform: translateY(-6px); }
}

/* Chat input */
.chat-input-wrap { display: flex; gap: 8px; margin-bottom: 10px; }

/* Chat suggestions */
.chat-suggestions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chat-suggestion  {
  border: 1px solid var(--border); border-radius: 20px; background: var(--surface-2);
  padding: 4px 12px; font-size: 12px; color: var(--text-secondary); cursor: pointer;
  transition: background .12s, color .12s;
}
.chat-suggestion:hover { background: var(--surface-3); color: var(--text-primary); }

/* Utility */
.text-amber { color: #d97706; }
.mt-16 { margin-top: 16px; }
.mb-0  { margin-bottom: 0; }

/* ── Help System ─────────────────────────────────────────────────────────── */
.help-shell {
  display: grid;
  grid-template-columns: 280px 1fr;
  height: calc(100vh - 56px);
  overflow: hidden;
}
.help-nav {
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 16px 0;
  background: var(--surface-1);
}
.help-search-wrap {
  position: relative;
  padding: 0 16px 12px;
}
.help-letter-group {
  margin-bottom: 4px;
}
.help-letter {
  padding: 6px 16px 2px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.help-nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 7px 16px;
  font: inherit;
  font-size: 13px;
  text-align: left;
  color: var(--text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  transition: background .12s, color .12s;
  border-radius: 0;
  gap: 8px;
}
.help-nav-item:hover {
  background: var(--surface-2);
  color: var(--text-primary);
}
.help-nav-item.active {
  background: var(--surface-3);
  color: var(--text-primary);
  font-weight: 600;
}
.help-coming-badge {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 10px;
  background: var(--surface-3);
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.help-no-results {
  padding: 16px;
  color: var(--text-muted);
  font-size: 13px;
}
.help-content {
  overflow-y: auto;
  padding: 32px 48px;
  max-width: 860px;
}
.help-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.help-article-body h2 {
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 16px;
  color: var(--text-primary);
  line-height: 1.3;
}
.help-article-body h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 28px 0 8px;
  color: var(--text-primary);
  padding-top: 28px;
  border-top: 1px solid var(--border);
}
.help-article-body h3:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 20px;
}
.help-article-body h4 {
  font-size: 14px;
  font-weight: 600;
  margin: 16px 0 6px;
  color: var(--text-primary);
}
.help-article-body p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0 0 12px;
}
.help-article-body ul,
.help-article-body ol {
  padding-left: 20px;
  margin: 0 0 16px;
}
.help-article-body li {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.help-article-body li strong {
  color: var(--text-primary);
}
.help-article-body strong {
  color: var(--text-primary);
  font-weight: 600;
}
.help-article-body code {
  background: var(--surface-2);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 12px;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
}
.help-article-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 48px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
@media (max-width: 900px) {
  .help-shell {
    grid-template-columns: 1fr;
    height: auto;
  }
  .help-nav {
    height: 240px;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .help-content {
    padding: 24px 16px;
  }
}
@media print {
  .sidebar, .help-nav, .help-article-footer button,
  .topbar, .help-search-wrap { display: none !important; }
  .help-shell { display: block; }
  .help-content { padding: 0; }
  .help-article-body h3 { page-break-after: avoid; }
}

/* ── Deadline Notification Panel ─────────────────────────────── */
.notif-deadline-item {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  transition: background .1s;
}
.notif-deadline-item:last-child { border-bottom: none; }
.notif-deadline-item:hover { background: var(--surface-2); }

.notif-deadline-title {
  font-weight: 600;
  margin-bottom: 2px;
}
.notif-deadline-msg {
  font-size: 12px;
  color: var(--text-muted);
}

.notif-urgency-danger  { border-left: 3px solid var(--red); }
.notif-urgency-warning { border-left: 3px solid var(--amber); }

.notif-urgency-danger  .notif-deadline-title { color: var(--red); }
.notif-urgency-warning .notif-deadline-title { color: var(--amber); }

/* ── btn-warning (amber) ─────────────────────────────────────── */
.btn-warning {
  background: var(--amber-light);
  color: var(--amber);
  border: 1px solid var(--amber);
}
.btn-warning:hover { background: #FEF3C7; border-color: var(--amber); }

/* ── Stock Control ───────────────────────────────────────────────────────── */

/* KPI row */
.stock-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 0;
  padding-bottom: 16px;
}
@media (max-width: 900px) { .stock-kpi-row { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .stock-kpi-row { grid-template-columns: 1fr; } }

.kpi-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.kpi-card-warn {
  border-color: hsl(38 95% 50% / .5);
  background: #fffbeb;
}
.kpi-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: 6px; }
.kpi-value { font-size: 26px; font-weight: 700; color: var(--text-primary); line-height: 1; margin-bottom: 4px; }
.kpi-sub   { font-size: 12px; color: var(--text-muted); }

/* Filter bar */
.stock-filter-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.stock-cat-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cat-pill {
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface-2);
  color: var(--text-secondary);
  font: inherit;
  font-size: 12px;
  padding: 3px 12px;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.cat-pill:hover  { background: var(--surface-3); color: var(--text-primary); }
.cat-pill.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Category chips in table */
.cat-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.cat-chip-beer    { background: #fef3c7; color: #92400e; }
.cat-chip-spirits { background: #ede9fe; color: #5b21b6; }
.cat-chip-wine    { background: #fce7f3; color: #9d174d; }
.cat-chip-soft    { background: #e0f2fe; color: #075985; }
.cat-chip-food    { background: #f0fdf4; color: #166534; }
.cat-chip-clean   { background: #f1f5f9; color: #475569; }
.cat-chip-other   { background: var(--surface-2); color: var(--text-muted); }

/* Stock level indicator */
.stock-level {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  font-size: 13px;
}
.stock-level-ok   { color: var(--green); }
.stock-level-low  { color: var(--red); }
.stock-level-zero { color: var(--text-muted); }

/* Below-par row highlight */
.stock-row-below-par { background: hsl(0 84% 60% / .04); }
.stock-row-below-par:hover { background: hsl(0 84% 60% / .07); }

/* Stock table */
.stock-table th, .stock-table td { white-space: nowrap; }
.stock-table th:first-child,
.stock-table td:first-child { white-space: normal; min-width: 160px; }

/* Stock count table */
.stock-count-table th,
.stock-count-table td { padding: 6px 12px; font-size: 13px; }
.stock-count-table td:first-child { white-space: normal; min-width: 140px; }

/* Upload / drag-drop zone */
.stock-upload-area {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 40px 24px;
  text-align: center;
  cursor: default;
  transition: border-color .15s, background .15s;
}
.stock-upload-area.dragover {
  border-color: var(--accent);
  background: hsl(260 60% 55% / .05);
}

/* Colour helpers used in stock */
.text-green { color: var(--green); }
.ml-8 { margin-left: 8px; }
.mt-8 { margin-top: 8px; }

/* ── Budget vs Actual ────────────────────────────────────────────────────── */
.budget-table td.budget-editable {
  cursor: pointer;
  border-bottom: 1px dashed var(--border);
}
.budget-table td.budget-editable:hover { background: var(--surface-2); }
.budget-table input.budget-inline-input {
  width: 100%; border: 1px solid var(--accent); border-radius: 4px;
  padding: 3px 6px; font: inherit; font-size: 13px;
  background: var(--surface-1); color: var(--text-primary);
}
.budget-bar-chart {
  display: flex; gap: 8px; align-items: flex-end;
  height: 160px; padding: 0 8px;
  border-bottom: 2px solid var(--border);
  margin-bottom: 8px;
}
.budget-bar-group { display: flex; gap: 2px; align-items: flex-end; flex: 1; }
.budget-bar {
  flex: 1; border-radius: 3px 3px 0 0; min-height: 2px;
  transition: height .3s;
}
.budget-bar-purchases { background: var(--accent); }
.budget-bar-wages     { background: #8b5cf6; }
.budget-bar-labels { display: flex; gap: 8px; justify-content: space-around; font-size: 11px; color: var(--text-muted); }
.badge-on-track   { background: var(--green-light); color: var(--green); }
.badge-near-limit { background: var(--amber-light); color: var(--amber); }
.badge-over-budget { background: var(--red-light); color: var(--red); }


/* ── Daily Cash ──────────────────────────────────────────────────────────── */
.variance-good  { color: var(--green); font-weight: 600; }
.variance-warn  { color: var(--amber); font-weight: 600; }
.variance-alert { color: var(--red);   font-weight: 600; }
.daily-missing  { color: var(--text-muted); font-style: italic; }

/* ── Purchase Orders ─────────────────────────────────────────────────────── */
.po-lines-table { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
.po-lines-table th,
.po-lines-table td { padding: 6px 8px; font-size: 13px; vertical-align: middle; }
.po-lines-table th { border-bottom: 2px solid var(--border); font-weight: 600; color: var(--text-muted); text-transform: uppercase; font-size: 11px; letter-spacing: .04em; }
.po-lines-table td { border-bottom: 1px solid var(--border); }
.po-total-row { padding: 12px 16px; text-align: right; font-size: 14px; border-top: 2px solid var(--border); }
.po-total-amount { font-size: 20px; font-weight: 700; color: var(--text-primary); }
.badge-sent              { background: #eff6ff; color: #1d4ed8; }
.badge-cancelled         { background: #f1f5f9; color: #64748b; }
.badge-partially-received{ background: #fffbeb; color: #b45309; }
.badge-received          { background: var(--green-light); color: var(--green); }
.badge-invoiced          { background: var(--accent-light); color: var(--accent); }
.badge-draft             { background: var(--surface-3); color: var(--text-secondary); }


/* ── Phase 6: Compliance ─────────────────────────────────────── */
.compliance-overdue  { color: var(--red);   font-weight: 600; }
.compliance-due-soon { color: var(--amber); font-weight: 600; }
.compliance-current  { color: var(--green); font-weight: 600; }
.compliance-no-date  { color: var(--text-muted); }

/* ── Phase 6: Monday Meeting ─────────────────────────────────── */
.monday-report { max-width: 860px; margin: 0 auto; }
.monday-section { margin-bottom: 28px; }
.monday-section-title {
  font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--accent); margin-bottom: 12px;
  padding-bottom: 6px; border-bottom: 2px solid var(--accent);
}
.monday-change-up   { color: var(--green); }
.monday-change-down { color: var(--red); }
.monday-actions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.monday-actions-grid textarea {
  width: 100%; min-height: 120px; resize: vertical;
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px 12px; font: inherit; font-size: 13px;
  background: var(--surface-1); color: var(--text-primary);
}
@media print {
  .sidebar, .topbar, .page-actions { display: none !important; }
  .monday-report { margin: 0; padding: 0; }
  .monday-section { page-break-inside: avoid; }
}





/* ── Stock type banners ──────────────────────────────────────────────────── */
.stock-type-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.stock-type-banner > [data-feather] {
  width: 16px; height: 16px; flex-shrink: 0;
}
.stock-type-revenue {
  background: hsl(260 60% 55% / .06);
  border-left: 3px solid var(--accent);
}
.stock-type-revenue > [data-feather]   { stroke: var(--accent); }
.stock-type-operational {
  background: hsl(220 14% 50% / .06);
  border-left: 3px solid var(--text-muted);
}
.stock-type-operational > [data-feather] { stroke: var(--text-muted); }