/* Operational hierarchy: generous primary canvas, compact secondary information. */
.main { min-width: 0; }
.panel, .panel-header > div, .metric-card { min-width: 0; }
.panel-header h2 { line-height: 1.15; }
.panel-header p { line-height: 1.5; }
.view.active { scrollbar-width: thin; scrollbar-color: #285664 #071016; }
.topbar { gap: 20px; }
.topbar h1 { font-size: 28px; line-height: 1.15; }
.topbar-actions { flex-wrap: wrap; }

#dashboard.view.active {
  display: grid !important; grid-template-columns: minmax(0, 2.2fr) minmax(270px, 1fr) !important;
  grid-template-rows: max-content max-content max-content !important; align-content: start !important;
  gap: 18px !important; overflow: auto !important; padding-bottom: 18px;
}
#dashboard .status-grid { grid-column: 1 / -1; display: grid !important; grid-template-columns: 1.4fr 1fr 1fr 1fr !important; gap: 12px; height: auto !important; }
#dashboard .metric-card { min-height: 102px !important; height: auto !important; padding: 15px 18px !important; clip-path: none; border-radius: 4px; }
#dashboard .metric-card strong { font-size: 26px !important; line-height: 1.2; }
#dashboard .metric-card small { font-size: 11px; white-space: normal; line-height: 1.4; }
#dashboard .dashboard-layout { grid-column: 1 / -1; display: grid !important; grid-template-columns: minmax(0, 3fr) minmax(270px, 1fr) !important; grid-template-rows: auto !important; gap: 18px !important; min-height: 0 !important; height: auto !important; overflow: visible !important; align-items: start; }
#dashboard .map-panel, #dashboard .decision-panel, #dashboard .event-panel { padding: 16px !important; height: auto !important; max-height: none !important; min-height: 0 !important; overflow: visible !important; clip-path: none; background: #071218; border: 0; border-top: 1px solid #316572; border-radius: 0; }
#dashboard .map-panel { display: grid !important; grid-template-rows: auto auto auto !important; gap: 12px; }
#dashboard .dashboard-layout { grid-row: 2 !important; }
#dashboard .dashboard-layout > .map-panel { grid-column: 1 !important; grid-row: 1 !important; }
#dashboard .dashboard-layout > .decision-panel { grid-column: 2 !important; grid-row: 1 !important; }
#dashboard .event-panel { grid-template-columns: minmax(0, 1fr) !important; }
#dashboard .event-panel .panel-header, #dashboard .event-panel .event-log, #dashboard .event-panel .memory-footer { grid-column: 1 !important; grid-row: auto !important; }
#dashboard .panel-header { min-height: 0 !important; margin: 0 !important; padding: 0 0 12px; gap: 12px; }
#dashboard .panel-header h2 { font-size: 19px; }
#dashboard .panel-header p { font-size: 12px; }
#dashboard .hud-ribbon { display: flex !important; justify-content: space-between; gap: 8px; padding: 0; height: auto !important; }
#dashboard .hud-ribbon span { padding: 5px 0; border: 0; background: none; font-size: 10px; color: #89b2bc; }
#dashboard .greenhouse-map { display: grid !important; grid-template-columns: minmax(105px, .85fr) minmax(120px, 1fr) minmax(210px, 1.8fr) minmax(120px, 1fr) !important; grid-template-rows: auto !important; gap: 10px !important; padding: 12px !important; min-height: 0 !important; height: auto !important; overflow: visible !important; background: #041017 !important; border: 1px solid #254952; border-radius: 4px; }
#dashboard .greenhouse-map::before, #dashboard .greenhouse-map::after { display: none !important; }
#dashboard .zone-column, #dashboard .zone-column.core, #dashboard .zone-column:first-child, #dashboard .zone-column:last-child { display: flex !important; flex-direction: column; gap: 12px; grid-column: auto !important; min-height: 0 !important; height: auto !important; padding: 0 !important; overflow: visible !important; background: transparent !important; border: 0 !important; border-right: 1px dashed #20424a !important; border-radius: 0 !important; }
#dashboard .zone-column:last-child { border-right: 0 !important; }
#dashboard .zone-column.core { background: #0b231f55 !important; }
#dashboard .zone-label { display: block !important; min-height: 145px !important; height: auto !important; padding: 8px 8px 10px !important; border: 0; border-top: 3px solid #386e7a; background: none; border-radius: 0; }
#dashboard .core .zone-label { border-top-color: #57d5a1; }
#dashboard .zone-label strong { font-size: 16px !important; }
#dashboard .zone-label > span { display: block; font-size: 11px !important; line-height: 1.4; margin: 6px 0; }
#dashboard .zone-priority { display: block; font: normal 10px var(--font-data); color: #7ee3b7; margin-top: 5px; }
#dashboard .zone-readout { display: flex !important; flex-wrap: wrap; gap: 5px !important; margin-top: 9px; }
#dashboard .zone-readout b { font-size: 11px !important; padding: 5px !important; min-width: 0; white-space: nowrap; border: 0; background: #102930; }
#dashboard .sensor-stack, #dashboard .zone-column:first-child .sensor-stack { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; align-content: start !important; gap: 8px !important; padding: 0 7px 0 0; overflow: visible !important; }
#dashboard .zone-column.core .sensor-stack { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
#dashboard .sensor-dot { display: flex !important; flex-direction: column; gap: 6px; min-height: 0 !important; height: auto !important; padding: 10px !important; clip-path: none; border-radius: 4px; background: #0b1d25 !important; border: 1px solid #234c58; }
#dashboard .sensor-topline { display: flex; align-items: center; justify-content: space-between; gap: 5px; }
#dashboard .sensor-topline strong { font-size: 13px !important; }
#dashboard .sensor-topline em { font-size: 9px !important; padding: 2px 4px; }
#dashboard .sensor-reading { display: block !important; line-height: 1.25; }
#dashboard .sensor-reading b { font-size: 14px; color: #e1f5f8; font-weight: 600; white-space: nowrap; }
#dashboard .sensor-reading small { display: block; font-size: 9px !important; color: #93adb6; }
#dashboard .sensor-dot > small { font-size: 9px !important; line-height: 1.4; color: #97b7be; }
#dashboard .zone-artifacts { margin-top: auto; padding: 10px 6px 0 0; display: flex; gap: 5px; flex-wrap: wrap; }
#dashboard .zone-artifacts span { min-height: 0; font-size: 10px; line-height: 1.4; padding: 4px 6px; }
#dashboard .decision-panel { display: flex !important; flex-direction: column; gap: 14px; }
#dashboard .decision-box { padding: 14px; height: auto !important; min-height: 0 !important; clip-path: none; background: #1b201a; border-left: 2px solid #e5b35d; }
#dashboard .decision-box p { font-size: 12px; line-height: 1.6; }
#dashboard .actuator-grid { display: grid; gap: 8px; }
#dashboard .actuator { padding: 12px; min-height: 58px; gap: 8px; clip-path: none; }
#dashboard .actuator strong, #dashboard .actuator span { display: block; line-height: 1.4; }
#dashboard .actuator strong { font-size: 13px; }
#dashboard .actuator span { font-size: 11px; margin-top: 4px; }
#dashboard .decision-microgrid { position: static !important; display: grid !important; grid-template-columns: 1fr !important; height: auto !important; gap: 0; }
#dashboard .decision-microgrid > div { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border: 0; border-bottom: 1px solid #203943; background: transparent; clip-path: none; }
#dashboard .decision-microgrid strong { font-size: 14px; }
#dashboard .event-panel { grid-column: 1 !important; grid-row: auto !important; display: grid !important; grid-template-rows: auto auto auto !important; gap: 12px; }
#dashboard .event-log { display: grid !important; grid-template-columns: 1fr !important; max-height: 260px !important; height: auto !important; min-height: 80px !important; overflow: auto !important; }
#dashboard .event-log > * { min-height: 0 !important; padding: 12px; }
#dashboard .memory-footer { position: static; display: flex; flex-wrap: wrap; gap: 8px; }
#dashboard .dashboard-telemetry { grid-column: 2 !important; grid-row: auto !important; display: flex !important; flex-direction: column; gap: 0; height: auto !important; min-height: 0 !important; }
#dashboard .telemetry-card { min-height: 0 !important; padding: 14px !important; clip-path: none; border: 0; border-bottom: 1px solid #21414a; background: transparent; }
#dashboard .telemetry-card strong { font-size: 15px !important; }
#dashboard .telemetry-card p { display: block !important; font-size: 11px; line-height: 1.5; }
#dashboard .zone-label { min-height: 112px !important; }
#dashboard .sensor-dot { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100% !important; max-width: none !important; gap: 6px; }
#dashboard .sensor-topline, #dashboard .sensor-dot > small { grid-column: 1 / -1; }
#dashboard .sensor-reading b { font-size: 12px; }
#dashboard .sensor-reading small { font-size: 8px !important; }
#dashboard .decision-microgrid > div { min-height: 0 !important; height: auto !important; }
#dashboard .event-panel { grid-row: 3 !important; }
#dashboard .dashboard-telemetry { grid-row: 3 !important; overflow: visible !important; }
#dashboard .zone-artifacts { margin-top: 0; }

