/* ============================================================
   COMPLIANCE PORTAL — portal.css
   Project  : AAA WebFiling — Companies House Admin Panel
   Purpose  : Master stylesheet for all portal pages
   Sections :
     1.  Design Tokens        — colours, spacing, radius, type, layout
     2.  Dark Mode Overrides  — token overrides for dark theme
     3.  Reset & Base         — box-model reset, body, links, tables
     4.  Layout Shell         — sidebar, topbar, page wrapper, footer
     5.  Stat Cards           — KPI grid cards on dashboard
     6.  Cards                — general card component
     7.  Badges               — status badge variants
     8.  Buttons              — primary, secondary, ghost, sm
     9.  Form Controls        — input, select, input-wrap, select-wrap
     10. Page Header          — page title + subtitle block
     11. Data Table           — table container, scroll, th/td modifiers
     12. Filter Bar           — search + filter control strip
     13. Pagination           — prev/next page controls
     14. To-Do List           — deadline action items
     15. Log Statuses         — sync/activity log colour labels
     16. Inline Link          — small icon+text hyperlinks
     17. Company Details Page — company sidebar, header, layout, people
     18. Login Page           — split-screen login layout
     19. Responsive           — mobile sidebar, breakpoints, overrides
     20. Utilities            — .hidden and misc helpers
   ============================================================ */


/* ============================================================
   1. DESIGN TOKENS
   Core CSS custom properties. Every size, colour, and spacing
   value in the portal references one of these tokens — never
   hardcoded pixel values or hex codes anywhere else.
   ============================================================ */
:root {

  /* ----------------------------------------------------------
     Brand colours — primary navy blue palette
     Used for sidebar active state, buttons, headings, links
     ---------------------------------------------------------- */
  --primary: #001e40;
  /* Darkest navy — hover state */
  --primary-container: #003366;
  /* Mid navy — buttons, active links */
  --on-primary: #ffffff;
  /* Text/icons on navy backgrounds */
  --on-primary-container: #799dd6;
  /* Muted blue — secondary on-navy text */
  --primary-fixed: #d5e3ff;
  /* Light blue tint */
  --primary-fixed-dim: #a7c8ff;
  /* Slightly darker light blue tint */
  --on-primary-fixed: #001b3c;
  /* Dark text on light blue */
  --on-primary-fixed-variant: #1f477b;
  /* Mid-dark text on light blue */

  /* ----------------------------------------------------------
     Secondary colours — slate/blue-grey palette
     Used for muted text, secondary buttons, labels
     ---------------------------------------------------------- */
  --secondary: #545f72;
  /* Mid slate — muted body text */
  --secondary-container: #d5e0f7;
  /* Light blue-grey — secondary button bg */
  --secondary-fixed: #d8e3fa;
  /* Slightly brighter secondary bg */
  --secondary-fixed-dim: #bcc7dd;
  /* Dimmer secondary bg — hover state */
  --on-secondary: #ffffff;
  /* Text on secondary backgrounds */
  --on-secondary-container: #586377;
  /* Body text on secondary container */
  --on-secondary-fixed: #111c2c;
  /* Dark text on secondary fixed */
  --on-secondary-fixed-variant: #3c475a;
  /* Medium text on secondary fixed */

  /* ----------------------------------------------------------
     Error/danger colours
     Used for error messages, danger badges, destructive actions
     ---------------------------------------------------------- */
  --error: #ba1a1a;
  /* Error red — text/icon */
  --error-container: #ffdad6;
  /* Light red — error bg */
  --on-error: #ffffff;
  /* Text on error backgrounds */
  --on-error-container: #93000a;
  /* Dark red — text on error container */

  /* ----------------------------------------------------------
     Surface & background colours — layered depth system
     Each step is slightly darker/tinted to create visual depth.
     Use in order: background → surface → container-low →
     container → container-high → container-highest
     ---------------------------------------------------------- */
  --background: #f9f9ff;
  /* Page background */
  --on-background: #161c27;
  /* Default body text colour */
  --surface: #f9f9ff;
  /* Base surface (same as bg) */
  --surface-dim: #d4daea;
  /* Dimmed surface — disabled areas */
  --surface-bright: #f9f9ff;
  /* Bright surface — input backgrounds */
  --surface-container-lowest: #ffffff;
  /* Cards, topbar, sidebar bg */
  --surface-container-low: #f1f3ff;
  /* Slightly off-white containers */
  --surface-container: #e8eeff;
  /* Table header bg */
  --surface-container-high: #e3e8f9;
  /* Heavier container bg */
  --surface-container-highest: #dde2f3;
  /* Heaviest surface — dividers */
  --surface-variant: #dde2f3;
  /* Surface alternative — chips, tags */
  --on-surface: #161c27;
  /* Primary text on any surface */
  --on-surface-variant: #43474f;
  /* Secondary/muted text on surfaces */
  --outline: #737780;
  /* Border/divider on light surface */
  --outline-variant: #c3c6d1;
  /* Lighter border — card borders */
  --inverse-surface: #2a303d;
  /* Dark surface — tooltips, snackbars */
  --inverse-on-surface: #ecf0ff;
  /* Light text on inverse dark surface */
  --inverse-primary: #a7c8ff;
  /* Primary accent on dark bg */

  /* ----------------------------------------------------------
     Spacing — 4px grid
     Always use these tokens for margin, padding, and gap.
     Never write arbitrary px values.
     ---------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ----------------------------------------------------------
     Border radius
     ---------------------------------------------------------- */
  --radius-sm: 2px;
  /* Tight — badges, table cells */
  --radius-md: 4px;
  /* Standard — buttons, inputs */
  --radius-lg: 8px;
  /* Cards, panels */
  --radius-xl: 12px;
  /* Large cards, modals */
  --radius-full: 9999px;
  /* Pills, avatars */

  /* ----------------------------------------------------------
     Typography scale
     ---------------------------------------------------------- */
  --font-main: "Public Sans", sans-serif;
  --text-h1: 40px;
  /* Page-level hero title */
  --text-h2: 32px;
  /* Section heading / stat value */
  --text-h3: 24px;
  /* Card title */
  --text-body-lg: 18px;
  /* Page subtitle / intro text */
  --text-body-md: 16px;
  /* Default body text */
  --text-body-sm: 14px;
  /* Table cells, nav links, labels */
  --text-label-bold: 14px;
  /* Button labels, form labels */
  --text-label-caps: 12px;
  /* Uppercase badge / stat label */

  /* ----------------------------------------------------------
     Layout dimensions
     ---------------------------------------------------------- */
  --sidebar-width: 256px;
  /* Left navigation sidebar */
  --topbar-height: 64px;
  /* Sticky top bar */
  --max-width: 1280px;
  /* Max page content width */

  /* ----------------------------------------------------------
     Global transition speed
     ---------------------------------------------------------- */
  --transition: 0.15s ease;
}


/* ============================================================
   2. DARK MODE OVERRIDES
   Applied when <body class="dark"> is set.
   Only tokens that change in dark mode are listed here —
   everything else inherits from :root above.
   ============================================================ */
body.dark {
  --primary: #60a5fa;
  --primary-container: #1d4ed8;
  --on-primary: #ffffff;
  --secondary: #94a3b8;
  --background: #0f172a;
  --surface: #0b1220;
  --surface-bright: #1e293b;
  --surface-container-lowest: #111827;
  --surface-container-low: #1f2937;
  --surface-container: #1e293b;
  --surface-container-high: #1e293b;
  --surface-container-highest: #334155;
  --surface-variant: #334155;
  --on-background: #e5e7eb;
  --on-surface: #e5e7eb;
  --on-surface-variant: #94a3b8;
  --outline: #475569;
  --outline-variant: #374151;
}


/* ============================================================
   3. RESET & BASE
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  min-height: 100%;
}

body {
  display: flex;
  min-height: 100vh;
  overflow: hidden;
  font-family: var(--font-main);
  font-size: var(--text-body-md);
  line-height: 1.5;
  background: var(--background);
  color: var(--on-background);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

img {
  display: block;
  max-width: 100%;
}

table {
  border-collapse: collapse;
  width: 100%;
}

.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  user-select: none;
}


/* ============================================================
   4. LAYOUT SHELL
   ============================================================ */

/* --- Sidebar --- */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  width: var(--sidebar-width);
  height: 100vh;
  background: var(--surface-container-lowest);
  border-right: 1px solid var(--outline-variant);
  overflow-y: auto;
}

body.dark .sidebar {
  background: #0f172a;
  border-right-color: #1e293b;
}

.sidebar-top {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.brand {
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--outline-variant);
}

.brand-logo-image {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.brand-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-1);
}

.brand-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: var(--primary-container);
  color: var(--on-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  flex-shrink: 0;
}

.brand-name {
  font-size: 18px;
  font-weight: 900;
  color: var(--primary-container);
  line-height: 1.2;
}

body.dark .brand-name {
  color: #ffffff;
}

.brand-subtitle {
  display: block;
  font-size: var(--text-label-caps);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  margin-left: 44px;
}

.btn-new-filing {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--primary-container);
  color: var(--on-primary);
  border-radius: var(--radius-md);
  font-size: var(--text-label-bold);
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  transition: background var(--transition);
}

.btn-new-filing:hover {
  background: var(--primary);
}

.btn-new-filing .material-symbols-outlined {
  font-size: 18px;
}

.sidebar-menu {
  flex: 1;
  overflow-y: auto;
  padding: 0 var(--space-2);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  color: #475569;
  font-size: var(--text-body-sm);
  transition: background var(--transition), transform var(--transition), color var(--transition);
}

.sidebar-link .material-symbols-outlined {
  font-size: 20px;
}

.sidebar-link:hover {
  background: #f1f5f9;
  transform: translateX(3px);
}

body.dark .sidebar-link {
  color: #94a3b8;
}

body.dark .sidebar-link:hover {
  background: #1e293b;
}

.sidebar-link.active {
  background: #eff6ff;
  color: var(--primary-container);
  font-weight: 600;
  border-right: 3px solid var(--primary-container);
}

body.dark .sidebar-link.active {
  background: #1e293b;
  color: #60a5fa;
  border-right-color: #60a5fa;
}

.sidebar-footer {
  padding: var(--space-4) var(--space-2);
  border-top: 1px solid var(--outline-variant);
  display: flex;
  flex-direction: column;
  gap: 2px;
}


/* --- Topbar --- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--topbar-height);
  padding: 0 var(--space-8);
  background: var(--surface-container-lowest);
  border-bottom: 1px solid var(--outline-variant);
  flex-shrink: 0;
}

body.dark .topbar {
  background: #020617;
  border-bottom-color: #1e293b;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.topbar-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--primary-container);
  white-space: nowrap;
}

body.dark .topbar-title {
  color: #ffffff;
}

.topbar-nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.topbar-nav a {
  padding-bottom: 4px;
  color: #475569;
  font-size: var(--text-body-sm);
  font-weight: 500;
  transition: color var(--transition);
}

.topbar-nav a:hover {
  color: var(--primary-container);
}

.topbar-nav a.active {
  color: var(--primary-container);
  font-weight: 700;
  border-bottom: 2px solid var(--primary-container);
}

.topbar-nav .sep {
  color: var(--outline);
  margin: 0 2px;
}

body.dark .topbar-nav a {
  color: #94a3b8;
}

body.dark .topbar-nav a:hover {
  color: #93c5fd;
}

body.dark .topbar-nav a.active {
  color: #60a5fa;
  border-bottom-color: #60a5fa;
}

.topbar-search {
  display: none;
  align-items: center;
  gap: var(--space-2);
  background: var(--surface-container-low);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  min-width: 220px;
}

.topbar-search input {
  background: transparent;
  border: none;
  outline: none;
  font-size: var(--text-body-sm);
  color: var(--on-surface);
  width: 100%;
}

.topbar-search .material-symbols-outlined {
  font-size: 18px;
  color: var(--on-surface-variant);
}

body.dark .topbar-search {
  background: rgba(255, 255, 255, 0.05);
  border-color: #334155;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.user-id {
  color: var(--on-surface-variant);
  font-size: var(--text-body-sm);
}


/* --- Page wrapper --- */
.page {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin-left: var(--sidebar-width);
  height: 100vh;
  overflow: hidden;
}

