/* A viewport-sized command station, with detail pages instead of stacked panels. */
body:has(#dashboard.active) { height: 100dvh !important; overflow: hidden !important; }
body:has(#dashboard.active) .app-shell { height: 100dvh !important; overflow: hidden !important; }
body:has(#dashboard.active) .main { display: grid !important; grid-template-rows: auto minmax(0, 1fr) !important; height: 100dvh !important; min-height: 0 !important; overflow: hidden !important; }
#dashboard.view.active { display: grid !important; height: 100% !important; min-height: 0 !important; grid-template-columns: minmax(0,1fr) !important; grid-template-rows: auto minmax(0,1fr) !important; gap: 10px !important; overflow: hidden !important; padding: 0 !important; }
#dashboard .metric-card { min-height: 62px !important; padding: 8px 12px !important; }
#dashboard .metric-card strong { font-size: 22px !important; }
#dashboard .metric-card small { display: none; }
#dashboard .dashboard-layout { display: grid !important; height: 100% !important; min-height: 0 !important; grid-template-rows: minmax(0,1fr) !important; overflow: hidden !important; }
#dashboard .dashboard-layout > .decision-panel, #dashboard > .event-panel, #dashboard > .dashboard-telemetry { display: none !important; }
#dashboard .dashboard-layout > .map-panel { height: 100% !important; min-height: 0 !important; overflow: hidden !important; grid-template-rows: auto minmax(0,1fr) !important; padding: 10px !important; gap: 6px !important; }
#dashboard .map-panel .panel-header { padding-bottom: 6px; }
#dashboard .map-panel .panel-header h2 { font-size: 16px; }
#dashboard .map-panel .panel-header p { margin: 2px 0 0; font-size: 11px; }
#dashboard #greenhouseMap { height: 100% !important; min-height: 0 !important; overflow: hidden !important; grid-template-columns: minmax(0,1fr) 300px !important; grid-template-rows: auto auto 30px minmax(0,1fr) auto auto auto !important; gap: 5px 12px !important; }
.lm-toolbar { padding: 0; gap: 10px; }
.lm-mobile-navigation { display: none; }
.lm-views button { padding: 7px 12px; }
.lm-layers { gap: 12px; font-size: 11px; }
.lm-layers button { padding: 5px 8px; }
.lm-drawing { position: relative; grid-row: 3 / 5; height: 100%; max-height: none; min-height: 0; overflow: hidden; }
.lm-plan, .lm-three { position: absolute; inset: 0; min-width: 0; min-height: 0; }
.lm-plan[hidden], .lm-three[hidden] { display: none !important; }
.lm-plan svg { height: 100%; width: 100%; }
.lm-three canvas { display: block; touch-action: none; cursor: grab; }
.lm-three canvas:active { cursor: grabbing; }
.lm-three-tools { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); display: flex; gap: 4px; }
.lm-three-tools button { width: 32px; height: 32px; padding: 0; background: #09232eed; border: 1px solid #306771; color: #a6efdf; font: 20px sans-serif; cursor: pointer; }
.lm-three-tools button[aria-pressed=true] { color: #ffca73; border-color: #ffca73; }
.lm-dock-tabs { grid-column: 2; grid-row: 3; display: flex; gap: 2px; }
.lm-dock-tabs button { flex: 1; min-width: 0; padding: 5px 2px; font: 12px var(--font-body,sans-serif); color: #9ebdc6; border: 0; border-bottom: 2px solid transparent; background: #0b2028; cursor: pointer; }
.lm-dock-tabs button[aria-pressed=true] { color: #96f0d6; border-color: #96f0d6; }
.lm-inspector { grid-row: 4 / 7; height: 100%; max-height: none; min-height: 0; overflow: hidden; padding: 12px; }
.lm-inspector p { margin: 7px 0; font-size: 12px; line-height: 1.4; }
.lm-inspector h3 { margin: 0 0 12px; font-size: 17px; }
.lm-inspector .lm-picker { margin-bottom: 10px; }
.lm-inspector .lm-picker select { min-height: 32px; height: 34px; padding: 5px; margin-top: 4px; }
.lm-inspector dl { margin: 10px 0; gap: 10px; }
.lm-inspector dd { font-size: 15px; overflow-wrap: anywhere; }
.lm-inspector-heading { gap: 5px; }
.lm-commands > strong, .lm-evaluation > strong { margin-top: 10px; }
.lm-event-pager { display: flex; gap: 16px; align-items: center; margin-top: 14px; }
.lm-event-pager button { background: #12353e; border: 1px solid #3e737b; color: #d7faf2; width: 32px; height: 32px; cursor: pointer; }
.lm-event-pager button:disabled { opacity: .35; }
.lm-legend { grid-row: 5; padding: 4px 0; font-size: 10px; }
.lm-consensus { grid-row: 6; padding: 6px 0; gap: 10px; }
.lm-consensus strong { margin-top: 3px; }
.lm-consensus small { display: inline; margin-left: 5px; }
.lm-source-note { grid-row: 7; font-size: 9px; }
#dashboard #greenhouseMap.lm-expanded { grid-template-rows: auto auto 30px minmax(0,1fr) auto auto auto !important; }
@media (max-height: 800px) and (min-width: 761px) {
  body:has(#dashboard.active) .topbar { padding: 10px !important; min-height: 0 !important; }
  body:has(#dashboard.active) .topbar h1 { font-size: 22px !important; }
  body:has(#dashboard.active) .sidebar { padding: 8px; }
  body:has(#dashboard.active) .sidebar-panel { display: none; }
  body:has(#dashboard.active) .nav-tabs { gap: 4px; }
  body:has(#dashboard.active) .nav-button { min-height: 30px; padding: 7px 10px; }
  .lm-inspector { padding: 8px; }
  .lm-inspector p { font-size: 11px; }
  .lm-inspector dl { gap: 6px; margin: 6px 0; }
  .lm-inspector .lm-picker { margin-bottom: 6px; }
  .lm-inspector dd { margin-top: 2px; }
}
@media (max-width: 760px) {
  body:has(#dashboard.active) .sidebar { display: none !important; }
  body:has(#dashboard.active) .main { padding: 6px !important; }
  body:has(#dashboard.active) .topbar { padding: 6px !important; gap: 4px; }
  body:has(#dashboard.active) .topbar h1 { font-size: 16px !important; }
  body:has(#dashboard.active) .topbar-actions { display: none !important; }
  #dashboard.view.active { margin: 0; gap: 4px !important; }
  #dashboard .status-grid { display: none !important; }
  #dashboard .dashboard-layout { grid-row: 1 / -1 !important; }
  #dashboard .map-panel .panel-header { display: none !important; }
  #dashboard .dashboard-layout > .map-panel { grid-template-rows: minmax(0,1fr) !important; }
  #dashboard #greenhouseMap, #dashboard #greenhouseMap.lm-expanded { grid-template-columns: minmax(0,1fr) !important; grid-template-rows: auto auto minmax(130px,1fr) 30px 260px !important; gap: 5px !important; overflow: hidden !important; }
  .lm-toolbar { flex-wrap: nowrap; }
  .lm-toolbar a, .lm-toolbar > label, .lm-layers > span { display: none; }
  .lm-views { flex: 1; }
  .lm-views button { flex: 1; padding: 6px; }
  .lm-mobile-navigation { display: block; width: 85px; min-height: 30px; height: 30px; font-size: 11px; padding: 3px; }
  .lm-layers { gap: 6px; font-size: 10px; }
  .lm-drawing { grid-row: 3; }
  .lm-dock-tabs { grid-column: 1; grid-row: 4; }
  .lm-inspector { grid-column: 1; grid-row: 5; padding: 8px; }
  .lm-inspector dl { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; margin: 6px 0; }
  .lm-inspector dd { font-size: 12px; }
  .lm-inspector p { font-size: 11px; margin: 5px 0; }
  .lm-inspector-heading { flex-direction: row; align-items: center; }
  .lm-inspector-heading strong { font-size: 14px; }
  .lm-legend, .lm-consensus, .lm-source-note { display: none; }
}