/* Unequal columns carry the same hierarchy into the other operational views. */
.view:not(#voice):not(#sonic):not(#market) > .split-layout { grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); }
@media (max-width: 1200px) {
  #dashboard .dashboard-layout { grid-template-columns: minmax(0, 1fr) !important; }
  #dashboard .dashboard-layout > .decision-panel { grid-column: 1 !important; grid-row: 2 !important; }
  #dashboard .decision-panel { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
  #dashboard .decision-panel .panel-header { grid-column: 1 / -1; }
  #dashboard .decision-microgrid { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  body { min-width: 0 !important; height: auto !important; overflow: auto !important; }
  .app-shell { display: block !important; min-width: 0 !important; height: auto !important; }
  .sidebar { position: relative !important; width: 100% !important; height: auto !important; min-height: 0 !important; padding: 12px; }
  .sidebar-panel, .sidebar-footer { display: none !important; }
  .nav-tabs { display: flex; overflow: auto; }
  .nav-button { flex: 0 0 auto; }
  .main { display: block !important; width: 100% !important; min-width: 0 !important; height: auto !important; padding: 10px !important; overflow: visible !important; }
  .topbar { display: flex !important; flex-direction: column; align-items: stretch; padding: 14px; }
  .topbar h1 { font-size: 22px !important; }
  .topbar-actions { display: flex !important; min-width: 0; flex-wrap: wrap; padding: 0; border: 0; }
  .topbar-actions .field { flex: 1 0 100%; }
  #dashboard.view.active { display: flex !important; flex-direction: column; overflow: visible !important; margin-top: 14px; }
  #dashboard .status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #dashboard .metric-card { padding: 12px !important; }
  #dashboard .metric-card strong { font-size: 22px !important; }
  #dashboard .map-panel { padding: 12px !important; }
  #dashboard .map-panel .panel-header { flex-wrap: wrap; }
  #dashboard .greenhouse-map { grid-template-columns: minmax(0, 1fr) !important; }
  #dashboard .zone-column { border-right: 0 !important; }
  #dashboard .zone-label { min-height: 0 !important; }
  #dashboard .sensor-stack, #dashboard .zone-column:first-child .sensor-stack { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #dashboard .zone-artifacts { margin: 0; }
  #dashboard .decision-panel { display: flex !important; }
  #dashboard .hud-ribbon span { font-size: 8px; }
}