.main-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-6);
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}


/* --- Footer --- */
.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-8);
  border-top: 1px solid var(--outline-variant);
  background: var(--surface-container-lowest);
  font-size: var(--text-body-sm);
  color: var(--on-surface-variant);
  flex-shrink: 0;
}

body.dark .footer {
  background: #0f172a;
  border-top-color: #1e293b;
}

.footer-copy {
  font-weight: 700;
  color: var(--on-surface);
}

body.dark .footer-copy {
  color: #e2e8f0;
}


/* ============================================================
   5. STAT CARDS
   KPI summary cards on the dashboard.
   Always 3 per row at every screen size — cards shrink to
   fit rather than wrapping to a new row.
   ============================================================ */

/* Grid — 3 equal columns, never wraps */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-4);
  width: 100%;
}
/* Never allow fewer than 3 columns — enforces minimum 3 per row */
@media (max-width: 990px) {
  .stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Individual stat card */
.stat-card {
  background: var(--surface-container-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-6);
  min-width: 0;
  word-break: break-word;
}

/* Clickable stat card (links to filtered deadlines page) */
.stat-card-link {
  display: block;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.1s;
}
.stat-card-link:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.10);
  transform: translateY(-1px);
  border-color: var(--primary);
}
.stat-card-link .stat-label,
.stat-card-link .stat-value { color: inherit; }

body.dark .stat-card {
  background: #111827;
  border-color: #1e293b;
}

/* Uppercase label above the number e.g. "TOTAL COMPANIES" */
.stat-label {
  font-size: var(--text-label-caps);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  margin-bottom: var(--space-2);
}

/* The large number e.g. "142" */
.stat-value {
  font-size: var(--text-h2);
  font-weight: 700;
  color: var(--on-surface);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

/* Small helper text below e.g. "+3 this week" */
.stat-meta {
  font-size: var(--text-body-sm);
  color: var(--on-surface-variant);
  margin-top: var(--space-1);
}

/* Colour modifiers */
.stat-up {
  color: #137333;
}

.stat-warn {
  color: #b45309;
}

.stat-err {
  color: var(--error);
}

/* Shrink text on small screens so 3 cards still fit */
@media (max-width: 600px) {
  .stat-value {
    font-size: 22px;
  }

  .stat-label {
    font-size: 10px;
  }
}


/* ============================================================
   6. CARDS
   General content card — tables, forms, info panels.
   ============================================================ */
.card {
  background: var(--surface-container-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

body.dark .card {
  background: #111827;
  border-color: #1e293b;
}

.card-title {
  font-size: var(--text-h3);
  font-weight: 600;
  color: var(--on-surface);
  margin-bottom: var(--space-4);
}

.card-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.card-icon {
  color: var(--primary-container);
}

/* Small 40×40 icon button */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  color: var(--on-surface-variant);
  border-radius: var(--radius-md);
  transition: color var(--transition), background var(--transition);
}

.icon-btn:hover {
  color: var(--primary);
  background: rgba(0, 0, 0, 0.04);
}

body.dark .icon-btn:hover {
  background: rgba(255, 255, 255, 0.06);
}


/* ============================================================
   7. BADGES
   Compact status pills — company status, filing state, etc.
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--text-label-caps);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge-active {
  background: #e6f4ea;
  color: #137333;
  border: 1px solid #ceead6;
}

.badge-dissolved {
  background: #f1f3f4;
  color: #5f6368;
  border: 1px solid #dadce0;
}

.badge-liquidation {
  background: #fce8e6;
  color: #c5221f;
  border: 1px solid #fad2cf;
}

.badge-dormant {
  background: #fef9c3;
  color: #854d0e;
  border: 1px solid #fde68a;
}

.badge-neutral {
  background: var(--surface-variant);
  color: var(--on-surface-variant);
  border: 1px solid var(--outline-variant);
}

.badge-warning {
  background: #fff7ed;
  color: #b45309;
  border: 1px solid #fed7aa;
}

body.dark .badge-active {
  background: rgba(34, 197, 94, 0.12);
  color: #86efac;
  border-color: rgba(34, 197, 94, 0.25);
}

body.dark .badge-neutral {
  background: #334155;
  color: #cbd5e1;
  border-color: #475569;
}


/* ============================================================
   8. BUTTONS
   Base .btn class + variant modifiers.
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-label-bold);
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background var(--transition), color var(--transition);
  cursor: pointer;
}

/* Solid navy — primary CTA */
.btn-primary {
  background: var(--primary-container);
  color: var(--on-primary);
}

.btn-primary:hover {
  background: var(--primary);
}

/* Outlined — secondary action */
.btn-secondary {
  background: var(--secondary-container);
  color: var(--on-secondary-container);
  border: 1px solid var(--outline-variant);
}

.btn-secondary:hover {
  background: var(--secondary-fixed);
}

/* Text only — tertiary/inline action */
.btn-ghost {
  background: transparent;
  color: var(--primary-container);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  padding: 0;
}

.btn-ghost:hover {
  color: var(--primary);
}

.btn-ghost-muted {
  color: var(--secondary);
}

.btn-ghost-muted:hover {
  color: var(--on-surface);
}

/* Compact size modifier */
.btn-sm {
  padding: 5px 10px;
  font-size: 12px;
}


/* ============================================================
   9. FORM CONTROLS
   Text inputs, selects, and their icon wrapper helpers.
   ============================================================ */
.input,
.select {
  width: 100%;
  padding: var(--space-2) var(--space-4);
  background: var(--surface-bright);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  font-size: var(--text-body-md);
  color: var(--on-surface);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.input:focus,
.select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 30, 64, 0.15);
}

body.dark .input,
body.dark .select {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--outline-variant);
}

/* Input with a leading icon */
.input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.input-icon {
  position: absolute;
  left: 12px;
  color: var(--on-surface-variant);
  pointer-events: none;
  font-size: 20px;
}

.input-padded {
  padding-left: 40px;
}

/* Select with a trailing chevron icon */
.select-wrap {
  position: relative;
}

.select {
  appearance: none;
  padding-right: 36px;
}

.select-arrow {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--on-surface-variant);
  pointer-events: none;
  font-size: 20px;
}

/* Login form group */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.form-label {
  font-size: var(--text-label-bold);
  font-weight: 600;
  color: var(--on-surface);
}

.form-input {
  padding: var(--space-3) var(--space-4);
  background: var(--surface-bright);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  font-size: var(--text-body-md);
  color: var(--on-surface);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.form-input:focus {
  border-color: var(--primary-container);
  box-shadow: 0 0 0 3px rgba(0, 30, 64, 0.15);
}


/* ============================================================
   10. PAGE HEADER
   ============================================================ */
.page-header {
  margin-bottom: var(--space-8);
}

.page-header h1 {
  font-size: var(--text-h2);
  font-weight: 600;
  color: var(--on-surface);
  margin-bottom: var(--space-2);
}

.page-header p {
  font-size: var(--text-body-lg);
  color: var(--on-surface-variant);
  max-width: 720px;
  line-height: 1.6;
}


/* ============================================================
   11. DATA TABLE
   ============================================================ */
.table-container {
  background: var(--surface-container-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

body.dark .table-container {
  background: #111827;
  border-color: #1e293b;
}

/* Horizontal scroll on narrow screens */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.data-table {
  width: 100%;
  text-align: left;
}

.data-table thead tr {
  background: var(--surface-container);
  border-bottom: 2px solid var(--outline-variant);
}

.data-table th {
  padding: 14px 16px;
  font-size: var(--text-label-bold);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--on-surface);
  white-space: nowrap;
}

.data-table th.th-address {
  min-width: 200px;
}

.data-table th.th-center,
.data-table td.td-center {
  text-align: center;
}

.data-table th.th-right,
.data-table td.td-right {
  text-align: right;
}

.data-table tbody tr {
  border-bottom: 1px solid var(--outline-variant);
  transition: background var(--transition);
}

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

.data-table tbody tr.row-alt {
  background: var(--surface);
}

.data-table tbody tr.row-alt:hover {
  background: var(--surface-bright);
}

.data-table td {
  padding: 11px 16px;
  vertical-align: middle;
  font-size: var(--text-body-sm);
  color: var(--on-surface);
}

/* Cell modifier classes */
.td-mono {
  font-family: "Courier New", monospace;
  color: var(--secondary);
  font-size: 13px;
}

.td-medium {
  font-weight: 500;
}

.td-muted {
  color: var(--on-surface-variant);
}

.td-strike {
  color: var(--on-surface-variant);
  text-decoration: line-through;
  text-decoration-color: var(--outline);
}

.td-warn {
  color: #b06000;
  font-weight: 500;
}

.td-error {
  color: var(--error);
  font-weight: 500;
}

.td-nowrap {
  white-space: nowrap;
}

.td-icon-inline {
  font-size: 14px;
  vertical-align: middle;
  margin-left: 4px;
}

/* Filings table — smaller uppercase headers */
.filings-table thead tr {
  background: var(--surface-container-lowest);
}

.filings-table th {
  font-size: var(--text-label-caps);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
}

.filings-table tbody tr:hover {
  background: var(--surface-container-low);
}


/* ============================================================
   12. FILTER BAR
   ============================================================ */
.filter-bar {
  background: var(--surface-container-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.filter-bar-controls {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
}


/* ============================================================
   13. PAGINATION
   ============================================================ */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--outline-variant);
  font-size: var(--text-body-sm);
}

.pagination-info {
  color: var(--on-surface-variant);
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.pg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-md);
  font-size: var(--text-body-sm);
  color: var(--on-surface);
  transition: background var(--transition);
}

.pg-btn:hover {
  background: var(--surface-variant);
}

.pg-btn.active {
  background: var(--primary-container);
  color: var(--on-primary);
}

.pg-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.pg-ellipsis {
  padding: 0 var(--space-2);
  color: var(--on-surface-variant);
}


/* ============================================================
   14. TO-DO LIST
   ============================================================ */
.todo-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.todo-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface-container-low);
  border: 1px solid var(--outline-variant);
}

.todo-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  margin-top: 5px;
}

.todo-dot-red {
  background: var(--error);
}

.todo-dot-amber {
  background: #d97706;
}

.todo-dot-grey {
  background: var(--outline);
}

.todo-label {
  font-size: var(--text-body-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}

.todo-label-overdue {
  color: var(--error);
}

.todo-label-due {
  color: #b45309;
}

.todo-label-draft {
  color: var(--on-surface-variant);
}

.todo-company {
  font-size: var(--text-body-sm);
  color: var(--on-surface);
}


/* ============================================================
   15. LOG STATUSES
   ============================================================ */
.log-success {
  color: #137333;
  font-weight: 600;
}

.log-warning {
  color: #b45309;
  font-weight: 600;
}

.log-error {
  color: var(--error);
  font-weight: 600;
}


/* ============================================================
   16. INLINE LINK
   ============================================================ */
.inline-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--primary-container);
  font-size: var(--text-body-sm);
  font-weight: 500;
  transition: color var(--transition);
}

.inline-link:hover {
  color: var(--primary);
}

.inline-link-right {
  justify-content: flex-end;
}


