/* SkyTel shared look (2026-10-20). One token set for light and dark; every
   My SkyTel stylesheet reads these variables instead of its own colours. */
:root {
    color-scheme: light;
    --canvas: #f3f5f7;
    --surface: #ffffff;
    --text: #243343;
    --muted: #5d6d80;
    --border: #cdd5df;
    --active: #eaf6fc;
    --hover: #f3f7fa;
    --brand: #00bfff;
    /* Round 11 B5 (owner 2026-11-06 19:26, orchestrator decision): primary #0078D4 (white text 4.53:1), hover #0067B8;
       links and focus follow. SUPERSEDED: #007DBA / #00699E. */
    --button: #0078d4;
    --button-hover: #0067b8;
    --button-text: #ffffff;
    --link: #0078d4;
    --focus: #0078d4;
    /* Round 11 B4: secondary (outline) buttons, danger outline, disabled (owner 2026-11-06 19:23). */
    --btn2-line: #0078d4; --btn2-text: #0078d4; --btn2-hover-bg: #eaf6fc; --btn2-hover-text: #0067b8;
    --danger: #b42318; --danger-hover-bg: #fbe7e7;
    --disabled-text: #8a99aa;
    --radius: 4px;
    --shadow: 0 6px 18px rgba(15, 26, 36, 0.12);
    --brand-panel: #f3f5f7;
    --input: var(--surface);
    --ok-bg: #e3f2ea; --ok-tx: #1f5a3c;
    --bad-bg: #fbe7e7; --bad-tx: #8f2626;
    --warn-bg: #fcf1dc; --warn-tx: #7a4f00;
    --info-bg: #e4f1fa; --info-tx: #0b587d;
    --neutral-bg: #edf0f3; --neutral-tx: #425163;
    /* Names used by earlier My SkyTel stylesheets. */
    --blue: var(--link);
    --status: var(--ok-bg);
    --status-text: var(--ok-tx);
    --panel: var(--surface);
    --error: var(--bad-tx);
    --error-bg: var(--bad-bg);
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --canvas: #141e28;
    --surface: #1d2a38;
    --text: #e5edf5;
    --muted: #acbac9;
    --border: #425163;
    --active: #213e50;
    --hover: #263647;
    --link: #00bfff;
    --focus: #00bfff;
    --btn2-line: #00bfff; --btn2-text: #00bfff; --btn2-hover-bg: #263647; --btn2-hover-text: #00bfff;
    --danger: #f5a3a3; --danger-hover-bg: #47252a;
    --disabled-text: #8a99aa;
    --shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
    --brand-panel: #0c151d;
    --ok-bg: #1f3d31; --ok-tx: #a8dcc1;
    --bad-bg: #47252a; --bad-tx: #f4bcbc;
    --warn-bg: #45361d; --warn-tx: #f2d08f;
    --info-bg: #1d3a4e; --info-tx: #a3d6f3;
    --neutral-bg: #2a3846; --neutral-tx: #c6d1dc;
}

body { background: var(--canvas); color: var(--text); }
a { color: var(--link); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* Logo: the original wordmark image (#00BFFF on transparent), never re-typeset. */
.st-wordmark { display: block; height: auto; }

/* Page header: title left, controls right. */
.st-page-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: 16px; }   /* round 11 B8: one normal gap to the first card */
.st-page-header h1 { margin: 0; }
.st-page-header .st-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.st-subtitle { margin: 6px 0 0; color: var(--muted); }

/* Card. */
.st-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); min-width: 0; }
.st-card-body { padding: 20px 24px; }
.st-card-title { margin: 0 0 14px; font-size: 16px; font-weight: 600; }

