/*
 * M-Site shared accessibility tokens and components.
 * Standard: docs/DESIGN_STANDARD.md (read it before adding a status colour).
 *
 * Rule 1: colour is never the only signal. Every state = colour + icon +
 *         text label + a non-colour shape cue (fill / hatch / dashed / dotted /
 *         outline / double ring).
 * Rule 2: touch targets >= 48px; critical controls >= 56px and full-width on
 *         small screens.
 * Rule 4: buttons never look like indicators and vice versa. Buttons are
 *         raised (shadow), filled, squarer (.5rem), icon + VERB label, pointer
 *         cursor, hover/pressed/focus states. Indicators (.ms-status, .ms-mode)
 *         are flat pills/labels: no shadow, no hover, default cursor.
 * Rule 3: palette is Okabe-Ito derived (blue / orange / vermillion / bluish
 *         green), never a bare red-vs-green pair. All text pairs >= 4.5:1,
 *         UI boundaries >= 3:1 (WCAG 2.1 AA).
 *
 * Icons come from the Font Awesome 6 set base.html already loads. The text
 * label is always present, so a failed icon load never removes meaning.
 */

:root {
  /* State fills (white or ink text on top; contrast noted). */
  --ms-ok:          #007A5E;  /* bluish green, white text 5.3:1 */
  --ms-live:        #0062A3;  /* blue, white text 6.4:1 */
  --ms-critical:    #B03A00;  /* vermillion, white text 6.1:1 */
  --ms-warning:     #E69F00;  /* orange, ink text 7.7:1 */
  --ms-warning-edge:#8A5A00;  /* dark orange border/text on white 5.9:1 */
  --ms-dry-a:       #FFE3A3;  /* hatch stripe, ink 11:1 */
  --ms-dry-b:       #FFFFFF;
  --ms-dry-ink:     #3D2800;
  --ms-off-ink:     #495057;  /* 8.2:1 on white */
  --ms-off-bg:      #E9ECEF;  /* off ink on this 6.9:1 */
  --ms-live-ink:    #0062A3;
  --ms-dry-ink-strong: #7A4F00; /* 7.1:1 on white */
  --ms-start-bg:    #DCEBF7;  /* tonal START fill; ink #00406E 8.8:1 */
  --ms-start-ink:   #00406E;
  --ms-off-edge:    #6C757D;  /* 4.7:1 boundary */
  --ms-unknown-bg:  #E9ECEF;
  --ms-unknown-ink: #343A40;
  --ms-unknown-edge:#5C636A;
  --ms-ink:         #1A1A1A;
  --ms-on-fill:     #FFFFFF;
  --ms-surface:     #FFFFFF;
  --ms-crit-tint:   #FBE9DF;
  --ms-crit-ink:    #3A1400;
  --ms-warn-tint:   #FFF4DA;
  --ms-warn-ink:    #3D2800;
  --ms-focus:       #111111;
  --ms-focus-gap:   #FFFFFF;
  --ms-touch:       48px;
  --ms-touch-critical: 56px;
  /* Chart series (Okabe-Ito). Pair each with a dash pattern + marker. */
  --ms-chart-1: #0072B2; --ms-chart-2: #E69F00; --ms-chart-3: #009E73;
  --ms-chart-4: #D55E00; --ms-chart-5: #56B4E9; --ms-chart-6: #CC79A7;
  --ms-chart-7: #F0E442; --ms-chart-8: #000000;
}
[data-bs-theme="dark"] {
  --ms-dry-a:       #5A4316;
  --ms-dry-b:       #2B2111;
  --ms-dry-ink:     #FFE3A3;
  --ms-off-ink:     #ADB5BD;
  --ms-off-edge:    #ADB5BD;
  --ms-off-bg:      #343A40;
  --ms-live-ink:    #8CCBF2;
  --ms-dry-ink-strong: #FFD27A;
  --ms-start-bg:    #0F3554;
  --ms-unknown-bg:  #343A40;
  --ms-unknown-ink: #E9ECEF;
  --ms-unknown-edge:#ADB5BD;
  --ms-surface:     #212529;
  --ms-crit-tint:   #3A1D10;
  --ms-crit-ink:    #FFD9C7;
  --ms-warn-tint:   #3A2E10;
  --ms-warn-ink:    #FFE9B8;
  --ms-warning-edge:#E69F00;
  --ms-focus:       #FFFFFF;
  --ms-focus-gap:   #111111;
  --ms-start-ink:   #CDE6FA;
}

