/* Shared ALMS visual language for the planning tools.
   Component styling only: retain each tool's dimensions, grids and drawing colours.
   Tokens are generated from ALMS by tools/apply_planning_theme.py. */
@import url("scx_alms_tokens.css?v=20260924");

:root.scx-alms-theme {
  color-scheme: light;
  --bg: var(--alms-panel); --head: var(--alms-surface);
  --panel: var(--alms-surface); --panel2: var(--alms-scx-tint); --panel3: var(--alms-panel);
  --card: var(--alms-surface); --ink: var(--alms-ink); --text: var(--alms-ink);
  --muted: #655e70; --line: var(--alms-line); --blue: var(--alms-scx-deep);
  --accent: var(--alms-scx-deep); --navy: var(--alms-scx-deep); --pale: var(--alms-scx-tint);
  --p: var(--panel); --c: var(--card); --l: var(--line); --i: var(--ink); --m: var(--muted); --b: var(--blue);
  --scx-navy: var(--alms-scx-deep); --scx-blue: var(--alms-scx-deep); --scx-pale: var(--alms-scx-tint);
  --scx-text: var(--alms-ink); --scx-muted: var(--muted); --scx-line: var(--alms-line);
  background: var(--bg); color: var(--ink);
}
:root.scx-alms-theme body {
  background: var(--bg) !important; color: var(--ink) !important;
  font-family: var(--alms-font) !important; -webkit-font-smoothing: antialiased;
}
:root.scx-alms-theme [hidden] { display: none !important; }
:root.scx-alms-theme ::selection { background: var(--alms-scx-tint-2); color: var(--alms-scx-deep); }
:root.scx-alms-theme :is(body > header, .shell > header, main > header) {
  background: var(--alms-surface) !important; color: var(--ink) !important;
  border-color: var(--line) !important; box-shadow: var(--alms-shadow-sm) !important;
}
:root.scx-alms-theme header :is(h1,h2,h3) { color: var(--ink) !important; letter-spacing: -.01em; }
:root.scx-alms-theme header :is(p,.sub,.subtitle,.muted) { color: var(--muted) !important; }
:root.scx-alms-theme :is(.scxLogoImg,.scx-header-logo,img.logo) {
  border-color: transparent !important; border-radius: var(--alms-radius-sm) !important;
  background: white !important; box-shadow: none !important;
}
:root.scx-alms-theme :is(.panel,.card,.hero,.toolbar,.metric,.check,.answer,.composer,.access,.account-bar,
  .downloads,.external-terms,.template-card,.modal-card,.progress-card,.side,.zone-item,dialog) {
  background: var(--alms-surface) !important; color: var(--ink) !important;
  border-color: var(--line) !important; border-radius: var(--alms-radius) !important;
  box-shadow: var(--alms-shadow-sm) !important;
}
:root.scx-alms-theme :is(.panel > h2,.panel > h3,.canvasbar,.tabs,.modal-head,.progress-head,.wizard-map-toolbar) {
  background: var(--alms-scx-tint) !important; color: var(--ink) !important; border-color: var(--line) !important;
}
:root.scx-alms-theme :is(.card,.panel,.hero,.access,.external-terms) :is(h2,h3) { color: var(--ink) !important; }
:root.scx-alms-theme :is(.card p,.external-terms p,.external-terms .copyright,.intro,.sub,.subtitle,.small,.muted,.help,.hint,label) {
  color: var(--muted) !important;
}
:root.scx-alms-theme :is(button,.button,.btn,.file-label,.download-button) {
  font-family: var(--alms-font) !important; font-weight: 700 !important;
  background: var(--alms-scx-deep) !important; color: white !important;
  border: 1px solid var(--alms-scx-deep) !important; border-radius: var(--alms-radius-sm) !important;
  box-shadow: var(--alms-shadow-sm) !important; text-decoration: none;
  transition: background 160ms ease, box-shadow 160ms ease;
}
:root.scx-alms-theme :is(button,.button,.btn,.file-label,.download-button):hover:not(:disabled) {
  background: #0082C7 !important; box-shadow: var(--alms-shadow-md) !important;
}
:root.scx-alms-theme :is(button,.button,.btn,.file-label):is(.secondary,.ghost) {
  background: var(--alms-surface) !important; color: var(--alms-scx-deep) !important;
  border-color: var(--alms-line-2) !important; box-shadow: none !important;
}
:root.scx-alms-theme :is(button,.button,.btn):is(.danger,.bad) {
  background: var(--alms-st-red-tint) !important; color: #9b2434 !important; border-color: #e8b4bb !important;
}
:root.scx-alms-theme :is(button,.button,.btn).good {
  background: var(--alms-st-green-tint) !important; color: #11643a !important; border-color: #a5d6ba !important;
}
:root.scx-alms-theme :is(button,.button,.btn):is(.amber,.warnbtn) {
  background: var(--alms-st-amber-tint) !important; color: #80500b !important; border-color: #edcf98 !important;
}
:root.scx-alms-theme :is(button:disabled,input:disabled,select:disabled) { opacity: .55; cursor: not-allowed; }
:root.scx-alms-theme :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea) {
  background: var(--alms-surface) !important; color: var(--ink) !important; font-family: var(--alms-font) !important;
  border: 1px solid var(--alms-line-2) !important; border-radius: var(--alms-radius-sm) !important;
}
:root.scx-alms-theme :is(input,textarea)::placeholder { color: var(--muted); opacity: 1; }
:root.scx-alms-theme :is(input[type=checkbox],input[type=radio],input[type=range]) { accent-color: var(--alms-scx-deep); }
:root.scx-alms-theme :is(button,a,input,select,textarea,[tabindex]):focus-visible {
  outline: 2px solid var(--alms-scx) !important; outline-offset: 2px;
  box-shadow: var(--alms-shadow-focus) !important;
}
:root.scx-alms-theme :is(a:not(.button):not(.btn):not(.card):not(.download-button),header a:not(.button):not(.btn)) {
  color: var(--alms-scx-deep) !important;
}
:root.scx-alms-theme :is(.tabs button,.tab):not(.active) {
  background: var(--alms-surface) !important; color: var(--alms-scx-deep) !important; border-color: var(--line) !important;
}
:root.scx-alms-theme :is(.tabs button.active,.tab.active,.toolgrid button.active,.wizard-map-toolbar button.active) {
  background: var(--alms-scx-deep) !important; color: white !important;
  outline: 2px solid var(--alms-scx); outline-offset: 1px;
}
:root.scx-alms-theme table { background: var(--alms-surface) !important; color: var(--ink) !important; }
:root.scx-alms-theme th { background: var(--alms-panel) !important; color: var(--alms-ink-2) !important; border-color: var(--line) !important; }
:root.scx-alms-theme td { border-color: var(--line) !important; }
:root.scx-alms-theme tbody tr:nth-child(even) { background: #fbfafc !important; }
:root.scx-alms-theme tr.selected { background: var(--alms-scx-tint-2) !important; }
:root.scx-alms-theme :is(.note,.notice,.summary,.wizard-selection-summary,.pill,.tag) {
  background: var(--alms-scx-tint) !important; color: var(--alms-scx-deep) !important; border-color: var(--alms-line) !important;
}
:root.scx-alms-theme :is(.badge,.status):is(.ok,.good) { background: var(--alms-st-green-tint) !important; color: #11643a !important; }
:root.scx-alms-theme :is(.badge,.status):is(.bad,.err), :root.scx-alms-theme .error { color: #9b2434 !important; }
:root.scx-alms-theme :is(.badge,.status).warn, :root.scx-alms-theme .pending { color: #80500b !important; }
:root.scx-alms-theme :is(pre,.report,.events,.console,.terminal,.log,.timeline) {
  background: var(--alms-surface) !important; color: var(--ink) !important; border-color: var(--line) !important;
}
:root.scx-alms-theme code { color: var(--alms-scx-deep); }
:root.scx-alms-theme footer { background: var(--alms-panel) !important; color: var(--muted) !important; border-color: var(--line) !important; }
/* Canvas contents keep their equipment/status colours; only the workspace surface changes. */
:root.scx-alms-theme :is(#world,#plan,.canvas-wrap,.wizard-map-scroll,.completion-map-wrap) {
  background-color: var(--alms-surface) !important; border-color: var(--alms-line-2) !important;
}
:root.scx-alms-theme :is(#world,#plan) :is(.station,.store,.keepout,.cell) { color: var(--alms-ink-2) !important; }
:root.scx-alms-theme :is(#world,#plan) .cell { border-color: #dce5ec !important; }
:root.scx-alms-theme .replaySpeedReadout { color: var(--ink) !important; }
/* Panels created after page load by the planning extensions. */
:root.scx-alms-theme :is(#scxPhysicalToolbar,#scxGodotLiveToolbar,#scxPhysicalEditor,#scxGlobalPlanStatus,
  #scxDrawToolsPopup,#scxAiDialog,#fixturePanel,.layoutRuleBox,.workflowDelta.neutral,.liftDetail,
  .scxPlanDetail,.scxPlanMetric,.scxPlanStage,.layoutStat,.result,.scxToolPlaceholder,.stageBox) {
  background: var(--alms-surface) !important; color: var(--ink) !important;
  border-color: var(--line) !important; box-shadow: var(--alms-shadow-sm) !important;
}
:root.scx-alms-theme :is(#scxGlobalPlanHead,#scxDrawToolsHead) {
  background: var(--alms-scx-tint) !important; color: var(--ink) !important; border-color: var(--line) !important;
}
:root.scx-alms-theme :is(#scxPhysicalToolbar,#scxGodotLiveToolbar,#scxPhysicalEditor,#scxGlobalPlanStatus,
  #scxDrawToolsPopup,#scxAiDialog,.layoutRuleBox,.liftDetail,.layoutStat,.result) :is(p,span,b,strong,label,small,h2,h3,h4,li) {
  color: var(--ink) !important;
}
:root.scx-alms-theme :is(.warn,.review,.disclaimer) { color: #80500b !important; }
:root.scx-alms-theme .disclaimer { background: var(--alms-st-amber-tint) !important; border-color: #edcf98 !important; }
:root.scx-alms-theme :is(.pass,.ok:not(button),.good:not(button)) { color: #11643a; }
:root.scx-alms-theme :is(.fail,.bad:not(button)) { color: #9b2434; }
/* Tool-selection cards use one brand accent, as ALMS module cards do. */
:root.scx-alms-theme .card[data-tool-id], :root.scx-alms-theme .card[data-admin-only] { --accent: var(--alms-scx-deep); }
:root.scx-alms-theme .card:hover { border-color: var(--alms-scx) !important; box-shadow: var(--alms-shadow-md) !important; }
:root.scx-alms-theme :is(nav,.sidebar) { background: var(--alms-surface) !important; border-color: var(--line) !important; }
:root.scx-alms-theme nav button:not(.active) {
  background: var(--alms-surface) !important; color: var(--alms-ink-2) !important;
  border-color: transparent !important; box-shadow: none !important;
}
:root.scx-alms-theme nav button:not(.active):hover { background: var(--alms-scx-tint) !important; }
:root.scx-alms-theme nav .n { background: var(--alms-scx-tint-2); color: var(--alms-scx-deep); }
:root.scx-alms-theme .progress { background: var(--alms-scx-tint-2) !important; }
@media (max-width: 720px) {
  :root.scx-alms-theme main > header { flex-wrap: wrap; padding: 16px; border-radius: var(--alms-radius); }
}
@media (prefers-reduced-motion: reduce) {
  :root.scx-alms-theme :is(button,a,.card) { transition: none !important; transform: none !important; }
}
@media print {
  :root.scx-alms-theme body { background: white !important; }
  :root.scx-alms-theme :is(.panel,.card,header) { box-shadow: none !important; }
}