/* =============================================================
   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) */
    /* Text colors retain the system hues with enough contrast for small text.
       Solid actions have separate fills: bright dark-mode links need a darker
       background when paired with white button text. */
    --bw-primary: #0062cc;
    --bw-primary-600: #004fa6;
    --bw-action-primary: #0062cc;
    --bw-action-primary-hover: #004fa6;
    --bw-action-success: #217a3c;
    --bw-action-success-hover: #19612f;
    --bw-action-danger: #c42b25;
    --bw-action-danger-hover: #a5211c;
    --bw-on-action: #ffffff;
    --bw-teal: #08788d;
    --bw-action-teal: #08788d;
    --bw-primary-soft: rgba(0, 122, 255, .10);
    --bw-accent: #ef746f;           /* brand dot (kept) */
    --bw-success: #1d7136;
    --bw-success-soft: rgba(52, 199, 89, .12);
    --bw-warning: #965000;
    --bw-warning-fill: #ff9500;
    --bw-warning-fill-hover: #e68600;
    --bw-on-warning: #291700;
    --bw-warning-soft: rgba(255, 149, 0, .13);
    --bw-danger: #b92520;
    --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-control-border: #84848a;
    --bw-text: #1d1d1f;
    --bw-text-2: #424245;
    --bw-muted: #65656b;

    /* 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);

    /* Brand type: Wanted Sans (variable, loaded in base.html from the pinned
       npm CDN build); system stack as fallback while it loads/offline. */
    --bw-font: "Wanted Sans Variable", "Wanted Sans",
               -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);

    /* Shell: the fixed bottom tab bar (partials/bottom_nav.html) is this tall
       (+ the safe-area inset). Pages never need to know — main pads itself. */
    --bw-tabbar-h: 60px;

    /* Aliases a few page stylesheets reach for; keep them defined so a typo'd
       token never falls back to black-on-black. */
    --bw-text-secondary: var(--bw-muted);
    --bw-card-bg: var(--bw-surface);
}

/* ---------- Base ---------- */
html { color-scheme: light; -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-600); text-decoration: underline; }

::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 var(--bw-primary);
    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; }
/* Shell chrome is not page content: the fixed tab bar and the toast stack
   are direct children of <main> too, so without this they would fade out and
   back in on every SPA tap (toasts keep their own bw-toast-in). */
main.spa-page-enter > #bw-shell-nav, main.spa-page-enter > .bw-toasts { animation: none; }

@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; }

/* Icon-only circular header buttons (the "+" on Tasks / Schedule / Time off /
   Documents / Chats). One canonical spec so every main page matches: page
   stylesheets load before this file and disagreed on size (40/45/unsized),
   and the capsule padding above squeezed the circle and pushed the glyph
   into the corner. Two classes outrank the single-class .btn rules. */
.btn.add-task-btn, .btn.add-chat-btn, .btn.add-document-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 16px;
}

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

