/* ==========================================================================
   VINAYAK SHIPPING LOGISTICS (VSA & VSL)
   Corporate Enterprise Design System (Clean White / Light Slate Theme)
   Style: Precision B2B Enterprise ERP (Stripe / Linear / Flexport standard)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* Surface & Canvas Colors (Pure White & Light Slates) */
  --bg-canvas: #F8FAFC;
  --bg-surface: #FFFFFF;
  --bg-subtle: #F1F5F9;
  --bg-hover: #F8FAFC;
  --bg-active: #E2E8F0;

  /* Enterprise Border Colors */
  --border-light: #E2E8F0;
  --border-medium: #CBD5E1;
  --border-focus: #2563EB;

  /* Typography & Ink */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --text-main: #0F172A;
  --text-secondary: #3E4C61;
  --text-muted: #55637A;   /* darkened from #64748B for small-label contrast */
  --text-disabled: #94A3B8;
  --text-white: #FFFFFF;

  /* Brand Accents (Corporate Navy & Cobalt) */
  --brand-navy: #0F172A;
  --brand-primary: #1E40AF;
  --brand-primary-hover: #1D4ED8;
  --brand-primary-light: #EFF6FF;
  --brand-primary-border: #BFDBFE;

  --vsl-accent: #2563EB;
  --vsl-subtle: #EFF6FF;
  --vsl-border: #BFDBFE;

  --vsa-accent: #4F46E5;
  --vsa-subtle: #EEF2FF;
  --vsa-border: #C7D2FE;

  /* Status Colors */
  --status-success: #059669;
  --status-success-bg: #ECFDF5;
  --status-success-border: #A7F3D0;

  --status-warning: #D97706;
  --status-warning-bg: #FFFBEB;
  --status-warning-border: #FDE68A;

  --status-danger: #DC2626;
  --status-danger-bg: #FEF2F2;
  --status-danger-border: #FECACA;

  --status-info: #0284C7;
  --status-info-bg: #F0F9FF;
  --status-info-border: #BAE6FD;

  /* Elevation & Geometry */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.07), 0 1px 2px 0 rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
  --shadow-dropdown: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);

  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

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

html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg-canvas);
  color: var(--text-main);
  font-size: 13px;
  line-height: 1.5;
  /* `-webkit-font-smoothing: antialiased` thins text badly on Windows and
     was the cause of the washed-out small labels reported from a Windows
     client machine. macOS keeps its grayscale hint; Windows renders normally. */
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

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

/* ==========================================================================
   ENTERPRISE TOP NAVIGATION BAR
   ========================================================================== */

.top-navbar {
  background-color: var(--bg-surface);
  border-bottom: 1px solid var(--border-light);
  height: 60px;
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  gap: 12px;
}

.navbar-brand-group {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.brand-shield-logo {
  width: 34px;
  height: 34px;
  background: var(--brand-navy);
  color: #FFFFFF;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}

.brand-text-block {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  white-space: nowrap;
}

.brand-company-name {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--brand-navy);
  line-height: 1.2;
  white-space: nowrap;
}

.brand-company-sub {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* Central Entity Switcher Segmented Control */
.entity-segmented-control {
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 3px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.entity-segment-btn {
  border: none;
  background: transparent;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition-fast);
}

.entity-segment-btn:hover {
  color: var(--text-main);
}

.entity-segment-btn.active {
  background: var(--bg-surface);
  color: var(--brand-navy);
  box-shadow: var(--shadow-xs);
  border: 1px solid var(--border-light);
}

.entity-tag-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.entity-tag-dot.vsl {
  background-color: var(--vsl-accent);
}
.entity-tag-dot.vsa {
  background-color: var(--vsa-accent);
}

/* Navbar Right Controls */
.navbar-actions-group {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 1;
  min-width: 0;
}

.port-telemetry-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
}

.telemetry-pulse {
  width: 6px;
  height: 6px;
  background-color: var(--status-success);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.15);
}

.user-profile-widget {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 12px;
  border-left: 1px solid var(--border-light);
}

.user-avatar-initials {
  width: 32px;
  height: 32px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-main);
}

.user-text-info {
  display: flex;
  flex-direction: column;
}

.user-display-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.2;
}

.user-display-role {
  font-size: 10px;
  color: var(--text-muted);
}

/* ==========================================================================
   APP SHELL: SIDEBAR & MAIN VIEW
   ========================================================================== */

.app-container {
  display: flex;
  min-height: calc(100vh - 60px);
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  position: relative;
}

.app-sidebar {
  width: 240px;
  min-width: 240px;
  background: var(--bg-surface);
  border-right: 1px solid var(--border-light);
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-shrink: 0;
  position: sticky;
  top: 60px;
  height: calc(100vh - 60px);
  overflow-y: auto;
  z-index: 100;
}

.nav-menu-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  list-style: none;
}

.nav-group-heading {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 12px 10px 6px;
}

.nav-menu-item a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 500;
  transition: var(--transition-fast);
}

