/* Shared operational workspace. Loaded after each page's component styles. */
.workspace {
  --accent: #83c9a9;
  --accent-strong: #b2e7ce;
  --muted: #a7bbb3;
  --radius: 10px;
  --shadow: 0 4px 20px #00000020;
  background: #0b1914;
  font-size: 14px;
}
.workspace .app-shell { width: 100%; max-width: none; margin: 0; padding: 0 24px 24px; }
.workspace-header { height: 62px; margin: 0 -24px; padding: 0 20px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; background: #101e19; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 900; }
.workspace-brand { display: flex; align-items: center; gap: 10px; width: fit-content; }
.workspace-brand strong { font-size: 1.05rem; letter-spacing: -0.04em; }
.workspace-nav { display: flex; align-items: stretch; gap: 6px; height: 100%; }
.workspace-nav-link { display: inline-flex; align-items: center; white-space: nowrap; padding: 0 12px; font-size: 12px; color: var(--muted); border-bottom: 2px solid transparent; }
.workspace-nav-link:hover { color: var(--text); background: #ffffff06; }
.workspace-nav-link.is-active { color: var(--accent-strong); border-bottom-color: var(--accent); }
.workspace-header .session-badge { justify-self: end; border: 0; padding: 0; box-shadow: none; background: none; gap: 14px; }
.workspace-header .session-badge strong { font-size: 12px; }
.workspace-header .session-badge .meta { display: none; }
.workspace-header .session-badge button { min-height: 36px; padding: 8px 12px; font-size: 12px; background: transparent; }
.workspace-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; }
.workspace .page-title { font-size: 24px; line-height: 1.25; letter-spacing: -0.04em; margin: 0; }
.workspace .page-subtitle { font-size: 12px; line-height: 1.6; margin: 5px 0 0; max-width: 75ch; }
.workspace .panel { background: #10221b; border: 1px solid #294036; border-radius: 10px; padding: 18px; box-shadow: none; min-width: 0; }
.workspace .panel-header { margin-bottom: 12px; gap: 12px; }
.workspace .panel-header h2 { font-size: 15px; letter-spacing: -0.025em; }
.workspace h3 { font-size: 14px; }
.workspace .meta, .workspace .settings-helper { font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.workspace button { min-height: 38px; padding: 9px 14px; border-radius: 7px; font-size: 12px; font-weight: 700; box-shadow: none; background: var(--accent); }
.workspace button.ghost, .workspace button.secondary { background: #ffffff06; }
.workspace input, .workspace select, .workspace textarea { border-radius: 7px; min-height: 38px; padding: 9px 11px; font-size: 12px; background: #0b1813; backdrop-filter: none; }
.workspace input[type="checkbox"] { min-height: 0; accent-color: var(--accent); }
.workspace input[type="range"] { padding: 0; min-height: 20px; accent-color: var(--accent); }
.workspace .field > span { font-size: 11px; font-weight: 600; color: var(--muted); }
.workspace .controls-grid, .workspace .row-actions { gap: 10px; }
.workspace .nav-link { min-height: 36px; padding: 9px 12px; font-size: 12px; border-radius: 7px; background: #ffffff06; }
.workspace .status-chip { min-height: 26px; padding: 5px 9px; font-size: 10px; background: #1d382b; color: var(--accent-strong); border-color: #345640; }
.workspace .badge { font-size: 10px; min-height: 23px; padding: 4px 8px; }
.workspace details { border-radius: 8px; background: #ffffff03; }
.workspace summary { font-size: 12px; cursor: pointer; }
.workspace .raw { border-radius: 8px; font-size: 12px; }
.workspace .error { margin-bottom: 14px; border-radius: 8px; font-size: 13px; }
/* Maps retain the largest region; controls stay in a narrow rail. */
.workspace .history-grid, .workspace .routes-grid { grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; }
.workspace .history-control-panel, .workspace .route-builder { position: sticky; top: 78px; max-height: calc(100dvh - 94px); overflow: auto; scrollbar-width: thin; gap: 14px; }
.workspace .history-form, .workspace .route-form { gap: 12px; }
.workspace .history-actions { gap: 8px; }
.workspace .history-actions > * { flex-basis: 100%; }
.workspace .history-advanced { padding: 12px; }
.workspace .history-advanced .two-up { grid-template-columns: 1fr; }
.workspace .history-results-panel, .workspace .route-map-panel { padding: 12px; gap: 12px; }
.workspace .history-results-panel > .panel-header, .workspace .route-map-panel > .panel-header { margin: 2px 4px 0; }
.workspace .history-map-wrap { min-height: max(380px, calc(100dvh - 300px)); border-radius: 7px; }
.workspace .route-map-wrap, .workspace .route-map { height: max(400px, calc(100dvh - 300px)); min-height: 0; border-radius: 7px; }
.workspace .history-map-empty { inset: auto 16px 16px; padding: 12px; border-radius: 7px; background: #10221bea; backdrop-filter: none; font-size: 12px; }
.workspace .history-metrics-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: 8px; }
.workspace .history-metric { min-height: 74px; padding: 12px; border: 0; border-right: 1px solid var(--line); border-radius: 0; background: none; }
.workspace .history-metric:last-child { border-right: 0; }
.workspace .history-metric span, .workspace .route-metrics span { font-size: 9px; letter-spacing: .04em; margin-bottom: 7px; }
.workspace .history-metric strong { font-size: 13px; }
.workspace .history-playback-panel, .workspace .history-quality-panel { border-radius: 8px; padding: 14px; background: #0c1c16; }
.workspace .history-quality-card, .workspace .history-point-card { border-radius: 7px; padding: 10px; background: none; }
.workspace .history-point-list { max-height: 260px; }
.workspace .history-point-card p { font-size: 12px; }
.workspace .route-stop-form { gap: 7px; }
.workspace .route-stop-form--coords { grid-template-columns: 1fr 1fr; }
.workspace .route-stop-form--coords button { grid-column: 1 / -1; }
.workspace .route-stop-item { padding: 10px; border-radius: 7px; font-size: 12px; }
.workspace .route-stop-actions { flex-wrap: wrap; }
.workspace .route-metrics { gap: 0; border: 1px solid var(--line); border-radius: 8px; }
.workspace .route-metrics article { padding: 12px; border: 0; border-right: 1px solid var(--line); border-radius: 0; background: none; }
.workspace .route-metrics article:last-child { border: 0; }
.workspace .route-metrics strong { font-size: 18px; }
/* Events become a readable activity feed with compact filters. */
.workspace .alarms-grid { grid-template-columns: 280px minmax(0, 1fr); gap: 16px; }
.workspace .alarms-control-panel { position: sticky; top: 78px; }
.workspace .alarms-summary-card { min-height: 76px; padding: 12px 8px; border-radius: 7px; background: #ffffff03; }
.workspace .alarms-summary-card span { font-size: 9px; letter-spacing: 0; }
.workspace .alarms-summary-card strong { font-size: 24px; }
.workspace .alarms-summary-card--critical strong { color: #f19d9d; }
.workspace .alarms-summary-card--warning strong { color: #e5b482; }
.workspace .alarms-list { gap: 8px; }
.workspace .alarms-card { border-radius: 8px; padding: 14px; gap: 12px; box-shadow: none; background: #0d1c16; }
.workspace .alarms-card::after { display: none; }
.workspace .alarms-card__severity { width: 34px; height: 34px; border-radius: 7px; font-size: 14px; }
.workspace .alarms-card__title { font-size: 14px; }
.workspace .alarms-card__message { font-size: 12px; margin-bottom: 10px; }
.workspace .alarms-card__meta, .workspace .alarms-card__bottom { font-size: 11px; }
.workspace .alarms-card__chip { border-radius: 5px; padding: 4px 7px; }
/* Video takes priority over camera configuration and session metadata. */
.workspace .media-layout { grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; }
.workspace .media-panel--hero { grid-column: 1; grid-row: 1; }
.workspace .media-live-panel { grid-column: 2; grid-row: 1 / span 2; }
.workspace .media-layout > .media-panel:nth-child(3) { grid-column: 1; grid-row: 2; }
.workspace .media-layout > .media-panel:nth-child(4) { grid-column: 2; grid-row: 3; }
.workspace .media-controls { grid-template-columns: 1fr; }
.workspace .media-device-card { display: grid; gap: 10px; padding: 12px; border-radius: 7px; background: none; }
.workspace .media-device-card .eyebrow { display: none; }
.workspace .media-device-card h3 { font-size: 14px; }
.workspace .media-viewer { min-height: 380px; height: min(58dvh, 640px); border-radius: 7px; background: #060e0a; }
.workspace .media-video { min-height: 0; max-height: 100%; }
.workspace .media-viewer__empty strong { font-size: 21px; }
.workspace .media-viewer__empty p { font-size: 13px; }
.workspace .media-card, .workspace .media-empty { border-radius: 7px; padding: 12px; }
.workspace .media-card__title { font-size: 12px; }
.workspace .media-history-details { border-radius: 7px; }
/* Compose first, inspect optional command presets only when needed. */
.workspace .commands-layout { grid-template-columns: 360px minmax(0, 1fr); gap: 16px; align-items: start; }
.workspace .commands-device-card { padding: 12px; border-radius: 8px; background: #0c1c16; }
.workspace .commands-device-card h3 { font-size: 15px; }
.workspace .commands-device-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.workspace .commands-device-facts > :first-child { grid-column: 1 / -1; }
.workspace .commands-device-facts dt { font-size: 10px; }
.workspace .commands-device-facts dd { font-size: 12px; }
.workspace .commands-form { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.workspace .commands-catalog { margin-top: 16px; padding: 12px; border: 1px solid var(--line); }
.workspace .commands-catalog summary { color: var(--accent-strong); font-weight: 700; }
.workspace .commands-catalog__top { margin-top: 12px; }
.workspace .commands-presets__label { display: none; }
.workspace .commands-card, .workspace .commands-empty { border-radius: 8px; padding: 14px; background: #0c1c16; box-shadow: none; }
/* Administration follows the same list / editor hierarchy. */
.workspace .settings-switcher-panel { padding: 0; background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; margin-bottom: 16px; }
.workspace .settings-view-switcher { gap: 20px; }
.workspace .settings-view-tab { border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; padding: 10px 2px 14px; color: var(--muted); }
.workspace .settings-view-tab.is-active { border-bottom-color: var(--accent); color: var(--accent-strong); background: none; }
.workspace .settings-layout, .workspace .settings-device-profiles-layout { grid-template-columns: 280px minmax(0, 1fr); gap: 16px; }
.workspace .settings-users-panel, .workspace .settings-device-profiles-panel { position: sticky; top: 78px; max-height: calc(100dvh - 94px); overflow: auto; }
.workspace .settings-editor-panel, .workspace .settings-device-profile-editor-panel, .workspace .settings-maintenance-panel { position: static; max-height: none; overflow: visible; }
.workspace .settings-user-card, .workspace .settings-checkbox-card, .workspace .settings-event-card, .workspace .settings-storage-card, .workspace .settings-speed-range, .workspace .settings-device-profile-card { border-radius: 7px; padding: 12px; box-shadow: none; }
.workspace .settings-user-card__title { font-size: 14px; }
.workspace .settings-form-section { padding-top: 16px; }
.workspace .settings-section-title { font-size: 15px; }
.workspace .settings-chip { border-radius: 5px; font-size: 10px; }
.workspace .settings-user-list { max-height: 55dvh; }
.workspace .settings-checkbox-card__title { font-size: 12px; }
.workspace .settings-device-list { max-height: 360px; }
.workspace .settings-speed-range { gap: 10px; }
.workspace .settings-actions { border-top: 1px solid var(--line); padding-top: 16px; }
/* Sign-in shares the product identity, with no administrative chrome. */
.workspace--login { background: #0b1914; }
.workspace--login .login-shell { min-height: 100dvh; }
.workspace--login .login-card { width: min(420px, 100%); padding: 32px; border-radius: 12px; background: #10221b; box-shadow: var(--shadow); gap: 24px; }
.workspace--login .login-brand { margin-bottom: 32px; }
.workspace--login .login-brand strong { font-size: 24px; }
.workspace--login .login-title { font-size: 26px; }
.workspace--login .login-help h2 { font-size: 12px; }
.workspace--login .login-help .meta { font-size: 11px; }
@media (max-width: 1100px) {
  .workspace-header { gap: 10px; grid-template-columns: auto 1fr auto; }
  .workspace-nav { gap: 0; justify-content: center; }
  .workspace-nav-link { padding-inline: 8px; font-size: 11px; }
  .workspace-header .session-badge > div { display: none; }
  .workspace .history-metrics-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .workspace .history-metric { min-height: 60px; }
  .workspace .media-actions-grid { grid-template-columns: 1fr; }
  .workspace .settings-storage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .workspace .app-shell { padding: 0 12px 20px; }
  .workspace-header { height: auto; margin: 0 -12px; padding: 10px 12px 0; grid-template-columns: 1fr auto; gap: 8px; }
  .workspace-brand { grid-row: 1; grid-column: 1; }
  .workspace-header .session-badge { grid-row: 1; grid-column: 2; }
  .workspace-nav { grid-row: 2; grid-column: 1 / -1; overflow-x: auto; justify-content: flex-start; max-width: 100%; scrollbar-width: none; }
  .workspace-nav-link { min-height: 40px; padding-inline: 12px; }
  .workspace-heading { padding: 18px 0; align-items: flex-start; flex-wrap: wrap; gap: 12px; }
  .workspace .page-title { font-size: 22px; }
  .workspace .page-subtitle { font-size: 12px; }
  .workspace .history-grid, .workspace .routes-grid, .workspace .alarms-grid, .workspace .commands-layout,
  .workspace .settings-layout, .workspace .settings-device-profiles-layout, .workspace .media-layout { grid-template-columns: minmax(0, 1fr); }
  .workspace .history-control-panel, .workspace .route-builder, .workspace .alarms-control-panel,
  .workspace .settings-users-panel, .workspace .settings-device-profiles-panel { position: static; max-height: none; }
  .workspace .panel { padding: 14px; }
  .workspace .history-results-panel { padding: 10px; }
  .workspace .history-map-wrap, .workspace .route-map-wrap, .workspace .route-map { height: 52dvh; min-height: 340px; }
  .workspace .history-metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workspace .history-actions > * { flex-basis: 120px; }
  .workspace .media-layout { display: flex; flex-direction: column; }
  .workspace .media-layout > .media-panel { width: 100%; }
  .workspace .media-viewer { min-height: 240px; height: 48dvh; }
  .workspace .media-playback-controls { grid-template-columns: 1fr; }
  .workspace .media-live-panel > .panel-header { flex-wrap: wrap; }
  .workspace .alarms-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .workspace .alarms-card { grid-template-columns: auto minmax(0, 1fr); }
  .workspace .alarms-card__top { gap: 8px; }
  .workspace .settings-speed-range { grid-template-columns: 1fr; }
  .workspace .settings-view-switcher { gap: 16px; }
}