/* =========================================================================
   KRATRACK — style.css  (Professional Redesign — Dark Navy + Gold)
   Design: Premium CA firm aesthetic. Dark slate foundation, warm gold
   accents, clean sans-serif typography, tight professional radii.
   No colourful glows or playful gradients — data-dense, trustworthy.
   Font: Inter (loaded via Google Fonts in index.html)
   ========================================================================= */

/* ---------- Design tokens ------------------------------------------------ */
:root {
  --font-body: 'Inter', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --topnav-height: 64px;

  --chart-pending: #F59E0B;
  --chart-progress: #3B82F6;
  --chart-completed: #10B981;

  --accent-violet: #8B5CF6;
  --accent-pink: #EC4899;
  --accent-blue: #3B82F6;
  --accent-teal: #14B8A6;
  --accent-orange: #F97316;
  --accent-yellow: #F59E0B;
  --accent-green: #10B981;
  --accent-red: #F43F5E;
}

/* ---------- Dark theme (default professional) ----------------------------- */
:root,
html[data-theme="dark"] {
  --bg:              #0A0F1A;
  --bg-alt:          #0F172A;
  --surface:         #1E293B;
  --surface-alt:     #162032;
  --surface-strong:  #243044;
  --border:          rgba(148, 163, 184, 0.12);
  --border-strong:   rgba(148, 163, 184, 0.22);

  --text-primary:    #F1F5F9;
  --text-secondary:  #94A3B8;
  --text-faint:      #475569;

  --primary:         #F59E0B;
  --primary-dark:    #D97706;
  --primary-light:   rgba(245, 158, 11, 0.12);
  --primary-contrast:#0A0F1A;

  --success:         #10B981;
  --success-bg:      rgba(16, 185, 129, 0.12);
  --danger:          #F43F5E;
  --danger-bg:       rgba(244, 63, 94, 0.12);
  --warning:         #F59E0B;
  --warning-bg:      rgba(245, 158, 11, 0.14);
  --info:            #3B82F6;
  --info-bg:         rgba(59, 130, 246, 0.12);

  --shadow-sm:  0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:  0 12px 40px rgba(0,0,0,0.6);

  --grid-line:  rgba(148, 163, 184, 0.06);
  color-scheme: dark;
}

/* ---------- Light theme --------------------------------------------------- */
html[data-theme="light"] {
  --bg:              #F1F5F9;
  --bg-alt:          #E2E8F0;
  --surface:         #FFFFFF;
  --surface-alt:     #F8FAFC;
  --surface-strong:  #FFFFFF;
  --border:          rgba(15, 23, 42, 0.10);
  --border-strong:   rgba(15, 23, 42, 0.18);

  --text-primary:    #0F172A;
  --text-secondary:  #475569;
  --text-faint:      #94A3B8;

  --primary:         #C2650A;
  --primary-dark:    #9A4F08;
  --primary-light:   rgba(194, 101, 10, 0.10);
  --primary-contrast:#FFFFFF;

  --success:         #059669;
  --success-bg:      rgba(5, 150, 105, 0.10);
  --danger:          #DC2626;
  --danger-bg:       rgba(220, 38, 38, 0.10);
  --warning:         #C2650A;
  --warning-bg:      rgba(194, 101, 10, 0.12);
  --info:            #2563EB;
  --info-bg:         rgba(37, 99, 235, 0.10);

  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.12);
  --shadow-lg:  0 12px 40px rgba(0,0,0,0.16);

  --grid-line:  rgba(15, 23, 42, 0.06);
  color-scheme: light;
}

/* ---------- Base ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background .3s ease, color .3s ease;
  font-size: 14px;
  line-height: 1.5;
}

h1, h2, h3, h4 {
  font-family: var(--font-body);
  color: var(--text-primary);
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.02em;
}

button { font-family: var(--font-body); cursor: pointer; }
input, select, textarea { font-family: var(--font-body); }
a { color: inherit; text-decoration: none; }

.mono-figure { font-family: var(--font-mono); font-weight: 600; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-pill); }
::-webkit-scrollbar-track { background: transparent; }

/* =========================================================================
   TOP NAVIGATION BAR
   ========================================================================= */
.topnav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--topnav-height);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 28px;
  gap: 0;
  box-shadow: var(--shadow-sm);
}

/* Brand */
.topnav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  margin-right: 32px;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.topnav-brand:hover {
  opacity: 0.85;
}
.topnav-logo {
  width: 36px;
  height: 36px;
  background: var(--primary);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-contrast);
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  flex-shrink: 0;
}
.topnav-name {
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.03em;
  color: var(--text-primary);
}
.topnav-sub {
  font-size: 0.68rem;
  color: var(--text-faint);
  font-weight: 500;
  display: block;
  letter-spacing: 0;
}

/* Nav links */
.topnav-links {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  overflow: visible !important;
}

.topnav-group {
  display: flex;
  align-items: center;
  gap: 2px;
}
.topnav-divider {
  width: 1px;
  height: 24px;
  background: var(--border);
  margin: 0 6px;
  flex-shrink: 0;
}
.topnav-group-label {
  font-size: 0.63rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  padding: 4px 6px;
  white-space: nowrap;
  flex-shrink: 0;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
  flex-shrink: 0;
}
.nav-link i {
  font-size: 0.92rem;
  opacity: 0.85;
}

/* Dropdown */
.topnav-dropdown {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}
.topnav-dropdown .dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: var(--surface);
  min-width: 190px;
  box-shadow: var(--shadow-lg);
  z-index: 10000;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  padding: 6px 0;
  margin-top: 2px;
}
.topnav-dropdown:hover .dropdown-menu,
.topnav-dropdown:focus-within .dropdown-menu,
.topnav-dropdown.open .dropdown-menu {
  display: block !important;
}
.topnav-dropdown .dropdown-menu .nav-link {
  display: flex;
  width: 100%;
  text-align: left;
  border-radius: 0;
  padding: 8px 16px;
  margin: 0;
}
.topnav-dropdown .dropdown-menu .nav-link:hover {
  background-color: var(--primary-light);
  color: var(--primary);
}
.nav-link:hover {
  background: var(--primary-light);
  color: var(--primary);
}
.nav-link.active {
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 700;
}
.nav-link.active i { opacity: 1; }

/* Right side controls */
.topnav-right {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
  padding-left: 8px;
}


.theme-toggle { 
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, color .2s;
  white-space: nowrap;
}
.theme-toggle:hover { background: var(--primary-light); color: var(--primary); }
.theme-toggle i { font-size: 0.9rem; }

/* Settings button lives in topnav-right — keep it compact */
.topnav-right .nav-link {
  padding: 6px 10px;
  font-size: 0.78rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

/* Sync status in topnav */

/* Mobile menu button */
.mobile-menu-btn {
  display: none;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-primary);
  font-size: 1.1rem;
}

/* =========================================================================
   MOBILE NAV DRAWER
   ========================================================================= */
.mobile-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 200;
  opacity: 0;
  transition: opacity .25s;
}
.mobile-nav-overlay.open { opacity: 1; }

.mobile-nav-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 280px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  z-index: 201;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform .28s cubic-bezier(0.4,0,0.2,1);
  padding: 20px 16px;
  gap: 4px;
  overflow-y: auto;
}
.mobile-nav-drawer.open { transform: translateX(0); }
.mobile-nav-drawer .nav-link { width: 100%; }
.mobile-nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

