:root {
  --icm-navy: #0b3d63;
  --icm-navy-dark: #082e4a;
  --side-w: 340px;
  --log-h: 240px;
  --st-available: #198754;
  --st-assigned: #f0a202;
  --st-at-job: #dc3545;
  --st-unavailable: #6c757d;
}

.app-navbar { background-color: var(--bs-body-bg); }
.app-logo { height: 34px; width: auto; }
.app-brand-text { color: var(--icm-navy); }
[data-bs-theme="dark"] .app-brand-text { color: #6ea8fe; }
.login-logo { height: 60px; width: auto; }
.btn-primary {
  --bs-btn-bg: var(--icm-navy); --bs-btn-border-color: var(--icm-navy);
  --bs-btn-hover-bg: var(--icm-navy-dark); --bs-btn-hover-border-color: var(--icm-navy-dark);
  --bs-btn-active-bg: var(--icm-navy-dark); --bs-btn-active-border-color: var(--icm-navy-dark);
}

/* ---- Full-screen map pages (builder + live control) ---- */
body.app-fullscreen { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
body.app-fullscreen > nav { flex: 0 0 auto; }
.app-toolbar { background: var(--bs-body-bg); flex: 0 0 auto; }
.app-toolbar-title { max-width: 30ch; }
.app-opacity { width: 100px; }
.app-toast-messages { position: fixed; top: 64px; right: 12px; z-index: 2000; width: min(420px, calc(100% - 24px)); }

.app-workspace {
  flex: 1 1 auto; min-height: 0;
  display: grid; grid-template-columns: 1fr var(--side-w); grid-template-rows: 1fr;
}
.app-workspace-with-log { grid-template-rows: 1fr var(--log-h); }
.app-map { min-height: 0; min-width: 0; z-index: 0; }
.app-side { background: var(--bs-body-bg); display: flex; flex-direction: column; min-height: 0; }
.app-side-scroll { overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.app-workspace-with-log .app-side { grid-row: 1; grid-column: 2; }
.app-log { grid-column: 1 / span 2; grid-row: 2; display: flex; flex-direction: column; min-height: 0; background: var(--bs-body-bg); position: relative; }
.app-log-resize { position: absolute; top: -4px; left: 0; right: 0; height: 8px; cursor: ns-resize; z-index: 5; }
.app-log-body { flex: 1 1 auto; overflow-y: auto; font-size: .85rem; min-height: 0; }
.app-log-row { display: grid; grid-template-columns: 3.2rem 4.6rem 7rem 1fr 10rem; gap: .5rem; padding: .15rem .5rem; border-bottom: 1px solid var(--bs-border-color-translucent); }
.app-log-row:hover { background: var(--bs-tertiary-bg); }
.app-log-row .seq, .app-log-row .time, .app-log-row .by { color: var(--bs-secondary-color); }
.app-log-row .text { white-space: pre-wrap; word-break: break-word; }
.app-log-row.type-STATUS .text, .app-log-row.type-MOVE .text, .app-log-row.type-ASSIGN .text { color: var(--bs-secondary-color); }
.app-log-row.type-SYSTEM .text { font-style: italic; color: var(--bs-secondary-color); }
.app-log-row .cs { font-weight: 600; cursor: pointer; }

@media (max-width: 767.98px) {
  :root { --side-w: 100%; --log-h: 200px; }
  body.app-fullscreen { overflow: auto; height: auto; }
  .app-workspace { grid-template-columns: 1fr; grid-template-rows: 60vh auto; }
  .app-workspace-with-log { grid-template-rows: 60vh auto 300px; }
  .app-workspace-with-log .app-side { grid-row: 2; grid-column: 1; max-height: 50vh; }
  .app-log { grid-column: 1; grid-row: 3; }
  .app-log-row { grid-template-columns: 2.5rem 4rem 1fr; }
  .app-log-row .type, .app-log-row .by { display: none; }
  .app-log-row .text { grid-column: 1 / -1; }
}

/* ---- Callsign markers ---- */
.cs-marker { background: none; border: none; }
.cs-badge {
  display: inline-flex; flex-direction: column; align-items: center; transform: translate(-50%, -100%);
  position: absolute; left: 0; top: 0; white-space: nowrap; cursor: grab; user-select: none;
}
.cs-badge .cs-label {
  font: 600 12px/1.2 system-ui, sans-serif; color: #fff; padding: 3px 7px; border-radius: 6px;
  border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.45); background: var(--st-available);
}
.cs-badge .cs-crew { font: 600 10px/1.2 system-ui, sans-serif; background: rgba(255,255,255,.92); color: #212529; border-radius: 4px; padding: 0 4px; margin-top: 1px; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.cs-badge .cs-pin { width: 2px; height: 8px; background: #212529; }
.cs-badge.st-AVAILABLE .cs-label { background: var(--st-available); }
.cs-badge.st-ASSIGNED .cs-label { background: var(--st-assigned); color: #212529; }
.cs-badge.st-AT_JOB .cs-label { background: var(--st-at-job); }
.cs-badge.st-UNAVAILABLE .cs-label { background: var(--st-unavailable); }
.cs-badge.is-selected .cs-label { outline: 3px solid #0d6efd; outline-offset: 1px; }
.cs-badge.is-template .cs-label { background: var(--cs-colour, var(--icm-navy)); }
.is-locked .cs-badge { cursor: pointer; }

.st-dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; vertical-align: middle; }
.st-dot.st-AVAILABLE { background: var(--st-available); }
.st-dot.st-ASSIGNED { background: var(--st-assigned); }
.st-dot.st-AT_JOB { background: var(--st-at-job); }
.st-dot.st-UNAVAILABLE { background: var(--st-unavailable); }

.cs-card { border-bottom: 1px solid var(--bs-border-color-translucent); padding: .45rem .6rem; cursor: pointer; }
.cs-card:hover, .cs-card.is-selected { background: var(--bs-tertiary-bg); }
.cs-card .crew { font-size: .8rem; }

.app-context-menu { position: fixed; z-index: 3000; min-width: 12rem; }
.app-staff-results { max-height: 220px; overflow-y: auto; }

/* Feature labels on the map */
.feature-label { background: rgba(255,255,255,.85); border: 0; box-shadow: none; font-weight: 600; font-size: 11px; padding: 0 4px; color: #212529; }
.feature-label::before { display: none; }
.point-icon { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 2px rgba(0,0,0,.6); }
.map-message { background: rgba(255,255,255,.92); padding: .4rem .6rem; border-radius: 4px; font-size: .85rem; color: #212529; max-width: 320px; }
.plan-handle { width: 14px; height: 14px; background: #0d6efd; border: 2px solid #fff; border-radius: 2px; box-shadow: 0 0 3px rgba(0,0,0,.6); }