/* 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-action-success); border-color: transparent; color: var(--bw-on-action); }
.btn-success:hover, .btn-success:focus, .btn-success:active { background: var(--bw-action-success-hover); border-color: transparent; color: var(--bw-on-action); }

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

.btn-warning { background: var(--bw-warning-fill); border-color: transparent; color: var(--bw-on-warning); }
.btn-warning:hover, .btn-warning:focus, .btn-warning:active { background: var(--bw-warning-fill-hover); border-color: transparent; color: var(--bw-on-warning); }
.btn-info { background: var(--bw-action-primary); border-color: transparent; color: var(--bw-on-action); }
.btn-info:hover, .btn-info:focus, .btn-info:active { background: var(--bw-action-primary-hover); border-color: transparent; color: var(--bw-on-action); }

.btn-link { background: transparent; border-color: transparent; box-shadow: none; color: var(--bw-primary); font-weight: 590; }
.btn-link:hover { color: var(--bw-primary-600); text-decoration: underline; }
.btn-link.text-danger, .btn-link.text-danger:hover { color: var(--bw-danger); }

.btn[disabled], .btn.disabled, fieldset[disabled] .btn { opacity: .65; cursor: not-allowed; transform: none; }
.btn:hover, .btn:focus { text-decoration: none; }

/* ---------- 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-control-border);
    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, .login-form-control::placeholder { color: var(--bw-muted); opacity: 1; }
.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-action-primary); color: var(--bw-on-action); }
.label-success { background: var(--bw-success-soft); color: var(--bw-success); border: none; }
.label-warning { background: var(--bw-warning-soft); color: var(--bw-warning); border: none; }
.label-danger { background: var(--bw-danger-soft); color: var(--bw-danger); border: none; }

.badge { background: var(--bw-action-danger); color: var(--bw-on-action); 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: var(--bw-success); }
.alert-warning { background: var(--bw-warning-soft); color: var(--bw-warning); }
.alert-danger { background: var(--bw-danger-soft); color: var(--bw-danger); }
.alert-info { background: var(--bw-primary-soft); color: var(--bw-primary); }
.alert .alert-link, .alert a { color: inherit; text-decoration: underline; }
.text-success, .has-success .help-block, .has-success .control-label { color: var(--bw-success); }
.text-warning, .has-warning .help-block, .has-warning .control-label { color: var(--bw-warning); }
.text-danger, .has-error .help-block, .has-error .control-label { color: var(--bw-danger); }
.text-info, .text-primary { color: var(--bw-primary); }
.help-block { color: var(--bw-muted); }
legend { color: var(--bw-text); border-color: var(--bw-border); }

/* ---------- Modals: iOS sheets ---------- */
.modal-content {
    background: var(--bw-surface);
    color: var(--bw-text);
    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-size: 20px; line-height: 1.3; 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 { color: var(--bw-text-2); background: transparent; text-shadow: none; opacity: 1; transition: color .18s; font-weight: 400; }
.close:hover, .close:focus { color: var(--bw-text); opacity: 1; }

/* ---------- 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 ---------- */
/* One header for every page (admin/_page_header.html, which roster's wrapper
   and the hand-written .page-header blocks share): a 44px back target, the
   title, an optional subtitle and an actions slot that wraps under the title
   on phones. Declared here, not in a page stylesheet, so it holds wherever the
   partial is included. */
.page-header, .page-header-custom { border-bottom: none; margin-top: 4px; }
.page-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin: 14px 0 16px;
    padding: 0;
}
.page-header .page-back-link, .page-header > .back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    margin: 0 0 0 -10px;
    border-radius: 999px;
    color: var(--bw-primary);
    text-decoration: none;
}
.page-header .page-back-link .back-icon, .page-header > .back-btn .back-icon, .page-header > .back-btn .fa { margin: 0; font-size: 18px; }
.page-header .page-back-link:hover, .page-header .page-back-link:focus-visible,
.page-header > .back-btn:hover, .page-header > .back-btn:focus-visible {
    background: var(--bw-primary-soft); color: var(--bw-primary); outline: none; text-decoration: none;
}
.page-header .page-header-text { flex: 1 1 200px; min-width: 0; }
.page-header h2, .page-header h1, .page-header-custom .page-title {
    margin: 0;
    font-weight: 700;
    letter-spacing: -0.028em;
    font-size: 28px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}
