/* ORION Operations Console — final visual authority.
   Quiet, symmetric, dense enough for NOC work. Loaded after legacy page styles. */
:root,
html[data-theme="light"] {
  --ops-bg: #e9f1f6;
  --ops-sidebar: #0d2b49;
  --ops-surface: #ffffff;
  --ops-surface-raised: #ffffff;
  --ops-surface-muted: #edf4f8;
  --ops-line: #cbdbe5;
  --ops-line-strong: #9fb8c9;
  --ops-text: #172c3b;
  --ops-muted: #536d7e;
  --ops-faint: #7890a0;
  --ops-blue: #187fbe;
  --ops-blue-hover: #126da5;
  --ops-blue-soft: #d9edf8;
  --ops-green: #347b57;
  --ops-green-soft: #e5f2ea;
  --ops-amber: #9a6a24;
  --ops-amber-soft: #f7eedc;
  --ops-red: #b85151;
  --ops-red-soft: #f7e8e8;
  --ops-radius: 8px;
  --ops-radius-sm: 6px;
  --ops-shadow: 0 1px 2px rgba(17, 24, 39, .06);
}
html[data-theme="dark"] {
  --ops-bg: #081a2f;
  --ops-sidebar: #0a1d33;
  --ops-surface: #102641;
  --ops-surface-raised: #15304f;
  --ops-surface-muted: #193553;
  --ops-line: #294663;
  --ops-line-strong: #3d6080;
  --ops-text: #f1f6fb;
  --ops-muted: #b2c1d0;
  --ops-faint: #7890a8;
  --ops-blue: #2898df;
  --ops-blue-hover: #49ace8;
  --ops-blue-soft: #123c60;
  --ops-green: #43c77b;
  --ops-green-soft: #123e32;
  --ops-amber: #f0ad42;
  --ops-amber-soft: #4a3618;
  --ops-red: #eb7077;
  --ops-red-soft: #48242e;
  --ops-shadow: 0 3px 10px rgba(0, 8, 20, .24);
}

html[data-theme] {
  --bg-primary: var(--ops-bg); --bg-secondary: var(--ops-surface-muted);
  --card-bg: var(--ops-surface); --text-primary: var(--ops-text);
  --text-secondary: var(--ops-muted); --border-color: var(--ops-line);
  --accent: var(--ops-blue); --accent-soft: var(--ops-blue-soft);
  --sidebar-bg: var(--ops-sidebar); --sidebar-hover: var(--ops-surface-muted);
  --sidebar-text: var(--ops-text); --sidebar-muted: var(--ops-muted);
  --input-bg: var(--ops-surface); --table-head-bg: var(--ops-surface-muted);
  --theme-shadow: var(--ops-shadow); --surface-0: var(--ops-bg);
  --surface-1: var(--ops-surface); --surface-2: var(--ops-surface-muted);
  --line: var(--ops-line); --line-soft: var(--ops-line);
  --ink: var(--ops-text); --ink-strong: var(--ops-text); --ink-muted: var(--ops-muted);
  --cyan: var(--ops-blue); --cyan-strong: var(--ops-blue-hover); --cyan-soft: var(--ops-blue-soft);
  --green: var(--ops-green); --green-soft: var(--ops-green-soft);
  --amber: var(--ops-amber); --amber-soft: var(--ops-amber-soft);
  --red: var(--ops-red); --red-soft: var(--ops-red-soft);
  --ui-radius: var(--ops-radius); --ui-radius-sm: var(--ops-radius-sm);
  --ui-shadow: var(--ops-shadow);
  color-scheme: light;
}
html[data-theme="dark"] { color-scheme: dark; }