.nav-menu-item a:hover {
  background-color: var(--bg-subtle);
  color: var(--text-main);
}

.nav-menu-item a.active {
  background-color: var(--brand-primary-light);
  color: var(--brand-primary);
  font-weight: 600;
}

.nav-item-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  flex-shrink: 0;
}

.nav-badge-pill {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: var(--radius-full);
}

.nav-badge-pill.danger {
  background: var(--status-danger-bg);
  color: var(--status-danger);
  border: 1px solid var(--status-danger-border);
}

.nav-badge-pill.warning {
  background: var(--status-warning-bg);
  color: var(--status-warning);
  border: 1px solid var(--status-warning-border);
}

.nav-badge-pill.neutral {
  background: var(--bg-subtle);
  color: var(--text-secondary);
  border: 1px solid var(--border-light);
}

/* Sidebar Footer Info Box */
.sidebar-info-box {
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 10px;
  font-size: 11px;
}

.sidebar-info-title {
  font-weight: 600;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.sidebar-info-desc {
  color: var(--text-muted);
  line-height: 1.4;
}

/* Main Content Wrapper */
.main-stage {
  flex: 1 1 auto;
  min-width: 0;
  background-color: var(--bg-canvas);
  padding: 24px 28px 60px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Page Sub-Header */
.page-subheader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.subheader-left h1 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  flex-wrap: wrap;          /* a long status badge drops to its own line */
  gap: 8px;
}

.subheader-left p {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.subheader-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ==========================================================================
   CORPORATE BUTTONS & CONTROLS
   ========================================================================== */

.corp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: var(--transition-fast);
  white-space: nowrap;
}

.corp-btn-primary {
  background-color: var(--brand-primary);
  color: #FFFFFF;
  border-color: var(--brand-primary);
}
.corp-btn-primary:hover {
  background-color: var(--brand-primary-hover);
  border-color: var(--brand-primary-hover);
}

.corp-btn-secondary {
  background-color: var(--bg-surface);
  color: var(--text-main);
  border-color: var(--border-medium);
  box-shadow: var(--shadow-xs);
}
.corp-btn-secondary:hover {
  background-color: var(--bg-subtle);
  border-color: var(--border-medium);
}

.corp-btn-sm {
  padding: 4px 10px;
  font-size: 11.5px;
}

.corp-btn-danger {
  background-color: var(--status-danger);
  color: #FFFFFF;
  border-color: var(--status-danger);
}
.corp-btn-danger:hover {
  background-color: #B91C1C;
}

/* ==========================================================================
   STATUTORY NOTICE & ALERT BANNERS
   ========================================================================== */

.statutory-banner {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--shadow-xs);
}

.statutory-banner.critical {
  border-left: 4px solid var(--status-danger);
  background: #FFF5F5;
  border-color: var(--status-danger-border);
  border-left-width: 4px;
}

.statutory-banner.warning {
  border-left: 4px solid var(--status-warning);
  background: #FFFDF5;
  border-color: var(--status-warning-border);
  border-left-width: 4px;
}

.banner-content-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.banner-icon-badge {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.banner-icon-badge.danger {
  background: #FEE2E2;
  color: var(--status-danger);
}
.banner-icon-badge.warning {
  background: #FEF3C7;
  color: var(--status-warning);
}

.banner-title-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
}

.banner-body-text {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 1px;
}

/* Ticking Countdown Pill */
.ticking-countdown {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--radius-xs);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ticking-countdown.danger {
  background: #FEE2E2;
  color: var(--status-danger);
  border: 1px solid var(--status-danger-border);
}
.ticking-countdown.warning {
  background: #FEF3C7;
  color: var(--status-warning);
  border: 1px solid var(--status-warning-border);
}
.ticking-countdown.safe {
  background: #D1FAE5;
  color: var(--status-success);
  border: 1px solid var(--status-success-border);
}

/* ==========================================================================
   METRIC STATS TILES (CORPORATE KPI GRID)
   ========================================================================== */

.metrics-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.metric-tile {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.metric-tile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.metric-tile-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.metric-tile-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-xs);
  background: var(--bg-subtle);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.metric-tile.danger .metric-tile-icon {
  background: #FEE2E2;
  color: var(--status-danger);
}
.metric-tile.warning .metric-tile-icon {
  background: #FEF3C7;
  color: var(--status-warning);
}
.metric-tile.success .metric-tile-icon {
  background: #D1FAE5;
  color: var(--status-success);
}

.metric-tile-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.metric-tile-footer {
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ==========================================================================
   CORPORATE CARDS & TABLES
   ========================================================================== */

.corp-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  margin-bottom: 24px;
}

.corp-card-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.corp-card-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 8px;
}

.corp-card-body {
  padding: 20px;
}

.corp-card-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--border-light);
  background: var(--bg-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}

/* Clean Enterprise Table */
.corp-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.corp-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.corp-table th {
  background: var(--bg-subtle);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-light);
  white-space: nowrap;
}

.corp-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-light);
  font-size: 12.5px;
  color: var(--text-main);
  vertical-align: middle;
}

