/*
 * Day and night are the same palette with the roles swapped — the supervisor
 * presses one button and both the lighting and the roster change together, which
 * is the point: the screen should look like the shift it is configured for.
 */
:root,
html[data-theme="day"] {
    --bg:          #f4f6f9;
    --surface:     #ffffff;
    --surface-2:   #f8fafc;
    --border:      #dfe4ec;
    --text:        #1a2231;
    --muted:       #6b7789;
    --accent:      #3557d8;
    --accent-soft: #e7ecfd;
    --ok:          #12855f;
    --ok-bg:       #e2f5ee;
    --warn:        #a76000;
    --warn-bg:     #fdf0dc;
    --danger:      #c62b3e;
    --danger-bg:   #fdeaec;
    --shadow:      0 4px 18px rgba(20, 30, 55, .07);
}

html[data-theme="night"] {
    --bg:          #10141c;
    --surface:     #182029;
    --surface-2:   #1e2731;
    --border:      #2c3743;
    --text:        #e5ecf4;
    --muted:       #90a0b3;
    --accent:      #6f8ff5;
    --accent-soft: #223055;
    --ok:          #4bd6a4;
    --ok-bg:       #123329;
    --warn:        #f0b44e;
    --warn-bg:     #3a2c12;
    --danger:      #ff7a8a;
    --danger-bg:   #3b1c22;
    --shadow:      0 4px 20px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Vazirmatn, Tahoma, "Segoe UI", system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.55;
    /* The whole page fades between palettes rather than snapping. */
    transition: background-color .35s ease, color .35s ease;
}

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

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; }
::-webkit-scrollbar-track { background: transparent; }