.page-header-sub, .page-header .sub-text { margin: 2px 0 0; font-size: 13.5px; color: var(--bw-muted); overflow-wrap: anywhere; }
.page-header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.page-header-actions .btn { min-height: 40px; }
@media (max-width: 600px) {
    .page-header h2, .page-header h1, .page-header-custom .page-title { font-size: 24px; }
    .page-header-actions { flex-basis: 100%; margin-left: 0; }
    .page-header-actions .btn { flex: 1 1 auto; }
}
.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); 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-action-primary) !important; color: var(--bw-on-action); }
.bg-green  { background: var(--bw-action-success) !important; color: var(--bw-on-action); }
.bg-orange { background: var(--bw-warning-fill) !important; color: var(--bw-on-warning); }
.bg-red    { background: var(--bw-action-danger) !important; color: var(--bw-on-action); }
.bg-purple { background: #af52de !important; }   /* systemPurple */
.bg-pink   { background: #ff2d55 !important; }   /* systemPink */

/* ---------- Bottom navigation: iOS tab bar ---------- */
/* The shell bar (partials/bottom_nav.html, rendered by base.html as
   #bw-shell-nav.bottom-bar) is the only one. Its layout is declared here on
   the id so the stale .bottom-bar rules still found in page stylesheets cannot
   resize it: one height everywhere. */
.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;
}
#bw-shell-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    margin: 0;
    padding: 0 0 env(safe-area-inset-bottom, 0px);
    height: calc(var(--bw-tabbar-h) + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
}
#bw-shell-nav .bw-tab-row {
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: nowrap;
    height: var(--bw-tabbar-h);
    max-width: 640px;
    margin: 0 auto;
    padding: 0 4px;
}
#bw-shell-nav .bw-tab-link {
    flex: 1 1 0;
    max-width: 112px;
    min-width: 0;
    min-height: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 4px 2px;
    text-decoration: none;
    border-radius: 10px;
}
#bw-shell-nav .bw-tab-link:focus-visible { outline: 3px solid var(--bw-primary); outline-offset: -3px; }
#bw-shell-nav .icon-btn {
    width: 30px;
    height: 30px;
    margin: 0;
    border-radius: 0;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* 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: 24px;
    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); }
.bottom-label { color: var(--bw-muted); font-weight: 500; font-size: 10px; letter-spacing: 0; }
#bw-shell-nav .bottom-label { display: block; width: 100%; margin: 0; font-size: 11px; line-height: 1.2; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bottom-bar a:hover .bottom-label { color: var(--bw-text-2); }
/* The current section: filled glyph tint + darker label (aria-current from
   request.resolver_match). Inactive tabs are quieter so the active one reads. */
