/* ORION final design-system layer. Intentionally loaded after legacy CSS. */
:root,html[data-theme=light]{--r-bg:#f5f7fa;--r-card:#fff;--r-soft:#f8fafc;--r-line:#e5eaf0;--r-line2:#cfd7e3;--r-text:#1d2939;--r-muted:#667085;--r-accent:#168ad0;--r-accent-soft:#eaf6fc;--r-shadow:0 1px 2px rgba(16,24,40,.04),0 6px 18px rgba(16,24,40,.04)}
html[data-theme=dark]{--r-bg:#0b1018;--r-card:#121923;--r-soft:#18212d;--r-line:#263241;--r-line2:#364559;--r-text:#edf2f7;--r-muted:#98a6b8;--r-accent:#4bb8e8;--r-accent-soft:rgba(75,184,232,.12);--r-shadow:0 1px 2px rgba(0,0,0,.18),0 8px 22px rgba(0,0,0,.14)}
html[data-theme],html[data-theme] body{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;font-size:14px!important;line-height:1.5!important;background:var(--r-bg)!important;color:var(--r-text)!important}
html[data-theme] .content,html[data-theme] .orion-v2-content{background:var(--r-bg)!important;padding:28px 30px!important}
html[data-theme] h1{font-size:clamp(26px,2.3vw,34px)!important;line-height:1.15!important;font-weight:700!important;letter-spacing:-.025em!important}html[data-theme] h2{font-size:21px!important;font-weight:650!important}html[data-theme] h3{font-size:16px!important;font-weight:650!important}html[data-theme] strong,html[data-theme] b{font-weight:650!important}html[data-theme] p,html[data-theme] small,html[data-theme] .muted{color:var(--r-muted)!important}html[data-theme] label{font-size:12.5px!important;font-weight:600!important;letter-spacing:0!important;text-transform:none!important;color:var(--r-muted)!important}
html[data-theme] .sidebar,html[data-theme] .orion-v2-sidebar{background:var(--r-card)!important;border-right:1px solid var(--r-line)!important;box-shadow:none!important;backdrop-filter:none!important}html[data-theme] .orion-brand{min-height:102px!important;padding:8px 10px 10px!important}html[data-theme] .orion-brand-logo{width:174px!important;height:86px!important}html[data-theme] .orion-nav{padding:6px 10px!important}html[data-theme] .orion-nav-caption{margin:17px 10px 6px!important;font-size:10.5px!important;font-weight:650!important;letter-spacing:.09em!important}html[data-theme] .orion-nav a{min-height:42px!important;margin:2px 0!important;padding:9px 11px!important;border-radius:10px!important;color:var(--r-muted)!important;gap:11px!important}html[data-theme] .orion-nav a strong{font-size:13.5px!important;font-weight:550!important;color:inherit!important}html[data-theme] .orion-nav a:hover{background:var(--r-soft)!important;color:var(--r-text)!important}html[data-theme] .orion-nav a.active{background:var(--r-accent-soft)!important;color:var(--r-accent)!important;box-shadow:none!important}html[data-theme] .orion-theme-toggle,html[data-theme] .orion-global-save{border:1px solid var(--r-line)!important;background:var(--r-soft)!important;border-radius:10px!important;box-shadow:none!important;font-weight:600!important}html[data-theme] .orion-sidebar-save-zone{border:0!important;margin:8px 10px!important;padding:10px 0!important}
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] .filter-card,html[data-theme] .table-card,html[data-theme] .orion-dashboard-card,html[data-theme] .orion-smart-card,html[data-theme] .port-card,html[data-theme] .olt-summary,html[data-theme] .od-card,html[data-theme] .od-actions,html[data-theme] .orion-device-panel,html[data-theme] .orion-olt-device-tabs,html[data-theme] .storage-card,html[data-theme] .profile-dialog{background:var(--r-card)!important;border:1px solid var(--r-line)!important;border-radius:14px!important;box-shadow:var(--r-shadow)!important;color:var(--r-text)!important;backdrop-filter:none!important}html[data-theme] .panel-header,html[data-theme] .card-header,html[data-theme] .table-header{background:transparent!important;border-color:var(--r-line)!important}
html[data-theme] input,html[data-theme] select,html[data-theme] textarea{min-height:40px!important;padding:8px 11px!important;border:1px solid var(--r-line2)!important;border-radius:10px!important;background:var(--r-card)!important;color:var(--r-text)!important;box-shadow:none!important;font:inherit!important}html[data-theme] textarea{min-height:90px!important}html[data-theme] input:focus,html[data-theme] select:focus,html[data-theme] textarea:focus{border-color:var(--r-accent)!important;box-shadow:0 0 0 3px var(--r-accent-soft)!important;outline:none!important}
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{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;min-height:38px!important;padding:8px 14px!important;border-radius:10px!important;font-size:13px!important;font-weight:600!important;line-height:1!important;box-shadow:none!important;transform:none!important}html[data-theme] .btn,html[data-theme] .btn-primary,html[data-theme] .od-btn.primary{background:var(--r-accent)!important;border:1px solid var(--r-accent)!important;color:#fff!important}html[data-theme] .btn-secondary,html[data-theme] .btn-small,html[data-theme] .oc2-btn{background:var(--r-card)!important;border:1px solid var(--r-line2)!important;color:var(--r-text)!important}html[data-theme] .btn-danger,html[data-theme] .od-btn.danger{background:transparent!important;border:1px solid rgba(239,68,68,.38)!important;color:#e05252!important}html[data-theme] button:disabled{opacity:.46!important;filter:none!important}
html[data-theme] table{border-collapse:collapse!important;background:var(--r-card)!important}html[data-theme] table th{padding:11px 14px!important;background:var(--r-soft)!important;border-bottom:1px solid var(--r-line)!important;color:var(--r-muted)!important;font-size:11px!important;font-weight:650!important;letter-spacing:.045em!important;text-transform:uppercase!important}html[data-theme] table td{padding:13px 14px!important;background:transparent!important;border-bottom:1px solid var(--r-line)!important;color:var(--r-text)!important;font-size:13.5px!important}html[data-theme] table tbody tr:nth-child(even) td{background:transparent!important}html[data-theme] table tbody tr:hover td{background:var(--r-soft)!important}
html[data-theme] .badge,html[data-theme] .status-badge,html[data-theme] .v2-status,html[data-theme] .onu-status,html[data-theme] .uni-status,html[data-theme] .orion-device-type{min-height:24px!important;padding:4px 8px!important;border-radius:999px!important;font-size:11px!important;font-weight:650!important;box-shadow:none!important}
html[data-theme] .modal,html[data-theme] .od-modal,html[data-theme] .modal-backdrop,html[data-theme] .orion-save-modal,html[data-theme] .storage-clean-modal{background:rgba(3,7,18,.68)!important;backdrop-filter:none!important}html[data-theme] .modal-content,html[data-theme] .od-modal-box,html[data-theme] .orion-save-dialog,html[data-theme] .storage-dialog{width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:22px!important;border:1px solid var(--r-line)!important;border-radius:16px!important;background:var(--r-card)!important;box-shadow:0 24px 64px rgba(0,0,0,.3)!important}
@media(max-width:900px){html[data-theme] .content,html[data-theme] .orion-v2-content{padding:24px 20px!important}}@media(max-width:760px){html[data-theme] .content,html[data-theme] .orion-v2-content{padding:72px 14px 20px!important}.orion-save-actions,.storage-dialog-actions,.profile-modal-actions{flex-wrap:wrap}.orion-save-actions>*,.storage-dialog-actions>*,.profile-modal-actions>*{flex:1}}

/* iOS-inspired shared visual system — UI only, loaded after all legacy layers. */
:root,
html[data-theme="light"] {
  --bg: #f2f2f7;
  --surface: #ffffff;
  --surface-secondary: #f7f7fa;
  --surface-raised: rgba(255,255,255,.92);
  --border: rgba(60,60,67,.14);
  --text: #1c1c1e;
  --text-secondary: #6e6e73;
  --primary: #007aff;
  --primary-soft: rgba(0,122,255,.11);
  --success: #30a46c;
  --warning: #d97706;
  --danger: #e5484d;
  --radius-sm: 9px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.04), 0 4px 14px rgba(0,0,0,.035);
  --shadow-md: 0 18px 50px rgba(0,0,0,.13);
}

html[data-theme="dark"] {
  --bg: #08090c;
  --surface: #15171d;
  --surface-secondary: #1c1f27;
  --surface-raised: rgba(28,31,39,.94);
  --border: rgba(235,235,245,.105);
  --text: #f5f5f7;
  --text-secondary: #98989f;
  --primary: #2997ff;
  --primary-soft: rgba(41,151,255,.15);
  --success: #30d158;
  --warning: #ff9f0a;
  --danger: #ff453a;
  --shadow-sm: 0 1px 1px rgba(0,0,0,.18), 0 10px 30px rgba(0,0,0,.12);
  --shadow-md: 0 24px 70px rgba(0,0,0,.48);
}

html[data-theme],
html[data-theme] body {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html[data-theme] .content,
html[data-theme] .orion-v2-content { background: var(--bg) !important; }
html[data-theme] h1 { font-weight: 700 !important; letter-spacing: -.035em !important; }
html[data-theme] h2 { font-weight: 650 !important; letter-spacing: -.022em !important; }
html[data-theme] h3 { font-weight: 600 !important; letter-spacing: -.012em !important; }
html[data-theme] p,
html[data-theme] small,
html[data-theme] .muted { color: var(--text-secondary) !important; }

/* Calm navigation with one soft selected state. */
html[data-theme] .sidebar,
html[data-theme] .orion-v2-sidebar {
  background: color-mix(in srgb, var(--surface) 94%, transparent) !important;
  border-right: 1px solid var(--border) !important;
  box-shadow: none !important;
}
@supports (backdrop-filter: blur(18px)) {
  html[data-theme] .sidebar,
  html[data-theme] .orion-v2-sidebar { backdrop-filter: saturate(125%) blur(18px) !important; }
}
html[data-theme] .orion-nav a {
  border-radius: var(--radius-md) !important;
  color: var(--text-secondary) !important;
  transition: background-color .14s ease, color .14s ease, transform .14s ease !important;
}
html[data-theme] .orion-nav a:hover { background: var(--surface-secondary) !important; color: var(--text) !important; }
html[data-theme] .orion-nav a.active {
  background: var(--primary-soft) !important;
  color: var(--primary) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 12%, transparent) !important;
}
html[data-theme] .orion-nav-caption { color: var(--text-secondary) !important; opacity: .72; }
html[data-theme] .orion-theme-toggle,
html[data-theme] .orion-global-save {
  background: var(--surface-secondary) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
}
html[data-theme] .orion-user-panel { border-top-color: var(--border) !important; }

/* Grouped surfaces. */
html[data-theme] :is(.panel,.card,.stat-card,.olt-card,.onu-card,.device-card,.metric-card,.filter-card,.table-card,.orion-dashboard-card,.orion-smart-card,.port-card,.olt-summary,.od-card,.od-actions,.orion-device-panel,.orion-olt-device-tabs,.storage-card,.profile-dialog,.login-card) {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
}
html[data-theme] :is(.page-header,.profile-head,.storage-head,.v2-head,.onu-list-head,.od-topbar) {
  border: 0 !important;
  background: transparent !important;
}
html[data-theme] :is(.panel-header,.card-header,.table-header,.oc2-card-head) {
  background: transparent !important;
  border-color: var(--border) !important;
}

/* Native-feeling controls. */
html[data-theme] :is(input,select,textarea) {
  min-height: 42px !important;
  padding: 9px 12px !important;
  color: var(--text) !important;
  background: var(--surface-secondary) !important;
  border: 1px solid transparent !important;
  border-radius: var(--radius-md) !important;
  transition: border-color .14s ease, box-shadow .14s ease, background-color .14s ease !important;
}
html[data-theme] :is(input,select,textarea):hover { border-color: var(--border) !important; }
html[data-theme] :is(input,select,textarea):focus {
  border-color: color-mix(in srgb, var(--primary) 70%, transparent) !important;
  box-shadow: 0 0 0 4px var(--primary-soft) !important;
  outline: 0 !important;
}
html[data-theme] :is(.btn,.btn-primary,.btn-secondary,.btn-danger,.btn-warning,.btn-small,.od-btn,.oc2-btn,.profile-mini,.onu-view-button) {
  min-height: 38px !important;
  border-radius: var(--radius-md) !important;
  font-weight: 600 !important;
  letter-spacing: -.006em !important;
  transition: filter .12s ease, transform .12s ease, background-color .12s ease !important;
}
html[data-theme] :is(.btn,.btn-primary,.od-btn.primary) {
  color: #fff !important;
  background: var(--primary) !important;
  border-color: var(--primary) !important;
}
html[data-theme] :is(.btn-secondary,.btn-small,.oc2-btn,.profile-mini) {
  color: var(--text) !important;
  background: var(--surface-secondary) !important;
  border-color: var(--border) !important;
}
html[data-theme] :is(.btn-danger,.od-btn.danger,.profile-mini.danger) {
  color: var(--danger) !important;
  background: color-mix(in srgb, var(--danger) 9%, transparent) !important;
  border-color: color-mix(in srgb, var(--danger) 28%, transparent) !important;
}
html[data-theme] button:not(:disabled):active,
html[data-theme] a.btn:active { transform: scale(.975) !important; }

/* Segmented controls. */
html[data-theme] .profile-tabs,
html[data-theme] :is(.tabs,.segmented-control,.tab-list) {
  gap: 3px !important;
  padding: 4px !important;
  background: var(--surface-secondary) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.08) !important;
}
html[data-theme] .profile-tab { min-height: 36px !important; border-radius: var(--radius-sm) !important; font-weight: 600 !important; }
html[data-theme] .profile-tab.active {
  color: var(--text) !important;
  background: var(--surface) !important;
  box-shadow: 0 1px 5px rgba(0,0,0,.14) !important;
}

