/* ==========================================================================
   CoatLogic - Industrial Production Design System
   Theme Colors: #a855f7 (Purple), #ec4899 (Pink), #374151 (Dark Gray), #f9fafb (Light Gray)
   ========================================================================== */

:root {
  color-scheme: dark;
  --app-header-height: 60px;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", "Segoe UI Symbol";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  
  /* Theme Brand Tokens */
  --theme-purple: #a855f7;
  --theme-pink: #ec4899;
  --theme-gray-dark: #282e42;
  --theme-gray-light: #f1f5f9;

  /* Surfaces & Neutrals in Dark Mode (Factory Slate / Reduced Glare) */
  --bg-app: #0f1117;                    /* Deep, low-fatigue slate base */
  --bg-card: #181b26;                   /* Stepped elevated card surface */
  --bg-surface: #181b26;                /* Standard elevated surface */
  --bg-surface-elevated: #1e2232;       /* High-clarity stepped surface */
  --bg-card-hover: #252b3e;             /* Subtle interactive hover surface */
  --bg-card-subtle: #12141d;            /* Recessed container surface */
  --bg-input: #12141d;                  /* Input recessed field */
  
  /* Borders (Subtle, defined outlines preventing visual bleed in low ambient light) */
  --border-color: #282e42;              /* Subtle defined outline */
  --border-card: #282e42;               /* Structural card outline */
  --border-subtle: #282e42;             /* Internal dividers & gauge track */
  --border-focus: #a855f7;              /* Purple 500 active focus outline */
  
  /* Typography in Dark Mode (Crisp high-contrast whites & cool grays for 12-hr shift scannability) */
  --text-main: #f1f5f9;                 /* Crisp high-contrast white text */
  --text-sub: #94a3b8;                  /* Cool gray for sub-metrics & labels */
  --text-primary: #f1f5f9;              /* Primary text hook */
  --text-secondary: #94a3b8;            /* Secondary text hook */
  --text-muted: #94a3b8;                /* Scannable cool gray */
  --text-subtle: #64748b;               /* Deep slate subtle metadata */
  --text-highlight: #ffffff;            /* Pure white focal emphasis */

  /* Brand & Vibrant Accents */
  --color-primary: #a855f7;             /* Purple 500 */
  --color-primary-hover: #9333ea;
  --color-primary-subtle: rgba(168, 85, 247, 0.15);
  --color-secondary: #ec4899;           /* Pink 500 */
  --color-secondary-hover: #db2777;
  --color-secondary-subtle: rgba(236, 72, 153, 0.15);
  --gradient-primary: linear-gradient(135deg, #a855f7, #ec4899);
  --gradient-primary-hover: linear-gradient(135deg, #9333ea, #db2777);

  /* Industrial Process Accents (Calibrated Industrial Shift Tones) */
  --color-primer: #f59e0b;              /* Warm safety amber */
  --color-primer-bg: rgba(245, 158, 11, 0.15);
  --color-primer-border: rgba(245, 158, 11, 0.4);
  --color-intumescent: #f43f5e;          /* Fire-grade crimson/rose */
  --color-intumescent-bg: rgba(244, 63, 94, 0.15);
  --color-intumescent-border: rgba(244, 63, 94, 0.4);
  --color-sealer: #38bdf8;              /* Technical sky cobalt */
  --color-sealer-bg: rgba(56, 189, 248, 0.15);
  --color-sealer-border: rgba(56, 189, 248, 0.4);
  --color-curing: #c084fc;              /* Deep amethyst warning / curing / idle */
  --color-curing-bg: rgba(192, 132, 252, 0.15);
  --color-curing-border: rgba(192, 132, 252, 0.4);
  --color-warning: #c084fc;             /* Warning / Idle amethyst */
  --color-warning-bg: rgba(192, 132, 252, 0.15);
  --color-warning-border: rgba(192, 132, 252, 0.4);
  --color-success: #10b981;             /* High-visibility emerald on track / done */
  --color-success-bg: rgba(16, 185, 129, 0.15);
  --color-success-border: rgba(16, 185, 129, 0.4);

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.45);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.55), 0 2px 4px -2px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.65), 0 4px 6px -4px rgba(0, 0, 0, 0.55);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
}

html.dark {
  color-scheme: dark;
}

html.dark,
html[data-theme="dark"] {
  color-scheme: dark;
  --bg-app: #0f1117;
  --bg-card: #181b26;
  --bg-surface: #181b26;
  --bg-surface-elevated: #1e2232;
  --bg-card-hover: #252b3e;
  --bg-card-subtle: #12141d;
  --bg-input: #12141d;
  --border-color: #282e42;
  --border-card: #282e42;
  --border-subtle: #282e42;
  --border-focus: #a855f7;
  --text-main: #f1f5f9;
  --text-sub: #94a3b8;
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #94a3b8;
  --text-subtle: #64748b;
  --text-highlight: #ffffff;
  --color-primary: #a855f7;
  --color-primary-hover: #9333ea;
  --color-primary-subtle: rgba(168, 85, 247, 0.15);
  --color-secondary: #ec4899;
  --color-secondary-hover: #db2777;
  --color-secondary-subtle: rgba(236, 72, 153, 0.15);
  --gradient-primary: linear-gradient(135deg, #a855f7, #ec4899);
  --gradient-primary-hover: linear-gradient(135deg, #9333ea, #db2777);
  --color-primer: #f59e0b;
  --color-primer-bg: rgba(245, 158, 11, 0.15);
  --color-primer-border: rgba(245, 158, 11, 0.4);
  --color-intumescent: #f43f5e;
  --color-intumescent-bg: rgba(244, 63, 94, 0.15);
  --color-intumescent-border: rgba(244, 63, 94, 0.4);
  --color-sealer: #38bdf8;
  --color-sealer-bg: rgba(56, 189, 248, 0.15);
  --color-sealer-border: rgba(56, 189, 248, 0.4);
  --color-curing: #c084fc;
  --color-curing-bg: rgba(192, 132, 252, 0.15);
  --color-curing-border: rgba(192, 132, 252, 0.4);
  --color-warning: #c084fc;
  --color-warning-bg: rgba(192, 132, 252, 0.15);
  --color-warning-border: rgba(192, 132, 252, 0.4);
  --color-success: #10b981;
  --color-success-bg: rgba(16, 185, 129, 0.15);
  --color-success-border: rgba(16, 185, 129, 0.4);
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.45);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.55), 0 2px 4px -2px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.65), 0 4px 6px -4px rgba(0, 0, 0, 0.55);
}

html.light,
html[data-theme="light"],
[data-theme="light"],
html:not(.dark):not([data-theme="dark"]) {
  color-scheme: light;
  
  /* Theme Brand Tokens in Light Mode */
  --theme-purple: #9333ea;
  --theme-pink: #db2777;
  --theme-gray-dark: #cbd5e1;
  --theme-gray-light: #f8fafc;

  /* Surfaces & Neutrals in Light Mode (Clean, neutral off-white canvas & pure white cards) */
  --bg-app: #f8fafc;                    /* Clean, neutral off-white canvas */
  --bg-card: #ffffff;                   /* Pure white card surface */
  --bg-surface: #ffffff;                /* Pure white surface */
  --bg-surface-elevated: #f1f5f9;       /* Distinct elevated surface */
  --bg-card-hover: #f1f5f9;             /* Steel slate 100 hover state */
  --bg-card-subtle: #f8fafc;            /* Neutral subtle container */
  --bg-input: #ffffff;                  /* White input field */
  
  /* Borders (Defined steel slate outlines maintaining structure under bright factory bay lighting) */
  --border-color: #cbd5e1;              /* Defined steel slate outline */
  --border-card: #cbd5e1;               /* High-definition card border */
  --border-subtle: #e2e8f0;             /* Sub-dividers & circular gauge track */
  --border-focus: #9333ea;              /* Purple 600 active focus outline */
  
  /* Typography (Deep charcoal slate achieving WCAG 2.1 AAA contrast) */
  --text-main: #0f172a;                 /* Deep charcoal slate 900 */
  --text-sub: #334155;                  /* Mid charcoal slate 700 */
  --text-primary: #0f172a;              /* Primary text hook */
  --text-secondary: #334155;            /* Secondary text hook */
  --text-muted: #475569;                /* Slate 600 readable secondary */
  --text-subtle: #64748b;               /* Slate 500 metadata */
  --text-highlight: #020617;            /* Pitch charcoal black for maximum contrast */

  /* Brand & Vibrant Accents in Light Mode */
  --color-primary: #9333ea;             /* Purple 600 */
  --color-primary-hover: #7e22ce;
  --color-primary-subtle: rgba(147, 51, 234, 0.1);
  --color-secondary: #db2777;           /* Pink 600 */
  --color-secondary-hover: #be185d;
  --color-secondary-subtle: rgba(219, 39, 119, 0.1);
  --gradient-primary: linear-gradient(135deg, #9333ea, #db2777);
  --gradient-primary-hover: linear-gradient(135deg, #7e22ce, #be185d);

  /* Process Accents: High-density, calibrated industrial tones that do not wash out */
  --color-primer: #b45309;              /* Dark amber gold */
  --color-primer-bg: #fef3c7;           /* Matching pastel badge fill */
  --color-primer-border: rgba(180, 83, 9, 0.45); /* Crisp defined border */
  --color-intumescent: #be123c;          /* Industrial crimson */
  --color-intumescent-bg: #ffe4e6;       /* Matching pastel badge fill */
  --color-intumescent-border: rgba(190, 18, 60, 0.45); /* Crisp defined border */
  --color-sealer: #0284c7;              /* Deep marine cyan */
  --color-sealer-bg: #e0f2fe;           /* Matching pastel badge fill */
  --color-sealer-border: rgba(2, 132, 199, 0.45); /* Crisp defined border */
  --color-curing: #7e22ce;              /* Deep amethyst warning / idle / cure */
  --color-curing-bg: #f3e8ff;           /* Matching pastel badge fill */
  --color-curing-border: rgba(126, 34, 206, 0.45); /* Crisp defined border */
  --color-warning: #7e22ce;             /* Warning / Idle deep amethyst */
  --color-warning-bg: #f3e8ff;
  --color-warning-border: rgba(126, 34, 206, 0.45);
  --color-success: #047857;             /* High-density forest emerald */
  --color-success-bg: #d1fae5;          /* Matching pastel badge fill */
  --color-success-border: rgba(4, 120, 87, 0.45); /* Crisp defined border */
  
  --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.1), 0 4px 6px -4px rgba(15, 23, 42, 0.05);
}

/* Custom Scrollbars (High Accessibility & Contrast) */
* {
  scrollbar-width: thin;
  scrollbar-color: #4b5563 var(--bg-card-subtle);
}

[data-theme="light"] *,
html.light *,
html:not(.dark) * {
  scrollbar-color: #94a3b8 #f1f5f9;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--bg-card-subtle);
  border-radius: 6px;
}

::-webkit-scrollbar-thumb {
  background: #4b5563;
  border-radius: 6px;
  border: 2px solid var(--bg-card-subtle);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary, #a855f7);
}

[data-theme="light"] ::-webkit-scrollbar-track,
html.light ::-webkit-scrollbar-track,
html:not(.dark) ::-webkit-scrollbar-track {
  background: #f1f5f9;
}

[data-theme="light"] ::-webkit-scrollbar-thumb,
html.light ::-webkit-scrollbar-thumb,
html:not(.dark) ::-webkit-scrollbar-thumb {
  background: #94a3b8;
  border-color: #f1f5f9;
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover,
html.light ::-webkit-scrollbar-thumb:hover,
html:not(.dark) ::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary, #9333ea);
}


/* Form Dropdowns & Select Option Theming Fix (High Legibility across all states) */
select {
  color-scheme: dark;
  background-color: var(--bg-input) !important;
  color: var(--text-main) !important;
  border: 1px solid var(--border-color);
}

[data-theme="light"] select {
  color-scheme: light;
  background-color: #ffffff !important;
  color: #374151 !important;
  border-color: #d1d5db;
}

select option {
  background-color: #1f2937 !important;
  color: #f9fafb !important;
  padding: 8px 12px;
}

[data-theme="light"] select option {
  background-color: #ffffff !important;
  color: #374151 !important;
}

select option:checked {
  background-color: #a855f7 !important;
  color: #ffffff !important;
  font-weight: 700;
}

select optgroup {
  background-color: #111827 !important;
  color: #9ca3af !important;
  font-weight: 700;
}

[data-theme="light"] select optgroup {
  background-color: #f3f4f6 !important;
  color: #4b5563 !important;
}

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

body {
  font-family: var(--font-sans);
  background-color: var(--bg-app);
  color: var(--text-main);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* App Header */
.app-header {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-color);
  padding: 0.65rem 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: var(--shadow-sm);
  width: 100%;
  box-sizing: border-box;
  min-height: 60px;
  flex-wrap: nowrap;
}

.brand-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
  flex: 1 1 0%;
  min-width: 0;
  order: 1;
  white-space: nowrap;
}

.brand-logo {
  width: 38px;
  height: 38px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 10px rgba(168, 85, 247, 0.45));
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), filter 0.25s ease;
  border-radius: var(--radius-sm);
  display: block;
}

.brand-logo:hover {
  transform: scale(1.08) rotate(-1deg);
  filter: drop-shadow(0 4px 16px rgba(236, 72, 153, 0.65));
}

.brand-badge {
  background: var(--gradient-primary);
  color: white;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.1rem;
  box-shadow: 0 2px 10px rgba(168, 85, 247, 0.4);
}

.brand-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-highlight);
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  line-height: 1.15;
  margin: 0;
}

.brand-subtitle {
  font-size: 0.66rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  line-height: 1;
  margin-top: 2px;
  white-space: nowrap;
}

.contract-selector-bar {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background: var(--bg-input);
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.contract-selector-bar .selector-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.contract-selector-bar label {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.contract-selector-bar select {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-color);
  color: var(--text-main) !important;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.35rem 0.65rem;
  height: 36px;
  border-radius: var(--radius-sm);
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.contract-selector-bar select:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.25);
}

.contract-selector-bar input {
  background: transparent;
  border: none;
  color: var(--text-main);
  font-weight: 600;
  font-size: 0.875rem;
  outline: none;
  cursor: pointer;
}

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.65rem;
  flex: 1 1 0%;
  min-width: 0;
  order: 3;
  margin-left: auto;
  white-space: nowrap;
}

#headerFacilitySwitcher {
  order: 2;
  margin: 0 auto;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.header-actions .btn-sm {
  padding: 0.35rem 0.65rem;
  font-size: 0.82rem;
}

/* Nav Tabs - Tab bar removed per user request (redundant single-page tab bar, saves vertical screen space) */
.app-nav {
  display: none !important;
  background: var(--bg-card-subtle);
  border-bottom: 1px solid var(--border-color);
  padding: 0 1.75rem;
  align-items: center;
  gap: 0.5rem;
  overflow-x: auto;
  width: 100%;
  box-sizing: border-box;
}

.nav-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.nav-tab:hover {
  color: var(--text-main);
  background: var(--color-primary-subtle);
}

.nav-tab.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  font-weight: 700;
}

.nav-tab .badge {
  background: var(--border-color);
  color: var(--text-main);
  font-size: 0.7rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-weight: 700;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.45rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn:hover {
  background: var(--bg-card-hover);
  border-color: #4b5563;
}

.btn-primary {
  background: var(--gradient-primary);
  border: 1px solid var(--color-primary);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(168, 85, 247, 0.35);
}

.btn-primary:hover {
  background: var(--gradient-primary-hover);
  border-color: var(--color-primary-hover);
  box-shadow: 0 4px 14px rgba(168, 85, 247, 0.45);
  color: #ffffff;
}

.btn-sm {
  padding: 0.25rem 0.55rem;
  font-size: 0.775rem;
}

.btn-xs {
  padding: 0.18rem 0.45rem;
  font-size: 0.72rem;
  line-height: 1.25;
  border-radius: var(--radius-sm, 4px);
}

.btn-icon {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: var(--radius-sm);
}

#themeToggle {
  min-width: 84px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.28rem 0.65rem;
  font-size: 0.775rem;
  font-weight: 700;
  box-sizing: border-box;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.2s ease;
}

#themeToggle:hover {
  border-color: var(--color-primary);
  background: var(--bg-card-hover);
  box-shadow: 0 0 8px rgba(168, 85, 247, 0.25);
}

.btn-group {
  display: inline-flex;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.btn-group .btn {
  border-radius: 0;
  border: none;
  border-right: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-muted);
}

.btn-group .btn:last-child {
  border-right: none;
}

.btn-group .btn:hover {
  color: var(--text-main);
  background: var(--bg-card-hover);
}

.btn-group .btn.active {
  background: var(--gradient-primary);
  color: #ffffff;
  font-weight: 700;
}

/* Main Container - Full width layout utilizing all screen real estate */
.app-main {
  flex: 1;
  padding: 1.25rem 1.75rem;
  max-width: 100%;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}

/* SSO Launchpad Main Container - Full width layout utilizing all screen real estate */
.sso-portal-main {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 1.5rem 2rem 3rem 2rem;
  box-sizing: border-box;
}

@media (max-width: 900px) {
  .sso-portal-main {
    padding: 1rem 1rem 2.5rem 1rem;
  }
}

@media (max-width: 640px) {
  .sso-portal-main {
    padding: 0.75rem 0.75rem 1.75rem 0.75rem;
  }
}

/* KPI Cards Grid - Responsive fluid distribution */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

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

@media (max-width: 800px) {
  .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

.kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.kpi-card:hover {
  transform: translateY(-2px);
  border-color: #a855f7;
  box-shadow: 0 4px 14px rgba(168, 85, 247, 0.18);
}

.kpi-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--kpi-accent, #a855f7);
}

.kpi-title {
  font-size: 0.775rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.kpi-value {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--text-highlight);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 0.35rem;
  font-family: var(--font-mono);
}

.kpi-sub {
  font-size: 0.75rem;
  color: var(--text-subtle);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

/* Section Card */
.section-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-sm);
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-color);
}

.section-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-highlight);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.section-subtitle {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

/* Modern Industrial Tables */
.table-responsive,
.table-container {
  width: 100%;
  overflow-x: auto;
  overflow-y: auto;
  max-height: calc(100vh - 270px);
  min-height: 400px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background: var(--bg-card-subtle);
  position: relative;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

@media (max-height: 750px) {
  .table-responsive,
  .table-container {
    max-height: calc(100vh - 200px);
    min-height: 320px;
  }
}

.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.825rem;
  text-align: left;
}

.data-table thead th,
.data-table th {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg-card);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.65rem 0.85rem;
  border-bottom: 2px solid var(--border-color);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  white-space: nowrap;
}

.data-table th.sortable {
  cursor: pointer;
  user-select: none;
}

.data-table th.sortable:hover {
  color: var(--text-main);
  background: var(--bg-card-hover);
}

.data-table td {
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: var(--text-main);
  white-space: nowrap;
}

[data-theme="light"] .data-table td {
  border-bottom: 1px solid #f1f5f9;
}

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

.data-table thead th.col-actions,
.data-table th.col-actions {
  position: sticky;
  top: 0;
  right: 0;
  background: var(--bg-card);
  text-align: center;
  z-index: 20;
  border-left: 1px solid var(--border-color);
  border-bottom: 2px solid var(--border-color);
  box-shadow: -4px 2px 8px rgba(0, 0, 0, 0.3);
}

.data-table td.col-actions {
  position: sticky;
  right: 0;
  background: var(--bg-card);
  text-align: center;
  z-index: 2;
  border-left: 1px solid var(--border-color);
  box-shadow: -4px 0 8px rgba(0, 0, 0, 0.25);
}

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

.data-table tfoot td {
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: var(--bg-card);
  font-weight: 700;
  border-top: 2px solid var(--border-color);
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.25);
  color: var(--text-highlight);
}

.numeric {
  font-family: var(--font-mono);
  text-align: right;
}

/* Badges & Chips */
.badge-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.725rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.25;
  white-space: nowrap;
}

.badge-primer {
  background: var(--color-primer-bg);
  color: var(--color-primer);
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.badge-primer-cure {
  background: repeating-linear-gradient(45deg, rgba(245, 158, 11, 0.18), rgba(245, 158, 11, 0.18) 4px, rgba(245, 158, 11, 0.06) 4px, rgba(245, 158, 11, 0.06) 8px);
  color: #fbbf24;
  border: 1px dashed rgba(245, 158, 11, 0.5);
}

.badge-intumescent {
  background: var(--color-intumescent-bg);
  color: var(--color-intumescent);
  border: 1px solid var(--color-intumescent-border, rgba(244, 63, 94, 0.4));
}

.badge-intumescent-cure {
  background: repeating-linear-gradient(45deg, rgba(244, 63, 94, 0.18), rgba(244, 63, 94, 0.18) 4px, rgba(244, 63, 94, 0.06) 4px, rgba(244, 63, 94, 0.06) 8px);
  color: #f87171;
  border: 1px dashed rgba(244, 63, 94, 0.5);
}

.badge-sealer {
  background: var(--color-sealer-bg);
  color: var(--color-sealer);
  border: 1px solid var(--color-sealer-border, rgba(56, 189, 248, 0.4));
}

.badge-sealer-cure {
  background: repeating-linear-gradient(45deg, rgba(56, 189, 248, 0.18), rgba(56, 189, 248, 0.18) 4px, rgba(56, 189, 248, 0.06) 4px, rgba(56, 189, 248, 0.06) 8px);
  color: #60a5fa;
  border: 1px dashed rgba(56, 189, 248, 0.5);
}

.badge-curing {
  background: var(--color-curing-bg);
  color: var(--color-curing);
  border: 1px solid var(--color-curing-border, rgba(192, 132, 252, 0.35));
}

.badge-line {
  background: var(--color-curing-bg);
  color: var(--color-curing);
  border: 1px solid var(--color-curing-border, rgba(192, 132, 252, 0.35));
}

/* Gantt Chart Multi-Column Bay View */
.gantt-container {
  overflow-x: auto;
  padding-bottom: 0.5rem;
}

.gantt-wrapper {
  width: 100%;
}

.gantt-bays-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: stretch;
}

.gantt-bays-columns.cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gantt-bays-columns > *:only-child {
  grid-column: 1 / -1;
}

.gantt-bay-col {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.1rem;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s ease;
  min-width: 0;
}

.gantt-bay-header {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.gantt-bay-loads-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  flex: 1;
}

.gantt-load-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.gantt-load-card:hover {
  border-color: rgba(168, 85, 247, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.18);
}

.gantt-load-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.4rem;
}

.gantt-load-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.725rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.gantt-track {
  height: 36px;
  background: var(--bg-input);
  border-radius: var(--radius-sm);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-color);
  display: flex;
  width: 100%;
  box-sizing: border-box;
}

.gantt-segment {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: -0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 1px;
  position: relative;
  cursor: pointer;
  transition: opacity 0.15s ease, filter 0.15s ease;
  box-sizing: border-box;
  flex-shrink: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

.gantt-segment.seg-primer,
.gantt-segment.seg-intum,
.gantt-segment.seg-sealer {
  min-width: 44px;
  flex-shrink: 0;
}

.gantt-segment:hover {
  filter: brightness(1.2);
  z-index: 10;
}

.gantt-segment.seg-primer {
  background: var(--color-primer);
}

.gantt-segment.seg-primer-dry {
  background: repeating-linear-gradient(45deg, rgba(245, 158, 11, 0.45), rgba(245, 158, 11, 0.45) 6px, rgba(245, 158, 11, 0.2) 6px, rgba(245, 158, 11, 0.2) 12px);
  color: #fde68a;
  border-right: 1px dashed rgba(245, 158, 11, 0.6);
}

.gantt-segment.seg-intum {
  background: var(--color-intumescent);
}

.gantt-segment.seg-intum-dry {
  background: repeating-linear-gradient(45deg, rgba(244, 63, 94, 0.45), rgba(244, 63, 94, 0.45) 6px, rgba(244, 63, 94, 0.2) 6px, rgba(244, 63, 94, 0.2) 12px);
  color: #fca5a5;
  border-right: 1px dashed rgba(244, 63, 94, 0.6);
}

.gantt-segment.seg-sealer {
  background: var(--color-sealer);
}

.gantt-segment.seg-sealer-dry {
  background: repeating-linear-gradient(45deg, rgba(56, 189, 248, 0.45), rgba(56, 189, 248, 0.45) 6px, rgba(56, 189, 248, 0.2) 6px, rgba(56, 189, 248, 0.2) 12px);
  color: #bfdbfe;
  border-right: 1px dashed rgba(56, 189, 248, 0.6);
}

/* Complete Gantt Track & Bar State */
.gantt-track.gantt-track-complete,
.shop-floor-gantt-bar.gantt-bar-complete {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
  border: 1px solid #059669 !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(16, 185, 129, 0.25);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  overflow: hidden !important;
  cursor: default;
}

.gantt-complete-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  height: 100%;
  color: #ffffff !important;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  user-select: none;
}

.gantt-complete-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  font-size: 11px;
  line-height: 1;
  font-weight: 900;
}

.shop-floor-gantt-bar.gantt-bar-complete .gantt-complete-label {
  font-size: 11px;
  font-weight: 800;
}

.badge-complete-legend {
  background: rgba(16, 185, 129, 0.18);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.45);
  font-weight: 700;
}

/* What-If Simulator Sliders & Controls */
.sim-collapsible-header {
  transition: opacity 0.2s ease, background 0.2s ease;
  padding: 0.25rem 0.4rem;
  border-radius: var(--radius-sm);
}

.sim-collapsible-header:hover {
  background: rgba(255, 255, 255, 0.035);
}

.sim-collapsible-header:hover #toggleSimIcon,
.sim-collapsible-header:hover #toggleGanttIcon {
  background: rgba(56, 189, 248, 0.2);
  border-color: rgba(56, 189, 248, 0.4);
  color: #38bdf8;
}

.sim-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.sim-grid.cols-3,
.sim-grid.cols-4 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.sim-grid > *:only-child {
  grid-column: 1 / -1;
}

.sim-box {
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.4rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.sim-box:hover {
  border-color: rgba(96, 165, 250, 0.35);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.3);
}

.sim-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.sim-card-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.sim-bay-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sim-bay-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.sim-edit-btn {
  font-size: 0.72rem;
  padding: 0.25rem 0.55rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  border-radius: 4px;
  transition: all 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.sim-edit-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-highlight);
  border-color: rgba(255, 255, 255, 0.25);
}

/* Facility Staffing Ceilings & Simulator Quota Controls */
.facility-staffing-panel {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 0.85rem;
  box-shadow: none;
}

.fac-panel-header {
  display: none; /* Consolidated into main simulator card header */
}

.fac-limits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.75rem;
}

@media (max-width: 1400px) {
  .fac-limits-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .fac-limits-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .fac-limits-grid {
    grid-template-columns: 1fr;
  }
}

.fac-limit-card {
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.85rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.45rem;
  position: relative;
  min-height: 88px;
  box-sizing: border-box;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.fac-limit-card:hover {
  border-color: rgba(255, 255, 255, 0.2);
}

.fac-limit-card.at-capacity {
  border-color: rgba(239, 68, 68, 0.6);
  background: rgba(239, 68, 68, 0.08);
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.15);
}

.fac-limit-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.4rem;
}

.fac-limit-title {
  font-size: 0.82rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  letter-spacing: 0.01em;
}

.fac-metric-pill {
  font-size: 0.72rem;
  font-weight: 700;
  font-family: var(--font-mono);
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-highlight);
}

.fac-headcount-badge {
  display: inline-flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(168, 85, 247, 0.45);
  border-radius: 6px;
  padding: 2px 6px;
  gap: 5px;
}

.fac-headcount-badge:focus-within {
  border-color: #a855f7;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.45);
}

.fac-stepper-btn {
  background: rgba(168, 85, 247, 0.16);
  border: 1px solid rgba(168, 85, 247, 0.4);
  color: #a855f7;
  border-radius: 4px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  font-weight: 800;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  transition: all 0.15s ease;
  user-select: none;
}

.fac-stepper-btn:hover {
  background: rgba(168, 85, 247, 0.35);
  border-color: #a855f7;
  color: #ffffff;
  transform: scale(1.08);
}

.fac-stepper-btn:active {
  transform: scale(0.92);
  background: rgba(168, 85, 247, 0.55);
}

.fac-limit-input {
  width: 38px;
  padding: 2px 0;
  background: transparent;
  border: none;
  color: #a855f7;
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 800;
  text-align: center;
  outline: none;
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Completely remove native spinner arrows from headcount stepper input */
.fac-limit-input::-webkit-inner-spin-button,
.fac-limit-input::-webkit-outer-spin-button,
.fac-headcount-badge input[type="number"]::-webkit-inner-spin-button,
.fac-headcount-badge input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
  display: none;
}

.fac-unit {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 600;
  margin-left: 2px;
}

.modal-stepper-badge {
  display: flex !important;
  align-items: center;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(168, 85, 247, 0.45);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  height: 40px;
  box-sizing: border-box;
  width: 100%;
  gap: 8px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.modal-stepper-badge:focus-within {
  border-color: #a855f7;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.45);
}

.modal-stepper-badge .fac-stepper-btn {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  font-size: 1.2rem;
}

.modal-stepper-badge .fac-unit {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.modal-stepper-input {
  flex: 1;
  width: 100%;
  min-width: 45px;
  text-align: center;
  background: transparent;
  border: none;
  color: #a855f7;
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 800;
  outline: none;
  padding: 0;
}

.fac-limit-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.74rem;
}

.fac-limit-assigned {
  font-weight: 700;
  font-size: 0.8rem;
  font-family: var(--font-mono);
}

.fac-limit-avail {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.fac-progress-track {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}

.fac-progress-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.3s ease, background 0.3s ease;
}

.fac-mobility-hint {
  font-size: 0.68rem;
  color: var(--text-muted);
  line-height: 1.25;
  text-align: center;
}

/* Control groups & sliders in bay cards */
.sim-control-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.sim-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.sim-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.sim-icon {
  font-size: 0.85rem;
}

.sim-val-wrap {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.sim-val-badge {
  font-family: var(--font-mono);
  padding: 0.15rem 0.55rem;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
}

.sim-val-badge.badge-space {
  background: rgba(245, 158, 11, 0.12);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.sim-val-badge.badge-crew {
  background: rgba(168, 85, 247, 0.12);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.3);
}

.sim-val-badge.badge-time {
  background: rgba(236, 72, 153, 0.12);
  color: #f472b6;
  border: 1px solid rgba(236, 72, 153, 0.3);
}

.sim-cap-chip {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
}

.sim-cap-avail {
  background: rgba(16, 185, 129, 0.12);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.sim-cap-idle {
  background: rgba(148, 163, 184, 0.12);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.25);
}

/* Polished Range Sliders */
.sim-slider {
  width: 100%;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  outline: none;
  -webkit-appearance: none;
  cursor: pointer;
  margin: 0.2rem 0;
  transition: background 0.15s ease;
}

.sim-slider:hover {
  background: rgba(255, 255, 255, 0.14);
}

.sim-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  cursor: grab;
  border: 2px solid #ffffff;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.sim-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

.sim-slider::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.25);
}

.slider-space::-webkit-slider-thumb {
  background: #f59e0b;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
}

.slider-crew::-webkit-slider-thumb {
  background: #a855f7;
  box-shadow: 0 0 8px rgba(168, 85, 247, 0.6);
}

.slider-time::-webkit-slider-thumb {
  background: #ec4899;
  box-shadow: 0 0 8px rgba(236, 72, 153, 0.6);
}

.sim-slider-cap-warn {
  color: #f87171 !important;
  font-weight: 700;
}

/* Modals */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 1rem;
}

.modal-overlay.active {
  display: flex !important;
}

.modal-overlay:not(.active) {
  display: none !important;
}

.modal-content {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  max-width: 650px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.modal-content.modal-lg {
  max-width: 880px;
}

.modal-content.modal-xl {
  max-width: min(1820px, 98vw);
  width: 98vw;
}

#marksScheduleModal,
#allocationWorkbenchModal {
  z-index: 95;
}

#paintSpecsModal {
  z-index: 105;
}

#importPiecesModal, #addPieceModal, #editPieceModal, #auditDuplicatesModal,
#autoAllocateModal, #rolloverModal, #timelineLoadModal, #editProductModal, #specModal, #addProductModal, #addCoatModal, #editCoatModal {
  z-index: 120;
}

#timelineLoadModal {
  z-index: 2000 !important;
}

#timelineLoadModal .modal-card,
#timelineLoadModal .timeline-load-modal-card {
  max-width: 1380px;
  width: 96vw;
  max-height: 92vh;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75);
  border-radius: var(--radius-lg);
}

#timelineLoadModal .timeline-load-modal-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 30 !important;
  background: var(--bg-card) !important;
  border-bottom: 1px solid var(--border-color) !important;
  padding: 1.25rem 2rem 1.15rem 2rem !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  flex-shrink: 0 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

[data-theme="light"] #timelineLoadModal .timeline-load-modal-header,
body.theme-light #timelineLoadModal .timeline-load-modal-header {
  background: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

#timelineLoadModal .timeline-load-modal-body {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  padding: 1.5rem 2rem 1.75rem 2rem !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

#marksScheduleModal .modal-content {
  max-width: min(1820px, 98vw);
  width: 98vw;
  height: 92vh;
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
}

#marksScheduleModal .modal-body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 0.75rem 1.25rem;
  min-height: 0;
  gap: 0.65rem;
}

#marksScheduleModal .table-responsive {
  flex: 1;
  min-height: 250px;
  overflow: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-card-subtle);
}

#marksScheduleModal .data-table thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg-card);
  box-shadow: 0 1px 0 var(--border-color);
}

#allocationWorkbenchModal .modal-content {
  max-width: min(1820px, 98vw);
  width: 98vw;
  height: 92vh;
  max-height: 94vh;
  display: flex;
  flex-direction: column;
}

#allocationWorkbenchModal .modal-body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0.85rem;
  min-height: 0;
  gap: 0.4rem;
}

#paintSpecsModal .modal-content {
  max-width: min(1820px, 98vw);
  width: 98vw;
  height: 92vh;
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
}

#paintSpecsModal .modal-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  scroll-behavior: auto;
  display: flex;
  flex-direction: column;
  padding: 0.75rem 1.25rem;
  min-height: 0;
  gap: 0.5rem;
}

/* Paint Specifications & Marks Modal Tab Strip */
#paintSpecsModal .paint-specs-tabs,
#marksScheduleModal .marks-schedule-tabs {
  display: flex;
  gap: 0.35rem;
  border-bottom: 1px solid var(--border-color);
  padding: 0 1.25rem;
  background: var(--bg-card-subtle);
  align-items: flex-end;
  flex-shrink: 0;
  overflow-x: auto;
}

#paintSpecsModal .paint-specs-tab-btn,
#marksScheduleModal .paint-specs-tab-btn {
  background: transparent !important;
  border: none !important;
  border-bottom: 3px solid transparent !important;
  box-shadow: none !important;
  color: var(--text-muted);
  padding: 0.65rem 1.15rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  transition: all 0.15s ease-in-out;
  border-top-left-radius: var(--radius-sm);
  border-top-right-radius: var(--radius-sm);
  margin-bottom: -1px;
  position: relative;
}

#paintSpecsModal .paint-specs-tab-btn:hover,
#marksScheduleModal .paint-specs-tab-btn:hover {
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.04) !important;
}

#paintSpecsModal .paint-specs-tab-btn.active,
#marksScheduleModal .paint-specs-tab-btn.active {
  color: var(--color-primary) !important;
  border-bottom: 3px solid var(--color-primary) !important;
  font-weight: 700 !important;
  background: rgba(168, 85, 247, 0.08) !important;
}

#paintSpecsModal .paint-specs-tab-btn .tab-icon,
#marksScheduleModal .paint-specs-tab-btn .tab-icon {
  font-size: 1.05rem;
  line-height: 1;
}

/* Light Mode Overrides for Paint Specs & Marks Tabs */
[data-theme="light"] #paintSpecsModal .paint-specs-tabs,
[data-theme="light"] #marksScheduleModal .marks-schedule-tabs,
html.light #paintSpecsModal .paint-specs-tabs,
html.light #marksScheduleModal .marks-schedule-tabs,
html:not(.dark) #paintSpecsModal .paint-specs-tabs,
html:not(.dark) #marksScheduleModal .marks-schedule-tabs {
  background: #f8fafc !important;
  border-bottom-color: #cbd5e1 !important;
}

[data-theme="light"] #paintSpecsModal .paint-specs-tab-btn,
[data-theme="light"] #marksScheduleModal .paint-specs-tab-btn,
html.light #paintSpecsModal .paint-specs-tab-btn,
html.light #marksScheduleModal .paint-specs-tab-btn,
html:not(.dark) #paintSpecsModal .paint-specs-tab-btn,
html:not(.dark) #marksScheduleModal .paint-specs-tab-btn {
  color: #64748b !important;
}

[data-theme="light"] #paintSpecsModal .paint-specs-tab-btn:hover,
[data-theme="light"] #marksScheduleModal .paint-specs-tab-btn:hover,
html.light #paintSpecsModal .paint-specs-tab-btn:hover,
html.light #marksScheduleModal .paint-specs-tab-btn:hover,
html:not(.dark) #paintSpecsModal .paint-specs-tab-btn:hover,
html:not(.dark) #marksScheduleModal .paint-specs-tab-btn:hover {
  color: #0f172a !important;
  background: #f1f5f9 !important;
}

[data-theme="light"] #paintSpecsModal .paint-specs-tab-btn.active,
[data-theme="light"] #marksScheduleModal .paint-specs-tab-btn.active,
html.light #paintSpecsModal .paint-specs-tab-btn.active,
html.light #marksScheduleModal .paint-specs-tab-btn.active,
html:not(.dark) #paintSpecsModal .paint-specs-tab-btn.active,
html:not(.dark) #marksScheduleModal .paint-specs-tab-btn.active {
  color: #9333ea !important;
  border-bottom: 3px solid #9333ea !important;
  background: rgba(147, 51, 234, 0.08) !important;
}

/* --- COMPACT PAINT SPEC CARDS & SCROLL RESPONSIVENESS --- */
#rowSpecsContainer {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

#paintSpecsModal .section-card,
#rowSpecsContainer .section-card,
.paint-spec-card {
  padding: 0.65rem 0.85rem !important;
  margin-bottom: 0 !important;
  border-radius: 8px !important;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  height: auto !important;
  min-height: 0 !important;
}

[data-theme="light"] #paintSpecsModal .section-card,
[data-theme="light"] #rowSpecsContainer .section-card,
[data-theme="light"] .paint-spec-card,
html.light #paintSpecsModal .section-card,
html.light #rowSpecsContainer .section-card,
html:not(.dark) #paintSpecsModal .section-card,
html:not(.dark) #rowSpecsContainer .section-card {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
}

#paintSpecsModal .section-card:hover,
#rowSpecsContainer .section-card:hover {
  border-color: rgba(168, 85, 247, 0.4);
}

[data-theme="light"] #paintSpecsModal .section-card:hover,
[data-theme="light"] #rowSpecsContainer .section-card:hover,
html:not(.dark) #paintSpecsModal .section-card:hover,
html:not(.dark) #rowSpecsContainer .section-card:hover {
  border-color: #9333ea !important;
  box-shadow: 0 2px 8px rgba(147, 51, 234, 0.08) !important;
}

#paintSpecsModal .section-header,
#rowSpecsContainer .section-header {
  margin-bottom: 0.35rem !important;
  padding-bottom: 0.35rem !important;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

[data-theme="light"] #paintSpecsModal .section-header,
[data-theme="light"] #rowSpecsContainer .section-header,
html:not(.dark) #paintSpecsModal .section-header,
html:not(.dark) #rowSpecsContainer .section-header {
  border-bottom-color: #e2e8f0 !important;
}

#paintSpecsModal .section-title,
#rowSpecsContainer .section-title {
  font-size: 0.92rem !important;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

[data-theme="light"] #paintSpecsModal .section-title,
[data-theme="light"] #rowSpecsContainer .section-title,
html:not(.dark) #paintSpecsModal .section-title,
html:not(.dark) #rowSpecsContainer .section-title {
  color: #0f172a !important;
}

#paintSpecsModal .section-subtitle,
#rowSpecsContainer .section-subtitle {
  font-size: 0.725rem !important;
  color: var(--text-muted);
  margin-top: 0.1rem;
}

[data-theme="light"] #paintSpecsModal .section-subtitle,
[data-theme="light"] #rowSpecsContainer .section-subtitle,
html:not(.dark) #paintSpecsModal .section-subtitle,
html:not(.dark) #rowSpecsContainer .section-subtitle {
  color: #475569 !important;
}

#paintSpecsModal .btn-sm,
#rowSpecsContainer .btn-sm {
  padding: 0.2rem 0.55rem !important;
  font-size: 0.75rem !important;
  height: 28px !important;
  border-radius: 4px !important;
}

/* Crucial: Prevent inner tables from having 400px min-height or capturing vertical mousewheel scroll */
#paintSpecsModal .table-responsive,
#rowSpecsContainer .table-responsive,
.spec-table-responsive {
  margin: 0.25rem 0 0 0 !important;
  padding: 0 !important;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  overflow-y: visible !important;
  overflow-x: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  min-height: auto !important;
  height: auto !important;
  -webkit-overflow-scrolling: touch;
}

[data-theme="light"] #paintSpecsModal .table-responsive,
[data-theme="light"] #rowSpecsContainer .table-responsive,
html:not(.dark) #paintSpecsModal .table-responsive,
html:not(.dark) #rowSpecsContainer .table-responsive {
  border-color: #cbd5e1 !important;
  background: #ffffff !important;
}

#paintSpecsModal .data-table,
#rowSpecsContainer .data-table {
  width: 100%;
  margin-bottom: 0 !important;
  border-collapse: collapse;
}

#paintSpecsModal .data-table thead th,
#rowSpecsContainer .data-table thead th {
  padding: 0.35rem 0.55rem !important;
  font-size: 0.7rem !important;
  font-weight: 700;
  height: 28px;
  background: var(--bg-card-subtle);
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
}

[data-theme="light"] #paintSpecsModal .data-table thead th,
[data-theme="light"] #rowSpecsContainer .data-table thead th,
html:not(.dark) #paintSpecsModal .data-table thead th,
html:not(.dark) #rowSpecsContainer .data-table thead th {
  background: #f8fafc !important;
  border-bottom: 1px solid #cbd5e1 !important;
  color: #334155 !important;
}

#paintSpecsModal .data-table td,
#rowSpecsContainer .data-table td {
  padding: 0.35rem 0.6rem !important;
  font-size: 0.78rem !important;
  line-height: 1.25 !important;
}

[data-theme="light"] #paintSpecsModal .data-table td,
[data-theme="light"] #rowSpecsContainer .data-table td,
html:not(.dark) #paintSpecsModal .data-table td,
html:not(.dark) #rowSpecsContainer .data-table td {
  border-bottom-color: #f1f5f9 !important;
  color: #0f172a !important;
}

#paintSpecsModal .data-table tfoot td,
#rowSpecsContainer .data-table tfoot td {
  padding: 0.35rem 0.6rem !important;
  font-size: 0.75rem !important;
  background: var(--bg-card-subtle) !important;
  border-top: 1px solid var(--border-color) !important;
}

[data-theme="light"] #paintSpecsModal .data-table tfoot td,
[data-theme="light"] #rowSpecsContainer .data-table tfoot td,
html:not(.dark) #paintSpecsModal .data-table tfoot td,
html:not(.dark) #rowSpecsContainer .data-table tfoot td {
  background: #f8fafc !important;
  border-top: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}

#paintSpecsModal .badge-chip,
#rowSpecsContainer .badge-chip {
  padding: 0.1rem 0.45rem !important;
  font-size: 0.68rem !important;
  font-weight: 600;
  border-radius: 4px;
}

.btn-specs-popup {
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-color);
  color: var(--text-highlight);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-sm);
  transition: all 0.15s ease-in-out;
  cursor: pointer;
}

.btn-specs-popup:hover {
  background: var(--bg-surface-elevated);
  border-color: #38bdf8;
  color: #38bdf8;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.2);
}

[data-theme="light"] .btn-specs-popup {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #0f172a;
}

[data-theme="light"] .btn-specs-popup:hover {
  background: #f0fdf4;
  border-color: #0284c7;
  color: #0284c7;
}

#modalLoadAllocationTable,
#loadAllocationTable {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  font-size: 0.76rem;
}

#modalLoadAllocationTable th,
#loadAllocationTable th {
  padding: 0.35rem 0.3rem;
  font-size: 0.70rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

#modalLoadAllocationTable td,
#loadAllocationTable td {
  padding: 0.22rem 0.32rem;
  font-size: 0.76rem;
  white-space: nowrap;
  vertical-align: middle;
}

#modalLoadAllocationTable thead th,
#loadAllocationTable thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-card);
  box-shadow: 0 1px 0 var(--border-color);
}

#modalLoadAllocationTable .timeline-stage-chip,
#loadAllocationTable .timeline-stage-chip {
  padding: 1px 4px;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1.15;
  border-radius: 3px;
  gap: 2px;
}

/* Load Allocation Table Light Mode */
[data-theme="light"] #modalLoadAllocationTable,
[data-theme="light"] #loadAllocationTable,
html.light #modalLoadAllocationTable,
html.light #loadAllocationTable,
html:not(.dark) #modalLoadAllocationTable,
html:not(.dark) #loadAllocationTable {
  background: #ffffff !important;
  color: #0f172a !important;
}

[data-theme="light"] #modalLoadAllocationTable thead th,
[data-theme="light"] #loadAllocationTable thead th,
html.light #modalLoadAllocationTable thead th,
html.light #loadAllocationTable thead th,
html:not(.dark) #modalLoadAllocationTable thead th,
html:not(.dark) #loadAllocationTable thead th {
  background: #f8fafc !important;
  color: #475569 !important;
  box-shadow: 0 1px 0 #cbd5e1 !important;
}

[data-theme="light"] #modalLoadAllocationTable tbody tr,
[data-theme="light"] #modalLoadAllocationTable td,
[data-theme="light"] #loadAllocationTable tbody tr,
[data-theme="light"] #loadAllocationTable td,
html.light #modalLoadAllocationTable tbody tr,
html.light #modalLoadAllocationTable td,
html.light #loadAllocationTable tbody tr,
html.light #loadAllocationTable td,
html:not(.dark) #modalLoadAllocationTable tbody tr,
html:not(.dark) #modalLoadAllocationTable td,
html:not(.dark) #loadAllocationTable tbody tr,
html:not(.dark) #loadAllocationTable td {
  background: #ffffff !important;
  color: #0f172a !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

[data-theme="light"] #modalLoadAllocationTable tbody tr:hover td,
[data-theme="light"] #loadAllocationTable tbody tr:hover td,
html.light #modalLoadAllocationTable tbody tr:hover td,
html.light #loadAllocationTable tbody tr:hover td,
html:not(.dark) #modalLoadAllocationTable tbody tr:hover td,
html:not(.dark) #loadAllocationTable tbody tr:hover td {
  background: #f8fafc !important;
}

.wb-stages-strip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
  max-width: 250px;
}

#autoAllocateModal .modal-content {
  max-width: min(1760px, 98vw);
  width: 98vw;
  height: 92vh;
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#autoAllocateModal .modal-header {
  flex-shrink: 0;
  padding: 0.85rem 1.5rem;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-card-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#autoAllocateModal .modal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 1.25rem 1.5rem;
}

#autoAllocateModal .modal-footer {
  flex-shrink: 0;
  padding: 0.85rem 1.5rem;
  border-top: 1px solid var(--border-color);
  background: var(--bg-card-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#autoAllocateModal .data-table {
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
}

#autoAllocateModal .data-table th,
#autoAllocateModal .data-table td {
  padding: 0.55rem 0.65rem;
  vertical-align: middle;
}

.modal-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-close,
.btn-icon[data-close-modal] {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.modal-close:hover,
.btn-icon[data-close-modal]:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.5);
  color: #ef4444;
}

.modal-body {
  padding: 1.25rem;
  overflow-y: auto;
}

.modal-footer {
  padding: 0.85rem 1.25rem;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  background: var(--bg-card-subtle);
}

/* Form Controls */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.form-group.col-span-2 {
  grid-column: span 2;
}

.form-group label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
}

.form-control {
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  outline: none;
  font-family: inherit;
}

.form-control:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

/* Toast Notifications */
.toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 100005;
}

.toast {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-left: 4px solid #3b82f6;
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  color: var(--text-main);
  font-size: 0.85rem;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 0.65rem;
  animation: slideIn 0.2s ease forwards;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Bay Capacity Analytics & Resource Graphs */
.bay-capacity-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

#bayCapacityContainerDashboard {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#bayCapacityContainerDashboard.cols-3,
.bay-capacity-grid.cols-3,
.bay-capacity-grid.cols-4 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bay-capacity-grid > *:only-child {
  grid-column: 1 / -1;
}

.bay-meter-card {
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  position: relative;
  min-width: 0;
}

.bay-meter-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.bay-meter-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-highlight);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.bay-meter-track {
  height: 24px;
  background: var(--bg-input);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex;
  border: 1px solid var(--border-color);
  position: relative;
}

.bay-meter-segment {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 800;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 4px;
  transition: width 0.3s ease;
}

.bay-stat-chips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  font-size: 0.75rem;
}

.bay-stat-chip {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
}

.bay-stat-chip span {
  color: var(--text-muted);
  font-size: 0.7rem;
  margin-bottom: 2px;
}

.bay-stat-chip strong {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--text-highlight);
}

.utilization-pill {
  font-size: 0.75rem;
  font-weight: 800;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.utilization-optimal {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.utilization-high {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.utilization-over {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.5);
}

/* Capability Conflict Warning Styles */
.badge-cap-conflict {
  background: rgba(239, 68, 68, 0.22);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.5);
  font-weight: 700;
}

.bay-cap-conflict-banner {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.45);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.8rem;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.08);
}

.bay-capacity-mismatch-banner {
  background: rgba(239, 68, 68, 0.14);
  border: 1px solid rgba(239, 68, 68, 0.55);
  border-left: 4px solid #ef4444;
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.8rem;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  box-shadow: 0 2px 10px rgba(239, 68, 68, 0.12);
}

.bay-meter-card.has-cap-conflict,
.bay-meter-card.has-capacity-mismatch,
.kpi-card.has-cap-conflict,
.kpi-card.has-capacity-mismatch {
  border-color: rgba(239, 68, 68, 0.65) !important;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.18) !important;
}

.facility-conflict-banner {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.5);
  border-radius: var(--radius-md);
  padding: 0.85rem 1.25rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.15);
}

/* ==========================================================================
   Collapsible Unified Alert Banner & Pulsing Glow
   ========================================================================== */
.shop-unified-alert-card {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.shop-unified-alert-card.is-collapsed {
  padding: 0.65rem 1rem !important;
  cursor: pointer;
  border-width: 1.5px !important;
}

.shop-unified-alert-card.is-collapsed.alert-pulse-glow {
  animation: alertBannerPulseGlow 2.2s infinite ease-in-out;
}

@keyframes alertBannerPulseGlow {
  0% {
    border-color: rgba(239, 68, 68, 0.55);
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.3), 
                0 0 20px rgba(239, 68, 68, 0.15),
                inset 0 0 10px rgba(239, 68, 68, 0.08);
    background: rgba(239, 68, 68, 0.10);
  }
  50% {
    border-color: rgba(248, 113, 113, 0.95);
    box-shadow: 0 0 22px rgba(239, 68, 68, 0.75), 
                0 0 38px rgba(239, 68, 68, 0.4),
                inset 0 0 16px rgba(239, 68, 68, 0.22);
    background: rgba(239, 68, 68, 0.20);
  }
  100% {
    border-color: rgba(239, 68, 68, 0.55);
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.3), 
                0 0 20px rgba(239, 68, 68, 0.15),
                inset 0 0 10px rgba(239, 68, 68, 0.08);
    background: rgba(239, 68, 68, 0.10);
  }
}

.shop-unified-alert-card.is-collapsed .alert-warning-icon {
  display: inline-block;
  animation: alertWarningIconPulse 2.2s infinite ease-in-out;
}

@keyframes alertWarningIconPulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 3px rgba(239, 68, 68, 0.5));
  }
  50% {
    transform: scale(1.18);
    filter: drop-shadow(0 0 10px rgba(239, 68, 68, 0.95));
  }
}

.shop-unified-alert-card.is-expanded {
  padding: 0.85rem 1.15rem !important;
  border-color: rgba(239, 68, 68, 0.75);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35), 0 0 14px rgba(239, 68, 68, 0.15);
  background: rgba(239, 68, 68, 0.12);
}

.shop-unified-alert-card .alert-collapse-btn {
  background: rgba(239, 68, 68, 0.22);
  border: 1px solid rgba(239, 68, 68, 0.55);
  color: #fca5a5;
  font-weight: 700;
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: all 0.2s ease;
}

.shop-unified-alert-card .alert-collapse-btn:hover {
  background: rgba(239, 68, 68, 0.35) !important;
  border-color: rgba(248, 113, 113, 0.85) !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.5);
  transform: translateY(-1px);
}

.shop-unified-alert-card .alert-dismiss-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--text-muted);
  padding: 0.35rem 0.6rem;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.shop-unified-alert-card .alert-dismiss-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

.alert-bay-groups {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  width: 100%;
}

.alert-bay-group {
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 0.65rem 0.85rem 0.75rem 0.85rem;
}

.alert-bay-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.55rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 0.35rem;
}

.alert-bay-group-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 800;
  font-size: 0.82rem;
  color: #f8fafc;
  letter-spacing: 0.03em;
}

.alert-bay-issue-count-pill {
  font-size: 0.68rem;
  font-weight: 700;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1px 7px;
  border-radius: 4px;
}

.alert-issue-card {
  position: relative;
  background: rgba(15, 23, 42, 0.75);
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  border-left: 4.5px solid #ef4444;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.alert-issue-card:hover {
  transform: translateY(-1.5px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.55) !important;
}

/* Dark Mode Card Theme Varieties */
.alert-issue-card.theme-danger,
.alert-issue-card.theme-red {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.18) 0%, rgba(15, 23, 42, 0.88) 100%);
  border: 1.5px solid rgba(239, 68, 68, 0.55);
  border-left: 4.5px solid #ef4444;
}
.alert-issue-card.theme-danger .alert-issue-title,
.alert-issue-card.theme-red .alert-issue-title {
  color: #fca5a5;
}

.alert-issue-card.theme-orange {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.18) 0%, rgba(15, 23, 42, 0.88) 100%);
  border: 1.5px solid rgba(249, 115, 22, 0.55);
  border-left: 4.5px solid #f97316;
}
.alert-issue-card.theme-orange .alert-issue-title {
  color: #fdba74;
}

.alert-issue-card.theme-amber,
.alert-issue-card.theme-warning {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.18) 0%, rgba(15, 23, 42, 0.88) 100%);
  border: 1.5px solid rgba(245, 158, 11, 0.55);
  border-left: 4.5px solid #f59e0b;
}
.alert-issue-card.theme-amber .alert-issue-title,
.alert-issue-card.theme-warning .alert-issue-title {
  color: #fde68a;
}

.alert-issue-card.theme-purple {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.18) 0%, rgba(15, 23, 42, 0.88) 100%);
  border: 1.5px solid rgba(168, 85, 247, 0.55);
  border-left: 4.5px solid #a855f7;
}
.alert-issue-card.theme-purple .alert-issue-title {
  color: #d8b4fe;
}

.alert-issue-title {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.alert-issue-badge {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 4px;
  font-family: var(--font-mono, monospace);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.alert-issue-contract {
  font-size: 0.72rem;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.alert-issue-contract-name {
  color: #cbd5e1;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
}

.alert-issue-details {
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.35;
  margin-top: 0.05rem;
}

.alert-issue-subtext {
  font-size: 0.68rem;
  color: #94a3b8;
  margin-top: 0.05rem;
  opacity: 0.85;
}

.alert-badge-chip {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.alert-badge-chip.chip-danger,
.alert-badge-chip.chip-red {
  background: rgba(239, 68, 68, 0.28);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.55);
}
.alert-badge-chip.chip-orange {
  background: rgba(249, 115, 22, 0.28);
  color: #fdba74;
  border: 1px solid rgba(249, 115, 22, 0.55);
}
.alert-badge-chip.chip-warning,
.alert-badge-chip.chip-amber {
  background: rgba(245, 158, 11, 0.28);
  color: #fde68a;
  border: 1px solid rgba(245, 158, 11, 0.55);
}
.alert-badge-chip.chip-purple {
  background: rgba(168, 85, 247, 0.28);
  color: #d8b4fe;
  border: 1px solid rgba(168, 85, 247, 0.55);
}

.alert-total-issues-pill {
  font-size: 0.72rem;
  font-weight: 700;
  color: #cbd5e1;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 2px 8px;
  border-radius: 999px;
}

/* Light Mode Rules for Facility Alert Banner */
[data-theme="light"] .shop-unified-alert-card,
html.light .shop-unified-alert-card,
html:not(.dark) .shop-unified-alert-card {
  background: #fef2f2 !important;
  border-color: #fca5a5 !important;
  box-shadow: 0 2px 10px rgba(239, 68, 68, 0.10) !important;
}

[data-theme="light"] .shop-unified-alert-card.is-collapsed.alert-pulse-glow,
html.light .shop-unified-alert-card.is-collapsed.alert-pulse-glow,
html:not(.dark) .shop-unified-alert-card.is-collapsed.alert-pulse-glow {
  animation: alertBannerPulseGlowLight 2.2s infinite ease-in-out;
}

@keyframes alertBannerPulseGlowLight {
  0%, 100% {
    border-color: #fca5a5;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.18), inset 0 0 4px rgba(239, 68, 68, 0.04);
    background: #fef2f2;
  }
  50% {
    border-color: #ef4444;
    box-shadow: 0 0 16px rgba(239, 68, 68, 0.32), inset 0 0 8px rgba(239, 68, 68, 0.08);
    background: #fff5f5;
  }
}

[data-theme="light"] .alert-badge-chip.chip-danger,
html.light .alert-badge-chip.chip-danger,
html:not(.dark) .alert-badge-chip.chip-danger {
  background: #fee2e2 !important;
  color: #991b1b !important;
  border-color: #f87171 !important;
}

[data-theme="light"] .alert-badge-chip.chip-orange,
html.light .alert-badge-chip.chip-orange,
html:not(.dark) .alert-badge-chip.chip-orange {
  background: #ffedd5 !important;
  color: #9a3412 !important;
  border-color: #fdba74 !important;
}

[data-theme="light"] .alert-badge-chip.chip-warning,
html.light .alert-badge-chip.chip-warning,
html:not(.dark) .alert-badge-chip.chip-warning {
  background: #fef3c7 !important;
  color: #92400e !important;
  border-color: #fde68a !important;
}

[data-theme="light"] .alert-badge-chip.chip-purple,
html.light .alert-badge-chip.chip-purple,
html:not(.dark) .alert-badge-chip.chip-purple {
  background: #f3e8ff !important;
  color: #6b21a8 !important;
  border-color: #d8b4fe !important;
}

[data-theme="light"] .alert-total-issues-pill,
html.light .alert-total-issues-pill,
html:not(.dark) .alert-total-issues-pill {
  background: #ffffff !important;
  color: #991b1b !important;
  border-color: #fca5a5 !important;
  font-weight: 800 !important;
}

[data-theme="light"] .shop-unified-alert-card .alert-collapse-btn,
html.light .shop-unified-alert-card .alert-collapse-btn,
html:not(.dark) .shop-unified-alert-card .alert-collapse-btn {
  background: #ffffff !important;
  border: 1.5px solid #ef4444 !important;
  color: #b91c1c !important;
  font-weight: 700 !important;
}

[data-theme="light"] .shop-unified-alert-card .alert-collapse-btn:hover,
html.light .shop-unified-alert-card .alert-collapse-btn:hover,
html:not(.dark) .shop-unified-alert-card .alert-collapse-btn:hover {
  background: #ef4444 !important;
  border-color: #dc2626 !important;
  color: #ffffff !important;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.4) !important;
}

[data-theme="light"] .shop-unified-alert-card .alert-dismiss-btn,
html.light .shop-unified-alert-card .alert-dismiss-btn,
html:not(.dark) .shop-unified-alert-card .alert-dismiss-btn {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
}

[data-theme="light"] .shop-unified-alert-card .alert-dismiss-btn:hover,
html.light .shop-unified-alert-card .alert-dismiss-btn:hover,
html:not(.dark) .shop-unified-alert-card .alert-dismiss-btn:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

[data-theme="light"] .alert-bay-group,
html.light .alert-bay-group,
html:not(.dark) .alert-bay-group {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.06) !important;
}

[data-theme="light"] .alert-bay-group-header,
html.light .alert-bay-group-header,
html:not(.dark) .alert-bay-group-header {
  border-bottom: 1.5px solid #e2e8f0 !important;
}

[data-theme="light"] .alert-bay-group-title,
html.light .alert-bay-group-title,
html:not(.dark) .alert-bay-group-title {
  color: #0f172a !important;
}

[data-theme="light"] .alert-bay-issue-count-pill,
html.light .alert-bay-issue-count-pill,
html:not(.dark) .alert-bay-issue-count-pill {
  color: #475569 !important;
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
}

/* Light mode for alert issue cards */
[data-theme="light"] .alert-issue-card,
html.light .alert-issue-card,
html:not(.dark) .alert-issue-card {
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08) !important;
  border-radius: 6px !important;
}

[data-theme="light"] .alert-issue-card:hover,
html.light .alert-issue-card:hover,
html:not(.dark) .alert-issue-card:hover {
  transform: translateY(-1.5px);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12) !important;
}

[data-theme="light"] .alert-issue-card.theme-danger,
[data-theme="light"] .alert-issue-card.theme-red,
html.light .alert-issue-card.theme-danger,
html.light .alert-issue-card.theme-red,
html:not(.dark) .alert-issue-card.theme-danger,
html:not(.dark) .alert-issue-card.theme-red {
  background: #fff5f5 !important;
  border: 1.5px solid #f87171 !important;
  border-left: 4.5px solid #dc2626 !important;
}

[data-theme="light"] .alert-issue-card.theme-amber,
[data-theme="light"] .alert-issue-card.theme-warning,
html.light .alert-issue-card.theme-amber,
html.light .alert-issue-card.theme-warning,
html:not(.dark) .alert-issue-card.theme-amber,
html:not(.dark) .alert-issue-card.theme-warning {
  background: #fffbeb !important;
  border: 1.5px solid #fbbf24 !important;
  border-left: 4.5px solid #d97706 !important;
}

[data-theme="light"] .alert-issue-card.theme-orange,
html.light .alert-issue-card.theme-orange,
html:not(.dark) .alert-issue-card.theme-orange {
  background: #fff7ed !important;
  border: 1.5px solid #fb923c !important;
  border-left: 4.5px solid #ea580c !important;
}

[data-theme="light"] .alert-issue-card.theme-purple,
html.light .alert-issue-card.theme-purple,
html:not(.dark) .alert-issue-card.theme-purple {
  background: #faf5ff !important;
  border: 1.5px solid #c084fc !important;
  border-left: 4.5px solid #9333ea !important;
}

[data-theme="light"] .alert-issue-card.theme-danger .alert-issue-title,
[data-theme="light"] .alert-issue-card.theme-red .alert-issue-title,
html.light .alert-issue-card.theme-danger .alert-issue-title,
html.light .alert-issue-card.theme-red .alert-issue-title,
html:not(.dark) .alert-issue-card.theme-danger .alert-issue-title,
html:not(.dark) .alert-issue-card.theme-red .alert-issue-title {
  color: #991b1b !important;
}

[data-theme="light"] .alert-issue-card.theme-amber .alert-issue-title,
[data-theme="light"] .alert-issue-card.theme-warning .alert-issue-title,
html.light .alert-issue-card.theme-amber .alert-issue-title,
html.light .alert-issue-card.theme-warning .alert-issue-title,
html:not(.dark) .alert-issue-card.theme-amber .alert-issue-title,
html:not(.dark) .alert-issue-card.theme-warning .alert-issue-title {
  color: #92400e !important;
}

[data-theme="light"] .alert-issue-card.theme-orange .alert-issue-title,
html.light .alert-issue-card.theme-orange .alert-issue-title,
html:not(.dark) .alert-issue-card.theme-orange .alert-issue-title {
  color: #9a3412 !important;
}

[data-theme="light"] .alert-issue-card.theme-purple .alert-issue-title,
html.light .alert-issue-card.theme-purple .alert-issue-title,
html:not(.dark) .alert-issue-card.theme-purple .alert-issue-title {
  color: #6b21a8 !important;
}

[data-theme="light"] .alert-issue-details,
html.light .alert-issue-details,
html:not(.dark) .alert-issue-details {
  color: #0f172a !important;
}

[data-theme="light"] .alert-issue-contract-name,
html.light .alert-issue-contract-name,
html:not(.dark) .alert-issue-contract-name {
  color: #334155 !important;
}

[data-theme="light"] .alert-issue-subtext,
html.light .alert-issue-subtext,
html:not(.dark) .alert-issue-subtext {
  color: #64748b !important;
}

/* Light mode chips / badges inside issue cards */
[data-theme="light"] .alert-badge-chip.chip-danger,
[data-theme="light"] .alert-badge-chip.chip-red,
html.light .alert-badge-chip.chip-danger,
html.light .alert-badge-chip.chip-red,
html:not(.dark) .alert-badge-chip.chip-danger,
html:not(.dark) .alert-badge-chip.chip-red {
  background: #fee2e2 !important;
  color: #991b1b !important;
  border: 1px solid #f87171 !important;
}

[data-theme="light"] .alert-badge-chip.chip-orange,
html.light .alert-badge-chip.chip-orange,
html:not(.dark) .alert-badge-chip.chip-orange {
  background: #ffedd5 !important;
  color: #9a3412 !important;
  border: 1px solid #fb923c !important;
}

[data-theme="light"] .alert-badge-chip.chip-warning,
[data-theme="light"] .alert-badge-chip.chip-amber,
html.light .alert-badge-chip.chip-warning,
html.light .alert-badge-chip.chip-amber,
html:not(.dark) .alert-badge-chip.chip-warning,
html:not(.dark) .alert-badge-chip.chip-amber {
  background: #fef3c7 !important;
  color: #92400e !important;
  border: 1px solid #fbbf24 !important;
}

[data-theme="light"] .alert-badge-chip.chip-purple,
html.light .alert-badge-chip.chip-purple,
html:not(.dark) .alert-badge-chip.chip-purple {
  background: #f3e8ff !important;
  color: #6b21a8 !important;
  border: 1px solid #c084fc !important;
}

/* ==========================================================================
   Allocated Line Column - Compact Red Warning & Hover Tooltip
   ========================================================================== */
.bay-alloc-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100%;
}

.bay-select-input {
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.bay-select-input.bay-select-error {
  color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.16) !important;
  border: 1.5px solid #ef4444 !important;
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.25) !important;
}

.bay-select-input.bay-select-error:hover,
.bay-select-input.bay-select-error:focus {
  border-color: #f87171 !important;
  background: rgba(239, 68, 68, 0.24) !important;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.4) !important;
}

.bay-select-input.bay-select-warn {
  color: #fbbf24 !important;
  background: rgba(245, 158, 11, 0.14) !important;
  border: 1.5px solid rgba(245, 158, 11, 0.6) !important;
}

.bay-select-input.bay-select-awaiting {
  color: #38bdf8 !important;
  background: rgba(56, 189, 248, 0.08) !important;
  border: 1px dashed rgba(56, 189, 248, 0.5) !important;
}

.bay-select-input.bay-select-ok {
  color: #38bdf8 !important;
  background: var(--bg-input) !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
}

/* Floating Context Tooltip on Hover */
.bay-alloc-tooltip {
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  min-width: 200px;
  max-width: 300px;
  padding: 0.45rem 0.7rem;
  border-radius: var(--radius-sm, 6px);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.35;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  z-index: 9999;
  white-space: normal;
  word-break: break-word;
}

.bay-alloc-wrap:hover .bay-alloc-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.bay-alloc-tooltip.tooltip-error {
  background: #1a0808;
  color: #fca5a5;
  border: 1px solid #ef4444;
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.35);
}

.bay-alloc-tooltip.tooltip-warn {
  background: #1a1408;
  color: #fde68a;
  border: 1px solid #f59e0b;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.3);
}

.bay-alloc-tooltip.tooltip-info {
  background: #081524;
  color: #bae6fd;
  border: 1px solid #38bdf8;
  box-shadow: 0 4px 16px rgba(56, 189, 248, 0.3);
}

/* Tooltip Light Mode */
[data-theme="light"] .bay-alloc-tooltip.tooltip-error,
html.light .bay-alloc-tooltip.tooltip-error,
html:not(.dark) .bay-alloc-tooltip.tooltip-error {
  background: #fef2f2 !important;
  color: #991b1b !important;
  border: 1px solid #f87171 !important;
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.15) !important;
}

[data-theme="light"] .bay-alloc-tooltip.tooltip-warn,
html.light .bay-alloc-tooltip.tooltip-warn,
html:not(.dark) .bay-alloc-tooltip.tooltip-warn {
  background: #fffbeb !important;
  color: #92400e !important;
  border: 1px solid #fcd34d !important;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.15) !important;
}

[data-theme="light"] .bay-alloc-tooltip.tooltip-info,
html.light .bay-alloc-tooltip.tooltip-info,
html:not(.dark) .bay-alloc-tooltip.tooltip-info {
  background: #f0f9ff !important;
  color: #075985 !important;
  border: 1px solid #7dd3fc !important;
  box-shadow: 0 4px 16px rgba(56, 189, 248, 0.15) !important;
}

/* Tooltip arrow */
.bay-alloc-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: inherit;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
}

/* Top rows tooltip flip down */
#loadAllocationTable tbody tr:nth-child(-n+2) .bay-alloc-tooltip,
#modalLoadAllocationTable tbody tr:nth-child(-n+2) .bay-alloc-tooltip {
  bottom: auto;
  top: calc(100% + 7px);
}
#loadAllocationTable tbody tr:nth-child(-n+2) .bay-alloc-tooltip::after,
#modalLoadAllocationTable tbody tr:nth-child(-n+2) .bay-alloc-tooltip::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: inherit;
}

/* Product Catalog Grid */
.product-catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

.product-card {
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.product-card:hover {
  border-color: #3b82f6;
  transform: translateY(-2px);
}

/* Print Layout */
@media print {
  body {
    background: white !important;
    color: black !important;
  }
  .app-header, .app-nav, .header-actions, .btn, .no-print {
    display: none !important;
  }
  .app-main {
    padding: 0 !important;
    max-width: 100% !important;
  }
  .section-card {
    border: 1px solid #ccc !important;
    box-shadow: none !important;
    page-break-inside: avoid;
  }
  .data-table th, .data-table td {
    color: black !important;
    border-color: #ddd !important;
  }
  .data-table thead th,
  .data-table th,
  .data-table thead th.col-actions,
  .data-table th.col-actions,
  .data-table td.col-actions {
    position: static !important;
    box-shadow: none !important;
  }
  .table-responsive,
  .table-container {
    max-height: none !important;
    overflow: visible !important;
  }
}

/* ==========================================================================
   Revision Control & CSV Import Styling
   ========================================================================== */
.badge-rev {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 800;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  text-transform: uppercase;
}

.badge-rev-a {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.35);
}

.badge-rev-bump {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.5);
  animation: pulse-border 2s infinite ease-in-out;
}

.badge-rev-new {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.badge-rev-unchanged {
  background: rgba(148, 163, 184, 0.1);
  color: var(--text-muted);
  border: 1px solid rgba(148, 163, 184, 0.2);
}

.diff-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  border: 1px solid rgba(245, 158, 11, 0.3);
  margin: 1px 2px;
}

.csv-drop-zone {
  border: 2px dashed var(--border-color);
  background: var(--bg-card-subtle);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.csv-drop-zone:hover, .csv-drop-zone.dragover {
  border-color: #3b82f6;
  background: rgba(59, 130, 246, 0.08);
}

.import-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.import-stat-card {
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-color);
  padding: 0.75rem;
  border-radius: var(--radius-sm);
  text-align: center;
}

.import-stat-card span {
  display: block;
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.import-stat-card strong {
  font-size: 1.25rem;
  font-family: var(--font-mono);
}

#importPiecesModal .modal-content {
  max-width: min(1560px, 97vw);
  width: 97vw;
  max-height: 92vh;
}

#importPiecesModal .data-table thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg-card);
  box-shadow: 0 1px 0 var(--border-color);
}

/* ==========================================================================
   Operations Control & Shop Floor Intelligence (Combined Schedule & Progress)
   ========================================================================== */
.ops-control-panel {
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
  scroll-margin-top: 90px;
}

.ops-control-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 0.55rem;
}

.ops-card {
  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 0.55rem 0.85rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ops-card:hover {
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
}

[data-theme="light"] .ops-card {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.ops-card-floor {
  border-left: 3.5px solid #10b981;
}

.ops-card-manpower {
  border-left: 3.5px solid #38bdf8;
}

.ops-card-staffing {
  border-left: 3.5px solid #a855f7;
}

.ops-pill-green {
  border: 1.5px solid #10b981;
  color: #10b981;
  background: rgba(168, 185, 129, 0.08);
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.35);
  border-radius: 9999px;
  padding: 2px 10px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.ops-pill-blue {
  border: 1.5px solid #38bdf8;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.08);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.35);
  border-radius: 9999px;
  padding: 2px 10px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.ops-pill-purple {
  border: 1.5px solid #a855f7;
  color: #c084fc;
  background: rgba(168, 85, 247, 0.08);
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.35);
  border-radius: 9999px;
  padding: 2px 10px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.ops-pill-amber {
  border: 1.5px solid #f59e0b;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.08);
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.35);
  border-radius: 9999px;
  padding: 2px 10px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.ops-pill-red {
  border: 1.5px solid #ef4444;
  color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.35);
  border-radius: 9999px;
  padding: 2px 10px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.ops-room-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 0.72rem;
  font-weight: 600;
}

[data-theme="light"] .ops-room-badge {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #334155;
}

.ops-advisory-box {
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 0.65rem 0.95rem;
  margin-top: 0.55rem;
  font-size: 0.74rem;
  transition: all 0.2s ease;
}

.ops-advisory-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  cursor: pointer;
  user-select: none;
  border-radius: 6px;
  padding: 0.2rem 0.35rem;
  margin: -0.2rem -0.35rem;
  transition: background 0.15s ease;
}

.ops-advisory-header:hover {
  background: rgba(255, 255, 255, 0.04);
}

.ops-advisory-header:hover #toggleAdvisoryIcon {
  border-color: rgba(245, 158, 11, 0.5);
  color: #f59e0b;
}

.ops-advisory-header:hover #toggleAdvisoryBadge {
  filter: brightness(1.15);
}

.ops-advisory-main-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 800;
  color: #cbd5e1;
  font-size: 0.74rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.ops-advisory-badge {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.12rem 0.45rem;
  border-radius: 4px;
  text-transform: none;
  letter-spacing: normal;
  transition: all 0.2s ease;
}

.ops-advisory-badge.is-expanded {
  color: #cbd5e1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.ops-advisory-badge.is-collapsed {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.ops-advisory-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
}

.ops-advisory-meta-label {
  color: #94a3b8;
}

.ops-advisory-meta-crew {
  color: #38bdf8;
  font-weight: 700;
}

.ops-advisory-meta-reserve {
  color: #c084fc;
  font-weight: 700;
}

.ops-advisory-meta-buffer {
  color: #10b981;
  font-weight: 700;
}

.ops-advisory-strategy-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  padding: 0.45rem 0.65rem;
  transition: all 0.2s ease;
}

.ops-advisory-strategy-card:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.12);
}

.ops-strategy-title {
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.25rem;
  font-size: 0.74rem;
}

.ops-strategy-title.strategy-blue { color: #38bdf8; }
.ops-strategy-title.strategy-green { color: #10b981; }
.ops-strategy-title.strategy-amber { color: #f59e0b; }
.ops-strategy-title.strategy-purple { color: #c084fc; }

.ops-strategy-desc {
  color: #cbd5e1;
  line-height: 1.4;
  font-size: 0.71rem;
}

/* Light Theme overrides for Ops Advisory Box */
[data-theme="light"] .ops-advisory-box,
html.light .ops-advisory-box,
html:not(.dark) .ops-advisory-box {
  background: #f8fafc;
  border-color: #cbd5e1;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}

[data-theme="light"] .ops-advisory-header:hover,
html.light .ops-advisory-header:hover,
html:not(.dark) .ops-advisory-header:hover {
  background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .ops-advisory-main-title,
html.light .ops-advisory-main-title,
html:not(.dark) .ops-advisory-main-title {
  color: #0f172a !important;
}

[data-theme="light"] #toggleAdvisoryIcon,
html.light #toggleAdvisoryIcon,
html:not(.dark) #toggleAdvisoryIcon {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #475569 !important;
}

[data-theme="light"] .ops-advisory-badge.is-expanded,
html.light .ops-advisory-badge.is-expanded,
html:not(.dark) .ops-advisory-badge.is-expanded {
  color: #334155 !important;
  background: #e2e8f0 !important;
  border-color: #cbd5e1 !important;
}

[data-theme="light"] .ops-advisory-badge.is-collapsed,
html.light .ops-advisory-badge.is-collapsed,
html:not(.dark) .ops-advisory-badge.is-collapsed {
  color: #b45309 !important;
  background: #fef3c7 !important;
  border-color: #fde68a !important;
}

[data-theme="light"] .ops-advisory-meta-label,
html.light .ops-advisory-meta-label,
html:not(.dark) .ops-advisory-meta-label {
  color: #64748b !important;
}

[data-theme="light"] .ops-advisory-meta-crew,
html.light .ops-advisory-meta-crew,
html:not(.dark) .ops-advisory-meta-crew {
  color: #0284c7 !important;
}

[data-theme="light"] .ops-advisory-meta-reserve,
html.light .ops-advisory-meta-reserve,
html:not(.dark) .ops-advisory-meta-reserve {
  color: #7e22ce !important;
}

[data-theme="light"] .ops-advisory-meta-buffer,
html.light .ops-advisory-meta-buffer,
html:not(.dark) .ops-advisory-meta-buffer {
  color: #047857 !important;
}

[data-theme="light"] .ops-advisory-strategy-card,
html.light .ops-advisory-strategy-card,
html:not(.dark) .ops-advisory-strategy-card {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
}

[data-theme="light"] .ops-strategy-title.strategy-blue,
html.light .ops-strategy-title.strategy-blue,
html:not(.dark) .ops-strategy-title.strategy-blue {
  color: #0369a1 !important;
}

[data-theme="light"] .ops-strategy-title.strategy-green,
html.light .ops-strategy-title.strategy-green,
html:not(.dark) .ops-strategy-title.strategy-green {
  color: #047857 !important;
}

[data-theme="light"] .ops-strategy-title.strategy-amber,
html.light .ops-strategy-title.strategy-amber,
html:not(.dark) .ops-strategy-title.strategy-amber {
  color: #b45309 !important;
}

[data-theme="light"] .ops-strategy-title.strategy-purple,
html.light .ops-strategy-title.strategy-purple,
html:not(.dark) .ops-strategy-title.strategy-purple {
  color: #6b21a8 !important;
}

[data-theme="light"] .ops-strategy-desc,
html.light .ops-strategy-desc,
html:not(.dark) .ops-strategy-desc {
  color: #334155 !important;
}

/* ==========================================================================
   Line Facilities Admin & Load Allocation Workbench Styling
   ========================================================================== */
.progress-dual-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: rgba(0, 0, 0, 0.2);
  padding: 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
}

.bottleneck-badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.bottleneck-space {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.5);
}

.bottleneck-time {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.5);
}

.bottleneck-dual {
  background: rgba(239, 68, 68, 0.25);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.6);
  animation: pulse-border 2s infinite ease-in-out;
}

.bottleneck-optimal {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.5);
}

@media (max-width: 1200px) {
  #bayCapacityContainerDashboard,
  .gantt-bays-columns,
  .bay-capacity-grid.cols-3,
  .bay-capacity-grid.cols-4,
  .sim-grid.cols-3,
  .sim-grid.cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  .app-header {
    padding: 0.5rem 1rem;
    gap: 0.6rem;
  }
  .brand-wrapper {
    flex: 0 0 auto;
  }
  #headerFacilitySwitcher {
    flex: 1 1 auto;
    margin: 0 0.5rem;
  }
  .header-actions {
    flex: 0 0 auto;
    margin-left: auto;
  }
  .brand-title {
    font-size: 1.15rem;
  }
  .user-name-label {
    max-width: 100px;
  }
  .facility-select {
    max-width: 200px;
  }
  .app-nav {
    padding: 0 1rem;
  }
  .app-main {
    padding: 1rem;
  }
  .bay-capacity-grid,
  .sim-grid,
  .bay-capacity-grid.cols-3,
  .bay-capacity-grid.cols-4,
  .sim-grid.cols-3,
  .sim-grid.cols-4,
  #bayCapacityContainerDashboard,
  .gantt-bays-columns {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  .brand-subtitle {
    font-size: 0.58rem;
    letter-spacing: 0.1em;
    white-space: nowrap;
  }
  .user-name-label {
    display: none !important;
  }
  .facility-select {
    max-width: 140px;
    font-size: 0.9rem;
  }
}

@media (max-width: 340px) {
  .brand-subtitle {
    display: none !important;
  }
}

/* Unconfigured Paint Spec & Awaiting Allocation Warnings */
.load-unconfigured-banner {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.5);
  border-left: 4px solid #f59e0b;
  border-radius: var(--radius-md);
  padding: 0.85rem 1.25rem;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.15);
}

.load-card-awaiting-spec {
  background: rgba(245, 158, 11, 0.08) !important;
  border-left: 4px solid #f59e0b !important;
}

.badge-awaiting-spec {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.5);
  font-weight: 700;
}

.badge-awaiting-bay {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid #f59e0b;
  font-weight: 700;
}

/* Coat Stage Completion Toggles & Badges */
.stage-toggle-pair {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(255, 255, 255, 0.03);
  padding: 2px 4px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.stage-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 0.25rem 0.55rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  border: 1px solid transparent;
  user-select: none;
}

.stage-btn-done {
  background: #10b981 !important;
  color: #ffffff !important;
  border-color: #059669 !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 3px rgba(16, 185, 129, 0.4);
}

.stage-btn-done:hover {
  background: #059669 !important;
  border-color: #047857 !important;
  transform: translateY(-1px);
}

.stage-btn-curing {
  background: #0284c7 !important;
  color: #ffffff !important;
  border-color: #38bdf8 !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 3px rgba(56, 189, 248, 0.4);
}

.stage-btn-curing:hover {
  background: #0369a1 !important;
  border-color: #0284c7 !important;
  transform: translateY(-1px);
}

.stage-btn-pending {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-muted);
  border-color: var(--border-color);
}

.stage-btn-pending:hover {
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.4);
  transform: translateY(-1px);
}

.badge-rollover {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.4);
  animation: pulseRollover 2s infinite ease-in-out;
}

@keyframes pulseRollover {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.75; }
}

.pull-forward-prompt-card {
  background: rgba(56, 189, 248, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.1);
}

.candidate-pull-forward-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.85rem;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease;
}

.candidate-pull-forward-row:hover {
  border-color: rgba(56, 189, 248, 0.5);
}

.pull-forward-scroll-list {
  max-height: 280px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #10b981 rgba(0, 0, 0, 0.35);
  scrollbar-gutter: stable;
  padding-right: 0.5rem;
}

.pull-forward-scroll-list::-webkit-scrollbar {
  width: 10px;
}

.pull-forward-scroll-list::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.35);
  border-radius: 6px;
}

.pull-forward-scroll-list::-webkit-scrollbar-thumb {
  background: #10b981;
  border-radius: 6px;
  border: 2px solid rgba(17, 24, 39, 0.6);
}

.pull-forward-scroll-list::-webkit-scrollbar-thumb:hover {
  background: #059669;
}

/* ==========================================================================
   Workload Imbalance & Line Balancing Prompt Banner Styling
   ========================================================================== */
.shop-balance-prompt-card {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.12) 0%, rgba(245, 158, 11, 0.08) 50%, rgba(2, 132, 199, 0.08) 100%);
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: var(--radius-md);
  padding: 0.9rem 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
  animation: promptFadeIn 0.3s ease-out;
}

@keyframes promptFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.shop-balance-prompt-card .prompt-left {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex: 1;
  min-width: 280px;
}

.shop-balance-prompt-card .prompt-icon {
  font-size: 1.6rem;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.shop-balance-prompt-card .prompt-title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.shop-balance-prompt-card .prompt-badge {
  background: rgba(239, 68, 68, 0.25);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.4);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.shop-balance-prompt-card .prompt-desc {
  font-size: 0.82rem;
  color: var(--text-primary);
  margin-top: 0.25rem;
  line-height: 1.4;
}

.shop-balance-prompt-card .prompt-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Pulsing highlight for buttons when adjustment is recommended */
.btn-balance-pulse {
  animation: buttonPulseGlow 2s infinite ease-in-out !important;
  position: relative;
}

@keyframes buttonPulseGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.7);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 12px 3px rgba(168, 85, 247, 0.5);
    transform: scale(1.02);
  }
}

.btn-balance-pulse-orange {
  animation: buttonPulseOrange 2s infinite ease-in-out !important;
  position: relative;
}

@keyframes buttonPulseOrange {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 12px 3px rgba(245, 158, 11, 0.5);
    transform: scale(1.02);
  }
}

/* Operating Working Days Selection Pills */
.day-pills-group {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.btn-day-pill {
  padding: 0.28rem 0.65rem;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}
.btn-day-pill:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.25);
}
.btn-day-pill.active {
  background: var(--gradient-primary);
  color: #ffffff;
  border-color: var(--color-primary);
  font-weight: 700;
  box-shadow: 0 0 8px rgba(168, 85, 247, 0.4);
}
.btn-day-pill.btn-day-pill-weekend {
  border-style: dashed;
}
.btn-day-pill.btn-day-pill-weekend.active {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border-color: #fbbf24;
  border-style: solid;
  color: #ffffff;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
}

/* ==========================================================================
   Graphical Bay Parameters & Workforce Card Styles
   ========================================================================== */
.bay-params-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}

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

.bay-param-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, rgba(0, 0, 0, 0.28) 100%);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.75rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.45rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
  transition: border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.bay-param-card:hover {
  border-color: rgba(168, 85, 247, 0.45);
  box-shadow: 0 4px 10px rgba(168, 85, 247, 0.2);
}

.bay-param-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bay-param-title {
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.bay-param-badge {
  font-weight: 700;
  font-size: 0.7rem;
  padding: 2px 7px;
  border-radius: 4px;
  font-family: var(--font-mono);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.bay-param-metric-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem;
}

.bay-param-value {
  font-size: 1.25rem;
  font-weight: 800;
  font-family: var(--font-mono);
  line-height: 1.1;
}

.bay-param-unit {
  font-weight: 600;
  font-size: 0.75rem;
  margin-left: 2px;
}

.bay-param-submetric {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-align: right;
  white-space: nowrap;
}

.bay-param-progress {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}

.bay-param-progress-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.3s ease;
}

.bay-param-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.68rem;
  color: var(--text-muted);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 0.35rem;
}

/* 7-day Mini Calendar Strip */
.bay-calendar-strip {
  display: flex;
  gap: 3px;
  align-items: center;
  width: 100%;
}

.bay-calendar-day {
  flex: 1;
  text-align: center;
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: 3px;
  padding: 2px 0;
  transition: all 0.2s ease;
  user-select: none;
}

.bay-calendar-day.active-weekday {
  background: var(--gradient-primary);
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(168, 85, 247, 0.35);
}

.bay-calendar-day.active-weekend {
  background: linear-gradient(135deg, #d97706, #f59e0b);
  color: #ffffff;
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.45);
}

.bay-calendar-day.inactive-day {
  border: 1px dashed rgba(255, 255, 255, 0.15);
  color: var(--text-muted);
  opacity: 0.35;
  background: rgba(0, 0, 0, 0.2);
}

.bay-calendar-day.past-elapsed-day {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-muted);
  opacity: 0.45;
  text-decoration: line-through;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="light"] .bay-calendar-day.past-elapsed-day {
  background: rgba(0, 0, 0, 0.05);
  color: #94a3b8;
  opacity: 0.55;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Assigned Crew Graphical Card */
.bay-crew-card {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.08) 0%, rgba(236, 72, 153, 0.04) 100%);
  border: 1px solid rgba(168, 85, 247, 0.3);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.85rem;
  margin-bottom: 0.75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.65rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.bay-crew-card:hover {
  border-color: rgba(168, 85, 247, 0.55);
  box-shadow: 0 3px 8px rgba(168, 85, 247, 0.25);
}

.bay-crew-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bay-crew-title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.bay-crew-label {
  color: var(--text-highlight);
  font-weight: 700;
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.bay-crew-sublabel {
  font-size: 0.7rem;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
}

.bay-crew-intensity {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.bay-crew-visual-wrap {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.bay-crew-tokens {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: wrap;
}

.painter-token-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(168, 85, 247, 0.2);
  border: 1px solid #a855f7;
  font-size: 0.72rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.painter-token-avatar:hover {
  transform: scale(1.18);
  border-color: #ffffff;
  z-index: 2;
}

.bay-crew-pill {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(168, 85, 247, 0.18);
  border: 1px solid rgba(168, 85, 247, 0.45);
  border-radius: var(--radius-sm);
  padding: 0.28rem 0.65rem;
  box-shadow: 0 1px 4px rgba(168, 85, 247, 0.2);
}

.bay-crew-count {
  color: #c084fc;
  font-weight: 800;
  font-size: 1.18rem;
  font-family: var(--font-mono);
  line-height: 1;
}

.bay-crew-text {
  font-size: 0.72rem;
  color: var(--text-highlight);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Delivery Due Date & Status Indicators */
.badge-delivery-ontime {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.badge-delivery-tight {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.badge-delivery-late {
  background: rgba(239, 68, 68, 0.18);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.45);
  animation: pulseDeliveryLate 2s infinite ease-in-out;
}

@keyframes pulseDeliveryLate {
  0%, 100% { border-color: rgba(239, 68, 68, 0.45); box-shadow: 0 0 0 rgba(239, 68, 68, 0); }
  50% { border-color: rgba(239, 68, 68, 0.9); box-shadow: 0 0 6px rgba(239, 68, 68, 0.4); }
}

.delivery-risk-banner {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.4);
  padding: 0.75rem 1.15rem;
  border-radius: var(--radius-md);
  margin-bottom: 1rem;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.12);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ==========================================================================
   Shop Floor Schedule Print & PDF Generator Styling
   ========================================================================== */
.shop-floor-doc {
  background: #ffffff;
  color: #0f172a;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  padding: 18px 22px;
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.35);
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

.shop-floor-header {
  border-bottom: 2px solid #0f172a;
  padding-bottom: 10px;
  margin-bottom: 12px;
}

.shop-floor-header-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px;
}

.shop-floor-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 6px;
  margin-top: 6px;
}

.shop-floor-kpi-card {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 4px 8px;
  display: flex;
  flex-direction: column;
}

.shop-floor-kpi-card .kpi-label {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: #64748b;
  letter-spacing: 0.3px;
}

.shop-floor-kpi-card .kpi-val {
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
  font-family: var(--font-mono, monospace);
  margin-top: 1px;
}

.shop-floor-kpi-card .kpi-sub {
  font-size: 9px;
  color: #64748b;
}

/* Columns across the page */
.shop-floor-bays-row {
  display: flex;
  gap: 12px;
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
}

.shop-floor-bay-column {
  flex: 1 1 0;
  min-width: 0;
  background: #ffffff;
  border: 1.5px solid #0f172a;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}

.shop-floor-bay-head {
  padding: 5px 8px;
  background: #f1f5f9;
  border-bottom: 1.5px solid #0f172a;
}

.shop-floor-bay-loads {
  padding: 6px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-items: start;
  flex: 1;
  background: #f8fafc;
  box-sizing: border-box;
}

.shop-floor-bays-row .shop-floor-bay-column:not(:only-child) .shop-floor-bay-loads {
  grid-template-columns: 1fr;
}

/* Individual Load Card */
.shop-floor-load {
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 4px;
  padding: 6px 8px;
  box-sizing: border-box;
  page-break-inside: avoid;
  break-inside: avoid;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.shop-floor-load-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 3px;
}

.shop-floor-gantt-bar {
  height: 22px;
  background: #e2e8f0;
  border-radius: 3px;
  border: 1px solid #94a3b8;
  display: flex;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  margin: 4px 0 4px 0;
}

.shop-floor-gantt-seg {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: -0.2px;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
  padding: 0 2px;
  flex-shrink: 1;
}

.shop-floor-gantt-seg.seg-primer,
.shop-floor-gantt-seg.seg-intum,
.shop-floor-gantt-seg.seg-sealer {
  min-width: 48px;
  flex-shrink: 0;
}

.shop-floor-gantt-seg.seg-primer {
  background: #d97706 !important;
}

.shop-floor-gantt-seg.seg-primer-dry {
  background: #fde68a !important;
  color: #78350f !important;
  text-shadow: none !important;
  border: 1px dashed #d97706 !important;
}

.shop-floor-gantt-seg.seg-intum {
  background: #dc2626 !important;
}

.shop-floor-gantt-seg.seg-intum-dry {
  background: #fca5a5 !important;
  color: #7f1d1d !important;
  text-shadow: none !important;
  border: 1px dashed #dc2626 !important;
}

.shop-floor-gantt-seg.seg-sealer {
  background: #2563eb !important;
}

.shop-floor-gantt-seg.seg-sealer-dry {
  background: #bfdbfe !important;
  color: #1e3a8a !important;
  text-shadow: none !important;
  border: 1px dashed #2563eb !important;
}

.shop-floor-gantt-seg.seg-intum-p2 {
  background: #b91c1c !important;
}

.shop-floor-gantt-seg.seg-intermediate {
  background: #7c3aed !important;
}

.shop-floor-gantt-seg.seg-intermediate-dry {
  background: #ddd6fe !important;
  color: #4c1d95 !important;
  text-shadow: none !important;
  border: 1px dashed #7c3aed !important;
}

.multi-pass-gantt-bar .shop-floor-gantt-seg {
  min-width: 0 !important;
  flex-shrink: 1 !important;
}

.timeline-week-track-container {
  position: relative;
  width: 100%;
  height: 26px;
  background: var(--manifest-card-bg, #181b26);
  border-radius: 4px;
  border: 1px solid var(--manifest-border, #334155);
  box-sizing: border-box;
  overflow: hidden;
  margin-top: 4px;
}

.timeline-week-track-container .multi-pass-gantt-bar {
  position: absolute;
  top: 1px;
  height: 22px;
  margin: 0 !important;
  display: flex;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  z-index: 2;
}

/* Global Gantt Legend at Top of Document */
.shop-floor-global-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 3px 10px;
  margin: 4px 0 6px 0;
  box-sizing: border-box;
  page-break-inside: avoid;
  break-inside: avoid;
}

.shop-floor-global-legend .global-legend-title {
  font-size: 9.5px;
  font-weight: 800;
  color: #0f172a;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.shop-floor-legend {
  display: flex;
  gap: 6px;
  font-size: 9px;
  color: #475569;
  flex-wrap: wrap;
  margin-bottom: 4px;
  font-weight: 600;
}

.shop-floor-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
}

.shop-floor-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  display: inline-block;
}

/* Products Table */
.shop-floor-products-wrap {
  margin-top: 4px;
  border: 1px solid #cbd5e1;
  border-radius: 3px;
  overflow: hidden;
  background: #ffffff;
}

.shop-floor-products-title {
  background: #f1f5f9;
  padding: 3px 6px;
  font-size: 9.5px;
  font-weight: 800;
  color: #1e293b;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #cbd5e1;
  letter-spacing: 0.2px;
}

.shop-floor-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 9.5px;
}

.shop-floor-table th {
  background: #ffffff;
  color: #475569;
  font-weight: 700;
  font-size: 9px;
  text-transform: uppercase;
  padding: 2.5px 5px;
  border-bottom: 1px solid #cbd5e1;
  text-align: left;
}

.shop-floor-table td {
  padding: 2.5px 5px;
  border-bottom: 1px solid #f1f5f9;
  color: #0f172a;
}

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

.shop-floor-table tr.total-row td {
  background: #f8fafc;
  font-weight: 800;
  border-top: 1px solid #cbd5e1;
}

/* QA Signoff */
.shop-floor-signoff {
  margin-top: 6px;
  padding-top: 5px;
  border-top: 1px dashed #cbd5e1;
  font-size: 9.5px;
  color: #475569;
}

.shop-floor-signoff-checks {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 3px;
}

.shop-floor-signoff-checks label {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
}

.shop-floor-signoff-lines {
  display: flex;
  justify-content: space-between;
  margin-top: 3px;
  font-weight: 600;
  color: #1e293b;
  font-size: 9.5px;
}

/* ==========================================================================
   Shop Floor Print Layout Scoped Styles
   ========================================================================== */
/* Top-level @page rule to ensure Chromium and modern browsers default to Landscape */
@page {
  size: a4 landscape;
  margin: 8mm;
}

@page :left {
  size: a4 landscape;
  margin: 8mm;
}

@page :right {
  size: a4 landscape;
  margin: 8mm;
}

#shopFloorPrintDocument {
  background: #ffffff;
  color: #0f172a;
  width: 1060px;
  max-width: 100%;
  margin: 0 auto;
  padding: 16px 20px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
  border-radius: 4px;
  box-sizing: border-box;
  transition: width 0.2s ease, max-width 0.2s ease;
}

#shopFloorPrintDocument.format-a4-wide,
#shopFloorPrintDocument.preview-landscape {
  width: 1060px;
}

#shopFloorPrintDocument.format-a4-tall,
#shopFloorPrintDocument.preview-portrait {
  width: 780px;
}

#shopFloorPrintDocument.format-a4-tall .shop-floor-bay-loads,
#shopFloorPrintDocument.preview-portrait .shop-floor-bay-loads {
  grid-template-columns: 1fr !important;
}

#shopFloorPrintDocument.format-a3-wide {
  width: 1480px;
}

#shopFloorPrintDocument.format-a3-wide .shop-floor-bay-loads {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

#shopFloorPrintDocument.format-a3-tall {
  width: 1060px;
}

#shopFloorPrintDocument.format-a3-tall .shop-floor-bay-loads {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

@media print {
  @page {
    size: a4 landscape;
    margin: 8mm;
  }

  body.printing-shop-floor-schedule {
    background: #ffffff !important;
    color: #0f172a !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.printing-shop-floor-schedule * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  body.printing-shop-floor-schedule .app-header,
  body.printing-shop-floor-schedule .app-nav,
  body.printing-shop-floor-schedule .app-main,
  body.printing-shop-floor-schedule .modal-header,
  body.printing-shop-floor-schedule .modal-footer,
  body.printing-shop-floor-schedule .no-print,
  body.printing-shop-floor-schedule .toast-container {
    display: none !important;
  }

  body.printing-shop-floor-schedule .modal-overlay#shopFloorPdfModal {
    position: static !important;
    background: #ffffff !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    z-index: auto !important;
  }

  body.printing-shop-floor-schedule .modal-overlay#shopFloorPdfModal .modal-content {
    background: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  body.printing-shop-floor-schedule .modal-overlay#shopFloorPdfModal .modal-body {
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  body.printing-shop-floor-schedule #shopFloorPrintDocumentWrapper {
    background: #ffffff !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  body.printing-shop-floor-schedule #shopFloorPrintDocument {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
  }

  body.printing-shop-floor-schedule .shop-floor-load {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    margin-bottom: 12px !important;
  }

  body.printing-shop-floor-schedule .shop-floor-page-break-indicator {
    display: none !important;
  }

  body.printing-shop-floor-schedule .shop-floor-line-section.page-break-before {
    page-break-before: always !important;
    break-before: page !important;
  }

  body.printing-shop-floor-schedule .shop-floor-products-wrap,
  body.printing-shop-floor-schedule .shop-floor-signoff,
  body.printing-shop-floor-schedule .shop-floor-header,
  body.printing-shop-floor-schedule .shop-floor-kpis {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  body.printing-shop-floor-schedule .shop-floor-bay-head {
    page-break-after: avoid !important;
    break-after: avoid !important;
  }

  body.printing-shop-floor-schedule .shop-floor-gantt-bar.gantt-bar-complete {
    background: #10b981 !important;
    border: 1px solid #059669 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  body.printing-shop-floor-schedule .gantt-complete-label {
    color: #ffffff !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  body.printing-shop-floor-schedule .viewer-facility-logo-container {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: none !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

/* Direct PDF Generation Styles */
.exporting-pdf {
  background: #ffffff !important;
  color: #0f172a !important;
  width: 1060px !important;
  max-width: 1060px !important;
  margin: 0 auto !important;
  padding: 4px !important;
  box-shadow: none !important;
}

.exporting-pdf.format-a4-wide,
.exporting-pdf.pdf-landscape {
  width: 1060px !important;
  max-width: 1060px !important;
}

.exporting-pdf.format-a4-tall,
.exporting-pdf.pdf-portrait {
  width: 780px !important;
  max-width: 780px !important;
}

.exporting-pdf.format-a4-tall .shop-floor-bay-loads,
.exporting-pdf.pdf-portrait .shop-floor-bay-loads {
  grid-template-columns: 1fr !important;
}

.exporting-pdf.format-a3-wide {
  width: 1480px !important;
  max-width: 1480px !important;
}

.exporting-pdf.format-a3-wide .shop-floor-bay-loads {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.exporting-pdf.format-a3-tall {
  width: 1060px !important;
  max-width: 1060px !important;
}

.exporting-pdf.format-a3-tall .shop-floor-bay-loads {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.exporting-pdf .no-print,
.exporting-pdf .shop-floor-page-break-indicator {
  display: none !important;
}

.exporting-pdf .shop-floor-line-section.page-break-before {
  page-break-before: always !important;
  break-before: page !important;
}

.exporting-pdf .shop-floor-load {
  page-break-inside: avoid !important;
  break-inside: avoid !important;
  margin-bottom: 0 !important;
}

.exporting-pdf .shop-floor-bay-loads {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  align-items: start !important;
}

.exporting-pdf .shop-floor-bays-row .shop-floor-bay-column:not(:only-child) .shop-floor-bay-loads {
  grid-template-columns: 1fr !important;
}

.exporting-pdf .html2pdf__page-break {
  grid-column: 1 / -1 !important;
  width: 100% !important;
}

.exporting-pdf .shop-floor-bay-column {
  overflow: visible !important;
}

.exporting-pdf .shop-floor-header,
.exporting-pdf .shop-floor-kpis,
.exporting-pdf .shop-floor-global-legend,
.exporting-pdf .shop-floor-bay-head,
.exporting-pdf .shop-floor-products-wrap {
  page-break-inside: avoid !important;
  break-inside: avoid !important;
}

/* Line Sections & Page Breaks for Shop Floor Schedule */
.shop-floor-line-section {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 20px;
  page-break-inside: auto;
  break-inside: auto;
}

.shop-floor-line-section.page-break-before {
  page-break-before: always;
  break-before: page;
}

.shop-floor-page-break-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 20px 0 24px 0;
  padding: 6px 0;
  user-select: none;
}

.shop-floor-page-break-indicator .page-break-line {
  flex: 1;
  height: 1px;
  background: repeating-linear-gradient(90deg, #94a3b8, #94a3b8 6px, transparent 6px, transparent 12px);
}

.shop-floor-page-break-indicator .page-break-badge {
  font-size: 11px;
  font-weight: 800;
  color: #334155;
  background: #e2e8f0;
  border: 1px dashed #94a3b8;
  padding: 3px 12px;
  border-radius: 12px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

/* ==========================================================================
   Single-Page Simple Load List Manifest Styling
   ========================================================================== */
.shop-floor-doc.report-simple-list {
  padding: 14px 18px !important;
  font-size: 11px;
  line-height: 1.35;
  box-sizing: border-box;
  background: var(--manifest-bg, #ffffff);
  color: var(--manifest-text, #0f172a);
}

.report-simple-list .shop-floor-header {
  padding-bottom: 6px !important;
  margin-bottom: 8px !important;
  border-bottom: 2px solid var(--manifest-border, #0f172a) !important;
}

.simple-manifest-top,
.report-simple-list .simple-manifest-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.simple-kpis-strip,
.report-simple-list .simple-kpis-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  margin-top: 6px;
}

.simple-kpi-pill,
.report-simple-list .simple-kpi-pill {
  background: var(--manifest-kpi-bg, #f8fafc);
  border: 1px solid var(--manifest-border, #cbd5e1);
  border-radius: 4px;
  padding: 4px 8px;
  display: flex;
  flex-direction: column;
}

.simple-kpi-pill .k-label,
.report-simple-list .simple-kpi-pill .k-label {
  font-size: 8.5px;
  font-weight: 700;
  color: var(--manifest-text-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.simple-kpi-pill .k-val,
.report-simple-list .simple-kpi-pill .k-val {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--manifest-text, #0f172a);
  font-family: var(--font-mono, monospace);
  margin-top: 1px;
}

.simple-kpi-pill .k-sub,
.report-simple-list .simple-kpi-pill .k-sub {
  font-size: 8.5px;
  color: var(--manifest-text-muted, #64748b);
}

/* Simple List Table */
.simple-list-table-wrap {
  width: 100%;
  margin-top: 8px;
  margin-bottom: 8px;
  border: 1.5px solid var(--manifest-border, #0f172a);
  border-radius: 4px;
  overflow: hidden;
  box-sizing: border-box;
  background: var(--manifest-bg, #ffffff);
}

.simple-list-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10.5px;
  text-align: left;
  background: var(--manifest-bg, #ffffff);
}

.simple-list-table thead th {
  background: var(--manifest-table-header-bg, #0f172a);
  color: var(--manifest-table-header-text, #ffffff);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 6px 6px;
  border: none;
  border-right: 1px solid var(--manifest-border, #334155);
  white-space: nowrap;
}

.simple-list-table thead th:last-child {
  border-right: none;
}

.simple-list-table tbody tr {
  border-bottom: 1px solid var(--manifest-table-border, #e2e8f0);
  page-break-inside: avoid;
  break-inside: avoid;
}

.simple-list-table tbody tr:nth-child(even) {
  background: var(--manifest-table-row-even, #f8fafc);
}

.simple-list-table tbody tr.bay-group-header-row {
  page-break-after: avoid !important;
  break-after: avoid !important;
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}

.simple-list-table tbody tr.bay-group-header-row:nth-child(even) {
  background: inherit;
}

.simple-list-table tbody tr.bay-group-header-row td {
  padding: 4px 8px !important;
  font-weight: 800 !important;
  border-right: none !important;
}

.simple-list-table tbody tr.bay-load-row {
  page-break-inside: avoid !important;
  break-inside: avoid !important;
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}

.simple-list-table tbody td {
  padding: 5px 6px;
  border-right: 1px solid var(--manifest-table-border, #e2e8f0);
  vertical-align: middle;
  color: var(--manifest-text, #1e293b);
  font-size: 10px;
}

.simple-list-table tbody td:last-child {
  border-right: none;
}

.simple-list-table tfoot tr {
  background: var(--manifest-tfoot-bg, #f1f5f9);
  border-top: 2px solid var(--manifest-border, #0f172a);
}

.simple-list-table tfoot td {
  padding: 6px 6px;
  font-weight: 800;
  color: var(--manifest-tfoot-text, #0f172a);
  border-right: 1px solid var(--manifest-border, #cbd5e1);
  font-size: 10px;
}

.simple-list-table tfoot td:last-child {
  border-right: none;
}

.simple-check-box {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 1.5px solid #64748b;
  border-radius: 2px;
  margin-right: 3px;
  vertical-align: -1px;
}

/* Ensure no page-breaking in print / PDF export */
@media print {
  .shop-floor-doc.report-simple-list {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    padding: 6mm 8mm !important;
    box-shadow: none !important;
    height: auto !important;
  }
  .report-simple-list .simple-list-table tbody tr {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }
}

.exporting-pdf.report-simple-list {
  page-break-inside: avoid !important;
  break-inside: avoid !important;
  padding: 8px 10px !important;
}

.exporting-pdf.report-simple-list .simple-list-table tr {
  page-break-inside: avoid !important;
  break-inside: avoid !important;
}

/* ==========================================================================
   Full Light & Dark Mode Compatibility Rules
   Theme Colors: #a855f7 (Purple), #ec4899 (Pink), #374151 (Dark Slate), #f9fafb (Off-white)
   ========================================================================== */

/* Light Mode Core Tokens (when triggered via [data-theme="light"] or html:not(.dark)) */
[data-theme="light"],
html:not(.dark) {
  --bg-app: #f8fafc;
  --bg-card: #ffffff;
  --bg-card-subtle: #f8fafc;
  --bg-card-hover: #f1f5f9;
  --bg-input: #ffffff;
  --border-color: #cbd5e1;
  --border-card: #cbd5e1;
  --border-subtle: #e2e8f0;
  --border-focus: #9333ea;
  --text-main: #0f172a;
  --text-sub: #334155;
  --text-muted: #475569;
  --text-subtle: #64748b;
  --text-highlight: #020617;
  --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.1), 0 4px 6px -4px rgba(15, 23, 42, 0.05);
}

/* App Header & Navigation */
[data-theme="light"] .app-header,
html:not(.dark) .app-header {
  background: #ffffff;
  border-bottom: 1px solid #cbd5e1;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}

[data-theme="light"] .app-nav,
html:not(.dark) .app-nav {
  background: #f8fafc;
  border-bottom: 1px solid #cbd5e1;
}

[data-theme="light"] .contract-selector-bar,
html:not(.dark) .contract-selector-bar {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  box-shadow: none;
}

[data-theme="light"] .contract-selector-bar select,
html:not(.dark) .contract-selector-bar select {
  background-color: #ffffff !important;
  border-color: #cbd5e1;
  color: #0f172a !important;
}

/* KPI Cards, Surface Panels & Containers */
[data-theme="light"] .kpi-card,
[data-theme="light"] .section-card,
[data-theme="light"] .sim-box,
html:not(.dark) .kpi-card,
html:not(.dark) .section-card,
html:not(.dark) .sim-box {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}

[data-theme="light"] .kpi-card:hover,
[data-theme="light"] .section-card:hover,
html:not(.dark) .kpi-card:hover,
html:not(.dark) .section-card:hover {
  border-color: #9333ea;
  box-shadow: 0 4px 12px rgba(147, 51, 234, 0.12);
}

/* Operational Capacity Cards & Badges */
[data-theme="light"] .ops-card,
html:not(.dark) .ops-card {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}

[data-theme="light"] .ops-card span[style*="color:#f8fafc"],
html:not(.dark) .ops-card span[style*="color:#f8fafc"],
[data-theme="light"] .ops-card span[style*="color: rgb(248, 250, 252)"],
html:not(.dark) .ops-card span[style*="color: rgb(248, 250, 252)"],
[data-theme="light"] .ops-card span[style*="color:#ffffff"],
html:not(.dark) .ops-card span[style*="color:#ffffff"],
[data-theme="light"] .ops-card span[style*="color: #ffffff"],
html:not(.dark) .ops-card span[style*="color: #ffffff"],
[data-theme="light"] .ops-card span[style*="color: rgb(255, 255, 255)"],
html:not(.dark) .ops-card span[style*="color: rgb(255, 255, 255)"],
[data-theme="light"] .ops-gauge-text,
html:not(.dark) .ops-gauge-text {
  color: #020617 !important;
}

[data-theme="light"] .ops-card div[style*="color:#cbd5e1"],
html:not(.dark) .ops-card div[style*="color:#cbd5e1"],
[data-theme="light"] .ops-card span[style*="color:#cbd5e1"],
html:not(.dark) .ops-card span[style*="color:#cbd5e1"],
[data-theme="light"] .ops-gauge-subtext,
html:not(.dark) .ops-gauge-subtext {
  color: #334155 !important;
}

[data-theme="light"] .ops-card strong[style*="color:#94a3b8"],
html:not(.dark) .ops-card strong[style*="color:#94a3b8"],
[data-theme="light"] .ops-card span[style*="color:#94a3b8"],
html:not(.dark) .ops-card span[style*="color:#94a3b8"] {
  color: #475569 !important;
}

/* Data Tables */
[data-theme="light"] .table-responsive,
[data-theme="light"] .table-container,
html.light .table-responsive,
html.light .table-container,
html:not(.dark) .table-responsive,
html:not(.dark) .table-container {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
}

[data-theme="light"] .data-table,
html.light .data-table,
html:not(.dark) .data-table {
  background: #ffffff !important;
  color: #0f172a !important;
}

[data-theme="light"] .data-table thead th,
[data-theme="light"] .data-table th,
html.light .data-table thead th,
html.light .data-table th,
html:not(.dark) .data-table thead th,
html:not(.dark) .data-table th {
  background: #f8fafc !important;
  border-bottom: 2px solid #cbd5e1 !important;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08) !important;
  color: #475569 !important;
}

[data-theme="light"] .data-table tbody tr,
html.light .data-table tbody tr,
html:not(.dark) .data-table tbody tr {
  background: #ffffff !important;
  color: #0f172a !important;
}

[data-theme="light"] .data-table td,
html.light .data-table td,
html:not(.dark) .data-table td {
  background: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
}

[data-theme="light"] .data-table tbody tr:hover td,
[data-theme="light"] .data-table tbody tr:hover,
html.light .data-table tbody tr:hover td,
html.light .data-table tbody tr:hover,
html:not(.dark) .data-table tbody tr:hover td,
html:not(.dark) .data-table tbody tr:hover {
  background: #f8fafc !important;
}

[data-theme="light"] .data-table thead th.col-actions,
[data-theme="light"] .data-table th.col-actions,
html.light .data-table thead th.col-actions,
html.light .data-table th.col-actions,
html:not(.dark) .data-table thead th.col-actions,
html:not(.dark) .data-table th.col-actions {
  background: #f8fafc !important;
  border-left: 1px solid #cbd5e1 !important;
  border-bottom: 2px solid #cbd5e1 !important;
  box-shadow: -4px 2px 8px rgba(15, 23, 42, 0.08) !important;
}

[data-theme="light"] .data-table td.col-actions,
html.light .data-table td.col-actions,
html:not(.dark) .data-table td.col-actions {
  background: #ffffff !important;
  border-left: 1px solid #cbd5e1 !important;
  box-shadow: -4px 0 8px rgba(15, 23, 42, 0.05);
}

[data-theme="light"] .data-table tbody tr:hover td.col-actions,
html.light .data-table tbody tr:hover td.col-actions,
html:not(.dark) .data-table tbody tr:hover td.col-actions {
  background: #f8fafc !important;
}

[data-theme="light"] .data-table tfoot td,
html.light .data-table tfoot td,
html:not(.dark) .data-table tfoot td {
  background: #f8fafc !important;
  border-top: 2px solid #cbd5e1 !important;
  box-shadow: 0 -2px 4px rgba(15, 23, 42, 0.08) !important;
  color: #020617 !important;
}

/* Light Mode Badges, Revision Markers & Monospace Text */
[data-theme="light"] .badge-rev-a,
html.light .badge-rev-a,
html:not(.dark) .badge-rev-a {
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  border: 1px solid #93c5fd !important;
}

[data-theme="light"] .badge-rev-bump,
html.light .badge-rev-bump,
html:not(.dark) .badge-rev-bump {
  background: #fffbeb !important;
  color: #b45309 !important;
  border: 1px solid #fcd34d !important;
}

[data-theme="light"] .badge-rev-new,
html.light .badge-rev-new,
html:not(.dark) .badge-rev-new {
  background: #ecfdf5 !important;
  color: #047857 !important;
  border: 1px solid #6ee7b7 !important;
}

[data-theme="light"] .badge-rev-unchanged,
html.light .badge-rev-unchanged,
html:not(.dark) .badge-rev-unchanged {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #cbd5e1 !important;
}

[data-theme="light"] code,
html.light code,
html:not(.dark) code {
  color: #0284c7 !important;
}

/* Buttons & Button Groups */
[data-theme="light"] .btn,
html:not(.dark) .btn {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #0f172a;
}

[data-theme="light"] .btn:hover,
html:not(.dark) .btn:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #020617;
}

[data-theme="light"] .btn-primary,
html:not(.dark) .btn-primary {
  background: var(--gradient-primary);
  border-color: var(--color-primary);
  color: #ffffff !important;
}

[data-theme="light"] .btn-group .btn,
html:not(.dark) .btn-group .btn {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #475569;
}

[data-theme="light"] .btn-group .btn:hover,
html:not(.dark) .btn-group .btn:hover {
  background: #f1f5f9;
  color: #0f172a;
}

[data-theme="light"] .btn-group .btn.active,
html:not(.dark) .btn-group .btn.active {
  background: var(--gradient-primary);
  color: #ffffff;
}

/* Gantt Chart & Bay Columns */
[data-theme="light"] .gantt-bay-col,
html:not(.dark) .gantt-bay-col {
  background: #ffffff;
  border-color: #cbd5e1;
}

[data-theme="light"] .gantt-bay-header,
html:not(.dark) .gantt-bay-header {
  background: #f8fafc;
  border-bottom: 1px solid #cbd5e1;
}

[data-theme="light"] .gantt-track,
html:not(.dark) .gantt-track {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

[data-theme="light"] .gantt-load-card,
html:not(.dark) .gantt-load-card {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}

[data-theme="light"] .gantt-load-card:hover,
html:not(.dark) .gantt-load-card:hover {
  border-color: #9333ea;
  box-shadow: 0 4px 12px rgba(147, 51, 234, 0.12);
}

[data-theme="light"] .gantt-load-card-meta,
html:not(.dark) .gantt-load-card-meta {
  border-bottom-color: #e2e8f0;
}

/* Gantt Process Progress Bars in Light Mode */
[data-theme="light"] .gantt-segment.seg-primer,
html:not(.dark) .gantt-segment.seg-primer {
  background: #b45309;
}

[data-theme="light"] .gantt-segment.seg-primer-dry,
html:not(.dark) .gantt-segment.seg-primer-dry {
  background: repeating-linear-gradient(45deg, rgba(180, 83, 9, 0.22), rgba(180, 83, 9, 0.22) 6px, rgba(180, 83, 9, 0.08) 6px, rgba(180, 83, 9, 0.08) 12px);
  color: #92400e;
  border-right: 1px dashed #b45309;
}

[data-theme="light"] .gantt-segment.seg-intum,
html:not(.dark) .gantt-segment.seg-intum {
  background: #be123c;
}

[data-theme="light"] .gantt-segment.seg-intum-dry,
html:not(.dark) .gantt-segment.seg-intum-dry {
  background: repeating-linear-gradient(45deg, rgba(190, 18, 60, 0.22), rgba(190, 18, 60, 0.22) 6px, rgba(190, 18, 60, 0.08) 6px, rgba(190, 18, 60, 0.08) 12px);
  color: #9f1239;
  border-right: 1px dashed #be123c;
}

[data-theme="light"] .gantt-segment.seg-sealer,
html:not(.dark) .gantt-segment.seg-sealer {
  background: #0284c7;
}

[data-theme="light"] .gantt-segment.seg-sealer-dry,
html:not(.dark) .gantt-segment.seg-sealer-dry {
  background: repeating-linear-gradient(45deg, rgba(2, 132, 199, 0.22), rgba(2, 132, 199, 0.22) 6px, rgba(2, 132, 199, 0.08) 6px, rgba(2, 132, 199, 0.08) 12px);
  color: #075985;
  border-right: 1px dashed #0284c7;
}

/* Timeline Production Progress Bars */
[data-theme="light"] .timeline-progress-seg.seg-p-done,
html:not(.dark) .timeline-progress-seg.seg-p-done {
  background: #047857;
}

[data-theme="light"] .timeline-progress-seg.seg-p-pend,
html:not(.dark) .timeline-progress-seg.seg-p-pend {
  background: repeating-linear-gradient(45deg, rgba(180, 83, 9, 0.25), rgba(180, 83, 9, 0.25) 4px, rgba(180, 83, 9, 0.1) 4px, rgba(180, 83, 9, 0.1) 8px);
  color: #92400e;
}

[data-theme="light"] .timeline-progress-seg.seg-i-done,
html:not(.dark) .timeline-progress-seg.seg-i-done {
  background: #be123c;
}

[data-theme="light"] .timeline-progress-seg.seg-i-pend,
html:not(.dark) .timeline-progress-seg.seg-i-pend {
  background: repeating-linear-gradient(45deg, rgba(190, 18, 60, 0.25), rgba(190, 18, 60, 0.25) 4px, rgba(190, 18, 60, 0.1) 4px, rgba(190, 18, 60, 0.1) 8px);
  color: #9f1239;
}

[data-theme="light"] .timeline-progress-seg.seg-s-done,
html:not(.dark) .timeline-progress-seg.seg-s-done {
  background: #0284c7;
}

[data-theme="light"] .timeline-progress-seg.seg-s-pend,
html:not(.dark) .timeline-progress-seg.seg-s-pend {
  background: repeating-linear-gradient(45deg, rgba(2, 132, 199, 0.25), rgba(2, 132, 199, 0.25) 4px, rgba(2, 132, 199, 0.1) 4px, rgba(2, 132, 199, 0.1) 8px);
  color: #075985;
}

/* Facility Limits & Parameters */
[data-theme="light"] .fac-limit-card,
html:not(.dark) .fac-limit-card {
  background: #ffffff;
  border-color: #cbd5e1;
}

[data-theme="light"] .fac-progress-track,
html:not(.dark) .fac-progress-track {
  background: #e2e8f0;
}

[data-theme="light"] .fac-headcount-badge,
[data-theme="light"] .timeline-headcount-badge,
[data-theme="light"] .modal-stepper-badge,
html:not(.dark) .fac-headcount-badge,
html:not(.dark) .timeline-headcount-badge,
html:not(.dark) .modal-stepper-badge {
  background: #f1f5f9;
  border-color: rgba(147, 51, 234, 0.4);
}

[data-theme="light"] .fac-limit-input,
[data-theme="light"] .modal-stepper-input,
html:not(.dark) .fac-limit-input,
html:not(.dark) .modal-stepper-input {
  color: #7e22ce;
}

[data-theme="light"] .fac-stepper-btn,
html:not(.dark) .fac-stepper-btn {
  background: rgba(147, 51, 234, 0.12);
  color: #7e22ce;
  border-color: rgba(147, 51, 234, 0.3);
}

[data-theme="light"] .fac-stepper-btn:hover,
html:not(.dark) .fac-stepper-btn:hover {
  background: #9333ea;
  color: #ffffff;
  border-color: #9333ea;
}

[data-theme="light"] .bay-param-card,
html:not(.dark) .bay-param-card {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}

[data-theme="light"] .bay-param-progress,
html:not(.dark) .bay-param-progress {
  background: #e2e8f0;
}

[data-theme="light"] .bay-crew-card,
html:not(.dark) .bay-crew-card {
  background: linear-gradient(135deg, rgba(147, 51, 234, 0.06) 0%, rgba(219, 39, 119, 0.03) 100%);
  border-color: rgba(147, 51, 234, 0.25);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}

[data-theme="light"] .bay-crew-pill,
html:not(.dark) .bay-crew-pill {
  background: rgba(147, 51, 234, 0.1);
  border-color: rgba(147, 51, 234, 0.3);
}

[data-theme="light"] .bay-crew-count,
html:not(.dark) .bay-crew-count {
  color: #7e22ce;
}

[data-theme="light"] .painter-token-avatar,
html:not(.dark) .painter-token-avatar {
  background: rgba(147, 51, 234, 0.15);
  border-color: #9333ea;
}

[data-theme="light"] .btn-day-pill,
html:not(.dark) .btn-day-pill {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #334155;
}

[data-theme="light"] .btn-day-pill:hover,
html:not(.dark) .btn-day-pill:hover {
  background: #e2e8f0;
  color: #0f172a;
}

[data-theme="light"] .btn-day-pill.active,
html:not(.dark) .btn-day-pill.active {
  background: var(--gradient-primary);
  color: #ffffff;
  border-color: var(--color-primary);
}

[data-theme="light"] .bay-calendar-day.inactive-day,
html:not(.dark) .bay-calendar-day.inactive-day {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #64748b;
}

/* Modals & Forms */
[data-theme="light"] .modal-content,
html.light .modal-content,
html:not(.dark) .modal-content {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.18), 0 8px 10px -6px rgba(15, 23, 42, 0.1) !important;
}

[data-theme="light"] .modal-header,
html.light .modal-header,
html:not(.dark) .modal-header {
  background: #ffffff !important;
  border-bottom-color: #cbd5e1 !important;
}

[data-theme="light"] .modal-title,
html.light .modal-title,
html:not(.dark) .modal-title {
  color: #0f172a !important;
}

[data-theme="light"] .modal-close,
html.light .modal-close,
html:not(.dark) .modal-close {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #64748b !important;
}

[data-theme="light"] .modal-close:hover,
html.light .modal-close:hover,
html:not(.dark) .modal-close:hover {
  background: #fee2e2 !important;
  color: #dc2626 !important;
  border-color: #fca5a5 !important;
}

[data-theme="light"] .modal-footer,
html.light .modal-footer,
html:not(.dark) .modal-footer {
  background: #f8fafc !important;
  border-top-color: #cbd5e1 !important;
}

[data-theme="light"] .modal-tabs,
html.light .modal-tabs,
html:not(.dark) .modal-tabs {
  border-bottom: 1px solid #cbd5e1 !important;
}

[data-theme="light"] .modal-tab-btn,
html.light .modal-tab-btn,
html:not(.dark) .modal-tab-btn {
  color: #475569 !important;
  background: transparent !important;
}

[data-theme="light"] .modal-tab-btn:hover,
html.light .modal-tab-btn:hover,
html:not(.dark) .modal-tab-btn:hover {
  color: #0f172a !important;
  background: #f1f5f9 !important;
}

[data-theme="light"] .modal-tab-btn.active,
html.light .modal-tab-btn.active,
html:not(.dark) .modal-tab-btn.active {
  color: #9333ea !important;
  border-bottom: 2px solid #9333ea !important;
}

[data-theme="light"] .form-control,
html.light .form-control,
html:not(.dark) .form-control {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

[data-theme="light"] .form-control:focus,
html.light .form-control:focus,
html:not(.dark) .form-control:focus {
  border-color: #9333ea !important;
  box-shadow: 0 0 0 2px rgba(147, 51, 234, 0.2) !important;
}

[data-theme="light"] .form-label,
html.light .form-label,
html:not(.dark) .form-label {
  color: #1e293b !important;
}

[data-theme="light"] .sim-slider,
html.light .sim-slider,
html:not(.dark) .sim-slider {
  background: #e2e8f0;
}

[data-theme="light"] .sim-slider:hover,
html:not(.dark) .sim-slider:hover {
  background: #cbd5e1;
}

/* Industrial Process Badges & Status Tags (Pastel fills with crisp borders) */
[data-theme="light"] .badge-line,
[data-theme="light"] .badge-curing,
html:not(.dark) .badge-line,
html:not(.dark) .badge-curing {
  background: #f3e8ff;
  color: #7e22ce;
  border: 1px solid rgba(126, 34, 206, 0.45);
}

[data-theme="light"] .badge-primer,
html:not(.dark) .badge-primer {
  background: #fef3c7;
  color: #b45309;
  border: 1px solid rgba(180, 83, 9, 0.45);
}

[data-theme="light"] .badge-primer-cure,
html:not(.dark) .badge-primer-cure {
  background: repeating-linear-gradient(45deg, rgba(180, 83, 9, 0.14), rgba(180, 83, 9, 0.14) 4px, rgba(180, 83, 9, 0.04) 4px, rgba(180, 83, 9, 0.04) 8px);
  color: #b45309;
  border: 1px dashed rgba(180, 83, 9, 0.5);
}

[data-theme="light"] .badge-intumescent,
html:not(.dark) .badge-intumescent {
  background: #ffe4e6;
  color: #be123c;
  border: 1px solid rgba(190, 18, 60, 0.45);
}

[data-theme="light"] .badge-intumescent-cure,
html:not(.dark) .badge-intumescent-cure {
  background: repeating-linear-gradient(45deg, rgba(190, 18, 60, 0.14), rgba(190, 18, 60, 0.14) 4px, rgba(190, 18, 60, 0.04) 4px, rgba(190, 18, 60, 0.04) 8px);
  color: #be123c;
  border: 1px dashed rgba(190, 18, 60, 0.5);
}

[data-theme="light"] .badge-sealer,
html:not(.dark) .badge-sealer {
  background: #e0f2fe;
  color: #0284c7;
  border: 1px solid rgba(2, 132, 199, 0.45);
}

[data-theme="light"] .badge-sealer-cure,
html:not(.dark) .badge-sealer-cure {
  background: repeating-linear-gradient(45deg, rgba(2, 132, 199, 0.14), rgba(2, 132, 199, 0.14) 4px, rgba(2, 132, 199, 0.04) 4px, rgba(2, 132, 199, 0.04) 8px);
  color: #0284c7;
  border: 1px dashed rgba(2, 132, 199, 0.5);
}

/* Status Indicators in Light Mode */
[data-theme="light"] .badge-delivery-ontime,
html:not(.dark) .badge-delivery-ontime {
  background: #d1fae5;
  color: #047857;
  border: 1px solid rgba(4, 120, 87, 0.45);
}

[data-theme="light"] .badge-delivery-tight,
[data-theme="light"] .badge-awaiting-bay,
html:not(.dark) .badge-delivery-tight,
html:not(.dark) .badge-awaiting-bay {
  background: #fef3c7;
  color: #b45309;
  border: 1px solid rgba(180, 83, 9, 0.45);
}

[data-theme="light"] .badge-delivery-late,
[data-theme="light"] .badge-cap-conflict,
html:not(.dark) .badge-delivery-late,
html:not(.dark) .badge-cap-conflict {
  background: #ffe4e6;
  color: #be123c;
  border: 1px solid rgba(190, 18, 60, 0.45);
}

/* SVG Circular Gauges Track & Central Label Adaptability */
svg circle[stroke="#1e293b"] {
  stroke: var(--border-subtle, #282e42);
  transition: stroke 0.2s ease;
}

[data-theme="light"] svg circle[stroke="#1e293b"],
html:not(.dark) svg circle[stroke="#1e293b"] {
  stroke: #cbd5e1;
}

div[style*="width:50px"][style*="height:50px"] > div > span,
.ops-gauge-container > div > span,
div[style*="width:94px"][style*="height:94px"] > div > span[style*="color:#ffffff"],
div[style*="width:94px"][style*="height:94px"] > div > span[style*="color: rgb(255, 255, 255)"] {
  color: var(--text-highlight, #ffffff) !important;
}

div[style*="width:50px"][style*="height:50px"] > div > span.ops-gauge-subtext,
.ops-gauge-container > div > span.ops-gauge-subtext,
div[style*="width:94px"][style*="height:94px"] > div > span[style*="color:#cbd5e1"],
div[style*="width:94px"][style*="height:94px"] > div > span[style*="color: rgb(203, 213, 225)"] {
  color: var(--text-muted, #94a3b8) !important;
}

[data-theme="light"] div[style*="width:50px"][style*="height:50px"] > div > span,
html:not(.dark) div[style*="width:50px"][style*="height:50px"] > div > span,
[data-theme="light"] .ops-gauge-container > div > span,
html:not(.dark) .ops-gauge-container > div > span,
[data-theme="light"] div[style*="width:94px"][style*="height:94px"] > div > span[style*="color:#ffffff"],
[data-theme="light"] div[style*="width:94px"][style*="height:94px"] > div > span[style*="color: rgb(255, 255, 255)"],
html:not(.dark) div[style*="width:94px"][style*="height:94px"] > div > span[style*="color:#ffffff"],
html:not(.dark) div[style*="width:94px"][style*="height:94px"] > div > span[style*="color: rgb(255, 255, 255)"] {
  color: #020617 !important;
}

[data-theme="light"] div[style*="width:50px"][style*="height:50px"] > div > span.ops-gauge-subtext,
html:not(.dark) div[style*="width:50px"][style*="height:50px"] > div > span.ops-gauge-subtext,
[data-theme="light"] .ops-gauge-container > div > span.ops-gauge-subtext,
html:not(.dark) .ops-gauge-container > div > span.ops-gauge-subtext,
[data-theme="light"] div[style*="width:94px"][style*="height:94px"] > div > span[style*="color:#cbd5e1"],
[data-theme="light"] div[style*="width:94px"][style*="height:94px"] > div > span[style*="color: rgb(203, 213, 225)"],
html:not(.dark) div[style*="width:94px"][style*="height:94px"] > div > span[style*="color:#cbd5e1"],
html:not(.dark) div[style*="width:94px"][style*="height:94px"] > div > span[style*="color: rgb(203, 213, 225)"] {
  color: #475569 !important;
}

/* ==========================================================================
   COMBINED PRODUCTION TIMELINE & MULTI-WEEK GANTT SCHEDULE
   ========================================================================== */

.timeline-health-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
@media (max-width: 1400px) {
  .timeline-health-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .timeline-health-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.timeline-health-card {
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0.42rem 0.65rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  transition: all 0.15s ease;
  user-select: none;
  position: relative;
  min-height: 48px;
}
.timeline-health-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0,0,0,0.18);
}

.timeline-health-card.card-total {
  border-left: 3.5px solid #8b5cf6;
  background: rgba(139, 92, 246, 0.06);
}
.timeline-health-card.card-total:hover,
.timeline-health-card.card-total.active-filter {
  border-color: rgba(139, 92, 246, 0.5);
  background: rgba(139, 92, 246, 0.12);
}
.timeline-health-card.card-total.active-filter {
  box-shadow: 0 0 0 1.5px #8b5cf6, 0 2px 8px rgba(139, 92, 246, 0.25);
}

.timeline-health-card.card-behind {
  border-left: 3.5px solid #ef4444;
  background: rgba(239, 68, 68, 0.06);
}
.timeline-health-card.card-behind:hover,
.timeline-health-card.card-behind.active-filter {
  border-color: rgba(239, 68, 68, 0.5);
  background: rgba(239, 68, 68, 0.12);
}
.timeline-health-card.card-behind.active-filter {
  box-shadow: 0 0 0 1.5px #ef4444, 0 2px 8px rgba(239, 68, 68, 0.25);
}

.timeline-health-card.card-risk {
  border-left: 3.5px solid #f59e0b;
  background: rgba(245, 158, 11, 0.06);
}
.timeline-health-card.card-risk:hover,
.timeline-health-card.card-risk.active-filter {
  border-color: rgba(245, 158, 11, 0.5);
  background: rgba(245, 158, 11, 0.12);
}
.timeline-health-card.card-risk.active-filter {
  box-shadow: 0 0 0 1.5px #f59e0b, 0 2px 8px rgba(245, 158, 11, 0.25);
}

.timeline-health-card.card-ontrack {
  border-left: 3.5px solid #10b981;
  background: rgba(16, 185, 129, 0.06);
}
.timeline-health-card.card-ontrack:hover,
.timeline-health-card.card-ontrack.active-filter {
  border-color: rgba(16, 185, 129, 0.5);
  background: rgba(16, 185, 129, 0.12);
}
.timeline-health-card.card-ontrack.active-filter {
  box-shadow: 0 0 0 1.5px #10b981, 0 2px 8px rgba(16, 185, 129, 0.25);
}

.timeline-health-card.card-ahead {
  border-left: 3.5px solid #06b6d4;
  background: rgba(6, 182, 212, 0.06);
}
.timeline-health-card.card-ahead:hover,
.timeline-health-card.card-ahead.active-filter {
  border-color: rgba(6, 182, 212, 0.5);
  background: rgba(6, 182, 212, 0.12);
}
.timeline-health-card.card-ahead.active-filter {
  box-shadow: 0 0 0 1.5px #06b6d4, 0 2px 8px rgba(6, 182, 212, 0.25);
}

.timeline-health-card.card-mismatch {
  border-left: 3.5px solid #f59e0b;
  background: rgba(245, 158, 11, 0.07);
}
.timeline-health-card.card-mismatch:hover,
.timeline-health-card.card-mismatch.active-filter {
  border-color: rgba(245, 158, 11, 0.6);
  background: rgba(245, 158, 11, 0.15);
}
.timeline-health-card.card-mismatch.active-filter {
  box-shadow: 0 0 0 1.5px #f59e0b, 0 2px 8px rgba(245, 158, 11, 0.25);
}

.timeline-health-card.card-complete {
  border-left: 3.5px solid #3b82f6;
  background: rgba(59, 130, 246, 0.06);
}
.timeline-health-card.card-complete:hover,
.timeline-health-card.card-complete.active-filter {
  border-color: rgba(59, 130, 246, 0.5);
  background: rgba(59, 130, 246, 0.12);
}
.timeline-health-card.card-complete.active-filter {
  box-shadow: 0 0 0 1.5px #3b82f6, 0 2px 8px rgba(59, 130, 246, 0.25);
}

.health-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.health-card-title {
  font-size: 0.67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.15;
}

.health-card-metric-row {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin-top: 1px;
}

.health-card-value {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.1;
  font-family: var(--font-mono);
}

.health-card-sub {
  font-size: 0.65rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.health-card-icon {
  font-size: 1.15rem;
  opacity: 0.75;
  flex-shrink: 0;
  transition: transform 0.15s ease, opacity 0.15s ease;
  line-height: 1;
}

.timeline-health-card:hover .health-card-icon {
  transform: scale(1.1);
  opacity: 1;
}

.timeline-master-container {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  position: relative;
  overflow: hidden;
}

.timeline-scroll-wrapper {
  overflow-x: auto;
  overflow-y: visible;
  position: relative;
}

.timeline-table {
  display: flex;
  flex-direction: column;
  min-width: 100%;
  position: relative;
  user-select: none;
}

.timeline-header-row {
  display: flex;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-card-subtle);
  position: sticky;
  top: 0;
  z-index: 20;
}

/* ==========================================================================
   TIMELINE SIDEBAR HEADER & HEADCOUNT METER (Larger, High-Contrast & Ergonomic)
   ========================================================================== */
.timeline-sidebar-header {
  width: 275px;
  min-width: 275px;
  max-width: 275px;
  padding: 0.45rem 0.65rem;
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--text-highlight);
  background: var(--bg-card-subtle);
  border-right: 2px solid var(--border-color);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.35rem;
  position: sticky;
  left: 0;
  z-index: 25;
  box-sizing: border-box;
  overflow: hidden;
}

/* Pool Switcher Tab Row in Master Timeline Sidebar Header */
.timeline-headcount-tab-row {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  background: rgba(0, 0, 0, 0.35);
  padding: 2px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-sizing: border-box;
}

.timeline-pool-tab-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 3px 6px;
  font-size: 0.70rem;
  font-weight: 700;
  color: #94a3b8;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  white-space: nowrap;
}

.timeline-pool-tab-btn:hover {
  color: #f1f5f9;
  background: rgba(255, 255, 255, 0.06);
}

.timeline-pool-tab-btn.active.staff-active,
.timeline-pool-tab-btn.active.tab-headcount {
  background: rgba(168, 85, 247, 0.22);
  border-color: rgba(168, 85, 247, 0.55);
  color: #e9d5ff;
  box-shadow: 0 0 6px rgba(168, 85, 247, 0.25);
}

.timeline-pool-tab-btn.active.guns-active,
.timeline-pool-tab-btn.active.tab-guns {
  background: rgba(16, 185, 129, 0.22);
  border-color: rgba(16, 185, 129, 0.55);
  color: #6ee7b7;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.25);
}

.timeline-pool-tab-btn .tab-count-sub {
  font-size: 0.65rem;
  font-weight: 600;
  opacity: 0.85;
  font-family: var(--font-mono, monospace);
}

.timeline-headcount-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 0.35rem;
  box-sizing: border-box;
}

.timeline-headcount-title-group {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
}

.timeline-headcount-icon {
  font-size: 0.95rem;
  line-height: 1;
}

.timeline-headcount-title {
  font-size: 0.82rem;
  font-weight: 800;
  color: #38bdf8;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* Reset Baseline Button in Header */
.btn-timeline-reset-baseline {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.55rem;
  font-size: 0.70rem;
  font-weight: 700;
  color: #cbd5e1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  white-space: nowrap;
  line-height: 1.2;
}

.btn-timeline-reset-baseline:hover {
  background: rgba(168, 85, 247, 0.22);
  border-color: rgba(168, 85, 247, 0.55);
  color: #ffffff;
  box-shadow: 0 0 8px rgba(168, 85, 247, 0.3);
}

.btn-timeline-reset-baseline:active {
  transform: scale(0.96);
}

.btn-timeline-reset-baseline .reset-icon {
  font-size: 0.8rem;
  font-weight: 800;
}

/* Controls Row: Stepper & Stat Pill */
.timeline-headcount-controls-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 0.4rem;
  box-sizing: border-box;
}

.timeline-headcount-badge {
  display: inline-flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(168, 85, 247, 0.45);
  border-radius: 6px;
  padding: 2px 5px;
  gap: 3px;
  box-sizing: border-box;
  flex-shrink: 0;
}

.timeline-headcount-badge .fac-stepper-btn {
  background: rgba(168, 85, 247, 0.18);
  border: 1px solid rgba(168, 85, 247, 0.45);
  color: #c084fc;
  border-radius: 4px;
  width: 22px;
  min-width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  font-weight: 800;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  transition: all 0.15s ease;
  user-select: none;
}

.timeline-headcount-badge .fac-stepper-btn:hover {
  background: #a855f7;
  border-color: #a855f7;
  color: #ffffff;
  transform: scale(1.08);
  box-shadow: 0 0 6px rgba(168, 85, 247, 0.4);
}

.timeline-headcount-badge .fac-stepper-btn:active {
  transform: scale(0.95);
}

.timeline-headcount-badge .fac-limit-input {
  width: 28px;
  min-width: 28px;
  max-width: 32px;
  padding: 0 1px;
  background: transparent;
  border: none;
  color: #f8fafc;
  font-family: var(--font-mono, monospace);
  font-size: 0.95rem;
  font-weight: 800;
  text-align: center;
  outline: none;
  -moz-appearance: textfield;
  appearance: textfield;
  line-height: 1.1;
}

.timeline-headcount-badge .fac-unit {
  font-size: 0.70rem;
  color: #94a3b8;
  font-weight: 700;
  margin-left: 2px;
  margin-right: 1px;
  white-space: nowrap;
}

/* Stat Pill */
.timeline-headcount-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-family: var(--font-mono, monospace);
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 5px;
  padding: 2px 6px;
  height: 26px;
  box-sizing: border-box;
  flex-shrink: 0;
}

.timeline-headcount-stat-pill .headcount-assigned-val {
  font-size: 0.88rem;
  font-weight: 800;
  color: #f8fafc;
}

.timeline-headcount-stat-pill .headcount-slash {
  font-size: 0.75rem;
  color: #64748b;
  margin: 0 1px;
}

.timeline-headcount-stat-pill .headcount-total-val {
  font-size: 0.75rem;
  font-weight: 700;
  color: #94a3b8;
  margin-right: 3px;
}

.timeline-headcount-stat-pill .headcount-pct-badge {
  font-size: 0.68rem;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 3px;
}

.timeline-headcount-stat-pill .headcount-pct-badge.tag-full {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.timeline-headcount-stat-pill .headcount-pct-badge.tag-active {
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.4);
}

.timeline-headcount-stat-pill .headcount-pct-badge.tag-danger {
  background: rgba(239, 68, 68, 0.22);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.45);
}

/* Pool Row: Progress & Subtext */
.timeline-headcount-pool-row {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 2px;
  box-sizing: border-box;
}

.timeline-headcount-progress {
  height: 6px;
  width: 100%;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.4);
  margin-top: 1px;
}

.timeline-headcount-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  font-size: 0.70rem;
  line-height: 1.2;
  box-sizing: border-box;
}

.timeline-headcount-assigned {
  font-weight: 700;
  color: #94a3b8;
  font-size: 0.70rem;
  white-space: nowrap;
}

.timeline-headcount-avail {
  font-size: 0.70rem;
  font-weight: 700;
  color: #38bdf8;
  white-space: nowrap;
}

[data-theme="light"] .btn-timeline-reset-baseline {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #334155;
}

[data-theme="light"] .btn-timeline-reset-baseline:hover {
  background: rgba(168, 85, 247, 0.15);
  border-color: #a855f7;
  color: #7e22ce;
}

[data-theme="light"] .timeline-headcount-stat-pill {
  background: #f8fafc;
  border-color: #e2e8f0;
}

[data-theme="light"] .timeline-headcount-stat-pill .headcount-assigned-val {
  color: #0f172a;
}

[data-theme="light"] .timeline-headcount-stat-pill .headcount-total-val {
  color: #64748b;
}

[data-theme="light"] .timeline-headcount-badge .fac-limit-input {
  color: #0f172a;
}

[data-theme="light"] .timeline-headcount-badge .fac-unit {
  color: #64748b;
}

[data-theme="light"] .timeline-headcount-stat-row .timeline-headcount-assigned {
  color: #64748b;
}

.timeline-days-header-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.timeline-tier-months,
.timeline-tier-weeks,
.timeline-tier-days {
  display: flex;
}

.timeline-month-cell {
  border-right: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.5rem;
  color: var(--text-highlight);
  background: rgba(255, 255, 255, 0.02);
  text-align: center;
}

.timeline-week-cell {
  border-right: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.2rem 0.4rem;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.01);
  text-align: center;
}
.timeline-week-cell.is-active-week {
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
  border-bottom: 2px solid #38bdf8;
  font-weight: 800;
}

.timeline-day-col-header {
  font-size: 0.68rem;
  font-weight: 600;
  text-align: center;
  padding: 0.35rem 0.1rem;
  border-right: 1px solid var(--border-color);
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}
.timeline-day-col-header.is-weekend {
  background: rgba(0, 0, 0, 0.12);
  color: rgba(148, 163, 184, 0.6);
}
.timeline-day-col-header.is-today {
  background: rgba(6, 182, 212, 0.15);
  color: #38bdf8;
  font-weight: 800;
}
.timeline-day-col-header.is-week-end {
  border-right: 2px solid rgba(255, 255, 255, 0.22);
}
.timeline-day-col-header.is-selected-progression-day {
  background: rgba(56, 189, 248, 0.22) !important;
  color: #38bdf8 !important;
  font-weight: 800;
  box-shadow: inset 0 -3px 0 #38bdf8;
}

.timeline-progression-vertical-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #06b6d4;
  box-shadow: 0 0 10px rgba(6, 182, 212, 0.8), 0 0 20px rgba(6, 182, 212, 0.4);
  z-index: 18;
  pointer-events: none;
}
.timeline-progression-marker-badge {
  position: absolute;
  top: 1px;
  left: 50%;
  transform: translateX(-50%);
  background: #0284c7;
  color: #ffffff;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 9999px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  white-space: nowrap;
  letter-spacing: 0.04em;
  z-index: 22;
}

.timeline-line-row {
  display: flex;
  border-bottom: 2px solid var(--border-color);
  position: relative;
}

.timeline-line-sidebar {
  width: 275px;
  min-width: 275px;
  max-width: 275px;
  padding: 0.75rem 0.85rem;
  background: var(--bg-card);
  border-right: 2px solid var(--border-color);
  position: sticky;
  left: 0;
  z-index: 15;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.45rem;
}

.line-sidebar-header {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.15rem;
  width: 100%;
}

.line-sidebar-title-row,
.line-sidebar-title {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  width: 100%;
  min-width: 0;
}

.line-color-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
}

.line-name-text {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-highlight);
  letter-spacing: 0.02em;
  line-height: 1.25;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
  flex: 1;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-sidebar-meta-row,
.line-sidebar-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 0.35rem;
}

.btn-timeline-line-edit {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #ffffff;
  cursor: pointer;
  line-height: 1.2;
  transition: all 0.15s ease;
  user-select: none;
  flex-shrink: 0;
}

.btn-timeline-line-edit:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.35);
  color: #ffffff;
  transform: translateY(-1px);
}

.btn-timeline-line-edit .edit-gear-icon {
  font-size: 0.75rem;
  opacity: 0.9;
  display: inline-block;
  transition: transform 0.25s ease;
}

.btn-timeline-line-edit:hover .edit-gear-icon {
  opacity: 1;
  transform: rotate(45deg);
}

[data-theme="light"] .btn-timeline-line-edit,
html.light .btn-timeline-line-edit,
html:not(.dark) .btn-timeline-line-edit {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #1e293b;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .btn-timeline-line-edit:hover,
html.light .btn-timeline-line-edit:hover,
html:not(.dark) .btn-timeline-line-edit:hover {
  background: #e2e8f0;
  border-color: #94a3b8;
  color: #0f172a;
}

.line-batch-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: #cbd5e1;
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.sidebar-meter-box {
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 6px;
  padding: 0.35rem 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sidebar-meter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.72rem;
}

.sidebar-meter-label {
  color: #94a3b8;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.sidebar-meter-pct {
  font-weight: 800;
  font-size: 0.75rem;
}

.sidebar-meter-track {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: hidden;
}

.sidebar-meter-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.sidebar-meter-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.68rem;
  color: #cbd5e1;
}

.sidebar-meter-val {
  font-weight: 600;
  color: #cbd5e1;
}

.sidebar-meter-tag {
  font-size: 0.64rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
}

.sidebar-meter-tag.tag-ok {
  color: #34d399;
  background: rgba(16, 185, 129, 0.14);
}

.sidebar-meter-tag.tag-warning {
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.16);
}

.sidebar-meter-tag.tag-danger {
  color: #f87171;
  background: rgba(239, 68, 68, 0.18);
}

.sidebar-meter-tag.tag-muted {
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.05);
}

.sidebar-meter-tag.tag-off {
  color: #94a3b8;
  background: rgba(148, 163, 184, 0.16);
}

.sidebar-meter-pills-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 4px 0 6px 0;
}

.sidebar-meter-pill {
  flex: 1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: #94a3b8;
  font-size: 0.62rem;
  font-weight: 600;
  padding: 2px 4px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
  transition: all 0.15s ease;
  outline: none;
}

.sidebar-meter-pill:hover {
  background: rgba(255, 255, 255, 0.09);
  color: #f1f5f9;
  border-color: rgba(255, 255, 255, 0.18);
}

.sidebar-meter-pill.active {
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
  border-color: #38bdf8;
  font-weight: 700;
  box-shadow: 0 0 6px rgba(56, 189, 248, 0.25);
}

.sidebar-meter-context-sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  font-size: 0.62rem;
  color: #64748b;
  margin-top: 3px;
  padding-top: 3px;
  border-top: 1px dashed rgba(255, 255, 255, 0.05);
}

.sidebar-staffing-card {
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 0.35rem 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.staffing-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 0.72rem;
  line-height: 1.25;
}

.staffing-card-guns-row {
  padding-top: 3px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.staffing-card-cell-left {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #f1f5f9;
  font-weight: 600;
  white-space: nowrap;
  min-width: 0;
}

.staffing-card-icon {
  font-size: 0.8rem;
  line-height: 1;
  flex-shrink: 0;
}

.staffing-card-label {
  font-size: 0.71rem;
  color: #cbd5e1;
  white-space: nowrap;
}

.staffing-card-label strong {
  font-weight: 800;
  color: #ffffff;
}

.staffing-card-cell-right {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

.staffing-hours-badge {
  font-size: 0.66rem;
  color: #94a3b8;
  font-weight: 600;
  font-family: inherit;
}

.staffing-dot {
  opacity: 0.5;
  margin: 0 1px;
}

.staffing-gun-pill {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 1.5px 6px;
  border-radius: 4px;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.staffing-gun-pill.pill-synced {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.35);
}

.staffing-gun-pill.pill-spare {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.35);
}

.staffing-gun-pill.pill-capped {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.sidebar-staffing-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 6px;
  padding: 0.3rem 0.55rem;
  font-size: 0.7rem;
}

.staffing-main {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #94a3b8;
}

.staffing-count {
  font-weight: 800;
  color: #f8fafc;
}

.staffing-hours {
  color: #64748b;
  font-size: 0.67rem;
}

.staffing-mobile-pill {
  font-size: 0.64rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 10px;
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.3);
}

.sidebar-balance-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.35);
  color: #d8b4fe;
  cursor: pointer;
  transition: all 0.15s ease;
}

.sidebar-balance-btn:hover {
  background: rgba(168, 85, 247, 0.25);
  color: #fff;
  border-color: rgba(168, 85, 247, 0.6);
  box-shadow: 0 0 8px rgba(168, 85, 247, 0.3);
}

.timeline-line-track-area {
  flex: 1;
  position: relative;
  min-height: 125px;
  background-size: 100% 100%;
}

.timeline-grid-lines {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  pointer-events: none;
}
.timeline-grid-col {
  border-right: 1px solid rgba(255, 255, 255, 0.04);
  height: 100%;
}
.timeline-grid-col.is-weekend {
  background: rgba(0, 0, 0, 0.08);
}
.timeline-grid-col.is-today {
  background: rgba(6, 182, 212, 0.04);
  border-right: 1px solid rgba(6, 182, 212, 0.2);
}
.timeline-grid-col.is-week-end {
  border-right: 2px solid rgba(255, 255, 255, 0.16);
}

.timeline-load-block {
  position: absolute;
  min-width: 220px;
  max-height: 215px;
  border-radius: var(--radius-sm);
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-color);
  padding: 0.4rem 0.55rem;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  z-index: 10;
  box-sizing: border-box;
  overflow: hidden;
}
.timeline-load-block:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
  z-index: 25;
}

.timeline-load-block.status-behind {
  border: 1.5px solid #ef4444;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.25);
}
.timeline-load-block.status-risk {
  border: 1.5px solid #f59e0b;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.25);
}
.timeline-load-block.status-ahead {
  border: 1.5px solid #06b6d4;
  box-shadow: 0 0 10px rgba(6, 182, 212, 0.25);
}
.timeline-load-block.status-ontrack {
  border: 1.5px solid rgba(16, 185, 129, 0.6);
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.2);
}
.timeline-load-block.status-complete {
  border: 1.5px solid rgba(59, 130, 246, 0.6);
  background: rgba(59, 130, 246, 0.08);
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.2);
}
.timeline-load-block.status-curing {
  border: 1.5px solid #8b5cf6;
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.25);
}
.timeline-load-block.status-mismatch {
  border: 1.5px solid #f59e0b;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.25);
}

.timeline-progress-track {
  height: 22px;
  background: rgba(15, 23, 42, 0.85);
  border-radius: 5px;
  overflow: hidden;
  display: flex;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

.timeline-coat-seg {
  height: 100%;
  position: relative;
  display: flex;
  overflow: hidden;
  border-right: 1px solid rgba(255, 255, 255, 0.25);
  box-sizing: border-box;
  transition: width 0.3s ease;
  min-width: 36px;
  flex-shrink: 0;
}
.timeline-coat-seg:last-child {
  border-right: none;
}

.timeline-progress-track-modal .timeline-coat-seg,
.timeline-progress-track[style*="height:36px"] .timeline-coat-seg,
.timeline-progress-track[style*="height: 36px"] .timeline-coat-seg {
  min-width: 72px;
}


/* Sub-segments for Spray (Solid) and Cure (Striped) */
.timeline-subseg-spray {
  height: 100%;
  transition: width 0.3s ease;
  flex-shrink: 0;
}
.timeline-subseg-cure {
  height: 100%;
  transition: width 0.3s ease;
  flex-shrink: 0;
}

/* Coat Themes: Primer (Amber / Gold) */
/* Coat Themes: Primer (Amber / Gold) */
.timeline-coat-seg.coat-p .timeline-subseg-spray {
  background: #d97706;
}
.timeline-coat-seg.coat-p .timeline-subseg-cure {
  background: repeating-linear-gradient(45deg, rgba(217,119,6,0.5), rgba(217,119,6,0.5) 4px, rgba(217,119,6,0.18) 4px, rgba(217,119,6,0.18) 8px);
}

/* Coat Themes: Intumescent (Crimson / Magenta) */
.timeline-coat-seg.coat-i {
  background: rgba(220, 38, 38, 0.2);
}
.timeline-coat-seg.coat-i .timeline-subseg-spray {
  background: #dc2626;
}
.timeline-coat-seg.coat-i .timeline-subseg-cure {
  background: repeating-linear-gradient(45deg, rgba(220,38,38,0.5), rgba(220,38,38,0.5) 4px, rgba(220,38,38,0.18) 4px, rgba(220,38,38,0.18) 8px);
}

/* Coat Themes: Intermediate (Purple / Violet) */
.timeline-coat-seg.coat-m {
  background: rgba(147, 51, 234, 0.2);
}
.timeline-coat-seg.coat-m .timeline-subseg-spray {
  background: #9333ea;
}
.timeline-coat-seg.coat-m .timeline-subseg-cure {
  background: repeating-linear-gradient(45deg, rgba(147,51,234,0.5), rgba(147,51,234,0.5) 4px, rgba(147,51,234,0.18) 4px, rgba(147,51,234,0.18) 8px);
}

/* Coat Themes: Sealer (Cyan / Royal Blue) */
.timeline-coat-seg.coat-s {
  background: rgba(37, 99, 235, 0.2);
}
.timeline-coat-seg.coat-s .timeline-subseg-spray {
  background: #2563eb;
}
.timeline-coat-seg.coat-s .timeline-subseg-cure {
  background: repeating-linear-gradient(45deg, rgba(37,99,235,0.5), rgba(37,99,235,0.5) 4px, rgba(37,99,235,0.18) 4px, rgba(37,99,235,0.18) 8px);
}

/* Completed Coat Stages: Consistent Emerald Green Progress Fill */
.timeline-coat-seg.done {
  filter: saturate(0.95);
}
.timeline-coat-seg.done .timeline-subseg-spray,
.timeline-coat-seg .timeline-subseg-spray.done,
.timeline-subseg-spray.done {
  background: #10b981 !important;
}
.timeline-coat-seg.done .timeline-subseg-cure,
.timeline-coat-seg .timeline-subseg-cure.done,
.timeline-subseg-cure.done {
  background: repeating-linear-gradient(45deg, rgba(16,185,129,0.7), rgba(16,185,129,0.7) 4px, rgba(16,185,129,0.25) 4px, rgba(16,185,129,0.25) 8px) !important;
}
.timeline-coat-seg .timeline-subseg-cure.curing,
.timeline-subseg-cure.curing {
  background: repeating-linear-gradient(45deg, rgba(56,189,248,0.7), rgba(56,189,248,0.7) 4px, rgba(56,189,248,0.25) 4px, rgba(56,189,248,0.25) 8px) !important;
}
.timeline-coat-seg.done .timeline-coat-label {
  color: #f0fdf4;
}
.timeline-coat-seg.done .timeline-coat-initial {
  color: #34d399;
  font-weight: 800;
}

/* Text overlay centered over each coat segment */
.timeline-coat-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-content: safe center;
  gap: 3px;
  font-size: 0.70rem;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 2px rgba(0, 0, 0, 0.9);
  padding: 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  z-index: 2;
  box-sizing: border-box;
}

/* Modal progress track label: clean 2-line layout that guarantees all values are 100% legible */
.timeline-progress-track-modal .timeline-coat-label,
.timeline-progress-track[style*="height:36px"] .timeline-coat-label,
.timeline-progress-track[style*="height: 36px"] .timeline-coat-label,
.timeline-coat-label.modal-coat-label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1px;
  line-height: 1.15;
  padding: 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-align: center;
}

.modal-label-row-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 2px rgba(0, 0, 0, 0.9);
}

.modal-label-row-sub {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 600;
  opacity: 0.95;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 2px rgba(0, 0, 0, 0.9);
}

.timeline-coat-initial {
  font-weight: 800;
  letter-spacing: 0.02em;
}

.timeline-coat-time {
  font-weight: 600;
  opacity: 0.95;
}

.timeline-coat-subtime {
  font-size: 0.62rem;
  font-weight: 600;
  opacity: 0.92;
}


/* Dedicated Breakdown Strip Below Progress Track */
.timeline-coat-breakdown-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin-top: 2px;
  font-size: 0.62rem;
  line-height: 1.3;
}

.timeline-breakdown-pill {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.timeline-breakdown-pill strong {
  font-weight: 800;
}

.timeline-breakdown-pill.pill-p strong {
  color: #fbbf24;
}
.timeline-breakdown-pill.pill-i strong {
  color: #fca5a5;
}
.timeline-breakdown-pill.pill-s strong {
  color: #93c5fd;
}

.timeline-breakdown-pill .pill-hours {
  color: var(--text-highlight);
  font-weight: 700;
}

.timeline-breakdown-pill .pill-split {
  color: #94a3b8;
  font-size: 0.56rem;
}

/* Backward compatibility for legacy progress segments */
.timeline-progress-seg {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.64rem;
  font-weight: 700;
  color: #fff;
  transition: width 0.3s ease;
  white-space: nowrap;
  overflow: hidden;
}
.timeline-progress-seg.seg-p-done { background: #10b981; }
.timeline-progress-seg.seg-p-pend { background: repeating-linear-gradient(45deg, rgba(217,119,6,0.35), rgba(217,119,6,0.35) 4px, rgba(217,119,6,0.15) 4px, rgba(217,119,6,0.15) 8px); color: #fbbf24; }
.timeline-progress-seg.seg-i-done { background: #8b5cf6; }
.timeline-progress-seg.seg-i-pend { background: repeating-linear-gradient(45deg, rgba(220,38,38,0.35), rgba(220,38,38,0.35) 4px, rgba(220,38,38,0.15) 4px, rgba(220,38,38,0.15) 8px); color: #fca5a5; }
.timeline-progress-seg.seg-s-done { background: #3b82f6; }
.timeline-progress-seg.seg-s-pend { background: repeating-linear-gradient(45deg, rgba(37,99,235,0.35), rgba(37,99,235,0.35) 4px, rgba(37,99,235,0.15) 4px, rgba(37,99,235,0.15) 8px); color: #93c5fd; }


.timeline-stage-chip {
  padding: 2px 6px;
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid var(--border-color);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-muted);
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  user-select: none;
}
.timeline-stage-chip:hover {
  transform: translateY(-1px);
  filter: brightness(1.15);
}
.timeline-stage-chip.done {
  background: #10b981 !important;
  color: #ffffff !important;
  border-color: #059669 !important;
  font-weight: 800 !important;
  box-shadow: 0 1px 3px rgba(16, 185, 129, 0.45);
}
.timeline-stage-chip.curing {
  background: #0284c7 !important;
  color: #ffffff !important;
  border-color: #38bdf8 !important;
  font-weight: 800 !important;
}
.timeline-stage-chip.ready-next {
  background: rgba(56, 189, 248, 0.18) !important;
  color: #38bdf8 !important;
  border-color: #38bdf8 !important;
  font-weight: 800 !important;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.35);
  animation: pulseReadyChip 2s infinite ease-in-out;
}

@keyframes pulseReadyChip {
  0%, 100% {
    box-shadow: 0 0 4px rgba(56, 189, 248, 0.25);
    border-color: rgba(56, 189, 248, 0.6);
  }
  50% {
    box-shadow: 0 0 14px rgba(56, 189, 248, 0.6);
    border-color: #38bdf8;
  }
}

.timeline-stage-chip.locked {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  border-style: dashed !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: #94a3b8 !important;
}

.timeline-stage-chip.locked:hover {
  transform: none !important;
  filter: none !important;
  border-color: rgba(239, 68, 68, 0.45) !important;
  background: rgba(239, 68, 68, 0.08) !important;
  color: #fca5a5 !important;
}

[data-theme="light"] .timeline-stage-chip.ready-next,
html.light .timeline-stage-chip.ready-next,
html:not(.dark) .timeline-stage-chip.ready-next {
  background: #e0f2fe !important;
  color: #0369a1 !important;
  border-color: #0284c7 !important;
  font-weight: 800 !important;
  box-shadow: 0 0 8px rgba(2, 132, 199, 0.25) !important;
}

[data-theme="light"] .timeline-stage-chip.locked,
html.light .timeline-stage-chip.locked,
html:not(.dark) .timeline-stage-chip.locked {
  opacity: 1 !important;
  cursor: not-allowed !important;
  border-style: dashed !important;
  border-color: #cbd5e1 !important;
  background: #f1f5f9 !important;
  color: #64748b !important;
  font-weight: 700 !important;
}

[data-theme="light"] .timeline-stage-chip.locked:hover,
html.light .timeline-stage-chip.locked:hover,
html:not(.dark) .timeline-stage-chip.locked:hover {
  border-color: #fca5a5 !important;
  background: #fef2f2 !important;
  color: #b91c1c !important;
}

.stage-sequence-control-panel {
  background: rgba(15, 23, 42, 0.45);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.15rem 1.25rem;
  margin-bottom: 1.25rem;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
}

.stage-sequence-control-panel.is-collapsed {
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}

.stage-seq-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s ease;
}

.stage-seq-header:hover {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 4px;
}

.stage-sequence-control-panel.is-collapsed .stage-seq-header {
  margin-bottom: 0 !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

.stage-sequence-control-panel.is-collapsed .stage-seq-body {
  display: none !important;
}

.stage-seq-collapse-toggle-btn {
  background: rgba(56, 189, 248, 0.14);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #7dd3fc;
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: all 0.15s ease;
}

.stage-seq-collapse-toggle-btn:hover {
  background: rgba(56, 189, 248, 0.28) !important;
  border-color: rgba(56, 189, 248, 0.7) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

.stage-seq-toggle-chevron {
  display: inline-block;
  font-size: 0.68rem;
  line-height: 1;
}

.stage-seq-title {
  color: #f8fafc;
  font-size: 0.96rem;
  letter-spacing: 0.02em;
  font-weight: 800;
}

.stage-seq-subtitle {
  font-size: 0.73rem;
  color: var(--text-muted);
}

.stage-seq-step-badge {
  font-size: 0.76rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.stage-seq-step-badge.in-progress {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.3);
}
.stage-seq-step-badge.all-done {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.coat-group-card {
  border-radius: 8px;
  padding: 0.85rem 1.1rem;
  transition: all 0.2s ease;
  position: relative;
}

.coat-group-card.group-primer {
  background: rgba(16, 185, 129, 0.04);
  border: 1px solid rgba(16, 185, 129, 0.22);
  border-left: 4px solid #10b981;
}

.coat-group-card.group-intumescent {
  background: rgba(245, 158, 11, 0.04);
  border: 1px solid rgba(245, 158, 11, 0.22);
  border-left: 4px solid #f59e0b;
}

.coat-group-card.group-intermediate {
  background: rgba(168, 85, 247, 0.04);
  border: 1px solid rgba(168, 85, 247, 0.22);
  border-left: 4px solid #a855f7;
}

.coat-group-card.group-sealer {
  background: rgba(59, 130, 246, 0.04);
  border: 1px solid rgba(59, 130, 246, 0.22);
  border-left: 4px solid #3b82f6;
}

.coat-group-title {
  font-size: 0.88rem;
  letter-spacing: 0.03em;
  font-weight: 800;
}
.coat-group-title.primer-title { color: #10b981; }
.coat-group-title.intum-title { color: #fbbf24; }
.coat-group-title.inter-title { color: #d8b4fe; }
.coat-group-title.sealer-title { color: #60a5fa; }

.coat-status-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.coat-status-badge.badge-done {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.4);
}
.coat-status-badge.badge-progress {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.4);
}
.coat-status-badge.badge-locked {
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
}
.coat-status-badge.badge-ready {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.coat-status-badge.badge-ready-sky {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.3);
}
.coat-status-badge.badge-curing {
  background: rgba(168, 85, 247, 0.2);
  color: #d8b4fe;
  border: 1px solid rgba(168, 85, 247, 0.4);
}

.coat-pass-unit-box {
  background: rgba(0, 0, 0, 0.32);
  border-radius: 8px;
  padding: 0.65rem 0.75rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.55rem;
  transition: all 0.2s ease;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.coat-pass-unit-box.pass-done {
  background: rgba(16, 185, 129, 0.05);
  border-color: rgba(16, 185, 129, 0.35) !important;
}

.coat-pass-unit-box.pass-active {
  background: rgba(245, 158, 11, 0.06);
  border-color: rgba(245, 158, 11, 0.45) !important;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.14);
}

.coat-pass-unit-box.pass-locked {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.06) !important;
  opacity: 0.82;
}

.coat-pass-title {
  font-size: 0.8rem;
  font-weight: 800;
}
.coat-pass-title.pass-done { color: #34d399; }
.coat-pass-title.pass-active-primer { color: #10b981; }
.coat-pass-title.pass-active-intum { color: #fbbf24; }
.coat-pass-title.pass-active-sealer { color: #60a5fa; }
.coat-pass-title.pass-locked { color: #94a3b8; }

.coat-pass-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  min-width: 0;
}

.coat-pass-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex-wrap: nowrap;
}

.coat-pass-meta strong {
  font-size: 0.8rem;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.coat-pass-specs-pill {
  font-size: 0.68rem;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  white-space: nowrap;
  font-family: var(--font-mono, monospace);
  line-height: 1.2;
}

.coat-pass-buttons {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.coat-pass-buttons .timeline-stage-chip {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  justify-content: center !important;
  text-align: center !important;
  box-sizing: border-box !important;
  padding: 0.42rem 0.45rem !important;
  font-size: 0.76rem !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Light Theme Overrides for Coat Stage Progression */
[data-theme="light"] .stage-sequence-control-panel,
html.light .stage-sequence-control-panel,
html:not(.dark) .stage-sequence-control-panel {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
}

[data-theme="light"] .stage-seq-header,
html.light .stage-seq-header,
html:not(.dark) .stage-seq-header {
  border-bottom-color: #e2e8f0 !important;
}

[data-theme="light"] .stage-seq-title,
html.light .stage-seq-title,
html:not(.dark) .stage-seq-title {
  color: #0f172a !important;
}

[data-theme="light"] .stage-seq-subtitle,
html.light .stage-seq-subtitle,
html:not(.dark) .stage-seq-subtitle {
  color: #475569 !important;
}

[data-theme="light"] .stage-seq-step-badge.in-progress,
html.light .stage-seq-step-badge.in-progress,
html:not(.dark) .stage-seq-step-badge.in-progress {
  background: #e0f2fe !important;
  color: #0284c7 !important;
  border-color: #bae6fd !important;
}

[data-theme="light"] .stage-seq-step-badge.all-done,
html.light .stage-seq-step-badge.all-done,
html:not(.dark) .stage-seq-step-badge.all-done {
  background: #ecfdf5 !important;
  color: #047857 !important;
  border-color: #a7f3d0 !important;
}

[data-theme="light"] .stage-seq-collapse-toggle-btn,
html.light .stage-seq-collapse-toggle-btn,
html:not(.dark) .stage-seq-collapse-toggle-btn {
  background: #e0f2fe !important;
  border-color: #bae6fd !important;
  color: #0369a1 !important;
}

[data-theme="light"] .stage-seq-collapse-toggle-btn:hover,
html.light .stage-seq-collapse-toggle-btn:hover,
html:not(.dark) .stage-seq-collapse-toggle-btn:hover {
  background: #bae6fd !important;
  border-color: #38bdf8 !important;
  color: #075985 !important;
}

[data-theme="light"] .coat-group-card,
html.light .coat-group-card,
html:not(.dark) .coat-group-card {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] .coat-group-card.group-primer,
html.light .coat-group-card.group-primer,
html:not(.dark) .coat-group-card.group-primer {
  background: #f0fdf4 !important;
  border-color: #bbf7d0 !important;
  border-left: 4px solid #059669 !important;
}
[data-theme="light"] .coat-group-title.primer-title,
html.light .coat-group-title.primer-title,
html:not(.dark) .coat-group-title.primer-title {
  color: #047857 !important;
}

[data-theme="light"] .coat-group-card.group-intumescent,
html.light .coat-group-card.group-intumescent,
html:not(.dark) .coat-group-card.group-intumescent {
  background: #fffbeb !important;
  border-color: #fde68a !important;
  border-left: 4px solid #d97706 !important;
}
[data-theme="light"] .coat-group-title.intum-title,
html.light .coat-group-title.intum-title,
html:not(.dark) .coat-group-title.intum-title {
  color: #b45309 !important;
}

[data-theme="light"] .coat-group-card.group-intumescent code,
html.light .coat-group-card.group-intumescent code,
html:not(.dark) .coat-group-card.group-intumescent code {
  color: #92400e !important;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.3);
  padding: 1px 4px;
  border-radius: 3px;
}

[data-theme="light"] .coat-group-card.group-intermediate,
html.light .coat-group-card.group-intermediate,
html:not(.dark) .coat-group-card.group-intermediate {
  background: #faf5ff !important;
  border-color: #e9d5ff !important;
  border-left: 4px solid #9333ea !important;
}
[data-theme="light"] .coat-group-title.inter-title,
html.light .coat-group-title.inter-title,
html:not(.dark) .coat-group-title.inter-title {
  color: #7e22ce !important;
}

[data-theme="light"] .coat-group-card.group-sealer,
html.light .coat-group-card.group-sealer,
html:not(.dark) .coat-group-card.group-sealer {
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
  border-left: 4px solid #2563eb !important;
}
[data-theme="light"] .coat-group-title.sealer-title,
html.light .coat-group-title.sealer-title,
html:not(.dark) .coat-group-title.sealer-title {
  color: #1d4ed8 !important;
}

[data-theme="light"] .coat-status-badge.badge-done,
html.light .coat-status-badge.badge-done,
html:not(.dark) .coat-status-badge.badge-done {
  background: #ecfdf5 !important;
  color: #047857 !important;
  border-color: #a7f3d0 !important;
}
[data-theme="light"] .coat-status-badge.badge-progress,
html.light .coat-status-badge.badge-progress,
html:not(.dark) .coat-status-badge.badge-progress {
  background: #fffbeb !important;
  color: #b45309 !important;
  border-color: #fde68a !important;
}
[data-theme="light"] .coat-status-badge.badge-locked,
html.light .coat-status-badge.badge-locked,
html:not(.dark) .coat-status-badge.badge-locked {
  background: #fef2f2 !important;
  color: #b91c1c !important;
  border-color: #fca5a5 !important;
}
[data-theme="light"] .coat-status-badge.badge-ready,
html.light .coat-status-badge.badge-ready,
html:not(.dark) .coat-status-badge.badge-ready {
  background: #f1f5f9 !important;
  color: #334155 !important;
  border-color: #cbd5e1 !important;
}
[data-theme="light"] .coat-status-badge.badge-ready-sky,
html.light .coat-status-badge.badge-ready-sky,
html:not(.dark) .coat-status-badge.badge-ready-sky {
  background: #e0f2fe !important;
  color: #0284c7 !important;
  border-color: #bae6fd !important;
}
[data-theme="light"] .coat-status-badge.badge-curing,
html.light .coat-status-badge.badge-curing,
html:not(.dark) .coat-status-badge.badge-curing {
  background: #f3e8ff !important;
  color: #6b21a8 !important;
  border-color: #d8b4fe !important;
}

[data-theme="light"] .coat-pass-unit-box,
html.light .coat-pass-unit-box,
html:not(.dark) .coat-pass-unit-box {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}
[data-theme="light"] .coat-pass-unit-box.pass-done,
html.light .coat-pass-unit-box.pass-done,
html:not(.dark) .coat-pass-unit-box.pass-done {
  background: #f0fdf4 !important;
  border-color: #86efac !important;
}
[data-theme="light"] .coat-pass-unit-box.pass-active,
html.light .coat-pass-unit-box.pass-active,
html:not(.dark) .coat-pass-unit-box.pass-active {
  background: #fffbeb !important;
  border-color: #fcd34d !important;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.15) !important;
}
[data-theme="light"] .coat-pass-unit-box.pass-locked,
html.light .coat-pass-unit-box.pass-locked,
html:not(.dark) .coat-pass-unit-box.pass-locked {
  background: #f8fafc !important;
  border: 1px dashed #cbd5e1 !important;
  opacity: 1 !important;
}

[data-theme="light"] .coat-pass-title.pass-done,
html.light .coat-pass-title.pass-done,
html:not(.dark) .coat-pass-title.pass-done {
  color: #047857 !important;
}
[data-theme="light"] .coat-pass-title.pass-active-primer,
html.light .coat-pass-title.pass-active-primer,
html:not(.dark) .coat-pass-title.pass-active-primer {
  color: #047857 !important;
}
[data-theme="light"] .coat-pass-title.pass-active-intum,
html.light .coat-pass-title.pass-active-intum,
html:not(.dark) .coat-pass-title.pass-active-intum {
  color: #b45309 !important;
}
[data-theme="light"] .coat-pass-title.pass-active-sealer,
html.light .coat-pass-title.pass-active-sealer,
html:not(.dark) .coat-pass-title.pass-active-sealer {
  color: #1d4ed8 !important;
}
[data-theme="light"] .coat-pass-title.pass-locked,
html.light .coat-pass-title.pass-locked,
html:not(.dark) .coat-pass-title.pass-locked {
  color: #475569 !important;
}

[data-theme="light"] .coat-pass-specs-pill,
html.light .coat-pass-specs-pill,
html:not(.dark) .coat-pass-specs-pill {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
  font-weight: 600 !important;
}

/* ==========================================================================
   Coating Specifications, Product Recoat Windows & Curing Logic Panel
   ========================================================================== */
.coating-spec-logic-panel {
  background: rgba(245, 158, 11, 0.06);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  font-size: 0.83rem;
  color: #fde68a;
  line-height: 1.5;
  transition: all 0.2s ease;
}

.coating-spec-logic-panel.is-collapsed {
  padding-top: 0.7rem !important;
  padding-bottom: 0.7rem !important;
}

.coating-spec-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid rgba(245, 158, 11, 0.2);
  padding-bottom: 0.5rem;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s ease;
}

.coating-spec-header:hover {
  background: rgba(245, 158, 11, 0.05);
  border-radius: 4px;
}

.coating-spec-logic-panel.is-collapsed .coating-spec-header {
  margin-bottom: 0 !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

.coating-spec-logic-panel.is-collapsed .coating-spec-body {
  display: none !important;
}

.coating-spec-collapse-toggle-btn {
  background: rgba(245, 158, 11, 0.16);
  border: 1px solid rgba(245, 158, 11, 0.45);
  color: #fef08a;
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: all 0.15s ease;
}

.coating-spec-collapse-toggle-btn:hover {
  background: rgba(245, 158, 11, 0.3) !important;
  border-color: rgba(245, 158, 11, 0.7) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

.coating-spec-toggle-chevron {
  display: inline-block;
  font-size: 0.68rem;
  line-height: 1;
}

.coating-spec-panel-title {
  color: #fbbf24;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  font-weight: 800;
}

.coating-spec-badges-wrap {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.coating-spec-badge {
  font-size: 0.75rem;
  padding: 3px 10px;
  border-radius: 6px;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  display: inline-flex;
  align-items: center;
}

.coating-spec-badge.badge-peak-dft {
  background: rgba(245, 158, 11, 0.18);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fef08a;
}

.coating-spec-badge.badge-recoat {
  background: rgba(56, 189, 248, 0.18);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #38bdf8;
}

.coating-spec-badge.badge-intermediate {
  background: rgba(168, 85, 247, 0.18);
  border: 1px solid rgba(168, 85, 247, 0.4);
  color: #d8b4fe;
}

.coating-spec-badge.badge-sealer {
  background: rgba(52, 211, 153, 0.18);
  border: 1px solid rgba(52, 211, 153, 0.4);
  color: #34d399;
}

.coating-spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.coating-spec-card {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 6px;
  padding: 0.65rem 0.85rem;
  transition: all 0.2s ease;
}

.coating-spec-card.card-intum {
  border-color: rgba(245, 158, 11, 0.25);
}

.coating-spec-card.card-primer {
  border-color: rgba(59, 130, 246, 0.3);
}

.coating-spec-card.card-intermediate {
  border-color: rgba(168, 85, 247, 0.3);
}

.coating-spec-card.card-sealer {
  border-color: rgba(52, 211, 153, 0.3);
}

.coating-spec-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.4rem;
}

.coating-spec-card-title {
  font-size: 0.88rem;
  font-weight: 800;
}

.coating-spec-card.card-intum .coating-spec-card-title { color: #67e8f9; }
.coating-spec-card.card-primer .coating-spec-card-title { color: #60a5fa; }
.coating-spec-card.card-intermediate .coating-spec-card-title { color: #d8b4fe; }
.coating-spec-card.card-sealer .coating-spec-card-title { color: #34d399; }

.coating-spec-marks-badge {
  font-size: 0.72rem;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 8px;
  border-radius: 4px;
}

.coating-spec-product-line {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-bottom: 0.35rem;
}

.coating-spec-code {
  font-weight: 700;
  font-family: var(--font-mono, monospace);
}
.coating-spec-card.card-intum .coating-spec-code { color: #38bdf8; }
.coating-spec-card.card-primer .coating-spec-code { color: #38bdf8; }
.coating-spec-card.card-intermediate .coating-spec-code { color: #d8b4fe; }
.coating-spec-card.card-sealer .coating-spec-code { color: #34d399; }

.coating-spec-metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
  font-size: 0.75rem;
  font-family: var(--font-mono, monospace);
  background: rgba(255, 255, 255, 0.03);
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  margin-bottom: 0.35rem;
}

.coating-metric-label {
  color: var(--text-muted);
  display: block;
  font-size: 0.68rem;
}

.coating-metric-val-white { color: #ffffff; }
.coating-metric-val-curing { color: var(--color-curing, #c084fc); }
.coating-metric-val-highlight { color: #fde68a; }

.coating-spec-recoat-banner {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  border-left: 3.5px solid #f59e0b;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.coating-spec-recoat-banner.banner-primer-sealer,
.coating-spec-recoat-banner.banner-primer {
  border-left-color: #3b82f6;
}

.coating-spec-recoat-banner.banner-sealer {
  border-left-color: #10b981;
}

.recoat-highlight-hours {
  color: #fbbf24;
  font-weight: 700;
}

/* Light Theme Overrides for Coating Specifications Panel */
[data-theme="light"] .coating-spec-logic-panel,
html.light .coating-spec-logic-panel,
html:not(.dark) .coating-spec-logic-panel {
  background: #fffdf5 !important;
  border-color: #fde68a !important;
  color: #1e293b !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] .coating-spec-header,
html.light .coating-spec-header,
html:not(.dark) .coating-spec-header {
  border-bottom-color: #fde68a !important;
}

[data-theme="light"] .coating-spec-panel-title,
html.light .coating-spec-panel-title,
html:not(.dark) .coating-spec-panel-title {
  color: #92400e !important;
}

[data-theme="light"] .coating-spec-badge.badge-peak-dft,
html.light .coating-spec-badge.badge-peak-dft,
html:not(.dark) .coating-spec-badge.badge-peak-dft {
  background: #fef3c7 !important;
  color: #92400e !important;
  border-color: #fde68a !important;
}

[data-theme="light"] .coating-spec-badge.badge-recoat,
html.light .coating-spec-badge.badge-recoat,
html:not(.dark) .coating-spec-badge.badge-recoat {
  background: #e0f2fe !important;
  color: #0369a1 !important;
  border-color: #bae6fd !important;
}

[data-theme="light"] .coating-spec-badge.badge-intermediate,
html.light .coating-spec-badge.badge-intermediate,
html:not(.dark) .coating-spec-badge.badge-intermediate {
  background: #f3e8ff !important;
  color: #6b21a8 !important;
  border-color: #d8b4fe !important;
}

[data-theme="light"] .coating-spec-badge.badge-sealer,
html.light .coating-spec-badge.badge-sealer,
html:not(.dark) .coating-spec-badge.badge-sealer {
  background: #ecfdf5 !important;
  color: #047857 !important;
  border-color: #a7f3d0 !important;
}

[data-theme="light"] .coating-spec-collapse-toggle-btn,
html.light .coating-spec-collapse-toggle-btn,
html:not(.dark) .coating-spec-collapse-toggle-btn {
  background: #fef3c7 !important;
  border-color: #fde68a !important;
  color: #92400e !important;
}

[data-theme="light"] .coating-spec-collapse-toggle-btn:hover,
html.light .coating-spec-collapse-toggle-btn:hover,
html:not(.dark) .coating-spec-collapse-toggle-btn:hover {
  background: #fde68a !important;
  border-color: #f59e0b !important;
  color: #78350f !important;
}

[data-theme="light"] .coating-spec-card,
html.light .coating-spec-card,
html:not(.dark) .coating-spec-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
}

[data-theme="light"] .coating-spec-card.card-intum,
html.light .coating-spec-card.card-intum,
html:not(.dark) .coating-spec-card.card-intum {
  border-color: #fed7aa !important;
}

[data-theme="light"] .coating-spec-card.card-primer,
html.light .coating-spec-card.card-primer,
html:not(.dark) .coating-spec-card.card-primer {
  border-color: #bfdbfe !important;
}

[data-theme="light"] .coating-spec-card.card-intermediate,
html.light .coating-spec-card.card-intermediate,
html:not(.dark) .coating-spec-card.card-intermediate {
  border-color: #e9d5ff !important;
}

[data-theme="light"] .coating-spec-card.card-sealer,
html.light .coating-spec-card.card-sealer,
html:not(.dark) .coating-spec-card.card-sealer {
  border-color: #bbf7d0 !important;
}

[data-theme="light"] .coating-spec-card.card-intum .coating-spec-card-title,
html.light .coating-spec-card.card-intum .coating-spec-card-title,
html:not(.dark) .coating-spec-card.card-intum .coating-spec-card-title {
  color: #0284c7 !important;
}

[data-theme="light"] .coating-spec-card.card-primer .coating-spec-card-title,
html.light .coating-spec-card.card-primer .coating-spec-card-title,
html:not(.dark) .coating-spec-card.card-primer .coating-spec-card-title {
  color: #1d4ed8 !important;
}

[data-theme="light"] .coating-spec-card.card-intermediate .coating-spec-card-title,
html.light .coating-spec-card.card-intermediate .coating-spec-card-title,
html:not(.dark) .coating-spec-card.card-intermediate .coating-spec-card-title {
  color: #7e22ce !important;
}

[data-theme="light"] .coating-spec-card.card-sealer .coating-spec-card-title,
html.light .coating-spec-card.card-sealer .coating-spec-card-title,
html:not(.dark) .coating-spec-card.card-sealer .coating-spec-card-title {
  color: #047857 !important;
}

[data-theme="light"] .coating-spec-marks-badge,
html.light .coating-spec-marks-badge,
html:not(.dark) .coating-spec-marks-badge {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
}

[data-theme="light"] .coating-spec-product-line,
html.light .coating-spec-product-line,
html:not(.dark) .coating-spec-product-line {
  color: #334155 !important;
}

[data-theme="light"] .coating-spec-code,
html.light .coating-spec-code,
html:not(.dark) .coating-spec-code {
  color: #0284c7 !important;
}

[data-theme="light"] .coating-spec-metrics-grid,
html.light .coating-spec-metrics-grid,
html:not(.dark) .coating-spec-metrics-grid {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .coating-metric-label,
html.light .coating-metric-label,
html:not(.dark) .coating-metric-label {
  color: #64748b !important;
}

[data-theme="light"] .coating-metric-val-white,
html.light .coating-metric-val-white,
html:not(.dark) .coating-metric-val-white {
  color: #0f172a !important;
}

[data-theme="light"] .coating-metric-val-curing,
html.light .coating-metric-val-curing,
html:not(.dark) .coating-metric-val-curing {
  color: #7e22ce !important;
}

[data-theme="light"] .coating-metric-val-highlight,
html.light .coating-metric-val-highlight,
html:not(.dark) .coating-metric-val-highlight {
  color: #b45309 !important;
}

[data-theme="light"] .coating-spec-recoat-banner,
html.light .coating-spec-recoat-banner,
html:not(.dark) .coating-spec-recoat-banner {
  background: #ffffff !important;
  border: 1px solid #fde68a !important;
  border-left: 4px solid #d97706 !important;
  color: #1e293b !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] .coating-spec-recoat-banner.banner-primer-sealer,
[data-theme="light"] .coating-spec-recoat-banner.banner-primer,
html.light .coating-spec-recoat-banner.banner-primer-sealer,
html.light .coating-spec-recoat-banner.banner-primer,
html:not(.dark) .coating-spec-recoat-banner.banner-primer-sealer,
html:not(.dark) .coating-spec-recoat-banner.banner-primer {
  border-color: #bfdbfe !important;
  border-left-color: #2563eb !important;
}

[data-theme="light"] .coating-spec-recoat-banner.banner-sealer,
html.light .coating-spec-recoat-banner.banner-sealer,
html:not(.dark) .coating-spec-recoat-banner.banner-sealer {
  border-color: #bbf7d0 !important;
  border-left-color: #059669 !important;
}

[data-theme="light"] .recoat-highlight-hours,
html.light .recoat-highlight-hours,
html:not(.dark) .recoat-highlight-hours {
  color: #b45309 !important;
}

.timeline-coat-unit {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: rgba(255, 255, 255, 0.03);
  padding: 1px 3px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.timeline-risk-alert-pill {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}
.timeline-risk-alert-pill.pill-late {
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.5);
}
.timeline-risk-alert-pill.pill-pacing {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.5);
}
.timeline-risk-alert-pill.pill-tight {
  background: rgba(245, 158, 11, 0.15);
  color: #fcd34d;
  border: 1px solid rgba(245, 158, 11, 0.35);
}
.timeline-risk-alert-pill.pill-ontrack {
  background: rgba(16, 185, 129, 0.15);
  color: #6ee7b7;
  border: 1px solid rgba(16, 185, 129, 0.35);
}
.timeline-risk-alert-pill.pill-ahead {
  background: rgba(6, 182, 212, 0.2);
  color: #22d3ee;
  border: 1px solid rgba(6, 182, 212, 0.6);
  font-weight: 800;
}
.timeline-risk-alert-pill.pill-mismatch {
  background: rgba(245, 158, 11, 0.25);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.6);
  font-weight: 800;
}
.timeline-risk-alert-pill.pill-complete {
  background: rgba(59, 130, 246, 0.15);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, 0.35);
}
.timeline-risk-alert-pill.pill-curing {
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.5);
  font-weight: 800;
}

.timeline-card-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 4px;
}
.timeline-stage-group {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}
.timeline-flags-strip {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-top: 2px;
  width: 100%;
}

/* ==========================================================================
   TIMELINE UNIFIED TOOLBAR & CONTROLS (Ergonomic, Touch & Click Friendly)
   ========================================================================== */
/* ==========================================================================
   TIMELINE UNIFIED COMMAND CONSOLE (Styled after Modal Popup Style Guide)
   ========================================================================== */
.timeline-unified-toolbar {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.78) 0%, rgba(15, 23, 42, 0.94) 100%);
  padding: 0.65rem 0.95rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(12px);
}

/* Console Header Bar (Suppressed as Title & Action Buttons are consolidated) */
.timeline-unified-toolbar .toolbar-console-header {
  display: none !important;
}

.timeline-unified-toolbar .toolbar-console-title-group {
  display: none !important;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.timeline-unified-toolbar .toolbar-console-title {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

/* Facility Logo placed in front of SCHEDULE CONTROLS & TIMELINE FILTERS and COMBINED PRODUCTION SCHEDULE */
.timeline-facility-logo-container,
.timeline-unified-toolbar .timeline-facility-logo-container,
.viewer-facility-logo-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  max-width: 220px;
  padding: 3px 10px;
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
  box-sizing: border-box;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.timeline-facility-logo-container:hover,
.timeline-unified-toolbar .timeline-facility-logo-container:hover,
.viewer-facility-logo-container:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.timeline-facility-logo-img,
.timeline-unified-toolbar .timeline-facility-logo-img,
.viewer-facility-logo-img {
  max-height: 34px;
  max-width: 200px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.timeline-unified-toolbar .console-icon {
  font-size: 1.15rem;
  line-height: 1;
}

.timeline-unified-toolbar .console-title-text {
  color: #f8fafc;
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.timeline-unified-toolbar .console-subtitle-badge {
  background: rgba(168, 85, 247, 0.15);
  color: #d8b4fe;
  border: 1px solid rgba(168, 85, 247, 0.35);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  letter-spacing: 0.02em;
}

/* Tier 1 Action Buttons (Consolidated into top row alongside view controls) */
.timeline-unified-toolbar .toolbar-action-buttons {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  flex: 0 1 auto;
  margin-left: auto;
}

.timeline-unified-toolbar .toolbar-action-btn {
  height: 34px;
  padding: 0 0.85rem;
  font-size: 0.8rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: 7px;
  box-sizing: border-box;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.timeline-unified-toolbar .btn-auto-balance {
  background: rgba(168, 85, 247, 0.14);
  border: 1px solid rgba(168, 85, 247, 0.45);
  color: #e9d5ff;
  box-shadow: 0 2px 8px rgba(168, 85, 247, 0.15);
}

.timeline-unified-toolbar .btn-auto-balance:hover {
  background: rgba(168, 85, 247, 0.28);
  border-color: #c084fc;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(168, 85, 247, 0.35);
  transform: translateY(-1px);
}

.timeline-unified-toolbar .btn-auto-balance:active {
  transform: scale(0.97);
}

/* Marks Pop-Up Button (Toolbar) */
.timeline-unified-toolbar .btn-marks-popup {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-weight: 600;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.timeline-unified-toolbar .btn-marks-popup:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: transparent;
  color: #f1f5f9;
  box-shadow: none;
  transform: none;
}

.timeline-unified-toolbar .btn-marks-popup:active {
  transform: scale(0.97);
}

.timeline-unified-toolbar .btn-marks-popup .badge {
  background: #6366f1;
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 9999px;
  min-width: 16px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  line-height: 1;
}

/* Move Staff by Workload Button */
.timeline-unified-toolbar .btn-move-staff {
  background: rgba(59, 130, 246, 0.14);
  border: 1px solid rgba(59, 130, 246, 0.45);
  color: #bfdbfe;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
}

.timeline-unified-toolbar .btn-move-staff:hover {
  background: rgba(59, 130, 246, 0.28);
  border-color: #60a5fa;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35);
  transform: translateY(-1px);
}

.timeline-unified-toolbar .btn-move-staff:active {
  transform: scale(0.97);
}

/* Allocation Details Button (Toolbar Grouped Menu) */
.timeline-unified-toolbar .btn-allocation-popup {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-weight: 600;
  box-shadow: none;
  transform: none;
}

.timeline-unified-toolbar .btn-allocation-popup:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: transparent;
  color: #f1f5f9;
  box-shadow: none;
  transform: none;
}

.timeline-unified-toolbar .btn-allocation-popup:active {
  transform: scale(0.97);
}

/* Shop Floor PDF Button */
.timeline-unified-toolbar .btn-shop-floor-pdf {
  background: rgba(16, 185, 129, 0.14);
  border: 1px solid rgba(16, 185, 129, 0.45);
  color: #6ee7b7;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15);
}

.timeline-unified-toolbar .btn-shop-floor-pdf:hover {
  background: rgba(16, 185, 129, 0.28);
  border-color: #34d399;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
  transform: translateY(-1px);
}

.timeline-unified-toolbar .btn-shop-floor-pdf:active {
  transform: scale(0.97);
}

/* Subtle Divider */
.timeline-unified-toolbar .toolbar-divider {
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.09) 50%, rgba(255, 255, 255, 0.02) 100%);
  margin: 0.15rem 0;
}

/* Tier 1 & Tier 2 Rows */
.timeline-unified-toolbar .toolbar-top-row,
.timeline-unified-toolbar .toolbar-bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.65rem;
  width: 100%;
  box-sizing: border-box;
}

.timeline-unified-toolbar .toolbar-primary-controls {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  flex: 0 1 auto;
}

/* Stepper Capsule (Progression Date) */
.timeline-unified-toolbar .timeline-stepper-box {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.2rem 0.5rem;
  border-radius: 7px;
  height: 34px;
  box-sizing: border-box;
}

.timeline-unified-toolbar .stepper-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: #94a3b8;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-right: 0.1rem;
  user-select: none;
  white-space: nowrap;
}

.timeline-unified-toolbar .stepper-arrow-btn {
  width: 26px;
  height: 26px;
  min-width: 26px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: #cbd5e1;
  font-size: 0.72rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: all 0.15s ease;
}

.timeline-unified-toolbar .stepper-arrow-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  border-color: #38bdf8;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.3);
}

.timeline-unified-toolbar .stepper-arrow-btn:active {
  transform: scale(0.95);
}

.timeline-unified-toolbar .stepper-input-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.timeline-unified-toolbar .stepper-date-input {
  height: 26px;
  font-size: 0.8rem;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  padding: 0 0.4rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.85);
  color: #f8fafc;
  cursor: pointer;
  box-sizing: border-box;
  transition: all 0.15s ease;
}

.timeline-unified-toolbar .stepper-date-input:focus {
  outline: none;
  border-color: #38bdf8;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.28);
}

.timeline-unified-toolbar .stepper-day-badge {
  font-size: 0.7rem;
  font-weight: 800;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.35);
  padding: 2px 7px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.3;
  white-space: nowrap;
}

.timeline-unified-toolbar .stepper-today-btn {
  height: 26px;
  padding: 0 0.65rem;
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.timeline-unified-toolbar .stepper-today-btn:hover {
  background: rgba(56, 189, 248, 0.25);
  color: #ffffff;
  border-color: #38bdf8;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.3);
}

.timeline-unified-toolbar .stepper-today-btn:active {
  transform: scale(0.96);
}

/* Segmented Control Wrappers (Horizon Zoom & Width Mode) */
.timeline-unified-toolbar .segmented-control-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.2rem 0.5rem;
  border-radius: 7px;
  height: 34px;
  box-sizing: border-box;
}

.timeline-unified-toolbar .segmented-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: #94a3b8;
  user-select: none;
  margin-right: 0.1rem;
  white-space: nowrap;
}

.timeline-unified-toolbar .timeline-btn-group {
  display: inline-flex;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  overflow: hidden;
  height: 26px;
  box-sizing: border-box;
  padding: 2px;
  gap: 2px;
}

.timeline-unified-toolbar .timeline-btn-group .btn {
  height: 22px;
  padding: 0 0.65rem;
  font-size: 0.72rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  box-shadow: none;
  transform: none;
  transition: all 0.15s ease;
  user-select: none;
  white-space: nowrap;
}

.timeline-unified-toolbar .timeline-btn-group .btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #f1f5f9;
  box-shadow: none;
  transform: none;
}

/* Active Segmented Button - Vibrant Gradient matching Popup Done Button */
.timeline-unified-toolbar .timeline-btn-group .btn.active,
.timeline-unified-toolbar #btnTimelineWidthCompact.active,
.timeline-unified-toolbar #btnTimelineWidthNormal.active,
.timeline-unified-toolbar #btnTimelineWidthExpanded.active {
  background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 8px rgba(168, 85, 247, 0.45) !important;
}

/* Tier 2: Filter Group (Balanced & Space Filling) */
.timeline-unified-toolbar .toolbar-filter-group {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
  flex: 1 1 540px;
}

.timeline-unified-toolbar .filter-field-group {
  display: inline-flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  padding: 0.2rem 0.75rem;
  height: 34px;
  box-sizing: border-box;
  gap: 0.45rem;
  transition: all 0.15s ease;
  flex: 1 1 200px;
}

.timeline-unified-toolbar .filter-field-group.filter-field-group-line {
  flex: 1 1 240px;
  min-width: 190px;
  max-width: 340px;
}

.timeline-unified-toolbar .filter-field-group.filter-field-group-week {
  flex: 2 1 380px;
  min-width: 320px;
  max-width: 650px;
}

.timeline-unified-toolbar .filter-field-group:hover {
  border-color: rgba(255, 255, 255, 0.25);
}

.timeline-unified-toolbar .filter-field-group:focus-within {
  border-color: #a855f7;
  box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.25);
}

.timeline-unified-toolbar .filter-label {
  font-size: 0.76rem;
  font-weight: 700;
  color: #94a3b8;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
  user-select: none;
  margin: 0;
}

.timeline-unified-toolbar .filter-icon {
  font-size: 0.85rem;
}

.timeline-unified-toolbar .filter-select {
  height: 28px;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0 0.5rem 0 0.2rem;
  border-radius: 6px;
  background: transparent;
  color: #f8fafc;
  border: none;
  cursor: pointer;
  box-sizing: border-box;
  outline: none;
  flex: 1;
  width: 100%;
}

.timeline-unified-toolbar .filter-select option {
  background: #0f172a;
  color: #f8fafc;
  font-size: 0.82rem;
}

/* Stage Progress Legend Card */
.timeline-unified-toolbar .stage-legend-group {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 7px;
  padding: 0.2rem 0.75rem;
  height: 34px;
  box-sizing: border-box;
  margin-left: auto;
}

.timeline-unified-toolbar .legend-cycle-coats {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.timeline-unified-toolbar .legend-label {
  font-size: 0.72rem;
  font-weight: 800;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 0.15rem;
  white-space: nowrap;
}

.timeline-unified-toolbar .badge-chip {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 4px;
  white-space: nowrap;
}

.timeline-unified-toolbar .badge-primer {
  background: rgba(245, 158, 11, 0.16);
  border: 1px solid rgba(245, 158, 11, 0.45);
  color: #fbbf24;
}

.timeline-unified-toolbar .badge-intumescent {
  background: rgba(244, 63, 94, 0.16);
  border: 1px solid rgba(244, 63, 94, 0.45);
  color: #f87171;
}

.timeline-unified-toolbar .badge-intermediate {
  background: rgba(168, 85, 247, 0.16);
  border: 1px solid rgba(168, 85, 247, 0.45);
  color: #c084fc;
}

.timeline-unified-toolbar .badge-sealer {
  background: rgba(56, 189, 248, 0.16);
  border: 1px solid rgba(56, 189, 248, 0.45);
  color: #38bdf8;
}

.timeline-unified-toolbar .legend-cycle-curing {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  padding-left: 0.75rem;
  font-size: 0.72rem;
  color: #cbd5e1;
  font-weight: 600;
  white-space: nowrap;
}

.timeline-unified-toolbar .curing-legend-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.timeline-unified-toolbar .swatch-solid-green {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: #10b981;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.5);
  display: inline-block;
}

.timeline-unified-toolbar .swatch-cyan-stripes {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: repeating-linear-gradient(45deg, #0284c7, #0284c7 2px, #38bdf8 2px, #38bdf8 4px);
  box-shadow: 0 0 6px rgba(56, 189, 248, 0.5);
  display: inline-block;
}

.timeline-unified-toolbar .swatch-green-stripes {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: repeating-linear-gradient(45deg, #059669, #059669 2px, #10b981 2px, #10b981 4px);
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.5);
  display: inline-block;
}

/* Light Theme Support */
[data-theme="light"] .timeline-unified-toolbar {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border-color: #e2e8f0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .timeline-unified-toolbar .console-title-text {
  color: #0f172a;
}

[data-theme="light"] .timeline-unified-toolbar .timeline-stepper-box,
[data-theme="light"] .timeline-unified-toolbar .segmented-control-wrapper,
[data-theme="light"] .timeline-unified-toolbar .filter-field-group,
[data-theme="light"] .timeline-unified-toolbar .stage-legend-group {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

[data-theme="light"] .timeline-unified-toolbar .stepper-date-input,
[data-theme="light"] .timeline-unified-toolbar .timeline-btn-group {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #1e293b;
}

[data-theme="light"] .timeline-unified-toolbar .filter-select {
  color: #1e293b;
}

[data-theme="light"] .timeline-unified-toolbar .filter-select option {
  background: #ffffff;
  color: #1e293b;
}

[data-theme="light"] .timeline-unified-toolbar .badge-primer,
html.light .timeline-unified-toolbar .badge-primer,
html:not(.dark) .timeline-unified-toolbar .badge-primer {
  background: #fef3c7;
  border-color: rgba(180, 83, 9, 0.45);
  color: #b45309;
}

[data-theme="light"] .timeline-unified-toolbar .badge-intumescent,
html.light .timeline-unified-toolbar .badge-intumescent,
html:not(.dark) .timeline-unified-toolbar .badge-intumescent {
  background: #ffe4e6;
  border-color: rgba(190, 18, 60, 0.45);
  color: #be123c;
}

[data-theme="light"] .timeline-unified-toolbar .badge-intermediate,
html.light .timeline-unified-toolbar .badge-intermediate,
html:not(.dark) .timeline-unified-toolbar .badge-intermediate {
  background: #f3e8ff;
  border-color: rgba(126, 34, 206, 0.45);
  color: #7e22ce;
}

[data-theme="light"] .timeline-unified-toolbar .badge-sealer,
html.light .timeline-unified-toolbar .badge-sealer,
html:not(.dark) .timeline-unified-toolbar .badge-sealer {
  background: #e0f2fe;
  border-color: rgba(2, 132, 199, 0.45);
  color: #0284c7;
}

[data-theme="light"] .timeline-unified-toolbar .curing-legend-pill,
html.light .timeline-unified-toolbar .curing-legend-pill,
html:not(.dark) .timeline-unified-toolbar .curing-legend-pill {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #334155;
}

[data-theme="light"] .timeline-unified-toolbar .btn-shop-floor-pdf,
html.light .timeline-unified-toolbar .btn-shop-floor-pdf,
html:not(.dark) .timeline-unified-toolbar .btn-shop-floor-pdf {
  background: #ecfdf5;
  border-color: rgba(16, 185, 129, 0.6);
  color: #065f46;
}

[data-theme="light"] .timeline-unified-toolbar .btn-marks-popup,
html.light .timeline-unified-toolbar .btn-marks-popup,
html:not(.dark) .timeline-unified-toolbar .btn-marks-popup,
[data-theme="light"] .timeline-unified-toolbar .btn-allocation-popup,
html.light .timeline-unified-toolbar .btn-allocation-popup,
html:not(.dark) .timeline-unified-toolbar .btn-allocation-popup {
  background: transparent;
  border-color: transparent;
  color: #475569;
}

[data-theme="light"] .timeline-unified-toolbar .btn-marks-popup .badge,
html.light .timeline-unified-toolbar .btn-marks-popup .badge,
html:not(.dark) .timeline-unified-toolbar .btn-marks-popup .badge {
  background: #4f46e5;
  color: #ffffff;
}

[data-theme="light"] .timeline-unified-toolbar .btn-move-staff,
html.light .timeline-unified-toolbar .btn-move-staff,
html:not(.dark) .timeline-unified-toolbar .btn-move-staff {
  background: #eff6ff;
  border-color: rgba(59, 130, 246, 0.6);
  color: #1e40af;
}

[data-theme="light"] .timeline-unified-toolbar .btn-auto-balance,
html.light .timeline-unified-toolbar .btn-auto-balance,
html:not(.dark) .timeline-unified-toolbar .btn-auto-balance {
  background: #faf5ff;
  border-color: rgba(168, 85, 247, 0.6);
  color: #6b21a8;
}

[data-theme="light"] .timeline-facility-logo-container,
html.light .timeline-facility-logo-container,
html:not(.dark) .timeline-facility-logo-container,
[data-theme="light"] .timeline-unified-toolbar .timeline-facility-logo-container,
html.light .timeline-unified-toolbar .timeline-facility-logo-container,
html:not(.dark) .timeline-unified-toolbar .timeline-facility-logo-container,
[data-theme="light"] .viewer-facility-logo-container,
html.light .viewer-facility-logo-container,
html:not(.dark) .viewer-facility-logo-container {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .timeline-health-card.card-ahead,
html.light .timeline-health-card.card-ahead,
html:not(.dark) .timeline-health-card.card-ahead {
  border-left-color: #0891b2;
}

[data-theme="light"] .timeline-health-card.card-ahead .health-card-title,
html.light .timeline-health-card.card-ahead .health-card-title,
html:not(.dark) .timeline-health-card.card-ahead .health-card-title,
[data-theme="light"] .timeline-health-card.card-ahead .health-card-value,
html.light .timeline-health-card.card-ahead .health-card-value,
html:not(.dark) .timeline-health-card.card-ahead .health-card-value {
  color: #0891b2 !important;
}

[data-theme="light"] .timeline-risk-alert-pill.pill-ahead,
html.light .timeline-risk-alert-pill.pill-ahead,
html:not(.dark) .timeline-risk-alert-pill.pill-ahead {
  background: #ecfeff;
  color: #0e7490;
  border-color: #a5f3fc;
}

/* Responsive Toolbar Spacing & Multi-Screen Breakpoints */
@media (max-width: 1450px) {
  .timeline-unified-toolbar .toolbar-action-buttons {
    margin-left: 0;
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 1150px) {
  .timeline-unified-toolbar .stage-legend-group {
    margin-left: 0;
    width: 100%;
    justify-content: flex-start;
    height: auto;
    padding: 0.35rem 0.65rem;
  }
}

@media (max-width: 992px) {
  .timeline-unified-toolbar {
    padding: 0.55rem 0.75rem;
    gap: 0.45rem;
  }
  .timeline-unified-toolbar .toolbar-primary-controls {
    width: 100%;
  }
  .timeline-unified-toolbar .timeline-stepper-box {
    width: 100%;
    justify-content: space-between;
  }
  .timeline-unified-toolbar .filter-field-group.filter-field-group-line,
  .timeline-unified-toolbar .filter-field-group.filter-field-group-week {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  .timeline-unified-toolbar .stepper-label {
    display: none;
  }
  .timeline-unified-toolbar .segmented-control-wrapper {
    flex: 1 1 calc(50% - 0.4rem);
    justify-content: space-between;
  }
  .timeline-unified-toolbar .toolbar-action-btn {
    flex: 1 1 calc(50% - 0.45rem);
    justify-content: center;
    font-size: 0.76rem;
    padding: 0 0.5rem;
  }
  .timeline-unified-toolbar .toolbar-action-btn.btn-marks-popup {
    flex: 1 1 100%;
  }
  .timeline-unified-toolbar .stage-legend-group {
    gap: 0.4rem;
  }
  .timeline-unified-toolbar .legend-cycle-coats,
  .timeline-unified-toolbar .legend-cycle-curing {
    flex-wrap: wrap;
    gap: 0.35rem;
  }
}

/* Master Timeline & Gantt Grid Light Mode Rules */
[data-theme="light"] .timeline-master-container,
html.light .timeline-master-container,
html:not(.dark) .timeline-master-container {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
}

[data-theme="light"] .timeline-header-row,
html.light .timeline-header-row,
html:not(.dark) .timeline-header-row {
  background: #f8fafc !important;
  border-bottom: 1px solid #cbd5e1 !important;
}

[data-theme="light"] .timeline-sidebar-header,
html.light .timeline-sidebar-header,
html:not(.dark) .timeline-sidebar-header {
  background: #f8fafc !important;
  border-right: 2px solid #cbd5e1 !important;
  color: #0f172a !important;
}

[data-theme="light"] .timeline-headcount-tab-row,
html.light .timeline-headcount-tab-row,
html:not(.dark) .timeline-headcount-tab-row {
  background: #e2e8f0 !important;
  border-color: #cbd5e1 !important;
}

[data-theme="light"] .timeline-pool-tab-btn,
html.light .timeline-pool-tab-btn,
html:not(.dark) .timeline-pool-tab-btn {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #475569 !important;
}

[data-theme="light"] .timeline-pool-tab-btn:hover,
html.light .timeline-pool-tab-btn:hover,
html:not(.dark) .timeline-pool-tab-btn:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

[data-theme="light"] .timeline-pool-tab-btn.active.staff-active,
[data-theme="light"] .timeline-pool-tab-btn.active.tab-headcount,
html.light .timeline-pool-tab-btn.active.staff-active,
html.light .timeline-pool-tab-btn.active.tab-headcount,
html:not(.dark) .timeline-pool-tab-btn.active.staff-active,
html:not(.dark) .timeline-pool-tab-btn.active.tab-headcount {
  background: #f3e8ff !important;
  border-color: #c084fc !important;
  color: #7e22ce !important;
}

[data-theme="light"] .timeline-pool-tab-btn.active.guns-active,
[data-theme="light"] .timeline-pool-tab-btn.active.tab-guns,
html.light .timeline-pool-tab-btn.active.guns-active,
html.light .timeline-pool-tab-btn.active.tab-guns,
html:not(.dark) .timeline-pool-tab-btn.active.guns-active,
html:not(.dark) .timeline-pool-tab-btn.active.tab-guns {
  background: #d1fae5 !important;
  border-color: #34d399 !important;
  color: #047857 !important;
}

[data-theme="light"] .btn-timeline-reset-baseline,
html.light .btn-timeline-reset-baseline,
html:not(.dark) .btn-timeline-reset-baseline {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #475569 !important;
}

[data-theme="light"] .btn-timeline-reset-baseline:hover,
html.light .btn-timeline-reset-baseline:hover,
html:not(.dark) .btn-timeline-reset-baseline:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

[data-theme="light"] .timeline-headcount-badge,
html.light .timeline-headcount-badge,
html:not(.dark) .timeline-headcount-badge {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

[data-theme="light"] .timeline-headcount-stat-pill,
html.light .timeline-headcount-stat-pill,
html:not(.dark) .timeline-headcount-stat-pill {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
}

[data-theme="light"] .timeline-headcount-stat-pill strong,
html.light .timeline-headcount-stat-pill strong,
html:not(.dark) .timeline-headcount-stat-pill strong {
  color: #0f172a !important;
}

[data-theme="light"] .timeline-month-cell,
html.light .timeline-month-cell,
html:not(.dark) .timeline-month-cell {
  background: #f8fafc !important;
  color: #0f172a !important;
  border-right: 1px solid #cbd5e1 !important;
  border-bottom: 1px solid #cbd5e1 !important;
}

[data-theme="light"] .timeline-week-cell,
html.light .timeline-week-cell,
html:not(.dark) .timeline-week-cell {
  background: #f8fafc !important;
  color: #475569 !important;
  border-right: 1px solid #cbd5e1 !important;
  border-bottom: 1px solid #cbd5e1 !important;
}

[data-theme="light"] .timeline-week-cell.is-active-week,
html.light .timeline-week-cell.is-active-week,
html:not(.dark) .timeline-week-cell.is-active-week {
  background: #eff6ff !important;
  color: #0284c7 !important;
  border-bottom: 2px solid #0284c7 !important;
}

[data-theme="light"] .timeline-day-col-header,
html.light .timeline-day-col-header,
html:not(.dark) .timeline-day-col-header {
  background: #ffffff !important;
  color: #334155 !important;
  border-right: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .timeline-day-col-header.is-weekend,
html.light .timeline-day-col-header.is-weekend,
html:not(.dark) .timeline-day-col-header.is-weekend {
  background: #f8fafc !important;
  color: #94a3b8 !important;
}

[data-theme="light"] .timeline-day-col-header.is-today,
html.light .timeline-day-col-header.is-today,
html:not(.dark) .timeline-day-col-header.is-today {
  background: #eff6ff !important;
  color: #0284c7 !important;
}

[data-theme="light"] .timeline-day-col-header.is-week-end,
html.light .timeline-day-col-header.is-week-end,
html:not(.dark) .timeline-day-col-header.is-week-end {
  border-right: 2px solid #cbd5e1 !important;
}

[data-theme="light"] .timeline-line-row,
html.light .timeline-line-row,
html:not(.dark) .timeline-line-row {
  border-bottom: 2px solid #cbd5e1 !important;
}

[data-theme="light"] .timeline-line-sidebar,
html.light .timeline-line-sidebar,
html:not(.dark) .timeline-line-sidebar {
  background: #ffffff !important;
  border-right: 2px solid #cbd5e1 !important;
  box-shadow: 2px 0 8px rgba(15, 23, 42, 0.05) !important;
}

[data-theme="light"] .line-name-text,
html.light .line-name-text,
html:not(.dark) .line-name-text {
  color: #0f172a !important;
}

[data-theme="light"] .line-batch-badge,
html.light .line-batch-badge,
html:not(.dark) .line-batch-badge {
  background: #f1f5f9 !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

[data-theme="light"] .sidebar-meter-box,
html.light .sidebar-meter-box,
html:not(.dark) .sidebar-meter-box {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
}

[data-theme="light"] .sidebar-meter-label,
html.light .sidebar-meter-label,
html:not(.dark) .sidebar-meter-label {
  color: #475569 !important;
}

[data-theme="light"] .sidebar-meter-val,
html.light .sidebar-meter-val,
html:not(.dark) .sidebar-meter-val {
  color: #334155 !important;
}

[data-theme="light"] .sidebar-meter-track,
html.light .sidebar-meter-track,
html:not(.dark) .sidebar-meter-track {
  background: #e2e8f0 !important;
}

[data-theme="light"] .sidebar-meter-pill,
html.light .sidebar-meter-pill,
html:not(.dark) .sidebar-meter-pill {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
}

[data-theme="light"] .sidebar-meter-pill:hover,
html.light .sidebar-meter-pill:hover,
html:not(.dark) .sidebar-meter-pill:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

[data-theme="light"] .sidebar-meter-pill.active,
html.light .sidebar-meter-pill.active,
html:not(.dark) .sidebar-meter-pill.active {
  background: #e0f2fe !important;
  border-color: #0284c7 !important;
  color: #0284c7 !important;
}

[data-theme="light"] .sidebar-meter-tag.tag-ok,
html.light .sidebar-meter-tag.tag-ok,
html:not(.dark) .sidebar-meter-tag.tag-ok {
  background: #ecfdf5 !important;
  color: #047857 !important;
  border: 1px solid #a7f3d0 !important;
}

[data-theme="light"] .sidebar-meter-tag.tag-warning,
html.light .sidebar-meter-tag.tag-warning,
html:not(.dark) .sidebar-meter-tag.tag-warning {
  background: #fffbeb !important;
  color: #b45309 !important;
  border: 1px solid #fde68a !important;
}

[data-theme="light"] .sidebar-meter-tag.tag-danger,
html.light .sidebar-meter-tag.tag-danger,
html:not(.dark) .sidebar-meter-tag.tag-danger {
  background: #fef2f2 !important;
  color: #b91c1c !important;
  border: 1px solid #fecaca !important;
}

[data-theme="light"] .sidebar-meter-tag.tag-off,
html.light .sidebar-meter-tag.tag-off,
html:not(.dark) .sidebar-meter-tag.tag-off {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #cbd5e1 !important;
}

[data-theme="light"] .sidebar-meter-tag.tag-muted,
html.light .sidebar-meter-tag.tag-muted,
html:not(.dark) .sidebar-meter-tag.tag-muted {
  background: #f8fafc !important;
  color: #64748b !important;
  border: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .sidebar-staffing-card,
html.light .sidebar-staffing-card,
html:not(.dark) .sidebar-staffing-card {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] .staffing-card-guns-row,
html.light .staffing-card-guns-row,
html:not(.dark) .staffing-card-guns-row {
  border-top: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .staffing-card-cell-left,
html.light .staffing-card-cell-left,
html:not(.dark) .staffing-card-cell-left {
  color: #0f172a !important;
}

[data-theme="light"] .staffing-card-label,
html.light .staffing-card-label,
html:not(.dark) .staffing-card-label {
  color: #334155 !important;
}

[data-theme="light"] .staffing-card-label strong,
html.light .staffing-card-label strong,
html:not(.dark) .staffing-card-label strong {
  color: #0f172a !important;
}

[data-theme="light"] .staffing-hours-badge,
html.light .staffing-hours-badge,
html:not(.dark) .staffing-hours-badge {
  color: #475569 !important;
}

[data-theme="light"] .staffing-gun-pill.pill-synced,
html.light .staffing-gun-pill.pill-synced,
html:not(.dark) .staffing-gun-pill.pill-synced {
  background: #ecfdf5 !important;
  color: #047857 !important;
  border: 1px solid #a7f3d0 !important;
}

[data-theme="light"] .staffing-gun-pill.pill-spare,
html.light .staffing-gun-pill.pill-spare,
html:not(.dark) .staffing-gun-pill.pill-spare {
  background: #f0f9ff !important;
  color: #0284c7 !important;
  border: 1px solid #bae6fd !important;
}

[data-theme="light"] .staffing-gun-pill.pill-capped,
html.light .staffing-gun-pill.pill-capped,
html:not(.dark) .staffing-gun-pill.pill-capped {
  background: #fffbeb !important;
  color: #b45309 !important;
  border: 1px solid #fde68a !important;
}

[data-theme="light"] .sidebar-staffing-chip,
html.light .sidebar-staffing-chip,
html:not(.dark) .sidebar-staffing-chip {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
}

[data-theme="light"] .staffing-count,
html.light .staffing-count,
html:not(.dark) .staffing-count {
  color: #0f172a !important;
}

[data-theme="light"] .timeline-line-track-area,
html.light .timeline-line-track-area,
html:not(.dark) .timeline-line-track-area {
  background: #ffffff !important;
}

[data-theme="light"] .timeline-grid-col,
html.light .timeline-grid-col,
html:not(.dark) .timeline-grid-col {
  border-right: 1px solid #f1f5f9 !important;
}

[data-theme="light"] .timeline-grid-col.is-weekend,
html.light .timeline-grid-col.is-weekend,
html:not(.dark) .timeline-grid-col.is-weekend {
  background: #f8fafc !important;
}

[data-theme="light"] .timeline-grid-col.is-week-end,
html.light .timeline-grid-col.is-week-end,
html:not(.dark) .timeline-grid-col.is-week-end {
  border-right: 2px solid #cbd5e1 !important;
}

[data-theme="light"] .timeline-load-block,
html.light .timeline-load-block,
html:not(.dark) .timeline-load-block {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08) !important;
}

[data-theme="light"] .timeline-load-block:hover,
html.light .timeline-load-block:hover,
html:not(.dark) .timeline-load-block:hover {
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.14) !important;
}

/* Light Mode High-Contrast Coloured Status Borders for Timeline Load Blocks */
[data-theme="light"] .timeline-load-block.status-behind,
html.light .timeline-load-block.status-behind,
html:not(.dark) .timeline-load-block.status-behind {
  border: 2px solid #ef4444 !important;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.22), 0 0 0 1px rgba(239, 68, 68, 0.15) !important;
}
[data-theme="light"] .timeline-load-block.status-behind:hover,
html.light .timeline-load-block.status-behind:hover,
html:not(.dark) .timeline-load-block.status-behind:hover {
  border-color: #dc2626 !important;
  box-shadow: 0 8px 22px rgba(239, 68, 68, 0.32), 0 0 0 1.5px #ef4444 !important;
}

[data-theme="light"] .timeline-load-block.status-risk,
html.light .timeline-load-block.status-risk,
html:not(.dark) .timeline-load-block.status-risk {
  border: 2px solid #f59e0b !important;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.22), 0 0 0 1px rgba(245, 158, 11, 0.15) !important;
}
[data-theme="light"] .timeline-load-block.status-risk:hover,
html.light .timeline-load-block.status-risk:hover,
html:not(.dark) .timeline-load-block.status-risk:hover {
  border-color: #d97706 !important;
  box-shadow: 0 8px 22px rgba(245, 158, 11, 0.32), 0 0 0 1.5px #f59e0b !important;
}

[data-theme="light"] .timeline-load-block.status-ahead,
html.light .timeline-load-block.status-ahead,
html:not(.dark) .timeline-load-block.status-ahead {
  border: 2px solid #0891b2 !important;
  box-shadow: 0 2px 8px rgba(8, 145, 178, 0.22), 0 0 0 1px rgba(8, 145, 178, 0.15) !important;
}
[data-theme="light"] .timeline-load-block.status-ahead:hover,
html.light .timeline-load-block.status-ahead:hover,
html:not(.dark) .timeline-load-block.status-ahead:hover {
  border-color: #0e7490 !important;
  box-shadow: 0 8px 22px rgba(8, 145, 178, 0.32), 0 0 0 1.5px #0891b2 !important;
}

[data-theme="light"] .timeline-load-block.status-ontrack,
html.light .timeline-load-block.status-ontrack,
html:not(.dark) .timeline-load-block.status-ontrack {
  border: 1.5px solid #10b981 !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.18), 0 0 0 1px rgba(16, 185, 129, 0.1) !important;
}
[data-theme="light"] .timeline-load-block.status-ontrack:hover,
html.light .timeline-load-block.status-ontrack:hover,
html:not(.dark) .timeline-load-block.status-ontrack:hover {
  border-color: #059669 !important;
  box-shadow: 0 8px 22px rgba(16, 185, 129, 0.28), 0 0 0 1.5px #10b981 !important;
}

[data-theme="light"] .timeline-load-block.status-complete,
html.light .timeline-load-block.status-complete,
html:not(.dark) .timeline-load-block.status-complete {
  border: 1.5px solid #3b82f6 !important;
  background: #f0f7ff !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.18), 0 0 0 1px rgba(59, 130, 246, 0.1) !important;
}
[data-theme="light"] .timeline-load-block.status-complete:hover,
html.light .timeline-load-block.status-complete:hover,
html:not(.dark) .timeline-load-block.status-complete:hover {
  border-color: #2563eb !important;
  box-shadow: 0 8px 22px rgba(59, 130, 246, 0.28), 0 0 0 1.5px #3b82f6 !important;
}

[data-theme="light"] .timeline-load-block.status-curing,
html.light .timeline-load-block.status-curing,
html:not(.dark) .timeline-load-block.status-curing {
  border: 1.5px solid #8b5cf6 !important;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.2) !important;
}
[data-theme="light"] .timeline-load-block.status-curing:hover,
html.light .timeline-load-block.status-curing:hover,
html:not(.dark) .timeline-load-block.status-curing:hover {
  border-color: #7c3aed !important;
  box-shadow: 0 8px 22px rgba(139, 92, 246, 0.3) !important;
}

[data-theme="light"] .timeline-load-block.status-mismatch,
html.light .timeline-load-block.status-mismatch,
html:not(.dark) .timeline-load-block.status-mismatch {
  border: 2px solid #f59e0b !important;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2) !important;
}
[data-theme="light"] .timeline-load-block.status-mismatch:hover,
html.light .timeline-load-block.status-mismatch:hover,
html:not(.dark) .timeline-load-block.status-mismatch:hover {
  border-color: #d97706 !important;
  box-shadow: 0 8px 22px rgba(245, 158, 11, 0.3) !important;
}

/* Light Mode Risk Alert Pills with Sharp Contrast */
[data-theme="light"] .timeline-risk-alert-pill.pill-late,
html.light .timeline-risk-alert-pill.pill-late,
html:not(.dark) .timeline-risk-alert-pill.pill-late {
  background: #fee2e2 !important;
  color: #b91c1c !important;
  border: 1px solid #f87171 !important;
  font-weight: 800 !important;
}

[data-theme="light"] .timeline-risk-alert-pill.pill-pacing,
html.light .timeline-risk-alert-pill.pill-pacing,
html:not(.dark) .timeline-risk-alert-pill.pill-pacing,
[data-theme="light"] .timeline-risk-alert-pill.pill-tight,
html.light .timeline-risk-alert-pill.pill-tight,
html:not(.dark) .timeline-risk-alert-pill.pill-tight {
  background: #fef3c7 !important;
  color: #b45309 !important;
  border: 1px solid #fcd34d !important;
  font-weight: 800 !important;
}

[data-theme="light"] .timeline-risk-alert-pill.pill-ontrack,
html.light .timeline-risk-alert-pill.pill-ontrack,
html:not(.dark) .timeline-risk-alert-pill.pill-ontrack {
  background: #dcfce7 !important;
  color: #15803d !important;
  border: 1px solid #86efac !important;
  font-weight: 800 !important;
}

[data-theme="light"] .timeline-risk-alert-pill.pill-ahead,
html.light .timeline-risk-alert-pill.pill-ahead,
html:not(.dark) .timeline-risk-alert-pill.pill-ahead {
  background: #cffafe !important;
  color: #0e7490 !important;
  border: 1px solid #67e8f9 !important;
  font-weight: 800 !important;
}

[data-theme="light"] .timeline-risk-alert-pill.pill-mismatch,
html.light .timeline-risk-alert-pill.pill-mismatch,
html:not(.dark) .timeline-risk-alert-pill.pill-mismatch {
  background: #fef3c7 !important;
  color: #b45309 !important;
  border: 1px solid #fcd34d !important;
  font-weight: 800 !important;
}

[data-theme="light"] .timeline-risk-alert-pill.pill-complete,
html.light .timeline-risk-alert-pill.pill-complete,
html:not(.dark) .timeline-risk-alert-pill.pill-complete {
  background: #dbeafe !important;
  color: #1d4ed8 !important;
  border: 1px solid #93c5fd !important;
  font-weight: 800 !important;
}

[data-theme="light"] .timeline-risk-alert-pill.pill-curing,
html.light .timeline-risk-alert-pill.pill-curing,
html:not(.dark) .timeline-risk-alert-pill.pill-curing {
  background: #ede9fe !important;
  color: #6d28d9 !important;
  border: 1px solid #c4b5fd !important;
  font-weight: 800 !important;
}

/* Light Mode Contract Badges */
[data-theme="light"] .timeline-contract-code-badge,
html.light .timeline-contract-code-badge,
html:not(.dark) .timeline-contract-code-badge {
  border-width: 1.5px !important;
  font-weight: 800 !important;
}

[data-theme="light"] .timeline-load-block [style*="color:#cbd5e1"],
html.light .timeline-load-block [style*="color:#cbd5e1"],
html:not(.dark) .timeline-load-block [style*="color:#cbd5e1"] {
  color: #475569 !important;
}

[data-theme="light"] .timeline-breakdown-pill,
html.light .timeline-breakdown-pill,
html:not(.dark) .timeline-breakdown-pill {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
}

[data-theme="light"] .timeline-progress-track,
html.light .timeline-progress-track,
html:not(.dark) .timeline-progress-track {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06) !important;
}

[data-theme="light"] .stage-sequence-control-panel,
html.light .stage-sequence-control-panel,
html:not(.dark) .stage-sequence-control-panel {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
}

/* Allocation Workbench Coat Stages Popover Light Mode */
[data-theme="light"] .workbench-stages-popover,
html.light .workbench-stages-popover,
html:not(.dark) .workbench-stages-popover {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.15), 0 8px 10px -6px rgba(15, 23, 42, 0.1) !important;
  color: #0f172a !important;
}

[data-theme="light"] .workbench-stages-popover-header,
[data-theme="light"] .workbench-stages-popover-footer,
html.light .workbench-stages-popover-header,
html.light .workbench-stages-popover-footer,
html:not(.dark) .workbench-stages-popover-header,
html:not(.dark) .workbench-stages-popover-footer {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
}

[data-theme="light"] .wb-popover-title,
html.light .wb-popover-title,
html:not(.dark) .wb-popover-title {
  color: #0f172a !important;
}

[data-theme="light"] .wb-popover-subtitle,
html.light .wb-popover-subtitle,
html:not(.dark) .wb-popover-subtitle {
  color: #64748b !important;
}

[data-theme="light"] .wb-popover-summary,
html.light .wb-popover-summary,
html:not(.dark) .wb-popover-summary {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .wb-stage-card,
html.light .wb-stage-card,
html:not(.dark) .wb-stage-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .btn-workbench-stages-trigger,
html.light .btn-workbench-stages-trigger,
html:not(.dark) .btn-workbench-stages-trigger {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
}

[data-theme="light"] .btn-workbench-stages-trigger:hover,
html.light .btn-workbench-stages-trigger:hover,
html:not(.dark) .btn-workbench-stages-trigger:hover {
  background: #f1f5f9 !important;
  border-color: #9333ea !important;
}

/* Facility Switcher Header Capsule Light Mode */
[data-theme="light"] .facility-switcher-container,
html.light .facility-switcher-container,
html:not(.dark) .facility-switcher-container {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08) !important;
}

[data-theme="light"] .facility-select,
html.light .facility-select,
html:not(.dark) .facility-select {
  color: #0f172a !important;
}

[data-theme="light"] .facility-select option,
html.light .facility-select option,
html:not(.dark) .facility-select option {
  background: #ffffff !important;
  color: #0f172a !important;
}

[data-theme="light"] .facility-company-pill,
html.light .facility-company-pill,
html:not(.dark) .facility-company-pill {
  background: #f3e8ff !important;
  color: #7e22ce !important;
  border: 1px solid #d8b4fe !important;
}

[data-theme="light"] .facility-header-logo-wrapper,
html.light .facility-header-logo-wrapper,
html:not(.dark) .facility-header-logo-wrapper {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
}

/* ============================================================
   WORKBENCH COAT STAGES MINI POPOVER & TRIGGER BUTTON
   ============================================================ */
.btn-workbench-stages-trigger {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  font-family: inherit;
}

.btn-workbench-stages-trigger:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(56, 189, 248, 0.5);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.btn-workbench-stages-trigger:active {
  transform: translateY(0);
}

.workbench-stages-popover {
  position: fixed;
  z-index: 10050;
  width: 480px;
  max-width: 95vw;
  background: var(--bg-card, #1e293b);
  border: 1px solid var(--border-color, #334155);
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(16px);
  overflow: hidden;
  animation: popoverFadeIn 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes popoverFadeIn {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(-4px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.workbench-stages-popover-header {
  padding: 0.6rem 0.9rem;
  background: var(--bg-card-subtle, #0f172a);
  border-bottom: 1px solid var(--border-color, #334155);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wb-popover-title {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--text-highlight, #f8fafc);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.wb-popover-subtitle {
  font-size: 0.70rem;
  color: var(--text-muted, #94a3b8);
  margin-top: 2px;
}

.wb-popover-close {
  font-size: 1.15rem;
  line-height: 1;
  padding: 0.15rem 0.45rem;
  color: var(--text-muted, #94a3b8);
  border: 1px solid var(--border-color, #334155);
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.12s ease;
}

.wb-popover-close:hover {
  color: #ef4444;
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

.workbench-stages-popover-body {
  padding: 0.75rem 0.9rem;
  max-height: 420px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.wb-popover-summary {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-sm, 6px);
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.wb-popover-stages-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.wb-stage-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 0.65rem;
  border-radius: var(--radius-sm, 6px);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-color, #334155);
  transition: all 0.12s ease;
}

.wb-stage-card.is-done {
  border-color: rgba(16, 185, 129, 0.4);
  background: rgba(16, 185, 129, 0.07);
}

.wb-stage-card.is-ready {
  border-color: rgba(56, 189, 248, 0.55);
  background: rgba(56, 189, 248, 0.08);
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.15);
}

.wb-stage-card.is-locked {
  opacity: 0.52;
  border-style: dashed;
}

.workbench-stages-popover-footer {
  padding: 0.5rem 0.9rem;
  background: var(--bg-card-subtle, #0f172a);
  border-top: 1px solid var(--border-color, #334155);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ==========================================================================
   MULTI-TENANT RBAC, MFA & USER MANAGEMENT SUITE STYLING
   ========================================================================== */

/* Header Facility Switcher (Polished Executive Glassmorphic Capsule) */
.facility-switcher-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  padding: 0 0.95rem;
  height: 38px;
  border-radius: 9999px;
  box-shadow: var(--shadow-sm);
  font-size: 1rem;
  transition: all 0.2s ease;
  max-width: 420px;
  box-sizing: border-box;
  flex-shrink: 0;
}

.facility-switcher-container:hover {
  border-color: var(--color-primary);
  background: var(--bg-card-hover);
  box-shadow: 0 2px 10px rgba(168, 85, 247, 0.2);
  transform: translateY(-1px);
}

/* Facility Logo Wrapper (Removed from top dropdown per user request - too small to see) */
.facility-header-logo-wrapper {
  display: none !important;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(148, 163, 184, 0.35);
  padding: 3px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.facility-header-logo-wrapper:hover {
  transform: scale(1.06);
  border-color: var(--color-primary);
}

.facility-header-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Icon to the left removed per user request */
.facility-icon {
  display: none !important;
  font-size: 1.35rem;
  line-height: 1;
  align-items: center;
  justify-content: center;
  margin-left: 0.2rem;
  width: 0;
  height: 0;
}

/* Facility Select Capsule */
.facility-select-capsule {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  position: relative;
  min-width: 0;
  flex: 1;
}

.facility-company-pill {
  display: none !important; /* Conceal redundant company pill in header capsule per user directive */
}

/* Facility Dropdown - Larger sizing and larger, crisp, highly readable text */
.facility-select {
  background: transparent;
  border: none;
  color: var(--text-main, #ffffff);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  outline: none;
  padding: 0 2.2rem 0 0.15rem;
  height: 36px;
  line-height: 36px;
  appearance: none;
  -webkit-appearance: none;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 360px;
  min-width: 160px;
  box-sizing: border-box;
}

.facility-select option {
  background: #0f172a;
  color: #f8fafc;
  padding: 8px 14px;
  font-weight: 600;
  font-size: 0.95rem;
}

.facility-select-chevron {
  position: absolute;
  right: 0.25rem;
  pointer-events: none;
  color: var(--text-muted, rgba(148, 163, 184, 0.85));
  display: flex;
  align-items: center;
  transition: color 0.2s ease;
}

.facility-switcher-container:hover .facility-select-chevron {
  color: var(--color-primary, #38bdf8);
}

/* Company Tag Badge inside Tables */
.company-sub-tag {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.3);
  margin-right: 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

[data-theme="light"] .company-sub-tag,
html.light .company-sub-tag,
html:not(.dark) .company-sub-tag {
  background: #f3e8ff;
  border: 1px solid #d8b4fe;
  color: #6b21a8;
}

.logo-cell-thumbnail {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(148, 163, 184, 0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 3px;
  box-sizing: border-box;
  vertical-align: middle;
}

img.logo-cell-thumbnail {
  object-fit: contain;
  display: inline-block;
}

.logo-cell-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Role Badges */
.role-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.role-badge-platform-owner {
  background: linear-gradient(135deg, #a855f7, #ec4899);
  color: #ffffff;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.4);
}

.role-badge-user-admin {
  background: #3b82f6;
  color: #ffffff;
}

.role-badge-full-admin {
  background: #10b981;
  color: #ffffff;
}

.role-badge-planner {
  background: #f59e0b;
  color: #111827;
}

.role-badge-viewer,
.role-badge-contributor {
  background: #64748b;
  color: #ffffff;
}

/* User Account & Avatar Widget */
.header-user-widget {
  position: relative;
  display: flex;
  align-items: center;
}

.user-profile-btn {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  padding: 0 0.85rem 0 0.28rem;
  height: 38px;
  border-radius: 9999px;
  cursor: pointer;
  color: var(--text-main);
  box-shadow: var(--shadow-sm);
  transition: all 0.2s ease;
  box-sizing: border-box;
  white-space: nowrap;
  flex-shrink: 0;
}

.user-profile-btn:hover {
  border-color: var(--color-primary);
  background: var(--bg-card-hover);
  box-shadow: 0 2px 10px rgba(168, 85, 247, 0.2);
  transform: translateY(-1px);
}

.user-avatar-circle {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: #ffffff;
  font-weight: 700;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}

.user-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-name-label {
  font-size: 0.92rem;
  font-weight: 600;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-main);
}

/* User Dropdown Menu */
.user-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: max-content;
  min-width: 340px;
  max-width: min(440px, calc(100vw - 24px));
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 0.6rem;
  z-index: 1000;
  display: none;
  animation: fadeInDown 0.15s ease-out forwards;
  box-sizing: border-box;
}

.user-dropdown-menu.active {
  display: block;
}

.user-dropdown-header {
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 0.4rem;
}

.user-dropdown-name {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text-main);
  white-space: nowrap;
}

.user-dropdown-email {
  font-size: 0.78rem;
  color: var(--text-muted);
  white-space: nowrap;
  word-break: normal;
}

.user-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.75rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-main);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.12s ease;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  white-space: nowrap;
  box-sizing: border-box;
}

.user-dropdown-item:hover {
  background: var(--bg-card-hover);
  color: var(--color-primary);
}

.user-dropdown-item.danger:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.user-dropdown-divider {
  height: 1px;
  background: var(--border-color);
  margin: 0.35rem 0;
}

/* User Dropdown Menu Light Mode */
[data-theme="light"] .user-dropdown-menu,
html.light .user-dropdown-menu,
html:not(.dark) .user-dropdown-menu {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.15), 0 8px 10px -6px rgba(15, 23, 42, 0.1) !important;
  color: #0f172a !important;
}

[data-theme="light"] .user-dropdown-header,
html.light .user-dropdown-header,
html:not(.dark) .user-dropdown-header {
  border-bottom: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .user-dropdown-name,
html.light .user-dropdown-name,
html:not(.dark) .user-dropdown-name {
  color: #0f172a !important;
}

[data-theme="light"] .user-dropdown-email,
html.light .user-dropdown-email,
html:not(.dark) .user-dropdown-email {
  color: #64748b !important;
}

[data-theme="light"] .user-dropdown-item,
html.light .user-dropdown-item,
html:not(.dark) .user-dropdown-item {
  color: #334155 !important;
}

[data-theme="light"] .user-dropdown-item:hover,
html.light .user-dropdown-item:hover,
html:not(.dark) .user-dropdown-item:hover {
  background: #f1f5f9 !important;
  color: #9333ea !important;
}

[data-theme="light"] .user-dropdown-item.danger:hover,
html.light .user-dropdown-item.danger:hover,
html:not(.dark) .user-dropdown-item.danger:hover {
  background: #fee2e2 !important;
  color: #dc2626 !important;
}

[data-theme="light"] .user-dropdown-divider,
html.light .user-dropdown-divider,
html:not(.dark) .user-dropdown-divider {
  background: #e2e8f0 !important;
}

/* Viewer Read-Only Banner & Restrictions */
.viewer-banner {
  background: linear-gradient(135deg, rgba(100, 116, 139, 0.2), rgba(71, 85, 105, 0.25));
  border: 1px solid #475569;
  border-radius: var(--radius-sm);
  padding: 0.5rem 1rem;
  margin: 0.75rem 1.25rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #cbd5e1;
  font-size: 0.85rem;
}

body.role-viewer .action-require-edit,
body.role-contributor .action-require-edit {
  display: none !important;
}

body.role-viewer .action-disable-viewer,
body.role-contributor .action-disable-viewer {
  opacity: 0.45 !important;
  pointer-events: none !important;
  cursor: not-allowed !important;
}

/* Modal Tabs Navigation */
.modal-tabs {
  display: flex;
  gap: 0.5rem;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 1.25rem;
  padding-bottom: 0.25rem;
}

.modal-tab-btn {
  background: transparent;
  border: none;
  padding: 0.45rem 0.9rem;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  border-bottom: 2px solid transparent;
  transition: all 0.15s ease;
}

.modal-tab-btn:hover {
  color: var(--text-main);
}

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

/* MFA Card & QR Presentation */
.mfa-box {
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  margin: 1rem 0;
  text-align: center;
}

.mfa-qr-frame {
  background: #ffffff;
  padding: 12px;
  border-radius: var(--radius-sm);
  display: inline-block;
  margin: 0.75rem 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.mfa-qr-frame img {
  display: block;
  width: 180px;
  height: 180px;
}

.mfa-secret-copy-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0.5rem 0;
}

.mfa-secret-code {
  font-family: var(--font-mono);
  background: var(--bg-app);
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  font-size: 0.9rem;
  color: var(--color-primary);
  border: 1px dashed var(--border-color);
}

.mfa-code-input {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  letter-spacing: 0.4em;
  text-align: center;
  font-weight: 800;
  padding: 0.5rem;
  width: 220px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--color-primary);
  background: var(--bg-input);
  color: var(--text-main);
  margin: 0.5rem auto;
  display: block;
}

/* Enforce MFA Warning Banner */
.mfa-enforce-callout {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.12), rgba(245, 158, 11, 0.12));
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  margin-bottom: 1rem;
}

/* Admin Tables & Platform Owner Modal Enhancements */
.platform-owner-modal {
  max-width: min(1860px, 98vw) !important;
  width: 98vw !important;
  height: 94vh !important;
  max-height: 96vh !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.75) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.platform-owner-modal.modal-fullscreen,
.modal-overlay .modal-content.modal-fullscreen,
.modal-overlay .modal-card.modal-fullscreen,
.modal-content.modal-fullscreen,
.modal-card.modal-fullscreen,
.timeline-load-modal-card.modal-fullscreen,
#editUserModal .modal-content.modal-fullscreen,
#facilityAdminModal .modal-content.modal-fullscreen,
#platformAdminModal .modal-content.modal-fullscreen,
#editFacilityModal .modal-content.modal-fullscreen,
#editCompanyModal .modal-content.modal-fullscreen,
#editModuleModal .modal-content.modal-fullscreen,
#marksScheduleModal .modal-content.modal-fullscreen,
#paintSpecsModal .modal-content.modal-fullscreen,
#allocationWorkbenchModal .modal-content.modal-fullscreen,
#autoAllocateModal .modal-content.modal-fullscreen,
#shopFloorPdfModal .modal-content.modal-fullscreen,
#addPieceModal .modal-content.modal-fullscreen,
#addContractModal .modal-content.modal-fullscreen,
#editContractModal .modal-content.modal-fullscreen,
#editProductModal .modal-content.modal-fullscreen,
#addProductModal .modal-content.modal-fullscreen,
#addCoatModal .modal-content.modal-fullscreen,
#specModal .modal-content.modal-fullscreen,
#editCoatModal .modal-content.modal-fullscreen,
#importPiecesModal .modal-content.modal-fullscreen,
#editLineModal .modal-content.modal-fullscreen,
#addLineModal .modal-content.modal-fullscreen,
#rolloverModal .modal-content.modal-fullscreen,
#authModal .modal-card.modal-fullscreen,
#forgotPasswordModal .modal-card.modal-fullscreen,
#resetPasswordModal .modal-card.modal-fullscreen,
#acceptInviteModal .modal-card.modal-fullscreen,
#myAccountModal .modal-content.modal-fullscreen,
#facilityMfaEnforceModal .modal-card.modal-fullscreen,
#facMemberInviteModal .modal-content.modal-fullscreen,
#auditDiffModal .modal-content.modal-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  border-radius: 0 !important;
  margin: 0 !important;
  border: none !important;
  z-index: 100000 !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: none !important;
}

#facilityAdminModal .modal-content {
  max-width: min(1860px, 98vw) !important;
  width: 98vw !important;
  height: 94vh !important;
  max-height: 96vh !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-fullscreen > form {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.modal-fullscreen .modal-header {
  flex-shrink: 0 !important;
}

.modal-fullscreen .modal-footer {
  flex-shrink: 0 !important;
}

.modal-fullscreen > .modal-body,
.modal-fullscreen > form > .modal-body,
.timeline-load-modal-card.modal-fullscreen .timeline-load-modal-body {
  flex: 1 1 auto !important;
  max-height: calc(100vh - 110px) !important;
  overflow-y: auto !important;
}

.platform-owner-modal .modal-header {
  flex-shrink: 0;
  padding: 1.1rem 1.75rem;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-card);
  user-select: none;
}

.platform-owner-modal .modal-body {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.75rem;
  min-height: 0;
  gap: 0.85rem;
}

/* Modal Maximize Button */
.modal-maximize-btn {
  color: var(--text-muted);
  border-color: var(--border-color);
  background: var(--bg-card-subtle);
  transition: all 0.15s ease;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  font-size: 0.78rem;
  border-radius: var(--radius-sm, 6px);
  user-select: none;
}

.modal-maximize-btn:hover {
  color: var(--text-main);
  background: var(--bg-card-hover);
  border-color: var(--color-primary);
}

.modal-maximize-btn .modal-maximize-icon {
  font-size: 0.92rem;
  line-height: 1;
}

.modal-maximize-btn .modal-maximize-text {
  font-size: 0.78rem;
  letter-spacing: 0.01em;
}

.platform-pane-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.platform-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  margin-bottom: 0.75rem;
  flex-shrink: 0;
}

/* Platform Users Two-Tier Toolbar */
.platform-users-toolbar {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0.85rem 1rem;
}

.platform-users-toolbar .toolbar-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  flex-wrap: wrap;
}

.platform-users-toolbar .toolbar-search-box {
  display: flex;
  align-items: center;
  position: relative;
  flex: 1 1 360px;
  max-width: 560px;
  min-width: 260px;
}

.platform-users-toolbar .toolbar-search-icon {
  position: absolute;
  left: 0.75rem;
  color: var(--text-muted);
  font-size: 0.85rem;
  pointer-events: none;
}

.platform-users-toolbar .toolbar-search-box .form-control {
  width: 100%;
  padding-left: 2.25rem;
  padding-right: 2.2rem;
  font-size: 0.82rem;
  height: 34px;
}

.platform-users-toolbar .toolbar-search-clear-btn {
  position: absolute;
  right: 0.5rem;
  display: none;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.8rem;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 50%;
  line-height: 1;
}

.platform-users-toolbar .toolbar-search-clear-btn:hover {
  color: var(--text-main);
  background: var(--bg-card-hover);
}

.platform-users-toolbar .toolbar-actions-group {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: nowrap;
}

.platform-users-toolbar .toolbar-filter-strip {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  flex-wrap: wrap;
  padding-top: 0.15rem;
}

.platform-users-toolbar .filter-strip-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: 0.2rem;
  flex-shrink: 0;
}

.platform-users-toolbar .filter-strip-item .form-control {
  width: 100%;
  height: 32px;
  font-size: 0.8rem;
  padding: 0 0.55rem;
}

/* User Action Menu Trigger Button */
.btn-user-action-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  font-size: 0.76rem;
  padding: 0.25rem 0.65rem;
  border-radius: 6px;
  white-space: nowrap;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.12s ease;
}

.btn-user-action-trigger:hover,
.btn-user-action-trigger.active {
  background: var(--bg-card-hover);
  border-color: var(--color-primary);
  color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

/* Floating Table Action Popover */
.table-row-action-popover {
  position: fixed;
  width: 240px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 30px -4px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.35);
  padding: 0.45rem;
  z-index: 100000;
  animation: fadeInDown 0.12s ease-out forwards;
}

.table-row-action-popover .popover-user-header {
  padding: 0.4rem 0.55rem 0.45rem;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 0.35rem;
}

.table-row-action-popover .popover-user-name {
  font-weight: 700;
  font-size: 0.84rem;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.table-row-action-popover .popover-user-email {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-family: var(--font-mono, monospace);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.table-row-action-popover .popover-menu-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.table-row-action-popover .action-popover-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.44rem 0.65rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-main);
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s ease, color 0.12s ease;
}

.table-row-action-popover .action-popover-item .action-icon {
  font-size: 0.9rem;
  width: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.table-row-action-popover .action-popover-item:hover:not(:disabled) {
  background: var(--bg-card-hover);
  color: var(--color-primary);
}

.table-row-action-popover .action-popover-item.warning:hover:not(:disabled) {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
}

.table-row-action-popover .action-popover-item.success:hover:not(:disabled) {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
}

.table-row-action-popover .action-popover-item.danger:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.table-row-action-popover .action-popover-item:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.table-row-action-popover .action-popover-divider {
  height: 1px;
  background: var(--border-color);
  margin: 0.3rem 0;
}

.platform-table-container {
  flex: 1 1 0%;
  min-height: 0;
  overflow-y: auto !important;
  overflow-x: auto !important;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  position: relative;
  overscroll-behavior: contain;
}

.platform-pagination-bar {
  flex-shrink: 0;
}

.platform-table-container .admin-table {
  margin-top: 0;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.platform-table-container .admin-table th {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg-surface-elevated);
  border-bottom: 2px solid var(--border-color);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
  white-space: nowrap;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
  margin-top: 0.75rem;
}

.admin-table th {
  background: var(--bg-card-subtle);
  color: var(--text-muted);
  text-align: left;
  padding: 0.75rem 0.95rem;
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border-color);
}

.admin-table td {
  padding: 0.68rem 0.95rem;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-main);
  vertical-align: middle;
  line-height: 1.4;
}

.admin-table tr:hover td {
  background: var(--bg-card-hover);
}

/* Access Log specific row styling */
.access-log-row {
  cursor: default;
  transition: background 0.12s ease;
}

.access-log-row:hover td {
  background: rgba(99, 102, 241, 0.08) !important;
}

.access-log-clickable-cell {
  cursor: pointer;
  transition: color 0.12s ease, text-decoration 0.12s ease;
}

.access-log-clickable-cell:hover {
  color: var(--color-primary) !important;
  text-decoration: underline;
}

/* Platform Admin Modals & Tables Light Mode */
[data-theme="light"] .platform-owner-modal,
html.light .platform-owner-modal,
html:not(.dark) .platform-owner-modal {
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.2) !important;
}

[data-theme="light"] .platform-owner-modal .modal-header,
html.light .platform-owner-modal .modal-header,
html:not(.dark) .platform-owner-modal .modal-header {
  background: #ffffff !important;
  border-bottom-color: #cbd5e1 !important;
}

[data-theme="light"] .platform-toolbar,
html.light .platform-toolbar,
html:not(.dark) .platform-toolbar {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
}

[data-theme="light"] .platform-table-container,
html.light .platform-table-container,
html:not(.dark) .platform-table-container {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
}

[data-theme="light"] .platform-table-container .admin-table th,
html.light .platform-table-container .admin-table th,
html:not(.dark) .platform-table-container .admin-table th {
  background: #f8fafc !important;
  border-bottom: 2px solid #cbd5e1 !important;
  color: #475569 !important;
}

[data-theme="light"] .admin-table th,
html.light .admin-table th,
html:not(.dark) .admin-table th {
  background: #f8fafc !important;
  color: #475569 !important;
  border-bottom: 1px solid #cbd5e1 !important;
}

[data-theme="light"] .admin-table td,
html.light .admin-table td,
html:not(.dark) .admin-table td {
  border-bottom: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
}

[data-theme="light"] .admin-table tr:hover td,
html.light .admin-table tr:hover td,
html:not(.dark) .admin-table tr:hover td {
  background: #f8fafc !important;
}

[data-theme="light"] .platform-users-toolbar,
html.light .platform-users-toolbar,
html:not(.dark) .platform-users-toolbar {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
}

[data-theme="light"] .platform-users-toolbar .toolbar-search-box .form-control,
[data-theme="light"] .platform-users-toolbar .filter-strip-item .form-control,
html.light .platform-users-toolbar .toolbar-search-box .form-control,
html.light .platform-users-toolbar .filter-strip-item .form-control,
html:not(.dark) .platform-users-toolbar .toolbar-search-box .form-control,
html:not(.dark) .platform-users-toolbar .filter-strip-item .form-control {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

[data-theme="light"] .platform-users-toolbar .filter-strip-label,
html.light .platform-users-toolbar .filter-strip-label,
html:not(.dark) .platform-users-toolbar .filter-strip-label {
  color: #475569 !important;
}

[data-theme="light"] .btn-user-action-trigger,
html.light .btn-user-action-trigger,
html:not(.dark) .btn-user-action-trigger {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #1e293b !important;
}

[data-theme="light"] .btn-user-action-trigger:hover,
[data-theme="light"] .btn-user-action-trigger.active,
html.light .btn-user-action-trigger:hover,
html.light .btn-user-action-trigger.active,
html:not(.dark) .btn-user-action-trigger:hover,
html:not(.dark) .btn-user-action-trigger.active {
  background: #f1f5f9 !important;
  border-color: #2563eb !important;
  color: #2563eb !important;
}

[data-theme="light"] .table-row-action-popover,
html.light .table-row-action-popover,
html:not(.dark) .table-row-action-popover {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 12px 30px -4px rgba(15, 23, 42, 0.18), 0 4px 10px rgba(15, 23, 42, 0.08) !important;
  color: #0f172a !important;
}

[data-theme="light"] .table-row-action-popover .popover-user-name,
html.light .table-row-action-popover .popover-user-name,
html:not(.dark) .table-row-action-popover .popover-user-name {
  color: #0f172a !important;
}

[data-theme="light"] .table-row-action-popover .popover-user-email,
html.light .table-row-action-popover .popover-user-email,
html:not(.dark) .table-row-action-popover .popover-user-email {
  color: #64748b !important;
}

[data-theme="light"] .table-row-action-popover .popover-user-header,
[data-theme="light"] .table-row-action-popover .action-popover-divider,
html.light .table-row-action-popover .popover-user-header,
html.light .table-row-action-popover .action-popover-divider,
html:not(.dark) .table-row-action-popover .popover-user-header,
html:not(.dark) .table-row-action-popover .action-popover-divider {
  border-color: #e2e8f0 !important;
  background: #e2e8f0 !important;
}

[data-theme="light"] .table-row-action-popover .action-popover-item,
html.light .table-row-action-popover .action-popover-item,
html:not(.dark) .table-row-action-popover .action-popover-item {
  color: #1e293b !important;
}

[data-theme="light"] .table-row-action-popover .action-popover-item:hover:not(:disabled),
html.light .table-row-action-popover .action-popover-item:hover:not(:disabled),
html:not(.dark) .table-row-action-popover .action-popover-item:hover:not(:disabled) {
  background: #f1f5f9 !important;
  color: #2563eb !important;
}

[data-theme="light"] .table-row-action-popover .action-popover-item.danger:hover:not(:disabled),
html.light .table-row-action-popover .action-popover-item.danger:hover:not(:disabled),
html:not(.dark) .table-row-action-popover .action-popover-item.danger:hover:not(:disabled) {
  background: #fef2f2 !important;
  color: #dc2626 !important;
}

.btn-icon-tiny {
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  padding: 2px 5px;
  font-size: 0.78rem;
  opacity: 0.7;
  border-radius: 4px;
  transition: all 0.15s ease;
  color: var(--text-muted);
}
.btn-icon-tiny:hover {
  opacity: 1;
  background: var(--bg-card-hover);
  border-color: var(--border-color);
  color: var(--text-main);
}

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

/* ==========================================================================
   COATLOGIC FULL-SCREEN AUTH GATE & INDUSTRIAL CAD BLUEPRINT
   Enforces complete data gating until authenticated; persists session on refresh
   ========================================================================== */

/* By default, appContainer is strictly hidden until authentication is verified */
#appContainer {
  display: none;
}

html.is-authenticated #appContainer {
  display: block;
}

/* Auth Gate is displayed until authentication is confirmed */
#authGate {
  display: flex;
}

html.is-authenticated #authGate {
  display: none !important;
}

.auth-gate-screen {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background-color: #090c14;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  overflow-y: auto;
  min-height: 100vh;
  padding: 2rem 1.5rem 1.5rem 1.5rem;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* CAD Blueprint & Ambient Glow Tokens (Dark Mode Default) */
  --cad-grid-stroke: rgba(255, 255, 255, 0.035);
  --cad-line-slate: rgba(148, 163, 184, 0.11);
  --cad-line-slate-strong: rgba(148, 163, 184, 0.15);
  --cad-line-cyan: rgba(56, 189, 248, 0.13);
  --cad-line-purple: rgba(168, 85, 247, 0.12);
  --cad-line-pink: rgba(236, 72, 153, 0.11);
  --cad-glow-left-1: #9333ea;
  --cad-glow-left-1-opacity: 0.16;
  --cad-glow-left-2: #ec4899;
  --cad-glow-left-2-opacity: 0.07;
  --cad-glow-right-1: #7c3aed;
  --cad-glow-right-1-opacity: 0.14;
  --cad-glow-fade: #090c14;
}

/* CAD Architectural Background Overlay */
.auth-gate-bg {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  min-width: 100%;
  min-height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
  background-image:
    linear-gradient(to right, var(--cad-grid-stroke) 1px, transparent 1px),
    linear-gradient(to bottom, var(--cad-grid-stroke) 1px, transparent 1px),
    radial-gradient(circle at 28% 45%, rgba(147, 51, 234, 0.12) 0%, rgba(236, 72, 153, 0.05) 35%, transparent 68%),
    radial-gradient(circle at 75% 50%, rgba(124, 58, 237, 0.10) 0%, transparent 65%);
  background-size: 48px 48px, 48px 48px, 100% 100%, 100% 100%;
}

.auth-cad-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 100vw;
  min-height: 100vh;
  display: block;
  opacity: 0.95;
}

/* Flex Container for Left Brand + Right Form Card */
.auth-gate-container {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5.5rem;
  max-width: 1100px;
  width: 100%;
  margin: auto;
}

@media (max-width: 960px) {
  .auth-gate-container {
    flex-direction: column;
    gap: 2.75rem;
    padding: 1.5rem 0;
  }
}

/* Auth Gate Bottom Legal Footer */
.auth-gate-footer {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding-top: 1.5rem;
  padding-bottom: 0.25rem;
  text-align: center;
  max-width: 960px;
  width: 100%;
  box-sizing: border-box;
}

.auth-footer-text {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.55;
  color: #64748b;
  letter-spacing: 0.015em;
  font-weight: 400;
  text-align: center;
}

@media (max-width: 640px) {
  .auth-gate-footer {
    padding-top: 1rem;
    padding-bottom: 0.5rem;
  }
  .auth-footer-text {
    font-size: 0.7rem;
    line-height: 1.45;
  }
}

/* Left Hero Brand Column */
.auth-hero-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 440px;
}

.auth-emblem-wrap {
  position: relative;
  margin-bottom: 1.25rem;
}

.auth-hero-emblem {
  width: 220px;
  max-width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 25px rgba(236, 72, 153, 0.32));
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.auth-hero-emblem:hover {
  transform: scale(1.03);
}

.auth-hero-title {
  font-size: 3.25rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #ffffff;
  margin: 0.75rem 0 0.25rem 0;
  line-height: 1.1;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.auth-hero-subtitle {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #94a3b8;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}

.auth-hero-tagline {
  font-size: 1.05rem;
  line-height: 1.5;
  color: #94a3b8;
  margin: 0;
  font-weight: 450;
  max-width: 380px;
}

/* Right Form Card Column */
.auth-card-col {
  width: 100%;
  max-width: 440px;
}

.auth-card {
  background: rgba(18, 23, 34, 0.88);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.75), 0 0 45px rgba(124, 58, 237, 0.12);
  padding: 2.75rem 2.5rem;
  box-sizing: border-box;
  transition: all 0.3s ease;
}

@media (max-width: 480px) {
  .auth-card {
    padding: 2rem 1.5rem;
    border-radius: 16px;
  }
  .auth-hero-title {
    font-size: 2.5rem;
  }
  .auth-hero-emblem {
    width: 170px;
  }
}

.auth-card-title {
  font-size: 1.85rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 1.75rem 0;
  letter-spacing: -0.01em;
}

/* Emergency Kill-Switch Lockdown Banner */
.auth-lockdown-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: rgba(220, 38, 38, 0.16);
  border: 1px solid rgba(239, 68, 68, 0.6);
  box-shadow: 0 4px 18px rgba(220, 38, 38, 0.28);
  border-radius: 12px;
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.4rem;
  animation: authLockdownPulse 2.2s infinite ease-in-out;
}

@keyframes authLockdownPulse {
  0%, 100% {
    border-color: rgba(239, 68, 68, 0.6);
    box-shadow: 0 4px 18px rgba(220, 38, 38, 0.28);
  }
  50% {
    border-color: rgba(239, 68, 68, 0.95);
    box-shadow: 0 6px 24px rgba(239, 68, 68, 0.55);
  }
}

.auth-lockdown-icon {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 1px;
}

.auth-lockdown-content {
  flex: 1;
  min-width: 0;
}

.auth-lockdown-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #f87171;
  letter-spacing: 0.02em;
  margin-bottom: 0.25rem;
  line-height: 1.3;
}

.auth-lockdown-desc {
  font-size: 0.8rem;
  color: #fca5a5;
  line-height: 1.45;
}

.auth-field-group {
  margin-bottom: 1.25rem;
}

.auth-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  color: #94a3b8;
  margin-bottom: 0.5rem;
}

.auth-input {
  width: 100%;
  background: #0b0e17;
  border: 1px solid rgba(124, 58, 237, 0.45);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  font-size: 0.95rem;
  color: #ffffff;
  outline: none;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.auth-input:focus {
  border-color: #a855f7;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.25);
}

.auth-input::placeholder {
  color: #475569;
}

.auth-password-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.auth-password-wrapper .auth-input {
  padding-right: 2.75rem;
}

.auth-password-toggle {
  position: absolute;
  right: 0.75rem;
  background: transparent;
  border: none;
  color: #64748b;
  cursor: pointer;
  padding: 0.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: color 0.15s ease;
}

.auth-password-toggle:hover {
  color: #cbd5e1;
}

/* Quick Seed Demo Helper Pill */
.auth-demo-hint {
  background: rgba(124, 58, 237, 0.12);
  border: 1px dashed rgba(168, 85, 247, 0.4);
  border-radius: 8px;
  padding: 0.6rem 0.85rem;
  margin-bottom: 1.5rem;
  font-size: 0.78rem;
  color: #cbd5e1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.auth-demo-hint:hover {
  background: rgba(124, 58, 237, 0.2);
  border-color: rgba(168, 85, 247, 0.7);
  color: #ffffff;
}

.auth-demo-badge {
  background: linear-gradient(135deg, #7c3aed, #ec4899);
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* Log in Gradient Button */
.auth-btn-gradient {
  width: 100%;
  height: 48px;
  background: linear-gradient(90deg, #7c3aed 0%, #c026d3 50%, #ec4899 100%);
  border: none;
  border-radius: 10px;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 25px rgba(236, 72, 153, 0.32);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.2s ease;
}

.auth-btn-gradient:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(236, 72, 153, 0.42);
}

.auth-btn-gradient:active {
  transform: translateY(0);
}

.auth-btn-gradient:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.auth-card-footer {
  text-align: center;
  margin-top: 1.5rem;
}

.auth-forgot-link {
  color: #94a3b8;
  font-size: 0.85rem;
  text-decoration: none;
  transition: color 0.15s ease;
}

.auth-forgot-link:hover {
  color: #c084fc;
  text-decoration: underline;
}

/* MFA PIN Input */
.auth-pin-input {
  font-family: var(--font-mono, monospace);
  font-size: 2rem;
  letter-spacing: 0.45em;
  text-align: center;
  font-weight: 800;
  padding: 0.75rem 1rem;
  width: 240px;
  border-radius: 12px;
  border: 2px solid #7c3aed;
  background: #0b0e17;
  color: #ffffff;
  margin: 0.75rem auto;
  display: block;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2);
  outline: none;
  box-sizing: border-box;
}

.auth-pin-input:focus {
  border-color: #ec4899;
  box-shadow: 0 0 0 4px rgba(236, 72, 153, 0.3);
}

/* User, Facility, Company & Module Edit Modals */
#editUserModal,
#editFacilityModal,
#editCompanyModal,
#editModuleModal {
  z-index: 10050 !important;
}

#editUserModal .modal-content {
  max-width: min(1140px, 95vw) !important;
  width: 95vw !important;
  max-height: 90vh !important;
  border-radius: 14px !important;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.75);
  overscroll-behavior: contain;
}

#editUserBannerStatusBadge,
#editUserBannerName,
#editUserBannerEmail {
  display: none !important;
}

.edit-user-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg, 12px);
  padding: 0.95rem 1.15rem;
  min-width: 0;
  box-sizing: border-box;
}

.edit-user-grid-container {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 0.9rem;
  align-items: start;
  width: 100%;
  box-sizing: border-box;
}

.edit-user-grid-container > * {
  min-width: 0;
  box-sizing: border-box;
}

@media (max-width: 960px) {
  .edit-user-grid-container {
    grid-template-columns: 1fr;
  }
}

.edit-user-assign-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  align-items: flex-end;
  width: 100%;
  box-sizing: border-box;
}

.edit-user-assign-grid > * {
  min-width: 0;
  box-sizing: border-box;
}

@media (max-width: 480px) {
  .edit-user-assign-grid {
    grid-template-columns: 1fr;
  }
}

.edit-user-security-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
  width: 100%;
  box-sizing: border-box;
}

.edit-user-security-grid > * {
  min-width: 0;
  box-sizing: border-box;
}

#editFacilityModal .modal-content {
  max-width: 896px !important;
  width: 92vw !important;
  max-height: 88vh !important;
  border-radius: 14px !important;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.75);
}

#editCompanyModal .modal-content {
  max-width: 896px !important;
  width: 92vw !important;
  max-height: 88vh !important;
  border-radius: 14px !important;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.75);
}

#editFacilityModal .modal-body,
#editCompanyModal .modal-body {
  padding: 1.25rem 1.75rem;
  gap: 1.25rem;
}

#editFacilityModal .modal-header,
#editCompanyModal .modal-header {
  padding: 1.1rem 1.75rem;
}

#editFacilityModal .modal-footer,
#editCompanyModal .modal-footer {
  padding: 1rem 1.75rem;
}

#platformAdminModal .form-control:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
#editUserModal .form-control:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
#editFacilityModal .form-control:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
#editCompanyModal .form-control:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
#createCompanyModal .form-control:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
#appointAdminModal .form-control:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
#tenantOnboardingWizardModal .form-control:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
#editModuleModal .form-control:not([type="checkbox"]):not([type="radio"]):not([type="color"]) {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.75rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.edit-company-suite-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 1.25rem;
  align-items: start;
}

@media (max-width: 980px) {
  .edit-company-suite-grid {
    grid-template-columns: 1fr;
  }
}

#platformAdminModal .form-control:focus,
#editUserModal .form-control:focus,
#editFacilityModal .form-control:focus,
#editCompanyModal .form-control:focus,
#createCompanyModal .form-control:focus,
#appointAdminModal .form-control:focus,
#tenantOnboardingWizardModal .form-control:focus,
#editModuleModal .form-control:focus {
  border-color: var(--accent-primary, #3b82f6);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
  outline: none;
}

/* Edit User Modal - Account Status Segmented Control */
.edit-user-status-segmented {
  display: inline-flex;
  align-items: center;
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 2px;
  gap: 2px;
}

.edit-user-status-segmented .status-segment-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 3px 10px;
  border-radius: 16px;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  color: var(--text-muted);
  margin: 0;
  user-select: none;
  border: 1px solid transparent;
}

.edit-user-status-segmented .status-segment-label input[type="radio"] {
  display: none;
}

.edit-user-status-segmented .status-segment-label:hover {
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.05);
}

.edit-user-status-segmented .status-segment-label.status-active-selected,
.edit-user-status-segmented .status-segment-label:has(#editUserStatusActive:checked) {
  background: rgba(16, 185, 129, 0.18);
  color: #10b981;
  border-color: rgba(16, 185, 129, 0.45);
}

.edit-user-status-segmented .status-segment-label.status-deactivated-selected,
.edit-user-status-segmented .status-segment-label:has(#editUserStatusDeactivated:checked) {
  background: rgba(239, 68, 68, 0.18);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.45);
}

[data-theme="light"] .edit-user-status-segmented,
html.light .edit-user-status-segmented,
html:not(.dark) .edit-user-status-segmented {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

[data-theme="light"] .edit-user-status-segmented .status-segment-label.status-active-selected,
[data-theme="light"] .edit-user-status-segmented .status-segment-label:has(#editUserStatusActive:checked),
html.light .edit-user-status-segmented .status-segment-label.status-active-selected,
html:not(.dark) .edit-user-status-segmented .status-segment-label.status-active-selected {
  background: #ecfdf5;
  color: #047857;
  border-color: #10b981;
}

[data-theme="light"] .edit-user-status-segmented .status-segment-label.status-deactivated-selected,
[data-theme="light"] .edit-user-status-segmented .status-segment-label:has(#editUserStatusDeactivated:checked),
html.light .edit-user-status-segmented .status-segment-label.status-deactivated-selected,
html:not(.dark) .edit-user-status-segmented .status-segment-label.status-deactivated-selected {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #ef4444;
}

/* Edit User Modal - Action Buttons */
#btnEditUserResetMfa:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: #ef4444 !important;
  color: #f87171 !important;
}

#editUserSendResetBtn:hover:not(:disabled) {
  background: rgba(59, 130, 246, 0.15) !important;
  border-color: #3b82f6 !important;
  color: #60a5fa !important;
}

/* Modal Logo Manager & Spacious Preview Box */
.modal-logo-manager-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 1.25rem;
  align-items: flex-start;
}

@media (max-width: 640px) {
  .modal-logo-manager-grid {
    grid-template-columns: 1fr;
  }
}

.modal-logo-preview-box {
  width: 240px;
  height: 96px;
  min-width: 240px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  background-color: #0f172a;
  background-image: linear-gradient(45deg, #1e293b 25%, transparent 25%),
                    linear-gradient(-45deg, #1e293b 25%, transparent 25%),
                    linear-gradient(45deg, transparent 75%, #1e293b 75%),
                    linear-gradient(-45deg, transparent 75%, #1e293b 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.25);
}

.modal-logo-preview-box:hover {
  border-color: var(--color-primary);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.25), 0 0 12px rgba(56, 189, 248, 0.15);
}

.modal-logo-preview-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
  box-sizing: border-box;
}

/* Light Mode Overrides for Edit Modals & Preview */
[data-theme="light"] #editFacilityModal .modal-content,
[data-theme="light"] #editCompanyModal .modal-content,
[data-theme="light"] #editUserModal .modal-content,
[data-theme="light"] #editModuleModal .modal-content,
html.light #editFacilityModal .modal-content,
html.light #editCompanyModal .modal-content,
html.light #editUserModal .modal-content,
html.light #editModuleModal .modal-content,
html:not(.dark) #editFacilityModal .modal-content,
html:not(.dark) #editCompanyModal .modal-content,
html:not(.dark) #editUserModal .modal-content,
html:not(.dark) #editModuleModal .modal-content {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.25);
}

[data-theme="light"] .modal-logo-preview-box,
html.light .modal-logo-preview-box,
html:not(.dark) .modal-logo-preview-box {
  background-color: #f8fafc;
  background-image: linear-gradient(45deg, #e2e8f0 25%, transparent 25%),
                    linear-gradient(-45deg, #e2e8f0 25%, transparent 25%),
                    linear-gradient(45deg, transparent 75%, #e2e8f0 75%),
                    linear-gradient(-45deg, transparent 75%, #e2e8f0 75%);
  border-color: #cbd5e1;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* ============================================================
   FACILITY BRANDING & LOGO MANAGER (ADMIN PANE)
   ============================================================ */
.facility-branding-manager-card {
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0.85rem 1.15rem;
  max-width: min(1040px, 100%);
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.branding-header-preview-bar {
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.branding-header-preview-bar.dark-theme {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 0.88)) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

.branding-header-preview-bar.dark-theme .facility-switcher-container {
  background: rgba(30, 41, 59, 0.9) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

.branding-header-preview-bar.dark-theme .facility-header-logo-wrapper {
  background: rgba(15, 23, 42, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}

.branding-header-preview-bar.dark-theme .facility-select-chevron {
  color: #94a3b8 !important;
}

.branding-header-preview-bar.dark-theme #facLogoLiveBrandTitle,
.branding-header-preview-bar.dark-theme #facLogoLiveFacilityName {
  color: #f8fafc !important;
}

.branding-header-preview-bar.light-theme {
  background: linear-gradient(180deg, #ffffff, #f1f5f9) !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08) !important;
}

.branding-header-preview-bar.light-theme .facility-switcher-container {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(241, 245, 249, 0.94)) !important;
  border-color: rgba(203, 213, 225, 0.9) !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08) !important;
}

.branding-header-preview-bar.light-theme .facility-header-logo-wrapper {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
}

.branding-header-preview-bar.light-theme #facLogoLiveBrandTitle,
.branding-header-preview-bar.light-theme #facLogoLiveFacilityName {
  color: #0f172a !important;
}

.branding-header-preview-bar.light-theme .facility-select-chevron {
  color: #64748b !important;
}

.branding-dropzone {
  background: var(--bg-card);
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-md);
  padding: 0.65rem 0.95rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: all 0.2s ease;
  min-height: 0 !important;
  box-sizing: border-box;
}

.branding-dropzone.dragover {
  border-color: var(--color-primary) !important;
  background: rgba(56, 189, 248, 0.08) !important;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.25) !important;
}

.branding-controls-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
  margin-bottom: 0.85rem;
  align-items: stretch;
}

@media (max-width: 780px) {
  .branding-controls-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }
}

/* User Profile Theme Preference Selection Cards */
.theme-option-card {
  cursor: pointer;
  padding: 0.9rem;
  border-radius: 8px;
  border: 2px solid transparent;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

.theme-option-card:hover {
  transform: translateY(-1px);
}

.theme-option-card.theme-card-dark {
  background: #0f1117;
  border-color: #282e42;
  color: #f1f5f9;
}

.theme-option-card.theme-card-light {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #0f172a;
}

.theme-option-card.theme-card-dark.active {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 1px #3b82f6, 0 4px 14px rgba(59, 130, 246, 0.3);
}

.theme-option-card.theme-card-light.active {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 1px #3b82f6, 0 4px 14px rgba(59, 130, 246, 0.3);
}

/* ==========================================================================
   Unified Account Settings & Security Modal Layout & Sections
   ========================================================================== */

#myAccountModal .account-unified-modal {
  max-width: min(1040px, 95vw);
  width: 95vw;
  height: 86vh;
  max-height: 860px;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius-lg, 14px);
  background: var(--bg-card, #131722);
  border: 1px solid var(--border-color, #282e42);
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

#myAccountModal .modal-header {
  padding: 1.15rem 1.5rem;
  border-bottom: 1px solid var(--border-color, #282e42);
  background: var(--bg-card, #131722);
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.account-unified-layout {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Left Sidebar */
.account-sidebar {
  width: 250px;
  min-width: 250px;
  background: var(--bg-card-subtle, #0d1017);
  border-right: 1px solid var(--border-color, #282e42);
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1rem;
  gap: 1.25rem;
  overflow-y: auto;
  flex-shrink: 0;
}

.account-sidebar-user-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 0.95rem;
  background: var(--bg-card, #131722);
  border: 1px solid var(--border-color, #282e42);
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.account-sidebar-avatar {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary, #3b82f6), #1d4ed8);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  border: 2px solid rgba(255, 255, 255, 0.2);
  overflow: hidden;
}

.account-sidebar-name {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--text-main, #f1f5f9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-sidebar-email {
  font-size: 0.72rem;
  color: var(--text-muted, #94a3b8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 0.1rem;
}

.account-nav-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.account-nav-btn {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted, #94a3b8);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: all 0.18s ease;
  width: 100%;
}

.account-nav-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-main, #f1f5f9);
}

.account-nav-btn.active {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.35);
  color: #3b82f6;
  font-weight: 600;
}

.account-nav-icon {
  font-size: 1rem;
  line-height: 1;
}

.account-nav-label {
  flex: 1;
}

/* Right Content Pane */
.account-content-pane {
  flex: 1;
  padding: 1.5rem;
  overflow-y: auto;
  scroll-behavior: smooth;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  background: var(--bg-main, #0b0e14);
}

/* Section Cards */
.account-section-card {
  background: var(--bg-card, #131722);
  border: 1px solid var(--border-color, #282e42);
  border-radius: 12px;
  padding: 1.35rem 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.account-section-card.section-glow-highlight {
  animation: sectionGlow 1.6s ease-out;
}

@keyframes sectionGlow {
  0% {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.35), 0 4px 16px rgba(59, 130, 246, 0.25);
  }
  100% {
    border-color: var(--border-color, #282e42);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }
}

.account-section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.15rem;
  gap: 0.75rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
}

.account-section-title-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.account-section-icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.account-section-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-main, #f1f5f9);
}

.account-section-desc {
  margin: 0.15rem 0 0 0;
  font-size: 0.74rem;
  color: var(--text-muted, #94a3b8);
}

/* Light Theme Inversion for Account Modal */
[data-theme="light"] #myAccountModal .account-unified-modal,
html:not(.dark) #myAccountModal .account-unified-modal {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
}

[data-theme="light"] #myAccountModal .modal-header,
html:not(.dark) #myAccountModal .modal-header {
  background: #ffffff;
  border-bottom-color: #e2e8f0;
}

[data-theme="light"] .account-sidebar,
html:not(.dark) .account-sidebar {
  background: #f8fafc;
  border-right-color: #e2e8f0;
}

[data-theme="light"] .account-sidebar-user-card,
html:not(.dark) .account-sidebar-user-card {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .account-sidebar-name,
html:not(.dark) .account-sidebar-name {
  color: #0f172a;
}

[data-theme="light"] .account-sidebar-email,
html:not(.dark) .account-sidebar-email {
  color: #64748b;
}

[data-theme="light"] .account-nav-btn,
html:not(.dark) .account-nav-btn {
  color: #475569;
}

[data-theme="light"] .account-nav-btn:hover,
html:not(.dark) .account-nav-btn:hover {
  background: #f1f5f9;
  color: #0f172a;
}

[data-theme="light"] .account-nav-btn.active,
html:not(.dark) .account-nav-btn.active {
  background: rgba(37, 99, 235, 0.1);
  border-color: rgba(37, 99, 235, 0.3);
  color: #2563eb;
}

[data-theme="light"] .account-content-pane,
html:not(.dark) .account-content-pane {
  background: #f1f5f9;
}

[data-theme="light"] .account-section-card,
html:not(.dark) .account-section-card {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}

[data-theme="light"] .account-section-header,
html:not(.dark) .account-section-header {
  border-bottom-color: #f1f5f9;
}

[data-theme="light"] .account-section-icon,
html:not(.dark) .account-section-icon {
  background: #f1f5f9;
}

[data-theme="light"] .account-section-title,
html:not(.dark) .account-section-title {
  color: #0f172a;
}

[data-theme="light"] .account-section-desc,
html:not(.dark) .account-section-desc {
  color: #64748b;
}

@media (max-width: 768px) {
  .account-unified-layout {
    flex-direction: column;
  }
  .account-sidebar {
    width: 100%;
    min-width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border-color);
    padding: 0.75rem;
  }
  .account-nav-list {
    flex-direction: row;
    overflow-x: auto;
  }
  .account-nav-btn {
    white-space: nowrap;
  }
}

/* Light Theme Overrides for Header Facility Switcher & Logos */
[data-theme="light"] .facility-switcher-container,
html.light .facility-switcher-container,
html:not(.dark) .facility-switcher-container {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(241, 245, 249, 0.92)) !important;
  border-color: rgba(203, 213, 225, 0.9) !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08) !important;
}

[data-theme="light"] .facility-header-logo-wrapper,
html.light .facility-header-logo-wrapper,
html:not(.dark) .facility-header-logo-wrapper {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .facility-select,
html.light .facility-select,
html:not(.dark) .facility-select {
  color: #0f172a !important;
}

[data-theme="light"] .facility-select option,
html.light .facility-select option,
html:not(.dark) .facility-select option {
  background: #ffffff !important;
  color: #0f172a !important;
}

[data-theme="light"] .logo-cell-thumbnail,
html.light .logo-cell-thumbnail,
html:not(.dark) .logo-cell-thumbnail {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
}

/* ==========================================================================
   Paint Bay Configuration & Creation Modals (Enlarged & Responsive Layout)
   ========================================================================== */

#editLineModal .modal-content,
#addLineModal .modal-content {
  max-width: 820px !important;
  width: 94vw !important;
  max-height: 92vh !important;
}

#editLineModal .modal-body,
#addLineModal .modal-body {
  padding: 1.25rem 1.6rem !important;
  max-height: calc(92vh - 130px) !important;
  overflow-y: auto !important;
}

.bay-modal-switch-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 0.5rem 0.85rem;
  margin-bottom: 0.95rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.bay-concurrency-notice {
  font-size: 0.78rem;
  line-height: 1.45;
  padding: 0.55rem 0.85rem;
  border-radius: 6px;
  margin-top: 0.5rem;
  transition: all 0.2s ease;
}

.bay-concurrency-notice.notice-surplus {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #34d399;
}

.bay-concurrency-notice.notice-balanced {
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #38bdf8;
}

.bay-concurrency-notice.notice-bottleneck {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fbbf24;
}

.bay-staffing-notice {
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--text-muted);
  margin-top: 0.45rem;
  padding: 0.5rem 0.8rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 6px;
}

.bay-staffing-notice.notice-warning {
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.35);
  color: #f59e0b;
}

.bay-modal-alert-box {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-left: 4px solid #ef4444;
  border-radius: 8px;
  padding: 0.85rem 1.1rem;
}

/* Light Theme Enhancements for Paint Bay Configuration Modals */
[data-theme="light"] #editLineModal .modal-content,
[data-theme="light"] #addLineModal .modal-content,
html.light #editLineModal .modal-content,
html.light #addLineModal .modal-content,
html:not(.dark) #editLineModal .modal-content,
html:not(.dark) #addLineModal .modal-content {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.2) !important;
}

[data-theme="light"] .bay-modal-switch-bar,
html.light .bay-modal-switch-bar,
html:not(.dark) .bay-modal-switch-bar {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

[data-theme="light"] .bay-staffing-notice,
html.light .bay-staffing-notice,
html:not(.dark) .bay-staffing-notice {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
}

[data-theme="light"] .bay-staffing-notice.notice-warning,
html.light .bay-staffing-notice.notice-warning,
html:not(.dark) .bay-staffing-notice.notice-warning {
  background: #fffbeb !important;
  border-color: #fde68a !important;
  color: #92400e !important;
}

[data-theme="light"] .bay-modal-alert-box,
html.light .bay-modal-alert-box,
html:not(.dark) .bay-modal-alert-box {
  background: #fef2f2 !important;
  border-color: #fca5a5 !important;
  border-left: 4px solid #ef4444 !important;
}

[data-theme="light"] .bay-modal-alert-box strong,
html.light .bay-modal-alert-box strong,
html:not(.dark) .bay-modal-alert-box strong {
  color: #b91c1c !important;
}

[data-theme="light"] .bay-modal-alert-box div,
html.light .bay-modal-alert-box div,
html:not(.dark) .bay-modal-alert-box div {
  color: #7f1d1d !important;
}

[data-theme="light"] .bay-concurrency-notice.notice-surplus,
html.light .bay-concurrency-notice.notice-surplus,
html:not(.dark) .bay-concurrency-notice.notice-surplus {
  background: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
  color: #15803d !important;
}

[data-theme="light"] .bay-concurrency-notice.notice-balanced,
html.light .bay-concurrency-notice.notice-balanced,
html:not(.dark) .bay-concurrency-notice.notice-balanced {
  background: #f0f9ff !important;
  border: 1px solid #bae6fd !important;
  color: #0369a1 !important;
}

[data-theme="light"] .bay-concurrency-notice.notice-bottleneck,
html.light .bay-concurrency-notice.notice-bottleneck,
html:not(.dark) .bay-concurrency-notice.notice-bottleneck {
  background: #fffbeb !important;
  border: 1px solid #fde68a !important;
  color: #b45309 !important;
}

/* ==========================================================================
   SMTP & Invitation Notice Banners (Theme-Aware Light & Dark Mode)
   ========================================================================== */
.smtp-notice-banner {
  font-size: 0.8rem;
  border-radius: 6px;
  padding: 0.55rem 0.85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  line-height: 1.45;
  box-sizing: border-box;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.smtp-notice-banner.notice-warning {
  color: #fde68a;
  background: rgba(217, 119, 6, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.smtp-notice-banner.notice-warning strong {
  color: #fbbf24;
}

.smtp-notice-banner.notice-success {
  color: #86efac;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.35);
}

.smtp-notice-banner.notice-success strong {
  color: #4ade80;
}

/* Light Theme Overrides for SMTP Notice Banners */
[data-theme="light"] .smtp-notice-banner.notice-warning,
html.light .smtp-notice-banner.notice-warning,
html:not(.dark) .smtp-notice-banner.notice-warning {
  color: #78350f !important;
  background: #fffbeb !important;
  border: 1px solid #f59e0b !important;
  box-shadow: 0 1px 3px rgba(245, 158, 11, 0.12);
}

[data-theme="light"] .smtp-notice-banner.notice-warning strong,
html.light .smtp-notice-banner.notice-warning strong,
html:not(.dark) .smtp-notice-banner.notice-warning strong {
  color: #92400e !important;
}

[data-theme="light"] .smtp-notice-banner.notice-success,
html.light .smtp-notice-banner.notice-success,
html:not(.dark) .smtp-notice-banner.notice-success {
  color: #14532d !important;
  background: #f0fdf4 !important;
  border: 1px solid #22c55e !important;
  box-shadow: 0 1px 3px rgba(34, 197, 94, 0.12);
}

[data-theme="light"] .smtp-notice-banner.notice-success strong,
html.light .smtp-notice-banner.notice-success strong,
html:not(.dark) .smtp-notice-banner.notice-success strong {
  color: #166534 !important;
}

/* ==========================================================================
   Dedicated View Mode for Facility Admin (USER_ADMIN) Role
   ========================================================================== */
html.role-facility-admin,
html.role-facility-admin body,
body.role-facility-admin {
  overflow: hidden !important;
  height: 100vh !important;
  max-height: 100vh !important;
}

html.role-facility-admin #appContainer,
body.role-facility-admin #appContainer {
  display: flex !important;
  flex-direction: column !important;
  height: 100vh !important;
  max-height: 100vh !important;
  width: 100% !important;
  overflow: hidden !important;
}

html.role-facility-admin .app-main,
body.role-facility-admin .app-main,
html.role-facility-admin #viewerBanner,
body.role-facility-admin #viewerBanner,
html.role-facility-admin #mainAppNav,
body.role-facility-admin #mainAppNav,
html.role-facility-admin .contract-selector-bar,
body.role-facility-admin .contract-selector-bar,
html.role-facility-admin #openAddContractModalBtn,
body.role-facility-admin #openAddContractModalBtn,
html.role-facility-admin #facilityAdminModal .modal-tabs,
body.role-facility-admin #facilityAdminModal .modal-tabs {
  display: none !important;
}

html.role-facility-admin #facilityAdminModal.modal-overlay,
body.role-facility-admin #facilityAdminModal.modal-overlay {
  position: static !important;
  display: flex !important;
  flex-direction: column !important;
  background: transparent !important;
  backdrop-filter: none !important;
  padding: 0.85rem 1.75rem 1.25rem 1.75rem !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: calc(100vh - 60px) !important;
  max-height: calc(100vh - 60px) !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  z-index: 10 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

html.role-facility-admin #facilityAdminModal .modal-content,
body.role-facility-admin #facilityAdminModal .modal-content {
  max-width: 100% !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35) !important;
  border-radius: var(--radius-lg, 12px) !important;
  border: 1px solid var(--border-color) !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
}

html.role-facility-admin #facilityAdminModal .modal-body,
body.role-facility-admin #facilityAdminModal .modal-body {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding: 1rem 1.5rem 1.25rem 1.5rem !important;
}

html.role-facility-admin #facilityAdminModal .platform-pane-container,
body.role-facility-admin #facilityAdminModal .platform-pane-container {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

html.role-facility-admin #facilityAdminModal .platform-table-container,
body.role-facility-admin #facilityAdminModal .platform-table-container {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: auto !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-md) !important;
}

html.role-facility-admin #paneFacBranding,
body.role-facility-admin #paneFacBranding,
html.role-facility-admin #paneFacPasswordPolicy,
body.role-facility-admin #paneFacPasswordPolicy,
#facilityAdminModal #paneFacPasswordPolicy,
#facilityAdminModal #paneFacBranding,
#panePlatformSecurity,
.platform-pane-container.pane-scrollable {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
}

html.role-facility-admin #paneFacBranding .facility-branding-manager-card,
body.role-facility-admin #paneFacBranding .facility-branding-manager-card {
  max-width: 100% !important;
}

html.role-facility-admin #facilityAdminModal .modal-close,
body.role-facility-admin #facilityAdminModal .modal-close {
  display: none !important;
}

@media (max-width: 900px) {
  html.role-facility-admin #facilityAdminModal.modal-overlay,
  body.role-facility-admin #facilityAdminModal.modal-overlay {
    padding: 0.65rem 1rem 0.85rem 1rem !important;
  }
  html.role-facility-admin #facilityAdminModal .modal-body,
  body.role-facility-admin #facilityAdminModal .modal-body {
    padding: 0.85rem 1rem !important;
  }
}

@media (max-width: 640px) {
  html.role-facility-admin #facilityAdminModal.modal-overlay,
  body.role-facility-admin #facilityAdminModal.modal-overlay {
    padding: 0.4rem 0.5rem 0.6rem 0.5rem !important;
  }
  html.role-facility-admin #facilityAdminModal .modal-body,
  body.role-facility-admin #facilityAdminModal .modal-body {
    padding: 0.65rem 0.5rem !important;
  }
}

[data-theme="light"] html.role-facility-admin #facilityAdminModal.modal-overlay,
[data-theme="light"] body.role-facility-admin #facilityAdminModal.modal-overlay,
html.light html.role-facility-admin #facilityAdminModal.modal-overlay,
html.light body.role-facility-admin #facilityAdminModal.modal-overlay,
html:not(.dark) html.role-facility-admin #facilityAdminModal.modal-overlay,
html:not(.dark) body.role-facility-admin #facilityAdminModal.modal-overlay {
  background: transparent !important;
}

[data-theme="light"] html.role-facility-admin #facilityAdminModal .modal-content,
[data-theme="light"] body.role-facility-admin #facilityAdminModal .modal-content,
html.light html.role-facility-admin #facilityAdminModal .modal-content,
html.light body.role-facility-admin #facilityAdminModal .modal-content,
html:not(.dark) html.role-facility-admin #facilityAdminModal .modal-content,
html:not(.dark) body.role-facility-admin #facilityAdminModal .modal-content {
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.12) !important;
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
}

/* ==========================================================================
   Shop Floor Manifest & Simple Load List Theme Variables
   ========================================================================== */
.viewer-manifest-view,
.viewer-manifest-view[data-theme="dark"],
[data-theme="dark"] .viewer-manifest-view,
html.dark .viewer-manifest-view,
.shop-floor-doc.is-live-viewer:not(.theme-light) {
  --manifest-bg: #111827;
  --manifest-card-bg: #1e293b;
  --manifest-border: #334155;
  --manifest-text: #f8fafc;
  --manifest-text-muted: #94a3b8;
  --manifest-badge-bg: #38bdf8;
  --manifest-badge-text: #0f172a;
  --manifest-kpi-bg: rgba(30, 41, 59, 0.7);
  --manifest-table-header-bg: #090d16;
  --manifest-table-header-text: #f8fafc;
  --manifest-table-row-even: #162032;
  --manifest-table-row-odd: #111827;
  --manifest-table-border: rgba(255, 255, 255, 0.08);
  --manifest-tfoot-bg: #1a2436;
  --manifest-tfoot-text: #f8fafc;
  --manifest-accent: #38bdf8;
}

:root,
[data-theme="light"],
body.theme-light,
html.light,
html:not(.dark),
#shopFloorPdfModal,
#shopFloorPrintDocument,
#shopFloorPrintDocument .shop-floor-doc,
.shop-floor-doc:not(.is-live-viewer),
body.printing-shop-floor-schedule,
body.printing-shop-floor-schedule .shop-floor-doc,
.exporting-pdf,
.exporting-pdf .shop-floor-doc,
#printDocContent,
#printDocContent .shop-floor-doc,
[data-theme="light"] .viewer-manifest-view,
body.theme-light .viewer-manifest-view,
html.light .viewer-manifest-view,
.viewer-manifest-view.theme-light,
.shop-floor-doc.is-live-viewer.theme-light {
  --manifest-bg: #ffffff;
  --manifest-card-bg: #ffffff;
  --manifest-border: #cbd5e1;
  --manifest-text: #0f172a;
  --manifest-text-muted: #64748b;
  --manifest-badge-bg: #0f172a;
  --manifest-badge-text: #ffffff;
  --manifest-kpi-bg: #ffffff;
  --manifest-table-header-bg: #f1f5f9;
  --manifest-table-header-text: #0f172a;
  --manifest-table-row-even: #f8fafc;
  --manifest-table-row-odd: #ffffff;
  --manifest-table-border: #e2e8f0;
  --manifest-tfoot-bg: #f1f5f9;
  --manifest-tfoot-text: #0f172a;
  --manifest-accent: #2563eb;
  --bg-card: #ffffff;
  --bg-card-subtle: #f8fafc;
  --border-color: #cbd5e1;
  --text-main: #0f172a;
  --text-muted: #64748b;
  --text-highlight: #0f172a;
}

@media print {
  :root,
  [data-theme="dark"],
  html.dark,
  body,
  .shop-floor-doc {
    --manifest-bg: #ffffff !important;
    --manifest-card-bg: #f8fafc !important;
    --manifest-border: #cbd5e1 !important;
    --manifest-text: #0f172a !important;
    --manifest-text-muted: #475569 !important;
    --manifest-badge-bg: #0f172a !important;
    --manifest-badge-text: #ffffff !important;
    --manifest-kpi-bg: #f8fafc !important;
    --manifest-table-header-bg: #0f172a !important;
    --manifest-table-header-text: #ffffff !important;
    --manifest-table-row-even: #f8fafc !important;
    --manifest-table-row-odd: #ffffff !important;
    --manifest-table-border: #e2e8f0 !important;
    --manifest-tfoot-bg: #f1f5f9 !important;
    --manifest-tfoot-text: #0f172a !important;
    --manifest-accent: #2563eb !important;
    --bg-card: #ffffff !important;
    --bg-card-subtle: #f8fafc !important;
    --border-color: #cbd5e1 !important;
    --text-main: #0f172a !important;
    --text-muted: #475569 !important;
  }
}

/* ==========================================================================
   Dedicated Viewer Mode: Live Read-Only Simplified Manifest View
   ========================================================================== */

html.role-viewer .app-main,
body.role-viewer .app-main,
html.role-contributor .app-main,
body.role-contributor .app-main,
html.role-viewer .contract-selector-bar,
body.role-viewer .contract-selector-bar,
html.role-contributor .contract-selector-bar,
body.role-contributor .contract-selector-bar,
html.role-viewer #viewerBanner,
body.role-viewer #viewerBanner,
html.role-contributor #viewerBanner,
body.role-contributor #viewerBanner,
html.role-viewer #openAddContractModalBtn,
body.role-viewer #openAddContractModalBtn,
html.role-contributor #openAddContractModalBtn,
body.role-contributor #openAddContractModalBtn,
html.role-viewer #mainAppNav,
body.role-viewer #mainAppNav,
html.role-contributor #mainAppNav,
body.role-contributor #mainAppNav {
  display: none !important;
}

html.role-viewer #viewerManifestView,
body.role-viewer #viewerManifestView,
html.role-contributor #viewerManifestView,
body.role-contributor #viewerManifestView {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0% !important;
  min-height: calc(100vh - 65px) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.viewer-manifest-view {
  background: var(--bg-main, #0b0f19);
  color: var(--text-main, #f8fafc);
  flex-direction: column;
  width: 100%;
  min-height: calc(100vh - 65px);
  box-sizing: border-box;
}

[data-theme="light"] .viewer-manifest-view,
body.theme-light .viewer-manifest-view,
html.light .viewer-manifest-view,
html:not(.dark) .viewer-manifest-view {
  background: #f1f5f9;
  color: #0f172a;
}

/* Toolbar */
.viewer-manifest-toolbar {
  position: sticky;
  top: var(--app-header-height, 60px);
  z-index: 45;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 6px 18px;
  min-height: 46px;
  background: var(--bg-card, #111827);
  border-bottom: 1px solid var(--border-color, #1e293b);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-sizing: border-box;
}

[data-theme="light"] .viewer-manifest-toolbar,
body.theme-light .viewer-manifest-toolbar,
html.light .viewer-manifest-toolbar,
html:not(.dark) .viewer-manifest-toolbar {
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

.viewer-toolbar-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.viewer-toolbar-right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 6px;
}

.viewer-toolbar-group {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.viewer-toolbar-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted, #94a3b8);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

[data-theme="light"] .viewer-toolbar-label,
body.theme-light .viewer-toolbar-label,
html.light .viewer-toolbar-label,
html:not(.dark) .viewer-toolbar-label {
  color: #475569;
}

.viewer-wc-stepper {
  display: inline-flex;
  align-items: center;
  height: 32px;
  background: var(--bg-input, #1e293b);
  border: 1px solid var(--border-color, #334155);
  border-radius: var(--radius-sm, 6px);
  overflow: hidden;
  box-sizing: border-box;
}

[data-theme="light"] .viewer-wc-stepper,
body.theme-light .viewer-wc-stepper,
html.light .viewer-wc-stepper,
html:not(.dark) .viewer-wc-stepper {
  background: #ffffff;
  border-color: #cbd5e1;
}

.viewer-btn-step {
  background: transparent;
  border: none;
  color: var(--text-muted, #94a3b8);
  height: 100%;
  padding: 0 8px;
  cursor: pointer;
  font-size: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.viewer-btn-step:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-main, #ffffff);
}

[data-theme="light"] .viewer-btn-step:hover,
body.theme-light .viewer-btn-step:hover,
html.light .viewer-btn-step:hover,
html:not(.dark) .viewer-btn-step:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.viewer-select {
  background: transparent;
  border: none;
  height: 32px;
  padding: 0 8px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-main, #f8fafc);
  cursor: pointer;
  outline: none;
  font-family: inherit;
}

.viewer-select-boxed {
  background: var(--bg-input, #1e293b);
  border: 1px solid var(--border-color, #334155);
  border-radius: var(--radius-sm, 6px);
  box-sizing: border-box;
}

[data-theme="light"] .viewer-select,
body.theme-light .viewer-select,
html.light .viewer-select,
html:not(.dark) .viewer-select {
  color: #0f172a;
}

[data-theme="light"] .viewer-select-boxed,
body.theme-light .viewer-select-boxed,
html.light .viewer-select-boxed,
html:not(.dark) .viewer-select-boxed {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #0f172a;
}

.viewer-select option {
  background: var(--bg-card, #111827);
  color: var(--text-main, #f8fafc);
}

[data-theme="light"] .viewer-select option,
body.theme-light .viewer-select option,
html.light .viewer-select option,
html:not(.dark) .viewer-select option {
  background: #ffffff;
  color: #0f172a;
}

.viewer-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #10b981;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 9999px;
  height: 24px;
  box-sizing: border-box;
  white-space: nowrap;
}

[data-theme="light"] .viewer-live-badge,
body.theme-light .viewer-live-badge,
html.light .viewer-live-badge,
html:not(.dark) .viewer-live-badge {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #059669;
}

.viewer-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
  animation: viewerLivePulse 2s infinite;
}

@keyframes viewerLivePulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); }
  70% { transform: scale(1); box-shadow: 0 0 0 5px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* Icon Buttons for Viewer Toolbar */
.viewer-icon-btn {
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  cursor: pointer;
  background: var(--bg-card, #1e293b);
  border: 1px solid var(--border-color, #334155) !important;
  color: var(--text-main, #f8fafc) !important;
  transition: all 0.15s ease;
  box-sizing: border-box;
}

.viewer-icon-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: #475569 !important;
  transform: translateY(-1px);
}

.viewer-icon-btn:active {
  transform: translateY(1px);
}

[data-theme="light"] .viewer-icon-btn,
body.theme-light .viewer-icon-btn,
html.light .viewer-icon-btn,
html:not(.dark) .viewer-icon-btn {
  background: #ffffff;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

[data-theme="light"] .viewer-icon-btn:hover,
body.theme-light .viewer-icon-btn:hover,
html.light .viewer-icon-btn:hover,
html:not(.dark) .viewer-icon-btn:hover {
  background: #f8fafc;
  border-color: #94a3b8 !important;
}

/* Viewer role view: hide Print and PDF export buttons for Viewer role only (kept visible for Contributor) */
html.role-viewer:not(.role-contributor) #viewerPrintBtn,
html.role-viewer:not(.role-contributor) #viewerPdfBtn,
body.role-viewer:not(.role-contributor) #viewerPrintBtn,
body.role-viewer:not(.role-contributor) #viewerPdfBtn {
  display: none !important;
}

/* Contributor role view: batches are interactive and display details popup on selection */
html.role-contributor .bay-load-row,
body.role-contributor .bay-load-row,
html.role-contributor .timeline-batch-card,
body.role-contributor .timeline-batch-card,
html.role-contributor .shop-floor-load,
body.role-contributor .shop-floor-load {
  cursor: pointer !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

html.role-contributor .bay-load-row:hover,
body.role-contributor .bay-load-row:hover {
  background-color: rgba(99, 102, 241, 0.12) !important;
}

[data-theme="light"] html.role-contributor .bay-load-row:hover,
[data-theme="light"] body.role-contributor .bay-load-row:hover,
body.theme-light.role-contributor .bay-load-row:hover {
  background-color: #e2e8f0 !important;
}

html.role-contributor .timeline-batch-card:hover,
body.role-contributor .timeline-batch-card:hover {
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35) !important;
  border-color: rgba(99, 102, 241, 0.6) !important;
  transform: translateY(-1px);
}

html.role-contributor .shop-floor-load:hover,
body.role-contributor .shop-floor-load:hover {
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3) !important;
  border-color: rgba(99, 102, 241, 0.6) !important;
  transform: translateY(-1px);
}

/* Viewer role view: non-interactive batches (default cursor, no selection popup) */
html.role-viewer:not(.role-contributor) .bay-load-row,
body.role-viewer:not(.role-contributor) .bay-load-row,
html.role-viewer:not(.role-contributor) .timeline-batch-card,
body.role-viewer:not(.role-contributor) .timeline-batch-card,
html.role-viewer:not(.role-contributor) .shop-floor-load,
body.role-viewer:not(.role-contributor) .shop-floor-load {
  cursor: default !important;
}

/* Contributor & Viewer roles: hide planning controls (Allocated Bay, Planned Week, Delivery Due Date) in batch modal */
html.role-contributor #timelineModalPlanningControls,
body.role-contributor #timelineModalPlanningControls,
html.role-contributor .timeline-modal-planning-controls,
body.role-contributor .timeline-modal-planning-controls,
html.role-viewer #timelineModalPlanningControls,
body.role-viewer #timelineModalPlanningControls,
html.role-viewer .timeline-modal-planning-controls,
body.role-viewer .timeline-modal-planning-controls {
  display: none !important;
}

.viewer-theme-btn:hover {
  background: rgba(56, 189, 248, 0.12) !important;
  border-color: #38bdf8 !important;
  color: #38bdf8 !important;
}

[data-theme="light"] .viewer-theme-btn:hover,
body.theme-light .viewer-theme-btn:hover,
html.light .viewer-theme-btn:hover,
html:not(.dark) .viewer-theme-btn:hover {
  background: #f8fafc !important;
  border-color: #2563eb !important;
  color: #2563eb !important;
}

.viewer-refresh-btn {
  background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%) !important;
  border: none !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(236, 72, 153, 0.3) !important;
}

.viewer-refresh-btn:hover {
  background: linear-gradient(135deg, #f43f5e 0%, #9333ea 100%) !important;
  box-shadow: 0 3px 10px rgba(236, 72, 153, 0.45) !important;
}

.viewer-refresh-btn.spinning .refresh-icon {
  display: inline-block;
  animation: viewerSpin 0.75s linear infinite;
}

@keyframes viewerSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.viewer-toolbar-btn {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 6px 13px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
}

/* Viewport and Paper Sheet - Screen View Optimized for Full Screen Utilization */
.viewer-manifest-viewport {
  flex: 1 1 0%;
  overflow-y: auto;
  padding: 16px 24px 24px 24px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  box-sizing: border-box;
  width: 100%;
}

.viewer-manifest-sheet {
  width: 100%;
  max-width: 100%;
  min-height: calc(100vh - 135px);
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  background: var(--manifest-bg, #111827);
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
  border: 1px solid var(--manifest-border, #334155);
  box-sizing: border-box;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

[data-theme="light"] .viewer-manifest-sheet,
body.theme-light .viewer-manifest-sheet,
html.light .viewer-manifest-sheet,
html:not(.dark) .viewer-manifest-sheet {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.08);
}

#viewerManifestDocument {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Full-Page Utilization for Simple Load List in Viewer Mode */
.viewer-manifest-view .shop-floor-doc.report-simple-list {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 22px 28px !important;
  box-sizing: border-box;
  min-height: 100%;
  background: transparent;
}

.viewer-manifest-view .shop-floor-header,
.viewer-manifest-view .report-simple-list .shop-floor-header,
.viewer-manifest-view .report-gantt .shop-floor-header,
.viewer-manifest-view .report-timeline .shop-floor-header {
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin-bottom: 8px !important;
}

.viewer-manifest-view .simple-manifest-top,
.viewer-manifest-view .report-simple-list .simple-manifest-top,
.viewer-manifest-view .report-gantt .simple-manifest-top,
.viewer-manifest-view .report-timeline .simple-manifest-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

/* KPI Summary Cards - Spacious and Legible across all Viewer views */
.viewer-manifest-view .simple-kpis-strip,
.viewer-manifest-view .report-simple-list .simple-kpis-strip,
.viewer-manifest-view .report-gantt .simple-kpis-strip,
.viewer-manifest-view .report-timeline .simple-kpis-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 14px;
  margin-bottom: 8px;
}

.viewer-manifest-view .simple-kpi-pill,
.viewer-manifest-view .report-simple-list .simple-kpi-pill,
.viewer-manifest-view .report-gantt .simple-kpi-pill,
.viewer-manifest-view .report-timeline .simple-kpi-pill {
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid var(--manifest-border, #334155);
  background: var(--manifest-kpi-bg, #181b26);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

[data-theme="light"] .viewer-manifest-view .simple-kpi-pill,
body.theme-light .viewer-manifest-view .simple-kpi-pill,
html.light .viewer-manifest-view .simple-kpi-pill,
html:not(.dark) .viewer-manifest-view .simple-kpi-pill,
[data-theme="light"] .viewer-manifest-view .report-simple-list .simple-kpi-pill,
body.theme-light .viewer-manifest-view .report-simple-list .simple-kpi-pill,
html.light .viewer-manifest-view .report-simple-list .simple-kpi-pill,
html:not(.dark) .viewer-manifest-view .report-simple-list .simple-kpi-pill {
  background: #f8fafc;
  border-color: #cbd5e1;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.viewer-manifest-view .simple-kpi-pill .k-label,
.viewer-manifest-view .report-simple-list .simple-kpi-pill .k-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--manifest-text-muted, #94a3b8);
}

[data-theme="light"] .viewer-manifest-view .simple-kpi-pill .k-label,
body.theme-light .viewer-manifest-view .simple-kpi-pill .k-label,
html.light .viewer-manifest-view .simple-kpi-pill .k-label,
html:not(.dark) .viewer-manifest-view .simple-kpi-pill .k-label,
[data-theme="light"] .viewer-manifest-view .report-simple-list .simple-kpi-pill .k-label,
body.theme-light .viewer-manifest-view .report-simple-list .simple-kpi-pill .k-label,
html.light .viewer-manifest-view .report-simple-list .simple-kpi-pill .k-label,
html:not(.dark) .viewer-manifest-view .report-simple-list .simple-kpi-pill .k-label {
  color: #64748b;
}

.viewer-manifest-view .simple-kpi-pill .k-val,
.viewer-manifest-view .report-simple-list .simple-kpi-pill .k-val {
  font-size: 22px;
  font-weight: 800;
  font-family: var(--font-mono, monospace);
  color: var(--manifest-text, #f8fafc);
  margin-top: 4px;
  margin-bottom: 2px;
}

[data-theme="light"] .viewer-manifest-view .simple-kpi-pill .k-val,
body.theme-light .viewer-manifest-view .simple-kpi-pill .k-val,
html.light .viewer-manifest-view .simple-kpi-pill .k-val,
html:not(.dark) .viewer-manifest-view .simple-kpi-pill .k-val,
[data-theme="light"] .viewer-manifest-view .report-simple-list .simple-kpi-pill .k-val,
body.theme-light .viewer-manifest-view .report-simple-list .simple-kpi-pill .k-val,
html.light .viewer-manifest-view .report-simple-list .simple-kpi-pill .k-val,
html:not(.dark) .viewer-manifest-view .report-simple-list .simple-kpi-pill .k-val {
  color: #0f172a;
}

.viewer-manifest-view .simple-kpi-pill .k-sub,
.viewer-manifest-view .report-simple-list .simple-kpi-pill .k-sub {
  font-size: 11px;
  color: var(--manifest-text-muted, #94a3b8);
}

[data-theme="light"] .viewer-manifest-view .simple-kpi-pill .k-sub,
body.theme-light .viewer-manifest-view .simple-kpi-pill .k-sub,
html.light .viewer-manifest-view .simple-kpi-pill .k-sub,
html:not(.dark) .viewer-manifest-view .simple-kpi-pill .k-sub,
[data-theme="light"] .viewer-manifest-view .report-simple-list .simple-kpi-pill .k-sub,
body.theme-light .viewer-manifest-view .report-simple-list .simple-kpi-pill .k-sub,
html.light .viewer-manifest-view .report-simple-list .simple-kpi-pill .k-sub,
html:not(.dark) .viewer-manifest-view .report-simple-list .simple-kpi-pill .k-sub {
  color: #64748b;
}

/* Active Production Weeks Quick Strip */
.viewer-quick-weeks-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin-top: 10px;
  background: rgba(15, 23, 42, 0.4);
  border: 1px solid var(--manifest-border, #334155);
  border-radius: 8px;
  overflow-x: auto;
  white-space: nowrap;
}

[data-theme="light"] .viewer-quick-weeks-strip,
body.theme-light .viewer-quick-weeks-strip,
html.light .viewer-quick-weeks-strip,
html:not(.dark) .viewer-quick-weeks-strip {
  background: #f8fafc;
  border-color: #cbd5e1;
}

.viewer-quick-weeks-label {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--manifest-text-muted, #94a3b8);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

[data-theme="light"] .viewer-quick-weeks-label,
body.theme-light .viewer-quick-weeks-label,
html.light .viewer-quick-weeks-label,
html:not(.dark) .viewer-quick-weeks-label {
  color: #475569;
}

.viewer-week-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--manifest-border, #334155);
  background: var(--manifest-card-bg, #1e293b);
  color: var(--manifest-text, #f8fafc);
  transition: all 0.15s ease;
  font-family: inherit;
  flex-shrink: 0;
}

.viewer-week-chip:hover {
  border-color: #38bdf8;
  background: rgba(56, 189, 248, 0.15);
  color: #ffffff;
}

.viewer-week-chip .chip-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.14);
  color: #cbd5e1;
}

/* Light Theme: Unselected Chips */
[data-theme="light"] .viewer-week-chip,
body.theme-light .viewer-week-chip,
html.light .viewer-week-chip,
html:not(.dark) .viewer-week-chip,
body:not(.dark) .viewer-week-chip {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #0f172a;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

[data-theme="light"] .viewer-week-chip:hover,
body.theme-light .viewer-week-chip:hover,
html.light .viewer-week-chip:hover,
html:not(.dark) .viewer-week-chip:hover,
body:not(.dark) .viewer-week-chip:hover {
  background: #f8fafc;
  border-color: #2563eb;
  color: #2563eb;
}

[data-theme="light"] .viewer-week-chip .chip-badge,
body.theme-light .viewer-week-chip .chip-badge,
html.light .viewer-week-chip .chip-badge,
html:not(.dark) .viewer-week-chip .chip-badge,
body:not(.dark) .viewer-week-chip .chip-badge {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #475569;
}

/* Dark Theme: Selected / Active Chip */
.viewer-week-chip.active {
  background: #2563eb !important;
  border: 1px solid #60a5fa !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.5) !important;
}

.viewer-week-chip.active span {
  color: #ffffff !important;
}

.viewer-week-chip.active .chip-badge {
  background: rgba(255, 255, 255, 0.25) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  color: #ffffff !important;
}

/* Light Theme: Selected / Active Chip (Ultra High Contrast, Crisp Royal Blue with White Text) */
[data-theme="light"] .viewer-week-chip.active,
body.theme-light .viewer-week-chip.active,
html.light .viewer-week-chip.active,
html:not(.dark) .viewer-week-chip.active,
body:not(.dark) .viewer-week-chip.active {
  background: #1d4ed8 !important; /* Bold vivid cobalt blue */
  border: 1px solid #1e40af !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 8px rgba(29, 78, 216, 0.35) !important;
}

[data-theme="light"] .viewer-week-chip.active:hover,
body.theme-light .viewer-week-chip.active:hover,
html.light .viewer-week-chip.active:hover,
html:not(.dark) .viewer-week-chip.active:hover,
body:not(.dark) .viewer-week-chip.active:hover {
  background: #1e40af !important;
  border-color: #172554 !important;
  color: #ffffff !important;
}

[data-theme="light"] .viewer-week-chip.active span,
body.theme-light .viewer-week-chip.active span,
html.light .viewer-week-chip.active span,
html:not(.dark) .viewer-week-chip.active span,
body:not(.dark) .viewer-week-chip.active span {
  color: #ffffff !important;
}

[data-theme="light"] .viewer-week-chip.active .chip-badge,
body.theme-light .viewer-week-chip.active .chip-badge,
html.light .viewer-week-chip.active .chip-badge,
html:not(.dark) .viewer-week-chip.active .chip-badge,
body:not(.dark) .viewer-week-chip.active .chip-badge {
  background: rgba(255, 255, 255, 0.28) !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  color: #ffffff !important;
}

/* Bay Summary Strip */
.viewer-bay-summary-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 0 !important;
  margin-bottom: 6px !important;
}

.viewer-bay-summary-card {
  flex: 1 1 200px;
  min-width: 0;
  padding: 6px 12px;
  border-radius: 6px;
  background: var(--manifest-kpi-bg, #181b26);
  border-top: 1px solid var(--manifest-border, #334155);
  border-right: 1px solid var(--manifest-border, #334155);
  border-bottom: 1px solid var(--manifest-border, #334155);
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

[data-theme="light"] .viewer-bay-summary-card,
body.theme-light .viewer-bay-summary-card,
html.light .viewer-bay-summary-card,
html:not(.dark) .viewer-bay-summary-card {
  background: #f8fafc;
  border-color: #cbd5e1;
}

/* Table Wrapper and Table - Fluid and Well-Padded */
.viewer-manifest-view .simple-list-table-wrap {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 14px;
  margin-bottom: 14px;
  border: 1px solid var(--manifest-border, #334155);
  border-radius: 8px;
  overflow: hidden;
  box-sizing: border-box;
  background: var(--manifest-bg, #111827);
  min-height: 240px;
}

[data-theme="light"] .viewer-manifest-view .simple-list-table-wrap,
body.theme-light .viewer-manifest-view .simple-list-table-wrap,
html.light .viewer-manifest-view .simple-list-table-wrap,
html:not(.dark) .viewer-manifest-view .simple-list-table-wrap {
  background: #ffffff;
  border-color: #cbd5e1;
}

.viewer-manifest-view .simple-list-table {
  width: 100%;
  height: 100%;
  border-collapse: collapse;
}

.viewer-manifest-view .simple-list-table thead th {
  padding: 13px 16px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.viewer-manifest-view .simple-list-table tbody td {
  padding: 12px 16px;
  font-size: 13.5px;
  line-height: 1.45;
}

.viewer-manifest-view .simple-list-table tbody tr.bay-group-header-row td {
  padding: 10px 16px !important;
  font-size: 13.5px !important;
}

.viewer-manifest-view .simple-list-table tfoot td {
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 800;
}

/* Schedule & Due Column Display in Simple List Table */
.manifest-schedule-planned {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--manifest-text, #0f172a);
  white-space: nowrap;
}

.manifest-schedule-planned .planned-icon {
  font-size: 13px;
  opacity: 0.9;
}

.manifest-schedule-planned .planned-val {
  font-family: var(--font-mono, monospace);
  font-weight: 800;
  color: var(--manifest-text, #0f172a);
}

.manifest-due-row {
  margin-top: 5px;
}

.manifest-due-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  padding: 2.5px 8px;
  border-radius: 4px;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: all 0.15s ease-in-out;
}

.manifest-due-badge.due-ontime {
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #86efac;
  font-weight: 700;
}

.manifest-due-badge.due-late {
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #f87171;
  font-weight: 800;
}

.manifest-due-badge.due-open {
  background: rgba(100, 116, 139, 0.1);
  color: var(--manifest-text-muted, #64748b);
  border: 1px solid rgba(100, 116, 139, 0.25);
  font-weight: 600;
}

/* Dark mode overrides for Schedule & Due column badges */
[data-theme="dark"] .manifest-due-badge.due-ontime,
body.theme-dark .manifest-due-badge.due-ontime,
html.dark .manifest-due-badge.due-ontime {
  background: rgba(16, 185, 129, 0.2) !important;
  color: #6ee7b7 !important;
  border-color: rgba(16, 185, 129, 0.5) !important;
}

[data-theme="dark"] .manifest-due-badge.due-late,
body.theme-dark .manifest-due-badge.due-late,
html.dark .manifest-due-badge.due-late {
  background: rgba(239, 68, 68, 0.22) !important;
  color: #fca5a5 !important;
  border-color: rgba(239, 68, 68, 0.55) !important;
}

[data-theme="dark"] .manifest-due-badge.due-open,
body.theme-dark .manifest-due-badge.due-open,
html.dark .manifest-due-badge.due-open {
  background: rgba(148, 163, 184, 0.14) !important;
  color: #94a3b8 !important;
  border-color: rgba(148, 163, 184, 0.3) !important;
}

/* Empty State Styling - High Utility & Centered */
.viewer-manifest-view .simple-list-empty-cell {
  height: 100%;
  min-height: 280px;
  padding: 40px 24px !important;
  vertical-align: middle;
  text-align: center;
}

.empty-scheduled-weeks-prompt {
  margin-top: 20px;
  padding: 16px 20px;
  background: var(--manifest-card-bg, #1e293b);
  border: 1px solid var(--manifest-border, #334155);
  border-radius: 8px;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

[data-theme="light"] .empty-scheduled-weeks-prompt,
body.theme-light .empty-scheduled-weeks-prompt,
html.light .empty-scheduled-weeks-prompt,
html:not(.dark) .empty-scheduled-weeks-prompt {
  background: #f8fafc;
  border-color: #cbd5e1;
}

.empty-scheduled-weeks-title {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--manifest-text, #f8fafc);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

[data-theme="light"] .empty-scheduled-weeks-title,
body.theme-light .empty-scheduled-weeks-title,
html.light .empty-scheduled-weeks-title,
html:not(.dark) .empty-scheduled-weeks-title {
  color: #0f172a;
}

.empty-scheduled-weeks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

.empty-week-jump-btn {
  display: flex;
  flex-direction: column;
  padding: 10px 14px;
  background: var(--manifest-bg, #111827);
  border: 1px solid var(--manifest-border, #334155);
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
  font-family: inherit;
}

[data-theme="light"] .empty-week-jump-btn,
body.theme-light .empty-week-jump-btn,
html.light .empty-week-jump-btn,
html:not(.dark) .empty-week-jump-btn {
  background: #ffffff;
  border-color: #cbd5e1;
}

.empty-week-jump-btn:hover {
  border-color: var(--manifest-accent, #38bdf8);
  background: rgba(56, 189, 248, 0.08);
  transform: translateY(-1px);
}

[data-theme="light"] .empty-week-jump-btn:hover,
body.theme-light .empty-week-jump-btn:hover,
html.light .empty-week-jump-btn:hover,
html:not(.dark) .empty-week-jump-btn:hover,
body:not(.dark) .empty-week-jump-btn:hover {
  border-color: #2563eb;
  background: #eff6ff;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.12);
}

[data-theme="light"] .empty-week-jump-btn:hover .empty-week-jump-date,
body.theme-light .empty-week-jump-btn:hover .empty-week-jump-date,
html.light .empty-week-jump-btn:hover .empty-week-jump-date,
html:not(.dark) .empty-week-jump-btn:hover .empty-week-jump-date,
body:not(.dark) .empty-week-jump-btn:hover .empty-week-jump-date {
  color: #1d4ed8;
}

.empty-week-jump-date {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--manifest-text, #f8fafc);
}

[data-theme="light"] .empty-week-jump-date,
body.theme-light .empty-week-jump-date,
html.light .empty-week-jump-date,
html:not(.dark) .empty-week-jump-date {
  color: #0f172a;
}

.empty-week-jump-meta {
  font-size: 11px;
  color: var(--manifest-text-muted, #94a3b8);
  margin-top: 3px;
}

[data-theme="light"] .empty-week-jump-meta,
body.theme-light .empty-week-jump-meta,
html.light .empty-week-jump-meta,
html:not(.dark) .empty-week-jump-meta {
  color: #64748b;
}

.empty-week-all-btn {
  border-style: dashed;
}

/* Ensure Print Mode Keeps Perfect A4/A3 Bounds */
@media print {
  .viewer-manifest-toolbar {
    display: none !important;
  }
  .viewer-manifest-viewport {
    padding: 0 !important;
    overflow: visible !important;
  }
  .viewer-manifest-sheet {
    max-width: 100% !important;
    min-height: auto !important;
    box-shadow: none !important;
    border: none !important;
  }
  .viewer-manifest-view .shop-floor-doc.report-simple-list {
    padding: 6mm 8mm !important;
  }
  .viewer-manifest-view .simple-kpis-strip,
  .viewer-manifest-view .report-simple-list .simple-kpis-strip {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 6px !important;
  }
  .viewer-manifest-view .simple-kpi-pill,
  .viewer-manifest-view .report-simple-list .simple-kpi-pill {
    padding: 4px 8px !important;
  }
  .viewer-manifest-view .simple-kpi-pill .k-val,
  .viewer-manifest-view .report-simple-list .simple-kpi-pill .k-val {
    font-size: 13.5px !important;
  }
  .viewer-manifest-view .simple-list-table-wrap {
    min-height: auto !important;
    border: 1.5px solid var(--manifest-border, #0f172a) !important;
  }
  .viewer-manifest-view .simple-list-table thead th,
  .viewer-manifest-view .simple-list-table tbody td,
  .viewer-manifest-view .simple-list-table tfoot td {
    padding: 4px 6px !important;
    font-size: 9.5px !important;
  }
  .viewer-manifest-view .simple-list-table td * {
    font-size: 9px !important;
  }
  .viewer-manifest-view .simple-list-table td strong {
    font-size: 9.5px !important;
  }
}

/* ==========================================================================
   Viewer Mode Gantt Schedule & Timeline Styling
   ========================================================================== */
.viewer-manifest-view .shop-floor-doc.report-gantt,
.viewer-manifest-view .shop-floor-doc.report-detailed {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 18px 24px !important;
  box-sizing: border-box;
  min-height: 100%;
  background: transparent;
}

.viewer-manifest-view .report-gantt .shop-floor-bays-row,
.viewer-manifest-view .report-detailed .shop-floor-bays-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 16px;
  align-items: start;
  width: 100%;
  box-sizing: border-box;
  margin-top: 12px;
}

.viewer-manifest-view .report-gantt .shop-floor-bay-column,
.viewer-manifest-view .report-detailed .shop-floor-bay-column {
  background: var(--manifest-card-bg, #1e293b);
  border: 1px solid var(--manifest-border, #334155);
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

[data-theme="light"] .viewer-manifest-view .report-gantt .shop-floor-bay-column,
body.theme-light .viewer-manifest-view .report-gantt .shop-floor-bay-column,
html.light .viewer-manifest-view .report-gantt .shop-floor-bay-column,
html:not(.dark) .viewer-manifest-view .report-gantt .shop-floor-bay-column {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}

.viewer-manifest-view .report-gantt .shop-floor-bay-loads,
.viewer-manifest-view .report-detailed .shop-floor-bay-loads {
  background: var(--manifest-bg, #0f172a);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

[data-theme="light"] .viewer-manifest-view .report-gantt .shop-floor-bay-loads,
body.theme-light .viewer-manifest-view .report-gantt .shop-floor-bay-loads,
html.light .viewer-manifest-view .report-gantt .shop-floor-bay-loads,
html:not(.dark) .viewer-manifest-view .report-gantt .shop-floor-bay-loads {
  background: #f8fafc;
}

.viewer-manifest-view .report-gantt .shop-floor-load,
.viewer-manifest-view .report-detailed .shop-floor-load {
  background: var(--manifest-card-bg, #1e293b);
  border: 1px solid var(--manifest-border, #334155);
  color: var(--manifest-text, #f8fafc);
  border-radius: 6px;
  padding: 10px 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .viewer-manifest-view .report-gantt .shop-floor-load,
body.theme-light .viewer-manifest-view .report-gantt .shop-floor-load,
html.light .viewer-manifest-view .report-gantt .shop-floor-load,
html:not(.dark) .viewer-manifest-view .report-gantt .shop-floor-load {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #0f172a;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.viewer-manifest-view .report-gantt .shop-floor-load strong,
.viewer-manifest-view .report-detailed .shop-floor-load strong {
  color: var(--manifest-text, #f8fafc);
}

[data-theme="light"] .viewer-manifest-view .report-gantt .shop-floor-load strong,
body.theme-light .viewer-manifest-view .report-gantt .shop-floor-load strong,
html.light .viewer-manifest-view .report-gantt .shop-floor-load strong,
html:not(.dark) .viewer-manifest-view .report-gantt .shop-floor-load strong {
  color: #0f172a;
}

.viewer-manifest-view .report-gantt .shop-floor-products-wrap,
.viewer-manifest-view .report-detailed .shop-floor-products-wrap {
  background: var(--manifest-bg, #0f172a);
  border: 1px solid var(--manifest-border, #334155);
  border-radius: 4px;
}

[data-theme="light"] .viewer-manifest-view .report-gantt .shop-floor-products-wrap,
body.theme-light .viewer-manifest-view .report-gantt .shop-floor-products-wrap,
html.light .viewer-manifest-view .report-gantt .shop-floor-products-wrap,
html:not(.dark) .viewer-manifest-view .report-gantt .shop-floor-products-wrap {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.viewer-manifest-view .report-gantt .shop-floor-table th,
.viewer-manifest-view .report-detailed .shop-floor-table th {
  background: var(--manifest-table-header-bg, #1e293b);
  color: var(--manifest-table-header-text, #f8fafc);
  border-bottom: 1px solid var(--manifest-border, #334155);
}

[data-theme="light"] .viewer-manifest-view .report-gantt .shop-floor-table th,
body.theme-light .viewer-manifest-view .report-gantt .shop-floor-table th,
html.light .viewer-manifest-view .report-gantt .shop-floor-table th,
html:not(.dark) .viewer-manifest-view .report-gantt .shop-floor-table th {
  background: #f1f5f9;
  color: #0f172a;
  border-color: #cbd5e1;
}

.viewer-manifest-view .report-gantt .shop-floor-table td,
.viewer-manifest-view .report-detailed .shop-floor-table td {
  border-bottom: 1px solid var(--manifest-border, #334155);
  color: var(--manifest-text, #f8fafc);
}

[data-theme="light"] .viewer-manifest-view .report-gantt .shop-floor-table td,
body.theme-light .viewer-manifest-view .report-gantt .shop-floor-table td,
html.light .viewer-manifest-view .report-gantt .shop-floor-table td,
html:not(.dark) .viewer-manifest-view .report-gantt .shop-floor-table td {
  border-color: #e2e8f0;
  color: #0f172a;
}

.viewer-manifest-view .report-gantt .shop-floor-table td strong,
.viewer-manifest-view .report-detailed .shop-floor-table td strong {
  color: var(--manifest-text, #f8fafc);
}

[data-theme="light"] .viewer-manifest-view .report-gantt .shop-floor-table td strong,
body.theme-light .viewer-manifest-view .report-gantt .shop-floor-table td strong,
html.light .viewer-manifest-view .report-gantt .shop-floor-table td strong,
html:not(.dark) .viewer-manifest-view .report-gantt .shop-floor-table td strong {
  color: #0f172a;
}

/* ==========================================================================
   UNIFIED SHOP FLOOR SUMMARY PANEL (Consolidated KPIs, Bay Breakdown, Legend)
   ========================================================================== */
.viewer-manifest-view .shop-floor-unified-summary-panel {
  display: flex !important;
  flex-direction: column !important;
  background: var(--manifest-card-bg, #181b26) !important;
  border: 1px solid var(--manifest-border, #334155) !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18) !important;
  margin-top: 8px !important;
  margin-bottom: 6px !important;
  overflow: hidden !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

[data-theme="light"] .viewer-manifest-view .shop-floor-unified-summary-panel,
body.theme-light .viewer-manifest-view .shop-floor-unified-summary-panel,
html.light .viewer-manifest-view .shop-floor-unified-summary-panel,
html:not(.dark) .viewer-manifest-view .shop-floor-unified-summary-panel {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
}

/* Tier 1: KPIs inside Unified Panel (0 blank margins, uniform padding) */
.viewer-manifest-view .shop-floor-unified-summary-panel .shop-floor-kpis {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  background: transparent !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 1024px) {
  .viewer-manifest-view .shop-floor-unified-summary-panel .shop-floor-kpis {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  }
}

/* Tier 2: Bay Summary Strip inside Unified Panel (Subtle top divider, 0 outer margin, uniform padding) */
.viewer-manifest-view .shop-floor-unified-summary-panel .viewer-bay-summary-strip {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 6px 10px !important;
  border-top: 1px solid var(--manifest-border, #334155) !important;
  background: rgba(15, 23, 42, 0.4) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

[data-theme="light"] .viewer-manifest-view .shop-floor-unified-summary-panel .viewer-bay-summary-strip,
body.theme-light .viewer-manifest-view .shop-floor-unified-summary-panel .viewer-bay-summary-strip,
html.light .viewer-manifest-view .shop-floor-unified-summary-panel .viewer-bay-summary-strip,
html:not(.dark) .viewer-manifest-view .shop-floor-unified-summary-panel .viewer-bay-summary-strip {
  border-top: 1px solid #e2e8f0 !important;
  background: #f8fafc !important;
}

.viewer-manifest-view .shop-floor-unified-summary-panel .viewer-bay-summary-card {
  flex: 1 1 200px !important;
  min-width: 0 !important;
  padding: 6px 12px !important;
  border-radius: 5px !important;
  box-sizing: border-box !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

/* Tier 3: Health Status Filter / Info Section inside Unified Panel */
.viewer-manifest-view .shop-floor-unified-summary-panel .viewer-health-filter-grid {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 6px 10px !important;
  border-top: 1px solid var(--manifest-border, #334155) !important;
  background: rgba(15, 23, 42, 0.5) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

[data-theme="light"] .viewer-manifest-view .shop-floor-unified-summary-panel .viewer-health-filter-grid,
body.theme-light .viewer-manifest-view .shop-floor-unified-summary-panel .viewer-health-filter-grid,
html.light .viewer-manifest-view .shop-floor-unified-summary-panel .viewer-health-filter-grid,
html:not(.dark) .viewer-manifest-view .shop-floor-unified-summary-panel .viewer-health-filter-grid {
  border-top: 1px solid #e2e8f0 !important;
  background: #f8fafc !important;
}

.viewer-manifest-view .shop-floor-unified-summary-panel .viewer-health-card {
  padding: 4px 8px !important;
  min-height: 42px !important;
  border-radius: 5px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease !important;
}

.viewer-manifest-view .shop-floor-unified-summary-panel .viewer-health-card:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25) !important;
}

.viewer-manifest-view .shop-floor-unified-summary-panel .viewer-health-card.active-filter {
  outline: 2px solid var(--accent, #6366f1) !important;
  outline-offset: -1px !important;
  box-shadow: 0 0 0 2px var(--accent, #6366f1), 0 4px 14px rgba(99, 102, 241, 0.45) !important;
  background: rgba(99, 102, 241, 0.18) !important;
  transform: translateY(-1px) !important;
}

.viewer-manifest-view .shop-floor-unified-summary-panel .viewer-health-card.card-behind.active-filter {
  outline: 2px solid #ef4444 !important;
  box-shadow: 0 0 0 2px #ef4444, 0 4px 14px rgba(239, 68, 68, 0.45) !important;
  background: rgba(239, 68, 68, 0.18) !important;
}

.viewer-manifest-view .shop-floor-unified-summary-panel .viewer-health-card.card-risk.active-filter {
  outline: 2px solid #f59e0b !important;
  box-shadow: 0 0 0 2px #f59e0b, 0 4px 14px rgba(245, 158, 11, 0.45) !important;
  background: rgba(245, 158, 11, 0.18) !important;
}

.viewer-manifest-view .shop-floor-unified-summary-panel .viewer-health-card.card-ontrack.active-filter {
  outline: 2px solid #10b981 !important;
  box-shadow: 0 0 0 2px #10b981, 0 4px 14px rgba(16, 185, 129, 0.45) !important;
  background: rgba(16, 185, 129, 0.18) !important;
}

.viewer-manifest-view .shop-floor-unified-summary-panel .viewer-health-card.card-ahead.active-filter {
  outline: 2px solid #06b6d4 !important;
  box-shadow: 0 0 0 2px #06b6d4, 0 4px 14px rgba(6, 182, 212, 0.45) !important;
  background: rgba(6, 182, 212, 0.18) !important;
}

.viewer-manifest-view .shop-floor-unified-summary-panel .viewer-health-card.card-mismatch.active-filter {
  outline: 2px solid #f97316 !important;
  box-shadow: 0 0 0 2px #f97316, 0 4px 14px rgba(249, 115, 22, 0.45) !important;
  background: rgba(249, 115, 22, 0.18) !important;
}

.viewer-manifest-view .shop-floor-unified-summary-panel .viewer-health-card.card-complete.active-filter {
  outline: 2px solid #3b82f6 !important;
  box-shadow: 0 0 0 2px #3b82f6, 0 4px 14px rgba(59, 130, 246, 0.45) !important;
  background: rgba(59, 130, 246, 0.18) !important;
}

.viewer-manifest-view .shop-floor-unified-summary-panel .viewer-health-card .health-card-body {
  min-width: 0 !important;
  flex: 1 !important;
}

.viewer-manifest-view .shop-floor-unified-summary-panel .viewer-health-card .health-card-title {
  font-size: 9.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.1 !important;
  margin-bottom: 2px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.viewer-manifest-view .shop-floor-unified-summary-panel .viewer-health-card .health-card-metric-row {
  display: flex !important;
  align-items: baseline !important;
  gap: 5px !important;
  line-height: 1 !important;
}

.viewer-manifest-view .shop-floor-unified-summary-panel .viewer-health-card .health-card-value {
  font-family: var(--font-mono, monospace) !important;
  font-size: 14.5px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.viewer-manifest-view .shop-floor-unified-summary-panel .viewer-health-card .health-card-sub {
  font-size: 9.5px !important;
  font-weight: 600 !important;
  color: var(--manifest-text-muted, #94a3b8) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

[data-theme="light"] .viewer-manifest-view .shop-floor-unified-summary-panel .viewer-health-card .health-card-sub,
body.theme-light .viewer-manifest-view .shop-floor-unified-summary-panel .viewer-health-card .health-card-sub,
html.light .viewer-manifest-view .shop-floor-unified-summary-panel .viewer-health-card .health-card-sub,
html:not(.dark) .viewer-manifest-view .shop-floor-unified-summary-panel .viewer-health-card .health-card-sub {
  color: #64748b !important;
}

.viewer-manifest-view .shop-floor-unified-summary-panel .viewer-health-card .health-card-icon {
  font-size: 15px !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}

@media (max-width: 1200px) {
  .viewer-manifest-view .shop-floor-unified-summary-panel .viewer-health-filter-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* Tier 4: Global Stage Legend inside Unified Panel (Subtle top divider, no double border, 0 outer margin) */
.viewer-manifest-view .shop-floor-unified-summary-panel .shop-floor-global-legend {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px 16px !important;
  margin: 0 !important;
  padding: 6px 14px !important;
  border: none !important;
  border-top: 1px solid var(--manifest-border, #334155) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: rgba(17, 24, 39, 0.6) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

[data-theme="light"] .viewer-manifest-view .shop-floor-unified-summary-panel .shop-floor-global-legend,
body.theme-light .viewer-manifest-view .shop-floor-unified-summary-panel .shop-floor-global-legend,
html.light .viewer-manifest-view .shop-floor-unified-summary-panel .shop-floor-global-legend,
html:not(.dark) .viewer-manifest-view .shop-floor-unified-summary-panel .shop-floor-global-legend {
  border-top: 1px solid #e2e8f0 !important;
  background: #f1f5f9 !important;
}

/* Standalone / Fallback Viewer Mode KPI Cards */
.viewer-manifest-view .shop-floor-kpis {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-top: 8px !important;
  margin-bottom: 6px !important;
}

@media (max-width: 1024px) {
  .viewer-manifest-view .shop-floor-kpis {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  }
}

.viewer-manifest-view .shop-floor-kpi-card {
  min-width: 0 !important;
  box-sizing: border-box !important;
  background: var(--manifest-kpi-bg, #181b26) !important;
  border: 1px solid var(--manifest-border, #334155) !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.15s ease;
  overflow: hidden !important;
}

.viewer-manifest-view .shop-floor-kpi-card .k-label,
.viewer-manifest-view .shop-floor-kpi-card .kpi-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: var(--manifest-text-muted, #94a3b8) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.viewer-manifest-view .shop-floor-kpi-card .k-val,
.viewer-manifest-view .shop-floor-kpi-card .kpi-val {
  font-size: 18px !important;
  font-weight: 800 !important;
  font-family: var(--font-mono, monospace) !important;
  color: var(--manifest-text, #f8fafc) !important;
  margin-top: 2px !important;
  margin-bottom: 1px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.viewer-manifest-view .shop-floor-kpi-card .k-sub,
.viewer-manifest-view .shop-floor-kpi-card .kpi-sub {
  font-size: 10px !important;
  color: var(--manifest-text-muted, #94a3b8) !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Paint Highlight Card - Dark Mode */
.viewer-manifest-view .shop-floor-kpi-card.kpi-paint-highlight {
  background: rgba(37, 99, 235, 0.18) !important;
  border: 1px solid rgba(59, 130, 246, 0.5) !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25) !important;
}

.viewer-manifest-view .shop-floor-kpi-card.kpi-paint-highlight .k-label,
.viewer-manifest-view .shop-floor-kpi-card.kpi-paint-highlight .kpi-label {
  color: #60a5fa !important;
}

.viewer-manifest-view .shop-floor-kpi-card.kpi-paint-highlight .k-val,
.viewer-manifest-view .shop-floor-kpi-card.kpi-paint-highlight .kpi-val {
  color: #93c5fd !important;
}

.viewer-manifest-view .shop-floor-kpi-card.kpi-paint-highlight .k-sub,
.viewer-manifest-view .shop-floor-kpi-card.kpi-paint-highlight .kpi-sub {
  color: #93c5fd !important;
}

/* Light Theme: Viewer Mode KPI Cards */
[data-theme="light"] .viewer-manifest-view .shop-floor-kpi-card,
body.theme-light .viewer-manifest-view .shop-floor-kpi-card,
html.light .viewer-manifest-view .shop-floor-kpi-card,
html:not(.dark) .viewer-manifest-view .shop-floor-kpi-card {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
}

[data-theme="light"] .viewer-manifest-view .shop-floor-kpi-card .kpi-label,
body.theme-light .viewer-manifest-view .shop-floor-kpi-card .kpi-label,
html.light .viewer-manifest-view .shop-floor-kpi-card .kpi-label,
html:not(.dark) .viewer-manifest-view .shop-floor-kpi-card .kpi-label {
  color: #64748b !important;
}

[data-theme="light"] .viewer-manifest-view .shop-floor-kpi-card .kpi-val,
body.theme-light .viewer-manifest-view .shop-floor-kpi-card .kpi-val,
html.light .viewer-manifest-view .shop-floor-kpi-card .kpi-val,
html:not(.dark) .viewer-manifest-view .shop-floor-kpi-card .kpi-val {
  color: #0f172a !important;
}

[data-theme="light"] .viewer-manifest-view .shop-floor-kpi-card .kpi-sub,
body.theme-light .viewer-manifest-view .shop-floor-kpi-card .kpi-sub,
html.light .viewer-manifest-view .shop-floor-kpi-card .kpi-sub,
html:not(.dark) .viewer-manifest-view .shop-floor-kpi-card .kpi-sub {
  color: #64748b !important;
}

/* Paint Highlight Card - Light Mode */
[data-theme="light"] .viewer-manifest-view .shop-floor-kpi-card.kpi-paint-highlight,
body.theme-light .viewer-manifest-view .shop-floor-kpi-card.kpi-paint-highlight,
html.light .viewer-manifest-view .shop-floor-kpi-card.kpi-paint-highlight,
html:not(.dark) .viewer-manifest-view .shop-floor-kpi-card.kpi-paint-highlight {
  background: #eff6ff !important;
  border: 1px solid #93c5fd !important;
  box-shadow: 0 1px 4px rgba(37, 99, 235, 0.12) !important;
}

[data-theme="light"] .viewer-manifest-view .shop-floor-kpi-card.kpi-paint-highlight .kpi-label,
body.theme-light .viewer-manifest-view .shop-floor-kpi-card.kpi-paint-highlight .kpi-label,
html.light .viewer-manifest-view .shop-floor-kpi-card.kpi-paint-highlight .kpi-label,
html:not(.dark) .viewer-manifest-view .shop-floor-kpi-card.kpi-paint-highlight .kpi-label {
  color: #1d4ed8 !important;
}

[data-theme="light"] .viewer-manifest-view .shop-floor-kpi-card.kpi-paint-highlight .kpi-val,
body.theme-light .viewer-manifest-view .shop-floor-kpi-card.kpi-paint-highlight .kpi-val,
html.light .viewer-manifest-view .shop-floor-kpi-card.kpi-paint-highlight .kpi-val,
html:not(.dark) .viewer-manifest-view .shop-floor-kpi-card.kpi-paint-highlight .kpi-val {
  color: #1e40af !important;
}

[data-theme="light"] .viewer-manifest-view .shop-floor-kpi-card.kpi-paint-highlight .kpi-sub,
body.theme-light .viewer-manifest-view .shop-floor-kpi-card.kpi-paint-highlight .kpi-sub,
html.light .viewer-manifest-view .shop-floor-kpi-card.kpi-paint-highlight .kpi-sub,
html:not(.dark) .viewer-manifest-view .shop-floor-kpi-card.kpi-paint-highlight .kpi-sub {
  color: #2563eb !important;
}

/* Universal Global Stage Legend in Viewer Mode (Covers Gantt, Detailed, and Timeline Reports) */
.viewer-manifest-view .shop-floor-global-legend {
  background: var(--manifest-card-bg, #181b26) !important;
  border: 1px solid var(--manifest-border, #334155) !important;
  color: var(--manifest-text, #f8fafc) !important;
  border-radius: 6px !important;
  padding: 6px 14px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px 16px !important;
  margin-top: 0 !important;
  margin-bottom: 8px !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.viewer-manifest-view .viewer-bay-summary-strip + .shop-floor-global-legend,
.viewer-bay-summary-strip + .shop-floor-global-legend {
  margin-top: 0 !important;
}

.viewer-manifest-view .shop-floor-global-legend .global-legend-title {
  color: var(--manifest-text, #f8fafc) !important;
  font-weight: 800 !important;
  font-size: 11.5px !important;
}

.viewer-manifest-view .shop-floor-global-legend .shop-floor-legend-item {
  color: var(--manifest-text-muted, #cbd5e1) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

/* Light Theme Overrides for Legend Bar */
[data-theme="light"] .viewer-manifest-view .shop-floor-global-legend,
body.theme-light .viewer-manifest-view .shop-floor-global-legend,
html.light .viewer-manifest-view .shop-floor-global-legend,
html:not(.dark) .viewer-manifest-view .shop-floor-global-legend {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
}

[data-theme="light"] .viewer-manifest-view .shop-floor-global-legend .global-legend-title,
body.theme-light .viewer-manifest-view .shop-floor-global-legend .global-legend-title,
html.light .viewer-manifest-view .shop-floor-global-legend .global-legend-title,
html:not(.dark) .viewer-manifest-view .shop-floor-global-legend .global-legend-title {
  color: #0f172a !important;
}

[data-theme="light"] .viewer-manifest-view .shop-floor-global-legend .shop-floor-legend-item,
body.theme-light .viewer-manifest-view .shop-floor-global-legend .shop-floor-legend-item,
html.light .viewer-manifest-view .shop-floor-global-legend .shop-floor-legend-item,
html:not(.dark) .viewer-manifest-view .shop-floor-global-legend .shop-floor-legend-item {
  color: #475569 !important;
}

/* Bay Standby / Idle Card in Viewer Mode */
.shop-floor-bay-idle {
  grid-column: 1 / -1;
  width: 100%;
  box-sizing: border-box;
  background: rgba(30, 41, 59, 0.45);
  border: 1.5px dashed rgba(148, 163, 184, 0.3);
  border-radius: 6px;
  padding: 24px 12px;
  text-align: center;
  color: var(--manifest-text-muted, #94a3b8);
  margin: 4px 0;
}

.shop-floor-bay-idle .idle-title {
  color: var(--manifest-text, #f8fafc);
  font-size: 12.5px;
  font-weight: 800;
  display: block;
}

.shop-floor-bay-idle .idle-sub {
  margin: 4px 0 0 0;
  font-size: 11px;
  color: var(--manifest-text-muted, #94a3b8);
}

[data-theme="light"] .shop-floor-bay-idle,
body.theme-light .shop-floor-bay-idle,
html.light .shop-floor-bay-idle,
html:not(.dark) .shop-floor-bay-idle {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #64748b;
}

[data-theme="light"] .shop-floor-bay-idle .idle-title,
body.theme-light .shop-floor-bay-idle .idle-title,
html.light .shop-floor-bay-idle .idle-title,
html:not(.dark) .shop-floor-bay-idle .idle-title {
  color: #0f172a;
}

[data-theme="light"] .shop-floor-bay-idle .idle-sub,
body.theme-light .shop-floor-bay-idle .idle-sub,
html.light .shop-floor-bay-idle .idle-sub,
html:not(.dark) .shop-floor-bay-idle .idle-sub {
  color: #64748b;
}

/* Master Timeline Report in Viewer Mode */
.viewer-manifest-view .shop-floor-doc.report-timeline {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 18px 24px !important;
  box-sizing: border-box;
  min-height: 100%;
  background: transparent;
  overflow-x: auto;
}

.viewer-manifest-view .shop-floor-timeline-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.viewer-manifest-view .shop-floor-timeline-table thead tr {
  background: var(--manifest-table-header-bg, #090d16);
  color: var(--manifest-table-header-text, #f8fafc);
}

[data-theme="light"] .viewer-manifest-view .shop-floor-timeline-table thead tr,
body.theme-light .viewer-manifest-view .shop-floor-timeline-table thead tr,
html.light .viewer-manifest-view .shop-floor-timeline-table thead tr,
html:not(.dark) .viewer-manifest-view .shop-floor-timeline-table thead tr {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

[data-theme="light"] .viewer-manifest-view .shop-floor-timeline-table thead th,
body.theme-light .viewer-manifest-view .shop-floor-timeline-table thead th,
html.light .viewer-manifest-view .shop-floor-timeline-table thead th,
html:not(.dark) .viewer-manifest-view .shop-floor-timeline-table thead th {
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

.timeline-batch-card {
  background: var(--manifest-card-bg, #1e293b);
  border: 1px solid var(--manifest-border, #334155);
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  transition: all 0.15s ease;
}

[data-theme="light"] .timeline-batch-card,
body.theme-light .timeline-batch-card,
html.light .timeline-batch-card,
html:not(.dark) .timeline-batch-card {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
}

.timeline-batch-stages-strip {
  display: flex;
  align-items: center;
  gap: 8px 14px;
  font-size: 10px;
  font-family: var(--font-mono, monospace);
  margin: 4px 0 6px 0;
  flex-wrap: wrap;
  background: rgba(0, 0, 0, 0.22);
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

[data-theme="light"] .timeline-batch-stages-strip,
body.theme-light .timeline-batch-stages-strip,
html.light .timeline-batch-stages-strip,
html:not(.dark) .timeline-batch-stages-strip {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

.timeline-week-track-container {
  position: relative;
  width: 100%;
  height: 26px;
  background: rgba(0, 0, 0, 0.32);
  border-radius: 4px;
  border: 1px solid var(--manifest-border, #334155);
  overflow: hidden;
}

[data-theme="light"] .timeline-week-track-container,
body.theme-light .timeline-week-track-container,
html.light .timeline-week-track-container,
html:not(.dark) .timeline-week-track-container {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}

.timeline-day-grid-lines {
  position: absolute;
  inset: 0;
  display: flex;
  pointer-events: none;
}

.timeline-day-grid-lines .day-line {
  flex: 1;
  border-right: 1px dashed rgba(255, 255, 255, 0.08);
  height: 100%;
}

.timeline-day-grid-lines .day-line.weekend-line {
  background: rgba(255, 255, 255, 0.02);
}

[data-theme="light"] .timeline-day-grid-lines .day-line,
body.theme-light .timeline-day-grid-lines .day-line,
html.light .timeline-day-grid-lines .day-line,
html:not(.dark) .timeline-day-grid-lines .day-line {
  border-right-color: rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .timeline-day-grid-lines .day-line.weekend-line,
body.theme-light .timeline-day-grid-lines .day-line.weekend-line,
html.light .timeline-day-grid-lines .day-line.weekend-line,
html:not(.dark) .timeline-day-grid-lines .day-line.weekend-line {
  background: rgba(0, 0, 0, 0.03) !important;
}

/* Dedicated A3 Landscape Print Layout for Gantt View */
body.printing-shop-floor-schedule.format-a3-wide,
.exporting-pdf.format-a3-wide {
  width: 1480px !important;
  max-width: 1480px !important;
  margin: 0 auto !important;
  background: #ffffff !important;
  color: #0f172a !important;
}

body.printing-shop-floor-schedule.format-a3-wide .shop-floor-bays-row,
.exporting-pdf.format-a3-wide .shop-floor-bays-row {
  display: flex !important;
  flex-direction: row !important;
  gap: 12px !important;
  width: 100% !important;
  align-items: stretch !important;
}

body.printing-shop-floor-schedule.format-a3-wide .shop-floor-bay-column,
.exporting-pdf.format-a3-wide .shop-floor-bay-column {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  page-break-inside: avoid !important;
  break-inside: avoid !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
}

body.printing-shop-floor-schedule.format-a3-wide .shop-floor-bay-loads,
.exporting-pdf.format-a3-wide .shop-floor-bay-loads {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  background: #f8fafc !important;
}

body.printing-shop-floor-schedule.format-a3-wide .shop-floor-load,
.exporting-pdf.format-a3-wide .shop-floor-load {
  page-break-inside: avoid !important;
  break-inside: avoid !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
}

/* ==========================================================================
   VIEWER ROLE - RESPONSIVE MOBILE & TABLET OPTIMIZATION
   Optimized for phones (360px-480px), small tablets (600px-768px), and iPad/tablets (up to 900px).
   Preserves 100% desktop fidelity and print layouts untouched.
   ========================================================================== */

/* Swipe Affordance Hint (Hidden by default on Desktop and Print) */
.viewer-table-scroll-hint {
  display: none;
}

/* 1. Small Tablets and Large Handhelds (<= 900px) */
@media (max-width: 900px) {
  .viewer-manifest-toolbar {
    padding: 6px 12px;
    gap: 6px 10px;
  }

  .viewer-manifest-view .shop-floor-unified-summary-panel .viewer-health-filter-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
  }

  .viewer-manifest-view .shop-floor-unified-summary-panel .viewer-health-card:last-child {
    grid-column: span 1 !important;
  }

  .viewer-manifest-view .shop-floor-unified-summary-panel .shop-floor-kpis,
  .viewer-manifest-view .simple-kpis-strip {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }
}

/* 2. Tablets and Mobile Phones (<= 768px) */
@media (max-width: 768px) {
  /* Hide print/pdf format selector on mobile/tablet devices */
  .viewer-toolbar-group.viewer-group-pdf-format,
  .viewer-group-pdf-format {
    display: none !important;
  }

  /* Compact Sticky Toolbar */
  .viewer-manifest-toolbar {
    padding: 6px 10px !important;
    min-height: 44px !important;
    gap: 6px 8px !important;
    position: sticky !important;
    top: var(--app-header-height, 50px) !important;
  }

  .viewer-toolbar-left {
    gap: 6px 8px !important;
    flex: 1 1 auto !important;
  }

  .viewer-toolbar-group {
    gap: 4px !important;
  }

  .viewer-wc-stepper {
    height: 34px !important;
  }

  .viewer-btn-step {
    min-width: 32px !important;
    height: 34px !important;
    padding: 0 8px !important;
    font-size: 0.85rem !important;
    touch-action: manipulation !important;
  }

  .viewer-select {
    height: 34px !important;
    font-size: 0.82rem !important;
    padding: 0 6px !important;
  }

  .viewer-icon-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    touch-action: manipulation !important;
  }

  .viewer-toolbar-right {
    gap: 5px !important;
    margin-left: auto !important;
  }

  .viewer-live-badge {
    font-size: 0.65rem !important;
    padding: 2px 6px !important;
    height: 22px !important;
  }

  /* Reclaim Screen Real Estate: Scale Down Viewport and Sheet Padding */
  .viewer-manifest-viewport {
    padding: 8px 6px 16px 6px !important;
  }

  .viewer-manifest-sheet {
    border-radius: 6px !important;
    box-shadow: none !important;
    border: 1px solid var(--manifest-border, #334155) !important;
  }

  .viewer-manifest-view .shop-floor-doc.report-simple-list,
  .viewer-manifest-view .report-gantt,
  .viewer-manifest-view .report-timeline {
    padding: 10px 8px !important;
  }

  /* Responsive Document Header */
  .viewer-manifest-view .simple-manifest-top {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  .viewer-facility-logo-container {
    max-height: 26px !important;
  }

  .viewer-facility-logo-img {
    max-height: 26px !important;
  }

  /* Active Weeks Quick Strip - Smooth Touch Scroll */
  .viewer-quick-weeks-strip {
    padding: 6px 8px !important;
    gap: 6px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
  }

  .viewer-week-chip {
    padding: 5px 9px !important;
    font-size: 11px !important;
    touch-action: manipulation !important;
  }

  /* Unified Summary Panel */
  .viewer-manifest-view .shop-floor-unified-summary-panel {
    border-radius: 6px !important;
    margin-top: 6px !important;
    margin-bottom: 6px !important;
  }

  /* Tier 1 KPIs: 3 Columns on Tablet */
  .viewer-manifest-view .shop-floor-unified-summary-panel .shop-floor-kpis,
  .viewer-manifest-view .simple-kpis-strip {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    padding: 6px 8px !important;
    margin-top: 6px !important;
    margin-bottom: 6px !important;
  }

  .viewer-manifest-view .shop-floor-kpi-card,
  .viewer-manifest-view .simple-kpi-pill {
    padding: 6px 8px !important;
    border-radius: 5px !important;
  }

  .viewer-manifest-view .shop-floor-kpi-card .k-label,
  .viewer-manifest-view .simple-kpi-pill .k-label {
    font-size: 9.5px !important;
    letter-spacing: 0.3px !important;
  }

  .viewer-manifest-view .shop-floor-kpi-card .k-val,
  .viewer-manifest-view .simple-kpi-pill .k-val {
    font-size: 16px !important;
    margin-top: 1px !important;
    margin-bottom: 1px !important;
  }

  .viewer-manifest-view .shop-floor-kpi-card .k-sub,
  .viewer-manifest-view .simple-kpi-pill .k-sub {
    font-size: 9.5px !important;
  }

  /* Tier 2 Bay Summary: Full-Width Stack */
  .viewer-manifest-view .shop-floor-unified-summary-panel .viewer-bay-summary-strip,
  .viewer-bay-summary-strip {
    flex-direction: column !important;
    gap: 5px !important;
    padding: 6px 8px !important;
  }

  .viewer-manifest-view .shop-floor-unified-summary-panel .viewer-bay-summary-card,
  .viewer-bay-summary-card {
    flex: 1 1 100% !important;
    width: 100% !important;
    padding: 6px 8px !important;
  }

  /* Tier 3 Health Filters: 3 Columns */
  .viewer-manifest-view .shop-floor-unified-summary-panel .viewer-health-filter-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 5px !important;
    padding: 6px 8px !important;
  }

  .viewer-manifest-view .shop-floor-unified-summary-panel .viewer-health-card {
    padding: 5px 6px !important;
    min-height: 44px !important;
    touch-action: manipulation !important;
  }

  .viewer-manifest-view .shop-floor-unified-summary-panel .viewer-health-card:last-child {
    grid-column: span 3 !important;
  }

  .viewer-manifest-view .shop-floor-unified-summary-panel .viewer-health-card .health-card-title {
    font-size: 9px !important;
  }

  .viewer-manifest-view .shop-floor-unified-summary-panel .viewer-health-card .health-card-value {
    font-size: 14px !important;
  }

  .viewer-manifest-view .shop-floor-unified-summary-panel .viewer-health-card .health-card-sub {
    display: none !important;
  }

  /* Tier 4 Legend */
  .viewer-manifest-view .shop-floor-unified-summary-panel .shop-floor-global-legend,
  .shop-floor-global-legend {
    flex-wrap: wrap !important;
    gap: 4px 10px !important;
    padding: 6px 8px !important;
    font-size: 10.5px !important;
    justify-content: flex-start !important;
  }

  /* Table Swipe Affordance */
  .viewer-table-scroll-hint {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--accent, #a78bfa);
    background: rgba(99, 102, 241, 0.08);
    border: 1px dashed rgba(99, 102, 241, 0.3);
    border-radius: 6px;
    padding: 5px 8px;
    margin: 6px 0 !important;
    text-align: center;
    user-select: none;
  }

  [data-theme="light"] .viewer-table-scroll-hint,
  body.theme-light .viewer-table-scroll-hint,
  html.light .viewer-table-scroll-hint,
  html:not(.dark) .viewer-table-scroll-hint {
    background: #e0e7ff !important;
    border-color: #a5b4fc !important;
    color: #4338ca !important;
  }

  /* Horizontal Touch-Scroll for Simple List Table */
  .viewer-manifest-view .simple-list-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
    margin-top: 6px !important;
    margin-bottom: 6px !important;
    max-width: 100% !important;
  }

  .viewer-manifest-view .simple-list-table {
    min-width: 600px !important;
  }

  .viewer-manifest-view .simple-list-table thead th {
    padding: 8px 10px !important;
    font-size: 11px !important;
  }

  .viewer-manifest-view .simple-list-table tbody td {
    padding: 8px 10px !important;
    font-size: 12px !important;
  }

  .viewer-manifest-view .simple-list-table tbody tr.bay-group-header-row td {
    padding: 7px 10px !important;
    font-size: 12px !important;
  }

  .viewer-manifest-view .simple-list-table tfoot td {
    padding: 9px 10px !important;
    font-size: 12px !important;
  }

  /* Gantt Schedule Bay Columns: Single Column Stack */
  .viewer-manifest-view .report-gantt .shop-floor-bays-row,
  .viewer-manifest-view .report-detailed .shop-floor-bays-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 8px !important;
  }

  .viewer-manifest-view .report-gantt .shop-floor-bay-column,
  .viewer-manifest-view .report-detailed .shop-floor-bay-column {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Timeline View: Horizontal Swipe Week View */
  .viewer-manifest-view .shop-floor-timeline-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
    max-width: 100% !important;
    margin-top: 6px !important;
  }

  .viewer-manifest-view .shop-floor-timeline-table {
    min-width: 760px !important;
    table-layout: fixed !important;
  }

  .viewer-manifest-view .report-timeline {
    overflow-x: visible !important;
  }
}

/* 3. Smartphones (<= 480px) */
@media (max-width: 480px) {
  /* Toolbar: Hide text labels ("Week:", "Line:", "View:") to keep only emoji icons, saving massive width */
  .viewer-toolbar-label strong {
    display: none !important;
  }

  .viewer-toolbar-group {
    gap: 2px !important;
  }

  .viewer-wc-stepper {
    height: 32px !important;
  }

  .viewer-btn-step {
    min-width: 26px !important;
    height: 32px !important;
    padding: 0 4px !important;
  }

  .viewer-select {
    height: 32px !important;
    font-size: 0.76rem !important;
    padding: 0 4px !important;
    max-width: 120px !important;
  }

  .viewer-icon-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
  }

  .viewer-live-badge {
    font-size: 0.6rem !important;
    padding: 2px 5px !important;
    height: 20px !important;
  }

  /* Viewport and Sheet Padding: Minimal borders to maximize display area */
  .viewer-manifest-viewport {
    padding: 4px 2px 10px 2px !important;
  }

  .viewer-manifest-view .shop-floor-doc.report-simple-list,
  .viewer-manifest-view .report-gantt,
  .viewer-manifest-view .report-timeline {
    padding: 8px 4px !important;
  }

  .viewer-facility-logo-container {
    max-height: 22px !important;
  }

  .viewer-facility-logo-img {
    max-height: 22px !important;
  }

  /* KPIs: 2 Columns on Phone */
  .viewer-manifest-view .shop-floor-unified-summary-panel .shop-floor-kpis,
  .viewer-manifest-view .simple-kpis-strip {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 4px !important;
    padding: 4px !important;
  }

  .viewer-manifest-view .shop-floor-kpi-card,
  .viewer-manifest-view .simple-kpi-pill {
    padding: 5px 6px !important;
  }

  .viewer-manifest-view .shop-floor-kpi-card .k-label,
  .viewer-manifest-view .simple-kpi-pill .k-label {
    font-size: 8.5px !important;
  }

  .viewer-manifest-view .shop-floor-kpi-card .k-val,
  .viewer-manifest-view .simple-kpi-pill .k-val {
    font-size: 14.5px !important;
  }

  .viewer-manifest-view .shop-floor-kpi-card .k-sub,
  .viewer-manifest-view .simple-kpi-pill .k-sub {
    font-size: 8.5px !important;
  }

  /* Health Filter Grid: 2 Columns on Phone with 7th card spanning 2 columns */
  .viewer-manifest-view .shop-floor-unified-summary-panel .viewer-health-filter-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 4px !important;
    padding: 4px !important;
  }

  .viewer-manifest-view .shop-floor-unified-summary-panel .viewer-health-card {
    padding: 4px 6px !important;
    min-height: 40px !important;
  }

  .viewer-manifest-view .shop-floor-unified-summary-panel .viewer-health-card:last-child {
    grid-column: span 2 !important;
  }

  .viewer-manifest-view .shop-floor-unified-summary-panel .viewer-health-card .health-card-title {
    font-size: 8.5px !important;
  }

  .viewer-manifest-view .shop-floor-unified-summary-panel .viewer-health-card .health-card-value {
    font-size: 13.5px !important;
  }

  .viewer-manifest-view .shop-floor-unified-summary-panel .viewer-health-card .health-card-icon {
    font-size: 13px !important;
  }

  /* Table */
  .viewer-manifest-view .simple-list-table {
    min-width: 550px !important;
  }

  .viewer-table-scroll-hint {
    font-size: 10px !important;
    padding: 4px 6px !important;
  }

  .viewer-week-chip {
    padding: 4px 7px !important;
    font-size: 10px !important;
  }
}

/* ==========================================================================
   Password Policy, Strength Meter & Requirement Checklist Styles
   ========================================================================== */
.password-strength-container {
  margin-top: 0.45rem;
  margin-bottom: 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.password-strength-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.74rem;
}

.password-strength-label {
  font-weight: 700;
  transition: color 0.2s ease;
}

.password-strength-bar-track {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 9999px;
  overflow: hidden;
  position: relative;
}

.password-strength-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: 9999px;
  transition: width 0.25s ease, background-color 0.25s ease;
}

.password-checklist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.35rem 0.75rem;
  margin-top: 0.5rem;
  margin-bottom: 0.75rem;
  padding: 0.6rem 0.75rem;
  background: rgba(15, 23, 42, 0.45);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm, 6px);
}

.password-checklist-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  transition: color 0.15s ease;
}

.password-checklist-item.passed {
  color: #22c55e;
}

.password-checklist-item.failed {
  color: #94a3b8;
}

.password-check-icon {
  font-size: 0.8rem;
  font-weight: 800;
  width: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.password-checklist-item.passed .password-check-icon {
  color: #22c55e;
}

.password-checklist-item.failed .password-check-icon {
  color: #64748b;
}

.readonly-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(148, 163, 184, 0.12);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.25);
  margin-left: 0.35rem;
  vertical-align: middle;
}

.input-locked {
  background-color: rgba(15, 23, 42, 0.55) !important;
  color: #94a3b8 !important;
  cursor: not-allowed !important;
  border-color: rgba(148, 163, 184, 0.2) !important;
  user-select: none;
}

/* Password Restrictions Admin Pane Cards */
.policy-admin-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.policy-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.85rem;
}

.policy-option-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 0.85rem;
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  gap: 0.75rem;
}

.policy-option-row label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-main);
  cursor: pointer;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.policy-option-row label small {
  font-size: 0.72rem;
  font-weight: normal;
  color: var(--text-muted);
}

/* Locked System Identifier Monospace Chip */
.locked-id-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  font-size: 0.78rem;
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-color);
  padding: 2px 6px;
  border-radius: var(--radius-sm, 4px);
  color: var(--text-main);
  letter-spacing: 0.3px;
}

/* ==========================================================================
   VISUAL SSO APPLICATION CARDS & MODULE LAUNCHPAD (CLICK-ANYWHERE LAUNCH)
   ========================================================================== */
.sso-app-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.22);
  cursor: pointer;
  user-select: none;
  outline: none;
  transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.26s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.26s ease;
}

.sso-app-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 42px -8px rgba(0, 0, 0, 0.45);
}

.sso-app-card:active {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}

.sso-app-card:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 3px;
}

/* ============================================================
   BRAND-SPECIFIC ACCENT AND AMBIENT PERSONALITIES
   ============================================================ */

/* CoatLogic: Neon Magenta & Electric Fuchsia */
.sso-app-card[data-client-id="coatlogic"] {
  background: linear-gradient(180deg, rgba(236, 72, 153, 0.04) 0%, rgba(15, 23, 42, 0.98) 40%, #0b0f19 100%);
}
.sso-app-card[data-client-id="coatlogic"] .sso-card-brand-kicker {
  color: #ec4899;
}
.sso-app-card[data-client-id="coatlogic"]:hover {
  border-color: rgba(236, 72, 153, 0.7);
  box-shadow: 0 24px 52px -10px rgba(236, 72, 153, 0.32), 0 0 0 1px rgba(236, 72, 153, 0.45);
}
.sso-app-card[data-client-id="coatlogic"] .sso-card-emblem-badge {
  border-color: rgba(236, 72, 153, 0.65);
  box-shadow: 0 14px 36px -4px rgba(236, 72, 153, 0.48), inset 0 1px 1px rgba(255, 255, 255, 0.3);
  background: radial-gradient(circle at 50% 30%, rgba(236, 72, 153, 0.22) 0%, rgba(15, 23, 42, 0.95) 75%);
}
.sso-app-card[data-client-id="coatlogic"]:hover .sso-card-emblem-badge {
  border-color: rgba(236, 72, 153, 0.95);
  box-shadow: 0 18px 44px -2px rgba(236, 72, 153, 0.65), 0 0 24px rgba(236, 72, 153, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.4);
}
.sso-app-card[data-client-id="coatlogic"]:hover .sso-card-title {
  color: #ffffff;
  text-shadow: 0 0 20px rgba(236, 72, 153, 0.5);
}
.sso-app-card[data-client-id="coatlogic"]:hover .sso-card-launch-bar {
  background: rgba(236, 72, 153, 0.1);
}
.sso-app-card[data-client-id="coatlogic"] .sso-launch-arrow {
  background: rgba(236, 72, 153, 0.18);
  border-color: rgba(244, 114, 182, 0.45);
  color: #fbcfe8;
}
.sso-app-card[data-client-id="coatlogic"]:hover .sso-launch-arrow {
  background: #db2777;
  border-color: #f472b6;
  color: #ffffff;
  box-shadow: 0 0 16px rgba(236, 72, 153, 0.55);
}
.sso-app-card[data-client-id="coatlogic"] .sso-launch-dot {
  background: #ec4899;
  box-shadow: 0 0 8px #ec4899;
}

/* FabriCAT: Laser Cyan & Electric Sky */
.sso-app-card[data-client-id="fabricat"] {
  background: linear-gradient(180deg, rgba(6, 182, 212, 0.04) 0%, rgba(15, 23, 42, 0.98) 40%, #0b0f19 100%);
}
.sso-app-card[data-client-id="fabricat"] .sso-card-brand-kicker {
  color: #38bdf8;
}
.sso-app-card[data-client-id="fabricat"]:hover {
  border-color: rgba(6, 182, 212, 0.7);
  box-shadow: 0 24px 52px -10px rgba(6, 182, 212, 0.32), 0 0 0 1px rgba(6, 182, 212, 0.45);
}
.sso-app-card[data-client-id="fabricat"] .sso-card-emblem-badge {
  border-color: rgba(6, 182, 212, 0.65);
  box-shadow: 0 14px 36px -4px rgba(6, 182, 212, 0.48), inset 0 1px 1px rgba(255, 255, 255, 0.3);
  background: radial-gradient(circle at 50% 30%, rgba(6, 182, 212, 0.22) 0%, rgba(15, 23, 42, 0.95) 75%);
}
.sso-app-card[data-client-id="fabricat"]:hover .sso-card-emblem-badge {
  border-color: rgba(6, 182, 212, 0.95);
  box-shadow: 0 18px 44px -2px rgba(6, 182, 212, 0.65), 0 0 24px rgba(6, 182, 212, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.4);
}
.sso-app-card[data-client-id="fabricat"]:hover .sso-card-title {
  color: #ffffff;
  text-shadow: 0 0 20px rgba(6, 182, 212, 0.5);
}
.sso-app-card[data-client-id="fabricat"]:hover .sso-card-launch-bar {
  background: rgba(6, 182, 212, 0.1);
}
.sso-app-card[data-client-id="fabricat"] .sso-launch-arrow {
  background: rgba(6, 182, 212, 0.18);
  border-color: rgba(56, 189, 248, 0.45);
  color: #bae6fd;
}
.sso-app-card[data-client-id="fabricat"]:hover .sso-launch-arrow {
  background: #0284c7;
  border-color: #38bdf8;
  color: #ffffff;
  box-shadow: 0 0 16px rgba(6, 182, 212, 0.55);
}
.sso-app-card[data-client-id="fabricat"] .sso-launch-dot {
  background: #06b6d4;
  box-shadow: 0 0 8px #06b6d4;
}

/* SteelTrack: Logistics Mint & Transit Emerald */
.sso-app-card[data-client-id="steeltrack"] {
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.04) 0%, rgba(15, 23, 42, 0.98) 40%, #0b0f19 100%);
}
.sso-app-card[data-client-id="steeltrack"] .sso-card-brand-kicker {
  color: #34d399;
}
.sso-app-card[data-client-id="steeltrack"]:hover {
  border-color: rgba(16, 185, 129, 0.7);
  box-shadow: 0 24px 52px -10px rgba(16, 185, 129, 0.32), 0 0 0 1px rgba(16, 185, 129, 0.45);
}
.sso-app-card[data-client-id="steeltrack"] .sso-card-emblem-badge {
  border-color: rgba(16, 185, 129, 0.65);
  box-shadow: 0 14px 36px -4px rgba(16, 185, 129, 0.48), inset 0 1px 1px rgba(255, 255, 255, 0.3);
  background: radial-gradient(circle at 50% 30%, rgba(16, 185, 129, 0.22) 0%, rgba(15, 23, 42, 0.95) 75%);
}
.sso-app-card[data-client-id="steeltrack"]:hover .sso-card-emblem-badge {
  border-color: rgba(16, 185, 129, 0.95);
  box-shadow: 0 18px 44px -2px rgba(16, 185, 129, 0.65), 0 0 24px rgba(16, 185, 129, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.4);
}
.sso-app-card[data-client-id="steeltrack"]:hover .sso-card-title {
  color: #ffffff;
  text-shadow: 0 0 20px rgba(16, 185, 129, 0.5);
}
.sso-app-card[data-client-id="steeltrack"]:hover .sso-card-launch-bar {
  background: rgba(16, 185, 129, 0.1);
}
.sso-app-card[data-client-id="steeltrack"] .sso-launch-arrow {
  background: rgba(16, 185, 129, 0.18);
  border-color: rgba(52, 211, 153, 0.45);
  color: #a7f3d0;
}
.sso-app-card[data-client-id="steeltrack"]:hover .sso-launch-arrow {
  background: #059669;
  border-color: #34d399;
  color: #ffffff;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.55);
}
.sso-app-card[data-client-id="steeltrack"] .sso-launch-dot {
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
}

/* Dynamic Per-Satellite App Accent & Glow Personality via CSS Custom Properties */
.sso-app-card[style*="--app-accent"] {
  background: linear-gradient(180deg, rgba(var(--app-accent-rgb, 99, 102, 241), 0.05) 0%, rgba(15, 23, 42, 0.98) 40%, #0b0f19 100%);
  border-color: rgba(var(--app-accent-rgb, 99, 102, 241), 0.28);
}
.sso-app-card[style*="--app-accent"] .sso-card-brand-kicker {
  color: var(--app-accent, #818cf8);
}
.sso-app-card[style*="--app-accent"]:hover {
  border-color: rgba(var(--app-accent-rgb, 99, 102, 241), 0.75);
  box-shadow: 0 24px 52px -10px rgba(var(--app-accent-rgb, 99, 102, 241), 0.36), 0 0 0 1px rgba(var(--app-accent-rgb, 99, 102, 241), 0.5);
}
.sso-app-card[style*="--app-accent"] .sso-card-emblem-badge {
  border-color: rgba(var(--app-accent-rgb, 99, 102, 241), 0.68);
  box-shadow: 0 14px 36px -4px rgba(var(--app-accent-rgb, 99, 102, 241), 0.48), inset 0 1px 1px rgba(255, 255, 255, 0.3);
  background: radial-gradient(circle at 50% 30%, rgba(var(--app-accent-rgb, 99, 102, 241), 0.24) 0%, rgba(15, 23, 42, 0.95) 75%);
}
.sso-app-card[style*="--app-accent"]:hover .sso-card-emblem-badge {
  border-color: var(--app-accent, #6366f1);
  box-shadow: 0 18px 44px -2px rgba(var(--app-accent-rgb, 99, 102, 241), 0.65), 0 0 24px rgba(var(--app-accent-rgb, 99, 102, 241), 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.4);
}
.sso-app-card[style*="--app-accent"]:hover .sso-card-title {
  color: #ffffff;
  text-shadow: 0 0 20px rgba(var(--app-accent-rgb, 99, 102, 241), 0.52);
}
.sso-app-card[style*="--app-accent"]:hover .sso-card-launch-bar {
  background: rgba(var(--app-accent-rgb, 99, 102, 241), 0.12);
}
.sso-app-card[style*="--app-accent"] .sso-launch-arrow {
  background: rgba(var(--app-accent-rgb, 99, 102, 241), 0.2);
  border-color: rgba(var(--app-accent-rgb, 99, 102, 241), 0.52);
  color: #ffffff;
  box-shadow: 0 0 12px rgba(var(--app-accent-rgb, 99, 102, 241), 0.22);
}
.sso-app-card[style*="--app-accent"]:hover .sso-launch-arrow {
  background: var(--app-accent, #6366f1);
  border-color: var(--app-accent, #6366f1);
  color: #ffffff;
  box-shadow: 0 0 18px rgba(var(--app-accent-rgb, 99, 102, 241), 0.62);
}
.sso-app-card[style*="--app-accent"] .sso-launch-dot {
  background: var(--app-accent, #6366f1);
  box-shadow: 0 0 8px var(--app-accent, #6366f1);
}
.module-color-swatch:hover {
  transform: scale(1.12);
}
.module-color-swatch.active {
  border-color: #ffffff !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35), 0 0 12px currentColor;
  transform: scale(1.12);
}

/* Hero Backdrop Banner */
.sso-card-hero {
  position: relative;
  height: 185px;
  width: 100%;
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  overflow: visible;
  transition: filter 0.3s ease;
}

.sso-app-card:hover .sso-card-hero {
  filter: brightness(1.08);
}

.sso-card-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.1) 0%, rgba(15, 23, 42, 0.0) 25%, rgba(15, 23, 42, 0.32) 75%, rgba(15, 23, 42, 0.7) 100%);
  pointer-events: none;
  border-radius: 16px 16px 0 0;
}

.sso-card-hero-top {
  position: absolute;
  top: 14px;
  left: 16px;
  right: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 2;
}

.sso-status-badge {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.22);
  color: #34d399;
  border: 1px solid rgba(52, 211, 153, 0.45);
  backdrop-filter: blur(8px);
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.sso-edit-branding-btn {
  background: rgba(15, 23, 42, 0.82);
  color: #f1f5f9;
  border: 1px solid rgba(255, 255, 255, 0.28);
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  backdrop-filter: blur(8px);
  transition: all 0.18s ease;
  z-index: 5;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.sso-edit-branding-btn:hover {
  background: #4f46e5;
  border-color: #a5b4fc;
  color: #ffffff;
  transform: translateY(-1px) scale(1.04);
}

/* Floating Logo Emblem Pedestal Badge */
.sso-card-emblem-badge {
  position: absolute;
  bottom: -44px;
  left: 24px;
  width: 92px;
  height: 92px;
  border-radius: 22px;
  border: 2px solid rgba(255, 255, 255, 0.32);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.3);
  background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  backdrop-filter: blur(12px);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease, border-color 0.28s ease;
}

.sso-app-card:hover .sso-card-emblem-badge {
  transform: translateY(-4px) scale(1.06);
}

.sso-card-emblem-badge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sso-card-emblem-badge.svg-icon img {
  object-fit: contain;
  padding: 8px;
  width: 100%;
  height: 100%;
}

.sso-card-emblem-initials {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.5rem;
  color: #ffffff;
}

/* Card Body Content */
.sso-card-body {
  padding: 56px 24px 20px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.sso-card-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.sso-card-brand-header {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sso-card-brand-kicker {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #94a3b8;
  transition: color 0.2s ease;
}

.sso-card-title {
  margin: 0;
  font-size: 1.68rem;
  font-weight: 800;
  color: var(--text-main, #f8fafc);
  letter-spacing: -0.03em;
  line-height: 1.2;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

.sso-card-byline {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-muted, #94a3b8);
  letter-spacing: 0.02em;
}

.sso-card-byline .brand-owner {
  color: #a5b4fc;
  font-weight: 700;
}

.sso-card-id {
  font-size: 0.7rem;
  font-family: var(--font-mono, monospace);
  color: var(--text-muted, #94a3b8);
  background: rgba(0, 0, 0, 0.24);
  padding: 3px 7px;
  border-radius: 5px;
  border: 1px solid var(--border-color);
  white-space: nowrap;
  letter-spacing: 0.2px;
}

.sso-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sso-tag {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
}

.sso-tag.company-tag {
  background: rgba(148, 163, 184, 0.14);
  color: #cbd5e1;
  border: 1px solid rgba(203, 213, 225, 0.22);
}

.sso-card-description {
  font-size: 0.88rem;
  color: var(--text-muted, #94a3b8);
  margin: 0;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Streamlined Operational Scope Footprint */
.sso-card-scope-box {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 0.5rem 0.8rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.sso-scope-header {
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: var(--text-main);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sso-scope-label {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.sso-scope-count {
  color: #34d399;
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  font-size: 0.72rem;
}

.sso-scope-text {
  line-height: 1.35;
  color: #cbd5e1;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  font-size: 0.76rem;
}

/* Click-Anywhere Launch Bar */
.sso-card-launch-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.2rem;
  border-top: 1px solid var(--border-color);
  background: rgba(0, 0, 0, 0.18);
  margin-top: auto;
  transition: background 0.2s ease;
}

.sso-app-card:hover .sso-card-launch-bar {
  background: rgba(255, 255, 255, 0.03);
}

.sso-launch-hint {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: color 0.15s ease;
}

.sso-app-card:hover .sso-launch-hint {
  color: var(--text-main);
}

.sso-launch-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 6px #10b981;
}

.sso-launch-arrow {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 999px;
  background: rgba(99, 102, 241, 0.15);
  border: 1px solid rgba(165, 180, 252, 0.35);
  color: #c7d2fe;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.02em;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.sso-app-card:hover .sso-launch-arrow {
  transform: translateX(4px);
}

/* Light Mode Overrides for SSO Module Cards */
body.theme-light .sso-app-card,
[data-theme="light"] .sso-app-card {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

body.theme-light .sso-card-hero-overlay,
[data-theme="light"] .sso-card-hero-overlay {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.08) 0%, rgba(15, 23, 42, 0.0) 30%, rgba(255, 255, 255, 0.35) 75%, rgba(255, 255, 255, 0.9) 100%);
}

body.theme-light .sso-card-emblem-badge,
[data-theme="light"] .sso-card-emblem-badge {
  background: linear-gradient(145deg, #ffffff 0%, #f1f5f9 100%);
  border-color: rgba(203, 213, 225, 0.85);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.12), inset 0 1px 1px #ffffff;
}

body.theme-light .sso-card-title,
[data-theme="light"] .sso-card-title {
  color: #0f172a;
}

body.theme-light .sso-card-byline,
[data-theme="light"] .sso-card-byline {
  color: #64748b;
}

body.theme-light .sso-card-description,
[data-theme="light"] .sso-card-description {
  color: #475569;
}

body.theme-light .sso-card-scope-box,
[data-theme="light"] .sso-card-scope-box {
  background: #f8fafc;
  border-color: #e2e8f0;
}

body.theme-light .sso-scope-text,
[data-theme="light"] .sso-scope-text {
  color: #475569;
}

body.theme-light .sso-card-launch-bar,
[data-theme="light"] .sso-card-launch-bar {
  background: #f8fafc;
  border-top-color: #e2e8f0;
}

body.theme-light .sso-card-byline .brand-owner,
[data-theme="light"] .sso-card-byline .brand-owner {
  color: #4f46e5;
  font-weight: 700;
}

body.theme-light .sso-card-id,
[data-theme="light"] .sso-card-id {
  background: #f1f5f9;
  color: #475569;
  border-color: #cbd5e1;
}

body.theme-light .sso-tag.company-tag,
[data-theme="light"] .sso-tag.company-tag {
  background: #f1f5f9;
  color: #334155;
  border-color: #cbd5e1;
}

body.theme-light .sso-card-emblem-badge,
[data-theme="light"] .sso-card-emblem-badge {
  background: #0f172a;
  border-color: rgba(255, 255, 255, 0.3);
}

body.theme-light .sso-app-card[data-client-id="coatlogic"] .sso-card-brand-kicker,
[data-theme="light"] .sso-app-card[data-client-id="coatlogic"] .sso-card-brand-kicker {
  color: #db2777;
}
body.theme-light .sso-app-card[data-client-id="fabricat"] .sso-card-brand-kicker,
[data-theme="light"] .sso-app-card[data-client-id="fabricat"] .sso-card-brand-kicker {
  color: #0284c7;
}
body.theme-light .sso-app-card[data-client-id="steeltrack"] .sso-card-brand-kicker,
[data-theme="light"] .sso-app-card[data-client-id="steeltrack"] .sso-card-brand-kicker {
  color: #059669;
}

body.theme-light .sso-app-card[data-client-id="coatlogic"] .sso-launch-arrow,
[data-theme="light"] .sso-app-card[data-client-id="coatlogic"] .sso-launch-arrow {
  background: rgba(236, 72, 153, 0.12);
  border-color: rgba(236, 72, 153, 0.4);
  color: #be185d;
}
body.theme-light .sso-app-card[data-client-id="fabricat"] .sso-launch-arrow,
[data-theme="light"] .sso-app-card[data-client-id="fabricat"] .sso-launch-arrow {
  background: rgba(6, 182, 212, 0.12);
  border-color: rgba(6, 182, 212, 0.4);
  color: #0369a1;
}
body.theme-light .sso-app-card[data-client-id="steeltrack"] .sso-launch-arrow,
[data-theme="light"] .sso-app-card[data-client-id="steeltrack"] .sso-launch-arrow {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.4);
  color: #047857;
}

body.theme-light .sso-app-card[style*="--app-accent"] .sso-card-brand-kicker,
[data-theme="light"] .sso-app-card[style*="--app-accent"] .sso-card-brand-kicker {
  color: var(--app-accent, #4f46e5);
}

body.theme-light .sso-app-card[style*="--app-accent"] .sso-launch-arrow,
[data-theme="light"] .sso-app-card[style*="--app-accent"] .sso-launch-arrow {
  background: rgba(var(--app-accent-rgb, 99, 102, 241), 0.14);
  border-color: rgba(var(--app-accent-rgb, 99, 102, 241), 0.45);
  color: var(--app-accent, #4f46e5);
}

body.theme-light .sso-app-card[style*="--app-accent"]:hover .sso-launch-arrow,
[data-theme="light"] .sso-app-card[style*="--app-accent"]:hover .sso-launch-arrow {
  background: var(--app-accent, #4f46e5);
  border-color: var(--app-accent, #4f46e5);
  color: #ffffff;
  box-shadow: 0 0 16px rgba(var(--app-accent-rgb, 99, 102, 241), 0.45);
}

body.theme-light .sso-app-card .sso-launch-hint,
[data-theme="light"] .sso-app-card .sso-launch-hint {
  color: #64748b;
}

/* ==========================================================================
   PLATFORM OWNER MODULE MANAGEMENT UI (PANE APPS & EDIT MODAL)
   ========================================================================== */
.module-admin-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.module-admin-card:hover {
  border-color: rgba(99, 102, 241, 0.4);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.module-admin-hero {
  position: relative;
  height: 95px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.module-admin-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.2) 0%, rgba(15, 23, 42, 0.85) 100%);
}

.module-admin-badge {
  position: absolute;
  bottom: -18px;
  left: 14px;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 2px solid var(--bg-card);
  background: #1e293b;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  z-index: 2;
}

.module-admin-body {
  padding: 22px 14px 14px 14px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.preset-chip-btn {
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 0.72rem;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.preset-chip-btn:hover {
  background: rgba(99, 102, 241, 0.2);
  color: #a5b4fc;
  border-color: rgba(165, 180, 252, 0.4);
}

/* ==========================================================================
   EDIT MODULE MODAL & LAUNCHPAD BRANDING MODAL - BRANDING & SETTINGS DESIGN SYSTEM
   ========================================================================== */
#editModuleModal .modal-content,
#editLaunchpadBrandingModal .modal-content {
  max-width: min(980px, 95vw) !important;
  width: min(980px, 95vw) !important;
  max-height: 92vh !important;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.75);
}

#editModuleModal .modal-header,
#editLaunchpadBrandingModal .modal-header {
  padding: 1.15rem 1.75rem;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-color);
}

#editModuleModal .modal-body,
#editLaunchpadBrandingModal .modal-body {
  padding: 1.25rem 1.5rem;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 1.25rem;
  align-items: start;
  background: var(--bg-card);
}

@media (max-width: 900px) {
  #editModuleModal .modal-body,
  #editLaunchpadBrandingModal .modal-body {
    grid-template-columns: 1fr;
  }
}

#editModuleModal .modal-footer,
#editLaunchpadBrandingModal .modal-footer {
  padding: 1.1rem 1.75rem;
  background: var(--bg-card);
  border-top: 1px solid var(--border-color);
}

#editModuleModal .module-config-card,
#editLaunchpadBrandingModal .module-config-card {
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

#editModuleModal .module-preview-panel,
#editLaunchpadBrandingModal .module-preview-panel {
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  position: sticky;
  top: 0;
}

#editModuleModal .module-section-title,
#editLaunchpadBrandingModal .module-section-title {
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

#editModuleModal .form-label,
#editLaunchpadBrandingModal .form-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}

#editModuleModal .form-hint,
#editLaunchpadBrandingModal .form-hint {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
  display: block;
}

#editModuleModal .module-status-toggle-card,
#editLaunchpadBrandingModal .module-status-toggle-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  cursor: pointer;
  background: var(--bg-card-subtle);
  transition: all 0.15s ease;
}

#editModuleModal .module-status-toggle-card:hover,
#editLaunchpadBrandingModal .module-status-toggle-card:hover {
  border-color: var(--color-primary, #6366f1);
  background: rgba(99, 102, 241, 0.06);
}

/* Light Mode Overrides for Edit Module & Launchpad Branding Modals */
[data-theme="light"] #editModuleModal .modal-content,
html.light #editModuleModal .modal-content,
html:not(.dark) #editModuleModal .modal-content,
[data-theme="light"] #editLaunchpadBrandingModal .modal-content,
html.light #editLaunchpadBrandingModal .modal-content,
html:not(.dark) #editLaunchpadBrandingModal .modal-content {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.25);
}

[data-theme="light"] #editModuleModal .modal-header,
html.light #editModuleModal .modal-header,
html:not(.dark) #editModuleModal .modal-header,
[data-theme="light"] #editModuleModal .modal-footer,
html.light #editModuleModal .modal-footer,
html:not(.dark) #editModuleModal .modal-footer,
[data-theme="light"] #editLaunchpadBrandingModal .modal-header,
html.light #editLaunchpadBrandingModal .modal-header,
html:not(.dark) #editLaunchpadBrandingModal .modal-header,
[data-theme="light"] #editLaunchpadBrandingModal .modal-footer,
html.light #editLaunchpadBrandingModal .modal-footer,
html:not(.dark) #editLaunchpadBrandingModal .modal-footer {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}

[data-theme="light"] #editModuleModal .modal-body,
html.light #editModuleModal .modal-body,
html:not(.dark) #editModuleModal .modal-body,
[data-theme="light"] #editLaunchpadBrandingModal .modal-body,
html.light #editLaunchpadBrandingModal .modal-body,
html:not(.dark) #editLaunchpadBrandingModal .modal-body {
  background: #f8fafc !important;
}

[data-theme="light"] #editModuleModal .module-config-card,
html.light #editModuleModal .module-config-card,
html:not(.dark) #editModuleModal .module-config-card,
[data-theme="light"] #editModuleModal .module-preview-panel,
html.light #editModuleModal .module-preview-panel,
html:not(.dark) #editModuleModal .module-preview-panel,
[data-theme="light"] #editLaunchpadBrandingModal .module-config-card,
html.light #editLaunchpadBrandingModal .module-config-card,
html:not(.dark) #editLaunchpadBrandingModal .module-config-card,
[data-theme="light"] #editLaunchpadBrandingModal .module-preview-panel,
html.light #editLaunchpadBrandingModal .module-preview-panel,
html:not(.dark) #editLaunchpadBrandingModal .module-preview-panel {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] #editModuleModal .form-control,
html.light #editModuleModal .form-control,
html:not(.dark) #editModuleModal .form-control,
[data-theme="light"] #editLaunchpadBrandingModal .form-control,
html.light #editLaunchpadBrandingModal .form-control,
html:not(.dark) #editLaunchpadBrandingModal .form-control {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

[data-theme="light"] #editModuleModal .form-control:focus,
html.light #editModuleModal .form-control:focus,
html:not(.dark) #editModuleModal .form-control:focus,
[data-theme="light"] #editLaunchpadBrandingModal .form-control:focus,
html.light #editLaunchpadBrandingModal .form-control:focus,
html:not(.dark) #editLaunchpadBrandingModal .form-control:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
}

[data-theme="light"] #editModuleModal .form-label,
html.light #editModuleModal .form-label,
html:not(.dark) #editModuleModal .form-label,
[data-theme="light"] #editLaunchpadBrandingModal .form-label,
html.light #editLaunchpadBrandingModal .form-label,
html:not(.dark) #editLaunchpadBrandingModal .form-label {
  color: #1e293b !important;
}

[data-theme="light"] #editModuleModal .module-section-title,
html.light #editModuleModal .module-section-title,
html:not(.dark) #editModuleModal .module-section-title,
[data-theme="light"] #editLaunchpadBrandingModal .module-section-title,
html.light #editLaunchpadBrandingModal .module-section-title,
html:not(.dark) #editLaunchpadBrandingModal .module-section-title {
  color: #475569 !important;
}

[data-theme="light"] #editModuleModal .form-hint,
html.light #editModuleModal .form-hint,
html:not(.dark) #editModuleModal .form-hint,
[data-theme="light"] #editLaunchpadBrandingModal .form-hint,
html.light #editLaunchpadBrandingModal .form-hint,
html:not(.dark) #editLaunchpadBrandingModal .form-hint {
  color: #64748b !important;
}

[data-theme="light"] #editModuleModal .preset-chip-btn,
html.light #editModuleModal .preset-chip-btn,
html:not(.dark) #editModuleModal .preset-chip-btn,
[data-theme="light"] .preset-chip-btn,
html.light .preset-chip-btn,
html:not(.dark) .preset-chip-btn {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #475569 !important;
}

[data-theme="light"] #editModuleModal .preset-chip-btn:hover,
html.light #editModuleModal .preset-chip-btn:hover,
html:not(.dark) #editModuleModal .preset-chip-btn:hover,
[data-theme="light"] .preset-chip-btn:hover,
html.light .preset-chip-btn:hover,
html:not(.dark) .preset-chip-btn:hover {
  background: #e0e7ff !important;
  border-color: #818cf8 !important;
  color: #4338ca !important;
}

[data-theme="light"] #editModuleModal .module-status-toggle-card,
html.light #editModuleModal .module-status-toggle-card,
html:not(.dark) #editModuleModal .module-status-toggle-card {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
}

[data-theme="light"] #editModuleModal .module-status-toggle-card:hover,
html.light #editModuleModal .module-status-toggle-card:hover,
html:not(.dark) #editModuleModal .module-status-toggle-card:hover {
  background: #f0fdf4 !important;
  border-color: #86efac !important;
}

/* ==========================================================================
   UNIVERSAL LOGO TRANSPARENCY - ZERO RECTANGULAR BOXES / CONTAINERS
   Ensures Digital-3A logo floats with transparent alpha silhouette everywhere
   ========================================================================== */
.brand-wrapper img,
.brand-logo,
.auth-brand-logo,
.auth-emblem-wrap img,
.auth-hero-emblem,
.branding-header-preview-bar img,
.brand-preview-logo,
.brand-icon-img,
#appHeaderLogo,
#authHeroEmblem,
#modalBrandLogo,
#headerPreviewLogo,
.sso-company-avatar img,
img[src*="logo.png"] {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Drop shadow follows the actual transparent alpha silhouette */
.brand-logo,
.auth-brand-logo,
#appHeaderLogo {
  filter: drop-shadow(0 2px 8px rgba(124, 58, 237, 0.3));
}

[data-theme="light"] .brand-logo,
[data-theme="light"] .auth-brand-logo,
[data-theme="light"] #appHeaderLogo,
body.theme-light .brand-logo,
body.theme-light .auth-brand-logo,
body.theme-light #appHeaderLogo,
html.light .brand-logo,
html.light .auth-brand-logo,
html.light #appHeaderLogo {
  filter: drop-shadow(0 2px 6px rgba(15, 23, 42, 0.18));
}

/* Standalone .btn-outline Definition */
.btn-outline {
  background: transparent;
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.2));
  color: var(--text-main, #f1f5f9);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-sm, 6px);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.btn-outline:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.35);
  color: #ffffff;
}

[data-theme="light"] .btn-outline,
body.theme-light .btn-outline,
html.light .btn-outline {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #334155;
}

[data-theme="light"] .btn-outline:hover,
body.theme-light .btn-outline:hover,
html.light .btn-outline:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
}

/* ==========================================================================
   AUTH GATE SCREEN - FLOATING THEME TOGGLE & LIGHT / DARK COMPATIBILITY
   ========================================================================== */
.auth-gate-theme-toggle {
  position: fixed;
  top: 1.25rem;
  right: 1.5rem;
  z-index: 100000;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #cbd5e1;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.auth-gate-theme-toggle:hover {
  background: rgba(30, 41, 59, 0.92);
  border-color: rgba(165, 180, 252, 0.55);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
}

.auth-theme-icon-sun {
  display: inline-block;
  font-size: 0.95rem;
  line-height: 1;
}

.auth-theme-icon-moon {
  display: none;
  font-size: 0.95rem;
  line-height: 1;
}

/* Light Mode Overrides for Auth Gate Screen & Theme Toggle */
[data-theme="light"] .auth-gate-theme-toggle,
body.theme-light .auth-gate-theme-toggle,
html.light .auth-gate-theme-toggle {
  background: rgba(255, 255, 255, 0.92);
  border-color: #cbd5e1;
  color: #1e293b;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .auth-gate-theme-toggle:hover,
body.theme-light .auth-gate-theme-toggle:hover,
html.light .auth-gate-theme-toggle:hover {
  background: #ffffff;
  border-color: #94a3b8;
  color: #0f172a;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.14);
}

[data-theme="light"] .auth-theme-icon-sun,
body.theme-light .auth-theme-icon-sun,
html.light .auth-theme-icon-sun {
  display: none;
}

[data-theme="light"] .auth-theme-icon-moon,
body.theme-light .auth-theme-icon-moon,
html.light .auth-theme-icon-moon {
  display: inline-block;
}

[data-theme="light"] .auth-gate-screen,
body.theme-light .auth-gate-screen,
html.light .auth-gate-screen {
  background-color: #f1f5f9;
  color: #0f172a;

  /* CAD Blueprint & Ambient Glow Tokens (Light Mode Architectural Drafting Theme) */
  --cad-grid-stroke: rgba(15, 23, 42, 0.055);
  --cad-line-slate: rgba(51, 65, 85, 0.16);
  --cad-line-slate-strong: rgba(30, 41, 59, 0.22);
  --cad-line-cyan: rgba(2, 132, 199, 0.24);
  --cad-line-purple: rgba(124, 58, 237, 0.20);
  --cad-line-pink: rgba(219, 39, 119, 0.18);
  --cad-glow-left-1: #9333ea;
  --cad-glow-left-1-opacity: 0.11;
  --cad-glow-left-2: #ec4899;
  --cad-glow-left-2-opacity: 0.06;
  --cad-glow-right-1: #6366f1;
  --cad-glow-right-1-opacity: 0.10;
  --cad-glow-fade: #f1f5f9;
}

[data-theme="light"] .auth-gate-bg,
body.theme-light .auth-gate-bg,
html.light .auth-gate-bg {
  opacity: 1;
  background-image:
    linear-gradient(to right, var(--cad-grid-stroke) 1px, transparent 1px),
    linear-gradient(to bottom, var(--cad-grid-stroke) 1px, transparent 1px),
    radial-gradient(circle at 28% 45%, rgba(147, 51, 234, 0.09) 0%, rgba(236, 72, 153, 0.05) 38%, transparent 70%),
    radial-gradient(circle at 75% 50%, rgba(99, 102, 241, 0.08) 0%, transparent 65%);
}

[data-theme="light"] .auth-cad-svg,
body.theme-light .auth-cad-svg,
html.light .auth-cad-svg {
  filter: none;
  opacity: 1;
}

[data-theme="light"] .auth-hero-title,
body.theme-light .auth-hero-title,
html.light .auth-hero-title {
  color: #0f172a;
  text-shadow: none;
}

[data-theme="light"] .auth-hero-subtitle,
body.theme-light .auth-hero-subtitle,
html.light .auth-hero-subtitle {
  color: #4f46e5;
}

[data-theme="light"] .auth-hero-tagline,
body.theme-light .auth-hero-tagline,
html.light .auth-hero-tagline {
  color: #475569;
}

[data-theme="light"] .auth-card,
body.theme-light .auth-card,
html.light .auth-card {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.1), 0 0 25px rgba(99, 102, 241, 0.06);
}

[data-theme="light"] .auth-card-title,
body.theme-light .auth-card-title,
html.light .auth-card-title {
  color: #0f172a;
}

[data-theme="light"] .auth-label,
body.theme-light .auth-label,
html.light .auth-label {
  color: #334155;
}

[data-theme="light"] .auth-input,
body.theme-light .auth-input,
html.light .auth-input {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #0f172a;
}

[data-theme="light"] .auth-input:focus,
body.theme-light .auth-input:focus,
html.light .auth-input:focus {
  background: #ffffff;
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}

[data-theme="light"] .auth-input::placeholder,
body.theme-light .auth-input::placeholder,
html.light .auth-input::placeholder {
  color: #94a3b8;
}

[data-theme="light"] .auth-demo-hint,
body.theme-light .auth-demo-hint,
html.light .auth-demo-hint {
  background: rgba(124, 58, 237, 0.06);
  border-color: rgba(124, 58, 237, 0.35);
  color: #475569;
}

[data-theme="light"] .auth-demo-hint:hover,
body.theme-light .auth-demo-hint:hover,
html.light .auth-demo-hint:hover {
  background: rgba(124, 58, 237, 0.12);
  border-color: #7c3aed;
  color: #1e293b;
}

[data-theme="light"] .auth-forgot-link,
body.theme-light .auth-forgot-link,
html.light .auth-forgot-link {
  color: #64748b;
}

[data-theme="light"] .auth-forgot-link:hover,
body.theme-light .auth-forgot-link:hover,
html.light .auth-forgot-link:hover {
  color: #7c3aed;
}

[data-theme="light"] .auth-footer-text,
body.theme-light .auth-footer-text,
html.light .auth-footer-text {
  color: #64748b;
}

[data-theme="light"] .auth-pin-input,
body.theme-light .auth-pin-input,
html.light .auth-pin-input {
  background: #f8fafc;
  border-color: #7c3aed;
  color: #0f172a;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}

/* ==========================================================================
   SSO CLIENT BRANDING CARD, ACTIVE SESSION PROMPT & ALERT (DARK + LIGHT MODE)
   ========================================================================== */
.sso-client-branding-card {
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.14), rgba(124, 58, 237, 0.08));
  border: 1px solid rgba(99, 102, 241, 0.32);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 20px;
  text-align: center;
}

.sso-client-branding-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(99, 102, 241, 0.2);
  border: 1px solid rgba(99, 102, 241, 0.4);
  margin-bottom: 8px;
  font-size: 22px;
}

.sso-client-branding-kicker {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: #818cf8;
  margin-bottom: 2px;
}

.sso-client-branding-title {
  font-size: 20px;
  font-weight: 800;
  color: #f8fafc;
  margin: 0 0 4px 0;
}

.sso-client-branding-desc {
  font-size: 12px;
  color: #94a3b8;
}

.sso-client-branding-callback {
  margin-top: 8px;
  font-size: 11px;
  color: #64748b;
  font-family: monospace;
}

.sso-invalid-alert-card {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 18px;
  color: #fca5a5;
  font-size: 12px;
  line-height: 1.5;
}

.sso-invalid-alert-sub {
  margin-top: 4px;
  font-size: 11px;
  color: #cbd5e1;
}

.sso-active-session-card {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 14px;
  padding: 22px;
  text-align: center;
  margin-bottom: 15px;
}

.sso-active-session-kicker {
  font-size: 11px;
  text-transform: uppercase;
  color: #94a3b8;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.sso-active-session-name {
  font-size: 18px;
  font-weight: 700;
  color: #f8fafc;
  margin-top: 2px;
}

.sso-active-session-email {
  font-size: 13px;
  color: #64748b;
  margin-bottom: 18px;
}

.sso-switch-account-btn {
  width: 100%;
  padding: 10px;
  background: rgba(30, 41, 59, 0.8);
  color: #94a3b8;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.18s ease;
}

/* Light Mode Overrides for SSO Client Branding, Active Session & Gate Text */
[data-theme="light"] .sso-client-branding-card,
body.theme-light .sso-client-branding-card,
html.light .sso-client-branding-card {
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.08), rgba(124, 58, 237, 0.05));
  border-color: rgba(79, 70, 229, 0.28);
}

[data-theme="light"] .sso-client-branding-icon,
body.theme-light .sso-client-branding-icon,
html.light .sso-client-branding-icon {
  background: rgba(79, 70, 229, 0.12);
  border-color: rgba(79, 70, 229, 0.32);
}

[data-theme="light"] .sso-client-branding-kicker,
body.theme-light .sso-client-branding-kicker,
html.light .sso-client-branding-kicker {
  color: #4f46e5;
}

[data-theme="light"] .sso-client-branding-title,
body.theme-light .sso-client-branding-title,
html.light .sso-client-branding-title {
  color: #0f172a;
}

[data-theme="light"] .sso-client-branding-desc,
body.theme-light .sso-client-branding-desc,
html.light .sso-client-branding-desc {
  color: #334155;
}

[data-theme="light"] .sso-client-branding-callback,
body.theme-light .sso-client-branding-callback,
html.light .sso-client-branding-callback {
  color: #475569;
}

[data-theme="light"] .sso-invalid-alert-card,
body.theme-light .sso-invalid-alert-card,
html.light .sso-invalid-alert-card {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

[data-theme="light"] .sso-invalid-alert-sub,
body.theme-light .sso-invalid-alert-sub,
html.light .sso-invalid-alert-sub {
  color: #7f1d1d;
}

[data-theme="light"] .sso-active-session-card,
body.theme-light .sso-active-session-card,
html.light .sso-active-session-card {
  background: #f8fafc;
  border-color: #cbd5e1;
}

[data-theme="light"] .sso-active-session-kicker,
body.theme-light .sso-active-session-kicker,
html.light .sso-active-session-kicker {
  color: #4f46e5;
}

[data-theme="light"] .sso-active-session-name,
body.theme-light .sso-active-session-name,
html.light .sso-active-session-name {
  color: #0f172a;
}

[data-theme="light"] .sso-active-session-email,
body.theme-light .sso-active-session-email,
html.light .sso-active-session-email {
  color: #475569;
}

[data-theme="light"] .sso-switch-account-btn,
body.theme-light .sso-switch-account-btn,
html.light .sso-switch-account-btn {
  background: #ffffff;
  color: #334155;
  border-color: #cbd5e1;
}

[data-theme="light"] .sso-switch-account-btn:hover,
body.theme-light .sso-switch-account-btn:hover,
html.light .sso-switch-account-btn:hover {
  background: #f1f5f9;
  color: #0f172a;
  border-color: #94a3b8;
}

[data-theme="light"] #gateDefaultSubtitle,
body.theme-light #gateDefaultSubtitle,
html.light #gateDefaultSubtitle {
  color: #475569 !important;
}

[data-theme="light"] #gateMfaEmailLabel,
body.theme-light #gateMfaEmailLabel,
html.light #gateMfaEmailLabel,
[data-theme="light"] #gateInviteFacilityName,
body.theme-light #gateInviteFacilityName,
html.light #gateInviteFacilityName {
  color: #0f172a !important;
}

[data-theme="light"] #gateMfaRememberDeviceGroup,
body.theme-light #gateMfaRememberDeviceGroup,
html.light #gateMfaRememberDeviceGroup {
  color: #334155 !important;
}

[data-theme="light"] #gateMfaGuidanceCard,
body.theme-light #gateMfaGuidanceCard,
html.light #gateMfaGuidanceCard {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
}

[data-theme="light"] #gateMfaGuidanceCard div,
body.theme-light #gateMfaGuidanceCard div,
html.light #gateMfaGuidanceCard div {
  color: #1e293b !important;
}

/* ==========================================================================
   SSO PORTAL CONTEXT BAR & GRANT BADGES (WCAG AAA CONTRAST ALIGNED)
   ========================================================================== */
.sso-portal-context-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem 1.6rem;
  border-radius: var(--radius-lg, 12px);
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.75) 0%, rgba(15, 23, 42, 0.9) 100%);
  border: 1px solid rgba(148, 163, 184, 0.2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  margin-bottom: 2rem;
}

.sso-context-left {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  min-width: 0;
}

.sso-context-icon {
  font-size: 2.2rem;
  line-height: 1;
  flex-shrink: 0;
}

.sso-context-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 0.35rem 0;
  letter-spacing: -0.01em;
}

.sso-context-subtitle {
  font-size: 0.82rem;
  color: #94a3b8;
  margin: 0;
  line-height: 1.45;
}

.sso-context-pills {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

[data-theme="light"] .sso-portal-context-bar,
body.theme-light .sso-portal-context-bar,
html.light .sso-portal-context-bar {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-color: #cbd5e1;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .sso-context-title,
body.theme-light .sso-context-title,
html.light .sso-context-title {
  color: #0f172a;
}

[data-theme="light"] .sso-context-subtitle,
body.theme-light .sso-context-subtitle,
html.light .sso-context-subtitle {
  color: #475569;
}

/* SSO Grant Badges (Owner, Company, Facility, User) */
.sso-grant-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: all 0.15s ease;
}

/* Dark Mode Variants */
.sso-grant-owner {
  background: rgba(245, 158, 11, 0.18);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.45);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.15);
}

.sso-grant-company {
  background: rgba(99, 102, 241, 0.18);
  color: #a5b4fc;
  border: 1px solid rgba(165, 180, 252, 0.4);
}

.sso-grant-facility {
  background: rgba(16, 185, 129, 0.18);
  color: #6ee7b7;
  border: 1px solid rgba(110, 231, 183, 0.4);
}

.sso-grant-user {
  background: rgba(234, 179, 8, 0.18);
  color: #fde047;
  border: 1px solid rgba(250, 204, 21, 0.4);
}

/* Light Mode Variants - WCAG AAA Contrast (> 7:1) */
[data-theme="light"] .sso-grant-owner,
body.theme-light .sso-grant-owner,
html.light .sso-grant-owner {
  background: #fef3c7 !important;
  color: #92400e !important;
  border: 1px solid #fde68a !important;
  box-shadow: none !important;
}

[data-theme="light"] .sso-grant-company,
body.theme-light .sso-grant-company,
html.light .sso-grant-company {
  background: #e0e7ff !important;
  color: #3730a3 !important;
  border: 1px solid #c7d2fe !important;
}

[data-theme="light"] .sso-grant-facility,
body.theme-light .sso-grant-facility,
html.light .sso-grant-facility {
  background: #d1fae5 !important;
  color: #065f46 !important;
  border: 1px solid #a7f3d0 !important;
}

[data-theme="light"] .sso-grant-user,
body.theme-light .sso-grant-user,
html.light .sso-grant-user {
  background: #fef3c7 !important;
  color: #92400e !important;
  border: 1px solid #fde68a !important;
}

/* ==========================================================================
   MULTI-COMPANY GROUP BANNER (LIGHT & DARK MODE COHESIVE POLISH)
   ========================================================================== */
.sso-company-group-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.15rem 1.4rem;
  margin-bottom: 1.25rem;
  border-radius: var(--radius-md, 10px);
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.75) 0%, rgba(15, 23, 42, 0.88) 100%);
  border: 1px solid rgba(148, 163, 184, 0.2);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22);
}

.sso-company-group-left {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

.sso-company-avatar {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(99, 102, 241, 0.15);
  border: 1px solid rgba(165, 180, 252, 0.3);
  color: #a5b4fc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}

.sso-company-info {
  min-width: 0;
}

.sso-company-header-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}

.sso-company-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.01em;
}

.sso-company-code-badge {
  font-size: 0.75rem;
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  color: #a5b4fc;
  background: rgba(99, 102, 241, 0.18);
  border: 1px solid rgba(165, 180, 252, 0.35);
  padding: 2px 8px;
  border-radius: 6px;
  letter-spacing: 0.03em;
}

.sso-company-facilities-text {
  font-size: 0.78rem;
  color: #94a3b8;
  margin: 0;
}

.sso-company-facilities-names {
  color: #cbd5e1;
  font-weight: 500;
}

.sso-company-apps-count {
  font-size: 0.8rem;
  color: #94a3b8;
  font-weight: 500;
  white-space: nowrap;
  padding-left: 1rem;
}

.sso-company-count-num {
  font-weight: 800;
  color: #38bdf8;
}

/* Light Mode Overrides for Multi-Company Group Banner */
[data-theme="light"] .sso-company-group-banner,
body.theme-light .sso-company-group-banner,
html.light .sso-company-group-banner {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}

[data-theme="light"] .sso-company-avatar,
body.theme-light .sso-company-avatar,
html.light .sso-company-avatar {
  background: #e0e7ff;
  border-color: #c7d2fe;
  color: #4338ca;
}

[data-theme="light"] .sso-company-title,
body.theme-light .sso-company-title,
html.light .sso-company-title {
  color: #0f172a;
}

[data-theme="light"] .sso-company-code-badge,
body.theme-light .sso-company-code-badge,
html.light .sso-company-code-badge {
  background: #e0e7ff;
  border-color: #c7d2fe;
  color: #3730a3;
}

[data-theme="light"] .sso-company-facilities-text,
body.theme-light .sso-company-facilities-text,
html.light .sso-company-facilities-text {
  color: #475569;
}

[data-theme="light"] .sso-company-facilities-names,
body.theme-light .sso-company-facilities-names,
html.light .sso-company-facilities-names {
  color: #1e293b;
  font-weight: 600;
}

[data-theme="light"] .sso-company-apps-count,
body.theme-light .sso-company-apps-count,
html.light .sso-company-apps-count {
  color: #64748b;
}

[data-theme="light"] .sso-company-count-num,
body.theme-light .sso-company-count-num,
html.light .sso-company-count-num {
  color: #0284c7;
}

/* ==========================================================================
   SSO CARD SCOPE & MODULE ID BADGE LIGHT MODE CONTRAST
   ========================================================================== */
[data-theme="light"] .sso-scope-count,
body.theme-light .sso-scope-count,
html.light .sso-scope-count {
  color: #047857 !important; /* WCAG AAA deep emerald */
  font-weight: 700;
}

[data-theme="light"] .sso-scope-label,
body.theme-light .sso-scope-label,
html.light .sso-scope-label {
  color: #475569 !important;
}

[data-theme="light"] .sso-scope-text,
body.theme-light .sso-scope-text,
html.light .sso-scope-text {
  color: #334155 !important;
}

[data-theme="light"] .sso-card-id,
body.theme-light .sso-card-id,
html.light .sso-card-id {
  background: #f1f5f9 !important;
  color: #334155 !important;
  border-color: #cbd5e1 !important;
}

/* ==========================================================================
   PLATFORM OWNER CONTROL SUITE & PROGRESSIVE FORM VALIDATION
   ========================================================================== */
.form-control:user-invalid,
.form-control.field-interacted:invalid {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2) !important;
}

.form-control:user-valid,
.form-control.field-interacted:valid {
  border-color: rgba(16, 185, 129, 0.55);
}

.badge-primary {
  background: rgba(59, 130, 246, 0.16);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.35);
}

.badge-success {
  background: rgba(16, 185, 129, 0.14);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.35);
}

.badge-warning {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.38);
}

.badge-danger {
  background: rgba(239, 68, 68, 0.16);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.38);
}

.badge-neutral {
  background: rgba(148, 163, 184, 0.12);
  color: #cbd5e1;
  border: 1px solid rgba(148, 163, 184, 0.26);
}

.security-status-stack {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-start;
  padding: 2px 0;
}

.security-status-row {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: nowrap;
}

[data-theme="light"] .badge-primary,
body.theme-light .badge-primary,
html.light .badge-primary {
  background: rgba(37, 99, 235, 0.12);
  color: #1d4ed8;
  border: 1px solid rgba(37, 99, 235, 0.3);
}

[data-theme="light"] .badge-success,
body.theme-light .badge-success,
html.light .badge-success {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
  border: 1px solid rgba(16, 185, 129, 0.32);
}

[data-theme="light"] .badge-warning,
body.theme-light .badge-warning,
html.light .badge-warning {
  background: rgba(245, 158, 11, 0.14);
  color: #b45309;
  border: 1px solid rgba(245, 158, 11, 0.35);
}

[data-theme="light"] .badge-danger,
body.theme-light .badge-danger,
html.light .badge-danger {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
  border: 1px solid rgba(239, 68, 68, 0.32);
}

[data-theme="light"] .badge-neutral,
body.theme-light .badge-neutral,
html.light .badge-neutral {
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #cbd5e1;
}

/* ==========================================================================
   MODULE BRANDING FILE UPLOAD & DRAG-AND-DROP ZONES (#editModuleModal)
   ========================================================================== */
.module-asset-upload-zone {
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  border: 1px dashed rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 42, 0.32);
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.module-asset-upload-zone:hover {
  border-color: rgba(99, 102, 241, 0.45);
}

.module-asset-upload-zone.drag-over {
  border-color: #6366f1 !important;
  background: rgba(99, 102, 241, 0.12) !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.module-asset-input-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.module-upload-trigger-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 36px;
  padding: 0 0.75rem !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  white-space: nowrap;
  flex-shrink: 0;
  border-radius: 8px;
  border: 1px solid rgba(99, 102, 241, 0.4) !important;
  background: rgba(99, 102, 241, 0.12) !important;
  color: #a5b4fc !important;
  cursor: pointer;
  transition: all 0.18s ease;
}

.module-upload-trigger-btn:hover:not(:disabled) {
  background: rgba(99, 102, 241, 0.24) !important;
  border-color: #818cf8 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

.module-upload-trigger-btn:disabled {
  opacity: 0.6;
  cursor: wait;
}

.module-asset-clear-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 36px;
  padding: 0 !important;
  font-size: 0.82rem !important;
  flex-shrink: 0;
  border-radius: 8px;
  border: 1px solid rgba(239, 68, 68, 0.35) !important;
  background: rgba(239, 68, 68, 0.1) !important;
  color: #fca5a5 !important;
  cursor: pointer;
  transition: all 0.18s ease;
}

.module-asset-clear-btn:hover {
  background: rgba(239, 68, 68, 0.22) !important;
  border-color: #f87171 !important;
  color: #ffffff !important;
}

.module-asset-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.4rem;
  min-height: 22px;
  flex-wrap: wrap;
}

.module-asset-drop-hint {
  font-size: 0.72rem;
  color: var(--text-muted, #94a3b8);
}

.module-asset-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(16, 185, 129, 0.14);
  color: #6ee7b7;
  border: 1px solid rgba(16, 185, 129, 0.3);
  max-width: 100%;
}

.module-asset-status-badge.preset {
  background: rgba(99, 102, 241, 0.14);
  color: #c7d2fe;
  border-color: rgba(99, 102, 241, 0.3);
}

.module-asset-status-badge.uploading {
  background: rgba(245, 158, 11, 0.15);
  color: #fcd34d;
  border-color: rgba(245, 158, 11, 0.35);
}

.module-asset-thumb {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  object-fit: contain;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
}

/* Light theme overrides for module asset upload zones */
[data-theme="light"] .module-asset-upload-zone,
body.theme-light .module-asset-upload-zone,
html.light .module-asset-upload-zone {
  background: #f8fafc;
  border-color: #cbd5e1;
}

[data-theme="light"] .module-asset-upload-zone:hover,
body.theme-light .module-asset-upload-zone:hover,
html.light .module-asset-upload-zone:hover {
  border-color: #6366f1;
}

[data-theme="light"] .module-upload-trigger-btn,
body.theme-light .module-upload-trigger-btn,
html.light .module-upload-trigger-btn {
  background: #eef2ff !important;
  border-color: #a5b4fc !important;
  color: #4338ca !important;
}

[data-theme="light"] .module-upload-trigger-btn:hover:not(:disabled),
body.theme-light .module-upload-trigger-btn:hover:not(:disabled),
html.light .module-upload-trigger-btn:hover:not(:disabled) {
  background: #e0e7ff !important;
  border-color: #6366f1 !important;
  color: #312e81 !important;
}

[data-theme="light"] .module-asset-clear-btn,
body.theme-light .module-asset-clear-btn,
html.light .module-asset-clear-btn {
  background: #fef2f2 !important;
  border-color: #fca5a5 !important;
  color: #dc2626 !important;
}

[data-theme="light"] .module-asset-status-badge,
body.theme-light .module-asset-status-badge,
html.light .module-asset-status-badge {
  background: #ecfdf5;
  color: #047857;
  border-color: #6ee7b7;
}

[data-theme="light"] .module-asset-status-badge.preset,
body.theme-light .module-asset-status-badge.preset,
html.light .module-asset-status-badge.preset {
  background: #eef2ff;
  color: #3730a3;
  border-color: #c7d2fe;
}

/* ==========================================================================
   SSO ECOSYSTEM CATALOG: ACTIVE MODULES & MODULES AWAITING ACTIVATION
   ========================================================================== */
.sso-section-count-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.sso-count-active {
  background: rgba(16, 185, 129, 0.16);
  color: #34d399;
  border: 1px solid rgba(52, 211, 153, 0.4);
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.12);
}

.sso-count-awaiting {
  background: rgba(245, 158, 11, 0.16);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.4);
}

/* Awaiting Activation / Showcase Card */
.sso-app-card.sso-app-card-awaiting {
  cursor: not-allowed;
  border-style: dashed;
  border-color: rgba(148, 163, 184, 0.32);
  opacity: 0.92;
  transition: border-color 0.22s ease, box-shadow 0.22s ease, opacity 0.22s ease;
}

.sso-app-card.sso-app-card-awaiting:hover {
  transform: none !important;
  border-color: rgba(245, 158, 11, 0.55) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(245, 158, 11, 0.25) !important;
  opacity: 1;
}

.sso-app-card.sso-app-card-awaiting .sso-card-hero-banner {
  filter: saturate(0.65) brightness(0.88);
  transition: filter 0.25s ease;
}

.sso-app-card.sso-app-card-awaiting:hover .sso-card-hero-banner {
  filter: saturate(0.85) brightness(0.95);
}

.sso-app-card.sso-app-card-awaiting:hover .sso-card-emblem-badge {
  transform: none;
}

.sso-status-badge.sso-status-awaiting {
  background: rgba(245, 158, 11, 0.24);
  color: #fde68a;
  border: 1px solid rgba(251, 191, 36, 0.55);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.sso-grant-awaiting {
  background: rgba(245, 158, 11, 0.16);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.42);
}

.sso-grant-locked {
  background: rgba(148, 163, 184, 0.15);
  color: #cbd5e1;
  border: 1px solid rgba(148, 163, 184, 0.35);
}

.sso-card-scope-box.sso-scope-box-awaiting {
  background: rgba(245, 158, 11, 0.06);
  border-color: rgba(245, 158, 11, 0.25);
}

.sso-scope-count.sso-scope-count-awaiting {
  color: #fbbf24;
}

.sso-card-launch-bar.sso-card-launch-bar-awaiting {
  background: rgba(15, 23, 42, 0.55);
  border-top-color: rgba(245, 158, 11, 0.22);
}

.sso-launch-dot.sso-launch-dot-awaiting {
  background: #f59e0b;
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.7);
}

.sso-launch-locked-label {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fcd34d;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  letter-spacing: 0.02em;
}

/* Light Mode Overrides for Ecosystem Catalog & Awaiting Activation Cards */
[data-theme="light"] .sso-count-active,
body.theme-light .sso-count-active,
html.light .sso-count-active {
  background: #d1fae5;
  color: #065f46;
  border-color: #6ee7b7;
  box-shadow: none;
}

[data-theme="light"] .sso-count-awaiting,
body.theme-light .sso-count-awaiting,
html.light .sso-count-awaiting {
  background: #fef3c7;
  color: #92400e;
  border-color: #fcd34d;
}

[data-theme="light"] .sso-app-card.sso-app-card-awaiting,
body.theme-light .sso-app-card.sso-app-card-awaiting,
html.light .sso-app-card.sso-app-card-awaiting {
  background: #f8fafc;
  border-color: #cbd5e1;
}

[data-theme="light"] .sso-app-card.sso-app-card-awaiting:hover,
body.theme-light .sso-app-card.sso-app-card-awaiting:hover,
html.light .sso-app-card.sso-app-card-awaiting:hover {
  border-color: #f59e0b !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(245, 158, 11, 0.3) !important;
}

[data-theme="light"] .sso-status-badge.sso-status-awaiting,
body.theme-light .sso-status-badge.sso-status-awaiting,
html.light .sso-status-badge.sso-status-awaiting {
  background: rgba(15, 23, 42, 0.82);
  color: #fde68a;
  border-color: rgba(251, 191, 36, 0.65);
}

[data-theme="light"] .sso-grant-awaiting,
body.theme-light .sso-grant-awaiting,
html.light .sso-grant-awaiting {
  background: #fef3c7 !important;
  color: #92400e !important;
  border-color: #fde68a !important;
}

[data-theme="light"] .sso-grant-locked,
body.theme-light .sso-grant-locked,
html.light .sso-grant-locked {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border-color: #cbd5e1 !important;
}

[data-theme="light"] .sso-card-scope-box.sso-scope-box-awaiting,
body.theme-light .sso-card-scope-box.sso-scope-box-awaiting,
html.light .sso-card-scope-box.sso-scope-box-awaiting {
  background: #fffbeb;
  border-color: #fde68a;
}

[data-theme="light"] .sso-scope-count.sso-scope-count-awaiting,
body.theme-light .sso-scope-count.sso-scope-count-awaiting,
html.light .sso-scope-count.sso-scope-count-awaiting {
  color: #b45309 !important;
}

[data-theme="light"] .sso-card-launch-bar.sso-card-launch-bar-awaiting,
body.theme-light .sso-card-launch-bar.sso-card-launch-bar-awaiting,
html.light .sso-card-launch-bar.sso-card-launch-bar-awaiting {
  background: #fffbeb;
  border-top-color: #fde68a;
}

[data-theme="light"] .sso-launch-locked-label,
body.theme-light .sso-launch-locked-label,
html.light .sso-launch-locked-label {
  background: #fef3c7;
  border-color: #fcd34d;
  color: #92400e;
}

/* ============================================================================
   UNIFIED CENTERED MODAL DIALOG SHELL & PLATFORM SUITE REFINEMENTS
   ============================================================================ */
.modal-overlay {
  overscroll-behavior: contain;
}

.modal-overlay.slide-over-drawer,
.modal-overlay.centered-dialog,
#myAccountModal,
#securityArchitectureModal,
#auditRemediationConfirmModal,
#mfaRecoveryCodesModal {
  justify-content: center !important;
  align-items: center !important;
  padding: 1.5rem !important;
  background: rgba(2, 6, 23, 0.72) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  z-index: 100000 !important;
  overflow: hidden !important;
  overscroll-behavior: contain;
}

/* Base Unified Modal Surface */
.modal-overlay.slide-over-drawer > .modal-card,
.modal-overlay.slide-over-drawer > .modal-content,
.modal-overlay.centered-dialog > .modal-card,
.modal-overlay.centered-dialog > .modal-content,
#editCompanyModal > .modal-content,
#editFacilityModal > .modal-content,
#editUserModal > .modal-content,
#editModuleModal > .modal-content,
#editLaunchpadBrandingModal > .modal-content,
#tenantOnboardingWizardModal > .modal-content,
#companyAdminsModal > .modal-content,
#auditDiffModal > .modal-content,
#myAccountModal > .modal-content,
#securityArchitectureModal > .modal-content,
#createCompanyModal > .modal-content,
#appointAdminModal > .modal-content,
#facMemberInviteModal > .modal-content,
#auditRemediationConfirmModal > .modal-content,
#mfaRecoveryCodesModal > .modal-content {
  margin: auto !important;
  border-radius: 14px !important;
  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  background: linear-gradient(180deg, #0f172a 0%, #0b1120 100%) !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.75) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  animation: modalFadeScaleIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ============================================================================
   TIER 1: FULL-WORKSPACE ADMIN CONSOLES (Platform Admin & Facility Admin)
   ============================================================================ */
#platformAdminModal > .modal-content,
#facilityAdminModal > .modal-content {
  width: min(1760px, 96vw) !important;
  max-width: 1760px !important;
  height: 92vh !important;
  max-height: 92vh !important;
  border-radius: 14px !important;
}

/* ============================================================================
   TIER 2: STANDARD MANAGEMENT & MULTI-TAB CONFIGURATION MODALS
   Fixed uniform dimensions (1100px x 760px) eliminate height jumping on tab switch
   ============================================================================ */
.modal-overlay.slide-over-drawer > .modal-card,
.modal-overlay.slide-over-drawer > .modal-content,
.modal-overlay.centered-dialog > .modal-card,
.modal-overlay.centered-dialog > .modal-content,
.modal-overlay.slide-over-drawer.drawer-wide > .modal-card,
.modal-overlay.slide-over-drawer.drawer-wide > .modal-content,
#editCompanyModal > .modal-content,
#editFacilityModal > .modal-content,
#editUserModal > .modal-content,
#editModuleModal > .modal-content,
#editLaunchpadBrandingModal > .modal-content,
#tenantOnboardingWizardModal > .modal-content,
#companyAdminsModal > .modal-content,
#auditDiffModal > .modal-content,
#myAccountModal > .modal-content,
#securityArchitectureModal > .modal-content {
  width: min(1100px, 94vw) !important;
  max-width: 1100px !important;
  height: min(760px, 88vh) !important;
  min-height: min(680px, 84vh) !important;
  max-height: 88vh !important;
}

/* ============================================================================
   TIER 3: COMPACT ACTION & CREATION MODALS
   Clean 640px width with content-driven height for focused single-step forms
   ============================================================================ */
.modal-overlay.slide-over-drawer.drawer-compact > .modal-card,
.modal-overlay.slide-over-drawer.drawer-compact > .modal-content,
#createCompanyModal > .modal-content,
#appointAdminModal > .modal-content,
#facMemberInviteModal > .modal-content,
#auditRemediationConfirmModal > .modal-content {
  width: min(640px, 92vw) !important;
  max-width: 640px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 88vh !important;
}

/* ============================================================================
   TIER 4: AUTHENTICATION & SECURITY PROMPT MODALS
   ============================================================================ */
#authModal > .modal-content,
#forgotPasswordModal > .modal-content,
#resetPasswordModal > .modal-content,
#acceptInviteModal > .modal-content,
#idleTimeoutWarningModal > .modal-content,
#mfaRecoveryCodesModal > .modal-content {
  width: min(480px, 92vw) !important;
  max-width: 480px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 88vh !important;
  border-radius: 14px !important;
}

@keyframes modalFadeScaleIn {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Standardized Modal Header */
.modal-overlay.slide-over-drawer .modal-header,
.modal-overlay.centered-dialog .modal-header,
#myAccountModal .modal-header,
#securityArchitectureModal .modal-header {
  flex-shrink: 0 !important;
  padding: 18px 24px !important;
  background: rgba(15, 23, 42, 0.96) !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14) !important;
  margin-bottom: 0 !important;
}

/* Standardized Modal Scrollable Body with Scroll Chaining Prevention */
.modal-overlay.slide-over-drawer .modal-body,
.modal-overlay.centered-dialog .modal-body,
#myAccountModal .modal-body,
#securityArchitectureModal .modal-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  padding: 20px 24px !important;
  max-height: none !important;
}

/* Balanced 2-Column Suite Grid Inside Management Modals (No Horizontal Overflow) */
.modal-overlay.slide-over-drawer .edit-company-suite-grid,
.modal-overlay.centered-dialog .edit-company-suite-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.15rem;
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
}

.modal-overlay.slide-over-drawer .edit-company-suite-grid > *,
.modal-overlay.centered-dialog .edit-company-suite-grid > *,
.uniform-modal-section-card {
  min-width: 0 !important;
  box-sizing: border-box !important;
}

@media (max-width: 860px) {
  .modal-overlay.slide-over-drawer .edit-company-suite-grid,
  .modal-overlay.centered-dialog .edit-company-suite-grid {
    grid-template-columns: 1fr;
  }
}

/* Prevent Password Policy Controls from Overflowing Right Card Border */
#compPolicyControlsWrapper {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  width: 100%;
  box-sizing: border-box;
}

#compPolicyControlsWrapper .policy-option-row {
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden;
  gap: 0.45rem;
}

#compPolicyControlsWrapper .policy-option-row label {
  min-width: 0;
  flex: 1 1 auto;
}

/* Standardized Modal Sticky Footer Bar */
.modal-overlay.slide-over-drawer .modal-footer,
.modal-overlay.centered-dialog .modal-footer,
#myAccountModal .modal-footer,
#securityArchitectureModal .modal-footer,
.drawer-sticky-footer {
  flex-shrink: 0 !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 24px !important;
  background: rgba(15, 23, 42, 0.98) !important;
  border-top: 1px solid rgba(148, 163, 184, 0.16) !important;
  margin-top: auto;
}

/* Standardized Modal Sub-Navigation Tabs */
.drawer-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 24px;
  background: rgba(15, 23, 42, 0.85);
  border-bottom: 1px solid rgba(148, 163, 184, 0.15);
  flex-shrink: 0 !important;
  overflow-x: auto;
}

.drawer-tab-btn {
  appearance: none;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: #94a3b8;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 12px 14px;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.drawer-tab-btn:hover {
  color: #e2e8f0;
  background: rgba(255, 255, 255, 0.03);
}

.drawer-tab-btn.active {
  color: #38bdf8;
  border-bottom-color: #38bdf8;
  background: rgba(56, 189, 248, 0.06);
}

.drawer-tab-panel {
  display: none;
}

.drawer-tab-panel.active {
  display: block;
}

/* Standardized Status Indicator Dot Badge */
.status-dot-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.status-dot-badge .status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-dot-badge.status-active {
  background: rgba(16, 185, 129, 0.12);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.status-dot-badge.status-active .status-dot {
  background: #10b981;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.65);
}

.status-dot-badge.status-suspended {
  background: rgba(245, 158, 11, 0.12);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.status-dot-badge.status-suspended .status-dot {
  background: #f59e0b;
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.65);
}

/* Subtle Copy ID Chip (Replaces Raw Long UUIDs in Tables & Headers) */
.copy-id-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(30, 41, 59, 0.75);
  border: 1px solid rgba(148, 163, 184, 0.22);
  color: #94a3b8;
  font-size: 0.72rem;
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.copy-id-chip:hover {
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.4);
  color: #38bdf8;
}

/* Table Container Min-Height & Structured Empty State Treatment */
.platform-table-container {
  min-height: 380px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.72) 0%, rgba(15, 23, 42, 0.42) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  overflow-x: auto;
  display: flex;
  flex-direction: column;
}

/* Hide legacy Maximize window buttons across all modals */
.modal-maximize-btn,
#btnMaximizePlatformModal {
  display: none !important;
}

/* Light Theme Overrides for Centered Modal Dialogs & Badges */
[data-theme="light"] .modal-overlay.slide-over-drawer > .modal-card,
[data-theme="light"] .modal-overlay.slide-over-drawer > .modal-content,
body.theme-light .modal-overlay.slide-over-drawer > .modal-card,
body.theme-light .modal-overlay.slide-over-drawer > .modal-content,
html.light .modal-overlay.slide-over-drawer > .modal-card,
html.light .modal-overlay.slide-over-drawer > .modal-content,
[data-theme="light"] .modal-overlay.centered-dialog > .modal-card,
[data-theme="light"] .modal-overlay.centered-dialog > .modal-content,
body.theme-light .modal-overlay.centered-dialog > .modal-card,
body.theme-light .modal-overlay.centered-dialog > .modal-content,
html.light .modal-overlay.centered-dialog > .modal-card,
html.light .modal-overlay.centered-dialog > .modal-content {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.22) !important;
}

[data-theme="light"] .modal-overlay.slide-over-drawer .modal-header,
body.theme-light .modal-overlay.slide-over-drawer .modal-header,
html.light .modal-overlay.slide-over-drawer .modal-header,
[data-theme="light"] .modal-overlay.slide-over-drawer .modal-footer,
body.theme-light .modal-overlay.slide-over-drawer .modal-footer,
html.light .modal-overlay.slide-over-drawer .modal-footer,
[data-theme="light"] .drawer-sticky-footer,
body.theme-light .drawer-sticky-footer,
html.light .drawer-sticky-footer {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

[data-theme="light"] .drawer-tabs,
body.theme-light .drawer-tabs,
html.light .drawer-tabs {
  background: #f1f5f9;
  border-bottom-color: #cbd5e1;
}

[data-theme="light"] .drawer-tab-btn,
body.theme-light .drawer-tab-btn,
html.light .drawer-tab-btn {
  color: #475569;
}

[data-theme="light"] .drawer-tab-btn.active,
body.theme-light .drawer-tab-btn.active,
html.light .drawer-tab-btn.active {
  color: #0284c7;
  border-bottom-color: #0284c7;
  background: rgba(2, 132, 199, 0.08);
}

[data-theme="light"] .platform-table-container,
body.theme-light .platform-table-container,
html.light .platform-table-container {
  background: #ffffff;
  border-color: #cbd5e1;
}

[data-theme="light"] .copy-id-chip,
body.theme-light .copy-id-chip,
html.light .copy-id-chip {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #475569;
}

/* ==========================================================================
   ENTERPRISE FORENSIC, INCIDENT RESPONSE & COMPLIANCE SUITE
   ========================================================================== */

.forensic-kpi-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  position: relative;
  z-index: 60;
}

.forensic-kpi-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(125px, 1fr));
  gap: 0.55rem;
  flex: 1;
  min-width: 620px;
}

.forensic-kpi-card {
  background: rgba(15, 23, 42, 0.58);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 10px;
  padding: 0.55rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  transition: all 0.16s ease;
  user-select: none;
}

.forensic-kpi-card:hover {
  border-color: rgba(99, 102, 241, 0.45);
  transform: translateY(-1px);
}

.forensic-kpi-card.active-filter {
  border-color: #6366f1;
  background: rgba(99, 102, 241, 0.14);
  box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.35);
}

.forensic-kpi-label {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
}

.forensic-kpi-value-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
}

.forensic-kpi-value {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-main);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.forensic-immutable-badge {
  font-size: 0.64rem;
  font-weight: 700;
  color: #34d399;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.32);
  border-radius: 999px;
  padding: 0.12rem 0.45rem;
  white-space: nowrap;
}

/* Standardized Severity Dots & Pills */
.forensic-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.forensic-dot.dot-success {
  background: #10b981;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.7);
}

.forensic-dot.dot-info {
  background: #3b82f6;
  box-shadow: 0 0 6px rgba(59, 130, 246, 0.7);
}

.forensic-dot.dot-warning {
  background: #f59e0b;
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.7);
}

.forensic-dot.dot-critical {
  background: #ef4444;
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.8);
}

.forensic-severity-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.forensic-severity-pill.sev-success {
  background: rgba(16, 185, 129, 0.14);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.35);
}

.forensic-severity-pill.sev-info {
  background: rgba(59, 130, 246, 0.14);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.35);
}

.forensic-severity-pill.sev-warning {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.38);
}

.forensic-severity-pill.sev-critical {
  background: rgba(239, 68, 68, 0.16);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.42);
}

.forensic-domain-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.16rem 0.5rem;
  border-radius: 5px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  background: rgba(99, 102, 241, 0.14);
  color: #a5b4fc;
  border: 1px solid rgba(99, 102, 241, 0.3);
  font-family: var(--font-mono, monospace);
  white-space: nowrap;
}

/* Header Actions & Export Dropdown */
.forensic-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.forensic-export-dropdown-wrap {
  position: relative;
}

.forensic-export-btn {
  height: 34px;
  padding: 0 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 700;
}

.forensic-dropdown-menu,
.forensic-Severity-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 265px;
  background: #0f172a;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 10px;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.55);
  padding: 0.4rem;
  z-index: 9999;
}

.forensic-Severity-menu {
  left: 0;
  right: auto;
  min-width: 215px;
}

.forensic-dropdown-header {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding: 0.4rem 0.55rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
  margin-bottom: 0.25rem;
}

.forensic-dropdown-item {
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 7px;
  padding: 0.5rem 0.6rem;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  text-align: left;
  cursor: pointer;
  color: var(--text-main);
  transition: background 0.15s ease;
}

.forensic-dropdown-item:hover {
  background: rgba(99, 102, 241, 0.14);
}

.forensic-dropdown-icon {
  font-size: 1.05rem;
  line-height: 1.2;
}

.forensic-dropdown-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-main);
}

.forensic-dropdown-desc {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 1px;
}

/* Unified Faceted Filter Bar */
.forensic-filter-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  background: rgba(15, 23, 42, 0.45);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 10px;
  padding: 0.5rem 0.65rem;
  position: relative;
  z-index: 50;
}

.forensic-search-wrap {
  position: relative;
  flex: 1;
  min-width: 240px;
  display: flex;
  align-items: center;
}

.forensic-search-icon {
  position: absolute;
  left: 0.65rem;
  font-size: 0.82rem;
  color: var(--text-muted);
  pointer-events: none;
}

.forensic-search-input {
  width: 100%;
  height: 34px !important;
  padding-left: 2.05rem !important;
  padding-right: 1.8rem !important;
  font-size: 0.8rem !important;
}

.forensic-search-clear {
  position: absolute;
  right: 0.5rem;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.78rem;
  padding: 2px 4px;
}

.forensic-filter-select,
.forensic-multiselect-btn {
  height: 34px !important;
  font-size: 0.78rem !important;
  padding: 0 0.6rem !important;
  width: auto !important;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.forensic-severity-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.42rem 0.55rem;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-main);
  cursor: pointer;
  user-select: none;
}

.forensic-severity-option:hover {
  background: rgba(99, 102, 241, 0.12);
}

.forensic-custom-date-row,
.forensic-active-pivots-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 0.45rem 0.75rem;
  border-radius: 8px;
  background: rgba(99, 102, 241, 0.09);
  border: 1px solid rgba(99, 102, 241, 0.28);
}

.forensic-pivot-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(165, 180, 252, 0.35);
  color: #e0e7ff;
  font-size: 0.73rem;
  font-weight: 600;
}

.forensic-pivot-chip button {
  background: transparent;
  border: none;
  color: #fca5a5;
  cursor: pointer;
  font-size: 0.74rem;
  padding: 0 2px;
  line-height: 1;
}

/* 7-Column Executive Forensic Table */
.forensic-audit-table th {
  font-size: 0.69rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.055em !important;
  text-transform: uppercase;
  color: var(--text-muted) !important;
  padding: 0.68rem 0.75rem !important;
  position: sticky;
  top: 0;
  z-index: 4;
  background: #0f172a;
}

.forensic-audit-row {
  cursor: pointer;
  transition: background 0.12s ease;
}

.forensic-audit-row:hover {
  background: rgba(99, 102, 241, 0.08) !important;
}

.forensic-audit-row.row-critical {
  background: rgba(239, 68, 68, 0.04);
}

.forensic-ts-rel {
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--text-main);
  white-space: nowrap;
}

.forensic-ts-utc {
  font-family: var(--font-mono, monospace);
  font-size: 0.69rem;
  color: var(--text-muted);
  white-space: nowrap;
  margin-top: 1px;
}

/* Actor Cell */
.forensic-actor-cell {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}

.forensic-actor-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 800;
  color: #ffffff;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.forensic-actor-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.forensic-actor-name {
  font-weight: 700;
  font-size: 0.81rem;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.forensic-actor-email {
  font-size: 0.71rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.forensic-system-tag {
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  padding: 0.08rem 0.38rem;
  border-radius: 4px;
  background: rgba(14, 165, 233, 0.16);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.35);
}

/* Event & Action Cell */
.forensic-event-title-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.forensic-event-title {
  font-weight: 700;
  font-size: 0.83rem;
  color: var(--text-main);
}

.forensic-event-summary {
  font-size: 0.74rem;
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.forensic-diff-pill {
  font-size: 0.64rem;
  font-weight: 700;
  padding: 0.08rem 0.4rem;
  border-radius: 4px;
  background: rgba(16, 185, 129, 0.14);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.32);
  white-space: nowrap;
}

/* Target Entity Badge */
.forensic-target-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.22rem 0.55rem;
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 600;
  background: rgba(30, 41, 59, 0.78);
  border: 1px solid rgba(148, 163, 184, 0.26);
  color: var(--text-main);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.forensic-target-badge.target-company {
  border-color: rgba(99, 102, 241, 0.35);
  background: rgba(99, 102, 241, 0.1);
}

.forensic-target-badge.target-facility {
  border-color: rgba(16, 185, 129, 0.35);
  background: rgba(16, 185, 129, 0.1);
}

.forensic-target-badge.target-user {
  border-color: rgba(59, 130, 246, 0.35);
  background: rgba(59, 130, 246, 0.1);
}

.forensic-target-badge.target-deleted {
  border-color: rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.1);
  color: #fca5a5;
}

/* Network & Device Cell */
.forensic-ip-code {
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-main);
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
  display: inline-block;
}

.forensic-device-badge {
  font-size: 0.69rem;
  color: var(--text-muted);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Row Actions & Floating Menu */
.forensic-row-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.3rem;
  position: relative;
}

.forensic-row-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  min-width: 235px;
  background: #0f172a;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 9px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6);
  padding: 0.35rem;
  z-index: 9999;
  text-align: left;
}

.forensic-row-menu-item {
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 0.42rem 0.55rem;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  text-align: left;
}

.forensic-row-menu-item:hover {
  background: rgba(99, 102, 241, 0.15);
}

.forensic-row-menu-item.danger-item {
  color: #f87171;
}

.forensic-row-menu-item.danger-item:hover {
  background: rgba(239, 68, 68, 0.15);
}

.forensic-row-menu-divider {
  height: 1px;
  background: rgba(148, 163, 184, 0.16);
  margin: 0.25rem 0;
}

/* Pagination Footer */
.forensic-pagination-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.55rem 0.85rem;
  background: rgba(15, 23, 42, 0.52);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 10px;
}

.forensic-pagination-meta,
.forensic-pagination-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* Loading Skeletons */
@keyframes forensicShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.forensic-skeleton-bar {
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(148,163,184,0.1) 25%, rgba(148,163,184,0.24) 50%, rgba(148,163,184,0.1) 75%);
  background-size: 200% 100%;
  animation: forensicShimmer 1.35s infinite linear;
}

/* Forensic Event Inspector Modal */
.forensic-inspector-modal {
  width: 92vw !important;
  max-width: 940px !important;
  max-height: min(90vh, 920px) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  overscroll-behavior: contain;
}

.forensic-inspector-header {
  padding: 1rem 1.35rem !important;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-shrink: 0 !important;
}

.forensic-inspector-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(99, 102, 241, 0.15);
  border: 1px solid rgba(99, 102, 241, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}

.forensic-header-meta-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.forensic-trace-pill,
.forensic-utc-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.18rem 0.55rem;
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(148, 163, 184, 0.24);
  font-size: 0.73rem;
}

.forensic-trace-pill code {
  font-family: var(--font-mono, monospace);
  color: #38bdf8;
  font-weight: 700;
}

.forensic-copy-id-btn {
  background: rgba(99, 102, 241, 0.18);
  border: 1px solid rgba(99, 102, 241, 0.4);
  color: #c7d2fe;
  border-radius: 4px;
  padding: 0.08rem 0.42rem;
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.14s ease;
}

.forensic-copy-id-btn:hover {
  background: rgba(99, 102, 241, 0.32);
  color: #ffffff;
}

.forensic-inspector-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 1.1rem 1.35rem !important;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.forensic-inspector-body > * {
  flex-shrink: 0 !important;
}

.forensic-summary-banner {
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.28);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  flex-shrink: 0 !important;
}

.forensic-section-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  flex-shrink: 0 !important;
}

.forensic-section-header {
  padding: 0.6rem 0.95rem;
  background: var(--bg-card-subtle);
  border-bottom: 1px solid var(--border-color);
  border-radius: 9px 9px 0 0;
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--text-main);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

/* Visual State Diff Table (Red = Removed/Previous, Green = Added/New) */
.forensic-diff-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.79rem;
}

.forensic-diff-table th {
  text-align: left;
  padding: 0.48rem 0.8rem;
  font-size: 0.69rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  background: rgba(15, 23, 42, 0.4);
  border-bottom: 1px solid var(--border-color);
}

.forensic-diff-table td {
  padding: 0.52rem 0.8rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  vertical-align: top;
}

.forensic-diff-cell-before {
  background: rgba(239, 68, 68, 0.11);
  color: #fca5a5;
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
  word-break: break-word;
  border-left: 3px solid rgba(239, 68, 68, 0.55);
}

.forensic-diff-cell-after {
  background: rgba(16, 185, 129, 0.12);
  color: #6ee7b7;
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
  font-weight: 700;
  word-break: break-word;
  border-left: 3px solid rgba(16, 185, 129, 0.6);
}

/* 5W1H Technical Forensic Telemetry Grid */
.forensic-telemetry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
  gap: 0.6rem;
  padding: 0.8rem 0.95rem;
}

.forensic-telemetry-cell {
  background: rgba(15, 23, 42, 0.42);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.16rem;
  min-width: 0;
}

.forensic-telemetry-label {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.forensic-telemetry-val {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-main);
  word-break: break-word;
}

.forensic-telemetry-code {
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
  color: #38bdf8;
  word-break: break-all;
}

.forensic-telemetry-sub {
  font-size: 0.71rem;
  color: var(--text-muted);
  word-break: break-word;
}

/* Active Incident Response & Context Pivoting Panel */
.forensic-incident-panel {
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.45);
  padding: 0.8rem 0.95rem;
  flex-shrink: 0 !important;
}

.forensic-incident-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}

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

.forensic-pivot-box,
.forensic-remediation-box {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.forensic-remediation-box {
  padding-left: 0.85rem;
  border-left: 1px solid rgba(239, 68, 68, 0.25);
}

.forensic-box-title {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--text-main);
}

.forensic-box-desc {
  font-size: 0.71rem;
  color: var(--text-muted);
}

.forensic-action-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.2rem;
}

.forensic-pivot-btn {
  font-size: 0.73rem !important;
  padding: 0.28rem 0.6rem !important;
  height: auto !important;
}

.forensic-remediate-btn {
  font-size: 0.73rem !important;
  font-weight: 700 !important;
  padding: 0.3rem 0.65rem !important;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-remediate-amber {
  background: rgba(245, 158, 11, 0.16);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.45);
}

.btn-remediate-amber:hover:not(:disabled) {
  background: rgba(245, 158, 11, 0.28);
}

.btn-remediate-danger {
  background: rgba(239, 68, 68, 0.16);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.45);
}

.btn-remediate-danger:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.28);
}

.btn-remediate-critical {
  background: rgba(220, 38, 38, 0.25);
  color: #fecaca;
  border: 1px solid rgba(248, 113, 113, 0.55);
}

.btn-remediate-critical:hover:not(:disabled) {
  background: rgba(220, 38, 38, 0.4);
}

/* Collapsible JSON Viewer & Syntax Highlighting */
.forensic-json-details {
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-card);
  flex-shrink: 0 !important;
}

.forensic-json-summary {
  padding: 0.6rem 0.95rem;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--text-main);
  background: var(--bg-card-subtle);
  border-radius: 9px 9px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
  list-style: none;
}

.forensic-json-details:not([open]) .forensic-json-summary {
  border-radius: 9px;
}

.forensic-json-viewer-wrap {
  padding: 0.75rem 0.95rem;
  background: #090d16;
  border-top: 1px solid var(--border-color);
  border-radius: 0 0 9px 9px;
  max-height: 320px;
  overflow: auto;
  overscroll-behavior: contain;
}

.forensic-json-pre {
  margin: 0;
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
  line-height: 1.5;
  color: #e2e8f0;
  white-space: pre-wrap;
  word-break: break-word;
}

.json-key { color: #93c5fd; font-weight: 600; }
.json-string { color: #86efac; }
.json-number { color: #fcd34d; }
.json-boolean { color: #c4b5fd; font-weight: 700; }
.json-null { color: #94a3b8; font-style: italic; }
.json-redacted {
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.18);
  border: 1px solid rgba(239, 68, 68, 0.4);
  padding: 0 4px;
  border-radius: 3px;
  font-weight: 800;
}

.forensic-inspector-footer {
  padding: 0.75rem 1.35rem !important;
  border-top: 1px solid var(--border-color);
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

/* Light Theme Adjustments for Forensic Suite */
[data-theme="light"] .forensic-kpi-card,
body.theme-light .forensic-kpi-card,
html.light .forensic-kpi-card,
[data-theme="light"] .forensic-filter-bar,
body.theme-light .forensic-filter-bar,
html.light .forensic-filter-bar,
[data-theme="light"] .forensic-pagination-footer,
body.theme-light .forensic-pagination-footer,
html.light .forensic-pagination-footer,
[data-theme="light"] .forensic-telemetry-cell,
body.theme-light .forensic-telemetry-cell,
html.light .forensic-telemetry-cell,
[data-theme="light"] .forensic-incident-panel,
body.theme-light .forensic-incident-panel,
html.light .forensic-incident-panel {
  background: #f8fafc;
  border-color: #cbd5e1;
}

[data-theme="light"] .forensic-audit-table th,
body.theme-light .forensic-audit-table th,
html.light .forensic-audit-table th {
  background: #f1f5f9;
  color: #475569 !important;
}

[data-theme="light"] .forensic-dropdown-menu,
[data-theme="light"] .forensic-Severity-menu,
[data-theme="light"] .forensic-row-menu,
body.theme-light .forensic-dropdown-menu,
body.theme-light .forensic-Severity-menu,
body.theme-light .forensic-row-menu {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.15);
}

[data-theme="light"] .forensic-target-badge,
body.theme-light .forensic-target-badge {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #0f172a;
}

[data-theme="light"] .forensic-ip-code,
body.theme-light .forensic-ip-code {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #0f172a;
}

[data-theme="light"] .forensic-diff-cell-before,
body.theme-light .forensic-diff-cell-before {
  background: rgba(239, 68, 68, 0.1);
  color: #b91c1c;
}

[data-theme="light"] .forensic-diff-cell-after,
body.theme-light .forensic-diff-cell-after {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
}

/* ==========================================================================
   Forensic Row & Pill Class Alignments (Executive Table & Floating Menus)
   ========================================================================== */
.forensic-ts-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.forensic-sev-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.forensic-sev-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.forensic-sev-pill.success {
  background: rgba(16, 185, 129, 0.14);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.35);
}
.forensic-sev-pill.success .forensic-sev-dot {
  background: #10b981;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.75);
}

.forensic-sev-pill.info {
  background: rgba(59, 130, 246, 0.14);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.35);
}
.forensic-sev-pill.info .forensic-sev-dot {
  background: #3b82f6;
  box-shadow: 0 0 6px rgba(59, 130, 246, 0.75);
}

.forensic-sev-pill.warning {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.38);
}
.forensic-sev-pill.warning .forensic-sev-dot {
  background: #f59e0b;
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.75);
}

.forensic-sev-pill.critical {
  background: rgba(239, 68, 68, 0.16);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.42);
}
.forensic-sev-pill.critical .forensic-sev-dot {
  background: #ef4444;
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.85);
}

.forensic-domain-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.14rem 0.48rem;
  border-radius: 5px;
  font-size: 0.63rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  background: rgba(99, 102, 241, 0.14);
  color: #a5b4fc;
  border: 1px solid rgba(99, 102, 241, 0.3);
  font-family: var(--font-mono, monospace);
  white-space: nowrap;
}

.forensic-actor-avatar {
  background: linear-gradient(135deg, #4f46e5, #0ea5e9);
}

.forensic-actor-avatar.system-avatar {
  background: rgba(14, 165, 233, 0.18);
  border-color: rgba(56, 189, 248, 0.4);
  font-size: 0.85rem;
}

.forensic-actor-sys-badge {
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  padding: 0.08rem 0.36rem;
  border-radius: 4px;
  background: rgba(14, 165, 233, 0.16);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.35);
}

.forensic-event-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.forensic-diff-indicator-chip {
  font-size: 0.63rem;
  font-weight: 800;
  padding: 0.1rem 0.42rem;
  border-radius: 4px;
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.36);
  white-space: nowrap;
  font-family: var(--font-mono, monospace);
}

.forensic-target-badge.is-deleted {
  border-color: rgba(239, 68, 68, 0.42);
  background: rgba(239, 68, 68, 0.1);
}

.forensic-target-scope-tag {
  font-size: 0.67rem;
  font-weight: 800;
  font-family: var(--font-mono, monospace);
}
.forensic-target-scope-tag.company { color: #818cf8; }
.forensic-target-scope-tag.facility { color: #34d399; }
.forensic-target-scope-tag.user { color: #60a5fa; }
.forensic-target-scope-tag.system { color: #94a3b8; }
.forensic-target-scope-tag.deleted { color: #f87171; }

.forensic-target-name {
  font-weight: 700;
  color: var(--text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.forensic-net-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.forensic-ip-mono {
  font-family: var(--font-mono, monospace);
  font-size: 0.74rem;
  font-weight: 700;
  color: #38bdf8;
  background: rgba(15, 23, 42, 0.68);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 4px;
  padding: 0.1rem 0.42rem;
  display: inline-block;
}

.forensic-row-action-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  position: relative;
}

.forensic-inspect-btn {
  height: 28px;
  padding: 0 0.65rem;
  font-size: 0.73rem;
  font-weight: 700;
  color: var(--text-main);
  background: rgba(99, 102, 241, 0.14);
  border: 1px solid rgba(99, 102, 241, 0.35);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.forensic-inspect-btn:hover {
  background: rgba(99, 102, 241, 0.28);
  border-color: rgba(99, 102, 241, 0.6);
}

.forensic-dots-btn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-muted);
  background: rgba(30, 41, 59, 0.65);
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.forensic-dots-btn:hover {
  color: var(--text-main);
  background: rgba(99, 102, 241, 0.18);
  border-color: rgba(99, 102, 241, 0.4);
}

.forensic-row-dropdown-menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 5px);
  min-width: 240px;
  background: #0f172a;
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 9px;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.65);
  padding: 0.35rem;
  z-index: 9999;
  text-align: left;
  flex-direction: column;
  gap: 2px;
}

.forensic-row-dropdown-menu.open {
  display: flex;
}

.forensic-row-dropdown-item {
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 0.44rem 0.6rem;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s ease;
}

.forensic-row-dropdown-item:hover {
  background: rgba(99, 102, 241, 0.16);
}

.forensic-row-dropdown-divider {
  height: 1px;
  background: rgba(148, 163, 184, 0.16);
  margin: 0.25rem 0;
}

[data-theme="light"] .forensic-row-dropdown-menu,
body.theme-light .forensic-row-dropdown-menu {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.15);
}

[data-theme="light"] .forensic-ip-mono,
body.theme-light .forensic-ip-mono {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #0284c7;
}

/* ==========================================================================
   Digital-3A Identity & Access Federation (OIDC Security Architecture Modal)
   ========================================================================== */
.oidc-arch-modal {
  width: 95vw !important;
  max-width: 1320px !important;
  max-height: 90vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border: 1px solid rgba(99, 102, 241, 0.28) !important;
  box-shadow: 0 28px 65px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.04) !important;
}

.oidc-arch-header {
  padding: 1.15rem 1.5rem !important;
  border-bottom: 1px solid var(--border-color);
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.55) 0%, rgba(15, 23, 42, 0.35) 100%);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-shrink: 0;
}

.oidc-arch-header-main {
  flex: 1;
  min-width: 0;
}

.oidc-arch-title-row {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
}

.oidc-arch-hero-icon {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: linear-gradient(135deg, #4f46e5, #0ea5e9);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  color: #ffffff;
  flex-shrink: 0;
  box-shadow: 0 6px 18px rgba(79, 70, 229, 0.38);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.oidc-arch-title-stack {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.oidc-arch-title {
  margin: 0 !important;
  font-size: 1.22rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.015em;
  color: var(--text-main);
}

.oidc-arch-subtitle {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.oidc-header-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.35rem;
}

.oidc-cert-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  padding: 0.2rem 0.62rem;
  border-radius: 999px;
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.025em;
  white-space: nowrap;
}

.oidc-cert-badge code {
  font-family: var(--font-mono, monospace);
  font-weight: 800;
  font-size: 0.7rem;
}

.oidc-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.85);
  display: inline-block;
}

.oidc-badge-emerald {
  background: rgba(16, 185, 129, 0.14);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.36);
}

.oidc-badge-indigo {
  background: rgba(99, 102, 241, 0.15);
  color: #a5b4fc;
  border: 1px solid rgba(99, 102, 241, 0.36);
}

.oidc-badge-cyan {
  background: rgba(14, 165, 233, 0.14);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.35);
}

.oidc-arch-header-controls {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-shrink: 0;
}

.oidc-arch-body {
  padding: 1.25rem 1.5rem !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

.oidc-arch-grid {
  display: grid;
  grid-template-columns: 1fr 1.24fr 1fr;
  gap: 1.1rem;
  align-items: stretch;
}

@media (max-width: 1080px) {
  .oidc-arch-grid {
    grid-template-columns: 1fr;
  }
}

.oidc-arch-column {
  background: rgba(15, 23, 42, 0.52);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 1.05rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-width: 0;
}

.oidc-arch-column.oidc-col-featured {
  border-color: rgba(56, 189, 248, 0.34);
  background: linear-gradient(180deg, rgba(14, 165, 233, 0.06) 0%, rgba(15, 23, 42, 0.58) 100%);
  box-shadow: inset 0 1px 0 rgba(56, 189, 248, 0.14);
}

.oidc-col-header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

.oidc-col-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.oidc-icon-indigo {
  background: rgba(99, 102, 241, 0.16);
  border: 1px solid rgba(99, 102, 241, 0.35);
}

.oidc-icon-cyan {
  background: rgba(14, 165, 233, 0.16);
  border: 1px solid rgba(56, 189, 248, 0.38);
}

.oidc-icon-emerald {
  background: rgba(16, 185, 129, 0.16);
  border: 1px solid rgba(16, 185, 129, 0.38);
}

.oidc-col-kicker {
  font-size: 0.63rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.oidc-col-title {
  margin: 1px 0 0 0;
  font-size: 0.94rem;
  font-weight: 800;
  color: var(--text-main);
}

.oidc-spec-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  flex: 1;
}

.oidc-spec-card {
  background: rgba(15, 23, 42, 0.45);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 9px;
  padding: 0.68rem 0.82rem;
  transition: border-color 0.15s ease;
}

.oidc-spec-card:hover {
  border-color: rgba(99, 102, 241, 0.35);
}

.oidc-spec-label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 0.25rem;
}

.oidc-spec-bullet {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #818cf8;
  flex-shrink: 0;
}

.oidc-spec-bullet.oidc-bullet-cyan {
  background: #38bdf8;
}

.oidc-spec-bullet.oidc-bullet-emerald {
  background: #34d399;
}

.oidc-spec-desc {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.48;
}

.oidc-spec-desc strong {
  color: var(--text-main);
  font-weight: 700;
}

.oidc-spec-desc code {
  font-family: var(--font-mono, monospace);
  font-size: 0.71rem;
  color: #a5b4fc;
  background: rgba(99, 102, 241, 0.12);
  padding: 0.06rem 0.32rem;
  border-radius: 4px;
}

/* Discovery & Signing JWKS Endpoint Box */
.oidc-endpoint-box {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background: #090d16;
  border: 1px solid rgba(56, 189, 248, 0.32);
  border-radius: 7px;
  padding: 0.44rem 0.65rem;
  overflow-x: auto;
}

.oidc-http-method {
  font-family: var(--font-mono, monospace);
  font-size: 0.64rem;
  font-weight: 800;
  padding: 0.1rem 0.38rem;
  border-radius: 4px;
  background: rgba(16, 185, 129, 0.18);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.4);
  flex-shrink: 0;
}

.oidc-endpoint-uri {
  font-family: var(--font-mono, monospace);
  font-size: 0.71rem;
  font-weight: 600;
  color: #38bdf8;
  white-space: nowrap;
}

.oidc-mini-copy-btn {
  background: rgba(99, 102, 241, 0.15);
  border: 1px solid rgba(99, 102, 241, 0.35);
  color: #c7d2fe;
  border-radius: 5px;
  padding: 0.12rem 0.45rem;
  font-size: 0.66rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.14s ease;
  white-space: nowrap;
}

.oidc-mini-copy-btn:hover {
  background: rgba(99, 102, 241, 0.3);
  color: #ffffff;
}

/* Styled JSON Claim Schema Preview Card */
.oidc-json-preview-card {
  background: #090d16;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 9px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.oidc-json-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.48rem 0.75rem;
  background: rgba(30, 41, 59, 0.65);
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.oidc-json-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 6px rgba(56, 189, 248, 0.8);
}

.oidc-json-title {
  font-size: 0.73rem;
  font-weight: 800;
  color: #f8fafc;
  white-space: nowrap;
}

.oidc-json-subtitle {
  font-size: 0.63rem;
  font-weight: 600;
  color: #94a3b8;
  padding: 0.06rem 0.38rem;
  border-radius: 4px;
  background: rgba(148, 163, 184, 0.12);
  white-space: nowrap;
}

.oidc-json-code-block {
  margin: 0;
  padding: 0.65rem 0.75rem;
  font-family: var(--font-mono, monospace);
  font-size: 0.66rem;
  line-height: 1.48;
  color: #e2e8f0;
  overflow-x: auto;
  white-space: pre;
}

/* Column 3 Live Telemetry Card */
.oidc-live-posture-card {
  border-color: rgba(16, 185, 129, 0.32);
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.06) 0%, rgba(15, 23, 42, 0.48) 100%);
}

.oidc-live-pulse-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #34d399;
  background: rgba(16, 185, 129, 0.14);
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: 999px;
  padding: 0.08rem 0.45rem;
}

.oidc-live-telemetry-rows {
  display: flex;
  flex-direction: column;
  gap: 0.38rem;
  margin-top: 0.4rem;
}

.oidc-telemetry-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.74rem;
  padding-top: 0.32rem;
  border-top: 1px dashed rgba(148, 163, 184, 0.15);
}

.oidc-telemetry-key {
  color: var(--text-muted);
  font-weight: 600;
  flex-shrink: 0;
}

.oidc-telemetry-val {
  color: var(--text-main);
  font-weight: 700;
  text-align: right;
  word-break: break-word;
}

.oidc-arch-footer {
  padding: 0.85rem 1.5rem !important;
  border-top: 1px solid var(--border-color);
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 1rem;
  flex-wrap: wrap;
  flex-shrink: 0 !important;
}

.oidc-arch-footer-meta {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
}

/* Light Mode Adaptations for OIDC Architecture Modal */
[data-theme="light"] .oidc-arch-header,
body.theme-light .oidc-arch-header,
html.light .oidc-arch-header {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

[data-theme="light"] .oidc-arch-column,
body.theme-light .oidc-arch-column,
html.light .oidc-arch-column {
  background: #f8fafc;
  border-color: #cbd5e1;
}

[data-theme="light"] .oidc-arch-column.oidc-col-featured,
body.theme-light .oidc-arch-column.oidc-col-featured {
  background: linear-gradient(180deg, rgba(14, 165, 233, 0.05) 0%, #f8fafc 100%);
  border-color: rgba(2, 132, 199, 0.35);
}

[data-theme="light"] .oidc-spec-card,
body.theme-light .oidc-spec-card {
  background: #ffffff;
  border-color: #e2e8f0;
}

/* =========================================================================
   UNIVERSAL MODAL FULLSCREEN / MAXIMIZE OVERRIDE (ALL POPUPS & DRAWERS)
   Ensures double-clicking any modal header or clicking Maximize expands
   centered dialogs, slide-over drawers, forensic modals, and OIDC modals.
   ========================================================================= */
.modal-overlay:has(.modal-fullscreen),
.modal-overlay.modal-overlay-fullscreen {
  padding: 0 !important;
}

html body .modal-overlay > .modal-content.modal-fullscreen,
html body .modal-overlay.slide-over-drawer > .modal-content.modal-fullscreen,
html body .modal-overlay.centered-dialog > .modal-content.modal-fullscreen,
html body .modal-overlay.slide-over-drawer.centered-dialog > .modal-content.modal-fullscreen,
html body .modal-overlay[id] > .modal-content.modal-fullscreen,
html body .modal-overlay[id] .modal-content.modal-fullscreen,
html body .modal-overlay[id] .modal-card.modal-fullscreen,
html body .modal-overlay[id] .timeline-load-modal-card.modal-fullscreen,
[data-theme] html body #facilityAdminModal .modal-content.modal-fullscreen,
[data-theme="light"] html.role-facility-admin #facilityAdminModal .modal-content.modal-fullscreen,
html.role-facility-admin #facilityAdminModal .modal-content.modal-fullscreen,
#platformAdminModal > .modal-content.modal-fullscreen,
#facilityAdminModal > .modal-content.modal-fullscreen,
#editCompanyModal > .modal-content.modal-fullscreen,
#editFacilityModal > .modal-content.modal-fullscreen,
#editUserModal > .modal-content.modal-fullscreen,
#editModuleModal > .modal-content.modal-fullscreen,
#editLaunchpadBrandingModal > .modal-content.modal-fullscreen,
#tenantOnboardingWizardModal > .modal-content.modal-fullscreen,
#companyAdminsModal > .modal-content.modal-fullscreen,
#auditDiffModal > .modal-content.modal-fullscreen,
#myAccountModal > .modal-content.modal-fullscreen,
#securityArchitectureModal > .modal-content.modal-fullscreen,
#createCompanyModal > .modal-content.modal-fullscreen,
#appointAdminModal > .modal-content.modal-fullscreen,
#facMemberInviteModal > .modal-content.modal-fullscreen,
#auditRemediationConfirmModal > .modal-content.modal-fullscreen,
#authModal > .modal-content.modal-fullscreen,
#forgotPasswordModal > .modal-content.modal-fullscreen,
#resetPasswordModal > .modal-content.modal-fullscreen,
#acceptInviteModal > .modal-content.modal-fullscreen,
#idleTimeoutWarningModal > .modal-content.modal-fullscreen,
#mfaRecoveryCodesModal > .modal-content.modal-fullscreen,
.modal-content.oidc-arch-modal.modal-fullscreen,
.modal-content.forensic-inspector-modal.modal-fullscreen,
.modal-content.forensic-remediation-modal.modal-fullscreen,
.modal-content.platform-owner-modal.modal-fullscreen,
.modal-card.modal-fullscreen,
.timeline-load-modal-card.modal-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  min-width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  min-height: 100vh !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  transform: none !important;
  animation: none !important;
  z-index: 100000 !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: none !important;
}

html body .modal-overlay[id] .modal-fullscreen > .modal-body,
html body .modal-overlay[id] .modal-fullscreen .modal-body,
.modal-fullscreen > .modal-body,
.modal-fullscreen > .timeline-load-modal-body {
  flex: 1 1 auto !important;
  max-height: none !important;
  overflow-y: auto !important;
}

.modal-header,
.modal-header *,
.timeline-load-modal-header,
.timeline-load-modal-header * {
  user-select: none;
  -webkit-user-select: none;
}

/* =========================================================================
   UNIFIED PLATFORM NAVIGATION & KEY-VALUE STATUS TILES (#platformSuiteKpiStrip)
   Combines the top KPI overview cards and console section tabs into a single
   interactive row of tile-style cards with key-value status breakdowns.
   ========================================================================= */
#platformSuiteKpiStrip.platform-nav-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(195px, 1fr));
  gap: 0.7rem;
  flex-shrink: 0;
  margin-bottom: 0.15rem;
}

#platformSuiteKpiStrip .platform-nav-tile.modal-tab-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  gap: 0.55rem;
  text-align: left;
  padding: 0.75rem 0.95rem;
  border-radius: 11px;
  background: var(--bg-card-subtle, rgba(15, 23, 42, 0.65));
  border: 1px solid var(--border-color, rgba(148, 163, 184, 0.18));
  color: var(--text-main, #f8fafc);
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
  overflow: hidden;
  min-width: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
}

#platformSuiteKpiStrip .platform-nav-tile.modal-tab-btn::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: transparent;
  transition: background 0.16s ease;
}

#platformSuiteKpiStrip .platform-nav-tile.modal-tab-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(99, 102, 241, 0.45);
  background: rgba(30, 41, 59, 0.82);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.26);
}

#platformSuiteKpiStrip .platform-nav-tile.modal-tab-btn.active {
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.14) 0%, rgba(15, 23, 42, 0.88) 100%);
  border-color: rgba(59, 130, 246, 0.65);
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.35), 0 8px 20px -4px rgba(37, 99, 235, 0.28);
}

#platformSuiteKpiStrip .platform-nav-tile.modal-tab-btn.active::after {
  background: linear-gradient(90deg, #3b82f6, #6366f1);
}

#platformSuiteKpiStrip .platform-nav-tile.modal-tab-btn[data-accent="emerald"].active {
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.14) 0%, rgba(15, 23, 42, 0.88) 100%);
  border-color: rgba(16, 185, 129, 0.65);
  box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.32), 0 8px 20px -4px rgba(16, 185, 129, 0.25);
}
#platformSuiteKpiStrip .platform-nav-tile.modal-tab-btn[data-accent="emerald"].active::after {
  background: linear-gradient(90deg, #10b981, #34d399);
}

#platformSuiteKpiStrip .platform-nav-tile.modal-tab-btn[data-accent="purple"].active {
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.15) 0%, rgba(15, 23, 42, 0.88) 100%);
  border-color: rgba(139, 92, 246, 0.65);
  box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.32), 0 8px 20px -4px rgba(139, 92, 246, 0.25);
}
#platformSuiteKpiStrip .platform-nav-tile.modal-tab-btn[data-accent="purple"].active::after {
  background: linear-gradient(90deg, #8b5cf6, #a78bfa);
}

#platformSuiteKpiStrip .platform-nav-tile.modal-tab-btn[data-accent="amber"].active {
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.15) 0%, rgba(15, 23, 42, 0.88) 100%);
  border-color: rgba(245, 158, 11, 0.65);
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.32), 0 8px 20px -4px rgba(245, 158, 11, 0.25);
}
#platformSuiteKpiStrip .platform-nav-tile.modal-tab-btn[data-accent="amber"].active::after {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

#platformSuiteKpiStrip .platform-nav-tile.modal-tab-btn[data-accent="cyan"].active {
  background: linear-gradient(180deg, rgba(6, 182, 212, 0.15) 0%, rgba(15, 23, 42, 0.88) 100%);
  border-color: rgba(6, 182, 212, 0.65);
  box-shadow: 0 0 0 1px rgba(6, 182, 212, 0.32), 0 8px 20px -4px rgba(6, 182, 212, 0.25);
}
#platformSuiteKpiStrip .platform-nav-tile.modal-tab-btn[data-accent="cyan"].active::after {
  background: linear-gradient(90deg, #06b6d4, #38bdf8);
}

.platform-tile-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
}

.platform-tile-title-group {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.platform-tile-label {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #94a3b8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#platformSuiteKpiStrip .platform-nav-tile.modal-tab-btn.active .platform-tile-label {
  color: var(--text-main, #f8fafc);
}

.platform-tile-hero-row {
  display: flex;
  align-items: baseline;
  gap: 0.38rem;
  margin-top: 1px;
}

.platform-tile-hero {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--text-main, #f8fafc);
  font-variant-numeric: tabular-nums;
}

.platform-tile-hero.platform-tile-hero-status {
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}

.platform-tile-unit {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-muted, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.platform-tile-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0;
}

.platform-tile-icon.tile-icon-blue {
  background: rgba(59, 130, 246, 0.14);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.25);
}

.platform-tile-icon.tile-icon-emerald {
  background: rgba(16, 185, 129, 0.14);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.platform-tile-icon.tile-icon-purple {
  background: rgba(139, 92, 246, 0.14);
  color: #a78bfa;
  border: 1px solid rgba(139, 92, 246, 0.25);
}

.platform-tile-icon.tile-icon-amber {
  background: rgba(245, 158, 11, 0.14);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.25);
}

.platform-tile-icon.tile-icon-cyan {
  background: rgba(6, 182, 212, 0.14);
  color: #22d3ee;
  border: 1px solid rgba(6, 182, 212, 0.25);
}

.platform-tile-kv-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  padding-top: 0.45rem;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
  width: 100%;
}

.platform-tile-kv {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.69rem;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.16);
  color: var(--text-muted, #94a3b8);
  line-height: 1.25;
  white-space: nowrap;
}

.platform-tile-kv .kv-key {
  font-weight: 600;
  color: var(--text-muted, #94a3b8);
}

.platform-tile-kv .kv-val {
  font-weight: 800;
  color: var(--text-main, #f8fafc);
  font-variant-numeric: tabular-nums;
}

.platform-tile-kv .kv-val.kv-success {
  color: #34d399;
}

.platform-tile-kv .kv-val.kv-info {
  color: #60a5fa;
}

.platform-tile-kv .kv-val.kv-warning {
  color: #fbbf24;
}

.platform-tile-kv .kv-val.kv-danger {
  color: #f87171;
}

/* Light Mode Adaptations for Unified Platform Navigation & Status Tiles */
[data-theme="light"] #platformSuiteKpiStrip .platform-nav-tile.modal-tab-btn,
body.theme-light #platformSuiteKpiStrip .platform-nav-tile.modal-tab-btn,
html.light #platformSuiteKpiStrip .platform-nav-tile.modal-tab-btn {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #0f172a;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

[data-theme="light"] #platformSuiteKpiStrip .platform-nav-tile.modal-tab-btn:hover,
body.theme-light #platformSuiteKpiStrip .platform-nav-tile.modal-tab-btn:hover,
html.light #platformSuiteKpiStrip .platform-nav-tile.modal-tab-btn:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
}

[data-theme="light"] #platformSuiteKpiStrip .platform-nav-tile.modal-tab-btn.active,
body.theme-light #platformSuiteKpiStrip .platform-nav-tile.modal-tab-btn.active,
html.light #platformSuiteKpiStrip .platform-nav-tile.modal-tab-btn.active {
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.08) 0%, #ffffff 100%);
  border-color: #2563eb;
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.2), 0 6px 16px -4px rgba(37, 99, 235, 0.15);
}

[data-theme="light"] #platformSuiteKpiStrip .platform-nav-tile.modal-tab-btn[data-accent="emerald"].active,
html.light #platformSuiteKpiStrip .platform-nav-tile.modal-tab-btn[data-accent="emerald"].active {
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.08) 0%, #ffffff 100%);
  border-color: #059669;
  box-shadow: 0 0 0 1px rgba(5, 150, 105, 0.2), 0 6px 16px -4px rgba(5, 150, 105, 0.15);
}

[data-theme="light"] #platformSuiteKpiStrip .platform-nav-tile.modal-tab-btn[data-accent="purple"].active,
html.light #platformSuiteKpiStrip .platform-nav-tile.modal-tab-btn[data-accent="purple"].active {
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.08) 0%, #ffffff 100%);
  border-color: #7c3aed;
  box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.2), 0 6px 16px -4px rgba(124, 58, 237, 0.15);
}

[data-theme="light"] #platformSuiteKpiStrip .platform-nav-tile.modal-tab-btn[data-accent="amber"].active,
html.light #platformSuiteKpiStrip .platform-nav-tile.modal-tab-btn[data-accent="amber"].active {
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.09) 0%, #ffffff 100%);
  border-color: #d97706;
  box-shadow: 0 0 0 1px rgba(217, 119, 6, 0.2), 0 6px 16px -4px rgba(217, 119, 6, 0.15);
}

[data-theme="light"] #platformSuiteKpiStrip .platform-nav-tile.modal-tab-btn[data-accent="cyan"].active,
html.light #platformSuiteKpiStrip .platform-nav-tile.modal-tab-btn[data-accent="cyan"].active {
  background: linear-gradient(180deg, rgba(6, 182, 212, 0.08) 0%, #ffffff 100%);
  border-color: #0891b2;
  box-shadow: 0 0 0 1px rgba(8, 145, 178, 0.2), 0 6px 16px -4px rgba(8, 145, 178, 0.15);
}

[data-theme="light"] .platform-tile-kv-list,
html.light .platform-tile-kv-list {
  border-top-color: #e2e8f0;
}

[data-theme="light"] .platform-tile-kv,
html.light .platform-tile-kv {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #475569;
}

[data-theme="light"] .platform-tile-kv .kv-key,
html.light .platform-tile-kv .kv-key {
  color: #475569;
}

[data-theme="light"] .platform-tile-kv .kv-val,
html.light .platform-tile-kv .kv-val {
  color: #0f172a;
}

[data-theme="light"] .platform-tile-kv .kv-val.kv-success,
html.light .platform-tile-kv .kv-val.kv-success {
  color: #047857;
}

[data-theme="light"] .platform-tile-kv .kv-val.kv-info,
html.light .platform-tile-kv .kv-val.kv-info {
  color: #1d4ed8;
}

[data-theme="light"] .platform-tile-kv .kv-val.kv-warning,
html.light .platform-tile-kv .kv-val.kv-warning {
  color: #b45309;
}

[data-theme="light"] .platform-tile-kv .kv-val.kv-danger,
html.light .platform-tile-kv .kv-val.kv-danger {
  color: #b91c1c;
}

/* ─── Launchpad Branding & Email Template Content Editor ─────────────────── */
#editLaunchpadBrandingModal > .modal-content {
  max-width: 1240px;
  width: 95vw;
}

.launchpad-email-template-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.75rem;
  padding: 0.35rem;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid var(--border-color);
  border-radius: 10px;
}

.launchpad-email-tab-btn {
  flex: 1 1 160px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.48rem 0.7rem;
  border-radius: 7px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.16s ease;
}

.launchpad-email-tab-btn:hover {
  color: var(--text-primary);
  background: rgba(56, 189, 248, 0.08);
}

.launchpad-email-tab-btn.active {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.18), rgba(99, 102, 241, 0.18));
  border-color: rgba(56, 189, 248, 0.45);
  color: #f8fafc;
  box-shadow: 0 2px 10px rgba(56, 189, 248, 0.15);
}

.launchpad-email-token-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 0.65rem;
  margin-bottom: 0.85rem;
  background: rgba(56, 189, 248, 0.06);
  border: 1px dashed rgba(56, 189, 248, 0.3);
  border-radius: 8px;
}

.launchpad-email-token-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.45rem;
  border-radius: 5px;
  border: 1px solid rgba(56, 189, 248, 0.32);
  background: rgba(15, 23, 42, 0.72);
  color: #38bdf8;
  font-family: var(--font-mono, monospace);
  font-size: 0.68rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.launchpad-email-token-chip:hover {
  background: rgba(56, 189, 248, 0.2);
  border-color: #38bdf8;
  color: #ffffff;
  transform: translateY(-1px);
}

.launchpad-email-auto-textarea {
  field-sizing: content;
  height: auto;
  width: 100%;
  min-block-size: 2.5lh;
  max-block-size: 9lh;
  line-height: 1.45;
  resize: vertical;
}

[data-theme="light"] .launchpad-email-template-tabs,
html.light .launchpad-email-template-tabs {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

[data-theme="light"] .launchpad-email-tab-btn.active,
html.light .launchpad-email-tab-btn.active {
  background: #ffffff;
  border-color: #0284c7;
  color: #0f172a;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.12);
}

[data-theme="light"] .launchpad-email-token-bar,
html.light .launchpad-email-token-bar {
  background: rgba(2, 132, 199, 0.05);
  border-color: rgba(2, 132, 199, 0.3);
}

[data-theme="light"] .launchpad-email-token-chip,
html.light .launchpad-email-token-chip {
  background: #ffffff;
  border-color: #bae6fd;
  color: #0369a1;
}

[data-theme="light"] .launchpad-email-token-chip:hover,
html.light .launchpad-email-token-chip:hover {
  background: #e0f2fe;
  border-color: #0284c7;
  color: #0c4a6e;
}

/* ============================================================================
   SATELLITE APP PERMISSIONS MANAGER (2D Entitlement Matrix UI)
   ============================================================================ */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10050;
  background: rgba(2, 6, 23, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.modal-backdrop.hidden,
.hidden {
  display: none !important;
}

.modal-dialog.modal-lg.glass-panel {
  width: 100%;
  max-width: 920px;
  max-height: 90vh;
  background: rgba(15, 23, 42, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #f8fafc;
}

[data-theme="light"] .modal-dialog.modal-lg.glass-panel,
html.light .modal-dialog.modal-lg.glass-panel {
  background: rgba(255, 255, 255, 0.97);
  border-color: #cbd5e1;
  color: #0f172a;
}

#userAppPermissionsModal .modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(30, 41, 59, 0.5);
}

[data-theme="light"] #userAppPermissionsModal .modal-header,
html.light #userAppPermissionsModal .modal-header {
  background: #f8fafc;
  border-bottom-color: #e2e8f0;
}

#userAppPermissionsModal .modal-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--text-main, #f8fafc);
}

#userAppPermissionsModal .modal-subtitle {
  margin: 0.25rem 0 0 0;
  font-size: 0.82rem;
  color: var(--text-muted, #94a3b8);
}

#userAppPermissionsModal .modal-close {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-muted, #94a3b8);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

#userAppPermissionsModal .modal-close:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.35);
}

#userAppPermissionsModal .modal-body {
  padding: 1.25rem 1.5rem;
  overflow-y: auto;
  flex: 1 1 auto;
}

#userAppPermissionsModal .modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(15, 23, 42, 0.75);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
}

[data-theme="light"] #userAppPermissionsModal .modal-footer,
html.light #userAppPermissionsModal .modal-footer {
  background: #f8fafc;
  border-top-color: #e2e8f0;
}

.user-perm-summary-card {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
}

[data-theme="light"] .user-perm-summary-card,
html.light .user-perm-summary-card {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.perm-summary-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.perm-summary-item .label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #94a3b8);
}

.module-icon-box {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.app-role-select {
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #f8fafc;
  border-radius: 6px;
  padding: 0.35rem 0.6rem;
  font-size: 0.85rem;
  width: 100%;
  max-width: 220px;
}

[data-theme="light"] .app-role-select,
html.light .app-role-select {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #0f172a;
}

.app-role-select:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

tr.row-disabled {
  opacity: 0.55;
  background: rgba(0, 0, 0, 0.15);
}

#appPermissionsTable.table-custom {
  width: 100%;
  border-collapse: collapse;
}

#appPermissionsTable.table-custom th {
  text-align: left;
  font-size: 0.73rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #94a3b8);
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#appPermissionsTable.table-custom td {
  padding: 0.85rem;
  vertical-align: middle;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

#userAppPermissionsModal .d-flex {
  display: flex;
}

#userAppPermissionsModal .align-items-center {
  align-items: center;
}

#userAppPermissionsModal .gap-2 {
  gap: 0.65rem;
}

#userAppPermissionsModal .fw-bold {
  font-weight: 700;
}

#userAppPermissionsModal .text-xs {
  font-size: 0.75rem;
}

#userAppPermissionsModal .text-sm {
  font-size: 0.82rem;
}

#userAppPermissionsModal .text-muted {
  color: var(--text-muted, #94a3b8);
}

#userAppPermissionsModal .text-accent {
  color: var(--primary, #38bdf8);
}

#userAppPermissionsModal .text-danger {
  color: #f87171;
}

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

#userAppPermissionsModal .py-4 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

#userAppPermissionsModal .mt-3 {
  margin-top: 1rem;
}

#userAppPermissionsModal .form-check.form-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;
}

#userAppPermissionsModal .form-check-input.app-enable-toggle {
  width: 36px;
  height: 20px;
  accent-color: #10b981;
  cursor: pointer;
}

#userAppPermissionsModal .badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
}

#userAppPermissionsModal .badge-success {
  background: rgba(16, 185, 129, 0.16);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.35);
}

#userAppPermissionsModal .badge-secondary,
#userAppPermissionsModal .badge-neutral {
  background: rgba(148, 163, 184, 0.16);
  color: #cbd5e1;
  border: 1px solid rgba(148, 163, 184, 0.3);
}

#userAppPermissionsModal .badge-primary {
  background: rgba(99, 102, 241, 0.2);
  color: #818cf8;
  border: 1px solid rgba(99, 102, 241, 0.4);
}

#userAppPermissionsModal .badge-info {
  background: rgba(56, 189, 248, 0.16);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.35);
}

#userAppPermissionsModal .badge-danger {
  background: rgba(239, 68, 68, 0.18);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.4);
}

#userAppPermissionsModal .alert.alert-warning {
  padding: 0.75rem 1rem;
  border-radius: 8px;
  background: rgba(245, 158, 11, 0.14);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #fbbf24;
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

#userAppPermissionsModal .btn-secondary {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--text-main, #f8fafc);
  border-radius: 8px;
  padding: 0.48rem 1rem;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
}

#userAppPermissionsModal .btn-primary {
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  border: 1px solid rgba(99, 102, 241, 0.5);
  color: #ffffff;
  border-radius: 8px;
  padding: 0.48rem 1.15rem;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

#userAppPermissionsModal .btn-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn-subtle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.32);
  color: #818cf8;
  border-radius: 6px;
  padding: 0.2rem 0.55rem;
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn-subtle:hover {
  background: rgba(99, 102, 241, 0.24);
  border-color: rgba(99, 102, 241, 0.55);
  color: #a5b4fc;
}

.btn-subtle.btn-chip-module-access {
  padding: 1px 5px;
  font-size: 0.68rem;
  margin-left: 2px;
}