/* =========================================================================
   APP LAYOUT
   ========================================================================= */
.app-shell {
  min-height: calc(100vh - var(--topnav-height));
}

/* =========================================================================
   PAGE CONTENT
   ========================================================================= */
.main-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 28px 28px 60px;
}

.page { display: none; animation: fadeUp .25s ease; }
.page.active { display: block; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 24px;
}
.page-header h1 { font-size: 1.75rem; font-weight: 800; }
.page-subtitle { margin: 4px 0 0; color: var(--text-secondary); font-size: 0.88rem; }
.page-header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.today-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.today-chip i { color: var(--primary); }

/* =========================================================================
   KPI CARDS
   ========================================================================= */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
@media (max-width: 1400px) { .kpi-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .kpi-grid { grid-template-columns: 1fr; } }

.kpi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  transition: border-color .2s, transform .2s, box-shadow .2s;
  position: relative;
  overflow: hidden;
  animation: kpiIn .35s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes kpiIn {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.kpi-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3.5px;
  background: var(--kpi-accent, var(--primary));
}
.kpi-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--kpi-accent, var(--primary));
  opacity: 0;
  transition: opacity .2s;
}
.kpi-card:hover {
  border-color: var(--kpi-accent, var(--primary));
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.kpi-card:hover::after { opacity: 1; }

.kpi-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.kpi-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: var(--kpi-icon-bg, var(--primary-light));
  color: var(--kpi-accent, var(--primary));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.kpi-click-hint {
  font-size: 0.72rem;
  color: var(--kpi-accent, var(--primary));
  font-weight: 600;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 3px;
  opacity: 0.6;
  transition: opacity .2s, transform .2s;
}
.kpi-card:hover .kpi-click-hint {
  opacity: 1;
  transform: translateX(2px);
}

.kpi-value {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--text-primary);
}
.kpi-label {
  font-size: 0.76rem;
  color: var(--text-secondary);
  font-weight: 600;
  margin-top: 2px;
}
.kpi-subtext {
  font-size: 0.71rem;
  color: var(--text-faint);
  font-weight: 500;
  margin-top: 1px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.kpi-subtext .subtext-success { color: var(--success); font-weight: 600; }
.kpi-subtext .subtext-alert   { color: var(--danger);  font-weight: 600; }

.btn-quick-add {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--kpi-icon-bg, var(--primary-light));
  color: var(--kpi-accent, var(--primary));
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 0.68rem;
  font-weight: 600;
  transition: background 0.15s, color 0.15s;
}
.btn-quick-add:hover {
  background: var(--kpi-accent, var(--primary));
  color: #fff;
}

.kpi-eye-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--kpi-accent, var(--primary));
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  display: inline-flex;
  align-items: center;
  margin-right: 4px;
}
.kpi-eye-btn:hover {
  background: var(--kpi-accent, var(--primary));
  color: #fff;
}