.corp-table tbody tr {
  transition: var(--transition-fast);
}

.corp-table tbody tr:hover {
  background-color: #F8FAFC;
}

.corp-code-badge {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--brand-primary);
}

/* Status Badges */
.corp-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: var(--radius-xs);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

.corp-badge-success {
  background: var(--status-success-bg);
  color: var(--status-success);
  border: 1px solid var(--status-success-border);
}

.corp-badge-warning {
  background: var(--status-warning-bg);
  color: var(--status-warning);
  border: 1px solid var(--status-warning-border);
}

.corp-badge-danger {
  background: var(--status-danger-bg);
  color: var(--status-danger);
  border: 1px solid var(--status-danger-border);
}

.corp-badge-info {
  background: var(--status-info-bg);
  color: var(--status-info);
  border: 1px solid var(--status-info-border);
}

.corp-badge-neutral {
  background: var(--bg-subtle);
  color: var(--text-secondary);
  border: 1px solid var(--border-light);
}

/* Two-column layout grid */
.corp-grid-2col {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 20px;
}

.corp-grid-2col > * {
  min-width: 0;
}

@media (max-width: 1200px) {
  .corp-grid-2col {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   FORM CONTROLS & MODALS
   ========================================================================== */

.corp-form-group {
  margin-bottom: 14px;
}

.corp-label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.corp-input, .corp-select {
  width: 100%;
  padding: 7px 10px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--text-main);
  background: var(--bg-surface);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
}

.corp-input:focus, .corp-select:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Modal Overlay */
.corp-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(4px);
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.corp-modal-overlay.active {
  display: flex;
}

.corp-modal-box {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-dropdown);
  width: 100%;
  max-width: 620px;
  max-height: 90vh;
  overflow-y: auto;
}

.corp-modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.corp-modal-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
}

.corp-modal-close-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xs);
}
.corp-modal-close-btn:hover {
  background: var(--bg-subtle);
  color: var(--text-main);
}

.corp-modal-body {
  padding: 20px;
}

.corp-modal-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--border-light);
  background: var(--bg-subtle);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}

/* Toast System */
.corp-toast-stack {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.corp-toast {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-left: 4px solid var(--brand-primary);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  box-shadow: var(--shadow-lg);
  font-size: 12.5px;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 300px;
  max-width: 440px;
  animation: slideToast 200ms ease-out;
}

.corp-toast.success {
  border-left-color: var(--status-success);
}
.corp-toast.danger {
  border-left-color: var(--status-danger);
}
.corp-toast.warning {
  border-left-color: var(--status-warning);
}

@keyframes slideToast {
  from { transform: translateX(20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* ==========================================================================
   ROLE SWITCHER & NAVIGATION DRAWER COMPONENTS
   ========================================================================== */

.nav-drawer-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text-secondary);
  padding: 8px;
  margin-right: 6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}
.nav-drawer-toggle:hover {
  background-color: var(--bg-subtle);
  color: var(--text-main);
}

.nav-scrim {
  position: fixed;
  inset: 60px 0 0 0;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(2px);
  z-index: 1100;
  display: none;
}

.nav-scrim.is-active {
  display: block;
}

.role-switcher-widget {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
}

.role-select-dropdown {
  background: transparent;
  border: none;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-main);
  cursor: pointer;
  outline: none;
}

/* Accessibility Focus Visible */
:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ==========================================================================
   RESPONSIVE LAYER — max-width overrides for Tablet & Mobile (below 1024px)
   ========================================================================== */

@media (max-width: 1023px) {
  .nav-drawer-toggle {
    display: inline-flex;
  }

  .app-container {
    display: block;
  }

  .app-sidebar {
    position: fixed;
    top: 60px;
    left: 0;
    bottom: 0;
    width: 264px;
    transform: translateX(-100%);
    transition: transform 220ms ease;
    z-index: 1200;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
  }

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

  .main-stage {
    padding: 16px 16px 72px;
  }

  .corp-grid-2col {
    grid-template-columns: 1fr;
  }

  .chat-layout-grid {
    grid-template-columns: 1fr !important;
    height: auto !important;
  }

  .context-panel {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-sidebar {
    transition: none;
  }
}

/* Mobile & Small Screen (< 768px) */
@media (max-width: 767px) {
  .top-navbar {
    padding: 0 8px;
    gap: 6px;
    overflow-x: hidden;
    max-width: 100vw;
  }

  .navbar-brand-group {
    gap: 6px;
    flex-shrink: 1;
    min-width: 0;
  }

  .brand-company-sub,
  .port-telemetry-badge,
  .user-text-info {
    display: none !important;
  }

  .brand-company-name {
    font-size: 11.5px;
    white-space: nowrap;
    max-width: none;
  }

  .entity-segmented-control {
    margin-left: auto;
    gap: 2px;
    padding: 2px;
    flex-shrink: 0;
  }

  .entity-segment-btn {
    padding: 4px 6px;
    font-size: 10px;
  }

  .navbar-actions-group {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
  }

  .navbar-actions-group .user-profile-widget:not(:has(#user-role-select)) {
    display: none !important;
  }

  #user-role-select {
    max-width: 100px;
    font-size: 10px;
    padding: 2px 4px;
    height: 28px;
  }

  .page-subheader {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .subheader-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .subheader-actions .corp-btn {
    flex: 1 1 auto;
    min-height: 44px;
  }

  /* Metric tiles 2-col on phone */
  .metrics-tile-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .metric-tile {
    padding: 12px;
  }

  .metric-tile-value {
    font-size: 20px;
  }

  .statutory-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .banner-content-wrap {
    flex-direction: column;
    gap: 8px;
  }

  .ticking-countdown {
    width: 100%;
    text-align: center;
  }

  .corp-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /* Tables collapse to Labelled Cards */
  .corp-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

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

  .corp-table tr {
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    margin-bottom: 12px;
    padding: 6px 0;
  }

  .corp-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 9px 14px;
    border-bottom: 1px dashed var(--border-light);
    font-size: 13px;
  }

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

  .corp-table td::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    flex-shrink: 0;
  }

  .corp-table td:empty {
    display: none;
  }

  .corp-table-wrapper {
    overflow-x: visible;
  }

  /* Wide reference tables scrollable */
  .corp-table-wrapper.is-scrollable {
    overflow-x: auto;
  }
  .corp-table-wrapper.is-scrollable .corp-table {
    display: table;
    min-width: 640px;
  }

  /* Modals as Bottom Sheets */
  .corp-modal-overlay {
    padding: 0;
    align-items: flex-end;
  }

  .corp-modal-box {
    width: 100%;
    max-width: 100%;
    max-height: 92vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    animation: sheetUp 240ms ease;
  }

  .corp-modal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .corp-modal-footer {
    position: sticky;
    bottom: 0;
    background: var(--bg-surface);
  }

  .corp-modal-footer .corp-btn {
    flex: 1;
    min-height: 46px;
  }

  /* Input fields 16px to prevent iOS Safari auto-zoom */
  .corp-input, .corp-select, textarea {
    font-size: 16px;
    min-height: 44px;
  }

  /* Mobile Bottom Navigation for Field Ops */
  .field-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--bg-surface);
    border-top: 1px solid var(--border-light);
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 900;
  }

  .field-bottom-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 4px;
    font-size: 10px;
    font-weight: 500;
    min-height: 54px;
    color: var(--text-muted);
  }

  .field-bottom-nav a.active {
    color: var(--brand-primary);
    font-weight: 600;
  }

  .corp-toast-stack {
    left: 12px;
    right: 12px;
    bottom: 12px;
    top: auto;
  }

  .corp-toast {
    min-width: 0;
    width: 100%;
  }
}

