/*
 * vOCN OCC Dashboard Clean Layer
 * Final dashboard-only layout pass. This file intentionally scopes itself to
 * the OCC dashboard so legacy tab styles remain available as fallbacks.
 */

.vocn-occ-shell.vocn-occ-overlay-active {
  --occ-clean-bg: #07111f;
  --occ-clean-panel: rgba(9, 20, 36, .88);
  --occ-clean-panel-soft: rgba(12, 27, 47, .74);
  --occ-clean-line: rgba(137, 166, 202, .18);
  --occ-clean-line-strong: rgba(137, 166, 202, .28);
  --occ-clean-text: #f6fbff;
  --occ-clean-muted: #9eb1c8;
  --occ-clean-blue: #54b7ff;
  --occ-clean-green: #4ade80;
  --occ-clean-amber: #fbbf24;
  --occ-clean-red: #fb7185;
  background:
    radial-gradient(circle at 12% 0%, rgba(84, 183, 255, .16), transparent 30%),
    linear-gradient(180deg, #06101d 0%, #07111f 58%, #050b14 100%) !important;
  color: var(--occ-clean-text);
}

.vocn-occ-shell.vocn-occ-overlay-active .vocn-occ-topbar.vocn-occ-topbar-compact {
  border-radius: 0 0 8px 8px !important;
  border-color: var(--occ-clean-line) !important;
  background: rgba(5, 13, 25, .96) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .34) !important;
}

.vocn-occ-shell.vocn-occ-overlay-active .vocn-occ-nav-primary a,
.vocn-occ-shell.vocn-occ-overlay-active .vocn-occ-more > summary,
.vocn-occ-shell.vocn-occ-overlay-active .vocn-occ-notifications summary,
.vocn-occ-shell.vocn-occ-overlay-active .vocn-occ-presence-toggle {
  border-radius: 8px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.vocn-occ-shell.vocn-occ-overlay-active #occ-dashboard {
  display: grid;
  gap: 10px;
}

.vocn-occ-shell.vocn-occ-overlay-active .vocn-occ-overlay-strip {
  order: 1;
  grid-template-columns: 1.25fr repeat(5, minmax(94px, 1fr));
  margin: 0;
}

.vocn-occ-shell.vocn-occ-overlay-active .vocn-occ-overlay-command {
  order: 2;
  margin: 0;
}

.vocn-occ-shell.vocn-occ-overlay-active .vocn-ops-dashboard-v165 {
  order: 3;
  display: grid !important;
  grid-template-columns: minmax(340px, 1.25fr) minmax(320px, 1fr) minmax(320px, 1fr) minmax(300px, .9fr) !important;
  grid-template-areas:
    "flight flight feed alerts"
    "live queue base system"
    "footer footer footer footer" !important;
  gap: 10px !important;
  padding: 0 !important;
  min-height: auto !important;
}

.vocn-occ-shell.vocn-occ-overlay-active .vocn-ops-flight-overview { grid-area: flight !important; }
.vocn-occ-shell.vocn-occ-overlay-active .vocn-ops-feed { grid-area: feed !important; }
.vocn-occ-shell.vocn-occ-overlay-active .vocn-ops-base-weather { grid-area: base !important; }
.vocn-occ-shell.vocn-occ-overlay-active .vocn-ops-live-flights { grid-area: live !important; }
.vocn-occ-shell.vocn-occ-overlay-active .vocn-ops-queue { grid-area: queue !important; }
.vocn-occ-shell.vocn-occ-overlay-active .vocn-ops-alerts { grid-area: alerts !important; }
.vocn-occ-shell.vocn-occ-overlay-active .vocn-ops-system { grid-area: system !important; }
.vocn-occ-shell.vocn-occ-overlay-active .vocn-ops-footer { grid-area: footer !important; }

.vocn-occ-shell.vocn-occ-overlay-active .vocn-ops-card,
.vocn-occ-shell.vocn-occ-overlay-active .vocn-occ-overlay-command,
.vocn-occ-shell.vocn-occ-overlay-active .vocn-occ-overlay-tile {
  border-radius: 8px !important;
  border: 1px solid var(--occ-clean-line) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 42%),
    var(--occ-clean-panel) !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .22) !important;
}