/* ---------- focus: two-tone ring, visible on any background ---------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--ms-focus) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px var(--ms-focus-gap) !important;
}

/* ---------- status badges ---------- */
.ms-status {
  display: inline-flex; align-items: center; gap: .35em;
  /* Pill shape = "status, not clickable". Buttons are squarer (.5rem). */
  padding: .3em .7em; border-radius: 999px;
  font-weight: 700; font-size: .8125rem; line-height: 1.2;
  letter-spacing: .02em; white-space: nowrap; vertical-align: middle;
  border: 2px solid transparent;
  box-shadow: none; cursor: default; user-select: text;
}
.ms-status > .fas, .ms-status > .fa-solid, .ms-status > svg { font-size: 1em; flex: none; }
.ms-status-lg { font-size: 1.05rem; padding: .4em .8em; }
.ms-status-xl { font-size: 1.35rem; padding: .35em .75em; border-width: 3px; }

/* OK: solid fill, check */
.ms-status-ok       { background: var(--ms-ok); color: var(--ms-on-fill); border-color: var(--ms-ok); }
/* LIVE: solid fill + inner white ring + outer ring (reads "armed") */
.ms-status-live     { background: var(--ms-live); color: var(--ms-on-fill); border-color: var(--ms-live);
                      box-shadow: inset 0 0 0 2px var(--ms-on-fill); }
/* WARNING: light fill with ink text (luminance differs from ok/critical), thick bottom bar */
.ms-status-warning  { background: var(--ms-warning); color: var(--ms-ink); border-color: var(--ms-warning);
                      border-bottom: 4px solid var(--ms-ink); }
/* CRITICAL: solid fill + double outline */
.ms-status-critical { background: var(--ms-critical); color: var(--ms-on-fill);
                      border: 3px double var(--ms-on-fill); outline: 2px solid var(--ms-critical); outline-offset: 0;
                      text-transform: uppercase; }
/* DRY-RUN: diagonal hatch + dashed border */
.ms-status-dryrun   { background: repeating-linear-gradient(135deg, var(--ms-dry-a) 0 6px, var(--ms-dry-b) 6px 12px);
                      color: var(--ms-dry-ink); border: 2px dashed var(--ms-warning-edge); }
/* OFF: flat light-grey fill, no border (never an outline box: outlines read as buttons) */
.ms-status-off      { background: var(--ms-off-bg); color: var(--ms-off-ink); border-color: transparent; }
/* UNKNOWN: grey fill, dotted outline */
.ms-status-unknown  { background: var(--ms-unknown-bg); color: var(--ms-unknown-ink); border: 2px dotted var(--ms-unknown-edge); }
/* INFO / neutral tag: plain label text (no box at all); never used for health */
.ms-status-info     { background: transparent; color: var(--ms-off-ink); border: 0; padding-left: 0; padding-right: 0;
                      font-weight: 700; text-transform: uppercase; font-size: .75rem; letter-spacing: .06em; }

/* Small kicker printed before an indicator ("Health", "Mode", "Status"). */
.ms-kicker { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
             color: var(--ms-off-ink); margin-right: .25rem; }

/* Large state heading (e.g. dispatch mode). A header, not a button: no fill,
   no box; the underline STYLE carries the state (solid = live, dashed = dry-run). */
.ms-mode { display: inline-flex; align-items: center; gap: .45em; font-size: 1.5rem; font-weight: 800;
           line-height: 1.2; padding: 0 0 .1em; border-bottom: 5px solid currentColor; cursor: default; }
.ms-mode-live   { color: var(--ms-live-ink); border-bottom-style: solid; }
.ms-mode-dryrun { color: var(--ms-dry-ink-strong); border-bottom-style: dashed; }

/* ---------- buttons ---------- */
.ms-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: var(--ms-touch); min-width: var(--ms-touch);
  padding: .5rem 1rem; border-radius: .5rem; border: 3px solid transparent;
  font-weight: 700; line-height: 1.15; text-align: center; cursor: pointer;
  text-decoration: none; user-select: none;
  /* Raised: a hard bottom edge + soft drop shadow. Indicators never have this. */
  box-shadow: 0 3px 0 rgba(0,0,0,.35), 0 4px 10px rgba(0,0,0,.18);
  transition: transform .06s ease, box-shadow .06s ease, background-color .15s ease;
}
.ms-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 0 rgba(0,0,0,.35), 0 6px 14px rgba(0,0,0,.22); }
.ms-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.35), inset 0 2px 4px rgba(0,0,0,.25); }
.ms-btn:disabled, .ms-btn.disabled { opacity: .55; cursor: not-allowed; box-shadow: none; transform: none; }
.ms-btn .ms-btn-sub { display: block; font-weight: 400; font-size: .8125rem; }
/* Critical controls: >= 56px, full width on phones, extra separation. */
.ms-btn-critical-size { min-height: var(--ms-touch-critical); font-size: 1.15rem; padding: .65rem 1.25rem; margin-top: .75rem; }
@media (max-width: 575.98px) { .ms-btn-critical-size { width: 100%; min-height: 64px; } }
.ms-btn-block { width: 100%; }
/* Dense table actions may shrink on mouse/trackpad screens only. */
.ms-btn-sm { min-height: 36px; min-width: 44px; padding: .25rem .6rem; font-size: .875rem; border-width: 2px; }
@media (pointer: coarse) { .ms-btn-sm { min-height: var(--ms-touch); min-width: var(--ms-touch); } }