@keyframes sheetUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@media (max-width: 419px) {
  .brand-text-block {
    display: none;
  }
  .metrics-tile-grid {
    grid-template-columns: 1fr;
  }
  .top-navbar {
    padding: 0 4px;
    gap: 4px;
  }
  .entity-segment-btn {
    padding: 3px 5px;
    font-size: 9.5px;
  }
  #user-role-select {
    max-width: 80px;
    font-size: 9px;
  }
}

@media (max-width: 375px) {
  .brand-shield-logo {
    width: 28px;
    height: 28px;
    font-size: 11px;
  }
  /* Reclaim width from padding, never from the hit area. The drawer toggle is
     the primary navigation control and stays at the 44px touch minimum even on
     a 320px screen — shrinking it here would degrade the smallest devices,
     which is precisely where a mis-tap costs the most. */
  .nav-drawer-toggle {
    min-width: 44px;
    min-height: 44px;
    padding: 4px;
    margin-right: 0;
  }
  .entity-segment-btn {
    padding: 3px 4px;
    font-size: 8.5px;
  }
  #user-role-select {
    max-width: 70px;
    font-size: 8.5px;
  }
}

@media (min-width: 1600px) {
  .main-stage > * {
    max-width: 1560px;
    margin-inline: auto;
  }
}


/* ==========================================================================
   TOUCH TARGET & INPUT SIZING ENFORCEMENT (mobile)
   Appended last so it wins the cascade over component rules and the inline
   font-size on the role switcher. WCAG 2.5.8 asks for 24px minimum; 44px is
   the Apple/Android guidance and the right size for gloved hands in a
   container yard, which is where field-ops is actually used.
   ========================================================================== */
