/* =============================================================
   Blueworks design system — Apple OS edition (2026)
   Design language follows Apple's Human Interface Guidelines:
   system typography, iOS system colors, grouped inset cards,
   hairline separators, capsule buttons, segmented controls,
   frosted-glass bars and an iOS-style tab bar.
   Loaded LAST in base.html; token names are stable (--bw-*) so
   every page stylesheet inherits the new language automatically.
   See apple.design.md for the full specification.
   ============================================================= */

:root {
    /* iOS system palette (light) */
    --bw-primary: #007aff;          /* systemBlue */
    --bw-primary-600: #0062cc;
    --bw-primary-soft: rgba(0, 122, 255, .10);
    --bw-accent: #ef746f;           /* brand dot (kept) */
    --bw-success: #34c759;          /* systemGreen */
    --bw-success-soft: rgba(52, 199, 89, .12);
    --bw-warning: #ff9500;          /* systemOrange */
    --bw-warning-soft: rgba(255, 149, 0, .13);
    --bw-danger: #ff3b30;           /* systemRed */
    --bw-danger-soft: rgba(255, 59, 48, .10);

    /* Apple neutrals */
    --bw-bg: #f2f2f7;               /* systemGroupedBackground */
    --bw-surface: #ffffff;
    --bw-surface-2: #f5f5f7;
    --bw-border: #e5e5ea;           /* separator on white */
    --bw-border-strong: #d2d2d7;
    --bw-text: #1d1d1f;
    --bw-text-2: #424245;
    --bw-muted: #86868b;

    /* Shape & depth — Apple: bigger radii, quieter shadows */
    --bw-radius-lg: 20px;
    --bw-radius: 14px;
    --bw-radius-sm: 10px;
    --bw-capsule: 980px;
    --bw-shadow-sm: 0 1px 2px rgba(0, 0, 0, .04);
    --bw-shadow: 0 4px 20px rgba(0, 0, 0, .08);
    --bw-shadow-lg: 0 12px 40px rgba(0, 0, 0, .18);

    /* System type stack — renders San Francisco on Apple devices */
    --bw-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --bw-ease: cubic-bezier(.28, .11, .32, 1);   /* Apple's ease */
    --bw-glass: saturate(180%) blur(20px);
}

/* ---------- Base ---------- */
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
    font-family: var(--bw-font);
    background-color: var(--bw-bg);
    color: var(--bw-text);
    font-size: 15px;
    line-height: 1.47;
    letter-spacing: -0.012em;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--bw-font);
    color: var(--bw-text);
    font-weight: 600;
    letter-spacing: -0.022em;
}

a { color: var(--bw-primary); transition: color .18s var(--bw-ease), opacity .18s var(--bw-ease); }
a:hover, a:focus { color: var(--bw-primary); opacity: .75; text-decoration: none; }

::selection { background: rgba(0, 122, 255, .2); }

* { scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, .22) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .22); border-radius: 99px; }
*::-webkit-scrollbar-track { background: transparent; }

:focus-visible {
    outline: 3px solid rgba(0, 122, 255, .5);
    outline-offset: 2px;
    border-radius: 6px;
}

.text-muted { color: var(--bw-muted) !important; }

/* ---------- SPA page transition ---------- */
@keyframes bw-page-enter {
    /* Keep this opacity-only. Many pages place their fixed bottom navigation
       inside the animated page wrapper. A transform on that wrapper makes it
       the containing block for position: fixed, so the bar jumps into the
       page until the transition ends. */
    from { opacity: 0; }
    to   { opacity: 1; }
}
main.spa-page-enter > * { animation: bw-page-enter .32s var(--bw-ease) both; }