/* Buttons: primary (white semi-bold on #0078D4 since round 11), secondary, ghost. Same size on hover. */
.st-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); font: inherit; line-height: 1.2; text-decoration: none; cursor: pointer; }
.st-btn:hover { background: var(--hover); }
.st-btn-primary { background: var(--button); border-color: var(--button); color: var(--button-text); font-weight: 600; }
.st-btn-primary:hover { background: var(--button-hover); border-color: var(--button-hover); color: var(--button-text); }
.st-btn-ghost { background: transparent; border-color: transparent; color: var(--link); }
.st-btn-ghost:hover { background: var(--hover); }
.st-btn-block { width: 100%; }

/* Round 11 B4 - secondary buttons look like buttons (owner 2026-11-06 19:23, every page): 1.5 px blue border, blue
   semi-bold text on the card colour, pale blue on hover. Danger (Delete, Switch off, ...) = the same shape in red.
   Disabled = clearly different: no colour, grey text, dashed border, not-allowed cursor (the explanation line stays).
   Primary (filled) buttons keep their own rule above. Specificity: secondary 2 classes < danger 3 < disabled 4, so each wins where it should. */
.st-btn.st-btn:where(:not(.st-btn-primary, .st-btn-ghost)) { border: 1.5px solid var(--btn2-line); color: var(--btn2-text); background: var(--surface); font-weight: 600; }
.st-btn.st-btn:where(:not(.st-btn-primary, .st-btn-ghost)):hover { background: var(--btn2-hover-bg); color: var(--btn2-hover-text); border-color: var(--btn2-hover-text); }
.st-btn.st-btn.st-btn-careful, .st-btn.st-btn.pbx-btn-danger { border-color: var(--danger); color: var(--danger); background: var(--surface); }
.st-btn.st-btn.st-btn-careful:hover, .st-btn.st-btn.pbx-btn-danger:hover { background: var(--danger-hover-bg); color: var(--danger); border-color: var(--danger); }
.st-btn.st-btn.st-btn:disabled, .st-btn.st-btn.st-btn[aria-disabled="true"], .st-btn.st-btn.st-btn:disabled:hover, .st-btn.st-btn.st-btn[aria-disabled="true"]:hover { opacity: 1; filter: none; cursor: not-allowed; color: var(--disabled-text); background: transparent; border: 1.5px dashed var(--border); }
.st-btn-small { min-height: 32px; padding: 0 10px; font-size: 13px; }

/* Button sets (look rule 23, owner W3 2026-11-05 + width rule 2026-11-06 19:38; every page since round 11). Buttons that
   belong together (Rename + Delete, Save + Cancel, Back + Next) are ONE set: always the same height, a label is never cut.
   Side by side: each button as wide as its own label (min 6.5em). One under the other: all the same width (the longest).
   A form's set (no data-btn-set) is side by side from 768 px; a set that repeats per table row (data-btn-set) only from
   1600 px, and its buttons line up from row to row (staff-shell.js); .st-btn-slot keeps the place of a missing button.
   A <details> button (Rename) opens its form as a panel below the set. Doubled class: wins over page wrappers. */
