/*
 * SYSTEM HIERARCHY V10
 * Shared content-area rules for the selected "dual-focus decision cockpit".
 * The existing top navigation is deliberately left untouched.
 */

body[data-page] {
  --v10-panel: rgba(3, 29, 51, .92);
  --v10-panel-strong: rgba(3, 39, 66, .96);
  --v10-panel-recessed: rgba(2, 23, 41, .88);
  --v10-line: rgba(52, 140, 204, .30);
  --v10-line-strong: rgba(68, 212, 228, .58);
  --v10-text: #edf6fb;
  --v10-text-2: #aebfcb;
  --v10-text-3: #70869a;
  --v10-cyan: #44d4e4;
  --v10-blue: #348ce4;
  --v10-aqua: #34ccb4;
  --v10-amber: #fcc444;
  --v10-red: #e45c4c;
}

body[data-page] .detail-shell {
  grid-template-rows: 62px 86px minmax(0, 1fr);
  gap: 9px;
  padding-bottom: 10px;
}

/* One quiet outer ribbon replaces six visually competing KPI cards. */
body[data-page] .page-kpi-rail {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--v10-line);
  border-radius: 6px;
  background:
    linear-gradient(90deg, rgba(4, 43, 72, .94), rgba(1, 25, 47, .92)),
    url("./assets/image2-deep-water-bg-v2.png") center 32% / cover no-repeat;
  box-shadow: inset 0 1px rgba(164, 220, 245, .035), 0 10px 28px rgba(0, 7, 20, .20);
}

body[data-page] .page-kpi-rail .kpi-item {
  min-width: 0;
  padding: 10px 16px 9px;
  overflow: hidden;
  border: 0 !important;
  border-left: 1px solid rgba(52, 140, 204, .20) !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-page] .page-kpi-rail .kpi-item:first-child {
  border-left: 0 !important;
}

body[data-page] .page-kpi-rail .kpi-item:hover,
body[data-page] .page-kpi-rail .kpi-item:focus-within,
body[data-page] .page-kpi-rail .kpi-item.ui-selected {
  background: rgba(52, 140, 228, .08) !important;
}

body[data-page] .page-kpi-rail .kpi-label {
  gap: 8px;
  color: var(--v10-text-2);
  font-size: 13px;
  line-height: 1.25;
}

body[data-page] .page-kpi-rail .kpi-label > span:first-child,
body[data-page] .page-kpi-rail .kpi-meta > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-page] .page-kpi-rail .kpi-label > span:last-child {
  flex: 0 0 auto;
  font-size: 11px;
}

body[data-page] .page-kpi-rail .kpi-value {
  margin-top: 2px;
}

body[data-page] .page-kpi-rail .kpi-value strong {
  color: var(--v10-text);
  font-size: clamp(26px, 1.75cqw, 34px);
  line-height: 1;
  letter-spacing: -.025em;
}

body[data-page] .page-kpi-rail .kpi-value span {
  margin-left: 5px;
  color: var(--v10-text-2);
  font-size: 12px;
}

body[data-page] .page-kpi-rail .kpi-meta {
  gap: 8px;
  margin-top: 5px;
  color: var(--v10-text-3);
  font-size: 11.5px;
  line-height: 1.2;
}

body[data-page] .page-kpi-rail .progress {
  bottom: 5px;
  right: 16px;
  left: 16px;
  height: 2px;
  opacity: .9;
}

body[data-page] .page-workspace {
  gap: 11px;
}

body[data-page] .ops-panel {
  border-color: var(--v10-line) !important;
  border-radius: 6px;
  background-color: var(--v10-panel) !important;
  box-shadow: inset 0 1px rgba(164, 220, 245, .035), 0 12px 28px rgba(0, 7, 20, .20) !important;
}

/* The selected language uses one thin frame, without decorative nested corners. */
body[data-page] .ops-panel::before,
body[data-page] .ops-panel::after {
  display: none !important;
}

body[data-page] .ops-panel-head {
  min-height: 46px;
  padding: 0 16px;
  border-bottom-color: rgba(52, 140, 204, .23) !important;
  background: linear-gradient(90deg, rgba(6, 53, 86, .88), rgba(3, 34, 58, .72) 72%, rgba(3, 31, 54, .50)) !important;
}

body[data-page] .ops-panel-head::after {
  right: 54%;
  background: linear-gradient(90deg, rgba(68, 212, 228, .55), rgba(52, 140, 228, .16), transparent);
}

body[data-page] .ops-panel-head h2 {
  color: var(--v10-text);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .015em;
}

body[data-page] .ops-panel-head h2::before {
  height: 18px;
  opacity: .9;
}

body[data-page] .ops-panel-head small,
body[data-page] .head-actions {
  color: var(--v10-text-3);
  font-size: 12px;
}

body[data-page] .ops-panel-body {
  height: calc(100% - 46px);
  padding: 12px 14px;
}

body[data-page] .ops-panel-body.is-tight {
  padding: 10px 14px;
}

body[data-page] .segmented,
body[data-page] .filter-chip,
body[data-page] .source-pill,
body[data-page] .status-pill {
  border-color: rgba(68, 212, 228, .24);
}

body[data-page] .segmented button,
body[data-page] .text-button,
body[data-page] .mini-action,
body[data-page] .primary-action,
body[data-page] .filter-chip {
  min-height: 32px;
  font-size: 13px;
}