@media (prefers-reduced-motion: reduce) {
    main.spa-page-enter > * { animation: none; }
    * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------- Buttons: iOS capsules ---------- */
.btn {
    font-family: var(--bw-font);
    font-weight: 590;
    border-radius: var(--bw-capsule);
    padding: 8px 18px;
    border: 1px solid transparent;
    box-shadow: none;
    transition: background-color .18s var(--bw-ease), color .18s var(--bw-ease),
                opacity .18s var(--bw-ease), transform .12s var(--bw-ease);
}
.btn:active { transform: scale(.97); }
.btn:focus, .btn.focus, .btn:active:focus { outline: none; }
.btn-xs { padding: 3px 11px; font-size: 12px; }
.btn-sm { padding: 5px 14px; }
.btn-lg { padding: 12px 24px; font-size: 16px; }

.btn-primary { background: var(--bw-primary); border-color: transparent; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-primary:active:hover, .btn-primary:active:focus {
    background: var(--bw-primary-600); border-color: transparent;
}

/* iOS "gray" button */
.btn-default {
    background: rgba(120, 120, 128, .12);
    border-color: transparent;
    color: var(--bw-text);
}
.btn-default:hover, .btn-default:focus, .btn-default:active,
.btn-default:active:hover, .btn-default:active:focus {
    background: rgba(120, 120, 128, .2);
    border-color: transparent;
    color: var(--bw-text);
}

.btn-success { background: var(--bw-success); border-color: transparent; }
.btn-success:hover, .btn-success:focus, .btn-success:active { background: #2eb350; border-color: transparent; }

.btn-danger { background: var(--bw-danger); border-color: transparent; }
.btn-danger:hover, .btn-danger:focus, .btn-danger:active { background: #e0352b; border-color: transparent; }

.btn-warning { background: var(--bw-warning); border-color: transparent; }
.btn-warning:hover, .btn-warning:focus, .btn-warning:active { background: #e68600; border-color: transparent; }

.btn-link { box-shadow: none; color: var(--bw-primary); font-weight: 590; }
.btn-link:hover { color: var(--bw-primary); opacity: .75; text-decoration: none; }
.btn-link.text-danger, .btn-link.text-danger:hover { color: var(--bw-danger); }

.btn[disabled], .btn.disabled { opacity: .4; }

/* ---------- Forms: iOS fields ---------- */
.form-control, select.form-control, textarea.form-control,
.login-form-control {
    font-family: var(--bw-font);
    border-radius: var(--bw-radius-sm);
    border: 1px solid var(--bw-border-strong);
    background-color: var(--bw-surface);
    color: var(--bw-text);
    box-shadow: none;
    height: 40px;
    padding: 8px 13px;
    font-size: 15px;
    transition: border-color .18s var(--bw-ease), box-shadow .18s var(--bw-ease);
}
textarea.form-control { height: auto; }
.form-control:focus, .login-form-control:focus {
    border-color: var(--bw-primary);
    box-shadow: 0 0 0 4px rgba(0, 122, 255, .18);
    outline: none;
}
.form-control::placeholder { color: rgba(60, 60, 67, .45); }
.form-control.input-sm { height: 32px; padding: 4px 11px; }
label { font-weight: 590; color: var(--bw-text-2); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--bw-primary); }

/* ---------- Grouped inset cards ---------- */
.card, .section-box, .login-card, .stats-box, .balance-card {
    background: var(--bw-surface);
    border: none;
    border-radius: var(--bw-radius);
    box-shadow: var(--bw-shadow-sm);
}
.card { padding: 20px; margin-bottom: 16px; }
.section-title { font-weight: 600; letter-spacing: -0.016em; color: var(--bw-text); }

a > .card { transition: box-shadow .22s var(--bw-ease), transform .22s var(--bw-ease); }
a > .card:hover { box-shadow: var(--bw-shadow); transform: translateY(-2px); }
a .card h3 { color: var(--bw-text); }
a .card p, a .card small { color: var(--bw-muted); }

/* ---------- Labels / badges / alerts ---------- */
.label {
    font-family: var(--bw-font);
    font-weight: 590;
    border-radius: var(--bw-capsule);
    padding: .24em .72em .26em;
    font-size: 11px;
    letter-spacing: 0;
}
.label-default { background: rgba(120, 120, 128, .12); color: var(--bw-muted); border: none; }
.label-info { background: var(--bw-primary-soft); color: var(--bw-primary); }
.label-primary { background: var(--bw-primary); }
.label-success { background: var(--bw-success-soft); color: #248a3d; border: none; }
.label-warning { background: var(--bw-warning-soft); color: #c93400; border: none; }
.label-danger { background: var(--bw-danger-soft); color: var(--bw-danger); border: none; }

.badge { background: var(--bw-danger); border-radius: var(--bw-capsule); font-weight: 600; }

.alert { border-radius: var(--bw-radius-sm); border: none; padding: 12px 15px; }
.alert-success { background: var(--bw-success-soft); color: #1d7a35; }
.alert-warning { background: var(--bw-warning-soft); color: #b25000; }
.alert-danger { background: var(--bw-danger-soft); color: #d70015; }
.alert-info { background: var(--bw-primary-soft); color: var(--bw-primary-600); }

/* ---------- Modals: iOS sheets ---------- */
.modal-content {
    border: none;
    border-radius: var(--bw-radius-lg);
    box-shadow: var(--bw-shadow-lg);
    overflow: hidden;
}
.modal-header { border-bottom: 1px solid var(--bw-border); padding: 17px 20px; background: var(--bw-surface); }
.modal-title { font-weight: 600; letter-spacing: -0.022em; text-align: center; }
.modal-body { padding: 20px; }
.modal-footer { border-top: 1px solid var(--bw-border); padding: 14px 20px; background: var(--bw-surface); }
.modal-backdrop { background-color: #000; }
.modal-backdrop.in { opacity: .4; }
.modal.fade .modal-dialog {
    transition: transform .32s var(--bw-ease), opacity .32s var(--bw-ease);
    transform: translateY(24px) scale(.98);
}
.modal.in .modal-dialog { transform: none; }
.close { text-shadow: none; opacity: .45; transition: opacity .18s; font-weight: 400; }
.close:hover { opacity: .8; }

/* ---------- Segmented controls (tabs / filter strips) ---------- */
.nav-tabs {
    border-bottom: none;
    background: rgba(118, 118, 128, .12);
    border-radius: var(--bw-radius-sm);
    padding: 2px;
    display: inline-flex;
    gap: 2px;
}
.nav-tabs > li { float: none; margin-bottom: 0; }
.nav-tabs > li > a {
    border: none;
    border-radius: 8px;
    color: var(--bw-text);
    font-weight: 590;
    font-size: 13px;
    margin-right: 0;
    padding: 6px 14px;
    transition: background-color .18s var(--bw-ease), box-shadow .18s var(--bw-ease);
}
.nav-tabs > li > a:hover { background: rgba(255, 255, 255, .55); }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
    border: none;
    background: var(--bw-surface);
    color: var(--bw-text);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .12), 0 3px 8px rgba(0, 0, 0, .04);
    font-weight: 600;
}

/* ---------- Tables: inset list style ---------- */
.table > thead > tr > th {
    border-bottom: 1px solid var(--bw-border);
    color: var(--bw-muted);
    font-weight: 590;
    font-size: 12px;
    text-transform: none;
    letter-spacing: 0;
}
.table > tbody > tr > td { border-top: 1px solid var(--bw-border); }
.table-hover > tbody > tr:hover { background: var(--bw-surface-2); }
/* Bootstrap's striped rows hardcode a light #f9f9f9, which leaves odd rows
   unreadable in dark mode (light stripe under light text — e.g. every other
   employee on the Qualifications matrix). Restripe with the theme surface
   tint so both modes stay legible. */
.table-striped > tbody > tr:nth-of-type(odd) > td,
.table-striped > tbody > tr:nth-of-type(odd) > th {
    background-color: var(--bw-surface-2);
}

/* ---------- Page headers: large titles ---------- */
.page-header, .page-header-custom { border-bottom: none; margin-top: 4px; }
.page-header h2, .page-header-custom .page-title {
    font-weight: 700;
    letter-spacing: -0.028em;
    font-size: 28px;
}
.back-icon, .back-btn { color: var(--bw-primary); transition: opacity .18s var(--bw-ease), transform .18s var(--bw-ease); }
a:hover .back-icon, .back-btn:hover { color: var(--bw-primary); opacity: .7; transform: translateX(-2px); }

/* ---------- Admin panel ---------- */
.admin-section-toggle {
    background: var(--bw-surface);
    border: none;
    border-radius: var(--bw-radius-sm);
    box-shadow: var(--bw-shadow-sm);
    font-weight: 590;
    transition: background-color .18s var(--bw-ease);
}
.admin-section-toggle:hover { background: var(--bw-surface-2); }
.admin-section-menu {
    border: none;
    border-radius: var(--bw-radius);
    box-shadow: var(--bw-shadow-lg);
    overflow: hidden;
    background: rgba(255, 255, 255, .85);
    -webkit-backdrop-filter: var(--bw-glass);
    backdrop-filter: var(--bw-glass);
}
.admin-section-link { transition: background-color .14s var(--bw-ease); font-weight: 500; }
.admin-section-link:hover { background: rgba(120, 120, 128, .1); color: var(--bw-text); }
.admin-section-link.active { background: var(--bw-primary-soft); color: var(--bw-primary); font-weight: 600; }

.action-btn, .quick-action-card {
    border-radius: var(--bw-radius);
    border: none;
    background: var(--bw-surface);
    box-shadow: var(--bw-shadow-sm);
    transition: box-shadow .22s var(--bw-ease), transform .22s var(--bw-ease);
    cursor: pointer;
}
.action-btn:hover, .quick-action-card:hover { box-shadow: var(--bw-shadow); transform: translateY(-2px); }
.activity-item { border-radius: var(--bw-radius-sm); transition: background-color .14s var(--bw-ease); }
.activity-item:hover { background: var(--bw-surface-2); }

/* Icon tiles: iOS app-icon squircles (flat system colors) */
.icon-box { border-radius: 10px; box-shadow: none; }
.bg-blue   { background: var(--bw-primary) !important; }
.bg-green  { background: var(--bw-success) !important; }
.bg-orange { background: var(--bw-warning) !important; }
.bg-red    { background: var(--bw-danger) !important; }
.bg-purple { background: #af52de !important; }   /* systemPurple */
.bg-pink   { background: #ff2d55 !important; }   /* systemPink */

/* ---------- Bottom navigation: iOS tab bar ---------- */
.bottom-bar {
    background: rgba(249, 249, 249, .82);
    -webkit-backdrop-filter: var(--bw-glass);
    backdrop-filter: var(--bw-glass);
    border-top: 1px solid rgba(0, 0, 0, .12);
    box-shadow: none;
}
/* Flat, colourful iOS-style tab glyphs (no circles) — each tab keeps its own
   system colour so the menu reads at a glance. */
.bottom-bar .icon-btn,
.bottom-bar .icon-btn.bg-blue, .bottom-bar .icon-btn.bg-green,
.bottom-bar .icon-btn.bg-orange, .bottom-bar .icon-btn.bg-pink,
.bottom-bar .icon-btn.bg-purple, .bottom-bar .icon-btn.bg-red {
    background: transparent !important;
    box-shadow: none;
    font-size: 25px;
    transition: transform .18s var(--bw-ease), opacity .18s var(--bw-ease);
}
.bottom-bar .icon-btn            { color: var(--bw-primary); }   /* fallback */
.bottom-bar .icon-btn.bg-blue   { color: var(--bw-primary); }   /* systemBlue */
.bottom-bar .icon-btn.bg-green  { color: var(--bw-success); }   /* systemGreen */
.bottom-bar .icon-btn.bg-orange { color: var(--bw-warning); }   /* systemOrange */
.bottom-bar .icon-btn.bg-purple { color: #af52de; }             /* systemPurple */
.bottom-bar .icon-btn.bg-pink   { color: #ff2d55; }             /* systemPink */
.bottom-bar .icon-btn.bg-red    { color: var(--bw-danger); }    /* systemRed */
.bottom-bar a:hover .icon-btn { transform: translateY(-2px); opacity: .8; }
.bottom-label { color: #8e8e93; font-weight: 500; font-size: 10px; letter-spacing: 0; }
.bottom-bar a:hover .bottom-label { color: var(--bw-text-2); }

/* ---------- Login: Apple ID style ---------- */
.login-page {
    background: var(--bw-bg);
    font-family: var(--bw-font);
}
.login-card {
    border-radius: var(--bw-radius-lg);
    box-shadow: var(--bw-shadow);
    border: none;
    padding: 34px 34px 28px;
}
.login-subtitle { color: var(--bw-muted); letter-spacing: -0.01em; }
.login-submit-btn {
    border-radius: var(--bw-capsule);
    font-weight: 600;
    padding: 11px;
    background: var(--bw-primary);
    border-color: transparent;
    transition: background-color .18s var(--bw-ease), transform .12s var(--bw-ease);
}
.login-submit-btn:hover { background: var(--bw-primary-600); box-shadow: none; }
.login-submit-btn:active { transform: scale(.98); }
.monitoring-consent-card {
    border-radius: var(--bw-radius-sm);
    background: var(--bw-primary-soft);
    border: none;
}
.monitoring-ready-alert { border-radius: var(--bw-radius-sm); border: none; }

/* ---------- Roster / schedule ---------- */
.stats-box { border-radius: var(--bw-radius); border: none; }
.stats-box h2 { font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.week-nav .btn { border-radius: var(--bw-capsule); }
.week-label { font-weight: 600; letter-spacing: -0.022em; }
.schedule-grid { gap: 12px; }
.day-column {
    background: var(--bw-surface);
    border: none;
    border-radius: var(--bw-radius);
    overflow: hidden;
    box-shadow: var(--bw-shadow-sm);
}
.day-header { background: var(--bw-surface); border-bottom: 1px solid var(--bw-border); }
.shift-card {
    border-radius: var(--bw-radius-sm);
    box-shadow: none;
    transition: transform .18s var(--bw-ease), box-shadow .18s var(--bw-ease);
}
.shift-card:hover { box-shadow: var(--bw-shadow-sm); transform: translateY(-1px); }
.person-chip, .role-chip {
    border-radius: var(--bw-capsule);
    background: rgba(120, 120, 128, .12);
    border: none;
    font-weight: 500;
}
.holiday-row { border-radius: var(--bw-radius-sm); transition: background-color .14s var(--bw-ease); }
.holiday-row:hover { background: var(--bw-surface-2); }
.conflict-banner { border-radius: var(--bw-radius-sm); border: none; }
.empty-state { color: var(--bw-muted); }

/* ---------- Search / filter bars ---------- */
.search-bar input[type="text"], .search-bar input[type="search"], #task-search, #search-input {
    border-radius: var(--bw-radius-sm);
    border: none;
    background: rgba(118, 118, 128, .12);
    padding-left: 14px;
    transition: background-color .18s var(--bw-ease), box-shadow .18s var(--bw-ease);
}
.search-bar input:focus, #task-search:focus, #search-input:focus {
    background: var(--bw-surface);
    border: none;
    box-shadow: 0 0 0 4px rgba(0, 122, 255, .18);
    outline: none;
}

/* ---------- Loading overlay ---------- */
.request-loading-overlay {
    background: rgba(242, 242, 247, .6);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.request-loading-panel {
    background: rgba(255, 255, 255, .9);
    border: none;
    border-radius: var(--bw-radius);
    box-shadow: var(--bw-shadow-lg);
    color: var(--bw-text-2);
    font-weight: 590;
}
.request-loading-spinner {
    border-color: rgba(0, 0, 0, .1);
    border-top-color: var(--bw-primary);
}

/* ---------- Misc ---------- */
hr { border-color: var(--bw-border); }
small, .small { color: inherit; }
.well { background: var(--bw-surface-2); border: none; border-radius: var(--bw-radius); box-shadow: none; }
.list-group-item { border-color: var(--bw-border); }
.list-group-item:first-child { border-top-left-radius: var(--bw-radius-sm); border-top-right-radius: var(--bw-radius-sm); }
.list-group-item:last-child { border-bottom-left-radius: var(--bw-radius-sm); border-bottom-right-radius: var(--bw-radius-sm); }
.dropdown-menu {
    border: none;
    border-radius: var(--bw-radius);
    box-shadow: var(--bw-shadow-lg);
    background: rgba(255, 255, 255, .85);
    -webkit-backdrop-filter: var(--bw-glass);
    backdrop-filter: var(--bw-glass);
}

/* =============================================================
   Dark mode — Apple dark appearance.
   Applied when the OS is in Dark mode (automatic) OR when the
   user forces it: the inline script in base.html toggles
   `html.theme-dark` from localStorage / prefers-color-scheme.
   The token flip re-skins every tokenized surface; the rules
   below cover the few non-token light values.
   ============================================================= */
html.theme-dark {
    --bw-primary: #0a84ff;          /* systemBlue (dark) */
    --bw-primary-600: #409cff;
    --bw-primary-soft: rgba(10, 132, 255, .22);
    --bw-success: #30d158;          /* systemGreen (dark) */
    --bw-success-soft: rgba(48, 209, 88, .22);
    --bw-warning: #ff9f0a;          /* systemOrange (dark) */
    --bw-warning-soft: rgba(255, 159, 10, .22);
    --bw-danger: #ff453a;           /* systemRed (dark) */
    --bw-danger-soft: rgba(255, 69, 58, .22);

    --bw-bg: #000000;               /* grouped background (dark) */
    --bw-surface: #1c1c1e;          /* elevated cell */
    --bw-surface-2: #2c2c2e;
    --bw-border: #38383a;           /* separator (dark) */
    --bw-border-strong: #48484a;
    --bw-text: #f5f5f7;
    --bw-text-2: #d1d1d6;
    --bw-muted: #98989f;

    --bw-shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
    --bw-shadow: 0 6px 24px rgba(0, 0, 0, .6);
    --bw-shadow-lg: 0 16px 48px rgba(0, 0, 0, .72);
}

html.theme-dark body { background-color: var(--bw-bg); color: var(--bw-text); }

/* iOS gray button + default label use quaternary fill (more opaque in dark) */
html.theme-dark .btn-default { background: rgba(120, 120, 128, .32); color: var(--bw-text); }
html.theme-dark .btn-default:hover, html.theme-dark .btn-default:focus,
html.theme-dark .btn-default:active, html.theme-dark .btn-default:active:hover,
html.theme-dark .btn-default:active:focus { background: rgba(120, 120, 128, .44); color: var(--bw-text); }
html.theme-dark .label-default { background: rgba(120, 120, 128, .32); color: #ebebf0; }

/* Bootstrap's modal-content defaults to #fff — flip to the dark surface */
html.theme-dark .modal-content { background: var(--bw-surface); }
html.theme-dark .close { color: #fff; }

/* Bootstrap hard-codes .list-group-item to a white background but leaves the
   text to inherit, so in dark mode light text landed on a white box —
   notifications were effectively unreadable. Flip the surface and pin the
   text/border to the theme tokens. */
html.theme-dark .list-group-item {
    background-color: var(--bw-surface-2);
    border-color: var(--bw-border);
    color: var(--bw-text);
}
html.theme-dark .list-group-item .text-muted,
html.theme-dark .list-group-item small { color: var(--bw-muted); }
html.theme-dark a.list-group-item,
html.theme-dark button.list-group-item { color: var(--bw-text); }
html.theme-dark a.list-group-item:hover,
html.theme-dark a.list-group-item:focus,
html.theme-dark button.list-group-item:hover,
html.theme-dark button.list-group-item:focus {
    background-color: rgba(120, 120, 128, .32);
    color: var(--bw-text);
}
html.theme-dark .modal-header { border-bottom-color: var(--bw-border); }
html.theme-dark .modal-footer { border-top-color: var(--bw-border); }

/* Segmented control on a dark track with a lighter selected segment */
html.theme-dark .nav-tabs { background: rgba(118, 118, 128, .24); }
html.theme-dark .nav-tabs > li > a:hover { background: rgba(255, 255, 255, .08); }
html.theme-dark .nav-tabs > li.active > a,
html.theme-dark .nav-tabs > li.active > a:hover,
html.theme-dark .nav-tabs > li.active > a:focus {
    background: #636366; color: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}

/* Form fields */
html.theme-dark .form-control, html.theme-dark select.form-control,
html.theme-dark textarea.form-control, html.theme-dark .login-form-control {
    background-color: var(--bw-surface-2);
    border-color: var(--bw-border-strong);
    color: var(--bw-text);
}
html.theme-dark .form-control::placeholder { color: rgba(235, 235, 245, .3); }

/* Search fields */
html.theme-dark .search-bar input[type="text"], html.theme-dark .search-bar input[type="search"],
html.theme-dark #task-search, html.theme-dark #search-input { background: rgba(118, 118, 128, .24); color: var(--bw-text); }
html.theme-dark .search-bar input:focus, html.theme-dark #task-search:focus,
html.theme-dark #search-input:focus { background: var(--bw-surface-2); }

/* Frosted-glass surfaces: dark translucent instead of white translucent */
html.theme-dark .admin-section-menu, html.theme-dark .dropdown-menu { background: rgba(44, 44, 46, .82); }
html.theme-dark .bottom-bar { background: rgba(22, 22, 24, .8); border-top: 1px solid rgba(255, 255, 255, .1); }
html.theme-dark .request-loading-overlay { background: rgba(0, 0, 0, .5); }
html.theme-dark .request-loading-panel { background: rgba(44, 44, 46, .92); color: var(--bw-text); }

/* Appearance toggle (segmented control on the profile page) */
.appearance-toggle { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--bw-radius-sm);
    background: rgba(118, 118, 128, .12); }
.appearance-toggle button { border: none; background: transparent; color: var(--bw-text);
    font: inherit; font-weight: 590; font-size: 13px; padding: 6px 16px; border-radius: 8px; cursor: pointer;
    transition: background-color .18s var(--bw-ease), box-shadow .18s var(--bw-ease); }
.appearance-toggle button:hover { background: rgba(120, 120, 128, .12); }
.appearance-toggle button.active { background: var(--bw-surface);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .12), 0 3px 8px rgba(0, 0, 0, .04); }
html.theme-dark .appearance-toggle { background: rgba(118, 118, 128, .24); }
html.theme-dark .appearance-toggle button.active { background: #636366; color: #fff; box-shadow: none; }

/* Dark-mode fixes for a few hardcoded light surfaces in templates/pages */
html.theme-dark .navbar-default,
html.theme-dark .navbar-fixed-top {
    background-color: rgba(22, 22, 24, .88) !important;
    border-color: var(--bw-border);
    -webkit-backdrop-filter: var(--bw-glass);
    backdrop-filter: var(--bw-glass);
}
html.theme-dark .wf-purple,
html.theme-dark .quick-icon.purple { background: rgba(191, 90, 242, .24); color: #d9a6ff; }
html.theme-dark #file-preview { background: var(--bw-surface-2) !important; border-top-color: var(--bw-border) !important; }

/* Authoritative back-button style (leak-proof). Page stylesheets accumulate
   under the SPA — they are never unloaded — and several define a bare
   `.back-btn` with their own background / border-radius (e.g. chat.css made it
   a filled blue circle, sop_document_details.css a rounded box). Once such a
   page is visited, that bare rule leaks to EVERY page's header back button.
   theme.css loads last, so this normalizes all back buttons to a plain
   iOS-style blue arrow regardless of what leaked. */
.back-btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    color: var(--bw-primary);
}
.back-btn .glyphicon, .back-btn .fa, .back-btn i { color: var(--bw-primary); }

/* ---- Walkie-talkie (2026-07-07) ---- */
/* Colour class for the Walkie icon. Outside the bottom bar it is a filled
   circle like the other bg-*s; inside the bottom bar the iOS tab-bar rules
   above flatten it to a tinted glyph, so give it the matching tint. */
.bg-teal { background: #30b0c7; }
.bottom-bar .icon-btn.bg-teal { color: #30b0c7; }             /* systemTeal */
/* F7 ligature glyphs inside bottom-bar icon buttons follow the tab-bar
   glyph size instead of the F7 font's fixed 28px default. */
.icon-btn .f7-icons { font-size: inherit; line-height: inherit; vertical-align: middle; }