:root {
    --hospital-ink: #18313a;
    --hospital-muted: #6e8187;
    --hospital-line: #e1e9e8;
    --hospital-paper: #f4f7f6;
    --hospital-green: #126b60;
    --hospital-green-dark: #0c514a;
    --hospital-coral: #cc8b70;
}

body.app-body {
    margin: 0;
    color: var(--hospital-ink);
    background: var(--hospital-paper);
    font-family: 'Instrument Sans', 'Segoe UI', sans-serif;
    color-scheme: light;
}

.app-shell { min-height: 100vh; }
.app-sidebar {
    --bs-offcanvas-width: 264px;
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1030;
    display: flex;
    width: 264px;
    flex-direction: column;
    padding: 25px 18px 18px;
    color: #f2f7f5;
    background: #123b39 !important;
    border-right: 1px solid rgba(255,255,255,.08);
}
.sidebar-brand { display: flex; align-items: center; gap: 11px; padding: 0 8px 28px; }
.brand-mark { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; color: #bdd0c9; background: transparent; border: 1px solid rgba(220,239,231,.2); border-radius: 11px; font-size: 18px; }
.brand-name { font-size: 14px; font-weight: 700; line-height: 1.2; }
.brand-caption { margin-top: 4px; color: #c4d3cd; font-size: 11px; }
.sidebar-section-label { padding: 0 10px 10px; color: #b7c9c2; font-size: 10px; font-weight: 700; letter-spacing: 1px; }
.sidebar-nav { display: grid; gap: 5px; }
.sidebar-link { display: flex; min-height: 43px; align-items: center; gap: 12px; padding: 0 12px; color: #d0dcd7; text-decoration: none; background: transparent; border: 0; border-radius: 6px; font-size: 13px; text-align: left; transition: background .16s ease, color .16s ease; }
.sidebar-link i { width: 18px; color: #b5c8c0; font-size: 16px; text-align: center; }
.sidebar-link:hover, .sidebar-link.active { color: #fff; background: transparent; }
.sidebar-link.active { box-shadow: inset 3px 0 #cc8b70; }
.sidebar-link.active i { color: #cc8b70; }
.sidebar-footer { margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.13); }
.staff-identity { display: flex; align-items: center; gap: 10px; padding: 0 7px 15px; }
.staff-avatar { display: grid; width: 34px; height: 34px; place-items: center; color: #bdd0c9; background: transparent; border: 1px solid rgba(220,239,231,.2); border-radius: 50%; font-size: 13px; font-weight: 700; }
.staff-details { min-width: 0; }
.staff-name { overflow: hidden; color: #f2f7f5; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.staff-role { margin-top: 2px; color: #c4d3cd; font-size: 10px; }
.sidebar-logout { width: 100%; }
.app-main { min-height: 100vh; margin-left: 264px; }
.app-topbar { position: sticky; top: 0; z-index: 1010; display: flex; min-height: 64px; align-items: center; justify-content: space-between; padding: 0 32px; background: rgba(255,255,255,.95); border-bottom: 1px solid var(--hospital-line); }
.topbar-title { font-size: 13px; font-weight: 700; }
.topbar-date { color: var(--hospital-muted); font-size: 12px; }
.app-content { min-height: calc(100vh - 112px); padding: 26px 32px 38px; }
.app-footer { padding: 13px 32px; color: var(--hospital-muted); background: #fff; border-top: 1px solid var(--hospital-line); font-size: 12px; text-align: right; }
.app-footer a { color: var(--hospital-green); font-weight: 600; text-decoration: none; }
.app-footer a:hover { text-decoration: underline; }
.trial-notice { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; padding: 10px 32px; color: #254b45; background: #e1eee9; border-bottom: 1px solid #c6ddd4; font-size: 13px; }
.trial-notice a { color: #105c55; font-weight: 700; text-decoration: none; }
.trial-notice a:hover { text-decoration: underline; }
.trial-countdown { font-variant-numeric: tabular-nums; white-space: nowrap; }
.trial-end-date { color: #526b64; }
.sidebar-toggle { width: 38px; height: 38px; padding: 0; border-color: var(--hospital-line); }
.dashboard-metric-icon { display: grid; width: 46px; height: 46px; flex: 0 0 46px; place-items: center; }
.subscription-qr { display: block; width: min(100%, 420px); height: auto; aspect-ratio: auto; object-fit: contain; padding: 0; background: transparent; border: 0; border-radius: 0; }
.payment-copy { white-space: pre-line; overflow-wrap: anywhere; }
.subscription-status-icon { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; color: #126b60; background: #e1eee9; border-radius: 6px; font-size: 18px; }
.btn-primary { --bs-btn-bg: var(--hospital-green); --bs-btn-border-color: var(--hospital-green); --bs-btn-hover-bg: var(--hospital-green-dark); --bs-btn-hover-border-color: var(--hospital-green-dark); --bs-btn-active-bg: var(--hospital-green-dark); --bs-btn-active-border-color: var(--hospital-green-dark); }
.card { border-radius: 6px; }
.form-control, .form-select { border-color: #d8e2e0; }
.form-control:focus, .form-select:focus { border-color: #5a9386; box-shadow: 0 0 0 .2rem rgba(18,107,96,.13); }
.password-toggle { min-width: 44px; }
.ot-duty-filter-form .choices { margin-bottom: 0; font-size: .875rem; }
.ot-duty-filter-form .choices__inner { min-height: 31px; padding: 2px 7px; border: 1px solid #d8e2e0; border-radius: .375rem; background: #fff; font-size: .875rem; }
.ot-duty-filter-form .choices__list--single { padding: 2px 16px 2px 4px; }
.ot-duty-filter-form .choices.is-focused .choices__inner,
.ot-duty-filter-form .choices.is-open .choices__inner { border-color: #5a9386; box-shadow: 0 0 0 .2rem rgba(18,107,96,.13); }
.ot-duty-filter-form .choices__list--dropdown { z-index: 20; border-color: #d8e2e0; border-radius: 6px; }
.ot-duty-filter-form .choices__list--dropdown .choices__item { font-size: .875rem; }
.ot-duty-filter-form .choices[data-type*="select-one"] .choices__input {
    min-height: 40px;
    margin: 0;
    padding: 9px 12px;
    color: var(--hospital-ink);
    background: #f2f6f4;
    border: 0;
    border-bottom: 1px solid #d8e2e0;
    font-size: .875rem;
}
.ot-duty-filter-form .choices__input::placeholder { color: #6e8187; opacity: 1; }
.ot-duty-assignment-form .choices { margin-bottom: 0; font-size: .95rem; }
.ot-duty-assignment-form .choices__inner { min-height: 38px; border-color: #d8e2e0; border-radius: .375rem; background: #fff; font-size: .95rem; }
.ot-duty-assignment-form .choices__list--dropdown { z-index: 20; border-color: #d8e2e0; border-radius: 6px; }
.ot-duty-assignment-form .choices[data-type*="select-one"] .choices__input {
    min-height: 40px;
    margin: 0;
    padding: 9px 12px;
    color: var(--hospital-ink);
    background: #f2f6f4;
    border: 0;
    border-bottom: 1px solid #d8e2e0;
    font-size: .875rem;
}
.ot-duty-assignment-form .choices__input::placeholder { color: #6e8187; opacity: 1; }

@media (max-width: 991.98px) {
    .app-sidebar { position: fixed; }
    .app-main { margin-left: 0; }
    .app-topbar { min-height: 58px; gap: 12px; padding: 0 18px; }
    .topbar-date { margin-left: auto; font-size: 11px; }
    .app-content { min-height: calc(100vh - 106px); padding: 20px 16px 30px; }
    .app-footer { padding: 12px 16px; text-align: center; }
    .trial-notice { padding: 10px 16px; }
}

@media (max-width: 575.98px) {
    .topbar-date { display: none; }
    .app-content { padding: 16px 12px 24px; }
}