@media (max-width: 767px) {

  /* Every interactive control clears 44px, including the small table buttons. */
  .corp-btn,
  .corp-btn-sm,
  button,
  .nav-menu-item a,
  .corp-modal-close-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Small buttons keep their compact type but gain a usable hit area. */
  .corp-btn-sm {
    padding: 10px 12px;
    font-size: 12.5px;
  }

  /* Buttons stacked inside a table cell should fill the row width. */
  .corp-table td .corp-btn,
  .corp-table td .corp-btn-sm {
    width: 100%;
  }
  .corp-table td > div[style*="display: flex"] {
    width: 100%;
    gap: 8px !important;
  }

  /* 16px minimum on every text-entry control: anything smaller makes iOS
     Safari zoom the viewport on focus and it does not zoom back out. The
     role switcher carries an inline 11px, so this has to be !important. */
  .corp-input,
  .corp-select,
  select,
  input,
  textarea {
    font-size: 16px !important;
    min-height: 44px;
  }

  /* The navbar role switcher stays compact in width but legible in type. */
  #user-role-select {
    max-width: 46vw;
    padding: 6px 8px !important;
  }
}

/* ==========================================================================
   QA REMEDIATION COMPONENTS (2026-09)
   Styles for the parts that replaced hardcoded markup: the derived GM digest,
   the derived P&L panel, the docket filter bar, the job detail modal, the
   capability-gated placeholder, empty states and validation feedback.
   ========================================================================== */

/* --- Capability-gated regions --------------------------------------------- */
.restricted-placeholder {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border: 1px dashed var(--border-medium);
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
}
.restricted-placeholder svg { flex: 0 0 auto; opacity: 0.75; }

/* --- GM daily digest ------------------------------------------------------ */
.gm-digest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: 12px;
}
.digest-tile {
  padding: 11px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
  background: var(--bg-subtle);
}
.digest-tile.danger  { background: var(--status-danger-bg);  border-color: var(--status-danger-border); }
.digest-tile.warning { background: var(--status-warning-bg); border-color: var(--status-warning-border); }
.digest-tile.success { background: var(--status-success-bg); border-color: var(--status-success-border); }
.digest-tile-label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}
.digest-tile.danger  .digest-tile-label,
.digest-tile.danger  .digest-tile-value { color: var(--status-danger); }
.digest-tile.warning .digest-tile-label,
.digest-tile.warning .digest-tile-value { color: var(--status-warning); }
.digest-tile-value {
  font-size: 19px;
  font-weight: 700;
  color: var(--text-main);
  margin: 2px 0 1px;
  line-height: 1.2;
}
.digest-tile-sub { font-size: 11.5px; color: var(--text-secondary); line-height: 1.4; }

/* --- Group P&L panel ------------------------------------------------------ */
.pl-line { margin-bottom: 14px; }
.pl-line-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
  margin-bottom: 5px;
  color: var(--text-secondary);
}
.pl-line-head strong { color: var(--text-main); }
.pl-bar { height: 6px; background: var(--bg-subtle); border-radius: 3px; overflow: hidden; }
.pl-bar-fill { height: 100%; }
.pl-bar-fill.vsl { background: var(--vsl-accent); }
.pl-bar-fill.vsa { background: var(--vsa-accent); }

.pl-summary {
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 11px 12px;
  margin-top: 4px;
}
.pl-summary-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
  padding: 3px 0;
  color: var(--text-secondary);
}
.pl-summary-row strong { color: var(--text-main); }
.pl-summary-row.total {
  border-top: 1px solid var(--border-medium);
  margin-top: 5px;
  padding-top: 7px;
  font-size: 13.5px;
}
.pl-summary-row.total strong { color: var(--status-success); font-size: 15px; }

.pl-passthrough { margin-top: 11px; }
.pl-passthrough > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 11.5px;
  color: var(--text-muted);
  padding: 2.5px 0;
}
.pl-passthrough strong { color: var(--text-secondary); font-weight: 600; }

/* --- Prototype disclosure note -------------------------------------------- */
.prototype-note {
  margin: 12px 0 0;
  padding: 9px 11px;
  border-left: 3px solid var(--status-info);
  background: var(--status-info-bg);
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.prototype-note code {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--bg-surface);
  padding: 1px 4px;
  border-radius: 3px;
  border: 1px solid var(--border-light);
}

/* --- Docket filter bar ---------------------------------------------------- */
.docket-filter-bar {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1.6fr 1.3fr auto;
  gap: 12px;
  align-items: flex-end;
}
@media (max-width: 1100px) {
  .docket-filter-bar { grid-template-columns: 1fr 1fr; }
  .docket-filter-bar > button { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .docket-filter-bar { grid-template-columns: 1fr; }
}

/* --- Empty states --------------------------------------------------------- */
.table-empty-state {
  text-align: center;
  padding: 34px 20px !important;
  color: var(--text-muted);
}
.table-empty-state strong {
  display: block;
  font-size: 13.5px;
  color: var(--text-secondary);
  margin-bottom: 5px;
}
.table-empty-state span { font-size: 12px; }

/* --- Validation ----------------------------------------------------------- */
.corp-input.input-invalid,
.corp-select.input-invalid {
  border-color: var(--status-danger);
  background: var(--status-danger-bg);
}
.corp-label .req { color: var(--status-danger); font-weight: 700; }

/* --- Job detail modal ----------------------------------------------------- */
.corp-modal-box-wide { max-width: 940px; width: 94vw; }

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 16px;
}
.detail-block {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 12px 13px;
  background: var(--bg-surface);
}
.detail-block-title {
  margin: 0 0 9px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.detail-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 12.5px;
}
.detail-row:last-child { border-bottom: 0; }
.detail-label { color: var(--text-secondary); flex: 0 0 auto; }
.detail-value { color: var(--text-main); font-weight: 500; text-align: right; word-break: break-word; }

