/* Chardak Glass. Load after module and page styles.
 * Shared presentation for the staff app, login, detail pages and reports.
 * Screen-only so existing report/PDF print styles retain their original palette.
 * Existing light/dark preference and all semantic action colors are preserved.
 */
@media screen {
    :root {
        --bg-primary: #e8e7e4;
        --bg-secondary: #f4f3f0;
        --bg-card: #f8f7f4;
        --bg-hover: #e4e2de;
        --surface-subtle: #efeeeb;
        --surface-sunken: #deddd9;
        --text-primary: #24242b;
        --text-secondary: #4e4e58;
        --text-muted: #62626c;
        --color-primary: #c74709;
        --color-primary-dark: #a63604;
        --color-primary-soft: #ffebdc;
        --color-primary-border: #e5a379;
        --primary-text: #a63604;
        --border-color: #ceccc7;
        --border-color-dark: #a6a39c;
        --shadow-color: rgb(27 25 22 / 16%);
        --focus-ring: #bb440b;
        --table-header: #e9e7e3;
        --table-row-hover: #efebe4;
        --input-bg: #eae8e4;
        --input-border: #aaa79f;
        --input-focus: #c74709;
        --modal-bg: #f4f3f0;
        --modal-overlay: rgb(15 15 20 / 66%);
        --nav-bg: #deddd9;
        --nav-link: #303039;
        --nav-link-active: #fff;
        --nav-link-hover: #a63604;
        --header-bg: #e1dfda;
        --header-text: #24242b;
        --kpi-bg: #f8f7f4;
        --kpi-border: #ceccc7;
        --summary-bg: #f8f7f4;
        --summary-border: #c74709;
        --bg-footer: #e1dfda;
        --text-footer: #62626c;
        --han-key-top: #faf9f7;
        --han-key-bottom: #d9d7d2;
        --han-key-border: #b7b3ab;
        --han-key-edge: #aaa69f;
        --han-highlight: rgb(255 255 255 / 75%);
        --han-key-shadow: rgb(37 33 26 / 20%);
        --han-panel-top: #f9f8f5;
        --han-panel-bottom: #eeece8;
        --han-inset: inset 0 2px 5px rgb(38 33 25 / 13%), 0 1px 0 rgb(255 255 255 / 65%);
        --surface: var(--bg-card);
        --surface-alt: var(--table-header);
        --border: var(--border-color);
        --accent: var(--color-primary);
        color-scheme: light;
    }

    body.dark-theme {
        color-scheme: dark;
        --bg-primary: #222228;
        --bg-secondary: #2d2d34;
        --bg-card: #33333b;
        --bg-hover: #41414b;
        --surface-subtle: #303038;
        --surface-sunken: #24242b;
        --text-primary: #f2f1f5;
        --text-secondary: #cccbd4;
        --text-muted: #aaa9b6;
        --color-primary: #c74709;
        --color-primary-dark: #a63604;
        --color-primary-soft: #4d3024;
        --color-primary-border: #b66a3f;
        --primary-text: #ffaf7c;
        --color-success: #15803d;
        --color-danger: #c9343e;
        --color-warning: #a96508;
        --color-info: #087aa2;
        --success-soft: #203d2d;
        --success-border: #43855a;
        --success-text: #9ee4af;
        --danger-soft: #4b282d;
        --danger-border: #aa535c;
        --danger-text: #ffb0b7;
        --text-danger: #ffb0b7;
        --info-soft: #233c4b;
        --info-border: #50849f;
        --info-text: #a0d9f4;
        --warning-bg: #473820;
        --warning-border: #9d7e36;
        --warning-text: #f5d58a;
        --msg-error: #ffb0b7;
        --msg-success: #9ee4af;
        --border-color: #4b4a55;
        --border-color-dark: #63616f;
        --shadow-color: rgb(0 0 0 / 35%);
        --focus-ring: #ffb17f;
        --table-header: #373740;
        --table-row-hover: #3b3b45;
        --input-bg: #24242b;
        --input-border: #595762;
        --input-focus: #ff9c61;
        --modal-bg: #303038;
        --modal-overlay: rgb(10 10 15 / 76%);
        --nav-bg: #28282f;
        --nav-link: #e5e4ec;
        --nav-link-hover: #ffb17f;
        --header-bg: #292930;
        --header-text: #f2f1f5;
        --room-available-bg: #244d33;
        --room-occupied-bg: #592d34;
        --bed-free-bg: #226a3e;
        --bed-taken-bg: #a82f3b;
        --kpi-bg: #33333b;
        --kpi-border: #4b4a55;
        --summary-bg: #33333b;
        --summary-border: #e97430;
        --bg-footer: #292930;
        --text-footer: #aaa9b6;
        --han-key-top: #46464f;
        --han-key-bottom: #28282f;
        --han-key-border: #19191f;
        --han-key-edge: #17171c;
        --han-highlight: rgb(255 255 255 / 16%);
        --han-key-shadow: rgb(0 0 0 / 42%);
        --han-panel-top: #383840;
        --han-panel-bottom: #2b2b32;
        --han-inset: inset 0 2px 5px rgb(0 0 0 / 45%), 0 1px 0 rgb(255 255 255 / 9%);
        --surface: var(--bg-card);
        --surface-alt: var(--table-header);
        --border: var(--border-color);
        --accent: var(--color-primary);
    }

    body {
        background-color: var(--bg-primary);
        background-image: repeating-linear-gradient(90deg, transparent 0 2px, rgb(0 0 0 / 3%) 2px 3px);
        color: var(--text-primary);
        accent-color: var(--color-primary);
    }
    body a:not([class]):not([data-tab]):not([data-view]) { color: var(--primary-text); }
    body :is(h1, h2, h3, h4) { text-wrap: balance; }
    body header {
        background: linear-gradient(var(--han-panel-top), var(--han-panel-bottom));
        border: 1px solid var(--han-key-border);
        box-shadow: inset 0 1px 0 var(--han-highlight), 0 3px 7px var(--shadow-color);
        color: var(--header-text);
    }
    /* 1.5em × 1.70: enlarge the header mark without scaling its text. */
    body header .brand-logo { height: 2.55em; width: auto; }
    body nav ul {
        gap: 7px;
        padding: 8px;
        background: var(--surface-sunken);
        border-color: var(--han-key-border);
        box-shadow: var(--han-inset);
    }

    /* The translucent gradient gives even existing inline-colored actions a
       physical face without replacing their green/red/blue semantic colors. */
    body :is(button, input[type="submit"], input[type="button"], input[type="reset"], a[class^="btn-"], a[class*=" btn-"], .br-btn),
    body nav ul li a {
        background-image: linear-gradient(rgb(255 255 255 / 13%), rgb(0 0 0 / 13%)) !important;
        border-radius: 8px;
        box-shadow: inset 0 1px 0 var(--han-highlight), inset 0 -2px 0 rgb(0 0 0 / 14%), 0 3px 0 var(--han-key-edge), 0 5px 8px var(--han-key-shadow);
        text-shadow: 0 1px 1px rgb(0 0 0 / 20%);
        transition: filter 120ms ease, box-shadow 120ms ease, transform 120ms ease;
    }
    body :is(button, input[type="submit"], input[type="button"], input[type="reset"]) {
        font-family: inherit;
    }
    body nav ul li a {
        background-color: var(--han-key-bottom);
        background-image: linear-gradient(var(--han-key-top), var(--han-key-bottom)) !important;
        border: 1px solid var(--han-key-border);
        padding-top: 12px;
        padding-bottom: 12px;
        color: var(--nav-link);
    }
    body nav ul li a.active {
        background-color: var(--color-primary);
        background-image: linear-gradient(#e8631e, #b63b06) !important;
        color: #fff;
        border-color: #e77739;
        box-shadow: inset 0 1px 0 rgb(255 255 255 / 45%), 0 3px 0 #823006, 0 5px 14px rgb(229 92 20 / 24%);
    }
    body .btn-primary { background-color: var(--color-primary); color: #fff; }
    body :is(.btn-cancel, .btn-back:not(.primary), .br-btn:not(.primary):not(.success), .cal-nav-btn, .cal-preset-btn, .cal-clear, .cal-unassigned-btn, .modal-close) {
        background-color: var(--han-key-bottom);
        background-image: linear-gradient(var(--han-key-top), var(--han-key-bottom)) !important;
        color: var(--text-primary);
        border-color: var(--han-key-border);
    }
    body :is(button, a[class^="btn-"], a[class*=" btn-"], .br-btn):not(:disabled):not([aria-disabled="true"]):active,
    body nav ul li a:active {
        transform: translateY(2px);
        box-shadow: inset 0 2px 4px rgb(0 0 0 / 24%), 0 1px 0 var(--han-key-edge);
    }
    body :is(button:disabled, input:disabled, select:disabled, textarea:disabled, [aria-disabled="true"], button[aria-busy="true"]) {
        opacity: .55;
        cursor: not-allowed;
        box-shadow: none;
        transform: none;
        text-shadow: none;
    }
    body :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
        outline: 2px solid var(--focus-ring) !important;
        outline-offset: 3px;
    }
    body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]), select, textarea) {
        background-color: var(--input-bg);
        color: var(--text-primary);
        border: 1px solid var(--input-border);
        border-radius: 7px;
        box-shadow: var(--han-inset);
    }
    body :is(input, textarea)::placeholder { color: var(--text-muted); opacity: 1; }
    body select option { background: var(--input-bg); color: var(--text-primary); }
    body input[readonly] { border-style: dashed; }

    body #tab-content,
    body :is(.panel, .kpi-card, .stat-card, .summary-card, .login-container, .modal-content, .br-doc, .br-toolbar, .cal-quick) {
        background: linear-gradient(var(--han-panel-top), var(--han-panel-bottom));
        color: var(--text-primary);
        border: 1px solid var(--border-color);
        border-radius: 12px;
        box-shadow: inset 0 1px 0 var(--han-highlight), 0 4px 12px var(--shadow-color);
    }
    body .kpi-card { border-left-width: 3px; }
    body .kpi-card--primary { border-left-color: var(--color-primary); }
    body .kpi-card--success { border-left-color: var(--color-success); }
    body .kpi-card--danger { border-left-color: var(--color-danger); }
    body .kpi-card--warning { border-left-color: var(--color-warning); }
    body .kpi-card--info { border-left-color: var(--color-info); }
    body .kpi-card--accent { border-left-color: var(--color-accent); }
    body .room.occupied { opacity: 1; }
    body .modal-overlay { background: var(--modal-overlay); }
    body :is(.filters-row, .cal-toolbar, .cal-filterbar, .cal-summary) {
        background: var(--surface-subtle);
        border: 1px solid var(--border-color);
        border-radius: 9px;
        padding: 12px;
        box-shadow: inset 0 1px 0 var(--han-highlight);
    }
    body :is(.cal-toolbar, .cal-filterbar) { gap: 10px; }
    body :is(.cal-toolbar, .cal-filterbar) button { margin-bottom: 3px; }
    body .cal-toolbar button[type="submit"] { width: auto; }
    body :is(.cal-scope summary, .cal-scope-options) {
        background: var(--input-bg);
        border-color: var(--input-border);
        color: var(--text-primary);
        box-shadow: var(--han-inset);
    }

    /* Flat tables remain dense and legible. Never change display, position,
       pointer-events, sticky columns, visibility, or scrolling of live modules. */
    body th {
        background: var(--table-header);
        color: var(--text-primary);
        border-color: var(--border-color);
    }
    body td { border-color: var(--border-color); }
    body .cal-table .cal-place { background: var(--bg-secondary); }
    body.dark-theme .cal-cell-free { background: #284d35; color: #def3e4; }
    body.dark-theme .cal-cell-occupied { background: #215b9e; color: #fff; }
    body.dark-theme .cal-cell-not_applicable { background: #303038; color: #bbb9c7; }
    body.dark-theme .cal-cell-unknown {
        background: repeating-linear-gradient(45deg, #3b3b44 0 4px, #45454f 4px 8px);
        color: #edecf4;
    }
    body.dark-theme .cal-chip { color: #f2f1f5; border-color: #74717e; }
    body.dark-theme .cal-chip-occupied { background: #215b9e; }
    body.dark-theme .cal-chip-free { background: #284d35; }
    body.dark-theme .cal-chip-unknown { background: #45454f; }
    body.dark-theme .cal-chip-oos { background: #752f39; }
    body.dark-theme .cal-chip-hold { background: #68501e; }
    body.dark-theme :is(.cal-assignment-available, .cal-partial-free) { color: var(--success-text); }
    body.dark-theme :is(.cal-assignment-unavailable, .cal-assignment-reason, .cal-partial-blocked, .cal-guest-error) { color: var(--danger-text); }
    body.dark-theme .cal-assignment-unknown { color: var(--warning-text); }
    body.dark-theme .cal-partial-segment { background: var(--surface-subtle); }
    body.dark-theme .cal-guest-matrix tbody tr.is-selected { background: var(--info-soft); }

    @media (hover: hover) {
        body :is(button, .br-btn):not(:disabled):hover,
        body nav ul li a:hover { filter: brightness(1.09); opacity: 1; }
    }
    @media (max-width: 768px) {
        body nav ul li a { padding: 10px 12px; }
        body :is(.cal-toolbar, .cal-filterbar, .filters-row) { padding: 10px; }
        body :is(button, input[type="submit"], .br-btn) { min-height: 36px; }
    }
    @media (pointer: coarse) {
        body :is(button, .br-btn, nav ul li a, input[type="submit"]) { min-height: 44px; }
    }
    @media (prefers-reduced-motion: reduce) {
        body :is(button, input, select, textarea, nav ul li a) { transition: none; }
    }
    @media (forced-colors: active) {
        body :is(button, input, select, textarea, nav ul li a, .panel, .modal-content) {
            border: 1px solid ButtonText;
            box-shadow: none;
            text-shadow: none;
            background-image: none !important;
        }
    }
}

@media screen {
    :root {
        --bg-primary: #e9ded2;
        --bg-secondary: #f7efe6;
        --bg-card: #fff8f0;
        --bg-hover: #efe0d2;
        --surface-subtle: #f4e8dc;
        --surface-sunken: #e7d6c6;
        --text-primary: #302520;
        --text-secondary: #594940;
        --text-muted: #6d584a;
        --color-primary: #a44e28;
        --color-primary-dark: #80381e;
        --border-color: #d8c3b1;
        --table-header: #ecddcf;
        --table-row-hover: #f2e5d9;
        --input-bg: #fff9f3;
        --input-border: #a58b77;
        --bg-footer: #efe2d6;
        --text-footer: #6d584a;
        --han-key-top: #fff8f1;
        --han-key-bottom: #eee0d3;
        --han-key-border: #c9b39f;
        --han-inset: inset 0 1px 2px rgb(62 38 23 / 10%);
        --glass-top: #fffaf4f5;
        --glass-bottom: #f5e9dded;
        --glass-wood: rgb(117 72 45 / 10%);
        --glass-glow: #ffe9cf;
        --glass-shadow: 0 10px 28px var(--shadow-color);
    }

    body.dark-theme {
        --bg-primary: #201916;
        --bg-secondary: #2b2422;
        --bg-card: #352c29;
        --bg-hover: #473934;
        --surface-subtle: #332a26;
        --surface-sunken: #251e1b;
        --color-primary: #a44e28;
        --color-primary-dark: #80381e;
        --border-color: #655047;
        --table-header: #3b302b;
        --table-row-hover: #443630;
        --input-bg: #271f1d;
        --input-border: #80675a;
        --bg-footer: #29211e;
        --han-key-top: #493b35;
        --han-key-bottom: #342a26;
        --han-key-border: #735b4e;
        --han-inset: inset 0 1px 2px rgb(0 0 0 / 32%);
        --glass-top: #3d322deb;
        --glass-bottom: #2b2220f5;
        --glass-wood: rgb(207 143 100 / 8%);
        --glass-glow: #583929;
    }

    body {
        background-image:
            radial-gradient(ellipse at top left, var(--glass-glow), transparent 55rem),
            repeating-linear-gradient(90deg, transparent 0 17px, var(--glass-wood) 18px 19px, transparent 20px 24px);
    }

    body header,
    body nav ul,
    body #tab-content,
    body :is(.login-container, .panel, .modal-content, .cal-quick, .br-doc, .br-toolbar, .stmt-doc, .stmt-toolbar, .stmt-modal-box) {
        background: linear-gradient(145deg, var(--glass-top), var(--glass-bottom));
        border: 1px solid var(--border-color);
        border-radius: 16px;
        box-shadow: inset 0 1px 0 var(--han-highlight), var(--glass-shadow);
        color: var(--text-primary);
    }

    body :is(.info-card, .summary-card, .stat-card, .kpi-card, .br-card, .stmt-total-card) {
        border-radius: 12px;
        box-shadow: inset 0 1px 0 var(--han-highlight), 0 4px 10px var(--shadow-color);
    }

    body :is(button, input[type="submit"], input[type="button"], input[type="reset"], a[class^="btn-"], a[class*=" btn-"], .br-btn, .stmt-btn),
    body nav ul li a {
        box-shadow: inset 0 1px 0 var(--han-highlight), 0 2px 5px var(--shadow-color);
        text-shadow: none;
    }

    body nav ul li a.active {
        background-image: linear-gradient(#aa512b, #843e22) !important;
        border-color: #ae6849;
        box-shadow: inset 0 1px 0 rgb(255 255 255 / 25%), 0 3px 9px var(--shadow-color);
    }

    body :is(.cal-toolbar, .cal-filterbar, .cal-summary, .filters-row) {
        border-radius: 12px;
    }

    body .modal-overlay {
        background: var(--modal-overlay);
        backdrop-filter: blur(4px);
    }

    body .modal-overlay > .modal-content {
        padding: clamp(1rem, 3vw, 1.75rem);
    }

    body .modal-content > :is(h2, h3),
    body #action-modal-body > :is(h2, h3):first-child {
        margin-top: 0;
        padding-bottom: .65rem;
        border-bottom: 1px solid var(--border-color);
    }

    body .modal-content :is(label, .form-label),
    body #b21-create-form .b21-unassigned__field {
        color: var(--text-secondary);
    }

    body .modal-content :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="submit"], [type="button"], [type="reset"]), select, textarea),
    body #b21-create-form :is(input, select) {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
        border-radius: 8px;
        background-color: var(--input-bg);
        color: var(--text-primary);
        border-color: var(--input-border);
    }

    body .modal-content :is(.btn-confirm, .btn-cancel, .btn-primary),
    body #b21-create-form .b21-unassigned__button {
        min-height: 2.25rem;
        border-radius: 8px;
    }

    body .modal-content .btn-confirm,
    body #b21-create-form .b21-unassigned__button--primary {
        background-color: var(--color-primary);
        color: #fff;
    }

    body #b21-create-form {
        padding: clamp(.75rem, 2vw, 1.125rem);
        border: 1px solid var(--border-color);
        border-radius: 12px;
        background: linear-gradient(145deg, var(--glass-top), var(--glass-bottom));
        color: var(--text-primary);
        box-shadow: inset 0 1px 0 var(--han-highlight);
    }

    body #b21-create-form .b21-unassigned__grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
    }

    body #b21-create-form .b21-unassigned__button:not(.b21-unassigned__button--primary) {
        background-color: var(--han-key-bottom);
        border-color: var(--han-key-border);
        color: var(--text-primary);
    }

    body #b21-create-form .b21-unassigned__preview {
        background: var(--success-soft);
        border-color: var(--success-border);
        color: var(--success-text);
    }

    body #b21-create-form .b21-unassigned__status--ok { color: var(--success-text); }
    body #b21-create-form .b21-unassigned__status--warn { color: var(--warning-text); }
    body #b21-create-form .b21-unassigned__status--bad { color: var(--danger-text); }

    body .cal-chip.cal-personal-view,
    body.dark-theme .cal-chip.cal-personal-view {
        padding: .2em .65em;
        border-color: var(--color-primary-border);
        border-radius: 999px;
        background: var(--color-primary-soft);
        color: var(--primary-text);
        font-weight: 600;
    }

    @media (min-width: 1250px) {
        body[data-calendar-enabled] #app {
            display: grid;
            grid-template-columns: 13rem minmax(0, 1fr);
            grid-template-areas: "header header" "nav main" "footer footer";
            gap: 1rem;
            max-width: 1680px;
        }
        body[data-calendar-enabled] #app > header { grid-area: header; }
        body[data-calendar-enabled] #app > nav {
            grid-area: nav;
            align-self: start;
            margin: 0;
        }
        body[data-calendar-enabled] #app > nav ul { display: grid; gap: .35rem; }
        body[data-calendar-enabled] #app > nav a {
            display: flex;
            align-items: center;
            gap: .55rem;
            padding: .55rem .65rem;
        }
        body[data-calendar-enabled] #app > main { grid-area: main; min-width: 0; }
        body[data-calendar-enabled] #app > footer { grid-area: footer; }
        body[data-calendar-enabled] #app .frontdesk-glass { grid-template-columns: minmax(0, 1fr); }
        body[data-calendar-enabled] #app .frontdesk-rail { display: none; }
    }

    @media (forced-colors: active) {
        body :is(header, nav ul, #tab-content, .login-container, .panel, .modal-content, .stmt-doc, .stmt-modal-box) {
            border-color: CanvasText;
            box-shadow: none;
        }
        body nav ul li a.active { border-color: Highlight; color: Highlight; }
    }
}