/* ============================================================
   17. COMPANY DETAILS PAGE
   Three-panel: main sidebar + company sub-sidebar + content
   ============================================================ */

/* Second sidebar — company section nav */
.company-sidebar {
  position: fixed;
  top: var(--topbar-height);
  left: var(--sidebar-width);
  z-index: 30;
  display: flex;
  flex-direction: column;
  width: 220px;
  height: calc(100vh - var(--topbar-height));
  background: var(--surface-container-low);
  border-right: 1px solid var(--outline-variant);
  overflow-y: auto;
}

body.dark .company-sidebar {
  background: #0f172a;
  border-right-color: #1e293b;
}

.company-sidebar-top {
  padding: var(--space-4);
  border-bottom: 1px solid var(--outline-variant);
}

.company-sidebar-title {
  font-size: var(--text-body-md);
  font-weight: 700;
  color: var(--primary-container);
  margin-bottom: var(--space-1);
}

body.dark .company-sidebar-title {
  color: #ffffff;
}

.company-sidebar-subtitle {
  font-size: var(--text-body-sm);
  color: var(--on-surface-variant);
}

.company-sidebar-menu {
  flex: 1;
  list-style: none;
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.company-sidebar-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-body-sm);
  color: #475569;
  border-left: 3px solid transparent;
  transition: background var(--transition), color var(--transition);
}

.company-sidebar-link .material-symbols-outlined {
  font-size: 18px;
}

.company-sidebar-link:hover {
  background: #f1f5f9;
}

.company-sidebar-link.active {
  border-left-color: var(--primary-container);
  background: #f1f5f9;
  color: var(--primary-container);
  font-weight: 600;
}

body.dark .company-sidebar-link {
  color: #94a3b8;
}

body.dark .company-sidebar-link:hover {
  background: #1e293b;
}

body.dark .company-sidebar-link.active {
  border-left-color: #60a5fa;
  background: #1e293b;
  color: #60a5fa;
}

.company-sidebar-footer {
  margin-top: auto;
  padding: var(--space-4) var(--space-3);
  border-top: 1px solid var(--outline-variant);
}

/* Main content — offset for both sidebars */
.company-main {
  margin-left: calc(var(--sidebar-width) + 220px);
  overflow-y: auto;
  height: calc(100vh - var(--topbar-height));
  padding: var(--space-6);
}

.company-content {
  max-width: var(--max-width);
  margin: 0 auto;
}

/* Company name + status header */
.company-header {
  padding-bottom: var(--space-6);
  margin-bottom: var(--space-8);
  border-bottom: 1px solid var(--outline-variant);
}

.company-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.company-title {
  font-size: var(--text-h1);
  font-weight: 700;
  line-height: 1.2;
  color: var(--on-surface);
  margin: 0 0 var(--space-2);
}

.company-subtitle {
  font-size: var(--text-body-lg);
  color: var(--on-surface-variant);
  margin: 0;
}

body.dark .company-subtitle {
  color: #94a3b8;
}

.company-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 14px;
  border: 1px solid #ceead6;
  border-radius: var(--radius-md);
  background: #e6f4ea;
  color: #137333;
  font-size: var(--text-label-bold);
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

.company-status .material-symbols-outlined {
  font-size: 16px;
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}

body.dark .company-status {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.25);
  color: #86efac;
}

/* Two-column layout: main info left + panel right */
.company-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: var(--space-2);
}

.company-primary,
.company-secondary {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

/* Key info detail grid */
.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6) var(--space-8);
}

.meta-label {
  font-size: var(--text-label-caps);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  margin: 0 0 4px;
}

.meta-value {
  font-size: var(--text-body-md);
  font-weight: 500;
  color: var(--on-surface);
  margin: 0;
}

/* Two-column panel grid */
.panels-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

/* Highlighted date box e.g. next accounts due */
.highlight-box {
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  background: var(--surface-container-low);
  border: 1px solid rgba(195, 198, 209, 0.5);
  border-radius: var(--radius-md);
}

.highlight-date {
  font-size: var(--text-h2);
  font-weight: 600;
  line-height: 1.3;
  color: var(--primary-container);
  margin: 0 0 4px;
}

.highlight-note {
  font-size: var(--text-body-sm);
  color: var(--on-surface-variant);
  margin: 0;
}

/* Registered office card */
.office-card {
  overflow: hidden;
}

.office-hero {
  position: relative;
  height: 120px;
  background: var(--surface-variant);
}

.office-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(58, 95, 148, 0.2), transparent);
}

.office-hero-icon {
  position: absolute;
  left: var(--space-6);
  bottom: var(--space-4);
  color: var(--primary-container);
  font-size: 40px;
  opacity: 0.8;
  z-index: 1;
}

.office-address {
  font-style: normal;
  color: var(--on-surface-variant);
  line-height: 1.7;
  margin: 0 0 var(--space-6);
}

body.dark .office-address {
  color: #94a3b8;
}

/* People / officers list */
.people-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.person-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.person-icon {
  padding: 4px;
  color: var(--outline);
  background: var(--surface);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.person-name {
  font-size: var(--text-body-md);
  font-weight: 500;
  color: var(--on-surface);
  margin: 0;
}

.person-role {
  font-size: var(--text-body-sm);
  color: var(--on-surface-variant);
  margin: 0;
}

body.dark .person-role {
  color: #94a3b8;
}


/* ============================================================
   18. LOGIN PAGE
   Split-screen: form left, navy branding panel right.
   ============================================================ */
body.login-page {
  overflow: hidden;
}

.login-wrap {
  display: flex;
  min-height: 100vh;
  width: 100%;
}

.login-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-16) var(--space-12);
}

.login-right {
  width: 45%;
  background: var(--primary-container);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-16);
  color: var(--on-primary);
}

.login-box {
  width: 100%;
  max-width: 380px;
}

.login-logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

.login-brand {
  font-size: 20px;
  font-weight: 900;
  color: var(--primary-container);
}

.login-title {
  font-size: var(--text-h2);
  font-weight: 700;
  color: var(--on-surface);
  margin-bottom: var(--space-2);
}

.login-sub {
  font-size: var(--text-body-md);
  color: var(--on-surface-variant);
  margin-bottom: var(--space-8);
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.btn-login {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--primary-container);
  color: var(--on-primary);
  border-radius: var(--radius-md);
  font-size: var(--text-body-md);
  font-weight: 700;
  transition: background var(--transition);
  margin-top: var(--space-2);
}

.btn-login:hover {
  background: var(--primary);
}

.login-right-title {
  font-size: var(--text-h2);
  font-weight: 700;
  margin-bottom: var(--space-4);
  text-align: center;
}

.login-right-text {
  font-size: var(--text-body-lg);
  opacity: 0.85;
  text-align: center;
  max-width: 360px;
  line-height: 1.6;
}


/* ============================================================
   19. RESPONSIVE
   Sidebar becomes a slide-in drawer on mobile.
   Layout collapses to single column below 768px.
   Stat cards always stay 3 per row (handled by Section 5).
   ============================================================ */

/* Dark overlay behind open mobile sidebar */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 39;
}

.sidebar-overlay.open {
  display: block;
}

/* Hamburger — hidden on desktop */
.hamburger-btn {
  display: none;
}


/* ----------------------------------------------------------
   Tablet and below (≤ 768px)
   ---------------------------------------------------------- */
@media (max-width: 768px) {

  body {
    overflow: auto;
  }

  .hamburger-btn {
    display: inline-flex;
  }

  /* Sidebar slides in as a drawer */
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 40;
  }

  .sidebar.open {
    transform: translateX(0);
  }

  /* Page takes full width */
  .page {
    margin-left: 0 !important;
    height: auto;
    overflow: visible;
  }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    padding: 0 var(--space-4);
  }

  .main-content {
    overflow-y: visible;
    padding: var(--space-4);
  }

  /* Multi-column grids collapse to 1 column */
  .detail-grid,
  .panels-grid,
  .company-layout {
    grid-template-columns: 1fr !important;
  }

  /* Filter bar controls stack vertically */
  .filter-bar-controls {
    flex-direction: column;
    align-items: stretch;
  }

  /* Tables scroll horizontally */
  .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Pagination stacks */
  .pagination {
    flex-direction: column;
    gap: var(--space-2);
    align-items: flex-start;
  }

  /* Footer stacks */
  .footer {
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-4);
  }

  /* Hide user email in topbar */
  .user-id {
    display: none;
  }
}


/* ----------------------------------------------------------
   Small mobile (≤ 480px)
   ---------------------------------------------------------- */
@media (max-width: 480px) {

  .topbar-title {
    font-size: 14px;
  }

  .card {
    padding: var(--space-4);
  }

  /* Buttons go full width inside forms */
  .btn-primary,
  .btn-secondary {
    width: 100%;
    justify-content: center;
  }
}


/* ============================================================
   20. UTILITIES
   ============================================================ */
.hidden {
  display: none !important;
}

/* Add company strip — buttons stack individually on small screens */
@media (max-width: 750px) {
  .add-company-buttons {
    width: 100%;
    flex-direction: column;
  }

  .add-company-buttons .btn {
    width: 100%;
    justify-content: center;
  }
}

/* Dashboard two-column grid — stacks on small screens */
@media (max-width: 750px) {
  .dashboard-two-col {
    grid-template-columns: 1fr !important;
  }
}
/* ============================================================
   FILING PAGE — ported from chadmin/style.css
   Applies to: /filings and /filings/{number}
   ============================================================ */

/* Card */
.cardd {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 10px 24px rgba(18, 38, 63, 0.08);
}

/* Two-column grid (sidebar + main) */
.gridd {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 20px;
    align-items: start;
}

/* Company list item */
.company-item {
    padding: 12px;
    border: 1px solid #e3e8f0;
    border-radius: 12px;
    margin-bottom: 10px;
    background: #fbfcfe;
}

/* Muted small text */
.muted {
    color: #66738a;
    font-size: 13px;
}

