/* ==========================================================================
   MACE Accounting System -- design tokens

   The palette is taken from the company mark itself, sampled from
   assets/brand/logo-original.png:

       navy   #101040   55%  of the logo   -> primary, navigation, ink
       orange #f08020    4.5%              -> accent, "needs attention"
       sky    #18a0e0    2%                -> secondary / informational
       grey   #505050                      -> wordmark, muted text

   Orange and sky are vivid but light (2.7:1 and 2.9:1 on white), so they are
   used as fills and indicators; their "-ink" variants carry text. Every
   foreground/background pair below is checked to WCAG AA.

   Older token names are kept as aliases so existing page styles re-skin
   automatically instead of needing 20 files edited by hand.
   ========================================================================== */
:root {
  /* --- brand, straight from the logo --- */
  --brand-navy: #101040;
  --brand-navy-700: #161658;
  --brand-navy-600: #1c1c71;
  --brand-navy-500: #242492;
  --brand-navy-050: #eceef6;

  --brand-orange: #f08020;
  --brand-orange-ink: #9f4f0b;
  --brand-orange-050: #fbede1;

  --brand-sky: #18a0e0;
  --brand-sky-ink: #0f658d;
  --brand-sky-050: #d7edf7;

  /* --- neutrals, tinted toward the brand navy rather than pure grey --- */
  --background: #f5f6f9;
  --surface: #ffffff;
  --surface-secondary: #eef0f5;
  --border: #dcdfe9;
  --border-strong: #b9bfd0;
  --text-primary: #12142e;
  --text-secondary: #4a4f68;
  /* Dark enough to clear 4.5:1 on the page ground and the secondary surface,
     not just on white -- muted text carries field labels and hints. */
  --text-muted: #64697d;

  /* --- roles --- */
  --primary: var(--brand-navy-600);
  --primary-hover: var(--brand-navy-700);
  --secondary: var(--text-secondary);
  --accent: var(--brand-orange);
  --info: var(--brand-sky-ink);

  /* --- accounting semantics -----------------------------------------------
     Ordinary money is ink, not colour. Colour is reserved for the abnormal:
     a credit balance, an unbalanced entry, an overdue filing. --- */
  --amount: var(--text-primary);
  --debit: var(--text-primary);
  --credit: #b3261e;
  --negative: #b3261e;

  --tint-success: #e6f2ea;
  --tint-success-border: #b7d8c4;
  --tint-danger: #fdecea;
  --tint-danger-border: #f3c5c0;
  --tint-warning: var(--brand-orange-050);
  --tint-warning-border: #eec6a4;

  --success: #1d6b45;
  --warning: var(--brand-orange-ink);
  --danger: #b3261e;

  /* --- type scale (1.20 minor third, 14px base) --- */
  --text-2xs: 0.6875rem;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;

  /* --- spacing scale --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  /* --- radius: three steps and a pill --- */
  --radius-sm: 3px;
  --radius: 6px;
  --radius-lg: 10px;
  --radius-pill: 9999px;

  /* --- elevation: three steps, tinted navy so shadows belong to the palette --- */
  --shadow-sm: 0 1px 2px 0 rgb(16 16 64 / 0.06);
  --shadow: 0 1px 3px 0 rgb(16 16 64 / 0.10), 0 1px 2px -1px rgb(16 16 64 / 0.08);
  --shadow-lg: 0 8px 20px -6px rgb(16 16 64 / 0.18);

  /* --- compatibility aliases (do not add new uses) ---
     The --color-* set below was referenced by templates before these existed.
     Three of them were missing, and an undefined custom property invalidates
     the whole declaration at computed-value time: --color-secondary took the
     .book-badge gradient with it, leaving white text on a white surface. */
  --primary-light: var(--brand-navy-050);
  --surface-alt: var(--surface-secondary);
  --color-primary: var(--primary);
  --color-primary-light: var(--primary-light);
  --color-secondary: var(--secondary);
  --color-primary-hover: var(--primary-hover);
  --color-error: var(--danger);
  --color-surface: var(--surface);
  --color-border: var(--border);
  --color-text-primary: var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-text-muted: var(--text-muted);
}

* {
  box-sizing: border-box;
}

body {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  line-height: 1.5;
  margin: 0;
  background: var(--background);
  color: var(--text-primary);
  font-size: var(--text-base);
}

/* Alert Styles */
.alert {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  margin-bottom: 1rem;
  border-radius: var(--radius);
  border: 1px solid;
  font-weight: 500;
}