/* Light mode keeps a strong visual anchor instead of fading into white. */
html[data-theme="light"] .orion-v2-sidebar,
html[data-theme="light"] .sidebar {
  color-scheme:dark;
  --ops-text:#eef6fc;
  --ops-muted:#b9ccdb;
  --ops-faint:#7f9bb2;
  --ops-line:#284967;
  --ops-line-strong:#3a6385;
  --ops-surface:#123553;
  --ops-surface-muted:#173d5d;
  --ops-blue:#55b7ed;
  --ops-blue-soft:#173f61;
}
html[data-theme="light"] .orion-v2-sidebar .orion-brand-logo-light { display:none !important; }
html[data-theme="light"] .orion-v2-sidebar .orion-brand-logo-dark { display:block !important; }
html[data-theme="light"] .orion-v2-sidebar .orion-theme-toggle,
html[data-theme="light"] .orion-v2-sidebar .orion-global-save {
  background:#123553 !important; border-color:#315777 !important; color:#eef6fc !important;
}
html[data-theme="light"] .orion-v2-sidebar .orion-nav a { color:#b9ccdb !important; }
html[data-theme="light"] .orion-v2-sidebar .orion-nav a:hover { background:#153b5b !important; color:#fff !important; }
html[data-theme="light"] .orion-v2-sidebar .orion-nav a.active { background:#176fa8 !important; color:#fff !important; }
html[data-theme="light"] .orion-v2-sidebar .orion-nav a > span,
html[data-theme="light"] .orion-v2-sidebar .orion-nav-caption { color:#8fb0c8 !important; }
html[data-theme="light"] .orion-v2-sidebar .orion-nav a.active > span { color:#fff !important; }
html[data-theme="light"] .orion-v2-sidebar .orion-side-status span { color:#b9ccdb !important; }
html[data-theme="light"] .orion-v2-sidebar .orion-side-status strong { color:#f4f9fd !important; }
html[data-theme="light"] .orion-v2-sidebar .orion-nav-count,
html[data-theme="light"] .orion-v2-sidebar .orion-user-panel,
html[data-theme="light"] .orion-v2-sidebar .orion-sidebar-save-zone { border-color:#284967 !important; }
html[data-theme="light"] .orion-v2-sidebar .orion-user-panel strong,
html[data-theme="light"] .orion-v2-sidebar .orion-sidebar-save-label { color:#eef6fc !important; }
html[data-theme] *, html[data-theme] *::before, html[data-theme] *::after { box-sizing: border-box; }
html[data-theme] body {
  margin: 0; background: var(--ops-bg) !important; color: var(--ops-text) !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 14px !important; line-height: 1.45 !important; letter-spacing: 0 !important;
}
html[data-theme] body, html[data-theme] aside, html[data-theme] main,
html[data-theme] section, html[data-theme] header, html[data-theme] nav,
html[data-theme] div, html[data-theme] table, html[data-theme] input,
html[data-theme] select, html[data-theme] textarea, html[data-theme] button {
  transition: none !important;
}
html[data-theme] .orion-v2-content, html[data-theme] .content {
  width: 100%; min-width: 0; padding: 24px 28px !important; background: var(--ops-bg) !important;
}
html[data-theme] .content > * { max-width: 1600px; margin-left: auto; margin-right: auto; }

/* Sidebar */
html[data-theme] .orion-v2-sidebar, html[data-theme] .sidebar {
  width: 240px !important; min-width: 240px !important; background: var(--ops-sidebar) !important;
  border-right: 1px solid var(--ops-line) !important; box-shadow: none !important;
}
html[data-theme] .orion-sidebar-header { padding: 14px 14px 8px !important; }
html[data-theme] .orion-brand { min-height: 72px !important; padding: 0 4px 10px !important; }
html[data-theme] .orion-brand .orion-brand-logo {
  width: 164px !important; height: 64px !important; max-width: 100% !important;
  margin: 0 auto !important; object-position: center !important;
}
html[data-theme] .orion-theme-toggle {
  width: 100% !important; min-height: 36px !important; margin: 0 !important; padding: 7px 10px !important;
  border: 1px solid var(--ops-line) !important; border-radius: var(--ops-radius-sm) !important;
  background: var(--ops-surface) !important; color: var(--ops-muted) !important; box-shadow: none !important;
}
html[data-theme] .orion-theme-toggle:hover { background: var(--ops-surface-muted) !important; border-color: var(--ops-line-strong) !important; }
html[data-theme] .orion-nav { padding: 8px 12px 12px !important; }
html[data-theme] .orion-nav-caption {
  margin: 14px 8px 6px !important; padding: 0 !important; color: var(--ops-faint) !important;
  font-size: 10px !important; font-weight: 700 !important; letter-spacing: .08em !important; text-transform: uppercase !important;
}
html[data-theme] .orion-nav a {
  position: relative; min-height: 38px !important; margin: 2px 0 !important; padding: 8px 10px !important;
  gap: 10px !important; border: 0 !important; border-radius: var(--ops-radius-sm) !important;
  background: transparent !important; color: var(--ops-muted) !important; box-shadow: none !important;
}
html[data-theme] .orion-nav a > span { width: 18px !important; color: var(--ops-faint) !important; text-align: center; }
html[data-theme] .orion-nav a strong { color: inherit !important; font-size: 13px !important; font-weight: 600 !important; }
html[data-theme] .orion-nav a:hover { background: var(--ops-surface-muted) !important; color: var(--ops-text) !important; }
html[data-theme] .orion-nav a.active { background: var(--ops-blue-soft) !important; color: var(--ops-blue) !important; box-shadow: none !important; }
html[data-theme] .orion-nav a.active::before { content:""; position:absolute; left:-12px; top:8px; bottom:8px; width:3px; background:var(--ops-blue); border-radius:0 2px 2px 0; }
html[data-theme] .orion-nav-count { min-width: 25px !important; height: 21px !important; padding: 2px 6px !important; border: 1px solid var(--ops-line) !important; border-radius: 10px !important; background: transparent !important; color: var(--ops-muted) !important; box-shadow:none !important; }
html[data-theme] .orion-side-status { min-height: 32px; padding: 6px 10px !important; }
html[data-theme] .orion-sidebar-footer { padding: 0 12px 12px !important; background: var(--ops-sidebar) !important; }
html[data-theme] .orion-sidebar-save-zone { margin: 0 0 8px !important; padding: 10px 0 !important; border-color: var(--ops-line) !important; }
html[data-theme] .orion-sidebar-save-label { padding-left: 2px !important; font-weight: 700 !important; }
html[data-theme] .orion-global-save {
  min-height: 36px !important; border: 1px solid var(--ops-line-strong) !important; border-radius: var(--ops-radius-sm) !important;
  background: var(--ops-surface) !important; color: var(--ops-text) !important; box-shadow: none !important; font-weight: 600 !important;
}
html[data-theme] .orion-global-save:hover { background: var(--ops-surface-muted) !important; border-color: var(--ops-blue) !important; color: var(--ops-blue) !important; transform:none !important; }
html[data-theme] .orion-user-panel { min-height: 50px !important; padding: 8px 6px !important; border-top: 1px solid var(--ops-line) !important; }
html[data-theme] .orion-user-avatar { width:32px !important; height:32px !important; background:var(--ops-surface-muted) !important; border:1px solid var(--ops-line) !important; color:var(--ops-muted) !important; box-shadow:none !important; }

/* Typography and page rhythm */
html[data-theme] h1, html[data-theme] h2, html[data-theme] h3,
html[data-theme] h4, html[data-theme] h5, html[data-theme] h6 { color:var(--ops-text) !important; }
html[data-theme] h1 { margin:0 0 6px !important; font-size:28px !important; line-height:1.2 !important; font-weight:700 !important; letter-spacing:-.02em !important; }
html[data-theme] h2 { font-size:18px !important; line-height:1.3 !important; font-weight:650 !important; letter-spacing:-.01em !important; }
html[data-theme] h3 { font-size:15px !important; font-weight:650 !important; }
html[data-theme] p, html[data-theme] small, html[data-theme] .muted,
html[data-theme] .subtitle, html[data-theme] .od-note { color:var(--ops-muted) !important; }
html[data-theme] .v2-page-head, html[data-theme] .orion-smart-page-head,
html[data-theme] .page-header, html[data-theme] .orion-compact-head,
html[data-theme] .profile-page-head, html[data-theme] .storage-page-head {
  min-height: 72px; margin: 0 auto 18px !important; padding: 0 !important;
  align-items: flex-end !important; gap: 20px !important;
}
html[data-theme] .v2-eyebrow { color:var(--ops-blue) !important; font-size:10px !important; font-weight:700 !important; letter-spacing:.09em !important; }

/* One component language */
html[data-theme] .panel, html[data-theme] .card, html[data-theme] .stat-card,
html[data-theme] .olt-card, html[data-theme] .onu-card, html[data-theme] .device-card,
html[data-theme] .metric-card, html[data-theme] .filter-card, html[data-theme] .table-card,
html[data-theme] .modal-content, html[data-theme] .action-state-grid,
html[data-theme] .onu-control-card, html[data-theme] .uni-card,
html[data-theme] .save-check-card, html[data-theme] .orion-onu-table-wrap,
html[data-theme] .orion-filter-panel, html[data-theme] .orion-stat-card,
html[data-theme] .orion-olt-card, html[data-theme] .orion-dashboard-card,
html[data-theme] .orion-modal, html[data-theme] .oc2-card,
html[data-theme] .od-card, html[data-theme] .od-actions,
html[data-theme] .user-form-card, html[data-theme] .user-policy-card,
html[data-theme] details {
  border:1px solid var(--ops-line) !important; border-radius:var(--ops-radius) !important;
  background:var(--ops-surface) !important; color:var(--ops-text) !important;
  box-shadow:var(--ops-shadow) !important; backdrop-filter:none !important;
}
html[data-theme] .panel-header, html[data-theme] .card-header,
html[data-theme] .oc2-card-head, html[data-theme] .od-title,
html[data-theme] .table-header, html[data-theme] .modal-header,
html[data-theme] .soa-card-head {
  min-height: 48px; padding:12px 16px !important; border-color:var(--ops-line) !important;
  background:var(--ops-surface) !important;
}
html[data-theme] .orion-smart-summary, html[data-theme] .stats-grid,
html[data-theme] .summary-grid, html[data-theme] .profile-grid,
html[data-theme] .storage-grid, html[data-theme] .od-charts {
  gap:12px !important; align-items:stretch !important;
}

/* Buttons and fields */
html[data-theme] .btn, html[data-theme] .btn-primary,
html[data-theme] .btn-secondary, html[data-theme] .btn-danger,
html[data-theme] .btn-warning, html[data-theme] .btn-small,
html[data-theme] .od-btn, html[data-theme] .oc2-btn,
html[data-theme] .onu-view-button, html[data-theme] .orion-more-vlans {
  min-height:36px !important; padding:7px 12px !important; border-radius:var(--ops-radius-sm) !important;
  border:1px solid var(--ops-line-strong) !important; box-shadow:none !important;
  font:inherit !important; font-size:13px !important; font-weight:600 !important;
  text-decoration:none !important; transform:none !important; filter:none !important;
}
html[data-theme] .btn, html[data-theme] .btn-primary,
html[data-theme] button.primary, html[data-theme] .od-btn.primary,
html[data-theme] .onu-view-button {
  background:var(--ops-blue) !important; border-color:var(--ops-blue) !important; color:#fff !important;
}
html[data-theme] .btn:hover, html[data-theme] .btn-primary:hover,
html[data-theme] button.primary:hover, html[data-theme] .od-btn.primary:hover,
html[data-theme] .onu-view-button:hover { background:var(--ops-blue-hover) !important; border-color:var(--ops-blue-hover) !important; }
html[data-theme] .btn-secondary, html[data-theme] .btn-small,
html[data-theme] .od-btn:not(.primary):not(.danger):not(.warn):not(.live),
html[data-theme] .oc2-btn, html[data-theme] details summary {
  background:var(--ops-surface) !important; color:var(--ops-text) !important; border-color:var(--ops-line) !important;
}
html[data-theme] .btn-secondary:hover, html[data-theme] .btn-small:hover,
html[data-theme] .oc2-btn:hover { background:var(--ops-surface-muted) !important; border-color:var(--ops-line-strong) !important; }
html[data-theme] .btn-danger, html[data-theme] .od-btn.danger { background:var(--ops-red-soft) !important; color:var(--ops-red) !important; border-color:color-mix(in srgb,var(--ops-red) 42%,var(--ops-line)) !important; }
html[data-theme] .btn-warning, html[data-theme] .od-btn.warn { background:var(--ops-amber-soft) !important; color:var(--ops-amber) !important; border-color:color-mix(in srgb,var(--ops-amber) 42%,var(--ops-line)) !important; }
html[data-theme] button:disabled, html[data-theme] .btn:disabled { opacity:.48 !important; cursor:not-allowed !important; }
html[data-theme] input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
html[data-theme] select, html[data-theme] textarea {
  width:100%; min-height:38px !important; padding:8px 10px !important;
  border:1px solid var(--ops-line-strong) !important; border-radius:var(--ops-radius-sm) !important;
  background:var(--ops-surface) !important; color:var(--ops-text) !important; box-shadow:none !important;
  font:inherit !important; font-size:13px !important;
}
html[data-theme] input[type="checkbox"], html[data-theme] input[type="radio"] {
  width:auto !important; min-height:0 !important; padding:0 !important;
  border-radius:3px !important; accent-color:var(--ops-blue);
}
html[data-theme] textarea { min-height:84px !important; resize:vertical; }
html[data-theme] input:focus, html[data-theme] select:focus, html[data-theme] textarea:focus {
  outline:2px solid color-mix(in srgb,var(--ops-blue) 35%,transparent) !important;
  outline-offset:1px !important; border-color:var(--ops-blue) !important; box-shadow:none !important;
}
html[data-theme] label { color:var(--ops-muted) !important; font-size:12px !important; font-weight:600 !important; letter-spacing:0 !important; text-transform:none !important; }

/* Data tables */
html[data-theme] .table-responsive, html[data-theme] .od-table-wrap,
html[data-theme] .orion-vlan-table-wrap { border-color:var(--ops-line) !important; border-radius:var(--ops-radius) !important; }
html[data-theme] table { width:100%; border-collapse:collapse !important; border-spacing:0 !important; background:var(--ops-surface) !important; }
html[data-theme] table th {
  height:42px; padding:10px 12px !important; background:var(--ops-surface-muted) !important;
  color:var(--ops-muted) !important; border-color:var(--ops-line) !important;
  font-size:11px !important; font-weight:700 !important; letter-spacing:.035em !important; text-transform:uppercase !important;
}
html[data-theme] table td {
  min-height:44px; padding:10px 12px !important; background:var(--ops-surface) !important;
  color:var(--ops-text) !important; border-color:var(--ops-line) !important; vertical-align:middle !important;
}
html[data-theme] table tbody tr:nth-child(even) td { background:color-mix(in srgb,var(--ops-surface) 94%,var(--ops-surface-muted)) !important; }
html[data-theme] table tbody tr:hover td { background:var(--ops-blue-soft) !important; }
html[data-theme] .mono, html[data-theme] code, html[data-theme] pre {
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace !important;
}

/* Status is the only pill-shaped language */
html[data-theme] .badge, html[data-theme] .status-badge,
html[data-theme] .onu-status, html[data-theme] .uni-status,
html[data-theme] .onu-mode-chip, html[data-theme] .audit-status,
html[data-theme] .orion-smart-online, html[data-theme] .v2-head-count,
html[data-theme] .orion-inline-note, html[data-theme] .save-compact-note {
  border-radius:999px !important; box-shadow:none !important;
}

/* Compact page totals: keep count and label on one calm, aligned row. */
html[data-theme] .v2-head-count {
  width:auto !important;
  min-width:0 !important;
  height:auto !important;
  min-height:38px !important;
  padding:8px 12px !important;
  display:inline-flex !important;
  flex-direction:row !important;
  align-items:center !important;
  gap:9px !important;
  border-radius:8px !important;
  white-space:nowrap;
}
html[data-theme] .v2-head-count span {
  order:1;
  font-size:12px !important;
  line-height:1 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
}
html[data-theme] .v2-head-count strong {
  order:2;
  font-size:16px !important;
  line-height:1 !important;
}
html[data-theme] .status-dot, html[data-theme] .onu-status-icon { box-shadow:none !important; }
html[data-theme="dark"] .content a:not(.btn):not(.btn-secondary):not(.btn-danger):not(.btn-warning) { color:var(--ops-blue); }
html[data-theme="dark"] .status-dot.online,
html[data-theme="dark"] .onu-status-icon.online::after { background:var(--ops-green) !important; }
html[data-theme="dark"] .status-dot.offline,
html[data-theme="dark"] .onu-status-icon.los::after,
html[data-theme="dark"] .onu-status-icon.dying-gasp::after { background:var(--ops-red) !important; }
html[data-theme="dark"] .storage-status.safe,
html[data-theme="dark"] .badge.online,
html[data-theme="dark"] .od-btn.live { color:var(--ops-green) !important; }
html[data-theme="dark"] .storage-status.warning { color:var(--ops-amber) !important; }
html[data-theme="dark"] .storage-status.critical { color:var(--ops-red) !important; }
html[data-theme="dark"] .storage-card.safe .storage-meter i { background:var(--ops-green) !important; }
html[data-theme="dark"] .storage-card.warning .storage-meter i { background:var(--ops-amber) !important; }
html[data-theme="dark"] .storage-card.critical .storage-meter i { background:var(--ops-red) !important; }

/* Dashboard: flat information, semantic color only in icon/status */
html[data-theme] .orion-smart-card,
html[data-theme] .orion-smart-card-main,
html[data-theme] .orion-smart-card-footer {
  background:var(--ops-surface) !important; color:var(--ops-text) !important;
  border-color:var(--ops-line) !important; box-shadow:none !important; border-radius:var(--ops-radius) !important;
}
html[data-theme] .orion-smart-card { overflow:hidden; border:1px solid var(--ops-line) !important; }
html[data-theme] .orion-smart-card-main { min-height:112px !important; padding:18px !important; }
html[data-theme] .orion-smart-card-footer { min-height:40px !important; padding:10px 18px !important; border-top:1px solid var(--ops-line) !important; }
html[data-theme] .orion-smart-card .orion-smart-icon {
  width:40px !important; height:40px !important; border:1px solid var(--ops-line) !important;
  border-radius:var(--ops-radius-sm) !important; background:var(--ops-surface-muted) !important;
  color:var(--ops-muted) !important; box-shadow:none !important;
}
html[data-theme] .orion-smart-card.authorization { border-left:3px solid var(--ops-blue) !important; }
html[data-theme] .orion-smart-card.online { border-left:3px solid var(--ops-green) !important; }
html[data-theme] .orion-smart-card.offline { border-left:3px solid var(--ops-line-strong) !important; }
html[data-theme] .orion-smart-card.low-signal { border-left:3px solid var(--ops-amber) !important; }
html[data-theme] .orion-smart-card .orion-smart-number strong { color:var(--ops-text) !important; }
html[data-theme] .orion-smart-card .orion-smart-number span,
html[data-theme] .orion-smart-card .orion-smart-card-footer,
html[data-theme] .orion-smart-card .orion-smart-card-footer span { color:var(--ops-muted) !important; }
html[data-theme] .orion-smart-card.authorization .orion-smart-card-main,
html[data-theme] .orion-smart-card.online .orion-smart-card-main,
html[data-theme] .orion-smart-card.offline .orion-smart-card-main,
html[data-theme] .orion-smart-card.low-signal .orion-smart-card-main,
html[data-theme] .orion-smart-card.authorization .orion-smart-card-footer,
html[data-theme] .orion-smart-card.online .orion-smart-card-footer,
html[data-theme] .orion-smart-card.offline .orion-smart-card-footer,
html[data-theme] .orion-smart-card.low-signal .orion-smart-card-footer {
  background:var(--ops-surface) !important; color:var(--ops-muted) !important;
}
html[data-theme] .orion-smart-card.authorization .orion-smart-icon,
html[data-theme] .orion-smart-card.online .orion-smart-icon,
html[data-theme] .orion-smart-card.offline .orion-smart-icon,
html[data-theme] .orion-smart-card.low-signal .orion-smart-icon {
  background:var(--ops-surface-muted) !important; border-color:var(--ops-line) !important;
}
html[data-theme] .orion-smart-card.authorization .orion-smart-icon { color:var(--ops-blue) !important; }
html[data-theme] .orion-smart-card.online .orion-smart-icon { color:var(--ops-green) !important; }
html[data-theme] .orion-smart-card.offline .orion-smart-icon { color:var(--ops-muted) !important; }
html[data-theme] .orion-smart-card.low-signal .orion-smart-icon { color:var(--ops-amber) !important; }
html[data-theme] .orion-smart-quick a { min-height:54px !important; border-radius:var(--ops-radius-sm) !important; box-shadow:none !important; }
html[data-theme] .orion-smart-quick a > span { border-radius:var(--ops-radius-sm) !important; }

/* Modals and notices */
html[data-theme] .modal, html[data-theme] .od-modal,
html[data-theme] .orion-save-modal, html[data-theme] .modal-backdrop {
  background:rgba(5,8,12,.68) !important; backdrop-filter:none !important;
}
html[data-theme] .od-modal-box, html[data-theme] .orion-save-dialog,
html[data-theme] .modal-content, html[data-theme] .modal-box {
  border:1px solid var(--ops-line-strong) !important; border-radius:10px !important;
  background:var(--ops-surface-raised) !important; box-shadow:0 16px 40px rgba(0,0,0,.28) !important;
}
html[data-theme] .orion-save-icon { border-radius:var(--ops-radius-sm) !important; background:var(--ops-blue-soft) !important; }
html[data-theme] .flash, html[data-theme] .alert, html[data-theme] .alert-error,
html[data-theme] .readonly-warning, html[data-theme] .real-write-warning,
html[data-theme] .save-warning, html[data-theme] .uni-warning,
html[data-theme] .orion-inline-status {
  border-radius:var(--ops-radius) !important; box-shadow:none !important; backdrop-filter:none !important;
}

/* Login: retain the network motion scene while using the active ORION palette. */
html[data-theme] .login-body {
  display:grid !important; place-items:center !important; min-height:100vh;
  padding:24px !important;
  background:
    radial-gradient(circle at 14% 16%, color-mix(in srgb,var(--ops-blue) 22%,transparent), transparent 30%),
    radial-gradient(circle at 86% 78%, color-mix(in srgb,var(--ops-blue) 14%,transparent), transparent 34%),
    linear-gradient(135deg,var(--ops-bg),color-mix(in srgb,var(--ops-bg) 88%,var(--ops-blue))) !important;
}
html[data-theme] .login-body::before, html[data-theme] .login-body::after,
html[data-theme] .orion-login-orbit { display:block !important; }
html[data-theme] .login-body::before { animation:orionNebulaSpin 26s linear infinite !important; }
html[data-theme] .login-body::after { animation:orionGridDrift 18s linear infinite !important; }
html[data-theme] .login-card {
  width:min(390px,100%) !important; padding:32px !important;
  border:1px solid var(--ops-line) !important; border-radius:10px !important;
  background:color-mix(in srgb,var(--ops-surface) 88%,transparent) !important;
  box-shadow:0 22px 58px rgba(0,0,0,.22) !important;
  backdrop-filter:blur(18px) !important;
  animation:orionLoginCardIn .55s cubic-bezier(.2,.8,.2,1) both !important;
}
html[data-theme] .login-brand-logos { margin-bottom:12px !important; }
html[data-theme] .login-card .orion-brand-logo { width:180px !important; height:76px !important; margin:0 auto !important; }
html[data-theme] .login-card button[type="submit"] {
  width:100%; min-height:40px !important; margin-top:8px; border-radius:var(--ops-radius-sm) !important;
  border:1px solid var(--ops-blue) !important; background:var(--ops-blue) !important;
  color:#fff !important; box-shadow:none !important; font-weight:650 !important;
}
html[data-theme] .login-card input {
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease !important;
}
html[data-theme] .login-card input:focus { transform:translateY(-1px) !important; }
html[data-theme] .login-card button[type="submit"] {
  transition:transform .18s ease,filter .18s ease,box-shadow .18s ease !important;
}
html[data-theme] .login-card button[type="submit"]:hover {
  transform:translateY(-1px) !important; filter:brightness(1.08);
  box-shadow:0 10px 24px color-mix(in srgb,var(--ops-blue) 25%,transparent) !important;
}
@keyframes orionLoginCardIn {
  from { opacity:0; transform:translateY(16px) scale(.98); }
  to { opacity:1; transform:none; }
}
html[data-theme] .login-theme-toggle { position:fixed; top:18px; right:18px; width:auto !important; }

/* Responsive and symmetry safeguards */
@media (max-width: 1100px) {
  html[data-theme] .orion-smart-summary, html[data-theme] .stats-grid,
  html[data-theme] .summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width: 760px) {
  html[data-theme] .orion-v2-content, html[data-theme] .content { padding:18px 14px !important; }
  html[data-theme] .v2-page-head, html[data-theme] .orion-smart-page-head,
  html[data-theme] .page-header { min-height:0; align-items:flex-start !important; flex-direction:column !important; }
  html[data-theme] .orion-smart-summary, html[data-theme] .stats-grid,
  html[data-theme] .summary-grid, html[data-theme] .profile-grid,
  html[data-theme] .storage-grid { grid-template-columns:1fr !important; }
  html[data-theme] .orion-v2-sidebar, html[data-theme] .sidebar { width:min(280px,86vw) !important; min-width:0 !important; }
  html[data-theme] .modal-actions, html[data-theme] .od-modal-actions,
  html[data-theme] .orion-save-actions { align-items:stretch !important; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme] *, html[data-theme] *::before, html[data-theme] *::after { animation:none !important; scroll-behavior:auto !important; }
}

/* Compact disclosure rows. Legacy styles treated every <details> as a tall card. */
html[data-theme] details:not(#registered-vlans) {
  display:block !important; min-height:0 !important; margin:10px 0 0 !important; padding:0 !important;
  overflow:hidden !important; border:1px solid var(--ops-line) !important;
  border-radius:var(--ops-radius-sm) !important; background:var(--ops-surface) !important;
  box-shadow:none !important; backdrop-filter:none !important;
}
html[data-theme] details:not(#registered-vlans) > summary {
  display:flex !important; align-items:center !important; gap:7px !important;
  width:100% !important; min-height:34px !important; margin:0 !important; padding:7px 10px !important;
  list-style:none !important; border:0 !important; border-radius:0 !important;
  background:var(--ops-surface-muted) !important; color:var(--ops-text) !important;
  box-shadow:none !important; cursor:pointer !important; font-size:12px !important; font-weight:600 !important;
}
html[data-theme] details:not(#registered-vlans) > summary::-webkit-details-marker { display:none !important; }
html[data-theme] details:not(#registered-vlans) > summary::before {
  content:"›"; flex:0 0 auto; color:var(--ops-muted); font-size:16px; line-height:1;
}
html[data-theme] details:not(#registered-vlans)[open] > summary::before { transform:rotate(90deg); }
html[data-theme] details:not(#registered-vlans)[open] > summary { border-bottom:1px solid var(--ops-line) !important; }
html[data-theme] details:not(#registered-vlans) > :not(summary) { margin:0 !important; padding:10px 12px !important; }

/* Storage cards keep controls and technical disclosure on one baseline. */
html[data-theme] .storage-grid { align-items:stretch !important; }
html[data-theme] .storage-card {
  display:flex !important; flex-direction:column !important; min-width:0 !important;
  padding:18px !important; border-radius:var(--ops-radius) !important;
}
html[data-theme] .storage-card .storage-tech { width:100% !important; margin-top:auto !important; }
html[data-theme] .storage-card .storage-tech-note { margin:10px 0 0 !important; color:var(--ops-muted) !important; font-size:12px !important; }

/* SmartOLT-inspired dark console. Structure remains ORION; visual hierarchy follows NOC panels. */
html[data-theme="dark"] body,
html[data-theme="dark"] .layout,
html[data-theme="dark"] .orion-v2-content,
html[data-theme="dark"] .content {
  background-color:var(--ops-bg) !important;
  background-image:linear-gradient(145deg,#07172f 0%,#082348 54%,#06172d 100%) !important;
  background-attachment:fixed !important;
}
html[data-theme="dark"] .orion-v2-sidebar,
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .orion-sidebar-footer {
  background:#08172d !important; border-color:#263b5a !important;
}
html[data-theme="dark"] .orion-theme-toggle,
html[data-theme="dark"] .orion-global-save,
html[data-theme="dark"] .orion-user-avatar {
  background:#10233f !important; border-color:#2b466c !important;
}
html[data-theme="dark"] .orion-nav a:hover { background:#102746 !important; color:#ddecff !important; }
html[data-theme="dark"] .orion-nav a.active {
  background:#0d6fc5 !important; color:#fff !important;
}
html[data-theme="dark"] .orion-nav a.active > span,
html[data-theme="dark"] .orion-nav a.active strong { color:#fff !important; }
html[data-theme="dark"] .orion-nav a.active::before { background:#66bdff !important; }

html[data-theme="dark"] :is(.panel,.card,.stat-card,.olt-card,.onu-card,.device-card,.metric-card,.filter-card,.table-card,.orion-dashboard-card,.port-card,.olt-summary,.od-card,.od-actions,.orion-device-panel,.orion-olt-device-tabs,.storage-card,.profile-dialog,.user-form-card,.user-policy-card) {
  background:var(--ops-surface) !important; border-color:var(--ops-line) !important;
  box-shadow:0 2px 6px rgba(0,5,18,.24) !important;
}
html[data-theme="dark"] :is(.panel-header,.card-header,.table-header,.oc2-card-head,.od-title,.modal-header,.soa-card-head) {
  background:var(--ops-surface-muted) !important; border-color:var(--ops-line) !important;
}
html[data-theme="dark"] :is(.panel-header,.card-header,.table-header,.oc2-card-head,.od-title,.modal-header,.soa-card-head) h2,
html[data-theme="dark"] :is(.panel-header,.card-header,.table-header,.oc2-card-head,.od-title,.modal-header,.soa-card-head) strong {
  color:#f5f8fc !important;
}
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background:#0c2038 !important; border-color:var(--ops-line-strong) !important; color:var(--ops-text) !important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color:#7f91aa !important; }
html[data-theme="dark"] table th {
  background:var(--ops-surface-muted) !important; border-color:var(--ops-line) !important; color:var(--ops-muted) !important;
}
html[data-theme="dark"] table td { background:var(--ops-surface) !important; border-color:var(--ops-line) !important; }
html[data-theme="dark"] table tbody tr:nth-child(even) td { background:#122a46 !important; }
html[data-theme="dark"] table tbody tr:hover td { background:#183b61 !important; }
html[data-theme="dark"] details:not(#registered-vlans),
html[data-theme="dark"] details:not(#registered-vlans) > summary {
  border-color:#304766 !important;
}
html[data-theme="dark"] details:not(#registered-vlans) > summary { background:#1d2b43 !important; }
html[data-theme="dark"] .od-modal-box,
html[data-theme="dark"] .orion-save-dialog,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .modal-box,
html[data-theme="dark"] .storage-dialog {
  background:#10213c !important; border-color:#40597c !important;
}

/* SmartOLT summary blocks: solid operational colors, no glow. */
html[data-theme="light"] .orion-smart-card { background:#fff !important; border-color:#bfd1dd !important; }
html[data-theme="light"] .orion-smart-card.authorization .orion-smart-card-main { background:#2588c8 !important; color:#fff !important; }
html[data-theme="light"] .orion-smart-card.online .orion-smart-card-main { background:#34a565 !important; color:#fff !important; }
html[data-theme="light"] .orion-smart-card.offline .orion-smart-card-main { background:#647785 !important; color:#fff !important; }
html[data-theme="light"] .orion-smart-card.low-signal .orion-smart-card-main { background:#d38d29 !important; color:#fff !important; }
html[data-theme="light"] .orion-smart-card .orion-smart-card-main :is(strong,span,b),
html[data-theme="light"] .orion-smart-card .orion-smart-number :is(strong,span) { color:#fff !important; }
html[data-theme="light"] .orion-smart-card :is(.orion-smart-card-footer,.orion-smart-card-sub) {
  background:#f3f7fa !important; color:#536d7e !important; border-top-color:#cbdbe5 !important;
}
html[data-theme="light"] .orion-smart-card :is(.orion-smart-icon,.orion-smart-symbol) {
  background:rgba(255,255,255,.16) !important; border-color:rgba(255,255,255,.35) !important; color:#fff !important;
}
html[data-theme="dark"] .orion-smart-card { background:var(--ops-surface) !important; border-color:var(--ops-line) !important; }
html[data-theme="dark"] .orion-smart-card.authorization .orion-smart-card-main { background:#167fca !important; color:#fff !important; }
html[data-theme="dark"] .orion-smart-card.online .orion-smart-card-main { background:#25a85d !important; color:#fff !important; }
html[data-theme="dark"] .orion-smart-card.offline .orion-smart-card-main { background:#596a7a !important; color:#fff !important; }
html[data-theme="dark"] .orion-smart-card.low-signal .orion-smart-card-main { background:#d18c22 !important; color:#fff !important; }
html[data-theme="dark"] .orion-smart-card.authorization .orion-smart-card-footer,
html[data-theme="dark"] .orion-smart-card.online .orion-smart-card-footer,
html[data-theme="dark"] .orion-smart-card.offline .orion-smart-card-footer,
html[data-theme="dark"] .orion-smart-card.low-signal .orion-smart-card-footer {
  background:#112b48 !important; color:var(--ops-muted) !important; border-top-color:var(--ops-line) !important;
}
html[data-theme="dark"] .orion-smart-card .orion-smart-number strong,
html[data-theme="dark"] .orion-smart-card .orion-smart-number span,
html[data-theme="dark"] .orion-smart-card .orion-smart-card-main b { color:#fff !important; }
html[data-theme="dark"] .orion-smart-card.authorization .orion-smart-icon,
html[data-theme="dark"] .orion-smart-card.online .orion-smart-icon,
html[data-theme="dark"] .orion-smart-card.offline .orion-smart-icon,
html[data-theme="dark"] .orion-smart-card.low-signal .orion-smart-icon {
  background:rgba(255,255,255,.14) !important; border-color:rgba(255,255,255,.3) !important; color:#fff !important;
}
html[data-theme="dark"] .orion-smart-card.authorization { border-left-color:#4eafff !important; }
html[data-theme="dark"] .orion-smart-card.online { border-left-color:#53ea62 !important; }
html[data-theme="dark"] .orion-smart-card.offline { border-left-color:#9e9b9b !important; }
html[data-theme="dark"] .orion-smart-card.low-signal { border-left-color:#ffc45f !important; }

html[data-theme="dark"] .orion-smart-quick a,
html[data-theme="dark"] .port-card,
html[data-theme="dark"] .olt-summary,
html[data-theme="dark"] .next-phase-box {
  background:var(--ops-surface) !important; border-color:var(--ops-line) !important;
}
html[data-theme="dark"] .orion-smart-quick a:hover,
html[data-theme="dark"] .port-card:hover { background:#183b61 !important; border-color:var(--ops-blue) !important; }
html[data-theme="dark"] .chart-container,
html[data-theme="dark"] .oc2-chart,
html[data-theme="dark"] .od-plot,
html[data-theme="dark"] canvas { background:#0c2038 !important; border-color:var(--ops-line) !important; }
html[data-theme="dark"] .flash.success { background:var(--ops-green-soft) !important; border-color:#3c7254 !important; color:#9bd0af !important; }
html[data-theme="dark"] .flash.error,
html[data-theme="dark"] .alert-error { background:var(--ops-red-soft) !important; border-color:#74454c !important; color:#e9a5a5 !important; }
html[data-theme="dark"] .flash.warning { background:var(--ops-amber-soft) !important; border-color:#725b32 !important; color:#e2bd7d !important; }

/* Keep forms compact: headings and controls are self-explanatory. */
.form-section-title > p,
.panel-header > div > p,
.soa-card-head p:empty,
.registered-filter-note > [role="status"]:empty {
  display:none !important;
}