/* Plus Jakarta Sans (SIL Open Font License, see assets/fonts/OFL.txt), served from this site so it also works offline. */
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../fonts/plus-jakarta-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
    color-scheme: light;
    --navy: #2a292e;
    --navy-dark: #1d1c21;
    --gold: #c47a80;
    --gold-soft: #f0d3d5;
    --cream: #f6f5f3;
    --white: #ffffff;
    --text: #1f1d22;
    --muted: #6d6870;
    --line: #e7e4e0;
    --line-strong: #d6d2cd;
    --danger: #b3404a;
    --accent: #b4505a;
    --accent-soft: #f8ecec;
    --primary: #b4505a;
    --primary-hover: #9d424b;
    --ok: #2e7a57;
    --ok-soft: #e6f3ec;
    --warn: #96600f;
    --warn-soft: #fbf1df;
    --info: #4a6382;
    --info-soft: #e9eef4;
    --chart: #c47a80;
    --page: #f6f5f3;
    --surface: #ffffff;
    --surface-soft: #f9f8f6;
    --shadow: 0 1px 2px rgba(31, 29, 34, .04), 0 1px 3px rgba(31, 29, 34, .03);
    --shadow-lg: 0 16px 40px rgba(31, 29, 34, .14);
    --radius: 12px;
    --radius-sm: 8px;
}

body[data-theme="dark"] {
    color-scheme: dark;
    --navy: #ecebee;
    --navy-dark: #141317;
    --gold: #d0898f;
    --gold-soft: #e7b3b7;
    --cream: #17161a;
    --white: #201f23;
    --text: #ecebee;
    --muted: #a5a1a8;
    --line: #34323a;
    --line-strong: #46434c;
    --danger: #ec8a92;
    --accent: #e0868d;
    --accent-soft: #3a2629;
    --primary: #b9575f;
    --primary-hover: #c9666e;
    --ok: #7cc7a2;
    --ok-soft: #1e3329;
    --warn: #e2b56a;
    --warn-soft: #3a2f1c;
    --info: #9db4d3;
    --info-soft: #232c38;
    --chart: #d0898f;
    --page: #17161a;
    --surface: #201f23;
    --surface-soft: #28272c;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-lg: 0 18px 48px rgba(0, 0, 0, .5);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    font-family: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    /* Plus Jakarta Sans has tall lowercase letters (x-height 0.54); scale all text to the 0.50 the sizes were designed with. */
    font-size-adjust: 0.5;
    color: var(--text);
    background: var(--page);
    transition: background-color .2s ease, color .2s ease;
}

/* Buttons and form fields use the site font too (browsers default them to Arial / system fonts). */
button, input, select, textarea, optgroup { font-family: inherit; }

a {
    color: var(--navy);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.topbar {
    background: var(--navy);
    color: var(--white);
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--white);
    text-decoration: none;
}

.brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--gold);
    color: var(--navy-dark);
    display: grid;
    place-items: center;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.brand h1,
.brand strong {
    margin: 0;
    font-size: 18px;
}

.brand span {
    display: block;
    font-size: 12px;
    color: #c9d5e5;
    font-weight: 400;
}

.wrap {
    width: min(1080px, calc(100% - 32px));
    margin: 0 auto;
    padding: 32px 0 48px;
    flex: 1;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 24px;
    align-items: stretch;
}

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow);
    padding: 28px;
}

.kicker {
    margin: 0 0 8px;
    color: var(--gold);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

h2 {
    margin: 0 0 8px;
    font-size: 28px;
}

.lead {
    margin: 0 0 24px;
    color: var(--muted);
}

.choice-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.choice {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 20px;
    background: #fbfdff;
}

.choice h3 {
    margin: 0 0 8px;
}

.btn,
button,
input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 10px;
    padding: 11px 16px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
}

.btn-primary,
button,
input[type="submit"] {
    background: var(--navy);
    color: var(--white);
}

.btn-gold {
    background: var(--gold);
    color: var(--navy-dark);
}

.btn-outline {
    background: transparent;
    color: var(--navy);
    border: 1px solid var(--line);
}

.btn:hover,
button:hover,
input[type="submit"]:hover {
    opacity: 0.92;
    text-decoration: none;
}

.form {
    display: grid;
    gap: 14px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 6px;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="datetime-local"],
input[type="search"],
select,
textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 11px 12px;
    font-size: 15px;
    font-family: inherit;
}

.btn-danger {
    background: var(--danger);
    color: var(--white);
    justify-self: start;
}

.report-dialog {
    width: min(520px, calc(100% - 32px));
    max-height: min(90vh, 720px);
    padding: 26px;
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 24px 80px rgba(10, 27, 48, 0.3);
}

.report-dialog::backdrop {
    background: rgba(10, 27, 48, 0.58);
}

.report-dialog h2 {
    font-size: 22px;
}

.switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    cursor: pointer;
}

.switch-row strong,
.switch-row small {
    display: block;
}

.switch-row small {
    margin-top: 4px;
    color: var(--muted);
    font-weight: 400;
}

.switch-row input {
    width: 42px;
    height: 22px;
    flex: 0 0 auto;
    accent-color: var(--navy);
}

.dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 6px;
}

textarea {
    resize: vertical;
}

input[type="file"] {
    width: 100%;
    border: 1px dashed var(--line);
    border-radius: 10px;
    padding: 10px;
    background: #fbfdff;
    font: inherit;
}

.profile-settings {
    display: flex;
    align-items: center;
    gap: 22px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line);
}

.profile-picture-preview {
    width: 112px;
    height: 112px;
    flex: 0 0 112px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--navy);
    color: var(--gold-soft);
    display: grid;
    place-items: center;
    font-size: 30px;
    font-weight: 800;
}

.profile-picture-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-picture-fields {
    min-width: 0;
    flex: 1;
}

.profile-picture-fields h2 {
    margin: 0 0 4px;
    font-size: 20px;
}

.profile-picture-fields p {
    margin: 0 0 12px;
}

.profile-picture-fields small {
    display: block;
    margin-top: 6px;
}

.check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--muted);
}

.alert {
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
    font-size: 14px;
}

.alert-error {
    background: #fee4e2;
    color: var(--danger);
}

.alert-ok {
    background: #d1fadf;
    color: var(--ok);
}

.muted {
    color: var(--muted);
    font-size: 14px;
}

.dashboard-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.stats-four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.stat {
    background: var(--navy);
    color: var(--white);
    border-radius: 14px;
    padding: 18px;
}

.stat span {
    display: block;
    color: var(--gold-soft);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.stat strong {
    font-size: 22px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

.table-wrap {
    width: 100%;
    overflow-x: auto;
}

th,
td {
    text-align: left;
    padding: 10px 8px;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
}

.app-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 260px 1fr;
}

.sidebar {
    background: var(--navy-dark);
    color: var(--white);
    display: flex;
    flex-direction: column;
    padding: 20px 16px;
    gap: 24px;
}

.sidebar-brand {
    padding: 4px 8px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.side-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.side-link {
    color: #d7e3f2;
    text-decoration: none;
    border-radius: 10px;
    padding: 12px 14px;
    font-weight: 700;
}

.side-link:hover {
    background: rgba(255, 255, 255, 0.08);
    text-decoration: none;
}

.side-link.is-active {
    background: rgba(210, 138, 142, .18);
    color: #f3c5c7;
    box-shadow: inset 3px 0 #d28a8e;
}

.sidebar-footer {
    display: grid;
    gap: 10px;
}

.sidebar-user {
    margin: 0;
    color: #c9d5e5;
    font-size: 13px;
    padding: 0 4px;
}

.app-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.app-top {
    background: var(--surface);
    color: var(--text);
    padding: 18px 28px;
    border-bottom: 1px solid var(--line);
}

.app-top h1 {
    margin: 0;
    font-size: 20px;
}

.app-content {
    padding: 28px;
    width: min(1440px, 100%);
}

/* Shared finishing styles: restrained surfaces, clear spacing and accessible focus. */
.icon-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.nav-icon { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.brand-mark { background: #d28a8e; color: #fff; border-radius: 13px; box-shadow: 0 6px 16px rgba(210, 138, 142, .24); }
.sidebar { background: #242429; }
.side-nav { gap: 5px; }
.side-link { display: flex; align-items: center; gap: 12px; min-height: 45px; padding: 10px 12px; border: 1px solid transparent; transition: background .18s ease, color .18s ease; }
.side-link:hover { background: rgba(255,255,255,.07); }
.side-link.is-active { background: rgba(210,138,142,.17); color: #f2c2c5; box-shadow: inset 3px 0 #d28a8e; }
.side-nav-group-label { padding: 14px 12px 2px; color: #9da4b1; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.beta-badge { margin-left: auto; padding: 2px 6px; border: 1px solid rgba(242,194,197,.35); border-radius: 999px; color: #f2c2c5; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
.campus-map-card { display: grid; gap: 16px; }
.campus-map-heading, .campus-map-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.campus-map-heading h2 { margin: 4px 0; }
.campus-map-heading p { margin-bottom: 0; }
.map-source-badge { white-space: nowrap; border: 1px solid var(--line); border-radius: 999px; padding: 7px 11px; font-size: 12px; }
.campus-map { width: 100%; height: min(68vh, 620px); min-height: 360px; border: 1px solid var(--line); border-radius: 14px; z-index: 0; }
.campus-map-note { margin: 0; font-size: 13px; }
.map-tools, .map-save-form, .map-remove-form { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.map-tool-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.map-tool-group { display: grid; justify-items: start; gap: 7px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; }
.map-tool-group p { margin: 0 0 4px; font-size: 13px; }
.map-save-form { justify-content: space-between; padding-top: 4px; }
.map-remove-form { border-top: 1px solid var(--line); padding-top: 14px; }
.map-save-form button:disabled { opacity: .55; cursor: not-allowed; transform: none; }
@media (max-width: 600px) { .campus-map-heading, .campus-map-toolbar { align-items: flex-start; flex-direction: column; } .campus-map { min-height: 320px; } .map-tool-groups { grid-template-columns: 1fr; } }
.sidebar-footer form, .sidebar-footer .btn { width: 100%; }
.btn-logout { justify-content: flex-start; background: rgba(255,255,255,.08); color: #eee8e9; border: 1px solid rgba(255,255,255,.12); }
.app-top { position: sticky; top: 0; z-index: 5; min-height: 68px; display: flex; align-items: center; }
.app-top h1 { font-size: 19px; letter-spacing: -.02em; }
.app-content { padding: clamp(20px, 3vw, 36px); }
.wrap { width: min(1160px, calc(100% - 36px)); }
.card { border-radius: 16px; padding: clamp(20px, 2.4vw, 28px); }
.dashboard-section { margin-top: 22px; }
.dashboard-head { margin-bottom: 22px; }
h2, h3 { letter-spacing: -.025em; }
.kicker { color: var(--danger); letter-spacing: .11em; }
.btn, button, input[type="submit"] { border-radius: 10px; transition: transform .16s ease, box-shadow .16s ease, background .16s ease; }
/* :where() keeps this default at zero specificity so component button styles win without !important. */
.btn-primary, button:where(:not(.btn-outline):not(.btn-gold):not(.btn-logout)), input[type="submit"] { background: var(--primary); color: #fff; }
.btn-primary:hover, button:where(:not(.btn-outline):not(.btn-gold):not(.btn-logout)):hover, input[type="submit"]:hover { background: var(--primary-hover); }
.btn-gold { background: #d28a8e; color: #30272a; }
.btn-outline { color: var(--text); border-color: var(--line); }
input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="date"], input[type="datetime-local"], input[type="search"], select, textarea { background: var(--surface); color: var(--text); border-color: var(--line); border-radius: 10px; transition: border-color .15s ease, box-shadow .15s ease; }
input:focus, select:focus, textarea:focus { outline: none; border-color: #cf858a; box-shadow: 0 0 0 3px rgba(207,133,138,.16); }
input:disabled { color: var(--muted); background: var(--surface-soft); }
table { border-spacing: 0; }
th { color: var(--muted); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; background: var(--surface-soft); }
th:first-child { border-radius: 8px 0 0; }
th:last-child { border-radius: 0 8px 0 0; }
td { color: var(--text); }
tr:hover td { background: var(--surface-soft); }
.stat { background: linear-gradient(145deg, #343238, #26252a); border: 1px solid rgba(255,255,255,.06); box-shadow: 0 10px 24px rgba(35,31,33,.09); }
.stat span { color: #e2a9ad; }
.bar-track { background: var(--surface-soft); }
.bar-fill { background: linear-gradient(90deg, #b85f66, #df9a9e); }
.analytics-total, .quick-metric strong { color: var(--danger); }
.scan-preview, .choice, input[type="file"] { background: var(--surface-soft); }
.scan-preview-ok { background: color-mix(in srgb, var(--ok) 10%, var(--surface)); }
.scan-preview-alert { background: color-mix(in srgb, var(--danger) 9%, var(--surface)); }
.alert-error { background: color-mix(in srgb, var(--danger) 13%, var(--surface)); }
.alert-ok { background: color-mix(in srgb, var(--ok) 13%, var(--surface)); }
.appearance-card { display: grid; gap: 8px; }
.appearance-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; color: var(--danger); background: var(--accent-soft); font-size: 23px; }
.appearance-form { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; }
.theme-choice { display: flex; align-items: center; gap: 10px; min-width: 190px; margin: 0; padding: 13px 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); cursor: pointer; }
.theme-choice:has(input:checked) { border-color: #cf858a; box-shadow: 0 0 0 3px rgba(207,133,138,.12); }
.theme-choice input { accent-color: #b85f66; }
.theme-choice strong, .theme-choice small { display: block; }
.theme-choice small { margin-top: 3px; color: var(--muted); font-weight: 400; }
.appearance-form button { align-self: center; }
.password-field { position: relative; width: 100%; }
.password-field input[type="password"], .password-field input[type="text"] { padding-right: 48px; }
.password-toggle { position: absolute; top: 50%; right: 7px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; transform: translateY(-50%); border: 0; border-radius: 8px; background: transparent !important; color: var(--muted) !important; box-shadow: none !important; }
.password-toggle:hover { transform: translateY(-50%); color: var(--danger) !important; background: var(--accent-soft) !important; }
.password-eye { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.password-toggle:focus-visible { outline: 2px solid #cf858a; outline-offset: 1px; }
body[data-theme="dark"] .app-top { background: #2d2a2f; }
body[data-theme="dark"] .btn-outline { background: transparent; }
body[data-theme="dark"] .scan-badge-ok { background: #29463a; color: #a5dbc0; }
body[data-theme="dark"] .scan-badge-error { background: #4c3035; color: #f2b3b7; }
body[data-theme="dark"] .bar-track { background: #464148; }
body[data-theme="dark"] .profile-picture-preview, body[data-theme="dark"] .scan-preview-avatar { background: #494047; color: #f0b9bd; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(207,133,138,.38); outline-offset: 2px; }

.analytics-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(250px, 0.8fr);
    gap: 16px;
    margin-top: 20px;
}

.analytics-card h2,
.dashboard-section h2 {
    margin: 0;
    font-size: 20px;
}

.analytics-heading,
.section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.analytics-heading .kicker,
.quick-metrics .kicker {
    margin-bottom: 5px;
}

.analytics-total {
    color: var(--danger);
    font-size: 25px;
    font-weight: 800;
    white-space: nowrap;
}

.analytics-total small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

.bar-chart {
    display: grid;
    gap: 13px;
    margin-top: 24px;
}

.bar-row {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 12px;
}

.bar-date strong,
.bar-date small {
    display: block;
}

.bar-date strong {
    font-size: 13px;
}

.bar-date small {
    color: var(--muted);
    font-size: 11px;
}

.bar-track {
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: #edf1f5;
}

.bar-fill {
    display: block;
    height: 100%;
    min-width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--navy), #2c5b87);
}

.bar-value {
    color: var(--muted);
    font-size: 13px;
    text-align: right;
}

.quick-metrics h2 {
    margin-bottom: 20px;
}

.quick-metric {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: 14px;
}

.quick-metric strong {
    color: var(--navy);
    font-size: 20px;
}

.quick-metrics > .muted {
    margin: 14px 0 0;
    font-size: 12px;
}

.dashboard-section {
    margin-top: 20px;
}

.section-heading {
    margin-bottom: 14px;
}

.section-heading .muted {
    margin: 5px 0 0;
}

.scanner-card {
    max-width: none;
}

.scanner-card h2 {
    font-size: 24px;
}

.scanner-form {
    display: grid;
    gap: 8px;
    margin-top: 18px;
}

.scanner-input-row {
    display: flex;
    gap: 10px;
}

.scanner-input-row input {
    min-width: 0;
    flex: 1;
}

.scan-badge {
    display: inline-block;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.scan-badge-ok {
    color: var(--ok);
    background: #d1fadf;
}
.scan-badge-entry { color:#147954; background:#d8f7e9; }
.scan-badge-exit { color:#b22e48; background:#ffe0e5; }

.scan-badge-error {
    color: var(--danger);
    background: #fee4e2;
}

.scan-preview {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 18px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
}

.scan-preview-ok {
    background: #f3fbf6;
    border-color: #a6e3bd;
}

.scan-preview-alert {
    background: #fff8f7;
    border-color: #f2b8b5;
}

.scan-preview-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 84px;
    width: 84px;
    height: 84px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--navy);
    color: var(--gold-soft);
    font-size: 24px;
    font-weight: 800;
}

.scan-preview-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.scan-preview-details h3 {
    margin: 8px 0 3px;
    font-size: 20px;
}

.scan-preview-details p {
    margin: 0 0 6px;
    color: var(--muted);
}

.scan-preview-details small {
    color: var(--muted);
}

.history-report-form {
    display: grid;
    gap: 7px;
    min-width: 220px;
}

.history-report-form button {
    justify-self: start;
}

.security-filter-form {
    display: grid;
    grid-template-columns: 2fr repeat(4, minmax(110px, 1fr)) auto auto;
    align-items: end;
    gap: 12px;
}

.security-filter-form .btn {
    white-space: nowrap;
}

.repeat-alert {
    color: var(--danger);
    font-weight: 800;
}

.audit-details {
    max-width: 380px;
    overflow-x: auto;
    white-space: pre-wrap;
    font-size: 12px;
}

.delete-user-form {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

/* User management */
.user-directory { padding:20px; }
.user-directory .section-heading { margin-bottom:16px; }
.user-result-count { flex:0 0 auto; padding:6px 10px; border:1px solid var(--line); border-radius:999px; background:var(--surface-soft); color:var(--muted); font-size:12px; font-weight:700; }
.user-directory .user-search { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:9px; margin-bottom:16px; }
.user-directory .user-search input { min-width:0; }
.user-directory table { border-collapse:separate; border-spacing:0; }
.user-directory tbody tr { transition:background .15s ease; }
.user-directory tbody tr:hover { background:var(--surface-soft); }
.user-directory td:first-child strong { color:var(--text); }
.user-directory td:last-child { width:1%; text-align:right; white-space:nowrap; }
.user-profile-summary { display:flex; align-items:center; gap:15px; margin-top:20px; padding:18px 20px; border:1px solid var(--line); border-radius:14px; background:var(--surface); box-shadow:var(--shadow); }
.user-profile-avatar { display:grid; width:54px; height:54px; flex:0 0 54px; place-items:center; border:1px solid color-mix(in srgb,var(--accent) 25%,var(--line)); border-radius:15px; background:color-mix(in srgb,var(--accent) 10%,var(--surface)); color:var(--accent); font-size:17px; font-weight:800; }
.user-profile-identity { min-width:0; }
.user-profile-identity .kicker { margin:0 0 3px; }
.user-profile-identity h2 { margin:0; font-size:19px; }
.user-profile-identity > p:last-child { margin:4px 0 0; color:var(--muted); font-size:12px; overflow-wrap:anywhere; }
.user-profile-status { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-left:auto; }
.user-status-active { display:inline-flex; align-items:center; min-height:24px; padding:3px 9px; border-radius:999px; background:#e2f5e9; color:#277849; font-size:11px; font-weight:700; }
.user-admin-grid { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(280px,.8fr); align-items:start; gap:16px; margin-top:18px; }
.user-admin-grid > .dashboard-section { min-width:0; margin-top:0; }
.user-admin-grid .section-heading { align-items:flex-start; }
.user-admin-grid .section-heading h2 { font-size:18px; }
.user-admin-grid .section-heading .muted { font-size:12px; }
.user-admin-grid .form { gap:12px; }
.user-admin-grid .check { padding:10px 12px; border:1px solid var(--line); border-radius:9px; background:var(--surface-soft); }
.user-admin-grid .check input { flex:0 0 auto; }
.user-status-card .delete-user-form { margin-top:17px; padding-top:15px; }
body[data-theme="dark"] .user-status-active { background:#29463a; color:#a5dbc0; }

@media (max-width:900px) {
    .user-admin-grid { grid-template-columns:1fr; }
}
@media (max-width:560px) {
    .user-directory { padding:15px; }
    .user-directory .section-heading { align-items:flex-start; }
    .user-directory .user-search { grid-template-columns:minmax(0,1fr) auto; }
    .user-directory .user-search .btn { grid-column:1/-1; justify-self:start; }
    .user-profile-summary { align-items:flex-start; flex-wrap:wrap; padding:15px; }
    .user-profile-avatar { width:46px; height:46px; flex-basis:46px; }
    .user-profile-identity { flex:1; }
    .user-profile-identity h2 { font-size:17px; }
    .user-profile-status { width:100%; margin-left:61px; }
}

@media (max-width: 800px) {
    .hero-grid,
    .choice-grid,
    .form-row,
    .stats,
    .dashboard-head {
        grid-template-columns: 1fr;
        display: grid;
    }

    .app-shell {
        grid-template-columns: 1fr;
    }

    .sidebar {
        gap: 16px;
    }

    .side-nav {
        flex-direction: row;
        flex-wrap: wrap;
        flex: 0;
    }

    .profile-settings {
        align-items: flex-start;
        flex-direction: column;
    }

    .scanner-input-row {
        align-items: stretch;
        flex-direction: column;
    }

    .stats-four,
    .analytics-grid {
        grid-template-columns: 1fr;
    }

    .security-filter-form {
        grid-template-columns: 1fr 1fr;
    }
}

/* Fixed, independently scrolling navigation shared by user and admin portals. */
.app-shell {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    min-height: 100vh;
}

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 30;
    width: 260px;
    height: 100vh;
    height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    transition: transform .22s ease;
}

.app-main {
    grid-column: 2;
    min-width: 0;
}

.app-shell.sidebar-hidden {
    grid-template-columns: 0 minmax(0, 1fr);
}

.sidebar-hidden .sidebar {
    transform: translateX(-100%);
}

.sidebar-toggle {
    display: inline-grid;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    padding: 0;
    place-items: center;
    border: 1px solid var(--line) !important;
    border-radius: 11px !important;
    background: var(--surface) !important;
    color: var(--text) !important;
    box-shadow: none !important;
    transform: none !important;
}

.sidebar-toggle:hover {
    background: var(--surface-soft) !important;
    transform: none !important;
}

.sidebar-toggle svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
}

.app-top { gap: 14px; }
.sidebar-backdrop { display: none; }
.app-top h1 { flex:0 0 auto; }
.topbar-search { display:flex; align-items:center; gap:10px; width:min(360px,35vw); min-height:40px; margin-left:clamp(12px,2vw,24px); padding:0 12px; border:1px solid var(--line); border-radius:10px; background:var(--surface-soft); }
.topbar-search svg, .topbar-date svg { width:17px; height:17px; flex:0 0 17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; color:var(--muted); }
.topbar-search input { width:100%; min-width:0; padding:0; border:0; outline:0; background:transparent; box-shadow:none; font-size:13px; }
.topbar-search input:focus { box-shadow:none; }
.topbar-date { display:flex; align-items:center; gap:8px; margin-left:auto; color:var(--muted); font-size:12px; white-space:nowrap; }
@media (max-width:760px) { .topbar-search { width:auto; flex:1; margin-left:0; } .topbar-search input { min-width:0; } .topbar-date { display:none; } .app-top h1 { display:none; } }
@media (max-width:440px) { .topbar-search { min-height:38px; padding:0 9px; } .topbar-search input { font-size:12px; } }

@media (max-width: 800px) {
    .app-shell,
    .app-shell.sidebar-hidden {
        display: block;
    }

    .sidebar {
        width: min(290px, 86vw);
        max-width: 100%;
        box-shadow: 18px 0 48px rgba(25, 20, 22, .22);
        transform: translateX(-105%);
    }

    .sidebar .side-nav {
        flex-direction: column;
        flex-wrap: nowrap;
        flex: 1;
    }

    .app-shell.sidebar-open .sidebar { transform: translateX(0); }
    .app-shell.sidebar-hidden .sidebar { transform: translateX(-105%); }
    .app-main { min-height: 100vh; }

    .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 25;
        border: 0 !important;
        border-radius: 0 !important;
        background: rgba(20, 18, 20, .46) !important;
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
    }

    .app-shell.sidebar-open .sidebar-backdrop {
        opacity: 1;
        pointer-events: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar,
    .sidebar-backdrop { transition: none; }
}

/* Reference-inspired portal layouts: warm neutral surfaces, restrained rose accents. */
.reference-greeting { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.reference-greeting h2, .scanner-page-heading h2 { margin:0 0 5px; font-size:clamp(25px,2.3vw,32px); letter-spacing:-.035em; }
.reference-greeting .lead, .scanner-page-heading .lead { margin:0; }
.status-pill { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; white-space:nowrap; font-size:12px; font-weight:700; background:#edf6f0; color:#286343; }
.status-pill i, .id-validity i, .scan-result-state i { width:8px; height:8px; display:inline-block; flex:0 0 8px; border-radius:50%; background:currentColor; }
.status-pill-ok { background:#edf6f0; color:#286343; }
.stats { gap:14px; }
.admin-kpi-grid { grid-template-columns:repeat(4,minmax(0,1fr)); margin-bottom:20px; }
.security-kpi-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.dashboard-status-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:-6px 0 12px; }
.admin-kpi { min-width:0; min-height:132px; padding:20px 22px; border:1px solid var(--line); border-radius:17px; background:var(--surface); box-shadow:0 4px 16px rgba(37,28,31,.025); }
.admin-kpi span { display:block; color:var(--muted); font-size:11px; font-weight:700; letter-spacing:.045em; text-transform:uppercase; }
.admin-kpi strong { display:block; margin:12px 0 5px; color:var(--text); font-size:31px; line-height:1.05; letter-spacing:-.04em; }
.admin-kpi small { color:var(--muted); font-size:12px; }
.admin-kpi .kpi-time { font-size:27px; }
.admin-kpi .kpi-status { font-size:25px; }
.admin-kpi-alert { border-color:#efb3b5; background:#fff0ef; }
.dashboard-kpi-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
.admin-kpi-presence { border-color:#79c8a4; background:linear-gradient(140deg,#e5f8ee,var(--surface)); }
.admin-kpi-presence span, .admin-kpi-presence small { color:#257554; }
.admin-kpi-presence strong { color:#146441; }
.admin-kpi-alert span, .admin-kpi-alert small { color:#a43f42; }
.admin-kpi-alert strong { color:#922f34; }
body[data-theme="dark"] .admin-kpi { background:var(--surface); border-color:var(--line); }
body[data-theme="dark"] .admin-kpi-alert { background:#44282b; border-color:#8d484c; }
body[data-theme="dark"] .admin-kpi-alert span, body[data-theme="dark"] .admin-kpi-alert small, body[data-theme="dark"] .admin-kpi-alert strong { color:#f1b4b5; }
.analytics-grid { align-items:start; gap:18px; }
.user-analytics-grid { grid-template-columns:minmax(0,1fr) 280px; margin-bottom:20px; }
.analytics-card, .id-status-panel { min-width:0; }
.analytics-card { overflow:hidden; }
.trend-chart-wrap { width:100%; margin-top:8px; overflow:hidden; }
.trend-chart { display:block; width:100%; min-width:540px; height:auto; }
.chart-gridline { stroke:var(--line); stroke-width:1; }
.chart-axis-label { fill:var(--muted); font-size:10px; }
.chart-area { fill:rgba(198,86,91,.09); stroke:none; }
.chart-line { fill:none; stroke:#c65b60; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.chart-point { fill:#c65b60; stroke:var(--surface); stroke-width:2; }
.quick-metrics h2 { margin:0 0 17px; font-size:17px; }
.quick-action { display:flex; align-items:center; gap:10px; min-height:43px; margin:0 0 9px; padding:0 13px; border:1px solid var(--line); border-radius:10px; color:var(--text); font-size:13px; font-weight:650; }
.quick-action > span { color:var(--accent); font-size:18px; }
.quick-action > b { margin-left:auto; color:var(--accent); }
.quick-action-primary { border-color:#c65b60; background:#c65b60; color:#fff; }
.quick-action-primary > span, .quick-action-primary > b { color:#fff; }
.quick-metric { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:15px; font-size:12px; }
.quick-metric span, .quick-metrics > .muted { color:var(--muted); }
.quick-metric strong { font-size:16px; }
.quick-metrics > .muted { margin:6px 0 0; font-size:11px; }
.analytics-heading, .scanner-section-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.scanner-stations { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:16px; }
.scanner-station { min-width:0; padding:18px; border:1px solid var(--line); border-radius:14px; background:var(--surface); }
.scanner-station-entry { border-top:3px solid #38815b; }
.scanner-station-exit { border-top:3px solid #b85a5e; }
.scanner-station-heading { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.scanner-station-heading h3 { margin:0 0 4px; font-size:17px; }
.scanner-station-heading .kicker, .scanner-station-heading .muted { margin:0; }
.scanner-station-icon { display:grid; width:42px; height:42px; flex:0 0 42px; place-items:center; border-radius:12px; background:var(--surface-soft); color:var(--accent); font-size:24px; }
.station-reader-config { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:end; gap:9px; margin-bottom:17px; padding:12px; border:1px solid var(--line); border-radius:11px; background:var(--surface-soft); }
.station-reader-config > div { display:grid; min-width:0; gap:5px; }
.station-reader-config label { color:var(--muted); font-size:11px; font-weight:700; }
.station-reader-config small, .station-reader-config [role="status"] { grid-column:1/-1; font-size:11px; }
.station-reader-config button { width:100%; }
.station-scan-form { display:grid; gap:9px; }
.station-scan-form > label { color:var(--muted); font-size:12px; font-weight:700; }
.station-scan-form .scanner-input-wrap input { min-width:0; }
.station-scan-form .scanner-submit { width:100%; justify-content:center; }
@media (max-width:760px) { .scanner-stations { grid-template-columns:1fr; } }
.scanner-last-row { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(280px,1fr); gap:14px; margin:0 0 17px; }
.scanner-last-card, .scanner-scan-details, .scanner-idle-summary { min-width:0; padding:17px; border:1px solid var(--line); border-radius:13px; background:var(--surface); }
.scanner-last-card { display:flex; align-items:center; gap:16px; border-color:#25745e; background:linear-gradient(120deg,color-mix(in srgb,#10b981 13%,var(--surface)),var(--surface)); }
.scanner-last-alert { border-color:#a84654; background:linear-gradient(120deg,color-mix(in srgb,#e34d63 12%,var(--surface)),var(--surface)); }
.scanner-last-card .scan-preview-avatar { display:grid; width:82px; height:82px; flex:0 0 82px; place-items:center; overflow:hidden; border:2px solid color-mix(in srgb,#34d399 55%,var(--line)); border-radius:50%; background:var(--surface-soft); font-size:22px; }
.scanner-last-card .scan-preview-avatar img { width:100%; height:100%; object-fit:cover; }
.scanner-last-card .scan-preview-details { min-width:0; }
.scanner-last-card h3, .scanner-idle-summary h3 { margin:8px 0 4px; font-size:19px; }
.scanner-last-card p, .scanner-idle-summary p { margin:0 0 7px; color:var(--muted); font-size:13px; }
.scanner-last-card small { color:var(--muted); font-size:12px; }
.scanner-scan-details { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-content:center; gap:12px; }
.scanner-scan-details h3 { grid-column:1/-1; margin:0; font-size:15px; }
.scanner-scan-details > div { display:grid; gap:9px; padding-left:12px; border-left:1px solid var(--line); }
.scanner-scan-details > div span { color:var(--muted); font-size:11px; }
.scanner-scan-details > div strong { font-size:12px; }
.scanner-direction { display:flex; align-items:center; gap:7px; }
.scanner-direction::before { content:'↘'; color:#20be84; font-size:17px; }
.scanner-direction-exit::before { content:'↗'; color:#e05267; }
.scanner-idle-summary { display:flex; align-items:center; gap:14px; margin-bottom:17px; }
.scanner-idle-summary .scan-preview-avatar { display:grid; width:52px; height:52px; flex:0 0 52px; place-items:center; border-radius:13px; background:var(--surface-soft); color:var(--accent); font-size:25px; }
.scanner-idle-summary h3 { margin:6px 0 2px; font-size:16px; }
.scanner-idle-summary p { margin:0; }
.scanner-station-intro { margin:3px 0 13px; }
.scanner-station-intro h2 { margin:0 0 4px; font-size:18px; }
.scanner-station-intro .kicker, .scanner-station-intro .muted { margin:0; }
.scanner-station { padding:18px; border-radius:14px; box-shadow:var(--shadow); }
.scanner-station-entry { border-top:1px solid #13875f; }
.scanner-station-exit { border-top:1px solid #d8425b; }
.scanner-station-status { display:flex; align-items:center; gap:7px; margin-left:auto; padding:6px 9px; border:1px solid color-mix(in srgb,#22c98a 35%,transparent); border-radius:999px; background:color-mix(in srgb,#22c98a 9%,var(--surface)); color:#17875f; font-size:11px; font-weight:700; white-space:nowrap; }
.scanner-station-status i { width:7px; height:7px; flex:0 0 7px; border-radius:50%; background:#22c98a; }
.scanner-station-status[data-state="issue"] { border-color:color-mix(in srgb,#dc6464 40%,transparent); background:color-mix(in srgb,#dc6464 10%,var(--surface)); color:#bd4141; }
.scanner-station-status[data-state="issue"] i { background:#dc6464; }
.scanner-station-entry .scanner-station-icon { color:#21bd86; background:color-mix(in srgb,#10b981 16%,var(--surface)); }
.scanner-station-exit .scanner-station-icon { color:#e65368; background:color-mix(in srgb,#e34d63 16%,var(--surface)); }
.scanner-station-entry .scanner-submit { background:#10885f; }
.scanner-station-exit .scanner-submit { background:#d63f59; }
.scanner-station-entry .scanner-submit:hover, .scanner-station-exit .scanner-submit:hover { filter:brightness(1.08); }
@media (max-width:900px) { .scanner-last-row { grid-template-columns:1fr; } .scanner-scan-details { min-height:110px; } }
@media (max-width:560px) { .scanner-last-card { align-items:flex-start; } .scanner-last-card .scan-preview-avatar { width:60px; height:60px; flex-basis:60px; } .scanner-scan-details { grid-template-columns:1fr 1fr; } .scanner-scan-details > div:last-child { grid-column:1/-1; } .station-reader-config { grid-template-columns:1fr; } .station-reader-config small { grid-column:auto; } }
.analytics-heading h2, .scanner-section-heading h2 { margin:0 0 4px; font-size:17px; }
.analytics-heading .muted, .scanner-section-heading .muted { margin:0; font-size:13px; }
.analytics-legend { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; white-space:nowrap; }
.analytics-legend i { width:8px; height:8px; border-radius:50%; background:var(--accent); }
.personal-bars { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); align-items:end; gap:clamp(10px,2vw,28px); height:205px; margin-top:18px; padding:10px 10px 0; border-top:1px solid var(--line); background:repeating-linear-gradient(to bottom, transparent 0, transparent 39px, var(--line) 40px); }
.personal-bar-column { display:flex; min-width:0; height:100%; flex-direction:column; align-items:center; justify-content:flex-end; gap:8px; }
.personal-bar-column strong { color:var(--muted); font-size:11px; }
.personal-bar-track { display:flex; width:min(100%,42px); height:145px; align-items:flex-end; overflow:hidden; border-radius:7px 7px 2px 2px; background:color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.personal-bar-track span { display:block; width:100%; min-height:4px; border-radius:6px 6px 0 0; background:linear-gradient(180deg,#d7797c,#bf5559); }
.personal-bar-column small { color:var(--muted); font-size:11px; }
.id-status-panel .section-heading { margin-bottom:15px; }
.id-status-panel .section-heading h2 { margin:0; font-size:17px; }
.id-status-icon, .scanner-glyph { display:grid; width:34px; height:34px; place-items:center; border-radius:10px; background:var(--surface-soft); color:var(--accent); font-size:23px; }
.rfid-ticket { position:relative; display:flex; min-height:158px; flex-direction:column; gap:10px; overflow:hidden; padding:17px 19px; border-radius:15px; color:#fff; background:linear-gradient(135deg,#cf6669,#b84f54); }
.rfid-ticket:after { position:absolute; right:-32px; bottom:-60px; width:150px; height:150px; border:1px solid rgba(255,255,255,.18); border-radius:50%; content:""; box-shadow:0 0 0 18px rgba(255,255,255,.05),0 0 0 38px rgba(255,255,255,.04); }
.rfid-ticket > * { position:relative; z-index:1; }
.rfid-ticket > small, .rfid-ticket label { color:rgba(255,255,255,.76); font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.rfid-ticket-mark { position:absolute; top:13px; right:18px; font-size:26px; }
.rfid-ticket > strong { font-size:17px; }
.rfid-ticket-number { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; font-size:12px; }
.rfid-ticket-number b { padding:4px 8px; border-radius:6px; background:rgba(255,255,255,.2); font-size:10px; }
.rfid-ticket-missing { background:linear-gradient(135deg,#a74146,#772f35); }
.id-validity { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; }
.id-validity i { background:#42936a; }
.id-status-link { width:100%; justify-content:center; }
.recent-access-card { margin-top:18px; }
.recent-access-card .section-heading, .dashboard-section .section-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.activity-calendar-card { margin-bottom:18px; }
.history-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:0 0 16px; }
.history-summary > div { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 18px; border:1px solid var(--line); border-radius:13px; background:var(--surface); }
.history-summary small { color:var(--muted); font-size:12px; }
.history-summary strong { font-size:21px; }
.history-filter-card { margin-bottom:18px; padding:16px 18px; }
.history-filters { display:grid; grid-template-columns:1fr 1fr minmax(180px,1.5fr) auto auto; align-items:end; gap:12px; }
.history-filters > div, .security-filter-form > div { display:grid; min-width:0; gap:6px; }
.history-filters label, .security-filter-form label { color:var(--muted); font-size:11px; font-weight:700; }
.history-filters input, .history-filters select, .security-filter-form input, .security-filter-form select { width:100%; min-width:0; }
.activity-calendar { margin-top:14px; }
.calendar-weekdays, .calendar-days { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; }
.calendar-weekdays { margin-bottom:8px; color:var(--muted); text-align:center; font-size:11px; font-weight:700; }
.calendar-day { display:flex; min-height:64px; flex-direction:column; align-items:center; justify-content:center; gap:5px; border:1px solid var(--line); border-radius:10px; background:var(--surface-soft); }
.calendar-day strong { font-size:14px; }
.calendar-day small { color:var(--muted); font-size:10px; }
.calendar-day-active { border-color:#c4dfcf; background:#edf6f0; color:#286343; }
body[data-theme="dark"] .calendar-day-active { border-color:#436851; background:#263c31; color:#b4e0c4; }
.calendar-day-empty { visibility:hidden; }
.calendar-legend { display:flex; flex-wrap:wrap; gap:12px; margin:0 0 12px; color:var(--muted); font-size:11px; }
.calendar-legend > span { display:inline-flex; align-items:center; gap:5px; }
.calendar-legend i { display:grid; width:17px; height:17px; place-items:center; border-radius:5px; font-size:9px; font-style:normal; font-weight:800; }
.calendar-count-entry { color:#277849; }
.calendar-count-exit { color:#96700f; }
.calendar-count-flagged { color:#bd4141; }
.calendar-legend .calendar-count-entry { background:#e2f5e9; }
.calendar-legend .calendar-count-exit { background:#fff2cf; }
.calendar-legend .calendar-count-flagged { background:#fde5e5; }
.calendar-day-button { width:100%; min-width:0; padding:5px 2px; color:var(--text); font:inherit; cursor:pointer; transition:border-color .15s ease,background .15s ease,transform .15s ease; }
.calendar-day-button:hover { border-color:var(--accent); transform:translateY(-1px); }
.calendar-day-button:focus-visible { outline:3px solid color-mix(in srgb,var(--accent) 35%,transparent); outline-offset:2px; }
.calendar-day-counts { display:grid; gap:1px; justify-items:center; font-size:9px; line-height:1.2; }
.calendar-activity-dialog { width:min(580px,calc(100vw - 32px)); max-width:none; max-height:calc(100vh - 32px); padding:0; overflow:auto; border:1px solid var(--line); border-radius:16px; color:var(--text); background:var(--surface); box-shadow:0 24px 70px rgba(15,25,45,.28); }
.calendar-activity-dialog::backdrop { background:rgba(14,22,38,.58); backdrop-filter:blur(3px); }
.calendar-activity-content { padding:22px; }
.calendar-activity-content .section-heading { align-items:center; }
.calendar-activity-content .section-heading h2 { margin:0; font-size:20px; }
.calendar-activity-summary { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0; }
.calendar-activity-summary span { padding:6px 10px; border:1px solid var(--line); border-radius:999px; background:var(--surface-soft); font-size:12px; font-weight:700; }
.calendar-activity-list { display:grid; gap:8px; }
.calendar-activity-item { display:flex; align-items:center; gap:12px; padding:11px 12px; border:1px solid var(--line); border-radius:10px; background:var(--surface); }
.calendar-activity-details { display:grid; min-width:0; gap:3px; }
.calendar-activity-details strong { font-size:13px; }
.calendar-activity-details span, .calendar-activity-details small { overflow:hidden; color:var(--muted); font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.calendar-activity-empty { margin:0; padding:20px 10px; text-align:center; }
body[data-theme="dark"] .calendar-count-entry { color:#a5dbc0; }
body[data-theme="dark"] .calendar-count-exit { color:#edcf79; }
body[data-theme="dark"] .calendar-count-flagged { color:#f2b3b7; }
body[data-theme="dark"] .calendar-legend .calendar-count-entry { background:#29463a; }
body[data-theme="dark"] .calendar-legend .calendar-count-exit { background:#514526; }
body[data-theme="dark"] .calendar-legend .calendar-count-flagged { background:#4c3035; }
/* Calendar days are buttons, so override the global primary-button treatment. */
button.calendar-day-button:not(.btn-outline):not(.btn-gold):not(.btn-logout) { background:var(--surface-soft); color:var(--text); box-shadow:none; }
button.calendar-day-button:not(.btn-outline):not(.btn-gold):not(.btn-logout).calendar-day-active { border-color:#c4dfcf; background:#edf6f0; color:#286343; }
body[data-theme="dark"] button.calendar-day-button:not(.btn-outline):not(.btn-gold):not(.btn-logout).calendar-day-active { border-color:#436851; background:#263c31; color:#b4e0c4; }
button.calendar-day-button:not(.btn-outline):not(.btn-gold):not(.btn-logout):hover { background:color-mix(in srgb,var(--accent) 7%,var(--surface)); box-shadow:var(--shadow); }
.calendar-day-counts { grid-template-columns:repeat(3,minmax(0,1fr)); gap:2px; width:100%; font-size:clamp(7px,.7vw,9px); letter-spacing:-.03em; }
.calendar-day-counts > span { white-space:nowrap; }
.person-cell { display:inline-flex; align-items:center; gap:9px; white-space:nowrap; }
.person-cell img, .person-cell i { display:grid; width:32px; height:32px; flex:0 0 32px; place-items:center; border-radius:50%; object-fit:cover; background:var(--surface-soft); color:var(--accent); font-size:11px; font-style:normal; }
.security-alert-banner { display:flex; align-items:center; gap:11px; margin-bottom:18px; padding:12px 16px; border:1px solid #efb3b5; border-radius:12px; background:#fff0ef; color:#993c40; font-size:13px; }
.security-alert-banner span:last-child { margin-left:auto; color:#a95457; }
.security-alert-symbol { display:grid; width:23px; height:23px; place-items:center; border-radius:50%; background:#f8d7d7; font-weight:800; }
body[data-theme="dark"] .security-alert-banner { border-color:#784248; background:#42272b; color:#f0b4b7; }
.security-filter-card { padding:16px 18px; }
.security-filter-form { display:grid; grid-template-columns:minmax(180px,1.5fr) repeat(4,minmax(125px,1fr)) auto auto; align-items:end; gap:10px; }
.security-report-details { max-width:360px; margin:7px 0 0; color:var(--muted); white-space:pre-wrap; }
.security-page-heading { display:flex; align-items:center; gap:14px; margin:0 0 18px; }
.security-page-mark { display:grid; width:54px; height:54px; flex:0 0 54px; place-items:center; border:1px solid var(--line); border-radius:14px; background:var(--surface-soft); color:var(--accent); font-size:25px; }
.security-page-heading .kicker, .security-page-heading h2, .security-page-heading .lead { margin:0; }
.security-page-heading h2 { margin-bottom:4px; font-size:24px; }
.security-page-heading .lead { font-size:13px; }
.security-result-count { margin-left:auto; padding:8px 11px; border:1px solid var(--line); border-radius:9px; background:var(--surface); font-size:12px; white-space:nowrap; }
.security-kpi-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.security-kpi-grid .admin-kpi { min-height:108px; padding:16px 18px; }
.security-kpi-grid .admin-kpi strong { margin:9px 0 4px; font-size:27px; }
.security-resolved-kpi { border-color:#b9d9c6; }
.security-resolved-kpi span { color:#34754f; }
.security-open-kpi { border-color:#efc9af; }
.security-open-kpi span { color:#a85f2b; }
.security-reads-kpi { border-color:#efb3b5; }
.security-reads-kpi span { color:#a43f42; }
.security-filter-card .section-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.security-filter-card .section-heading h2 { margin:0; font-size:17px; }
.security-filter-card .section-heading p { margin:4px 0 0; font-size:12px; }
.security-reports-card { overflow:hidden; }
.security-event-card { overflow:hidden; }
.security-event-title { display:flex; align-items:center; gap:12px; }
.security-event-title .kicker { margin:0 0 3px; }
.security-event-title h2 { margin:0; font-size:17px; }
.security-event-title .muted { margin:4px 0 0; font-size:12px; }
.security-event-mark { display:grid; width:40px; height:40px; flex:0 0 40px; place-items:center; border:1px solid var(--line); border-radius:11px; background:var(--surface-soft); color:var(--accent); font-size:20px; font-weight:800; }
.security-flagged-card .security-event-mark { color:#a43f42; background:var(--accent-soft); }
.security-unknown-card .security-event-mark { color:#9b6823; background:#fff4df; }
.security-reports-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.security-reports-heading h2 { margin:0; font-size:18px; }
.security-table-count { padding:6px 9px; border:1px solid var(--line); border-radius:999px; color:var(--muted); font-size:11px; white-space:nowrap; }
.security-bulk-tools { display:flex; align-items:center; gap:9px; }
.security-bulk-tools form { margin:0; }
.security-bulk-tools button { display:inline-flex; align-items:center; gap:6px; padding:7px 10px; border-radius:8px; font-size:11px; white-space:nowrap; }
.security-log-tabs { display:flex; align-items:center; gap:6px; margin:22px 0 -10px; padding:5px; width:max-content; max-width:100%; overflow-x:auto; border:1px solid var(--line); border-radius:12px; background:var(--surface-soft); }
.security-log-tab { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:38px; padding:0 14px; border:1px solid transparent; border-radius:9px; color:var(--muted); font-size:13px; font-weight:700; text-decoration:none; white-space:nowrap; transition:background .15s ease, color .15s ease, border-color .15s ease; }
.security-log-tab:hover { color:var(--text); background:var(--surface); }
.security-log-tab.is-active { color:var(--accent); border-color:var(--line); background:var(--surface); box-shadow:0 2px 8px rgba(0,0,0,.06); }
.security-tab-count { display:inline-grid; min-width:22px; height:22px; place-items:center; padding:0 6px; border-radius:999px; background:var(--surface-soft); color:inherit; font-size:11px; }
.security-log-tab.is-active .security-tab-count { background:var(--accent-soft); }
.security-reports-card[hidden], .security-event-card[hidden] { display:none !important; }
.security-select-all, .security-row-select { width:16px; height:16px; accent-color:var(--accent); cursor:pointer; }
.security-row-select { display:block; margin:0 auto; }
.security-reports-card th:first-child, .security-reports-card td:first-child, .security-event-card th:first-child, .security-event-card td:first-child { width:36px; text-align:center; }
.security-reports-card table { min-width:900px; }
.security-event-card table { min-width:850px; }
.security-reports-card th { color:var(--muted); font-size:10px; letter-spacing:.06em; text-transform:uppercase; }
.security-report-row-open td:nth-child(2) { box-shadow:inset 4px 0 #c65b60; }
.security-report-row-resolved td:nth-child(2) { box-shadow:inset 4px 0 #4e876f; }
.security-scan-row-flagged td:nth-child(2) { box-shadow:inset 4px 0 #c65b60; }
.security-scan-row-unknown td:nth-child(2) { box-shadow:inset 4px 0 #b78339; }
.security-report-details { display:-webkit-box; max-width:390px; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; white-space:normal; overflow-wrap:anywhere; }
.security-reports-card td.security-report-actions { min-width:230px; white-space:normal; }
.security-report-action-group { display:flex; align-items:center; flex-wrap:nowrap; gap:7px; }
.security-reports-card .security-report-action-group > form { display:flex; margin:0; }
.security-reports-card .security-report-action-group button { min-height:32px; padding:6px 9px; border-radius:8px; font-size:11px; line-height:1.15; white-space:nowrap; }
.security-reports-card .security-report-actions .security-quick-status { min-width:82px; }
.security-reports-card .security-report-actions .open-report-editor { min-width:52px; }
.security-reports-card .security-report-actions .btn-danger { min-width:58px; }
.security-report-actions .security-quick-status { border:1px solid var(--line); background:var(--surface-soft); color:var(--text); }
.security-report-actions .security-quick-close { border-color:#c65b60; background:#c65b60; color:#fff; }
.security-report-actions .security-quick-reopen { border-color:#4e876f; background:#4e876f; color:#fff; }
.security-event-card td:last-child { white-space:nowrap; }
.security-event-card td:last-child > form { display:inline-block; margin-left:5px; }
.security-event-card td:last-child button { padding:7px 10px; font-size:11px; }
.security-event-card td:last-child { min-width:155px; }
.security-event-card td:last-child > form { display:inline-flex; margin:0 0 0 6px; }
.security-event-card td:last-child > button { margin-right:6px; }
.security-empty-state { display:grid; justify-items:center; gap:6px; padding:38px 16px; color:var(--muted); text-align:center; }
.security-empty-state > span { color:var(--accent); font-size:27px; }
.security-empty-state strong { color:var(--text); }
.security-empty-state p { margin:0; font-size:12px; }
.record-editor-dialog { width:min(520px,calc(100vw - 32px)); max-width:none; max-height:calc(100vh - 32px); padding:0; overflow:auto; border:1px solid var(--border); border-radius:16px; color:var(--text); background:var(--surface); box-shadow:0 24px 70px rgba(15,25,45,.28); }
.record-editor-dialog::backdrop { background:rgba(14,22,38,.58); backdrop-filter:blur(3px); }
.record-editor-form { display:grid; gap:14px; padding:24px; }
.record-editor-form h2 { margin:0 0 4px; }
.record-editor-form label { display:grid; gap:6px; color:var(--muted); font-size:12px; font-weight:700; }
.record-editor-form input, .record-editor-form select, .record-editor-form textarea { width:100%; min-width:0; }
.record-editor-form textarea { resize:vertical; }
.record-editor-form .dialog-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:5px; }
.record-editor-form .dialog-actions button { width:auto; }
.security-report-details { white-space:pre-wrap; }
.scanner-card { margin-bottom:18px; }
.scanner-section-heading { margin-bottom:18px; }
.scanner-form-grid { display:grid; grid-template-columns:minmax(220px,1.5fr) minmax(180px,.7fr) auto; align-items:end; gap:12px; }
.scanner-form-grid > div { min-width:0; }
.scanner-form-grid label { display:block; margin:0 0 7px; color:var(--muted); font-size:11px; font-weight:700; text-transform:uppercase; }
.scanner-input-wrap { position:relative; }
.scanner-input-wrap > span { position:absolute; top:50%; left:13px; color:var(--muted); transform:translateY(-50%); }
.scanner-input-wrap input { padding-left:40px; }
.scanner-submit { min-height:43px; white-space:nowrap; }
.scan-preview { display:flex; align-items:center; gap:16px; margin-bottom:18px; padding:15px; }
.scan-result-list { display:grid; gap:8px; }
.scan-result-card { padding:11px 14px; border:1px solid var(--line); border-radius:11px; background:var(--surface); }
.scan-result-alert { border-color:#dc6464; background:var(--surface); }
.scan-result-success { border-color:#4aaf78; }
.scan-result-exit { border-color:#d6aa31; background:var(--surface); }
.state-exit { color:#c43c52; }
.state-exit i { background:#e34d63; }
body[data-theme="dark"] .scan-result-alert { background:#38282a; border-color:#dc6464; }
.scan-result-top { display:flex; justify-content:space-between; gap:12px; margin-bottom:8px; }
.scan-result-top time { color:var(--muted); font-size:11px; }
.scan-result-state { display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:700; text-transform:uppercase; }
.state-success { color:#34815a; }.state-flagged { color:#ad4146; }.state-unknown { color:#9a641e; }
.scan-result-body { display:grid; grid-template-columns:40px minmax(130px,1.3fr) minmax(110px,1fr) minmax(100px,.8fr) minmax(90px,.8fr) minmax(145px,auto); align-items:center; gap:10px; }
.scan-result-body .scan-preview-avatar { width:38px; height:38px; margin:0; }
.scan-result-person, .scan-result-data { display:grid; min-width:0; gap:2px; }
.scan-result-person small, .scan-result-data small { color:var(--muted); font-size:9px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.scan-result-person strong, .scan-result-data strong { overflow:hidden; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.scan-result-person span { overflow:hidden; color:var(--muted); font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.scan-result-badges { display:flex; min-width:0; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:6px; }
.scan-result-badges .scan-badge { white-space:nowrap; }
.scan-timing-badge { padding:5px 8px; color:var(--muted); background:var(--surface-soft); font-size:10px; }
.table-wrap { max-width:100%; overflow-x:auto; }
.empty-state { display:grid; justify-items:center; gap:6px; padding:38px 15px; color:var(--muted); text-align:center; }
.empty-state > span { color:var(--accent); font-size:28px; }
.empty-state strong { color:var(--text); }
.empty-state p { margin:0; font-size:13px; }

@media (max-width:1100px) {
    .admin-kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .dashboard-kpi-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .security-filter-form { grid-template-columns:repeat(3,minmax(130px,1fr)); }
    .scan-result-body { grid-template-columns:46px minmax(120px,1fr) minmax(120px,1fr) auto; }
    .scan-result-data:nth-of-type(2), .scan-result-data:nth-of-type(3) { display:none; }
}
@media (max-width:760px) {
    .reference-greeting { align-items:flex-start; flex-direction:column; }
    .user-analytics-grid { grid-template-columns:1fr; }
    .admin-kpi-grid, .security-kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .dashboard-kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .history-summary { grid-template-columns:1fr; }
    .security-page-heading { align-items:flex-start; }
    .security-result-count { margin-left:auto; }
    .security-filter-card .section-heading { align-items:flex-start; }
    .history-filters, .security-filter-form { grid-template-columns:1fr 1fr; }
    .history-search { grid-column:1/-1; }
    .scanner-form-grid { grid-template-columns:1fr 1fr; }
    .scanner-id-field { grid-column:1/-1; }
    .scanner-submit { grid-column:1/-1; }
    .scan-result-body { grid-template-columns:42px minmax(0,1fr) auto; }
    .scan-result-data { display:none; }
    .scan-result-badges { grid-column:2/-1; justify-content:flex-start; }
    .calendar-weekdays, .calendar-days { gap:4px; }
    .calendar-day { min-height:52px; }
    .calendar-day-button { min-height:60px; }
}
@media (max-width:460px) {
    .admin-kpi-grid, .security-kpi-grid { grid-template-columns:1fr; }
    .dashboard-kpi-grid { grid-template-columns:1fr; }
    .history-filters, .security-filter-form { grid-template-columns:1fr; }
    .history-search, .scanner-id-field, .scanner-submit { grid-column:auto; }
    .history-summary > div { padding:12px 14px; }
    .security-page-heading { flex-wrap:wrap; }
    .security-result-count { margin-left:68px; }
    .calendar-day { min-height:44px; }
    .calendar-day small { font-size:9px; }
    .calendar-day-button { min-height:60px; }
    .scan-result-card { padding:10px 11px; }
    .security-alert-banner { align-items:flex-start; flex-wrap:wrap; }
    .security-alert-banner span:last-child { width:100%; margin-left:34px; }
}

/* User profile page: grouped settings, balanced fields, and clearer section hierarchy. */
.user-profile-layout { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:16px; }
.user-profile-layout > .card { min-width:0; margin:0; padding:22px; }
.profile-settings-form { display:grid; grid-column:1/-1; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:16px; }
.profile-info-card, .profile-form-actions { grid-column:1/-1; }
.missing-id-card { grid-column:1/-1; }
.profile-card-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:18px; }
.profile-card-heading .kicker { margin-bottom:5px; }
.profile-card-heading h2 { margin:0; font-size:19px; letter-spacing:-.02em; }
.profile-card-heading .muted { margin:5px 0 0; font-size:13px; }
.profile-heading-badge { display:inline-flex; align-items:center; padding:6px 10px; border:1px solid var(--line); border-radius:999px; background:var(--surface-soft); color:var(--muted); font-size:11px; font-weight:700; }
.profile-heading-badge-alert { border-color:#efb3b5; background:#fff0ef; color:#a43f42; }
body[data-theme="dark"] .profile-heading-badge-alert { border-color:#784248; background:#44282b; color:#f1b4b5; }
.profile-edit-form { gap:16px; }
.profile-info-card .profile-settings { align-items:center; gap:16px; padding:0 0 16px; }
.profile-info-card .profile-picture-preview { width:76px; height:76px; flex-basis:76px; font-size:23px; }
.profile-cover-hero { position:relative; min-height:205px; margin:0 0 8px; overflow:hidden; border:1px solid var(--line); border-radius:14px; background:var(--surface-soft); }
.profile-cover-image { position:absolute; inset:0; overflow:hidden; background:linear-gradient(125deg,var(--surface-soft),var(--surface)); }
.profile-cover-image::after { position:absolute; inset:0; content:""; background:linear-gradient(90deg,rgba(0,0,0,.48),rgba(0,0,0,.08)); }
.profile-cover-image img { width:100%; height:100%; object-fit:cover; }
.profile-hero-content { position:relative; z-index:1; display:flex; align-items:center; gap:16px; min-height:205px; padding:76px 20px 18px; color:#fff; }
.profile-hero-content .profile-picture-preview { width:82px; height:82px; flex:0 0 82px; overflow:hidden; display:grid; place-items:center; border:3px solid rgba(255,255,255,.86); border-radius:50%; background:var(--surface); color:var(--text); font-size:25px; box-shadow:0 4px 16px rgba(0,0,0,.2); }
.profile-hero-content .profile-picture-preview img { width:100%; height:100%; object-fit:cover; }
.profile-hero-identity { min-width:0; }
.profile-hero-identity h2 { display:inline-block; margin:0 8px 4px 0; color:inherit; font-size:20px; }
.profile-hero-identity p { margin:4px 0 0; color:rgba(255,255,255,.82); font-size:12px; }
.profile-role-chip { display:inline-flex; vertical-align:middle; padding:4px 8px; border:1px solid rgba(255,255,255,.32); border-radius:999px; background:rgba(0,0,0,.15); color:#fff; font-size:10px; font-weight:700; }
.profile-hero-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; margin-left:auto; }
.profile-media-button { display:inline-flex; align-items:center; justify-content:center; min-height:36px; padding:8px 11px; border:1px solid rgba(255,255,255,.55); border-radius:8px; background:rgba(0,0,0,.3); color:#fff; font-size:11px; font-weight:700; cursor:pointer; }
.profile-media-button:hover { background:rgba(0,0,0,.48); }
.profile-media-button-secondary { background:rgba(0,0,0,.14); }
.profile-crop-input { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; }
.profile-image-help { margin:0 0 16px; font-size:11px; }
.profile-cover-hero-wide, .profile-settings-form > .profile-image-help, .profile-settings-form > .profile-user-columns, .profile-settings-form > .profile-form-actions { grid-column:1/-1; }
.profile-user-columns { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(260px,.85fr); align-items:start; gap:16px; }
.profile-user-main, .profile-user-side { display:grid; min-width:0; gap:16px; }
.profile-user-main > .card, .profile-user-side > .card { min-width:0; margin:0; padding:20px; }
.profile-user-main .profile-info-card { grid-column:auto; }
.profile-user-main .profile-card-heading, .profile-user-side .profile-card-heading { margin-bottom:14px; }
.profile-photo-preview { display:grid; width:104px; height:104px; place-items:center; overflow:hidden; margin:3px auto 12px; border:1px solid var(--line); border-radius:50%; background:var(--surface-soft); color:var(--muted); font-size:28px; font-weight:700; }
.profile-photo-preview img { width:100%; height:100%; object-fit:cover; }
.profile-photo-upload { display:flex; align-items:center; justify-content:center; min-height:38px; border:1px solid var(--line); border-radius:9px; background:var(--surface-soft); color:var(--text); font-size:12px; font-weight:700; cursor:pointer; }
.profile-photo-note { margin:9px 0 0; font-size:11px; text-align:center; }
.profile-user-side .appearance-form { grid-template-columns:1fr 1fr; }
.profile-user-side .account-preferences-card > .muted { margin-bottom:12px; }
.admin-settings-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(260px,.8fr); align-items:start; gap:16px; }
.admin-settings-grid > .card { min-width:0; margin:0; }
.admin-profile-card { max-width:100%; padding:22px; }
.admin-appearance-card { padding:20px; }
.admin-profile-card > .form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 16px; }
.admin-profile-card .profile-cover-hero, .admin-profile-card .profile-image-help, .admin-profile-card > .form > button { grid-column:1/-1; }
.admin-profile-card .profile-hero-content { padding-top:74px; }
.image-crop-dialog { width:min(94vw,620px); padding:0; overflow:hidden; border:1px solid var(--line); border-radius:16px; background:var(--surface); color:var(--text); box-shadow:0 24px 80px rgba(0,0,0,.28); }
.image-crop-dialog::backdrop { background:rgba(12,17,25,.68); backdrop-filter:blur(3px); }
.image-crop-content { display:grid; gap:16px; padding:22px; }
.image-crop-content h2 { margin:0; font-size:20px; }
.image-crop-content .muted { margin:5px 0 0; font-size:12px; }
.image-crop-frame { position:relative; width:min(78vw,360px); aspect-ratio:1; justify-self:center; overflow:hidden; border:1px solid var(--line); border-radius:12px; background:#111923; cursor:grab; touch-action:none; }
.image-crop-frame:active { cursor:grabbing; }
.image-crop-frame.is-cover-crop { width:min(100%,560px); aspect-ratio:3.2; }
.image-crop-frame img { position:absolute; max-width:none; user-select:none; -webkit-user-drag:none; }
.image-crop-zoom { display:grid; gap:8px; color:var(--muted); font-size:12px; font-weight:700; }
.image-crop-zoom input { width:100%; accent-color:var(--accent); }
.image-crop-dialog .dialog-actions { display:flex; justify-content:flex-end; gap:8px; }
.profile-picture-fields h2 { font-size:17px; }
.profile-picture-fields p { margin:0 0 9px; font-size:12px; }
.profile-picture-fields label { margin-bottom:5px; }
.profile-picture-fields input[type="file"] { max-width:440px; padding:8px; font-size:12px; }
.profile-picture-fields small { font-size:11px; }
.profile-field-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 16px; }
.profile-field-grid > div { min-width:0; }
.profile-field-grid > .profile-field-wide { grid-column:1/-1; }
.profile-field-grid .form-row { gap:14px; }
.profile-field-grid label:not(.check) { margin-bottom:5px; color:var(--muted); font-size:11px; }
.profile-field-grid input { min-height:42px; font-size:13px; }
.profile-field-grid .check { justify-content:flex-start; margin:7px 0 0; padding:8px 10px; font-size:12px; }
.profile-field-grid .check input { width:auto; min-height:0; }
.profile-form-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:13px; border-top:1px solid var(--line); }
.profile-form-actions p { margin:0; font-size:11px; }
.profile-form-actions button { min-height:40px; padding:9px 17px; }
.profile-form-actions .has-unsaved-changes { color:var(--accent); font-weight:700; }
.profile-form-actions button:disabled { cursor:not-allowed; opacity:.52; }
.missing-id-card > p.muted { margin:0 0 14px; font-size:13px; line-height:1.55; }
.missing-id-card > button { min-height:40px; }
.appearance-card .section-heading { margin-bottom:13px; }
.appearance-card .section-heading h2 { margin:0; font-size:18px; }
.appearance-card .section-heading p.muted { margin:5px 0 0; font-size:12px; }
.appearance-form { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.appearance-form .theme-choice { min-width:0; padding:11px; }
.appearance-form button { grid-column:1/-1; justify-self:start; min-height:39px; margin-top:3px; }
.account-preferences-card > h2 { margin:0 0 5px; font-size:19px; }
.account-preferences-card > .muted { max-width:780px; margin:0 0 14px; font-size:12px; line-height:1.55; }
.account-preferences-card .form { gap:10px; }
.account-preferences-card .switch-row { padding:12px 14px; background:var(--surface-soft); }
.account-preferences-card .switch-row strong { font-size:13px; }
.account-preferences-card .switch-row small { font-size:11px; }
.account-preferences-card form button { justify-self:start; min-height:38px; padding:9px 14px; }
.account-preferences-card hr { width:100%; margin:6px 0; border:0; border-top:1px solid var(--line); }
.account-preferences-card h3 { margin:0; font-size:15px; }
@media (max-width:760px) {
    .user-profile-layout { grid-template-columns:1fr; }
    .profile-settings-form { grid-template-columns:1fr; }
    .profile-info-card, .profile-form-actions, .missing-id-card { grid-column:auto; }
    .user-profile-layout > .card { padding:18px; }
}
@media (max-width:900px) {
    .admin-settings-grid { grid-template-columns:1fr; }
    .admin-appearance-card { grid-row:2; }
    .profile-user-columns { grid-template-columns:minmax(0,1.25fr) minmax(240px,.85fr); }
}
@media (max-width:520px) {
    .profile-user-columns { grid-template-columns:1fr; }
    .profile-field-grid { grid-template-columns:1fr; }
    .profile-field-grid > .profile-field-wide { grid-column:auto; }
    .profile-field-grid .form-row { grid-template-columns:1fr; }
    .profile-info-card .profile-settings { align-items:flex-start; }
    .profile-info-card .profile-picture-preview { width:62px; height:62px; flex-basis:62px; }
    .profile-form-actions { align-items:flex-start; flex-direction:column; }
    .appearance-form { grid-template-columns:1fr; }
    .appearance-form button { grid-column:auto; }
    .profile-hero-content { align-items:flex-start; flex-wrap:wrap; padding:72px 14px 14px; }
    .profile-hero-actions { width:100%; justify-content:flex-start; margin-left:0; }
    .admin-profile-card { padding:16px; }
    .admin-profile-card > .form { grid-template-columns:1fr; }
    .admin-profile-card .profile-cover-hero, .admin-profile-card .profile-image-help, .admin-profile-card > .form > button { grid-column:auto; }
}

/* Unified entry/exit scanner with a dedicated latest-person panel */
.scanner-workspace { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(300px,.92fr); align-items:stretch; gap:18px; padding:20px; }
.scanner-console, .scanner-person-panel { min-width:0; }
.scanner-person-panel { display:flex; flex-direction:column; gap:12px; }
.scanner-person-panel .scanner-last-row { display:flex; flex:1; flex-direction:column; margin:0; }
.scanner-person-panel .scanner-last-card, .scanner-person-panel .scanner-scan-details, .scanner-person-panel .scanner-idle-summary { flex:1; }
.scanner-person-panel .scanner-last-card { align-items:flex-start; }
.scanner-person-panel .scanner-scan-details { grid-template-columns:1fr; align-content:start; gap:0; }
.scanner-person-panel .scanner-scan-details h3 { margin-bottom:8px; }
.scanner-person-panel .scanner-scan-details > div { grid-template-columns:minmax(72px,.55fr) 1fr; align-items:center; padding:10px 0; border-left:0; border-top:1px solid var(--line); }
.scanner-person-panel .alert { margin:0; }
.scan-direction-toggle { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin:0 0 15px; padding:5px; border:1px solid var(--line); border-radius:11px; background:var(--surface-soft); }
.scan-direction-toggle button { min-height:42px; border:0; border-radius:8px; background:transparent; color:var(--muted); font:inherit; font-weight:750; cursor:pointer; }
.scan-direction-toggle button.is-active { background:#10885f; color:#fff; box-shadow:var(--shadow); }
.scanner-station-exit .scan-direction-toggle button.is-active { background:#d63f59; }
@media (max-width:900px) { .scanner-workspace { grid-template-columns:1fr; } .scanner-person-panel .scanner-last-row { display:grid; } }
.scan-direction-toggle { grid-template-columns:repeat(3,minmax(0,1fr)); }
.reader-settings { margin:0 0 16px; border:1px solid var(--line); border-radius:11px; background:var(--surface-soft); }
.reader-settings summary { display:flex; align-items:center; gap:10px; min-height:44px; padding:0 13px; color:var(--text); font-size:13px; font-weight:750; cursor:pointer; list-style:none; }
.reader-settings summary::-webkit-details-marker { display:none; }
.reader-settings summary::after { content:'＋'; margin-left:auto; color:var(--accent); font-size:17px; }
.reader-settings[open] summary::after { content:'−'; }
.reader-settings summary small { color:var(--muted); font-size:11px; font-weight:500; }
.reader-settings .station-reader-config { margin:0; border:0; border-top:1px solid var(--line); border-radius:0 0 11px 11px; }
@media (max-width:560px) { .reader-settings summary { flex-wrap:wrap; gap:4px 9px; padding:9px 12px; } .reader-settings summary small { width:100%; } }
.scanner-workspace > .scanner-station-intro { grid-column:1/-1; margin:0; }
.scanner-console { grid-column:1; }
.scanner-person-panel { grid-column:2; min-height:270px; padding:18px; border:1px solid var(--line); border-radius:14px; background:var(--surface); }
.scanner-person-panel .scanner-idle-summary { flex:0 0 auto; margin:0; padding:0; border:0; background:transparent; align-items:flex-start; }
.scanner-person-panel .scanner-last-row { flex:0 0 auto; }
@media (max-width:900px) { .scanner-workspace > .scanner-station-intro, .scanner-console, .scanner-person-panel { grid-column:1; } .scanner-person-panel { min-height:180px; } }
.scanner-person-panel .scanner-last-row { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(190px,.9fr); align-items:stretch; gap:10px; }
.scanner-person-panel .scanner-last-card, .scanner-person-panel .scanner-scan-details { min-height:100%; }
.scanner-person-panel .scanner-scan-details { padding:14px; }
@media (max-width:620px) { .scanner-person-panel .scanner-last-row { grid-template-columns:1fr; } }
/* Polished latest scan result: balanced profile and readable metadata */
.scanner-person-panel { gap:10px; }
.scanner-person-panel .scanner-last-row { grid-template-columns:minmax(0,1.05fr) minmax(205px,.95fr); gap:10px; }
.scanner-person-panel .scanner-last-card { align-items:center; gap:14px; padding:16px; }
.scanner-person-panel .scanner-last-card .scan-preview-avatar { width:68px; height:68px; flex-basis:68px; }
.scanner-person-panel .scanner-last-card h3 { margin-top:9px; font-size:18px; line-height:1.2; }
.scanner-person-panel .scanner-last-card p { margin-bottom:8px; }
.scanner-person-panel .scanner-scan-details { padding:14px 15px; background:var(--surface-soft); }
.scanner-person-panel .scanner-scan-details h3 { padding-bottom:10px; border-bottom:1px solid var(--line); }
.scanner-person-panel .scanner-scan-details > div { grid-template-columns:66px minmax(0,1fr); gap:8px; padding:9px 0; }
.scanner-person-panel .scanner-scan-details > div strong { overflow-wrap:anywhere; font-size:12px; }
.scanner-person-panel .scanner-last-card.scanner-last-exit { border-color:color-mix(in srgb,#e65368 55%,var(--line)); background:linear-gradient(120deg,color-mix(in srgb,#e65368 12%,var(--surface)),var(--surface)); }
.scanner-person-panel .scanner-last-card.scanner-last-entry { border-color:color-mix(in srgb,#21bd86 55%,var(--line)); }
@media (max-width:620px) { .scanner-person-panel .scanner-last-row { grid-template-columns:1fr; } .scanner-person-panel .scanner-last-card { align-items:center; } }
.scanner-settings-trigger { display:flex; width:100%; align-items:center; gap:14px; margin:0 0 16px; padding:11px 14px; border:1px solid var(--line); border-radius:11px; background:var(--surface-soft); color:var(--text); text-align:left; cursor:pointer; }
.scanner-settings-trigger > span { display:flex; min-width:0; flex:1; flex-wrap:wrap; align-items:baseline; gap:6px 10px; }
.scanner-settings-trigger strong { font-size:13px; }
.scanner-settings-trigger small { color:var(--muted); font-size:11px; }
.scanner-settings-trigger > b { color:var(--accent); font-size:18px; }
.scanner-settings-trigger:hover { border-color:var(--accent); }
.scanner-settings-dialog { width:min(560px,calc(100vw - 32px)); max-height:min(86vh,720px); margin:auto; padding:22px; overflow:auto; border:1px solid var(--line); border-radius:18px; background:var(--surface); color:var(--text); box-shadow:0 24px 80px rgba(0,0,0,.45); }
.scanner-settings-dialog::backdrop { background:rgba(8,8,12,.68); backdrop-filter:blur(3px); }
.settings-dialog-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:18px; }
.settings-dialog-head h3 { margin:0 0 5px; font-size:19px; }
.settings-dialog-head p { margin:0; color:var(--muted); font-size:13px; }
.settings-dialog-close { display:grid; width:34px; height:34px; flex:0 0 34px; place-items:center; border:1px solid var(--line); border-radius:9px; background:var(--surface-soft); color:var(--text); font-size:22px; cursor:pointer; }
.scanner-settings-dialog .scan-direction-toggle { margin-bottom:16px; }
.scanner-settings-dialog .station-reader-config { margin:0; }
@media (max-width:560px) { .scanner-settings-dialog { padding:17px; } .scanner-settings-trigger > span { flex-direction:column; align-items:flex-start; gap:3px; } }
/* Scanner settings dialog layout follows the supplied modal reference */
.scanner-settings-dialog { width:min(900px,calc(100vw - 40px)); padding:26px; border-radius:18px; }
.settings-dialog-head { display:grid; grid-template-columns:64px minmax(0,1fr) 42px; align-items:center; gap:16px; margin-bottom:24px; }
.settings-dialog-icon { display:grid; width:64px; height:64px; place-items:center; border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line)); border-radius:15px; background:color-mix(in srgb,var(--accent) 15%,var(--surface)); color:var(--accent); font-size:32px; }
.settings-dialog-title h3 { margin:0 0 5px; font-size:25px; }
.settings-dialog-title p { margin:0; color:var(--muted); font-size:14px; }
.settings-dialog-close { width:42px; height:42px; font-size:25px; }
.scanner-settings-dialog .scan-direction-toggle { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:0 0 20px; padding:0; border:0; background:transparent; }
.scanner-settings-dialog .scan-direction-toggle button { position:relative; display:flex; min-width:0; min-height:96px; align-items:center; gap:13px; padding:16px; border:1px solid var(--line); border-radius:13px; background:var(--surface-soft); color:var(--text); text-align:left; box-shadow:none; }
.scanner-settings-dialog .scan-direction-toggle button.is-active { border:2px solid var(--accent); background:color-mix(in srgb,var(--accent) 12%,var(--surface)); color:var(--text); }
.mode-choice-icon { display:grid; width:38px; height:38px; flex:0 0 38px; place-items:center; color:var(--accent); font-size:30px; }
.mode-choice-copy { display:grid; min-width:0; gap:5px; }
.mode-choice-copy strong { font-size:15px; }
.mode-choice-copy small { color:var(--muted); font-size:11px; font-weight:500; }
.mode-choice-check { display:none; position:absolute; top:9px; right:10px; width:21px; height:21px; place-items:center; border-radius:50%; background:var(--accent); color:#fff; font-size:13px; }
.scanner-settings-dialog .scan-direction-toggle button.is-active .mode-choice-check { display:grid; }
.scanner-settings-dialog .station-reader-config { grid-template-columns:repeat(2,minmax(0,1fr)); gap:17px 22px; margin:0; padding:20px; border:1px solid var(--line); border-radius:14px; background:var(--surface-soft); }
.scanner-settings-dialog .station-reader-config > div { gap:8px; }
.scanner-settings-dialog .station-reader-config label { color:var(--text); font-size:13px; }
.scanner-settings-dialog .station-reader-config > button { min-height:48px; justify-content:center; }
.scanner-settings-dialog .station-reader-config small { padding:13px 15px; border:1px solid var(--line); border-radius:10px; background:color-mix(in srgb,var(--accent) 7%,var(--surface)); line-height:1.5; }
@media (max-width:680px) {
 .scanner-settings-dialog { padding:18px; }
 .settings-dialog-head { grid-template-columns:48px minmax(0,1fr) 38px; gap:11px; margin-bottom:19px; }
 .settings-dialog-icon { width:48px; height:48px; font-size:25px; }
 .settings-dialog-title h3 { font-size:20px; }
 .settings-dialog-title p { font-size:12px; }
 .scanner-settings-dialog .scan-direction-toggle { grid-template-columns:1fr; gap:8px; }
 .scanner-settings-dialog .scan-direction-toggle button { min-height:70px; }
 .scanner-settings-dialog .station-reader-config { grid-template-columns:1fr; gap:13px; padding:15px; }
 .scanner-settings-dialog .station-reader-config small { grid-column:auto; }
}
.settings-dialog-actions { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:18px; }
.settings-dialog-actions > span { color:var(--muted); font-size:12px; }
.settings-dialog-actions [data-save-settings] { min-width:150px; min-height:44px; justify-content:center; }
@media (max-width:560px) { .settings-dialog-actions { align-items:stretch; flex-direction:column; } .settings-dialog-actions [data-save-settings] { width:100%; } }
.scanner-workspace > .scanner-station-intro { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.history-filters { display:grid; grid-template-columns:minmax(220px,1fr) minmax(180px,.45fr) auto auto; align-items:end; gap:12px; margin:20px 0 10px; padding:15px; border:1px solid var(--line); border-radius:12px; background:var(--surface-soft); }
.history-filters label { display:grid; gap:6px; color:var(--muted); font-size:12px; font-weight:700; }
.history-filters input, .history-filters select { width:100%; min-height:42px; }
.scan-history-count { margin:12px 0; font-size:12px; }
.scanner-history-empty { display:grid; justify-items:center; gap:6px; padding:54px 20px; border:1px dashed var(--line); border-radius:14px; text-align:center; }
.scanner-history-empty > span { color:var(--accent); font-size:32px; }
.scanner-history-empty h3, .scanner-history-empty p { margin:0; }
.scanner-history-empty p { color:var(--muted); font-size:13px; }
@media (max-width:760px) { .history-filters { grid-template-columns:1fr; } .scanner-workspace > .scanner-station-intro { align-items:flex-start; flex-direction:column; } }
.history-latest-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:20px 0 14px; }
.history-latest-card { min-width:0; padding:16px; border:1px solid var(--line); border-radius:13px; background:var(--surface-soft); }
.history-latest-entry { border-top:3px solid #16885f; }
.history-latest-exit { border-top:3px solid #cf5263; }
.history-latest-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; color:var(--muted); font-size:13px; font-weight:700; }
.history-latest-heading strong { color:var(--text); font-size:19px; white-space:nowrap; }
.history-latest-heading strong small { color:var(--muted); font-size:11px; font-weight:500; }
.history-latest-person { display:flex; min-width:0; align-items:center; gap:11px; padding-top:12px; border-top:1px solid var(--line); }
.history-latest-icon { display:grid; width:38px; height:38px; flex:0 0 38px; place-items:center; border-radius:11px; background:color-mix(in srgb,var(--accent) 12%,var(--surface)); color:var(--accent); font-size:21px; }
.history-latest-person > div { display:grid; min-width:0; gap:4px; }
.history-latest-person > div strong { overflow:hidden; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.history-latest-person > div span, .history-latest-person time { color:var(--muted); font-size:11px; }
.history-latest-person time { margin-left:auto; text-align:right; white-space:nowrap; }
.history-latest-empty { margin:0; padding-top:12px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }
@media (max-width:700px) { .history-latest-grid { grid-template-columns:1fr; } .history-latest-person { flex-wrap:wrap; } .history-latest-person time { width:100%; margin:0 0 0 49px; text-align:left; } }
.history-latest-person { align-items:center; }
.scan-history-capture { position:fixed; top:0; left:-10000px; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; }
.scan-history-capture input { width:1px; height:1px; padding:0; border:0; }
.history-scanner-actions { display:flex; align-items:center; gap:9px; }
.history-scan-modes { display:flex; align-items:center; gap:3px; padding:3px; border:1px solid var(--line); border-radius:10px; background:var(--surface-soft); }
.history-scan-modes button { min-height:32px; padding:6px 9px; border:0; border-radius:7px; background:color-mix(in srgb,var(--muted) 11%,var(--surface)); color:var(--muted); cursor:pointer; font:inherit; font-size:11px; font-weight:700; white-space:nowrap; }
.history-scan-modes button::before { content:'✓'; display:inline-block; width:0; overflow:hidden; opacity:0; transition:width .15s ease,opacity .15s ease; }
.history-scan-modes button:hover { background:color-mix(in srgb,var(--muted) 19%,var(--surface)); color:var(--text); }
.history-scan-modes button.is-selected { padding-inline:9px; background:#16885f; color:#fff; box-shadow:0 1px 4px rgba(30,25,28,.2); }
.history-scan-modes button.is-selected::before { width:12px; margin-right:4px; opacity:1; }
.history-scanner-toggle { display:grid; width:40px; height:40px; flex:0 0 40px; place-items:center; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--muted); cursor:pointer; }
.history-scanner-toggle:hover { border-color:var(--accent); color:var(--accent); }
.history-scanner-toggle.is-active { border-color:#16885f; background:#16885f; color:#fff; box-shadow:none; }
.history-scanner-toggle:not(.is-active) { border-color:#b9bec5; background:#e2e5e9; color:#737b86; box-shadow:none; }
.history-scanner-toggle svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.7; }
@media (max-width:960px) { .history-scanner-actions { flex-wrap:wrap; justify-content:flex-end; } }
@media (max-width:600px) { .history-scanner-actions { justify-content:flex-start; } .history-scan-modes button { padding-inline:7px; } }
.history-latest-avatar { display:grid; width:54px; height:54px; flex:0 0 54px; place-items:center; overflow:hidden; border:2px solid color-mix(in srgb,var(--accent) 48%,var(--line)); border-radius:50%; background:var(--surface); color:var(--accent); font-size:16px; font-weight:750; }
.history-latest-avatar img { width:100%; height:100%; object-fit:cover; }
.history-latest-identity { display:grid; min-width:0; flex:1; gap:5px; }
.history-latest-identity strong { overflow:hidden; font-size:14px; text-overflow:ellipsis; white-space:nowrap; }
.history-latest-identity span { overflow:hidden; color:var(--muted); font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.history-latest-meta { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
.history-latest-meta > div { display:grid; min-width:0; gap:5px; }
.history-latest-meta span { color:var(--muted); font-size:10px; }
.history-latest-meta strong { overflow:hidden; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:700px) { .history-latest-meta { grid-template-columns:1fr 1fr; } }
.role-request-notice { margin:0 0 18px; padding:16px 18px; border:1px solid var(--line); border-radius:12px; }
.role-request-notice strong { display:block; margin-bottom:5px; font-size:14px; }
.role-request-notice p { margin:0; color:var(--muted); font-size:13px; line-height:1.5; }
.role-request-pending { border-color:color-mix(in srgb,#d99b2b 48%,var(--line)); background:color-mix(in srgb,#d99b2b 9%,var(--surface)); }
.role-request-rejected { border-color:color-mix(in srgb,#d9535e 45%,var(--line)); background:color-mix(in srgb,#d9535e 8%,var(--surface)); }
.role-request-list { display:grid; gap:12px; margin-top:18px; }
.role-request-card { display:grid; grid-template-columns:minmax(220px,1.4fr) minmax(110px,.7fr) minmax(180px,1fr) minmax(110px,.7fr) auto; align-items:center; gap:16px; padding:16px; border:1px solid var(--line); border-radius:13px; background:var(--surface-soft); }
.role-request-person { display:flex; align-items:center; gap:12px; min-width:0; }
.role-request-person .user-profile-avatar { flex:0 0 44px; width:44px; height:44px; }
.role-request-person h3 { margin:0 0 4px; font-size:14px; }
.role-request-person p { margin:0; overflow-wrap:anywhere; color:var(--muted); font-size:12px; }
.role-request-detail { display:grid; min-width:0; gap:5px; }
.role-request-detail span { color:var(--muted); font-size:11px; }
.role-request-detail strong { overflow-wrap:anywhere; font-size:12px; }
.role-request-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:8px; }
.role-request-actions form { margin:0; }
.role-request-actions button, .role-request-actions a { min-height:38px; }
@media (max-width:1100px) { .role-request-card { grid-template-columns:minmax(0,1fr) minmax(120px,.65fr) minmax(180px,1fr); } .role-request-actions { grid-column:1/-1; justify-content:flex-start; } }
@media (max-width:640px) { .role-request-card { grid-template-columns:1fr 1fr; } .role-request-person, .role-request-actions { grid-column:1/-1; } }
.admin-notifications { position:relative; z-index:30; flex:0 0 auto; }
.notification-bell { position:relative; display:grid; width:42px; height:42px; place-items:center; border:1px solid var(--line); border-radius:11px; background:var(--surface-soft); color:var(--text); cursor:pointer; }
.notification-bell:hover, .notification-bell[aria-expanded="true"] { border-color:var(--accent); color:var(--accent); }
.notification-bell svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.notification-count { position:absolute; top:-6px; right:-6px; display:grid; min-width:19px; height:19px; place-items:center; padding:0 4px; border:2px solid var(--surface); border-radius:999px; background:#d94e5d; color:#fff; font-size:10px; font-weight:800; line-height:1; }
.notification-panel { position:absolute; top:calc(100% + 11px); right:0; z-index:50; width:min(390px,calc(100vw - 28px)); max-height:min(75vh,620px); overflow:auto; border:1px solid var(--line); border-radius:14px; background:var(--surface); color:var(--text); box-shadow:0 18px 50px rgba(0,0,0,.25); }
.notification-panel[hidden] { display:none; }
.notification-panel-heading { position:sticky; top:0; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 16px; border-bottom:1px solid var(--line); background:var(--surface); }
.notification-panel-heading > div { display:grid; gap:4px; }
.notification-panel-heading strong { font-size:15px; }
.notification-panel-heading span { color:var(--muted); font-size:11px; }
.notification-panel-heading button { display:grid; width:30px; height:30px; place-items:center; border:1px solid var(--line); border-radius:8px; background:var(--surface-soft); color:var(--text); font-size:20px; cursor:pointer; }
.notification-group { padding:10px 9px; border-bottom:1px solid var(--line); }
.notification-group:last-child { border-bottom:0; }
.notification-group-title { display:flex; align-items:center; justify-content:space-between; margin:2px 7px 7px; color:var(--muted); font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.notification-group-title span { display:grid; min-width:21px; height:21px; place-items:center; padding:0 5px; border-radius:999px; background:var(--surface-soft); color:var(--text); font-size:10px; letter-spacing:0; }
.notification-item { display:flex; align-items:center; gap:10px; min-width:0; padding:10px 8px; border-radius:9px; color:var(--text); text-decoration:none; }
.notification-item:hover { background:var(--surface-soft); text-decoration:none; }
.notification-item-icon { display:grid; width:32px; height:32px; flex:0 0 32px; place-items:center; border-radius:10px; background:color-mix(in srgb,var(--accent) 12%,var(--surface)); color:var(--accent); font-size:14px; font-weight:800; }
.notification-item-flag .notification-item-icon { background:color-mix(in srgb,#d94e5d 14%,var(--surface)); color:#d94e5d; }
.notification-item > span:nth-child(2) { display:grid; min-width:0; flex:1; gap:4px; }
.notification-item strong { overflow:hidden; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.notification-item small { overflow:hidden; color:var(--muted); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.notification-item > b { color:var(--muted); font-size:19px; }
.notification-empty { margin:0; padding:9px 8px; color:var(--muted); font-size:12px; }
.notification-view-all { display:block; margin:4px 7px 3px; padding:8px 0 1px; border-top:1px solid var(--line); color:var(--accent); font-size:11px; font-weight:750; }
.notification-feed { padding:7px 9px; }
.notification-feed .notification-item { align-items:flex-start; padding:12px 9px; border-bottom:1px solid var(--line); border-radius:0; }
.notification-feed .notification-item:last-child { border-bottom:0; }
.notification-feed .notification-item-copy { display:grid; min-width:0; flex:1; gap:5px; }
.notification-feed .notification-item-copy strong { font-size:12px; }
.notification-feed .notification-item-copy small { overflow-wrap:anywhere; white-space:normal; line-height:1.4; }
.notification-feed .notification-item-copy time { color:var(--muted); font-size:10px; }
.notification-feed .notification-item-flag .notification-item-icon { background:color-mix(in srgb,#d94e5d 14%,var(--surface)); color:#d94e5d; }
.notification-feed .notification-item-role .notification-item-icon { background:color-mix(in srgb,var(--accent) 14%,var(--surface)); color:var(--accent); }
.notification-heading-actions { display:flex; align-items:center; gap:8px; }
.notification-heading-actions form { margin:0; }
.notification-panel-heading .notification-clear-all { display:block; width:auto; height:auto; padding:6px 9px; border-color:transparent; background:transparent; color:var(--accent); font-size:11px; font-weight:750; }
.notification-panel-heading .notification-clear-all:hover { border-color:var(--line); background:var(--surface-soft); }
.notification-entry { display:flex; align-items:center; gap:2px; border-bottom:1px solid var(--line); }
.notification-feed .notification-entry:last-child { border-bottom:0; }
.notification-feed .notification-item { flex:1; border:0; }
.notification-dismiss-form { flex:0 0 auto; margin:0; padding:0 5px 0 0; }
.notification-dismiss { display:grid; width:28px; height:28px; place-items:center; border:1px solid transparent; border-radius:8px; background:transparent; color:var(--muted); font-size:18px; line-height:1; cursor:pointer; }
.notification-dismiss:hover { border-color:var(--line); background:var(--surface-soft); color:var(--text); }
.notification-feed .notification-item-report .notification-item-icon { background:color-mix(in srgb,#d94e5d 14%,var(--surface)); color:#d94e5d; }
.notification-panel { width:min(360px,calc(100vw - 24px)); border-radius:12px; }
.notification-panel-heading { padding:12px 14px; }
.notification-panel-heading > .notification-heading-actions { display:flex; align-items:center; gap:7px; }
.notification-panel-heading button.notification-clear-all { width:auto; height:30px; padding:0 10px; border:1px solid var(--line); border-radius:8px; background:var(--surface-soft); color:var(--text); font-size:11px; font-weight:700; box-shadow:none; }
.notification-panel-heading button.notification-clear-all:hover { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,var(--surface)); box-shadow:none; transform:none; }
.notification-panel-heading button[data-notification-close] { width:30px; height:30px; border:1px solid var(--line); border-radius:8px; background:var(--surface-soft); color:var(--muted); font-size:18px; box-shadow:none; }
.notification-panel-heading button[data-notification-close]:hover { background:var(--surface); color:var(--text); box-shadow:none; transform:none; }
.notification-feed { padding:3px 7px; }
.notification-feed .notification-item { gap:9px; padding:10px 7px; }
.notification-feed .notification-item-icon { width:29px; height:29px; flex-basis:29px; border-radius:9px; }
.notification-feed .notification-item-copy { gap:3px; }
.notification-feed .notification-item-copy strong { font-size:11px; }
.notification-feed .notification-item-copy small { font-size:10px; line-height:1.3; }
.notification-feed .notification-item-copy time { font-size:9px; }
.notification-dismiss-form { padding-right:3px; }
.notification-panel button.notification-dismiss { width:27px; height:27px; border:1px solid transparent; border-radius:8px; background:transparent; color:var(--muted); font-size:17px; box-shadow:none; }
.notification-panel button.notification-dismiss:hover { border-color:var(--line); background:var(--surface-soft); color:var(--text); box-shadow:none; transform:none; }
.campus-alert-intro { display:flex; align-items:center; gap:14px; margin:4px 0 20px; }
.campus-alert-mark { display:grid; width:44px; height:44px; flex:0 0 44px; place-items:center; border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line)); border-radius:13px; background:color-mix(in srgb,var(--accent) 10%,var(--surface)); color:var(--accent); font-size:20px; }
.campus-alert-intro .kicker, .campus-alert-section-heading .kicker, .campus-alert-history .kicker { margin:0 0 4px; color:var(--accent); font-size:10px; font-weight:800; letter-spacing:.09em; }
.campus-alert-intro .lead { margin:0; color:var(--muted); font-size:14px; }
.campus-alert-compose { padding:22px; }
.campus-alert-section-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:20px; }
.campus-alert-section-heading h2, .campus-alert-history h2 { margin:0; font-size:18px; }
.campus-alert-section-heading .muted { margin:6px 0 0; font-size:12px; }
.campus-alert-status { display:inline-flex; align-items:center; gap:7px; padding:7px 10px; border:1px solid var(--line); border-radius:999px; color:var(--muted); font-size:10px; font-weight:700; white-space:nowrap; }
.campus-alert-status i { width:7px; height:7px; border-radius:50%; background:#3f9b73; }
.campus-alert-form { display:grid; gap:20px; }
.campus-audience-fieldset { min-width:0; margin:0; padding:16px; border:1px solid var(--line); border-radius:13px; background:var(--surface-soft); }
.campus-audience-legend { padding:0; color:var(--text); font-size:13px; font-weight:750; }
.campus-audience-subtitle { margin:5px 0 12px; color:var(--muted); font-size:10px; }
.campus-audience-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.campus-audience-option { position:relative; display:flex; min-width:0; min-height:78px; align-items:flex-start; gap:9px; padding:11px; border:1px solid var(--line); border-radius:11px; background:var(--surface); cursor:pointer; transition:border-color .15s ease,background .15s ease,box-shadow .15s ease; }
.campus-audience-option:hover { border-color:color-mix(in srgb,var(--accent) 55%,var(--line)); }
.campus-audience-option:has(input:checked) { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 7%,var(--surface)); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 25%,transparent); }
.campus-audience-option input { position:absolute; width:1px; height:1px; opacity:0; }
.campus-audience-option input:focus-visible + .campus-audience-radio { outline:2px solid var(--accent); outline-offset:3px; }
.campus-audience-radio { display:grid; width:15px; height:15px; flex:0 0 15px; place-items:center; margin-top:1px; border:1px solid var(--line); border-radius:50%; background:var(--surface); }
.campus-audience-option input:checked + .campus-audience-radio { border-color:var(--accent); }
.campus-audience-option input:checked + .campus-audience-radio::after { width:7px; height:7px; border-radius:50%; background:var(--accent); content:""; }
.campus-audience-copy { display:grid; min-width:0; flex:1; gap:4px; }
.campus-audience-copy strong { font-size:11px; }
.campus-audience-copy small { color:var(--muted); font-size:9px; line-height:1.35; }
.campus-audience-option > b { color:var(--muted); font-size:10px; font-weight:700; }
.campus-audience-note { display:flex; align-items:center; gap:5px; margin:12px 0 0; color:var(--muted); font-size:10px; }
.campus-audience-note > span { color:var(--accent); font-size:14px; }
.campus-audience-note strong { color:var(--text); }
.campus-alert-message-fields { display:grid; gap:15px; }
.campus-alert-field { display:grid; gap:7px; }
.campus-alert-field label { font-size:12px; font-weight:750; }
.campus-alert-field input, .campus-alert-field textarea { width:100%; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--text); font:inherit; font-size:12px; }
.campus-alert-field input { min-height:42px; padding:10px 12px; }
.campus-alert-field textarea { min-height:145px; padding:12px; resize:vertical; line-height:1.55; }
.campus-alert-field input:focus, .campus-alert-field textarea:focus { border-color:var(--accent); outline:2px solid color-mix(in srgb,var(--accent) 18%,transparent); }
.campus-alert-field > small { color:var(--muted); font-size:10px; }
.campus-alert-submit { display:flex; align-items:center; justify-content:space-between; gap:14px; padding-top:15px; border-top:1px solid var(--line); }
.campus-alert-submit > span { color:var(--muted); font-size:10px; }
.campus-alert-submit button { display:inline-flex; min-height:40px; align-items:center; justify-content:center; gap:8px; padding:9px 15px; border-radius:9px; font-size:11px; font-weight:750; }
.campus-alert-history { margin-top:18px; }
.campus-alert-history .section-heading { margin-bottom:14px; }
.campus-audience-badge { display:inline-flex; padding:5px 8px; border:1px solid var(--line); border-radius:999px; background:var(--surface-soft); font-size:10px; font-weight:700; }
@media (max-width:1000px) { .campus-audience-options { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:640px) { .campus-alert-compose { padding:16px; } .campus-alert-section-heading { align-items:flex-start; flex-direction:column; } .campus-audience-options { grid-template-columns:repeat(2,minmax(0,1fr)); } .campus-audience-option { min-height:72px; padding:9px; } .campus-alert-submit { align-items:stretch; flex-direction:column; } .campus-alert-submit button { width:100%; } }
.dashboard-head-actions { display:flex; align-items:flex-end; flex-wrap:wrap; justify-content:flex-end; gap:11px; }
.dashboard-range-filter { display:flex; align-items:flex-end; gap:8px; margin:0; padding:8px; border:1px solid var(--line); border-radius:11px; background:var(--surface); }
.dashboard-range-filter label { display:grid; gap:4px; color:var(--muted); font-size:10px; font-weight:750; }
.dashboard-range-filter input { width:138px; min-height:35px; padding:5px 8px; font-size:12px; }
.dashboard-range-filter button { min-height:35px; padding:0 12px; }
.analytics-legend-pair { align-items:flex-start; flex-direction:column; gap:7px; }
.analytics-legend-pair > span { display:flex; align-items:center; gap:7px; }
.analytics-legend-pair i { width:8px; height:8px; flex:0 0 8px; border-radius:50%; background:#16885f; }
.analytics-legend-pair i.legend-exit { background:#d45b69; }
.chart-line-entry { stroke:#16885f; }
.chart-line-exit { stroke:#d45b69; }
.chart-point-entry { fill:#16885f; }
.chart-point-exit { fill:#d45b69; }
.analytics-breakdown-grid { display:grid; grid-template-columns:minmax(260px,.85fr) minmax(0,1.4fr); gap:18px; margin-top:18px; }
.analytics-breakdown-card { min-width:0; }
.analytics-breakdown-card .analytics-heading { margin-bottom:18px; }
.analytics-breakdown-card .analytics-heading .kicker, .analytics-breakdown-card .analytics-heading h2, .analytics-breakdown-card .analytics-heading .muted { margin:0; }
.analytics-breakdown-card .analytics-heading h2 { margin:3px 0 4px; font-size:17px; }
.analytics-breakdown-card .analytics-heading .muted { font-size:12px; }
.department-chart { display:grid; gap:14px; }
.department-chart-row { display:grid; gap:7px; }
.department-chart-row > div { display:flex; justify-content:space-between; gap:10px; font-size:12px; }
.department-chart-row > div strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.department-chart-row > div span { flex:0 0 auto; color:var(--muted); font-weight:700; }
.department-track, .weekday-track { display:block; height:7px; overflow:hidden; border-radius:999px; background:color-mix(in srgb,var(--accent) 10%,var(--surface)); }
.department-track i, .weekday-track i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#bd666d,#d9898d); }
.analytics-empty-note { padding:15px 0; }
.traffic-pattern-columns { display:grid; grid-template-columns:minmax(150px,.75fr) minmax(220px,1.25fr); gap:22px; }
.traffic-pattern-block { min-width:0; }
.traffic-pattern-block h3 { margin:0 0 12px; font-size:13px; }
.weekday-chart { display:grid; gap:10px; }
.weekday-chart-row { display:grid; grid-template-columns:34px minmax(0,1fr) 30px; align-items:center; gap:8px; font-size:11px; }
.weekday-chart-row > span:first-child { color:var(--muted); }
.weekday-chart-row strong { text-align:right; font-size:11px; }
.weekday-track { height:6px; }
.weekday-track i { background:linear-gradient(90deg,#16885f,#56b48f); }
.hour-chart { display:grid; height:150px; grid-template-columns:repeat(24,minmax(0,1fr)); align-items:stretch; gap:4px; padding-top:5px; border-bottom:1px solid var(--line); }
.hour-chart-column { display:flex; min-width:0; height:100%; flex-direction:column; align-items:center; justify-content:flex-end; gap:5px; }
.hour-chart-track { display:flex; width:100%; height:100%; align-items:flex-end; overflow:hidden; border-radius:4px 4px 0 0; background:color-mix(in srgb,var(--accent) 6%,var(--surface)); }
.hour-chart-track i { display:block; width:100%; min-height:2px; border-radius:4px 4px 0 0; background:linear-gradient(180deg,#d9898d,#bd666d); }
.hour-chart-column small { min-height:14px; color:var(--muted); font-size:8px; white-space:nowrap; }
.traffic-hour-caption { margin:9px 0 0; color:var(--muted); font-size:10px; text-align:right; }
@media (max-width:900px) { .dashboard-head { align-items:flex-start; flex-direction:column; } .dashboard-head-actions { width:100%; justify-content:space-between; } .analytics-breakdown-grid { grid-template-columns:1fr; } }
@media (max-width:620px) { .dashboard-head-actions { align-items:stretch; flex-direction:column; } .dashboard-range-filter { align-items:flex-end; justify-content:space-between; flex-wrap:wrap; } .dashboard-range-filter label { flex:1; min-width:115px; } .dashboard-range-filter input { width:100%; } .traffic-pattern-columns { grid-template-columns:1fr; } }
.dashboard-range-filter > small { flex:0 0 100%; color:var(--muted); font-size:9px; text-align:right; }
.dashboard-range-alert { margin:0 0 14px; }

/* ==========================================================================
   Design system refresh
   One neutral palette, one accent reserved for primary actions and alerts,
   flat bordered surfaces, and a readable type scale (nothing under 11px).
   `body[data-theme]` prefixes are used only where an older dark-theme rule
   would otherwise win on specificity.
   ========================================================================== */

/* Base & type ------------------------------------------------------------- */
body { font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h2 { font-size: 22px; font-weight: 650; line-height: 1.25; letter-spacing: -.02em; }
h3 { font-weight: 650; }
a { color: var(--accent); }
.muted { font-size: 13px; }
.kicker { margin: 0 0 6px; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .06em; }
.lead { color: var(--muted); font-size: 14px; }
.page-subtitle { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; color: var(--muted); font-size: 13.5px; }
.live-dot { position: relative; width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--ok); }
.live-dot::after { position: absolute; inset: -4px; border-radius: 50%; background: var(--ok); content: ""; opacity: .25; animation: live-pulse 2s ease-out infinite; }
@keyframes live-pulse { from { transform: scale(.6); opacity: .35; } to { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .live-dot::after { animation: none; } }
.cell-nowrap { white-space: nowrap; }
::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }

/* Buttons ----------------------------------------------------------------- */
.btn, button, input[type="submit"] { min-height: 38px; padding: 8px 14px; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 600; line-height: 1.2; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.btn:hover, button:hover, input[type="submit"]:hover { opacity: 1; transform: none; box-shadow: none; }
.btn .nav-icon, button .nav-icon { width: 16px; height: 16px; flex-basis: 16px; }
.btn-outline, button.btn-outline { border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); }
.btn-outline:hover, button.btn-outline:hover { border-color: var(--muted); background: var(--surface-soft); color: var(--text); }
body[data-theme] .btn-outline { background: var(--surface); }
.btn-danger, button.btn-danger { border: 1px solid transparent; background: var(--danger); color: #fff; }
.btn-danger:hover, button.btn-danger:hover { background: color-mix(in srgb, var(--danger) 86%, #000); }
body[data-theme="dark"] .btn-danger, body[data-theme="dark"] button.btn-danger { background: #a8404a; }
.btn-sm, button.btn-sm { min-height: 32px; padding: 6px 11px; font-size: 12.5px; }
.password-toggle, .notification-dismiss, .settings-dialog-close { min-height: 0; }
.btn-gold, button.btn-gold { background: var(--primary); color: #fff; }
.btn-gold:hover, button.btn-gold:hover { background: var(--primary-hover); }
/* Per-row table actions stay quiet so a long list doesn't become a wall of red. */
.history-report-open { min-height: 30px; padding: 5px 10px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font-size: 12.5px; }
.profile-form-actions .profile-status-error { color: var(--danger); font-weight: 600; }
.profile-form-actions .profile-status-ok { color: var(--ok); font-weight: 600; }
.history-report-open:hover { border-color: var(--danger); background: var(--accent-soft); color: var(--danger); }
button:disabled, .btn[aria-disabled="true"] { cursor: not-allowed; opacity: .5; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Forms ------------------------------------------------------------------- */
label { font-size: 13px; font-weight: 600; }
input:not([type]), input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="date"], input[type="datetime-local"], input[type="search"], input[type="number"], select, textarea { width: 100%; min-height: 40px; padding: 9px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-size: 14px; }
textarea { min-height: 96px; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--muted) 80%, transparent); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
input[type="file"] { border-color: var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-soft); font-size: 13px; }
.check { color: var(--text); font-weight: 500; }

/* Alerts & status --------------------------------------------------------- */
.alert { padding: 11px 14px; border: 1px solid transparent; border-radius: 10px; font-size: 13.5px; line-height: 1.45; }
.alert-error { border-color: color-mix(in srgb, var(--danger) 28%, transparent); background: var(--accent-soft); color: var(--danger); }
.alert-ok { border-color: color-mix(in srgb, var(--ok) 28%, transparent); background: var(--ok-soft); color: var(--ok); }
.status-pill, .status-pill-ok { padding: 5px 10px; background: var(--ok-soft); color: var(--ok); font-size: 12px; font-weight: 600; }
.scan-badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.4; white-space: nowrap; }
body[data-theme] .scan-badge-ok, body[data-theme] .scan-badge-entry { background: var(--ok-soft); color: var(--ok); }
body[data-theme] .scan-badge-exit { background: var(--info-soft); color: var(--info); }
body[data-theme] .scan-badge-error { background: var(--accent-soft); color: var(--danger); }
body[data-theme] .scan-badge-warn { background: var(--warn-soft); color: var(--warn); }
.empty-state, .security-empty-state { gap: 4px; padding: 36px 16px; }
.empty-state > span, .security-empty-state > span { font-size: 22px; }
.empty-state strong, .security-empty-state strong { font-size: 14px; }
.empty-state p, .security-empty-state p { font-size: 13px; }

/* Cards & sections -------------------------------------------------------- */
.card { padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.dashboard-section, .recent-access-card { margin-top: 16px; }
.section-heading, .analytics-heading { margin-bottom: 16px; }
.section-heading h2, .analytics-heading h2, .analytics-card h2, .dashboard-section h2, .id-status-panel .section-heading h2, .analytics-breakdown-card .analytics-heading h2, .quick-metrics h2 { margin: 0; font-size: 16px; font-weight: 650; letter-spacing: -.01em; }
.section-heading .muted, .analytics-heading .muted, .analytics-breakdown-card .analytics-heading .muted { margin: 3px 0 0; font-size: 13px; }
.analytics-grid, .analytics-breakdown-grid { gap: 16px; margin-top: 16px; }

/* Page heads -------------------------------------------------------------- */
.dashboard-head, .reference-greeting { align-items: flex-end; margin-bottom: 20px; }
.dashboard-head h2, .reference-greeting h2, .scanner-page-heading h2 { margin: 0; font-size: 22px; letter-spacing: -.02em; }
.dashboard-head-actions { align-items: flex-end; gap: 10px; }
.dashboard-range-filter { align-items: flex-end; gap: 8px; padding: 0; border: 0; background: transparent; }
.dashboard-range-filter label { gap: 3px; margin: 0; color: var(--muted); font-size: 11.5px; font-weight: 600; }
.dashboard-range-filter input { width: 142px; height: 36px; min-height: 36px; padding: 6px 9px; font-size: 13px; }
.dashboard-range-filter button, .dashboard-head-actions > .btn { height: 36px; min-height: 36px; padding-block: 0; }

/* KPI tiles --------------------------------------------------------------- */
.stats, .admin-kpi-grid { gap: 14px; margin-bottom: 0; }
.admin-kpi-grid + * { margin-top: 16px; }
.stat, .admin-kpi { background: var(--surface); color: var(--text); }
body[data-theme] .admin-kpi { min-height: 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
body[data-theme] .admin-kpi span { color: var(--muted); font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-transform: none; }
body[data-theme] .admin-kpi strong { margin: 6px 0 2px; color: var(--text); font-size: 26px; font-weight: 650; letter-spacing: -.03em; }
body[data-theme] .admin-kpi small { color: var(--muted); font-size: 12px; }
body[data-theme] .admin-kpi small span { display: inline; color: inherit; font-size: inherit; font-weight: 600; }
body[data-theme] .admin-kpi .kpi-time, body[data-theme] .admin-kpi .kpi-status { font-size: 22px; }
body[data-theme] .admin-kpi-alert { box-shadow: inset 3px 0 0 var(--danger), var(--shadow); }
body[data-theme] .admin-kpi-alert strong { color: var(--danger); }
body[data-theme] .admin-kpi-presence { box-shadow: inset 3px 0 0 var(--ok), var(--shadow); }
body[data-theme] .admin-kpi-presence strong { color: var(--ok); }
body[data-theme] .admin-kpi-presence span, body[data-theme] .admin-kpi-presence small, body[data-theme] .admin-kpi-alert span, body[data-theme] .admin-kpi-alert small { color: var(--muted); }
.security-kpi-grid .security-resolved-kpi strong { color: var(--ok); }
.security-kpi-grid .security-open-kpi strong { color: var(--warn); }
.security-kpi-grid .security-reads-kpi strong { color: var(--danger); }

/* Tables ------------------------------------------------------------------ */
.table-wrap { border: 1px solid var(--line); border-radius: 10px; }
th, td { padding: 11px 14px; border-bottom: 1px solid var(--line); font-size: 13.5px; vertical-align: middle; }
th { background: var(--surface-soft); color: var(--muted); font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
th:first-child, th:last-child { border-radius: 0; }
tbody tr:last-child td { border-bottom: 0; }
tr:hover td { background: color-mix(in srgb, var(--surface-soft) 70%, var(--surface)); }
.security-reports-card th { font-size: 11.5px; }
.security-table-count, .user-result-count, .security-result-count { font-size: 12px; font-weight: 600; }

/* Charts ------------------------------------------------------------------ */
.chart-gridline { stroke: var(--line); }
.chart-axis-label { fill: var(--muted); font-size: 11px; }
.chart-line { stroke-width: 2.25; }
.chart-line-entry { stroke: var(--ok); }
.chart-line-exit { stroke: var(--info); }
.chart-point-entry { fill: var(--ok); }
.chart-point-exit { fill: var(--info); }
.analytics-legend { font-size: 12.5px; }
.analytics-legend-pair { flex-direction: row; gap: 14px; }
.analytics-legend-pair i, .analytics-legend-pair i.legend-entry { background: var(--ok); }
.analytics-legend-pair i.legend-exit { background: var(--info); }
.analytics-legend-pair b { color: var(--text); }
.department-track, .weekday-track { height: 8px; background: var(--surface-soft); box-shadow: inset 0 0 0 1px var(--line); }
.department-track i, .weekday-track i { background: var(--chart); }
.department-chart-row > div { font-size: 13px; }
.department-chart-row > div strong { font-weight: 500; }
.weekday-chart-row, .weekday-chart-row strong { font-size: 12px; }
.traffic-pattern-block h3 { color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.hour-chart-track { background: var(--surface-soft); }
.hour-chart-track i { background: var(--chart); }
.hour-chart { padding-bottom: 18px; gap: 3px; }
.hour-chart-column { position: relative; }
.hour-chart-column small { position: absolute; bottom: -18px; left: 0; min-height: 0; font-size: 10.5px; line-height: 1; }
.traffic-hour-caption { font-size: 11.5px; }
.personal-bars { background: none; border-top: 0; }
.personal-bar-track { background: var(--surface-soft); box-shadow: inset 0 0 0 1px var(--line); }
.personal-bar-track span { background: var(--chart); }
.personal-bar-column strong { color: var(--text); font-size: 12px; font-weight: 600; }
.personal-bar-column small { font-size: 12px; }

/* Dashboard side panels --------------------------------------------------- */
.quick-metrics { display: flex; flex-direction: column; }
.quick-metrics h2 { margin-bottom: 4px; }
.quick-metric { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 13.5px; }
.quick-metric strong, .analytics-total { color: var(--text); font-size: 17px; font-weight: 650; }
.quick-action { gap: 10px; min-height: 40px; margin: 16px 0 0; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--text); font-size: 13.5px; font-weight: 600; text-decoration: none; }
.quick-action:hover { background: var(--surface-soft); text-decoration: none; }
.quick-action .nav-icon { width: 16px; height: 16px; color: var(--muted); }
.quick-action > b { margin-left: auto; padding: 1px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--danger); font-size: 12px; }
.rfid-ticket { min-height: 150px; border-radius: var(--radius); background: linear-gradient(135deg, #34323a, #1f1e23); box-shadow: 0 8px 20px rgba(20, 18, 22, .18); }
.rfid-ticket-missing { background: linear-gradient(135deg, #9a3c45, #6f2a31); }
.rfid-ticket > small, .rfid-ticket label { font-size: 11px; letter-spacing: .06em; }
.rfid-ticket-number { font-size: 13px; font-variant-numeric: tabular-nums; }
.rfid-ticket-number b { font-size: 11px; letter-spacing: .04em; }
.id-validity { font-size: 12.5px; line-height: 1.45; }
.id-validity i { background: var(--ok); }
.rfid-ticket-missing ~ .id-validity i { background: var(--danger); }

/* App shell: sidebar ------------------------------------------------------ */
.sidebar { gap: 14px; padding: 16px 12px; background: #1d1c21; border-right: 1px solid rgba(255, 255, 255, .04); }
.sidebar-brand { gap: 10px; padding: 4px 8px 14px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.sidebar-brand .brand-mark { width: 34px; height: 34px; border-radius: 9px; background: var(--primary); box-shadow: none; font-size: 13px; }
.brand strong { color: #f4f2f5; font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.brand span { color: #9a96a0; font-size: 12px; }
.side-nav { gap: 2px; }
.side-nav-group-label { padding: 16px 10px 6px; color: #85818b; font-size: 11px; font-weight: 600; letter-spacing: .07em; }
.side-nav > .side-nav-group-label:first-child { padding-top: 2px; }
.side-link { gap: 11px; min-height: 38px; padding: 8px 10px; border: 0; border-radius: var(--radius-sm); color: #c2bec6; font-size: 14px; font-weight: 500; text-decoration: none; }
.side-link .nav-icon { color: #8f8b95; }
.side-link:hover { background: rgba(255, 255, 255, .06); color: #fff; text-decoration: none; }
.side-link:hover .nav-icon { color: #d8d5db; }
.side-link.is-active { background: rgba(255, 255, 255, .09); color: #fff; font-weight: 600; box-shadow: inset 3px 0 0 #e0868d; }
.side-link.is-active .nav-icon { color: #e8a0a5; }
.nav-count { margin-left: auto; min-width: 20px; padding: 1px 7px; border-radius: 999px; background: var(--primary); color: #fff; font-size: 11px; font-weight: 700; line-height: 1.5; text-align: center; }
.beta-badge { padding: 1px 7px; border-color: rgba(255, 255, 255, .16); color: #a9a5ae; font-size: 10px; font-weight: 600; }
.sidebar-footer { padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .07); }
.sidebar-account { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 4px 4px 2px; }
.sidebar-avatar { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; overflow: hidden; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #f4f2f5; font-size: 12px; font-weight: 700; }
.sidebar-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sidebar-account-copy { display: grid; min-width: 0; flex: 1; line-height: 1.3; }
.sidebar-account-copy strong { overflow: hidden; color: #f4f2f5; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-account-copy small { color: #8f8b95; font-size: 12px; }
.sidebar-footer .sidebar-account form { width: auto; margin: 0; }
.sidebar-account .sidebar-logout { display: grid; width: 34px; min-height: 34px; height: 34px; padding: 0; place-items: center; border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--radius-sm); background: transparent; color: #a9a5ae; }
.sidebar-account .sidebar-logout:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.sidebar-account .sidebar-logout .nav-icon { width: 17px; height: 17px; }

/* App shell: top bar & content -------------------------------------------- */
.app-top { min-height: 60px; gap: 14px; padding: 10px 28px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: saturate(1.4) blur(8px); }
body[data-theme="dark"] .app-top { background: color-mix(in srgb, var(--surface) 92%, transparent); }
.app-top h1 { font-size: 16px; font-weight: 650; letter-spacing: -.01em; }
.sidebar-toggle { flex-basis: 36px; width: 36px; min-height: 36px; height: 36px; border-radius: var(--radius-sm) !important; color: var(--muted) !important; }
.sidebar-toggle:hover { color: var(--text) !important; }
.topbar-search { min-height: 36px; border-color: var(--line); border-radius: var(--radius-sm); background: var(--surface-soft); transition: border-color .15s ease, box-shadow .15s ease; }
.topbar-search:focus-within { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
.topbar-search input[type="search"] { min-height: 0; padding: 0; border: 0; background: transparent; font-size: 13.5px; }
.topbar-search input[type="search"]:focus { box-shadow: none; outline: none; }
.topbar-date { font-size: 13px; }
.notification-bell { width: 36px; height: 36px; min-height: 36px; padding: 0; border-color: var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--muted); }
.notification-bell:hover, .notification-bell[aria-expanded="true"] { border-color: var(--line-strong); background: var(--surface-soft); color: var(--text); }
.notification-count { background: var(--primary); }
.app-content { width: min(1400px, 100%); padding: 28px 32px 40px; }
@media (max-width: 760px) { .app-top { padding: 10px 16px; } .app-content { padding: 20px 16px 32px; } }

/* Notifications panel ----------------------------------------------------- */
.notification-panel { border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.notification-panel-heading strong { font-size: 14px; }
.notification-panel-heading span { font-size: 12px; }
.notification-feed .notification-item-copy strong { font-size: 13px; }
.notification-feed .notification-item-copy small { font-size: 12px; line-height: 1.4; }
.notification-feed .notification-item-copy time { font-size: 11.5px; }
.notification-feed .notification-item-icon { width: 30px; height: 30px; flex-basis: 30px; border-radius: 50%; font-size: 13px; }
.notification-panel-heading button[data-notification-close], .notification-panel button.notification-dismiss, .notification-panel-heading button.notification-clear-all { min-height: 0; }
.notification-panel-heading button.notification-clear-all { font-size: 12px; }

/* Dialogs ----------------------------------------------------------------- */
.report-dialog, .record-editor-dialog, .calendar-activity-dialog, .image-crop-dialog, .scanner-settings-dialog { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); }
.report-dialog::backdrop, .record-editor-dialog::backdrop, .calendar-activity-dialog::backdrop, .image-crop-dialog::backdrop, .scanner-settings-dialog::backdrop { background: rgba(20, 18, 22, .5); backdrop-filter: blur(2px); }
.report-dialog h2, .record-editor-form h2, .calendar-activity-content .section-heading h2, .image-crop-content h2 { font-size: 18px; }
.settings-dialog-close, .settings-dialog-head button { min-height: 0; padding: 0; background: var(--surface-soft); color: var(--text); }

/* Small-text floor across feature pages ----------------------------------- */
.campus-audience-subtitle, .campus-audience-note, .campus-alert-field > small, .campus-alert-submit > span, .campus-alert-section-heading .muted { font-size: 12px; }
.campus-audience-copy strong { font-size: 13px; }
.campus-audience-copy small { font-size: 11.5px; }
.campus-audience-option > b, .campus-alert-status, .campus-audience-badge { font-size: 11.5px; }
.campus-alert-field input, .campus-alert-field textarea { font-size: 14px; }
.campus-alert-field label, .campus-audience-legend { font-size: 13px; }
.campus-alert-submit button { font-size: 13.5px; }
.campus-alert-intro .kicker, .campus-alert-section-heading .kicker, .campus-alert-history .kicker { color: var(--muted); font-size: 11px; }
.scan-result-person small, .scan-result-data small { font-size: 10.5px; }
.scan-result-person strong, .scan-result-data strong { font-size: 13px; }
.scan-result-person span, .scan-result-top time, .scan-result-state, .scan-timing-badge { font-size: 11.5px; }
.scanner-scan-details > div span, .station-reader-config label, .scanner-form-grid label { font-size: 12px; }
.scanner-scan-details > div strong, .scanner-person-panel .scanner-scan-details > div strong { font-size: 13px; }
.station-reader-config small, .station-reader-config [role="status"], .reader-settings summary small, .scanner-settings-trigger small, .mode-choice-copy small, .settings-dialog-actions > span { font-size: 12px; }
.history-latest-meta span, .history-latest-person > div span, .history-latest-person time, .history-latest-identity span { font-size: 12px; }
.history-latest-meta strong { font-size: 12.5px; }
.history-scan-modes button, .security-bulk-tools button { font-size: 12px; }
.security-reports-card .security-report-action-group button, .security-event-card td:last-child button { font-size: 12px; }
.calendar-legend, .calendar-activity-details span, .calendar-activity-details small { font-size: 12px; }
.calendar-day small { font-size: 11px; }
.calendar-day-counts { font-size: clamp(9px, .75vw, 10.5px); }
.profile-image-help, .profile-form-actions p, .profile-photo-note, .account-preferences-card > .muted, .account-preferences-card .switch-row small, .profile-picture-fields small { font-size: 12px; }
.profile-field-grid label:not(.check) { font-size: 12.5px; }
.profile-field-grid input { font-size: 14px; }
.profile-hero-identity p, .profile-media-button, .profile-role-chip { font-size: 12px; }
.role-request-detail span, .role-request-person p, .history-filters label, .security-filter-form label, .record-editor-form label { font-size: 12px; }
.role-request-detail strong { font-size: 13px; }
.user-status-active, .profile-heading-badge { font-size: 11.5px; }
.map-source-badge { font-size: 12px; }

/* Semantic color: exit is informational, red stays reserved for problems --- */
.scanner-station-exit .scanner-station-icon { background: var(--info-soft); color: var(--info); }
.scanner-station-entry .scanner-station-icon { background: var(--ok-soft); color: var(--ok); }
.history-latest-entry { border-top-color: var(--ok); }
.history-latest-exit { border-top-color: var(--info); }
.state-exit { color: var(--info); }
.state-exit i { background: var(--info); }
.scanner-direction::before { color: var(--ok); }
.scanner-direction-exit::before { color: var(--info); }
.scanner-person-panel .scanner-last-card.scanner-last-exit { border-color: color-mix(in srgb, var(--info) 45%, var(--line)); background: linear-gradient(120deg, color-mix(in srgb, var(--info) 10%, var(--surface)), var(--surface)); }
.scan-direction-toggle button.is-active, .history-scan-modes button.is-selected, .history-scanner-toggle.is-active { background: var(--ok); }
.scanner-station-exit .scan-direction-toggle button.is-active { background: var(--info); }
.calendar-day-active, button.calendar-day-button:not(.btn-outline):not(.btn-gold):not(.btn-logout).calendar-day-active { border-color: color-mix(in srgb, var(--ok) 35%, var(--line)); background: var(--ok-soft); color: var(--ok); }
body[data-theme="dark"] .history-scanner-toggle:not(.is-active) { border-color: var(--line-strong); background: var(--surface-soft); color: var(--muted); }
.security-alert-banner { border-color: color-mix(in srgb, var(--danger) 30%, transparent); background: var(--accent-soft); color: var(--danger); }
.security-alert-banner span:last-child { color: inherit; }
.security-alert-symbol { background: color-mix(in srgb, var(--danger) 16%, transparent); }
.admin-kpi-alert, .profile-heading-badge-alert { border-color: var(--line); }
body[data-theme] .profile-heading-badge-alert { border-color: color-mix(in srgb, var(--danger) 30%, transparent); background: var(--accent-soft); color: var(--danger); }
body[data-theme] .user-status-active { background: var(--ok-soft); color: var(--ok); }

/* Public pages (login, register, recovery) -------------------------------- */
.topbar { padding: 14px 24px; background: #1d1c21; }
.topbar .brand-mark { width: 36px; height: 36px; border-radius: 9px; background: var(--primary); box-shadow: none; font-size: 13px; }
.topbar .btn-outline { min-height: 36px; border-color: rgba(255, 255, 255, .2); background: transparent; color: #f4f2f5; }
.topbar .btn-outline:hover { background: rgba(255, 255, 255, .08); color: #fff; }

/* Responsive tidy-ups ----------------------------------------------------- */
.trend-chart-wrap { overflow-x: auto; }
@media (max-width: 800px) {
    .app-shell:not(.sidebar-open) .sidebar { box-shadow: none; }
}
@media (max-width: 900px) {
    .dashboard-head, .reference-greeting { align-items: flex-start; }
}
@media (max-width: 620px) {
    .dashboard-range-filter { width: 100%; }
    .dashboard-range-filter input { width: 100%; }
    .dashboard-head-actions > .btn { width: 100%; }
    th, td { padding: 10px 12px; }
}

/* Utilities --------------------------------------------------------------- */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.text-danger { color: var(--danger) !important; }
.dashboard-head-actions .btn .nav-count { margin-left: 2px; }

/* User management: directory ---------------------------------------------- */
.user-status-chips { display: flex; gap: 2px; margin: 0 0 16px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.user-status-chips::-webkit-scrollbar { display: none; }
.user-status-chip { display: inline-flex; flex: none; align-items: center; gap: 8px; min-height: 42px; padding: 8px 14px; color: var(--muted); font-size: 13.5px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: color .15s ease, box-shadow .15s ease; }
.user-status-chip:hover { color: var(--text); text-decoration: none; }
.user-status-chip strong { min-width: 22px; padding: 0 6px; border-radius: 6px; background: var(--surface-soft); color: var(--muted); font-size: 11.5px; line-height: 18px; text-align: center; }
.user-status-chip-ok strong { color: var(--ok); }
.user-status-chip-warn strong { color: var(--warn); }
.user-status-chip-danger strong { color: var(--danger); }
.user-status-chip.is-active { color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
.user-status-chip.is-active strong { background: var(--accent-soft); }
.user-status-chip.is-active:not([class*="user-status-chip-"]) strong { color: var(--accent); }

.user-directory.card { padding: 0; overflow: hidden; }
.user-filter-bar { display: grid; grid-template-columns: minmax(220px, 1fr) repeat(3, minmax(130px, auto)) auto auto; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.user-filter-bar label { margin: 0; }
.user-filter-bar select { min-height: 38px; padding-block: 6px; font-size: 13.5px; }
.user-filter-search { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); }
.user-filter-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.user-filter-search svg { width: 17px; height: 17px; flex: 0 0 17px; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; }
.user-filter-search input[type="search"] { min-height: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
.user-filter-search input[type="search"]:focus { box-shadow: none; outline: none; }
.user-list-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; color: var(--text); font-size: 13px; font-weight: 600; }
.user-list-meta .muted { font-size: 12.5px; font-weight: 400; }
.user-directory .table-wrap { border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.user-directory .empty-state { border-top: 1px solid var(--line); }
.users-table td { padding-block: 10px; }
.users-table th:first-child, .users-table td:first-child { padding-left: 16px; }
.users-table th:last-child, .users-table td:last-child { padding-right: 16px; }
.cell-check { width: 36px; }
.cell-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--primary); cursor: pointer; }
.cell-actions { width: 1%; text-align: right; white-space: nowrap; }
.user-row { cursor: pointer; }
.user-row.is-selected td { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.user-row.is-current td { background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }
.user-row.is-current td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.user-row.is-loading { opacity: .6; cursor: progress; }
.user-identity { display: flex; align-items: center; gap: 11px; min-width: 220px; }
.user-identity > div { display: grid; min-width: 0; line-height: 1.35; }
.user-identity small { overflow: hidden; max-width: 300px; color: var(--muted); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.user-name-link { color: var(--text); font-weight: 600; text-decoration: none; }
.user-name-link:hover { color: var(--accent); text-decoration: none; }
.user-avatar { display: grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; overflow: hidden; border-radius: 50%; background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent); font-size: 12.5px; font-weight: 700; }
.user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.user-avatar-lg { width: 56px; height: 56px; flex-basis: 56px; font-size: 18px; }
.user-dept { display: block; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
td small.muted, .role-pending { display: block; font-size: 12px; }
.role-pending { color: var(--warn); font-weight: 500; }
.role-badge { display: inline-flex; padding: 2px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-soft); color: var(--text); font-size: 12px; font-weight: 600; }
.role-badge-employee { border-color: color-mix(in srgb, var(--info) 30%, var(--line)); background: var(--info-soft); color: var(--info); }
.rfid-code, .danger-zone code { padding: 2px 7px; border-radius: 6px; background: var(--surface-soft); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12.5px; }
.user-badges { display: flex; flex-wrap: wrap; gap: 5px; }
.pagination { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.pagination [aria-disabled="true"] { pointer-events: none; opacity: .45; }

/* Floating bulk-action bar */
.bulk-bar { position: sticky; bottom: 18px; z-index: 6; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; width: fit-content; max-width: 100%; margin: 14px auto 0; padding: 8px 8px 8px 16px; border-radius: 12px; background: #1d1c21; color: #f4f2f5; box-shadow: var(--shadow-lg); }
.bulk-bar[hidden] { display: none; }
.bulk-bar strong { margin-right: 4px; font-size: 13.5px; }
.bulk-bar label { margin: 0; }
.bulk-bar select { min-width: 190px; min-height: 36px; padding-block: 5px; border-color: rgba(255, 255, 255, .18); background: #2a292f; color: #f4f2f5; font-size: 13.5px; }
.bulk-bar button { min-height: 36px; }
.bulk-bar .bulk-bar-clear { border: 1px solid rgba(255, 255, 255, .18); background: transparent; color: #d8d5db; }
.bulk-bar .bulk-bar-clear:hover { background: rgba(255, 255, 255, .08); color: #fff; }

/* User management: manage dialog ------------------------------------------ */
.user-manage-dialog { width: min(860px, calc(100vw - 32px)); max-width: none; max-height: min(92vh, 900px); padding: 0; overflow: hidden; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); }
.user-manage-dialog::backdrop { background: rgba(20, 18, 22, .5); backdrop-filter: blur(2px); }
.user-manage-dialog:focus { outline: none; }
.user-manage-dialog[open] { display: flex; }
.user-manage-dialog[open] { animation: dialog-in .18s ease-out; }
@keyframes dialog-in { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .user-manage-dialog[open] { animation: none; } }
.user-manage-head { display: flex; align-items: flex-start; gap: 14px; padding: 20px 22px 16px; }
.user-manage-identity { display: grid; min-width: 0; flex: 1; gap: 4px; }
.user-manage-identity h2 { margin: 0; font-size: 19px; }
.user-manage-identity > p { margin: 0; overflow: hidden; color: var(--muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.user-manage-identity .user-badges { margin-top: 4px; }
.user-manage-close { display: grid; width: 34px; height: 34px; min-height: 34px; flex: 0 0 34px; padding: 0; place-items: center; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--muted); }
.user-manage-close:hover { background: var(--surface-soft); color: var(--text); }
.user-manage-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.user-manage-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 22px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.user-manage-stats > div { display: grid; min-width: 0; gap: 2px; padding: 10px 14px; }
.user-manage-stats > div + div { border-left: 1px solid var(--line); }
.user-manage-stats span { color: var(--muted); font-size: 12px; }
.user-manage-stats strong { overflow: hidden; font-size: 14px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.user-manage-stats a { color: inherit; }
.user-manage-dialog > .alert { margin: 0 22px 12px; }
.user-manage-tabs { display: flex; gap: 4px; padding: 0 22px; border-bottom: 1px solid var(--line); }
.user-manage-tabs [role="tab"] { position: relative; min-height: 40px; padding: 8px 12px; border: 0; border-radius: 0; background: transparent; color: var(--muted); font-size: 13.5px; font-weight: 600; }
.user-manage-tabs [role="tab"]:hover { background: transparent; color: var(--text); }
.user-manage-tabs [role="tab"][aria-selected="true"] { color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
.tab-count { margin-left: 4px; padding: 0 7px; border-radius: 999px; background: var(--surface-soft); color: var(--muted); font-size: 11.5px; }
.user-manage-body { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 22px 22px; }
.user-manage-panel[hidden] { display: none; }
.user-manage-form { display: grid; gap: 16px; }
.user-manage-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.user-manage-form legend { margin-bottom: 10px; padding: 0; color: var(--muted); font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.user-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.user-form-grid > div { min-width: 0; }
.user-form-grid > [hidden] { display: none; }
.user-form-wide { grid-column: 1 / -1; }
.user-manage-form label { margin-bottom: 5px; }
.optional { margin-left: 4px; color: var(--muted); font-size: 12px; font-weight: 400; }
.user-manage-form .switch-row { padding: 12px 14px; background: var(--surface); }
.user-manage-form .switch-row input[type="checkbox"] { position: relative; width: 38px; height: 22px; flex: 0 0 38px; margin: 0; border-radius: 999px; background: var(--line-strong); cursor: pointer; appearance: none; transition: background .15s ease; }
.user-manage-form .switch-row input[type="checkbox"]::after { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); content: ""; transition: transform .15s ease; }
.user-manage-form .switch-row input[type="checkbox"]:checked { background: var(--primary); }
.user-manage-form .switch-row input[type="checkbox"]:checked::after { transform: translateX(16px); }
.user-manage-form .switch-row:has(input:checked) { border-color: color-mix(in srgb, var(--primary) 40%, var(--line)); }
.user-manage-form [data-flag-note-field][hidden] { display: none; }
.user-manage-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 4px; }
#user-panel-profile .user-manage-actions { position: sticky; bottom: -22px; margin: 4px -22px -22px; padding: 12px 22px; border-top: 1px solid var(--line); background: var(--surface); }
.user-manage-actions .muted { font-size: 12.5px; }
.danger-zone { display: grid; gap: 12px; margin-top: 22px; padding: 16px; border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--danger) 4%, var(--surface)); }
.danger-zone strong { color: var(--danger); }
.danger-zone p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.danger-zone-form label { font-size: 13px; font-weight: 500; }
.danger-zone-row { display: flex; gap: 8px; }
.danger-zone-row input { flex: 1; min-width: 0; }
.row-actions { display: inline-flex; align-items: center; gap: 6px; }
.row-actions form { margin: 0; }
.btn-icon-danger, button.btn-icon-danger { display: grid; width: 32px; height: 32px; min-height: 32px; padding: 0; place-items: center; border: 1px solid var(--line-strong); background: var(--surface); color: var(--muted); }
.btn-icon-danger:hover, button.btn-icon-danger:hover { border-color: var(--danger); background: var(--accent-soft); color: var(--danger); }
.btn-icon-danger svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.user-manage-panel .table-wrap { margin-top: 2px; }

@media (max-width: 1100px) {
    .user-filter-bar { grid-template-columns: 1fr 1fr 1fr; }
    .user-filter-search { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
    .user-filter-bar { grid-template-columns: 1fr 1fr; }
    .user-list-meta .muted { display: none; }
    .user-manage-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .user-manage-stats > div:nth-child(3) { border-left: 0; }
    .user-manage-stats > div:nth-child(n + 3) { border-top: 1px solid var(--line); }
    .user-form-grid { grid-template-columns: 1fr; }
    .user-manage-head, .user-manage-tabs, .user-manage-body { padding-inline: 16px; }
    .user-manage-stats, .user-manage-dialog > .alert { margin-inline: 16px; }
    #user-panel-profile .user-manage-actions { margin-inline: -16px; padding-inline: 16px; }
    .user-manage-tabs { overflow-x: auto; }
    .danger-zone-row { flex-direction: column; }
}

/* Security logs: overview & board ----------------------------------------- */
a.security-alert-banner { text-decoration: none; }
a.security-alert-banner:hover { border-color: var(--danger); text-decoration: none; }
.security-overview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.security-tile { display: grid; gap: 2px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); color: var(--text); text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.security-tile:hover { border-color: var(--line-strong); text-decoration: none; }
.security-tile span { color: var(--muted); font-size: 12.5px; font-weight: 500; }
.security-tile strong { margin: 4px 0 2px; font-size: 26px; font-weight: 650; letter-spacing: -.03em; }
.security-tile small { color: var(--muted); font-size: 12px; }
.security-tile-danger { box-shadow: inset 3px 0 0 var(--danger), var(--shadow); }
.security-tile-danger strong { color: var(--danger); }
.security-tile-ok { box-shadow: inset 3px 0 0 var(--ok), var(--shadow); }
.security-tile-ok strong { color: var(--ok); }
.security-tile-warn { box-shadow: inset 3px 0 0 var(--warn), var(--shadow); }
.security-tile-warn strong { color: var(--warn); }

.security-board.card { padding: 0; overflow: hidden; }
.security-tabs { display: flex; gap: 2px; padding: 0 16px; overflow-x: auto; border-bottom: 1px solid var(--line); }
.security-tab { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 12px; color: var(--muted); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.security-tab:hover { color: var(--text); text-decoration: none; }
.security-tab span { min-width: 22px; padding: 0 7px; border-radius: 999px; background: var(--surface-soft); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); font-size: 12px; line-height: 1.6; text-align: center; }
.security-tab.is-active { color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
.security-tab.is-active span { background: var(--accent-soft); box-shadow: none; color: var(--danger); }
.security-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.security-filters label { margin: 0; }
.security-filters .user-filter-search { flex: 1 1 260px; }
.security-filters select { min-height: 38px; padding-block: 6px; font-size: 13.5px; }
.security-date { display: inline-flex; align-items: center; gap: 0; min-height: 38px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); }
.security-date span { padding: 0 8px 0 10px; color: var(--muted); font-size: 12.5px; font-weight: 500; }
.security-date input[type="date"] { width: 138px; min-height: 36px; padding: 4px 8px 4px 0; border: 0; background: transparent; box-shadow: none; font-size: 13px; }
.security-date input[type="date"]:focus { box-shadow: none; }
.security-date:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.security-list-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.security-list-meta .muted { font-size: 12.5px; }
.segmented { display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; background: var(--surface-soft); box-shadow: inset 0 0 0 1px var(--line); }
.segmented a { padding: 4px 12px; border-radius: 6px; color: var(--muted); font-size: 13px; font-weight: 600; text-decoration: none; }
.segmented a:hover { color: var(--text); text-decoration: none; }
.segmented a.is-active { background: var(--surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .08), inset 0 0 0 1px var(--line); color: var(--text); }
.security-board .table-wrap { border: 0; border-radius: 0; }
.security-board .empty-state { padding-block: 44px; }
.security-table td { padding-block: 11px; }
.security-table th:first-child, .security-table td:first-child { padding-left: 16px; }
.security-table th:last-child, .security-table td:last-child { padding-right: 12px; }
.security-table td small.muted { display: block; margin-top: 3px; }
.security-row[data-report-href] { cursor: pointer; }
.security-row.is-selected td { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.security-row.is-current td { background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }
.security-row.is-current td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.security-row.is-loading { opacity: .6; cursor: progress; }
.security-row.is-open .report-title { font-weight: 650; }
.report-summary { display: flex; align-items: flex-start; gap: 11px; min-width: 260px; max-width: 520px; }
.report-summary > div { min-width: 0; }
.report-type-icon { display: grid; width: 32px; height: 32px; flex: 0 0 32px; place-items: center; border-radius: 9px; font-size: 15px; font-weight: 800; }
.report-type-lost_id { background: var(--warn-soft); color: var(--warn); }
.report-type-unauthorized_scan { background: var(--accent-soft); color: var(--danger); }
.report-type-icon-lg { width: 52px; height: 52px; flex-basis: 52px; border-radius: 14px; font-size: 22px; }
.report-title { color: var(--text); font-weight: 600; text-decoration: none; }
.report-title:hover { color: var(--accent); text-decoration: none; }
.report-title .muted { font-size: 12.5px; font-weight: 400; }
.report-excerpt { display: -webkit-box; margin: 2px 0 0; overflow: hidden; color: var(--muted); font-size: 13px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
.user-identity-sm { min-width: 170px; gap: 9px; }
.user-identity-sm .user-avatar { width: 30px; height: 30px; flex-basis: 30px; font-size: 11px; }
.user-identity-sm strong { font-size: 13.5px; font-weight: 500; }
.row-chevron { display: grid; width: 30px; height: 30px; place-items: center; border-radius: var(--radius-sm); color: var(--muted); }
.row-chevron:hover { background: var(--surface-soft); color: var(--text); }
.row-chevron svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Security logs: report detail sheet ---------------------------------------
   One column that reads top to bottom: who reported what, the key facts, any
   warning, a note field, and a fixed action bar. */
.report-sheet { display: none; width: min(640px, calc(100vw - 32px)); max-width: none; max-height: min(90vh, 860px); padding: 0; overflow: hidden; flex-direction: column; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); }
.report-sheet[open] { display: flex; animation: dialog-in .18s ease-out; }
.report-sheet::backdrop { background: rgba(20, 18, 22, .5); backdrop-filter: blur(2px); }
.report-sheet:focus { outline: none; }
@media (prefers-reduced-motion: reduce) { .report-sheet[open] { animation: none; } }
.report-sheet-head { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.report-sheet-head .report-type-icon { width: 42px; height: 42px; flex-basis: 42px; border-radius: 12px; font-size: 18px; }
.report-sheet-title { min-width: 0; flex: 1; }
.report-sheet-title h2 { margin: 0; font-size: 18px; }
.report-sheet-title h2 span { color: var(--muted); font-size: 14px; font-weight: 500; }
.report-sheet-title p { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.report-sheet-body { display: grid; flex: 1; min-height: 0; gap: 18px; overflow-y: auto; padding: 20px; }
.report-sheet-body > .alert { margin: 0; }
.report-resolved-line { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--ok-soft); color: var(--ok); font-size: 13.5px; }
.report-resolved-line svg { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.report-message { display: flex; align-items: flex-start; gap: 12px; }
.report-message-main { display: grid; min-width: 0; flex: 1; gap: 6px; }
.report-message-meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; font-size: 13px; }
.report-message-meta strong { font-size: 14.5px; }
.report-message-meta span { color: var(--muted); }
.report-message-meta a { margin-left: auto; font-size: 13px; font-weight: 600; }
.report-bubble { padding: 12px 14px; border-radius: 4px 14px 14px 14px; background: var(--surface-soft); box-shadow: inset 0 0 0 1px var(--line); font-size: 14.5px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.report-message-note { margin: 0; color: var(--muted); font-size: 12.5px; }
.user-avatar-md { width: 40px; height: 40px; flex-basis: 40px; font-size: 13.5px; }

.report-facts { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0; padding: 14px 0 0 52px; border-top: 1px solid var(--line); }
.report-facts > div { min-width: 0; }
.report-facts dt { color: var(--muted); font-size: 12px; }
.report-facts dd { margin: 3px 0 0; font-size: 14px; font-weight: 500; }

.report-callout { margin: 0; border-radius: 12px; background: var(--surface-soft); box-shadow: inset 0 0 0 1px var(--line); font-size: 13.5px; }
.report-callout summary, p.report-callout { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.report-callout summary { cursor: pointer; list-style: none; }
.report-callout summary::-webkit-details-marker { display: none; }
.report-callout summary > span:not([class]) { display: grid; min-width: 0; flex: 1; gap: 2px; }
.report-callout small { color: var(--muted); font-size: 12.5px; }
.report-callout-icon { display: grid; width: 28px; height: 28px; flex: 0 0 28px; place-items: center; border-radius: 50%; background: var(--surface); font-size: 14px; font-weight: 800; }
.report-callout-toggle { color: var(--muted); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.report-callout[open] .report-callout-toggle { font-size: 0; }
.report-callout[open] .report-callout-toggle::after { content: "Hide"; font-size: 12.5px; }
.report-callout .mini-list { padding: 0 14px 10px; }
.report-callout .mini-list li:first-child { padding-top: 8px; border-top: 1px solid var(--line); }
.report-callout-danger { background: var(--accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 25%, transparent); }
.report-callout-danger strong, .report-callout-danger .report-callout-icon { color: var(--danger); }
.report-callout-calm { color: var(--muted); }
.report-callout-calm .report-callout-icon { color: var(--ok); }
.mini-list { display: grid; margin: 0; padding: 0; list-style: none; }
.mini-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; }
.mini-list time { color: var(--muted); font-size: 12.5px; white-space: nowrap; }

.report-note-form, .report-edit-panel { display: grid; gap: 6px; margin: 0; }
.report-note-form label, .report-edit-panel label { margin: 0; }
.report-note-form textarea { min-height: 64px; font-size: 14px; }
.report-edit-panel { padding: 14px; border-radius: 12px; background: var(--surface-soft); box-shadow: inset 0 0 0 1px var(--line); }
.report-edit-panel[hidden] { display: none; }
.report-section-label { margin: 0 0 4px; font-size: 14px; font-weight: 650; }
.report-edit-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-top: 4px; }
.report-edit-row label { margin-bottom: 5px; }
.report-edit-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }

.report-history summary { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer; }
.report-history summary span { padding: 0 7px; border-radius: 999px; background: var(--surface-soft); box-shadow: inset 0 0 0 1px var(--line); font-size: 11.5px; }
.report-history[open] summary { margin-bottom: 12px; }
.timeline { position: relative; display: grid; gap: 14px; margin: 0; padding: 0 0 0 4px; list-style: none; }
.timeline::before { position: absolute; top: 6px; bottom: 6px; left: 8px; width: 1px; background: var(--line); content: ""; }
.timeline li { position: relative; display: flex; gap: 12px; }
.timeline-dot { position: relative; z-index: 1; width: 9px; height: 9px; flex: 0 0 9px; margin-top: 5px; border-radius: 50%; background: var(--line-strong); box-shadow: 0 0 0 3px var(--surface); }
.timeline li:first-child .timeline-dot { background: var(--accent); }
.timeline-dot-start { background: var(--muted); }
.timeline li > div { display: grid; gap: 1px; }
.timeline strong { font-size: 13.5px; font-weight: 600; }
.timeline small { color: var(--muted); font-size: 12px; }

.report-sheet-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--line); background: var(--surface); }
.report-sheet-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.report-sheet-actions .report-primary-close { background: var(--ok); }
.report-sheet-actions .report-primary-close:hover { background: color-mix(in srgb, var(--ok) 85%, #000); }
body[data-theme="dark"] .report-sheet-actions .report-primary-close { background: #2f7d5b; }
.btn-link-danger, button.btn-link-danger { min-height: 34px; padding: 6px 10px; border: 0; background: transparent; color: var(--danger); font-size: 13.5px; font-weight: 600; }
.btn-link-danger:hover, button.btn-link-danger:hover { background: var(--accent-soft); color: var(--danger); }

@media (max-width: 1000px) {
    .security-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .report-sheet-head, .report-sheet-body { padding-inline: 16px; }
    .report-facts { padding-left: 0; }
    .report-sheet-foot { flex-direction: column-reverse; align-items: stretch; padding-inline: 16px; }
    .report-sheet-actions > * { flex: 1 1 auto; }
}
@media (max-width: 560px) {
    .security-overview { grid-template-columns: 1fr 1fr; gap: 10px; }
    .security-tile { padding: 12px 14px; }
    .security-tile strong { font-size: 22px; }
    .security-date { flex: 1 1 100%; }
    .security-date input[type="date"] { width: 100%; }
}

/* Campus alerts: composer ---------------------------------------------------
   Type colors: announcement = neutral, event = info, security = warn, emergency = danger. */
.alert-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 360px; align-items: start; gap: 16px; }
.alert-compose.card { display: grid; gap: 0; padding: 0; }
.compose-step { padding: 20px 22px; }
.compose-step + .compose-step { border-top: 1px solid var(--line); }
.compose-step h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 15px; }
.compose-step h3 span { display: grid; width: 24px; height: 24px; flex: 0 0 24px; place-items: center; border-radius: 50%; background: var(--text); color: var(--surface); font-size: 12px; }
.compose-label { margin: 0 0 8px; color: var(--muted); font-size: 12.5px; font-weight: 600; }

.alert-type-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.alert-type-option { position: relative; display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.alert-type-option:hover { border-color: var(--line-strong); }
.alert-type-option input { position: absolute; opacity: 0; pointer-events: none; }
.alert-type-option > span:last-child { display: grid; min-width: 0; gap: 1px; }
.alert-type-option strong { font-size: 14px; }
.alert-type-option small { color: var(--muted); font-size: 12px; font-weight: 400; }
.alert-type-option:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.alert-type-option:has(input:checked) { --tone: var(--text); border-color: var(--tone); box-shadow: inset 0 0 0 1px var(--tone); background: color-mix(in srgb, var(--tone) 5%, var(--surface)); }
.alert-type-event:has(input:checked) { --tone: var(--info); }
.alert-type-security:has(input:checked) { --tone: var(--warn); }
.alert-type-emergency:has(input:checked) { --tone: var(--danger); }
.alert-type-icon { display: grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; border-radius: 10px; background: var(--surface-soft); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); font-size: 16px; font-weight: 800; }
.alert-type-event .alert-type-icon, .alert-icon-event { background: var(--info-soft); box-shadow: none; color: var(--info); }
.alert-type-security .alert-type-icon, .alert-icon-security { background: var(--warn-soft); box-shadow: none; color: var(--warn); }
.alert-type-emergency .alert-type-icon, .alert-icon-emergency { background: var(--accent-soft); box-shadow: none; color: var(--danger); }
.report-sheet-head .alert-type-icon { width: 42px; height: 42px; flex-basis: 42px; border-radius: 12px; }

.audience-group + .audience-group { margin-top: 14px; }
.choice-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.choice-pill { margin: 0; cursor: pointer; }
.choice-pill input { position: absolute; opacity: 0; pointer-events: none; }
.choice-pill > span { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 7px 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--text); font-size: 13.5px; font-weight: 500; transition: border-color .15s ease, background .15s ease; }
.choice-pill:hover > span { border-color: var(--muted); }
.choice-pill b { min-width: 22px; padding: 0 7px; border-radius: 999px; background: var(--surface-soft); color: var(--muted); font-size: 12px; text-align: center; }
.choice-pill input:checked + span { border-color: var(--text); background: var(--text); color: var(--surface); }
.choice-pill input:checked + span b { background: color-mix(in srgb, var(--surface) 20%, transparent); color: var(--surface); }
.choice-pill input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.audience-note { margin: 14px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }

.template-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 16px; }
.template-row > span { margin-right: 4px; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.template-chip, button.template-chip { min-height: 30px; padding: 4px 11px; border: 1px dashed var(--line-strong); border-radius: 999px; background: transparent; color: var(--text); font-size: 12.5px; font-weight: 500; }
.template-chip:hover, button.template-chip:hover { border-style: solid; border-color: var(--muted); background: var(--surface-soft); }
.compose-field + .compose-field { margin-top: 14px; }
.compose-field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 5px; }
.compose-field-head label { margin: 0; }
.char-count { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.compose-field textarea { min-height: 170px; }

/* Campus alerts: preview & send panel */
.alert-side { position: sticky; top: calc(76px + env(safe-area-inset-top, 0px)); display: grid; gap: 16px; }
.alert-preview.card { padding: 16px; }
.email-preview { --tone: var(--line-strong); overflow: hidden; border-radius: 10px; background: var(--surface-soft); box-shadow: inset 0 0 0 1px var(--line), inset 0 3px 0 var(--tone); }
.alert-preview[data-type="event"] .email-preview { --tone: var(--info); }
.alert-preview[data-type="security"] .email-preview { --tone: var(--warn); }
.alert-preview[data-type="emergency"] .email-preview { --tone: var(--danger); }
.email-preview-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 14px 14px 0; font-size: 12.5px; }
.email-preview-from { font-weight: 600; }
.email-preview-subject { margin: 8px 14px 0; font-size: 15px; font-weight: 650; line-height: 1.35; overflow-wrap: anywhere; }
.email-preview-body { max-height: 260px; margin: 10px 14px 0; overflow: auto; font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.email-preview .is-placeholder { color: var(--muted); font-weight: 400; font-style: italic; }
.email-preview-footer { margin: 14px 0 0; padding: 10px 14px 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11.5px; line-height: 1.45; }
.alert-send.card { display: grid; gap: 10px; padding: 18px; }
.alert-send-total { display: flex; align-items: baseline; gap: 8px; }
.alert-send-total strong { font-size: 30px; font-weight: 650; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.alert-send-total span { color: var(--muted); font-size: 13.5px; }
.alert-send-hint { margin: 0; color: var(--muted); font-size: 13px; }
.alert-send-hint.is-blocked { color: var(--warn); }
.alert-send-button, button.alert-send-button { width: 100%; min-height: 44px; font-size: 14.5px; }
button.is-emergency { background: var(--danger); }
button.is-emergency:hover { background: color-mix(in srgb, var(--danger) 85%, #000); }

/* Campus alerts: history & dialogs */
.alert-history { margin-top: 16px; }
.alert-history .table-wrap { margin-top: 2px; }
.alert-history-row { cursor: pointer; }
.alert-history-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.alert-history-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.alert-history-table .report-excerpt { max-width: 520px; -webkit-line-clamp: 1; }
.alert-history-table td small { display: block; margin-top: 3px; }
.alert-badge { display: inline-flex; padding: 2px 8px; border-radius: 999px; background: var(--surface-soft); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.alert-badge-event { background: var(--info-soft); box-shadow: none; color: var(--info); }
.alert-badge-security { background: var(--warn-soft); box-shadow: none; color: var(--warn); }
.alert-badge-emergency { background: var(--accent-soft); box-shadow: none; color: var(--danger); }
.delivery-meter { width: 120px; height: 6px; overflow: hidden; border-radius: 999px; background: var(--surface-soft); box-shadow: inset 0 0 0 1px var(--line); }
.delivery-meter span { display: block; height: 100%; border-radius: inherit; background: var(--ok); }
.confirm-summary { display: grid; gap: 10px; margin: 0; }
.confirm-summary > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; }
.confirm-summary dt { color: var(--muted); font-size: 13px; }
.confirm-summary dd { margin: 0; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.report-facts-flush { padding: 0 0 14px; border-top: 0; border-bottom: 1px solid var(--line); }

@media (max-width: 1100px) {
    .alert-workspace { grid-template-columns: 1fr; }
    .alert-side { position: static; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}
@media (max-width: 560px) {
    .compose-step { padding: 16px; }
    .alert-type-options { grid-template-columns: 1fr; }
}
.alert-warn { border-color: color-mix(in srgb, var(--warn) 30%, transparent); background: var(--warn-soft); color: var(--warn); }
.alert-send-email { margin: -4px 0 0; color: var(--text); font-size: 13px; }
.delivery-line { display: block; font-size: 13.5px; font-weight: 500; white-space: nowrap; }

/* Notifications: tones shared by the bell and the Notifications page ------- */
.tone-info { --tone: var(--info); --tone-soft: var(--info-soft); }
.tone-ok { --tone: var(--ok); --tone-soft: var(--ok-soft); }
.tone-warn { --tone: var(--warn); --tone-soft: var(--warn-soft); }
.tone-danger { --tone: var(--danger); --tone-soft: var(--accent-soft); }

/* User bell items */
.user-notifications .notification-feed { padding: 4px 6px; }
.user-notification-item { position: relative; align-items: flex-start; gap: 10px; padding: 11px 26px 11px 8px; border-bottom: 1px solid var(--line); border-radius: 0; }
.user-notification-item:last-child { border-bottom: 0; }
.user-notification-item .notification-item-icon { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; background: var(--tone-soft); color: var(--tone); font-size: 13px; }
.user-notification-item .notification-item-copy { display: grid; min-width: 0; flex: 1; gap: 3px; }
.user-notification-item .notification-item-copy strong { overflow: visible; font-size: 13px; font-weight: 500; white-space: normal; }
.user-notification-item.is-unread .notification-item-copy strong { font-weight: 650; }
.user-notification-item .notification-item-copy small { overflow-wrap: anywhere; font-size: 12px; line-height: 1.4; white-space: normal; }
.user-notification-item time { color: var(--muted); font-size: 11.5px; }
.user-notification-item.is-unread { background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }
.unread-dot { position: absolute; top: 16px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
.user-notifications .notification-view-all { margin: 0; padding: 11px 14px; border-top: 1px solid var(--line); font-size: 13px; text-align: center; text-decoration: none; }
.user-notifications .notification-view-all:hover { background: var(--surface-soft); }
.user-notifications .notification-empty { padding: 18px 10px; font-size: 13px; line-height: 1.5; text-align: center; }

/* Notifications page */
.notice-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.notice-filters a { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text); font-size: 13.5px; font-weight: 500; text-decoration: none; }
.notice-filters a:hover { border-color: var(--line-strong); text-decoration: none; }
.notice-filters a span { min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--surface-soft); color: var(--muted); font-size: 11.5px; text-align: center; }
.notice-filters a.is-active { border-color: var(--text); background: var(--text); color: var(--surface); }
.notice-filters a.is-active span { background: color-mix(in srgb, var(--surface) 20%, transparent); color: var(--surface); }
.notice-group + .notice-group { margin-top: 20px; }
.notice-day { margin: 0 0 8px 2px; color: var(--muted); font-size: 12.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.notice-list.card { padding: 0; overflow: hidden; }
.notice-card { position: relative; display: flex; gap: 14px; padding: 16px 18px; }
.notice-card + .notice-card { border-top: 1px solid var(--line); }
.notice-card.is-unread { background: color-mix(in srgb, var(--accent) 3%, var(--surface)); box-shadow: inset 3px 0 0 var(--tone); }
.notice-icon { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border-radius: 50%; background: var(--tone-soft); color: var(--tone); font-size: 15px; font-weight: 800; }
.notice-main { display: grid; min-width: 0; flex: 1; gap: 4px; }
.notice-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--muted); font-size: 12.5px; }
.notice-meta > span:first-child { color: var(--tone); font-weight: 600; }
.notice-new { padding: 0 7px; border-radius: 999px; background: var(--primary); color: #fff; font-size: 11px; font-weight: 700; line-height: 1.6; }
.notice-card h4 { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.4; }
.notice-card.is-unread h4 { font-weight: 700; }
.notice-body { display: -webkit-box; margin: 2px 0 0; overflow: hidden; color: var(--text); font-size: 14px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.notice-body.is-expanded { display: block; }
.notice-more[hidden] { display: none; }
.notice-more, button.notice-more { justify-self: start; min-height: 0; padding: 0; border: 0; background: none; color: var(--accent); font-size: 13px; font-weight: 600; }
.notice-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 6px; }
.notice-actions form { margin: 0; }
.notice-link { font-size: 13px; font-weight: 600; text-decoration: none; }
.notice-action, button.notice-action { min-height: 0; padding: 2px 0; border: 0; background: none; color: var(--muted); font-size: 13px; font-weight: 500; }
.notice-action:hover, button.notice-action:hover { background: none; color: var(--text); text-decoration: underline; }
.notice-empty.card { display: grid; padding: 48px 20px; }
.notice-empty > span svg { width: 34px; height: 34px; fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.notice-limit { margin-top: 14px; text-align: center; }
@media (max-width: 560px) {
    .notice-card { gap: 10px; padding: 14px; }
    .notice-icon { width: 32px; height: 32px; flex-basis: 32px; }
}

/* RFID scanner: station ----------------------------------------------------
   Mode colors: auto = primary, entry = ok, exit = info. */
.scanner-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: stretch; gap: 16px; }
.scan-station.card { --mode: var(--primary); display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 20px 24px 24px; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); text-align: center; }
.scan-station[data-mode="entry"] { --mode: var(--ok); }
.scan-station[data-mode="exit"] { --mode: var(--info); }
.scan-station-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; width: 100%; margin-bottom: 18px; text-align: left; }
.scan-station .scanner-station-status { margin-left: 0; font-size: 12px; }
.scan-station-reader { color: var(--muted); font-size: 13px; }
.scan-station-reader strong { color: var(--text); font-weight: 600; }
.scan-settings-button, button.scan-settings-button { margin-left: auto; gap: 6px; }
.scan-settings-button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.scan-mode-switch { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface-soft); box-shadow: inset 0 0 0 1px var(--line); }
.scan-mode-switch button { display: inline-flex; align-items: center; gap: 7px; min-width: 96px; min-height: 40px; padding: 6px 16px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-size: 14px; font-weight: 600; justify-content: center; }
.scan-mode-switch button:hover { background: var(--surface); color: var(--text); }
.scan-mode-switch button span { font-size: 15px; }
.scan-mode-switch button.is-active { background: var(--mode); color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }
.scan-target { position: relative; display: grid; width: 96px; height: 96px; margin: 26px 0 14px; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--mode) 10%, var(--surface)); color: var(--mode); }
.scan-target svg { position: relative; z-index: 1; width: 42px; height: 42px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.scan-target-ring { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 color-mix(in srgb, var(--mode) 35%, transparent); animation: scan-pulse 2.2s ease-out infinite; }
@keyframes scan-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mode) 35%, transparent); } 100% { box-shadow: 0 0 0 22px transparent; } }
@media (prefers-reduced-motion: reduce) { .scan-target-ring { animation: none; } }
.scan-station-title { margin: 0; font-size: 20px; }
.scan-station-description { margin: 4px 0 18px; color: var(--muted); font-size: 14px; }
.scan-station .station-scan-form { display: grid; gap: 8px; width: min(100%, 460px); }
.scan-input-row { display: flex; gap: 8px; }
.scan-input-row input[type="text"] { flex: 1; min-width: 0; min-height: 48px; padding-inline: 14px; border-width: 1.5px; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 16px; letter-spacing: .03em; text-align: center; }
.scan-input-row input[type="text"]:focus { border-color: var(--mode); box-shadow: 0 0 0 4px color-mix(in srgb, var(--mode) 16%, transparent); }
.scan-input-row .scanner-submit, .station-scan-form .scan-input-row .scanner-submit { width: auto; flex: 0 0 auto; min-height: 48px; padding-inline: 18px; }
.scan-station .scanner-submit, .scan-station.scanner-station-entry .scanner-submit, .scan-station.scanner-station-exit .scanner-submit { background: var(--mode); }
.scan-station .scanner-submit:hover { background: color-mix(in srgb, var(--mode) 85%, #000); filter: none; }
.scan-input-hint { margin: 0; color: var(--muted); font-size: 12.5px; }

/* Reader settings dialog (reuses the report sheet shell) */
.scanner-settings-sheet .station-reader-config { display: grid; grid-template-columns: 1fr; align-items: start; gap: 16px; margin: 0; padding: 20px; border: 0; border-radius: 0; background: none; text-align: left; }
.scanner-settings-sheet .station-reader-config > div { display: grid; gap: 5px; }
.scanner-settings-sheet .station-reader-config label { margin: 0; color: var(--text); font-size: 13px; font-weight: 600; }
.scanner-settings-sheet .station-reader-config small { grid-column: auto; padding: 0; border: 0; background: none; font-size: 12px; line-height: 1.45; }
.reader-serial { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: 10px; }
.reader-serial legend { padding: 0 6px; color: var(--muted); font-size: 12px; font-weight: 600; }
.reader-serial-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 10px; }
.reader-serial-row > div { display: grid; gap: 5px; }
.reader-serial-actions { display: flex; gap: 8px; }

/* Scan result panel */
.scan-result.card { display: flex; flex-direction: column; min-width: 0; padding: 0; overflow: hidden; border: 1px solid var(--line); }
.scan-result.card[class*="tone-"] { border-color: color-mix(in srgb, var(--tone) 45%, var(--line)); }
.scan-result-banner { display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: var(--tone); color: #fff; }
.scan-result-banner > div { display: grid; gap: 2px; }
.scan-result-banner strong { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.scan-result-banner span:not(.scan-result-icon) { font-size: 14px; opacity: .92; }
.scan-result-icon { display: grid; width: 46px; height: 46px; flex: 0 0 46px; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .2); font-size: 22px; font-weight: 800; }
body[data-theme="dark"] .scan-result-banner { color: #141317; }
body[data-theme="dark"] .scan-result-icon { background: rgba(0, 0, 0, .15); }
.scan-result .scan-result-person { display: flex; align-items: center; gap: 16px; padding: 20px; }
.scan-result .scan-result-person h3 { margin: 0; font-size: 20px; }
.scan-result .scan-result-person p { margin: 3px 0 0; color: var(--muted); font-size: 13.5px; }
.scan-result-avatar { width: 76px; height: 76px; flex-basis: 76px; font-size: 24px; box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px color-mix(in srgb, var(--tone, var(--line)) 50%, transparent); }
.user-avatar-unknown { background: var(--surface-soft); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); }
.scan-result-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: auto 0 0; border-top: 1px solid var(--line); }
.scan-result-facts > div { min-width: 0; padding: 12px 16px; }
.scan-result-facts > div + div { border-left: 1px solid var(--line); }
.scan-result-facts dt { color: var(--muted); font-size: 12px; }
.scan-result-facts dd { margin: 3px 0 0; overflow: hidden; font-size: 13.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.scan-result-idle .alert { margin: 16px 16px 0; }
.scan-result-waiting { display: grid; flex: 1; place-items: center; align-content: center; gap: 6px; padding: 40px 24px; text-align: center; }
.scan-result-waiting .scan-result-icon { width: 64px; height: 64px; margin-bottom: 6px; background: var(--surface-soft); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); font-size: 28px; }
.scan-result-waiting strong { font-size: 17px; }
.scan-result-waiting p { max-width: 300px; margin: 0; color: var(--muted); font-size: 13.5px; }

/* Today strip and recent scans */
.scan-today { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }
.scan-today-item { display: grid; gap: 2px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--text); text-decoration: none; }
a.scan-today-item:hover { border-color: var(--line-strong); text-decoration: none; }
.scan-today-item span { color: var(--muted); font-size: 12.5px; }
.scan-today-item strong { font-size: 22px; font-weight: 650; }
.scan-today-item[class*="tone-"] strong { color: var(--tone); }
.scan-recent-list { display: grid; margin: 0; padding: 0; list-style: none; }
.scan-recent-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 130px; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.scan-recent-list li:first-child { border-top: 0; padding-top: 0; }
.scan-recent-who { display: grid; min-width: 0; gap: 2px; }
.scan-recent-who strong { font-size: 14px; font-weight: 600; }
.scan-recent-who small { overflow: hidden; color: var(--muted); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.scan-recent-who .rfid-code { padding: 0 5px; font-size: 11.5px; }
.scan-recent-list time { color: var(--muted); font-size: 12.5px; text-align: right; white-space: nowrap; }

/* Scan history ------------------------------------------------------------- */
.listen-control { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.listen-toggle, button.listen-toggle { gap: 8px; min-height: 30px; padding: 4px 10px; border: 0; border-radius: 7px; background: var(--ok-soft); color: var(--ok); font-size: 12.5px; font-weight: 600; }
.listen-toggle:hover, button.listen-toggle:hover { background: var(--ok-soft); color: var(--ok); }
.listen-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.listen-toggle.is-active .listen-dot::after { position: absolute; inset: -3px; border-radius: 50%; background: currentColor; content: ""; opacity: .3; animation: live-pulse 2s ease-out infinite; }
.listen-control.is-off .listen-toggle { background: var(--surface-soft); color: var(--muted); }
.listen-control.is-off .listen-modes { opacity: .45; pointer-events: none; }
.listen-modes { display: inline-flex; gap: 2px; }
.listen-modes button { min-height: 30px; padding: 4px 9px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.listen-modes button:hover { background: var(--surface-soft); color: var(--text); }
.listen-modes button.is-selected { background: var(--text); color: var(--surface); }
.security-tile.is-current { border-color: var(--text); }
.latest-gate-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.latest-gate.card { display: flex; flex-direction: column; min-width: 0; padding: 0; overflow: hidden; border-top: 3px solid var(--tone); }
.latest-gate-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px 0; }
.latest-gate-head h2 { margin: 0; font-size: 15px; }
.latest-gate-arrow { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 8px; background: var(--tone-soft); color: var(--tone); font-size: 15px; font-weight: 700; }
.latest-gate-count { margin-left: auto; padding: 3px 10px; border-radius: 999px; background: var(--tone-soft); color: var(--tone); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.latest-gate-count:hover { text-decoration: none; filter: brightness(.96); }
.latest-gate-person { display: flex; align-items: center; gap: 14px; padding: 14px 18px; }
.latest-gate-avatar { width: 56px; height: 56px; flex-basis: 56px; font-size: 18px; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px color-mix(in srgb, var(--tone) 45%, transparent); }
.latest-gate-identity { display: grid; min-width: 0; flex: 1; gap: 2px; }
.latest-gate-identity .user-name-link, .latest-gate-identity strong { overflow: hidden; font-size: 17px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.latest-gate-identity span { overflow: hidden; color: var(--muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.latest-gate-when { display: grid; justify-items: end; gap: 1px; text-align: right; }
.latest-gate-when strong { color: var(--tone); font-size: 14px; white-space: nowrap; }
.latest-gate-when span { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.latest-gate-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 18px; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.latest-gate-facts > div { min-width: 0; }
.latest-gate-facts > div + div { padding-left: 12px; border-left: 1px solid var(--line); }
.latest-gate-facts dt { color: var(--muted); font-size: 11.5px; }
.latest-gate-facts dd { margin: 2px 0 0; overflow: hidden; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.latest-gate-label { margin: 12px 18px 4px; color: var(--muted); font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.latest-gate-list { display: grid; margin: 0; padding: 0 18px 12px; list-style: none; }
.latest-gate-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 6px 0; font-size: 13px; }
.latest-gate-list .user-avatar { width: 26px; height: 26px; flex-basis: 26px; font-size: 10px; }
.latest-gate-list-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.latest-gate-list-name .user-name-link { font-weight: 500; }
.latest-gate-list-reader { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.latest-gate-list time { min-width: 72px; color: var(--muted); font-size: 12.5px; text-align: right; white-space: nowrap; }
.latest-gate-empty { margin: 0; padding: 28px 18px; color: var(--muted); font-size: 13.5px; text-align: center; }
@media (max-width: 900px) { .latest-gate-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .latest-gate-list-reader { display: none; } .latest-gate-list li { grid-template-columns: auto minmax(0, 1fr) auto; } }
.scan-table .day-row th { padding: 9px 16px; border-bottom: 1px solid var(--line); background: var(--surface-soft); color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.scan-table .day-row:hover th { background: var(--surface-soft); }
.scan-table td small.muted { display: block; margin-top: 2px; font-size: 12px; }
.scan-row-flagged td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.scan-row-unrecognized td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.scan-row-link { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 600; }

@media (max-width: 1100px) {
    .scan-today { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .scanner-layout { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
    .scan-today { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .scan-result-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .scan-result-facts > div:nth-child(3) { border-left: 0; }
    .scan-result-facts > div:nth-child(n + 3) { border-top: 1px solid var(--line); }
    .scan-recent-list li { grid-template-columns: auto minmax(0, 1fr) auto; }
    .scan-recent-list time { grid-column: 2 / -1; text-align: left; }
    .scan-mode-switch button { min-width: 0; padding-inline: 12px; }
    .scan-input-row { flex-direction: column; }
    .station-scan-form .scan-input-row .scanner-submit { width: 100%; }
    .listen-control { flex-wrap: wrap; }
}

/* Map Manager (geofence editor) -------------------------------------------- */
.geo-save-state { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
.geo-save-state::before { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); content: ""; }
.geo-save-state.is-dirty { color: var(--warn); font-weight: 600; }
.geo-save-state.is-dirty::before { background: var(--warn); }
.geo-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); align-items: start; gap: 16px; }
.geo-panel.card { position: sticky; top: calc(76px + env(safe-area-inset-top, 0px)); display: grid; gap: 0; padding: 0; overflow: hidden; }
.geo-search { display: flex; gap: 6px; padding: 14px; border-bottom: 1px solid var(--line); }
.geo-search input[type="search"] { min-height: 36px; font-size: 13.5px; }
.geo-search-results { display: grid; max-height: 220px; margin: 0; padding: 4px 6px; overflow: auto; border-bottom: 1px solid var(--line); list-style: none; }
.geo-search-results[hidden] { display: none; }
.geo-search-results button, button.geo-search-results-item { width: 100%; min-height: 0; padding: 8px; border: 0; border-radius: 6px; background: none; color: var(--text); font-size: 12.5px; font-weight: 500; line-height: 1.4; text-align: left; justify-content: flex-start; }
.geo-search-results button:hover { background: var(--surface-soft); }
.geo-search-note { padding: 8px; color: var(--muted); font-size: 12.5px; }
.geo-step { display: grid; gap: 8px; padding: 14px 16px; }
.geo-step + .geo-step { border-top: 1px solid var(--line); }
.geo-step-head { display: flex; align-items: center; gap: 10px; }
.geo-step-head h3 { margin: 0; font-size: 14px; }
.geo-step-status { margin: 1px 0 0; color: var(--muted); font-size: 12.5px; }
.geo-step-status.is-warning { color: var(--warn); font-weight: 600; }
#test-status[data-result="inside"] { color: var(--ok); font-weight: 600; }
#test-status[data-result="outside"] { color: var(--danger); font-weight: 600; }
.geo-step-help { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.geo-step-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.geo-step-actions .btn-icon-danger { width: 32px; height: 32px; min-height: 32px; margin-left: auto; }
.geo-swatch { display: grid; width: 28px; height: 28px; flex: 0 0 28px; place-items: center; border-radius: 8px; color: var(--muted); font-size: 13px; font-weight: 800; }
.geo-swatch-fence { border: 2.5px solid #b85f66; background: rgba(184, 95, 102, .18); }
.geo-swatch-area { border: 2px dashed #3b82a0; background: rgba(59, 130, 160, .06); }
.geo-swatch-path { background: linear-gradient(135deg, transparent 42%, #1677ff 42%, #1677ff 58%, transparent 58%), var(--surface-soft); box-shadow: inset 0 0 0 1px var(--line); }
.geo-swatch-details { border: 1.5px solid #e98b35; background: rgba(243, 183, 110, .48); }
.geo-swatch-test { background: var(--surface-soft); box-shadow: inset 0 0 0 1px var(--line); }
.geo-test { background: var(--surface-soft); }
.geo-remove { margin: 0; padding: 10px 16px 14px; border-top: 1px solid var(--line); text-align: center; }
.geo-map-card.card { display: flex; flex-direction: column; min-width: 0; padding: 0; overflow: hidden; }
.geo-map-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.geo-map-message { flex: 1; min-width: 200px; color: var(--text); font-size: 13.5px; }
.geo-map-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.campus-map.geo-map { height: calc(100vh - 230px); min-height: 460px; border: 0; border-radius: 0; }
.geo-map.is-testing { cursor: crosshair; }
.geo-map-note { margin: 0; padding: 8px 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.geo-map .leaflet-tooltip { padding: 4px 8px; border: 0; border-radius: 6px; box-shadow: var(--shadow-lg); font-size: 12.5px; font-weight: 600; }
@media (max-width: 1000px) {
    .geo-layout { grid-template-columns: 1fr; }
    .geo-panel.card { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
    .geo-search, .geo-search-results, .geo-remove { grid-column: 1 / -1; }
    .geo-step + .geo-step { border-top: 0; }
    .geo-step { border-bottom: 1px solid var(--line); }
    .campus-map.geo-map { height: 60vh; }
}

/* Notification bell (admin + user) ----------------------------------------- */
.bell { position: relative; z-index: 30; flex: 0 0 auto; }
.bell.is-open .notification-bell { border-color: var(--line-strong); background: var(--surface-soft); color: var(--text); }
.notification-count[hidden] { display: none; }
.bell-panel { position: absolute; top: calc(100% + 10px); right: 0; display: flex; width: min(400px, calc(100vw - 24px)); max-height: min(78vh, 620px); flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); transform-origin: top right; animation: bell-in .16s ease-out; }
.bell-panel[hidden] { display: none; }
@keyframes bell-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bell-panel { animation: none; } }
.bell-head { display: flex; align-items: center; gap: 8px; padding: 14px 14px 12px 16px; }
.bell-title { display: flex; align-items: center; gap: 8px; margin-right: auto; }
.bell-title strong { font-size: 15px; }
.bell-chip { padding: 1px 8px; border-radius: 999px; background: var(--primary); color: #fff; font-size: 11.5px; font-weight: 700; line-height: 1.6; }
.bell-chip[hidden], .bell-text-button[hidden] { display: none; }
.bell-text-button, button.bell-text-button { min-height: 30px; padding: 4px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--accent); font-size: 12.5px; font-weight: 600; }
.bell-text-button:hover, button.bell-text-button:hover { background: var(--accent-soft); color: var(--accent); }
.bell-close, button.bell-close { display: grid; width: 30px; height: 30px; min-height: 30px; padding: 0; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--muted); }
.bell-close:hover, button.bell-close:hover { background: var(--surface-soft); color: var(--text); }
.bell-close svg, .bell-item-action svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bell-filters { display: flex; gap: 6px; padding: 0 14px 10px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.bell-filters button { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; min-height: 28px; padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 12.5px; font-weight: 600; }
.bell-filters button:hover { background: var(--surface-soft); color: var(--text); }
.bell-filters button.is-active { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent-soft); color: var(--accent); }
.bell-filters span:empty { display: none; }
.bell-filters span { min-width: 18px; padding: 0 6px; border-radius: 999px; background: var(--surface-soft); color: var(--muted); font-size: 11px; font-weight: 700; line-height: 1.6; text-align: center; }
.bell-filters button.is-active span { background: var(--accent); color: #fff; }
body[data-theme="dark"] .bell-filters button.is-active span { color: #141317; }
.bell[data-portal="user"] .bell-head { border-bottom: 1px solid var(--line); }
.bell-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.bell-section { margin: 0; padding: 10px 16px 4px; color: var(--muted); font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.bell-item { position: relative; transition: opacity .2s ease, max-height .25s ease, background .15s ease; max-height: 160px; }
.bell-item + .bell-item { border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.bell-item:hover { background: var(--surface-soft); }
.bell-item.is-unread { background: color-mix(in srgb, var(--tone, var(--accent)) 6%, var(--surface)); }
.bell-item.is-unread::before { position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: var(--tone, var(--accent)); content: ""; }
.bell-item.is-leaving { max-height: 0; overflow: hidden; opacity: 0; }
.bell-item.is-reading { opacity: .6; }
.bell-item-link { display: flex; align-items: flex-start; gap: 12px; padding: 12px 44px 12px 16px; color: var(--text); text-decoration: none; }
.bell-item-link:hover { text-decoration: none; }
.bell-item-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.bell-icon { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 50%; background: var(--tone-soft, var(--surface-soft)); color: var(--tone, var(--muted)); }
.bell-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.bell-copy { display: grid; min-width: 0; gap: 2px; }
.bell-copy strong { display: -webkit-box; overflow: hidden; font-size: 13.5px; font-weight: 500; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.bell-item.is-unread .bell-copy strong { font-weight: 650; }
.bell-detail { display: -webkit-box; overflow: hidden; color: var(--muted); font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.bell-copy time { margin-top: 2px; color: var(--muted); font-size: 12px; }
.bell-item.is-unread .bell-copy time { color: var(--tone, var(--accent)); font-weight: 600; }
.bell-item-action, button.bell-item-action { position: absolute; top: 10px; right: 10px; display: grid; width: 28px; height: 28px; min-height: 28px; padding: 0; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--muted); opacity: 0; transition: opacity .15s ease; }
.bell-item:hover .bell-item-action, .bell-item:focus-within .bell-item-action { opacity: 1; }
.bell-item-action:hover, button.bell-item-action:hover { border-color: var(--line-strong); background: var(--surface); color: var(--text); }
@media (hover: none) { .bell-item-action { opacity: 1; } }
.bell-empty { display: grid; justify-items: center; gap: 4px; padding: 40px 24px; text-align: center; }
.bell-empty > span { display: grid; width: 48px; height: 48px; margin-bottom: 6px; place-items: center; border-radius: 50%; background: var(--ok-soft); color: var(--ok); }
.bell-empty svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bell-empty strong { font-size: 14.5px; }
.bell-empty p { max-width: 260px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.bell-filter-empty, .bell-error { margin: 0; padding: 28px 16px; color: var(--muted); font-size: 13px; text-align: center; }
.bell-error button { min-height: 0; padding: 0; border: 0; background: none; color: var(--accent); font-size: 13px; text-decoration: underline; }
.bell-skeleton { display: flex; gap: 12px; padding: 14px 16px; }
.bell-skeleton > span { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; }
.bell-skeleton > div { display: grid; flex: 1; gap: 8px; padding-top: 3px; }
.bell-skeleton i { display: block; height: 10px; border-radius: 5px; }
.bell-skeleton i:last-child { width: 60%; }
.bell-skeleton > span, .bell-skeleton i { background: linear-gradient(90deg, var(--surface-soft) 25%, color-mix(in srgb, var(--line) 80%, var(--surface)) 50%, var(--surface-soft) 75%); background-size: 200% 100%; animation: bell-shimmer 1.2s linear infinite; }
@keyframes bell-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .bell-skeleton > span, .bell-skeleton i { animation: none; } }
.bell-foot { border-top: 1px solid var(--line); }
.bell-foot a { display: block; padding: 11px 16px; color: var(--text); font-size: 13px; font-weight: 600; text-align: center; text-decoration: none; }
.bell-foot a:hover { background: var(--surface-soft); text-decoration: none; }
@media (max-width: 600px) {
    .bell-panel { position: fixed; top: calc(64px + env(safe-area-inset-top, 0px)); right: 8px; left: 8px; width: auto; max-height: calc(100vh - 80px); }
}

/* Emergency map: safety places, danger areas and emergency mode ----------- */
.geo-panel.card { max-height: calc(100vh - 96px); overflow-y: auto; }
.geo-tabs { position: sticky; top: 0; z-index: 3; display: flex; gap: 2px; padding: 6px; border-bottom: 1px solid var(--line); background: var(--surface-soft); }
.geo-tabs button { display: inline-flex; flex: 1; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 6px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 600; }
.geo-tabs button:hover { background: transparent; color: var(--text); }
.geo-tabs button[aria-selected="true"] { background: var(--surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .08), inset 0 0 0 1px var(--line); color: var(--text); }
.geo-tab-alert { padding: 1px 7px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; animation: safety-pulse 1.6s ease-in-out infinite; }
.geo-panel [hidden], .geo-map-card [hidden], .safety-sheet [hidden], .campus-safety-panel [hidden] { display: none !important; }
body[data-theme="dark"] .geo-tab-alert { color: #141317; }
.geo-step-status.is-danger { color: var(--danger); font-weight: 600; }
.geo-undo-move, button.geo-undo-move { min-height: 0; padding: 2px 6px; border: 0; background: none; color: var(--accent); font-size: 13px; font-weight: 600; text-decoration: underline; }
.geo-undo-move:hover, button.geo-undo-move:hover { background: none; color: var(--accent); }

.geo-layer-bar { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 14px; border-bottom: 1px solid var(--line); }
.geo-layer, button.geo-layer { display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding: 3px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 12.5px; font-weight: 600; }
.geo-layer i { width: 10px; height: 10px; flex: 0 0 10px; border: 2px solid var(--swatch); border-radius: 50%; background: transparent; }
.geo-layer[aria-pressed="true"] { border-color: var(--line-strong); color: var(--text); }
.geo-layer[aria-pressed="true"] i { background: var(--swatch); }
.geo-layer:hover, button.geo-layer:hover { border-color: var(--line-strong); background: var(--surface-soft); color: var(--text); }
.geo-layer-emergency { margin-left: auto; }
.geo-layer-emergency[aria-pressed="true"], button.geo-layer-emergency[aria-pressed="true"] { border-color: transparent; background: var(--danger); color: #fff; }
body[data-theme="dark"] .geo-layer-emergency[aria-pressed="true"] { background: #a8404a; }
.geo-map.is-emergency .leaflet-tile-pane { filter: grayscale(1) brightness(1.04) contrast(.9); }
.geo-map.is-placing { cursor: crosshair; }

/* Map pins: a teardrop in the place's color, with a badge when full or closed. */
.safety-pin { border: 0; background: none; }
.safety-pin-wrap { position: relative; display: block; width: var(--pin); height: calc(var(--pin) * 1.21); }
.safety-pin-body { position: absolute; top: 0; left: 0; display: grid; width: var(--pin); height: var(--pin); place-items: center; border: 2px solid #fff; border-radius: 50% 50% 50% 0; background: var(--marker); box-shadow: 0 2px 6px rgba(0, 0, 0, .35); transform: rotate(-45deg); transition: transform .12s ease; }
.safety-pin-body svg { width: 55%; height: 55%; fill: none; stroke: #fff; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; transform: rotate(45deg); }
.safety-pin:hover .safety-pin-body { transform: rotate(-45deg) scale(1.08); }
.safety-pin-wrap.is-closed .safety-pin-body { filter: grayscale(.75); }
.safety-pin-wrap.is-full::after, .safety-pin-wrap.is-closed::after { position: absolute; top: -5px; right: -7px; display: grid; width: 17px; height: 17px; place-items: center; border: 2px solid #fff; border-radius: 50%; color: #fff; font: 800 11px/1 system-ui, sans-serif; }
.safety-pin-wrap.is-full::after { background: #c98a00; content: "!"; }
.safety-pin-wrap.is-closed::after { background: #c62f3a; content: "×"; font-size: 13px; }

.safety-icon { display: grid; width: 26px; height: 26px; flex: 0 0 26px; place-items: center; border-radius: 8px; background: var(--marker); color: #fff; }
.safety-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.safety-icon-lg { width: 42px; height: 42px; flex-basis: 42px; border-radius: 12px; }
.safety-icon-lg svg { width: 22px; height: 22px; }
.safety-icon-xs { width: 20px; height: 20px; flex-basis: 20px; border-radius: 50%; }
.safety-icon-xs svg { width: 12px; height: 12px; }
.safety-icon-hazard { --marker: #c62f3a; }
.safety-status { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; background: var(--tone-soft); color: var(--tone); font-size: 11.5px; font-weight: 700; white-space: nowrap; }

/* Emergency mode card */
.safety-emergency { display: grid; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.safety-emergency.is-active { background: var(--accent-soft); }
.safety-emergency-head { display: flex; align-items: center; gap: 10px; }
.safety-emergency-head h3 { margin: 0; font-size: 14px; }
.safety-emergency-head p { margin: 1px 0 0; color: var(--muted); font-size: 12.5px; }
.safety-emergency.is-active .safety-emergency-head p { color: var(--danger); font-weight: 600; }
.safety-emergency-dot { width: 12px; height: 12px; flex: 0 0 12px; margin: 0 8px 0 6px; border-radius: 50%; background: var(--line-strong); }
.safety-emergency.is-active .safety-emergency-dot { background: var(--danger); box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 25%, transparent); animation: safety-pulse 1.6s ease-in-out infinite; }
#emergency-off, #emergency-on { display: grid; gap: 8px; }
#emergency-off > label { margin: 0; font-size: 12.5px; font-weight: 600; }
#emergency-off textarea { min-height: 58px; font-size: 13.5px; }
.safety-emergency-message { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 25%, transparent); font-size: 13.5px; line-height: 1.5; }
.safety-check { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 13px; font-weight: 500; line-height: 1.4; cursor: pointer; }
.safety-check input { width: auto; min-height: 0; margin: 2px 0 0; accent-color: var(--accent); }
.safety-check small { color: var(--muted); font-weight: 400; }
@keyframes safety-pulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .geo-tab-alert, .safety-emergency-dot { animation: none !important; } }

/* Adding places */
.safety-type-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.safety-type, button.safety-type { display: flex; align-items: center; justify-content: flex-start; gap: 8px; min-height: 38px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); font-size: 12.5px; font-weight: 600; line-height: 1.25; text-align: left; }
.safety-type:hover, button.safety-type:hover { border-color: var(--line-strong); background: var(--surface-soft); color: var(--text); }
.safety-type[aria-pressed="true"], button.safety-type[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent); }
.safety-hazard-draw, button.safety-hazard-draw { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; min-height: 0; padding: 10px 12px; border: 1px dashed color-mix(in srgb, var(--danger) 50%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--danger) 5%, var(--surface)); color: var(--text); font-weight: 500; text-align: left; }
.safety-hazard-draw:hover, button.safety-hazard-draw:hover { background: var(--accent-soft); color: var(--text); }
.safety-hazard-draw > span:last-child { display: grid; gap: 1px; }
.safety-hazard-draw strong { font-size: 13px; }
.safety-hazard-draw small { color: var(--muted); font-size: 12px; }
.safety-hazard-swatch { width: 26px; height: 26px; flex: 0 0 26px; border: 2px dashed #c62f3a; border-radius: 8px; background: rgba(226, 67, 79, .22); }

/* Lists of places and danger areas */
.safety-list-head { justify-content: space-between; }
.safety-filter { width: auto; min-height: 30px; padding: 2px 8px; font-size: 12.5px; }
.safety-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.safety-row, button.safety-row { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; min-height: 0; padding: 7px 8px; border: 0; border-radius: 8px; background: none; color: var(--text); font-weight: 400; text-align: left; }
.safety-row:hover, button.safety-row:hover { background: var(--surface-soft); color: var(--text); }
.safety-row.is-closed { opacity: .7; }
.safety-row-copy { display: grid; min-width: 0; flex: 1; gap: 1px; }
.safety-row-copy strong, .safety-row-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.safety-row-copy strong { font-size: 13.5px; font-weight: 600; }
.safety-row-copy small { color: var(--muted); font-size: 12px; }
.safety-distance { color: var(--info); font-size: 11.5px; font-style: normal; font-weight: 600; }
.safety-distance:empty { display: none; }
.safety-dot { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: var(--ok); }
.safety-dot.is-full { background: var(--warn); }
.safety-dot.is-closed { background: var(--danger); }
.safety-hazard-row { display: flex; align-items: center; gap: 6px; }
.safety-hazard-row .safety-row { flex: 1; min-width: 0; }
.safety-empty { margin: 0; padding: 6px 8px; color: var(--muted); font-size: 12.5px; line-height: 1.45; }

/* Place and danger-area dialogs */
.safety-sheet { width: min(560px, calc(100vw - 32px)); }
.safety-sheet form { display: flex; flex: 1; min-height: 0; flex-direction: column; margin: 0; }
.safety-sheet .report-sheet-body { gap: 14px; }
.safety-sheet .report-sheet-body label { display: block; margin: 0 0 5px; font-size: 13px; font-weight: 600; }
.safety-sheet .report-sheet-body label small { color: var(--muted); font-weight: 400; }
.safety-sheet .safety-check { display: flex; margin: 0; font-weight: 500; }
.safety-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.safety-status-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.safety-status-field legend { margin-bottom: 6px; padding: 0; font-size: 13px; font-weight: 600; }
.safety-status-options { display: flex; flex-wrap: wrap; gap: 6px; }
.safety-sheet .safety-status-options label { position: relative; display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--text); cursor: pointer; }
.safety-status-options label::before { width: 8px; height: 8px; border-radius: 50%; background: var(--tone); content: ""; }
.safety-status-options input { position: absolute; opacity: 0; pointer-events: none; }
.safety-status-options label:has(input:checked) { border-color: var(--tone); background: var(--tone-soft); color: var(--tone); }
.safety-status-options label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Map popups follow the theme */
.safety-popup { display: grid; gap: 7px; min-width: 200px; font: 13px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }
.safety-popup p { margin: 0; }
.safety-popup-head { display: flex; align-items: center; gap: 9px; }
.safety-popup-head strong { display: block; font-size: 14px; }
.safety-popup-head small { display: block; color: var(--muted); font-size: 12px; }
.safety-popup-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.safety-popup-link { font-weight: 700; }
body[data-theme="dark"] .leaflet-popup-content-wrapper, body[data-theme="dark"] .leaflet-popup-tip { background: var(--surface); color: var(--text); }
body[data-theme="dark"] .leaflet-tooltip { border-color: var(--line); background: var(--surface); color: var(--text); }

/* Emergency banner on every page while emergency mode is on */
.emergency-banner { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 12px 16px; border-radius: 12px; background: var(--danger); box-shadow: var(--shadow-lg); color: #fff; }
body[data-theme="dark"] .emergency-banner { background: #a8404a; }
.emergency-banner-icon { display: grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.emergency-banner-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.emergency-banner > div { min-width: 0; flex: 1; }
.emergency-banner strong { display: block; font-size: 14.5px; }
.emergency-banner p { margin: 1px 0 0; font-size: 13.5px; line-height: 1.45; opacity: .94; }
.emergency-banner-link { padding: 8px 14px; border-radius: 8px; background: #fff; color: #9b2f39; font-size: 13.5px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.emergency-banner-link:hover { color: #9b2f39; text-decoration: none; opacity: .92; }
.emergency-banner-compact { padding: 10px 14px; background: var(--accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 30%, transparent); color: var(--danger); }
body[data-theme="dark"] .emergency-banner-compact { background: var(--accent-soft); }
.emergency-banner-compact .emergency-banner-icon { width: 30px; height: 30px; flex-basis: 30px; background: var(--danger); color: #fff; }
.emergency-banner-compact strong { font-size: 13.5px; }
.emergency-banner-compact p { color: var(--muted); font-size: 12.5px; }
.emergency-banner-compact .emergency-banner-link { padding: 6px 12px; background: var(--danger); color: #fff; }
body[data-theme="dark"] .emergency-banner-compact .emergency-banner-link { color: #141317; }
@media (max-width: 600px) { .emergency-banner { flex-wrap: wrap; } .emergency-banner-link { margin-left: 48px; } }

/* User campus map: map plus a list that also works offline */
.campus-safety-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; gap: 16px; }
.campus-safety-layout .campus-map-card { gap: 0; }
.campus-safety-layout .campus-map.geo-map { height: calc(100vh - 250px); min-height: 420px; }
.campus-map.is-offline { display: none; }
.campus-safety-panel.card { position: sticky; top: calc(76px + env(safe-area-inset-top, 0px)); max-height: calc(100vh - 96px); padding: 0; overflow-y: auto; }
.campus-safety-section { display: grid; gap: 10px; padding: 14px 16px; }
.campus-safety-section + .campus-safety-section { border-top: 1px solid var(--line); }
.campus-safety-title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14.5px; }
.campus-safety-title span { padding: 0 8px; border-radius: 999px; background: var(--surface-soft); color: var(--muted); font-size: 12px; font-weight: 700; line-height: 1.6; }
.campus-safety-title.is-danger { color: var(--danger); }
.campus-safety-title.is-danger span { background: var(--accent-soft); color: var(--danger); }
.campus-safety-group { display: grid; gap: 2px; }
.campus-safety-group h4 { margin: 6px 0 2px; color: var(--muted); font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.safety-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.safety-chip, button.safety-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 3px 10px 3px 4px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--text); font-size: 12px; font-weight: 600; }
.safety-chip:hover, button.safety-chip:hover { background: var(--surface-soft); color: var(--text); }
.safety-chip[aria-pressed="false"] { border-color: var(--line); color: var(--muted); }
.safety-chip[aria-pressed="false"] .safety-icon { background: var(--line-strong); }
@media (max-width: 1000px) {
    .campus-safety-layout { grid-template-columns: 1fr; }
    .campus-safety-panel.card { position: static; max-height: none; }
    .campus-safety-layout .campus-map.geo-map { height: 55vh; min-height: 320px; }
    .geo-panel.card { max-height: none; }
}

/* Printing: the safety list prints even when map tiles cannot load. */
.safety-print { display: none; }
@media print {
    .sidebar, .app-top, .geo-panel, .dashboard-head-actions, .geo-map-toolbar, .geo-layer-bar, .geo-map-note, .emergency-banner-link, .safety-chips, .leaflet-control-container, .bell { display: none !important; }
    body, .app-main, .app-content { background: #fff !important; color: #000 !important; }
    .app-shell { display: block !important; }
    .geo-layout, .campus-safety-layout { display: block; }
    .card { border: 0 !important; box-shadow: none !important; }
    .campus-map.geo-map { height: 440px !important; break-inside: avoid; }
    .campus-safety-panel.card { position: static; max-height: none; overflow: visible; }
    .safety-row { padding: 3px 0; }
    .safety-print { display: block; margin-top: 16px; color: #000; font-size: 11pt; }
    .safety-print table { width: 100%; border-collapse: collapse; }
    .safety-print th, .safety-print td { padding: 4px 6px; border: 1px solid #999; text-align: left; vertical-align: top; }
}

/* Emergency map: saved setups and the one-click start ---------------------- */
.safety-quick-start, button.safety-quick-start { display: flex; align-items: center; justify-content: flex-start; gap: 12px; width: 100%; min-height: 0; padding: 12px 14px; border: 0; border-radius: 12px; background: var(--danger); box-shadow: 0 2px 8px color-mix(in srgb, var(--danger) 35%, transparent); color: #fff; text-align: left; }
.safety-quick-start:hover, button.safety-quick-start:hover { background: color-mix(in srgb, var(--danger) 88%, #000); color: #fff; }
body[data-theme="dark"] .safety-quick-start, body[data-theme="dark"] button.safety-quick-start { background: #a8404a; color: #fff; }
.safety-quick-start > span:last-child { display: grid; min-width: 0; gap: 2px; }
.safety-quick-start strong { font-size: 14.5px; font-weight: 700; }
.safety-quick-start small { font-size: 12px; font-weight: 500; opacity: .9; }
.safety-quick-start.is-armed { outline: 3px solid color-mix(in srgb, var(--danger) 40%, transparent); outline-offset: 2px; animation: safety-pulse 1s ease-in-out infinite; }
.safety-quick-icon { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .2); }
.safety-quick-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.safety-quick-hint { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--warn-soft); color: var(--warn); font-size: 12.5px; line-height: 1.45; }
.safety-custom-start { border-radius: 10px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.safety-custom-start summary { padding: 9px 12px; color: var(--muted); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.safety-custom-start summary:hover { color: var(--text); }
.safety-custom-start[open] summary { border-bottom: 1px solid var(--line); }
.safety-custom-body { display: grid; gap: 8px; padding: 10px 12px 12px; }
.safety-custom-body > label:not(.safety-check) { margin: 0; font-size: 12.5px; font-weight: 600; }
.safety-custom-body textarea { min-height: 58px; font-size: 13.5px; }
.safety-emergency-setup { margin: 0; color: var(--danger); font-size: 12.5px; }
#emergency-on .safety-check { font-size: 12.5px; }
@media (prefers-reduced-motion: reduce) { .safety-quick-start.is-armed { animation: none; } }

.safety-icon-preset { --marker: #6b6f7b; }
.safety-icon-preset.is-default { --marker: #c98a00; }
.safety-templates { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.safety-templates .safety-chip { padding: 3px 10px; }
.safety-summary { margin: 0; padding: 9px 12px; border-radius: 10px; background: var(--surface-soft); color: var(--muted); font-size: 12.5px; }
.safety-preset-block h4 { margin: 0 0 6px; color: var(--muted); font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.safety-preset-block > p { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--surface-soft); font-size: 13.5px; line-height: 1.5; }
.safety-preset-items { display: grid; margin: 0; padding: 0; list-style: none; }
.safety-preset-items li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.safety-preset-items li:first-child { border-top: 0; }
.safety-preset-items small { color: var(--muted); font-size: 12px; }
.safety-preset-items .safety-empty { padding: 4px 0; }
.safety-preset-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.safety-preset-tools .btn-link-danger { margin-left: auto; }
.safety-foot-note { color: var(--muted); font-size: 12px; }
@media (max-width: 560px) { .safety-foot-note { display: none; } }

.safety-sheet .report-sheet-actions { flex-wrap: nowrap; }
.safety-sheet .safety-foot-note { min-width: 0; flex: 1; }

/* Map Manager layout: three focused tabs and a full-height map with floating controls */
.geo-head .page-subtitle { margin-bottom: 0; }
.geo-emergency-chip, button.geo-emergency-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 13px; font-weight: 600; }
.geo-emergency-chip:hover, button.geo-emergency-chip:hover { border-color: var(--line-strong); background: var(--surface); color: var(--text); }
.geo-emergency-chip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.geo-emergency-chip.is-active, button.geo-emergency-chip.is-active { border-color: transparent; background: var(--danger); color: #fff; }
body[data-theme="dark"] .geo-emergency-chip.is-active { background: #a8404a; }
.geo-emergency-chip.is-active .geo-emergency-chip-dot { background: #fff; animation: safety-pulse 1.6s ease-in-out infinite; }

.geo-layout { grid-template-columns: 340px minmax(0, 1fr); align-items: stretch; height: calc(100vh - 186px); min-height: 560px; }
.geo-panel.card { position: static; display: flex; height: 100%; max-height: none; flex-direction: column; overflow: hidden; }
.geo-tabs { position: static; flex: 0 0 auto; }
.geo-tabs button { gap: 6px; }
.geo-tab-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warn); }
.geo-tab-count { min-width: 18px; padding: 0 6px; border-radius: 999px; background: var(--surface-soft); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); font-size: 11px; font-weight: 700; line-height: 1.6; text-align: center; }
.geo-tab-count:empty { display: none; }
.geo-tab-panel { display: flex; flex: 1; min-height: 0; flex-direction: column; }
.geo-panel-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.geo-panel-foot { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--line); background: var(--surface); }
.geo-panel-foot > button[type="submit"] { min-width: 84px; }
.geo-panel-foot-quiet > span { color: var(--muted); font-size: 12px; line-height: 1.4; }
.geo-panel-intro { margin: 0; padding: 14px 16px 2px; color: var(--muted); font-size: 12.5px; line-height: 1.45; }

.geo-steps { margin: 0; padding: 4px 0; list-style: none; }
.geo-steps .geo-step { padding: 12px 16px; }
.geo-step-head h3 { display: flex; align-items: center; gap: 7px; }
.geo-step-num { display: grid; width: 24px; height: 24px; flex: 0 0 24px; place-items: center; border-radius: 50%; background: var(--surface-soft); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--muted); font-size: 12px; font-weight: 700; }
.geo-step.is-done .geo-step-num { background: var(--ok); box-shadow: none; color: #fff; }
body[data-theme="dark"] .geo-step.is-done .geo-step-num { color: #141317; }
.geo-steps .geo-step-help, .geo-steps .geo-step-actions { padding-left: 34px; }
.geo-step-optional { padding: 0 6px; border-radius: 999px; background: var(--surface-soft); color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: .02em; line-height: 1.7; }
.geo-swatch-inline { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.geo-swatch-inline.geo-swatch-fence { border-width: 2px; }
.geo-test-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 16px 12px; padding: 12px 14px; border-radius: 12px; background: var(--surface-soft); box-shadow: inset 0 0 0 1px var(--line); }
.geo-test-card h3 { margin: 0; font-size: 13.5px; }
.geo-test-card .btn-outline { flex: 0 0 auto; }
.geo-panel .geo-remove { padding: 0 16px 16px; border-top: 0; text-align: left; }

.geo-section { display: grid; gap: 10px; padding: 14px 16px; }
.geo-section + .geo-section { border-top: 1px solid var(--line); }
.geo-section-head h3 { margin: 0; font-size: 14px; }
.geo-section-head p { margin: 2px 0 0; color: var(--muted); font-size: 12.5px; }
.geo-section-head p.is-danger { color: var(--danger); font-weight: 600; }
.geo-section-head-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.safety-hazard-btn { display: inline-flex; align-items: center; gap: 7px; }
.safety-hazard-btn .safety-hazard-swatch { width: 14px; height: 14px; flex-basis: 14px; border-width: 1.5px; border-radius: 4px; }

.safety-type-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.safety-type, button.safety-type { flex-direction: column; justify-content: flex-start; align-items: center; gap: 6px; min-height: 76px; padding: 10px 4px 8px; font-size: 11.5px; line-height: 1.2; text-align: center; }
.safety-type .safety-icon { width: 30px; height: 30px; flex-basis: 30px; border-radius: 9px; }

/* The map and its floating controls */
.geo-map-card.card { height: 100%; }
.geo-map-frame { position: relative; flex: 1; min-height: 0; }
.geo-map-frame .campus-map.geo-map { height: 100%; min-height: 0; border: 0; border-radius: 0; }
.geo-overlay { position: absolute; z-index: 1000; }
.geo-overlay-search { top: 12px; left: 12px; width: min(340px, calc(100% - 210px)); }
.geo-overlay-search .geo-search { display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-lg); }
.geo-overlay-search .geo-search:focus-within { border-color: var(--accent); }
.geo-overlay-search .geo-search svg { width: 16px; height: 16px; flex: 0 0 16px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.geo-overlay-search .geo-search input[type="search"] { min-height: 40px; padding: 0; border: 0; background: transparent; box-shadow: none; font-size: 13.5px; }
.geo-overlay-search .geo-search input[type="search"]:focus { outline: none; box-shadow: none; }
.geo-overlay-search .geo-search-results { margin-top: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-lg); }
.geo-overlay-tools { top: 12px; right: 12px; display: flex; align-items: flex-start; gap: 6px; }
.geo-tool, button.geo-tool { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 40px; height: 40px; min-height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-lg); color: var(--text); font-size: 13px; font-weight: 600; }
.geo-tool:hover:not(:disabled), button.geo-tool:hover:not(:disabled) { background: var(--surface-soft); color: var(--text); }
.geo-tool:disabled, button.geo-tool:disabled { background: var(--surface); color: var(--muted); opacity: .55; }
.geo-tool svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.geo-tool[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
.geo-layers { position: relative; }
.geo-layers-menu { position: absolute; top: 46px; right: 0; display: grid; width: 270px; gap: 2px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-lg); }
.geo-layers-title { margin: 2px 8px 4px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.geo-layers-menu .geo-layer, .geo-layers-menu button.geo-layer { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 9px; width: 100%; min-height: 0; padding: 8px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font-size: 13px; font-weight: 500; text-align: left; }
.geo-layers-menu .geo-layer:hover, .geo-layers-menu button.geo-layer:hover { background: var(--surface-soft); color: var(--text); }
.geo-layers-menu .geo-layer[aria-pressed="false"] { color: var(--muted); }
/* A small on/off switch on the right of each row */
.geo-layers-menu .geo-layer::after { order: 2; width: 30px; height: 18px; margin-left: auto; border-radius: 999px; background: radial-gradient(circle 7px at 9px 50%, #fff 96%, transparent 100%), var(--line-strong); content: ""; transition: background .15s ease; }
.geo-layers-menu .geo-layer[aria-pressed="true"]::after { background: radial-gradient(circle 7px at 21px 50%, #fff 96%, transparent 100%), var(--accent); }
.geo-layers-menu .geo-layer small { order: 3; flex-basis: 100%; padding-left: 19px; color: var(--muted); font-size: 11.5px; font-weight: 400; }
.geo-layers-menu hr { margin: 6px 0; border: 0; border-top: 1px solid var(--line); }
.geo-layers-note { margin: 6px 8px 2px; color: var(--muted); font-size: 11.5px; line-height: 1.4; }
.geo-overlay-status { bottom: 12px; left: 12px; display: flex; max-width: calc(100% - 90px); align-items: center; gap: 10px; padding: 7px 8px 7px 14px; border-radius: 10px; background: rgba(28, 27, 31, .9); box-shadow: var(--shadow-lg); color: #fff; font-size: 13px; line-height: 1.4; }
.geo-status-action, button.geo-status-action { flex: 0 0 auto; min-height: 28px; padding: 3px 11px; border: 0; border-radius: 7px; background: rgba(255, 255, 255, .16); color: #fff; font-size: 12.5px; font-weight: 700; }
.geo-status-action:hover, button.geo-status-action:hover { background: rgba(255, 255, 255, .28); color: #fff; }
.geo-map-frame .leaflet-bottom.leaflet-right { margin-bottom: 0; }
.geo-map-frame .leaflet-control-zoom { border: 1px solid var(--line) !important; border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-lg) !important; }

@media (max-width: 1000px) {
    .geo-layout { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; }
    .geo-map-card.card { order: -1; height: 62vh; min-height: 380px; }
    .geo-panel.card { height: auto; }
    .geo-panel-scroll { overflow: visible; }
}
@media (max-width: 600px) {
    .geo-overlay-search { right: 12px; width: auto; }
    .geo-overlay-tools { top: 62px; }
    .safety-type-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media print {
    .geo-overlay, .geo-emergency-chip, .geo-panel-foot { display: none !important; }
    .geo-layout { height: auto; }
    .geo-map-card.card { height: 440px; }
}

/* Map Manager: step icons and the Testing section */
.geo-step-icon { position: relative; display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--step, var(--muted)) 14%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--step, var(--muted)) 30%, transparent); color: var(--step, var(--muted)); }
.geo-step-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.geo-step-icon b { position: absolute; right: -5px; bottom: -5px; display: grid; width: 17px; height: 17px; place-items: center; border: 2px solid var(--surface); border-radius: 50%; background: var(--line-strong); color: var(--surface); font-size: 9.5px; font-weight: 800; line-height: 1; }
.geo-step.is-done .geo-step-icon b { background: var(--ok); color: transparent; }
.geo-step.is-done .geo-step-icon b::after { position: absolute; color: #fff; content: "✓"; font-size: 10px; }
body[data-theme="dark"] .geo-step.is-done .geo-step-icon b::after { color: #141317; }
.geo-steps .geo-step-help, .geo-steps .geo-step-actions { padding-left: 44px; }
.geo-steps .geo-step-head { gap: 10px; }
.geo-step-icon-quiet { --step: var(--muted); width: 30px; height: 30px; flex-basis: 30px; border-radius: 9px; }
.geo-step-icon-quiet svg { width: 17px; height: 17px; }

.geo-testing { display: grid; gap: 8px; margin: 4px 16px 14px; padding: 12px; border-radius: 12px; background: var(--surface-soft); box-shadow: inset 0 0 0 1px var(--line); }
.geo-testing-title { margin: 0 2px 2px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.geo-test-row { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.geo-test-row > div { min-width: 0; flex: 1; }
.geo-test-row strong { display: block; font-size: 13px; }
.geo-test-row .geo-step-status { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.geo-test-row .btn-outline { flex: 0 0 auto; }
.geo-test-row button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

/* Campus Map: route to safety */
.campus-route-button, button.campus-route-button { display: inline-flex; align-items: center; gap: 7px; }
.campus-route-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.campus-map.is-picking, .campus-map.is-picking .leaflet-interactive { cursor: crosshair; }
.campus-safety-layout .geo-map-toolbar .btn-outline { flex: 0 0 auto; }

/* Bell: per-item actions are always visible; users can mark read, remove, and clear all */
.bell-item-actions { position: absolute; top: 10px; right: 10px; display: flex; gap: 4px; }
.bell-item-actions .bell-item-action, .bell-item-actions button.bell-item-action { position: static; opacity: .6; }
.bell-item:hover .bell-item-actions .bell-item-action, .bell-item:focus-within .bell-item-actions .bell-item-action { opacity: 1; }
.bell-item-actions [data-bell-delete]:hover, .bell-item-actions button[data-bell-delete]:hover,
.bell-item-actions [data-bell-dismiss]:hover, .bell-item-actions button[data-bell-dismiss]:hover { border-color: color-mix(in srgb, var(--danger) 35%, transparent); background: var(--accent-soft); color: var(--danger); }
.bell-item-actions [data-bell-read]:hover, .bell-item-actions button[data-bell-read]:hover { border-color: color-mix(in srgb, var(--ok) 35%, transparent); background: var(--ok-soft); color: var(--ok); }
.bell[data-portal="user"] .bell-item.is-unread .bell-item-link { padding-right: 78px; }
.bell-text-danger, button.bell-text-danger { color: var(--muted); }
.bell-text-danger:hover, button.bell-text-danger:hover, .bell-text-danger[data-armed], button.bell-text-danger[data-armed] { background: var(--accent-soft); color: var(--danger); }
.bell-head .bell-title { flex: 1; min-width: 0; }

/* Map Manager: hide/show the tools panel, and compact testing rows */
.geo-layout.is-panel-hidden { grid-template-columns: minmax(0, 1fr); }
.geo-layout.is-panel-hidden .geo-panel { display: none; }
.geo-overlay-search { width: min(390px, calc(100% - 210px)); }
.geo-search-row { display: flex; gap: 6px; }
.geo-search-row .geo-search { min-width: 0; flex: 1; }
.geo-panel-toggle-arrow { transform-box: fill-box; transform-origin: center; transition: transform .15s ease; }
.geo-panel-toggle[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.geo-panel-toggle[aria-pressed="true"] .geo-panel-toggle-arrow { transform: scaleX(-1); }
.geo-panel-scroll { overflow-x: hidden; }
.geo-test-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; }
.geo-test-row .geo-step-status { display: -webkit-box; overflow: hidden; white-space: normal; text-overflow: clip; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.35; }
.geo-test-row .btn-outline, .geo-test-row button.btn-outline { min-width: 58px; padding-inline: 12px; }
@media (max-width: 600px) { .geo-overlay-search { right: 12px; width: auto; } }

/* Map Manager: the red quick emergency button beside the status chip */
.geo-head .dashboard-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.geo-panic, button.geo-panic { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 7px 16px 7px 12px; border: 0; border-radius: 999px; background: var(--danger); box-shadow: 0 2px 10px color-mix(in srgb, var(--danger) 35%, transparent); color: #fff; font-size: 13.5px; font-weight: 700; letter-spacing: .01em; }
.geo-panic:hover, button.geo-panic:hover { background: color-mix(in srgb, var(--danger) 86%, #000); color: #fff; }
body[data-theme="dark"] .geo-panic, body[data-theme="dark"] button.geo-panic { background: #b3404a; color: #fff; }
.geo-panic svg { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.geo-panic.is-armed { outline: 3px solid color-mix(in srgb, var(--danger) 40%, transparent); outline-offset: 2px; animation: safety-pulse 1s ease-in-out infinite; }
.geo-panic:disabled { opacity: .75; }
/* During an emergency it turns into a quieter "End emergency" button */
.geo-panic.is-active, button.geo-panic.is-active { border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent); background: var(--surface); box-shadow: none; color: var(--danger); }
.geo-panic.is-active:hover, button.geo-panic.is-active:hover { background: var(--accent-soft); color: var(--danger); }
body[data-theme="dark"] .geo-panic.is-active, body[data-theme="dark"] button.geo-panic.is-active { background: var(--surface); color: var(--danger); }
@media (prefers-reduced-motion: reduce) { .geo-panic.is-armed { animation: none; } }
@media print { .geo-panic { display: none !important; } }

/* Live updates: a banner that appears without a reload slides in */
.emergency-banner.is-new { animation: banner-in .35s ease-out; }
@keyframes banner-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .emergency-banner.is-new { animation: none; } }

/* Profile & settings pages (admin and user) ---------------------------------
   A profile header, a section menu, section cards and a save bar that sticks
   to the bottom of the screen. */
.settings-page { display: grid; gap: 16px; }
.settings-page > .alert, .settings-page > .role-request-notice { margin: 0; }
.settings-form { display: grid; gap: 16px; margin: 0; }

/* Header: cover, avatar with a camera button, name and a status chip */
.settings-hero { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.settings-cover { position: relative; height: 168px; overflow: hidden; background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 55%, #3a2f3b), color-mix(in srgb, var(--accent) 18%, #8a8794) 60%, color-mix(in srgb, var(--info) 30%, #c9c4cc)); }
.settings-cover img { width: 100%; height: 100%; object-fit: cover; }
.settings-cover-button { position: absolute; top: 14px; right: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 7px 12px; border-radius: 999px; background: rgba(20, 18, 22, .55); color: #fff; font-size: 12.5px; font-weight: 600; cursor: pointer; backdrop-filter: blur(6px); transition: background .15s ease; }
.settings-cover-button:hover { background: rgba(20, 18, 22, .72); }
.settings-cover-button svg, .settings-avatar-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.settings-hero .profile-crop-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.settings-cover-button:has(+ .profile-crop-input:focus-visible), .settings-avatar-button:has(+ .profile-crop-input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.settings-hero-body { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 6px 18px; padding: 0 24px 20px; }
.settings-avatar { position: relative; flex: 0 0 auto; margin-top: -48px; }
.settings-avatar-image { display: grid; width: 104px; height: 104px; place-items: center; overflow: hidden; border: 4px solid var(--surface); border-radius: 50%; background: var(--accent-soft); box-shadow: var(--shadow-lg); color: var(--accent); font-size: 32px; font-weight: 800; }
.settings-avatar-image img { width: 100%; height: 100%; object-fit: cover; }
.settings-avatar-button { position: absolute; right: 2px; bottom: 4px; display: grid; width: 32px; height: 32px; margin: 0; place-items: center; border: 3px solid var(--surface); border-radius: 50%; background: var(--accent); color: #fff; cursor: pointer; transition: transform .15s ease; }
.settings-avatar-button:hover { transform: scale(1.08); }
.settings-avatar-button svg { width: 14px; height: 14px; }
.settings-identity { min-width: 0; flex: 1; padding-top: 12px; }
.settings-identity h2 { margin: 0; font-size: 22px; line-height: 1.2; }
.settings-identity p { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 6px 0 0; color: var(--muted); font-size: 13.5px; }
.settings-identity p > span + span::before { margin: 0 8px; color: var(--line-strong); content: "·"; }
.settings-role { padding: 1px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 700; }
.settings-identity p > .settings-role + span::before { content: ""; margin: 0 2px; }
.settings-status-chip { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 4px; padding: 6px 12px; border-radius: 999px; background: var(--tone-soft); color: var(--tone); font-size: 12.5px; font-weight: 700; text-decoration: none; white-space: nowrap; }
a.settings-status-chip:hover { text-decoration: none; filter: brightness(.97); }
.settings-status-chip i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.settings-photo-help { margin: -8px 4px 0; color: var(--muted); font-size: 12px; }

/* Section menu + section cards */
.settings-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); align-items: start; gap: 20px; }
.settings-nav { position: sticky; top: calc(80px + env(safe-area-inset-top, 0px)); display: grid; gap: 2px; padding: 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.settings-nav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; color: var(--muted); font-size: 13.5px; font-weight: 600; text-decoration: none; }
.settings-nav a:hover { background: var(--surface-soft); color: var(--text); text-decoration: none; }
.settings-nav a[aria-current] { background: var(--accent-soft); color: var(--accent); }
.settings-nav svg, .settings-card-icon svg { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.settings-sections { display: grid; min-width: 0; gap: 16px; }
.settings-card { display: grid; gap: 18px; padding: 22px 24px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); scroll-margin-top: 84px; }
.settings-card-head { display: flex; align-items: flex-start; gap: 14px; }
.settings-card-head h3 { margin: 0; font-size: 16px; }
.settings-card-head p { margin: 3px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.settings-card-icon { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border-radius: 10px; background: var(--surface-soft); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); }
.settings-card-danger .settings-card-icon, .settings-card-icon-danger { background: var(--accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 25%, transparent); color: var(--danger); }
.settings-card-attention { border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); box-shadow: 0 0 0 3px var(--accent-soft); }
.settings-card-danger { border-color: color-mix(in srgb, var(--danger) 25%, var(--line)); }

/* Fields */
.settings-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.settings-field-wide { grid-column: 1 / -1; }
.settings-fields label, .settings-label, .settings-dialog label:not(.settings-option):not(.settings-switch) { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 600; }
.settings-fields input:disabled { opacity: .55; }
.settings-optional { margin-left: 4px; color: var(--muted); font-size: 11.5px; font-weight: 500; }
.settings-help { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; }
.settings-readonly { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; min-height: 42px; padding: 10px 12px; border: 1px dashed var(--line-strong); border-radius: 10px; background: var(--surface-soft); font-size: 14px; font-weight: 600; }
.settings-readonly small { color: var(--muted); font-size: 12px; font-weight: 500; }
.settings-mono { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; letter-spacing: .02em; }
.settings-check, .settings-fields .settings-check { display: inline-flex; align-items: center; gap: 8px; margin: 10px 0 0; color: var(--muted); font-size: 13px; font-weight: 500; cursor: pointer; }
.settings-check input { width: 16px; height: 16px; min-height: 0; margin: 0; accent-color: var(--accent); }
.settings-note { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--surface-soft); color: var(--muted); font-size: 13px; }
.settings-divider { height: 1px; margin: 0 -24px; background: var(--line); }

/* Option cards (radio choices) */
.settings-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.settings-options legend { margin-bottom: 8px; padding: 0; font-size: 13px; font-weight: 600; }
.settings-option { position: relative; display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.settings-option:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line-strong)); }
.settings-option input { width: 18px; height: 18px; min-height: 0; flex: 0 0 18px; margin: 0; accent-color: var(--accent); }
.settings-option > span:last-child { display: grid; gap: 1px; }
.settings-option strong { font-size: 14px; }
.settings-option small { color: var(--muted); font-size: 12px; }
.settings-option:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, var(--surface)); box-shadow: 0 0 0 3px var(--accent-soft); }
.settings-option:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.settings-theme { flex-wrap: wrap; }
.settings-theme input { order: 3; margin-left: auto; }
.settings-theme > span:last-child { order: 2; }
.settings-theme-preview { display: grid; flex-basis: 100%; height: 64px; padding: 8px; grid-template-columns: 26% 1fr; grid-template-rows: 12px 1fr; gap: 6px; border-radius: 9px; }
.settings-theme-preview i { border-radius: 4px; }
.settings-theme-preview i:first-child { grid-row: 1 / 3; }
.settings-theme-preview.is-light { background: #f5f4f2; box-shadow: inset 0 0 0 1px #e4e1e6; }
.settings-theme-preview.is-light i:nth-child(1) { background: #24222a; }
.settings-theme-preview.is-light i:nth-child(2) { background: #ffffff; box-shadow: 0 0 0 1px #e4e1e6; }
.settings-theme-preview.is-light i:nth-child(3) { background: #ffffff; box-shadow: 0 0 0 1px #e4e1e6; }
.settings-theme-preview.is-dark { background: #141317; box-shadow: inset 0 0 0 1px #2c2a31; }
.settings-theme-preview.is-dark i:nth-child(1) { background: #1c1b20; }
.settings-theme-preview.is-dark i:nth-child(2) { background: #232128; }
.settings-theme-preview.is-dark i:nth-child(3) { background: #232128; }

/* Switches */
.settings-switch { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0; cursor: pointer; }
.settings-switch > span { display: grid; gap: 2px; }
.settings-switch strong { font-size: 14px; }
.settings-switch small { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.settings-switch input[type="checkbox"] { position: relative; width: 44px; height: 26px; min-height: 0; flex: 0 0 44px; margin: 0; padding: 0; border: 0; border-radius: 999px; background: var(--line-strong); cursor: pointer; transition: background .2s ease; appearance: none; -webkit-appearance: none; }
.settings-switch input[type="checkbox"]::after { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); content: ""; transition: transform .2s ease; }
.settings-switch input[type="checkbox"]:checked { background: var(--accent); }
.settings-switch input[type="checkbox"]:checked::after { transform: translateX(18px); }
.settings-switch input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .settings-switch input[type="checkbox"], .settings-switch input[type="checkbox"]::after { transition: none; } }

/* Password strength */
.settings-password-feedback { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: -6px; }
.settings-meter { display: grid; width: 140px; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.settings-meter span { height: 5px; border-radius: 999px; background: var(--line); transition: background .2s ease; }
.settings-meter[data-level="1"] span:nth-child(-n+1) { background: var(--danger); }
.settings-meter[data-level="2"] span:nth-child(-n+2) { background: var(--warn); }
.settings-meter[data-level="3"] span:nth-child(-n+3) { background: var(--ok); }
.settings-meter[data-level="4"] span { background: var(--ok); }
.settings-password-feedback small { color: var(--muted); font-size: 12px; }
.settings-match[data-state="ok"] { color: var(--ok); font-weight: 600; }
.settings-match[data-state="error"] { color: var(--danger); font-weight: 600; }

/* Missing ID */
.settings-danger-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.settings-danger-row .settings-readonly { min-height: 0; padding: 7px 12px; font-weight: 600; }
.settings-danger-row .settings-note { flex: 1; padding: 0; background: none; }
.btn-outline-danger, button.btn-outline-danger { border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent); background: var(--surface); color: var(--danger); }
.btn-outline-danger:hover, button.btn-outline-danger:hover { background: var(--accent-soft); color: var(--danger); }
.settings-dialog { width: min(520px, calc(100vw - 32px)); }
.settings-dialog form { display: flex; flex: 1; min-height: 0; flex-direction: column; margin: 0; }
.settings-dialog .report-sheet-body { gap: 16px; }
.settings-dialog [hidden] { display: none !important; }

/* Save bar that follows the screen bottom */
.settings-savebar { position: sticky; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 5; display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 18px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--surface) 92%, transparent); box-shadow: var(--shadow-lg); backdrop-filter: blur(8px); }
.settings-save-status { min-width: 0; flex: 1; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13.5px; }
.settings-save-status::before { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--ok); content: ""; }
.settings-savebar.is-dirty { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.settings-savebar.is-dirty .settings-save-status { color: var(--text); font-weight: 600; }
.settings-savebar.is-dirty .settings-save-status::before { background: var(--warn); }
.settings-savebar.is-ok .settings-save-status { color: var(--ok); font-weight: 600; }
.settings-savebar.is-error .settings-save-status { color: var(--danger); font-weight: 600; }
.settings-savebar.is-error .settings-save-status::before { background: var(--danger); }
.settings-savebar [hidden] { display: none !important; }
.settings-savebar button[type="submit"] { min-width: 132px; }

@media (max-width: 900px) {
    .settings-layout { grid-template-columns: minmax(0, 1fr); }
    .settings-nav { position: static; display: flex; overflow-x: auto; }
    .settings-nav a { flex: 0 0 auto; }
}
@media (max-width: 600px) {
    .settings-cover { height: 120px; }
    .settings-hero-body { padding: 0 16px 16px; }
    .settings-avatar-image { width: 88px; height: 88px; font-size: 26px; }
    .settings-card { padding: 18px 16px; }
    .settings-divider { margin: 0 -16px; }
    .settings-fields { grid-template-columns: minmax(0, 1fr); }
    .settings-savebar { flex-wrap: wrap; }
    .settings-save-status { flex-basis: 100%; }
    .settings-savebar button { flex: 1; }
}

/* Attendance history (user) ------------------------------------------------
   Month navigator, summary tiles, a calendar showing in/out times per day with a
   day panel beside it, and a scan log grouped by day. */
.history-month-nav { display: flex; align-items: center; gap: 6px; }
.history-month-form { margin: 0; }
.history-month-form input[type="month"] { width: auto; min-width: 170px; min-height: 38px; font-weight: 600; }
.history-nav-arrow, a.history-nav-arrow { display: inline-grid; width: 38px; min-width: 38px; height: 38px; min-height: 38px; padding: 0; place-items: center; font-size: 20px; line-height: 1; }
.history-nav-arrow.is-disabled { opacity: .4; pointer-events: none; }

.history-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.history-stat { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
.history-stat-icon { display: grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center; border-radius: 11px; background: var(--tone-soft); color: var(--tone); }
.history-stat-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.history-stat > div { display: grid; min-width: 0; gap: 1px; }
.history-stat small { color: var(--muted); font-size: 12.5px; }
.history-stat strong { font-size: 22px; line-height: 1.2; }
.history-stat em { overflow: hidden; color: var(--muted); font-size: 11.5px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }

.history-overview { display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; gap: 16px; margin-bottom: 16px; }
.history-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 14px; }
.history-card-head h3 { margin: 0; font-size: 16px; }
.history-calendar-card.card, .history-day-panel.card { padding: 18px 20px; }
.history-legend { display: flex; flex-wrap: wrap; gap: 14px; color: var(--muted); font-size: 12px; }
.history-legend span { display: inline-flex; align-items: center; gap: 6px; }
.history-legend i { width: 10px; height: 10px; border-radius: 3px; }
.history-legend i.is-present { background: color-mix(in srgb, var(--ok) 30%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 50%, transparent); }
.history-legend i.is-alert { border-radius: 50%; background: var(--danger); }
.history-legend i.is-missing { background: var(--warn-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 55%, transparent); }

.history-weekdays, .history-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.history-weekdays { margin-bottom: 6px; }
.history-weekdays span { color: var(--muted); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-align: center; text-transform: uppercase; }
.history-day, button.history-day { position: relative; display: flex; min-width: 0; min-height: 78px; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 3px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); font-weight: 400; text-align: left; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.history-day:hover, button.history-day:hover { border-color: var(--line-strong); background: var(--surface-soft); color: var(--text); }
.history-day.is-blank { border: 0; background: transparent; }
.history-day.is-weekend:not(.is-present) { background: var(--surface-soft); }
.history-day.is-future { opacity: .5; }
.history-day-num { font-size: 13px; font-weight: 700; }
.history-day.is-today .history-day-num { display: inline-grid; width: 24px; height: 24px; margin: -3px 0 0 -3px; place-items: center; border-radius: 50%; background: var(--accent); color: #fff; }
body[data-theme="dark"] .history-day.is-today .history-day-num { color: #141317; }
.history-day.is-present, button.history-day.is-present { border-color: color-mix(in srgb, var(--ok) 35%, var(--line)); background: color-mix(in srgb, var(--ok) 8%, var(--surface)); }
.history-day.is-missing, button.history-day.is-missing { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); background: color-mix(in srgb, var(--warn) 8%, var(--surface)); }
.history-day.is-selected, button.history-day.is-selected { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.history-day-io { display: flex; flex-wrap: wrap; gap: 0 6px; font-size: 11.5px; line-height: 1.35; }
.history-day-io b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.history-day-io b:first-child::before { margin-right: 2px; color: var(--ok); content: "↘"; }
.history-day-io b + b::before { margin-right: 2px; color: var(--info); content: "↗"; }
.history-day-io em { color: var(--warn); font-size: 11px; font-style: normal; font-weight: 700; }
.history-day.is-today .history-day-io em { color: var(--ok); }
.history-day-hours { margin-top: auto; color: var(--muted); font-size: 11px; font-weight: 600; }
.history-day-flag { position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 2px var(--surface); }

/* Day panel */
.history-day-panel.card { position: sticky; top: calc(76px + env(safe-area-inset-top, 0px)); }
.history-day-eyebrow { margin: 0; color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.history-day-panel .history-card-head { margin-bottom: 12px; }
.history-day-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.history-day-stat { display: grid; gap: 2px; padding: 9px 10px; border-radius: 10px; background: var(--surface-soft); box-shadow: inset 0 0 0 1px var(--line); }
.history-day-stat small { color: var(--muted); font-size: 11px; }
.history-day-stat strong { font-size: 13.5px; font-variant-numeric: tabular-nums; }
.history-day-stat.tone-warn strong, .history-day-stat.tone-ok strong { color: var(--tone); }
.history-day-none { grid-column: 1 / -1; margin: 0; padding: 18px 12px; border-radius: 10px; background: var(--surface-soft); color: var(--muted); font-size: 13px; text-align: center; }
.history-timeline { position: relative; display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.history-timeline::before { position: absolute; top: 16px; bottom: 16px; left: 15px; width: 2px; background: var(--line); content: ""; }
.history-event { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 6px 0; }
.history-event-icon { z-index: 1; display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; box-shadow: 0 0 0 3px var(--surface); }
.history-event-icon svg, .history-kind svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.history-event.is-entry .history-event-icon { background: var(--ok-soft); color: var(--ok); }
.history-event.is-exit .history-event-icon { background: var(--info-soft); color: var(--info); }
.history-event.is-flagged .history-event-icon, .history-event.is-unrecognized .history-event-icon { background: var(--accent-soft); color: var(--danger); }
.history-event > div { display: grid; min-width: 0; gap: 1px; padding-top: 2px; }
.history-event strong { font-size: 13.5px; }
.history-event small { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.history-event time { padding-top: 6px; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.history-event-note { margin-top: 6px; padding: 9px 11px; border-radius: 10px; background: var(--warn-soft); color: var(--warn); font-size: 12.5px; line-height: 1.45; }
.history-report-open, button.history-report-open { justify-self: start; min-height: 0; padding: 2px 0; border: 0; background: none; color: var(--muted); font-size: 12px; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.history-report-open:hover, button.history-report-open:hover { background: none; color: var(--danger); }
.history-reported { justify-self: start; padding: 1px 8px; border-radius: 999px; background: var(--warn-soft); color: var(--warn); font-size: 11.5px; font-weight: 700; }

/* Scan log */
.history-log-card.card { padding: 18px 20px; }
.history-log-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.history-log-head h3 { margin: 0; font-size: 16px; }
.history-log-head p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.history-log-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.history-search { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface); }
.history-search:focus-within { border-color: var(--accent); }
.history-search svg { width: 15px; height: 15px; flex: 0 0 15px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.history-search input[type="search"] { width: 200px; min-height: 34px; padding: 0; border: 0; background: transparent; box-shadow: none; font-size: 13px; }
.history-search input[type="search"]:focus { outline: none; box-shadow: none; }
.history-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 12px; }
.history-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 13px; font-weight: 600; text-decoration: none; }
.history-chip:hover { border-color: var(--line-strong); color: var(--text); text-decoration: none; }
.history-chip span { min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--surface-soft); font-size: 11px; line-height: 1.6; text-align: center; }
.history-chip.is-active { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent-soft); color: var(--accent); }
.history-chip.is-active span { background: var(--accent); color: #fff; }
body[data-theme="dark"] .history-chip.is-active span { color: #141317; }
.history-table { width: 100%; }
.history-table th, .history-table td { padding: 10px 12px; }
.history-table thead th { color: var(--muted); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.history-day-row th { padding: 14px 12px 6px; border-bottom: 0; background: transparent; text-transform: none; letter-spacing: 0; }
.history-day-row th > span { margin-left: 10px; color: var(--muted); font-size: 12.5px; font-weight: 500; }
.history-day-link, button.history-day-link { min-height: 0; padding: 0; border: 0; background: none; color: var(--text); font-size: 13.5px; font-weight: 700; }
.history-day-link:hover, button.history-day-link:hover { background: none; color: var(--accent); text-decoration: underline; }
.history-time { width: 110px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.history-kind { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.history-kind.is-entry { background: var(--ok-soft); color: var(--ok); }
.history-kind.is-exit { background: var(--info-soft); color: var(--info); }
.history-kind.is-flagged, .history-kind.is-unrecognized { background: var(--accent-soft); color: var(--danger); }
.history-card-cell { color: var(--muted); font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 12.5px; white-space: nowrap; }
.history-action { width: 90px; text-align: right; }
.history-empty { display: grid; justify-items: center; gap: 6px; padding: 36px 16px; text-align: center; }
.history-empty strong { font-size: 15px; }
.history-empty p { margin: 0 0 6px; color: var(--muted); font-size: 13px; }
.history-report-sheet { width: min(520px, calc(100vw - 32px)); }
.history-report-sheet form { display: flex; flex: 1; min-height: 0; flex-direction: column; margin: 0; }
.history-report-sheet .report-sheet-body label { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 600; }
.history-report-help { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; }

@media (max-width: 1100px) {
    .history-overview { grid-template-columns: minmax(0, 1fr); }
    .history-day-panel.card { position: static; }
    .history-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .history-month-nav { width: 100%; }
    .history-month-form { flex: 1; }
    .history-month-form input[type="month"] { width: 100%; min-width: 0; }
    .history-days, .history-weekdays { gap: 3px; }
    .history-day, button.history-day { min-height: 54px; padding: 5px; }
    .history-day-io, .history-day-hours { display: none; }
    .history-day.is-present .history-day-num::after { display: block; width: 6px; height: 6px; margin-top: 4px; border-radius: 50%; background: var(--ok); content: ""; }
    .history-search input[type="search"] { width: 140px; }
    .history-table th:nth-child(4), .history-table td:nth-child(4) { display: none; }
}

.history-month-form input[type="month"] { font-family: inherit; font-size: 14px; }

/* Attendance history v2: full-width calendar with entry/exit/flag counts, day details in a popup */
.history-overview { grid-template-columns: minmax(0, 1fr); }
.history-calendar-hint { margin: -8px 0 12px; color: var(--muted); font-size: 12.5px; }
.history-legend b { display: inline-grid; width: 18px; height: 18px; place-items: center; border-radius: 5px; font-size: 11px; font-weight: 800; }
.history-legend b.is-entry, .history-day-counts .is-entry { background: var(--ok-soft); color: var(--ok); }
.history-legend b.is-exit, .history-day-counts .is-exit { background: var(--info-soft); color: var(--info); }
.history-legend b.is-flag, .history-day-counts .is-flag { background: var(--accent-soft); color: var(--danger); }
.history-day, button.history-day { min-height: 88px; gap: 6px; cursor: pointer; }
.history-day.is-today .history-day-num { margin: 0; }
.history-day-top { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.history-day-hours { margin: 0; color: var(--muted); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.history-day-hours.is-warn { color: var(--warn); }
.history-day.is-today .history-day-hours { color: var(--ok); }
.history-day-counts { display: flex; flex-wrap: wrap; gap: 3px; margin-top: auto; }
.history-day-counts > span { display: inline-flex; align-items: center; gap: 2px; padding: 1px 5px; border-radius: 6px; font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.5; }
.history-day-counts i { font-size: 10px; font-style: normal; }
.history-day-counts em { display: none; font-style: normal; font-weight: 600; }
.history-day-counts .is-zero { background: transparent; color: var(--muted); opacity: .45; }
.history-day.has-alert, button.history-day.has-alert { border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); }
.history-calendar { container-type: inline-size; }
@container (min-width: 980px) { .history-day-counts em { display: inline; } }

/* Day popup */
.history-day-dialog { width: min(560px, calc(100vw - 32px)); }
.history-day-dialog .report-sheet-body { gap: 16px; }
.history-day-dialog-date { display: grid; width: 48px; height: 52px; flex: 0 0 48px; place-content: center; overflow: hidden; border-radius: 12px; background: var(--accent-soft); color: var(--accent); text-align: center; }
.history-day-dialog-date small { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.history-day-dialog-date strong { font-size: 20px; line-height: 1.1; }
.history-day-dialog .history-day-eyebrow { margin: 0; }
.history-day-dialog .report-sheet-title h2 { margin: 0; }
.history-day-counts-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.history-day-counts-row:empty { display: none; }
.history-count { display: grid; gap: 1px; padding: 10px 12px; border-radius: 12px; }
.history-count strong { font-size: 22px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.history-count small { font-size: 12px; font-weight: 600; }
.history-count.is-entry { background: var(--ok-soft); color: var(--ok); }
.history-count.is-exit { background: var(--info-soft); color: var(--info); }
.history-count.is-flag { background: var(--accent-soft); color: var(--danger); }
.history-count.is-zero { background: var(--surface-soft); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); }
.history-day-dialog .history-day-summary { margin-bottom: 0; }
.history-day-dialog .history-timeline:empty { display: none; }
@media (max-width: 640px) {
    .history-day, button.history-day { min-height: 64px; padding: 5px; }
    .history-day-hours { display: none; }
    .history-day-counts { gap: 2px; }
    .history-day-counts > span { padding: 0 3px; font-size: 10.5px; }
    .history-day-counts .is-zero { display: none; }
    .history-day.is-present .history-day-num::after { display: none; }
}

/* Keep the month switcher on one row on phones */
.dashboard-head-actions.history-month-nav { flex-direction: row; flex-wrap: nowrap; }
.history-month-nav > .btn, .history-month-nav > a, .history-month-nav > span { width: auto; flex: 0 0 auto; }
@media (max-width: 640px) { .history-month-nav > a.btn:not(.history-nav-arrow) { padding-inline: 10px; font-size: 13px; } }

/* Attendance history: compact scan log (one collapsible row per day, filters, pages) */
.history-log-head .btn { flex: 0 0 auto; }
.history-chips { margin: 14px 0 10px; }
.history-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 14px; padding: 10px; border-radius: 12px; background: var(--surface-soft); box-shadow: inset 0 0 0 1px var(--line); }
.history-select { display: inline-flex; align-items: center; gap: 0; margin: 0; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface); }
.history-select span { padding: 0 4px 0 10px; color: var(--muted); font-size: 12px; font-weight: 700; }
.history-select select { width: auto; min-height: 34px; padding: 0 28px 0 6px; border: 0; background-color: transparent; box-shadow: none; font-size: 13px; font-weight: 600; }
.history-select select:focus { outline: none; box-shadow: none; }
.history-select:focus-within { border-color: var(--accent); }
.history-filterbar .history-search { flex: 1 1 200px; }
.history-filterbar .history-search input[type="search"] { width: 100%; }
.history-clear { color: var(--accent); font-size: 13px; font-weight: 600; }
.history-expand { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--muted); font-size: 12.5px; }
.btn-link-plain, button.btn-link-plain { min-height: 0; padding: 2px 0; border: 0; background: none; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.btn-link-plain:hover, button.btn-link-plain:hover { background: none; color: var(--text); text-decoration: underline; }

.history-log-days { display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; }
.history-log-day + .history-log-day { border-top: 1px solid var(--line); }
.history-log-day summary { display: grid; grid-template-columns: minmax(130px, 1.2fr) minmax(170px, 1.6fr) 70px auto auto 20px; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; list-style: none; }
.history-log-day summary::-webkit-details-marker { display: none; }
.history-log-day summary:hover { background: var(--surface-soft); }
.history-log-day[open] summary { background: var(--surface-soft); border-bottom: 1px solid var(--line); }
.history-log-day.has-alert summary { box-shadow: inset 3px 0 0 var(--danger); }
.history-log-date { display: grid; gap: 1px; }
.history-log-date strong { font-size: 14px; }
.history-log-date small { color: var(--muted); font-size: 12px; }
.history-log-io { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.history-log-io b { font-weight: 600; }
.history-log-io i { color: var(--muted); font-style: normal; }
.history-log-io em { color: var(--muted); font-size: 12.5px; font-style: normal; font-weight: 700; }
.history-log-io em.is-warn { color: var(--warn); }
.history-log-io em.is-now { color: var(--ok); }
.history-log-hours { color: var(--muted); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.history-log-day summary .history-day-counts { margin: 0; }
.history-log-details, button.history-log-details { min-height: 28px; padding: 3px 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 12px; font-weight: 600; }
.history-log-details:hover, button.history-log-details:hover { border-color: var(--accent); background: var(--surface); color: var(--accent); }
.history-log-chevron { width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; }
.history-log-day[open] .history-log-chevron { transform: rotate(180deg); }
.history-log-scans { display: grid; margin: 0; padding: 4px 0; list-style: none; }
.history-log-scans li { display: grid; grid-template-columns: 90px 130px minmax(0, 1fr) 110px 80px; align-items: center; gap: 12px; padding: 8px 14px 8px 18px; font-size: 13.5px; }
.history-log-scans li + li { border-top: 1px dashed var(--line); }
.history-log-scans .history-kind { justify-self: start; }
.history-reader { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-log-scans .history-action { width: auto; text-align: right; }

.history-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; color: var(--muted); font-size: 13px; }
.history-pager > div { display: flex; align-items: center; gap: 8px; }
.history-pager-page { padding: 0 6px; color: var(--text); font-weight: 600; }
.history-pager .is-disabled { opacity: .45; pointer-events: none; }

@media (max-width: 900px) {
    .history-log-day summary { grid-template-columns: minmax(0, 1fr) auto 20px; grid-template-areas: "date counts chevron" "io io details"; gap: 8px 10px; }
    .history-log-date { grid-area: date; }
    .history-log-io { grid-area: io; }
    .history-log-hours { display: none; }
    .history-log-day summary .history-day-counts { grid-area: counts; }
    .history-log-details { grid-area: details; justify-self: end; }
    .history-log-chevron { grid-area: chevron; }
    .history-log-scans li { grid-template-columns: 76px minmax(0, 1fr) auto; grid-template-areas: "time kind action" "time reader card"; gap: 2px 10px; }
    .history-log-scans .history-time { grid-area: time; }
    .history-log-scans .history-kind { grid-area: kind; }
    .history-log-scans .history-reader { grid-area: reader; color: var(--muted); font-size: 12.5px; }
    .history-log-scans .history-card-cell { grid-area: card; text-align: right; }
    .history-log-scans .history-action { grid-area: action; }
    .history-expand { margin-left: 0; }
}

/* Dashboards (admin and user) ----------------------------------------------- */
.dash-card.card { display: grid; align-content: start; gap: 14px; padding: 18px 20px; }
.dash-card-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 14px; }
.dash-card-head h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; }
.dash-card-head p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.dash-empty { margin: 0; padding: 22px 12px; border-radius: 10px; background: var(--surface-soft); color: var(--muted); font-size: 13px; text-align: center; list-style: none; }

/* Admin header: range presets */
.admin-dash-head .dashboard-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.dash-range { position: relative; display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 10px; background: var(--surface-soft); box-shadow: inset 0 0 0 1px var(--line); }
.dash-range > a, .dash-range summary { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 8px; color: var(--muted); font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; list-style: none; white-space: nowrap; }
.dash-range summary::-webkit-details-marker { display: none; }
.dash-range > a:hover, .dash-range summary:hover { color: var(--text); text-decoration: none; }
.dash-range > a.is-active, .dash-range-custom.is-active > summary { background: var(--surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .08), inset 0 0 0 1px var(--line); color: var(--text); }
.dash-range-custom { position: relative; }
.dash-range-form { position: absolute; top: calc(100% + 8px); right: 0; z-index: 20; display: grid; width: 230px; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-lg); }
.dash-range-form label { display: grid; gap: 4px; margin: 0; font-size: 12px; font-weight: 600; }
.dash-range-form input { min-height: 34px; }
.dash-range-form small { color: var(--muted); font-size: 11.5px; }

/* KPI cards */
.dash-kpis { display: grid; grid-template-columns: 1.3fr repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.dash-kpi { position: relative; display: grid; align-content: start; gap: 2px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); color: var(--text); text-decoration: none; }
a.dash-kpi:hover { border-color: var(--line-strong); text-decoration: none; }
.dash-kpi-icon { position: absolute; top: 14px; right: 14px; display: grid; width: 36px; height: 36px; place-items: center; border-radius: 10px; background: var(--tone-soft, var(--surface-soft)); color: var(--tone, var(--muted)); }
.dash-kpi-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dash-kpi-label { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 13px; font-weight: 600; }
.dash-kpi strong { margin-top: 6px; font-size: 28px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.dash-kpi small { color: var(--muted); font-size: 12px; }
.dash-delta { margin-right: 4px; padding: 0 6px; border-radius: 999px; font-size: 11.5px; }
.dash-delta.is-up { background: var(--ok-soft); color: var(--ok); }
.dash-delta.is-down { background: var(--accent-soft); color: var(--danger); }
.dash-delta.is-flat { background: var(--surface-soft); color: var(--muted); }
.dash-delta.is-inverse.is-up { background: var(--accent-soft); color: var(--danger); }
.dash-delta.is-inverse.is-down { background: var(--ok-soft); color: var(--ok); }
.dash-kpi-hero { border-color: transparent; background: linear-gradient(135deg, color-mix(in srgb, var(--ok) 88%, #000), color-mix(in srgb, var(--ok) 70%, var(--info))); color: #fff; }
a.dash-kpi-hero:hover { border-color: transparent; filter: brightness(1.04); }
.dash-kpi-hero .dash-kpi-label, .dash-kpi-hero small { color: rgba(255, 255, 255, .85); }
.dash-kpi-hero .dash-kpi-icon { background: rgba(255, 255, 255, .18); color: #fff; }
.dash-kpi-hero strong { font-size: 36px; }
.dash-kpi-hero .live-dot { background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .3); }
body[data-theme="dark"] .dash-kpi-hero { background: linear-gradient(135deg, #1f5c43, #2a5a63); }

/* Layout grids */
.dash-grid { display: grid; gap: 16px; margin-bottom: 16px; }
.dash-grid-main { grid-template-columns: minmax(0, 1.75fr) minmax(280px, 1fr); }
.dash-grid-feed { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }

/* Chart */
.dash-legend { display: flex; flex-wrap: wrap; gap: 14px; color: var(--muted); font-size: 12.5px; }
.dash-legend span { display: inline-flex; align-items: center; gap: 6px; }
.dash-legend b { color: var(--text); }
.dash-legend i { width: 10px; height: 10px; border-radius: 3px; }
.dash-legend i.is-entry { background: var(--ok); }
.dash-legend i.is-exit { background: var(--info); }
.dash-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.dash-grid-line { stroke: var(--line); stroke-dasharray: 3 4; }
.dash-axis { fill: var(--muted); font-size: 11px; }
.dash-area { stroke: none; }
.dash-area-entry { color: var(--ok); }
.dash-area-exit { color: var(--info); opacity: .7; }
.dash-line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.dash-line-entry { stroke: var(--ok); }
.dash-line-exit { stroke: var(--info); }
.dash-point { stroke: var(--surface); stroke-width: 2; opacity: 0; transition: opacity .12s ease; }
.dash-point-entry { fill: var(--ok); }
.dash-point-exit { fill: var(--info); }
.dash-hit { fill: transparent; }
.dash-point-group:hover .dash-point { opacity: 1; }
.dash-point-group:hover .dash-hit { fill: color-mix(in srgb, var(--text) 4%, transparent); }

/* Needs attention */
.dash-attention { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.dash-attention-item { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 16px; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--text); text-decoration: none; }
.dash-attention-item:hover { background: var(--surface-soft); text-decoration: none; }
.dash-attention-item > svg { width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dash-attention-item strong { font-size: 13.5px; font-weight: 600; }
.dash-attention-item small { display: block; overflow: hidden; color: inherit; font-size: 12px; opacity: .85; text-overflow: ellipsis; white-space: nowrap; }
.dash-attention-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; background: var(--tone-soft, var(--surface-soft)); color: var(--tone, var(--muted)); }
.dash-attention-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dash-attention-count { min-width: 26px; padding: 1px 8px; border-radius: 999px; background: var(--tone-soft, var(--surface-soft)); color: var(--tone, var(--muted)); font-size: 12.5px; text-align: center; font-variant-numeric: tabular-nums; }
.dash-attention-item.is-clear { color: var(--muted); }
.dash-attention-item.is-clear .dash-attention-icon, .dash-attention-item.is-clear .dash-attention-count { background: var(--surface-soft); color: var(--muted); }
.dash-attention-item.is-emergency { grid-template-columns: 34px minmax(0, 1fr) 16px; background: var(--danger); color: #fff; }
.dash-attention-item.is-emergency:hover { background: color-mix(in srgb, var(--danger) 88%, #000); }
.dash-attention-item.is-emergency .dash-attention-icon { background: rgba(255, 255, 255, .18); color: #fff; }
.dash-attention-item.is-emergency > svg { stroke: #fff; }
.dash-enrollment { display: grid; gap: 6px; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--line); }
.dash-enrollment > div { display: flex; align-items: baseline; justify-content: space-between; font-size: 13px; }
.dash-enrollment strong { font-size: 18px; }
.dash-enrollment small { color: var(--muted); font-size: 12px; }
.dash-progress { display: block; height: 8px; overflow: hidden; border-radius: 999px; background: var(--surface-soft); box-shadow: inset 0 0 0 1px var(--line); }
.dash-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 65%, var(--info))); }

/* Live feed and people lists */
.dash-feed, .dash-people { display: grid; margin: 0; padding: 0; list-style: none; }
.dash-feed-item, .dash-people a { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 9px 4px; color: var(--text); text-decoration: none; }
.dash-feed-item + .dash-feed-item, .dash-people li + li { border-top: 1px solid var(--line); }
.dash-people a { grid-template-columns: 36px minmax(0, 1fr) auto; border-radius: 10px; padding-inline: 8px; }
.dash-people a:hover { background: var(--surface-soft); text-decoration: none; }
.dash-feed-avatar { display: grid; width: 36px; height: 36px; place-items: center; overflow: hidden; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 12.5px; font-weight: 800; }
.dash-feed-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dash-feed-avatar-alert { background: var(--accent-soft); color: var(--danger); }
.dash-feed-avatar-alert svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dash-feed-copy { display: grid; min-width: 0; gap: 1px; }
.dash-feed-copy strong, .dash-feed-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-feed-copy strong { font-size: 13.5px; }
.dash-feed-copy small { color: var(--muted); font-size: 12px; }
.dash-feed-kind { padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.dash-feed-item.is-entry .dash-feed-kind { background: var(--ok-soft); color: var(--ok); }
.dash-feed-item.is-exit .dash-feed-kind { background: var(--info-soft); color: var(--info); }
.dash-feed-item.is-flagged .dash-feed-kind, .dash-feed-item.is-unknown .dash-feed-kind { background: var(--accent-soft); color: var(--danger); }
.dash-feed time, .dash-people time { min-width: 64px; color: var(--muted); font-size: 12px; text-align: right; white-space: nowrap; }

/* Traffic patterns */
.dash-tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; background: var(--surface-soft); box-shadow: inset 0 0 0 1px var(--line); }
.dash-tabs button { min-height: 28px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.dash-tabs button:hover { background: transparent; color: var(--text); }
.dash-tabs button[aria-selected="true"] { background: var(--surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .08), inset 0 0 0 1px var(--line); color: var(--text); }
.dash-pattern[hidden] { display: none; }
.dash-pattern { display: grid; gap: 8px; }
.dash-hours { display: grid; grid-template-columns: repeat(18, minmax(0, 1fr)); align-items: end; gap: 4px; height: 170px; padding-bottom: 18px; }
.dash-hour { position: relative; display: flex; height: 100%; align-items: flex-end; }
.dash-hour i { display: block; width: 100%; border-radius: 5px 5px 2px 2px; background: color-mix(in srgb, var(--info) 55%, var(--surface)); }
.dash-hour.is-peak i { background: var(--accent); }
.dash-hour:hover i { filter: brightness(.92); }
.dash-hour small { position: absolute; bottom: -18px; left: 50%; color: var(--muted); font-size: 10.5px; transform: translateX(-50%); white-space: nowrap; }
.dash-bar-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 40px; align-items: center; gap: 10px; font-size: 13px; }
.dash-bar-row.is-wide { grid-template-columns: minmax(90px, 160px) minmax(0, 1fr) 40px; }
.dash-bar-row > span:first-child { overflow: hidden; color: var(--muted); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.dash-bar-row b { text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 1200px) {
    .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dash-grid-main, .dash-grid-feed { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
    .dash-kpis { grid-template-columns: minmax(0, 1fr); }
    .dash-feed-item { grid-template-columns: 36px minmax(0, 1fr) auto; }
    .dash-feed-item time { grid-column: 2 / 4; text-align: left; }
}

/* User dashboard */
.me-hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 16px; padding: 22px 24px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(120deg, var(--surface) 55%, color-mix(in srgb, var(--accent) 7%, var(--surface))); box-shadow: var(--shadow); }
.me-hero.is-inside { background: linear-gradient(120deg, var(--surface) 50%, color-mix(in srgb, var(--ok) 12%, var(--surface))); }
.me-hero-date { margin: 0; color: var(--muted); font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.me-hero h2 { margin: 4px 0 10px; font-size: 26px; }
.me-presence { display: flex; align-items: center; gap: 10px; }
.me-presence p { margin: 0; color: var(--muted); font-size: 14px; }
.me-presence strong { color: var(--text); }
.me-presence-dot { width: 10px; height: 10px; flex: 0 0 10px; border-radius: 50%; background: var(--line-strong); }
.me-hero.is-inside .me-presence-dot { background: var(--ok); box-shadow: 0 0 0 4px var(--ok-soft); animation: safety-pulse 2s ease-in-out infinite; }
.me-hero.is-inside .me-presence strong { color: var(--ok); }
.me-hero-side { display: grid; justify-items: end; gap: 12px; }
.me-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.me-actions a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--text); font-size: 13px; font-weight: 600; text-decoration: none; }
.me-actions a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.me-actions svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.me-grid { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(260px, 1fr); gap: 16px; margin-bottom: 16px; }
.me-grid-even { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.me-week-scale { display: grid; grid-template-columns: repeat(4, 1fr) 0; margin: 0 56px 0 88px; color: var(--muted); font-size: 10.5px; font-weight: 600; }
.me-week-scale span:last-child { width: 0; text-align: right; }
.me-week-days { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.me-week-days li { display: grid; grid-template-columns: 76px minmax(0, 1fr) 46px; align-items: center; gap: 12px; }
.me-week-label { display: grid; color: var(--text); text-decoration: none; }
.me-week-label:hover { color: var(--accent); text-decoration: none; }
.me-week-label strong { font-size: 13px; }
.me-week-label small { color: var(--muted); font-size: 11.5px; }
.me-week-days li.is-today .me-week-label strong { color: var(--accent); }
.me-week-track { position: relative; display: block; height: 22px; border-radius: 7px; background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), var(--line) calc(25% - 1px) 25%), var(--surface-soft); box-shadow: inset 0 0 0 1px var(--line); }
.me-week-track i { position: absolute; top: 3px; bottom: 3px; border-radius: 5px; background: linear-gradient(90deg, var(--ok), color-mix(in srgb, var(--ok) 70%, var(--info))); }
.me-week-track i.is-open { background: var(--warn); }
.me-week-days li.is-today .me-week-track i:last-child:not(.is-open) { animation: safety-pulse 2s ease-in-out infinite; }
.me-week-alert { position: absolute; top: 50%; right: 6px; display: grid; width: 16px; height: 16px; place-items: center; border-radius: 50%; background: var(--danger); color: #fff; font-size: 10px; transform: translateY(-50%); }
.me-week-hours { color: var(--muted); font-size: 12.5px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.me-id .rfid-ticket { margin: 0; }
.me-id-note { margin: 0; color: var(--muted); font-size: 13px; }
.me-id .btn { justify-self: start; }
.me-timeline { gap: 2px; }
.me-updates { display: grid; margin: 0; padding: 0; list-style: none; }
.me-updates li + li { border-top: 1px solid var(--line); }
.me-updates a { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 10px 4px; color: var(--text); text-decoration: none; }
.me-updates a:hover { background: var(--surface-soft); text-decoration: none; }
.me-updates .bell-icon { width: 34px; height: 34px; }
.me-update-copy { display: grid; min-width: 0; gap: 2px; }
.me-update-copy strong { font-size: 13.5px; font-weight: 500; }
.me-updates li.is-unread .me-update-copy strong { font-weight: 700; }
.me-update-copy small { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.me-updates time { color: var(--muted); font-size: 12px; white-space: nowrap; }
.me-updates li.is-unread time { color: var(--tone, var(--accent)); font-weight: 700; }
.me-stats { margin-bottom: 16px; }
@media (max-width: 1100px) {
    .me-grid, .me-grid-even { grid-template-columns: minmax(0, 1fr); }
    .me-hero-side { justify-items: start; }
}
@media (max-width: 560px) {
    .me-hero { padding: 18px; }
    .me-hero h2 { font-size: 22px; }
    .me-week-days li { grid-template-columns: 56px minmax(0, 1fr) 40px; gap: 8px; }
    .me-week-scale { margin: 0 48px 0 64px; }
}

.dash-stop-entry { stop-color: var(--ok); }
.dash-stop-exit { stop-color: var(--info); }
.dash-area-exit { opacity: 1; }
.dash-grid-feed { align-items: start; }
.dash-chart { align-self: center; }

/* Dashboard analytics: insights row, occupancy today, gates, folded repeat taps */
.dash-insights { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.dash-insight { display: grid; align-content: start; gap: 3px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--text); text-decoration: none; }
a.dash-insight:hover { border-color: var(--line-strong); text-decoration: none; }
.dash-insight > span:first-child { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.dash-insight strong { font-size: 22px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.dash-insight small { color: var(--muted); font-size: 12px; line-height: 1.4; }
.dash-insight .dash-progress { height: 6px; margin-top: 4px; }
.dash-insight.is-warn { border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); background: color-mix(in srgb, var(--warn) 6%, var(--surface)); }
.dash-insight.is-warn strong { color: var(--warn); }
.dash-chip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 999px; background: var(--ok-soft); color: var(--ok); font-size: 12.5px; font-weight: 600; }
.dash-chip b { font-size: 14px; }
.dash-occupancy { display: grid; grid-template-columns: repeat(17, minmax(0, 1fr)); align-items: end; gap: 4px; height: 190px; padding-bottom: 18px; }
.dash-occupancy-bar { position: relative; display: flex; height: 100%; align-items: flex-end; }
.dash-occupancy-bar i { display: block; width: 100%; border-radius: 5px 5px 2px 2px; background: color-mix(in srgb, var(--ok) 45%, var(--surface)); }
.dash-occupancy-bar.is-peak i { background: var(--ok); }
.dash-occupancy-bar.is-now i { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--ok); }
.dash-occupancy-bar.is-future { background: repeating-linear-gradient(180deg, transparent 0 6px, color-mix(in srgb, var(--line) 60%, transparent) 6px 7px); border-radius: 4px; }
.dash-occupancy-bar small { position: absolute; bottom: -18px; left: 50%; color: var(--muted); font-size: 10.5px; transform: translateX(-50%); white-space: nowrap; }
.dash-footnote { margin: 0; color: var(--muted); font-size: 11.5px; }
.dash-feed-kind b { margin-left: 5px; padding: 0 5px; border-radius: 999px; background: color-mix(in srgb, currentColor 16%, transparent); font-size: 11px; }
.dash-gate-row { display: grid; grid-template-columns: minmax(90px, 140px) minmax(0, 1fr) 48px; align-items: center; gap: 10px; font-size: 13px; }
.dash-gate-name { overflow: hidden; color: var(--muted); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.dash-gate-bar { display: flex; height: 12px; overflow: hidden; border-radius: 999px; background: var(--surface-soft); }
.dash-gate-bar i { display: block; min-width: 0; }
.dash-gate-bar i.is-entry, .dash-gate-legend i.is-entry { background: var(--ok); }
.dash-gate-bar i.is-exit, .dash-gate-legend i.is-exit { background: var(--info); }
.dash-gate-bar i.is-alert, .dash-gate-legend i.is-alert { background: var(--danger); }
.dash-gate-row b { text-align: right; font-variant-numeric: tabular-nums; }
.dash-gate-legend { margin-top: 4px; }
.dash-grid-feed { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
@media (max-width: 1200px) { .dash-insights { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dash-grid-feed { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .dash-insights { grid-template-columns: minmax(0, 1fr); } }

/* Sign-in pages (login, registration, password reset, codes) -------------------
   A branded panel and a clean form panel; the panel becomes a header on phones. */
.auth-body { min-height: 100vh; margin: 0; background: var(--bg, #f5f4f2); }
.auth-shell { display: grid; min-height: 100vh; grid-template-columns: minmax(340px, 44%) minmax(0, 1fr); }
.auth-shell.is-wide { grid-template-columns: minmax(300px, 34%) minmax(0, 1fr); }
.auth-brand { position: sticky; top: 0; display: flex; height: 100vh; flex-direction: column; justify-content: space-between; gap: 32px; overflow: hidden; padding: 40px 48px; background:
    radial-gradient(circle at 85% 12%, rgba(255, 255, 255, .14), transparent 38%),
    radial-gradient(circle at 10% 95%, rgba(0, 0, 0, .25), transparent 45%),
    linear-gradient(150deg, #6f2b33 0%, #9a3f48 48%, #3f2a3b 100%); color: #fff; }
.auth-admin .auth-brand { background:
    radial-gradient(circle at 85% 12%, rgba(184, 95, 102, .35), transparent 40%),
    radial-gradient(circle at 10% 95%, rgba(80, 110, 150, .3), transparent 45%),
    linear-gradient(150deg, #1d1b22 0%, #26232c 55%, #331f27 100%); }
.auth-brand::after { position: absolute; right: -120px; bottom: -120px; width: 360px; height: 360px; border: 2px solid rgba(255, 255, 255, .08); border-radius: 50%; box-shadow: 0 0 0 40px rgba(255, 255, 255, .03), 0 0 0 80px rgba(255, 255, 255, .02); content: ""; }
.auth-logo { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; }
.auth-logo:hover { color: #fff; text-decoration: none; }
.auth-logo .brand-mark { width: 42px; height: 42px; border-radius: 12px; background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); color: #fff; }
.auth-logo strong { display: block; font-size: 16px; }
.auth-logo small { display: block; color: rgba(255, 255, 255, .7); font-size: 12.5px; }
.auth-brand-copy { position: relative; z-index: 1; max-width: 440px; }
.auth-brand-copy h1 { margin: 0 0 14px; color: #fff; font-size: clamp(28px, 3vw, 38px); line-height: 1.15; letter-spacing: -.01em; }
.auth-brand-copy p { margin: 0 0 28px; color: rgba(255, 255, 255, .78); font-size: 15.5px; line-height: 1.6; }
.auth-features { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.auth-features li { display: flex; align-items: center; gap: 12px; color: rgba(255, 255, 255, .92); font-size: 14.5px; font-weight: 500; }
.auth-features span { display: grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; border-radius: 10px; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.auth-features svg, .auth-badge svg, .auth-icon-badge svg, .auth-note svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.auth-brand-foot { position: relative; z-index: 1; margin: 0; color: rgba(255, 255, 255, .55); font-size: 12.5px; }

.auth-main { display: flex; align-items: center; justify-content: center; padding: 48px 24px; }
.auth-panel { width: min(420px, 100%); }
.auth-shell.is-wide .auth-panel { width: min(640px, 100%); }
.auth-head { margin-bottom: 22px; }
.auth-head h2 { margin: 0 0 6px; font-size: 28px; letter-spacing: -.01em; }
.auth-head p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.auth-badge { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 14px; padding: 5px 11px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 12.5px; font-weight: 700; }
.auth-badge svg { width: 15px; height: 15px; }
.auth-icon-badge { display: grid; width: 48px; height: 48px; margin-bottom: 16px; place-items: center; border-radius: 14px; background: var(--accent-soft); color: var(--accent); }
.auth-icon-badge svg { width: 22px; height: 22px; }

.auth-alert { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 18px; padding: 11px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.5; }
.auth-alert span { display: grid; width: 20px; height: 20px; flex: 0 0 20px; place-items: center; border-radius: 50%; color: #fff; font-size: 12px; font-weight: 800; }
.auth-alert p { margin: 0; }
.auth-alert.is-error { background: var(--accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 30%, transparent); color: var(--danger); }
.auth-alert.is-error span { background: var(--danger); }
.auth-alert.is-ok { background: var(--ok-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 30%, transparent); color: var(--ok); }
.auth-alert.is-ok span { background: var(--ok); }

.auth-form { display: grid; gap: 16px; margin: 0; }
.auth-field { display: grid; gap: 6px; min-width: 0; }
.auth-field > label, .auth-label-row label { margin: 0; font-size: 13px; font-weight: 600; }
.auth-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.auth-label-row a { color: var(--accent); font-size: 12.5px; font-weight: 600; }
.auth-field input, .auth-field select { min-height: 46px; font-size: 14.5px; }
.auth-input { position: relative; }
.auth-input > svg { position: absolute; top: 50%; left: 14px; z-index: 1; width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform: translateY(-50%); pointer-events: none; }
.auth-input input { width: 100%; padding-left: 42px; }
.auth-input:focus-within > svg { stroke: var(--accent); }
.auth-hint { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.auth-hint[hidden] { display: none; }
.auth-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.auth-grid > [hidden] { display: none; }
.auth-submit, button.auth-submit { display: inline-flex; width: 100%; min-height: 48px; align-items: center; justify-content: center; gap: 8px; margin-top: 4px; border-radius: 12px; font-size: 15px; font-weight: 700; }
.auth-submit svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; }
.auth-submit:hover svg { transform: translateX(3px); }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 24px 0 14px; color: var(--muted); font-size: 12.5px; }
.auth-divider::before, .auth-divider::after { height: 1px; flex: 1; background: var(--line); content: ""; }
.auth-secondary, a.auth-secondary { display: flex; width: 100%; min-height: 46px; align-items: center; justify-content: center; border-radius: 12px; font-weight: 600; }
.auth-switch { margin: 22px 0 0; color: var(--muted); font-size: 13.5px; text-align: center; }
.auth-switch a { color: var(--accent); font-weight: 600; }
.auth-note { display: flex; align-items: flex-start; gap: 10px; margin: 18px 0 0; padding: 11px 13px; border-radius: 12px; background: var(--surface-soft); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.auth-note svg { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 1px; }
.auth-code, .auth-field input.auth-code { min-height: 60px; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 28px; font-weight: 700; letter-spacing: .5em; text-align: center; }

/* Registration sections */
.auth-register { gap: 18px; }
.auth-step { display: grid; gap: 14px; min-width: 0; margin: 0; padding: 18px 20px 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.auth-step legend { display: flex; align-items: center; gap: 10px; float: left; width: 100%; margin: 0 0 2px; padding: 0; font-size: 15px; font-weight: 700; }
.auth-step legend + * { clear: both; }
.auth-step legend > span { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12.5px; }
.auth-step legend em { padding: 1px 8px; border-radius: 999px; background: var(--surface-soft); color: var(--muted); font-size: 11px; font-style: normal; font-weight: 700; }
.auth-step .settings-check { margin-top: 4px; }
.auth-step .settings-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.auth-step [hidden] { display: none !important; }
.auth-password-feedback { margin-top: -4px; }
.auth-fineprint { margin: -4px 0 0; color: var(--muted); font-size: 12px; text-align: center; }
body[data-theme="dark"] .auth-step legend > span { color: #141317; }

@media (max-width: 900px) {
    .auth-shell, .auth-shell.is-wide { grid-template-columns: minmax(0, 1fr); }
    .auth-brand { position: relative; height: auto; padding: 20px 22px; }
    .auth-brand-copy, .auth-brand-foot, .auth-brand::after { display: none; }
    .auth-main { align-items: flex-start; padding: 28px 18px 40px; }
}
@media (max-width: 560px) {
    .auth-grid, .auth-step .settings-options { grid-template-columns: minmax(0, 1fr); }
    .auth-head h2 { font-size: 24px; }
    .auth-step { padding: 16px; }
}

/* Sidebar account row: one soft panel, clickable profile, quiet log-out button */
.sidebar-footer { padding-top: 12px; }
.sidebar-account { gap: 4px; padding: 6px; border-radius: 12px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.sidebar-account-link { display: flex; min-width: 0; flex: 1; align-items: center; gap: 10px; padding: 4px 6px 4px 4px; border-radius: 9px; color: inherit; text-decoration: none; transition: background .15s ease; }
.sidebar-account-link:hover { background: rgba(255, 255, 255, .07); text-decoration: none; }
.sidebar-account-link:focus-visible { outline: 2px solid rgba(255, 255, 255, .5); outline-offset: 1px; }
.sidebar-avatar { width: 36px; height: 36px; flex-basis: 36px; background: linear-gradient(135deg, #b85f66, #6f2b33); box-shadow: 0 0 0 2px rgba(255, 255, 255, .14); color: #fff; font-size: 12.5px; letter-spacing: .02em; }
.sidebar-avatar img { background: #fff; }
.sidebar-account-copy { gap: 1px; }
.sidebar-account-copy strong { color: #f4f2f5; font-size: 13.5px; }
.sidebar-account-copy small { color: #9a96a0; font-size: 12px; }
.sidebar-footer .sidebar-account form { display: flex; flex: 0 0 auto; }
.sidebar-account .sidebar-logout, .sidebar-account button.sidebar-logout { display: grid; width: 34px; height: 34px; min-height: 34px; margin: 0; padding: 0; place-items: center; border: 0; border-radius: 9px; background: transparent; color: #9a96a0; transition: background .15s ease, color .15s ease; }
.sidebar-account .sidebar-logout:hover, .sidebar-account button.sidebar-logout:hover { background: rgba(184, 95, 102, .22); color: #ffb9be; }
.sidebar-account .sidebar-logout .nav-icon { width: 18px; height: 18px; margin: 0; }

/* ---------- Admin audit ---------- */
.audit-stat-link { color: inherit; text-decoration: none; transition: border-color .15s, transform .15s; }
.audit-stat-link:hover { border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); text-decoration: none; transform: translateY(-1px); }
.audit-card .history-chips { margin-top: 0; }
.audit-list { margin: 0; padding: 0; list-style: none; }
.audit-day { position: sticky; top: 0; z-index: 1; margin: 6px 0 2px; padding: 8px 2px 6px; background: var(--surface); color: var(--muted); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.audit-day:first-child { margin-top: 0; }
.audit-item { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 11px 8px; border-radius: 10px; }
.audit-item + .audit-item::before { content: ""; position: absolute; top: 0; right: 8px; left: 54px; border-top: 1px solid var(--line); }
.audit-item:hover { background: var(--surface-soft); }
.audit-item:hover::before, .audit-item:hover + .audit-item::before { opacity: 0; }
.audit-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; background: var(--tone-soft); color: var(--tone); }
.audit-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.audit-body { min-width: 0; }
.audit-sentence { margin: 0; font-size: 14px; line-height: 1.45; }
.audit-sentence strong { font-weight: 650; }
.audit-record { display: inline-block; margin-left: 2px; padding: 0 7px; border-radius: 6px; background: var(--surface-soft); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); font-size: 12.5px; font-weight: 600; line-height: 1.6; text-decoration: none; }
a.audit-record:hover { color: var(--accent); text-decoration: none; box-shadow: inset 0 0 0 1px var(--accent); }
.audit-tag { display: inline-block; margin-left: 4px; padding: 0 7px; border-radius: 999px; background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); font-size: 11px; font-weight: 700; line-height: 1.7; vertical-align: 1px; }
.audit-meta { display: flex; flex-wrap: wrap; gap: 2px 0; margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.audit-meta span + span::before { content: "·"; margin: 0 7px; }
.audit-code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11.5px; opacity: .8; }
.audit-item time { display: grid; justify-items: end; gap: 1px; color: var(--text); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.audit-item time small { color: var(--muted); font-size: 11.5px; font-weight: 500; }
.audit-details-toggle { margin-top: 6px; }
.audit-details-toggle summary { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); cursor: pointer; font-size: 12.5px; font-weight: 600; list-style: none; }
.audit-details-toggle summary::-webkit-details-marker { display: none; }
.audit-details-toggle summary::after { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .15s; }
.audit-details-toggle[open] summary::after { transform: rotate(-135deg) translateY(-1px); }
.audit-details-toggle summary span { padding: 0 6px; border-radius: 999px; background: var(--accent-soft); font-size: 11px; line-height: 1.6; }
.audit-details-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 16px; margin: 8px 0 2px; padding: 10px 12px; border-radius: 10px; background: var(--surface-soft); box-shadow: inset 0 0 0 1px var(--line); }
.audit-details-list div { min-width: 0; }
.audit-details-list dt { color: var(--muted); font-size: 11.5px; }
.audit-details-list dd { margin: 0; overflow-wrap: anywhere; font-size: 13px; }
@media (max-width: 620px) {
    .audit-item { grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding-inline: 4px; }
    .audit-item time { grid-column: 2; grid-row: 2; display: flex; gap: 6px; justify-items: start; }
    .audit-item + .audit-item::before { left: 44px; }
    .audit-icon { width: 30px; height: 30px; }
}

/* ---------- Backup & restore ---------- */
.backup-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; margin-bottom: 16px; }
.backup-layout .settings-card { margin: 0; }
.backup-contents { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.backup-contents li { display: grid; flex: 1 1 80px; gap: 1px; padding: 9px 12px; border-radius: 10px; background: var(--surface-soft); box-shadow: inset 0 0 0 1px var(--line); }
.backup-contents strong { font-size: 17px; line-height: 1.2; }
.backup-contents span { color: var(--muted); font-size: 12px; }
.backup-form { display: grid; gap: 14px; margin: 0; }
.backup-form .settings-fields { margin: 0; }
.backup-check { display: flex; align-items: flex-start; gap: 10px; margin: 0; cursor: pointer; }
.backup-check input { width: 17px; height: 17px; flex: 0 0 17px; margin: 2px 0 0; accent-color: var(--accent); }
.backup-check span { display: grid; gap: 1px; }
.backup-check strong { font-size: 13.5px; font-weight: 600; }
.backup-check small { color: var(--muted); font-size: 12.5px; }
.backup-warning { display: flex; gap: 10px; margin: 0; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--warn) 11%, transparent); color: var(--text); font-size: 13px; line-height: 1.45; }
.backup-warning svg { width: 17px; height: 17px; flex: 0 0 17px; margin-top: 1px; fill: none; stroke: var(--warn); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.backup-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.backup-actions-start { justify-content: flex-start; }
.backup-actions small { font-size: 12.5px; }
.backup-actions button svg { width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.backup-drop { position: relative; display: flex; align-items: center; gap: 12px; margin: 0; padding: 16px; border: 1.5px dashed var(--line-strong); border-radius: 12px; background: var(--surface-soft); cursor: pointer; transition: border-color .15s, background .15s; }
.backup-drop:hover, .backup-drop.is-over, .backup-drop:focus-within { border-color: var(--accent); background: var(--accent-soft); }
.backup-drop.has-file { border-style: solid; border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.backup-drop input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.backup-drop svg { width: 28px; height: 28px; flex: 0 0 28px; fill: none; stroke: var(--accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.backup-drop span { display: grid; min-width: 0; gap: 1px; }
.backup-drop strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.backup-drop small { color: var(--muted); font-size: 12.5px; }
.backup-check-result { display: grid; gap: 10px; padding: 11px 13px; border-radius: 10px; font-size: 13px; }
.backup-check-result.is-ok { background: color-mix(in srgb, var(--ok) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 30%, transparent); }
.backup-check-result.is-ok > strong { color: var(--ok); }
.backup-check-result.is-error { background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); }
.backup-compare { overflow-x: auto; }
.backup-compare table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.backup-compare th, .backup-compare td { padding: 4px 8px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.backup-compare th:first-child { color: var(--muted); font-weight: 500; text-align: left; }
.backup-compare thead th { color: var(--muted); font-size: 11.5px; font-weight: 600; }
.backup-confirm { display: grid; gap: 12px; margin: 4px 0 0; padding: 14px; border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--line)); border-radius: 12px; }
.backup-confirm legend { padding: 0 6px; color: var(--danger); font-size: 12.5px; font-weight: 700; }
.backup-confirm .backup-actions { justify-content: flex-end; }
.backup-copies .settings-card-head { margin-bottom: 10px; }
.backup-empty { margin: 0; font-size: 13px; }
.backup-copy-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.backup-copy-list li { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-top: 1px solid var(--line); }
.backup-copy-list li > svg { width: 20px; height: 20px; flex: 0 0 20px; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.backup-copy-list li > div { display: grid; flex: 1; min-width: 0; }
.backup-copy-list small { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.backup-copy-list form { margin: 0; }
@media (max-width: 1000px) { .backup-layout { grid-template-columns: 1fr; } }
.backup-check-result[hidden] { display: none; }
.settings-fields .backup-check, .backup-form .backup-check { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; }
.backup-form .backup-check input[type="checkbox"] { width: 17px; min-width: 17px; height: 17px; min-height: 0; margin: 2px 0 0; padding: 0; box-shadow: none; }
.backup-compare table, .backup-compare th, .backup-compare td { background: transparent; box-shadow: none; }
.backup-compare th, .backup-compare td { height: auto; padding: 5px 8px; font-size: 12.5px; letter-spacing: 0; text-transform: none; }
.backup-compare tbody tr:last-child th, .backup-compare tbody tr:last-child td { border-bottom: 0; }

/* User map: the draggable practice pin for routes */
.route-test-pin { border: 0; background: none; }
.route-test-pin span { display: grid; width: 34px; height: 34px; box-sizing: border-box; place-items: center; border: 2px solid #fff; border-radius: 50% 50% 50% 0; background: #7c3aed; box-shadow: 0 3px 10px rgba(0, 0, 0, .35); transform: rotate(-45deg); cursor: grab; }
.route-test-pin b { color: #fff; font-size: 8px; font-weight: 800; letter-spacing: 0; text-transform: uppercase; transform: rotate(45deg); }
.leaflet-dragging .route-test-pin span { cursor: grabbing; }
#test-point[aria-pressed="true"] { border-color: #7c3aed; background: color-mix(in srgb, #7c3aed 12%, transparent); color: #7c3aed; }
body[data-theme="dark"] #test-point[aria-pressed="true"] { border-color: #b69cf7; color: #b69cf7; }

/* User map: offline copy */
.map-offline-banner { display: flex; align-items: flex-start; gap: 10px; margin: -2px 0 10px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--warn) 14%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 35%, transparent); font-size: 13px; line-height: 1.45; }
.map-offline-banner[hidden], .map-offline-chip[hidden] { display: none; }
.map-offline-banner svg { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 1px; fill: none; stroke: var(--warn); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.map-offline-chip { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ok); font-size: 12px; font-weight: 600; white-space: nowrap; }
.map-offline-chip svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.campus-map.is-offline-base { background: #efebe4; }
@media print { .map-offline-chip { display: none !important; } }

/* ---------- Emergency hotlines ---------- */
.hotline-icon { display: inline-grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--hotline) 14%, transparent); color: var(--hotline); }
.hotline-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.hotline-icon-sm { width: 28px; height: 28px; flex-basis: 28px; border-radius: 8px; }
.hotline-icon-sm svg { width: 16px; height: 16px; }
.hotline-icon-lg { width: 56px; height: 56px; flex-basis: 56px; border-radius: 16px; }
.hotline-icon-lg svg { width: 28px; height: 28px; }
body[data-theme="dark"] .hotline-icon { background: color-mix(in srgb, var(--hotline) 22%, transparent); color: color-mix(in srgb, var(--hotline) 70%, #fff); }
.dashboard-head-actions button svg, .hotline-empty-actions button svg { width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hotline-empty { display: grid; justify-items: center; gap: 8px; padding: 40px 18px; text-align: center; }
.hotline-empty strong { font-size: 16px; }
.hotline-empty p { max-width: 460px; margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.hotline-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
.hotline-empty-actions form { margin: 0; }

/* Admin list */
.hotline-admin-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.hotline-admin-head p { margin: 0; font-size: 13.5px; }
.hotline-admin-head small { font-size: 12.5px; }
.hotline-admin-list { margin: 0; padding: 0; list-style: none; }
.hotline-admin-row { display: flex; align-items: center; gap: 14px; padding: 12px 4px; border-bottom: 1px solid var(--line); }
.hotline-admin-row:last-child { border-bottom: 0; }
.hotline-admin-row.is-hidden > .hotline-icon, .hotline-admin-row.is-hidden .hotline-admin-body { opacity: .55; }
.hotline-admin-body { flex: 1; min-width: 0; }
.hotline-admin-body p { margin: 0; }
.hotline-admin-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; }
.hotline-admin-numbers { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 2px !important; font-size: 15px; font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: .01em; }
.hotline-admin-meta { margin-top: 2px !important; color: var(--muted); font-size: 12.5px; }
.hotline-badge { padding: 0 7px; border-radius: 999px; background: var(--surface-soft); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); font-size: 11px; font-weight: 700; line-height: 1.7; }
.hotline-badge.is-pinned { background: var(--accent-soft); box-shadow: none; color: var(--accent); }
.hotline-admin-tools { display: flex; flex: 0 0 auto; align-items: center; gap: 2px; }
.hotline-admin-tools form { margin: 0; }
.hotline-tool, button.hotline-tool { display: inline-flex; width: auto; min-width: 34px; height: 34px; min-height: 34px; align-items: center; justify-content: center; gap: 5px; padding: 0 8px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); box-shadow: none; font-size: 12.5px; }
.hotline-tool:hover { background: var(--surface-soft); color: var(--text); }
.hotline-tool svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hotline-tool.is-placeholder { visibility: hidden; }
.hotline-tool.is-danger:hover, .hotline-tool.is-armed { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.hotline-categories { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; border: 0; }
.hotline-categories legend { margin-bottom: 8px; padding: 0; font-size: 13px; font-weight: 600; }
.hotline-category { position: relative; display: grid; justify-items: center; gap: 6px; margin: 0; padding: 10px 6px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; font-size: 12px; font-weight: 600; line-height: 1.25; text-align: center; }
.hotline-category input { position: absolute; opacity: 0; pointer-events: none; }
.hotline-category:hover { border-color: var(--line-strong); }
.hotline-category:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent); }
.hotline-category:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.hotline-dialog .hotline-form { display: contents; }
.hotline-dialog[open] { display: flex; }
.hotline-dialog .settings-fields { margin: 0; }
.hotline-switches { display: grid; gap: 12px; }
.hotline-switches .backup-check { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; }
.hotline-switches .backup-check input[type="checkbox"] { width: 17px; min-width: 17px; height: 17px; min-height: 0; margin: 2px 0 0; padding: 0; box-shadow: none; }
@media (max-width: 620px) {
    .hotline-categories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hotline-admin-row { flex-wrap: wrap; }
    .hotline-admin-tools { width: 100%; justify-content: flex-end; }
}

/* User page */
.hotline-pinned { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin: 0 0 16px; padding: 0; list-style: none; }
.hotline-card { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.hotline-card[hidden] { display: none; }
.hotline-card.is-pinned { padding: 16px; border-color: color-mix(in srgb, var(--hotline) 35%, var(--line)); box-shadow: var(--shadow); }
.hotline-card-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.hotline-card-head > div { display: grid; min-width: 0; gap: 1px; }
.hotline-card-head strong { font-size: 14.5px; }
.hotline-card-head small { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.hotline-number { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 8px 10px; border-radius: 10px; background: var(--surface-soft); }
.hotline-digits { font-size: 17px; font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: .02em; user-select: all; -webkit-user-select: all; }
.hotline-number.is-large .hotline-digits { font-size: 22px; }
.hotline-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.hotline-action, button.hotline-action { display: inline-flex; width: auto; min-height: 36px; align-items: center; gap: 6px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface); color: var(--text); box-shadow: none; font-size: 13px; font-weight: 600; text-decoration: none; }
.hotline-action:hover { border-color: var(--hotline, var(--accent)); color: var(--hotline, var(--accent)); text-decoration: none; }
.hotline-action svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hotline-action.is-call { border-color: transparent; background: #1f8a4c; color: #fff; }
.hotline-action.is-call:hover { background: #18733f; color: #fff; }
.hotline-number.is-large .hotline-action { min-height: 42px; padding: 0 16px; font-size: 14px; }
.hotline-action.is-copied { border-color: var(--ok); color: var(--ok); }
.hotline-directory { display: grid; gap: 16px; }
.hotline-filter { display: grid; gap: 10px; }
.hotline-filter .history-chips { margin: 0; }
.hotline-filter .history-search input[type="search"] { width: 100%; }
.hotline-group[hidden] { display: none; }
.hotline-group h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.hotline-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.hotline-footnote { margin: 14px 2px 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
@media (max-width: 520px) {
    .hotline-list, .hotline-pinned { grid-template-columns: 1fr; }
    .hotline-actions { width: 100%; }
    .hotline-action { flex: 1; justify-content: center; }
}

/* Campus map panel */
.campus-safety-more { margin-left: auto; color: var(--accent); font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.map-hotlines { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.map-hotline { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--text); text-decoration: none; }
.map-hotline:hover { border-color: #1f8a4c; text-decoration: none; }
.map-hotline > span:nth-child(2) { display: grid; flex: 1; min-width: 0; }
.map-hotline strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.map-hotline small { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; font-weight: 600; }
.map-hotline-call { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 8px; background: #1f8a4c; color: #fff; font-size: 12.5px; font-weight: 700; }
.map-hotline-call svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hotline-card { align-content: start; }
.hotline-directory .hotline-list { grid-template-columns: 1fr; gap: 8px; }
.hotline-directory .hotline-number { padding: 6px 8px 6px 12px; }
.hotline-directory .hotline-action { min-height: 34px; }
@media (min-width: 860px) {
    .hotline-directory .hotline-card { grid-template-columns: minmax(0, 1fr) minmax(0, auto); align-items: center; column-gap: 18px; row-gap: 6px; padding: 10px 12px; }
    .hotline-directory .hotline-card-head { grid-row: 1 / span 4; }
    .hotline-directory .hotline-number { grid-column: 2; flex-wrap: nowrap; }
    .hotline-directory .hotline-digits { min-width: 150px; }
}
.hotline-pinned { align-items: start; }

/* ---------- Emergency hotlines: polish ---------- */
/* Admin */
.hotline-stats { margin-bottom: 16px; }
.hotline-admin-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.hotline-admin-card { padding-top: 6px; }
.hotline-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-top: 12px; padding: 0 4px 8px; border-bottom: 1px solid var(--line); }
.hotline-section-head h3 { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.hotline-section-head h3 span { padding: 0 7px; border-radius: 999px; background: var(--surface-soft); box-shadow: inset 0 0 0 1px var(--line); font-size: 11px; letter-spacing: 0; line-height: 1.7; }
.hotline-section-head small { color: var(--muted); font-size: 12px; }
.hotline-admin-list + .hotline-section-head { margin-top: 18px; }
.hotline-admin-row { position: relative; gap: 12px; padding: 12px 6px 12px 2px; border-radius: 10px; }
.hotline-admin-row:hover { background: var(--surface-soft); }
.hotline-move { display: grid; flex: 0 0 auto; gap: 0; }
.hotline-move form { margin: 0; }
.hotline-move .hotline-tool, .hotline-move button.hotline-tool { width: 26px; min-width: 26px; height: 20px; min-height: 20px; padding: 0; border-radius: 6px; }
.hotline-move .hotline-tool svg { width: 15px; height: 15px; }
.hotline-admin-numbers span { display: inline-flex; align-items: center; gap: 6px; }
.hotline-admin-numbers svg { width: 14px; height: 14px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hotline-admin-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; }
.hotline-admin-meta span + span::before { content: "·"; margin: 0 7px; }
.hotline-type { color: var(--hotline); font-weight: 600; }
body[data-theme="dark"] .hotline-type { color: color-mix(in srgb, var(--hotline) 70%, #fff); }
.hotline-badge.is-sms { background: color-mix(in srgb, var(--info) 12%, transparent); box-shadow: none; color: var(--info); }
.hotline-admin-side { display: grid; gap: 16px; }
.hotline-side-card { display: grid; gap: 10px; margin: 0; }
.hotline-side-card h3 { margin: 0; font-size: 14.5px; }
.hotline-side-card > p { margin: -6px 0 0; font-size: 12.5px; }
.hotline-checklist { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.hotline-checklist li { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 2px; font-size: 13px; font-weight: 600; }
.hotline-checklist li > span:nth-child(2) { flex: 1; }
.hotline-checklist li.is-done > span:nth-child(2) { color: var(--muted); font-weight: 500; }
.hotline-checklist .btn-sm { min-height: 30px; padding: 0 12px; }
.hotline-check { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.hotline-check svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.hotline-side-empty { margin: 0; padding: 12px; border: 1px dashed var(--line-strong); border-radius: 10px; color: var(--muted); font-size: 12.5px; text-align: center; }
.hotline-admin-side .map-hotline { cursor: default; }
@media (max-width: 1100px) { .hotline-admin-layout { grid-template-columns: 1fr; } .hotline-admin-side { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } }

/* User */
.hotline-section { margin-bottom: 18px; }
.hotline-section-title { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 15px; }
.hotline-section-title svg { width: 17px; height: 17px; fill: none; stroke: #1f8a4c; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hotline-section-title span { padding: 0 7px; border-radius: 999px; background: var(--surface-soft); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); font-size: 11.5px; line-height: 1.7; }
.hotline-card.is-pinned { position: relative; overflow: hidden; background: linear-gradient(180deg, color-mix(in srgb, var(--hotline) 8%, var(--surface)), var(--surface) 70px); }
.hotline-card.is-pinned::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--hotline); }
.hotline-directory .hotline-card { border-left: 3px solid var(--hotline); }
.hotline-digits small { display: block; margin-bottom: 1px; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; user-select: none; -webkit-user-select: none; }
.hotline-directory-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.hotline-directory-head .hotline-section-title { margin: 0; }
.hotline-directory-head .history-search { flex: 0 1 320px; }
.hotline-tabs { display: flex; gap: 6px; margin: 0 -4px; padding: 2px 4px 4px; overflow-x: auto; scrollbar-width: thin; }
.hotline-tab, button.hotline-tab { display: inline-flex; flex: 0 0 auto; width: auto; min-height: 36px; align-items: center; gap: 7px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--muted); box-shadow: none; font-size: 13px; font-weight: 600; }
.hotline-tab svg { width: 16px; height: 16px; fill: none; stroke: var(--hotline, currentColor); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hotline-tab span { min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--surface-soft); font-size: 11px; line-height: 1.6; text-align: center; }
.hotline-tab:hover { border-color: var(--line-strong); color: var(--text); }
.hotline-tab.is-active { border-color: color-mix(in srgb, var(--hotline, var(--accent)) 55%, transparent); background: color-mix(in srgb, var(--hotline, var(--accent)) 10%, var(--surface)); color: var(--text); }
.hotline-tab.is-active span { background: var(--hotline, var(--accent)); color: #fff; }
@media (max-width: 620px) { .hotline-directory-head .history-search { flex-basis: 100%; } }
.hotline-tool.is-on { background: var(--accent-soft); color: var(--accent); }
.hotline-directory-head .history-search input[type="search"] { width: 100%; min-width: 0; }
.hotline-directory-head .history-search { min-width: 0; }

/* =====================================================================
   Motion: page changes, popups, dropdowns, tabs, alerts and buttons.
   Everything here is skipped when the device asks to reduce motion.
   Fill mode is "backwards" (not "both") so finished animations leave no
   transform behind (a lingering transform would break fixed/sticky children).
   ===================================================================== */
:root { --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-spring: cubic-bezier(.34, 1.45, .64, 1); }

@media (prefers-reduced-motion: no-preference) {
    /* ---------- page to page: the sidebar and top bar stay put, the page crossfades ---------- */
    @view-transition { navigation: auto; }
    .sidebar { view-transition-name: sidebar; }
    .app-top { view-transition-name: topbar; }
    main.app-content { view-transition-name: page; }
    ::view-transition-group(root) { animation-duration: .25s; }
    ::view-transition-old(page) { animation: .16s ease-in both motion-page-out; }
    ::view-transition-new(page) { animation: .3s var(--ease-out) .04s both motion-fade-in; }
    ::view-transition-old(sidebar), ::view-transition-new(sidebar), ::view-transition-old(topbar), ::view-transition-new(topbar) { animation-duration: .2s; }
    @keyframes motion-page-out { to { opacity: 0; transform: translateY(-4px); } }
    @keyframes motion-fade-in { from { opacity: 0; } }

    /* ---------- page entrance: content rises in, one block after another ---------- */
    body.page-enter main.app-content > *, body.page-enter .auth-panel > * { animation: motion-rise .48s var(--ease-out) backwards; }
    body.page-enter main.app-content > :nth-child(2), body.page-enter .auth-panel > :nth-child(2) { animation-delay: .05s; }
    body.page-enter main.app-content > :nth-child(3), body.page-enter .auth-panel > :nth-child(3) { animation-delay: .1s; }
    body.page-enter main.app-content > :nth-child(4), body.page-enter .auth-panel > :nth-child(4) { animation-delay: .15s; }
    body.page-enter main.app-content > :nth-child(5), body.page-enter .auth-panel > :nth-child(5) { animation-delay: .2s; }
    body.page-enter main.app-content > :nth-child(6), body.page-enter .auth-panel > :nth-child(6) { animation-delay: .24s; }
    body.page-enter main.app-content > :nth-child(n+7), body.page-enter .auth-panel > :nth-child(n+7) { animation-delay: .28s; }
    @keyframes motion-rise { from { opacity: 0; transform: translateY(12px); } }

    /* ---------- popup windows (every <dialog>): rise in over a blurring backdrop, sink out on close ---------- */
    dialog { transition: opacity .2s ease, transform .3s var(--ease-out), overlay .3s allow-discrete, display .3s allow-discrete; }
    dialog:not([open]) { opacity: 0; transform: translateY(10px) scale(.97); transition-duration: .16s, .2s, .2s, .2s; }
    @starting-style { dialog[open] { opacity: 0; transform: translateY(18px) scale(.95); } }
    dialog::backdrop { transition: background-color .28s ease, backdrop-filter .28s ease, overlay .3s allow-discrete, display .3s allow-discrete; }
    dialog:not([open])::backdrop { background-color: transparent; backdrop-filter: blur(0); }
    @starting-style { dialog[open]::backdrop { background-color: transparent; backdrop-filter: blur(0); } }
    dialog.report-sheet[open], dialog.user-manage-dialog[open] { animation: none; }

    /* ---------- bell dropdown: opens and closes smoothly ---------- */
    .bell-panel { animation: none; transition: opacity .18s ease, transform .24s var(--ease-out), display .24s allow-discrete; }
    .bell-panel[hidden] { display: none; opacity: 0; transform: translateY(-8px) scale(.97); }
    @starting-style { .bell-panel:not([hidden]) { opacity: 0; transform: translateY(-8px) scale(.97); } }

    /* ---------- tabs: the panel fades in; the highlight slides (glider added by motion.js) ---------- */
    [role="tabpanel"]:not([hidden]) { animation: motion-panel-in .32s var(--ease-out) backwards; }
    @keyframes motion-panel-in { from { opacity: 0; transform: translateY(8px); } }
    .glider-ready > .tab-glider { transition: transform .38s var(--ease-out), width .38s var(--ease-out), height .2s ease; }

    /* ---------- things that appear: alerts, opened details, filtered cards ---------- */
    .alert { animation: motion-alert-in .42s var(--ease-out) backwards; }
    @keyframes motion-alert-in { from { opacity: 0; transform: translateY(-8px); } }
    details[open] > :not(summary) { animation: motion-panel-in .28s var(--ease-out) backwards; }
    .hotline-directory [data-hotline-card]:not([hidden]), .hotline-group:not([hidden]) { animation: motion-panel-in .3s var(--ease-out) backwards; }

    /* ---------- buttons press, cards lift, icons nudge ---------- */
    .btn, button, input[type="submit"] { transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, scale .14s var(--ease-spring); }
    :is(.btn, button, input[type="submit"], .hotline-action):not(:disabled):active { scale: .96; }
    a.history-stat, .map-hotline, .hotline-card, .safety-row { transition: translate .22s var(--ease-out), box-shadow .22s ease, border-color .18s ease; }
    a.history-stat:hover, .map-hotline:hover { translate: 0 -2px; box-shadow: var(--shadow-lg); }
    .side-link { transition: background-color .18s ease, color .18s ease, box-shadow .2s ease; }
    .side-link .nav-icon { transition: transform .28s var(--ease-spring), color .18s ease; }
    .side-link:hover .nav-icon { transform: translateX(2px) scale(1.06); }
    .history-chip, .hotline-tab, .safety-chip { transition: background-color .18s ease, border-color .18s ease, color .18s ease, scale .14s var(--ease-spring); }
}

/* The sliding tab highlight (also used without motion, it just doesn't slide). */
.has-glider { position: relative; isolation: isolate; }
.tab-glider { position: absolute; top: 0; left: 0; z-index: -1; pointer-events: none; }
.geo-tabs.has-glider button[aria-selected="true"], .dash-tabs.has-glider button[aria-selected="true"] { background: transparent; box-shadow: none; }
.geo-tabs > .tab-glider, .dash-tabs > .tab-glider { border-radius: 8px; background: var(--surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .08), inset 0 0 0 1px var(--line); }
.dash-tabs > .tab-glider { border-radius: 7px; }
.user-manage-tabs.has-glider [role="tab"][aria-selected="true"] { box-shadow: none; }
.user-manage-tabs > .tab-glider { box-shadow: inset 0 -2px 0 var(--accent); }

@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
}

/* ---------- Campus alerts (fast to send in an emergency) ---------- */
.ca-type, .ca-quick-button, .ca-history-row, .ca-confirm-icon, .ca-preview { --ca: var(--info); }
.is-event { --ca: #7c5cd6; }
.is-security { --ca: var(--warn); }
.is-emergency { --ca: var(--danger); }
.ca-preview[data-type="event"] { --ca: #7c5cd6; } .ca-preview[data-type="security"] { --ca: var(--warn); } .ca-preview[data-type="emergency"] { --ca: var(--danger); }
.ca-emergency-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: color-mix(in srgb, var(--danger) 13%, transparent); color: var(--danger); font-size: 13px; font-weight: 700; text-decoration: none; }
.ca-emergency-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 0 var(--danger); animation: ca-pulse 1.6s infinite; }
@keyframes ca-pulse { 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* Segmented choices (used for audience and quick send) */
.ca-segment { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 3px; border-radius: 10px; background: var(--surface-soft); box-shadow: inset 0 0 0 1px var(--line); }
.ca-segment-label { padding: 0 8px 0 6px; color: var(--muted); font-size: 12px; font-weight: 600; }
.ca-segment label { position: relative; margin: 0; cursor: pointer; }
.ca-segment input { position: absolute; opacity: 0; pointer-events: none; }
.ca-segment label > span { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 11px; border-radius: 8px; color: var(--muted); font-size: 13px; font-weight: 600; transition: background-color .15s ease, color .15s ease, box-shadow .15s ease; }
.ca-segment label:hover > span { color: var(--text); }
.ca-segment input:checked + span { background: var(--surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .08), inset 0 0 0 1px var(--line); color: var(--text); }
.ca-segment input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
.ca-segment b { min-width: 20px; padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--text) 8%, transparent); font-size: 11px; line-height: 1.6; text-align: center; }
.ca-segment input:checked + span b { background: var(--accent); color: #fff; }

/* Quick send */
.ca-quick { margin-bottom: 16px; border-color: color-mix(in srgb, var(--danger) 22%, var(--line)); background: linear-gradient(180deg, color-mix(in srgb, var(--danger) 5%, var(--surface)), var(--surface) 90px); }
.ca-quick.is-live { border-color: color-mix(in srgb, var(--danger) 50%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 12%, transparent), var(--shadow); }
.ca-quick-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 14px; }
.ca-quick-head h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; }
.ca-quick-head h3 svg { width: 19px; height: 19px; fill: none; stroke: var(--danger); stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.ca-quick-head p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.ca-quick-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.ca-quick-button, button.ca-quick-button { display: flex; width: 100%; min-height: 64px; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--ca) 30%, var(--line)); border-radius: 12px; background: var(--surface); color: var(--text); box-shadow: none; text-align: left; }
.ca-quick-button:hover { border-color: var(--ca); background: color-mix(in srgb, var(--ca) 7%, var(--surface)); }
.ca-quick-button > span:last-child { display: grid; min-width: 0; gap: 1px; }
.ca-quick-button strong { font-size: 13.5px; line-height: 1.25; }
.ca-quick-button small { color: var(--muted); font-size: 11.5px; font-weight: 500; }
.ca-quick-icon { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border-radius: 10px; background: var(--ca); color: #fff; }
.ca-quick-button.is-announcement .ca-quick-icon { background: color-mix(in srgb, var(--ca) 14%, transparent); color: var(--ca); }
.ca-quick-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 1250px) { .ca-quick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ca-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Composer + send panel */
.ca-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; margin-bottom: 16px; }
.ca-compose { display: grid; gap: 16px; margin: 0; }
.ca-compose-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.ca-compose-head h3 { margin: 0; font-size: 16px; }
.ca-template select { min-height: 34px; padding: 4px 30px 4px 10px; font-size: 13px; }
.ca-field { display: grid; gap: 7px; min-width: 0; margin: 0; padding: 0; border: 0; }
.ca-field legend, .ca-field-head label { margin: 0 0 7px; padding: 0; font-size: 13px; font-weight: 600; }
.ca-field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ca-field-head label { margin: 0; }
.ca-field textarea { min-height: 130px; resize: vertical; }
.ca-types { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ca-type { position: relative; margin: 0; cursor: pointer; }
.ca-type input { position: absolute; opacity: 0; pointer-events: none; }
.ca-type > span { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); font-size: 13px; font-weight: 600; text-align: center; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.ca-type svg { width: 17px; height: 17px; flex: 0 0 17px; fill: none; stroke: var(--ca); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ca-type:hover > span { border-color: var(--line-strong); color: var(--text); }
.ca-type input:checked + span { border-color: var(--ca); background: color-mix(in srgb, var(--ca) 10%, var(--surface)); box-shadow: 0 0 0 1px var(--ca); color: var(--text); }
.ca-type input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.ca-audience { display: flex; flex-wrap: wrap; gap: 14px 24px; }
.ca-footnote { margin: -4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.ca-send { position: sticky; top: calc(76px + env(safe-area-inset-top, 0px)); display: grid; gap: 10px; margin: 0; }
.ca-send-total { display: flex; align-items: baseline; gap: 8px; }
.ca-send-total strong { font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums; }
.ca-send-total span { color: var(--muted); font-size: 13px; }
.ca-send-email, .ca-send-hint { margin: 0; color: var(--muted); font-size: 12.5px; }
.ca-send-hint.is-blocked { color: var(--warn); font-weight: 600; }
.ca-send-button, button.ca-send-button { display: inline-flex; width: 100%; min-height: 46px; align-items: center; justify-content: center; gap: 8px; font-size: 14.5px; }
.ca-send-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.ca-send-button.is-emergency, button.is-emergency[data-confirm-send] { background: var(--danger); color: #fff; }
.ca-send-warn { margin: 0; padding: 8px 10px; border-radius: 9px; background: color-mix(in srgb, var(--warn) 12%, transparent); font-size: 12px; line-height: 1.45; }
.ca-preview { display: grid; gap: 4px; margin-top: 4px; padding: 12px; border: 1px solid var(--line); border-left: 3px solid var(--ca); border-radius: 10px; background: var(--surface-soft); }
.ca-preview-label { margin: 0; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.ca-preview-to { margin: 0; color: var(--muted); font-size: 12px; }
.ca-preview-subject { margin: 2px 0 0; font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.ca-preview-body { max-height: 160px; overflow: auto; font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.ca-preview .is-placeholder { color: var(--muted); font-weight: 500; font-style: italic; }
.ca-shortcut { margin: 0; color: var(--muted); font-size: 11.5px; text-align: center; }
.ca-shortcut kbd { padding: 1px 5px; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--surface); font: inherit; font-size: 11px; }
@media (max-width: 1100px) { .ca-workspace { grid-template-columns: 1fr; } .ca-send { position: static; } }
@media (max-width: 620px) { .ca-types { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Sent alerts */
.ca-history-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px; margin-bottom: 8px; }
.ca-history-head h3 { margin: 0; font-size: 16px; }
.ca-history-list { display: grid; margin: 0; padding: 0; list-style: none; }
.ca-history-list li[hidden] { display: none; }
.ca-history-row, button.ca-history-row { display: flex; width: 100%; min-height: 58px; align-items: center; gap: 12px; padding: 10px 8px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--text); box-shadow: none; font-weight: 400; text-align: left; }
.ca-history-list li:first-child .ca-history-row { border-top: 0; }
.ca-history-row:hover { border-radius: 10px; background: var(--surface-soft); }
.ca-history-icon { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--ca) 13%, transparent); color: var(--ca); }
.ca-history-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ca-history-main { display: grid; flex: 1; min-width: 0; gap: 1px; }
.ca-history-main strong { overflow: hidden; font-size: 13.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ca-history-main small, .ca-history-meta small { color: var(--muted); font-size: 12px; }
.ca-history-meta { display: grid; justify-items: end; gap: 1px; font-size: 12.5px; text-align: right; white-space: nowrap; }
.ca-history-more { margin-top: 10px; }
@media (max-width: 620px) { .ca-history-meta { display: none; } }

/* Confirm dialog */
.ca-confirm-icon { display: grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--ca) 14%, transparent); color: var(--ca); }
.ca-confirm-icon.is-emergency { background: var(--danger); color: #fff; }
.ca-confirm-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ca-confirm.is-emergency { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.ca-confirm.is-emergency .report-sheet-head { background: color-mix(in srgb, var(--danger) 7%, var(--surface)); }
.ca-confirm-message { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); }
.ca-confirm-message strong { font-size: 14.5px; overflow-wrap: anywhere; }
.ca-confirm-message p { max-height: 220px; margin: 0; overflow: auto; font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.ca-confirm .report-sheet-foot { justify-content: space-between; }
.ca-confirm-note { margin: 0; padding: 9px 12px; border-radius: 10px; background: color-mix(in srgb, var(--warn) 13%, transparent); font-size: 13px; font-weight: 600; }

/* Page content uses the full width beside the sidebar (it was capped at 1400px and left-aligned,
   leaving a large empty band on wide screens). Ultra-wide screens get a centred 1840px column. */
.app-content { width: 100%; max-width: 1840px; margin-inline: auto; box-sizing: border-box; }

.geo-panic[hidden] { display: none !important; }
.alert-info { border-color: color-mix(in srgb, var(--info) 28%, transparent); background: color-mix(in srgb, var(--info) 10%, var(--surface)); color: var(--text); }

/* ---------- Roles & access ---------- */
.rbac-roles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.rbac-role { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border: 1px solid var(--line); border-top: 3px solid var(--role); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
.rbac-role h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 0; font-size: 15px; }
.rbac-role h3 small { color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.rbac-role p { margin: 2px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.rbac-role-stats { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px !important; }
.rbac-role-stats strong { color: var(--text); font-size: 15px; }
.rbac-role-icon { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border-radius: 11px; background: color-mix(in srgb, var(--role) 14%, transparent); color: var(--role); }
body[data-theme="dark"] .rbac-role-icon { background: color-mix(in srgb, var(--role) 24%, transparent); color: color-mix(in srgb, var(--role) 70%, #fff); }
.rbac-role-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 1250px) { .rbac-roles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .rbac-roles { grid-template-columns: 1fr; } }

.rbac-card { padding-top: 0; }
.rbac-tabs { display: flex; gap: 4px; margin: 0 -20px 16px; padding: 0 20px; border-bottom: 1px solid var(--line); }
.rbac-tabs [role="tab"] { position: relative; min-height: 44px; padding: 8px 14px; border: 0; border-radius: 0; background: transparent; color: var(--muted); box-shadow: none; font-size: 14px; font-weight: 600; }
.rbac-tabs [role="tab"]:hover { background: transparent; color: var(--text); }
.rbac-tabs [role="tab"][aria-selected="true"] { color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
.rbac-tabs.has-glider [role="tab"][aria-selected="true"] { box-shadow: none; }
.rbac-tabs > .tab-glider { box-shadow: inset 0 -2px 0 var(--accent); }

.rbac-form { display: grid; gap: 18px; margin: 0; }
.rbac-matrix-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.rbac-matrix { width: 100%; min-width: 560px; border-collapse: collapse; }
.rbac-matrix th, .rbac-matrix td { padding: 10px 14px; border-bottom: 1px solid var(--line); background: transparent; text-align: center; vertical-align: middle; text-transform: none; letter-spacing: 0; }
.rbac-matrix thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-soft); color: var(--text); font-size: 13px; font-weight: 700; }
.rbac-matrix thead th:first-child, .rbac-matrix tbody th { text-align: left; }
.rbac-matrix thead th:first-child { color: var(--muted); font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; }
.rbac-matrix thead th:not(:first-child) { width: 150px; }
.rbac-col-head { display: inline-flex; align-items: center; gap: 7px; }
.rbac-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--role); }
.rbac-matrix thead small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; font-weight: 500; }
.rbac-reset, button.rbac-reset { display: block; width: auto; min-height: 0; margin: 2px auto 0; padding: 0; border: 0; background: none; box-shadow: none; color: var(--accent); font-size: 11.5px; font-weight: 600; }
.rbac-reset:hover { background: none; text-decoration: underline; }
.rbac-group th { padding-top: 14px; padding-bottom: 6px; background: transparent; color: var(--muted); font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.rbac-matrix tbody th strong { display: block; font-size: 13.5px; font-weight: 600; }
.rbac-matrix tbody th small { display: block; color: var(--muted); font-size: 12px; font-weight: 400; }
.rbac-matrix tbody tr:not(.rbac-group):hover { background: var(--surface-soft); }
.rbac-matrix tbody:last-child tr:last-child th, .rbac-matrix tbody:last-child tr:last-child td { border-bottom: 0; }
.rbac-switch { position: relative; display: inline-block; width: 40px; height: 23px; margin: 0; cursor: pointer; vertical-align: middle; }
.rbac-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.rbac-switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--line-strong); transition: background-color .2s ease; pointer-events: none; }
.rbac-switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .25s var(--ease-spring, ease); }
.rbac-switch input:checked + span { background: var(--role); }
.rbac-switch input:checked + span::after { transform: translateX(17px); }
.rbac-switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.rbac-fixed { display: inline-grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; color: var(--muted); }
.rbac-fixed.is-on { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.rbac-fixed svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.rbac-footnote { display: flex; align-items: flex-start; gap: 8px; margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.rbac-footnote svg { width: 15px; height: 15px; flex: 0 0 15px; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rbac-savebar { position: sticky; bottom: 12px; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--surface) 94%, transparent); box-shadow: var(--shadow-lg); backdrop-filter: blur(6px); }
.rbac-savebar > span { flex: 1; color: var(--muted); font-size: 13px; }
.rbac-savebar.is-dirty { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.rbac-savebar.is-dirty > span { color: var(--text); font-weight: 600; }

.rbac-staff { display: grid; margin: 0 0 12px; padding: 0; list-style: none; }
.rbac-staff-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 6px; border-bottom: 1px solid var(--line); }
.rbac-staff-row:last-child { border-bottom: 0; }
.rbac-staff-row.is-off .rbac-avatar, .rbac-staff-row.is-off .rbac-staff-main { opacity: .55; }
.rbac-avatar { display: grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center; overflow: hidden; border-radius: 50%; background: color-mix(in srgb, var(--role) 18%, var(--surface-soft)); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px color-mix(in srgb, var(--role) 55%, transparent); color: var(--role); font-size: 13px; font-weight: 700; }
.rbac-avatar img { width: 100%; height: 100%; object-fit: cover; }
.rbac-staff-main { display: grid; flex: 1; min-width: 200px; gap: 2px; }
.rbac-staff-main strong { font-size: 14px; }
.rbac-staff-main small { color: var(--muted); font-size: 12.5px; }
.rbac-badge { padding: 0 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 700; line-height: 1.7; vertical-align: 1px; }
.rbac-badge.is-off { background: var(--surface-soft); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); }
.rbac-badge.is-warn { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); }
.rbac-role-form { margin: 0; }
.rbac-role-form select { min-width: 130px; min-height: 34px; padding: 4px 30px 4px 10px; border-color: color-mix(in srgb, var(--role) 45%, var(--line-strong)); font-size: 13px; font-weight: 600; }
.rbac-staff-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.rbac-staff-tools form { margin: 0; }
.is-danger-text { color: var(--danger) !important; }
.rbac-dialog[open] { display: flex; }
.rbac-dialog-form { display: contents; }
.rbac-dialog .settings-fields { margin: 0; }
.rbac-role-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; border: 0; }
.rbac-role-pick legend { margin-bottom: 8px; padding: 0; font-size: 13px; font-weight: 600; }
.rbac-role-pick label { position: relative; margin: 0; cursor: pointer; }
.rbac-role-pick input { position: absolute; opacity: 0; pointer-events: none; }
.rbac-role-pick label > span { display: grid; justify-items: start; gap: 4px; height: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 12px; box-sizing: border-box; }
.rbac-role-pick strong { font-size: 13.5px; }
.rbac-role-pick small { color: var(--muted); font-size: 11.5px; line-height: 1.35; }
.rbac-role-pick input:checked + span { border-color: var(--role); background: color-mix(in srgb, var(--role) 8%, var(--surface)); box-shadow: 0 0 0 1px var(--role); }
.rbac-role-pick input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.rbac-password { display: flex; gap: 8px; }
.rbac-password input { flex: 1; font-family: ui-monospace, Consolas, monospace; letter-spacing: .03em; }
@media (max-width: 620px) { .rbac-role-pick { grid-template-columns: 1fr; } }
.rbac-savebar [hidden] { display: none !important; }

/* Add staff from an existing student or employee */
.rbac-dialog [hidden] { display: none !important; }
.rbac-source { margin: 0; padding: 0; border: 0; }
.rbac-source legend { margin-bottom: 8px; padding: 0; font-size: 13px; font-weight: 600; }
.rbac-user-search { position: relative; display: grid; gap: 7px; }
.rbac-user-search > label { font-size: 13px; font-weight: 600; }
.rbac-search-box { width: 100%; box-sizing: border-box; min-height: 42px; }
.rbac-search-box input[type="search"] { width: 100%; min-height: 40px; font-size: 14px; }
.rbac-search-hint { margin: 0; font-size: 12.5px; }
.rbac-search-hint.is-error { color: var(--danger); font-weight: 600; }
.rbac-results { display: grid; max-height: 264px; margin: 0; padding: 4px; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-lg); list-style: none; }
.rbac-result { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; cursor: pointer; }
.rbac-result[aria-selected="true"] { background: var(--accent-soft); }
.rbac-result:hover { background: var(--surface-soft); }
.rbac-result > span:nth-child(2) { display: grid; flex: 1; min-width: 0; }
.rbac-result strong { overflow: hidden; font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.rbac-result small { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.rbac-result .rbac-avatar, .rbac-picked .rbac-avatar { --role: #6b4fd8; width: 34px; height: 34px; flex-basis: 34px; font-size: 12px; box-shadow: none; }
.rbac-result-role { padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.rbac-result-role.is-student { background: color-mix(in srgb, #1f8a4c 13%, transparent); color: #1f8a4c; }
.rbac-result-role.is-employee { background: color-mix(in srgb, #0f8f8a 13%, transparent); color: #0f8f8a; }
.rbac-picked { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); border-radius: 12px; background: var(--accent-soft); }
.rbac-picked > div { display: grid; flex: 1; min-width: 0; }
.rbac-picked strong { font-size: 14px; }
.rbac-picked small { color: var(--muted); font-size: 12.5px; }
.rbac-linked { display: inline-flex; align-items: center; gap: 5px; color: var(--accent) !important; font-weight: 600; }
.rbac-linked svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- User Campus Map: floating actions and a phone-first layout ---------- */
.campus-map-stage { position: relative; }
.campus-map-dock { position: absolute; bottom: 14px; left: 50%; z-index: 500; display: flex; gap: 8px; width: max-content; max-width: calc(100% - 24px); transform: translateX(-50%); }
.campus-map-dock .campus-route-button, .campus-map-dock button.campus-route-button { min-height: 46px; padding: 0 20px; border-radius: 999px; box-shadow: 0 8px 22px rgba(0, 0, 0, .28); font-size: 14.5px; white-space: nowrap; }
.campus-dock-primary, button.campus-dock-primary { border: 0; background: var(--danger); color: #fff; }
.campus-dock-primary:hover { background: color-mix(in srgb, var(--danger) 86%, #000); color: #fff; }
.campus-dock-secondary, button.campus-dock-secondary { border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); }
.campus-dock-secondary:hover { background: var(--surface-soft); }
.campus-map-dock button:disabled { box-shadow: none; opacity: .75; }
/* Keep the map credit visible above the floating buttons. */
.campus-map-stage .leaflet-bottom.leaflet-right { bottom: 66px; }
.campus-map-head-actions button svg { width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.campus-map-help { padding: 9px 14px; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.5; }
.campus-map-help summary { width: max-content; color: var(--muted); cursor: pointer; font-weight: 600; }
.campus-map-help summary:hover { color: var(--text); }
.campus-map-help p { margin: 6px 0 0; }

@media (max-width: 760px) {
    .campus-map-head-actions { display: none; }
    .campus-safety-layout { gap: 12px; }
    /* The map runs edge to edge, like a maps app. svh ignores the browser bar sliding in and out. */
    .campus-safety-layout .campus-map-card { margin-inline: -16px; border-right: 0; border-left: 0; border-radius: 0; box-shadow: none; }
    .campus-safety-layout .campus-map.geo-map { height: 62vh; height: min(62svh, 560px); min-height: 340px; }
    .campus-safety-layout .geo-map-toolbar { gap: 8px; padding: 8px 14px; }
    .campus-safety-layout .geo-map-message { font-size: 13px; line-height: 1.4; }
    .campus-map-dock { bottom: 12px; width: calc(100% - 24px); }
    .campus-map-dock .campus-dock-primary { flex: 1; justify-content: center; }
    .campus-map-dock .campus-route-button { min-height: 50px; padding: 0 16px; }
    .campus-map-stage .leaflet-bottom.leaflet-right { bottom: 70px; }
    .campus-map-stage .leaflet-control-attribution { font-size: 10px; }
    .campus-safety-panel.card { border-radius: 14px; }
    .campus-safety-section { padding: 14px; }
    .campus-safety-panel .safety-row, .campus-safety-panel button.safety-row { min-height: 52px; padding: 8px; }
    .campus-safety-panel .map-hotline { min-height: 52px; }
    .campus-safety-panel .safety-chips { flex-wrap: nowrap; margin-inline: -14px; padding: 2px 14px 4px; overflow-x: auto; scrollbar-width: none; }
    .campus-safety-panel .safety-chips::-webkit-scrollbar { display: none; }
    .campus-safety-panel .safety-chip { flex: 0 0 auto; min-height: 36px; }
}
@media (max-width: 380px) {
    .campus-map-dock .campus-dock-secondary [data-test-label] { display: none; }
    .campus-map-dock .campus-dock-secondary { padding: 0 14px; }
}
@media print { .campus-map-dock, .campus-map-help { display: none !important; } }

/* The user map card sizes to its content (the Map Manager's fixed card heights don't apply here). */
.campus-safety-layout .geo-map-card.card { height: auto; min-height: 0; }

/* Verify-your-email page: the 'send a new code' link is a small form button */
.auth-resend { margin: 0; }
.auth-link-button, button.auth-link-button { display: inline; width: auto; min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; color: var(--accent); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.auth-link-button:hover { background: none; color: var(--accent); }

/* ---------- Building occupancy ---------- */
.occ-live { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ok); font-size: 12.5px; font-weight: 700; }
.dashboard-head-actions .btn svg, .dashboard-head-actions button svg { width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[data-occ-setup][aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.occ-emergency { margin-bottom: 14px; }
.occ-stats { margin-bottom: 16px; }
.occ-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; margin-bottom: 16px; }
.occ-layout .geo-map-card.card { height: auto; min-height: 0; }
.occ-map-stage { position: relative; }
.occ-layout .occ-map.geo-map { height: calc(100vh - 330px); min-height: 440px; border: 0; border-radius: 0; }
.occ-map.is-setup { cursor: pointer; }
.occ-legend { position: absolute; bottom: 10px; left: 10px; z-index: 500; display: flex; flex-wrap: wrap; gap: 4px 10px; max-width: calc(100% - 20px); padding: 6px 10px; border-radius: 10px; background: color-mix(in srgb, var(--surface) 92%, transparent); box-shadow: var(--shadow); font-size: 11.5px; font-weight: 600; backdrop-filter: blur(4px); }
.occ-legend span { display: inline-flex; align-items: center; gap: 5px; }
.occ-legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.occ-label { border: 0; background: none; }
.occ-label span { display: inline-grid; min-width: 26px; height: 26px; padding: 0 6px; place-items: center; border: 2px solid #fff; border-radius: 999px; background: var(--c); box-shadow: 0 2px 6px rgba(0, 0, 0, .3); color: #fff; font-size: 12px; font-weight: 800; transform: translate(-50%, -50%); }

.occ-side { position: sticky; top: calc(76px + env(safe-area-inset-top, 0px)); display: flex; max-height: calc(100vh - 96px); flex-direction: column; padding: 0; overflow: hidden; }
.occ-tabs { display: flex; flex: 0 0 auto; gap: 2px; padding: 0 12px; border-bottom: 1px solid var(--line); }
.occ-tabs [role="tab"] { position: relative; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 0; background: transparent; color: var(--muted); box-shadow: none; font-size: 13.5px; font-weight: 600; }
.occ-tabs [role="tab"]:hover { background: transparent; color: var(--text); }
.occ-tabs [role="tab"][aria-selected="true"] { color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
.occ-tabs.has-glider [role="tab"][aria-selected="true"] { box-shadow: none; }
.occ-tabs > .tab-glider { box-shadow: inset 0 -2px 0 var(--accent); }
.occ-panel { flex: 1; min-height: 0; padding: 10px 12px 14px; overflow-y: auto; }
.occ-panel[hidden] { display: none; }
.occ-panel-note { margin: 2px 4px 10px; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.occ-buildings, .occ-people, .occ-readers { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.occ-empty { display: grid; gap: 4px; padding: 22px 8px; color: var(--muted); font-size: 13px; text-align: center; }
.occ-empty strong { color: var(--text); font-size: 14px; }
.occ-building, button.occ-building { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; width: 100%; min-height: 0; padding: 10px; border: 1px solid var(--line); border-left: 4px solid var(--c); border-radius: 10px; background: var(--surface); color: var(--text); box-shadow: none; font-weight: 400; text-align: left; }
.occ-building:hover, .occ-building.is-focused { background: var(--surface-soft); }
.occ-building.is-focused { border-color: var(--c); }
.occ-building-main { display: grid; min-width: 0; }
.occ-building-main strong { overflow: hidden; font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.occ-building-main small { color: var(--muted); font-size: 12px; }
.occ-building-count { align-self: center; font-variant-numeric: tabular-nums; }
.occ-building-count b { font-size: 18px; }
.occ-building-count small { margin-left: 3px; color: var(--muted); font-size: 12px; }
.occ-bar { grid-column: 1 / -1; height: 6px; overflow: hidden; border-radius: 999px; background: var(--surface-soft); }
.occ-bar i { display: block; height: 100%; border-radius: inherit; background: var(--c); transition: width .5s ease; }
.occ-people-tools { position: sticky; top: -10px; z-index: 1; display: grid; gap: 8px; margin: -10px -12px 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--surface); }
.occ-people-tools .history-search input[type="search"] { width: 100%; }
.occ-filter-row { display: flex; flex-wrap: wrap; gap: 8px; }
.occ-filter-row select { flex: 1 1 140px; min-height: 34px; padding: 4px 28px 4px 10px; font-size: 13px; }
.occ-person, .occ-reader { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-bottom: 1px solid var(--line); }
.occ-person:last-child, .occ-reader:last-child { border-bottom: 0; }
.occ-avatar { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 50%; font-size: 12px; font-weight: 700; }
.occ-avatar.is-student { background: color-mix(in srgb, #1f8a4c 15%, transparent); color: #1f8a4c; }
.occ-avatar.is-employee { background: color-mix(in srgb, #0f8f8a 15%, transparent); color: #0f8f8a; }
.occ-person-main { display: grid; flex: 1; min-width: 0; }
.occ-person-main strong { overflow: hidden; font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.occ-person-main small { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.occ-person-where, .occ-reader-counts { display: grid; justify-items: end; font-size: 12.5px; text-align: right; white-space: nowrap; }
.occ-person-where b { padding: 0 7px; border-radius: 999px; background: var(--surface-soft); font-size: 11.5px; line-height: 1.7; }
.occ-person-where b.is-building { background: var(--accent-soft); color: var(--accent); }
.occ-person-where small, .occ-reader-counts small { color: var(--muted); font-size: 11.5px; }
.occ-reader-kind { flex: 0 0 auto; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; }
.occ-reader-kind.is-gate { background: color-mix(in srgb, var(--info) 13%, transparent); color: var(--info); }
.occ-reader-kind.is-building { background: var(--accent-soft); color: var(--accent); }

.occ-chart-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px; margin-bottom: 10px; }
.occ-chart-head h3 { margin: 0; font-size: 15px; }
.occ-chart { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 4px; height: 170px; align-items: end; }
.occ-col { display: grid; grid-template-rows: 1fr auto; height: 100%; gap: 4px; }
.occ-col-bar { position: relative; align-self: end; min-height: 0; border-radius: 5px 5px 2px 2px; background: color-mix(in srgb, var(--accent) 55%, transparent); transition: height .5s ease; }
.occ-col.is-now .occ-col-bar { background: var(--accent); }
.occ-col-bar b { position: absolute; top: -17px; left: 50%; color: var(--muted); font-size: 10.5px; transform: translateX(-50%); }
.occ-col small { height: 14px; overflow: visible; color: var(--muted); font-size: 10.5px; white-space: nowrap; }
.occ-col.is-future .occ-col-bar { background: transparent; }

.occ-dialog[open] { display: flex; }
.occ-dialog-form { display: contents; }
.occ-dialog .settings-fields { margin: 0; }
.occ-dialog-icon { display: grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center; border-radius: 12px; background: var(--accent-soft); color: var(--accent); }
.occ-dialog-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.occ-reader-pick { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.occ-reader-pick legend { display: grid; margin-bottom: 8px; padding: 0; font-size: 13px; font-weight: 600; }
.occ-reader-pick legend small { color: var(--muted); font-weight: 400; }
[data-occ-reader-options] { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.occ-reader-option { display: flex; align-items: flex-start; gap: 9px; margin: 0; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.occ-reader-option input { width: 17px; min-width: 17px; height: 17px; min-height: 0; margin: 2px 0 0; accent-color: var(--accent); }
.occ-reader-option span { display: grid; min-width: 0; }
.occ-reader-option strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.occ-reader-option small { color: var(--muted); font-size: 11.5px; }
.occ-reader-option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.occ-reader-option.is-taken { cursor: not-allowed; opacity: .55; }
.occ-reader-add { display: flex; gap: 8px; }
.occ-reader-add input { flex: 1; }
.occ-reader-hint { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.occ-dialog-error { margin: 0; padding: 9px 12px; border-radius: 10px; background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); font-size: 13px; font-weight: 600; }
.occ-dialog [hidden] { display: none !important; }
.occ-dialog .report-sheet-foot { justify-content: space-between; }

@media (max-width: 1100px) {
    .occ-layout { grid-template-columns: 1fr; }
    .occ-side { position: static; max-height: 640px; }
    .occ-layout .occ-map.geo-map { height: 60vh; min-height: 360px; }
}
@media (max-width: 620px) {
    .occ-chart { gap: 2px; }
    .occ-col small { font-size: 9px; }
    .occ-legend { font-size: 10.5px; }
}

/* Sign-in pause: countdown notice */
.auth-lock { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--warn, #c98500) 40%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--warn, #c98500) 10%, transparent); }
.auth-lock-icon { display: grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--warn, #c98500) 18%, transparent); color: var(--warn, #c98500); }
.auth-lock-icon svg { width: 18px; height: 18px; }
.auth-lock p { display: grid; gap: 1px; margin: 0; font-size: 13.5px; }
.auth-lock b { font-size: 16px; font-variant-numeric: tabular-nums; }
.auth-lock.is-over { border-color: color-mix(in srgb, var(--ok, #1f8a4c) 40%, transparent); background: color-mix(in srgb, var(--ok, #1f8a4c) 10%, transparent); }
.auth-lock.is-over .auth-lock-icon { background: color-mix(in srgb, var(--ok, #1f8a4c) 18%, transparent); color: var(--ok, #1f8a4c); }
.auth-submit:disabled { cursor: not-allowed; opacity: .55; }

/* Bot protection: the honeypot stays off-screen; the Turnstile check sits above the button */
.captcha-trap { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.captcha-box { display: grid; gap: 4px; }
.captcha-box .cf-turnstile { min-height: 65px; }
.captcha-note { margin: 0; color: var(--muted, #6d6863); font-size: 12px; }
.captcha-note.is-done { color: var(--ok, #1f8a4c); font-weight: 600; }

.auth-optional { margin-left: 4px; color: var(--muted, #6d6863); font-size: 11.5px; font-style: normal; font-weight: 500; }
.auth-optional[hidden] { display: none; }

.rfid-ticket-id { display: block; margin-top: 2px; font-size: 11.5px; letter-spacing: .03em; opacity: .85; }
.rfid-ticket-id b { font-family: ui-monospace, Consolas, monospace; font-weight: 700; }

.user-id-number { font-family: ui-monospace, Consolas, monospace; font-weight: 600; color: var(--text); }

/* Terms and Conditions / Privacy Notice ------------------------------------------
   The agreement box on registration, and the two readable document pages. */
.auth-terms { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-soft); }
.auth-terms-summary { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.auth-terms-check { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 13.5px; font-weight: 500; line-height: 1.5; cursor: pointer; }
.auth-terms-check input { width: 18px; height: 18px; flex: 0 0 18px; min-height: 0; margin: 2px 0 0; accent-color: var(--accent); }
.auth-terms-check a { color: var(--accent); font-weight: 600; }
.auth-terms:has(input:focus-visible) { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.auth-terms:has(input:checked) { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); background: var(--ok-soft); }

.legal-body { min-height: 100vh; margin: 0; background: var(--page); color: var(--text); }
.legal-top { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 14px max(16px, calc((100% - 860px) / 2)); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(10px); }
.legal-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.legal-brand:hover { color: var(--text); text-decoration: none; }
.legal-brand .brand-mark { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 9px; background: var(--primary); box-shadow: none; color: #fff; font-size: 13px; font-weight: 800; }
.legal-brand strong { display: block; font-size: 14.5px; }
.legal-brand small { display: block; color: var(--muted); font-size: 12px; }
.legal-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface-soft); box-shadow: inset 0 0 0 1px var(--line); }
.legal-tabs a { padding: 7px 14px; border-radius: 999px; color: var(--muted); font-size: 13px; font-weight: 600; text-decoration: none; transition: background .15s ease, color .15s ease; }
.legal-tabs a:hover { color: var(--text); text-decoration: none; }
.legal-tabs a[aria-current="page"] { background: var(--surface); box-shadow: var(--shadow); color: var(--accent); }
.legal-main { width: min(860px, 100% - 32px); margin: 0 auto; padding: 32px 0 56px; }
.legal-doc { padding: clamp(22px, 4vw, 44px); border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); line-height: 1.65; }
.legal-updated { display: inline-block; margin: 0 0 14px; padding: 3px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 700; }
.legal-doc h1 { margin: 0 0 10px; font-size: clamp(26px, 4vw, 34px); letter-spacing: -.01em; }
.legal-lead { margin: 0 0 22px; color: var(--muted); font-size: 15.5px; }
.legal-doc a { color: var(--accent); }
.legal-toc { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2px 18px; margin: 0 0 28px; padding: 14px 18px; border-radius: 12px; background: var(--surface-soft); box-shadow: inset 0 0 0 1px var(--line); }
.legal-toc a { padding: 3px 0; color: var(--text); font-size: 13.5px; text-decoration: none; }
.legal-toc a:hover { color: var(--accent); }
.legal-doc section { padding-top: 22px; border-top: 1px solid var(--line); scroll-margin-top: 90px; }
.legal-doc section + section { margin-top: 22px; }
.legal-doc h2 { margin: 0 0 10px; font-size: 18px; }
.legal-doc p, .legal-doc li, .legal-doc dd { font-size: 14.5px; }
.legal-doc p { margin: 0 0 10px; }
.legal-doc ul { display: grid; gap: 6px; margin: 0 0 10px; padding-left: 20px; }
.legal-list { display: grid; grid-template-columns: minmax(130px, 180px) minmax(0, 1fr); gap: 10px 18px; margin: 0; }
.legal-list dt { font-size: 14px; font-weight: 700; }
.legal-list dd { margin: 0; color: var(--muted); }
.legal-back { margin: 22px 0 0; color: var(--muted); font-size: 13.5px; text-align: center; }
.legal-back a { color: var(--accent); font-weight: 600; }
@media (max-width: 640px) {
    .legal-top { position: static; }
    .legal-tabs { width: 100%; }
    .legal-tabs a { flex: 1; padding: 7px 8px; text-align: center; }
    .legal-list { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .legal-list dd { margin-bottom: 10px; }
}
@media print {
    .legal-top, .legal-toc, .legal-back { display: none; }
    .legal-doc { border: 0; box-shadow: none; padding: 0; }
}
.auth-legal-links { margin: 18px 0 0; color: var(--muted); font-size: 12px; text-align: center; }
.auth-legal-links a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.auth-legal-links a:hover { color: var(--accent); }
.legal-pilot { margin: 0 0 22px; padding: 12px 16px; border-radius: 12px; background: var(--warn-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 30%, transparent); color: var(--text); font-size: 14px; }
.legal-doc section .legal-pilot { margin: 4px 0 10px; }

/* About page (team) and credits at the bottom of pages */
.legal-tabs a { white-space: nowrap; }
.about-team { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.about-card { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-soft); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.about-card:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.about-card > div { min-width: 0; }
.about-card h3 { margin: 0; font-size: 15.5px; }
.legal-doc .about-role { margin: 2px 0 6px; color: var(--accent); font-size: 12.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.legal-doc .about-adviser .about-role { margin-bottom: 0; }
.about-email { display: block; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.about-avatar { display: grid; width: 48px; height: 48px; flex: 0 0 48px; place-items: center; border-radius: 50%; background: linear-gradient(150deg, #9a3f48, #3f2a3b); color: #fff; font-size: 16px; font-weight: 800; letter-spacing: .02em; }
.about-adviser { max-width: 420px; }
.about-adviser .about-avatar { background: linear-gradient(150deg, #4a6382, #2a292e); }
.legal-doc .about-signoff { margin-top: 16px; color: var(--muted); font-size: 13.5px; }
.legal-heart { display: inline-block; color: #d6455a; animation: legal-beat 1.6s ease-in-out infinite; }
@keyframes legal-beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.25); } 30% { transform: scale(1); } 45% { transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .legal-heart { animation: none; } .about-card:hover { transform: none; } }
.legal-footer { padding: 0 16px 32px; color: var(--muted); font-size: 12.5px; text-align: center; }
.legal-footer p { margin: 2px 0; }
.sidebar-credits { margin: 10px 0 0; color: rgba(255, 255, 255, .42); font-size: 11px; line-height: 1.6; text-align: center; }
.sidebar-credits a { color: rgba(255, 255, 255, .6); text-decoration: none; }
.sidebar-credits a:hover { color: #fff; text-decoration: underline; }
.about-email { overflow: visible; overflow-wrap: anywhere; text-overflow: clip; white-space: normal; }

/* About page photos: admins get a hidden "change photo" overlay that only appears on hover or keyboard focus. */
.about-avatar { position: relative; overflow: visible; }
.about-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.about-avatar.has-photo { background: var(--surface); }
.about-avatar form { position: absolute; inset: 0; margin: 0; }
.about-photo-edit { position: absolute; inset: 0; display: grid; margin: 0; place-items: center; border-radius: 50%; background: rgba(20, 18, 24, .55); color: #fff; cursor: pointer; opacity: 0; transition: opacity .15s ease; }
.about-photo-edit svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.about-photo-edit input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.about-photo-remove, button.about-photo-remove { position: absolute; top: -4px; right: -4px; display: grid; width: 20px; height: 20px; min-height: 0; margin: 0; padding: 0; place-items: center; border: 2px solid var(--surface); border-radius: 50%; background: var(--danger); color: #fff; font-size: 13px; font-weight: 800; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .15s ease; }
.about-avatar.is-editable:hover .about-photo-edit, .about-avatar.is-editable:focus-within .about-photo-edit,
.about-avatar.is-editable:hover .about-photo-remove, .about-avatar.is-editable:focus-within .about-photo-remove { opacity: 1; }
.about-photo-edit:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.about-notice { margin: 0 0 16px; padding: 10px 14px; border-radius: 10px; font-size: 13.5px; }
.about-notice.is-ok { background: var(--ok-soft); color: var(--ok); }
.about-notice.is-error { background: var(--accent-soft); color: var(--danger); }

/* Terms / Privacy / About popup ----------------------------------------------------
   One dialog with three tabs; a bottom sheet on phones. Opened by [data-info-open] links. */
.info-dialog { width: min(820px, calc(100% - 32px)); max-width: none; max-height: min(88vh, 920px); padding: 0; overflow: hidden; border: 0; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-lg); color: var(--text); }
.info-dialog[open] { display: flex; }
.info-dialog::backdrop { background: rgba(20, 18, 22, .5); backdrop-filter: blur(2px); }
.info-dialog-inner { display: flex; width: 100%; min-height: 0; flex-direction: column; }
.info-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 12px 22px; }
.info-dialog-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.info-dialog-brand .brand-mark { display: grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; border-radius: 9px; background: var(--primary); box-shadow: none; color: #fff; font-size: 13px; font-weight: 800; }
.info-dialog-brand strong { display: block; font-size: 15px; }
.info-dialog-brand small { display: block; color: var(--muted); font-size: 12px; }
.info-dialog-close, button.info-dialog-close { display: grid; width: 36px; height: 36px; min-height: 0; flex: 0 0 36px; margin: 0; padding: 0; place-items: center; border: 0; border-radius: 50%; background: transparent; box-shadow: none; color: var(--muted); cursor: pointer; transition: background .15s ease, color .15s ease; }
.info-dialog-close:hover { background: var(--surface-soft); color: var(--text); }
.info-dialog-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.info-tabs { position: relative; z-index: 0; display: flex; gap: 2px; margin: 0 22px; padding: 4px; isolation: isolate; border-radius: 999px; background: var(--surface-soft); box-shadow: inset 0 0 0 1px var(--line); }
.info-tabs > .tab-glider { border-radius: 999px; background: var(--surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .08), inset 0 0 0 1px var(--line); }
.info-tabs button, .info-tabs button[role="tab"] { flex: 1; min-height: 34px; margin: 0; padding: 6px 12px; border: 0; border-radius: 999px; background: transparent; box-shadow: none; color: var(--muted); font-size: 13.5px; font-weight: 600; cursor: pointer; transition: color .15s ease; }
.info-tabs button:hover { color: var(--text); }
.info-tabs button[aria-selected="true"] { color: var(--accent); }
.info-tabs:not(.has-glider) button[aria-selected="true"] { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.info-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.info-dialog-body { flex: 1; min-height: 0; padding: 18px 26px 24px; overflow-y: auto; overscroll-behavior: contain; scroll-padding-top: 8px; }
.info-dialog .legal-doc { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.info-dialog .legal-doc[hidden] { display: none; }
.info-dialog .legal-doc section { scroll-margin-top: 8px; }
.info-dialog .legal-updated { margin-bottom: 10px; }
.legal-doc .legal-title { margin: 0 0 8px; font-size: clamp(22px, 3vw, 28px); letter-spacing: -.01em; }
.info-dialog .legal-toc { margin-bottom: 20px; }
.info-dialog-foot { padding: 10px 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; text-align: center; }
.auth-legal-links a, .sidebar-credits a { cursor: pointer; }
@media (max-width: 640px) {
    .info-dialog { width: 100%; max-height: 92dvh; margin: auto 0 0; border-radius: 18px 18px 0 0; }
    .info-dialog-head { padding: 14px 12px 10px 16px; }
    .info-tabs { margin: 0 14px; }
    .info-dialog-body { padding: 16px 16px 22px; }
}
.info-dialog-body:focus { outline: none; }

/* About team cards: photo on top in a fixed square-round frame (cropped, never stretched), text centered below. */
.about-people > h2 { text-align: center; }
.about-team { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.about-card { flex-direction: column; align-items: center; justify-content: flex-start; gap: 12px; padding: 22px 16px 18px; text-align: center; }
.about-card > div { width: 100%; }
.about-avatar { box-sizing: border-box; width: 92px; height: 92px; min-width: 92px; max-width: 92px; flex: none; aspect-ratio: 1 / 1; font-size: 28px; box-shadow: 0 0 0 4px var(--surface), 0 6px 18px rgba(0, 0, 0, .14); }
.about-avatar img { display: block; width: 100%; height: 100%; max-width: none; max-height: none; border-radius: 50%; object-fit: cover; object-position: center 25%; }
.about-photo-edit svg { width: 26px; height: 26px; }
.about-photo-remove, button.about-photo-remove { top: 0; right: 0; width: 24px; height: 24px; }
.legal-doc .about-role { margin: 4px 0 8px; }
.about-adviser { width: min(320px, 100%); max-width: 320px; margin: 0 auto; }
.about-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Scan history: the latest entry/exit cards fold away smoothly (height, fade and a small lift together). */
.latest-gate-panel { display: grid; grid-template-rows: 1fr; margin-bottom: 16px; opacity: 1; transition: grid-template-rows .4s var(--ease-out, ease), margin-bottom .4s var(--ease-out, ease), opacity .3s ease, transform .4s var(--ease-out, ease); }
.latest-gate-panel-inner { min-height: 0; margin: -4px; padding: 4px; overflow: hidden; }
.latest-gate-panel .latest-gate-grid { margin-bottom: 0; }
.latest-gate-panel.is-collapsed { grid-template-rows: 0fr; margin-bottom: 0; opacity: 0; transform: translateY(-6px); pointer-events: none; }
.latest-gate-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transform: rotate(180deg); transition: transform .3s var(--ease-out, ease); }
.latest-gate-toggle[aria-expanded="false"] svg { transform: none; }
@media (prefers-reduced-motion: reduce) { .latest-gate-panel, .latest-gate-toggle svg { transition: none; } }
/* ---------- Anti-flash guard (see includes/page_head.php) ----------
   The page stays hidden until this stylesheet arrives; these lines show it again and hand icon sizing
   back to the rules above. Keep them at the very end of the file. */
:root { --cp-icon: auto; }
body { opacity: 1; animation: none; }

/* Log out confirmation (includes/logout_dialog.php) */
.logout-dialog { width: min(400px, calc(100% - 32px)); padding: 0; border: 0; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-lg); color: var(--text); }
.logout-dialog::backdrop { background: rgba(20, 18, 22, .5); backdrop-filter: blur(2px); }
.logout-dialog form { display: grid; justify-items: center; gap: 8px; margin: 0; padding: 26px 24px 22px; text-align: center; }
.logout-dialog-icon { display: grid; width: 52px; height: 52px; margin-bottom: 6px; place-items: center; border-radius: 16px; background: var(--accent-soft); color: var(--danger); }
.logout-dialog-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.logout-dialog h2 { margin: 0; font-size: 20px; }
.logout-dialog p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.logout-dialog p strong { color: var(--text); }
.logout-dialog .logout-dialog-note { padding: 8px 12px; border-radius: 10px; background: var(--surface-soft); font-size: 12.5px; }
.logout-dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-top: 12px; }
.logout-dialog-actions { justify-self: stretch; }
.logout-dialog-actions button { width: 100%; min-height: 42px; margin: 0; justify-content: center; }
.logout-dialog-actions button:disabled { opacity: .7; cursor: progress; }
@media (max-width: 420px) { .logout-dialog-actions { grid-template-columns: 1fr; } .logout-dialog-actions .btn-danger { order: -1; } }

/* Brand mark: the pin-and-building logo on a white tile (includes/page_head.php brand_logo()). */
.brand-mark, .sidebar-brand .brand-mark, .topbar .brand-mark, .auth-logo .brand-mark, .legal-brand .brand-mark, .info-dialog-brand .brand-mark {
    display: grid; flex: none; place-items: center; padding: 3px; overflow: hidden;
    background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .14), inset 0 0 0 1px rgba(0, 0, 0, .06); color: inherit;
}
.auth-logo .brand-mark { padding: 4px; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
.brand-mark .brand-logo { display: block; width: 100%; height: 100%; }
/* Landing page (index.php): logo, short intro, the two ways in. */
.landing-body { min-height: 100vh; margin: 0; background:
    radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 45%),
    radial-gradient(circle at 90% 100%, color-mix(in srgb, var(--info) 10%, transparent), transparent 40%), var(--page); }
.landing { display: flex; min-height: 100vh; flex-direction: column; align-items: center; justify-content: center; gap: 28px; width: min(520px, 100% - 32px); margin: 0 auto; padding: 48px 0 28px; }
.landing-hero { display: grid; justify-items: center; gap: 10px; text-align: center; }
.landing-mark { display: grid; width: 84px; height: 84px; margin-bottom: 6px; place-items: center; padding: 8px; border-radius: 24px; background: #fff; box-shadow: 0 10px 30px rgba(31, 29, 34, .12), inset 0 0 0 1px rgba(0, 0, 0, .05); }
.landing-mark .brand-logo { width: 100%; height: 100%; }
.landing-hero h1 { margin: 0; font-size: clamp(30px, 6vw, 40px); letter-spacing: -.02em; }
.landing-tagline { max-width: 420px; margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.55; }
.landing-pill { margin-top: 4px; padding: 4px 12px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 12.5px; font-weight: 700; }
.landing-choices { display: grid; gap: 12px; width: 100%; }
.landing-choice { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); color: var(--text); text-decoration: none; transition: border-color .15s ease, box-shadow .2s ease, transform .2s ease; }
.landing-choice:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); box-shadow: var(--shadow-lg); color: var(--text); text-decoration: none; transform: translateY(-2px); }
.landing-choice:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.landing-choice-icon { display: grid; width: 46px; height: 46px; flex: none; place-items: center; border-radius: 13px; background: var(--accent-soft); color: var(--accent); }
.landing-choice-icon.is-staff { background: var(--info-soft); color: var(--info); }
.landing-choice svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.landing-choice-text { display: grid; flex: 1; gap: 2px; min-width: 0; }
.landing-choice-text strong { font-size: 16px; }
.landing-choice-text small { color: var(--muted); font-size: 13px; }
.landing-choice-go { display: grid; color: var(--muted); transition: transform .2s ease, color .2s ease; }
.landing-choice:hover .landing-choice-go { color: var(--accent); transform: translateX(3px); }
.landing-register { margin: 4px 0 0; color: var(--muted); font-size: 14px; text-align: center; }
.landing-register a { color: var(--accent); font-weight: 700; }
.landing-foot { color: var(--muted); font-size: 12px; text-align: center; }
.landing-foot p { margin: 2px 0; }
.landing-foot a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.landing-foot a:hover { color: var(--accent); }
body.page-enter .landing > * { animation: motion-rise .48s var(--ease-out, ease-out) backwards; }
body.page-enter .landing > :nth-child(2) { animation-delay: .08s; }
body.page-enter .landing > :nth-child(3) { animation-delay: .16s; }
@media (prefers-reduced-motion: reduce) { body.page-enter .landing > * { animation: none; } .landing-choice:hover { transform: none; } }
/* Analytics page (admin/analytics.php) --------------------------------------------- */
.an-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 14px; }
.an-head h2 { margin: 0 0 4px; font-size: 26px; letter-spacing: -.01em; }
.an-head p { margin: 0; color: var(--muted); font-size: 14px; }
.an-head-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.an-head-actions .btn-outline { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }
.an-head-actions svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.an-range { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 12px; padding: 12px 14px; }
.an-presets { display: flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 10px; background: var(--surface-soft); box-shadow: inset 0 0 0 1px var(--line); }
.an-presets a { padding: 6px 12px; border-radius: 8px; color: var(--muted); font-size: 13px; font-weight: 600; text-decoration: none; }
.an-presets a:hover { color: var(--text); text-decoration: none; }
.an-presets a[aria-current] { background: var(--surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .08), inset 0 0 0 1px var(--line); color: var(--accent); }
.an-custom { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.an-custom label { margin: 0; }
.an-custom input[type="date"] { min-height: 36px; padding: 5px 8px; font-size: 13px; }
.an-custom .btn-outline { min-height: 36px; }
.an-period { margin: 0 0 0 auto; color: var(--muted); font-size: 13px; }
.an-period strong { color: var(--text); }
.an-nav { position: sticky; top: 0; z-index: 4; display: flex; gap: 4px; margin: 0 0 6px; padding: 8px 0; overflow-x: auto; background: var(--page); scrollbar-width: none; }
.an-nav a { flex: none; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.an-nav a:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); color: var(--accent); text-decoration: none; }
.an-section { margin: 0 0 22px; scroll-margin-top: 56px; }
.an-section-title { margin: 6px 0 10px; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.an-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.an-kpi { display: grid; gap: 4px; margin: 0; padding: 14px 16px; }
.an-kpi span { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.an-kpi strong { font-size: 26px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.an-kpi small { color: var(--muted); font-size: 12px; line-height: 1.35; }
.an-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.an-span-2 { grid-column: 1 / -1; }
.an-card { display: flex; min-width: 0; flex-direction: column; gap: 12px; margin: 0; padding: 16px 18px; }
.an-card-head h3 { margin: 0 0 3px; font-size: 15.5px; }
.an-card-head p { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.an-empty { margin: 0; padding: 22px 12px; border-radius: 10px; background: var(--surface-soft); color: var(--muted); font-size: 13px; text-align: center; }
.an-note { margin: 10px 2px 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.an-card .an-note { margin: 0; }
.an-chart { display: block; width: 100%; height: auto; overflow: visible; }
.an-chart .an-gridline { stroke: var(--line); stroke-width: 1; }
.an-axis { fill: var(--muted); font-size: 11px; }
.an-bar rect:first-child { fill: var(--accent); transition: fill .15s ease; }
.an-bar:hover rect:first-child { fill: color-mix(in srgb, var(--accent) 75%, #000); }
.an-bar .an-hit { fill: transparent; }
.an-area { fill: color-mix(in srgb, var(--info) 16%, transparent); }
.an-line { fill: none; stroke: var(--info); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.an-dot circle { fill: var(--surface); stroke: var(--info); stroke-width: 2; }
.an-dot:hover circle { r: 5; }
.an-heat-wrap { overflow-x: auto; }
.an-heat { display: grid; grid-template-columns: 34px repeat(var(--hours), minmax(18px, 1fr)); gap: 3px; min-width: max-content; }
.an-heat-hour { color: var(--muted); font-size: 10.5px; text-align: center; }
.an-heat-day { align-self: center; color: var(--muted); font-size: 11.5px; font-weight: 600; }
.an-heat-cell, .an-legend i { height: 22px; border-radius: 4px; background: color-mix(in srgb, var(--accent) calc(var(--level) * 100%), var(--surface-soft)); }
.an-heat-cell { min-width: 18px; }
.an-legend { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin: 0; color: var(--muted); font-size: 11.5px; }
.an-legend i { display: inline-block; width: 18px; height: 12px; }
.an-legend span { margin: 0 4px; }
.an-table-wrap { overflow-x: auto; }
.an-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.an-table th { padding: 8px 10px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11.5px; font-weight: 700; text-align: left; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.an-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.an-table tr:last-child td { border-bottom: 0; }
.an-table .num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.an-table .is-merged td:first-child { color: var(--muted); font-style: italic; }
.an-table .is-bad { color: var(--danger); font-weight: 700; }
.an-table td b { margin-left: 8px; font-variant-numeric: tabular-nums; }
.an-meter { display: inline-block; width: min(140px, 40vw); height: 8px; overflow: hidden; border-radius: 999px; background: var(--surface-soft); vertical-align: middle; }
.an-meter i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.an-funnel { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.an-funnel li { display: grid; grid-template-columns: minmax(130px, 1.1fr) minmax(80px, 1.4fr) 64px; align-items: center; gap: 12px; }
.an-funnel-text strong { display: block; font-size: 13.5px; }
.an-funnel-text small, .an-funnel-value small { color: var(--muted); font-size: 11.5px; }
.an-funnel-bar { height: 12px; overflow: hidden; border-radius: 999px; background: var(--surface-soft); }
.an-funnel-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 70%, var(--info))); }
.an-funnel-value { display: grid; justify-items: end; }
.an-funnel-value b { font-size: 15px; font-variant-numeric: tabular-nums; }
.an-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.an-chips span { padding: 3px 10px; border-radius: 999px; background: var(--surface-soft); color: var(--muted); font-size: 12px; font-weight: 600; }
.an-chips .is-warn { background: var(--warn-soft); color: var(--warn); }
.an-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.an-pair div { display: grid; gap: 2px; padding: 12px; border-radius: 10px; background: var(--surface-soft); }
.an-pair strong { font-size: 22px; font-variant-numeric: tabular-nums; }
.an-pair span { color: var(--muted); font-size: 12px; }
.an-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.an-list li { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; padding: 10px 12px; border-radius: 10px; background: var(--surface-soft); }
.an-list li span { font-size: 13.5px; font-weight: 600; }
.an-list li b { font-size: 16px; font-variant-numeric: tabular-nums; text-align: right; }
.an-list li small { grid-column: 1 / -1; color: var(--muted); font-size: 12px; }
.an-bars { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.an-bars li { display: grid; grid-template-columns: minmax(150px, 1.2fr) minmax(80px, 2fr) 92px; align-items: center; gap: 12px; }
.an-bars-label { font-size: 13px; }
.an-bars-track { height: 10px; overflow: hidden; border-radius: 999px; background: var(--surface-soft); }
.an-bars-track i { display: block; height: 100%; border-radius: inherit; background: var(--info); }
.an-bars-value { display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; }
.an-bars-value b { font-variant-numeric: tabular-nums; }
.an-bars-value small { color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.an-privacy { display: flex; align-items: center; gap: 8px; margin: 4px 0 8px; color: var(--muted); font-size: 12.5px; }
.an-privacy svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--ok); stroke-width: 2; }
@media (max-width: 1100px) { .an-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .an-grid { grid-template-columns: minmax(0, 1fr); } .an-period { margin-left: 0; } }
@media (max-width: 520px) {
    .an-kpi strong { font-size: 22px; }
    .an-funnel li { grid-template-columns: minmax(0, 1fr) 64px; }
    .an-funnel-bar { grid-column: 1 / -1; grid-row: 2; }
    .an-bars li { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; }
    .an-bars-track { grid-column: 1 / -1; grid-row: 2; }
}
@media print {
    .sidebar, .app-top, .an-range .an-custom, .an-presets, .an-head-actions, .an-nav, .sidebar-backdrop { display: none !important; }
    .app-shell, .app-main, main.app-content { display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
    body { background: #fff !important; }
    .an-card, .an-kpi, .an-range { break-inside: avoid; box-shadow: none !important; border: 1px solid #ddd !important; }
    .an-section { break-inside: auto; }
    .an-heat-cell, .an-legend i, .an-bar rect, .an-funnel-bar i, .an-bars-track i, .an-meter i { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}
/* Analytics chart labels stay readable when a chart is drawn smaller (half-width cards, phones). */
.an-grid > .an-card:not(.an-span-2) .an-axis { font-size: 19px; }
@media (max-width: 860px) { .an-axis, .an-grid > .an-card:not(.an-span-2) .an-axis { font-size: 22px; } }

/* Scroll boxes contain their screen-reader-only labels (otherwise those 1px labels sit outside the box's clipping
   and widen the whole page on phones, e.g. the users and security tables). */
.table-wrap, .an-table-wrap, .an-heat-wrap, .security-tabs { position: relative; }
.visually-hidden { top: 0; left: 0; }

/* ===================================================================================
   Phone layout (small screens and touch). Found by checking every page at 360px and 320px.
   =================================================================================== */
/* A "hidden" empty message stays hidden (its grid display used to win over [hidden]). */
.history-empty[hidden] { display: none; }

/* Touch: everything you tap is at least 40px tall. */
@media (pointer: coarse), (max-width: 760px) {
    .history-chip, .an-presets a, .segmented a, .segmented button, .dash-tabs button, .security-tabs a,
    .btn-sm, button.btn-sm, a.btn-sm, .listen-toggle, button.listen-toggle, .rbac-reset, button.rbac-reset,
    .settings-status-chip, .info-tabs button { min-height: 40px; }
    .segmented a, .segmented button, .dash-tabs button { display: inline-flex; align-items: center; justify-content: center; }
    .rbac-reset, button.rbac-reset { padding: 0 10px; }
    .leaflet-bar a, .leaflet-touch .leaflet-bar a { width: 38px; height: 38px; line-height: 38px; }
    .hotline-checklist .btn-sm, .listen-modes button, .latest-gate-count { min-height: 40px; }
    .listen-modes button { padding-inline: 14px; }
    .latest-gate-count { display: inline-flex; align-items: center; }
    .audit-entry details > summary, main details > summary { padding-block: 10px; }
    .campus-map-help > summary { padding-block: 10px; }
}

@media (max-width: 600px) {
    /* Profile / settings header: photo, name and badge stack instead of squeezing into one row. */
    .settings-hero-body { flex-direction: column; align-items: center; gap: 8px; text-align: center; }
    .settings-identity { flex: none; width: 100%; padding-top: 4px; }
    .settings-identity h2 { font-size: 20px; overflow-wrap: anywhere; }
    .settings-identity p { justify-content: center; }
    .settings-status-chip { margin: 2px 0 0; }
    .settings-nav { scroll-snap-type: x proximity; scrollbar-width: none; }
    .settings-nav a { scroll-snap-align: start; }

    /* Small number cards: the line under the number wraps instead of being cut off with "…". */
    .history-stat { align-items: flex-start; padding: 12px; gap: 10px; }
    .history-stat em { overflow: visible; white-space: normal; text-overflow: clip; line-height: 1.35; }
    .history-stat strong { font-size: 20px; }

    /* Admin dashboard: number cards two per row (the live "on campus" card spans both). */
    .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .dash-kpis > :first-child, .dash-kpis > :last-child:nth-child(even) { grid-column: 1 / -1; }
    .dash-insights { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .dash-kpi { padding: 13px 14px; }
    .dash-kpi strong { font-size: 22px; }
    .dash-kpi small { line-height: 1.35; }

    /* Campus alerts quick send: words wrap inside the buttons. */
    .ca-quick-button, button.ca-quick-button { flex-direction: column; align-items: flex-start; padding: 10px 12px; gap: 6px; }
    .ca-quick-icon { width: 32px; height: 32px; flex-basis: 32px; }
    .ca-quick-button strong { font-size: 13.5px; }

    /* Roles & access: permission names stay pinned on the left while the role columns scroll. */
    .rbac-matrix { min-width: 470px; }
    .rbac-matrix th, .rbac-matrix td { padding: 9px 8px; }
    .rbac-matrix thead th:not(:first-child) { width: 64px; font-size: 12px; }
    .rbac-matrix thead small { display: none; }
    .rbac-matrix thead th:first-child, .rbac-matrix tbody th { position: sticky; left: 0; z-index: 2; width: 150px; min-width: 150px; max-width: 150px; background: var(--surface); box-shadow: 1px 0 0 var(--line); }
    .rbac-matrix thead th:first-child { z-index: 3; background: var(--surface-soft); }
    .rbac-matrix tbody th, .rbac-matrix tbody th strong, .rbac-matrix tbody th small { white-space: normal; overflow-wrap: anywhere; }
    .rbac-matrix tbody th small { font-size: 11.5px; line-height: 1.35; }

    /* Charts: labels stay readable when charts are drawn small. */
    .dash-axis, .dash-chart text, .an-heat-hour, .an-legend { font-size: 11.5px; }
}

/* Wide data tables become one card per row (labels come from assets/js/table-cards.js). */
@media (max-width: 720px) {
    table.is-cardable, table.is-cardable tbody { display: block; width: 100%; min-width: 0; }
    table.is-cardable thead { display: none; }
    .table-wrap:has(> table.is-cardable) { overflow: visible; }
    table.is-cardable tbody tr:not(.day-row) { position: relative; display: grid; gap: 6px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
    table.is-cardable tbody tr:not(.day-row):hover { background: transparent; }
    table.is-cardable td { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: start; gap: 10px; min-width: 0; padding: 0; border: 0; white-space: normal; text-align: left; }
    table.is-cardable td::before { content: attr(data-label); color: var(--muted); font-size: 12px; font-weight: 600; line-height: 1.6; }
    table.is-cardable td.cell-lead { display: block; padding-right: 36px; font-size: 14px; }
    table.is-cardable td.cell-lead::before, table.is-cardable td.cell-bare::before, table.is-cardable td.cell-check::before { content: none; }
    table.is-cardable td.cell-bare { display: flex; flex-wrap: wrap; gap: 8px; }
    table.is-cardable td.cell-bare > *, table.is-cardable td.cell-actions > * { flex: 1; justify-content: center; }
    table.is-cardable td.cell-check { position: absolute; top: 12px; right: 12px; display: block; }
    table.is-cardable td.cell-check input { width: 22px; height: 22px; }
    table.is-cardable td small, table.is-cardable td .muted { display: block; overflow: visible; white-space: normal; text-overflow: clip; overflow-wrap: anywhere; }
    table.is-cardable .user-identity small { white-space: normal; }
    /* Values sit in the second column (extra lines too) at their natural width. */
    table.is-cardable td:not(.cell-lead):not(.cell-bare):not(.cell-check) > * { grid-column: 2; justify-self: start; max-width: 100%; }
    table.is-cardable td.cell-bare { width: 100%; }
    table.is-cardable td.cell-bare > .btn, table.is-cardable td.cell-bare > a.btn { width: 100%; min-height: 42px; justify-content: center; }
    table.is-cardable td.cell-bare > .row-chevron { display: inline-flex; flex: 1; min-height: 40px; align-items: center; justify-content: flex-end; }
    /* Scan history: compact two-line cards (time + person, then result · card · gate · operator). */
    table.is-cardable.scan-table tbody tr:not(.day-row) { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 11px 16px; }
    table.is-cardable.scan-table td { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; }
    table.is-cardable.scan-table td::before { font-size: 11px; font-weight: 600; line-height: 1; }
    table.is-cardable.scan-table td > * { grid-column: auto; }
    table.is-cardable.scan-table td.cell-lead { flex: 0 0 auto; padding: 0; font-size: 13px; font-weight: 700; }
    table.is-cardable.scan-table td[data-label="Person"] { flex: 1 1 60%; min-width: 0; font-size: 13.5px; }
    table.is-cardable.scan-table td[data-label="Person"]::before, table.is-cardable.scan-table td[data-label="Result"]::before { content: none; }
    table.is-cardable.scan-table td[data-label="Card"], table.is-cardable.scan-table td[data-label="Reader"], table.is-cardable.scan-table td[data-label="Operator"] { color: var(--muted); }
    table.is-cardable tr.day-row { display: block; }
    table.is-cardable tr.day-row th { display: block; padding: 10px 16px; background: var(--surface-soft); text-align: left; }
}
/* Advanced settings (admin/advanced.php): password gate, database overview, data reset. */
.adv-unlock { display: grid; justify-items: center; gap: 10px; max-width: 460px; margin: 24px auto; padding: 32px 26px; text-align: center; }
.adv-unlock-icon { display: grid; width: 56px; height: 56px; place-items: center; border-radius: 16px; background: var(--accent-soft); color: var(--accent); }
.adv-unlock-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.adv-unlock h3 { margin: 4px 0 0; font-size: 20px; }
.adv-unlock p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.adv-unlock-form { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; margin-top: 8px; }
.adv-unlock-form input { flex: 1 1 200px; min-height: 44px; }
.adv-unlock-form > *:not(button) { flex: 1 1 100%; }
.adv-unlock-form button { min-height: 44px; flex: 1 1 100%; }
.adv-session { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 14px; padding: 10px 14px; border-radius: 12px; background: var(--ok-soft); color: var(--ok); font-size: 13.5px; }
.adv-session svg, .adv-note svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.adv-session span { flex: 1 1 220px; color: var(--text); }
.adv-session form { margin: 0; }
.adv-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.adv-stats li { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--surface-soft); box-shadow: inset 0 0 0 1px var(--line); }
.adv-stats strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.adv-stats span { color: var(--muted); font-size: 12.5px; }
.adv-note { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.adv-danger { margin-top: 14px; border-color: color-mix(in srgb, var(--danger) 30%, var(--line)); }
.adv-danger .settings-card-icon { background: var(--accent-soft); color: var(--danger); }
.adv-danger .adv-unlock { margin: 8px auto 4px; padding: 8px 0 4px; box-shadow: none; }
.adv-subhead { display: flex; align-items: flex-start; gap: 10px; margin: 18px 0 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.adv-subhead > span { display: grid; width: 32px; height: 32px; flex: none; place-items: center; border-radius: 9px; background: var(--accent-soft); color: var(--danger); }
.adv-subhead svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.adv-subhead h4 { margin: 0 0 2px; font-size: 15px; }
.adv-subhead p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.adv-stats + .adv-note { margin-top: 10px; }
.adv-reset-form { display: grid; gap: 14px; margin: 0; }
.adv-reset-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.adv-reset-tools .muted { margin-left: auto; font-size: 13px; }
.adv-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 8px; }
.adv-group { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 10px; margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.adv-group:hover { border-color: var(--line-strong); }
.adv-group.is-checked { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); background: color-mix(in srgb, var(--danger) 5%, var(--surface)); }
.adv-group input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--danger); }
.adv-group input:disabled { opacity: 1; }
.adv-group-text { display: grid; gap: 2px; min-width: 0; }
.adv-group-text strong { font-size: 14px; }
.adv-group-text small { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.adv-group-text em { color: var(--danger); font-size: 12px; font-style: normal; font-weight: 600; }
.adv-group-text em[hidden] { display: none; }
.adv-group-count { padding: 2px 9px; border-radius: 999px; background: var(--surface-soft); color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; font-weight: 700; }
.adv-confirm { display: grid; gap: 12px; margin: 0; padding: 14px 16px 16px; border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--line)); border-radius: 12px; }
.adv-confirm legend { padding: 0 6px; color: var(--danger); font-size: 13px; font-weight: 700; }
.adv-confirm .adv-note { margin: 0; }
.adv-confirm input[name="confirm_text"] { font-family: ui-monospace, Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; }
@media (max-width: 600px) { .adv-groups { grid-template-columns: minmax(0, 1fr); } .adv-reset-tools .muted { flex-basis: 100%; margin-left: 0; } }
/* Backup & Restore layout: create + safety copies on the left, restore on the right, advanced settings below. */
.backup-column { display: grid; gap: 16px; align-content: start; min-width: 0; }
.backup-layout { align-items: stretch; }
.backup-layout > .backup-restore-card { align-self: stretch; }
@media (max-width: 1000px) { .backup-layout { align-items: start; } }
.backup-column .backup-copies { margin: 0; }
.backup-layout + .adv-danger { margin-top: 0; }
/* Advanced database settings, locked: one compact row instead of a tall empty block. */
.adv-danger .adv-unlock { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(260px, 380px); align-items: center; justify-items: stretch; gap: 14px 16px; max-width: none; margin: 4px 0 0; padding: 14px 16px; border-radius: 12px; background: var(--surface-soft); box-shadow: inset 0 0 0 1px var(--line); text-align: left; }
.adv-danger .adv-unlock-icon { width: 44px; height: 44px; border-radius: 12px; }
.adv-danger .adv-unlock-icon svg { width: 21px; height: 21px; }
.adv-unlock-copy h3 { margin: 0 0 2px; font-size: 15px; }
.adv-unlock-copy p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.adv-danger .adv-unlock-form { flex-wrap: nowrap; margin: 0; }
.adv-danger .adv-unlock-form > *:not(button) { flex: 1 1 auto; min-width: 0; }
.adv-danger .adv-unlock-form button { flex: 0 0 auto; padding-inline: 20px; }
@media (max-width: 760px) {
    .adv-danger .adv-unlock { grid-template-columns: auto minmax(0, 1fr); }
    .adv-danger .adv-unlock-form { grid-column: 1 / -1; }
}

/* Browser-filled fields keep the theme colours instead of a bright yellow/olive highlight. */
input:autofill, input:-webkit-autofill { filter: none; box-shadow: 0 0 0 1000px var(--surface-soft) inset; -webkit-text-fill-color: var(--text); caret-color: var(--text); }
input:-webkit-autofill:focus { box-shadow: 0 0 0 1000px var(--surface-soft) inset, 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
/* Backup counts: one even row of five (two rows on phones), never a lone stretched item. */
.backup-contents { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.backup-contents li { min-width: 0; padding: 9px 10px; }
.backup-contents span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1240px) and (min-width: 1001px) { .backup-contents span { font-size: 11px; } }
@media (max-width: 560px) { .backup-contents { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Hidden card numbers ("124*******") with a press-and-hold eye button (assets/js/rfid-reveal.js). */
.rfid-masked { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; vertical-align: middle; }
.rfid-masked .rfid-code, .scan-recent-who .rfid-masked .rfid-code { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; letter-spacing: .04em; white-space: nowrap; }
.rfid-reveal, button.rfid-reveal { display: inline-grid; width: 28px; height: 28px; min-height: 0; flex: none; margin: 0; padding: 0; place-items: center; border: 0; border-radius: 8px; background: transparent; box-shadow: none; color: var(--muted); cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; transition: background .15s ease, color .15s ease; }
.rfid-reveal:hover { background: var(--surface-soft); color: var(--text); }
.rfid-reveal svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.rfid-masked.is-revealed .rfid-reveal { background: var(--accent-soft); color: var(--accent); }
.rfid-masked.is-revealed .rfid-code { color: var(--accent); }
@media (pointer: coarse) { .rfid-reveal, button.rfid-reveal { width: 40px; height: 40px; } }
/* Campus alerts: "Send by" channels, delivery status lights and the test text box. */
.ca-channels { display: flex; flex-wrap: wrap; gap: 8px; }
.ca-channel { display: flex; flex: 1 1 170px; align-items: flex-start; gap: 9px; margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.ca-channel input { width: 17px; height: 17px; min-height: 0; flex: none; margin: 2px 0 0; accent-color: var(--accent); }
.ca-channel span { display: grid; gap: 1px; }
.ca-channel strong { font-size: 13.5px; }
.ca-channel small { color: var(--muted); font-size: 12px; }
.ca-channel:has(input:checked) { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.ca-channel.is-fixed { cursor: default; opacity: .85; }
.ca-channel.is-unavailable { cursor: not-allowed; opacity: .55; }
.ca-status { margin: 4px 0 2px; padding: 10px 12px; border-radius: 12px; background: var(--surface-soft); box-shadow: inset 0 0 0 1px var(--line); }
.ca-status-title { display: flex; align-items: center; justify-content: space-between; margin: 0 0 6px; color: var(--muted); font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.ca-status-refresh, button.ca-status-refresh { display: grid; width: 28px; height: 28px; min-height: 0; margin: 0; padding: 0; place-items: center; border: 0; border-radius: 8px; background: transparent; box-shadow: none; color: var(--muted); cursor: pointer; }
.ca-status-refresh:hover { background: var(--surface); color: var(--text); }
.ca-status-refresh svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ca-status ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.ca-status li { display: flex; align-items: flex-start; gap: 9px; }
.ca-status li > i { width: 10px; height: 10px; flex: none; margin-top: 4px; border-radius: 50%; background: var(--muted); }
.ca-status li span { display: grid; gap: 0; min-width: 0; }
.ca-status li strong { font-size: 13px; }
.ca-status li small { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.ca-status li[data-state="ok"] > i { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent); }
.ca-status li[data-state="offline"] > i { background: var(--warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 20%, transparent); }
.ca-status li[data-state="error"] > i { background: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 20%, transparent); }
.ca-status li[data-state="off"] > i { background: transparent; box-shadow: inset 0 0 0 2px var(--line-strong); }
.ca-status li[data-state="checking"] > i { background: var(--line-strong); animation: ca-status-pulse 1s ease-in-out infinite; }
.ca-status li[data-state="offline"] small { color: var(--warn); }
.ca-status li[data-state="error"] small { color: var(--danger); }
@keyframes ca-status-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .ca-status li[data-state="checking"] > i { animation: none; } }
.ca-send-warn[hidden] { display: none; }
.ca-sms-test { display: grid; gap: 6px; margin: 6px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.ca-sms-test label { margin: 0; font-size: 13px; font-weight: 700; }
.ca-sms-test > div { display: flex; gap: 8px; }
.ca-sms-test input { flex: 1 1 auto; min-width: 0; }
.ca-sms-test button { flex: none; }
.ca-sms-test small { color: var(--muted); font-size: 12px; }
/* Campus alerts alignment: quick-send buttons start at the left like everything else, both columns end on
   the same line (the message box takes the extra height), status dots sit level with their labels. */
.ca-quick-button, button.ca-quick-button { justify-content: flex-start; }
.ca-compose { display: flex; flex-direction: column; align-self: stretch; }
.ca-compose > .ca-field:has(> textarea) { display: flex; flex: 1 1 auto; flex-direction: column; }
.ca-compose > .ca-field > textarea { flex: 1 1 auto; min-height: 150px; }
.ca-status li > i { margin-top: 5px; }
@media (max-width: 1100px) { .ca-compose { align-self: start; } .ca-compose > .ca-field:has(> textarea) { flex: none; } }
/* Sent alerts: type filters, alerts grouped by day, message preview, delivery icons, repeats collapsed. */
.ca-history-head { align-items: flex-start; gap: 10px 16px; margin-bottom: 12px; }
.ca-history-head p { margin: 2px 0 0; color: var(--muted); font-size: 12.5px; }
.ca-history-tabs { position: relative; z-index: 0; display: flex; gap: 2px; margin: 0 0 12px; padding: 0; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.ca-history-tabs::-webkit-scrollbar { display: none; }
.ca-history-tabs [role="tab"] { --ca: var(--accent); display: inline-flex; flex: none; align-items: center; gap: 7px; min-height: 42px; margin: 0; padding: 8px 12px; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--muted); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.ca-history-tabs [role="tab"]:hover { background: transparent; color: var(--text); }
.ca-history-tabs [role="tab"][aria-selected="true"] { color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
.ca-history-tabs.has-glider [role="tab"][aria-selected="true"] { box-shadow: none; }
.ca-history-tabs > .tab-glider { box-shadow: inset 0 -2px 0 var(--accent); }
.ca-history-tabs [role="tab"] b { min-width: 20px; padding: 0 6px; line-height: 18px; border-radius: 6px; background: var(--surface-soft); color: var(--muted); font-size: 11px; text-align: center; transition: background .2s, color .2s; }
.ca-history-tabs [role="tab"][aria-selected="true"] b { background: var(--accent-soft); color: var(--accent); }
.ca-history-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.ca-history-tools label { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.ca-history-tools select { width: auto; min-height: 36px; padding-top: 0; padding-bottom: 0; font-size: 13px; }
.ca-history-search { flex: 1 1 220px; }
.ca-history-search input { width: 100%; min-height: 36px; font-size: 13px; }
.ca-history-tools [data-history-clear][hidden], .ca-history-none[hidden] { display: none; }
.ca-history-none { margin: 4px 0 12px; padding: 18px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); font-size: 13px; text-align: center; }
.ca-history-list li:not([hidden]) { animation: ca-history-in .22s var(--ease-out, ease-out) both; }
@keyframes ca-history-in { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .ca-history-list li:not([hidden]) { animation: none; } }
@media (max-width: 760px) {
    .ca-history-tools label:not(.ca-history-search) { flex: 1 1 30%; flex-direction: column; align-items: stretch; gap: 3px; font-size: 11.5px; }
    .ca-history-tools select { width: 100%; }
    .ca-history-search { flex-basis: 100%; }
}
.ca-history-days { display: grid; gap: 14px; }
.ca-history-day[hidden] { display: none; }
.ca-history-day h4 { margin: 0 0 6px; color: var(--muted); font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.ca-history-list { gap: 6px; }
.ca-history-list li:first-child .ca-history-row, .ca-history-row, button.ca-history-row { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 14px; min-height: 0; padding: 12px 14px 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.ca-history-row::before { position: absolute; top: 10px; bottom: 10px; left: 0; width: 3px; border-radius: 0 3px 3px 0; background: var(--ca); content: ""; }
.ca-history-row:hover, .ca-history-list li:first-child .ca-history-row:hover { border-color: color-mix(in srgb, var(--ca) 40%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--ca) 5%, var(--surface)); }
.ca-history-icon { width: 38px; height: 38px; flex-basis: 38px; }
.ca-history-main { gap: 3px; }
.ca-history-title { display: flex; min-width: 0; align-items: center; gap: 8px; }
.ca-history-title strong { overflow: hidden; font-size: 14px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.ca-history-repeat { flex: none; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--ca) 14%, transparent); color: var(--ca); font-size: 11px; font-weight: 800; }
.ca-history-snippet { overflow: hidden; color: var(--muted); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.ca-history-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.ca-history-tag { padding: 1px 8px; border-radius: 999px; background: var(--surface-soft); color: var(--muted); font-size: 11px; font-weight: 600; }
.ca-history-tag.is-type { background: color-mix(in srgb, var(--ca) 12%, transparent); color: var(--ca); }
.ca-history-delivery { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.ca-history-stat { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: var(--surface-soft); color: var(--text); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ca-history-stat svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
.ca-history-stat.is-ok { background: var(--ok-soft); color: var(--ok); }
.ca-history-stat.is-bad { background: var(--accent-soft); color: var(--danger); }
.ca-history-when { display: grid; justify-items: end; gap: 1px; min-width: 76px; text-align: right; white-space: nowrap; }
.ca-history-when strong { font-size: 13px; font-variant-numeric: tabular-nums; }
.ca-history-when small { color: var(--muted); font-size: 11.5px; }
.ca-history-more[hidden] { display: none; }
@media (max-width: 760px) {
    .ca-history-row, button.ca-history-row, .ca-history-list li:first-child .ca-history-row { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 8px 12px; }
    .ca-history-delivery { grid-column: 2; justify-content: flex-start; }
    .ca-history-when { display: flex; grid-column: 2; align-items: baseline; gap: 6px; min-width: 0; text-align: left; }
    .ca-history-meta { display: none; }
}
/* Quick send header: "Send to" and "Who" sit together on the right. */
.ca-quick-head { justify-content: flex-start; }
.ca-quick-head > div:first-child { margin-right: auto; }

/* Analytics delivery speed: small grey hint under a channel name; the note sits below the table. */
.an-muted { color: var(--muted); font-size: 11.5px; font-weight: 500; }
.an-card .an-table-wrap + .an-note { margin-top: 10px; }

/* Animated logo. Landing page: the pin draws itself, the building rises inside it, the base line sweeps in,
   then the mark floats gently while a soft "you are here" ring pulses around it.
   Sign-in: the same drawing repeats as a loading screen. */
.brand-logo-animated path { stroke-dasharray: 1 1.2; stroke-dashoffset: 1; }
.brand-logo-animated .bl-home { transform-box: fill-box; transform-origin: 50% 100%; }
.brand-logo-animated .bl-base { transform-box: fill-box; transform-origin: 50% 50%; }
.brand-logo-animated.is-intro .bl-pin { animation: bl-draw .9s cubic-bezier(.6, 0, .2, 1) .15s forwards; }
.brand-logo-animated.is-intro .bl-roof { animation: bl-draw .55s cubic-bezier(.6, 0, .2, 1) .7s forwards; }
.brand-logo-animated.is-intro .bl-door { animation: bl-draw .4s ease-out 1.05s forwards; }
.brand-logo-animated.is-intro .bl-post { animation: bl-draw .25s ease-out 1.3s forwards; }
.brand-logo-animated.is-intro .bl-base { stroke-dashoffset: 0; transform: scaleX(0); animation: bl-sweep .45s cubic-bezier(.3, 1.4, .5, 1) 1.4s forwards; }
@keyframes bl-draw { to { stroke-dashoffset: 0; } }
@keyframes bl-sweep { to { transform: scaleX(1); } }
.landing-mark { position: relative; animation: bl-mark-in .6s cubic-bezier(.2, .9, .3, 1.2) both, bl-float 4s ease-in-out 2s infinite; }
.landing-mark::after { position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(180, 80, 90, .35); content: ""; pointer-events: none; animation: bl-ring 2.8s ease-out 1.9s infinite; }
@keyframes bl-mark-in { from { opacity: 0; transform: translateY(10px) scale(.86); } }
@keyframes bl-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes bl-ring { 0% { box-shadow: 0 0 0 0 rgba(180, 80, 90, .32); } 70%, 100% { box-shadow: 0 0 0 16px rgba(180, 80, 90, 0); } }
/* Landing text follows the logo in. */
.landing-hero > h1, .landing-hero > .landing-tagline, .landing-hero > .landing-pill, .landing-choices { animation: bl-rise .6s cubic-bezier(.2, .8, .3, 1) both; }
.landing-hero > h1 { animation-delay: .35s; }
.landing-hero > .landing-tagline { animation-delay: .45s; }
.landing-hero > .landing-pill { animation-delay: .55s; }
.landing-choices { animation-delay: .65s; }
@keyframes bl-rise { from { opacity: 0; transform: translateY(8px); } }

/* Sign-in loading screen */
.auth-loader { position: fixed; z-index: 2000; inset: 0; display: grid; place-items: center; padding: 16px; background: color-mix(in srgb, var(--page, #f6f5f7) 82%, transparent); opacity: 0; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: opacity .25s ease; }
.auth-loader[hidden] { display: none; }
.auth-loader.is-visible { opacity: 1; }
.auth-loader-card { display: grid; justify-items: center; gap: 14px; transform: translateY(6px) scale(.97); transition: transform .35s cubic-bezier(.2, .9, .3, 1.2); }
.auth-loader.is-visible .auth-loader-card { transform: none; }
.auth-loader-mark { position: relative; display: grid; width: 92px; height: 92px; place-items: center; padding: 10px; border-radius: 26px; background: #fff; box-shadow: 0 14px 36px rgba(31, 29, 34, .16), inset 0 0 0 1px rgba(0, 0, 0, .05); }
.auth-loader-mark::after { position: absolute; inset: 0; border-radius: inherit; content: ""; animation: bl-ring 1.6s ease-out infinite; }
.auth-loader-mark .brand-logo { width: 100%; height: 100%; }
.auth-loader-card strong { color: var(--text); font-size: 15px; font-weight: 700; }
.auth-loader-card strong::after { display: inline-block; width: 1.2em; text-align: left; content: ""; animation: bl-dots 1.2s steps(4, end) infinite; }
@keyframes bl-dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75%, 100% { content: "..."; } }
.auth-loader-bar { position: relative; width: 140px; height: 4px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, #b4505a 16%, transparent); }
.auth-loader-bar i { position: absolute; top: 0; bottom: 0; left: 0; width: 40%; border-radius: inherit; background: #b4505a; animation: bl-bar 1.1s cubic-bezier(.6, 0, .4, 1) infinite; }
@keyframes bl-bar { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.brand-logo-animated.is-loading .bl-pin { animation: bl-loop-pin 2.2s cubic-bezier(.6, 0, .3, 1) infinite; }
.brand-logo-animated.is-loading .bl-roof { animation: bl-loop-home 2.2s cubic-bezier(.6, 0, .3, 1) infinite; }
.brand-logo-animated.is-loading .bl-door { animation: bl-loop-door 2.2s ease-out infinite; }
.brand-logo-animated.is-loading .bl-post { animation: bl-loop-door 2.2s ease-out infinite; }
.brand-logo-animated.is-loading .bl-base { animation: bl-loop-base 2.2s ease-out infinite; }
@keyframes bl-loop-pin { 0% { stroke-dashoffset: 1; } 35%, 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }
@keyframes bl-loop-home { 0%, 20% { stroke-dashoffset: 1; } 50%, 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }
@keyframes bl-loop-door { 0%, 35% { stroke-dashoffset: 1; } 58%, 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }
@keyframes bl-loop-base { 0%, 45% { stroke-dashoffset: 1; } 65%, 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }
@media (prefers-reduced-motion: reduce) {
    .brand-logo-animated path { stroke-dashoffset: 0 !important; transform: none !important; animation: none !important; }
    .landing-mark, .landing-mark::after, .auth-loader-mark::after, .landing-hero > *, .landing-choices { animation: none !important; }
    .auth-loader-bar i { animation-duration: 2.4s; }
}
/* Users page: Programs dialog (the Department / Course list). */
.programs-dialog { width: min(680px, calc(100vw - 32px)); }
.programs-dialog-body { display: grid; gap: 16px; padding: 20px 22px 22px; }
.programs-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.programs-head h2 { margin: 0; font-size: 18px; }
.programs-head p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.programs-head .btn-sm { flex: none; min-width: 34px; }
.programs-add { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); }
.programs-add h3, .programs-list h3 { margin: 0; font-size: 13.5px; }
.programs-add-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.programs-add-grid label { display: grid; gap: 4px; margin: 0; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.programs-add-grid label:nth-of-type(2) { grid-column: 1 / -1; grid-row: 2; }
.programs-add-grid input { height: 40px; min-height: 40px; }
.auth-grid > .auth-field-full { grid-column: 1 / -1; }
.programs-add-grid small { color: var(--muted); font-size: 11.5px; font-weight: 500; }
.programs-add > button { justify-self: end; }
.programs-list { display: grid; gap: 14px; }
.programs-list h3 small { margin-left: 6px; color: var(--muted); font-size: 11.5px; font-weight: 500; }
.programs-list ul { display: grid; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.programs-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; }
.programs-list li > span:first-child { display: grid; min-width: 0; gap: 1px; }
.programs-list li strong { font-size: 13.5px; }
.programs-list li small { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.programs-list form { margin: 0; }
.programs-count { color: var(--muted); font-size: 12px; white-space: nowrap; }
.programs-remove:hover { border-color: var(--danger); color: var(--danger); }
.programs-note { margin: 0; color: var(--muted); font-size: 12px; }
@media (max-width: 600px) { .programs-add-grid { grid-template-columns: 1fr; } .programs-add-grid label:nth-of-type(2) { grid-row: auto; } .programs-list li { grid-template-columns: minmax(0, 1fr) auto; } .programs-count { grid-row: 2; } }
/* "You're offline" bar (assets/js/offline-banner.js), on every page. */
.offline-banner { position: fixed; z-index: 3000; top: 0; right: 0; left: 0; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 16px; background: #8a5a00; color: #fff; font-size: 13px; font-weight: 600; text-align: center; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); transform: translateY(-100%); transition: transform .3s cubic-bezier(.2, .8, .3, 1), background .3s; }
.offline-banner[hidden] { display: none; }
.offline-banner.is-shown { transform: none; }
.offline-banner.is-back { background: #2f7d4f; }
.offline-banner svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.offline-banner.is-back svg { display: none; }
html.is-offline body { padding-top: var(--offline-bar-h, 36px); }
html.is-offline .sidebar { top: var(--offline-bar-h, 36px); height: calc(100dvh - var(--offline-bar-h, 36px)); }
html.is-offline .app-top { top: var(--offline-bar-h, 36px); }
@media (prefers-reduced-motion: reduce) { .offline-banner { transition: none; } }

/* Offline scanner (admin/offline_scanner.php): sync dots are green (synced), yellow (waiting), red (failed). */
.osc-body { min-height: 100vh; margin: 0; background: var(--page); color: var(--text); }
.osc-dot[hidden] { display: none; }
.osc { --synced: #2f9e5b; --pending: #d9a400; --failed: #d14b4b; display: grid; gap: 14px; width: min(1280px, 100% - 32px); margin: 0 auto; padding: 16px 0 28px; }
.osc-dot, .osc-legend i, .osc-pill-sync b::before { display: inline-block; width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--pending); }
.osc-dot.is-synced, .osc-legend i.is-synced, .osc-pill-sync b.is-synced::before { background: var(--synced); }
.osc-dot.is-failed, .osc-legend i.is-failed, .osc-pill-sync b.is-failed::before { background: var(--failed); }
.osc-dot.is-pending, .osc-legend i.is-pending, .osc-pill-sync b.is-pending::before { background: var(--pending); }
.osc-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.osc-brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.osc-brand:hover { text-decoration: none; }
.osc-brand strong { display: block; font-size: 16px; }
.osc-brand small { color: var(--muted); font-size: 12px; }
.osc-head-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.osc-pill { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 12.5px; font-weight: 700; }
.osc-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.osc-pill[data-state="online"] i { background: var(--synced); box-shadow: 0 0 0 3px color-mix(in srgb, var(--synced) 25%, transparent); }
.osc-pill[data-state="syncing"] i { background: var(--pending); animation: osc-pulse 1s ease-in-out infinite; }
.osc-pill[data-state="offline"] i, .osc-pill[data-state="signedout"] i { background: var(--failed); }
.osc-pill-sync { gap: 12px; }
.osc-pill-sync b { display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; }
.osc-pill-sync b::before { content: ""; width: 8px; height: 8px; }
.osc-signin { margin: 0; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--failed) 40%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--failed) 10%, var(--surface)); font-size: 13px; }
.osc-signin[hidden] { display: none; }
.osc-main { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; gap: 14px; }
.osc-scan { display: grid; gap: 16px; }
.osc-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.osc-modes { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.osc-modes button { min-height: 34px; margin: 0; padding: 0 16px; border: 0; border-radius: 8px; background: transparent; box-shadow: none; color: var(--muted); font-weight: 700; }
.osc-modes button[aria-checked="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .1), inset 0 0 0 1px var(--line); }
.osc-reader { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--muted); font-size: 12.5px; font-weight: 700; }
.osc-reader input { width: 170px; min-height: 36px; }
.osc-form { display: grid; gap: 8px; }
.osc-form label { font-size: 15px; font-weight: 800; }
.osc-form > div { display: flex; gap: 8px; }
.osc-form input { flex: 1; min-height: 56px; font-size: 20px; letter-spacing: .04em; }
.osc-form button { min-width: 110px; }
.osc-result { --tone: var(--muted); display: flex; align-items: center; gap: 16px; min-height: 104px; padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--tone) 40%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--tone) 9%, var(--surface)); }
.osc-result.is-new { animation: osc-pop .35s cubic-bezier(.2, .9, .3, 1.2); }
.osc-result[data-state="entry"] { --tone: var(--synced); }
.osc-result[data-state="exit"] { --tone: #3d7fd1; }
.osc-result[data-state="unknown"], .osc-result[data-state="repeat"] { --tone: var(--pending); }
.osc-result[data-state="flagged"], .osc-result[data-state="error"] { --tone: var(--failed); }
.osc-result-icon { display: grid; width: 56px; height: 56px; flex: none; place-items: center; padding: 6px; border-radius: 16px; background: #fff; }
.osc-result-icon .brand-logo { width: 100%; height: 100%; }
.osc-result > div { display: grid; flex: 1; min-width: 0; gap: 3px; }
.osc-result strong { color: var(--tone); font-size: 22px; line-height: 1.2; }
.osc-result[data-state="idle"] strong { color: var(--text); }
.osc-result div > span { color: var(--muted); font-size: 13px; }
.osc-roster { margin: 0; color: var(--muted); font-size: 12px; }
.osc-log { display: grid; gap: 10px; }
.osc-log-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.osc-log-head h2 { margin: 0; font-size: 15px; }
.osc-filter { position: relative; z-index: 0; display: flex; gap: 2px; border-bottom: 1px solid var(--line); }
.osc-filter [role="tab"] { min-height: 34px; margin: 0; padding: 0 10px; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--muted); font-size: 12.5px; font-weight: 700; }
.osc-filter [role="tab"][aria-selected="true"] { color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
.osc-filter.has-glider [role="tab"][aria-selected="true"] { box-shadow: none; }
.osc-filter > .tab-glider { box-shadow: inset 0 -2px 0 var(--accent); }
.osc-list { display: grid; gap: 6px; max-height: calc(100vh - 230px); margin: 0; padding: 0; overflow: auto; list-style: none; }
.osc-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-left: 3px solid var(--pending); border-radius: 10px; background: var(--surface); animation: osc-row-in .25s ease-out; }
.osc-row.is-synced { border-left-color: var(--synced); }
.osc-row.is-failed { border-left-color: var(--failed); background: color-mix(in srgb, var(--failed) 5%, var(--surface)); }
.osc-row.is-sending .osc-dot { animation: osc-pulse .9s ease-in-out infinite; }
.osc-row-main, .osc-row-side { display: grid; min-width: 0; gap: 1px; }
.osc-row-main strong { overflow: hidden; font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.osc-row small { overflow: hidden; color: var(--muted); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.osc-row-side { justify-items: end; max-width: 240px; text-align: right; }
.osc-row-side time { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.osc-row.is-failed .osc-row-side small { color: var(--failed); white-space: normal; }
.osc-empty { margin: 0; padding: 24px; border-radius: 10px; background: var(--surface-soft); color: var(--muted); font-size: 13px; text-align: center; }
.osc-empty[hidden] { display: none; }
.osc-legend { display: flex; flex-wrap: wrap; gap: 14px; color: var(--muted); font-size: 12px; }
.osc-legend span { display: inline-flex; align-items: center; gap: 6px; }
@keyframes osc-pulse { 50% { opacity: .35; } }
@keyframes osc-pop { from { transform: scale(.97); opacity: .6; } }
@keyframes osc-row-in { from { opacity: 0; transform: translateY(-4px); } }
@media (max-width: 900px) { .osc-main { grid-template-columns: minmax(0, 1fr); } .osc-list { max-height: none; } }
@media (max-width: 560px) { .osc-reader, .osc-reader input { width: 100%; } .osc-row { grid-template-columns: auto minmax(0, 1fr) auto; } .osc-row > .btn-sm { grid-column: 2 / -1; justify-self: start; } .osc-form button { min-width: 0; } .osc-result strong { font-size: 18px; } }
@media (prefers-reduced-motion: reduce) { .osc-result.is-new, .osc-row, .osc-row.is-sending .osc-dot, .osc-pill[data-state="syncing"] i { animation: none; } }

/* Sync dots on scan lists: green = in the database, yellow = waiting on this device, red = failed (retrying). */
:root { --sync-ok: #2f9e5b; --sync-wait: #d9a400; --sync-fail: #d14b4b; }
.sync-dot { display: inline-block; width: 9px; height: 9px; flex: none; margin-right: 7px; border-radius: 50%; background: var(--sync-wait); vertical-align: middle; }
.sync-dot.is-synced { background: var(--sync-ok); }
.sync-dot.is-failed { background: var(--sync-fail); }
.sync-dot.is-sending { animation: osc-pulse .9s ease-in-out infinite; }
.scan-recent-list time { display: inline-flex; align-items: center; white-space: nowrap; }
.scan-recent-list > li.is-on-device, .scan-table tr.is-on-device { background: color-mix(in srgb, var(--sync-wait) 7%, transparent); }
.scan-recent-list > li.is-on-device:has(.sync-dot.is-failed), .scan-table tr.is-on-device:has(.sync-dot.is-failed) { background: color-mix(in srgb, var(--sync-fail) 8%, transparent); }
.scan-recent-list > li.is-on-device:has(.sync-dot.is-synced), .scan-table tr.is-on-device:has(.sync-dot.is-synced) { background: transparent; }
.scan-recent-list:empty { display: none; }
.scan-recent-list:not(:empty) + .empty-state { display: none; }
.scan-sync-chip { display: inline-flex; align-items: center; gap: 0; min-height: 38px; margin: 0; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); box-shadow: none; color: var(--text); font-size: 13px; font-weight: 700; cursor: pointer; }
.scan-sync-chip .sync-dot { margin-right: 8px; }
.scan-sync-chip[data-state="synced"] .sync-dot { background: var(--sync-ok); }
.scan-sync-chip[data-state="failed"] { border-color: color-mix(in srgb, var(--sync-fail) 45%, var(--line)); }
.scan-sync-chip[data-state="failed"] .sync-dot { background: var(--sync-fail); }
.scan-sync-chip[data-state="pending"] { border-color: color-mix(in srgb, var(--sync-wait) 45%, var(--line)); }
.scan-sync-chip:hover { background: var(--surface-soft); color: var(--text); }
.scan-offline-note { display: flex; align-items: center; gap: 4px; margin-top: 12px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--sync-wait) 45%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--sync-wait) 10%, var(--surface)); }
.scan-offline-note.is-new { animation: osc-pop .35s cubic-bezier(.2, .9, .3, 1.2); }
.scan-offline-note div { display: grid; gap: 2px; }
.scan-offline-note strong { font-size: 14px; }
.scan-offline-note small { color: var(--muted); font-size: 12.5px; }
.offline-banner button { min-height: 0; margin: 0 0 0 6px; padding: 3px 12px; border: 1px solid rgba(255, 255, 255, .6); border-radius: 999px; background: transparent; box-shadow: none; color: #fff; font-size: 12px; font-weight: 700; }
.offline-banner button[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .sync-dot.is-sending, .scan-offline-note.is-new { animation: none; } }

/* Analytics: offline scanning & sync card. */
.an-offline { margin-top: 12px; }
.an-kpis-compact { margin-bottom: 14px; }
.an-kpi-mini { display: grid; gap: 3px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); }
.an-kpi-mini span { color: var(--muted); font-size: 12px; font-weight: 600; }
.an-kpi-mini strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.an-kpi-mini small { color: var(--muted); font-size: 11.5px; }

/* User campus map: layer settings, map styles, the dimmed area outside the fence, back-to-campus button. */
.campus-map-stage .leaflet-top.leaflet-left { top: 6px; left: 6px; }
.campus-map-stage .leaflet-control-zoom { border: 0; border-radius: 12px; overflow: hidden; box-shadow: 0 6px 18px rgba(20, 18, 24, .18); }
.campus-map-stage .leaflet-control-zoom a { width: 38px; height: 38px; border-color: var(--line); background: var(--surface); color: var(--text); font-size: 18px; line-height: 38px; }
.campus-map-stage .leaflet-control-zoom a:hover { background: var(--surface-soft); }
.map-tool { position: absolute; z-index: 600; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; margin: 0; padding: 0 13px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--surface) 94%, transparent); box-shadow: 0 6px 18px rgba(20, 18, 24, .18); color: var(--text); font-size: 13px; font-weight: 700; cursor: pointer; backdrop-filter: blur(6px); }
.map-tool:hover { background: var(--surface); color: var(--text); }
.map-tool svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.map-layers { position: absolute; top: 12px; right: 12px; z-index: 600; }
.map-layers > .map-tool { position: static; }
.map-layers > .map-tool[aria-expanded="true"] { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); color: var(--accent); }
.map-recenter { top: 100px; left: 16px; width: 38px; min-height: 38px; padding: 0; }
.map-layers-panel { position: absolute; top: calc(100% + 8px); right: 0; display: grid; gap: 10px; width: min(300px, calc(100vw - 48px)); max-height: min(70vh, 520px); padding: 14px; overflow: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: 0 18px 40px rgba(20, 18, 24, .28); animation: map-panel-in .2s cubic-bezier(.2, .8, .3, 1); }
.map-layers-panel[hidden] { display: none; }
.map-layers-panel h3 { margin: 0; color: var(--muted); font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
@keyframes map-panel-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.map-styles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.map-style { display: grid; justify-items: center; gap: 5px; margin: 0; color: var(--muted); font-size: 11.5px; font-weight: 700; cursor: pointer; }
.map-style input { position: absolute; opacity: 0; pointer-events: none; }
.map-style-swatch { width: 100%; aspect-ratio: 1; border: 2px solid var(--line); border-radius: 10px; background-size: cover; transition: border-color .15s, box-shadow .15s; }
.map-style input:checked + .map-style-swatch { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.map-style input:checked ~ span:last-child { color: var(--text); }
.map-style input:focus-visible + .map-style-swatch { outline: 2px solid var(--accent); outline-offset: 2px; }
.map-style-swatch.is-standard { background: linear-gradient(135deg, #f2efe9 0 40%, #cfe5c9 40% 55%, #f2efe9 55% 70%, #aad3df 70%); }
.map-style-swatch.is-soft { background: linear-gradient(135deg, #f1f1f0 0 40%, #dedfdc 40% 55%, #f1f1f0 55% 70%, #d3d7da 70%); }
.map-style-swatch.is-night { background: linear-gradient(135deg, #24262b 0 40%, #2f3a34 40% 55%, #24262b 55% 70%, #1d2a33 70%); }
.map-style-swatch.is-plain { background: repeating-linear-gradient(45deg, #f4f1ec 0 6px, #ebe6de 6px 12px); }
.map-layer-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.map-layer-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; margin: 0; padding: 7px 4px; border-radius: 8px; cursor: pointer; }
.map-layer-row:hover { background: var(--surface-soft); }
.map-layer-copy { display: grid; min-width: 0; gap: 1px; }
.map-layer-copy strong { font-size: 13px; }
.map-layer-copy small { color: var(--muted); font-size: 11.5px; }
.map-layer-row input[type="checkbox"] { width: 36px; height: 20px; margin: 0; accent-color: var(--accent); }
.map-legend { display: inline-block; width: 22px; height: 14px; border-radius: 4px; }
.map-legend.is-fence { border: 2px solid #b4505a; box-shadow: 0 0 0 2px #fff inset; background: transparent; }
.map-legend.is-dim { background: linear-gradient(90deg, rgba(22, 21, 26, .55) 50%, transparent 50%); border: 1px solid var(--line); }
.map-legend.is-buildings { border: 1px solid #c9874a; background: #f2c48d; }
.map-legend.is-walkways { height: 6px; border-radius: 3px; background: #1677ff; box-shadow: 0 0 0 2px #fff; }
.map-legend.is-places { width: 14px; height: 14px; margin-left: 4px; border: 2px solid #fff; border-radius: 50%; background: #2f9e5b; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.map-legend.is-hazards { background: repeating-linear-gradient(45deg, rgba(209, 75, 75, .55) 0 4px, rgba(209, 75, 75, .2) 4px 8px); border: 1px solid #d14b4b; }
.map-layers-reset { justify-self: start; }
/* Map styles: all use the same OpenStreetMap pictures (so nothing extra is downloaded or saved offline). */
.campus-map[data-map-style="soft"] .leaflet-tile-pane { filter: grayscale(.85) brightness(1.06) contrast(.92); }
.campus-map[data-map-style="night"] .leaflet-tile-pane { filter: grayscale(.6) invert(.92) hue-rotate(180deg) brightness(.92) contrast(.9); }
.campus-map[data-map-style="night"] { background: #1c1d21; }
.campus-map[data-map-style="plain"] { background: repeating-linear-gradient(45deg, #f4f1ec 0 14px, #efeae2 14px 28px); }
body[data-theme="dark"] .campus-map[data-map-style="plain"] { background: repeating-linear-gradient(45deg, #26252a 0 14px, #2b2a30 14px 28px); }
.campus-map .campus-building { transition: fill-opacity .15s; }
.campus-map .campus-building:hover { fill-opacity: .8; }
@media (max-width: 600px) {
    .map-layers { top: 10px; right: 10px; }
    .map-layers > .map-tool span { display: none; }
    .map-layers > .map-tool { width: 40px; padding: 0; }
    .map-recenter { top: 96px; left: 14px; }
}
@media print { .map-layers, .map-recenter { display: none; } }
@media (prefers-reduced-motion: reduce) { .map-layers-panel { animation: none; } }

/* Campus map, easier to use: a status card floating on the map, a key under it, a place finder. */
.campus-map-card { padding: 0; overflow: hidden; }
.campus-map-card .campus-map { height: min(72vh, 680px); min-height: 380px; border: 0; border-radius: 0; }
.map-status { --tone: var(--accent); position: absolute; top: 12px; left: 50%; z-index: 650; display: flex; align-items: center; gap: 10px; width: max-content; max-width: min(560px, calc(100% - 210px)); padding: 9px 10px 9px 12px; border: 1px solid color-mix(in srgb, var(--tone) 30%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--surface) 96%, transparent); box-shadow: 0 10px 28px rgba(20, 18, 24, .2); color: var(--text); transform: translateX(-50%); backdrop-filter: blur(8px); }
.map-status[data-tone="info"] { --tone: #3d7fd1; }
.map-status[data-tone="route"] { --tone: #2f9e5b; }
.map-status[data-tone="warn"] { --tone: #c98a00; }
.map-status.is-new { animation: map-status-in .3s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes map-status-in { from { opacity: .4; transform: translate(-50%, -4px); } }
.map-status-icon { display: grid; width: 28px; height: 28px; flex: none; place-items: center; border-radius: 9px; background: color-mix(in srgb, var(--tone) 14%, transparent); color: var(--tone); }
.map-status-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.map-status-text { font-size: 13px; font-weight: 600; line-height: 1.4; }
.map-status[data-tone="route"] .map-status-text { font-size: 14px; font-weight: 700; }
.map-status-close { flex: none; min-height: 30px; margin: 0; padding: 0 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); box-shadow: none; color: var(--text); font-size: 12px; font-weight: 700; }
.map-status-close[hidden] { display: none; }
.map-recenter { top: 96px; left: 16px; width: auto; padding: 0 11px; }
.map-recenter span { font-size: 12.5px; }
.map-key { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0; padding: 12px 16px; border-top: 1px solid var(--line); list-style: none; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.map-key li { display: inline-flex; align-items: center; gap: 7px; }
.map-key .safety-icon-xs { width: 20px; height: 20px; }
.campus-map-card .campus-map-help { margin: 0; padding: 10px 16px 14px; border-top: 1px solid var(--line); }
.campus-map-card .map-offline-banner { margin: 12px 12px 0; }
.campus-map-head-actions { align-items: center; }
.safety-search { position: relative; display: block; margin: 2px 0 10px; }
.safety-search svg { position: absolute; top: 50%; left: 12px; width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; transform: translateY(-50%); pointer-events: none; }
.safety-search input { width: 100%; min-height: 40px; padding-left: 36px; font-size: 13.5px; }
.safety-none { margin: 0 0 10px; color: var(--muted); font-size: 12.5px; }
.safety-none[hidden] { display: none; }
.campus-safety-group.is-empty { display: none; }
.campus-safety-panel .safety-row { border-radius: 10px; transition: background .15s; }
.campus-safety-panel .safety-row:hover { background: var(--surface-soft); }
@media (max-width: 760px) {
    .campus-map-card .campus-map { height: 62vh; min-height: 340px; }
    .map-status { top: auto; bottom: 74px; max-width: calc(100% - 24px); width: calc(100% - 24px); }
    .map-recenter span { display: none; }
    .map-recenter { width: 38px; padding: 0; top: 92px; left: 14px; }
    .campus-safety-panel .safety-chips { flex-wrap: wrap; margin-inline: 0; padding: 0; overflow: visible; }
    .campus-map-head-actions .map-offline-chip { display: none; }
}
@media print { .map-status, .map-key { display: none; } }
@media (prefers-reduced-motion: reduce) { .map-status.is-new { animation: none; } }

/* Phone app (body.is-app, the Android app for students and employees): tab bar at the bottom instead of the
   side menu, a slim top bar, bigger touch targets and full-height map. */
body.is-app { -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; }
body.is-app .app-shell, body.is-app .app-shell.sidebar-hidden { grid-template-columns: minmax(0, 1fr); }
body.is-app .app-main { grid-column: 1; }
body.is-app .sidebar, body.is-app .sidebar-toggle, body.is-app .topbar-search, body.is-app .topbar-date, body.is-app .sidebar-backdrop { display: none !important; }
body.is-app .app-top { min-height: 56px; padding: 8px 16px; gap: 10px; }
body.is-app .app-top h1 { display: block; flex: 1; margin: 0; font-size: 19px; font-weight: 800; }
/* One offline notice at a time: on the map, its own (with when it was saved) replaces the bar at the top. */
body.is-app:has(.map-offline-banner:not([hidden])) .offline-banner { display: none !important; }
body.is-app .app-content { padding: 14px 14px calc(86px + env(safe-area-inset-bottom)); }
body.is-app .dashboard-head { gap: 10px; margin-bottom: 14px; }
body.is-app .dashboard-head h2 { display: none; } /* the top bar already shows the page name */
body.is-app .dashboard-head .page-subtitle { font-size: 13px; }
body.is-app .card { border-radius: 18px; }
body.is-app button, body.is-app .btn, body.is-app input, body.is-app select { min-height: 44px; }
body.is-app #print-map { display: none; }
body.is-app a, body.is-app button { touch-action: manipulation; }

.app-tabbar { position: fixed; z-index: 900; right: 0; bottom: 0; left: 0; display: flex; justify-content: space-around; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 94%, transparent); box-shadow: 0 -6px 22px rgba(20, 18, 24, .08); backdrop-filter: saturate(1.4) blur(10px); }
.app-tabbar a { position: relative; display: grid; flex: 1; justify-items: center; gap: 3px; min-width: 0; padding: 6px 2px 4px; border-radius: 14px; color: var(--muted); font-size: 11px; font-weight: 700; text-decoration: none; transition: color .15s; }
.app-tabbar a:hover { color: var(--text); text-decoration: none; }
.app-tabbar .nav-icon { width: 24px; height: 24px; padding: 3px 14px; box-sizing: content-box; border-radius: 999px; transition: background .2s, color .2s; }
.app-tabbar a.is-active { color: var(--accent); }
.app-tabbar a.is-active .nav-icon { background: var(--accent-soft); }
.app-tabbar span { overflow: hidden; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; }

/* The map fills the screen between the top bar and the tab bar. */
body.is-app .campus-safety-layout { display: block; }
body.is-app .campus-map-card { margin: 0 -14px 14px; border-right: 0; border-left: 0; border-radius: 0; }
body.is-app .campus-map-card .campus-map { height: calc(100dvh - 150px - env(safe-area-inset-bottom)); min-height: 340px; }
body.is-app .campus-map-card:has(.map-offline-banner:not([hidden])) .campus-map { height: calc(100dvh - 214px - env(safe-area-inset-bottom)); }
body.is-app .dashboard-head:has(+ .campus-safety-layout) { display: none; }
body.is-app .app-content:has(.campus-safety-layout) { padding-top: 0; }
body.is-app .campus-map-card .map-offline-banner { margin: 8px 10px; padding: 8px 10px; font-size: 12.5px; line-height: 1.4; }
body.is-app .campus-map-card .map-offline-banner svg { width: 18px; height: 18px; }
body.is-app .dashboard-head:has(+ .campus-safety-layout) { margin-bottom: 10px; }
body.is-app .campus-map-dock { bottom: 12px; width: calc(100% - 24px); }
body.is-app .campus-map-dock .campus-route-button { flex: 1; justify-content: center; min-height: 52px; font-size: 15px; }
body.is-app .map-status { top: auto; bottom: 76px; width: calc(100% - 24px); max-width: none; }
body.is-app .map-recenter span { display: none; }
body.is-app .map-recenter { width: 40px; padding: 0; }
body.is-app .map-layers > .map-tool span { display: none; }
body.is-app .map-layers > .map-tool { width: 40px; padding: 0; }
body.is-app .campus-safety-panel .safety-row { min-height: 56px; }

/* Sign-in pages in the app: no landing page, compact top. */
body.is-app .auth-brand { display: none; }

/* Phone app, compact: tighter cards, smaller headings and icons, quick links that scroll sideways. */
body.is-app { font-size: 14px; }
body.is-app .app-top { min-height: 52px; padding: 6px 14px; }
body.is-app .app-top h1 { font-size: 17px; }
body.is-app .app-top .bell-button, body.is-app .app-top [class*="bell"] > button { width: 38px; height: 38px; min-height: 38px; }
body.is-app .app-content { padding: 12px 12px calc(78px + env(safe-area-inset-bottom)); }
body.is-app .card, body.is-app .dash-card { padding: 14px; border-radius: 16px; box-shadow: 0 1px 2px rgba(20, 18, 24, .05); }
body.is-app .dash-card-head { margin-bottom: 10px; }
body.is-app .dash-card-head h3 { font-size: 15px; }
body.is-app .dash-card-head p, body.is-app .page-subtitle { font-size: 12.5px; }
body.is-app button, body.is-app .btn, body.is-app input, body.is-app select { min-height: 40px; font-size: 14px; }
body.is-app .btn-sm, body.is-app button.btn-sm { min-height: 34px; font-size: 13px; }
/* Home */
body.is-app .me-hero { gap: 10px; margin-bottom: 12px; padding: 16px; border-radius: 16px; }
body.is-app .me-hero-date { font-size: 11px; }
body.is-app .me-hero h2 { margin: 2px 0 8px; font-size: 20px; }
body.is-app .me-presence { font-size: 13px; }
body.is-app .me-actions { flex-wrap: nowrap; margin-inline: -16px; padding: 2px 16px; overflow-x: auto; scrollbar-width: none; }
body.is-app .me-actions::-webkit-scrollbar { display: none; }
body.is-app .me-actions a { flex: none; padding: 7px 12px; border-radius: 999px; font-size: 12.5px; }
body.is-app .me-actions svg { width: 15px; height: 15px; }
body.is-app .history-stats, body.is-app .me-stats { gap: 8px; }
body.is-app .history-stat { gap: 10px; padding: 10px 12px; border-radius: 14px; box-shadow: none; }
body.is-app .history-stat-icon { width: 32px; height: 32px; flex-basis: 32px; border-radius: 9px; }
body.is-app .history-stat-icon svg { width: 17px; height: 17px; }
body.is-app .history-stat strong { font-size: 17px; }
body.is-app .history-stat span, body.is-app .history-stat small { font-size: 11.5px; }
body.is-app .me-grid { gap: 12px; }
/* Tab bar: slimmer */
body.is-app .app-tabbar { padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); }
body.is-app .app-tabbar a { gap: 2px; padding: 4px 2px 3px; font-size: 10.5px; }
body.is-app .app-tabbar .nav-icon { width: 20px; height: 20px; padding: 3px 12px; }
/* Offline bar in the app: compact, with the Map button */
body.is-app .offline-banner { gap: 8px; padding: 7px 12px; font-size: 12px; text-align: left; }
.offline-banner-map { flex: none; margin-left: 4px; padding: 3px 12px; border-radius: 999px; background: #fff; color: #8a5a00; font-size: 12px; font-weight: 800; text-decoration: none; }
.offline-banner-map:hover { color: #8a5a00; text-decoration: none; }
.offline-banner-map[hidden] { display: none; }
/* Lists and forms */
body.is-app .settings-card { padding: 14px; }
body.is-app .settings-card-head h3 { font-size: 15px; }
body.is-app .settings-card-head p { font-size: 12.5px; }
body.is-app .auth-panel h2 { font-size: 22px; }
body.is-app .auth-main { padding: 20px 16px; }

/* ===== Phone app polish (360×640 baseline) ===== */
/* Faster: no blur or heavy shadows on the bars; no staggered fade-in between tabs. */
body.is-app .app-top, body.is-app .app-tabbar { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--surface); }
body.is-app .app-tabbar { box-shadow: 0 -1px 0 var(--line); }
body.is-app.page-enter main.app-content > * { animation: none; }
body.is-app .app-tabbar a { transition: none; }
body.is-app .app-tabbar a:active .nav-icon { background: var(--accent-soft); }

/* Sign-in in the app: logo and name on top, fits small screens. */
.auth-mobile-brand { display: none; }
body.is-app .auth-shell, body.is-app .auth-shell.is-wide { display: block; min-height: 100vh; }
body.is-app .auth-main { display: block; padding: 22px 18px 32px; }
body.is-app .auth-panel { width: 100%; max-width: 420px; margin: 0 auto; box-sizing: border-box; }
body.is-app .auth-panel input, body.is-app .auth-input { max-width: 100%; box-sizing: border-box; }
body.is-app .auth-mobile-brand { display: grid; justify-items: center; gap: 4px; margin: 6px 0 22px; text-align: center; }
body.is-app .auth-mobile-mark { display: grid; width: 64px; height: 64px; margin-bottom: 6px; place-items: center; padding: 7px; border-radius: 20px; background: #fff; box-shadow: 0 8px 22px rgba(31, 29, 34, .12), inset 0 0 0 1px rgba(0, 0, 0, .05); box-sizing: border-box; }
body.is-app .auth-mobile-mark .brand-logo { width: 100%; height: 100%; }
body.is-app .auth-mobile-brand strong { font-size: 17px; }
body.is-app .auth-mobile-brand small { color: var(--muted); font-size: 12px; }
body.is-app .auth-head h2, body.is-app .auth-panel h2 { font-size: 20px; }
body.is-app .auth-head p { font-size: 13px; }
body.is-app .auth-field label { font-size: 13px; }
body.is-app .auth-submit { min-height: 44px; }

/* Bell pop-up on small screens (website): room for the buttons, header on one line. */
.bell-item:has(.bell-item-actions) .bell-item-link { padding-right: 84px; }
.bell-head button, .bell-head a { white-space: nowrap; }
@media (max-width: 480px) { .bell-head { flex-wrap: wrap; } .bell-head button, .bell-head a { font-size: 12px; } }

/* Profile save bar sits above the tab bar. */
body.is-app .settings-savebar { bottom: calc(64px + env(safe-area-inset-bottom)); }

/* ===== Campus map in the app: compact controls ===== */
body.is-app .campus-map-card { padding: 0 !important; }
body.is-app .map-key { display: none; }
body.is-app .campus-map-stage .leaflet-control-zoom a { width: 32px; height: 32px; font-size: 16px; line-height: 32px; }
body.is-app .campus-map-stage .leaflet-top.leaflet-left { top: 4px; left: 4px; }
body.is-app .map-tool { min-height: 34px; border-radius: 10px; box-shadow: 0 3px 10px rgba(20, 18, 24, .18); backdrop-filter: none; }
body.is-app .map-tool svg { width: 16px; height: 16px; }
body.is-app .map-layers { top: 8px; right: 8px; }
body.is-app .map-layers > .map-tool, body.is-app .map-recenter { width: 34px; min-height: 34px; padding: 0; }
body.is-app .map-recenter { top: 86px; left: 10px; }
body.is-app .campus-map-dock { bottom: 10px; gap: 6px; width: calc(100% - 20px); }
body.is-app .campus-map-dock .campus-route-button { min-height: 42px; padding: 0 12px; font-size: 13.5px; border-radius: 12px; }
body.is-app .campus-map-dock .campus-dock-secondary { flex: 0 0 auto; }
body.is-app .campus-map-dock svg { width: 16px; height: 16px; }
body.is-app .map-status { bottom: 60px; gap: 8px; padding: 6px 8px; border-radius: 11px; box-shadow: 0 4px 14px rgba(20, 18, 24, .16); backdrop-filter: none; }
body.is-app .map-status-icon { width: 22px; height: 22px; border-radius: 7px; }
body.is-app .map-status-icon svg { width: 14px; height: 14px; }
body.is-app .map-status-text, body.is-app .map-status[data-tone="route"] .map-status-text { font-size: 12px; }
body.is-app .map-status-close { min-height: 26px; padding: 0 9px; font-size: 11.5px; }
/* Layers: a small panel of icon tiles; tap a tile to show or hide that layer. */
body.is-app .map-layers-panel { width: 236px; max-height: min(420px, calc(100dvh - 230px)); gap: 8px; padding: 10px; border-radius: 14px; }
body.is-app .map-layers-panel h3 { font-size: 10px; }
body.is-app .map-styles { gap: 5px; }
body.is-app .map-style { gap: 3px; font-size: 10px; }
body.is-app .map-style-swatch { border-radius: 8px; border-width: 2px; }
body.is-app .map-layer-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
body.is-app .map-layer-list li { position: relative; }
body.is-app .map-layer-row { grid-template-columns: 1fr; justify-items: center; gap: 4px; height: 100%; padding: 8px 3px 6px; border: 1px solid var(--line); border-radius: 10px; text-align: center; opacity: .5; box-sizing: border-box; transition: opacity .15s, border-color .15s, background .15s; }
body.is-app .map-layer-row:has(input:checked) { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: var(--accent-soft); opacity: 1; }
body.is-app .map-layer-row input[type="checkbox"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
body.is-app .map-layer-row:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
body.is-app .map-layer-copy strong { font-size: 10px; font-weight: 700; line-height: 1.2; }
body.is-app .map-layer-copy small { display: none; }
body.is-app .map-layers-reset { min-height: 28px; padding: 0 10px; font-size: 11px; }

/* Phone app: Notifications page compact; filters in one swipeable row. */
body.is-app .notice-filters { flex-wrap: nowrap; margin-inline: -12px; padding: 0 12px 2px; overflow-x: auto; scrollbar-width: none; gap: 6px; }
body.is-app .notice-filters::-webkit-scrollbar { display: none; }
body.is-app .notice-filters a { flex: none; min-height: 32px; padding: 0 12px; font-size: 12.5px; }
body.is-app .notice-list { padding: 0; overflow: hidden; }
body.is-app .notice-card { padding: 10px 12px; gap: 10px; }
body.is-app .notice-icon { width: 30px; height: 30px; flex-basis: 30px; font-size: 14px; }
body.is-app .notice-meta { font-size: 11.5px; gap: 6px; }
body.is-app .notice-main strong, body.is-app .notice-link strong { font-size: 13.5px; }
body.is-app .notice-body { font-size: 12.5px; line-height: 1.45; }
body.is-app .notice-actions { gap: 14px; margin-top: 4px; }
body.is-app .notice-action { min-height: 28px; padding: 0; font-size: 12px; }
body.is-app .notice-day { font-size: 11px; }
body.is-app .dashboard-head .btn-outline { min-height: 34px; padding: 0 12px; font-size: 12.5px; }
body.is-app .campus-map-help { display: none; }

/* Phone app: History chips in one swipeable row; smaller filter boxes. */
body.is-app .history-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 6px; }
body.is-app .history-chips::-webkit-scrollbar { display: none; }
body.is-app .history-chips > * { flex: none; min-height: 32px; padding: 0 12px; font-size: 12.5px; }
body.is-app .history-filterbar select, body.is-app .history-filterbar input { min-height: 36px; font-size: 13px; }

/* Occupancy: anonymous phone count from the app. */
.occ-phones { display: block; margin-top: 2px; color: var(--muted); font-size: 11.5px; font-style: normal; }
.occ-phones b { color: var(--text); }

/* Sign-in: "Remember me on this device" */
.auth-remember { display: flex; align-items: flex-start; gap: 10px; margin: 2px 0 4px; color: var(--text); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.auth-remember input { width: 18px; height: 18px; min-height: 0; margin: 1px 0 0; flex: none; accent-color: var(--accent); }
.auth-remember small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 500; }

/* ---------- Settings: push notifications blocked by Android (phone app) ---------- */
.settings-switch small.settings-push-blocked { color: var(--danger); }
.settings-switch small.settings-push-blocked[hidden] { display: none; }
.settings-inline-link { display: inline; min-height: 0; margin: 0; padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; box-shadow: none; }

/* ---------- Emergency banner: "Open safety map" and "My location" ---------- */
.emergency-banner-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.emergency-banner-link { border: 0; cursor: pointer; font-family: inherit; }
.emergency-banner-link.is-alt { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .85); color: #fff; }
.emergency-banner-link.is-alt:hover { color: #fff; }
.emergency-banner-link:disabled { opacity: .7; cursor: progress; }
.emergency-banner-compact .emergency-banner-link.is-alt { background: transparent; box-shadow: inset 0 0 0 1.5px var(--danger); color: var(--danger); }
@media (max-width: 600px) { .emergency-banner-actions { width: 100%; margin-left: 48px; } .emergency-banner-actions .emergency-banner-link { margin-left: 0; } }

/* ===== Phone app, simpler: fewer things on screen at once ===== */
body.is-app .emergency-banner { gap: 10px; margin-bottom: 12px; padding: 12px; border-radius: 14px; }
body.is-app .emergency-banner p { font-size: 12.5px; }
body.is-app .emergency-banner-actions { width: 100%; margin-left: 0; }
body.is-app .emergency-banner-actions .emergency-banner-link { flex: 1; min-height: 40px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }

/* Home: the tab bar already has the shortcuts; the week chart lives in History. */
body.is-app .me-actions, body.is-app .me-week, body.is-app .me-id-note, body.is-app .me-id .dash-card-head p { display: none; }
body.is-app .me-hero { padding: 14px; }
body.is-app .me-hero h2 { margin-bottom: 4px; font-size: 18px; }
body.is-app .me-hero-side { flex-direction: row; align-items: center; }
body.is-app .me-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 12px; }
body.is-app .me-stats .history-stat em { display: none; }
body.is-app .me-grid, body.is-app .me-grid-even { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 12px; }
body.is-app .me-grid-even > section:last-child { order: -1; } /* alerts before scans */
body.is-app .me-id { gap: 10px; }
body.is-app .me-id .rfid-ticket { min-height: 0; padding: 14px 16px; }
body.is-app .me-id .rfid-ticket label, body.is-app .me-id .rfid-ticket > small { display: none; }
body.is-app .me-timeline li:nth-child(n+4), body.is-app .me-updates li:nth-child(n+4) { display: none; }
body.is-app .dash-card-head .btn-sm { min-height: 30px; padding: 0 10px; font-size: 12px; }
body.is-app .dash-card-head p { display: none; }
body.is-app .dash-card-head { align-items: center; }

/* History: one line per scan, no repeated card number, "Not me?" as a small flag. */
body.is-app .history-log-card.card { padding: 12px; }
body.is-app .history-log-head p { font-size: 12px; }
body.is-app .history-log-day summary { padding: 10px 12px; }
body.is-app .history-log-scans li { grid-template-columns: 64px auto minmax(0, 1fr) auto; grid-template-areas: none; align-items: center; gap: 8px; padding: 7px 12px; font-size: 13px; }
body.is-app .history-log-scans li > * { grid-area: auto; }
body.is-app .history-log-scans .history-card-cell { display: none; }
body.is-app .history-log-scans .history-time { width: auto; font-size: 12.5px; }
body.is-app .history-log-scans .history-kind { padding: 2px 8px; font-size: 11.5px; }
body.is-app .history-log-scans .history-reader { color: var(--muted); font-size: 12px; }
body.is-app .history-report-open { min-height: 28px; padding: 0 6px; border: 0; background: none; color: var(--muted); font-size: 11.5px; font-weight: 600; text-decoration: none; }
body.is-app .history-reported { font-size: 11px; }
body.is-app .history-log-scans.is-clipped li:nth-child(n+7) { display: none; }
.history-show-more { display: block; width: calc(100% - 24px); min-height: 36px; margin: 2px 12px 10px; border: 1px dashed var(--line-strong); border-radius: 10px; background: transparent; color: var(--accent); font-size: 12.5px; font-weight: 700; cursor: pointer; }
body.is-app .history-expand, body.is-app .history-log-head .btn { display: none; }

/* Profile: tabs, one section at a time; smaller cover. */
body.is-app .settings-photo-help { display: none; }
body.is-app .settings-cover { height: 96px; }
body.is-app .settings-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
body.is-app .settings-form, body.is-app .settings-nav, body.is-app .settings-sections { min-width: 0; max-width: 100%; }
body.is-app .settings-nav { position: static; display: flex; gap: 4px; margin: 0 0 10px; padding: 4px; overflow-x: auto; border-radius: 12px; scrollbar-width: none; scroll-margin-top: 60px; }
body.is-app .settings-nav::-webkit-scrollbar { display: none; }
body.is-app .settings-nav a { flex: none; gap: 6px; padding: 8px 12px; border-radius: 9px; font-size: 12.5px; white-space: nowrap; }
body.is-app .settings-nav svg { width: 15px; height: 15px; flex-basis: 15px; }
body.is-app.settings-tabbed .settings-sections > section:not(.is-shown) { display: none; }
body.is-app .settings-card-head p { display: none; }
body.is-app .settings-switch small { font-size: 12px; }

body.is-app .history-log-day summary { grid-template-columns: minmax(0, 1fr) auto 18px; grid-template-areas: "date io chevron"; gap: 8px; padding: 9px 12px; }
body.is-app .history-log-day summary .history-day-counts, body.is-app .history-log-day summary .history-log-details { display: none; }
body.is-app .history-log-io { gap: 5px; font-size: 12.5px; }
body.is-app .history-log-date strong { font-size: 13.5px; }
body.is-app .history-log-date small { font-size: 11.5px; }
body.is-app .history-filterbar { padding: 8px; gap: 8px; }

/* ---------- "Your email isn't verified" bar (user portal) ---------- */
.verify-banner { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--warn) 12%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 35%, transparent); }
.verify-banner-icon { display: grid; width: 32px; height: 32px; flex: 0 0 32px; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--warn) 22%, var(--surface)); color: var(--warn); }
.verify-banner-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.verify-banner p { flex: 1; min-width: 0; margin: 0; color: var(--text); font-size: 13.5px; line-height: 1.45; }
.verify-banner-link { flex: none; padding: 7px 14px; border-radius: 8px; background: var(--warn); color: #fff; font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.verify-banner-link:hover { color: #fff; text-decoration: none; opacity: .92; }
body[data-theme="dark"] .verify-banner-link { color: #1b1a1e; }
body.is-app .verify-banner { gap: 10px; margin-bottom: 12px; padding: 9px 10px; }
body.is-app .verify-banner p { font-size: 12px; }
body.is-app .verify-banner p strong { display: block; }
body.is-app .verify-banner-link { padding: 6px 10px; font-size: 12px; }

/* ---------- Phone app: Log out on the Profile tab (the app has no side menu) ---------- */
.app-top button.app-top-logout { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; height: 38px; padding: 0 12px; border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--line)); border-radius: 10px; background: var(--surface); box-shadow: none; color: var(--danger); font-size: 13px; font-weight: 700; }
.app-top button.app-top-logout:hover { background: color-mix(in srgb, var(--danger) 8%, var(--surface)); color: var(--danger); }
.app-top-logout .nav-icon { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.app-top form:has(.app-top-logout) { margin: 0 0 0 auto; }
.app-logout-row { margin: 14px 0 8px; }
.app-logout-row button.app-logout-button { display: flex; width: 100%; min-height: 48px; align-items: center; justify-content: center; gap: 8px; border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--line)); border-radius: 14px; background: var(--surface); box-shadow: none; color: var(--danger); font-size: 15px; font-weight: 700; }
.app-logout-row button.app-logout-button:hover { background: color-mix(in srgb, var(--danger) 8%, var(--surface)); color: var(--danger); }
.app-logout-button .nav-icon { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Campus Alerts: the "Test messages" tab (last in the Sent alerts tab row) and its list ---------- */
.ca-history-tabs [role="tab"] b.is-bad, .ca-history-tabs [role="tab"][aria-selected="true"] b.is-bad { background: color-mix(in srgb, var(--danger) 14%, var(--surface)); color: var(--danger); }
.ca-history-head { align-items: center; }
.ca-test-list { display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.ca-test-list li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 14px; }
.ca-test-list li + li { border-top: 1px solid var(--line); }
.ca-test-list li.is-bad { box-shadow: inset 3px 0 0 var(--danger); }
.ca-test-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; background: var(--surface-soft); color: var(--muted); }
.ca-test-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ca-test-list + .ca-footnote { margin-top: 10px; }
.ca-test-main { display: grid; gap: 2px; min-width: 0; }
.ca-test-main strong { font-size: 13.5px; }
.ca-test-main strong span { color: var(--muted); font-weight: 500; }
.ca-test-main small { overflow: hidden; color: var(--muted); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.ca-test-status { padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.ca-test-list .is-ok .ca-test-status { background: color-mix(in srgb, var(--ok) 14%, var(--surface)); color: var(--ok); }
.ca-test-list .is-bad .ca-test-status { background: color-mix(in srgb, var(--danger) 14%, var(--surface)); color: var(--danger); }
.ca-test-list .ca-history-when { text-align: right; }
@media (max-width: 640px) {
    .ca-test-list li { grid-template-columns: 32px minmax(0, 1fr) auto; }
    .ca-test-list .ca-history-when { grid-column: 2 / -1; text-align: left; }
    .ca-test-main small { white-space: normal; }
}

/* ---------- Occupancy: "Off campus" card (five cards in the row) ---------- */
.tone-muted { --tone: var(--muted); --tone-soft: var(--surface-soft); }
.occ-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1280px) { .occ-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .occ-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===== Settings (admin) and Profile (user): simpler layout — slim header, tabs on top, one section at a time ===== */
.settings-page { max-width: none; }
.settings-photo-help { display: none; } /* the photo dialog explains sizes when a photo is chosen */
body:not(.is-app) .settings-cover { height: 150px; }
body:not(.is-app) .settings-hero-body { align-items: center; padding: 0 22px 16px; }
body:not(.is-app) .settings-avatar { margin-top: -46px; }
body:not(.is-app) .settings-avatar-image { width: 100px; height: 100px; }
body:not(.is-app) .settings-identity { padding-top: 10px; }
body:not(.is-app) .settings-identity h2 { font-size: 22px; }
body:not(.is-app) .settings-layout { display: block; margin-top: 18px; }
body:not(.is-app) .settings-nav { position: static; display: flex; gap: 2px; margin: 0 0 16px; padding: 0; overflow-x: auto; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; scrollbar-width: none; }
body:not(.is-app) .settings-nav::-webkit-scrollbar { display: none; }
body:not(.is-app) .settings-nav a { flex: none; gap: 8px; padding: 10px 14px; border-radius: 0; white-space: nowrap; }
body:not(.is-app) .settings-nav a:hover { background: transparent; }
body:not(.is-app) .settings-nav a[aria-current] { background: transparent; color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
body:not(.is-app) .settings-nav a[aria-current] svg { color: var(--accent); }
body.settings-tabbed .settings-sections > section:not(.is-shown) { display: none; }
body:not(.is-app) .settings-card { padding: 24px 26px; }
.settings-subhead { margin: 2px 0 -6px; color: var(--muted); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.settings-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.settings-fields .settings-label-row label { margin: 0; }
.settings-label-row .settings-inline-link { min-height: 0; font-size: 12.5px; text-decoration: none; }
.settings-label-row .settings-inline-link:hover { text-decoration: underline; }
.logout-dialog-body { display: grid; justify-items: center; gap: 8px; padding: 26px 24px 22px; text-align: center; }
.logout-dialog-body .logout-dialog-actions { grid-template-columns: 1fr; }

/* Settings tabs: a sliding underline and a soft fade-in for the section that opens */
body:not(.is-app) .settings-nav { position: relative; top: auto; } /* top: the old sticky side menu set 80px */
.settings-nav-glider { display: none; }
body:not(.is-app) .settings-nav.has-glider .settings-nav-glider { position: absolute; bottom: 0; display: block; height: 2px; border-radius: 2px; background: var(--accent); transition: left .28s cubic-bezier(.2, .8, .2, 1), width .28s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
body:not(.is-app) .settings-nav.has-glider a[aria-current] { box-shadow: none; }
body:not(.is-app) .settings-nav a { transition: color .2s ease; }
body.settings-tabbed .settings-sections > section.is-shown { animation: settings-tab-in .3s cubic-bezier(.2, .8, .2, 1); }
@keyframes settings-tab-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
    .settings-nav-glider { transition: none !important; }
    body.settings-tabbed .settings-sections > section.is-shown { animation: none; }
}

/* Log-out popup: the Campus Presense mark on a white tile, drawing itself (quickly) each time the popup opens */
.logout-dialog-brand { display: grid; width: 68px; height: 68px; margin-bottom: 8px; place-items: center; border-radius: 20px; background: #fff; box-shadow: 0 10px 26px rgba(20, 18, 24, .16), inset 0 0 0 1px rgba(0, 0, 0, .05); animation: logout-brand-in .4s cubic-bezier(.2, .9, .3, 1.2) both; }
.logout-dialog-brand .brand-logo { width: 46px; height: 46px; }
.logout-dialog .brand-logo-animated.is-intro .bl-pin { animation-duration: .5s; animation-delay: .1s; }
.logout-dialog .brand-logo-animated.is-intro .bl-roof { animation-duration: .3s; animation-delay: .45s; }
.logout-dialog .brand-logo-animated.is-intro .bl-door { animation-duration: .22s; animation-delay: .65s; }
.logout-dialog .brand-logo-animated.is-intro .bl-post { animation-duration: .15s; animation-delay: .8s; }
.logout-dialog .brand-logo-animated.is-intro .bl-base { animation-duration: .3s; animation-delay: .85s; }
@keyframes logout-brand-in { from { opacity: 0; transform: scale(.8); } }
@media (prefers-reduced-motion: reduce) {
    .logout-dialog-brand { animation: none; }
    .logout-dialog .brand-logo-animated path { animation: none !important; stroke-dashoffset: 0; }
    .logout-dialog .brand-logo-animated .bl-base { transform: none; }
}

/* ===== Notifications page: clean inbox list, tab filters, and a popup to read the whole message ===== */
.notice-filters { flex-wrap: nowrap; gap: 2px; margin-bottom: 16px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.notice-filters::-webkit-scrollbar { display: none; }
.notice-filters a, body.is-app .notice-filters a { flex: none; min-height: 40px; padding: 8px 12px; border: 0; border-radius: 0; background: transparent; color: var(--muted); font-weight: 600; }
.notice-filters a:hover { color: var(--text); }
.notice-filters a.is-active { background: transparent; color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
.notice-filters a span, .notice-filters a.is-active span { min-width: 20px; padding: 0 6px; border-radius: 6px; background: var(--surface-soft); color: var(--muted); font-size: 11px; }
.notice-filters a.is-active span { background: var(--accent-soft); color: var(--accent); }
.notice-row { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: start; gap: 14px; padding: 14px 18px; cursor: pointer; transition: background .15s ease; }
.notice-row + .notice-row { border-top: 1px solid var(--line); }
.notice-row:hover { background: var(--surface-soft); }
.notice-row.is-unread { box-shadow: inset 3px 0 0 var(--tone); }
.notice-glyph { display: block; width: 22px; height: 22px; margin-top: 1px; color: var(--tone); }
.notice-glyph svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.notice-top { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; font-size: 12px; }
.notice-cat { color: var(--tone); font-weight: 700; letter-spacing: .02em; text-transform: uppercase; font-size: 11px; }
.notice-top time { margin-left: auto; color: var(--muted); white-space: nowrap; }
.notice-new { padding: 0 6px; border-radius: 4px; background: var(--primary); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 1.7; }
.notice-row h4 { margin: 0; color: var(--text); font-size: 14.5px; font-weight: 500; line-height: 1.4; }
.notice-row.is-unread h4 { font-weight: 700; }
.notice-snippet { display: -webkit-box; margin: 3px 0 0; overflow: hidden; color: var(--muted); font-size: 13.5px; line-height: 1.5; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; overflow-wrap: anywhere; }
.notice-open { align-self: center; min-height: 32px; padding: 0 14px; }
@media (max-width: 640px) {
    .notice-row { grid-template-columns: 20px minmax(0, 1fr); gap: 10px; padding: 12px 14px; }
    /* tapping the row opens it */
}

/* ---------- Notification popup: read the whole message ---------- */
.notice-dialog { width: min(620px, calc(100% - 32px)); max-height: min(82vh, 760px); padding: 0; overflow: hidden; border: 0; border-radius: 18px; background: var(--surface); box-shadow: 0 24px 60px rgba(12, 10, 16, .35), 0 0 0 1px var(--line); color: var(--text); }
.notice-dialog[open] { display: flex; flex-direction: column; animation: notice-dialog-in .22s cubic-bezier(.2, .9, .3, 1); }
.notice-dialog::backdrop { background: rgba(14, 12, 18, .55); backdrop-filter: blur(3px); }
@keyframes notice-dialog-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.notice-dialog::before { flex: none; height: 4px; background: var(--tone, var(--accent)); content: ""; }
.notice-dialog-head { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: start; gap: 16px; padding: 22px 20px 18px 26px; }
.notice-dialog-icon { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 12px; background: var(--tone-soft, var(--accent-soft)); color: var(--tone, var(--accent)); }
.notice-dialog-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.notice-dialog-heading { min-width: 0; padding-top: 1px; }
.notice-dialog-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 6px; color: var(--muted); font-size: 12.5px; }
.notice-dialog-cat { padding: 2px 8px; border-radius: 6px; background: var(--tone-soft, var(--accent-soft)); color: var(--tone, var(--accent)); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.notice-dialog-heading h2 { margin: 0; font-size: 21px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
button.notice-dialog-close { display: grid; width: 36px; height: 36px; min-height: 36px; margin: -4px 0 0; padding: 0; place-items: center; border: 0; border-radius: 10px; background: transparent; box-shadow: none; color: var(--muted); }
button.notice-dialog-close:hover { background: var(--surface-soft); color: var(--text); }
button.notice-dialog-close:focus:not(:focus-visible) { outline: none; box-shadow: none; }
.notice-dialog-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.notice-dialog-body { flex: 1; margin: 0 26px; padding: 18px 0 22px; overflow-y: auto; border-top: 1px solid var(--line); color: var(--text); font-size: 15.5px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.notice-dialog-body:focus { outline: none; }
.notice-dialog-body[hidden] { display: none; }
.notice-dialog-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 14px 20px; border-top: 1px solid var(--line); background: var(--surface-soft); }
.notice-dialog-foot form { margin: 0; }
button.notice-dialog-quiet { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; box-shadow: none; color: var(--muted); font-size: 13.5px; font-weight: 600; }
button.notice-dialog-quiet:hover { background: var(--surface); color: var(--text); }
button.notice-dialog-quiet.is-danger:hover { color: var(--danger); }
.notice-dialog-quiet svg, .notice-dialog-primary svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.notice-dialog-spacer { flex: 1; }
.notice-dialog-primary, button.notice-dialog-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 112px; min-height: 40px; padding: 0 18px; border: 0; border-radius: 10px; background: var(--primary); box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 30%, transparent); color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; }
.notice-dialog-primary:hover, button.notice-dialog-primary:hover { background: var(--primary-hover, var(--primary)); color: #fff; text-decoration: none; }
.notice-dialog-primary[hidden] { display: none; }
@media (max-width: 640px) {
    .notice-dialog { width: 100%; max-width: none; max-height: 88vh; margin: auto 0 0; border-radius: 20px 20px 0 0; }
    .notice-dialog-head { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; padding: 18px 14px 14px 18px; }
    .notice-dialog-icon { width: 40px; height: 40px; }
    .notice-dialog-heading h2 { font-size: 18px; }
    .notice-dialog-body { margin: 0 18px; font-size: 15px; }
    .notice-dialog-foot { padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); }
    .notice-dialog-spacer { display: none; }
    .notice-dialog-primary, button.notice-dialog-primary { flex: 1 0 100%; order: -1; }
}
@media (prefers-reduced-motion: reduce) { .notice-dialog[open] { animation: none; } }

/* Lists that update in place (filter tabs, search, paging): dim briefly while the next view loads */
[data-ajax-region] { transition: opacity .18s ease; }
main.app-content[aria-busy="true"] [data-ajax-region] { opacity: .55; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { [data-ajax-region] { transition: none; } }
/* Users: empty result */
.user-empty { display: grid; justify-items: center; gap: 6px; padding: 44px 20px; }
.user-empty-icon { display: grid; width: 48px; height: 48px; margin-bottom: 4px; place-items: center; border-radius: 14px; background: var(--surface-soft); color: var(--muted); }
.user-empty-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* The top bar already names the page, so the repeated title under it is hidden; its description stays and leads
   the page. (The Dashboard keeps its greeting.) */
.dashboard-head:not(.admin-dash-head) > div:first-child > h2:first-of-type,
.an-head > div:first-child > h2:first-of-type,
.role-requests-page .section-heading h2 { display: none; }
.dashboard-head:not(.admin-dash-head) > div:first-child > h2:first-of-type + .page-subtitle,
.an-head > div:first-child > h2:first-of-type + p { margin-top: 0; font-size: 14.5px; }
.dashboard-head:not(.admin-dash-head) { align-items: center; }

/* Profile photo guidelines (shown before the photo picker opens) */
.photo-guide { width: min(460px, calc(100% - 32px)); padding: 0; border: 0; border-radius: 18px; background: var(--surface); box-shadow: 0 24px 60px rgba(12, 10, 16, .35), 0 0 0 1px var(--line); color: var(--text); }
.photo-guide[open] { animation: notice-dialog-in .22s cubic-bezier(.2, .9, .3, 1); }
.photo-guide::backdrop { background: rgba(14, 12, 18, .55); backdrop-filter: blur(3px); }
.photo-guide-body { display: grid; gap: 10px; padding: 26px 26px 22px; }
.photo-guide-icon { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 14px; background: var(--accent-soft); color: var(--accent); }
.photo-guide-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.photo-guide h2 { margin: 4px 0 0; font-size: 20px; }
.photo-guide p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.photo-guide-list { display: grid; gap: 8px; margin: 4px 0; padding: 14px 16px; border-radius: 12px; background: var(--surface-soft); list-style: none; }
.photo-guide-list li { position: relative; padding-left: 26px; font-size: 14px; line-height: 1.45; }
.photo-guide-list li::before { position: absolute; top: 2px; left: 0; width: 16px; height: 16px; border-radius: 5px; background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); content: "✓"; font-size: 11px; font-weight: 800; line-height: 16px; text-align: center; }
.photo-guide .photo-guide-note { font-size: 12.5px; }
.photo-guide-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.photo-guide-actions button { min-height: 42px; margin: 0; justify-content: center; }
@media (prefers-reduced-motion: reduce) { .photo-guide[open] { animation: none; } }

/* ===== Emergency hotlines (user): 911 banner, card grid, underline tabs ===== */
.hotline-911 { display: flex; align-items: center; gap: 16px; margin: 0 0 18px; padding: 16px 18px; border-radius: 16px; background: linear-gradient(135deg, #b23b45, #8f2a34); box-shadow: 0 10px 26px rgba(143, 42, 52, .28); color: #fff; }
.hotline-911-icon { display: grid; width: 46px; height: 46px; flex: 0 0 46px; place-items: center; border-radius: 13px; background: rgba(255, 255, 255, .16); }
.hotline-911-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hotline-911-text { flex: 1; min-width: 0; }
.hotline-911-text strong { display: block; font-size: 16px; }
.hotline-911-text p { margin: 2px 0 0; color: rgba(255, 255, 255, .85); font-size: 13.5px; line-height: 1.45; }
.hotline-911-call { display: inline-flex; flex: none; align-items: center; gap: 9px; min-height: 48px; padding: 0 22px; border-radius: 12px; background: #fff; color: #9b2f39; font-size: 17px; font-weight: 800; letter-spacing: .01em; text-decoration: none; box-shadow: 0 4px 12px rgba(0, 0, 0, .18); }
.hotline-911-call:hover { color: #7d2430; text-decoration: none; transform: translateY(-1px); }
.hotline-911-call svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.hotline-directory { gap: 14px; }
.hotline-directory-head { gap: 12px; }
.hotline-tabs { gap: 2px; margin: 0; padding: 0; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.hotline-tabs::-webkit-scrollbar { display: none; }
.hotline-tab, button.hotline-tab { min-height: 40px; padding: 0 12px; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--muted); font-weight: 600; }
.hotline-tab:hover, button.hotline-tab:hover { background: transparent; color: var(--text); }
.hotline-tab.is-active, button.hotline-tab.is-active { border: 0; background: transparent; color: var(--text); box-shadow: inset 0 -2px 0 var(--hotline, var(--accent)); }
.hotline-tab span, .hotline-tab.is-active span { border-radius: 6px; background: var(--surface-soft); color: var(--muted); }
.hotline-group h3 { margin: 4px 0 10px; color: var(--muted); font-size: 11.5px; letter-spacing: .06em; }

/* Cards: a grid of tidy cards (name on top, each number with a big Call button) */
.hotline-directory .hotline-list, .hotline-pinned { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.hotline-card, .hotline-directory .hotline-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: inset 0 3px 0 var(--hotline, var(--accent)); }
.hotline-card .hotline-card-head { gap: 12px; }
.hotline-card .hotline-card-head strong { font-size: 15.5px; }
.hotline-card .hotline-number, .hotline-directory .hotline-number { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface-soft); }
.hotline-card .hotline-digits { display: grid; gap: 1px; font-size: 19px; }
.hotline-card .hotline-digits small { color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.hotline-card .hotline-actions { flex-wrap: nowrap; gap: 6px; }
.hotline-card .hotline-action { min-height: 38px; padding: 0 10px; border-radius: 10px; }
.hotline-card .hotline-action:not(.is-call) span { display: none; } /* Text / Copy as icon buttons; the label stays for screen readers */
.hotline-card .hotline-action:not(.is-call) { width: 38px; justify-content: center; padding: 0; }
.hotline-card .hotline-action.is-call { padding: 0 16px; font-weight: 700; }
.hotline-card.is-pinned { box-shadow: inset 0 3px 0 var(--hotline, var(--accent)), var(--shadow); }
.hotline-footnote { margin-top: 16px; }
@media (min-width: 860px) {
    .hotline-directory .hotline-card { display: flex; }
    .hotline-directory .hotline-number { grid-column: auto; }
}
@media (max-width: 600px) {
    .hotline-911 { flex-wrap: wrap; }
    .hotline-911-call { width: 100%; justify-content: center; }
    .hotline-directory .hotline-list, .hotline-pinned { grid-template-columns: 1fr; }
}

/* One grid for every hotline (each card names its type; the tabs filter by type) */
.hotline-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.hotline-grid .hotline-group, .hotline-grid .hotline-list { display: contents; }
.hotline-grid .hotline-group > h3 { display: none; }
.hotline-directory .hotline-card { align-items: stretch; }
.hotline-directory .hotline-card-head { grid-row: auto; }
@media (max-width: 600px) { .hotline-grid { grid-template-columns: 1fr; } }

/* Hotlines on narrow screens: the tab row scrolls instead of widening the page; numbers stack above their buttons */
.hotline-directory { grid-template-columns: minmax(0, 1fr); }
.hotline-directory > * { min-width: 0; }
@media (max-width: 480px) {
    .hotline-card .hotline-number, .hotline-directory .hotline-number { grid-template-columns: minmax(0, 1fr); }
    .hotline-card .hotline-actions { width: 100%; }
    .hotline-card .hotline-action.is-call { flex: 1; justify-content: center; min-height: 42px; }
    .hotline-card .hotline-action:not(.is-call) { flex: none; width: 46px; min-height: 42px; }
}

/* Hotlines: compact sizing */
.hotline-911 { gap: 12px; margin-bottom: 14px; padding: 9px 10px 9px 12px; border-radius: 12px; box-shadow: 0 4px 14px rgba(143, 42, 52, .22); }
.hotline-911-icon { width: 32px; height: 32px; flex-basis: 32px; border-radius: 9px; }
.hotline-911-icon svg { width: 18px; height: 18px; }
.hotline-911-text strong { display: inline; font-size: 14px; }
.hotline-911-text p { display: inline; margin: 0 0 0 6px; font-size: 13px; }
.hotline-911-call { min-height: 36px; padding: 0 14px; gap: 7px; border-radius: 9px; font-size: 14.5px; box-shadow: none; }
.hotline-911-call svg { width: 16px; height: 16px; }
.hotline-directory.card { gap: 10px; padding: 14px 16px; }
.hotline-directory-head .history-search { max-width: 280px; }
.hotline-tab, button.hotline-tab { min-height: 34px; padding: 0 10px; font-size: 13px; }
.hotline-section-title { margin-bottom: 8px; font-size: 14px; }
.hotline-grid, .hotline-pinned, .hotline-directory .hotline-list { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 10px; }
.hotline-pinned { margin-bottom: 14px; }
.hotline-card, .hotline-directory .hotline-card { gap: 8px; padding: 12px; border-radius: 12px; box-shadow: inset 0 2px 0 var(--hotline, var(--accent)); }
.hotline-card.is-pinned { padding: 12px; box-shadow: inset 0 2px 0 var(--hotline, var(--accent)), var(--shadow); }
.hotline-card .hotline-card-head { gap: 10px; }
.hotline-card .hotline-card-head .hotline-icon { width: 30px; height: 30px; flex-basis: 30px; border-radius: 8px; }
.hotline-card .hotline-card-head .hotline-icon svg { width: 16px; height: 16px; }
.hotline-card .hotline-card-head strong { font-size: 14px; }
.hotline-card .hotline-card-head small { font-size: 12px; }
.hotline-card .hotline-number, .hotline-directory .hotline-number { gap: 8px; padding: 6px 6px 6px 10px; border-radius: 9px; }
.hotline-card .hotline-digits, .hotline-number.is-large .hotline-digits { font-size: 15.5px; }
.hotline-card .hotline-digits small { font-size: 9.5px; }
.hotline-card .hotline-actions { gap: 4px; }
.hotline-card .hotline-action, .hotline-number.is-large .hotline-action { min-height: 30px; border-radius: 8px; font-size: 12.5px; }
.hotline-card .hotline-action svg { width: 14px; height: 14px; }
.hotline-card .hotline-action:not(.is-call) { width: 30px; }
.hotline-card .hotline-action.is-call { padding: 0 11px; }
.hotline-footnote { margin-top: 10px; font-size: 12px; }
@media (max-width: 600px) {
    .hotline-911-text p { display: block; margin: 1px 0 0; }
    .hotline-911-call { min-height: 40px; }
}
@media (max-width: 480px) {
    .hotline-card .hotline-action.is-call { min-height: 36px; }
    .hotline-card .hotline-action:not(.is-call) { width: 40px; min-height: 36px; }
}

/* Page header (all pages but the Dashboard): a soft card with the page's icon tile, its description and actions */
body:not(.is-app) .dashboard-head:not(.admin-dash-head), body:not(.is-app) .an-head { margin-bottom: 18px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 7%, var(--surface)), var(--surface) 55%); box-shadow: var(--shadow); }
.page-head-intro { display: flex; align-items: center; gap: 14px; min-width: 0; }
.page-head-icon { display: grid; width: 44px; height: 44px; flex: 0 0 44px; place-items: center; border-radius: 13px; background: var(--accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); }
.page-head-icon .nav-icon { width: 22px; height: 22px; margin: 0; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
body:not(.is-app) .page-head-intro .page-subtitle, body:not(.is-app) .an-head .page-head-intro > p { margin: 0; color: var(--text); font-size: 14.5px; font-weight: 500; line-height: 1.45; opacity: .82; }
body.is-app .page-head-icon { display: none; }

/* ===== Phone app: compact hotlines, so most contacts fit on one screen ===== */
body.is-app .hotline-911 { gap: 10px; margin-bottom: 10px; padding: 7px 8px 7px 10px; border-radius: 12px; flex-wrap: nowrap; }
body.is-app .hotline-911-icon { width: 28px; height: 28px; flex-basis: 28px; border-radius: 8px; }
body.is-app .hotline-911-icon svg { width: 16px; height: 16px; }
body.is-app .hotline-911-text strong { font-size: 13px; }
body.is-app .hotline-911-text p { display: none; }
body.is-app .hotline-911-call { width: auto; min-height: 34px; padding: 0 12px; font-size: 13.5px; }
body.is-app .hotline-section-title { margin: 0 0 6px; font-size: 13px; }
body.is-app .hotline-pinned { margin-bottom: 10px; }
body.is-app .hotline-directory.card { gap: 8px; padding: 10px; }
body.is-app .hotline-directory-head { gap: 8px; }
body.is-app .hotline-directory-head .history-search { max-width: none; }
body.is-app .hotline-directory-head .history-search input { min-height: 34px; font-size: 13px; }
body.is-app .hotline-tab, body.is-app button.hotline-tab { min-height: 32px; padding: 0 8px; font-size: 12px; }
body.is-app .hotline-grid, body.is-app .hotline-pinned, body.is-app .hotline-directory .hotline-list { grid-template-columns: minmax(0, 1fr); gap: 6px; }
body.is-app .hotline-card, body.is-app .hotline-directory .hotline-card { gap: 4px; padding: 8px 8px 8px 10px; border-radius: 10px; box-shadow: inset 3px 0 0 var(--hotline, var(--accent)); }
body.is-app .hotline-card.is-pinned { padding: 8px 8px 8px 10px; box-shadow: inset 3px 0 0 var(--hotline, var(--accent)); }
body.is-app .hotline-card .hotline-card-head { gap: 8px; }
body.is-app .hotline-card .hotline-card-head .hotline-icon { width: 24px; height: 24px; flex-basis: 24px; border-radius: 7px; }
body.is-app .hotline-card .hotline-card-head .hotline-icon svg { width: 13px; height: 13px; }
body.is-app .hotline-card .hotline-card-head > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
body.is-app .hotline-card .hotline-card-head strong { font-size: 13px; }
body.is-app .hotline-card .hotline-card-head small { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
body.is-app .hotline-card .hotline-number, body.is-app .hotline-directory .hotline-number { grid-template-columns: minmax(0, 1fr) auto; gap: 6px; padding: 2px 0 2px 32px; border-radius: 0; background: transparent; }
body.is-app .hotline-card .hotline-digits, body.is-app .hotline-number.is-large .hotline-digits { display: flex; align-items: baseline; gap: 6px; font-size: 14.5px; }
body.is-app .hotline-card .hotline-digits small { font-size: 9px; }
body.is-app .hotline-card .hotline-actions { width: auto; gap: 4px; }
body.is-app .hotline-card .hotline-action, body.is-app .hotline-card .hotline-action.is-call { flex: none; min-height: 30px; font-size: 12px; }
body.is-app .hotline-card .hotline-action.is-call { padding: 0 10px; }
body.is-app .hotline-card .hotline-action:not(.is-call) { width: 30px; }
body.is-app .hotline-card .hotline-action svg { width: 13px; height: 13px; }
body.is-app .hotline-footnote { margin-top: 8px; font-size: 11px; }


/* Phone app, hotlines: no page header (Copy all sits by "All hotlines"), no box around the list, numbers aligned */
body.is-app .dashboard-head:has([data-copy-done="All numbers copied"]) { display: none; }
body.is-app .hotline-directory.card { padding: 0; border: 0; background: transparent; box-shadow: none; }
body.is-app .hotline-directory-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
body.is-app .hotline-directory-head .history-search { flex: 1 0 100%; order: 3; }
body.is-app .hotline-section-title { margin: 0; font-size: 13.5px; }
.hotline-copy-all, button.hotline-copy-all, body.is-app button.hotline-copy-all { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: none; color: var(--text); font-size: 12px; font-weight: 600; }
.hotline-copy-all svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hotline-copy-all.is-copied { border-color: var(--ok); color: var(--ok); }
body.is-app .hotline-card .hotline-digits, body.is-app .hotline-number.is-large .hotline-digits { display: grid; gap: 0; }
body.is-app .hotline-card .hotline-digits small { font-size: 8.5px; letter-spacing: .06em; }
body.is-app .hotline-card .hotline-number, body.is-app .hotline-directory .hotline-number { align-items: center; padding: 3px 0 3px 32px; }
body.is-app .hotline-card .hotline-number + .hotline-number { border-top: 1px dashed var(--line); padding-top: 6px; }
body.is-app .hotline-card .hotline-card-head small { flex-basis: 100%; }
body.is-app .hotline-footnote { padding: 0 2px; }

/* ===== Compact density (website): slimmer page header, one tighter gap between sections, less padding ===== */
body:not(.is-app) .app-content { padding: 20px 24px 32px; }
body:not(.is-app) .dashboard-head:not(.admin-dash-head), body:not(.is-app) .an-head { margin-bottom: 12px; padding: 9px 12px; border-radius: 13px; box-shadow: none; }
body:not(.is-app) .page-head-icon { width: 34px; height: 34px; flex-basis: 34px; border-radius: 10px; }
body:not(.is-app) .page-head-icon .nav-icon { width: 18px; height: 18px; }
body:not(.is-app) .page-head-intro { gap: 11px; }
body:not(.is-app) .page-head-intro .page-subtitle, body:not(.is-app) .an-head .page-head-intro > p { font-size: 13.5px; }
body:not(.is-app) .dashboard-head-actions .btn, body:not(.is-app) .dashboard-head-actions button, body:not(.is-app) .an-head-actions .btn, body:not(.is-app) .an-head-actions button { min-height: 34px; padding-block: 0; font-size: 13px; }
body:not(.is-app) .admin-dash-head { margin-bottom: 12px; }
body:not(.is-app) .card:not(.user-directory, .security-board, .alert-compose, .notice-list, .scan-result, .latest-gate, .geo-panel, .geo-map-card, .campus-safety-panel, .campus-map-card) { padding: 16px 18px; }
body:not(.is-app) .dash-card.card, body:not(.is-app) .history-log-card.card { padding: 16px 18px; }
body:not(.is-app) .history-stats, body:not(.is-app) .dash-kpis { gap: 10px; margin-bottom: 12px; }
body:not(.is-app) .history-overview, body:not(.is-app) .dash-grid, body:not(.is-app) .me-grid, body:not(.is-app) .occ-layout { gap: 12px; margin-bottom: 12px; }
body:not(.is-app) .an-section { margin-bottom: 16px; }
body:not(.is-app) .an-grid { gap: 10px; }
body:not(.is-app) .settings-sections { gap: 12px; }
body:not(.is-app) .settings-layout { margin-top: 12px; }
body:not(.is-app) .settings-nav { margin-bottom: 12px; }
body:not(.is-app) .notice-group + .notice-group { margin-top: 14px; }

body:not(.is-app) .history-day, body:not(.is-app) button.history-day { min-height: 66px; }
body:not(.is-app) .history-days { gap: 6px; }

/* ===== Emergency hotlines (website): a list — one row per contact, numbers in columns ===== */
body:not(.is-app) .hotline-grid, body:not(.is-app) .hotline-pinned { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
body:not(.is-app) .hotline-pinned { margin-bottom: 12px; }
body:not(.is-app) .hotline-grid .hotline-card, body:not(.is-app) .hotline-pinned .hotline-card, body:not(.is-app) .hotline-directory .hotline-card { display: grid; grid-template-columns: minmax(220px, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 14px; margin-bottom: -1px; padding: 10px 14px 10px 16px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: inset 3px 0 0 var(--hotline, var(--accent)); }
body:not(.is-app) .hotline-grid .hotline-card:hover, body:not(.is-app) .hotline-pinned .hotline-card:hover { background: var(--surface-soft); }
body:not(.is-app) .hotline-grid .hotline-card[hidden] { display: none; }
body:not(.is-app) .hotline-card .hotline-card-head { min-width: 0; }
body:not(.is-app) .hotline-card .hotline-card-head small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body:not(.is-app) .hotline-card .hotline-number, body:not(.is-app) .hotline-directory .hotline-number { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 0; border-radius: 0; background: transparent; }
body:not(.is-app) .hotline-card .hotline-digits, body:not(.is-app) .hotline-number.is-large .hotline-digits { font-size: 15px; }
body:not(.is-app) .hotline-card .hotline-digits small { font-size: 9.5px; }
body:not(.is-app) .hotline-card.is-pinned { box-shadow: inset 3px 0 0 var(--hotline, var(--accent)); }
body:not(.is-app) .hotline-pinned .hotline-card, body:not(.is-app) .hotline-pinned .hotline-card.is-pinned { border: 0; border-radius: 0; }
body:not(.is-app) .hotline-card.is-pinned::before { display: none; }
body:not(.is-app) .hotline-pinned .hotline-card.is-pinned { background: transparent; }
body:not(.is-app) .hotline-pinned .hotline-card.is-pinned:hover { background: var(--surface-soft); }
body:not(.is-app) .hotline-card .hotline-number, body:not(.is-app) .hotline-directory .hotline-number { grid-template-columns: 148px auto; justify-content: start; }
body:not(.is-app) .dashboard-head-actions [data-copy] { white-space: nowrap; }
@media (max-width: 1100px) {
    body:not(.is-app) .hotline-grid .hotline-card, body:not(.is-app) .hotline-pinned .hotline-card, body:not(.is-app) .hotline-directory .hotline-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    body:not(.is-app) .hotline-card .hotline-card-head { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    body:not(.is-app) .hotline-grid .hotline-card, body:not(.is-app) .hotline-pinned .hotline-card, body:not(.is-app) .hotline-directory .hotline-card { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}

/* ===== Campus map (user website): edge-to-edge map, side panel as tall as the map, quieter list ===== */
.campus-dock-primary, button.campus-dock-primary { background: #c63f4a; } /* a solid red in both themes (dark mode's pink danger washed out the white text) */
.campus-dock-primary:hover { background: #ad333d; }
body:not(.is-app) .map-status { padding: 6px 8px 6px 8px; border-radius: 12px; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); }
body:not(.is-app) .map-status-icon { width: 24px; height: 24px; border-radius: 8px; }
body:not(.is-app) .map-status-icon svg { width: 15px; height: 15px; }
body:not(.is-app) .map-status-text { font-size: 12.5px; }
body:not(.is-app) .campus-map-card.geo-map-card.card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; }
body:not(.is-app) .campus-map-card > * { grid-column: 1 / -1; }
body:not(.is-app) .campus-map-card > .map-key { grid-column: 1; padding: 10px 16px; font-size: 12px; }
body:not(.is-app) .campus-map-card > .campus-map-help { grid-column: 2; align-self: stretch; display: flex; align-items: center; padding: 10px 16px; }
body:not(.is-app) .campus-map-card > .campus-map-help[open] { grid-column: 1 / -1; display: block; }
body:not(.is-app) .campus-safety-panel .campus-safety-section { gap: 8px; padding: 12px 14px; }
body:not(.is-app) .campus-safety-panel .safety-search { margin: 0 0 2px; }
body:not(.is-app) .campus-safety-panel .safety-search input { min-height: 36px; }
body:not(.is-app) .campus-safety-panel .campus-safety-group { gap: 0; }
body:not(.is-app) .campus-safety-panel .campus-safety-group h4 { margin: 8px 0 2px; padding: 0 8px; font-size: 11px; }
body:not(.is-app) .campus-safety-panel .safety-row, body:not(.is-app) .campus-safety-panel button.safety-row { padding: 6px 8px; }
body:not(.is-app) .campus-safety-panel .safety-row-copy strong { font-size: 13.5px; }
body:not(.is-app) .campus-safety-panel .safety-row-copy small { font-size: 12px; }
body:not(.is-app) .campus-safety-panel .safety-status { gap: 6px; padding: 0; background: none; font-size: 11.5px; font-weight: 600; }
body:not(.is-app) .campus-safety-panel .safety-status::before { width: 7px; height: 7px; flex: none; border-radius: 50%; background: currentColor; content: ""; }
@media (min-width: 1001px) {
    body:not(.is-app) .campus-safety-layout { grid-template-columns: minmax(0, 1fr) 320px; align-items: stretch; gap: 12px; }
    body:not(.is-app) .campus-safety-layout .campus-map-card .campus-map.geo-map { height: calc(100vh - 214px); min-height: 440px; }
    body:not(.is-app) .campus-map-card:has(.map-offline-banner:not([hidden])) .campus-map.geo-map { height: calc(100vh - 290px); }
    /* The panel takes the map's height and scrolls inside, instead of stretching the page. */
    body:not(.is-app) .campus-safety-panel.card { position: static; max-height: none; contain: size; overflow-y: auto; }
}

/* ===== Campus map: "you are here" (blue dot, facing beam) and the My location button ===== */
.you-here { pointer-events: none; }
.you-here .you-dot { position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; border: 3px solid #fff; border-radius: 50%; background: #1a73e8; box-shadow: 0 1px 6px rgba(0, 0, 0, .35); transform: translate(-50%, -50%); }
.you-here .you-dot::after { position: absolute; inset: -9px; border-radius: 50%; background: rgba(26, 115, 232, .28); content: ""; animation: you-pulse 2s ease-out infinite; z-index: -1; }
@keyframes you-pulse { from { opacity: .9; transform: scale(.5); } to { opacity: 0; transform: scale(1.6); } }
.you-here .you-beam { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transform-origin: 50% 50%; transition: opacity .3s ease; }
.you-here.has-heading .you-beam { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .you-here .you-dot::after { animation: none; opacity: .5; } }
.map-locate { top: 142px; left: 16px; width: 38px; min-height: 38px; padding: 0; }
.map-locate[aria-pressed="true"] { border-color: color-mix(in srgb, #1a73e8 55%, var(--line)); color: #1a73e8; }
.map-locate[aria-pressed="true"] svg circle:first-child { fill: currentColor; }
@media (max-width: 760px) { .map-locate { top: 138px; left: 14px; } }
body.is-app .map-locate { top: 126px; left: 10px; width: 34px; min-height: 34px; }
@media print { .map-locate, .you-here { display: none; } }

/* ===== Dashboard: students / staff outside, beside the on-campus number ===== */
/* The counter: on-campus number on the left; students / staff outside stacked on the right, behind a thin divider. */
.dash-kpi.dash-kpi-hero { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 18px; }
.dash-kpi-hero .dash-kpi-icon { display: none; }
.dash-kpi-hero-main { display: grid; gap: 2px; min-width: 0; }
.dash-kpi-off { display: grid; gap: 10px; padding-left: 18px; border-left: 1px solid rgba(255, 255, 255, .24); }
.dash-kpi-off > span { display: grid; gap: 1px; }
.dash-kpi-off b { color: #fff; font-size: 22px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.dash-kpi-hero .dash-kpi-off small { color: rgba(255, 255, 255, .78); font-size: 11.5px; white-space: nowrap; }

/* ===== User pages on phones (website and app; ":root body" keeps these ahead of the older app rules) ===== */
/* Profile: the page and form columns follow the screen, never their widest child (that pushed the page sideways). */
.settings-page, .settings-form { grid-template-columns: minmax(0, 1fr); }
.settings-page > *, .settings-form > * { min-width: 0; }
@media (max-width: 760px) {
    /* Profile: smaller tabs that scroll, with a fade at the edge so the rest are discoverable. */
    :root body .settings-nav { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); scrollbar-width: none; }
    :root body .settings-nav::-webkit-scrollbar { display: none; }
    :root body .settings-nav a { gap: 6px; padding: 10px 10px; font-size: 13.5px; }
    :root body .settings-nav a svg { width: 16px; height: 16px; }
    :root body .settings-nav a:last-child { margin-right: 28px; }
    /* Profile: the save bar appears once something changed (or right after saving), instead of covering the form. */
    :root body .settings-savebar:not(.is-dirty):not(.is-ok):not(.is-error) { display: none; }
}
@media (max-width: 640px) {
    /* History: a styled month box between the arrows. */
    :root body .history-month-nav { display: flex; gap: 8px; }
    :root body .history-month-form input[type="month"] { height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); font-size: 15px; font-weight: 700; text-align: center; }
    :root body .history-nav-arrow { width: 40px; min-height: 40px; padding: 0; font-size: 20px; }
    /* History: a phone calendar of small square days; tapping a day still opens its scans. */
    :root body .history-calendar-card { padding: 14px 12px; }
    :root body .history-legend span:has(b.is-entry), :root body .history-legend span:has(b.is-exit) { display: none; }
    :root body .history-weekdays span { font-size: 11px; }
    :root body .history-days { gap: 5px; }
    :root body .history-day, :root body button.history-day { position: relative; display: grid; place-items: center; place-content: center; min-height: 0; aspect-ratio: 1; padding: 0; border-radius: 10px; }
    :root body .history-day-top { justify-content: center; }
    :root body .history-day-counts, :root body .history-day-hours, :root body .history-day-io { display: none; }
    :root body .history-day-num { font-size: 14px; font-weight: 700; }
    :root body .history-day.is-present .history-day-num::after { display: none; }
    :root body .history-day.is-present { border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); background: var(--ok-soft); color: var(--ok); }
    :root body .history-day.is-future { border-color: transparent; background: transparent; }
    :root body .history-day.is-blank { border: 0; background: transparent; }
    :root body .history-day.has-alert::after, :root body .history-day.is-missing::after { position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%; content: ""; }
    :root body .history-day.is-missing::after { background: var(--warn); }
    :root body .history-day.has-alert::after { background: var(--danger); }
    :root body .history-day.is-today { box-shadow: inset 0 0 0 2px var(--accent); }
}
@media (max-width: 640px) {
    :root body .history-day-top { width: auto; }
    :root body .history-day-num { margin: 0; text-align: center; }
    /* Scan log: type chips in one swipeable row; Week and Order side by side, search below. */
    :root body .history-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    :root body .history-chips::-webkit-scrollbar { display: none; }
    :root body .history-chip { flex: none; }
    :root body .history-filterbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding: 10px; }
    :root body .history-filterbar .history-select { min-width: 0; }
    :root body .history-filterbar .history-select select { width: 100%; min-width: 0; }
    :root body .history-filterbar .history-select > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* the choices ("All weeks", "Newest first") say it */
    :root body .history-filterbar .history-select { padding: 0; }
    :root body .history-filterbar .history-search, :root body .history-filterbar .history-clear { grid-column: 1 / -1; }
    /* Home: the three shortcuts share one row. */
    :root body .me-hero-side { width: 100%; align-self: stretch; justify-self: stretch; }
    :root body .me-actions { display: flex; flex-wrap: nowrap; gap: 8px; width: 100%; align-self: stretch; justify-self: stretch; }
    :root body .me-actions a { flex: 1 1 0; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; min-height: 58px; padding: 8px 4px; font-size: 12.5px; white-space: nowrap; }
}
/* ===== Campus map in the phone app: the map fills the screen; key and safety places open as a sheet ===== */
body:not(.is-app) .map-places-toggle, body:not(.is-app) .campus-sheet-head, body:not(.is-app) .campus-sheet-key, body:not(.is-app) .campus-sheet-scrim { display: none !important; }
body.is-app .app-content:has(.campus-safety-layout) { padding-bottom: 0; }
body.is-app .campus-safety-layout .campus-map-card { margin: 0 -12px; border: 0; border-radius: 0; box-shadow: none; }
body.is-app .campus-map-card .campus-map { height: calc(100vh - 116px); height: calc(100dvh - var(--app-top-h, 52px) - var(--app-tabs-h, 64px)); min-height: 300px; }
body.is-app .campus-map-card:has(.map-offline-banner:not([hidden])) .campus-map { height: calc(100dvh - var(--app-top-h, 52px) - var(--app-tabs-h, 64px) - 64px); }
/* One column of controls on the left, one on the right: same size, same edge, same spacing. */
body.is-app .campus-map-stage .leaflet-top.leaflet-left { top: 10px; left: 10px; }
body.is-app .campus-map-stage .leaflet-left .leaflet-control { margin: 0; }
body.is-app .campus-map-stage .leaflet-control-zoom { border-radius: 10px; box-shadow: 0 3px 10px rgba(20, 18, 24, .18); }
body.is-app .campus-map-stage .leaflet-control-zoom a { width: 34px; height: 34px; line-height: 34px; }
body.is-app .map-recenter { top: 86px; left: 10px; }
body.is-app .map-locate { top: 128px; left: 10px; }
body.is-app .map-layers { top: 10px; right: 10px; z-index: 610; } /* its menu opens over the button below */
body.is-app .map-places-toggle { top: 52px; right: 10px; width: 34px; min-height: 34px; padding: 0; }
body.is-app .map-places-toggle[aria-expanded="true"] { color: var(--accent); }
/* The sheet slides up from behind the tab bar. */
body.is-app .campus-safety-panel.card { position: fixed; top: auto; right: 0; bottom: var(--app-tabs-h, 64px); left: 0; z-index: 850; max-height: min(72vh, 620px); max-height: min(72dvh, 620px); margin: 0; padding: 0 0 10px; overflow-y: auto; overscroll-behavior: contain; border: 0; border-radius: 18px 18px 0 0; box-shadow: 0 -12px 30px rgba(0, 0, 0, .28); transform: translateY(105%); visibility: hidden; transition: transform .28s cubic-bezier(.2, .8, .3, 1), visibility 0s linear .28s; }
body.is-app .campus-safety-panel.card.is-open { transform: none; visibility: visible; transition: transform .28s cubic-bezier(.2, .8, .3, 1); }
body.is-app .campus-sheet-scrim:not([hidden]) { position: fixed; inset: 0 0 var(--app-tabs-h, 64px); z-index: 840; display: block; background: rgba(0, 0, 0, .35); }
body.is-app .campus-sheet-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 16px 14px 10px; border-bottom: 1px solid var(--line); background: var(--surface); }
body.is-app .campus-sheet-head strong { flex: 1; font-size: 15px; }
body.is-app .campus-sheet-grip { position: absolute; top: 6px; left: 50%; width: 36px; height: 4px; border-radius: 4px; background: var(--line-strong); transform: translateX(-50%); }
body.is-app .campus-sheet-close, body.is-app button.campus-sheet-close { display: grid; width: 32px; min-height: 32px; height: 32px; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface-soft); color: var(--text); }
body.is-app .campus-sheet-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
body.is-app .map-key.is-sheet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; padding: 0; border: 0; color: var(--text); font-size: 13px; }
@media (prefers-reduced-motion: reduce) { body.is-app .campus-safety-panel.card, body.is-app .campus-safety-panel.card.is-open { transition: none; } }

/* Map popups and controls use the site font (Leaflet sets its own). */
.leaflet-container { font-family: inherit; }

/* ===== Occupancy: heat map view and the simulation tool ===== */
.occ-map-card .geo-map-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.occ-view { flex: none; }
.occ-view label span { font-size: 12.5px; }
.occ-legend[hidden] { display: none; }
.occ-heat-legend { align-items: center; }
.occ-legend i.occ-heat-scale { width: 120px; height: 9px; border-radius: 6px; background: linear-gradient(90deg, #2c7bb6, #00a6ca, #f9d057, #f29e2e, #d7191c); }
.occ-sim { display: grid; gap: 10px; padding: 12px 16px 14px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--warn) 7%, var(--surface)); }
.occ-sim[hidden] { display: none; }
.occ-sim-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.occ-sim-head p { flex: 1 1 260px; margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.occ-sim-badge { padding: 3px 10px; border-radius: 999px; background: var(--warn); color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.occ-sim-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.occ-sim-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 6px 18px; max-height: 220px; overflow-y: auto; }
.occ-sim-row { display: grid; grid-template-columns: minmax(0, 1fr) 110px 64px; align-items: center; gap: 10px; margin: 0; padding: 4px 0; }
.occ-sim-name { display: grid; min-width: 0; }
.occ-sim-name strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.occ-sim-name small { color: var(--muted); font-size: 11.5px; }
.occ-sim-row input[type="range"] { width: 100%; min-height: 0; padding: 0; accent-color: var(--warn); }
.occ-sim-row input[type="number"] { min-height: 32px; padding: 0 8px; font-size: 13px; text-align: right; }
.occ-live.is-sim { color: var(--warn); }
.occ-live.is-sim .live-dot { background: var(--warn); animation: none; box-shadow: none; }
[data-occ-simulate][aria-pressed="true"] { border-color: var(--warn); color: var(--warn); }
body.occ-simulating .occ-stats .history-stat strong { color: var(--warn); }

/* ===== Occupancy map: buttons, heat settings panel, legend card, building pills ===== */
.occ-map-stage .leaflet-top.leaflet-left { top: 12px; left: 12px; }
.occ-map-stage .leaflet-left .leaflet-control { margin: 0; }
.occ-map-stage .leaflet-control-zoom { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 6px 18px rgba(20, 18, 24, .16); }
.occ-map-stage .leaflet-control-zoom a { width: 36px; height: 36px; border-color: var(--line); background: var(--surface); color: var(--text); font-size: 18px; line-height: 36px; }
.occ-map-stage .leaflet-control-zoom a:hover { background: var(--surface-soft); }
.occ-map-btn, button.occ-map-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; margin: 0; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 6px 18px rgba(20, 18, 24, .16); color: var(--text); font-size: 13px; font-weight: 700; }
.occ-map-btn:hover { background: var(--surface-soft); color: var(--text); }
.occ-map-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.occ-map-btn[aria-expanded="true"] { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); color: var(--accent); }
.occ-fit { position: absolute; top: 94px; left: 12px; z-index: 600; }
.occ-fit[hidden] { display: none; }
.occ-heat-tools { position: absolute; top: 12px; right: 12px; z-index: 650; display: grid; justify-items: end; gap: 8px; }
.occ-heat-tools[hidden] { display: none; }
.occ-heat-panel { display: grid; gap: 12px; width: min(290px, calc(100vw - 48px)); max-height: min(560px, calc(100vh - 260px)); padding: 0 14px 14px; overflow-y: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: 0 18px 40px rgba(20, 18, 24, .25); animation: map-panel-in .2s cubic-bezier(.2, .8, .3, 1); }
.occ-heat-panel[hidden] { display: none; }
.occ-heat-panel { min-width: 260px; min-height: 160px; resize: both; } /* drag the corner to resize */
.occ-heat-panel header { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; margin: 0 -14px; padding: 12px 14px 10px; border-bottom: 1px solid var(--line); background: var(--surface); }
.occ-heat-panel header strong { font-size: 14px; }
.occ-heat-close, button.occ-heat-close { display: grid; width: 28px; min-height: 28px; height: 28px; place-items: center; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); }
.occ-heat-close:hover { background: var(--surface-soft); color: var(--text); }
.occ-heat-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.occ-heat-styles { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; }
.occ-heat-styles legend, .occ-heat-range > span { margin-bottom: 6px; padding: 0; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.occ-heat-styles label { display: grid; grid-template-columns: auto 64px 1fr; align-items: center; gap: 10px; margin: 0; padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font-size: 13px; font-weight: 600; }
.occ-heat-styles label:has(input:checked) { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: var(--accent-soft); }
.occ-heat-styles input { margin: 0; accent-color: var(--accent); }
.occ-heat-styles i { height: 10px; border-radius: 6px; }
.occ-heat-range { display: grid; gap: 4px; margin: 0; }
.occ-heat-range > span { display: flex; justify-content: space-between; margin: 0; }
.occ-heat-range b { color: var(--text); font-size: 12px; letter-spacing: 0; text-transform: none; }
.occ-heat-range input[type="range"] { width: 100%; min-height: 0; margin: 0; padding: 0; accent-color: var(--accent); }
.occ-heat-range small, .occ-heat-check small { display: block; color: var(--muted); font-size: 11.5px; font-weight: 500; }
.occ-heat-check { display: flex; align-items: flex-start; gap: 9px; margin: 0; font-size: 13px; font-weight: 600; cursor: pointer; }
.occ-heat-check input { margin: 2px 0 0; accent-color: var(--accent); }
.occ-heat-panel [data-occ-heat-reset] { justify-self: start; }
/* Legend: a small card at the bottom left. */
.occ-legend { bottom: 12px; left: 12px; gap: 6px 12px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--surface) 94%, transparent); box-shadow: 0 6px 18px rgba(20, 18, 24, .14); font-size: 12px; font-weight: 600; }
.occ-legend i { border-radius: 50%; }
.occ-legend i.occ-heat-scale { border-radius: 6px; }
/* Building numbers: white pills with a ring in the building's colour. */
.occ-label span { min-width: 30px; height: 26px; padding: 0 8px; border: 2.5px solid var(--c); background: #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, .22); color: #1d1c21; font-size: 12.5px; font-weight: 800; }

/* Occupancy map: a calm, low-colour base map (light), a dimmed inverted one in dark mode. */
.occ-map.base-soft .leaflet-tile-pane { filter: saturate(.25) brightness(1.06) contrast(.92); }
.occ-map:is(.base-soft, .base-dark) .leaflet-tile-container img.leaflet-tile { width: 256.5px !important; height: 256.5px !important; } /* hides hairline seams the filter shows between tiles */
body[data-theme="dark"] .occ-map.base-soft .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) saturate(.2) brightness(.85) contrast(.9); }
@media (prefers-color-scheme: dark) { body:not([data-theme="light"]) .occ-map.base-soft .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) saturate(.2) brightness(.85) contrast(.9); } }

/* ===== Phone app: tidier page headers ===== */
/* Notifications: the summary and "Mark all as read" share one row. */
body.is-app .dashboard-head:has(form [value="mark_all_read"]) { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; text-align: left; }
body.is-app .dashboard-head:has(form [value="mark_all_read"]) > :first-child { flex: 1; min-width: 0; }
body.is-app .dashboard-head:has(form [value="mark_all_read"]) .page-subtitle { margin: 0; text-align: left; font-size: 13px; }
body.is-app .dashboard-head > form:has([value="mark_all_read"]) { flex: none; margin: 0; }
body.is-app .dashboard-head:has(form [value="mark_all_read"]) .dashboard-head-actions { flex: none; margin: 0; }
body.is-app .dashboard-head form [value="mark_all_read"] ~ button { min-height: 32px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; }
/* History: month arrows and box on one compact row. */
body.is-app .history-month-nav { margin-top: 8px; }
@media (max-width: 640px) {
    /* History: the calendar legend wraps under the month name instead of running off the edge. */
    :root body .history-calendar-card .history-card-head { flex-wrap: wrap; row-gap: 6px; }
    :root body .history-calendar-card .history-legend { flex: 1 0 100%; flex-wrap: wrap; gap: 4px 12px; }
    /* Scan log: "Expand all · Collapse all" on its own row under the filters. */
    :root body .history-filterbar .history-expand { display: flex; grid-column: 1 / -1; align-items: center; gap: 8px; white-space: nowrap; }
}
/* Home: the tab bar already has History, Map and Profile, so the shortcut buttons stay hidden in the app. */
:root body.is-app .me-actions { display: none; }

/* ===== Floating tool windows (occupancy and evacuation simulations): drag by the title bar, Hide folds it, resize from the corner ===== */
.sim-window { position: fixed; right: 24px; bottom: 24px; z-index: 1200; display: flex; width: min(420px, calc(100vw - 32px)); max-height: calc(100vh - 32px); height: min(560px, calc(100vh - 120px)); min-width: 300px; min-height: 48px; flex-direction: column; resize: both; gap: 0; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: 0 24px 60px rgba(20, 18, 24, .3); }
.sim-window[hidden] { display: none; }
.occ-sim-bar { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--warn) 9%, var(--surface)); cursor: grab; touch-action: none; user-select: none; }
.occ-sim-bar:active { cursor: grabbing; }
.occ-sim-bar strong { font-size: 13.5px; }
.occ-sim-total { flex: 1; color: var(--muted); font-size: 12px; font-weight: 600; text-align: right; }
.occ-sim-win, button.occ-sim-win { display: grid; width: 30px; min-height: 30px; height: 30px; place-items: center; padding: 0; border: 0; border-radius: 8px; background: transparent; box-shadow: none; color: var(--muted); cursor: pointer; }
.occ-sim-win:hover { background: var(--surface-soft); color: var(--text); }
.occ-sim-win.is-close:hover { background: var(--danger); color: #fff; }
.occ-sim-win svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.occ-sim-body { display: grid; flex: 1; align-content: start; gap: 10px; min-height: 0; padding: 12px 14px 14px; overflow-y: auto; }
.sim-window.is-folded .occ-sim-body { display: none; }
.sim-window.is-folded { height: auto !important; min-height: 0; resize: none; } /* a folded window is just its bar */
.sim-window.is-folded .occ-sim-bar { border-bottom: 0; }
.occ-sim-note { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.sim-window .occ-sim-rows { grid-template-columns: minmax(0, 1fr); max-height: none; overflow: visible; }
.occ-sim-foot { display: flex; justify-content: flex-end; padding-top: 4px; border-top: 1px solid var(--line); }
@media (max-width: 640px) { .sim-window { right: 16px; bottom: 16px; } }

/* ===== Map Manager: evacuation drill window ===== */
.evac-sim { width: min(440px, calc(100vw - 32px)); height: min(640px, calc(100vh - 120px)); }
.evac-sim-controls { display: grid; gap: 10px; }
.evac-sim-field { display: grid; gap: 5px; margin: 0; padding: 0; border: 0; }
.evac-sim-field > span, .evac-sim-field legend { margin-bottom: 4px; padding: 0; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.evac-sim-field input[type="number"] { width: 120px; min-height: 34px; }
.evac-sim-capacity { gap: 6px; }
.evac-sim-capacity label { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 600; cursor: pointer; }
.evac-sim-capacity input[type="radio"] { margin: 0; accent-color: var(--accent); }
.evac-sim-capacity input[type="number"] { width: 80px; min-height: 30px; padding: 0 8px; }
.evac-sim-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.evac-sim-status { margin: 0; padding: 8px 10px; border-radius: 10px; background: var(--surface-soft); font-size: 12.5px; line-height: 1.45; }
.evac-sim-status:empty { display: none; }
.evac-sim-results { display: grid; gap: 10px; }
.evac-sim-results[hidden] { display: none; }
.evac-sim-summary { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
.evac-sim-stat { display: grid; gap: 1px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
.evac-sim-stat small { color: var(--muted); font-size: 11px; }
.evac-sim-stat strong { font-size: 15px; font-variant-numeric: tabular-nums; }
.evac-sim-stat.is-bad strong { color: var(--danger); }
.evac-sim-stat.is-warn strong { color: var(--warn); }
.evac-sim-points { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.evac-sim-points li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
.evac-sim-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--c); }
.evac-sim-point { display: grid; min-width: 0; }
.evac-sim-point strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.evac-sim-point small { color: var(--muted); font-size: 11.5px; }
.evac-sim-count { white-space: nowrap; }
.evac-sim-count b { font-size: 15px; }
.evac-sim-count small { margin-left: 3px; color: var(--muted); font-size: 11.5px; }
.evac-sim-bar { grid-column: 2 / -1; height: 5px; overflow: hidden; border-radius: 4px; background: var(--surface-soft); }
.evac-sim-bar i { display: block; height: 100%; border-radius: 4px; background: var(--c); }
.evac-sim-key { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; color: var(--muted); font-size: 11.5px; }
.evac-sim-key span { display: inline-flex; align-items: center; gap: 5px; }
.evac-sim-key i { width: 10px; height: 10px; border-radius: 50%; }
.evac-sim-key i.is-placed { background: #2f6fd1; }
.evac-sim-key i.is-full { border: 2px solid #b3261e; background: #fff; }
.evac-sim-key i.is-none { border: 2px solid #6b6f7b; background: #fff; }
.evac-sim-label { border: 0; background: none; }
.evac-sim-label span { display: inline-grid; min-width: 34px; height: 24px; padding: 0 7px; place-items: center; border: 2.5px solid var(--c); border-radius: 999px; background: #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, .25); color: #1d1c21; font-size: 12px; font-weight: 800; transform: translate(-50%, -250%); white-space: nowrap; } /* above the place pin */
.evac-sim-label span.is-full { border-color: #b3261e; background: #b3261e; color: #fff; }

/* ===== Occupancy: map-first layout (slim stats strip, controls on the map, map fills the screen) ===== */
body:not(.is-app) .occ-stats { gap: 8px; margin-bottom: 10px; }
body:not(.is-app) .occ-stats .history-stat { gap: 10px; min-height: 0; padding: 8px 12px; border-radius: 12px; }
body:not(.is-app) .occ-stats .history-stat-icon { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px; }
body:not(.is-app) .occ-stats .history-stat-icon svg { width: 17px; height: 17px; }
body:not(.is-app) .occ-stats .history-stat > div { display: grid; min-width: 0; }
body:not(.is-app) .occ-stats .history-stat small { font-size: 11.5px; }
body:not(.is-app) .occ-stats .history-stat strong { font-size: 19px; line-height: 1.2; }
body:not(.is-app) .occ-stats .history-stat em { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
/* The map card is all map: the message and the Capacity / Heat map switch float on it. */
.occ-map-card { position: relative; }
.occ-map-card .geo-map-toolbar { position: absolute; top: 12px; right: 12px; left: 60px; z-index: 700; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 0; border: 0; background: none; pointer-events: none; }
.occ-map-card .geo-map-toolbar > * { pointer-events: auto; }
.occ-map-card .geo-map-message { max-width: min(460px, 55%); padding: 7px 12px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--surface) 94%, transparent); box-shadow: 0 6px 18px rgba(20, 18, 24, .14); color: var(--text); font-size: 12.5px; font-weight: 600; line-height: 1.4; }
.occ-map-card .occ-view { border: 1px solid var(--line); background: var(--surface); box-shadow: 0 6px 18px rgba(20, 18, 24, .14); }
.occ-heat-tools { top: 58px; }
@media (min-width: 1001px) {
    body:not(.is-app) .occ-layout { grid-template-columns: minmax(0, 1fr) 340px; align-items: stretch; gap: 12px; }
    body:not(.is-app) .occ-layout .occ-map.geo-map { height: calc(100vh - 228px); min-height: 380px; }
    /* The side panel takes the map's height and scrolls inside. */
    body:not(.is-app) .occ-side { position: static; max-height: none; contain: size; }
}
body:not(.is-app) .occ-building, body:not(.is-app) button.occ-building { padding: 8px 10px; }

/* Stats strip: the detail sits beside the number, so every tile is one short row. */
body:not(.is-app) .occ-stats .history-stat > div { grid-template-columns: auto minmax(0, 1fr); align-items: end; column-gap: 10px; }
body:not(.is-app) .occ-stats .history-stat > div > small { grid-column: 1 / -1; }
body:not(.is-app) .occ-stats .history-stat > div > strong { grid-row: 2 / span 2; align-self: center; }
body:not(.is-app) .occ-stats .history-stat > div > em { grid-column: 2; line-height: 1.3; }
body:not(.is-app) .occ-tabs [role="tab"] { padding: 8px 10px; white-space: nowrap; }
@media (min-width: 1001px) { body:not(.is-app) .occ-layout .occ-map.geo-map { height: calc(100vh - var(--occ-map-top, 250px) - 20px); } } /* --occ-map-top: measured on the page */

/* Occupancy count labels: small pills (smaller still when zoomed out), draggable off the building. */
.occ-label span { min-width: 22px; height: 20px; padding: 0 6px; border-width: 2px; box-shadow: 0 1px 5px rgba(0, 0, 0, .25); font-size: 11px; font-weight: 800; letter-spacing: -.01em; }
.occ-map.is-far .occ-label span { min-width: 18px; height: 16px; padding: 0 4px; border-width: 1.5px; font-size: 9.5px; }
.occ-label.leaflet-marker-draggable { cursor: grab; }
.occ-label.leaflet-marker-draggable:active { cursor: grabbing; }

/* Occupancy background maps (Layers): standard = plain OpenStreetMap, dark = inverted, satellite = Esri imagery. */
.occ-map.base-dark .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) saturate(.35) brightness(.9) contrast(.9); }
.occ-base { position: absolute; top: 140px; left: 12px; z-index: 640; display: grid; justify-items: start; gap: 8px; }
.occ-base[hidden] { display: none; }
.occ-base-panel { display: grid; gap: 8px; width: 236px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: 0 18px 40px rgba(20, 18, 24, .25); animation: map-panel-in .2s cubic-bezier(.2, .8, .3, 1); }
.occ-base-panel[hidden] { display: none; }
.occ-base-panel > strong { font-size: 13px; }
.occ-base-options { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.occ-base-options label { position: relative; display: grid; gap: 4px; margin: 0; padding: 5px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font-size: 12px; font-weight: 700; text-align: center; }
.occ-base-options input { position: absolute; opacity: 0; pointer-events: none; }
.occ-base-options label:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); color: var(--accent); }
.occ-base-options label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.occ-base-swatch { display: block; height: 44px; border-radius: 7px; background-size: cover; }
.occ-base-swatch.is-soft { background: linear-gradient(135deg, #eceae6 0 40%, #dcd9d3 40% 55%, #f4f2ef 55%); }
.occ-base-swatch.is-standard { background: linear-gradient(135deg, #f2efe9 0 35%, #aad3df 35% 50%, #c8e6b4 50% 70%, #f7c97f 70%); }
.occ-base-swatch.is-dark { background: linear-gradient(135deg, #2b2b30 0 40%, #3d3d44 40% 55%, #1e1e22 55%); }
.occ-base-swatch.is-satellite { background: linear-gradient(135deg, #4b5b3a 0 30%, #6b7a52 30% 50%, #8a8070 50% 65%, #3e4a33 65%); }

/* ===== Admin settings: two-step sign-in card ===== */
.twofa-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 14px; color: var(--muted); font-size: 13px; }
.twofa-status .settings-status-chip { position: static; }
.settings-status-chip.tone-muted { background: var(--surface-soft); color: var(--muted); }
.settings-status-chip.tone-muted i { background: var(--line-strong); }
.twofa-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }
.twofa-code { max-width: 220px; font-family: ui-monospace, Consolas, monospace; font-size: 20px; letter-spacing: .35em; text-align: center; }
.twofa-require { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.twofa-require .settings-subhead { margin: 0 0 10px; }
.twofa-block { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.twofa-intro { margin: -4px 0 12px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.twofa-require-row { display: flex; align-items: flex-start; gap: 10px; margin: 0; cursor: pointer; }
.twofa-require-row input { margin-top: 3px; accent-color: var(--accent); }
.twofa-require-row span { display: grid; gap: 2px; }
.twofa-require-row small { color: var(--muted); font-size: 12.5px; font-weight: 500; }

/* ===== Occupancy: Area heat (Beta) ===== */
.occ-beta { display: inline-block; margin-left: 5px; padding: 0 6px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 999px; color: var(--accent); font-size: 9.5px; font-weight: 700; letter-spacing: .06em; line-height: 1.6; text-transform: uppercase; vertical-align: 1px; }
.occ-sim-area { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); }
.occ-sim-area h4, .occ-sim-subhead { display: flex; align-items: center; margin: 0; font-size: 13px; font-weight: 700; }
.occ-sim-area-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.occ-sim-area-count { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 600; }
.occ-sim-area-count input { width: 90px; min-height: 32px; padding: 0 8px; }
.occ-area-tip { padding: 3px 8px; border: 0; border-radius: 8px; background: #b3261e; box-shadow: 0 3px 10px rgba(0, 0, 0, .25); color: #fff; font-size: 11.5px; font-weight: 700; }
.occ-area-tip::before { border-top-color: #b3261e; }

/* ===== Occupancy simulation window: compact layout with icons ===== */
.occ-sim .occ-sim-body { gap: 10px; padding: 10px 12px 12px; font-size: 12.5px; }
.occ-sim svg { flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.occ-sim .occ-sim-note { display: flex; align-items: flex-start; gap: 7px; margin: 0; padding: 7px 9px; border-radius: 9px; background: color-mix(in srgb, var(--warn) 9%, transparent); color: var(--muted); font-size: 11.5px; line-height: 1.4; }
.occ-sim .occ-sim-note svg { width: 14px; height: 14px; margin-top: 1px; color: var(--warn); }
.occ-sim-group { display: grid; gap: 7px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-soft); }
.occ-sim .occ-sim-group-head { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; font-weight: 700; }
.occ-sim .occ-sim-group-head svg { width: 15px; height: 15px; color: var(--accent); }
.occ-sim .occ-sim-group-head .occ-beta { margin-left: 2px; }
.occ-sim-hint { margin: -3px 0 0; color: var(--muted); font-size: 11.5px; line-height: 1.35; }
.occ-sim-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.occ-sim-number { display: inline-flex; align-items: center; gap: 5px; margin: 0; padding: 0 4px 0 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--muted); }
.occ-sim-number svg { width: 14px; height: 14px; }
.occ-sim-number input, .occ-sim-number input[type="number"] { width: 64px; min-height: 28px; height: 28px; padding: 0 2px; border: 0; background: transparent; box-shadow: none; color: var(--text); font-size: 12.5px; font-weight: 700; }
.occ-sim-number input:focus { outline: none; }
.occ-sim-number:focus-within { border-color: var(--accent); }
.occ-sim .occ-sim-seg { padding: 2px; border-radius: 8px; }
.occ-sim .occ-sim-seg label span { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; font-size: 11.5px; }
.occ-sim .occ-sim-seg svg { width: 12px; height: 12px; }
.occ-sim-toggle { position: relative; display: inline-flex; margin: 0; cursor: pointer; }
.occ-sim-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.occ-sim-toggle span { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 0 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--muted); font-size: 11.5px; font-weight: 600; }
.occ-sim-toggle svg { width: 13px; height: 13px; }
.occ-sim-toggle input:checked + span { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); background: var(--accent-soft); color: var(--accent); }
.occ-sim-toggle input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.occ-sim-actions { display: flex; flex-wrap: wrap; gap: 5px; }
.occ-sim-btn, button.occ-sim-btn { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; margin: 0; padding: 0 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: none; color: var(--text); font-size: 11.5px; font-weight: 600; cursor: pointer; }
.occ-sim-btn:hover { border-color: var(--line-strong); background: var(--surface-soft); color: var(--text); }
.occ-sim-btn svg { width: 13px; height: 13px; color: var(--muted); }
.occ-sim-btn.is-primary, button.occ-sim-btn.is-primary { border-color: #b85f66; background: #b85f66; color: #fff; }
.occ-sim-btn.is-primary svg { color: #fff; }
.occ-sim-btn.is-primary:hover { background: color-mix(in srgb, var(--accent) 88%, #000); color: #fff; }
.occ-sim-btn.is-stop:hover { border-color: var(--danger); color: var(--danger); }
.occ-sim-btn.is-stop:hover svg { color: var(--danger); }
.occ-sim .occ-sim-rows { gap: 2px; }
.occ-sim .occ-sim-row { grid-template-columns: minmax(0, 1fr) 90px 56px; gap: 8px; padding: 3px 0; }
.occ-sim .occ-sim-name strong { font-size: 12px; }
.occ-sim .occ-sim-name small { font-size: 10.5px; }
.occ-sim .occ-sim-row input[type="number"] { width: 56px; min-height: 26px; height: 26px; padding: 0 6px; font-size: 12px; text-align: center; }
.occ-sim .occ-sim-foot { padding-top: 8px; }

/* ===== Advanced settings: email service picker ===== */
.mail-service { margin-bottom: 14px; }
.mail-service-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.mail-service-option { position: relative; display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.mail-service-option input { margin-top: 3px; accent-color: var(--accent); }
.mail-service-option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.mail-service-option.is-off { cursor: not-allowed; opacity: .65; }
.mail-service-body { display: grid; gap: 3px; min-width: 0; }
.mail-service-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.mail-service-top strong { font-size: 14px; }
.mail-service-body small { overflow-wrap: anywhere; color: var(--muted); font-size: 12.5px; }
.mail-service-chip { padding: 1px 8px; border-radius: 999px; background: var(--surface-soft); color: var(--muted); font-size: 11px; font-weight: 700; }
.mail-service-chip.is-on { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.mail-service-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }

/* ---------- Anti-flash guard: keep at the very end of the file ---------- */
:root { --cp-icon: auto; }
body { opacity: 1; animation: none; }