.st-btn-set.st-btn-set { display: grid; grid-auto-flow: row; grid-auto-rows: 1fr; grid-template-columns: minmax(max-content, var(--st-set-w, max-content)); gap: 8px; align-items: stretch; width: max-content; max-width: 100%; flex: 0 0 auto; margin: 0; }
.st-btn-set.st-btn-set-end { margin-inline-start: auto; }
.st-btn-set > form, .st-btn-set > details { display: flex; min-width: 0; margin: 0; }
.st-btn-set > details { position: relative; }
.st-btn-set .st-btn { width: 100%; min-width: 6.5em; height: 100%; margin: 0; box-sizing: border-box; white-space: nowrap; justify-content: center; text-align: center; }
.st-btn-set > form > .st-btn, .st-btn-set > details > summary { flex: 1 1 auto; }
.st-btn-set > details > summary { list-style: none; }
.st-btn-set > details > summary::-webkit-details-marker { display: none; }
.st-btn-set > details > :not(summary) { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 20; width: max-content; max-width: min(360px, 86vw); margin: 0; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
.st-btn-set > .st-btn-slot { visibility: hidden; min-width: 6.5em; }
@media (min-width: 768px) { .st-btn-set.st-btn-set:not([data-btn-set]) { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: max-content; } }
@media (min-width: 1600px) { .st-btn-set.st-btn-set[data-btn-set] { grid-auto-flow: column; grid-template-columns: var(--st-set-cols, none); grid-auto-columns: max-content; } }

/* Status chips: one meaning in every product, light and dark from the same tokens. */
.st-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: var(--radius); font-size: 12px; font-weight: 600; line-height: 20px; white-space: nowrap; background: var(--neutral-bg); color: var(--neutral-tx); }
.st-chip-ok { background: var(--ok-bg); color: var(--ok-tx); }
.st-chip-bad { background: var(--bad-bg); color: var(--bad-tx); }
.st-chip-warn { background: var(--warn-bg); color: var(--warn-tx); }
.st-chip-info { background: var(--info-bg); color: var(--info-tx); }
.st-chip-neutral { background: var(--neutral-bg); color: var(--neutral-tx); }

/* Form field. */
.st-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.st-field label, .st-label { font-size: 12px; font-weight: 600; color: var(--muted); }
.st-field input, .st-field select, .st-field textarea { min-height: 40px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--input); color: var(--text); font: inherit; width: 100%; box-sizing: border-box; }
.st-field .helptext, .st-field small { color: var(--muted); font-size: 12px; }
.st-field .errorlist, .st-errors { margin: 0; padding: 0; list-style: none; color: var(--bad-tx); font-size: 13px; }
.st-alert { padding: 12px 14px; border-radius: var(--radius); margin-bottom: 18px; overflow-wrap: anywhere; }
.st-alert-bad { background: var(--bad-bg); color: var(--bad-tx); }
.st-alert-ok { background: var(--ok-bg); color: var(--ok-tx); }
.st-alert-info { background: var(--info-bg); color: var(--info-tx); }

/* Table. */
.st-table-wrap { overflow-x: auto; }
.st-table { width: 100%; border-collapse: collapse; }
.st-table th { font-size: 12px; font-weight: 600; color: var(--muted); text-align: left; padding: 12px 16px; background: var(--hover); border-bottom: 1px solid var(--border); }
.st-table td { padding: 14px 16px; border-bottom: 1px solid var(--border); vertical-align: top; overflow-wrap: anywhere; }
.st-table tbody tr:last-child td { border-bottom: 0; }
.st-muted { color: var(--muted); font-size: 12px; }

/* Side panel and empty state. */
.st-side-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; gap: 14px; box-sizing: border-box; }
.st-empty { padding: 40px 24px; text-align: center; color: var(--muted); }

/* Selectable option row (choose a company, company switcher). */
.st-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 56px; padding: 10px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; box-sizing: border-box; }
.st-option:hover { background: var(--active); border-color: var(--brand); }
.st-option strong { display: block; overflow-wrap: anywhere; }
.st-option-current { background: var(--active); cursor: default; }
.st-option-current:hover { border-color: var(--border); }

/* Progress bar and selected indicator use the brand blue. */
.st-progress { height: 6px; background: var(--hover); border-radius: 1px; overflow: hidden; }
.st-progress > span { display: block; height: 100%; background: var(--brand); }

/* Show/hide password (shared; same look as the sign-in page). */
.st-password { position: relative; }
.st-password input { padding-right: 48px; width: 100%; box-sizing: border-box; }
.st-password-toggle { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 40px; height: 36px; border: 0; border-radius: var(--radius); color: var(--muted); background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.st-password-toggle:hover { color: var(--text); background: var(--hover); }
.st-password-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.st-password-toggle .eye-slash { display: none; }
.st-password-toggle[data-visible="true"] .eye-slash { display: block; }
.st-hint { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; font-weight: 400; }