.vocn-occ-shell.vocn-occ-overlay-active .vocn-ops-card {
  padding: 12px !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.vocn-occ-shell.vocn-occ-overlay-active .vocn-ops-card-head {
  min-height: 28px;
  margin: 0 0 9px !important;
  padding: 0 !important;
}

.vocn-occ-shell.vocn-occ-overlay-active .vocn-ops-card-head h3,
.vocn-occ-shell.vocn-occ-overlay-active .vocn-occ-overlay-command-head h3 {
  margin: 0 !important;
  color: var(--occ-clean-text) !important;
  font-size: 15px !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
}

.vocn-occ-shell.vocn-occ-overlay-active .vocn-ops-card-head a,
.vocn-occ-shell.vocn-occ-overlay-active .vocn-ops-card-cta {
  color: #bee6ff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

.vocn-occ-shell.vocn-occ-overlay-active .vocn-ops-flight-overview {
  display: grid;
  align-content: start;
  gap: 10px;
}

.vocn-occ-shell.vocn-occ-overlay-active .vocn-ops-flight-ident {
  margin: 0 !important;
}

.vocn-occ-shell.vocn-occ-overlay-active .vocn-ops-flight-ident strong {
  font-size: clamp(30px, 3vw, 48px) !important;
  line-height: .95 !important;
  letter-spacing: 0 !important;
}

.vocn-occ-shell.vocn-occ-overlay-active .vocn-ops-flight-ident span {
  color: var(--occ-clean-muted) !important;
  font-size: 15px !important;
}

.vocn-occ-shell.vocn-occ-overlay-active .vocn-ops-route {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 !important;
}

.vocn-occ-shell.vocn-occ-overlay-active .vocn-ops-route b {
  font-size: clamp(26px, 2.3vw, 38px) !important;
  letter-spacing: 0 !important;
}

.vocn-occ-shell.vocn-occ-overlay-active .vocn-ops-route span {
  color: var(--occ-clean-muted) !important;
  font-size: 13px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vocn-occ-shell.vocn-occ-overlay-active .vocn-ops-route i {
  width: 42px !important;
  color: var(--occ-clean-blue) !important;
  font-size: 28px !important;
  text-align: center !important;
}

.vocn-occ-shell.vocn-occ-overlay-active .vocn-ops-metric-row {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 0 !important;
}

.vocn-occ-shell.vocn-occ-overlay-active .vocn-ops-metric-row > div {
  min-width: 0 !important;
  border: 1px solid var(--occ-clean-line) !important;
  border-radius: 8px !important;
  background: var(--occ-clean-panel-soft) !important;
  padding: 10px !important;
}

.vocn-occ-shell.vocn-occ-overlay-active .vocn-ops-metric-row small,
.vocn-occ-shell.vocn-occ-overlay-active .vocn-occ-overlay-tile span {
  color: var(--occ-clean-muted) !important;
  font-size: 10px !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}

.vocn-occ-shell.vocn-occ-overlay-active .vocn-ops-metric-row b {
  color: var(--occ-clean-text) !important;
  font-size: 18px !important;
  line-height: 1.2 !important;
}

.vocn-occ-shell.vocn-occ-overlay-active .vocn-ops-progress {
  height: 8px !important;
  border-radius: 99px !important;
  background: rgba(255, 255, 255, .08) !important;
}

.vocn-occ-shell.vocn-occ-overlay-active .vocn-ops-progress span {
  border-radius: 99px !important;
  background: linear-gradient(90deg, var(--occ-clean-green), var(--occ-clean-blue)) !important;
}

.vocn-occ-shell.vocn-occ-overlay-active .vocn-ops-feed-list,
.vocn-occ-shell.vocn-occ-overlay-active .vocn-ops-live-list,
.vocn-occ-shell.vocn-occ-overlay-active .vocn-ops-status-list,
.vocn-occ-shell.vocn-occ-overlay-active .vocn-ops-alert-list,
.vocn-occ-shell.vocn-occ-overlay-active .vocn-ops-system-list {
  display: grid !important;
  gap: 7px !important;
}

.vocn-occ-shell.vocn-occ-overlay-active .vocn-ops-feed-list a,
.vocn-occ-shell.vocn-occ-overlay-active .vocn-ops-flight-row,
.vocn-occ-shell.vocn-occ-overlay-active .vocn-ops-status-list a,
.vocn-occ-shell.vocn-occ-overlay-active .vocn-ops-alert-list a,
.vocn-occ-shell.vocn-occ-overlay-active .vocn-ops-system-list div {
  min-height: 42px !important;
  border: 1px solid var(--occ-clean-line) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, .032) !important;
  padding: 9px 10px !important;
}

.vocn-occ-shell.vocn-occ-overlay-active .vocn-ops-status-list a {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
}

.vocn-occ-shell.vocn-occ-overlay-active .vocn-ops-status-list span,
.vocn-occ-shell.vocn-occ-overlay-active .vocn-ops-system-list span,
.vocn-occ-shell.vocn-occ-overlay-active .vocn-ops-alert-list strong,
.vocn-occ-shell.vocn-occ-overlay-active .vocn-ops-feed-list strong,
.vocn-occ-shell.vocn-occ-overlay-active .vocn-ops-flight-row strong {
  color: var(--occ-clean-text) !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}

.vocn-occ-shell.vocn-occ-overlay-active .vocn-ops-status-list b.warn,
.vocn-occ-shell.vocn-occ-overlay-active .vocn-ops-alert-list i.warn {
  color: var(--occ-clean-amber) !important;
}

.vocn-occ-shell.vocn-occ-overlay-active .vocn-ops-status-list b.ok,
.vocn-occ-shell.vocn-occ-overlay-active .vocn-ops-system-list i.ok {
  color: var(--occ-clean-green) !important;
}

.vocn-occ-shell.vocn-occ-overlay-active .vocn-ops-base-weather-stack {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.vocn-occ-shell.vocn-occ-overlay-active .vocn-ops-base-wx {
  border-radius: 8px !important;
  border-color: var(--occ-clean-line) !important;
  background: rgba(255, 255, 255, .032) !important;
  padding: 10px !important;
}

.vocn-occ-shell.vocn-occ-overlay-active .vocn-ops-base-wx pre {
  max-height: 74px !important;
  border-radius: 8px !important;
  background: rgba(2, 8, 16, .66) !important;
}

.vocn-occ-shell.vocn-occ-overlay-active .vocn-ops-footer {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto !important;
  gap: 8px !important;
  border-radius: 8px !important;
  border: 1px solid var(--occ-clean-line) !important;
  background: rgba(5, 13, 25, .82) !important;
  padding: 10px 12px !important;
  align-items: center !important;
}

.vocn-occ-shell.vocn-occ-overlay-active .vocn-ops-footer span {
  color: var(--occ-clean-muted) !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
}

.vocn-occ-shell.vocn-occ-overlay-active .vocn-ops-footer b,
.vocn-occ-shell.vocn-occ-overlay-active .vocn-ops-footer strong {
  color: var(--occ-clean-text) !important;
  font-size: 12px !important;
}

@media (max-width: 1360px) {
  .vocn-occ-shell.vocn-occ-overlay-active .vocn-ops-dashboard-v165 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-areas:
      "flight flight"
      "alerts queue"
      "live feed"
      "base system"
      "footer footer" !important;
  }
}

@media (max-width: 760px) {
  .vocn-occ-shell.vocn-occ-overlay-active .vocn-occ-overlay-strip,
  .vocn-occ-shell.vocn-occ-overlay-active .vocn-ops-dashboard-v165,
  .vocn-occ-shell.vocn-occ-overlay-active .vocn-ops-metric-row,
  .vocn-occ-shell.vocn-occ-overlay-active .vocn-ops-base-weather-stack,
  .vocn-occ-shell.vocn-occ-overlay-active .vocn-ops-footer {
    grid-template-columns: 1fr !important;
  }

  .vocn-occ-shell.vocn-occ-overlay-active .vocn-ops-dashboard-v165 {
    grid-template-areas:
      "flight"
      "alerts"
      "queue"
      "live"
      "feed"
      "base"
      "system"
      "footer" !important;
  }

  .vocn-occ-shell.vocn-occ-overlay-active .vocn-ops-route {
    grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr) !important;
    gap: 7px !important;
  }

  .vocn-occ-shell.vocn-occ-overlay-active .vocn-ops-route b {
    font-size: 27px !important;
  }
}