/*
 * A&S Health Club System v4: design system, second edition
 *
 * One stylesheet, no framework, no CDN. Everything a screen needs is a class from this file.
 * See /system/styleguide for every component with its markup.
 *
 * The look comes from the club's own logo: black letters and a deep green wordmark. One plain
 * green marks where you are in the menu and what is in progress. There is no gradient and no bolt.
 *
 * Contents
 *   1. Fonts and tokens                  6. Panels, figures, tables
 *   2. Base                              7. Feedback: badges, alerts, toasts, empty states
 *   3. Shell: sidebar, top bar           8. Overlays: modal, drawer, menu
 *   4. Buttons                           9. Terminal kit: tiles, cart, number pad, people grid
 *   5. Forms                            10. Dashboard pieces, utilities and print
 */

/* ---------------------------------------------------------------------- 1. Fonts and tokens */

/* DM Sans, served from this system so every till shows the same letters and figures. */
@font-face { font-family: "DM Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/dm-sans-regular.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/dm-sans-medium.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/dm-sans-semibold.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/dm-sans-bold.woff2") format("woff2"); }

:root {
    /* Brand, from the logo */
    --green: #0b6b3c;
    --green-strong: #085331;
    --green-soft: #e3f2e9;
    --lime: #c9d62f;
    --teal: #14856a;
    --ink: #0f1713;
    --pulse: var(--green);   /* was a lime-to-teal gradient: now the one plain green */

    /* Surfaces and text */
    --bg: #f2f4f1;
    --surface: #ffffff;
    --surface-2: #f6f8f5;
    --surface-3: #eef1ed;
    --line: #e1e6e0;
    --line-strong: #cbd3cb;
    --text: #0f1713;
    --text-2: #515c56;
    --text-3: #838e87;

    /* Meaning. Red is never decoration: it always means "this removes or refuses something". */
    --ok: #13753f;
    --ok-soft: #e0f3e7;
    --warn: #9a5b00;
    --warn-soft: #fcf1d8;
    --danger: #b92f24;
    --danger-soft: #fce8e5;
    --info: #1c64a3;
    --info-soft: #e3eff9;

    /* Shell */
    --side-bg: #0f1713;
    --side-bg-2: #0a100d;
    --side-text: #c4cdc7;
    --side-muted: #77837b;
    --side-hover: rgba(255, 255, 255, 0.06);
    --side-active: rgba(255, 255, 255, 0.1);
    --side-line: rgba(255, 255, 255, 0.08);
    --side-w: 16.25rem;
    --top-h: 3.75rem;

    --font: "DM Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: "DM Sans", "Segoe UI", Roboto, Arial, sans-serif;

    --radius-s: 0.4375rem;
    --radius: 0.625rem;
    --radius-l: 0.9375rem;
    --shadow-1: 0 1px 2px rgba(15, 23, 19, 0.05);
    --shadow-2: 0 1px 2px rgba(15, 23, 19, 0.06), 0 6px 16px -6px rgba(15, 23, 19, 0.1);
    --shadow-pop: 0 2px 6px rgba(15, 23, 19, 0.08), 0 18px 48px -12px rgba(15, 23, 19, 0.28);
    --focus: 0 0 0 3px rgba(11, 107, 60, 0.28);

    /* Touch target for terminals: a finger, not a mouse pointer. */
    --touch: 3.5rem;

    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --green: #35ab70;
        --green-strong: #46c282;
        --green-soft: #143325;
        --bg: #0b100d;
        --surface: #131a16;
        --surface-2: #18211c;
        --surface-3: #1e2923;
        --line: #232e28;
        --line-strong: #35443b;
        --text: #e7ece8;
        --text-2: #a2ada6;
        --text-3: #74807a;
        --ok: #45bd80;
        --ok-soft: #133324;
        --warn: #e3a63f;
        --warn-soft: #372a10;
        --danger: #f07165;
        --danger-soft: #3c1a16;
        --info: #62ade6;
        --info-soft: #13293b;
        --side-bg: #080c0a;
        --side-bg-2: #060908;
        --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
        --shadow-2: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 16px -6px rgba(0, 0, 0, 0.5);
        --shadow-pop: 0 2px 6px rgba(0, 0, 0, 0.4), 0 18px 48px -12px rgba(0, 0, 0, 0.7);
        --focus: 0 0 0 3px rgba(70, 194, 130, 0.35);
        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --green: #35ab70;
    --green-strong: #46c282;
    --green-soft: #143325;
    --bg: #0b100d;
    --surface: #131a16;
    --surface-2: #18211c;
    --surface-3: #1e2923;
    --line: #232e28;
    --line-strong: #35443b;
    --text: #e7ece8;
    --text-2: #a2ada6;
    --text-3: #74807a;
    --ok: #45bd80;
    --ok-soft: #133324;
    --warn: #e3a63f;
    --warn-soft: #372a10;
    --danger: #f07165;
    --danger-soft: #3c1a16;
    --info: #62ade6;
    --info-soft: #13293b;
    --side-bg: #080c0a;
    --side-bg-2: #060908;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 16px -6px rgba(0, 0, 0, 0.5);
    --shadow-pop: 0 2px 6px rgba(0, 0, 0, 0.4), 0 18px 48px -12px rgba(0, 0, 0, 0.7);
    --focus: 0 0 0 3px rgba(70, 194, 130, 0.35);
    color-scheme: dark;
}

/* ---------------------------------------------------------------------- 2. Base */

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
    font-feature-settings: "ss01", "cv11";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 600; line-height: 1.2; }
h1 { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.022em; }
h2 { font-size: 1.1875rem; letter-spacing: -0.012em; }
h3 { font-size: 1rem; letter-spacing: -0.006em; }
h4 { font-size: 0.9375rem; }