.alert i {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
}

.alert-error {
  background-color: var(--tint-danger);
  border-color: var(--tint-danger-border);
  color: var(--danger);
}

.alert-warning {
  background-color: var(--brand-orange-050);
  border-color: var(--tint-warning-border);
  color: var(--warning);
}

.alert-success {
  background-color: var(--tint-success);
  border-color: var(--tint-success-border);
  color: var(--success);
}

.alert-info {
  background-color: var(--brand-sky-050);
  border-color: #a8d4ea;
  color: var(--info);
}

/* Visible only to screen readers. Used by table captions and the labels on
   icon-only controls, so it belongs here rather than in three page styles. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link for keyboard users */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--surface);
  color: var(--primary);
  font-weight: 600;
  border-radius: 0 0 var(--radius) 0;
}

.skip-link:focus {
  left: 0;
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Modern Navbar */
.navbar {
  background: var(--brand-navy);
  border-bottom: 3px solid var(--accent);
  color: white;
  padding: var(--space-3) var(--space-6);
  box-shadow: var(--shadow);
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.navbar .brand {
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.025em;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Logo Container and Sizing */
.brand-logo-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.brand-logo {
  height: 42px;
  width: auto;
  max-width: 120px;
  min-width: 40px;
  object-fit: contain;
  border-radius: var(--radius);
  background: white;
  padding: 6px 10px;
  box-shadow: var(--shadow);
  transition: all 0.3s ease;
  display: block;
}

.brand-logo:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow);
}

.brand-logo-fallback {
  width: 36px;
  height: 36px;
  color: white;
  flex-shrink: 0;
}

.brand-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  line-height: 1.2;
}

.company-name {
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: white;
  white-space: nowrap;
}

.system-subtitle {
  font-size: var(--text-xs);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Responsive Logo Sizing */
@media (max-width: 768px) {
  .brand-logo {
    height: 38px;
    max-width: 100px;
    padding: 5px 8px;
  }
  
  .company-name {
    font-size: var(--text-md);
  }
  
  .system-subtitle {
    font-size: var(--text-2xs);
  }
}

@media (max-width: 480px) {
  .brand-logo {
    height: 34px;
    max-width: 80px;
    padding: 4px 6px;
  }
  
  .navbar .brand {
    gap: var(--space-2);
  }
}

.navbar .links {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
  flex: 1;
}

.navbar a {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  transition: all 0.15s ease-in-out;
  font-weight: 500;
  font-size: var(--text-base);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.navbar a:hover {
  background: rgba(255, 255, 255, 0.15);
  color: white;
  transform: translateY(-1px);
}

/* Active Navigation State */
.navbar a.active {
  background: rgba(255, 255, 255, 0.12);
  color: white;
  font-weight: 600;
  box-shadow: inset 0 -3px 0 0 var(--accent);
}

.navbar a.active i {
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.6));
}

/* User Info in Navbar */
.nav-user {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-left: auto;
  padding-left: 1rem;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.user-info {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: rgba(255, 255, 255, 0.95);
  font-size: var(--text-base);
  font-weight: 500;
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
}

.user-info i {
  width: 16px;
  height: 16px;
}

.logout-link {
  color: rgba(255, 255, 255, 0.9) !important;
  background: rgba(255, 255, 255, 0.1);
}

.logout-link:hover {
  background: rgba(179, 38, 30, 0.3) !important;
  color: white !important;
}

.nav-admin {
  background: var(--brand-sky);
  color: var(--brand-navy) !important;
  font-weight: 600;
}

.nav-admin:hover {
  background: #38b4ec;
  transform: translateY(-1px);
}

/* Dropdown Navigation -------------------------------------------------------
   Click-driven rather than hover-driven: a hover menu is unreachable by
   keyboard and unusable by touch. */
.nav-dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-trigger {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  color: rgba(255, 255, 255, 0.9);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-base);
  font-weight: 500;
  transition: background 0.15s ease-in-out;
}

.dropdown-trigger:hover {
  background: rgba(255, 255, 255, 0.15);
  color: white;
}

.dropdown-trigger.active {
  background: rgba(255, 255, 255, 0.12);
  color: white;
  font-weight: 600;
  box-shadow: inset 0 -3px 0 0 var(--accent);
}

.dropdown-trigger .chevron {
  width: 14px;
  height: 14px;
  transition: transform 0.2s ease;
}

.nav-dropdown.open .chevron {
  transform: rotate(180deg);
}

