/* DV8 Quantum SecIntel — CI CSS (conflict-free, tokenized) */
/* DV8 THEME SYSTEM: Light theme (default) + Dark theme via data-theme="dark" on <html> */

/* BUA Design System - Import Order (Required) */
/* 1. BUA theme tokens */
@import url('/branding/theme.tokens.css');

/* 2. BUA runtime behavior */
@import url('/branding/theme.runtime.css');

/* 3. Compatibility shim */
@import url('./tokens-compat.css');

/* Legacy design tokens (for backward compatibility) */
@import url('./dv8-design-tokens.css');
@import url('./design-tokens.css');
@import url('./sandf-theme.css');

/* SDIP shell alignment for the imported SANDF theme. */
html[data-theme="sandf"] .qs-platform-shell {
  background: linear-gradient(135deg, var(--page-bg), var(--surface-elevated));
}

html[data-theme="sandf"] .qs-sidebar {
  background: linear-gradient(180deg, rgba(4, 16, 8, 0.98), rgba(0, 66, 37, 0.96));
  border-right-color: rgba(255, 202, 5, 0.22);
}

html[data-theme="sandf"] .qs-sidebar-brand {
  border-bottom-color: rgba(255, 202, 5, 0.22);
}

html[data-theme="sandf"] .qs-shell-brand .ss-logo-lockup {
  display: none;
}

html[data-theme="sandf"] .qs-shell-brand .sandf-theme-brand {
  display: inline-flex;
}

html:not([data-theme="sandf"]) .dv8-auth-brand-lockup .dv8-auth-brandmark-image--sandf,
html[data-theme="sandf"] .dv8-auth-brand-lockup .dv8-auth-brandmark-image--default {
  display: none;
}

html[data-theme="sandf"] .dv8-auth-brand-lockup .dv8-auth-brandmark-image--sandf {
  display: block;
}

html[data-theme="sandf"] .qs-sidebar.collapsed .sandf-theme-brand__img {
  width: 2rem;
  height: 2rem;
  max-width: 2rem;
  object-fit: contain;
}

html[data-theme="sandf"] .qs-topbar {
  background: rgba(255, 255, 255, 0.94);
  border-bottom-color: rgba(0, 101, 54, 0.16);
  box-shadow: 0 14px 34px rgba(0, 42, 22, 0.08);
}

html[data-theme="sandf"] .qs-nav-item:hover,
html[data-theme="sandf"] .qs-nav-item.active {
  background:
    linear-gradient(90deg, rgba(255, 202, 5, 0.18), transparent 82%),
    rgba(255, 255, 255, 0.06);
  box-shadow: inset 4px 0 0 var(--sandf-gold);
}

html[data-theme="sandf"] .qs-tenant-pill,
html[data-theme="sandf"] .qs-user-pill,
html[data-theme="sandf"] .theme-toggle {
  border-color: rgba(0, 101, 54, 0.18);
  background: rgba(255, 255, 255, 0.96);
  color: var(--sandf-green);
}

html[data-theme="sandf"] .qs-tenant-pill {
  color: var(--sandf-green-deep);
}

html[data-theme="sandf"] .qs-user-pill:hover,
html[data-theme="sandf"] .theme-toggle:hover,
html[data-theme="sandf"] .theme-toggle:focus-visible {
  border-color: rgba(255, 202, 5, 0.72);
  color: var(--sandf-green-deep);
}

/* Global styles */
body{
  font-family: var(--font-sans);
  background-color: var(--page-bg);
  color: var(--text);
}

/* 2) Navbar */
.navbar-brand{
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-xl);
  color: var(--brand-600) !important;
}
.navbar-dark{ background-color: var(--brand-600) !important; }
.navbar-dark .navbar-nav .nav-link{ color: rgba(255,255,255,0.9) !important; }
.navbar-dark .navbar-nav .nav-link:hover{ color: rgba(255,255,255,1) !important; }

/* 3) Cards (QS-INTEL-v2025001 choice) */
.card{
  border: none;
  border-radius: var(--radius-lg);
  transition: all var(--transition-base);
  box-shadow: var(--shadow-card);
  background-color: var(--surface-bg);
  /* Performance optimization for hover animations */
  will-change: transform, box-shadow;
  /* Better isolation for transformed elements */
  isolation: isolate;
}
.card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-elevated);
}
.card-header{
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  border-bottom: 1px solid var(--border);
  font-weight: var(--font-weight-semibold);
  background: transparent;
  padding: var(--space-6) var(--space-6) var(--space-4);
}
.card-body{ 
  padding: var(--space-6); 
}