#bw-shell-nav .bw-tab-link:not([aria-current]) .icon-btn { opacity: .78; }
#bw-shell-nav .bw-tab-link[aria-current] .icon-btn { opacity: 1; transform: none; }
#bw-shell-nav .bw-tab-link[aria-current] .bottom-label { color: var(--bw-text); font-weight: 600; }
/* Six tabs on a 375px phone: shrink the label a touch so "Documents" fits instead of ending in an ellipsis. */
@media (max-width: 400px) { #bw-shell-nav .bottom-label { font-size: 10px; letter-spacing: -0.01em; } }
/* Transitional: pages that still paste their own copy of the bar keep it
   hidden (spa.js also removes it) until their owners delete the markup. */
main .bottom-bar:not(#bw-shell-nav) { display: none !important; }
/* The page content reserves the bar's height once, here, instead of every
   page wrapper guessing 90/96/104px. Wrappers that still carry their own
   bottom padding are trimmed so nothing double-pads. */
main:has(> #bw-shell-nav), body.bw-has-tabbar main { padding-bottom: calc(var(--bw-tabbar-h) + env(safe-area-inset-bottom, 0px)); }
main:has(> #bw-shell-nav) :is(.home-page, .admin-panel-page, .admin-dashboard-page, .care-page, .chat-page, .hazard-approvals-page, .hazard-reports-page, .hazard-words-page, .manage-employee-page, .new-document-page, .new-recording-page, .psychosocial-hazard-report-details, .roster-page, .sop-approval-page, .sop-document-detail-page, .sop-documents-page, .tasks-page, .consent-page .page-wrapper),
body.bw-has-tabbar main :is(.home-page, .admin-panel-page, .admin-dashboard-page, .care-page, .chat-page, .hazard-approvals-page, .hazard-reports-page, .hazard-words-page, .manage-employee-page, .new-document-page, .new-recording-page, .psychosocial-hazard-report-details, .roster-page, .sop-approval-page, .sop-document-detail-page, .sop-documents-page, .tasks-page, .consent-page .page-wrapper) { padding-bottom: 20px; }

/* ---------- 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-action-primary);
    border-color: transparent;
    transition: background-color .18s var(--bw-ease), transform .12s var(--bw-ease);
}
.login-submit-btn:hover { background: var(--bw-action-primary-hover); box-shadow: none; }
.login-card .login-submit-btn.btn-primary { background: var(--bw-action-primary); border-color: transparent; color: var(--bw-on-action); }
.login-card .login-submit-btn.btn-primary:hover, .login-card .login-submit-btn.btn-primary:focus { background: var(--bw-action-primary-hover); border-color: transparent; color: var(--bw-on-action); }
.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 {
    color-scheme: dark;
    --bw-primary: #70b5ff;
    --bw-primary-600: #a0ceff;
    --bw-teal: #6ed7e8;
    --bw-primary-soft: rgba(10, 132, 255, .22);
    --bw-success: #65db85;
    --bw-success-soft: rgba(48, 209, 88, .22);
    --bw-warning: #ffc166;
    --bw-warning-fill: #ff9f0a;
    --bw-warning-fill-hover: #e68600;
    --bw-warning-soft: rgba(255, 159, 10, .22);
    --bw-danger: #ff8b82;
    --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-control-border: #85858c;
    --bw-text: #f5f5f7;
    --bw-text-2: #d1d1d6;
    --bw-muted: #b0b0b8;

    --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-control-border);
    color: var(--bw-text);
}
html.theme-dark .form-control::placeholder, html.theme-dark .login-form-control::placeholder { color: var(--bw-muted); }

/* Bootstrap components also need themed foregrounds and interactive states;
   changing just a menu or field background leaves its default dark text. */
.dropdown-menu > li > a { color: var(--bw-text); }
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
    background: var(--bw-surface-2); color: var(--bw-text); opacity: 1;
}
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
    background: var(--bw-action-primary); color: var(--bw-on-action);
}
.dropdown-menu > .disabled > a, .dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus { background: transparent; color: var(--bw-muted); }
.dropdown-header { color: var(--bw-muted); }
.dropdown-menu .divider { background: var(--bw-border); }
.input-group-addon { color: var(--bw-text-2); background: var(--bw-surface-2); border-color: var(--bw-control-border); }
.panel { color: var(--bw-text); background: var(--bw-surface); border-color: var(--bw-border); }
.panel-default > .panel-heading, .panel-footer { color: var(--bw-text); background: var(--bw-surface-2); border-color: var(--bw-border); }
.pagination > li > a, .pagination > li > span { color: var(--bw-primary); background: var(--bw-surface); border-color: var(--bw-border); }
.pagination > li > a:hover, .pagination > li > a:focus { color: var(--bw-primary-600); background: var(--bw-surface-2); border-color: var(--bw-border); }
.pagination > .active > a, .pagination > .active > a:hover,
.pagination > .active > span, .pagination > .active > span:hover { color: var(--bw-on-action); background: var(--bw-action-primary); border-color: var(--bw-action-primary); }
.pagination > .disabled > a, .pagination > .disabled > a:hover,
.pagination > .disabled > span { color: var(--bw-muted); background: var(--bw-surface-2); border-color: var(--bw-border); }
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control,
html.theme-dark .form-control[disabled], html.theme-dark .form-control[readonly],
html.theme-dark fieldset[disabled] .form-control {
    color: var(--bw-text-2); background: var(--bw-surface-2); opacity: 1;
}
.form-control[disabled], fieldset[disabled] .form-control { cursor: not-allowed; }
.has-error .form-control, html.theme-dark .has-error .form-control { border-color: var(--bw-danger); }
.has-success .form-control, html.theme-dark .has-success .form-control { border-color: var(--bw-success); }
.has-warning .form-control, html.theme-dark .has-warning .form-control { border-color: var(--bw-warning); }

.table-bordered, .table-bordered > thead > tr > th, .table-bordered > tbody > tr > td,
.table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > td,
.table-bordered > thead > tr > td, .table-bordered > tfoot > tr > th,
.table-responsive { border-color: var(--bw-border); }
.table > tbody > tr.success, .table > tbody > tr.warning,
.table > tbody > tr.danger, .table > tbody > tr.info { background: transparent; }
.table > tbody > tr.success > td, .table > tbody > tr.success > th,
.table > tbody > tr > td.success { background: var(--bw-success-soft); color: var(--bw-text); }
.table > tbody > tr.warning > td, .table > tbody > tr.warning > th,
.table > tbody > tr > td.warning { background: var(--bw-warning-soft); color: var(--bw-text); }
.table > tbody > tr.danger > td, .table > tbody > tr.danger > th,
.table > tbody > tr > td.danger { background: var(--bw-danger-soft); color: var(--bw-text); }
.table > tbody > tr.info > td, .table > tbody > tr.info > th,
.table > tbody > tr > td.info { background: var(--bw-primary-soft); color: var(--bw-text); }
.table-hover > tbody > tr:hover > td, .table-hover > tbody > tr:hover > th { background-color: var(--bw-surface-2); }

/* Keep the keyboard ring after Bootstrap and page rules suppress :focus.
   Mouse focus still uses the quieter component-specific treatment. */
.btn:focus-visible, .btn:active:focus-visible, .btn.focus:focus-visible,
.form-control:focus-visible, .login-form-control:focus-visible,
.password-toggle-btn:focus-visible, .back-btn:focus-visible,
.search-bar input:focus-visible, #task-search:focus-visible, #search-input:focus-visible {
    outline: 3px solid var(--bw-primary); outline-offset: 3px;
}
html.theme-dark * { scrollbar-color: rgba(255, 255, 255, .4) transparent; }
html.theme-dark *::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .4); }