/* STOP / OFF / destructive: solid vermillion fill + stop icon (square / octagon) */
.ms-btn-stop { background: var(--ms-critical); color: #fff; border-color: var(--ms-critical); }
.ms-btn-stop:hover, .ms-btn-stop:focus-visible { background: #8F2F00; border-color: #8F2F00; color: #fff; }
/* START / ON: tonal light-blue fill + blue border, play icon. Light vs STOP's
   dark fill, so the pair separates even in greyscale. */
.ms-btn-start { background: var(--ms-start-bg); color: var(--ms-start-ink); border-color: var(--ms-live); }
.ms-btn-start:hover, .ms-btn-start:focus-visible { background: var(--ms-live); color: #fff; }
/* Neutral / cancel */
.ms-btn-neutral { background: var(--ms-off-bg); color: var(--ms-unknown-ink); border-color: var(--ms-off-edge); }
.ms-btn-neutral:hover { background: var(--ms-unknown-bg); color: var(--ms-unknown-ink); }

/* ---------- callouts (alerts) ---------- */
.ms-callout {
  display: flex; gap: .75rem; align-items: flex-start;
  padding: .75rem 1rem; border-radius: .4rem; margin-bottom: .75rem;
  border: 1px solid transparent; border-left-width: 8px;
}
.ms-callout > .ms-callout-icon { font-size: 1.5rem; line-height: 1; flex: none; margin-top: .1rem; }
.ms-callout-kicker { display: block; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: .8rem; }
/* critical: solid thick left bar + octagon icon + "DANGER" kicker */
.ms-callout-critical { background: var(--ms-crit-tint); color: var(--ms-crit-ink); border-color: var(--ms-critical); border-left-style: solid; }
/* warning: dashed thick left bar + triangle icon + "WARNING" kicker */
.ms-callout-warning  { background: var(--ms-warn-tint); color: var(--ms-warn-ink); border-color: var(--ms-warning-edge); border-left-style: dashed; }
/* info: dotted left bar + circle-info */
.ms-callout-info     { background: var(--ms-unknown-bg); color: var(--ms-unknown-ink); border-color: var(--ms-unknown-edge); border-left-style: dotted; }

/* ---------- panels that carry a state (e.g. dispatch panel, card header) ---------- */
/* Panels are containers, not controls: thin neutral frame, no shadow, and the
   state is a thick LEFT bar whose line style encodes it. */
.ms-panel { border-radius: .35rem; padding: .75rem; border: 1px solid var(--bs-border-color, #dee2e6); border-left-width: 8px; }
.ms-panel-live   { border-left: 8px solid var(--ms-live); background: color-mix(in srgb, var(--ms-live) 6%, var(--ms-surface)); }
.ms-panel-dryrun { border-left: 8px dashed var(--ms-warning-edge);
                   background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--ms-dry-a) 40%, var(--ms-surface)) 0 10px, var(--ms-surface) 10px 20px); }
.ms-panel-critical { border-left: 10px double var(--ms-critical); }
.ms-panel-unknown  { border-left: 8px dotted var(--ms-unknown-edge); }

/* Action log entries (who / when / action / comment). */
.ms-log { list-style: none; padding: 0; margin: 0; }
.ms-log > li { border-top: 1px solid var(--bs-border-color, #dee2e6); padding: .4rem 0; }
.ms-log-comment { display: block; margin-top: .15rem; padding-left: .5rem; border-left: 3px solid var(--ms-off-edge);
                  font-style: italic; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Card state accent: thick left edge whose STYLE also encodes state. */
.ms-card-ok       { border-left: 6px solid var(--ms-ok) !important; }
.ms-card-warning  { border-left: 6px dashed var(--ms-warning-edge) !important; }
.ms-card-critical { border-left: 6px double var(--ms-critical) !important; border-left-width: 8px !important; }
.ms-card-unknown  { border-left: 6px dotted var(--ms-unknown-edge) !important; }
.ms-sev-action    { border-left: 4px solid var(--ms-live) !important; }

/* Chart legend chip: swatch shows dash pattern, not just colour. */
.ms-legend { display: flex; flex-wrap: wrap; gap: .75rem; font-size: .8125rem; }
.ms-legend-item { display: inline-flex; align-items: center; gap: .35rem; }
.ms-legend-swatch { width: 28px; height: 0; border-top: 3px solid currentColor; }
.ms-legend-swatch.dash { border-top-style: dashed; }
.ms-legend-swatch.dot  { border-top-style: dotted; }

/* Screen-reader-only text for icon-only controls. */
.ms-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media (forced-colors: active) {
  .ms-status, .ms-btn, .ms-callout, .ms-panel { border-color: CanvasText; forced-color-adjust: auto; }
}