/* 4) Buttons */
.btn{
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-medium);
  transition: all .2s ease;
  min-height: var(--min-touch-target, 44px);
  font-family: var(--font-family-primary, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  /* Performance optimization for animations */
  will-change: transform, box-shadow;
  /* Better tap/click experience on mobile */
  touch-action: manipulation;
}
.btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.btn:focus{
  outline: 2px solid var(--dv8-red, #C92736);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgba(201, 39, 54, 0.35);
}
.btn:focus-visible{
  outline: 2px solid var(--dv8-red, #C92736);
  outline-offset: 2px;
}
.btn-primary{
  background-color: var(--dv8-red, #C92736);
  border-color: var(--dv8-red, #C92736);
}
.btn-primary:hover{
  background-color: var(--dv8-red-hover, #A31E2B);
  border-color: var(--dv8-red-hover, #A31E2B);
}
.btn-outline-primary{
  color: var(--dv8-red, #C92736);
  border-color: var(--dv8-red, #C92736);
}
.btn-outline-primary:hover{
  background-color: var(--dv8-red, #C92736);
  border-color: var(--dv8-red, #C92736);
  color: #fff;
}

/* 5) Forms */
.form-control, .form-select{
  border-radius: var(--radius-sm, 8px);
  border: 2px solid var(--border);
  transition: all .2s ease;
  font-family: var(--font-family-primary, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  min-height: var(--min-touch-target, 44px);
}
.form-control:focus, .form-select:focus{
  border-color: var(--dv8-red, #C92736);
  box-shadow: 0 0 0 2px rgba(201, 39, 54, 0.35);
  outline: 2px solid transparent;
  outline-offset: 2px;
}

/* Enhanced focus management for better accessibility */
.form-control:focus-visible, .form-select:focus-visible{
  outline: 2px solid var(--dv8-red, #C92736);
  outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .form-control:focus, .form-select:focus{
    border-width: 3px;
    box-shadow: 0 0 0 3px var(--dv8-red, #C92736);
  }
}

/* 6) Badges */
.badge{
  border-radius: var(--radius-sm);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-family-primary);
}
.bg-success{ background-color: var(--success-500) !important; }
.bg-danger{  background-color: var(--danger-500) !important; }
.bg-warning{ background-color: var(--warning-500) !important; }
.bg-info{    background-color: var(--info-500) !important; }
.bg-primary{ background-color: var(--dv8-red, #C92736) !important; }

/* 7) Text helpers */
.text-primary{ color: var(--dv8-red, #C92736) !important; }
.text-success{ color: var(--success-500) !important; }
.text-danger{  color: var(--danger-500) !important; }
.text-warning{ color: var(--warning-500) !important; }
.text-info{    color: var(--info-500) !important; }
.text-gray-800{ color: var(--ink-900); }
.text-gray-300{ color: var(--ink-600); }
.font-weight-bold{ font-weight: var(--font-weight-bold); }

/* 8) Alerts */
.alert{
  border: none;
  border-radius: var(--radius-sm);
  border-left: 4px solid;
  font-family: var(--font-family-primary);
}
.alert-success{
  border-left-color: var(--success-500);
  background-color: rgba(22,163,74,.1);
  color: var(--success-500);
}
.alert-info{
  border-left-color: var(--info-500);
  background-color: rgba(8,145,178,.1);
  color: var(--info-500);
}
.alert-warning{
  border-left-color: var(--warning-500);
  background-color: rgba(217,119,6,.1);
  color: var(--warning-500);
}
.alert-danger{
  border-left-color: var(--danger-500);
  background-color: rgba(220,38,38,.1);
  color: var(--danger-500);
}

/* 9) Charts */
canvas{ max-height: 400px; }

/* 10) Activity Feed */
#activityFeed .alert{
  margin-bottom: .5rem;
  padding: var(--space-lg);
  font-size: var(--font-size-sm);
}

/* 11) Module Selection */
.module-card{
  cursor: pointer;
  transition: all .2s ease;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
}
.module-card:hover{
  border-color: var(--dv8-red, #C92736);
  background-color: rgba(201, 39, 54, 0.05);
}
.module-card .form-check-input:checked + .form-check-label{
  color: var(--accent-500);
}

/* 12) Loading */
.spinner-border{ width: 2rem; height: 2rem; }

/* 13) Status */
.status-online{ color: var(--success-500); }
.status-offline{ color: var(--danger-500); }
.status-processing{ color: var(--warning-500); }

/* 14) Interactive */
.interactive-element{ transition: all .2s ease; }
.interactive-element:hover{ transform: scale(1.02); }

/* 15) Dashboard metrics */
.dashboard-metric{
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-semibold);
  color: var(--ink-900);
}
.dashboard-metric-label{
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: var(--space-sm);
}

/* 16) Footer helpers */
footer .disclaimer,
footer .copyright{
  font-size: 11px;
  line-height: 1.4;
  opacity: .9;
}

/* 17) Pulse (reduced-motion aware) - Cross-browser support */
.pulse{ 
  animation: pulse 2s infinite;
  /* Performance optimization */
  will-change: transform;
}

/* Keyframes with vendor prefixes for older browsers */
@keyframes pulse{
  0%{ 
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
  }
  50%{ 
    transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
  }
  100%{ 
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
  }
}

/* Webkit prefix for older Safari/Chrome */
@-webkit-keyframes pulse{
  0%{ -webkit-transform: scale(1); }
  50%{ -webkit-transform: scale(1.05); }
  100%{ -webkit-transform: scale(1); }
}

/* Motion reduction support */
@media (prefers-reduced-motion: reduce){
  .pulse{ 
    animation: none;
    will-change: auto;
  }
  .interactive-element:hover{ 
    transform: none;
    -webkit-transform: none;
  }
  .btn:hover{ 
    transform: none;
    -webkit-transform: none;
  }
  .card:hover{
    transform: none;
    -webkit-transform: none;
  }
  /* Disable logo hover animations for reduced motion */
  .navbar-logo-img:hover,
  .dv8-logo-img:hover {
    transform: none;
    -webkit-transform: none;
  }
}

/* 18) Custom Scrollbar - Cross-browser support */
/* Firefox scrollbar styling */
* {
  scrollbar-width: thin;
  scrollbar-color: #c1c1c1 #f1f1f1;
}

/* Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar{ 
  width: 8px; 
  height: 8px;
}
::-webkit-scrollbar-track{
  background: #f1f1f1;
  border-radius: var(--radius-xs, 4px);
}
::-webkit-scrollbar-thumb{
  background: #c1c1c1;
  border-radius: var(--radius-xs, 4px);
  border: 1px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover{ 
  background: #a8a8a8;
  background-clip: content-box;
}
::-webkit-scrollbar-corner{
  background: #f1f1f1;
}

/* 19) Desktop-optimized layout */

/* 20) Dark theme support via data-theme attribute */
[data-theme="dark"] .card{
  background-color: var(--surface-bg);
  color: var(--text);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border);
}
[data-theme="dark"] .card-header{
  border-bottom-color: var(--border);
}
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select{
  background-color: var(--surface-elevated);
  border-color: var(--border);
  color: var(--text);
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus{
  border-color: var(--dv8-red, #C92736);
  box-shadow: 0 0 0 2px rgba(201, 39, 54, 0.5);
}
[data-theme="dark"] .dropdown-menu{
  background-color: var(--surface-elevated);
  border-color: var(--border);
}
[data-theme="dark"] .dropdown-item{
  color: var(--text);
}
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus{
  background-color: var(--surface-bg);
  color: var(--text);
}
[data-theme="dark"] .dropdown-divider{
  border-color: var(--border);
}
[data-theme="dark"] .table{
  color: var(--text);
}
[data-theme="dark"] .table > :not(caption) > * > *{
  background-color: transparent;
  color: var(--text);
  border-bottom-color: var(--border);
}
[data-theme="dark"] .alert-secondary{
  background-color: var(--surface-elevated);
  color: var(--text-secondary);
  border-color: var(--border);
}
[data-theme="dark"] .text-muted{
  color: var(--text-tertiary) !important;
}
[data-theme="dark"] .text-dark{
  color: var(--text) !important;
}
[data-theme="dark"] .input-group-text{
  background-color: var(--surface-elevated);
  border-color: var(--border);
  color: var(--text-secondary);
}
[data-theme="dark"] .badge.bg-light{
  background-color: var(--surface-elevated) !important;
  color: var(--text) !important;
}

/* Dark theme scrollbar */
[data-theme="dark"] *{
  scrollbar-color: var(--border-strong) var(--surface-bg);
}
[data-theme="dark"] ::-webkit-scrollbar-track{
  background: var(--surface-bg);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb{
  background: var(--border-strong);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{
  background: var(--text-tertiary);
}

/* Forced colors mode support (Windows High Contrast) */
@media (forced-colors: active) {
  .card {
    border: 1px solid;
  }
  .btn {
    border: 1px solid;
  }
  .form-control, .form-select {
    border: 1px solid;
  }
}

/* 21) Logo Image Classes */
.dv8-logo-img{
  height: 72px;
  width: auto;
  object-fit: contain;
  max-width: 240px;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.dv8-logo-img:hover{
  transform: scale(1.05);
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.2));
}

.navbar-logo-img{
  height: 40px;
  width: auto;
  object-fit: contain;
  max-width: 120px;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.navbar-logo-img:hover{
  transform: scale(1.05);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
}

/* Browser compatibility styles moved to browser-compatibility.css */
/* This file now focuses on application-specific styles */

/* Ensure consistent line-height across browsers */
body {
  line-height: 1.5;
}

/* Fix for iOS Safari input zoom */
input[type="text"], 
input[type="email"], 
input[type="password"], 
input[type="tel"], 
input[type="number"], 
select,
textarea {
  font-size: 16px;
}

/* Prevent horizontal scroll on mobile */
html, body {
  overflow-x: hidden;
}

/* Better touch target sizing for mobile browsers */
@media (max-width: 768px) {
  .btn, .form-control, .form-select {
    min-height: 48px;
    padding: 12px 16px;
  }
  
  .nav-link {
    padding: 12px 16px;
  }
}

/* Browser-specific styles moved to browser-compatibility.css for better organization */

/* ===========================================
   SDIP COMPATIBILITY LAYER
   Maps legacy SDIP utility classes to BUA tokens
   =========================================== */

/* Legacy accent color classes → DV8 Red */
.text-accent { color: var(--dv8-red, #C92736) !important; }
.bg-accent { background-color: var(--dv8-red, #C92736) !important; }
.border-accent { border-color: var(--dv8-red, #C92736) !important; }

/* Legacy background utilities → BUA surface tokens */
.bg-dv8-primary { background-color: var(--surface-elevated, #F9FAFB) !important; }
.bg-dv8-secondary { background-color: var(--surface-elevated, #F9FAFB) !important; }

/* Legacy stat-card → BUA KPI card pattern */
.stat-card {
  background: var(--surface-bg, #FFFFFF);
  border-left: 4px solid var(--dv8-red, #C92736);
  padding: var(--space-5, 1.5rem);
  border-radius: var(--radius-lg, 0.75rem);
  box-shadow: var(--shadow-card);
}
.stat-card .stat-value {
  font-size: var(--font-size-3xl, 1.875rem);
  font-weight: var(--font-weight-bold, 700);
  color: var(--dv8-red, #C92736);
  font-variant-numeric: tabular-nums;
}
.stat-card .stat-label {
  color: var(--text-secondary, #4B5563);
  text-transform: uppercase;
  font-size: var(--font-size-xs, 0.75rem);
  letter-spacing: 0.05em;
  font-weight: var(--font-weight-medium, 500);
}

/* Legacy classification badges */
.badge-classification {
  font-size: var(--font-size-xs, 0.75rem);
  letter-spacing: 0.05em;
  padding: 0.35em 0.65em;
}

/* Legacy service status indicators */
.service-status {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full, 9999px);
  margin-right: var(--space-2, 0.5rem);
}
.service-status.online { background-color: var(--success, #16A34A); box-shadow: 0 0 6px var(--success, #16A34A); }
.service-status.warning { background-color: var(--warning, #D97706); box-shadow: 0 0 6px var(--warning, #D97706); }
.service-status.offline { background-color: var(--danger, #DC2626); }

/* Legacy quantum-shield badge → BUA brand badge */
.quantum-shield-badge {
  background: linear-gradient(135deg, var(--dv8-red, #C92736), var(--dv8-orange, #F04C23));
  color: #fff;
  font-weight: var(--font-weight-bold, 700);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-md, 0.5rem);
  font-size: var(--font-size-xs, 0.75rem);
}

/* Legacy search input → BUA form styling */
.search-input {
  background-color: var(--surface-bg, #FFFFFF);
  border: 2px solid var(--border, #E5E7EB);
  color: var(--text, #111827);
  border-radius: var(--radius-md, 0.5rem);
}
.search-input:focus {
  border-color: var(--dv8-red, #C92736);
  box-shadow: 0 0 0 0.2rem rgba(201, 39, 54, 0.15);
  background-color: var(--surface-bg, #FFFFFF);
  color: var(--text, #111827);
}

/* Legacy btn-accent → BUA brand button */
.btn-accent {
  background-color: var(--dv8-red, #C92736);
  color: #fff;
  border: none;
  font-weight: var(--font-weight-semibold, 600);
}
.btn-accent:hover {
  background-color: var(--dv8-red-hover, #A81F2D);
  color: #fff;
}
.btn-accent:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(201, 39, 54, 0.35);
}

/* Legacy classification badge colors */
.badge-Unclassified { background-color: #6b7280; }
.badge-Internal { background-color: #3b82f6; }
.badge-Confidential { background-color: #f59e0b; color: #000; }
.badge-Secret { background-color: #ef4444; }
.badge-TopSecret { background-color: #7c3aed; }

/* Legacy case status badge styles */
.badge-status {
  font-size: var(--font-size-xs, 0.75rem);
  padding: 0.35em 0.65em;
}
.badge-Draft { background-color: #6b7280; }
.badge-Submitted { background-color: #3b82f6; }
.badge-InReview { background-color: #f59e0b; color: #000; }
.badge-Verified { background-color: #8b5cf6; }
.badge-Archived { background-color: #10b981; }
.badge-Rejected { background-color: #ef4444; }
.badge-RequiresAction { background-color: #f97316; color: #000; }
.badge-Escalated { background-color: #8b5cf6; }
.badge-Locked { background-color: #dc2626; }
.badge-Expired { background-color: #9ca3af; }
.badge-Revoked { background-color: #b91c1c; }
.badge-Deleted { background-color: #374151; }

/* Gateway experience surfaces */
.page-hero,
.dashboard-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem;
  border-radius: var(--radius-lg, 0.75rem);
  background:
    radial-gradient(circle at top right, rgba(201, 39, 54, 0.12), transparent 32%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(249, 250, 251, 0.96));
  box-shadow: var(--shadow-card);
}

.metric-panel {
  padding: 1rem;
  border-radius: var(--radius-md, 0.5rem);
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(15, 23, 42, 0.08);
}

.metric-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary, #4b5563);
}

.metric-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--ink-900, #111827);
  line-height: 1.1;
  margin-top: 0.35rem;
}

.summary-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border-radius: var(--radius-md, 0.5rem);
  background: rgba(37, 99, 235, 0.05);
  border: 1px solid rgba(37, 99, 235, 0.12);
}

.summary-strip-label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary, #4b5563);
}

.connector-row,
.ops-row,
.device-row,
.dev-account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.connector-row:last-child,
.ops-row:last-child,
.device-row:last-child,
.dev-account-row:last-child {
  border-bottom: none;
}

.connector-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96)),
    radial-gradient(circle at top right, rgba(37, 99, 235, 0.08), transparent 28%);
}

.table-card .table > :not(caption) > * > * {
  background: transparent;
}

.filter-toolbar {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94));
  border: 1px solid rgba(15, 23, 42, 0.06);
}

.service-card {
  border-top: 4px solid rgba(201, 39, 54, 0.85);
}

.result-panel {
  padding: 1rem;
  border-radius: var(--radius-md, 0.5rem);
  background: rgba(15, 23, 42, 0.03);
  border: 1px solid rgba(15, 23, 42, 0.08);
}

/* ===========================================
   COMMAND DASHBOARD: LOGIN-ALIGNED CI/UX
   =========================================== */

.command-dashboard-shell {
  display: grid;
  gap: 1.5rem;
}

.command-dashboard-hero {
  display: block;
  gap: 0;
  padding: 0;
  align-items: stretch;
  justify-content: initial;
  position: relative;
  overflow: hidden;
  border: none;
  border-radius: var(--radius-lg, 1rem);
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.18), transparent 26%),
    linear-gradient(135deg, var(--dv8-red, #C92736) 0%, #991B1B 100%);
  color: #fff;
  box-shadow: 0 25px 50px rgba(15, 23, 42, 0.18);
}

.command-dashboard-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at left center, rgba(255, 255, 255, 0.08), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(15, 23, 42, 0.12));
  pointer-events: none;
}

.command-dashboard-hero .card-body {
  position: relative;
  z-index: 1;
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

.command-dashboard-hero:hover {
  transform: none;
  box-shadow: 0 25px 50px rgba(15, 23, 42, 0.18);
}

.command-dashboard-hero-header {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
  gap: 1.5rem;
  align-items: start;
  margin-bottom: 1.5rem;
}

.command-dashboard-brand {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.command-dashboard-logo {
  width: min(14rem, 42vw);
  max-width: 14rem;
  flex-shrink: 0;
  filter: brightness(0) invert(1);
}

.command-dashboard-brand-copy {
  max-width: 40rem;
}

.command-dashboard-kicker {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.command-dashboard-title {
  margin: 0 0 0.75rem;
  font-size: clamp(2rem, 3vw, 2.75rem);
  font-weight: 700;
  line-height: 1.05;
}

.command-dashboard-copy {
  color: rgba(255, 255, 255, 0.84);
  font-size: 1rem;
  line-height: 1.65;
}

.command-dashboard-meta-grid {
  display: grid;
  gap: 0.85rem;
}

.command-dashboard-meta-card {
  padding: 1rem 1.1rem;
  border-radius: var(--radius-md, 0.75rem);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.command-dashboard-meta-label {
  display: block;
  margin-bottom: 0.35rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.command-dashboard-meta-card strong {
  display: block;
  font-size: 1rem;
  line-height: 1.35;
}

.command-dashboard-platform-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.command-dashboard-platform-label {
  max-width: 32rem;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.45;
}

.command-dashboard-hero .quantum-shield-badge {
  background: rgba(15, 23, 42, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: none;
}

.command-dashboard-next-step {
  background: rgba(15, 23, 42, 0.16);
  border-left-color: rgba(255, 255, 255, 0.9);
  color: rgba(255, 255, 255, 0.92);
}

.command-dashboard-next-step i {
  color: #fff;
}

.command-dashboard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.command-dashboard-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 46px;
  padding-inline: 1rem;
  border-radius: var(--radius-md, 0.75rem);
  font-weight: 600;
}

.command-dashboard-hero .btn-accent {
  background: #fff;
  border-color: #fff;
  color: var(--dv8-red, #C92736);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
}

.command-dashboard-hero .btn-accent:hover,
.command-dashboard-hero .btn-accent:focus {
  background: #fff;
  border-color: #fff;
  color: #991B1B;
}

.command-dashboard-hero .btn-outline-secondary {
  background: rgba(15, 23, 42, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}

.command-dashboard-hero .btn-outline-secondary:hover,
.command-dashboard-hero .btn-outline-secondary:focus {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.48);
  color: #fff;
}

.command-dashboard-alert {
  margin-bottom: 0;
  border-radius: var(--radius-md, 0.75rem);
  box-shadow: var(--shadow-card);
}

.command-dashboard-kpi {
  --command-dashboard-kpi-accent: var(--dv8-red, #C92736);
  position: relative;
  height: 100%;
  overflow: hidden;
  border-left: none;
  border-top: 4px solid var(--command-dashboard-kpi-accent);
  background:
    radial-gradient(circle at top right, rgba(201, 39, 54, 0.08), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
}

.command-dashboard-kpi .stat-value {
  color: var(--command-dashboard-kpi-accent);
}

.command-dashboard-kpi-documents {
  --command-dashboard-kpi-accent: var(--dv8-red, #C92736);
}

.command-dashboard-kpi-cases {
  --command-dashboard-kpi-accent: #2563EB;
}

.command-dashboard-kpi-open {
  --command-dashboard-kpi-accent: #D97706;
}

.command-dashboard-kpi-users {
  --command-dashboard-kpi-accent: #059669;
}

.command-dashboard-card {
  border-radius: var(--radius-lg, 1rem);
  border: 1px solid rgba(15, 23, 42, 0.08);
  background:
    radial-gradient(circle at top right, rgba(201, 39, 54, 0.06), transparent 26%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.95));
}

.command-dashboard-card .card-body {
  padding: 1.5rem;
}

.command-dashboard-section-heading {
  color: var(--dv8-red, #C92736);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.command-dashboard-inline-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: rgba(201, 39, 54, 0.08);
  color: var(--dv8-red, #C92736);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.command-dashboard-inline-action {
  min-height: 38px;
  padding-inline: 0.9rem;
}

.command-dashboard-card .metric-panel {
  height: 100%;
  border-radius: var(--radius-md, 0.75rem);
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(15, 23, 42, 0.08);
}

.command-dashboard-card .summary-strip {
  background: rgba(201, 39, 54, 0.06);
  border-color: rgba(201, 39, 54, 0.16);
}

.command-dashboard-list-row {
  padding: 0.95rem 0.25rem;
  border-bottom-color: rgba(15, 23, 42, 0.08);
  border-radius: var(--radius-sm, 0.5rem);
  transition: background-color var(--transition-base), transform var(--transition-base);
}

.command-dashboard-list-row:hover {
  background: rgba(201, 39, 54, 0.04);
  transform: translateX(2px);
}

.command-dashboard-table-wrap {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--radius-md, 0.75rem);
  background: rgba(255, 255, 255, 0.86);
}

.command-dashboard-table-wrap .table thead th {
  background: rgba(201, 39, 54, 0.06);
  border-bottom-color: rgba(201, 39, 54, 0.12);
  color: var(--ink-700, #374151);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.command-dashboard-table-wrap .table tbody tr {
  transition: background-color var(--transition-base);
}

.command-dashboard-table-wrap .table tbody tr:hover {
  background: rgba(201, 39, 54, 0.04);
}

[data-theme="dark"] .command-dashboard-kpi {
  background:
    radial-gradient(circle at top right, rgba(201, 39, 54, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(30, 41, 59, 0.96), rgba(15, 23, 42, 0.94));
}

[data-theme="dark"] .command-dashboard-card {
  border-color: rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at top right, rgba(201, 39, 54, 0.1), transparent 26%),
    linear-gradient(180deg, rgba(30, 41, 59, 0.96), rgba(15, 23, 42, 0.94));
}

[data-theme="dark"] .command-dashboard-inline-pill {
  background: rgba(201, 39, 54, 0.16);
  color: #FCA5A5;
}

[data-theme="dark"] .command-dashboard-card .metric-panel,
[data-theme="dark"] .command-dashboard-table-wrap {
  background: rgba(15, 23, 42, 0.5);
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .command-dashboard-card .summary-strip {
  background: rgba(201, 39, 54, 0.12);
  border-color: rgba(201, 39, 54, 0.22);
}

[data-theme="dark"] .command-dashboard-list-row {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .command-dashboard-list-row:hover {
  background: rgba(201, 39, 54, 0.1);
}

[data-theme="dark"] .command-dashboard-table-wrap .table thead th {
  background: rgba(201, 39, 54, 0.12);
  border-bottom-color: rgba(201, 39, 54, 0.18);
  color: #F3F4F6;
}

[data-theme="dark"] .command-dashboard-table-wrap .table tbody tr:hover {
  background: rgba(201, 39, 54, 0.08);
}

@media (max-width: 991px) {
  .page-hero,
  .dashboard-hero,
  .summary-strip {
    flex-direction: column;
    align-items: flex-start;
  }

  .command-dashboard-hero-header {
    grid-template-columns: 1fr;
  }

  .command-dashboard-platform-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 768px) {
  .command-dashboard-brand {
    flex-direction: column;
  }

  .command-dashboard-logo {
    width: min(11rem, 60vw);
  }

  .command-dashboard-actions {
    flex-direction: column;
  }

  .command-dashboard-action,
  .command-dashboard-inline-action {
    width: 100%;
  }
}

.theme-logo-dark,
.ops-brand-logo--dark {
  display: none;
}

[data-theme="dark"] .theme-logo-light,
[data-theme="dark"] .ops-brand-logo--light {
  display: none;
}

[data-theme="dark"] .theme-logo-dark,
[data-theme="dark"] .ops-brand-logo--dark {
  display: inline-block;
}

.qs-tenant-switcher {
  min-width: 12rem;
}

.qs-tenant-switcher .form-select {
  border-radius: 999px;
  border-color: rgba(15, 23, 42, 0.12);
  background: rgba(248, 250, 252, 0.96);
  font-size: 0.82rem;
  font-weight: 600;
}

[data-theme="dark"] .qs-tenant-switcher .form-select {
  background: rgba(15, 23, 42, 0.7);
  border-color: rgba(255, 255, 255, 0.12);
  color: #f3f4f6;
}

.ops-page,
.workbench-page,
.profile-settings-page {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.workbench-head,
.ops-header {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 1.8fr) minmax(260px, 1fr);
  align-items: start;
  padding: 1.5rem;
  border-radius: 1.25rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background:
    radial-gradient(circle at top right, rgba(201, 39, 54, 0.08), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

[data-theme="dark"] .workbench-head,
[data-theme="dark"] .ops-header {
  border-color: rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at top right, rgba(201, 39, 54, 0.14), transparent 34%),
    linear-gradient(180deg, rgba(30, 41, 59, 0.96), rgba(15, 23, 42, 0.94));
  box-shadow: 0 18px 40px rgba(2, 6, 23, 0.35);
}

.workbench-kicker {
  display: inline-flex;
  align-items: center;
  margin-bottom: 0.8rem;
  color: var(--dv8-red, #c92736);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.workbench-head h1,
.ops-header h1 {
  margin: 0;
  font-size: clamp(1.9rem, 2vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.workbench-lead,
.ops-header-lead {
  margin: 0.85rem 0 0;
  max-width: 58rem;
  color: var(--ink-600, #4b5563);
  line-height: 1.65;
}

[data-theme="dark"] .workbench-lead,
[data-theme="dark"] .ops-header-lead {
  color: #cbd5e1;
}

.workbench-actions,
.profile-header-actions,
.ops-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

:root {
  --ops-shell-gap: 1rem;
  --ops-card-radius: 1.25rem;
  --ops-panel-padding: 1.25rem;
  --ops-summary-min: 11.5rem;
  --ops-panel-min: 18rem;
  --ops-summary-min-height: 10.5rem;
  --ops-signal-min-height: 9.75rem;
}

.ops-context-grid {
  display: grid;
  gap: var(--ops-shell-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ops-summary-min)), 1fr));
  align-items: stretch;
}

.ops-context-card,
.surface-card,
.ops-summary-card,
.ops-panel {
  border-radius: var(--ops-card-radius);
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
}

[data-theme="dark"] .ops-context-card,
[data-theme="dark"] .surface-card,
[data-theme="dark"] .ops-summary-card,
[data-theme="dark"] .ops-panel {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(15, 23, 42, 0.72);
  box-shadow: 0 12px 30px rgba(2, 6, 23, 0.3);
}

.ops-context-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: var(--ops-summary-min-height);
  padding: 1rem 1.1rem;
}

.ops-context-card span,
.ops-summary-label {
  display: inline-flex;
  margin-bottom: 0.5rem;
  color: var(--ink-500, #6b7280);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ops-context-card strong,
.ops-summary-card strong {
  display: block;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.ops-context-card small,
.ops-summary-card small,
.surface-card-head p,
.field-hint,
.read-only-note {
  color: var(--ink-600, #4b5563);
  line-height: 1.55;
}

[data-theme="dark"] .ops-context-card small,
[data-theme="dark"] .ops-summary-card small,
[data-theme="dark"] .surface-card-head p,
[data-theme="dark"] .field-hint,
[data-theme="dark"] .read-only-note {
  color: #94a3b8;
}

.ops-summary-grid {
  display: grid;
  gap: var(--ops-shell-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ops-summary-min)), 1fr));
  align-items: stretch;
}

.ops-summary-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  grid-column: auto;
  min-height: var(--ops-summary-min-height);
  height: 100%;
  padding: 1.1rem 1.15rem;
}

.ops-grid {
  display: grid;
  gap: var(--ops-shell-gap);
  align-items: stretch;
}

.ops-grid--two {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ops-panel-min)), 1fr));
}

.ops-panel,
.table-panel,
.filter-panel {
  overflow: hidden;
  height: 100%;
}

.ops-panel {
  display: flex;
  flex-direction: column;
}

.ops-panel .card-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--ops-shell-gap);
  height: 100%;
  padding: var(--ops-panel-padding);
}

.surface-card {
  min-height: 100%;
  padding: var(--ops-panel-padding);
}

.surface-card-head,
.ops-panel-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.surface-card-head h2,
.ops-panel-head h2 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 750;
}

.ops-list {
  display: flex;
  flex-direction: column;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
}

.ops-list-row {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  min-width: max-content;
  white-space: nowrap;
}

.ops-list-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

[data-theme="dark"] .ops-list-row {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.ops-list-copy {
  min-width: max-content;
}

.ops-list-copy strong {
  display: block;
  margin-bottom: 0.2rem;
}

.ops-list-copy p,
.ops-list-copy small {
  margin: 0;
  white-space: nowrap;
}

.ops-list-copy p {
  color: var(--ink-700, #374151);
  font-size: 0.92rem;
}

[data-theme="dark"] .ops-list-copy p {
  color: var(--neutral-200);
}

.ops-stack {
  display: grid;
  gap: 0.9rem;
}

.ops-inline-metric {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.5rem;
  padding: 0.9rem 1rem;
  border-radius: 0.9rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(248, 250, 252, 0.85);
}

[data-theme="dark"] .ops-inline-metric {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(30, 41, 59, 0.6);
}

.ops-inline-metric span {
  color: var(--ink-500, #6b7280);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ops-inline-metric strong {
  font-size: 0.95rem;
}

.ops-empty-state {
  padding: 1rem;
  border-radius: 0.9rem;
  background: rgba(248, 250, 252, 0.85);
  color: var(--ink-600, #4b5563);
}

[data-theme="dark"] .ops-empty-state {
  background: rgba(30, 41, 59, 0.58);
  color: #94a3b8;
}

.ops-graph-shell {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ops-graph-shell-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.ops-graph-shell-head h2 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.ops-graph-shell-head p {
  margin: 0.55rem 0 0;
  max-width: 64rem;
  color: var(--ink-600, #4b5563);
  line-height: 1.65;
}

[data-theme="dark"] .ops-graph-shell-head p {
  color: #94a3b8;
}

.ops-graph-shell-meta {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  min-width: min(100%, 34rem);
}

.ops-graph-shell-meta div,
.ops-chart-stat {
  padding: 0.85rem 0.95rem;
  border-radius: 0.95rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(248, 250, 252, 0.82);
}

[data-theme="dark"] .ops-graph-shell-meta div,
[data-theme="dark"] .ops-chart-stat {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(30, 41, 59, 0.58);
}

.ops-graph-shell-meta span,
.ops-chart-stat span {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--ink-500, #6b7280);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ops-graph-shell-meta strong,
.ops-chart-stat strong {
  display: block;
  font-size: 0.98rem;
  font-weight: 750;
  line-height: 1.4;
}

[data-theme="dark"] .ops-graph-shell-meta span,
[data-theme="dark"] .ops-chart-stat span {
  color: #94a3b8;
}

.ops-graphs-grid {
  align-items: stretch;
}

.ops-chart-panel {
  min-height: 100%;
}

.ops-chart-stat-row {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ops-chart-wrap {
  position: relative;
  min-height: 18rem;
  padding: 0.75rem;
  border-radius: 1rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background:
    radial-gradient(circle at top right, rgba(201, 39, 54, 0.08), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.86));
}

[data-theme="dark"] .ops-chart-wrap {
  border-color: rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at top right, rgba(201, 39, 54, 0.12), transparent 40%),
    linear-gradient(180deg, rgba(30, 41, 59, 0.72), rgba(15, 23, 42, 0.82));
}

.ops-chart-canvas {
  width: 100% !important;
  height: 100% !important;
}

.ops-chart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 16.5rem;
  padding: 1rem;
  border-radius: 0.85rem;
  background: rgba(248, 250, 252, 0.68);
  color: var(--ink-600, #4b5563);
  line-height: 1.55;
  text-align: center;
}

[data-theme="dark"] .ops-chart-empty {
  background: rgba(15, 23, 42, 0.62);
  color: #94a3b8;
}

.ops-chart-caption {
  margin: 0;
  color: var(--ink-600, #4b5563);
  font-size: 0.92rem;
  line-height: 1.55;
}

[data-theme="dark"] .ops-chart-caption {
  color: #94a3b8;
}

.ops-table thead th {
  border-bottom-width: 1px;
  border-bottom-color: rgba(15, 23, 42, 0.08);
  color: var(--ink-500, #6b7280);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ops-table tbody tr:hover {
  background: rgba(201, 39, 54, 0.04);
}

[data-theme="dark"] .ops-table thead th {
  border-bottom-color: rgba(255, 255, 255, 0.08);
  color: #94a3b8;
}

[data-theme="dark"] .ops-table tbody tr:hover {
  background: rgba(201, 39, 54, 0.08);
}

@media (max-width: 768px) {
  .ops-graph-shell-head {
    align-items: start;
  }

  .ops-graph-shell-meta {
    min-width: 100%;
  }

  .ops-chart-stat-row {
    grid-template-columns: 1fr;
  }
}

.progressive-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.form-section-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.form-field {
  grid-column: span 6;
}

.form-field--wide {
  grid-column: span 12;
}

.form-field .form-label {
  margin-bottom: 0.45rem;
  font-weight: 700;
}

.field-hint {
  margin-top: 0.4rem;
  font-size: 0.86rem;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

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

.toggle-card {
  display: flex;
  align-items: start;
  gap: 0.9rem;
  padding: 1rem;
  border-radius: 0.95rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(248, 250, 252, 0.72);
  cursor: pointer;
}

.toggle-card--wide {
  grid-column: 1 / -1;
}

[data-theme="dark"] .toggle-card {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(30, 41, 59, 0.52);
}

.toggle-card strong,
.theme-choice span {
  display: block;
  font-weight: 700;
}

.toggle-card small {
  display: block;
  margin-top: 0.2rem;
  color: var(--ink-600, #4b5563);
  line-height: 1.5;
}

[data-theme="dark"] .toggle-card small {
  color: #94a3b8;
}

.ingestion-tabs-shell {
  overflow: hidden;
}

.ingestion-tabs-head {
  padding: 1.25rem 1.25rem 0;
}

.ingestion-tabs {
  gap: 0.5rem;
  padding: 0 1.25rem;
  border-bottom: 1px solid rgba(15, 23, 42, 0.1);
}

.ingestion-tabs .nav-link {
  min-height: 2.75rem;
  border-radius: 0.7rem 0.7rem 0 0;
  color: var(--ink-600, #4b5563);
  font-weight: 800;
}

.ingestion-tabs .nav-link.active {
  color: var(--dv8-red, #c92736);
  border-color: rgba(15, 23, 42, 0.12) rgba(15, 23, 42, 0.12) #fff;
}

.ingestion-tab-content {
  padding: 1.25rem;
}

.ingestion-panel {
  padding: 1.25rem;
  border-radius: 1rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(248, 250, 252, 0.62);
}

.ingestion-panel-head {
  margin-bottom: 1rem;
  padding: 0;
}

.ingestion-scan-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr) minmax(22rem, 0.42fr);
  align-items: start;
}

.ingestion-scan-main,
.ingestion-side-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

[data-theme="dark"] .ingestion-tabs {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .ingestion-tabs .nav-link {
  color: #cbd5e1;
}

[data-theme="dark"] .ingestion-tabs .nav-link.active {
  color: #f8fafc;
  border-color: rgba(255, 255, 255, 0.12) rgba(255, 255, 255, 0.12) rgba(15, 23, 42, 0.72);
  background: rgba(15, 23, 42, 0.72);
}

[data-theme="dark"] .ingestion-panel {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(30, 41, 59, 0.48);
}

.document-management-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(22rem, 0.75fr);
  gap: 1rem;
  align-items: stretch;
}

.document-folder-panel,
.folder-create-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.folder-health-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
}

.folder-health-tile,
.folder-signal-row span,
.folder-list-row,
.folder-list-empty {
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(248, 250, 252, 0.82);
}

.folder-health-tile {
  display: grid;
  gap: 0.28rem;
  min-height: 5.2rem;
  padding: 0.85rem;
  border-radius: 0.75rem;
}

.folder-health-tile span,
.folder-list-row__meta,
.folder-list-row__counts small {
  color: var(--ink-500, #6b7280);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.folder-health-tile strong {
  color: var(--ink-900, #111827);
  font-size: 1.35rem;
  line-height: 1;
}

.folder-signal-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.folder-signal-row span {
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  min-height: 2rem;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  color: var(--ink-600, #4b5563);
  font-size: 0.78rem;
  font-weight: 700;
}

.folder-signal-row strong {
  color: var(--dv8-red, #c92736);
}

.folder-list {
  display: grid;
  gap: 0.55rem;
}

.folder-list-row,
.folder-list-empty {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  min-width: 0;
  padding: 0.72rem 0.78rem;
  border-radius: 0.75rem;
}

.folder-list-empty {
  grid-template-columns: auto minmax(0, 1fr);
  color: var(--ink-600, #4b5563);
  font-size: 0.9rem;
}

.folder-list-row__icon,
.folder-list-empty i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.65rem;
  background: rgba(201, 39, 54, 0.08);
  color: var(--dv8-red, #c92736);
}

.folder-list-row__body {
  display: grid;
  gap: 0.16rem;
  min-width: 0;
}

.folder-list-row__body strong,
.folder-list-row__body small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.folder-list-row__body strong {
  color: var(--ink-900, #111827);
  font-size: 0.9rem;
}

.folder-list-row__body small {
  color: var(--ink-600, #4b5563);
  font-size: 0.78rem;
}

.folder-list-row__meta {
  overflow-wrap: anywhere;
}

.folder-list-row__counts {
  display: grid;
  justify-items: end;
  gap: 0.1rem;
  min-width: 3.2rem;
}

.folder-list-row__counts strong {
  color: var(--ink-900, #111827);
  font-size: 1rem;
  line-height: 1;
}

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

.document-workspace-shell {
  overflow: hidden;
}

.document-workspace-head {
  padding: 1.25rem 1.25rem 0;
}

.document-workspace-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 0 1.25rem;
  border-bottom: 1px solid rgba(15, 23, 42, 0.1);
}

.document-workspace-tabs .nav-link {
  min-height: 2.6rem;
  border-radius: 0.65rem 0.65rem 0 0;
  color: var(--ink-600, #4b5563);
  font-size: 0.84rem;
  font-weight: 800;
}

.document-workspace-tabs .nav-link.active {
  color: var(--dv8-red, #c92736);
  border-color: rgba(15, 23, 42, 0.12) rgba(15, 23, 42, 0.12) #fff;
}

.document-workspace-content {
  padding: 1.25rem;
}

.folder-overview-grid,
.folder-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(21rem, 0.38fr);
  gap: 1rem;
  align-items: start;
}

.folder-overview-main,
.folder-create-panel,
.folder-insight-panel {
  min-width: 0;
}

.folder-health-grid--wide {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 1rem;
}

.folder-filter-bar {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) minmax(11rem, 0.4fr) minmax(11rem, 0.4fr) auto auto;
  gap: 0.75rem;
  align-items: end;
  margin-bottom: 1rem;
  padding: 0.9rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 0.85rem;
  background: rgba(248, 250, 252, 0.72);
}

.document-filter-bar {
  grid-template-columns: minmax(14rem, 1fr) minmax(11rem, 0.36fr) minmax(11rem, 0.36fr) minmax(8rem, 0.28fr) auto;
}

.folder-filter-check {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.4rem;
  color: var(--ink-600, #4b5563);
  font-size: 0.82rem;
  font-weight: 800;
}

.folder-filter-actions,
.folder-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
}

.folder-browser {
  gap: 0.75rem;
}

.folder-list-row--managed {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
}

.folder-list-row--managed .folder-row-details {
  grid-column: 1 / -1;
  min-width: 0;
}

.folder-row-details {
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  padding-top: 0.55rem;
}

.folder-row-details summary,
.ingestion-detail-panel summary {
  cursor: pointer;
  color: var(--dv8-red, #c92736);
  font-size: 0.8rem;
  font-weight: 800;
}

.folder-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.folder-detail-grid dl,
.folder-fact-list {
  display: grid;
  grid-template-columns: minmax(7rem, 0.35fr) minmax(0, 1fr);
  gap: 0.38rem 0.75rem;
  margin: 0;
  font-size: 0.82rem;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
}

.folder-detail-grid dt,
.folder-fact-list dt {
  color: var(--ink-500, #6b7280);
  font-weight: 800;
  white-space: nowrap;
}

.folder-detail-grid dd,
.folder-fact-list dd {
  min-width: max-content;
  margin: 0;
  color: var(--ink-700, #374151);
  overflow-wrap: normal;
  white-space: nowrap;
}

.folder-action-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 0.85rem;
}

.folder-mini-form,
.folder-inline-form {
  display: grid;
  gap: 0.45rem;
  min-width: 0;
}

.folder-inline-form {
  grid-template-columns: minmax(10rem, 1fr) auto;
  align-items: center;
}

.folder-mini-form {
  padding: 0.65rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 0.7rem;
  background: rgba(255, 255, 255, 0.68);
}

.folder-mini-form--danger {
  border-color: rgba(185, 28, 28, 0.22);
  background: rgba(254, 242, 242, 0.8);
}

.folder-panel-head,
.folder-fact-head {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: start;
  margin-bottom: 0.8rem;
}

.folder-panel-head h3,
.folder-insight-panel h3,
.folder-fact-head h3 {
  margin: 0;
  color: var(--ink-900, #111827);
  font-size: 0.95rem;
  font-weight: 800;
}

.folder-panel-head span,
.folder-fact-head span {
  color: var(--ink-500, #6b7280);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.folder-insight-panel,
.folder-fact-panel {
  min-width: 0;
  padding: 1rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 0.85rem;
  background: rgba(248, 250, 252, 0.68);
}

.folder-metadata-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}

.folder-fact-head h3 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.folder-action-row--split {
  justify-content: space-between;
  margin-top: 0.9rem;
}

.ingestion-detail-panel {
  margin-bottom: 0.75rem;
}

.ingestion-detail-panel ol {
  padding-top: 0.75rem;
  padding-left: 1.1rem;
}

[data-theme="dark"] .folder-health-tile,
[data-theme="dark"] .folder-signal-row span,
[data-theme="dark"] .folder-list-row,
[data-theme="dark"] .folder-list-empty {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(30, 41, 59, 0.56);
}

[data-theme="dark"] .document-workspace-tabs {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .document-workspace-tabs .nav-link {
  color: #cbd5e1;
}

[data-theme="dark"] .document-workspace-tabs .nav-link.active {
  color: #f8fafc;
  border-color: rgba(255, 255, 255, 0.12) rgba(255, 255, 255, 0.12) rgba(15, 23, 42, 0.72);
  background: rgba(15, 23, 42, 0.72);
}

[data-theme="dark"] .folder-filter-bar,
[data-theme="dark"] .folder-mini-form,
[data-theme="dark"] .folder-insight-panel,
[data-theme="dark"] .folder-fact-panel {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(30, 41, 59, 0.52);
}

[data-theme="dark"] .folder-mini-form--danger {
  border-color: rgba(248, 113, 113, 0.24);
  background: rgba(69, 10, 10, 0.26);
}

[data-theme="dark"] .folder-row-details {
  border-top-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .folder-detail-grid dd,
[data-theme="dark"] .folder-fact-list dd,
[data-theme="dark"] .folder-filter-check {
  color: #cbd5e1;
}

[data-theme="dark"] .folder-panel-head h3,
[data-theme="dark"] .folder-insight-panel h3,
[data-theme="dark"] .folder-fact-head h3 {
  color: #f8fafc;
}

[data-theme="dark"] .folder-health-tile strong,
[data-theme="dark"] .folder-list-row__body strong,
[data-theme="dark"] .folder-list-row__counts strong {
  color: #f8fafc;
}

[data-theme="dark"] .folder-list-row__body small,
[data-theme="dark"] .folder-list-empty,
[data-theme="dark"] .folder-signal-row span {
  color: #cbd5e1;
}

.ingestion-submit-grid,
.scan-review-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(18rem, 0.58fr) minmax(24rem, 1fr);
  align-items: start;
}

.scan-review-grid {
  grid-template-columns: minmax(24rem, 1fr) minmax(20rem, 0.62fr);
}

.ingestion-form-stack,
.scan-commit-panel {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.scan-commit-panel {
  padding: 1rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.62);
}

.document-display-pane {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1rem, 1.6vw, 1.25rem);
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 0.95rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.86));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74);
}

.document-display-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.document-display-head h2 {
  margin: 0;
  color: var(--ink-900, #111827);
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.25;
}

.document-display-head p {
  margin: 0.25rem 0 0;
  color: var(--ink-600, #4b5563);
  font-size: 0.84rem;
  line-height: 1.45;
}

.document-preview-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.35rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 0.75rem;
  background: rgba(248, 250, 252, 0.86);
}

.document-preview-toolbar .btn {
  width: 2.1rem;
  min-width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.62rem;
}

.preview-page-counter {
  min-width: 4.5rem;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--ink-700, #374151);
}

.document-cover-preview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.9rem;
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: 0.75rem;
  background:
    radial-gradient(circle at top right, rgba(201, 39, 54, 0.08), transparent 36%),
    rgba(248, 250, 252, 0.84);
}

.cover-kicker {
  display: block;
  color: var(--ink-500, #6b7280);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.document-cover-preview strong,
.document-cover-preview small {
  display: block;
  overflow-wrap: anywhere;
}

.document-cover-preview small {
  margin-top: 0.25rem;
  color: var(--ink-600, #4b5563);
  font-size: 0.78rem;
}

.cover-qr-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.35rem;
  height: 3.35rem;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 0.65rem;
  color: #ffe5e8;
  background:
    radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.18), transparent 34%),
    rgba(11, 23, 42, 0.94);
  font-size: 1.4rem;
}

.document-preview-layout {
  display: grid;
  grid-template-columns: minmax(6.6rem, 7.25rem) minmax(0, 1fr);
  gap: 0.75rem;
  min-height: clamp(24rem, 48vh, 34rem);
}

.thumbnail-rail {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: clamp(24rem, 48vh, 34rem);
  overflow: auto;
  padding-right: 0.25rem;
}

.scan-page-thumb {
  width: 100%;
  display: grid;
  gap: 0.35rem;
  padding: 0.5rem;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 0.7rem;
  background: rgba(255, 255, 255, 0.8);
  color: var(--ink-700, #374151);
  text-align: left;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.scan-page-thumb:hover,
.scan-page-thumb:focus-visible {
  border-color: rgba(201, 39, 54, 0.32);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
  outline: none;
}

.scan-page-thumb.active {
  border-color: rgba(201, 39, 54, 0.48);
  box-shadow: 0 0 0 2px rgba(201, 39, 54, 0.12);
}

.scan-page-thumb.requires-review {
  border-color: rgba(217, 119, 6, 0.36);
}

.scan-page-thumb span {
  font-size: 0.74rem;
  font-weight: 800;
}

.scan-page-thumb small {
  color: var(--ink-500, #6b7280);
  font-size: 0.7rem;
}

.scan-page-thumb img {
  width: 100%;
  height: 4.6rem;
  object-fit: cover;
  border-radius: 0.5rem;
  background: #fff;
}

.scan-page-thumb i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 4.6rem;
  border-radius: 0.5rem;
  background: rgba(15, 23, 42, 0.05);
  color: var(--dv8-red, #c92736);
  font-size: 1.35rem;
}

.scan-page-empty {
  color: var(--ink-500, #6b7280);
  font-size: 0.8rem;
}

.document-preview-frame {
  min-width: 0;
  min-height: clamp(24rem, 48vh, 34rem);
  height: clamp(24rem, 56vh, 40rem);
  max-height: min(48rem, 72vh);
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 0.8rem;
  background:
    linear-gradient(180deg, rgba(226, 232, 240, 0.34), rgba(248, 250, 252, 0.84)),
    #f8fafc;
}

.document-preview-frame img,
.document-preview-frame iframe {
  max-width: 100%;
  max-height: calc(100% - 1.5rem);
  border: 0;
  transition: transform 0.16s ease;
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.16);
}

.document-preview-frame iframe {
  width: 100%;
  height: 100%;
  min-height: 100%;
  background: #fff;
  box-shadow: none;
}

.preview-empty-state {
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  padding: 2rem;
  color: var(--ink-500, #6b7280);
  text-align: center;
  font-size: 0.86rem;
}

.preview-empty-state i {
  color: var(--dv8-red, #c92736);
  font-size: 1.6rem;
}

.document-validation-grid,
.scan-package-facts {
  display: grid;
  gap: 0.45rem 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  font-size: 0.79rem;
}

.document-validation-grid span,
.scan-package-facts dt,
.scan-package-facts dd {
  min-width: 0;
  overflow-wrap: anywhere;
}

.document-validation-grid em {
  color: var(--ink-600, #4b5563);
  font-style: normal;
}

.scan-package-facts {
  padding-top: 0.35rem;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.scan-package-facts dt {
  color: var(--ink-500, #6b7280);
  font-weight: 800;
}

.scan-package-facts dd {
  margin: 0;
  color: var(--ink-700, #374151);
}

[data-theme="dark"] .scan-commit-panel,
[data-theme="dark"] .document-display-pane {
  border-color: rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.82), rgba(15, 23, 42, 0.68));
}

[data-theme="dark"] .document-display-head p,
[data-theme="dark"] .document-cover-preview small,
[data-theme="dark"] .document-validation-grid em,
[data-theme="dark"] .scan-package-facts dd,
[data-theme="dark"] .preview-page-counter {
  color: #cbd5e1;
}

[data-theme="dark"] .document-cover-preview,
[data-theme="dark"] .scan-page-thumb {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(30, 41, 59, 0.7);
  color: #f8fafc;
}

[data-theme="dark"] .document-preview-frame iframe {
  background: #fff;
}

[data-theme="dark"] .cover-qr-placeholder {
  border-color: rgba(248, 250, 252, 0.16);
  background:
    radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.18), transparent 34%),
    rgba(2, 6, 23, 0.94);
}

[data-theme="dark"] .document-preview-frame {
  border-color: rgba(255, 255, 255, 0.1);
  background:
    linear-gradient(180deg, rgba(30, 41, 59, 0.5), rgba(15, 23, 42, 0.72)),
    #0f172a;
}

.document-detail-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.34fr);
  gap: 1rem;
  align-items: start;
}

.document-detail-page {
  --document-detail-frame-min: 30rem;
}

.document-detail-head-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.9rem;
}

.document-detail-display-pane .document-preview-frame {
  min-height: clamp(30rem, 62vh, 44rem);
  height: clamp(30rem, 66vh, 48rem);
  max-height: min(54rem, 78vh);
}

.document-detail-preview-frame img {
  object-fit: contain;
}

.document-detail-sidecar h2 {
  margin: 0 0 0.8rem;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--ink-800, #1f2937);
}

.document-detail-sidecar .form-actions {
  margin-top: 0.9rem;
}

.document-detail-meta-card {
  min-height: 100%;
}

.document-detail-meta-card .table {
  --bs-table-bg: transparent;
  --bs-table-border-color: rgba(15, 23, 42, 0.08);
}

[data-theme="dark"] .document-detail-meta-card .table {
  --bs-table-color: var(--neutral-200);
  --bs-table-border-color: rgba(255, 255, 255, 0.08);
}

.document-validation-grid dt {
  color: var(--ink-500, #6b7280);
  font-weight: 800;
}

.document-validation-grid dd {
  margin: 0;
  color: var(--ink-700, #374151);
  min-width: 0;
  overflow-wrap: anywhere;
}

[data-theme="dark"] .document-detail-sidecar h2 {
  color: #f8fafc;
}

[data-theme="dark"] .document-validation-grid dd {
  color: var(--neutral-200);
}

.theme-choice-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.theme-choice {
  position: relative;
}

.theme-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.theme-choice span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 8.5rem;
  padding: 0.8rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(248, 250, 252, 0.9);
}

.theme-choice input:checked + span {
  border-color: rgba(201, 39, 54, 0.36);
  background: rgba(201, 39, 54, 0.08);
  color: var(--dv8-red, #c92736);
}

[data-theme="dark"] .theme-choice span {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(15, 23, 42, 0.7);
}

[data-theme="dark"] .theme-choice input:checked + span {
  background: rgba(201, 39, 54, 0.18);
  color: #fecaca;
}

.profile-settings-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
}

.profile-settings-sidebar,
.profile-settings-main {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.profile-definition-list {
  display: grid;
  gap: 0.85rem;
  margin: 0;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
}

.profile-definition-list dt {
  margin: 0 0 0.2rem;
  color: var(--ink-500, #6b7280);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.profile-definition-list dd {
  margin: 0;
  font-weight: 700;
  min-width: max-content;
  white-space: nowrap;
}

.profile-theme-preview {
  display: grid;
  gap: 0.75rem;
}

.status-chip,
.status-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: rgba(201, 39, 54, 0.08);
  color: var(--dv8-red, #c92736);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.status-inline {
  padding: 0;
  background: transparent;
  color: var(--ink-600, #4b5563);
}

.status-inline--positive {
  color: #059669;
}

.status-inline--attention {
  color: #b45309;
}

[data-theme="dark"] .status-chip {
  background: rgba(201, 39, 54, 0.16);
  color: #fecaca;
}

[data-theme="dark"] .status-inline {
  color: #cbd5e1;
}

[data-theme="dark"] .status-inline--positive {
  color: #34d399;
}

[data-theme="dark"] .status-inline--attention {
  color: #fbbf24;
}

.ops-brand-lockup {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.9rem;
}

.ops-brand-lockup--white-logo {
  box-sizing: border-box;
  display: inline-flex;
  width: min(18rem, 100%);
  padding: 0.85rem 1rem;
  border-radius: 1rem;
  background:
    radial-gradient(circle at top right, rgba(201, 39, 54, 0.26), transparent 38%),
    linear-gradient(165deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.96) 58%, rgba(127, 29, 29, 0.94));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 14px 30px rgba(15, 23, 42, 0.18);
}

.ops-brand-logo {
  height: 40px;
  width: auto;
}

.ops-brand-lockup--white-logo .ops-brand-logo {
  width: 100%;
  height: auto;
  max-width: 16rem;
  filter:
    drop-shadow(0 0 1px rgba(248, 250, 252, 0.86))
    drop-shadow(0 8px 18px rgba(248, 250, 252, 0.24));
}

.ops-brand-parent {
  height: 28px;
  width: auto;
}

.invalid-feedback {
  font-size: 0.84rem;
}

@media (max-width: 1200px) {
  .ops-summary-card {
    grid-column: auto;
  }

  .profile-settings-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 992px) {
  .document-management-grid,
  .document-detail-workbench,
  .folder-overview-grid,
  .folder-dashboard-grid,
  .ingestion-scan-grid,
  .ingestion-submit-grid,
  .scan-review-grid {
    grid-template-columns: 1fr;
  }

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

  .folder-filter-bar,
  .document-filter-bar,
  .folder-action-grid,
  .folder-metadata-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .document-preview-layout {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .thumbnail-rail {
    max-height: none;
    flex-direction: row;
    overflow-x: auto;
    padding: 0 0 0.35rem;
  }

  .scan-page-thumb {
    min-width: 7rem;
    max-width: 8rem;
  }
}

@media (max-width: 640px) {
  .ingestion-tabs-head,
  .ingestion-tab-content,
  .document-workspace-head,
  .document-workspace-content,
  .ingestion-panel,
  .document-display-pane,
  .scan-commit-panel {
    padding: 1rem;
  }

  .ingestion-tabs,
  .document-workspace-tabs {
    padding: 0 1rem;
  }

  .ingestion-tabs .nav-link,
  .document-workspace-tabs .nav-link {
    width: 100%;
    border-radius: 0.7rem;
  }

  .document-display-head,
  .document-cover-preview {
    grid-template-columns: 1fr;
  }

  .document-display-head {
    display: grid;
  }

  .document-validation-grid,
  .scan-package-facts,
  .folder-health-grid,
  .folder-filter-bar,
  .document-filter-bar,
  .folder-detail-grid,
  .folder-action-grid,
  .folder-metadata-grid,
  .folder-create-grid {
    grid-template-columns: 1fr;
  }

  .document-preview-frame,
  .document-preview-frame iframe {
    min-height: 22rem;
    height: 22rem;
  }

  .folder-list-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .folder-list-row__counts {
    grid-column: 2;
    justify-items: start;
  }

  .folder-inline-form {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 991px) {
  .workbench-head,
  .ops-header,
  .ops-grid--two {
    grid-template-columns: 1fr;
  }

  .preferences-grid {
    grid-template-columns: 1fr;
  }
}

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

  .ops-summary-card {
    grid-column: auto;
  }

  .form-field {
    grid-column: 1 / -1;
  }

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

  .workbench-head,
  .ops-header,
  .surface-card {
    padding: 1rem;
  }

  .workbench-actions,
  .profile-header-actions,
  .form-actions,
  .ops-actions {
    flex-direction: column;
  }

  .workbench-actions .btn,
  .profile-header-actions .btn,
  .form-actions .btn,
  .ops-actions .btn {
    width: 100%;
  }

  .qs-tenant-switcher {
    min-width: 0;
    width: 100%;
  }
}

/* Gateway shell cleanup */
.qs-platform-shell .qs-sidebar {
  width: 272px;
  padding: 22px 18px;
  background: rgba(11, 23, 42, 0.92);
  color: #dbe7ff;
  border-right: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: none;
  scrollbar-color: rgba(159, 179, 214, 0.4) transparent;
}

.qs-platform-shell .qs-sidebar.collapsed {
  width: 272px;
}

.qs-platform-shell .qs-sidebar.collapsed .qs-nav-section-label {
  display: block;
}

.qs-platform-shell .qs-sidebar.collapsed .nav-label {
  display: inline;
}

.qs-platform-shell .qs-sidebar.collapsed .qs-nav-badge {
  display: inline-flex;
}

.qs-platform-shell .qs-sidebar-brand {
  display: grid;
  place-items: center;
  min-height: auto;
  margin: 0 auto 24px;
  padding: 0;
  border-bottom: 0;
  gap: 0;
}

.qs-platform-shell .qs-shell-brand {
  display: grid;
  place-items: center;
  min-width: 0;
  width: 4.75rem;
  height: 4.75rem;
  max-width: 100%;
  margin: 0 auto;
  color: inherit;
  text-decoration: none;
}

.qs-platform-shell .qs-shell-brand__full,
.qs-platform-shell .qs-shell-brand__mark {
  display: grid;
  place-items: center;
}

.qs-platform-shell .qs-shell-brand__mark {
  display: none;
}

.qs-platform-shell .qs-shell-logo {
  display: block;
  width: 4rem;
  height: 4rem;
  max-width: 4rem;
  max-height: 4rem;
  padding: 0;
  border-radius: 0;
  background: transparent;
  object-fit: contain;
}

.qs-platform-shell .qs-shell-brand:hover,
.qs-platform-shell .qs-shell-brand:focus-visible {
  opacity: 0.92;
  outline: none;
}

.qs-platform-shell .qs-shell-brand:focus-visible {
  box-shadow: 0 0 0 3px rgba(159, 176, 200, 0.26);
}

.qs-platform-shell .sandf-theme-brand {
  place-items: center;
}

.qs-platform-shell .sandf-theme-brand__img {
  display: block;
  width: 4rem;
  height: 4rem;
  max-width: 4rem;
  max-height: 4rem;
  padding: 0;
  border-radius: 0;
  background: transparent;
  object-fit: contain;
}

html[data-theme="sandf"] .qs-platform-shell .qs-shell-brand__full,
html[data-theme="sandf"] .qs-platform-shell .qs-shell-brand__mark {
  display: none;
}

html[data-theme="sandf"] .qs-platform-shell .sandf-theme-brand {
  display: inline-grid;
}

html[data-theme="sandf"] .qs-platform-shell .qs-sidebar.collapsed .sandf-theme-brand__img {
  width: 4rem;
  height: 4rem;
  max-width: 4rem;
}

html[data-theme="sandf"] .qs-platform-shell .qs-sidebar {
  background:
    linear-gradient(180deg, rgba(4, 16, 8, 0.98), rgba(0, 66, 37, 0.96)),
    radial-gradient(circle at 0% 0%, rgba(255, 202, 5, 0.18), transparent 24%);
  border-right-color: rgba(255, 202, 5, 0.22);
}

.qs-platform-shell .qs-nav-section {
  display: block;
  margin-top: 18px;
  padding: 0;
}

.qs-platform-shell .qs-nav-section-label {
  display: block;
  margin: 0 0 8px;
  padding: 0;
  color: #8ba1c7;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.qs-platform-shell .qs-nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 10px 11px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  text-align: left;
  text-decoration: none;
  white-space: normal;
  cursor: pointer;
}

.qs-platform-shell .qs-nav-item + .qs-nav-item {
  margin-top: 4px;
}

.qs-platform-shell .qs-nav-item i,
.qs-platform-shell .qs-nav-item .fas,
.qs-platform-shell .qs-nav-item .far,
.qs-platform-shell .qs-nav-item .fa {
  display: none;
}

.qs-platform-shell .qs-nav-item .nav-label {
  display: inline;
  overflow: visible;
  font-size: 0.95rem;
  font-weight: 600;
}

.qs-platform-shell .qs-nav-item .qs-nav-badge {
  display: inline-flex;
}

.qs-platform-shell .qs-sidebar .qs-trust-label {
  display: inline;
}

.qs-platform-shell .qs-nav-item:hover,
.qs-platform-shell .qs-nav-item:focus-visible {
  border-left-color: transparent;
  border-color: rgba(148, 163, 184, 0.28);
  background: rgba(148, 163, 184, 0.14);
  color: #ffffff;
  outline: none;
  box-shadow: none;
}

.qs-platform-shell .qs-nav-item.active {
  border-left-color: transparent;
  border-color: rgba(239, 106, 116, 0.4);
  background: rgba(239, 106, 116, 0.16);
  color: #ffe5e8;
  box-shadow: none;
}

html[data-theme="sandf"] .qs-platform-shell .qs-nav-section-label {
  color: rgba(232, 246, 238, 0.78);
}

html[data-theme="sandf"] .qs-platform-shell .qs-nav-item:hover,
html[data-theme="sandf"] .qs-platform-shell .qs-nav-item:focus-visible,
html[data-theme="sandf"] .qs-platform-shell .qs-nav-item.active {
  border-color: rgba(255, 202, 5, 0.28);
  background:
    linear-gradient(90deg, rgba(255, 202, 5, 0.18), transparent 82%),
    rgba(255, 255, 255, 0.06);
  color: #ffffff;
  box-shadow: none;
}

@media (max-width: 768px) {
  .qs-platform-shell .qs-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(300px, 84vw);
    z-index: 1040;
    transform: translateX(-102%);
    transition: transform var(--transition-base, 220ms ease);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  }

  .qs-platform-shell .qs-sidebar.mobile-open {
    transform: translateX(0);
  }

  .qs-platform-shell .qs-sidebar-toggle {
    display: inline-flex;
  }
}

.qs-nav-item:focus-visible,
.qs-sidebar-toggle:focus-visible,
.qs-alert-btn:focus-visible,
.qs-user-pill:focus-visible,
.qs-breadcrumb a:focus-visible,
.theme-toggle:focus-visible {
  outline: 2px solid rgba(248, 113, 113, 0.8);
  outline-offset: 2px;
  border-radius: 0.8rem;
}

.qs-platform-shell .qs-sidebar-toggle {
  display: none;
}

@media (max-width: 768px) {
  .qs-platform-shell .qs-sidebar-toggle {
    display: inline-flex;
  }
}

.qs-topbar {
  min-height: 68px;
  height: auto;
  gap: 1rem;
  padding: 0.75rem 1.5rem;
  background: rgba(255, 255, 255, 0.82);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

[data-theme="dark"] .qs-topbar {
  background: rgba(15, 23, 42, 0.8);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.qs-topbar-left,
.qs-topbar-right {
  min-width: 0;
}

.qs-topbar-right {
  margin-left: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.75rem;
}

.qs-global-search {
  flex: 1 1 18rem;
  max-width: 24rem;
}

.qs-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.2rem;
  min-width: 0;
}

.qs-breadcrumb a,
.qs-breadcrumb-current {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qs-breadcrumb-current {
  color: var(--ink-900, #111827);
}

[data-theme="dark"] .qs-breadcrumb-current {
  color: #f8fafc;
}

.qs-content {
  padding: 1.5rem clamp(1rem, 2vw, 2rem) 2rem;
  background: transparent;
}

.qs-footer {
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  background: transparent;
}

[data-theme="dark"] .qs-footer {
  border-top-color: rgba(255, 255, 255, 0.08);
}

.qs-shell-trust {
  display: flex;
  align-items: center;
  min-width: 0;
}

.qs-utility-status-card {
  --qs-utility-status-rgb: 249, 115, 22;
  --qs-utility-status-color: #f97316;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
  min-width: 12rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
  color: var(--ink-900, #111827);
}

.qs-utility-status-card--floating {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 2400;
  min-width: 13.5rem;
  max-width: min(19rem, calc(100vw - 2rem));
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(var(--qs-utility-status-rgb), 0.34);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18);
  backdrop-filter: blur(14px);
}

.qs-utility-status-card--floating .qs-utility-status-copy {
  display: grid;
  gap: 0.12rem;
}

.qs-utility-status-title {
  color: var(--ink-900, #111827);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.qs-utility-status-card[data-qs-utility-status="successfully-connected"] {
  --qs-utility-status-rgb: 22, 163, 74;
  --qs-utility-status-color: #16a34a;
}

.qs-utility-status-card[data-qs-utility-status="failed"] {
  --qs-utility-status-rgb: 220, 38, 38;
  --qs-utility-status-color: #dc2626;
}

[data-theme="dark"] .qs-utility-status-card {
  background: rgba(30, 41, 59, 0.8);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: none;
  color: #f8fafc;
}

[data-theme="dark"] .qs-utility-status-card--floating {
  border-color: rgba(var(--qs-utility-status-rgb), 0.36);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.32);
}

[data-theme="dark"] .qs-utility-status-title {
  color: #f8fafc;
}

.qs-utility-status-copy {
  min-width: 0;
  display: flex;
  align-items: center;
}

.qs-utility-status-label {
  color: var(--qs-utility-status-color);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qs-utility-status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: rgba(var(--qs-utility-status-rgb), 0.12);
  color: var(--qs-utility-status-color);
  flex: none;
}

.qs-utility-status-dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 999px;
  background: var(--qs-utility-status-color);
  box-shadow: 0 0 0 5px rgba(var(--qs-utility-status-rgb), 0.14);
  flex: none;
}

@media (max-width: 520px) {
  .qs-utility-status-card--floating {
    right: 1rem;
    bottom: max(0.75rem, env(safe-area-inset-bottom));
    min-width: 0;
    width: calc(100vw - 2rem);
  }
}

.ops-metric-strip {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ops-summary-min)), 1fr));
  margin-bottom: var(--ops-shell-gap);
}

.ops-subsection + .ops-subsection {
  margin-top: 1.25rem;
}

.ops-subsection h3 {
  margin: 0 0 0.8rem;
  font-size: 0.92rem;
  font-weight: 780;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-500, #6b7280);
}

.ops-pill-grid {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ops-summary-min)), 1fr));
}

.ops-signal-card {
  display: grid;
  gap: 0.35rem;
  min-height: var(--ops-signal-min-height);
  padding: 0.95rem 1rem;
  border-radius: var(--ops-card-radius);
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(248, 250, 252, 0.78);
}

.ops-signal-card strong,
.ops-signal-card p,
.ops-signal-card small {
  margin: 0;
}

.ops-signal-card p {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--ink-700, #374151);
}

.ops-signal-card small {
  color: var(--ink-500, #6b7280);
  font-size: 0.8rem;
}

.ops-signal-card .badge {
  justify-self: start;
}

[data-theme="dark"] .ops-signal-card {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(30, 41, 59, 0.62);
}

[data-theme="dark"] .ops-signal-card p {
  color: var(--neutral-200);
}

[data-theme="dark"] .ops-signal-card small {
  color: #94a3b8;
}

@media (max-width: 991px) {
  .qs-topbar {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .qs-topbar-right {
    width: 100%;
    justify-content: flex-start;
  }

  .qs-global-search {
    order: 3;
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 768px) {
  .ops-metric-strip,
  .ops-pill-grid {
    grid-template-columns: 1fr;
  }

  .qs-nav-item {
    margin-left: 0.4rem;
    margin-right: 0.4rem;
  }

  .qs-content {
    padding-bottom: 1.5rem;
  }
}