/* 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; min-height: 44px; 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: var(--bw-action-teal); color: var(--bw-on-action); }
.bottom-bar .icon-btn.bg-teal { color: var(--bw-teal); }             /* 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; }

/* =============================================================
   Shell feedback: toasts (Django messages rendered once in base.html)
   ============================================================= */
.bw-toasts {
    position: fixed;
    top: calc(12px + env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%);
    z-index: 999980;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(calc(100vw - 24px), 480px);
    pointer-events: none;
}
.bw-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 10px 6px 10px 16px;
    border-radius: var(--bw-radius);
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: var(--bw-glass);
    backdrop-filter: var(--bw-glass);
    box-shadow: var(--bw-shadow-lg);
    color: var(--bw-text);
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.35;
    border-left: 4px solid var(--bw-primary);
    pointer-events: auto;
    cursor: pointer;
    animation: bw-toast-in .28s var(--bw-ease) both;
}
.bw-toast--success { border-left-color: var(--bw-success); }
.bw-toast--error, .bw-toast--danger { border-left-color: var(--bw-danger); }
.bw-toast--warning { border-left-color: var(--bw-warning-fill); }
.bw-toast--info, .bw-toast--debug { border-left-color: var(--bw-primary); }
.bw-toast-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.bw-toast-close {
    flex: none;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--bw-muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.bw-toast-close:hover, .bw-toast-close:focus-visible { background: rgba(120, 120, 128, .14); color: var(--bw-text); outline: none; }
.bw-toast.is-leaving { animation: bw-toast-out .22s var(--bw-ease) both; }
@keyframes bw-toast-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes bw-toast-out { from { opacity: 1; } to { opacity: 0; transform: translateY(-8px); } }
html.theme-dark .bw-toast { background: rgba(44, 44, 46, .94); color: var(--bw-text); }
@media (prefers-reduced-motion: reduce) { .bw-toast, .bw-toast.is-leaving { animation: none; } }

/* =============================================================
   Shared primitives (the Admin Panel / Agents / Talk / AI provider pages set
   the bar). Use these instead of copying page CSS:
     .bw-tabs-strip + .bw-tab / .bw-tab-panel   segmented tab strip (bw_list.js)
     .bw-stats-grid > .bw-stat                 stat tiles, 3-up on phones
     .bw-rows > .bw-row                        compact 48px list rows
     [data-bw-list] + .bw-find + .bw-more      search box + "Show all N" cap
     .bw-switch-row / .bw-check-row            44px toggle and checkbox rows
     .bw-chip-select                           checkbox chips for pickers
     .bw-overflow                              three-dot row menu
     .bw-details                               disclosure (<details>)
   ============================================================= */
.bw-hide { display: none !important; }
.bw-sub { font-size: 12.5px; color: var(--bw-muted); }
.bw-summary { margin: 0 0 12px; font-size: 13px; color: var(--bw-muted); display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.bw-summary strong { color: var(--bw-text); font-size: 15px; font-weight: 700; }

/* Tab strip: buttons switch panels; without JS every panel stacks. */
.bw-tabs-strip { display: none; gap: 4px; padding: 4px; margin: 0 0 14px; background: var(--bw-surface-2); border-radius: var(--bw-radius-sm); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.bw-tabs-strip::-webkit-scrollbar { display: none; }
html.bw-js .bw-tabs-strip { display: flex; }
.bw-tab { flex: 1 1 auto; min-height: 40px; padding: 6px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--bw-text-2); font: inherit; font-size: 13.5px; font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; text-decoration: none; transition: background-color .15s var(--bw-ease), color .15s var(--bw-ease); }
.bw-tab:hover { color: var(--bw-text); text-decoration: none; }
.bw-tab:focus-visible { outline: 2px solid var(--bw-primary); outline-offset: -2px; }
.bw-tab.is-active { background: var(--bw-surface); color: var(--bw-primary); box-shadow: var(--bw-shadow-sm); }
html.theme-dark .bw-tab.is-active { background: rgba(120, 120, 128, .36); color: var(--bw-text); }
.bw-tab .n { font-size: 11.5px; font-weight: 600; color: var(--bw-muted); background: var(--bw-primary-soft); border-radius: 980px; padding: 1px 7px; line-height: 1.5; }
.bw-tab.is-active .n { color: var(--bw-primary); }
html.theme-dark .bw-tab.is-active .n { color: var(--bw-text); }
html.bw-js .bw-tab-panel:not(.is-active) { display: none; }
html.bw-js .bw-panel-title { display: none; }

/* Stats: 3-up on phones, auto-fit wider. */
.bw-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 0 0 14px; }
.bw-stat { background: var(--bw-surface); border-radius: var(--bw-radius); padding: 12px; text-align: center; box-shadow: var(--bw-shadow-sm); min-width: 0; }
.bw-stat .v { font-size: clamp(18px, 5vw, 24px); font-weight: 700; letter-spacing: -.02em; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.bw-stat .l { font-size: 12px; color: var(--bw-muted); }
@media (max-width: 600px) { .bw-stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .bw-stat { padding: 10px 6px; } }

/* Toolbar + find box + capped rows. */
.bw-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 10px; }
.bw-find { flex: 1 1 200px; min-width: 0; min-height: 40px; height: 40px; border-radius: var(--bw-radius-sm); font-size: 14px; }
.bw-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.bw-chip { min-height: 40px; border: 1px solid var(--bw-border); background: var(--bw-surface-2); color: var(--bw-text-2); border-radius: 980px; padding: 6px 14px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; transition: background-color .15s var(--bw-ease), color .15s var(--bw-ease); }
.bw-chip:hover { color: var(--bw-text); border-color: var(--bw-border-strong); }
.bw-chip:focus-visible { outline: 2px solid var(--bw-primary); outline-offset: 1px; }
.bw-chip.is-active { background: var(--bw-action-primary); color: var(--bw-on-action); border-color: transparent; }
.bw-chip small { font-weight: 500; opacity: .75; }
.bw-rows { list-style: none; margin: 0; padding: 0; }
.bw-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; min-height: 48px; border-top: 1px solid var(--bw-border); font-size: 13.5px; }
.bw-row:first-child { border-top: 0; }
.bw-row-emoji { flex: none; width: 26px; text-align: center; font-size: 18px; line-height: 1; }
.bw-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.bw-row-title { flex: none; max-width: 100%; display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.bw-row-title a { color: inherit; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.bw-row-title .care-pill, .bw-row-title .badge, .bw-row-title .label { flex: none; }
.bw-row-meta { flex: 1 1 160px; min-width: 0; font-size: 12.5px; color: var(--bw-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bw-row-actions { flex: none; display: flex; gap: 6px; align-items: center; }
.bw-row-actions form { margin: 0; display: inline; }
.bw-row-actions .btn-xs { min-height: 36px; padding: 6px 12px; display: inline-flex; align-items: center; }
.bw-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--bw-success); }
.bw-dot.off { background: var(--bw-muted); }
.bw-dot.err { background: var(--bw-danger); }
.bw-dot.via { background: var(--bw-warning-fill); }
.bw-empty { margin: 6px 0 0; font-size: 13px; color: var(--bw-muted); }
li.bw-empty { display: block; padding: 10px 0; }
.bw-more { display: flex; width: 100%; min-height: 40px; align-items: center; justify-content: center; margin-top: 8px; border: 1px dashed var(--bw-border-strong); border-radius: var(--bw-radius-sm); background: transparent; color: var(--bw-primary); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.bw-more:hover { background: var(--bw-primary-soft); }
.bw-more:focus-visible { outline: 2px solid var(--bw-primary); outline-offset: 1px; }

/* Disclosure rows (<details class="bw-details">). */
.bw-details { border-top: 1px solid var(--bw-border); margin-top: 8px; }
.bw-details.bw-details-flat { border-top: 0; margin-top: 0; }
.bw-details > summary { list-style: none; cursor: pointer; min-height: 44px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-weight: 600; font-size: 13.5px; color: var(--bw-text); }
.bw-details > summary::-webkit-details-marker { display: none; }
.bw-details > summary::before { content: ""; flex: none; width: 7px; height: 7px; border-right: 2px solid var(--bw-muted); border-bottom: 2px solid var(--bw-muted); transform: rotate(-45deg); transition: transform .15s var(--bw-ease); margin: 0 6px 0 3px; }
.bw-details[open] > summary::before { transform: rotate(45deg); }
.bw-details > summary:focus-visible { outline: 2px solid var(--bw-primary); outline-offset: 2px; border-radius: 6px; }
.bw-details > summary .bw-sub { font-weight: 500; }
.bw-details > summary h2 { margin: 0; font-size: 17px; }
.bw-details-body { padding: 2px 0 10px; }
.bw-details.bw-danger > summary { color: var(--bw-danger); }

/* Settings rows: a label with a 44px toggle (switch) or a 20px checkbox,
   each row a full-width tap target.
     <label class="bw-switch-row"><span class="bw-switch-text">Allow swaps<small>Workers can trade shifts</small></span>
       <input type="checkbox" name="..." class="bw-switch"></label>
     <label class="bw-check-row"><input type="checkbox" name="..."> <span>Forklift</span></label> */
.bw-switch-row, .bw-check-row { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 0; margin: 0; font-weight: 500; color: var(--bw-text); cursor: pointer; border-top: 1px solid var(--bw-border); }
.bw-switch-row:first-child, .bw-check-row:first-child { border-top: 0; }
.bw-switch-text, .bw-check-row > span { flex: 1 1 auto; min-width: 0; }
.bw-switch-text small, .bw-check-row small { display: block; font-size: 12.5px; font-weight: 400; color: var(--bw-muted); }
.bw-check-row > input[type="checkbox"], .bw-check-row > input[type="radio"] { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--bw-primary); }
.bw-switch { -webkit-appearance: none; appearance: none; flex: none; width: 51px; height: 31px; margin: 0; border-radius: 999px; background: rgba(120, 120, 128, .32); position: relative; cursor: pointer; transition: background-color .2s var(--bw-ease); }
.bw-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); transition: transform .2s var(--bw-ease); }
.bw-switch:checked { background: var(--bw-action-success); }
.bw-switch:checked::after { transform: translateX(20px); }
.bw-switch:focus-visible { outline: 3px solid var(--bw-primary); outline-offset: 2px; }
.bw-switch[disabled] { opacity: .5; cursor: not-allowed; }