/* Buttons */
.bttn {
    display: inline-block;
    border: 0;
    border-radius: 10px;
    padding: 10px 14px;
    text-decoration: none;
    cursor: pointer;
    background: #1f6feb;
    color: #fff;
    font-weight: 600;
}
.bttn.light  { background: #eef3fb; color: #172033; }
.bttn.green  { background: #15803d; color: #fff; }
.bttn.orange { background: #c2410c; color: #fff; }
.bttn.red    { background: #dc2626; color: #fff; }
.bttn.gray   { background: #475467; color: #fff; }

/* Form inputs */
.filing-form input,
.filing-form select {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid #d6deea;
    border-radius: 10px;
    margin-top: 6px;
    font-size: 14px;
}

.filing-form label {
    display: block;
    margin-bottom: 12px;
    font-size: 14px;
}

/* Flash messages */
.flash-ok {
    background: #e8fff0;
    color: #166534;
    padding: 12px 14px;
    border-radius: 12px;
    margin-bottom: 16px;
}

.flash-error {
    background: #fff1f2;
    color: #b42318;
    padding: 12px 14px;
    border-radius: 12px;
    margin-bottom: 16px;
}

/* Two column row inside a form */
.row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

/* Info grid (2 columns of info boxes) */
.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 20px;
}

.info-box {
    border: 1px solid #e7edf5;
    border-radius: 12px;
    padding: 14px;
    background: #fbfcfe;
}

.info-title {
    font-size: 12px;
    color: #66738a;
    margin-bottom: 6px;
}

.info-value {
    font-size: 14px;
    font-weight: 600;
}

/* Result box */
.result-box {
    border: 1px solid #e7edf5;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 10px;
    background: #fbfcfe;
}

/* Badges */
.badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}
.badge-green  { background: #e8fff0; color: #166534; }
.badge-red    { background: #fff1f2; color: #b42318; }
.badge-brown  { background: #f5eadf; color: #8a4b08; }
.badge-gray   { background: #eef3fb; color: #475467; }

/* Status dots */
.dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}
.dot-green  { background: #16a34a; }
.dot-yellow { background: #eab308; }
.dot-red    { background: #dc2626; }
.dot-brown  { background: #8a4b08; }

/* Date colours */
.date-yellow { color: #ca8a04; font-weight: 700; }
.date-red    { color: #b42318; font-weight: 700; }

/* Divider */
.hr-soft {
    margin: 20px 0;
    border: 0;
    border-top: 1px solid #e8edf5;
}

/* Spacing helpers */
.mt-8  { margin-top: 8px; }
.mt-10 { margin-top: 10px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.fw-700 { font-weight: 700; }

/* Actions bar */
.actions-bar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

/* Company link colours */
.company-link { text-decoration: none; font-weight: 700; }
.name-default { color: #172033; }
.name-green   { color: #166534; }
.name-yellow  { color: #ca8a04; }
.name-red     { color: #b42318; }
.name-brown   { color: #8a4b08; }

/* Web Filing two-column layout (office + email side by side) */
.web-filing-two-column {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.web-filing-office {
    flex: 1.35;
    min-width: 0;
}

.web-filing-email {
    flex: 0.85;
    min-width: 0;
}

/* Filing company selector grid */
.filing-company-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.filing-company-card {
    background: #fff;
    border: 1px solid #e3e8f0;
    border-radius: 14px;
    padding: 16px 18px;
    text-decoration: none;
    color: #172033;
    display: block;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.filing-company-card:hover {
    box-shadow: 0 6px 20px rgba(18, 38, 63, 0.10);
    border-color: #1f6feb;
}

.filing-company-card .card-name {
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 4px;
}

.filing-company-card .card-number {
    font-size: 13px;
    color: #66738a;
}

/* Connected / disconnected icon colours */
.icon-connected    { color: #16a34a; }
.icon-disconnected { color: #dc2626; }

/* ============================================================
   RESPONSIVE — mobile breakpoints
   ============================================================ */
@media (max-width: 980px) {
    .gridd {
        grid-template-columns: 1fr;
    }
    .row {
        grid-template-columns: 1fr;
    }
    .info-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .web-filing-two-column {
        flex-direction: column;
    }
    .web-filing-office,
    .web-filing-email {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .filing-company-grid {
        grid-template-columns: 1fr;
    }
    .cardd {
        padding: 14px;
    }
}

/* ============================================================
   FILING STATUS BADGES
   ============================================================

   PURPOSE
   ------------------------------------------------------------
   Visual representation of Companies House filing lifecycle.

   These badges reflect real-time status returned from:
   CompaniesHouseService → getTransactionStatus()

   Used in:
   resources/views/filings/show.blade.php

   DESIGN PRINCIPLES
   ------------------------------------------------------------
   - Minimal, readable, consistent
   - Color-coded by status
   - Reusable across entire system
   - No inline styling in Blade

   STATUS MAPPING
   ------------------------------------------------------------
   submitted → request sent (neutral)
   pending   → processing (warning)
   accepted  → success (green)
   rejected  → failure (red)
   failed    → system/API failure (red)
   ============================================================ */


/* ------------------------------------------------------------
   BASE BADGE STRUCTURE
   ------------------------------------------------------------
   Shared styling for all badge types
------------------------------------------------------------ */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 4px 8px;
    border-radius: 6px;

    font-size: 12px;
    font-weight: 500;
    line-height: 1;

    border: 1px solid transparent;

    white-space: nowrap;
}


/* ------------------------------------------------------------
   ACCEPTED (SUCCESS)
------------------------------------------------------------ */
.badge-success {
    background-color: #e8f5e9;
    color: #1b5e20;
    border-color: #a5d6a7;
}


/* ------------------------------------------------------------
   PENDING (PROCESSING)
------------------------------------------------------------ */
.badge-warning {
    background-color: #fff8e1;
    color: #92400e;
    border-color: #fde68a;
}


/* ------------------------------------------------------------
   REJECTED / FAILED (ERROR)
------------------------------------------------------------ */
.badge-error {
    background-color: #fff3f3;
    color: #b42318;
    border-color: #f5a0a0;
}


/* ------------------------------------------------------------
   SUBMITTED / UNKNOWN (NEUTRAL)
------------------------------------------------------------ */
.badge-neutral {
    background-color: #f5f5f5;
    color: #555;
    border-color: #ddd;
}

/* ============================================================
   FILING HISTORY TABLE IMPROVEMENTS
   ============================================================ */

/* Force proper left-to-right layout (fix header alignment issues) */
.filing-history-card table {
    direction: ltr;
}

/* Align table headers cleanly like companies page */
.filing-history-card th {
    text-align: left;
}

/* Alternate row shading for better readability */
.filing-history-card tbody tr:nth-child(even) {
    background-color: #fafafa;
}

/* Slightly darker hover for clarity */
.filing-history-card tbody tr:hover {
    background-color: #f0f0f0;
}

/* -------------------------------------------------------
   Shared spin keyframe
   -------------------------------------------------------
   Used by syncAll/syncOne buttons across the portal. Lives
   in the global stylesheet so every page (including the
   sidebar Sync All button rendered by layouts/app.blade.php)
   can use it without re-declaring the rule.
*/
@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}


/* ============================================================
   SHARED PROFILE / SHOW PAGE LAYOUT
   ============================================================

   What:
   Provides the shared enterprise detail-page styling used by:
   - companies/show.blade.php
   - admin/user-show.blade.php

   Why:
   Company profile pages and user profile pages must use the same
   visual system: header, metadata row, action buttons, date/status
   cards, tabs, and detail rows.

   Where:
   Applied to Blade views using:
   .show-header
   .dates-row
   .tab-bar
   .tab-panel
   .detail-row
   ============================================================ */


/* ------------------------------------------------------------
   Page header
------------------------------------------------------------ */
.show-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-6);
    padding-bottom: var(--space-6);
    margin-bottom: var(--space-6);
    border-bottom: 1px solid var(--outline-variant);
}

.show-header-left {
    min-width: 0;
}

.show-title {
    margin: var(--space-2) 0 var(--space-2);
    font-size: var(--text-h1);
    font-weight: 700;
    line-height: 1.2;
    color: var(--on-surface);
}

.show-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    color: var(--on-surface-variant);
    font-size: var(--text-body-sm);
}

.show-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--space-2);
    flex-shrink: 0;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--primary);
    font-size: var(--text-body-sm);
    font-weight: 600;
    text-decoration: none;
}

.back-link:hover {
    text-decoration: underline;
}

.back-link .material-symbols-outlined {
    font-size: 18px;
}

.company-number-mono,
.mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 13px;
    letter-spacing: 0.01em;
}

.company-label {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--surface-container-low);
    color: var(--on-surface-variant);
    border: 1px solid var(--outline-variant);
    font-size: 12px;
    font-weight: 600;
}


/* ------------------------------------------------------------
   Summary cards / date cards
------------------------------------------------------------ */
.dates-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.date-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--surface-container-low);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-lg);
    min-width: 0;
}

.date-card--overdue {
    background: #fff7ed;
    border-color: #fed7aa;
}

.date-icon {
    color: var(--primary);
    font-size: 24px;
    flex-shrink: 0;
}

.date-label {
    margin-bottom: 4px;
    color: var(--on-surface-variant);
    font-size: var(--text-label-caps);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.date-value {
    color: var(--on-surface);
    font-size: var(--text-body-lg);
    font-weight: 700;
    line-height: 1.25;
}

.date-sub {
    margin-top: 4px;
    color: var(--on-surface-variant);
    font-size: var(--text-body-sm);
}

.overdue-icon {
    color: #b42318;
    font-size: 18px;
    vertical-align: middle;
}


/* ------------------------------------------------------------
   Tabs
------------------------------------------------------------ */
.tab-bar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--outline-variant);
    overflow-x: auto;
}

.tab-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: var(--space-3) var(--space-4);
    border-bottom: 2px solid transparent;
    color: var(--on-surface-variant);
    font-size: var(--text-body-sm);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.tab-link:hover {
    color: var(--primary);
}

.tab-link--active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--surface-container-low);
    color: var(--on-surface-variant);
    border: 1px solid var(--outline-variant);
    font-size: 11px;
    font-weight: 700;
}

.tab-panel {
    padding: var(--space-5);
    background: var(--surface);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-lg);
}


/* ------------------------------------------------------------
   Detail rows
------------------------------------------------------------ */
.detail-row {
    display: grid;
    grid-template-columns: minmax(140px, 0.35fr) minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--outline-variant);
}

.detail-row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.detail-key {
    color: var(--on-surface-variant);
    font-size: var(--text-label-caps);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.detail-val {
    min-width: 0;
    color: var(--on-surface);
    font-size: var(--text-body-md);
    font-weight: 500;
    word-break: break-word;
}


/* ------------------------------------------------------------
   Dark mode adjustments
------------------------------------------------------------ */
body.dark .date-card {
    background: rgba(30, 41, 59, 0.55);
    border-color: rgba(148, 163, 184, 0.25);
}

body.dark .date-card--overdue {
    background: rgba(127, 29, 29, 0.25);
    border-color: rgba(248, 113, 113, 0.35);
}

body.dark .tab-panel {
    background: rgba(15, 23, 42, 0.45);
    border-color: rgba(148, 163, 184, 0.25);
}


/* ------------------------------------------------------------
   Responsive behaviour
------------------------------------------------------------ */
@media (max-width: 768px) {
    .show-header {
        flex-direction: column;
        align-items: stretch;
    }

    .show-header-actions {
        justify-content: flex-start;
    }

    .dates-row {
        grid-template-columns: 1fr;
    }

    .detail-row {
        grid-template-columns: 1fr;
        gap: var(--space-1);
    }
}


/* ============================================================
   SELF-SERVICE PROFILE REFINEMENTS
   ============================================================ */

.form-help {
    margin-top: 4px;
    color: var(--on-surface-variant);
    font-size: 12px;
    line-height: 1.35;
}

.profile-soft-card {
    padding: var(--space-5);
    background: var(--surface);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-lg);
}



/* ============================================================
   SELF-SERVICE PROFILE SIDE PANEL FIXES
   ============================================================

   What:
   Prevents narrow right-side profile cards from squeezing detail rows.

   Why:
   The company/show layout uses a right column. In user profile pages,
   right-column cards contain editable fields and package data, so they need
   single-column detail rows instead of the wider two-column detail grid.

   Where:
   resources/views/profile/show.blade.php
   ============================================================ */

.profile-side-card .detail-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

.profile-side-card .detail-row {
    grid-template-columns: 1fr;
    gap: var(--space-1);
}

.profile-side-card .detail-key {
    margin-bottom: 2px;
}

.profile-side-card .form-input {
    width: 100%;
}



/* ============================================================
   ADMIN DASHBOARD
   ============================================================

   What:
   Reusable layout classes for the internal admin dashboard.

   Why:
   Admin dashboard Blade should not contain inline layout styles.
   Keeping layout in portal.css preserves the enterprise portal styling
   system and avoids one-off page-specific styling.

   Where:
   Used by resources/views/admin/dashboard.blade.php.
*/

.admin-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

.admin-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}


/* ============================================================
   ADMIN USERS
   ============================================================

   What:
   Reusable layout classes for the admin user-management page.

   Why:
   Admin user controls contain repeated operational forms, metadata,
   and compact selectors. These styles belong in portal.css rather than
   inline Blade attributes so the admin area stays maintainable.

   Where:
   Used by resources/views/admin/users.blade.php.
*/

.admin-user-card {
    margin-bottom: var(--space-6);
}

.admin-user-header {
    justify-content: space-between;
    align-items: flex-start;
}

.admin-user-title {
    margin-bottom: 4px;
}

.admin-user-meta,
.admin-user-note {
    font-size: 12px;
    color: var(--on-surface-variant);
}

.admin-user-note {
    margin-left: 8px;
}

.admin-user-action-form {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.admin-user-role-select {
    width: 140px;
    padding: 6px 10px;
}

.admin-user-plan-select {
    width: 220px;
    padding: 6px 10px;
}

.admin-users-pagination {
    margin-top: var(--space-6);
}


.admin-dashboard-section {
    margin-bottom: var(--space-6);
}

.admin-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
}

.admin-dashboard-list-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--outline-variant);
}

.admin-dashboard-list-row:last-child {
    border-bottom: 0;
}

@media (max-width: 900px) {
    .admin-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .admin-dashboard-list-row {
        align-items: flex-start;
        flex-direction: column;
    }
}


/* ============================================================
   ADMIN ACTIVITY LOG
   ============================================================

   What:
   Reusable layout classes for the admin activity/audit log.

   Why:
   Audit rows must be readable, consistent with the admin dashboard,
   and free from inline styles.

   Where:
   Used by resources/views/admin/activity-log.blade.php.
*/

.admin-activity-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--outline-variant);
}