/* Dense NOC tables, with softer grouping. */
html[data-theme] :is(.table-card,.profile-table-wrap,.onu-smart-table-panel,.orion-onu-table-wrap) {
  overflow: hidden;
  background: var(--surface) !important;
  border-color: var(--border) !important;
  border-radius: var(--radius-lg) !important;
}
html[data-theme] table { background: var(--surface) !important; }
html[data-theme] table th {
  background: var(--surface-secondary) !important;
  border-color: var(--border) !important;
  color: var(--text-secondary) !important;
  font-weight: 600 !important;
  letter-spacing: .025em !important;
}
html[data-theme] table td { border-color: var(--border) !important; color: var(--text) !important; }
html[data-theme] table tbody tr:hover td { background: var(--surface-secondary) !important; }

/* Compact semantic status and notifications. */
html[data-theme] :is(.badge,.status-badge,.v2-status,.onu-status,.uni-status,.orion-device-type) {
  border: 0 !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
}
html[data-theme] .flash-stack { position: relative; z-index: 20; }
html[data-theme] .flash {
  width: fit-content;
  max-width: min(560px,100%);
  padding: 10px 14px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  background: var(--surface-raised) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* Sheets and dialogs. */
html[data-theme] :is(.modal,.od-modal,.modal-backdrop,.orion-save-modal,.storage-clean-modal,.profile-modal) {
  background: rgba(0,0,0,.56) !important;
}
@supports (backdrop-filter: blur(8px)) {
  html[data-theme] :is(.modal,.od-modal,.modal-backdrop,.orion-save-modal,.storage-clean-modal,.profile-modal) { backdrop-filter: blur(8px) !important; }
}
html[data-theme] :is(.modal-content,.od-modal-box,.orion-save-dialog,.storage-dialog,.profile-dialog) {
  background: var(--surface-raised) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-md) !important;
  animation: orion-sheet-in .16s ease-out both;
}
@keyframes orion-sheet-in { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }

/* Login inherits the same visual language; remove the loud sci-fi decoration. */
html[data-theme] .login-body { background: var(--bg) !important; }
html[data-theme] .login-card { border-radius: var(--radius-xl) !important; box-shadow: var(--shadow-md) !important; }
html[data-theme] .orion-login-orbit { opacity: .16 !important; filter: saturate(.55) !important; }

@media (max-width: 760px) {
  html[data-theme] .content,
  html[data-theme] .orion-v2-content { padding: 68px 14px 22px !important; }
  html[data-theme] :is(.modal-content,.od-modal-box,.orion-save-dialog,.storage-dialog,.profile-dialog) {
    width: min(100%, calc(100vw - 20px)) !important;
    max-height: calc(100dvh - 20px) !important;
    padding: 20px !important;
    border-radius: 20px !important;
  }
}

html[data-theme] .od-management-ip-link {
  color: var(--primary) !important;
  font-weight: 650;
  text-decoration: none;
  text-underline-offset: 3px;
}
html[data-theme] .od-management-ip-link:hover { text-decoration: underline; }
html[data-theme] .od-management-ip-link:focus-visible {
  border-radius: 4px;
  outline: 3px solid var(--primary-soft);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Viewport-bound sidebar: header/footer stay visible; navigation scrolls alone. */
html, body { max-width: 100%; overflow-x: hidden; }
html[data-theme] .orion-v2-layout { display: block !important; min-width: 0; }
html[data-theme] .orion-v2-sidebar,
html[data-theme] .sidebar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 0 !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  flex: 0 0 auto;
}
html[data-theme] .orion-sidebar-header,
html[data-theme] .orion-sidebar-footer {
  flex: 0 0 auto;
  min-width: 0;
  background: inherit;
}
html[data-theme] .orion-sidebar-header { position: relative; z-index: 2; padding-bottom: 2px; }
html[data-theme] .orion-nav {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--text-secondary) 28%, transparent) transparent;
}
html[data-theme] .orion-nav::-webkit-scrollbar { width: 5px; }
html[data-theme] .orion-nav::-webkit-scrollbar-track { background: transparent; }
html[data-theme] .orion-nav::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text-secondary) 28%, transparent);
  border-radius: 999px;
}
html[data-theme] .orion-nav::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--text-secondary) 48%, transparent); }
html[data-theme] .orion-sidebar-footer { position: relative; z-index: 2; border-top: 1px solid var(--border); }
html[data-theme] .orion-sidebar-save-zone {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 9px !important;
  padding-bottom: 8px !important;
}
html[data-theme] .orion-user-panel {
  min-width: 0;
  padding-top: 10px !important;
  padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
}
html[data-theme] .orion-user-data { min-width: 0; overflow: hidden; }
html[data-theme] .orion-user-data strong,
html[data-theme] .orion-user-data small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-theme] .orion-v2-content { min-width: 0; overflow: visible; }

@media (min-width: 761px) {
  html[data-theme] .orion-v2-content,
  html[data-theme] .content {
    margin-left: 238px !important;
    width: calc(100% - 238px) !important;
    max-width: calc(100% - 238px) !important;
  }
}

/* Compact vertical rhythm for common 1366x768 desktop displays. */
@media (max-height: 800px) and (min-width: 761px) {
  html[data-theme] .orion-brand { min-height: 80px !important; padding-block: 4px !important; }
  html[data-theme] .orion-brand-logo { height: 68px !important; }
  html[data-theme] .orion-theme-toggle { min-height: 36px !important; margin-bottom: 4px !important; }
  html[data-theme] .orion-nav-caption { margin-top: 11px !important; }
  html[data-theme] .orion-nav a { min-height: 38px !important; padding-block: 7px !important; }
  html[data-theme] .orion-sidebar-save-label { display: none; }
}

@media (max-width: 760px) {
  html[data-theme] .orion-v2-sidebar,
  html[data-theme] .sidebar {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: none !important;
  }
}