/* Chip pickers: a list of checkbox labels that render as toggle chips.
     <div class="bw-chip-select"><label><input type="checkbox" name="assignees" value="3"><span>Mia Lee</span></label>...</div> */
.bw-chip-select { display: flex; flex-wrap: wrap; gap: 8px; }
.bw-chip-select > label { position: relative; margin: 0; font-weight: 500; }
.bw-chip-select > label > input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.bw-chip-select > label > span { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 7px 14px; border: 1px solid var(--bw-border); border-radius: 980px; background: var(--bw-surface-2); color: var(--bw-text-2); font-size: 13.5px; cursor: pointer; transition: background-color .15s var(--bw-ease), color .15s var(--bw-ease); }
.bw-chip-select > label > input:checked + span { background: var(--bw-action-primary); color: var(--bw-on-action); border-color: transparent; }
.bw-chip-select > label > input:checked + span::before { content: "\2713"; font-size: 12px; }
.bw-chip-select > label > input:focus-visible + span { outline: 3px solid var(--bw-primary); outline-offset: 2px; }
.bw-chip-select > label > input[disabled] + span { opacity: .5; cursor: not-allowed; }

/* Row overflow (three dots): secondary actions out of the row.
     <details class="bw-overflow"><summary aria-label="More actions">&#8943;</summary>
       <div class="bw-overflow-menu"><a href="...">Edit</a><form method="post">...<button class="danger">Delete</button></form></div></details> */