@media (max-width: 640px) {
  .detail-row { flex-direction: column; gap: 2px; }
  .detail-value { text-align: left; }
}


/* ==========================================================================
   RESPONSIVE SYSTEM (2026-09 responsive remediation)
   --------------------------------------------------------------------------
   Breakpoints used across the application:
     ≥1280  desktop      — the reference design, untouched
     1024   laptop       — sidebar stays, header tightens
     768    tablet       — sidebar becomes a drawer, header reflows to 2 rows,
                            wide tables scroll inside their wrapper
     <768   phone        — header reflows to 2–3 rows, tables become labelled
                            cards, forms go single-column, modals are sheets
     <480   small phone  — entity switch shows short labels
   These rules replace the earlier per-width font-shrinking overrides (8.5px
   at 375px) with layout changes. Nothing below scales, zooms or hides the
   primary controls.
   ========================================================================== */

/* --- Reusable form grid ----------------------------------------------------
   Replaces inline `display:grid; grid-template-columns:1fr 1fr` on every form,
   which could never collapse. Two/three columns on desktop, one on phones. */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.form-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid > * { min-width: 0; }
.corp-input, .corp-select, textarea.corp-input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* --- Long identifiers and badges never widen the page ------------------- */
.corp-code-badge { max-width: 100%; overflow-wrap: break-word; }
.corp-badge { max-width: 100%; }
.ticking-countdown { max-width: 100%; overflow-wrap: break-word; }
.detail-value { overflow-wrap: break-word; }

/* --- Action groups wrap instead of overflowing --------------------------- */
.corp-table td > div[style*="display: flex"],
.ops-task-actions,
.subheader-actions { flex-wrap: wrap; }
.corp-btn { white-space: normal; }

/* --- Sales capacity strip: equal columns so the second card is not squeezed */
#sales-capacity-strip.corp-grid-2col {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

/* --- Modal close buttons are 44px touch targets everywhere --------------- */
.corp-modal-close-btn { min-width: 44px; min-height: 44px; }

/* ==========================================================================
   LAPTOP 1024–1279: sidebar stays; header loses its decorative text so the
   role selector and primary action keep their full width.
   ========================================================================== */
@media (max-width: 1279px) and (min-width: 1024px) {
  .top-navbar { padding: 0 14px; gap: 8px; }
  .navbar-brand-group { gap: 10px; }
  .brand-company-sub { display: none; }
  .brand-company-name { white-space: nowrap; }
  .entity-segment-btn { padding: 6px 10px; white-space: nowrap; }
  .navbar-actions-group { gap: 10px; }
  .port-telemetry-badge { display: none; }
  #user-role-select { min-width: 176px; }
  .navbar-actions-group > .corp-btn { white-space: nowrap; }
  .navbar-actions-group > .corp-btn.corp-btn-secondary { display: none; }
  .user-text-info { display: none; }
  .user-profile-widget { padding-left: 8px; }
  .main-stage { padding: 20px 24px 60px; }
}

/* ==========================================================================
   TABLET AND BELOW (<1024): the header reflows.
   `display: contents` dissolves the actions wrapper so each control becomes a
   direct flex item of the navbar and can be placed on its own row with
   `order`, without touching the markup of ten pages.
   Row 1: menu, brand, user avatar.  Row 2: entity switch, role, actions.
   ========================================================================== */
@media (max-width: 1023px) {
  .top-navbar {
    height: auto;
    min-height: 56px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    padding: 6px 12px;
    gap: 8px 10px;
    overflow: visible;
    max-width: 100%;
  }
  .navbar-actions-group { display: contents; }

  .nav-drawer-toggle { order: 1; margin: 0; flex: 0 0 auto; }
  .navbar-brand-group { order: 2; flex: 0 1 auto; min-width: 0; gap: 10px; }
  .navbar-brand-group .nav-drawer-toggle { order: 0; }
  .brand-text-block { min-width: 0; flex-shrink: 0; }
  .brand-company-name {
    font-size: 13px;
    white-space: nowrap;
    display: block;
  }
  .brand-company-sub { display: none; }

  .user-profile-widget {
    order: 3;
    margin-left: auto;
    padding-left: 0;
    border-left: 0;
    flex: 0 0 auto;
  }
  .user-text-info { display: none; }

  /* forced line break between the two rows */
  .top-navbar::after { content: ''; order: 4; flex-basis: 100%; height: 0; }

  .entity-segmented-control { order: 5; margin: 0; flex: 0 0 auto; }
  .entity-segment-btn { padding: 6px 10px; font-size: 12px; white-space: nowrap; }
  .user-role-control { order: 6; flex: 1 1 150px; min-width: 0; }
  #user-role-select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    font-size: 13px;
    height: 36px;
    padding: 4px 8px;
  }
  .port-telemetry-badge { display: none; }
  .navbar-actions-group > .corp-btn { order: 7; flex: 0 0 auto; min-height: 36px; white-space: nowrap; }
  .navbar-actions-group > .corp-btn.corp-btn-primary { order: 8; }

  /* Drawer and scrim cover the full viewport, so the header's height no
     longer has to be known. */
  .app-sidebar { top: 0; bottom: 0; height: 100vh; height: 100dvh; padding-top: 16px; z-index: 1300; }
  .nav-scrim { inset: 0; z-index: 1250; }
  .app-sidebar .nav-group-heading { font-size: 11px; }
  .app-sidebar .nav-badge-pill { font-size: 11px; flex-shrink: 0; }
  .app-sidebar .nav-menu-item a > span:nth-child(2) { min-width: 0; }

  .main-stage { padding: 20px 20px 72px; }

  /* Wide tables scroll inside their wrapper at readable column widths rather
     than squeezing every cell into three-line wraps. Card mode takes over
     below 768. */
  .corp-table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .corp-table-wrapper .corp-table { min-width: 860px; }
  .corp-modal-body .corp-table-wrapper .corp-table { min-width: 0; }
  .corp-table th { white-space: nowrap; }
}