/* KPI color variants */
.kpi-card[data-filter="clients"]       { --kpi-accent: #14B8A6; --kpi-icon-bg: rgba(20,184,166,.12); }
.kpi-card[data-filter="all"]           { --kpi-accent: #8B5CF6; --kpi-icon-bg: rgba(139,92,246,.12); }
.kpi-card[data-filter="pending"]       { --kpi-accent: #F59E0B; --kpi-icon-bg: rgba(245,158,11,.12); }
.kpi-card[data-filter="completed"]     { --kpi-accent: #10B981; --kpi-icon-bg: rgba(16,185,129,.12); }
.kpi-card[data-filter="overdue"]       { --kpi-accent: #F43F5E; --kpi-icon-bg: rgba(244,63,94,.12); }
.kpi-card[data-variant="fee-summary"]  { --kpi-accent: #D97706; --kpi-icon-bg: rgba(217,119,6,.12); }

/* Fee band */
.money-feature {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-md);
  padding: 18px 24px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}
.money-feature-item {}
.money-feature-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  margin-bottom: 4px;
}
.money-feature-label i { color: var(--primary); }
.money-feature-value {
  font-family: var(--font-mono);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}
.money-feature-divider {
  width: 1px;
  height: 48px;
  background: var(--border);
}
.money-feature:hover {
  border-color: var(--primary);
  background: var(--surface-hover);
}

/* Quick Actions */
.dashboard-quick-actions {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.quick-action-btn {
  flex: 1;
  min-width: 140px;
  justify-content: center;
}

/* =========================================================================
   PANELS
   ========================================================================= */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.panel-head h2 { font-size: 0.95rem; font-weight: 700; }
.panel-head-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.panel-tag {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--primary);
  background: var(--primary-light);
  padding: 3px 8px;
  border-radius: var(--radius-xs);
}

.recent-panel {}

/* =========================================================================
   CHARTS
   ========================================================================= */
.charts-row { margin-bottom: 0; }
.chart-wrap { position: relative; height: 260px; }
.chart-wrap-pie { height: 260px; }

.chart-fallback {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--text-faint);
  text-align: center;
  padding: 20px;
}
.chart-fallback i { font-size: 1.6rem; }
.chart-fallback p { margin: 0; font-size: 0.83rem; max-width: 300px; }

/* =========================================================================
   TABLES
   ========================================================================= */
.table-responsive { overflow-x: auto; }
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}
.data-table thead th {
  text-align: left;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  padding: 0 12px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.data-table tbody td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  vertical-align: middle;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr { transition: background .12s; }
.data-table tbody tr:hover { background: rgba(148,163,184,0.04); }
#workloadTable tbody tr, #feeFollowupTable tbody tr { cursor: pointer; }

.cell-strong { font-weight: 600; }
.cell-muted  { color: var(--text-faint); font-size: 0.76rem; }
.empty-cell  { text-align: center; padding: 36px; color: var(--text-faint); font-size: 0.88rem; }
.overdue-tag { color: var(--danger); font-size: 0.7rem; font-weight: 700; display: inline-block; }

/* Sortable */
.data-table th.sortable { cursor: pointer; user-select: none; }
.data-table th.sortable i { font-size: 0.65rem; margin-left: 3px; opacity: 0.4; }
.data-table th.sortable.sort-active i { opacity: 1; color: var(--primary); }

/* =========================================================================
   STATUS BADGES
   ========================================================================= */
.badge-status {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: var(--radius-xs);
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.badge-pending   { background: var(--warning-bg);  color: var(--warning); }
.badge-progress  { background: var(--info-bg);     color: var(--info); }
.badge-completed { background: var(--success-bg);  color: var(--success); }

/* =========================================================================
   ASSIGNEE AVATARS
   ========================================================================= */
.assignee { display: inline-flex; align-items: center; gap: 7px; }
.avatar {
  width: 24px; height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 700;
  color: #fff;
}
.avatar-c0 { background: #8B5CF6; }
.avatar-c1 { background: #EC4899; }
.avatar-c2 { background: #3B82F6; }
.avatar-c3 { background: #14B8A6; }
.avatar-c4 { background: #F97316; }
.avatar-c5 { background: #10B981; }
.avatar-c6 { background: #F43F5E; }
.avatar-c7 { background: #F59E0B; color: #0A0F1A; }

/* =========================================================================
   BUTTONS
   ========================================================================= */
.icon-btn {
  width: 34px; height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  font-size: 1rem;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.icon-btn:hover { background: var(--primary-light); color: var(--primary); border-color: var(--primary); }

.btn-link {
  border: none;
  background: none;
  color: var(--primary);
  font-weight: 600;
  font-size: 0.82rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
}
.btn-link:hover { text-decoration: underline; }

.btn-pill {
  border: 1px solid var(--border-strong);
  background: var(--surface-alt);
  color: var(--text-primary);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.82rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: background .15s, border-color .15s, color .15s;
}
.btn-pill:hover { background: var(--primary-light); border-color: var(--primary); color: var(--primary); }

.btn-pill-primary {
  border: 1px solid var(--primary);
  background: var(--primary);
  color: var(--primary-contrast);
}
.btn-pill-primary:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  color: var(--primary-contrast);
}

.btn-pill-danger {
  border: 1px solid var(--danger);
  background: var(--danger);
  color: #fff;
}
.btn-pill-danger:hover {
  background: var(--danger);
  border-color: var(--danger);
  filter: brightness(1.1);
  color: #fff;
}

/* =========================================================================
   ROW ACTION BUTTONS
   ========================================================================= */
.row-actions { display: inline-flex; gap: 5px; }
.row-action-btn {
  width: 28px; height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-faint);
  font-size: 0.8rem;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.row-action-btn:hover { background: var(--surface-strong); }
.row-action-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.row-action-btn:disabled:hover { background: transparent; }
.row-action-btn.action-view:hover   { color: var(--info);    border-color: var(--info); }
.row-action-btn.action-edit:hover   { color: var(--primary); border-color: var(--primary); }
.row-action-btn.action-delete:hover { color: var(--danger);  border-color: var(--danger); }
.row-action-btn.action-complete:hover { color: var(--success); border-color: var(--success); }

/* =========================================================================
   SEARCH BOX
   ========================================================================= */
.search-box {
  position: relative;
  min-width: 200px;
  max-width: 380px;
  flex: 1;
}
.search-box i {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-faint);
  font-size: 0.85rem;
  pointer-events: none;
}
.search-box input {
  width: 100%;
  padding: 8px 12px 8px 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  color: var(--text-primary);
  font-size: 0.83rem;
  transition: border-color .15s, box-shadow .15s;
}
.search-box input::placeholder { color: var(--text-faint); }
.search-box input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-light);
}

/* =========================================================================
   RECORD COUNT
   ========================================================================= */
.record-count {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-faint);
  white-space: nowrap;
}

/* =========================================================================
   MODALS
   ========================================================================= */
.modal-backdrop-app {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 300;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.modal-backdrop-app.open {
  opacity: 1;
  pointer-events: auto;
}
.modal-card {
  width: 100%;
  max-width: 480px;
  background: var(--surface-strong);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  transform: translateY(10px) scale(0.99);
  transition: transform .2s ease;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
.modal-backdrop-app.open .modal-card { transform: translateY(0) scale(1); }
.modal-card-wide { max-width: 720px; }
.modal-card-lg   { max-width: 960px; width: 95%; }

.modal-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.modal-card-head h3 { font-size: 1rem; font-weight: 700; }

.modal-card-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.modal-card-foot {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-shrink: 0;
}

/* Quick-view modal accent stripe */
.modal-card.qv-teal   { border-top: 3px solid #14B8A6; }
.modal-card.qv-blue   { border-top: 3px solid #3B82F6; }
.modal-card.qv-violet { border-top: 3px solid #8B5CF6; }
.modal-card.qv-amber  { border-top: 3px solid #F59E0B; }
.modal-card.qv-green  { border-top: 3px solid #10B981; }
.modal-card.qv-red    { border-top: 3px solid #F43F5E; }

/* =========================================================================
   FORMS
   ========================================================================= */
.form-field { display: flex; flex-direction: column; gap: 5px; }
.form-field label {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.form-field .form-control,
.form-field .form-select {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  padding: 8px 11px;
  font-size: 0.85rem;
  transition: border-color .15s, box-shadow .15s;
}
.form-field .form-control:focus,
.form-field .form-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-light);
}
.form-field .form-control[readonly] { opacity: 0.65; }
.form-field textarea.form-control { resize: vertical; min-height: 48px; }
.field-optional { font-weight: 400; color: var(--text-faint); font-size: 0.72rem; text-transform: none; letter-spacing: 0; }

/* Task Entry form grid */
.te-form-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.form-field-wide { grid-column: span 2; }
.te-form-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* Workflow */
.workflow-preview { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.workflow-preview h3 { font-size: 0.88rem; font-weight: 700; margin-bottom: 14px; }
.workflow-timeline { display: flex; flex-direction: column; gap: 0; position: relative; padding-left: 24px; }
.workflow-timeline::before {
  content: '';
  position: absolute;
  left: 5px; top: 6px; bottom: 6px;
  width: 1px;
  background: var(--border-strong);
}
.workflow-item { position: relative; padding-bottom: 16px; }
.workflow-item:last-child { padding-bottom: 0; }
.workflow-item::before {
  content: '';
  position: absolute;
  left: -24px; top: 4px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--bg-alt);
  border: 2px solid var(--primary);
}
.workflow-item-date { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-faint); font-weight: 600; }
.workflow-item-text { font-size: 0.85rem; color: var(--text-primary); margin: 2px 0 4px; }

/* Task view grid */
.te-view-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.te-view-item {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.te-view-item span { display: block; }
.te-view-label { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); font-weight: 700; margin-bottom: 3px; }
.te-view-value { font-size: 0.88rem; font-weight: 600; }

/* =========================================================================
   SETTINGS PAGE
   ========================================================================= */
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--border);
}
.settings-row:last-of-type { border-bottom: none; }
.settings-row label { font-weight: 600; font-size: 0.85rem; min-width: 160px; }
.settings-control { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.settings-control .form-control {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  padding: 7px 11px;
  font-size: 0.85rem;
}
.settings-control .form-control:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-light);
}
.settings-hint { color: var(--text-faint); font-size: 0.78rem; margin-top: 6px; }

/* Toggle switch */
.switch { position: relative; display: inline-block; width: 42px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch-track {
  position: absolute; inset: 0;
  background: var(--border-strong);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background .2s;
}
.switch input:checked + .switch-track { background: var(--primary); }
.switch-thumb {
  position: absolute;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  top: 3px; left: 3px;
  transition: transform .2s;
}
.switch input:checked + .switch-track .switch-thumb { transform: translateX(18px); }

/* =========================================================================
   REPORTS
   ========================================================================= */
.report-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.report-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.report-tab:hover { border-color: var(--primary); color: var(--primary); }
.report-tab.active {
  background: var(--primary);
  color: var(--primary-contrast);
  border-color: var(--primary);
}

/* =========================================================================
   TOASTS
   ========================================================================= */
.toast-host {
  position: fixed;
  bottom: 20px; right: 20px;
  z-index: 500;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.app-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-radius: var(--radius-sm);
  background: var(--surface-strong);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-md);
  color: var(--text-primary);
  font-size: 0.83rem;
  font-weight: 600;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity .22s ease, transform .22s ease;
  min-width: 240px;
  max-width: 360px;
}
.app-toast.show { opacity: 1; transform: translateX(0); }
.app-toast-success i { color: var(--success); }
.app-toast-error i   { color: var(--danger); }
.app-toast-info i    { color: var(--primary); }
.app-toast span { flex: 1; }
.app-toast-action {
  border: none;
  background: none;
  color: var(--primary);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  padding: 2px 0 2px 8px;
  flex-shrink: 0;
}
.app-toast-action:hover { text-decoration: underline; }

/* =========================================================================
   CONFETTI
   ========================================================================= */
.confetti-piece {
  position: fixed;
  width: 7px; height: 7px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 1000;
  animation: confettiBurst 1s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes confettiBurst {
  0%   { transform: translate(0,0) rotate(0deg) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(.4); opacity: 0; }
}

/* =========================================================================
   EMPTY STATE
   ========================================================================= */
.empty-panel {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-secondary);
}
.empty-panel i { font-size: 2rem; color: var(--text-faint); margin-bottom: 12px; display: block; }
.empty-panel h3 { font-size: 1rem; margin-bottom: 6px; }
.empty-panel p  { margin: 0; font-size: 0.85rem; }

/* =========================================================================
   SYNC ISSUES BOX
   ========================================================================= */

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1280px) {
  .kpi-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .topnav-links, .topnav-group-label, .topnav-divider { display: none; }
  .mobile-menu-btn { display: flex; }
  .mobile-nav-overlay { display: block; pointer-events: none; }
  .mobile-nav-overlay.open { pointer-events: auto; }
  .main-content { padding: 16px 16px 60px; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .te-form-grid { grid-template-columns: repeat(2, 1fr); }
  .te-view-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .money-feature { flex-direction: column; gap: 14px; }
  .money-feature-divider { display: none; }
  .te-form-grid { grid-template-columns: 1fr; }
  .te-view-grid { grid-template-columns: 1fr; }
  .form-field-wide { grid-column: span 1; }
  .topnav { padding: 0 16px; }
  .topnav-name { font-size: 0.9rem; }
  .topnav-sub { display: none; }
}

/* Print */
@media print {
  .topnav, .toast-host, .row-actions, .page-header-actions { display: none !important; }

  /* Print the screen you are looking at, and only that one.
     This used to be `.page { display: block !important }`, which un-hid all
     fourteen sections at once — so printing Reports also printed Dashboard,
     Clients, Firms, Tasks, Settings and the rest, most of them never
     rendered and therefore page after page of near-blank paper. */
  .page { display: none !important; }
  .page.active { display: block !important; animation: none !important; }

  /* A closed modal is not display:none — it stays a full-viewport flex box at
     opacity 0 — so it can still put a blank sheet through the printer. */
  .modal-backdrop-app { display: none !important; }

  .panel { box-shadow: none; border: 1px solid #ccc; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Invoice print.

   Isolate the invoice by taking everything else OUT of the layout, not by
   making it invisible. The previous rules used `visibility: hidden`, which
   keeps every box and its full height — so the entire app still paginated
   underneath and the printer produced sheet after sheet of blank paper.

   Worse, the invoice itself never printed at all: #invoicePrintArea carries
   Bootstrap's .d-none (`display: none !important`) and nothing removes it,
   and `visibility: visible` cannot bring back a display:none element. The
   result was a print job that was blank the whole way through.

   #invoicePrintArea is a direct child of <body>, so hiding body's other
   children is enough to isolate it. */
@media print {
  /* The :not(#id) is load-bearing, not decoration. A plain
     `body.print-invoice-mode > *` scores (0,1,1) and loses to `.page.active`
     (0,2,0) above, so the report you were looking at printed behind the
     invoice. Naming the id lifts this to (1,1,1) and it wins outright. */
  body.print-invoice-mode > *:not(#invoicePrintArea) {
    display: none !important;
  }
  body.print-invoice-mode > #invoicePrintArea {
    display: block !important; /* beats Bootstrap's .d-none (0,1,0) */
    position: static;
    width: auto;
    margin: 0;
    padding: 0;
  }

  /* On paper the document is the page: drop the centred max-width and the
     screen padding, and let the @page margin do the spacing instead. */
  .invoice-box {
    max-width: none;
    margin: 0;
    padding: 0;
    font-size: 12px;
  }

  /* Repeat the column headings on every sheet of a long invoice, and never
     split a line item or the totals block across a page boundary. */
  .invoice-box .invoice-table thead { display: table-header-group; }
  .invoice-box .invoice-table tr { page-break-inside: avoid; break-inside: avoid; }
  .invoice-box .invoice-totals,
  .invoice-box .bank-details,
  .invoice-box .invoice-notes,
  .invoice-box .invoice-sign { page-break-inside: avoid; break-inside: avoid; }

  /* Logos are usually flat colour on white; without this they drop out
     entirely when the browser is set to skip background graphics. */
  .invoice-box .invoice-logo {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Keep the ruled table and shaded header row when the browser is set to
     skip background graphics. */
  .invoice-box .invoice-table thead th {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

@page {
  size: A4;
  margin: 12mm;
}

/* ================================================================
   REQUIRED STAR & FIELD LABELS
   ================================================================ */
.required-star {
  color: var(--danger);
  font-size: 0.85em;
  margin-left: 2px;
}

/* ================================================================
   GST TOGGLE BUTTON GROUP
   ================================================================ */
.gst-toggle-group {
  display: flex;
  gap: 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1.5px solid var(--border);
  width: fit-content;
  margin-top: 4px;
}

.gst-toggle-btn {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border: none;
  padding: 7px 22px;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  font-family: var(--font);
}

.gst-toggle-btn + .gst-toggle-btn {
  border-left: 1.5px solid var(--border);
}

.gst-toggle-btn.active,
.gst-toggle-btn[aria-pressed="true"].active {
  background: var(--primary);
  color: #fff;
}

.gst-toggle-btn:hover:not(.active) {
  background: var(--bg-hover);
  color: var(--text);
}

/* ================================================================
   AUDIT LOG ACTION BADGES
   ================================================================ */
.audit-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.badge-add    { background: rgba(16,185,129,0.15); color: #10B981; border: 1px solid rgba(16,185,129,0.25); }
.badge-edit   { background: rgba(59,130,246,0.15); color: #3B82F6; border: 1px solid rgba(59,130,246,0.25); }
.badge-delete { background: rgba(244,63,94,0.15);  color: #F43F5E; border: 1px solid rgba(244,63,94,0.25); }
.badge-status { background: rgba(139,92,246,0.15); color: #8B5CF6; border: 1px solid rgba(139,92,246,0.25); }
.badge-invoice{ background: rgba(245,158,11,0.15); color: #F59E0B; border: 1px solid rgba(245,158,11,0.25); }
.badge-sync   { background: rgba(20,184,166,0.15); color: #14B8A6; border: 1px solid rgba(20,184,166,0.25); }
.badge-other  { background: rgba(156,163,175,0.15);color: var(--text-muted); border: 1px solid var(--border); }

/* ================================================================
   ACTIVITY LOG TABLE
   ================================================================ */
#auditLogTable td { vertical-align: middle; }
#auditLogTable .cell-muted { color: var(--text-muted); }

/* ================================================================
   INVOICE LINKED BADGE (Task Entry)
   ================================================================ */
.invoice-linked-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(245,158,11,0.12);
  color: #F59E0B;
  border: 1px solid rgba(245,158,11,0.25);
  border-radius: 20px;
  padding: 2px 8px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

/* ================================================================
   GLASSMORPHISM & DEPTH
   ================================================================ */
.topnav, .modal-card, .panel-head, .floating-chip {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
html[data-theme="dark"] .topnav {
  background: rgba(10, 15, 26, 0.85) !important;
}
html[data-theme="dark"] .modal-card {
  background: rgba(30, 41, 59, 0.92) !important;
}
html[data-theme="light"] .topnav {
  background: rgba(255, 255, 255, 0.88) !important;
}
html[data-theme="light"] .modal-card {
  background: rgba(255, 255, 255, 0.95) !important;
}

/* ================================================================
   ACCENT THEME OVERRIDES
   ================================================================ */
html[data-accent="blue"] {
  --primary: #3B82F6;
  --primary-dark: #2563EB;
  --primary-light: rgba(59, 130, 246, 0.14);
}
html[data-accent="green"] {
  --primary: #10B981;
  --primary-dark: #059669;
  --primary-light: rgba(16, 185, 129, 0.14);
}
html[data-accent="violet"] {
  --primary: #8B5CF6;
  --primary-dark: #7C3AED;
  --primary-light: rgba(139, 92, 246, 0.14);
}
html[data-accent="ruby"] {
  --primary: #F43F5E;
  --primary-dark: #E11D48;
  --primary-light: rgba(244, 63, 94, 0.14);
}
html[data-accent="gold"] {
  --primary: #F59E0B;
  --primary-dark: #D97706;
  --primary-light: rgba(245, 158, 11, 0.14);
}
html[data-accent="coral"] {
  --primary: #F97316;
  --primary-dark: #EA580C;
  --primary-light: rgba(249, 115, 22, 0.14);
}
html[data-accent="cyan"] {
  --primary: #06B6D4;
  --primary-dark: #0891B2;
  --primary-light: rgba(6, 182, 212, 0.14);
}

/* Border Radius Presets */
html[data-radius="sharp"] {
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
}
html[data-radius="modern"] {
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
}
html[data-radius="smooth"] {
  --radius-xs: 6px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
}

/* Theme Preset Overrides */
html[data-preset="royal-sapphire"] {
  --bg: #070D1B;
  --surface: #131F37;
  --surface-alt: #0D1629;
}
html[data-preset="emerald-practice"] {
  --bg: #061512;
  --surface: #102722;
  --surface-alt: #0B1C18;
}
html[data-preset="obsidian-violet"] {
  --bg: #030508;
  --surface: #10121A;
  --surface-alt: #090B10;
}
html[data-preset="sunset-coral"] {
  --bg: #0D111A;
  --surface: #1A2130;
  --surface-alt: #121724;
}
html[data-preset="neon-cyan"] {
  --bg: #080E14;
  --surface: #101B26;
  --surface-alt: #0A121A;
}

/* Theme accent selector buttons */
.accent-picker {
  display: flex;
  gap: 8px;
  align-items: center;
}
.accent-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s;
}
.accent-dot:hover { transform: scale(1.15); }
.accent-dot.active { border-color: #fff; transform: scale(1.15); box-shadow: 0 0 8px currentColor; }
.accent-dot-gold { background: #F59E0B; color: #F59E0B; }
.accent-dot-blue { background: #3B82F6; color: #3B82F6; }
.accent-dot-green { background: #10B981; color: #10B981; }
.accent-dot-violet { background: #8B5CF6; color: #8B5CF6; }
.accent-dot-ruby { background: #F43F5E; color: #F43F5E; }
.accent-dot-coral { background: #F97316; color: #F97316; }
.accent-dot-cyan { background: #06B6D4; color: #06B6D4; }

/* Theme Studio Cards */
.theme-preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 10px;
}
.theme-preset-card {
  background: var(--surface-alt);
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.theme-preset-card:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.theme-preset-card.active {
  border-color: var(--primary);
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--primary);
}
.theme-card-preview {
  height: 60px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
}
.preview-header {
  height: 14px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 4px;
}
.preview-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.preview-body {
  display: flex;
  gap: 4px;
  flex: 1;
}
.preview-chip {
  flex: 1;
  border-radius: 3px;
}
.theme-card-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary);
}
.theme-card-sub {
  font-size: 0.74rem;
  color: var(--text-secondary);
}

/* ================================================================
   HIGH DENSITY / COMPACT TABLE MODE
   ================================================================ */
body.table-compact table.data-table th,
body.table-compact table.data-table td {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  font-size: 0.81rem !important;
}
body.table-compact .row-action-btn {
  width: 26px !important;
  height: 26px !important;
  font-size: 0.76rem !important;
}

/* ================================================================
   SPOTLIGHT COMMAND PALETTE (Ctrl + K)
   ================================================================ */
.cmd-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 10vh;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s;
}
.cmd-backdrop.open {
  opacity: 1;
  visibility: visible;
}
.cmd-card {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 620px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 70vh;
  animation: cmdIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes cmdIn {
  from { opacity: 0; transform: scale(0.95) translateY(-10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.cmd-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-alt);
}
.cmd-input-wrap i {
  font-size: 1.15rem;
  color: var(--primary);
}
.cmd-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-primary);
}
.cmd-input::placeholder { color: var(--text-faint); }
.cmd-results {
  flex: 1;
  overflow-y: auto;
  padding: 10px 0;
}
.cmd-group-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  padding: 8px 18px 4px;
}
.cmd-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 18px;
  cursor: pointer;
  transition: background 0.12s;
  color: var(--text-primary);
  font-size: 0.88rem;
}
.cmd-item-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cmd-item-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: var(--primary-light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}
.cmd-item:hover, .cmd-item.selected {
  background: var(--primary-light);
  color: var(--primary);
}
.cmd-item-badge {
  font-size: 0.72rem;
  background: var(--surface-strong);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 500;
}
.cmd-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 18px;
  border-top: 1px solid var(--border);
  background: var(--surface-alt);
  font-size: 0.74rem;
  color: var(--text-secondary);
}
.cmd-shortcut-chip {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  font-weight: 600;
  font-size: 0.7rem;
  color: var(--text-primary);
}

/* ================================================================
   SKELETON SHIMMER LOADERS
   ================================================================ */
@keyframes shimmer {
  0%   { background-position: -200px 0; }
  100% { background-position: 200px 0; }
}
.skeleton-box, .skeleton-line {
  background: linear-gradient(90deg, var(--surface-alt) 0%, var(--surface-strong) 50%, var(--surface-alt) 100%);
  background-size: 400px 100%;
  animation: shimmer 1.4s infinite linear;
  border-radius: var(--radius-sm);
}
.skeleton-line {
  height: 14px;
  width: 100%;
  margin-bottom: 6px;
}



/* =====================================================================
   SIGN-IN GATE
   Shown only when auth-gate.js finds no signed-in Catalyst user.

   Catalyst renders its own sign-in form as a cross-origin iframe, so its
   insides cannot be styled from here — the generous white space above
   "Sign in" is theirs. What this CAN do is stop the frame being squeezed:
   the SDK sets an inline height that is far too short for its own content,
   which is why the form scrolled inside a small box with the email field
   cut off. Hence !important and a height with room to spare.
   ===================================================================== */

.auth-gate {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg, #0f1117);
  align-items: flex-start;
  justify-content: center;
  padding: 0;
  overflow-y: auto;
}

.auth-gate.open { display: flex; }

body.auth-locked { overflow: hidden; }

.auth-gate-card {
  width: 100%;
  max-width: 460px;
  margin: auto;
  padding: 28px 20px 40px;
}

.auth-gate-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-left: 4px;
}

.auth-gate-logo {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  color: #fff;
  background: var(--accent, #d4a017);
  flex: none;
}

.auth-gate-name {
  font-weight: 700;
  font-size: 16px;
  color: var(--text, #e8eaf0);
  line-height: 1.25;
  letter-spacing: 0.02em;
}

.auth-gate-sub {
  font-size: 12px;
  color: var(--text-muted, #8b93a7);
}

.auth-gate-form {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
}

/*
  A fixed height, because the frame is cross-origin and its content cannot be
  measured — nothing can size this automatically. !important is needed to beat
  the inline height the SDK writes, which is far shorter than its own content
  and was causing the form to scroll with the email field cut off.

  If the form still scrolls, raise this. If there is a white gap below the
  button, lower it. It is the only number that matters here.
*/
.auth-gate-form iframe {
  display: block;
  width: 100% !important;
  height: 500px !important;
  border: 0;
}

/* Short viewports: let the page scroll rather than crushing the form. */
@media (max-height: 640px) {
  .auth-gate { align-items: flex-start; }
  .auth-gate-card { padding-top: 16px; }
}

.auth-gate-error {
  color: var(--danger, #e5484d);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  padding: 60px 24px;
  background: var(--card, #171a23);
  border-radius: 12px;
}

/* =====================================================================
   ROLES
   Interface tidying only — the real enforcement is Catalyst's per-table
   Scopes & Permissions. See js/roles.js.
   ===================================================================== */

.role-hidden { display: none !important; }

.role-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--surface-2, rgba(255, 255, 255, 0.06));
  border: 1px solid var(--border);
  white-space: nowrap;
}

.role-badge:empty { display: none; }

/* Associates cannot delete anything, and cannot edit master data. These rows
   are drawn fresh on every render, so they are gated in CSS rather than by
   attribute. */
body.role-associate .action-delete { display: none !important; }

body.role-associate #firmTable    .action-edit,
body.role-associate #deptTable    .action-edit,
body.role-associate #taskMasterTable    .action-edit,
body.role-associate #subtaskMasterTable .action-edit,
body.role-associate #userTable    .action-edit { display: none !important; }

/* An empty actions column looks broken — collapse it instead. */
body.role-associate .row-actions:empty { display: none; }

/* Signed-in user chip + sign out, top right */
.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 4px 3px 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2, rgba(255, 255, 255, 0.04));
  flex-shrink: 0;
  max-width: 230px;
}

.user-chip-avatar { display: inline-flex; flex: none; }
.user-chip-avatar .avatar { width: 26px; height: 26px; font-size: 0.62rem; }

.user-chip-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}

.user-chip-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-chip-email {
  font-size: 0.66rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-chip-signout {
  border: 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  padding: 5px 7px;
  border-radius: 999px;
  font-size: 0.95rem;
  line-height: 1;
  flex: none;
}

.user-chip-signout:hover {
  background: var(--danger-light, rgba(229, 72, 77, 0.12));
  color: var(--danger, #e5484d);
}

@media (max-width: 900px) {
  .user-chip-text { display: none; }
  .user-chip { max-width: none; }
}

/* =====================================================================
   MOBILE
   The app is table-heavy — the Task Entry table alone has 11 columns,
   which no phone can show. Below 700px each row becomes a stacked card
   with its column name beside each value. responsive.js supplies the
   data-label attributes.
   ===================================================================== */

@media (max-width: 700px) {

  /* ---- Tables become cards ---- */

  .data-table thead { display: none; }

  .data-table,
  .data-table tbody,
  .data-table tr,
  .data-table td { display: block; width: 100%; }

  .data-table tbody tr {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 10px;
  }

  .data-table tbody tr:hover { background: var(--card); }

  .data-table tbody td {
    border: 0;
    padding: 5px 0;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    text-align: right;
    min-height: 0;
  }

  .data-table tbody td::before {
    content: attr(data-label);
    flex: 0 0 40%;
    text-align: left;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
  }

  /* Cells with no heading (the actions column) span the full width. */
  .data-table tbody td.cell-actions {
    justify-content: flex-end;
    padding-top: 10px;
    margin-top: 4px;
    border-top: 1px dashed var(--border);
  }
  .data-table tbody td.cell-actions::before { content: none; }

  /* Empty-state rows should not look like a card of one field. */
  .data-table tbody td[colspan] {
    display: block;
    text-align: center;
  }
  .data-table tbody td[colspan]::before { content: none; }

  .data-table .text-end { text-align: right; }

  /* Row buttons need to be thumb-sized. */
  .row-actions { gap: 10px; }
  .row-action-btn { min-width: 40px; min-height: 40px; }

  /* ---- Modals fill the screen ---- */

  .modal-backdrop-app { padding: 0; align-items: flex-end; }

  .modal-card,
  .modal-card-wide,
  .modal-card-lg {
    max-width: 100%;
    width: 100%;
    max-height: 92vh;
    border-radius: 16px 16px 0 0;
  }

  .modal-card-body { max-height: 70vh; }

  .modal-card-foot {
    position: sticky;
    bottom: 0;
    background: var(--card);
    flex-wrap: wrap;
  }
  .modal-card-foot .btn-pill { flex: 1 1 auto; justify-content: center; }

  /* ---- Header and toolbars ---- */

  .page-header { flex-direction: column; align-items: stretch; gap: 12px; }
  .page-header h1 { font-size: 1.35rem; }
  .page-header-actions { width: 100%; }
  .page-header-actions .btn-pill { flex: 1 1 auto; justify-content: center; }

  .panel-head { flex-wrap: wrap; gap: 8px; }
  .panel-head-wrap { width: 100%; }

  /* ---- Top bar: keep only what is useful on a phone ---- */

  #cmdPaletteTriggerBtn,      /* Ctrl+K means nothing on a touch device */
  #settingsNavBtn span,
  .role-badge { display: none; }

  .theme-toggle span { display: none; }

  .topnav-right { gap: 6px; }

  /* ---- Forms ---- */

  .form-grid, .te-form-grid, .te-view-grid { grid-template-columns: 1fr; }
  .form-control, .form-select { font-size: 16px; } /* stops iOS zooming on focus */

  /* ---- Charts need room to breathe ---- */

  .chart-box { min-height: 240px; }
}

/* Very small phones */
@media (max-width: 380px) {
  .data-table tbody td { flex-direction: column; align-items: stretch; text-align: left; gap: 2px; }
  .data-table tbody td::before { flex: none; }
  .main-content { padding: 12px 12px 60px; }
}

/* A select or input with an action button attached to its right. */
.field-with-action { display: flex; gap: 6px; align-items: stretch; }
.field-with-action .form-select,
.field-with-action .form-control { flex: 1 1 auto; min-width: 0; }

.btn-field-action {
  flex: none;
  width: 38px;
  border: 1px solid var(--border);
  background: var(--surface-2, rgba(255,255,255,0.04));
  color: var(--primary);
  border-radius: var(--radius-sm, 8px);
  cursor: pointer;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-field-action:hover { background: var(--primary-light); border-color: var(--primary); }

/* Work Status badges added alongside the original three. */
.badge-status.badge-notrequired {
  background: rgba(148, 163, 184, 0.14);
  color: var(--text-muted);
  border: 1px solid rgba(148, 163, 184, 0.25);
}
.badge-status.badge-waiting {
  background: rgba(245, 158, 11, 0.14);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

/* Invoice builder */
.nudge-bar {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
  border-radius: 10px;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: var(--text);
  font-size: 0.85rem;
  line-height: 1.5;
}
.nudge-bar i { color: #f59e0b; margin-top: 2px; }
.nudge-bar-warn { margin-top: 10px; }
.nudge-list {
  margin: 6px 0 8px;
  padding-left: 18px;
  font-size: 0.86rem;
  color: var(--text-secondary);
}
.nudge-list li {
  margin: 3px 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.nudge-list li > span { min-width: 0; }
.nudge-list .link-btn { flex: none; white-space: nowrap; }
.nudge-firm-select { flex: none; width: auto; min-width: 190px; max-width: 260px; padding: 4px 8px; font-size: 0.82rem; }

@media (max-width: 700px) {
  .nudge-list li { flex-direction: column; align-items: stretch; gap: 4px; }
  .nudge-firm-select { max-width: none; width: 100%; }
}
.nudge-actions { margin-top: 8px; }

.inv-lines {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px;

  /* This sits in .modal-card-body, which is a flex column capped at 90vh.
     A scroll container's automatic minimum size is 0, so this was the only
     child that could shrink — it absorbed the entire column's overflow and
     collapsed to a bordered sliver with the text clipped inside it, while
     every other field kept its full height.

     flex-shrink: 0 makes the modal body scroll instead, which is what should
     have been scrolling all along. */
  flex: 0 0 auto;
  min-height: 96px;
  max-height: min(340px, 42vh);
  overflow-y: auto;
}
.inv-lines > .settings-hint { margin: 10px 12px; }

.inv-line {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.inv-line:hover { background: rgba(148, 163, 184, 0.06); }
.inv-line input[type="checkbox"] { flex: none; width: 16px; height: 16px; }

.inv-line-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.inv-line-text .cell-muted { font-size: 0.78rem; }
.inv-line-amount { flex: 0 0 130px; text-align: right; }

.inv-totals { margin-top: 14px; margin-left: auto; max-width: 340px; font-size: 0.9rem; }
.inv-totals > div { display: flex; justify-content: space-between; padding: 5px 0; }
.inv-totals .inv-total-final {
  border-top: 2px solid var(--border);
  margin-top: 6px;
  padding-top: 10px;
  font-weight: 800;
  font-size: 1.05rem;
}

.invoice-draft-stamp {
  text-align: center;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #b91c1c;
  border: 2px dashed #b91c1c;
  padding: 6px;
  margin-bottom: 16px;
}
/* ================================================================
   INVOICE DOCUMENT
   ----------------------------------------------------------------
   The tax invoice built by Invoice.renderDocument() — shown in the
   preview modal and sent to the printer.

   Its markup carried a full set of class names (.invoice-header,
   .invoice-totals, .bank-details, .bill-to, .grand-total …) that had
   no rules behind them at all, so the document printed as one
   unstyled left-aligned column: no ruled table, no two-column head,
   no right-aligned totals.

   Everything is scoped under .invoice-box because several of these
   names are generic (.amount, .clearfix, .firm-name) and must not
   reach the rest of the app.

   Colours are fixed light values, not theme variables: this is a
   document that goes on paper, and it must not follow the dark theme.
   ================================================================ */
.invoice-box {
  max-width: 820px;
  margin: 0 auto;
  padding: 30px 34px;
  background: #fff;
  color: #1a1a1a;
  font-size: 13px;
  line-height: 1.5;
}

.invoice-box .invoice-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding-bottom: 14px;
  border-bottom: 2px solid #1a1a1a;
}
.invoice-box .invoice-header-left { flex: 1 1 auto; min-width: 0; }
.invoice-box .invoice-header-right { flex: 0 0 auto; text-align: right; }
.invoice-box .firm-name { font-size: 19px; font-weight: 800; line-height: 1.25; }
.invoice-box .invoice-title {
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

.invoice-box .invoice-meta { margin: 16px 0 10px; }
.invoice-box .bill-to h3 {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #555;
}

.invoice-box .invoice-table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.invoice-box .invoice-table th,
.invoice-box .invoice-table td {
  border: 1px solid #b3b3b3;
  padding: 7px 9px;
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}
.invoice-box .invoice-table thead th {
  background: #f1f1f1;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.invoice-box .invoice-table th.amount,
.invoice-box .invoice-table td.amount { text-align: right; white-space: nowrap; width: 130px; }
.invoice-box .invoice-table th.num,
.invoice-box .invoice-table td.num { width: 34px; text-align: center; }
/* Shown instead of an empty table body, so a document with nothing on it
   cannot be mistaken for a complete one. */
.invoice-box .invoice-table .invoice-no-lines td {
  text-align: center;
  font-style: italic;
  color: #a11;
}

.invoice-box .clearfix::after { content: ''; display: table; clear: both; }
.invoice-box .invoice-totals { width: 310px; margin-left: auto; margin-top: 12px; }
.invoice-box .invoice-totals table { width: 100%; border-collapse: collapse; }
.invoice-box .invoice-totals th,
.invoice-box .invoice-totals td { padding: 4px 9px; }
.invoice-box .invoice-totals th { text-align: left; font-weight: 600; color: #444; }
.invoice-box .invoice-totals td { text-align: right; white-space: nowrap; }
.invoice-box .invoice-totals .grand-total th,
.invoice-box .invoice-totals .grand-total td {
  border-top: 2px solid #1a1a1a;
  padding-top: 7px;
  font-size: 15px;
  font-weight: 800;
  color: #1a1a1a;
}

.invoice-box .bank-details {
  margin-top: 18px;
  border: 1px solid #cfcfcf;
  padding: 10px 12px;
  display: inline-block;
  min-width: 260px;
}
.invoice-box .bank-details h4 {
  margin: 0 0 5px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #555;
}

/* Firm logo on the document. Capped by height so wide and tall marks both
   sit sensibly next to the firm name rather than dominating the header. */
.invoice-box .invoice-logo {
  max-height: 64px;
  max-width: 240px;
  width: auto;
  height: auto;
  display: block;
  margin-bottom: 8px;
  object-fit: contain;
}

.invoice-box .bank-label { font-weight: 600; margin-bottom: 2px; }
.invoice-box .bank-details-missing { color: #a11; font-style: italic; }

/* Notes, disclaimers and payment terms. Free text the firm typed, so the
   author's own line breaks are preserved and nothing is re-flowed. */
.invoice-box .invoice-notes {
  margin-top: 16px;
  border-top: 1px solid #cfcfcf;
  padding-top: 10px;
}
.invoice-box .invoice-notes h4 {
  margin: 0 0 5px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #555;
}
.invoice-box .invoice-notes-body {
  white-space: pre-line;
  font-size: 12px;
  line-height: 1.55;
  color: #333;
}

.invoice-box .invoice-sign { margin-top: 46px; padding-top: 18px; text-align: right; }
.invoice-box .invoice-sign-line { margin-top: 38px; color: #777; }

/* ---- Firm modal: logo picker and bank-account repeater ---------------- */
.firm-logo-row { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.firm-logo-preview {
  flex: 0 0 auto;
  width: 132px;
  height: 76px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
  overflow: hidden;
}
.firm-logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.firm-logo-empty { font-size: 0.75rem; color: var(--text-muted); }
.firm-logo-actions { flex: 1 1 220px; display: flex; flex-direction: column; gap: 6px; }
.firm-logo-buttons { display: flex; gap: 8px; flex-wrap: wrap; }

.firm-bank-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.firm-bank-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  background: var(--bg-secondary);
}
.firm-bank-grid {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.firm-bank-side {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-top: 22px;
}
.firm-bank-default { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; white-space: nowrap; cursor: pointer; }
.firm-bank-remove { color: var(--danger, #e5484d); }
.firm-bank-empty { margin: 0 0 10px; }

@media (max-width: 700px) {
  .firm-bank-row { flex-direction: column; }
  .firm-bank-side { flex-direction: row; padding-top: 0; align-self: flex-end; }
}

/* A record whose stored document could not be parsed. Loud on purpose —
   it previously rendered as an ordinary blank row. */
.row-corrupt td { background: rgba(229, 72, 77, 0.07); color: var(--danger, #e5484d); }
.row-corrupt .cell-muted { color: var(--text-muted); font-size: 0.8em; margin-top: 2px; }

/* Inline text button used in field hints. */
.link-btn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--primary);
  cursor: pointer;
  text-decoration: underline;
}
.link-btn:hover { opacity: 0.8; }

.invoice-words { margin: 18px 0; font-size: 0.9em; clear: both; }
.invoice-table th.num, .invoice-table td.num { width: 34px; text-align: center; }

@media (max-width: 700px) {
  .inv-line { flex-wrap: wrap; }
  .inv-line-amount { flex: 1 1 100%; }
  .inv-totals { max-width: none; }
}
.inv-totals .inv-over { color: var(--danger, #e5484d); }

/* Receipt allocation rows: allocate + TDS side by side */
.rcpt-alloc-pair { display: flex; gap: 8px; flex: none; }
.rcpt-alloc-cell { display: flex; flex-direction: column; gap: 2px; width: 110px; }
.rcpt-alloc-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}
.rcpt-alloc-cell .form-control { text-align: right; }

@media (max-width: 700px) {
  .rcpt-alloc-pair { width: 100%; }
  .rcpt-alloc-cell { flex: 1 1 0; width: auto; }
}

/* Receipt allocation rows */
.rcpt-row {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.rcpt-row:last-child { border-bottom: 0; }

.rcpt-row-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.rcpt-row-head .cell-muted { font-size: 0.78rem; }
.rcpt-row-due { margin-left: auto; font-weight: 700; font-size: 0.85rem; }

.rcpt-row-inputs { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }

.rcpt-alloc-cell { display: flex; flex-direction: column; gap: 3px; width: 130px; }
.rcpt-alloc-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}
.rcpt-alloc-cell .form-control { text-align: right; }

.rcpt-fill-tds { font-size: 0.72rem; padding: 6px 10px; white-space: nowrap; }

.rcpt-row-status { font-size: 0.78rem; font-weight: 600; margin-left: auto; }
.rcpt-row-status.is-full { color: var(--success, #10b981); }
.rcpt-row-status.is-part { color: var(--text-muted); }
.rcpt-row-status.is-over { color: var(--danger, #e5484d); }

@media (max-width: 700px) {
  .rcpt-alloc-cell { flex: 1 1 0; width: auto; }
  .rcpt-fill-tds { flex: 1 1 100%; }
  .rcpt-row-status { margin-left: 0; flex: 1 1 100%; }
}

/* Consolidated invoice builder: one section per firm */
.inv-firm-group { border-bottom: 1px solid var(--border); padding-bottom: 6px; margin-bottom: 6px; }
.inv-firm-group:last-child { border-bottom: 0; margin-bottom: 0; }

.inv-firm-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  background: rgba(148, 163, 184, 0.07);
  border-radius: 8px;
  margin-bottom: 4px;
}
.inv-firm-discount { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.inv-firm-discount span { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; color: var(--text-muted); }
.inv-firm-disc { width: 110px; text-align: right; }

/* Each tax invoice starts on its own sheet when printed. */
.invoice-page-break { break-after: page; page-break-after: always; height: 0; }

@media (max-width: 700px) {
  .inv-firm-head { flex-wrap: wrap; }
  .inv-firm-discount { margin-left: 0; width: 100%; }
  .inv-firm-disc { flex: 1 1 auto; width: auto; }
}

/* =====================================================================
   FITTING WIDE TABLES
   The quick-view modals carry 8-column tables, and several put filter
   dropdowns inside the header row. At 960px that overflowed and scrolled
   sideways, cutting the Client column off the left edge. Widen the modal,
   let cells wrap, and shrink the in-header controls so it fits instead.
   ===================================================================== */

.modal-card-lg { max-width: min(1240px, 96vw); width: 96%; }

.modal-card-body .data-table { font-size: 0.8rem; }

.modal-card-body .data-table thead th {
  padding: 0 8px 8px;
  white-space: normal;   /* headers may wrap onto two lines */
  vertical-align: bottom;
}

.modal-card-body .data-table tbody td {
  padding: 9px 8px;
  overflow-wrap: break-word;
}

/* Filter controls live inside some header rows — keep them compact. */
.modal-card-body .data-table thead select,
.modal-card-body .data-table thead .form-select {
  width: auto;
  max-width: 130px;
  font-size: 0.75rem;
  padding: 4px 22px 4px 8px;
  height: auto;
}

/* Numbers, dates and badges should still stay on one line. */
.modal-card-body .data-table .mono-figure,
.modal-card-body .data-table .text-end,
.modal-card-body .data-table .badge-status { white-space: nowrap; }

/* The actions column never needs to grow. */
.modal-card-body .data-table td:last-child,
.modal-card-body .data-table th:last-child { width: 1%; white-space: nowrap; }

/* Assignee chips were forcing width via the avatar + full name. */
.modal-card-body .assignee { flex-wrap: wrap; gap: 6px; }

/* Page tables: only break a word that genuinely cannot fit, never mid-word
   on text that would wrap normally. `anywhere` produced "Acc/ount/ing". */
.table-responsive .data-table tbody td { overflow-wrap: break-word; }

/* =====================================================================
   DASHBOARD LAYOUT
   The panels sat in fixed Bootstrap rows, so a 260px chart paired with a
   variable-height table left a hole beside the shorter one. Collapsing the
   rows with `display: contents` lifts every panel into one masonry column
   flow, which packs them tightly whatever their heights.
   ===================================================================== */

@media (min-width: 992px) {
  #page-dashboard .charts-row { display: contents; }

  #page-dashboard .dash-flow {
    columns: 2;
    column-gap: 16px;
  }

  #page-dashboard .charts-row > [class*="col-"] {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    display: block;
    width: 100%;
    max-width: 100%;
    flex: none;
    padding: 0;
    margin-bottom: 16px;
  }
}

/* Below that it is a single column anyway, so the rows can behave normally. */
@media (max-width: 991px) {
  #page-dashboard .charts-row > [class*="col-"] { margin-bottom: 16px; }
}

.nudge-bar.is-severe {
  background: rgba(229, 72, 77, 0.1);
  border-color: rgba(229, 72, 77, 0.3);
}
.nudge-bar.is-severe i { color: var(--danger, #e5484d); }

/* Recent Tasks sits full width below the column flow — it has eight columns
   and was unreadable squeezed into half the page. */
#page-dashboard .recent-panel { margin-top: 16px; }
#page-dashboard .recent-panel .data-table { font-size: 0.84rem; }
#page-dashboard .recent-panel .data-table td,
#page-dashboard .recent-panel .data-table th { white-space: nowrap; }
#page-dashboard .recent-panel .data-table td.cell-strong,
#page-dashboard .recent-panel .data-table td:nth-child(3) { white-space: normal; }