.bw-overflow { position: relative; display: inline-block; }
.bw-overflow > summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; color: var(--bw-text-2); font-size: 22px; line-height: 1; cursor: pointer; user-select: none; }
.bw-overflow > summary::-webkit-details-marker { display: none; }
.bw-overflow > summary:hover, .bw-overflow[open] > summary { background: rgba(120, 120, 128, .14); color: var(--bw-text); }
.bw-overflow > summary:focus-visible { outline: 2px solid var(--bw-primary); outline-offset: 1px; }
.bw-overflow-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 1035; min-width: 180px; padding: 6px; border-radius: var(--bw-radius); background: var(--bw-surface); box-shadow: var(--bw-shadow-lg); display: flex; flex-direction: column; }
.bw-overflow-menu > a, .bw-overflow-menu > button, .bw-overflow-menu > form > button { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--bw-text); font: inherit; font-size: 14px; text-align: left; text-decoration: none; cursor: pointer; }
.bw-overflow-menu > form { margin: 0; }
.bw-overflow-menu > a:hover, .bw-overflow-menu > button:hover, .bw-overflow-menu > form > button:hover { background: var(--bw-surface-2); text-decoration: none; color: var(--bw-text); }
.bw-overflow-menu .danger, .bw-overflow-menu .text-danger { color: var(--bw-danger); }
.bw-overflow-menu .bw-overflow-sep { height: 1px; margin: 4px 0; background: var(--bw-border); }