.nav-dropdown .dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: var(--space-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  min-width: 17rem;
  overflow: hidden;
  z-index: 100;
}

.nav-dropdown.open .dropdown-menu {
  display: block;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  color: var(--text-primary) !important;
  text-decoration: none;
  transition: background 0.15s ease;
  border-bottom: 1px solid var(--border);
}

.dropdown-item:last-child {
  border-bottom: none;
}

.dropdown-item:hover {
  background: var(--brand-navy-050);
  transform: none;
}

.dropdown-item i {
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.dropdown-item:hover i {
  color: var(--primary);
}

.dropdown-item span {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.dropdown-item strong {
  font-weight: 600;
  font-size: var(--text-base);
}

.dropdown-item small {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

/* Container */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-6);
}

/* Modern Cards */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-5);
  margin-top: 2rem;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  text-decoration: none;
  color: var(--text-primary);
  font-weight: 600;
  transition: all 0.2s ease-in-out;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform 0.3s ease-in-out;
}

.card:hover::before {
  transform: scaleX(1);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary);
}

/* Modern Tables */
/* One table treatment for the whole app. The denser, quieter version proved
   itself on the compliance worklist: a small uppercase muted header recedes so
   the figures read first, and tighter cells put more rows on screen -- which is
   what every table here is for. Radius and shadow belong to .table-wrapper, so
   the table itself stays flat and can nest anywhere. */
.table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  margin: 0;
}

.table th {
  background: var(--surface-secondary);
  padding: var(--space-2) var(--space-3);
  text-align: left;
  font-weight: 600;
  color: var(--text-muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}

.table td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.table tbody tr:last-child td { border-bottom: none; }

.table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.table.compact th,
.table.compact td {
  padding: var(--space-3);
  font-size: var(--text-base);
}

/* Modern Forms */
.form {
  background: var(--surface);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-5);
  margin-bottom: 1.5rem;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
  .grid-3 {
    grid-template-columns: 1fr;
  }
}

label {
  display: block;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  font-size: var(--text-base);
}

input[type="text"],
input[type="date"],
input[type="number"],
select,
textarea {
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--text-base);
  transition: all 0.15s ease-in-out;
  background: var(--surface);
  color: var(--text-primary);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
}

/* Modern Buttons
   Two class names reach this: .button (the BIR, books and dashboard
   templates) and .btn (login, error and admin). They used to be declared
   separately and had drifted -- different hover lift, different
   justify-content -- so the same control looked different depending on which
   page it sat on. One rule set now serves both, and each modifier lists both
   spellings, so the two cannot come apart again. */
.button,
.btn,
button[type="submit"],
input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.75rem 1.5rem;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: var(--radius);
  font-weight: 500;
  font-size: var(--text-base);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  box-shadow: var(--shadow-sm);
}

.button:hover,
.btn:hover,
button[type="submit"]:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.button.secondary,
.btn-secondary {
  background: var(--secondary);
  color: white;
}

.button.secondary:hover,
.btn-secondary:hover {
  background: var(--text-secondary);
}

.button.success,
.btn-success {
  background: var(--success);
}

.button.warning,
.btn-warning {
  background: var(--warning);
}

.button.danger,
.btn-danger {
  background: var(--danger);
}

.button.small,
.btn-sm {
  padding: 0.4rem 0.75rem;
  font-size: var(--text-sm);
}

/* Filters */
/* Filter panel. The bordered box is the constant; whether it holds a single
   row of inputs or a collapsible grid is what varies between tabs. */
.filters {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin: 0 0 var(--space-5);
  overflow: hidden;
}

/* A plain row of controls with no panel header */
.filters > form:only-child,
.filters.filters-inline {
  display: flex;
  gap: var(--space-4);
  align-items: end;
  flex-wrap: wrap;
  padding: var(--space-4);
}