p { margin: 0 0 0.75rem; max-width: 72ch; }
a { color: var(--green); text-decoration-thickness: 1px; text-underline-offset: 2px; }
/* :where() keeps this at the lowest weight, so any class on a link (button, sidebar, menu) wins on hover. */
a:where(:hover) { color: var(--green-strong); }
strong, b { font-weight: 600; }
small, .small { font-size: 0.8125rem; }
code, kbd, pre { font-family: "Cascadia Mono", Consolas, Menlo, monospace; font-size: 0.8125em; }
code { padding: 0.0625rem 0.3125rem; background: var(--surface-3); border-radius: 0.3125rem; color: var(--text-2); }
pre { margin: 0; padding: 0.75rem 1rem; overflow-x: auto; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); }
pre code { padding: 0; background: none; }
hr { border: 0; border-top: 1px solid var(--line); margin: 1.25rem 0; }
img, svg { max-width: 100%; vertical-align: middle; }
::selection { background: rgba(127, 184, 69, 0.35); }

:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--radius-s); }

.muted { color: var(--text-2); }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum", "ss01", "cv11"; }

.icon { width: 1.25em; height: 1.25em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------------- 3. Shell */

.shell { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100vh; }

.side {
    position: sticky; top: 0; height: 100vh;
    display: flex; flex-direction: column;
    background: linear-gradient(180deg, var(--side-bg) 0%, var(--side-bg-2) 100%); color: var(--side-text);
    overflow-y: auto; scrollbar-width: thin; scrollbar-color: #2a352e transparent;
}
.side-brand { display: flex; align-items: center; gap: 0.75rem; padding: 1.125rem 1.125rem 1rem; color: #fff; text-decoration: none; }
.side-brand:hover { color: #fff; }
/* The logo has black letters, so it always sits on its own white tile. */
.side-brand-mark {
    display: grid; place-items: center; width: 2.625rem; height: 2.625rem; flex: none; overflow: hidden;
    background: #fff; color: var(--ink); border-radius: 0.75rem;
    font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem; letter-spacing: -0.03em;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 6px 14px -6px rgba(0, 0, 0, 0.6);
}
.side-brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.side-brand-name { font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; line-height: 1.15; letter-spacing: -0.015em; }
.side-brand-name small { display: block; margin-top: 0.125rem; font-family: var(--font); font-weight: 400; font-size: 0.75rem; letter-spacing: 0; color: var(--side-muted); }

.side-nav { flex: 1; padding: 0.25rem 0.75rem 1rem; }
.side-section + .side-section { margin-top: 0.25rem; }
.side-group {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    margin: 0.75rem 0 0.125rem; padding: 0.375rem 0.625rem;
    font: inherit; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.01em; text-align: left;
    color: var(--side-muted); background: none; border: 0; border-radius: var(--radius-s); cursor: pointer;
}
.side-group:hover { color: var(--side-text); }
.side-group .icon { width: 0.875rem; height: 0.875rem; transition: transform 0.15s ease; }
.side-section.is-closed .side-group .icon { transform: rotate(-90deg); }
.side-section.is-closed .side-items { display: none; }
.side-link {
    position: relative; display: flex; align-items: center; gap: 0.75rem;
    min-height: 2.375rem; padding: 0.375rem 0.625rem; margin-bottom: 1px;
    font-size: 0.90625rem; font-weight: 500; color: var(--side-text); text-decoration: none; border-radius: var(--radius-s);
}
.side-link .icon { width: 1.1875rem; height: 1.1875rem; color: var(--side-muted); }
.side-link:hover { background: var(--side-hover); color: #fff; }
.side-link:hover .icon { color: var(--side-text); }
.side-link.is-active { background: var(--side-active); color: #fff; font-weight: 600; }
.side-link.is-active .icon { color: #fff; }
/* The pulse marks where you are, like a line painted on a pitch. */
.side-link.is-active::before { content: ""; position: absolute; left: -0.75rem; top: 0.4375rem; bottom: 0.4375rem; width: 0.25rem; background: var(--pulse); border-radius: 0 0.25rem 0.25rem 0; }
.side-foot { padding: 0.875rem 1.25rem 1rem; font-size: 0.6875rem; line-height: 1.5; color: var(--side-muted); border-top: 1px solid var(--side-line); }

.main { min-width: 0; display: flex; flex-direction: column; }

.top {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; gap: 0.625rem;
    height: var(--top-h); padding: 0 1.75rem;
    background: var(--surface); border-bottom: 1px solid var(--line);
}
.top-title { font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-space { flex: 1; }
.top-date { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; font-size: 0.8125rem; font-weight: 500; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: 2rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.top-date .icon { width: 1rem; height: 1rem; color: var(--text-3); }
.top-user { display: flex; align-items: center; gap: 0.625rem; padding: 0.3125rem 0.625rem 0.3125rem 0.3125rem; border-radius: 2rem; background: none; border: 1px solid transparent; color: inherit; font: inherit; font-weight: 500; text-align: left; cursor: pointer; }
.top-user:hover { background: var(--surface-2); border-color: var(--line); }
.top-user .icon { width: 1rem; height: 1rem; color: var(--text-3); }
.top-user-name { line-height: 1.2; }
.top-user-name small { display: block; font-size: 0.75rem; font-weight: 400; color: var(--text-3); }
.avatar { display: grid; place-items: center; width: 2.125rem; height: 2.125rem; flex: none; border-radius: 50%; background: var(--green-soft); color: var(--green); font-family: var(--font-display); font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.01em; }
.side-toggle { display: none; }

.page { flex: 1; padding: 1.75rem 1.75rem 3.5rem; width: 100%; max-width: 124rem; margin-inline: auto; }
@media (min-width: 110rem) { .page { padding-inline: 2.25rem; } }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.875rem 1.25rem; margin-bottom: 1.5rem; }
.page-head > div:first-child { flex: 1; min-width: 14rem; }
.page-head p { margin: 0.375rem 0 0; color: var(--text-2); }
/* The small "back to" line some pages put above their title. */
.page-head p.mb-0 { margin: 0 0 0.25rem; font-size: 0.8125rem; font-weight: 500; }
.page-head p.mb-0 a { color: var(--text-2); text-decoration: none; }
.page-head p.mb-0 a::before { content: "\2190\00a0"; }
.page-head p.mb-0 a:hover { color: var(--green); }
.page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }

@media (max-width: 64rem) {
    .shell { grid-template-columns: minmax(0, 1fr); }
    .side { position: fixed; z-index: 40; width: var(--side-w); transform: translateX(-100%); transition: transform 0.2s ease; }
    .shell.is-side-open .side { transform: none; box-shadow: var(--shadow-pop); }
    .shell.is-side-open::after { content: ""; position: fixed; inset: 0; z-index: 30; background: rgba(8, 14, 10, 0.5); }
    .side-toggle { display: inline-flex; }
    .top { padding: 0 1rem; }
    .page { padding: 1.25rem 1rem 3rem; }
}
@media (max-width: 40rem) { .top-date, .top-user-name { display: none; } .top-user { padding: 0.25rem; } }

/* Sign-in and other pages without the shell */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); background: var(--surface); }
.auth-art {
    position: relative; overflow: hidden; isolation: isolate;
    display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
    padding: 2.75rem 3.25rem 3rem; color: #fff;
    background: radial-gradient(120% 90% at 85% 10%, #17362a 0%, #0f1713 46%, #090e0b 100%);
}
.auth-art::after {
    content: ""; position: absolute; z-index: -1; inset: 0;
    background: linear-gradient(90deg, rgba(9, 14, 11, 0.94) 0%, rgba(9, 14, 11, 0.72) 38%, rgba(9, 14, 11, 0) 72%);
}
.auth-brand { display: flex; align-items: center; gap: 0.875rem; font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; letter-spacing: -0.015em; }
.auth-brand .side-brand-mark { width: 3rem; height: 3rem; }
.auth-art h1 { font-size: clamp(2.75rem, 6vw, 5rem); line-height: 0.96; font-weight: 700; letter-spacing: -0.04em; }
.auth-art p { margin: 1.25rem 0 0; max-width: 34ch; font-size: 1.0625rem; color: #d3dbd5; }
.auth-depts { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.75rem; max-width: 27rem; }
.auth-depts span { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.3125rem 0.75rem; font-size: 0.8125rem; font-weight: 500; color: #e7ece8; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 2rem; }
.auth-depts span::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--dept, var(--lime)); }
.auth-form { background: var(--surface); padding: 3rem 2.75rem; display: flex; flex-direction: column; justify-content: center; }
.auth-form > .auth-inner { width: 100%; max-width: 23rem; margin: auto; }
.auth-foot { margin-top: 2.5rem; font-size: 0.75rem; color: var(--text-3); }
.auth-mobile-brand { display: none; align-items: center; gap: 0.75rem; margin-bottom: 2rem; font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; }
.auth-mobile-brand .side-brand-mark { box-shadow: 0 0 0 1px var(--line); }
@media (max-width: 56rem) { .auth { grid-template-columns: minmax(0, 1fr); } .auth-art { display: none; } .auth-mobile-brand { display: flex; } .auth-form { padding: 2rem 1.25rem; } }

/* ---------------------------------------------------------------------- 4. Buttons */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    min-height: 2.5rem; padding: 0.5rem 0.9375rem;
    font: inherit; font-size: 0.875rem; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap;
    color: var(--text); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius);
    box-shadow: var(--shadow-1);
    cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
    transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.btn .icon { width: 1.125rem; height: 1.125rem; }
.btn:hover { background: var(--surface-2); border-color: var(--text-3); color: var(--text); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn[disabled] { opacity: 0.5; pointer-events: none; box-shadow: none; }
/* A button that is waiting for the server shows a turning ring in place of its icon. */
.btn.is-busy { pointer-events: none; opacity: 0.8; }
.btn.is-busy::before { content: ""; width: 0.875rem; height: 0.875rem; flex: none; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.6s linear infinite; }
.btn.is-busy > .icon:first-child { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

.btn-primary { background: var(--green); border-color: var(--green); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 1px 2px rgba(8, 83, 49, 0.4); }
.btn-primary:hover { background: var(--green-strong); border-color: var(--green-strong); color: #fff; }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 1px 2px rgba(120, 30, 22, 0.4); }
.btn-danger:hover { filter: brightness(0.93); background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-quiet { background: transparent; border-color: transparent; box-shadow: none; }
.btn-quiet:hover { background: var(--surface-3); border-color: transparent; }
:root[data-theme="dark"] .btn-primary, :root[data-theme="dark"] .btn-danger { color: #06100b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-primary, :root:not([data-theme="light"]) .btn-danger { color: #06100b; } }

.btn-s { min-height: 2rem; padding: 0.25rem 0.6875rem; font-size: 0.8125rem; border-radius: var(--radius-s); }
.btn-s .icon { width: 1rem; height: 1rem; }
.btn-touch { min-height: var(--touch); padding: 0.75rem 1.25rem; font-size: 1.0625rem; border-radius: var(--radius-l); }
.btn-block { display: flex; width: 100%; }
.btn-icon { width: 2.5rem; padding: 0; }
.btn-icon.btn-s { width: 2rem; }
.btn-icon.btn-touch { width: var(--touch); }

/* ---------------------------------------------------------------------- 5. Forms */

.field { margin-bottom: 1.125rem; }
.field > label, .label { display: block; margin-bottom: 0.375rem; font-weight: 600; font-size: 0.8125rem; color: var(--text); }
/* A switch or tick box that is itself the field keeps its own layout. */
.field > label.switch, .field > label.check { display: inline-flex; margin-bottom: 0; font-size: inherit; font-weight: 500; }
.hint { margin-top: 0.375rem; font-size: 0.8125rem; line-height: 1.4; color: var(--text-2); }
.field-error { margin-top: 0.375rem; font-size: 0.8125rem; font-weight: 600; color: var(--danger); }

.input, .select, .textarea {
    display: block; width: 100%; min-height: 2.625rem; padding: 0.5rem 0.75rem;
    font: inherit; color: var(--text); background: var(--surface);
    border: 1px solid var(--line-strong); border-radius: var(--radius);
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.select { padding-right: 2rem; }
.textarea { min-height: 5.5rem; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--text-3); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--text-3); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--green); box-shadow: var(--focus); }
.input[readonly], .input[disabled], .select[disabled], .textarea[disabled] { background: var(--surface-2); color: var(--text-2); border-color: var(--line); }
.input[type="file"] { padding: 0.375rem; font-size: 0.875rem; }
.input[type="search"] { -webkit-appearance: none; appearance: none; }
.input-touch { min-height: var(--touch); padding-left: 1rem; padding-right: 1rem; font-size: 1.125rem; border-radius: var(--radius-l); }
.input-num { font-variant-numeric: tabular-nums; text-align: right; }
.field.has-error .input, .field.has-error .select, .field.has-error .textarea { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0 1.25rem; }
.form-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }

.check { display: inline-flex; align-items: center; gap: 0.5625rem; min-height: 2rem; cursor: pointer; }
.check input { width: 1.125rem; height: 1.125rem; flex: none; accent-color: var(--green); }

.switch { display: inline-flex; align-items: center; gap: 0.6875rem; font-weight: 500; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch span { position: relative; width: 2.625rem; height: 1.5rem; flex: none; background: var(--line-strong); border-radius: 1rem; transition: background 0.15s; }
.switch span::after { content: ""; position: absolute; top: 0.1875rem; left: 0.1875rem; width: 1.125rem; height: 1.125rem; background: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: transform 0.15s; }
.switch input:checked + span { background: var(--green); }
.switch input:checked + span::after { transform: translateX(1.125rem); }
.switch input:focus-visible + span { box-shadow: var(--focus); }
.switch input:disabled + span { opacity: 0.5; }

/* ---------------------------------------------------------------------- 6. Panels, figures, tables */

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow-1); }
.panel + .panel, form + .panel, .panel + form, .alert + .panel { margin-top: 1.25rem; }
.panel-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; min-height: 3.5rem; padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--line); }
.panel-head h2, .panel-head h3 { flex: 1; font-size: 1rem; letter-spacing: -0.008em; }
.panel-head:last-child { border-bottom: 0; }
.panel-body { padding: 1.25rem; }
.panel-body > :last-child { margin-bottom: 0; }
/* The first and last rows of a table follow the panel's rounded corners. */
.panel > .table-wrap:last-child, .panel > .pager:last-child { border-radius: 0 0 var(--radius-l) var(--radius-l); }
.panel > .table-wrap:first-child { border-radius: var(--radius-l) var(--radius-l) 0 0; }
a.panel { transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease; }
a.panel:hover { border-color: var(--line-strong); box-shadow: var(--shadow-2); transform: translateY(-1px); color: inherit; }

.grid { display: grid; gap: 1.25rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); }
.grid > .panel + .panel { margin-top: 0; }

/* A figure with its name. Used on dashboards, one row of them at most. */
.stat { position: relative; padding: 1.125rem 1.25rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow-1); }
.stat-name { font-size: 0.8125rem; font-weight: 500; color: var(--text-2); }
.stat-value { margin: 0.25rem 0 0.125rem; font-family: var(--font-display); font-weight: 700; font-size: 1.875rem; line-height: 1.15; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.stat-note { font-size: 0.8125rem; color: var(--text-2); }
.stat-note.is-up { color: var(--ok); }
.stat-note.is-down { color: var(--danger); }
.stat-icon { position: absolute; top: 1rem; right: 1rem; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius); background: var(--green-soft); color: var(--green); }
.stat-icon .icon { width: 1.1875rem; height: 1.1875rem; }
a.stat { display: block; color: inherit; text-decoration: none; transition: border-color 0.12s ease, box-shadow 0.12s ease; }
a.stat:hover { border-color: var(--line-strong); box-shadow: var(--shadow-2); color: inherit; }

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.table th { padding: 0.6875rem 1rem; text-align: left; font-size: 0.75rem; font-weight: 600; color: var(--text-2); white-space: nowrap; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table th:first-child, .table td:first-child { padding-left: 1.25rem; }
.table th:last-child, .table td:last-child { padding-right: 1.25rem; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background-color 0.1s ease; }
.table tbody tr:hover td { background: var(--surface-2); }
.table td strong { font-weight: 600; }
.table .is-num { text-align: right; }
.table .is-actions { text-align: right; white-space: nowrap; }
.table .is-actions .btn + .btn { margin-left: 0.25rem; }
.table tfoot td { font-weight: 600; background: var(--surface-2); border-top: 1px solid var(--line-strong); border-bottom: 0; }
.table-dense th, .table-dense td { padding-top: 0.4375rem; padding-bottom: 0.4375rem; }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.toolbar .input, .toolbar .select { width: auto; min-width: 11rem; min-height: 2.5rem; }
.toolbar .input[type="search"] { flex: 1 1 14rem; max-width: 24rem; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.25rem; padding: 0.625rem 1.25rem; border-top: 1px solid var(--line); font-size: 0.8125rem; color: var(--text-2); }

.tabs { display: flex; gap: 0.25rem; padding: 0 0.75rem; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tab { position: relative; padding: 0.875rem 0.75rem; font: inherit; font-size: 0.875rem; font-weight: 600; color: var(--text-2); background: none; border: 0; cursor: pointer; white-space: nowrap; }
.tab:hover { color: var(--text); }
.tab.is-active { color: var(--green); }
.tab.is-active::after { content: ""; position: absolute; left: 0.75rem; right: 0.75rem; bottom: -1px; height: 0.1875rem; background: var(--green); border-radius: 0.1875rem 0.1875rem 0 0; }
.tab-panel[hidden] { display: none; }

/* ---------------------------------------------------------------------- 7. Feedback */

.badge { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.125rem 0.5625rem; font-size: 0.75rem; font-weight: 600; line-height: 1.5; border-radius: 1rem; background: var(--surface-3); color: var(--text-2); white-space: nowrap; }
/* A state badge carries a dot, so it is not told apart by colour alone. */
.badge-ok, .badge-warn, .badge-danger, .badge-info { padding-left: 0.5rem; }
.badge-ok::before, .badge-warn::before, .badge-danger::before, .badge-info::before { content: ""; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: currentColor; }
.badge-ok { background: var(--ok-soft); color: var(--ok); }
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-danger { background: var(--danger-soft); color: var(--danger); }
.badge-info { background: var(--info-soft); color: var(--info); }

.alert { display: flex; gap: 0.75rem; padding: 0.875rem 1rem; margin-bottom: 1.25rem; font-size: 0.875rem; border-radius: var(--radius); background: var(--info-soft); color: var(--text); border: 1px solid transparent; border-left: 0.25rem solid var(--info); }
.alert-ok { background: var(--ok-soft); border-left-color: var(--ok); }
.alert-warn { background: var(--warn-soft); border-left-color: var(--warn); }
.alert-danger { background: var(--danger-soft); border-left-color: var(--danger); }
.alert > div > :last-child { margin-bottom: 0; }

.empty { padding: 3rem 1.25rem; text-align: center; color: var(--text-2); }
/* Two soft rings, like a ripple in the pool, stand in for an illustration. */
.empty::before { content: ""; display: block; width: 3.5rem; height: 3.5rem; margin: 0 auto 1.125rem; border-radius: 50%; background: radial-gradient(circle, var(--green-soft) 0 38%, transparent 39% 52%, var(--surface-3) 53% 70%, transparent 71%); }
.empty h3 { color: var(--text); margin-bottom: 0.375rem; font-size: 1.0625rem; }
.empty p { margin: 0 auto 1.125rem; max-width: 46ch; }
.empty p:last-child { margin-bottom: 0; }

.toasts { position: fixed; z-index: 90; right: 1.25rem; bottom: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; width: min(24rem, calc(100vw - 2.5rem)); }
.toast { display: flex; align-items: flex-start; gap: 0.625rem; padding: 0.8125rem 1rem; font-size: 0.875rem; font-weight: 500; background: var(--ink); color: #fff; border-radius: var(--radius); box-shadow: var(--shadow-pop); border-left: 0.25rem solid var(--lime); animation: rise 0.18s ease-out; }
.toast-ok { border-left-color: #45bd80; }
.toast-danger { border-left-color: #f07165; }
.toast-warn { border-left-color: #e3a63f; }
.toast button { margin-left: auto; padding: 0 0.25rem; background: none; border: 0; color: inherit; font-size: 1.125rem; line-height: 1; cursor: pointer; opacity: 0.7; }
@keyframes rise { from { opacity: 0; transform: translateY(0.5rem); } }

/* ---------------------------------------------------------------------- 8. Overlays */

.overlay { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 1rem; background: rgba(9, 14, 11, 0.55); backdrop-filter: blur(2px); animation: fade 0.14s ease-out; }
.overlay[hidden] { display: none; }
.modal { display: flex; flex-direction: column; width: min(35rem, 100%); max-height: calc(100vh - 2rem); background: var(--surface); border-radius: 1.125rem; box-shadow: var(--shadow-pop); animation: rise 0.16s ease-out; }
.modal-l { width: min(58rem, 100%); }
.modal-head { display: flex; align-items: center; gap: 0.75rem; padding: 1.125rem 1.5rem; border-bottom: 1px solid var(--line); }
.modal-head h2 { flex: 1; font-size: 1.125rem; }
.modal-body { padding: 1.5rem; overflow-y: auto; }
.modal-foot { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 0.5rem; padding: 1rem 1.5rem; border-top: 1px solid var(--line); background: var(--surface-2); border-radius: 0 0 1.125rem 1.125rem; }
@keyframes fade { from { opacity: 0; } }

.overlay.is-drawer { place-items: stretch end; padding: 0; }
.overlay.is-drawer .modal { width: min(32rem, 100%); height: 100vh; max-height: none; border-radius: 0; animation: slide 0.18s ease-out; }
.overlay.is-drawer .modal-foot { border-radius: 0; }
@keyframes slide { from { transform: translateX(2rem); opacity: 0; } }

.menu { position: relative; display: inline-block; }
.menu-list { position: absolute; z-index: 50; right: 0; top: calc(100% + 0.375rem); min-width: 13rem; padding: 0.375rem; background: var(--surface); border: 1px solid var(--line); border-radius: 0.75rem; box-shadow: var(--shadow-pop); }
.menu-list[hidden] { display: none; }
.menu-item { display: flex; align-items: center; gap: 0.6875rem; width: 100%; min-height: 2.25rem; padding: 0.4375rem 0.6875rem; font: inherit; font-size: 0.875rem; font-weight: 500; text-align: left; text-decoration: none; color: var(--text); background: none; border: 0; border-radius: var(--radius-s); cursor: pointer; }
.menu-item .icon { width: 1.0625rem; height: 1.0625rem; color: var(--text-3); }
.menu-item:hover { background: var(--surface-3); color: var(--text); }
.menu-item.is-danger, .menu-item.is-danger .icon { color: var(--danger); }
.menu-item.is-danger:hover { background: var(--danger-soft); }

/* ---------------------------------------------------------------------- 9. Terminal kit */

/* Full-screen layout for tills, waiter tablets and counters. No sidebar: every pixel sells. */
.term { display: flex; flex-direction: column; height: 100vh; overflow: hidden; background: var(--bg); }
.term-bar { position: relative; display: flex; align-items: center; gap: 0.875rem; height: 3.5rem; padding: 0 0.875rem; flex: none; background: var(--side-bg); color: #fff; }
.term-bar .side-brand-mark { width: 2.25rem; height: 2.25rem; border-radius: 0.625rem; }
.term-where { font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.012em; }
.term-meta { color: var(--side-text); font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.term-bar .btn { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14); color: #fff; min-height: 2.375rem; box-shadow: none; }
.term-bar .btn:hover { background: rgba(255, 255, 255, 0.12); }
.term-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, 26rem); }
.term-main { min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.term-side { display: flex; flex-direction: column; min-height: 0; background: var(--surface); border-left: 1px solid var(--line); box-shadow: -8px 0 24px -16px rgba(15, 23, 19, 0.18); }
@media (max-width: 56rem) { .term { height: auto; min-height: 100vh; overflow: visible; } .term-body { grid-template-columns: minmax(0, 1fr); } .term-side { border-left: 0; border-top: 1px solid var(--line); } }

.chips { display: flex; gap: 0.5rem; padding: 0.875rem; overflow-x: auto; flex: none; scrollbar-width: none; }
.chip { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.5rem 1rem; font: inherit; font-size: 0.875rem; font-weight: 600; white-space: nowrap; color: var(--text); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 2rem; cursor: pointer; }
.chip::before { content: ""; width: 0.625rem; height: 0.625rem; flex: none; border-radius: 50%; background: var(--dept, var(--text-3)); }
.chip.is-active { background: var(--text); border-color: var(--text); color: var(--bg); }

/* Item tiles. The coloured edge is the department: --dept is set inline from the department's colour. */
.tiles { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(9.75rem, 1fr)); grid-auto-rows: min-content; gap: 0.6875rem; padding: 0 0.875rem 0.875rem; }
.tile {
    position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 0.5rem;
    min-height: 6rem; padding: 0.8125rem 0.8125rem 0.6875rem 1.0625rem; text-align: left;
    font: inherit; color: var(--text); background: var(--surface);
    border: 1px solid var(--line); border-radius: 0.75rem; box-shadow: var(--shadow-1); cursor: pointer; overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}
.tile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0.3125rem; background: var(--dept, var(--line-strong)); }
.tile:active { transform: scale(0.98); background: var(--surface-2); }
.tile-name { font-weight: 600; font-size: 0.9375rem; line-height: 1.25; }
.tile-price { font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; font-variant-numeric: tabular-nums; color: var(--text-2); }
.tile.is-out { opacity: 0.5; }
.tile.is-out .tile-price::after { content: " (out)"; color: var(--danger); font-family: var(--font); font-size: 0.8125rem; }
.tile-count { position: absolute; bottom: 0.5rem; right: 0.5rem; min-width: 1.625rem; padding: 0 0.375rem; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 0.875rem; line-height: 1.625rem; background: var(--lime); color: #0f1713; border-radius: 1rem; }

.cart-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.875rem 1.125rem; border-bottom: 1px solid var(--line); flex: none; }
.cart-head h2 { flex: 1; font-size: 1.125rem; }
.cart-lines { flex: 1; min-height: 6rem; overflow-y: auto; }
.cart-line { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0.25rem 0.75rem; padding: 0.6875rem 1.125rem; border-bottom: 1px solid var(--line); border-left: 0.25rem solid var(--dept, transparent); }
.cart-line-name { font-weight: 600; line-height: 1.25; }
.cart-line-note { grid-column: 1 / -1; font-size: 0.8125rem; color: var(--text-2); }
.cart-line-total { min-width: 5rem; text-align: right; font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; }
.qty button { width: 2.5rem; height: 2.5rem; font-size: 1.25rem; line-height: 1; color: var(--text); background: var(--surface); border: 0; cursor: pointer; }
.qty button:active { background: var(--surface-3); }
.qty output { min-width: 2.25rem; text-align: center; font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; }

.totals { padding: 0.875rem 1.125rem; border-top: 1px solid var(--line-strong); background: var(--surface-2); flex: none; }
.totals-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.125rem 0; font-size: 0.875rem; color: var(--text-2); font-variant-numeric: tabular-nums; }
.totals-due { margin-top: 0.5rem; padding-top: 0.625rem; border-top: 1px dashed var(--line-strong); font-size: 0.9375rem; font-weight: 600; color: var(--text); align-items: baseline; }
.totals-due strong { font-family: var(--font-display); font-size: 2.125rem; font-weight: 700; line-height: 1; letter-spacing: -0.03em; }
.cart-actions { display: grid; grid-template-columns: 1fr 2fr; gap: 0.5rem; padding: 0.75rem 1.125rem 1.125rem; background: var(--surface-2); flex: none; }

/* Payment methods and other big either-or choices */
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 0.625rem; }
.choice { min-height: var(--touch); padding: 0.75rem 0.875rem; font: inherit; font-weight: 600; text-align: center; color: var(--text); background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: 0.75rem; cursor: pointer; transition: border-color 0.12s ease, background-color 0.12s ease; }
.choice:hover { border-color: var(--text-3); }
.choice.is-active { border-color: var(--green); background: var(--green-soft); box-shadow: 0 0 0 1px var(--green); }

/* Number pad: amounts, quantities and PINs */
.pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; max-width: 20rem; }
.pad button { min-height: 3.75rem; font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--text); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 0.75rem; box-shadow: var(--shadow-1); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pad button:active { background: var(--green-soft); border-color: var(--green); }
.pad-display { grid-column: 1 / -1; min-height: 3.5rem; padding: 0.5rem 0.875rem; display: flex; align-items: center; justify-content: flex-end; font-family: var(--font-display); font-size: 1.875rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; background: var(--surface-2); border: 1px solid var(--line); border-radius: 0.75rem; }
.pin-dots { display: flex; justify-content: center; gap: 0.875rem; margin: 1rem 0; }
.pin-dots i { width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid var(--line-strong); transition: background-color 0.1s ease; }
.pin-dots i.is-on { background: var(--green); border-color: var(--green); }

/* People grid: floor staff tap their name, then enter a PIN */
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.875rem; }
.person { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1.25rem 0.5rem 1rem; font: inherit; font-weight: 600; text-align: center; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow-1); cursor: pointer; }
.person:hover { border-color: var(--line-strong); box-shadow: var(--shadow-2); }
.person:active { background: var(--green-soft); border-color: var(--green); }
.person .avatar { width: 3.5rem; height: 3.5rem; font-size: 1.25rem; }
.person small { font-weight: 400; color: var(--text-2); }

/* ---------------------------------------------------------------------- 10. Dashboard pieces, utilities and print */

/* The band at the top of the dashboard. */
.hero { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem 2rem; padding: 1.75rem 2rem; margin-bottom: 1.25rem; color: #fff; border-radius: 1.25rem; background: radial-gradient(120% 140% at 100% 0%, #1a3d2f 0%, #0f1713 55%, #0a100d 100%); }
.hero h1 { font-size: clamp(1.625rem, 3vw, 2.125rem); }
.hero p { margin: 0.5rem 0 0; max-width: 46ch; color: #cdd6cf; }
.hero .page-actions .btn { background: rgba(20, 30, 25, 0.72); border-color: rgba(255, 255, 255, 0.22); color: #fff; box-shadow: none; }
.hero .page-actions .btn:hover { background: rgba(40, 54, 46, 0.9); }
.hero .page-actions .btn-primary { background: #fff; border-color: #fff; color: #0f1713; }
.hero .page-actions .btn-primary:hover { background: #e7ece8; border-color: #e7ece8; color: #0f1713; }

/* One card per department, edged with its colour. */
.depts { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 0.75rem; }
.dept { position: relative; display: block; padding: 0.875rem 1rem 0.875rem 1.25rem; color: inherit; text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-radius: 0.75rem; overflow: hidden; }
.dept::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0.3125rem; background: var(--dept, var(--line-strong)); }
.dept strong { display: block; font-size: 0.9375rem; }
.dept span { font-size: 0.8125rem; color: var(--text-2); }
a.dept:hover { border-color: var(--line-strong); color: inherit; }

/* A list of things that happened, newest first. */
.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: flex; gap: 0.875rem; padding: 0.8125rem 1.25rem; border-bottom: 1px solid var(--line); font-size: 0.875rem; }
.feed li:last-child { border-bottom: 0; }
.feed-body { flex: 1; min-width: 0; }
.feed-body strong { font-weight: 600; }
.feed-time { flex: none; font-size: 0.75rem; color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Shortcuts: an icon, a name, a line about it. */
.quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.75rem; }
.quick a { display: flex; align-items: center; gap: 0.875rem; padding: 0.875rem 1rem; color: inherit; text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-radius: 0.75rem; transition: border-color 0.12s ease, box-shadow 0.12s ease; }
.quick a:hover { border-color: var(--green); box-shadow: var(--shadow-2); color: inherit; }
.quick a > .icon { width: 2.375rem; height: 2.375rem; padding: 0.5625rem; flex: none; border-radius: var(--radius); background: var(--green-soft); color: var(--green); }
.quick strong { display: block; font-size: 0.875rem; }
.quick span { font-size: 0.8125rem; color: var(--text-2); }

.row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.row-between { justify-content: space-between; }
.stack > * + * { margin-top: 0.75rem; }
.mt-0 { margin-top: 0 !important; } .mt-1 { margin-top: 0.5rem !important; } .mt-2 { margin-top: 1.25rem !important; } .mt-3 { margin-top: 1.75rem !important; }
.mb-0 { margin-bottom: 0 !important; } .mb-1 { margin-bottom: 0.5rem !important; } .mb-2 { margin-bottom: 1.25rem !important; }
.text-right { text-align: right; } .text-center { text-align: center; }
.text-ok { color: var(--ok); } .text-danger { color: var(--danger); } .text-warn { color: var(--warn); }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

@media print {
    .side, .top, .toasts, .page-actions, .no-print { display: none !important; }
    .shell { display: block; }
    body { background: #fff; color: #000; }
    .panel, .stat { border: 0; box-shadow: none; }
    .page { padding: 0; max-width: none; }
}

/* ---------- Documents: facts, progress, print ---------- */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem 1.5rem; margin: 0; }
.facts dt { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.facts dd { margin: 0.25rem 0 0; font-weight: 600; overflow-wrap: anywhere; }
.facts dd small { display: block; font-weight: 400; color: var(--text-2); }
.steps { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.25rem; padding: 0; list-style: none; counter-reset: step; }
.steps li { counter-increment: step; display: flex; align-items: center; gap: 0.5rem; flex: 1 1 9rem; padding: 0.625rem 0.875rem; font-size: 0.8125rem; font-weight: 600; color: var(--text-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.steps li::before { content: counter(step); display: grid; place-items: center; flex: none; width: 1.5rem; height: 1.5rem; font-size: 0.75rem; border-radius: 50%; background: var(--surface-3); color: var(--text-2); }
.steps li.is-done { color: var(--text); }
.steps li.is-done::before { content: "\2713"; background: var(--ok-soft); color: var(--ok); }
.steps li.is-now { color: var(--green); border-color: var(--green); }
.steps li.is-now::before { background: var(--green); color: #fff; }
.steps li.is-stopped { color: var(--danger); border-color: var(--danger); }
.steps li.is-stopped::before { content: "\00d7"; background: var(--danger-soft); color: var(--danger); }
.steps li small { display: block; font-weight: 400; color: var(--text-3); }
.bar { height: 0.375rem; min-width: 5rem; border-radius: 1rem; background: var(--surface-3); overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: 1rem; background: var(--green); }
.bar.is-low > span { background: var(--warn); }
.bar.is-out > span { background: var(--danger); }
.table tr.is-diff td { background: var(--warn-soft); }
.print-only { display: none; }
@media print {
    .print-only { display: block; }
    .steps, .tabs, .toolbar, .btn { display: none !important; }
    .table { font-size: 11px; }
}
.alert-info { background: var(--info-soft); border-left-color: var(--info); }
.dot { display: inline-block; width: 0.5rem; height: 0.5rem; margin-right: 0.4375rem; border-radius: 50%; vertical-align: 0.0625rem; }
.stat-value.is-long { font-size: 1.4375rem; line-height: 1.5; }
.panel + .grid, .grid + .panel, .grid + .grid, .steps + .grid, .alert + .grid { margin-top: 1.25rem; }

/* ---------------------------------------------------------------------- Search and approvals (top bar) */
.top-search { display: inline-flex; align-items: center; gap: 0.5rem; min-width: 13rem; min-height: 2.25rem; padding: 0.3125rem 0.5rem 0.3125rem 0.75rem; font: inherit; font-size: 0.875rem; color: var(--text-3); background: var(--surface-2); border: 1px solid var(--line); border-radius: 2rem; cursor: pointer; }
.top-search:hover, .top-search:focus-visible { border-color: var(--green); color: var(--text-2); outline: none; }
.top-search .icon { width: 1rem; height: 1rem; }
.top-search span { flex: 1; text-align: left; }
.top-search kbd { padding: 0.0625rem 0.375rem; font-family: var(--font); font-size: 0.6875rem; font-weight: 600; color: var(--text-3); background: var(--surface); border: 1px solid var(--line); border-radius: 0.375rem; }
@media (max-width: 60rem) { .top-search { min-width: 0; } .top-search span, .top-search kbd { display: none; } .top-date { display: none; } }

.search-overlay { place-items: start center; padding-top: 12vh; }
.search-box { display: flex; flex-direction: column; width: min(40rem, 100%); max-height: 70vh; background: var(--surface); border-radius: 1rem; box-shadow: var(--shadow-pop); overflow: hidden; }
.search-input { width: 100%; padding: 1rem 1.25rem; font: inherit; font-size: 1.0625rem; color: var(--text); background: none; border: 0; border-bottom: 1px solid var(--line); outline: none; }
.search-list { overflow-y: auto; padding: 0.375rem; }
.search-group { padding: 0.625rem 0.75rem 0.25rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.search-row { display: flex; align-items: baseline; gap: 0.75rem; padding: 0.5625rem 0.75rem; color: var(--text); text-decoration: none; border-radius: 0.5rem; }
.search-row strong { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-row span { flex: 1; min-width: 0; font-size: 0.8125rem; color: var(--text-2); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-row.is-on { background: var(--green-soft); color: var(--text); }
.search-none { padding: 1.5rem 0.75rem; text-align: center; color: var(--text-2); }
.search-foot { padding: 0.5rem 1.25rem; font-size: 0.75rem; color: var(--text-3); background: var(--surface-2); border-top: 1px solid var(--line); }

.top-bell { position: relative; }
.top-bell.has-some { color: var(--danger); }
.approvals-count { position: absolute; top: 0.0625rem; right: 0.0625rem; min-width: 1.125rem; padding: 0 0.25rem; font-size: 0.6875rem; font-weight: 700; line-height: 1.125rem; text-align: center; color: #fff; background: var(--danger); border-radius: 1rem; }
.approvals-count[hidden] { display: none; }
.approvals-float { position: fixed; z-index: 55; left: 1rem; bottom: 1rem; display: inline-flex; align-items: center; gap: 0.5rem; min-height: var(--touch); padding: 0 1.25rem; font: inherit; font-weight: 600; color: #fff; background: var(--danger); border: 0; border-radius: 2rem; box-shadow: var(--shadow-pop); cursor: pointer; }
.approvals-float[hidden] { display: none; }
.approvals-float .approvals-count { position: static; color: var(--danger); background: #fff; }
.approval-card { display: grid; gap: 0.25rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); }
.approval-card + .approval-card { margin-top: 0.75rem; }
.approval-reason { margin-top: 0.25rem; padding: 0.5rem 0.75rem; background: var(--surface-2); border-radius: var(--radius-s); }
.approval-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.625rem; }
.approval-wait { display: grid; justify-items: center; gap: 0.625rem; padding: 1rem 0; text-align: center; }
@media print { .top-search, .top-bell, .approvals-float { display: none !important; } }

/* A row for something switched off, cancelled or gone: still there, but quiet. */
.table tr.is-off td { color: var(--text-3); }
.table tr.is-off td strong, .table tr.is-off td a { color: var(--text-2); font-weight: 500; }

/* Support control: a row's actions wrap under each other instead of pushing the table wide */
.table td.sup-actions { white-space: normal; text-align: right; min-width: 11rem; }
.table td.sup-actions .btn { margin: 0.125rem 0 0.125rem 0.25rem; }
.feed li.is-desk .avatar { background: var(--ok-soft); color: var(--ok); }