/* Multi-selects were squashed to the 40px single-line field height. */
select[multiple].form-control, select[size].form-control { height: auto; min-height: 120px; padding: 6px 8px; }
select[multiple].form-control option, select[size].form-control option { padding: 6px 8px; border-radius: 6px; }
/* Native checkboxes/radios read at 13px; give them a tappable size without
   touching the many bespoke ones pages style themselves. :where() keeps this
   rule at zero specificity so the .bw-switch toggle, .bw-chip-select's hidden
   input and a page's own sizing (e.g. .ag-choice input) always win over it. */
:where(.checkbox input[type="checkbox"], .radio input[type="radio"], .form-group > input[type="checkbox"], label > input[type="checkbox"], label > input[type="radio"]) { width: 18px; height: 18px; vertical-align: -3px; }
.checkbox label, .radio label { min-height: 28px; }

/* Modals that fit a phone: the body scrolls, the footer stays pinned.
   (Add .bw-sheet to .modal-dialog on long forms.) */
.modal-dialog.bw-sheet .modal-content { display: flex; flex-direction: column; max-height: calc(100dvh - 40px); }
.modal-dialog.bw-sheet .modal-body { flex: 1 1 auto; overflow: auto; -webkit-overflow-scrolling: touch; }
.modal .close { width: 44px; height: 44px; margin: -12px -12px -12px 0; display: inline-flex; align-items: center; justify-content: center; font-size: 26px; }
@media (max-width: 600px) {
    .modal-dialog { margin: 10px; }
    .modal-dialog.bw-sheet .modal-content { max-height: calc(100dvh - 20px); }
}