/* ==========================================================================
   PHONE (<768)
   ========================================================================== */
@media (max-width: 767px) {
  .top-navbar {
    padding: 8px 12px;
    gap: 8px;
    height: auto;
    min-height: 56px;
    overflow: visible;
  }

  .navbar-brand-group {
    gap: 8px;
    flex-shrink: 0;
  }

  .brand-company-name {
    font-size: 11.5px;
    letter-spacing: -0.01em;
    white-space: nowrap;
    display: block;
  }

  .brand-company-sub {
    display: none !important;
  }

  .entity-segmented-control {
    order: 5;
    margin: 0;
    width: 100%;
    display: flex;
    padding: 2px;
    box-sizing: border-box;
  }

  .entity-segment-btn {
    flex: 1 1 50%;
    min-height: 44px;
    padding: 6px 6px;
    font-size: 12px;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    box-sizing: border-box;
  }

  .entity-segment-btn > span:last-child {
    display: none;
  }

  .btn-switch-vsl::after {
    content: 'VSL Customs (CHA)';
  }

  .btn-switch-vsa::after {
    content: 'VSA Forwarding';
  }

  .user-role-control {
    order: 6;
    width: 100%;
    flex: 1 1 100%;
    min-width: 0;
  }

  #user-role-select {
    width: 100%;
    max-width: 100%;
    min-height: 44px;
    height: 44px;
    font-size: 13px;
    padding: 6px 10px;
    box-sizing: border-box;
  }

  .navbar-actions-group > .corp-btn.corp-btn-secondary {
    display: none;
  }

  .navbar-actions-group > .corp-btn.corp-btn-primary {
    order: 7;
    width: 100%;
    flex: 1 1 100%;
    min-height: 44px;
    height: 44px;
    font-size: 13px;
    font-weight: 600;
    justify-content: center;
    box-sizing: border-box;
  }

  .main-stage {
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px 12px 72px !important;
    box-sizing: border-box;
  }

  .page-subheader {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .subheader-actions {
    width: 100%;
  }

  .subheader-actions .corp-btn {
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }

  .metrics-tile-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .gm-digest-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .corp-table thead {
    left: 0;
    top: 0;
  }

  .corp-table-wrapper {
    overflow-x: visible;
  }

  .corp-table-wrapper .corp-table {
    min-width: 0;
  }

  .form-grid, .form-grid-3 {
    grid-template-columns: 1fr;
  }

  .corp-modal-box, .corp-modal-box-wide {
    width: 100%;
    max-width: 100%;
  }

  .corp-modal-footer {
    flex-wrap: wrap;
    gap: 8px;
  }

  .corp-badge {
    white-space: normal;
    overflow-wrap: break-word;
    text-align: center;
  }

  [style*="font-size: 10"], [style*="font-size:10"] {
    font-size: 11px !important;
  }

  .corp-code-badge, .corp-badge {
    font-size: 11px;
  }

  .corp-table td[data-label="Actions"] > div {
    width: 100%;
    display: flex;
    gap: 8px;
  }

  .corp-table td[data-label="Actions"] .corp-btn {
    flex: 1 1 120px;
    min-height: 44px;
  }
}

/* ==========================================================================
   SMALL PHONE (<480): short entity labels keep the switch clean.
   ========================================================================== */
@media (max-width: 479px) {
  .btn-switch-vsl::after { content: 'VSL (CHA)'; }
  .btn-switch-vsa::after { content: 'VSA (Freight)'; }
  .brand-company-name { font-size: 11px; }
  .entity-segment-btn { padding: 6px 4px; font-size: 11px; }
  .brand-shield-logo { flex: 0 0 auto; }
  .brand-text-block { display: block; }
}