.admin-activity-row:last-child {
    border-bottom: 0;
}

@media (max-width: 900px) {
    .admin-activity-row {
        flex-direction: column;
    }
}


/* ============================================================
   ADMIN SIDEBAR MODE
   ============================================================

   What:
   Visual separation for admin-area sidebar navigation.

   Why:
   Admin pages are an operational back office and should not share the
   same mixed customer navigation structure.

   Where:
   Applied by layouts/app.blade.php when request route matches admin.*.
*/

.sidebar-admin {
    border-right: 1px solid var(--outline-variant);
}

.sidebar-mode-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: var(--space-3);
    padding: 7px 10px;
    border-radius: var(--radius-full);
    font-size: var(--text-label-caps);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--primary);
    background: rgba(11, 87, 208, 0.08);
}

.sidebar-divider {
    height: 1px;
    background: var(--outline-variant);
    margin: var(--space-2) var(--space-3);
}

/* =========================================================
   Admin Command Centre Dashboard — v5.13 UX Polish
   =========================================================
   What:
   Styles the redesigned admin dashboard as a professional command centre.

   Why:
   Admin/master users need clear grouped operational visibility for users,
   companies, filings, plans, support readiness, compliance, and audit activity.

   Where:
   Used by resources/views/admin/dashboard.blade.php.
*/

.admin-command-header {
    align-items: flex-start;
    gap: 1rem;
}

.admin-eyebrow {
    margin: 0 0 0.35rem;
    color: var(--color-primary);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.admin-command-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: flex-end;
}

.admin-status-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
    margin: 1.25rem 0 1.4rem;
}

.admin-status-item {
    padding: 1rem 1.1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.admin-status-label {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--color-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.admin-command-section {
    margin-bottom: 1.6rem;
}

.admin-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 0.8rem;
}

.admin-section-heading h2 {
    margin: 0;
    color: var(--color-heading);
    font-size: 1rem;
    font-weight: 800;
}

.admin-section-heading p {
    margin: 0.25rem 0 0;
    color: var(--color-muted);
    font-size: 0.88rem;
}

.admin-metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
}

.admin-metric-card {
    display: flex;
    min-height: 124px;
    flex-direction: column;
    justify-content: space-between;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.admin-metric-card.is-live:hover {
    transform: translateY(-2px);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
}

.admin-metric-card.is-planned {
    background: linear-gradient(135deg, var(--color-surface), var(--color-bg-soft));
    opacity: 0.82;
}

.admin-metric-label {
    color: var(--color-muted);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.35;
    text-transform: uppercase;
}

.admin-metric-value {
    margin-top: 0.8rem;
    color: var(--color-heading);
    font-size: 1.9rem;
    font-weight: 900;
    line-height: 1;
}

.admin-metric-card.is-planned .admin-metric-value {
    font-size: 1.25rem;
}

.admin-metric-meta {
    margin-top: 0.75rem;
    color: var(--color-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.admin-metric-card.is-live .admin-metric-meta {
    color: var(--color-primary);
}

.admin-operations-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.3rem;
}

@media (max-width: 1180px) {
    .admin-metric-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .admin-command-header {
        flex-direction: column;
    }

    .admin-command-actions {
        justify-content: flex-start;
    }

    .admin-status-strip,
    .admin-operations-grid {
        grid-template-columns: 1fr;
    }

    .admin-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .admin-metric-grid {
        grid-template-columns: 1fr;
    }

    .admin-metric-card {
        min-height: 108px;
    }
}

body.dark .admin-status-item,
body.dark .admin-metric-card {
    background: var(--color-surface);
    border-color: var(--color-border);
}


/* =========================================================
   Admin Operational Filters + Tables — v5.14
   =========================================================
   What:
   Styles admin filtering panels and operational tables.

   Why:
   Admin companies, filings, users, tickets, and future operational queues
   need a consistent enterprise layout.

   Where:
   Used by resources/views/admin/companies.blade.php and future admin pages.
*/

.admin-filter-form {
    display: block;
}

.admin-filter-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.9rem;
    align-items: end;
}

.admin-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1rem;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
}