.filters label {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.filters input {
  min-width: 140px;
}

/* Actions */
.actions {
  display: flex;
  gap: var(--space-4);
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

/* Utilities */
.muted {
  color: var(--text-muted);
  font-size: var(--text-base);
}

.text-center {
  text-align: center;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mt-4 {
  margin-top: 1rem;
}

/* Page Headers */
h1, h2, h3 {
  color: var(--text-primary);
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: 1rem;
}

h1 {
  font-size: var(--text-2xl);
}

h2 {
  font-size: var(--text-xl);
}

h3 {
  font-size: var(--text-lg);
  color: var(--text-secondary);
}

/* Status indicators */
.status {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 500;
}

.status.success {
  background: rgba(29, 107, 69, 0.1);
  color: var(--success);
}

.status.warning {
  background: rgba(240, 128, 32, 0.1);
  color: var(--warning);
}

.status.danger {
  background: rgba(179, 38, 30, 0.1);
  color: var(--danger);
}

/* Loading states */
.loading {
  opacity: 0.6;
  pointer-events: none;
}

/* ==========================================================================
   Shared page components
   These were previously duplicated inside individual template <style> blocks
   (or never defined at all, which is why several pages rendered unstyled).
   Page-level styles still override anything they redeclare.
   ========================================================================== */

/* Text utilities -- .text-right was used 200+ times without ever being defined */
.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

.text-secondary {
  color: var(--text-secondary);
}

.text-success {
  color: var(--success);
}

.text-danger {
  color: var(--danger);
}

.text-primary {
  color: var(--primary);
}

/* Money columns line up only with tabular figures */
.text-right,
.num,
.amount,
.data-table td.text-right,
.table .num {
  font-variant-numeric: tabular-nums;
}

/* Page headers */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-6);
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.page-title h1, .page-title h2 {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: 0.5rem;
}

.page-actions {
  display: flex;
  gap: var(--space-3);
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* Report shell used by every BIR form and listing */
.report-container {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.report-section {
  padding: var(--space-5);
  border-bottom: 1px solid var(--border);
}

.report-section:last-child {
  border-bottom: none;
}

.report-section h3 {
  font-size: var(--text-lg);
  margin: 0 0 1rem;
  color: var(--text-primary);
}

.period-selector {
  padding: 1rem 1.5rem;
  background: var(--surface-secondary);
  border-bottom: 1px solid var(--border);
}

.period-form {
  display: flex;
  gap: var(--space-4);
  align-items: end;
  flex-wrap: wrap;
}

.period-form label {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: 0;
}

.period-form select {
  min-width: 10rem;
}

.report-notes {
  padding: var(--space-5);
  background: var(--surface-secondary);
  border-top: 1px solid var(--border);
  font-size: var(--text-base);
  color: var(--text-secondary);
}

.report-notes p {
  margin: 0 0 0.5rem;
}

.report-notes p:last-child {
  margin-bottom: 0;
}

/* Report tables carry a second class name for historical reasons; they are the
   same component, so they share one definition. */
.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  margin: 0;
}

.data-table th {
  background: var(--surface-secondary);
  padding: var(--space-2) var(--space-3);
  text-align: left;
  font-weight: 600;
  color: var(--text-muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}

.data-table td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

/* Row headers. On a BIR return the line-item name ("Sales/Revenues/Receipts")
   is a header for the figure beside it, and marking it up as one is what lets
   a screen reader announce the two together. Visually it must still read as a
   body cell -- the rule above styles column headers, and inheriting it would
   set every line item in tiny uppercase grey on a fill. */
.data-table th[scope="row"],
.table th[scope="row"] {
  background: transparent;
  padding: var(--space-3);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  text-align: left;
  font-size: var(--text-base);
  font-weight: 400;
  color: var(--text-primary);
  text-transform: none;
  letter-spacing: normal;
  white-space: normal;
}

.data-table tbody tr:hover,
.table tbody tr:hover {
  background: var(--brand-navy-050);
}

.data-table tfoot td,
.data-table tfoot th[scope="row"],
.data-table .total-row td,
.data-table .total-row th[scope="row"],
.table tfoot td,
.table tfoot th[scope="row"],
.table .total-row td,
.table .total-row th[scope="row"],
.table .subtotal-row td {
  background: var(--surface-secondary);
  border-top: 1px solid var(--border-strong);
  border-bottom: none;
  font-weight: 700;
}

/* Wide tables scroll inside their own container instead of breaking the page */
.table-wrapper {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow-x: auto;
}

.table-wrapper .table { border-radius: inherit; }

.report-section .data-table,
.report-container .data-table {
  min-width: 100%;
}

/* An action the current user is not allowed to take is explained in place
   rather than offered and then refused. */
.menu-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.4;
  max-width: 15rem;
}

.menu-note i { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; }

.page-message {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--tint-danger);
  border-left: 3px solid var(--danger);
  border-radius: var(--radius);
  color: var(--danger);
  font-weight: 500;
}

/* Row overflow menu --------------------------------------------------------
   Used by any table whose rows have secondary actions. The row itself is the
   link; this holds everything else, so a long table does not carry three
   visible buttons per line. */
.row-actions-cell { width: 3rem; text-align: right; }

.row-menu { position: relative; display: inline-block; }

.row-menu-trigger {
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: var(--space-1) var(--space-2);
  cursor: pointer;
  color: var(--text-muted);
  line-height: 1;
}

tr:hover .row-menu-trigger,
.row-menu-trigger:focus-visible,
.row-menu.open .row-menu-trigger {
  border-color: var(--border);
  color: var(--text-primary);
}

.row-menu-items {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 20;
  min-width: 12rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.row-menu.open .row-menu-items { display: block; }

.row-menu-items a,
.row-menu-items button {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  color: var(--text-primary);
  text-decoration: none;
  font: inherit;
  font-size: var(--text-base);
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}

.row-menu-items a:hover,
.row-menu-items button:hover { background: var(--brand-navy-050); }

.row-menu-items i { width: 15px; height: 15px; color: var(--text-muted); flex-shrink: 0; }

.row-menu-items .is-primary-action { color: var(--success); font-weight: 600; }

/* An administrator checking their own work is permitted, but it should never
   look like an ordinary review. */
.row-menu-items .is-override {
  color: var(--warning);
  font-weight: 600;
  background: var(--tint-warning);
}

.row-menu-items .is-override i { color: var(--warning); }
.row-menu-items .is-override:hover { background: #f6e0cb; }
.row-menu-items .is-primary-action i { color: var(--success); }

/* The row's first cell is the link to the record */
.row-link {
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 600;
}

tr:hover .row-link { color: var(--primary); text-decoration: underline; }

.date-cell { white-space: nowrap; }
.seq-cell { font-variant-numeric: tabular-nums; color: var(--text-muted); }
.amount-cell { font-variant-numeric: tabular-nums; font-weight: 600; }

/* Empty states */
.empty-state {
  text-align: center;
  padding: 4rem 2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.empty-icon {
  width: 4rem;
  height: 4rem;
  background: var(--surface-secondary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: var(--text-muted);
}

.empty-state h3 {
  margin-bottom: 0.5rem;
  color: var(--text-primary);
}

.empty-state p {
  margin: 0 auto 2rem;
  max-width: 400px;
}

/* Export dropdown -- page styles animate opacity/visibility, so the menu
   must not be display:none. See .nav-dropdown .dropdown-menu above. */
.export-dropdown {
  position: relative;
  display: inline-block;
}

.export-dropdown .dropdown-menu {
  display: block;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  min-width: 180px;
  overflow: hidden;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.export-dropdown .dropdown-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Visible focus for every interactive element */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.navbar a:focus-visible,
.navbar button:focus-visible {
  outline-color: white;
}

/* Mobile navigation toggle */
.nav-toggle {
  display: none;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border: none;
  border-radius: var(--radius);
  font: inherit;
  font-size: var(--text-base);
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   BIR compliance
   Lifted out of bir/dashboard.html, which carried 480 lines of inline CSS in
   two <style> blocks. Status badges and the obligation table are shared
   vocabulary, so they belong here with the rest of the components.
   ========================================================================== */

/* --- filter chips: the summary counts double as the filter ---------------- */
.compliance-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.filter-chip {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--text-primary);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.filter-chip:hover {
  border-color: var(--border-strong);
}

.filter-chip .chip-count {
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.filter-chip .chip-label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

/* Colour only where it means something: overdue is a problem, due-soon is a
   nudge. Not started and filed are ordinary states and stay neutral. */
.filter-chip.overdue .chip-count { color: var(--danger); }
.filter-chip.due-soon .chip-count { color: var(--warning); }
.filter-chip.filed .chip-count { color: var(--success); }

.filter-chip[aria-pressed="true"] {
  border-color: var(--primary);
  background: var(--brand-navy-050);
  box-shadow: inset 0 -3px 0 0 var(--primary);
}

.filter-chip.overdue[aria-pressed="true"] {
  border-color: var(--danger);
  background: var(--tint-danger);
  box-shadow: inset 0 -3px 0 0 var(--danger);
}

.filter-chip.due-soon[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--tint-warning);
  box-shadow: inset 0 -3px 0 0 var(--accent);
}

.section-heading {
  font-size: var(--text-md);
  font-weight: 700;
  margin: 0 0 var(--space-3);
}

/* --- obligation table ----------------------------------------------------- */
/* The worklist is a .table; only its row states are special. */
.obligations tr.is-overdue {
  background: var(--tint-danger);
  box-shadow: inset 3px 0 0 0 var(--danger);
}

.obligations tr.is-overdue:hover { background: #fbe3e0; }

.obligations tr.is-due-soon {
  background: var(--tint-warning);
  box-shadow: inset 3px 0 0 0 var(--accent);
}

.obligations tr.is-filed td { color: var(--text-muted); }

.obligations .empty-row td {
  text-align: center;
  color: var(--text-muted);
  padding: var(--space-6);
}

.ob-form {
  font-weight: 700;
  white-space: nowrap;
}

.ob-form small {
  display: block;
  font-weight: 400;
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: normal;
}

.ob-period { white-space: nowrap; font-weight: 500; }

.ob-due {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.ob-countdown {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: var(--text-base);
}

.ob-countdown.late { color: var(--danger); }
.ob-countdown.soon { color: var(--warning); }
.ob-countdown.later { color: var(--text-muted); font-weight: 400; }

.ob-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
}

.obligations .empty-row td {
  text-align: center;
  color: var(--text-muted);
  padding: var(--space-6);
}

/* Readiness: whether the books behind a period can actually support the form.
   Neutral when fine; only the states that block work carry colour. */
.readiness {
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}

.readiness.is-ready { color: var(--success); }
.readiness.is-partial { color: var(--warning); }
.readiness.is-blocked { color: var(--text-muted); }

.ob-amount { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.ob-amount .muted { font-weight: 400; }

.section-figure {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-muted);
  margin-left: var(--space-2);
}

/* --- status badges -------------------------------------------------------- */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
  background: var(--surface-secondary);
  color: var(--text-secondary);
  border: 1px solid transparent;
}

.status-badge i { width: 13px; height: 13px; }

.status-badge.filed,
.status-badge.payment-made,
.status-badge.audit-completed,
.status-badge.approved {
  background: var(--tint-success);
  color: var(--success);
}

.status-badge.overdue,
.status-badge.amendment-required {
  background: var(--surface);
  color: var(--danger);
  border-color: var(--tint-danger-border);
}

.status-badge.due-soon,
.status-badge.pending-payment {
  background: var(--tint-warning);
  color: var(--warning);
}

.status-badge.draft,
.status-badge.in-review,
.status-badge.under-audit,
.status-badge.amended {
  background: var(--brand-sky-050);
  color: var(--info);
}

.status-badge.not-started,
.status-badge.closed {
  background: var(--surface-secondary);
  color: var(--text-muted);
}

/* --- icon buttons in table rows ------------------------------------------- */
.btn-icon {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-secondary);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-icon i { width: 15px; height: 15px; }

.btn-icon:hover {
  background: var(--brand-navy-050);
  color: var(--primary);
  border-color: var(--primary);
}

.btn-icon.mark-filed { color: var(--success); border-color: var(--tint-success-border); }
.btn-icon.mark-filed:hover { background: var(--tint-success); border-color: var(--success); }

/* --- secondary "by form" view --------------------------------------------- */
.by-form-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-5) 0 var(--space-3);
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
}

.by-form-toggle i { width: 16px; height: 16px; transition: transform 0.2s ease; }
.by-form-toggle[aria-expanded="true"] i.chevron { transform: rotate(90deg); }

.by-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
  gap: var(--space-4);
  align-items: start;
}

.form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.form-card header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-secondary);
  border-bottom: 1px solid var(--border);
}

.form-card h3 {
  margin: 0;
  font-size: var(--text-md);
  font-weight: 700;
}

.form-card .form-meta {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: capitalize;
}

.form-card .form-note {
  margin: 0;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  background: var(--brand-sky-050);
  border-bottom: 1px solid var(--border);
}

.form-card .compact-periods { margin: 0; }

.form-card .compact-periods td {
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--border);
  font-size: var(--text-base);
}

.form-card .compact-periods tr:last-child td { border-bottom: none; }

@media (max-width: 768px) {
  .compliance-filters { grid-template-columns: repeat(2, 1fr); }
  .obligations .hide-sm { display: none; }
}

/* Responsive design */
@media (max-width: 768px) {
  .container {
    padding: var(--space-4);
  }

  .navbar {
    padding: var(--space-4);
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  .nav-toggle {
    display: inline-flex;
  }

  .navbar .links {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
  }

  .navbar .links.open {
    display: flex;
  }

  .nav-user {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 0.75rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
  }

  .cards {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  
  .filters {
    flex-direction: column;
    align-items: stretch;
  }
  
  .table {
    font-size: var(--text-xs);
  }
  
  .table th,
  .table td {
    padding: var(--space-2);
  }
}