@media (max-width: 419px) {
  .brand-company-name { font-size: 10.5px; }
  .top-navbar { padding: 6px 8px; gap: 6px; }
  .entity-segment-btn { font-size: 11px; padding: 6px 4px; }
  #user-role-select { max-width: 100%; font-size: 13px; }
}

@media (max-width: 375px) {
  .brand-company-name { font-size: 10px; }
  .entity-segment-btn { font-size: 10.5px; padding: 6px 2px; }
  #user-role-select { max-width: 100%; font-size: 12.5px; }
}

/* --- Planning board: 4 cluster columns on desktop, auto-fit on tablet, one
   stacked column on phones */
.planning-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
@media (min-width: 1240px) {
  .planning-board {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .planning-board {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   COMPONENT STYLES THAT WERE MISSING
   --------------------------------------------------------------------------
   The operations board and staff capacity meter were rewritten from inline
   styles to classes during the QA remediation, but the classes were never
   defined — so both rendered as unstyled text with no card, padding or
   accent border. These rules restore the original design exactly (recovered
   from commit f71ee11) and add the states the rewrite introduced.

   Also adds the `.info` variant that three components used but never had:
   19 sidebar badges, the statutory banner and its icon badge all fell back
   to their neutral base style.
   ========================================================================== */

/* --- Operations planning board ------------------------------------------ */
.ops-cluster-card {
  background: var(--bg-surface);
  padding: 14px;
}

.ops-cluster-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 8px;
}

.ops-cluster-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
}

.ops-cluster-sub {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.45;
}

.ops-task-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ops-task-card {
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-left: 3px solid var(--brand-primary);   /* width the accent needs */
  border-radius: var(--radius-sm);
  padding: 10px;
}

.ops-task-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.ops-task-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 4px;
  overflow-wrap: break-word;
}

.ops-task-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.ops-task-exception {
  font-size: 10.5px;
  color: var(--status-danger);
  background: var(--status-danger-bg);
  border-radius: var(--radius-xs);
  padding: 5px 7px;
  margin-top: 6px;
  line-height: 1.4;
}

.ops-task-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.ops-task-actions .corp-btn {
  flex: 1 1 auto;
}

.ops-empty {
  padding: 18px 10px;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  background: var(--bg-subtle);
  border: 1px dashed var(--border-light);
  border-radius: var(--radius-sm);
}

/* --- Staff capacity meter ------------------------------------------------ */
.capacity-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-light);
}

.capacity-row:last-child { border-bottom: none; }

.capacity-name {
  font-weight: 600;
  font-size: 12.5px;
  color: var(--text-main);
}

.capacity-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
}

.capacity-count {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.capacity-state {
  font-size: 10.5px;
  white-space: nowrap;
}

/* --- Enquiry activity timeline ------------------------------------------ */
.enquiry-timeline-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* --- The missing `info` variants ---------------------------------------- */
.nav-badge-pill.info {
  background: var(--status-info-bg);
  color: var(--status-info);
  border-color: var(--status-info-border);
}

.statutory-banner.info {
  background: var(--status-info-bg);
  border-color: var(--status-info-border);
}

.banner-icon-badge.info {
  background: var(--status-info-bg);
  color: var(--status-info);
}

/* --- Phone: keep the dense board readable ------------------------------- */
@media (max-width: 767px) {
  .ops-cluster-card { padding: 12px; }
  .ops-task-card { padding: 12px; }
  .ops-task-title { font-size: 13px; }
  .ops-task-top,
  .ops-task-meta { font-size: 11.5px; }
  .ops-task-exception { font-size: 11px; }
  .ops-task-actions .corp-btn { min-height: 44px; flex: 1 1 130px; }
  .capacity-row { padding: 12px 14px; }
  .capacity-state { font-size: 11px; }
}

/* ==========================================================================
   SHELL WIDTH GUARANTEES
   Appended last so the cascade is unambiguous.

   The sidebar is a 240px flex sibling at >=1024 and an off-canvas drawer
   below it. `max-width: calc(100% - 240px)` is therefore correct ONLY on
   desktop: below 1024 the sidebar leaves the flow, `100%` becomes the whole
   viewport, and the same declaration would cap the content column at
   viewport-240px (135px on a 375px phone). It is scoped here, and explicitly
   released below 1024, so wide content can never push the sidebar off-screen
   on desktop and can never strand the content column on tablet or phone.
   ========================================================================== */
@media (min-width: 1024px) {
  .main-stage {
    min-width: 0;
    max-width: calc(100% - 240px);
    overflow-x: hidden;
  }
}

@media (max-width: 1023px) {
  .main-stage {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
}

/* A wide table scrolls inside its own wrapper; it never widens the page. */
.corp-table-wrapper {
  max-width: 100%;
}

/* Metric tiles: two across on a large phone, one across below 640px so the
   figures and their status badges are never cramped. */
@media (max-width: 767px) and (min-width: 640px) {
  .metrics-tile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

@media (max-width: 639px) {
  .metrics-tile-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}