.admin-table th {
    color: var(--color-muted);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.admin-table th,
.admin-table td {
    padding: 0.85rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
}

.admin-table tbody tr:hover {
    background: var(--color-bg-soft);
}

@media (max-width: 1180px) {
    .admin-filter-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .admin-filter-grid {
        grid-template-columns: 1fr;
    }

    .admin-table th,
    .admin-table td {
        white-space: nowrap;
    }
}


/* Mega delegated client workspace warning banner */
.mega-active-workspace-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    padding: 1rem 1.15rem;
    border: 1px solid #d97706;
    border-left: 6px solid #b45309;
    border-radius: 12px;
    background: linear-gradient(135deg, #fff3cd 0%, #ffe7ba 100%);
    color: #78350f;
    box-shadow: 0 4px 12px rgba(180, 83, 9, 0.10);
}

.mega-active-workspace-banner strong {
    display: block;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #92400e;
}

.mega-active-workspace-banner span {
    display: block;
    margin-top: 0.2rem;
    font-weight: 700;
    color: #451a03;
}

.mega-active-workspace-banner .btn {
    border-color: #b45309;
}

/* v5.19 override — stronger active mega/client workspace banner */
.mega-active-workspace-banner {
    border: 2px solid #b45309 !important;
    border-left: 8px solid #7c2d12 !important;
    background: #ffedd5 !important;
    color: #431407 !important;
    box-shadow: 0 6px 18px rgba(124, 45, 18, 0.18) !important;
}

.mega-active-workspace-banner strong {
    color: #7c2d12 !important;
    font-weight: 900 !important;
}

.mega-active-workspace-banner span {
    color: #431407 !important;
    font-weight: 800 !important;
}

/* Strong delegated-client warning banner */
.pf-alert.pf-alert--info {
    background: #ffedd5 !important;
    border: 2px solid #c2410c !important;
    border-left: 8px solid #7c2d12 !important;
    color: #431407 !important;
    box-shadow: 0 6px 18px rgba(124,45,18,0.16) !important;
}

.pf-alert.pf-alert--info .material-symbols-outlined {
    color: #9a3412 !important;
}

.pf-alert.pf-alert--info strong,
.pf-alert.pf-alert--info span,
.pf-alert.pf-alert--info {
    color: #431407 !important;
    font-weight: 700;
}

/* Strong warning banner inside mega client profile */
.mega-client-profile-warning {
    background: #fed7aa !important;
    border: 2px solid #ea580c !important;
    border-left: 10px solid #9a3412 !important;
    color: #431407 !important;
    align-items: flex-start !important;
}

.mega-client-profile-warning .material-symbols-outlined {
    color: #9a3412 !important;
    font-size: 1.4rem !important;
}

.mega-client-profile-warning strong {
    color: #7c2d12 !important;
    font-weight: 900 !important;
    letter-spacing: 0.03em;
}


/* ============================================================
   MOBILE & TABLET RESPONSIVE — PRESENTATION POLISH
   ------------------------------------------------------------
   What:
   Global responsive hardening for tables, cards, headers, filter
   bars, page wrappers and action groups.

   Why:
   The portal is delivered as a PWA on phones and tablets.
   Tables and cards previously broke out of the viewport or
   wrapped text badly because:
     - Some <table> wrappers (e.g. .table-responsive) had no CSS.
     - The body had `overflow: hidden` which clipped horizontal
       scrolling on long tables.
     - Wide flex/grid rows had no min-width:0 so children
       expanded past the screen.
     - Cards reused desktop padding on phones.

   Where:
   Applies portal-wide. Lives at the very end of portal.css so
   it overrides earlier desktop-first rules.
   ============================================================ */


/* ------------------------------------------------------------
   1. Generic safety: nothing should overflow the viewport
   ------------------------------------------------------------
   On desktop the existing rule keeps `body { overflow:hidden }`
   (so .main-content is the scroll container). On mobile the
   existing 768px breakpoint already switches body back to
   `overflow:auto`. Here we only add horizontal clipping at
   mobile/tablet widths to stop wide tables breaking the layout.
*/
.page {
    min-width: 0;
    max-width: 100vw;
}

.main-content {
    min-width: 0;
}

.container {
    min-width: 0;
    width: 100%;
}

@media (max-width: 1024px) {
    html, body {
        max-width: 100vw;
        overflow-x: hidden;
    }

    .main-content {
        overflow-x: hidden;
    }
}

/* Long emails, addresses, company names should wrap instead of
   pushing the parent wider than the screen. */
.card,
.table-container,
.tab-panel,
.detail-val,
.empty-state p {
    min-width: 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
}


/* ------------------------------------------------------------
   2. Table wrappers — guarantee horizontal scroll
   ------------------------------------------------------------
   The codebase has several wrapper names (.table-responsive,
   .table-wrap, .au-table-wrap, .mega-table-wrap, .xfs-table-wrap,
   .ap-table-scroll, .au-table-scroll, .table-wrapper, .table-scroll).
   Some had no CSS at all — meaning the table escaped on mobile.
   This single block makes them all behave the same way.
*/
.table-responsive,
.table-wrap,
.table-wrapper,
.table-scroll,
.au-table-wrap,
.au-table-scroll,
.ap-table-scroll,
.mega-table-wrap,
.xfs-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Faint scrollbar so users know the table can scroll sideways. */
.table-responsive::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar,
.table-wrapper::-webkit-scrollbar,
.table-scroll::-webkit-scrollbar,
.au-table-scroll::-webkit-scrollbar,
.ap-table-scroll::-webkit-scrollbar,
.mega-table-wrap::-webkit-scrollbar,
.xfs-table-wrap::-webkit-scrollbar {
    height: 6px;
}

.table-responsive::-webkit-scrollbar-thumb,
.table-wrap::-webkit-scrollbar-thumb,
.table-wrapper::-webkit-scrollbar-thumb,
.table-scroll::-webkit-scrollbar-thumb,
.au-table-scroll::-webkit-scrollbar-thumb,
.ap-table-scroll::-webkit-scrollbar-thumb,
.mega-table-wrap::-webkit-scrollbar-thumb,
.xfs-table-wrap::-webkit-scrollbar-thumb {
    background: var(--outline-variant);
    border-radius: 999px;
}


/* ------------------------------------------------------------
   3. Tablet breakpoint (≤ 1024px)
   ------------------------------------------------------------ */
@media (max-width: 1024px) {

    .main-content {
        padding: var(--space-5);
    }

    /* Stop multi-column grids on tablet from forcing horizontal
       scroll — single column reads cleaner on portrait tablets. */
    .dashboard-two-col {
        grid-template-columns: 1fr !important;
    }

    /* Filings/companies-style top action bars wrap instead of
       overflowing. */
    .page-header-row,
    .show-header,
    .admin-page-header,
    .admin-command-header {
        flex-wrap: wrap;
        gap: var(--space-3);
    }
}


/* ------------------------------------------------------------
   4. Phone / small tablet breakpoint (≤ 768px)
   ------------------------------------------------------------
   This is the breakpoint where the sidebar turns into a
   drawer. Everything stacks here.
*/
@media (max-width: 768px) {

    .main-content {
        padding: var(--space-4);
    }

    .container {
        gap: var(--space-4);
    }

    /* ── Page headers ─────────────────────────────────────── */
    .page-header-row,
    .show-header,
    .admin-page-header {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
    }

    .page-header-actions,
    .show-header-actions,
    .admin-page-header__actions,
    .admin-command-actions {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .page-title,
    .show-title,
    .admin-page-header__title {
        font-size: 20px;
    }

    /* ── Tables — tighter padding for phone width ─────────── */
    .data-table th,
    .data-table td,
    .table th,
    .table td,
    .admin-table th,
    .admin-table td,
    .au-table th,
    .au-table td,
    .ap-table th,
    .ap-table td,
    .mega-table th,
    .mega-table td,
    .xfs-table th,
    .xfs-table td {
        padding: 9px 10px;
        font-size: 13px;
    }

    .data-table th,
    .table th,
    .admin-table th,
    .au-table th,
    .ap-table th,
    .mega-table th,
    .xfs-table th {
        font-size: 11px;
        letter-spacing: 0.03em;
    }

    /* Allow company-number / mono cells to keep their typeface
       but break gracefully if they overflow. */
    .td-mono,
    .mono,
    .company-number-mono,
    .company-number-link,
    .au-email-link {
        word-break: break-all;
        overflow-wrap: anywhere;
    }

    /* ── Cards ────────────────────────────────────────────── */
    .card,
    .cardd,
    .profile-soft-card {
        padding: var(--space-4);
        border-radius: var(--radius-lg);
    }

    .card-title,
    .card-title-row {
        font-size: var(--text-body-lg);
        gap: var(--space-2);
    }

    /* Inner card headers (the small padded strip used in
       components/dashboard/companies-table & todo-list). */
    .table-container > div:first-child,
    .card > .card-header {
        padding: var(--space-3) var(--space-4) !important;
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    /* ── Filter bar ───────────────────────────────────────── */
    .filter-bar {
        padding: var(--space-3);
        gap: var(--space-3);
    }

    .filter-bar-controls {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .filter-bar-controls > * {
        width: 100%;
    }

    .filter-search,
    .filter-select {
        max-width: 100% !important;
        min-width: 0 !important;
        width: 100%;
    }

    /* Filter bar inner stat strip on filings page wraps too. */
    .filter-bar-controls form {
        width: 100%;
        flex-wrap: wrap;
    }

    /* ── Pagination ───────────────────────────────────────── */
    .pagination {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-2);
        padding: var(--space-3);
    }

    .pagination-controls {
        flex-wrap: wrap;
        justify-content: center;
    }

    /* ── Page-level grids that previously forced two cols ── */
    .dates-row,
    .admin-dashboard-grid,
    .admin-status-strip,
    .admin-operations-grid,
    .admin-filter-grid,
    .officer-grid,
    .info-grid,
    .panels-grid,
    .detail-grid,
    .company-layout,
    .form-grid,
    .dashboard-two-col {
        grid-template-columns: 1fr !important;
    }

    .detail-row {
        grid-template-columns: 1fr !important;
        gap: var(--space-1);
    }

    /* ── Tabs — horizontal scroll, no awkward wrap ────────── */
    .tab-bar {
        gap: var(--space-1);
        overflow-x: auto;
        flex-wrap: nowrap;
        white-space: nowrap;
        scrollbar-width: thin;
    }

    .tab-bar::-webkit-scrollbar { height: 0; }

    .tab-link {
        padding: var(--space-2) var(--space-3);
        font-size: 12px;
        flex-shrink: 0;
    }

    /* ── Mega active workspace banner ─────────────────────── */
    .mega-active-workspace-banner {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-2);
    }

    .mega-active-workspace-banner .btn {
        align-self: flex-start;
    }

    /* ── Action groups — keep buttons inline but wrap ─────── */
    .action-group {
        flex-wrap: wrap;
    }

    /* ── Page wrappers used by xml/incorporations flows ───── */
    .gridd,
    .row,
    .web-filing-two-column {
        grid-template-columns: 1fr !important;
    }

    .web-filing-two-column {
        flex-direction: column;
    }
}


/* ------------------------------------------------------------
   5. Narrow phone (≤ 480px)
   ------------------------------------------------------------ */
@media (max-width: 480px) {

    .main-content {
        padding: var(--space-3);
    }

    .container {
        gap: var(--space-3);
    }

    /* Stat cards collapse to 2-per-row on tiny screens so the
       numbers don't shrink to the point of being unreadable. */
    .stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: var(--space-2);
    }

    .stat-card {
        padding: var(--space-3) var(--space-3);
    }

    .stat-value {
        font-size: 20px;
    }

    .stat-label {
        font-size: 10px;
    }

    /* Page titles slim down so they don't push the topbar. */
    .topbar-title {
        font-size: 14px;
        max-width: 60vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Primary buttons inside forms become full-width pills. */
    .btn-primary,
    .btn-secondary {
        width: 100%;
        justify-content: center;
    }

    /* Page-header action rows: each button takes a full row so
       Sync All / Archived / Add Company stack neatly. */
    .page-header-actions .btn,
    .show-header-actions .btn,
    .show-header-actions form,
    .admin-page-header__actions .btn {
        width: 100%;
        justify-content: center;
    }

    /* Tables get smaller cell padding so 4–5 visible columns
       still fit before the user has to scroll sideways. */
    .data-table th,
    .data-table td,
    .table th,
    .table td,
    .admin-table th,
    .admin-table td {
        padding: 8px 8px;
        font-size: 12.5px;
    }

    /* Badges shouldn't be huge on phones either. */
    .badge {
        padding: 2px 6px;
        font-size: 10.5px;
    }

    /* Card headings tone down. */
    .card-title {
        font-size: 16px;
    }

    .show-title,
    .page-title,
    .admin-page-header__title {
        font-size: 18px;
    }

    /* Section subheadings used on company show etc. */
    .section-subheading {
        font-size: 14px;
    }
}


/* ------------------------------------------------------------
   6. Touch target hardening
   ------------------------------------------------------------
   On touch devices, pagination buttons and icon-only buttons
   used to be 24–28px and hard to tap. WCAG/Apple HIG aim for
   44px. We bump them only on coarse-pointer devices so the
   desktop UI stays compact.
*/
@media (hover: none) and (pointer: coarse) {

    .pg-btn,
    .icon-btn {
        min-width: 40px;
        min-height: 40px;
    }

    .btn,
    .btn-sm {
        min-height: 38px;
    }

    .tab-link {
        min-height: 40px;
    }
}
:root {
  --cf-teal:          #01696f;
  --cf-teal-dark:     #0c4e54;
  --cf-teal-xdark:    #0f3638;
  --cf-teal-glow:     rgba(1,105,111,.13);
  --cf-teal-light:    #e4f2f2;
  --cf-navy:          #001e40;
  --cf-navy-mid:      #003366;
  --cf-surface:       #ffffff;
  --cf-surface-2:     #f8fafc;
  --cf-surface-3:     #f1f5f9;
  --cf-bg:            #f0f4f8;
  --cf-border:        rgba(0,0,0,.07);
  --cf-border-md:     rgba(0,0,0,.11);
  --cf-text:          #0f172a;
  --cf-text-muted:    #475569;
  --cf-text-faint:    #94a3b8;
  --cf-success:       #065f46;
  --cf-success-bg:    #d1fae5;
  --cf-success-ring:  #6ee7b7;
  --cf-warn:          #92400e;
  --cf-warn-bg:       #fef3c7;
  --cf-warn-ring:     #fcd34d;
  --cf-error:         #991b1b;
  --cf-error-bg:      #fee2e2;
  --cf-error-ring:    #fca5a5;
  --cf-info-bg:       #eff6ff;
  --cf-info:          #1e40af;
  --cf-r-sm:          6px;
  --cf-r:             10px;
  --cf-r-lg:          14px;
  --cf-r-xl:          18px;
  --cf-r-pill:        999px;
  --cf-shadow-xs:     0 1px 2px rgba(0,0,0,.05);
  --cf-shadow-sm:     0 2px 6px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --cf-shadow:        0 4px 14px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.05);
  --cf-shadow-lg:     0 12px 32px rgba(0,0,0,.10), 0 3px 8px rgba(0,0,0,.06);
  --cf-ease:          cubic-bezier(0.16,1,0.3,1);
  --cf-t:             160ms;
}
.client-forms-shell,.client-form-shell{max-width:1180px;margin:0 auto;padding:32px 20px 72px;}
.client-forms-hero,.client-form-hero{background:linear-gradient(135deg,#001428 0%,#002955 55%,#01696f 100%);color:#fff;border-radius:var(--cf-r-xl);padding:32px 36px;margin-bottom:24px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;box-shadow:0 8px 32px rgba(0,20,40,.35),0 2px 6px rgba(0,20,40,.20);position:relative;overflow:hidden;}
.client-forms-hero::before,.client-form-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 85% 50%,rgba(1,105,111,.28) 0%,transparent 70%),radial-gradient(ellipse 30% 50% at 10% 20%,rgba(255,255,255,.06) 0%,transparent 60%);pointer-events:none;}
.client-forms-hero h1,.client-form-hero h1{margin:0;font-size:clamp(1.375rem,1rem + 1.5vw,1.875rem);font-weight:800;letter-spacing:-0.025em;line-height:1.15;position:relative;}
:root{--cf-teal:#01696f;--cf-teal-dark:#0c4e54;--cf-teal-xdark:#0f3638;--cf-teal-glow:rgba(1,105,111,.15);--cf-teal-light:#e4f2f2;--cf-surface:#ffffff;--cf-surface-2:#f8fafc;--cf-surface-3:#f1f5f9;--cf-border:rgba(0,0,0,.07);--cf-border-md:rgba(0,0,0,.11);--cf-text:#0f172a;--cf-text-muted:#475569;--cf-text-faint:#94a3b8;--cf-success:#065f46;--cf-success-bg:#d1fae5;--cf-success-ring:#6ee7b7;--cf-warn:#92400e;--cf-warn-bg:#fef3c7;--cf-warn-ring:#fcd34d;--cf-error:#991b1b;--cf-error-bg:#fee2e2;--cf-error-ring:#fca5a5;--cf-info-bg:#eff6ff;--cf-info:#1e40af;--cf-r:10px;--cf-r-lg:14px;--cf-r-xl:18px;--cf-r-pill:999px;--cf-shadow-xs:0 1px 2px rgba(0,0,0,.05);--cf-shadow-sm:0 2px 6px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);--cf-shadow:0 4px 14px rgba(0,0,0,.08),0 1px 3px rgba(0,0,0,.05);--cf-ease:cubic-bezier(0.16,1,0.3,1);--cf-t:160ms;}

/* ── SHELLS: both index and show — full width, no max-width cap ── */
.client-forms-shell,.client-form-shell{max-width:100%!important;width:100%!important;margin:0!important;padding:24px 28px 80px!important;box-sizing:border-box!important;}

/* ── HERO: clean white card with teal left-accent stripe ── */
.client-forms-hero,.client-form-hero{background:#ffffff!important;color:var(--cf-text)!important;border-radius:var(--cf-r-xl)!important;padding:24px 28px!important;margin-bottom:22px!important;display:flex!important;justify-content:space-between!important;align-items:center!important;gap:16px!important;flex-wrap:wrap!important;box-shadow:var(--cf-shadow-sm)!important;border:1px solid var(--cf-border-md)!important;position:relative!important;overflow:hidden!important;}
.client-forms-hero::after,.client-form-hero::after{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--cf-teal);border-radius:4px 0 0 4px;pointer-events:none;}
.client-forms-hero h1,.client-form-hero h1{margin:0!important;font-size:clamp(1.25rem,1rem + 1.2vw,1.625rem)!important;font-weight:800!important;letter-spacing:-0.02em!important;line-height:1.2!important;color:var(--cf-text)!important;}
.client-forms-hero p,.client-form-hero p{margin:6px 0 0!important;color:var(--cf-text-muted)!important;font-size:.9rem!important;line-height:1.55!important;max-width:700px!important;}
.client-form-hero .client-form-badge{flex-shrink:0;}

/* ── NEW FORM BUTTON ── */
.client-forms-btn{display:inline-flex!important;align-items:center!important;gap:7px!important;background:var(--cf-teal)!important;color:#ffffff!important;border-radius:var(--cf-r)!important;padding:11px 20px!important;font-weight:700!important;font-size:.875rem!important;text-decoration:none!important;white-space:nowrap!important;box-shadow:0 2px 8px rgba(1,105,111,.3)!important;transition:background var(--cf-t) var(--cf-ease),transform var(--cf-t) var(--cf-ease),box-shadow var(--cf-t) var(--cf-ease)!important;}
.client-forms-btn:hover{background:var(--cf-teal-dark)!important;color:#ffffff!important;transform:translateY(-1px)!important;box-shadow:0 4px 14px rgba(1,105,111,.35)!important;text-decoration:none!important;}
.client-forms-btn:active{transform:translateY(0)!important;}

/* ── INDEX TABLE CARD ── */
.client-forms-card{background:var(--cf-surface)!important;border:1px solid var(--cf-border-md)!important;border-radius:var(--cf-r-xl)!important;overflow:hidden!important;box-shadow:var(--cf-shadow)!important;width:100%!important;}
.client-forms-table{width:100%!important;border-collapse:collapse!important;font-size:.875rem!important;}
.client-forms-table thead{background:var(--cf-surface-2)!important;border-bottom:1px solid var(--cf-border-md)!important;}
.client-forms-table th{padding:12px 16px!important;color:var(--cf-text-faint)!important;font-size:.6875rem!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.07em!important;text-align:left!important;vertical-align:middle!important;white-space:nowrap!important;background:var(--cf-surface-2)!important;}
.client-forms-table td{padding:14px 16px!important;border-bottom:1px solid var(--cf-border)!important;vertical-align:top!important;color:var(--cf-text)!important;background:transparent!important;}
.client-forms-table tbody tr{transition:background var(--cf-t) var(--cf-ease)!important;}
.client-forms-table tbody tr:hover{background:#f0f9f9!important;}
.client-forms-table tbody tr:last-child td{border-bottom:none!important;}
.client-forms-main{color:var(--cf-text)!important;font-weight:700!important;font-size:.875rem!important;line-height:1.4!important;}
.client-forms-muted{color:var(--cf-text-muted)!important;font-size:.8rem!important;margin-top:3px!important;line-height:1.4!important;}
.client-forms-badge,.client-form-badge{display:inline-flex!important;align-items:center!important;border-radius:var(--cf-r-pill)!important;padding:4px 11px!important;font-size:.6875rem!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.055em!important;background:var(--cf-info-bg)!important;color:var(--cf-info)!important;border:1px solid rgba(30,64,175,.18)!important;white-space:nowrap!important;}
.client-forms-badge.submitted,.client-form-badge.submitted,.client-forms-badge.approved,.client-form-badge.approved{background:var(--cf-success-bg)!important;color:var(--cf-success)!important;border-color:var(--cf-success-ring)!important;}
.client-forms-badge.rejected,.client-form-badge.rejected{background:var(--cf-error-bg)!important;color:var(--cf-error)!important;border-color:var(--cf-error-ring)!important;}
.client-forms-badge.imported{background:#d1fae5!important;color:#065f46!important;border-color:#6ee7b7!important;}
.client-forms-badge.not-imported{background:var(--cf-warn-bg)!important;color:var(--cf-warn)!important;border-color:var(--cf-warn-ring)!important;}
.client-forms-actions{display:flex!important;flex-direction:column!important;gap:5px!important;}
.client-forms-link{color:var(--cf-teal)!important;text-decoration:none!important;font-weight:600!important;font-size:.8125rem!important;word-break:break-word!important;transition:color var(--cf-t) var(--cf-ease)!important;}
.client-forms-link:hover{color:var(--cf-teal-dark)!important;text-decoration:underline!important;}
.client-forms-actions button[type="submit"]{background:none!important;border:0!important;color:var(--cf-error)!important;font-weight:600!important;font-size:.8125rem!important;padding:0!important;cursor:pointer!important;}
.client-forms-actions button[type="submit"]:hover{color:#7f1d1d!important;}
.client-forms-empty{padding:56px 24px!important;color:var(--cf-text-muted)!important;text-align:center!important;font-size:.9375rem!important;font-weight:500!important;background:var(--cf-surface-2)!important;}
.client-forms-card>div:last-child{padding:14px 18px!important;border-top:1px solid var(--cf-border)!important;background:var(--cf-surface-2)!important;}

/* ── SHOW PAGE: FORCE TRUE FULL WIDTH ── */
/* Override the blade's own max-width:980px on .client-form-shell */
div.client-form-shell{max-width:none!important;width:100%!important;margin-left:0!important;margin-right:0!important;padding:24px 28px 80px!important;box-sizing:border-box!important;}
.client-form-card{background:var(--cf-surface)!important;border:1px solid var(--cf-border-md)!important;border-radius:var(--cf-r-xl)!important;padding:24px 26px!important;margin-bottom:16px!important;box-shadow:var(--cf-shadow-sm)!important;transition:box-shadow var(--cf-t) var(--cf-ease)!important;width:100%!important;box-sizing:border-box!important;}
.client-form-card:hover{box-shadow:var(--cf-shadow)!important;}
.client-form-card h2{margin:0 0 16px!important;color:var(--cf-text)!important;font-size:.9375rem!important;font-weight:800!important;letter-spacing:-.015em!important;padding-bottom:12px!important;border-bottom:1px solid var(--cf-border)!important;display:flex!important;align-items:center!important;gap:8px!important;}
.client-form-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;}
.client-form-item{background:var(--cf-surface-2)!important;border:1px solid var(--cf-border)!important;border-radius:var(--cf-r-lg)!important;padding:12px 14px!important;transition:border-color var(--cf-t) var(--cf-ease),background var(--cf-t) var(--cf-ease)!important;}
.client-form-item:hover{background:#f0f9f9!important;border-color:rgba(1,105,111,.2)!important;}
.client-form-label{color:var(--cf-text-faint)!important;font-size:.6875rem!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.07em!important;margin-bottom:5px!important;}
.client-form-value{color:var(--cf-text)!important;font-size:.875rem!important;font-weight:600!important;word-break:break-word!important;line-height:1.5!important;}
.client-form-value a{color:var(--cf-teal)!important;text-decoration:none!important;}
.client-form-value a:hover{color:var(--cf-teal-dark)!important;text-decoration:underline!important;}
.client-form-muted{color:var(--cf-text-muted)!important;font-weight:500!important;}
.client-form-link-box{background:var(--cf-surface-2)!important;border:1px dashed var(--cf-border-md)!important;border-radius:var(--cf-r-lg)!important;padding:14px 16px!important;word-break:break-all!important;font-size:.8125rem!important;transition:border-color var(--cf-t) var(--cf-ease)!important;}
.client-form-link-box:hover{border-color:var(--cf-teal)!important;background:var(--cf-teal-light)!important;}
.client-form-link{color:var(--cf-teal)!important;font-weight:600!important;text-decoration:none!important;}
.client-form-link:hover{color:var(--cf-teal-dark)!important;text-decoration:underline!important;}
.client-form-actions{display:flex!important;gap:8px!important;flex-wrap:wrap!important;margin-top:16px!important;align-items:center!important;}
.client-form-btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;border-radius:var(--cf-r)!important;padding:10px 18px!important;text-decoration:none!important;border:none!important;font-weight:700!important;font-size:.875rem!important;cursor:pointer!important;white-space:nowrap!important;transition:background var(--cf-t) var(--cf-ease),transform var(--cf-t) var(--cf-ease),box-shadow var(--cf-t) var(--cf-ease)!important;min-height:44px!important;}
.client-form-btn:hover{transform:translateY(-1px)!important;text-decoration:none!important;}
.client-form-btn:active{transform:translateY(0)!important;}
.client-form-btn-primary{background:var(--cf-teal)!important;color:#fff!important;box-shadow:0 2px 8px rgba(1,105,111,.28)!important;}
.client-form-btn-primary:hover{background:var(--cf-teal-dark)!important;color:#fff!important;}
.client-form-btn-secondary{background:var(--cf-surface-3)!important;color:var(--cf-text)!important;border:1px solid var(--cf-border-md)!important;}
.client-form-btn-secondary:hover{background:#e2e8f0!important;color:var(--cf-text)!important;}
.client-form-btn-approve{background:#065f46!important;color:#fff!important;box-shadow:0 2px 8px rgba(6,95,70,.28)!important;}
.client-form-btn-approve:hover{background:#064e3b!important;color:#fff!important;}
.client-form-btn-reject{background:var(--cf-error)!important;color:#fff!important;box-shadow:0 2px 8px rgba(153,27,27,.22)!important;}
.client-form-btn-reject:hover{background:#7f1d1d!important;color:#fff!important;}
.client-form-card select,.client-form-card input[type="url"],.client-form-card input[type="date"],.client-form-card input[type="text"]{width:100%!important;border:1px solid rgba(0,0,0,.14)!important;border-radius:var(--cf-r)!important;padding:10px 13px!important;font-size:.875rem!important;color:var(--cf-text)!important;background:var(--cf-surface)!important;appearance:none!important;-webkit-appearance:none!important;box-shadow:var(--cf-shadow-xs)!important;min-height:44px!important;transition:border-color var(--cf-t) var(--cf-ease),box-shadow var(--cf-t) var(--cf-ease)!important;}
.client-form-card select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 11px center!important;padding-right:32px!important;}
.client-form-card select:focus,.client-form-card input:focus{outline:none!important;border-color:var(--cf-teal)!important;box-shadow:0 0 0 3px var(--cf-teal-glow)!important;}

/* ── RESPONSIVE + PWA ── */
@media(max-width:768px){
  .client-forms-shell,.client-form-shell,div.client-form-shell{padding:16px 12px 88px!important;}
  .client-forms-hero,.client-form-hero{padding:18px 16px!important;flex-direction:column!important;align-items:flex-start!important;gap:14px!important;}
  .client-forms-hero h1,.client-form-hero h1{font-size:1.2rem!important;}
  .client-forms-btn{width:100%!important;justify-content:center!important;}
  .client-form-grid{grid-template-columns:1fr!important;}
  .client-form-card{padding:16px!important;border-radius:14px!important;}
  .client-form-actions{flex-direction:column!important;align-items:stretch!important;}
  .client-form-btn{width:100%!important;justify-content:center!important;min-height:48px!important;font-size:.9375rem!important;}
  .client-forms-table,.client-forms-table thead,.client-forms-table tbody,.client-forms-table th,.client-forms-table td,.client-forms-table tr{display:block!important;}
  .client-forms-table thead{display:none!important;}
  .client-forms-table tr{border-bottom:1px solid var(--cf-border-md)!important;padding:12px 0!important;}
  .client-forms-table td{border-bottom:none!important;padding:5px 14px!important;}
  .client-forms-table td::before{content:attr(data-label);display:block;font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--cf-text-faint);margin-bottom:2px;}
}
@media(max-width:480px){
  .client-forms-hero,.client-form-hero{border-radius:12px!important;padding:16px 14px!important;}
  .client-form-card{border-radius:12px!important;padding:14px!important;margin-bottom:12px!important;}
  .client-form-card h2{font-size:.875rem!important;}
  .client-form-item{padding:10px 12px!important;}
  .client-form-label{font-size:.625rem!important;}
  .client-form-value{font-size:.8125rem!important;}
}
@supports(padding-bottom:env(safe-area-inset-bottom)){
  .client-forms-shell,.client-form-shell,div.client-form-shell{padding-bottom:calc(80px + env(safe-area-inset-bottom))!important;}
}

/* ============================================================
   BILLING & SUBSCRIPTION
   Gateway-agnostic billing UI. Uses the shared design tokens
   and .btn / .badge components so it stays on-brand and theme-
   aware (light + dark).
   ============================================================ */
.bill-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4) var(--space-16);
}

.bill-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 13px;
  color: var(--on-surface-variant);
  margin-bottom: var(--space-5);
}
.bill-breadcrumb a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--primary-container);
  font-weight: 600;
}
.bill-breadcrumb a:hover { color: var(--primary); }
.bill-breadcrumb .material-symbols-outlined { font-size: 16px; }

.bill-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}
.bill-header h1 {
  margin: 0 0 6px;
  font-size: 24px;
  font-weight: 800;
  color: var(--on-surface);
  letter-spacing: -0.01em;
}
.bill-header p {
  margin: 0;
  font-size: 14px;
  color: var(--on-surface-variant);
  line-height: 1.5;
  max-width: 560px;
}

/* Alerts ---------------------------------------------------- */
.bill-alert {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
  font-size: 13px;
  font-weight: 500;
  border: 1px solid transparent;
}
.bill-alert .material-symbols-outlined { font-size: 18px; flex-shrink: 0; }
.bill-alert--success { background: #e6f4ea; color: #137333; border-color: #ceead6; }
.bill-alert--error   { background: #fce8e6; color: #c5221f; border-color: #fad2cf; }
.bill-alert--info    { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
body.dark .bill-alert--success { background: rgba(34,197,94,.12); color: #86efac; border-color: rgba(34,197,94,.25); }
body.dark .bill-alert--error   { background: rgba(239,68,68,.12);  color: #fca5a5; border-color: rgba(239,68,68,.25); }
body.dark .bill-alert--info    { background: rgba(59,130,246,.12); color: #93c5fd; border-color: rgba(59,130,246,.25); }

/* Panels ---------------------------------------------------- */
.bill-panel {
  background: var(--surface-container-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: var(--space-6);
}
.bill-panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--outline-variant);
  background: var(--primary);
}
.bill-panel-head .material-symbols-outlined { font-size: 18px; color: var(--primary-fixed-dim); }
.bill-panel-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
}
.bill-panel-body { padding: var(--space-6); }

/* Current subscription summary ------------------------------ */
.bill-current {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr auto;
  gap: var(--space-5);
  align-items: center;
}
.bill-current__block { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bill-current__label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
}
.bill-current__value {
  font-size: 18px;
  font-weight: 800;
  color: var(--on-surface);
  line-height: 1.2;
}
.bill-current__sub { font-size: 12px; color: var(--on-surface-variant); }
.bill-current__cta { display: flex; justify-content: flex-end; }

.bill-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: 13px;
  line-height: 1.5;
  background: #fff7ed;
  color: #b45309;
  border: 1px solid #fed7aa;
}
.bill-notice .material-symbols-outlined { font-size: 18px; }
body.dark .bill-notice { background: rgba(245,158,11,.12); color: #fcd34d; border-color: rgba(245,158,11,.25); }

/* Pricing grid ---------------------------------------------- */
.bill-section-title {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  margin: 0 0 var(--space-4);
}
.bill-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(244px, 1fr));
  gap: var(--space-5);
  margin-bottom: var(--space-8);
}
.bill-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface-container-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.bill-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 30, 64, .10);
  border-color: var(--primary-fixed-dim);
}
.bill-card--current {
  border-color: var(--primary-container);
  box-shadow: 0 0 0 1px var(--primary-container);
}
.bill-card__tag {
  position: absolute;
  top: -11px;
  left: var(--space-6);
  padding: 3px 10px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--primary-container);
  border-radius: var(--radius-full);
}
.bill-card__name {
  font-size: 17px;
  font-weight: 800;
  color: var(--on-surface);
  margin: 0 0 2px;
}
.bill-card__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: var(--space-3) 0 var(--space-1);
}
.bill-card__amount {
  font-size: 32px;
  font-weight: 800;
  color: var(--on-surface);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.bill-card__interval { font-size: 13px; color: var(--on-surface-variant); font-weight: 600; }
.bill-card__features {
  list-style: none;
  margin: var(--space-4) 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
}
.bill-card__features li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--on-surface-variant);
  line-height: 1.4;
}
.bill-card__features .material-symbols-outlined {
  font-size: 17px;
  color: #137333;
  flex-shrink: 0;
}
.bill-card__cta { margin-top: auto; }
.bill-card__cta .btn { width: 100%; }
.bill-card__cta form { margin: 0; }
.bill-card__current-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-size: 12px;
  font-weight: 700;
  color: #137333;
  background: #e6f4ea;
  border: 1px solid #ceead6;
}
body.dark .bill-card__current-pill { background: rgba(34,197,94,.12); color: #86efac; border-color: rgba(34,197,94,.25); }
.bill-card__muted {
  font-size: 12px;
  color: var(--on-surface-variant);
  text-align: center;
  padding: var(--space-2) 0;
}

/* Invoice table --------------------------------------------- */
.bill-invoices { width: 100%; border-collapse: collapse; }
.bill-invoices thead tr { background: var(--surface-container); }
.bill-invoices th {
  text-align: left;
  padding: 10px 16px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  white-space: nowrap;
}
.bill-invoices td {
  padding: 12px 16px;
  font-size: 13px;
  color: var(--on-surface);
  border-bottom: 1px solid var(--outline-variant);
}
.bill-invoices tbody tr:last-child td { border-bottom: 0; }
.bill-invoices tbody tr:hover td { background: var(--surface-container-low); }
.bill-invoices__amount { font-variant-numeric: tabular-nums; font-weight: 700; }

.bill-empty {
  padding: var(--space-10) var(--space-6);
  text-align: center;
  color: var(--on-surface-variant);
}
.bill-empty .material-symbols-outlined {
  font-size: 42px;
  opacity: .4;
  display: block;
  margin: 0 auto var(--space-3);
}
.bill-empty h3 { margin: 0 0 4px; font-size: 15px; font-weight: 700; color: var(--on-surface); }
.bill-empty p { margin: 0; font-size: 13px; }

.bill-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  font-size: 12px;
  color: var(--on-surface-variant);
  margin-top: var(--space-6);
}
.bill-foot .material-symbols-outlined { font-size: 15px; }

@media (max-width: 760px) {
  .bill-current { grid-template-columns: 1fr 1fr; }
  .bill-current__cta { grid-column: 1 / -1; justify-content: stretch; }
  .bill-current__cta .btn { width: 100%; }
}
@media (max-width: 460px) {
  .bill-current { grid-template-columns: 1fr; }
}

/* ============================================================
   ADMIN BILLING PANEL
   Operational subscriptions / checkouts / webhook log.
   Reuses .badge, .show-header, .tab-bar; tokens only.
   ============================================================ */
.badm-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.badm-stat {
  background: var(--surface-container-lowest);
  border: 1px solid var(--outline-variant);
  border-top: 3px solid var(--primary-container);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.badm-stat__label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
}
.badm-stat__value {
  font-size: 26px;
  font-weight: 800;
  color: var(--on-surface);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.badm-stat__meta { font-size: 11px; color: var(--on-surface-variant); }
.badm-stat--accent .badm-stat__value { color: var(--primary-container); }
.badm-stat--good .badm-stat__value { color: #137333; }
.badm-stat--warn .badm-stat__value { color: #b45309; }
.badm-stat--bad  .badm-stat__value { color: #c5221f; }

.badm-panel {
  background: var(--surface-container-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-6);
}
.badm-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--outline-variant);
  background: var(--primary);
}
.badm-panel__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
}
.badm-panel__title .material-symbols-outlined { font-size: 18px; color: var(--primary-fixed-dim); }

.badm-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}
.badm-filters select,
.badm-filters input {
  height: 32px;
  font-size: 12px;
  padding: 0 8px;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  background: var(--surface-container-lowest);
  color: var(--on-surface);
}
.badm-filters button {
  height: 32px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 700;
  border-radius: var(--radius-md);
  background: var(--primary-container);
  color: #fff;
  border: none;
  cursor: pointer;
}

.badm-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.badm-table { width: 100%; border-collapse: collapse; min-width: 760px; }
.badm-table thead tr { background: var(--surface-container); }
.badm-table th {
  text-align: left;
  padding: 10px 14px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  white-space: nowrap;
}
.badm-table td {
  padding: 11px 14px;
  font-size: 12.5px;
  color: var(--on-surface);
  border-bottom: 1px solid var(--outline-variant);
  vertical-align: middle;
}
.badm-table tbody tr:last-child td { border-bottom: 0; }
.badm-table tbody tr:hover td { background: var(--surface-container-low); }
.badm-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--on-surface-variant);
}
.badm-num { font-variant-numeric: tabular-nums; font-weight: 700; }

