/* Colour tokens. Dark mode follows the device unless the staff toggle stored a choice (theme.js sets
   html[data-theme]). Printed documents always keep the light values, on screen and on paper. */
:root,
.receipt-document,
.sticker-document,
.print-document {
    color-scheme: light;
    --page-bg: #f6f8fc;
    --surface: #ffffff;
    --surface-2: #f6f8fc;
    --ink: #15213a;
    --muted: #71809a;
    --line: #e3e9f2;
    --blue: #2864e8;
    --blue-soft: #eaf1ff;
    --blue-line: #cbdcff;
    --blue-disabled: #9db6ef;
    --success: #087d66;
    --success-soft: #e7f6f0;
    --success-line: #bcdfcc;
    --danger: #b42318;
    --danger-soft: #fdecea;
    --danger-line: #f4c8c8;
    --warning: #7a4a00;
    --warning-soft: #fff4de;
    --warning-line: #f1d9a6;
    --shadow: rgba(15, 23, 42, .12);
    --blue-fill: #2864e8;
    --success-fill: #087d66;
    --danger-fill: #b42318;
    --warning-fill: #b76b00;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --page-bg: #0f1523;
        --surface: #172033;
        --surface-2: #1d2840;
        --ink: #e6ebf5;
        --muted: #9eabc2;
        --line: #2c3953;
        --blue: #7ea6ff;
        --blue-soft: #1e2d4f;
        --blue-line: #36518a;
        --blue-disabled: #3b4f7d;
        --success: #5fd3a7;
        --success-soft: #133427;
        --success-line: #245c47;
        --danger: #ff8f85;
        --danger-soft: #3b1d21;
        --danger-line: #6d2f35;
        --warning: #f2bb5c;
        --warning-soft: #3a2c12;
        --warning-line: #6d5321;
        --shadow: rgba(0, 0, 0, .45);
        --blue-fill: #3a6de6;
        --success-fill: #11866a;
        --danger-fill: #c2372c;
        --warning-fill: #a86a12;
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --page-bg: #0f1523;
    --surface: #172033;
    --surface-2: #1d2840;
    --ink: #e6ebf5;
    --muted: #9eabc2;
    --line: #2c3953;
    --blue: #7ea6ff;
    --blue-soft: #1e2d4f;
    --blue-line: #36518a;
    --blue-disabled: #3b4f7d;
    --success: #5fd3a7;
    --success-soft: #133427;
    --success-line: #245c47;
    --danger: #ff8f85;
    --danger-soft: #3b1d21;
    --danger-line: #6d2f35;
    --warning: #f2bb5c;
    --warning-soft: #3a2c12;
    --warning-line: #6d5321;
    --shadow: rgba(0, 0, 0, .45);
    --blue-fill: #3a6de6;
    --success-fill: #11866a;
    --danger-fill: #c2372c;
    --warning-fill: #a86a12;
}

/* Documents stay light inside a dark page. */
:root[data-theme="dark"] :is(.receipt-document, .sticker-document, .print-document) {
    color-scheme: light;
    --page-bg: #f6f8fc;
    --surface: #ffffff;
    --surface-2: #f6f8fc;
    --ink: #15213a;
    --muted: #71809a;
    --line: #e3e9f2;
    --blue: #2864e8;
    --blue-soft: #eaf1ff;
    --blue-line: #cbdcff;
    --blue-disabled: #9db6ef;
    --success: #087d66;
    --success-soft: #e7f6f0;
    --success-line: #bcdfcc;
    --danger: #b42318;
    --danger-soft: #fdecea;
    --danger-line: #f4c8c8;
    --warning: #7a4a00;
    --warning-soft: #fff4de;
    --warning-line: #f1d9a6;
    --shadow: rgba(15, 23, 42, .12);
    --blue-fill: #2864e8;
    --success-fill: #087d66;
    --danger-fill: #b42318;
    --warning-fill: #b76b00;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) :is(.receipt-document, .sticker-document, .print-document) {
        color-scheme: light;
        --page-bg: #f6f8fc;
        --surface: #ffffff;
        --surface-2: #f6f8fc;
        --ink: #15213a;
        --muted: #71809a;
        --line: #e3e9f2;
        --blue: #2864e8;
        --blue-soft: #eaf1ff;
        --blue-line: #cbdcff;
        --blue-disabled: #9db6ef;
        --success: #087d66;
        --success-soft: #e7f6f0;
        --success-line: #bcdfcc;
        --danger: #b42318;
        --danger-soft: #fdecea;
        --danger-line: #f4c8c8;
        --warning: #7a4a00;
        --warning-soft: #fff4de;
        --warning-line: #f1d9a6;
        --shadow: rgba(15, 23, 42, .12);
        --blue-fill: #2864e8;
        --success-fill: #087d66;
        --danger-fill: #b42318;
        --warning-fill: #b76b00;
    }
}

.receipt-document,
.sticker-document,
.print-document {
    background: var(--surface);
    color: var(--ink);
}

/* Paper is always light. */
@media print {
    :root, :root[data-theme="dark"] {
        color-scheme: light;
        --page-bg: #f6f8fc;
        --surface: #ffffff;
        --surface-2: #f6f8fc;
        --ink: #15213a;
        --muted: #71809a;
        --line: #e3e9f2;
        --blue: #2864e8;
        --blue-soft: #eaf1ff;
        --blue-line: #cbdcff;
        --blue-disabled: #9db6ef;
        --success: #087d66;
        --success-soft: #e7f6f0;
        --success-line: #bcdfcc;
        --danger: #b42318;
        --danger-soft: #fdecea;
        --danger-line: #f4c8c8;
        --warning: #7a4a00;
        --warning-soft: #fff4de;
        --warning-line: #f1d9a6;
        --shadow: rgba(15, 23, 42, .12);
        --blue-fill: #2864e8;
        --success-fill: #087d66;
        --danger-fill: #b42318;
        --warning-fill: #b76b00;
    }
}

.theme-toggle {
    align-items: center;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 9px;
    color: var(--ink);
    cursor: pointer;
    display: flex;
    font: inherit;
    gap: 8px;
    justify-content: center;
    padding: 9px 12px;
    width: 100%;
}

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

body {
    margin: 0;
    background: var(--page-bg);
    color: var(--ink);
    font-family: "IBM Plex Sans Arabic", Tahoma, "Segoe UI", sans-serif;
}

a {
    color: var(--blue);
}

a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 3px;
}

h1:focus {
    outline: none;
}

@media print {
    @page { size: A4; margin: 14mm; }
    body:has(.ticket-print-document) { background: #fff; font-size: 11pt; }
    body:has(.ticket-print-document) .tickets-shell { display: block; min-height: 0; }
    body:has(.ticket-print-document) .sidebar { display: none; }
    body:has(.ticket-print-document) .tickets-main { padding: 0; }
    body:has(.receipt-document) { background: #fff; font-size: 11pt; }
    body:has(.receipt-document) .tickets-shell { display: block; min-height: 0; }
    body:has(.receipt-document) .sidebar { display: none; }
    body:has(.receipt-document) .tickets-main { padding: 0; }
    @page sticker-preview { size: auto; margin: 0; }
    body:has(.sticker-document) { background: #fff; }
    body:has(.sticker-document) .tickets-shell { display: block; min-height: 0; }
    body:has(.sticker-document) .sidebar { display: none; }
    body:has(.sticker-document) .tickets-main { padding: 0; }
    .sticker-document { page: sticker-preview; }
}