body[data-page] .ops-table {
  font-size: 13px;
}

body[data-page] .ops-table th {
  color: var(--v10-text-3);
  font-size: 12px;
  font-weight: 500;
}

body[data-page] .ops-table td {
  color: var(--v10-text-2);
  line-height: 1.35;
}

body[data-page] .ops-table td strong {
  color: var(--v10-text);
  font-weight: 650;
}

body[data-page] .chart-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

body[data-page] .chart-axis {
  fill: var(--v10-text-3);
  font-size: 12px;
}

body[data-page] .chart-series {
  stroke-width: 2.4;
}

body[data-page] .chart-point {
  stroke: var(--v10-panel-strong);
  stroke-width: 2;
}

body[data-page] .notice-item,
body[data-page] .stat-box,
body[data-page] .metric-card,
body[data-page] .device-card {
  border-color: rgba(52, 140, 204, .24);
  background: rgba(2, 26, 46, .70);
}

body[data-page] .notice-item b,
body[data-page] .stat-box strong,
body[data-page] .metric-card strong {
  color: var(--v10-text);
}

body[data-page] .notice-item p,
body[data-page] .notice-item small,
body[data-page] .stat-box span,
body[data-page] .metric-card span {
  font-size: 12.5px;
  line-height: 1.45;
}

body[data-page] .warning-text,
body[data-page] .is-warning .kpi-value strong,
body[data-page] .is-warning .kpi-meta,
body[data-page] .notice-item.warning b {
  color: var(--v10-amber) !important;
}

body[data-page] .is-danger .kpi-value strong,
body[data-page] .danger-text {
  color: var(--v10-red) !important;
}

@container console-screen (max-width: 1500px) {
  body[data-page] .detail-shell {
    grid-template-rows: 58px 78px minmax(0, 1fr);
    gap: 7px;
    padding: 0 8px 8px;
  }

  body[data-page] .detail-shell .topbar {
    margin: 0 -8px;
  }

  body[data-page] .page-kpi-rail .kpi-item {
    padding: 8px 10px 7px;
  }

  body[data-page] .page-kpi-rail .kpi-label {
    font-size: 12px;
  }

  body[data-page] .page-kpi-rail .kpi-label > span:last-child,
  body[data-page] .page-kpi-rail .kpi-meta {
    font-size: 11.5px;
  }

  body[data-page] .page-kpi-rail .kpi-value strong {
    font-size: 25px;
  }

  body[data-page] .page-kpi-rail .progress {
    right: 10px;
    left: 10px;
  }

  body[data-page] .page-workspace {
    gap: 7px;
  }

  body[data-page] .ops-panel-head {
    min-height: 42px;
    padding: 0 12px;
  }

  body[data-page] .ops-panel-head h2 {
    font-size: 16px;
  }

  body[data-page] .ops-panel-body {
    height: calc(100% - 42px);
    padding: 8px 10px;
  }

  body[data-page] .ops-panel-body.is-tight {
    padding: 7px 10px;
  }

  body[data-page] .segmented button,
  body[data-page] .text-button,
  body[data-page] .mini-action,
  body[data-page] .primary-action,
  body[data-page] .filter-chip {
    min-height: 28px;
    font-size: 12px;
  }

  body[data-page] .ops-table {
    font-size: 12px;
  }

  body[data-page] .ops-table th,
  body[data-page] .chart-axis {
    font-size: 12px;
  }
}

/* Keep one navigation identity at the supported 1366 command-room width. */
@container console-screen (min-width: 1320px) and (max-width: 1500px) {
  body[data-page] .topbar {
    gap: 10px;
    padding-right: 10px;
    padding-left: 10px;
  }

  body[data-page] .brand {
    gap: 7px;
    min-width: 126px !important;
  }

  body[data-page] .brand-name {
    display: inline !important;
    font-size: 12px;
    letter-spacing: .05em;
  }

  body[data-page] .main-nav {
    flex: 0 1 500px;
    min-width: 492px !important;
  }

  body[data-page] .nav-item {
    padding-right: 7px;
    padding-left: 7px;
    font-size: 12px;
  }

  body[data-page] .header-title {
    left: 66%;
    z-index: 0;
    display: block !important;
    pointer-events: none;
  }

  body[data-page] .header-title::before,
  body[data-page] .header-title::after {
    content: none;
  }

  body[data-page] .header-title h1 {
    font-size: 16px;
    letter-spacing: .03em;
  }

  body[data-page] .topbar-meta {
    min-width: 222px;
    gap: 7px;
  }

  body[data-page] .topbar-meta .weather,
  body[data-page] .clock-block span,
  body[data-page] .topbar-meta .meta-divider {
    display: none;
  }
}

@container console-screen (max-height: 820px) {
  body[data-page] .detail-shell {
    grid-template-rows: 58px 76px minmax(0, 1fr);
  }

  body[data-page] .ops-panel-head {
    min-height: 40px;
  }

  body[data-page] .ops-panel-head h2 {
    font-size: 16px;
  }

  body[data-page] .ops-panel-body {
    height: calc(100% - 40px);
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page] *,
  body[data-page] *::before,
  body[data-page] *::after {
    scroll-behavior: auto !important;
  }
}