.badm-empty {
  padding: var(--space-10) var(--space-6);
  text-align: center;
  color: var(--on-surface-variant);
}
.badm-empty .material-symbols-outlined {
  font-size: 40px; opacity: .35; display: block; margin: 0 auto var(--space-2);
}
.badm-pagination {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--outline-variant);
  display: flex;
  justify-content: flex-end;
}
.badm-grid2 {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-5);
}
@media (max-width: 900px) { .badm-grid2 { grid-template-columns: 1fr; } }


/* ═══════════════════════════════════════════════════════════
   GLOBAL MOBILE RESPONSIVENESS
   Fixes applied platform-wide so individual views do not each
   need their own media queries for common patterns.
   ═══════════════════════════════════════════════════════════ */

/* 1. All table cells break long strings (emails, refs, company
      numbers, URLs) instead of overflowing their column. */
td, th {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* 2. Responsive form-grid utility classes.
      Use these on new forms; existing inline grids are handled
      by the attribute selectors below. */
.form-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.form-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.form-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }

@media (max-width: 640px) {

    /* 3. Cards scroll horizontally — tables inside cards never
          push content outside the viewport. Overrides the
          overflow:hidden inline style used on zero-padding cards. */
    .card { overflow-x: auto !important; }

    /* 4. Utility classes collapse to single column on small screens. */
    .form-grid-4,
    .form-grid-3,
    .form-grid-2 { grid-template-columns: 1fr; }

    /* 5. Collapse any inline multi-column form grid. The substring
          "1fr 1fr" appears in 2-col, 3-col and 4-col patterns so a
          single selector covers all of them. */
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* 6. Address-lookup rows keep the text input and action button
          side-by-side even on the narrowest screens. */
    .uk-address-lookup {
        grid-template-columns: 1fr auto !important;
    }
}