/* Station Pulse single-file CSS. Mobile-first. No framework. Industrial / utilitarian.
   Color system mirrors fire-service status conventions:
     red    -> alert / disabled / urgent
     green  -> active / in-service / success
     amber  -> attention / warning
     blue   -> info
*/

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: hidden; max-width: 100%; }
body, h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

/* ---------- Theme ---------- */
:root {
    --c-bg:        #0b0e13;
    --c-bg-alt:    #131822;
    --c-card:      #171d28;
    --c-line:      #232c3b;
    --c-text:      #e8edf5;
    --c-text-dim:  #97a3b8;
    --c-text-mute: #6c7689;

    --c-brand:     #c92a2a;
    --c-brand-2:   #ff5151;

    --c-active:    #2db360;
    --c-warning:   #f0a800;
    --c-info:      #3b82f6;
    --c-alert:     #d12c2c;
    --c-disabled:  #6b7280;

    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 14px;
    --tap:  48px;          /* glove-friendly tap target minimum */

    --shadow-1: 0 1px 0 rgba(255,255,255,0.04), 0 6px 24px rgba(0,0,0,0.35);
    --shadow-2: 0 2px 0 rgba(255,255,255,0.05), 0 14px 48px rgba(0,0,0,0.45);

    --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

html, body { background: var(--c-bg); color: var(--c-text); }
body { font-family: var(--font-stack); line-height: 1.45; min-height: 100vh; }

a { color: var(--c-brand-2); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }

h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: 1.15rem; font-weight: 600; margin-bottom: .5rem; }
h3 { font-size: 1rem; font-weight: 600; }
.muted     { color: var(--c-text-dim); }
.small     { font-size: .8rem; }
.placeholder { color: var(--c-text-mute); font-style: italic; }

/* ---------- Top bar ---------- */
.topbar {
    position: sticky; top: 0; z-index: 30;
    display: flex; align-items: center; justify-content: space-between;
    gap: .6rem;
    padding: .65rem .9rem;
    background: linear-gradient(180deg, #161c27 0%, #0d1119 100%);
    border-bottom: 1px solid var(--c-line);
    min-width: 0;
}
.topbar .brand {
    display: inline-flex; align-items: center; gap: .55rem;
    color: var(--c-text); font-weight: 700; text-decoration: none;
    min-width: 0; flex: 1 1 auto; overflow: hidden;
}
.topbar .brand-logo { height: 32px; width: 32px; flex: 0 0 auto; border-radius: 4px; object-fit: contain; }
.topbar .brand-logo-svg { height: 30px; width: 30px; flex: 0 0 auto; border-radius: 7px; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.topbar .brand-mark {
    width: 28px; height: 28px; border-radius: 6px;
    background: linear-gradient(135deg, var(--c-brand) 0%, var(--c-brand-2) 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15);
    flex: 0 0 auto;
}
.topbar .brand-mark-admin { background: linear-gradient(135deg, #4b0d0d 0%, #1f0606 100%); }
.topbar.topbar-admin {
    background: linear-gradient(180deg, #220909 0%, #110404 100%);
    border-bottom-color: #3a1010;
}
.topbar .brand-name {
    font-size: 1rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    min-width: 0;
}
.topbar .nav-toggle { flex: 0 0 auto; }

.nav-toggle {
    width: var(--tap); height: var(--tap);
    background: transparent; border: 1px solid var(--c-line); border-radius: var(--r-md);
    display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px;
    cursor: pointer;
}
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--c-text); border-radius: 2px; }

/* ---------- Shells ---------- */
.main-shell, .admin-shell { padding: 1rem; padding-bottom: 9rem; max-width: 900px; margin: 0 auto; }
.admin-nav { display: flex; gap: 1rem; }
.admin-nav a { color: var(--c-text); padding: .4rem .5rem; }

/* ---------- Flash ---------- */
.flash-stack { padding: .75rem 1rem 0; max-width: 900px; margin: 0 auto; }
.flash {
    padding: .65rem .85rem;
    border-radius: var(--r-md);
    margin-bottom: .55rem;
    border: 1px solid var(--c-line);
    background: var(--c-card);
    color: var(--c-text);
}
.flash-success { border-color: rgba(45,179,96,.55); background: rgba(45,179,96,.13); }
.flash-error   { border-color: rgba(209,44,44,.55); background: rgba(209,44,44,.13); }
.flash-info    { border-color: rgba(59,130,246,.55); background: rgba(59,130,246,.13); }
.flash-warning { border-color: rgba(240,168,0,.55);  background: rgba(240,168,0,.13); }

/* ---------- Cards / page ---------- */
.page { display: grid; gap: 1rem; }
.page-head { padding: .25rem 0 0; }
.card {
    background: var(--c-card);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    padding: 1rem;
    box-shadow: var(--shadow-1);
}
.card-status { border-left: 3px solid var(--c-active); }

/* ---------- Auth card ---------- */
.auth-card {
    max-width: 420px; margin: 1.5rem auto 0;
    background: var(--c-card);
    border: 1px solid var(--c-line); border-radius: var(--r-lg);
    padding: 1.25rem;
    box-shadow: var(--shadow-2);
}
.auth-card h1 { margin-bottom: .25rem; }
.auth-sub { color: var(--c-text-dim); margin-bottom: 1rem; }
.auth-foot { text-align: center; margin-top: 1rem; color: var(--c-text-dim); }
.form-error {
    padding: .55rem .75rem;
    border-radius: var(--r-md);
    background: rgba(209,44,44,.12);
    border: 1px solid rgba(209,44,44,.55);
    color: #ffb5b5;
    margin-bottom: .8rem;
}

/* ---------- Forms ---------- */
.field { display: block; margin: .8rem 0; }
.field > span { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .35rem; color: var(--c-text); }
.field small  { display: block; margin-top: .3rem; color: var(--c-text-mute); }
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="number"],
.field input[type="file"],
.field select,
.field textarea {
    width: 100%; min-height: var(--tap);
    padding: .65rem .8rem;
    background: var(--c-bg-alt);
    color: var(--c-text);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
}
.field input:focus, .field select:focus, .field textarea:focus {
    outline: 2px solid var(--c-brand);
    outline-offset: 1px;
}
.thumb { display: block; margin: .25rem 0 .35rem; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: var(--tap); padding: .55rem 1rem;
    border-radius: var(--r-md);
    background: var(--c-bg-alt); color: var(--c-text);
    border: 1px solid var(--c-line);
    font-weight: 600; cursor: pointer; text-decoration: none;
    transition: transform .04s ease;
}
.btn:active { transform: translateY(1px); }
.btn:hover { text-decoration: none; }
.btn-primary {
    background: linear-gradient(180deg, var(--c-brand-2) 0%, var(--c-brand) 100%);
    border-color: #5a0d0d; color: white;
}
.btn-secondary { background: var(--c-bg-alt); }
.btn-danger    { background: #2a0a0a; border-color: #6a1818; color: #ffd2d2; }
.btn-block     { width: 100%; }
.btn-tiny      { min-height: 36px; padding: .35rem .6rem; font-size: .85rem; }

.inline-form { display: inline-flex; gap: .25rem; align-items: center; }

/* ---------- Section tabs ---------- */
.section-tabs {
    display: flex; flex-wrap: wrap; gap: .35rem;
    padding: .25rem 0;
}
.section-tabs a {
    padding: .45rem .8rem;
    border: 1px solid var(--c-line);
    border-radius: 999px;
    background: var(--c-bg-alt);
    color: var(--c-text);
    text-decoration: none;
    font-size: .85rem;
}

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.data-table th, .data-table td {
    text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--c-line); vertical-align: middle;
}
.data-table th { font-weight: 600; color: var(--c-text-dim); background: rgba(255,255,255,.02); }
.data-table tr:hover td { background: rgba(255,255,255,.03); }

/* ---------- Role / status pills ---------- */
.role-pill {
    display: inline-block; padding: .15rem .55rem; border-radius: 999px;
    font-size: .75rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
    border: 1px solid var(--c-line); background: var(--c-bg-alt);
}
.role-super_admin       { color: #ffd2d2; border-color: #6a1818; background: #2a0a0a; }
.role-admin             { color: #ffe7b8; border-color: #5d4214; background: #1f1607; }
.role-engineer          { color: #b8e7ff; border-color: #14425d; background: #07161f; }
.role-equipment_manager { color: #d4b8ff; border-color: #2c1c50; background: #100722; }
.role-user              { color: #c8d1e0; border-color: var(--c-line); background: var(--c-bg-alt); }
.role-active   { color: #d2ffd6; border-color: #186a23; background: #0a2a0e; }
.role-disabled { color: #ffd2d2; border-color: #6a1818; background: #2a0a0a; }
.role-pending  { color: #ffe7b8; border-color: #5d4214; background: #1f1607; }

/* ---------- Bottom nav (mobile) ----------
 * Predictable two-row stack: 5 columns, wraps to 5 on top + 4 on bottom for
 * the 9 items today. Locked column count keeps badges (Checks / Alerts) from
 * pushing the layout into an inconsistent number of rows.
 */
.bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: 1fr;
    background: linear-gradient(180deg, #0d1119 0%, #060a10 100%);
    border-top: 1px solid var(--c-line);
    padding: .3rem .25rem calc(env(safe-area-inset-bottom, 0) + .3rem);
    gap: 2px;
}
.bn-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 60px; gap: 3px; min-width: 0; padding: .2rem .15rem;
    color: var(--c-text); text-decoration: none; font-size: .72rem;
    border-radius: var(--r-md); overflow: hidden;
}
.bn-item:hover { background: rgba(255,255,255,.03); }
.bn-ico { font-size: 1.15rem; line-height: 1; }
.bn-lab { font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bn-form { background: transparent; border: 0; padding: 0; margin: 0; }
.bn-form button {
    appearance: none; background: transparent; border: 0; cursor: pointer;
    color: var(--c-text); width: 100%; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 0;
}

/* ---------- Layout adjustments ---------- */
.grid-3 { display: grid; gap: .85rem; grid-template-columns: 1fr; }
@media (min-width: 720px) {
    .grid-3 { grid-template-columns: repeat(3, 1fr); }
    .main-shell, .admin-shell { padding-bottom: 2rem; }
    .bottom-nav { display: none; }
    .topbar .brand-name { font-size: 1.1rem; }
}

@media (min-width: 1100px) {
    .main-shell, .admin-shell { max-width: 1080px; }
}
@media (min-width: 1400px) {
    .main-shell, .admin-shell { max-width: 1280px; }
}

/* Pages with wide data tables (PPE/Gear, Apparatus list, Alerts list, etc.)
 * can opt into a wider shell by adding the `page-wide` modifier on the
 * outer <section class="page">. Tested on the same monitor sizes as above. */
.main-shell:has(.page.page-wide) {
    max-width: min(1600px, calc(100vw - 2rem));
}
@media (max-width: 720px) {
    .main-shell:has(.page.page-wide) { max-width: 100%; padding-left: .75rem; padding-right: .75rem; }
}

.bullets { padding-left: 1.1rem; }
.bullets li { margin: .25rem 0; }

.hero .page-head h1 { font-size: 2rem; }

code { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; background: rgba(255,255,255,.05); padding: 1px 5px; border-radius: 4px; }


/* ===========================================================
   PHASE 2 - Apparatus / Checks / Alerts / Journal components
   =========================================================== */

/* Utility layouts ------------------------------------------------ */
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.row-form    { display: flex; align-items: stretch; gap: .5rem; flex-wrap: wrap; }
.row-form input[type="text"], .row-form input[type="number"], .row-form select { flex: 1 1 200px; min-height: var(--tap); padding: .55rem .75rem; background: var(--c-bg-alt); color: var(--c-text); border: 1px solid var(--c-line); border-radius: var(--r-md); }
.form-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .75rem; }
.grid-2 { display: grid; gap: .85rem; grid-template-columns: 1fr; }
@media (min-width: 600px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.preserve-newlines { white-space: pre-wrap; }
.hidden-form { display: none; }
.empty-state { text-align: center; padding: 2rem 1rem; }

/* Section tabs (refined) ----------------------------------------- */
.section-tabs a.active {
    background: linear-gradient(180deg, #1d2433 0%, #131822 100%);
    border-color: #2b3447;
    color: var(--c-text);
}

/* Chips & badges ------------------------------------------------- */
.chip {
    display: inline-flex; align-items: center;
    padding: .15rem .5rem;
    border-radius: 999px;
    font-size: .72rem;
    background: var(--c-bg-alt);
    border: 1px solid var(--c-line);
    color: var(--c-text-dim);
    font-weight: 600;
}
.chip-due   { color: #ffe7b8; border-color: #5d4214; background: #1f1607; }
.chip-alert { color: #ffd2d2; border-color: #6a1818; background: #2a0a0a; }
.chip-ok    { color: #d2ffd6; border-color: #186a23; background: #0a2a0e; }

.badge {
    position: absolute; top: 6px; right: 6px;
    min-width: 20px; height: 20px;
    border-radius: 999px;
    background: var(--c-alert);
    color: white;
    font-size: .7rem;
    font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 6px;
    box-shadow: 0 0 0 2px rgba(0,0,0,.35);
}
.badge-alert { background: var(--c-alert); }

/* Apparatus grid (list page) ------------------------------------- */
.apparatus-grid {
    display: grid; gap: .85rem;
    grid-template-columns: 1fr;
}
@media (min-width: 640px) { .apparatus-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px){ .apparatus-grid { grid-template-columns: repeat(3, 1fr); } }

.ap-card {
    position: relative;
    display: block;
    background: var(--c-card);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    overflow: hidden;
    color: var(--c-text);
    text-decoration: none;
    transition: transform .08s ease, border-color .12s ease;
    box-shadow: var(--shadow-1);
}
.ap-card:hover { transform: translateY(-1px); border-color: #2b3447; text-decoration: none; }
.ap-card.status-out_of_service { border-left: 4px solid var(--c-warning); }
.ap-card.status-retired        { opacity: .6; }

.ap-photo {
    position: relative;
    aspect-ratio: 16/9;
    background: #0a0d13;
    overflow: hidden;
}
.ap-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ap-photo-empty {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    background: linear-gradient(135deg, #1d2433 0%, #0d1119 100%);
    color: #38445e;
    font-size: 3rem;
    font-weight: 700;
    letter-spacing: -.05em;
}
.ap-photo-empty-large { font-size: 5rem; aspect-ratio: 4/3; }

.ap-body { padding: .85rem 1rem; }
.ap-title { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: .35rem; }
.ap-name { font-weight: 700; font-size: 1.05rem; }
.ap-type { font-size: .8rem; color: var(--c-text-mute); }
.ap-meta { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; }

/* Apparatus detail page ------------------------------------------ */
.ap-detail-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 800px) { .ap-detail-grid { grid-template-columns: 320px 1fr; } }

.ap-photo-card { padding: 0; overflow: hidden; }
.ap-photo-card .ap-photo-large {
    width: 100%; height: auto; display: block; object-fit: cover;
}
.ap-photo-card .ap-photo-empty-large { width: 100%; }
.ap-photo-form { padding: 1rem; border-top: 1px solid var(--c-line); }

/* Edit-page photo card: side-by-side preview + form so the placeholder
 * never balloons to the full edit-page width. */
.ap-photo-card-edit { padding: 1rem; overflow: visible; }
.ap-photo-edit-grid {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 1.25rem;
    align-items: start;
}
@media (max-width: 640px) {
    .ap-photo-edit-grid { grid-template-columns: 1fr; }
    .ap-photo-edit-preview { max-width: 220px; }
}
.ap-photo-edit-preview {
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--c-bg-alt);
}
.ap-photo-edit-img {
    display: block;
    width: 100%;
    height: 165px;
    object-fit: cover;
}
.ap-photo-edit-empty {
    width: 100%;
    height: 165px;
    font-size: 3rem;
}

.info-chips { display: flex; gap: .35rem; flex-wrap: wrap; }
.info-chip {
    display: inline-flex; gap: .35rem;
    align-items: center;
    padding: .35rem .65rem;
    border-radius: var(--r-md);
    background: var(--c-bg-alt);
    border: 1px solid var(--c-line);
    font-size: .85rem;
}
.info-chip strong { color: var(--c-text-dim); font-weight: 600; }
.info-chip-muted  { opacity: .6; }
.info-chip-warn   { background: rgba(240,168,0,.10);  border-color: rgba(240,168,0,.55); }
.info-chip-danger { background: rgba(209,44,44,.10);  border-color: rgba(209,44,44,.55); }

/* Templates list on apparatus detail ----------------------------- */
.template-list { list-style: none; padding: 0; margin: 0; }
.template-row {
    display: flex; gap: .65rem; align-items: center; justify-content: space-between;
    padding: .65rem .25rem;
    border-bottom: 1px solid var(--c-line);
    flex-wrap: wrap;
}
.template-row:last-child { border-bottom: none; }
.template-info { display: flex; flex-direction: column; gap: 2px; }
.template-name { font-weight: 600; }
.template-actions { display: flex; gap: .35rem; }

.check-history { list-style: none; padding: 0; margin: 0; }
.check-history li { padding: .4rem .25rem; border-bottom: 1px solid var(--c-line); }
.check-history li:last-child { border-bottom: none; }
.check-history a { color: var(--c-text); text-decoration: none; display: flex; gap: .5rem; align-items: center; }
.check-history a:hover { text-decoration: underline; }

/* Template editor ------------------------------------------------ */
.section-card { border-left: 3px solid var(--c-info); }
.item-list { list-style: none; padding: 0; margin: .5rem 0 0; }
.item-row { border-bottom: 1px solid var(--c-line); }
.item-row:last-child { border-bottom: none; }
.item-row details > summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; gap: .5rem;
    padding: .55rem .25rem;
}
.item-row details > summary::-webkit-details-marker { display: none; }
.item-row .item-label { flex: 1; }
.qty-bracket { color: var(--c-text-dim); font-weight: 600; margin-right: 4px; }
.item-type-pill {
    font-size: .7rem;
    padding: .1rem .45rem;
    border-radius: 999px;
    background: rgba(59,130,246,.15);
    border: 1px solid rgba(59,130,246,.35);
    color: #b6d4ff;
    font-weight: 600;
}
.item-form { padding: .5rem .25rem .75rem; }
.add-item summary {
    display: inline-block;
    list-style: none;
    margin-top: .6rem;
    cursor: pointer;
}
.add-item summary::-webkit-details-marker { display: none; }
.add-item > div, .add-item form { margin-top: .75rem; }

/* Wizard form ---------------------------------------------------- */
.checkbox-grid {
    display: grid; gap: .5rem;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 1rem;
}
.check-tile {
    display: flex; align-items: center; gap: .6rem;
    padding: .65rem .8rem;
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    background: var(--c-bg-alt);
    cursor: pointer;
    font-weight: 600;
}
.check-tile input { transform: scale(1.2); }

/* Check perform UI ----------------------------------------------- */
.check-perform .check-form { display: grid; gap: 1rem; }
.check-summary .field { margin: .5rem 0; }

.section-perform { padding: 0; }
.section-perform-head {
    position: sticky; top: 60px; z-index: 5;
    background: var(--c-card);
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--c-line);
    border-top-left-radius: var(--r-lg);
    border-top-right-radius: var(--r-lg);
}
.section-perform-head h2 { margin: 0; font-size: 1.05rem; letter-spacing: .02em; text-transform: uppercase; }

.perform-items { list-style: none; padding: 0; margin: 0; }
.perform-item {
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--c-line);
    display: grid; gap: .5rem;
}
.perform-item:last-child { border-bottom: none; }
.perform-item.is-flagged { background: rgba(209,44,44,.06); }
.perform-item-label { font-weight: 600; display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; }
.flag-link { color: var(--c-alert); font-size: .8rem; }
.perform-item-input { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.perform-notes { margin: 0; }

.pf-toggle {
    display: inline-flex;
    border: 1px solid var(--c-line);
    border-radius: 999px;
    overflow: hidden;
    background: var(--c-bg-alt);
}
.pf-toggle label {
    padding: .5rem 1rem;
    min-height: var(--tap);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-weight: 700;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--c-text-dim);
}
.pf-toggle input { display: none; }
.pf-toggle label.is-on,
.pf-toggle label:has(input:checked) { color: white; }
.pf-toggle .pf-pass:has(input:checked) { background: var(--c-active); }
.pf-toggle .pf-fail:has(input:checked) { background: var(--c-alert); }

.pf-mini {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .25rem .55rem; border-radius: 999px;
    border: 1px solid var(--c-line); background: var(--c-bg-alt);
    font-size: .8rem;
}
.pf-mini input { transform: scale(1.05); }

.sub-items {
    list-style: none; padding: .25rem 0 0 1rem; margin: 0;
    display: flex; flex-direction: column; gap: .35rem;
    border-left: 2px solid var(--c-line);
}
.sub-item { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding-left: .5rem; }
.sub-label { color: var(--c-text-dim); }

.flag-controls > summary {
    list-style: none;
    display: inline-block;
}
.flag-controls > summary::-webkit-details-marker { display: none; }
.flag-body { margin-top: .65rem; padding: .65rem; border: 1px dashed rgba(209,44,44,.4); border-radius: var(--r-md); background: rgba(209,44,44,.05); }

.check-actions {
    position: sticky; bottom: 0;
    background: linear-gradient(180deg, transparent, var(--c-bg) 25%);
    padding: 1rem .25rem 1rem;
    display: flex; gap: .65rem; justify-content: flex-end; flex-wrap: wrap;
    margin: 0 -.5rem;
}

/* Currently Due list -------------------------------------------- */
.due-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .65rem; }
.due-row {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: .75rem;
    align-items: center;
    padding: .65rem; border: 1px solid var(--c-line); border-radius: var(--r-lg);
    background: var(--c-card);
}
.due-photo { width: 64px; height: 64px; border-radius: var(--r-md); overflow: hidden; background: #0a0d13; }
.due-photo img { width: 100%; height: 100%; object-fit: cover; }
.due-photo .ap-photo-empty { font-size: 1.5rem; }
.due-title { font-weight: 600; }
.due-meta  { margin-top: 2px; }
.due-action { margin: 0; }

/* Alerts list ---------------------------------------------------- */
.alert-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.alert-row {
    border: 1px solid var(--c-line);
    border-left-width: 4px;
    border-radius: var(--r-md);
    background: var(--c-card);
    overflow: hidden;
}
.alert-row.priority-urgent { border-left-color: var(--c-alert); }
.alert-row.priority-high   { border-left-color: var(--c-warning); }
.alert-row.priority-normal { border-left-color: #2b3447; }
.alert-row.priority-low    { border-left-color: #3b4256; opacity: .9; }

.alert-link {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: .5rem 1rem;
    align-items: center;
    padding: .65rem .85rem;
    color: var(--c-text);
    text-decoration: none;
}
.alert-link:hover { background: rgba(255,255,255,.03); text-decoration: none; }
.alert-ticket {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
    font-weight: 700;
    color: var(--c-text-dim);
}
.alert-title { font-weight: 600; }
.alert-apparatus { grid-column: 2; }
.alert-meta { display: flex; gap: .25rem; }

.priority-pill.priority-urgent { color: #ffd2d2; background: #2a0a0a; border-color: #6a1818; }
.priority-pill.priority-high   { color: #ffe7b8; background: #1f1607; border-color: #5d4214; }
.priority-pill.priority-normal { color: var(--c-text-dim); }
.priority-pill.priority-low    { opacity: .8; }

/* Alert detail --------------------------------------------------- */
.alert-detail .alert-meta { gap: .5rem; }
.comments-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; margin-bottom: 1rem; }
.comment-row { background: var(--c-bg-alt); border: 1px solid var(--c-line); border-radius: var(--r-md); padding: .65rem .85rem; }
.comment-head { display: flex; gap: .5rem; align-items: baseline; margin-bottom: .25rem; }
.comment-form { margin-top: 1rem; }

/* Journal -------------------------------------------------------- */
.journal-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .65rem; }
.journal-row {
    background: var(--c-card);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    padding: .65rem .85rem;
}
.journal-row.journal-system { border-left: 3px solid var(--c-info); }
.journal-head { display: flex; gap: .5rem; flex-wrap: wrap; align-items: baseline; }
.journal-head strong { font-weight: 700; }

/* Dashboard 3-col layout ---------------------------------------- */
.dash-grid {
    display: grid; gap: 1rem;
    grid-template-columns: 1fr;
}
@media (min-width: 900px)  { .dash-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .dash-grid { grid-template-columns: repeat(3, 1fr); } }

.dash-col { display: flex; flex-direction: column; min-height: 240px; }
.dash-col-head {
    display: flex; justify-content: space-between; align-items: baseline;
    padding-bottom: .35rem;
    border-bottom: 1px solid var(--c-line);
    margin-bottom: .75rem;
}
.dash-col-head h2 { margin: 0; text-transform: uppercase; font-size: .9rem; letter-spacing: .08em; color: var(--c-text-dim); }
.dash-col-action { font-size: .8rem; color: var(--c-text-dim); }
.dash-quick { display: flex; gap: .35rem; flex-wrap: wrap; }

.dash-apparatus, .dash-journal { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.dash-apparatus-row {
    display: grid; grid-template-columns: 56px 1fr; gap: .65rem; align-items: center;
    padding: .25rem; border-radius: var(--r-md);
}
.dap-thumb { display: block; width: 56px; height: 56px; border-radius: var(--r-md); overflow: hidden; background: #0a0d13; }
.dap-thumb img { width: 100%; height: 100%; object-fit: cover; }
.dap-thumb .ap-photo-empty { font-size: 1.2rem; }
.dap-name { font-weight: 600; color: var(--c-text); text-decoration: none; display: block; }
.dap-meta { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; margin-top: 2px; }

.dash-journal-row { padding: .35rem 0; border-bottom: 1px dashed var(--c-line); }
.dash-journal-row:last-child { border-bottom: none; }

.dash-due { margin-top: 0; }

/* Bottom-nav extras (badge on Alerts) --------------------------- */
.bn-item { position: relative; }
.bn-item .bn-badge {
    position: absolute; top: 4px; right: calc(50% - 22px);
    min-width: 16px; height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--c-alert);
    color: white; font-size: .65rem; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}

/* ===========================================================
   PHASE 3 - SCBA / breathing-air
   =========================================================== */

/* SCBA list table */
.scba-list th, .scba-list td { white-space: nowrap; }
.scba-list td:nth-child(5) { white-space: normal; }

/* Detail/show page two-column dl-grid */
.dl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem 1.2rem; margin-top: .5rem; }
.dl-grid > div { padding: .35rem 0; border-bottom: 1px dashed var(--c-line); }
.dl-grid dt { font-size: .8rem; color: var(--c-muted); margin: 0 0 2px 0; }
.dl-grid dd { margin: 0; font-weight: 600; }
.dl-grid .span-2 { grid-column: 1 / -1; }
@media (max-width: 640px) { .dl-grid { grid-template-columns: 1fr; } }

/* Form grid */
.form-grid.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.form-grid .span-2 { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid.two-col { grid-template-columns: 1fr; } }

.form-inline-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: end; }
.form-inline-row .field { flex: 1 1 220px; }

/* SCBA attachments grid */
.attachment-grid { list-style: none; padding: 0; margin: .6rem 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .8rem; }
.attachment-row { background: var(--c-card-2, rgba(255,255,255,.03)); border: 1px solid var(--c-line); border-radius: .4rem; padding: .5rem; text-align: center; }
.attachment-row img { width: 100%; height: 110px; object-fit: cover; border-radius: .3rem; display: block; }
.attachment-row .att-doc { display: block; padding: 1.2rem .3rem; color: var(--c-text); text-decoration: none; }
.attachment-row .att-ext { display: block; font-size: 1.6rem; font-weight: 800; color: var(--c-accent, #c92a2a); }
.attachment-row .att-name { display: block; font-size: .8rem; margin-top: .3rem; word-break: break-word; }

/* SCBA inspection perform-page */
.scba-perform .perform-section { margin-top: 1rem; }
.scba-perform .procedure-note { margin: 0 0 .6rem 0; font-style: italic; }
.perform-items { list-style: none; padding: 0; margin: 0; }
.perform-item { padding: .6rem 0; border-bottom: 1px solid var(--c-line); }
.perform-item:last-child { border-bottom: none; }
.perform-item-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: space-between; }
.perform-item-label { flex: 1 1 60%; font-weight: 600; }
.perform-item-control { flex: 0 0 auto; }
.perform-item textarea { width: 100%; margin-top: .35rem; }
.perform-item .flag-label { display: inline-flex; gap: .35rem; align-items: center; margin-top: .35rem; font-size: .85rem; color: var(--c-muted); }
.perform-item.is-flagged { background: rgba(201, 42, 42, .05); border-left: 3px solid var(--c-alert); padding-left: .5rem; }

/* Pass/Fail toggle */
.pf-toggle { display: inline-flex; gap: .25rem; }
.pf-toggle label { padding: .35rem .7rem; border: 1px solid var(--c-line); border-radius: .35rem; cursor: pointer; font-weight: 600; font-size: .85rem; }
.pf-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.pf-toggle .pf-pass { color: #0e8a4f; }
.pf-toggle .pf-fail { color: var(--c-alert); }
.pf-toggle .pf-pass:has(input:checked) { background: rgba(14, 138, 79, .15); border-color: #0e8a4f; }
.pf-toggle .pf-fail:has(input:checked) { background: rgba(201, 42, 42, .15); border-color: var(--c-alert); }

/* Sticky save/finalise bar (mobile-first) */
.sticky-bar { position: sticky; bottom: 0; background: var(--c-bg); padding: .6rem 0 calc(.6rem + env(safe-area-inset-bottom)); margin: 0 -1rem; border-top: 1px solid var(--c-line); display: flex; gap: .6rem; justify-content: flex-end; z-index: 5; }
.sticky-bar .btn { min-width: 8em; }

/* Intervals table */
.interval-table input[type=number] { width: 6em; }
.life-controls { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.inline-radio { display: inline-flex; gap: .3rem; align-items: center; }

/* Section tabs visited / active */
.section-tabs a.active { background: var(--c-accent, #c92a2a); color: white; }

/* Per-card SCBA chip */
.chip-scba { background: rgba(33, 119, 175, .12); color: #1d6fa5; border-color: #1d6fa5; }

/* ===========================================================
   PHASE 4 - PPE / gear
   =========================================================== */

.gear-list th, .gear-list td { font-size: .85rem; }
.gear-list .role-pill { font-size: .7rem; }
.gear-list a { color: var(--c-text); text-decoration: underline; }

.filter-bar .field { flex: 1 1 180px; min-width: 0; }

.gear-meta { grid-template-columns: repeat(4, 1fr); margin-bottom: .5rem; }
.gear-meta dt { font-size: .75rem; }
.gear-meta dd { font-weight: 500; font-size: .85rem; }
@media (max-width: 640px) { .gear-meta { grid-template-columns: 1fr 1fr; } }

/* Token (public) layout */
.layout-token .topbar { justify-content: center; }
.layout-token .brand { pointer-events: none; }
.token-shell { max-width: 760px; margin: 0 auto; padding: 1rem; padding-bottom: 8rem; }
.layout-token .sticky-bar { left: 0; right: 0; margin: 0; padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom)); }

/* ===========================================================
   PHASE 5 - Supplies / stock
   =========================================================== */

.perform-table th, .perform-table td { vertical-align: top; padding: .5rem .35rem; }
.perform-table input[type=number] { width: 6em; }
.perform-table input[type=date]   { width: 10em; }
.perform-table input[type=text]   { width: 100%; min-width: 8em; }
.perform-table td .muted          { display: block; }

.checkbox-field { flex-direction: row !important; align-items: center; gap: .5rem; }
.checkbox-field input[type=checkbox] { margin-right: .35rem; }

.role-pill.role-station   { background: rgba(33, 119, 175, .12);  color: #1d6fa5; border: 1px solid #1d6fa5; }
.role-pill.role-apparatus { background: rgba(201, 42, 42, .12);   color: var(--c-alert); border: 1px solid var(--c-alert); }

/* Supply dashboard chips inline with section titles */
.card h2 .chip { vertical-align: middle; margin-left: .4rem; font-size: .75rem; }

@media (max-width: 640px) {
    .perform-table thead { display: none; }
    .perform-table tr { display: block; border-bottom: 1px solid var(--c-line); padding: .5rem 0; }
    .perform-table td { display: flex; gap: .5rem; padding: .25rem 0; align-items: center; }
    .perform-table td::before { content: attr(data-label); color: var(--c-muted); font-size: .75rem; min-width: 4rem; }
}

/* ===========================================================
   PHASE 6/7 polish
   =========================================================== */

/* Bottom-nav sign-out is now a tiny <form> so it can POST + carry CSRF. */
.bn-form { background: none; padding: 0; margin: 0; border: 0; }
.bn-form button { background: none; border: 0; color: inherit; cursor: pointer; padding: .35rem .5rem; font: inherit; display: flex; flex-direction: column; align-items: center; gap: .15rem; }
.bn-form button:hover { color: var(--c-accent, #c92a2a); }

/* Home-page feature bullets */
.feature-bullets { list-style: disc; padding-left: 1.4rem; line-height: 1.6; }
.feature-bullets li { margin-bottom: .3rem; }

/* Auth foot links */
.auth-foot { margin-top: 1rem; text-align: center; font-size: .9rem; color: var(--c-muted); }
.auth-foot a { color: var(--c-accent, #c92a2a); text-decoration: none; }
.auth-foot a:hover { text-decoration: underline; }

/* 2FA setup */
.twofa-setup { display: flex; flex-wrap: wrap; gap: 2rem; align-items: flex-start; }
.twofa-qr { flex: 0 0 auto; padding: .5rem; background: #fff; border: 1px solid var(--c-line); }
.twofa-qr svg { display: block; max-width: 220px; height: auto; }
.twofa-manual { flex: 1 1 280px; min-width: 0; }
.twofa-secret { font-size: 1.1rem; letter-spacing: .1em; word-break: break-all; }
.twofa-uri { word-break: break-all; font-size: .8rem; }
.backup-codes { background: var(--c-bg); padding: 1rem; border: 1px dashed var(--c-line); font-size: 1.1rem; letter-spacing: .05em; }

/* Passkey CTA on login + settings list */
.passkey-cta { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--c-line); }

/* Actions menu */
.actions-menu { position: relative; display: inline-block; }
.actions-menu summary { list-style: none; cursor: pointer; }
.actions-menu summary::-webkit-details-marker { display: none; }
.actions-pop { position: absolute; right: 0; top: 100%; background: var(--c-bg); border: 1px solid var(--c-line); border-radius: .35rem; min-width: 220px; z-index: 20; padding: .35rem; box-shadow: 0 4px 16px rgba(0,0,0,.15); }
.actions-pop a, .actions-pop button { display: block; padding: .45rem .7rem; text-align: left; width: 100%; color: var(--c-text); text-decoration: none; background: none; border: 0; font: inherit; cursor: pointer; border-radius: .25rem; }
.actions-pop a:hover, .actions-pop button:hover { background: var(--c-line); }
.actions-pop .link-danger { color: var(--c-alert); }

/* Attachment thumbnails */
.attachment-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
.attachment-tile { border: 1px solid var(--c-line); padding: .5rem; border-radius: .35rem; }
.attachment-tile img { display: block; max-width: 100%; height: auto; margin-bottom: .35rem; }

/* Print-friendly */
@media print {
    body, .layout-tenant, .layout-token, .layout-admin { background: white !important; color: black !important; }
    .topbar, .bottom-nav, .actions-menu, .dash-quick, .flash-stack { display: none !important; }
    .print-only h1 { font-size: 18pt; }
}

/* P7b As-Needed picker */
.asneeded-head { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .5rem; }
.asneeded-list { list-style: none; padding: 0; margin: 0; }
.asneeded-list li { border-top: 1px solid var(--c-line); }
.asneeded-row { display: flex; justify-content: space-between; align-items: center; padding: .6rem 0; gap: .5rem; }
.asneeded-row span { font-weight: 600; }

/* §11 #5 alert sub-tabs */
.alert-subtabs { display: flex; gap: .3rem; margin: .5rem 0; flex-wrap: wrap; }
.alert-tab { background: none; border: 1px solid var(--c-line); padding: .25rem .6rem; font: inherit; font-size: .8rem; border-radius: 999px; cursor: pointer; color: var(--c-muted); }
.alert-tab.is-active { background: var(--c-accent, #c92a2a); color: white; border-color: var(--c-accent, #c92a2a); }
.alert-tab .chip { font-size: .7rem; margin-left: .35rem; padding: .05rem .4rem; }
.alert-tab.cat-vehicle  { border-color: #1d6fa5; color: #1d6fa5; }
.alert-tab.cat-ppe      { border-color: #c98c00; color: #c98c00; }
.alert-tab.cat-scba     { border-color: #6f42c1; color: #6f42c1; }
.alert-tab.cat-supplies { border-color: #0e8a4f; color: #0e8a4f; }
.alert-row.cat-ppe       { border-left-color: #c98c00; }
.alert-row.cat-scba      { border-left-color: #6f42c1; }
.alert-row.cat-supplies  { border-left-color: #0e8a4f; }
.alert-row.cat-vehicle   { border-left-color: #1d6fa5; }

/* §11 #6 PSTrax-style orange sticky Continue */
.sticky-bar .btn-primary { background: #f37021; border-color: #f37021; font-weight: 700; padding: .65rem 1.4rem; }
.sticky-bar .btn-primary:hover { background: #e1641a; border-color: #e1641a; }

/* Creator dashboard */
.admin-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; }
.metric-tile { background: var(--c-bg); border: 1px solid var(--c-line); border-radius: .35rem; padding: .8rem; text-align: center; }
.metric-tile.is-alert { border-color: var(--c-alert); background: rgba(201,42,42,.08); }
.metric-num { font-size: 1.7rem; font-weight: 700; line-height: 1.1; }
.metric-lbl { font-size: .85rem; color: var(--c-muted); margin-top: .25rem; }
.metric-sub { margin-top: .25rem; }

.health-list { list-style: none; padding: 0; margin: 0; }
.health-list li { padding: .5rem 0; border-bottom: 1px solid var(--c-line); }
.health-list li:last-child { border-bottom: 0; }
.health-list .is-ok::before   { content: "✓ "; color: #0e8a4f; font-weight: 700; }
.health-list .is-warn::before { content: "! "; color: var(--c-alert); font-weight: 700; }
.health-list .is-info::before { content: "· "; color: var(--c-muted); }

.role-pill.role-active   { background: rgba(14,138,79,.12); color: #0e8a4f; border: 1px solid #0e8a4f; }
.role-pill.role-pending  { background: rgba(201,140,0,.12); color: #c98c00; border: 1px solid #c98c00; }

/* Admin nav sign-out button styled like the other links */
.admin-nav-signout { background: none; border: 0; color: inherit; cursor: pointer; font: inherit; padding: 0; margin-left: 1rem; }
.admin-nav-signout:hover { text-decoration: underline; }

/* Tenant billing plan picker */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin: .5rem 0 1rem; }
.plan-card { display: block; border: 2px solid var(--c-line); border-radius: .5rem; padding: .8rem; cursor: pointer; background: var(--c-bg); transition: border-color .15s; }
.plan-card input { position: absolute; opacity: 0; pointer-events: none; }
.plan-card:has(input:checked) { border-color: var(--c-accent, #c92a2a); box-shadow: 0 0 0 1px var(--c-accent, #c92a2a) inset; }
.plan-card-body { display: flex; flex-direction: column; gap: .25rem; }
.plan-name { font-weight: 700; font-size: 1.05rem; }
.plan-price { font-weight: 700; font-size: 1.4rem; margin-top: .25rem; }
.plan-desc { margin-top: .25rem; }

/* =================================================================
   POLISH PASS — Pass/Fail buttons, side menu, participants, transitions
   ================================================================= */

/* ---- Pass/Fail buttons: vivid color, full fill, smooth transitions ---- */
.pf-toggle { display: inline-flex; gap: .35rem; }
.pf-toggle label { padding: .5rem 1rem; border: 2px solid var(--c-line); border-radius: .4rem; cursor: pointer; font-weight: 700; font-size: .9rem; user-select: none; transition: background .15s, border-color .15s, color .15s, box-shadow .15s; min-width: 4.5em; text-align: center; }
.pf-toggle label:hover { box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.pf-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.pf-toggle .pf-pass { color: #0e8a4f; border-color: #0e8a4f; }
.pf-toggle .pf-fail { color: #c92a2a; border-color: #c92a2a; }
.pf-toggle .pf-pass.is-on, .pf-toggle .pf-pass:has(input:checked) { background: #0e8a4f; color: white; border-color: #0e8a4f; box-shadow: 0 0 0 3px rgba(14,138,79,.18); }
.pf-toggle .pf-fail.is-on, .pf-toggle .pf-fail:has(input:checked) { background: #c92a2a; color: white; border-color: #c92a2a; box-shadow: 0 0 0 3px rgba(201,42,42,.18); }

/* Fail-pending highlight on the perform-item until the alert is opened */
.perform-item.fail-pending { background: rgba(201,42,42,.06); border-left: 4px solid #c92a2a; padding-left: .6rem; }
.perform-item.fail-pending .flag-controls { margin-top: .5rem; }

/* ---- Side-menu (hamburger panel) ----
 * !important on the geometry rules so a stale earlier rule (older deploys
 * shipped a version without these) can't leave the panel in document flow. */
.side-backdrop {
    position: fixed !important;
    inset: 0;
    background: rgba(0,0,0,.45);
    opacity: 0; visibility: hidden;
    transition: opacity .2s, visibility .2s;
    z-index: 90;
}
.side-backdrop.is-open { opacity: 1; visibility: visible; }
.side-menu {
    position: fixed !important;
    top: 0 !important; right: 0 !important; bottom: 0 !important;
    left: auto !important;
    width: min(320px, 86vw);
    background: var(--c-bg);
    border-left: 1px solid var(--c-line);
    transform: translateX(100%);
    transition: transform .25s ease;
    z-index: 100;
    overflow-y: auto;
    box-shadow: -8px 0 24px rgba(0,0,0,.15);
    display: block !important;
}
.side-menu.is-open { transform: translateX(0); }
.side-menu-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: .8rem 1rem;
    border-bottom: 1px solid var(--c-line);
    position: sticky; top: 0;
    background: var(--c-bg);
}
.side-menu-close { background: none; border: 0; font-size: 1.6rem; cursor: pointer; color: var(--c-text-dim); padding: 0 .25rem; }
.side-menu-close:hover { color: var(--c-text); }
.side-menu-nav { display: flex !important; flex-direction: column !important; padding: .35rem 0; }
.side-menu-nav a, .side-menu-nav button {
    display: block !important;
    padding: .7rem 1rem;
    color: var(--c-text) !important;
    text-decoration: none;
    font-size: 1rem;
    transition: background .12s;
    text-align: left;
    background: none;
    border: 0;
    font: inherit;
    cursor: pointer;
    width: 100%;
}
.side-menu-nav a:hover, .side-menu-nav button:hover { background: rgba(201,42,42,.07); }
.side-menu-nav hr { border: 0; border-top: 1px solid var(--c-line); margin: .35rem 0; }
.side-menu-signout { color: #ff5151 !important; font-weight: 600; }
body.menu-open { overflow: hidden; }

/* ---- Participants banner on the perform view ---- */
.participants-banner { background: rgba(14,138,79,.08); border-left: 3px solid #0e8a4f; padding: .5rem .75rem; border-radius: .25rem; margin: .5rem 0; font-size: .9rem; }
.participants-dot { display: inline-block; width: .55em; height: .55em; border-radius: 50%; background: #0e8a4f; vertical-align: middle; margin-right: .35em; animation: pulse 1.8s ease-in-out infinite; }
.participants-inline { display: flex; align-items: center; gap: .35rem; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.85); } }

/* ---------- Live-check auto-save status pill ---------- */
.live-status-bar { margin: 0 0 .5rem; }
.live-status {
    display: inline-flex; align-items: center; gap: .4em;
    padding: .25em .7em; border-radius: 999px;
    font-size: .78rem; font-weight: 600;
    background: rgba(14,138,79,.12); color: #0e8a4f;
    border: 1px solid rgba(14,138,79,.35);
    transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.live-status::before {
    content: ''; display: inline-block; width: .55em; height: .55em; border-radius: 50%;
    background: currentColor;
    animation: pulse 2s ease-in-out infinite;
}
.live-status[data-state="editing"] { background: rgba(240,168,0,.15); color: #c98c00; border-color: rgba(240,168,0,.45); }
.live-status[data-state="saving"]  { background: rgba(59,130,246,.15); color: #2563eb; border-color: rgba(59,130,246,.45); }
.live-status[data-state="saved"]   { background: rgba(14,138,79,.18); color: #0e8a4f; border-color: rgba(14,138,79,.55); }
.live-status[data-state="remote"]  { background: rgba(124,58,237,.15); color: #7c3aed; border-color: rgba(124,58,237,.45); }
.live-status[data-state="error"]   { background: rgba(209,44,44,.15); color: #d12c2c; border-color: rgba(209,44,44,.45); }
.live-status[data-state="error"]::before { animation: none; }

/* ---- General polish ---- */
.btn { transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .05s; }
.btn:active:not([disabled]) { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.btn-primary { box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.btn-primary:hover:not([disabled]) { box-shadow: 0 2px 8px rgba(201,42,42,.25); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--c-accent, #c92a2a); outline-offset: 1px; border-color: var(--c-accent, #c92a2a); }
.card { transition: box-shadow .15s; }
.dash-quick { display: flex; gap: .35rem; flex-wrap: wrap; }

/* Mobile spacing tightening */
@media (max-width: 640px) {
    .page-head { flex-direction: column; align-items: flex-start; gap: .5rem; }
    .dash-quick { width: 100%; }
    .dash-quick .btn { flex: 1 1 calc(50% - .35rem); text-align: center; }
    .check-form .sticky-bar { padding: .5rem; flex-direction: column; gap: .5rem; align-items: stretch; }
    .sticky-bar > div { width: 100%; text-align: center; }
}

/* =================================================================
   SCBA construction-type cards (intervals page)
   ================================================================= */

.type-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.type-card { padding: 0; overflow: hidden; transition: box-shadow .15s, transform .05s; }
.type-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.type-card.is-disabled { opacity: .55; }
.type-card-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .7rem .9rem; background: linear-gradient(180deg, rgba(201,42,42,.04), transparent); border-bottom: 1px solid var(--c-line); }
.type-title { font-size: 1rem; font-weight: 700; padding: .35rem .5rem; border: 1px solid transparent; border-radius: .25rem; background: transparent; flex: 1 1 auto; min-width: 0; }
.type-title:hover, .type-title:focus { background: var(--c-bg); border-color: var(--c-line); }
.type-badges { display: flex; gap: .35rem; flex-shrink: 0; }
.badge { display: inline-block; padding: .15rem .5rem; font-size: .7rem; border-radius: .35rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.badge-builtin { background: rgba(33,119,175,.12); color: #1d6fa5; border: 1px solid #1d6fa5; }
.badge-custom { background: rgba(201,140,0,.12); color: #c98c00; border: 1px solid #c98c00; }
.badge-off { background: rgba(108,108,108,.15); color: #666; border: 1px solid #999; }
.type-body { padding: .9rem; display: flex; flex-direction: column; gap: 1rem; }
.type-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.type-row .field { margin: 0; }
.type-card fieldset.field { border: 1px solid var(--c-line); border-radius: .35rem; padding: .5rem .7rem; margin: 0; }
.type-card fieldset.field legend { font-size: .85rem; color: var(--c-muted); padding: 0 .35rem; }
.type-card-foot { display: flex; justify-content: space-between; align-items: center; padding: .6rem .9rem; background: rgba(0,0,0,.02); border-top: 1px solid var(--c-line); }
@media (max-width: 540px) {
    .type-row { grid-template-columns: 1fr; }
}

/* =================================================================
   PASS/FAIL v2 — bigger, icons, bulletproof (defeats all earlier rules)
   ================================================================= */
.pf-toggle { display: inline-flex; gap: .5rem !important; flex-wrap: wrap; }
.pf-toggle label.pf-pass,
.pf-toggle label.pf-fail {
    display: inline-flex !important;
    align-items: center !important;
    gap: .4rem !important;
    padding: .65rem 1.2rem !important;
    border: 2px solid !important;
    border-radius: .5rem !important;
    cursor: pointer;
    font-weight: 700 !important;
    font-size: 1rem !important;
    line-height: 1 !important;
    background: white !important;
    user-select: none;
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s, transform .05s;
    min-width: 6rem !important;
    justify-content: center !important;
}
.pf-toggle .pf-pass { color: #0a6e3f !important; border-color: #0a6e3f !important; }
.pf-toggle .pf-fail { color: #b21f1f !important; border-color: #b21f1f !important; }
.pf-toggle label.pf-pass:hover { background: #ecf7f0 !important; }
.pf-toggle label.pf-fail:hover { background: #fce9e9 !important; }
.pf-toggle .pf-icon { font-size: 1.1rem !important; line-height: 1 !important; }

/* Selected (server-rendered .is-on OR live :has(input:checked)) — solid fill, white text */
.pf-toggle label.pf-pass.is-on,
.pf-toggle label.pf-pass:has(> input:checked) {
    background: #0e8a4f !important;
    color: #ffffff !important;
    border-color: #0a6e3f !important;
    box-shadow: 0 2px 10px rgba(14,138,79,.35), 0 0 0 3px rgba(14,138,79,.18) !important;
}
.pf-toggle label.pf-fail.is-on,
.pf-toggle label.pf-fail:has(> input:checked) {
    background: #c92a2a !important;
    color: #ffffff !important;
    border-color: #a32020 !important;
    box-shadow: 0 2px 10px rgba(201,42,42,.35), 0 0 0 3px rgba(201,42,42,.18) !important;
}
.pf-toggle label.pf-pass:active:not([disabled]),
.pf-toggle label.pf-fail:active:not([disabled]) { transform: translateY(1px); }

/* Hide the radio itself — keep it focusable for keyboard nav */
.pf-toggle input[type="radio"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    border: 0 !important;
}
.pf-toggle label:focus-within { outline: 3px solid #1976d2 !important; outline-offset: 2px !important; }

/* When the row was failed, leave a clear red rail on the whole item even
   before the user opens the flag form — matches the "Fail = flag" UX */
.perform-item:has(.pf-toggle .pf-fail.is-on),
.perform-item:has(.pf-toggle .pf-fail input:checked) {
    background: rgba(201,42,42,.05);
    border-left: 4px solid #c92a2a;
    padding-left: .6rem;
}

/* =================================================================
   Gear/PPE table — responsive (fixes "shifted right" on load)
   ================================================================= */

/* Drop nowrap from most cells; only chips + status pill need it. */
.gear-list th, .gear-list td { white-space: normal !important; font-size: .9rem; vertical-align: middle; }
.gear-list .chip, .gear-list .role-pill { white-space: nowrap; }

/* Force the wrap to stay scrolled-left on load (some browsers preserve
   a scroll position from a previous page; this clamps it). */
.table-wrap { direction: ltr; scroll-behavior: auto; }

/* Hide secondary columns on tablet, tertiary on phone. */
@media (max-width: 1024px) {
    .gear-list th.col-tertiary,
    .gear-list td.col-tertiary { display: none; }
}
@media (max-width: 720px) {
    .gear-list th.col-secondary,
    .gear-list td.col-secondary { display: none; }
}

/* Below ~560px stack rows into card-like blocks — much better for phones. */
@media (max-width: 560px) {
    .gear-list, .gear-list thead, .gear-list tbody, .gear-list tr, .gear-list th, .gear-list td { display: block; }
    .gear-list thead { display: none; }
    .gear-list tr { padding: .65rem 0; border-bottom: 1px solid var(--c-line); }
    .gear-list td { padding: .2rem 0; border: 0; }
    .gear-list td::before {
        content: attr(data-label) ": ";
        font-weight: 600;
        color: var(--c-muted);
        font-size: .8rem;
        margin-right: .35rem;
    }
    .gear-list td[data-label="Assignment"]::before,
    .gear-list td[data-label="Type"]::before { content: ""; }
    .gear-list td[data-label="Assignment"] { font-weight: 700; font-size: 1rem; }
}

/* =================================================================
   SCBA intervals — dark theme polish (replaces earlier .type-card rules)
   ================================================================= */

/* Reset & rebuild the type-card so it inherits site dark theme. */
.type-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }

.type-card {
    background: var(--c-card) !important;
    border: 1px solid var(--c-line) !important;
    border-radius: var(--r-lg) !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-1) !important;
    transition: border-color .15s, box-shadow .15s, transform .05s;
    position: relative;
}
.type-card::before {
    content: "";
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--c-brand);
    opacity: .65;
}
.type-card:hover { border-color: var(--c-brand-2) !important; box-shadow: 0 8px 28px rgba(0,0,0,.45) !important; }
.type-card.is-disabled { opacity: .55; }
.type-card.is-disabled::before { background: var(--c-disabled); }

.type-card-head {
    display: flex; justify-content: space-between; align-items: center; gap: .75rem;
    padding: .85rem 1rem;
    background: linear-gradient(180deg, rgba(201,42,42,.08), transparent) !important;
    border-bottom: 1px solid var(--c-line) !important;
}
.type-title {
    flex: 1 1 auto; min-width: 0;
    font-size: 1.05rem !important; font-weight: 700 !important;
    padding: .35rem .55rem !important;
    border: 1px solid transparent !important; border-radius: .35rem !important;
    background: transparent !important;
    color: var(--c-text) !important;
    min-height: 0 !important;
}
.type-title:hover, .type-title:focus {
    background: var(--c-bg-alt) !important;
    border-color: var(--c-line) !important;
    outline: none !important;
}

.type-badges { display: flex; gap: .35rem; flex-shrink: 0; }
.badge {
    display: inline-block; padding: .18rem .55rem;
    font-size: .68rem; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; border-radius: 999px;
    border: 1px solid;
    background: var(--c-bg-alt);
}
.badge-builtin { color: var(--c-info); border-color: var(--c-info); background: rgba(59,130,246,.1); }
.badge-custom  { color: var(--c-warning); border-color: var(--c-warning); background: rgba(240,168,0,.1); }
.badge-off     { color: var(--c-text-mute); border-color: var(--c-text-mute); background: rgba(108,116,137,.12); }

.type-body { padding: 1rem; display: flex; flex-direction: column; gap: 1rem; }
.type-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.type-row .field, .type-row fieldset.field { margin: 0; }

/* Fieldset styling — match standard .field but with a real legend */
.type-card fieldset.field {
    background: var(--c-bg-alt);
    border: 1px solid var(--c-line) !important;
    border-radius: var(--r-md) !important;
    padding: .65rem .8rem !important;
    margin: 0 !important;
}
.type-card fieldset.field legend {
    font-size: .78rem !important;
    font-weight: 600;
    color: var(--c-text-dim);
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 0 .35rem;
}

/* Segmented chip-style radios — replace the .inline-radio look */
.type-card .life-controls {
    display: flex; flex-wrap: wrap; gap: .35rem;
    margin-top: .15rem;
}
.type-card .life-controls .inline-radio {
    cursor: pointer;
    padding: .4rem .75rem;
    border: 1px solid var(--c-line);
    background: var(--c-card);
    border-radius: 999px;
    font-size: .85rem;
    color: var(--c-text-dim);
    transition: background .12s, color .12s, border-color .12s;
    user-select: none;
}
.type-card .life-controls .inline-radio:hover { color: var(--c-text); border-color: var(--c-text-dim); }
.type-card .life-controls .inline-radio:has(input:checked) {
    background: var(--c-brand);
    border-color: var(--c-brand);
    color: white;
    font-weight: 600;
}
.type-card .life-controls input[type="radio"] {
    position: absolute !important;
    width: 1px; height: 1px; opacity: 0;
    clip: rect(0,0,0,0); pointer-events: none;
}
.type-card .life-controls > input[type="number"] {
    width: 5em !important;
    min-height: 0 !important;
    padding: .35rem .5rem !important;
    background: var(--c-card) !important;
    color: var(--c-text) !important;
    border: 1px solid var(--c-line) !important;
    border-radius: .35rem !important;
    font-size: .9rem !important;
}

/* Number inputs inside the type body — match site field styling but compact */
.type-body .field input[type="number"] {
    background: var(--c-bg-alt) !important;
    color: var(--c-text) !important;
    border: 1px solid var(--c-line) !important;
    border-radius: var(--r-md) !important;
    padding: .5rem .7rem !important;
    min-height: 0 !important;
    font-size: .95rem !important;
}
.type-body .field > span {
    font-size: .8rem;
    color: var(--c-text-dim);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: .3rem;
}
.type-body .field small { color: var(--c-text-mute); font-size: .75rem; margin-top: .25rem; }

.type-card-foot {
    display: flex; justify-content: space-between; align-items: center; gap: .75rem;
    padding: .65rem 1rem;
    background: rgba(255,255,255,.015) !important;
    border-top: 1px solid var(--c-line) !important;
}
.type-card-foot .checkbox-field {
    display: inline-flex; align-items: center; gap: .4rem;
    color: var(--c-text-dim); font-size: .85rem;
}

@media (max-width: 560px) {
    .type-row { grid-template-columns: 1fr; }
}

/* ============================================================
 * Global form-control polish (dark-theme consistent)
 * Fixes:
 *   - <option> showing as light gray/white on white (unreadable
 *     on most browsers when the parent <select> is dark).
 *   - <select> elements that opt out of the page's input style.
 *   - <input> / <textarea> using the OS default look.
 * Scoped wide but with low specificity so explicit styles win.
 * ============================================================ */
select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea {
    background-color: var(--c-bg-alt);
    color: var(--c-text);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    padding: .55rem .75rem;
    font: inherit;
    min-height: var(--tap, 44px);
    /* Firefox dropdown arrow uses currentColor — give it a tone that
       contrasts with the field's dark background. */
    color-scheme: dark;
}
select { padding-right: 2rem; }
textarea { min-height: 6rem; }

/* The dropdown list inside a native <select>.
 * Most browsers ignore most properties here, but background-color +
 * color are honored on Chromium and Firefox on Linux/Win, which is
 * where users were seeing white-on-white. */
option,
optgroup {
    background-color: var(--c-bg-alt);
    color: var(--c-text);
}
option:checked,
option:hover {
    background-color: var(--c-brand);
    color: #fff;
}
option:disabled {
    color: var(--c-text-dim);
}

/* Disabled controls inside the invite-form should look muted. */
input:disabled,
select:disabled,
textarea:disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* ============================================================
 * Settings page polish — seat meter + invite panel
 * ============================================================ */
.seat-meter {
    display: inline-flex; align-items: baseline; gap: .35rem;
    padding: .5rem .85rem;
    background: var(--c-bg-alt);
    border: 1px solid var(--c-line);
    border-radius: 999px;
    font-size: .9rem;
}
.seat-meter strong { color: var(--c-text); font-weight: 700; }

.invite-panel {
    margin: 1rem 0 1.25rem;
    border: 1px dashed var(--c-line);
    border-radius: var(--r-md);
    padding: .85rem 1rem;
    background: rgba(255,255,255,.015);
}
.invite-panel[open] {
    border-style: solid;
    border-color: var(--c-line);
    background: var(--c-bg-alt);
}
.invite-panel > summary {
    list-style: none;
}
.invite-panel > summary::-webkit-details-marker { display: none; }
.invite-panel .grid-3 {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1fr;
    gap: .75rem;
    margin: .25rem 0 .75rem;
}
.invite-panel .form-actions {
    display: flex; align-items: center; gap: .85rem; flex-wrap: wrap;
}
@media (max-width: 720px) {
    .invite-panel .grid-3 { grid-template-columns: 1fr; }
}

/* Generic grid-3 (used elsewhere too — keep predictable). */
.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: .75rem;
}
@media (max-width: 720px) {
    .grid-3 { grid-template-columns: 1fr; }
}

/* Settings card section dividers and small visual cleanup. */
.page > .section-tabs {
    display: flex; gap: .5rem; flex-wrap: wrap;
    margin: 0 0 1rem;
    border-bottom: 1px solid var(--c-line);
    padding-bottom: .5rem;
}
.page > .section-tabs a {
    padding: .35rem .75rem;
    border-radius: 999px;
    background: var(--c-bg-alt);
    border: 1px solid var(--c-line);
    color: var(--c-text-dim);
    font-size: .85rem;
    text-decoration: none;
}
.page > .section-tabs a:hover {
    color: var(--c-text);
    border-color: var(--c-brand);
}

/* Inline forms inside data-table rows — keep their controls compact
 * and visually unified with the row, not as full-height inputs. */
.data-table .inline-form input,
.data-table .inline-form select,
.data-table .form-inline-row input,
.data-table .form-inline-row select {
    min-height: 0;
    padding: .35rem .5rem;
    font-size: .85rem;
}
.data-table .inline-form .btn,
.data-table .form-inline-row .btn {
    padding: .35rem .65rem;
    font-size: .8rem;
}

/* Standalone form-inline-row inputs (e.g. the "+ Add station" row) get
 * a uniform background that doesn't clash with the surrounding card. */
.form-inline-row input,
.form-inline-row select {
    background: var(--c-bg-alt);
    color: var(--c-text);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
}

/* =================================================================
 * Station / plan row cards — replaces the cramped inline-form tables
 * on Settings → Stations and Creator → Plans. One card per item; the
 * edit form is the card body, the toggle button hangs in a corner.
 * ================================================================= */
.station-list {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-top: .75rem;
}
.station-row {
    position: relative;
    background: var(--c-bg-alt);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    padding: 1rem 1rem .8rem;
    transition: border-color .15s;
}
.station-row:hover { border-color: rgba(201,42,42,.35); }
.station-row.is-off { opacity: .55; }

.station-edit-form { margin: 0; }
.station-edit-grid {
    display: grid;
    grid-template-columns: 2fr 2fr 1.5fr 1fr;
    gap: .65rem .85rem;
    margin-bottom: .75rem;
}
@media (max-width: 880px) {
    .station-edit-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
    .station-edit-grid { grid-template-columns: 1fr; }
}

.station-row-foot {
    display: flex; justify-content: space-between; align-items: center;
    gap: .75rem;
    padding-top: .6rem;
    border-top: 1px solid var(--c-line);
}
.station-row-actions { display: flex; gap: .4rem; }
.station-status {
    font-size: .75rem; font-weight: 600;
    color: var(--c-text-dim);
    text-transform: uppercase; letter-spacing: .04em;
}
.station-status.is-on { color: #0e8a4f; }

/* The disable/enable toggle sits in the top-right corner of the card,
 * pulled out of the main edit form so it never accidentally trips on
 * the Save button's submit. */
.station-toggle-form {
    position: absolute;
    top: .65rem;
    right: .75rem;
    margin: 0;
}

/* =================================================================
 * Admin Plans — "Modules included" sub-card
 *
 * Lives inside an existing .station-row + .card. The earlier inline
 * styles in billing_plans.php referenced --border / --bg-soft / --muted
 * which aren't defined in the dark theme, so the fallback colors made
 * the row background light pink with grey text — unreadable against
 * the dark page. Real classes here use the actual theme tokens.
 * ================================================================= */
.plan-modules {
    background: transparent;
    color: var(--c-text);
}
.plan-modules > legend { color: var(--c-text); }
.plan-modules code { color: var(--c-text-dim); }

.plan-module-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--c-bg);
    border: 1px solid var(--c-line);
    border-radius: var(--r-sm);
    transition: border-color .15s;
}
.plan-module-row:hover { border-color: rgba(201,42,42,.30); }

.plan-module-name {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    cursor: pointer;
    font-weight: 600;
    color: var(--c-text);
    margin: 0;
}
.plan-module-name input[type="checkbox"] { accent-color: var(--c-brand); }
.plan-module-name code {
    font-size: 11px;
    color: var(--c-text-mute);
    font-weight: 400;
    font-family: ui-monospace, SF Mono, Menlo, monospace;
}

.plan-module-cap {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 12px;
    color: var(--c-text-dim);
}
.plan-module-cap input[type="number"] {
    width: 90px;
    padding: 5px 8px;
    font-size: 13px;
    text-align: center;
    background: var(--c-bg-alt);
    border: 1px solid var(--c-line);
    border-radius: var(--r-sm);
    color: var(--c-text);
}
.plan-module-cap input[type="number"]:focus {
    outline: none;
    border-color: var(--c-brand);
    box-shadow: 0 0 0 3px rgba(201,42,42,.15);
}

@media (max-width: 520px) {
    .plan-module-row { flex-direction: column; align-items: stretch; }
    .plan-module-cap { justify-content: space-between; }
}

/* =================================================================
 * Settings card breathing room
 * ================================================================= */
.page > .card { margin-bottom: 1.25rem; padding: 1.1rem 1.15rem; }
.page > .card > h2:first-child,
.page > .card > h2:first-of-type { margin-top: 0; }
.page > .card + .card { margin-top: 0; } /* gap from .card margin-bottom */

/* =================================================================
 * Gear / PPE table — less cramped rows + headers
 * ================================================================= */
.gear-list th { padding: .7rem .75rem; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; }
.gear-list td { padding: .7rem .75rem; line-height: 1.4; }
.gear-list tbody tr + tr td { border-top: 1px solid var(--c-line); }
.gear-list tbody tr:hover td { background: rgba(255,255,255,.025); }
.gear-list .chip { padding: .25rem .55rem; font-size: .78rem; }
.gear-list a { text-decoration: none; border-bottom: 1px solid rgba(201,42,42,.35); }
.gear-list a:hover { border-bottom-color: var(--c-brand); }

/* =================================================================
 * PPE / Gear page — uncramped header, filter bar, and table.
 * Earlier rules set tight padding + small fonts; loosen across the
 * board so columns breathe and the "Open" button sits comfortably.
 * ================================================================= */

/* Header actions: more spacing, allow wrap so buttons aren't squished. */
.page > .page-head .dash-quick {
    gap: .5rem;
    align-items: center;
    justify-content: flex-end;
}
.page > .page-head .dash-quick .btn-tiny {
    padding: .45rem .75rem;
    font-size: .82rem;
    white-space: nowrap;
}

/* Filter bar: each control gets a sane min width so they don't crush
 * each other when the row wraps. Buttons line up at the end. */
.filter-bar {
    gap: .75rem 1rem !important;
    align-items: flex-end;
}
.filter-bar .field {
    flex: 1 1 200px !important;
    min-width: 160px;
}
.filter-bar .field.checkbox-field {
    flex: 0 0 auto !important;
    align-self: center;
    padding-bottom: .25rem;
}
.filter-bar .btn {
    align-self: flex-end;
    padding: .55rem 1rem;
}

/* PPE/Gear table: more horizontal breathing room + bigger row height. */
.gear-list { font-size: .9rem !important; }
.gear-list th,
.gear-list td {
    padding: .85rem 1rem !important;
    line-height: 1.45;
    vertical-align: middle;
}
.gear-list th { font-size: .72rem; }
.gear-list .role-pill {
    font-size: .72rem !important;
    padding: .25rem .6rem;
    white-space: nowrap;
}
.gear-list .chip { padding: .3rem .65rem; }
/* Reserve enough room for the "Open" button cell so it never wraps. */
.gear-list td:last-child,
.gear-list th:last-child { width: 1%; white-space: nowrap; text-align: right; }
.gear-list .btn-tiny { padding: .35rem .85rem; font-size: .8rem; }
/* The first column (Assignment) gets a touch more emphasis. */
.gear-list td[data-label="Assignment"] { font-weight: 600; }

/* When the wrap container scrolls horizontally, give a clear edge
 * shadow so users know there's more table to the right. */
.table-wrap {
    background:
        linear-gradient(to right, var(--c-card) 30%, rgba(23,29,40,0)) 0 0,
        linear-gradient(to right, rgba(23,29,40,0), var(--c-card) 70%) 100% 0,
        radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.35), rgba(0,0,0,0)) 0 0,
        radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.35), rgba(0,0,0,0)) 100% 0;
    background-repeat: no-repeat;
    background-size: 32px 100%, 32px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
}

/* Billing-mode picker cards (Creator tenant new/edit forms). */
.billing-mode-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
    margin-top: .5rem;
}
@media (max-width: 560px) { .billing-mode-grid { grid-template-columns: 1fr; } }
.billing-mode-card {
    display: flex; flex-direction: column; gap: .25rem;
    padding: .85rem 1rem;
    background: var(--c-bg-alt);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: border-color .12s, background .12s;
}
.billing-mode-card:hover { border-color: var(--c-text-dim); }
.billing-mode-card.is-on {
    border-color: var(--c-brand);
    background: rgba(201,42,42,.07);
}
.billing-mode-card input[type="radio"] {
    /* The card itself is the click target; hide the actual radio. */
    position: absolute; width: 1px; height: 1px; opacity: 0;
    pointer-events: none;
}
.billing-mode-card strong { color: var(--c-text); }

/* Journal entry options + pinned-row affordances. */
.journal-opts {
    display: flex; flex-wrap: wrap; gap: .75rem 1.25rem;
    align-items: flex-end;
    margin: .75rem 0 .25rem;
    padding: .75rem;
    background: rgba(255,255,255,.02);
    border: 1px dashed var(--c-line);
    border-radius: var(--r-md);
}
.journal-opts .field, .journal-opts .checkbox-field { margin: 0; }
.journal-row.is-pinned {
    background: linear-gradient(180deg, rgba(201,42,42,.07), rgba(201,42,42,0));
    border-left: 3px solid var(--c-brand);
}
.journal-pin-badge { font-size: .8em; margin-right: .25rem; }
.journal-actions { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .5rem; }
.journal-actions .inline-expire summary { display: inline-block; }
.journal-actions .inline-expire input[type="datetime-local"] {
    min-height: 0; padding: .35rem .5rem; font-size: .85rem;
}

/* Section reference image (admin template editor + check perform). */
.section-image-block {
    margin: .65rem 0 .25rem;
    padding: .5rem .65rem;
    background: rgba(255,255,255,.02);
    border: 1px dashed var(--c-line);
    border-radius: var(--r-md);
}
.section-image-block > summary { list-style: none; }
.section-image-block > summary::-webkit-details-marker { display: none; }
.section-image-block[open] > summary { color: var(--c-text); }
.section-image-body {
    display: flex; gap: .75rem; align-items: center; flex-wrap: wrap;
    margin-top: .5rem;
}
.section-image-thumb {
    width: 96px; height: 96px; object-fit: cover;
    border: 1px solid var(--c-line); border-radius: var(--r-md);
    background: var(--c-bg-alt);
}

/* Reference photo affordance on the check perform view. */
.section-perform-ref { margin-top: .25rem; }
.section-perform-ref summary { list-style: none; }
.section-perform-ref summary::-webkit-details-marker { display: none; }
.section-perform-img {
    max-width: 100%;
    max-height: 320px;
    margin-top: .5rem;
    border: 1px solid var(--c-line); border-radius: var(--r-md);
    display: block;
}

/* Department-picker (multi-tenant login). */
.tenant-pick-list {
    list-style: none; padding: 0; margin: 1rem 0;
    display: flex; flex-direction: column; gap: .65rem;
}
.tenant-pick-btn {
    display: flex; flex-direction: column; gap: .25rem; align-items: flex-start;
    width: 100%;
    padding: .85rem 1rem;
    background: var(--c-bg-alt);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    color: var(--c-text);
    font: inherit; cursor: pointer;
    text-align: left;
    transition: border-color .12s, background .12s;
}
.tenant-pick-btn:hover,
.tenant-pick-btn:focus-visible {
    border-color: var(--c-brand);
    background: rgba(201,42,42,.07);
}

/* SCBA show: per-template due list (one row per active template). */
.scba-tpl-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: .5rem;
}
.scba-tpl-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: .85rem 1rem;
    align-items: center;
    padding: .65rem .85rem;
    background: var(--c-bg-alt);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
}
.scba-tpl-meta {
    display: flex; flex-direction: column; gap: .15rem;
    min-width: 0;
}
.scba-tpl-meta strong { color: var(--c-text); font-size: .95rem; }
.scba-tpl-status .chip { white-space: nowrap; }

/* Scheduled checks list. */
.schedule-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: .5rem;
}
.schedule-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: .85rem 1rem;
    align-items: center;
    padding: .65rem .85rem;
    background: var(--c-bg-alt);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
}
.schedule-meta { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.schedule-due .chip { white-space: nowrap; }
@media (max-width: 560px) { .schedule-row { grid-template-columns: 1fr; } }

/* Schedule-a-check form panel. */
.schedule-panel summary { width: fit-content; }

/* Subtle "needs answer" highlight on perform items that haven't been
 * filled in yet. Once the user picks Pass/Fail (or types a value), JS
 * removes the class via Pass/Fail handlers + form events. */
.perform-item.is-needs-answer {
    border-left: 3px solid var(--c-warning, #f0a800);
    background: rgba(240,168,0,.04);
}
.perform-item.is-needs-answer.is-flagged {
    /* If the row is also flagged (red), the red wins — incomplete-yellow
     * is informational and shouldn't compete with the failure indicator. */
    border-left-color: var(--c-brand, #c92a2a);
    background: rgba(201,42,42,.06);
}

/* Per-section SCBA cylinder picker on the template editor. */
.scba-pick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .5rem;
    margin-top: .35rem;
}
.scba-pick {
    display: flex; align-items: center; gap: .5rem;
    padding: .5rem .65rem;
    background: var(--c-bg-alt);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    cursor: pointer;
}
.scba-pick:hover { border-color: var(--c-text-dim); }
.scba-pick:has(input:checked) {
    border-color: var(--c-brand);
    background: rgba(201,42,42,.07);
}
.scba-pick input[type="checkbox"] { margin: 0; }
.scba-pick .scba-pick-name { font-weight: 600; }
.scba-pick .muted { margin-left: auto; font-size: .8rem; }

/* Centered-form experiment reverted at user request — perform rows
 * use the original modern two-column layout. Size-only tweaks below:
 *   - item labels read slightly larger so the question is the focus
 *   - Pass/Fail buttons shrink to a compact tray so they feel like
 *     the secondary action, not the dominant element on the row */
.perform-item-label { font-size: 1.05rem; line-height: 1.35; }

.pf-toggle {
    padding: .15rem;
    gap: .2rem;
    border-radius: 7px;
}
.pf-toggle label {
    padding: .3rem .7rem;
    min-height: 0;
    font-size: .72rem;
    border-radius: 5px;
}
.pf-icon { font-size: .9rem; margin-right: .15rem; }

/* =================================================================
 * Print stylesheet — "Save as PDF" target.
 *
 * Strategy: strip navigation/buttons/inputs that are noise on paper,
 * keep the content flowing as plain document text. Browser's print
 * dialog (Ctrl/Cmd+P) → "Save as PDF" gives a clean PDF without any
 * external library or binary.
 *
 * Reference: HTML5 Boilerplate's print rules + the conventions most
 * professional services apps (Stripe, Linear) follow for print-PDF.
 * ================================================================= */
@media print {
    /* Page setup — Letter with comfortable margins. */
    @page { size: Letter; margin: .6in; }

    body, .layout-tenant, .layout-admin {
        background: #fff !important;
        color: #000 !important;
    }
    .topbar, .bottom-nav, .side-menu, .side-backdrop,
    .nav-toggle, .flash-stack, .sticky-bar,
    .no-print, [data-bottom-nav] { display: none !important; }

    .main-shell, .admin-shell { max-width: 100% !important; padding: 0 !important; }
    .page { gap: .35rem; }
    .page .card {
        background: #fff !important;
        color: #000 !important;
        border: 1px solid #999 !important;
        box-shadow: none !important;
        page-break-inside: avoid;
    }
    h1, h2, h3 { color: #000 !important; page-break-after: avoid; }
    .muted, .muted small { color: #444 !important; }
    .chip, .role-pill {
        background: #fff !important; color: #000 !important;
        border: 1px solid #666 !important; box-shadow: none !important;
    }
    .chip-alert { background: #fff !important; color: #c00 !important; border-color: #c00 !important; }
    .chip-ok    { background: #fff !important; color: #060 !important; border-color: #060 !important; }
    .chip-due   { background: #fff !important; color: #964 !important; border-color: #964 !important; }
    a { color: #000 !important; text-decoration: none !important; }
    .data-table th, .data-table td {
        color: #000 !important; background: #fff !important;
        border-color: #999 !important;
    }
    .data-table thead tr { background: #f0f0f0 !important; }
    /* Pass/fail toggles render as their winning state only. */
    .pf-toggle { border: 1px solid #666 !important; background: #fff !important; }
    .pf-toggle label { color: #888 !important; background: #fff !important; }
    .pf-toggle label.is-on, .pf-toggle label:has(input:checked) {
        color: #000 !important; background: #ddd !important;
        font-weight: 700 !important;
    }
    .perform-item { padding: .3rem 0 !important; }
    .perform-item.is-flagged {
        border-left: 4px solid #c00 !important;
        padding-left: .5rem !important;
    }
}
@media (max-width: 560px) {
    .scba-tpl-row { grid-template-columns: 1fr; }
    .scba-tpl-action { justify-self: start; }
}

/* ============================================================
 * Marketing / public home page (/)
 * ============================================================ */
.marketing { display: block; }
/* The marketing page lives inside the tenant shell, which is normally
 * capped at 1080px. Let the hero/feature blocks span the full viewport. */
.main-shell:has(.marketing) {
    max-width: 100% !important;
    padding: 0 !important;
}
.marketing .mk-section {
    padding: 4rem 1.25rem;
    max-width: 1180px;
    margin: 0 auto;
}
@media (max-width: 720px) {
    .marketing .mk-section { padding: 2.5rem 1rem; }
}
.mk-section-head { text-align: center; margin-bottom: 2.25rem; }
.mk-section-head h2 {
    font-size: clamp(1.5rem, 2.5vw, 2.1rem);
    margin: 0 0 .35rem;
    letter-spacing: -.01em;
}
.mk-section-head .muted { font-size: 1rem; }

/* --- Hero --- */
.mk-hero {
    position: relative;
    padding: 5rem 1.25rem 4.5rem;
    background:
        radial-gradient(1200px 600px at 20% -10%, rgba(201,42,42,.22), transparent 60%),
        radial-gradient(900px 500px at 100% 0%, rgba(59,130,246,.10), transparent 60%),
        linear-gradient(180deg, #0b0e13, #0e131c);
    border-bottom: 1px solid var(--c-line);
    overflow: hidden;
}
.mk-hero-inner {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    position: relative; z-index: 2;
}
.mk-logo {
    display: block;
    width: clamp(220px, 28vw, 340px);
    height: auto;
    margin: 0 auto 1.25rem;
}
.mk-eyebrow {
    display: inline-block;
    padding: .35rem .75rem;
    background: rgba(201,42,42,.12);
    border: 1px solid rgba(201,42,42,.4);
    color: #ff8484;
    border-radius: 999px;
    font-size: .78rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    margin-bottom: 1.25rem;
}
.mk-h1 {
    font-size: clamp(2rem, 5vw, 3.4rem);
    line-height: 1.05;
    margin: 0 0 1rem;
    letter-spacing: -.02em;
    color: var(--c-text);
}
.mk-lede {
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    line-height: 1.55;
    margin: 0 auto 1.5rem;
    max-width: 620px;
    color: var(--c-text-dim);
}
.mk-cta-row { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.5rem; }
.mk-cta { padding: .85rem 1.5rem; font-size: 1rem; font-weight: 600; }
.mk-trust {
    list-style: none; padding: 0; margin: 1.5rem 0 0;
    display: flex; justify-content: center; flex-wrap: wrap; gap: .35rem .85rem;
    font-size: .82rem; color: var(--c-text-dim);
}
.mk-trust li::before { content: "✓ "; color: #0e8a4f; font-weight: 700; }

/* Hero side-art cards (subtle, decorative). */
.mk-hero-art {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}
.mk-art-card {
    position: absolute;
    background: rgba(23,29,40,.78);
    backdrop-filter: blur(6px);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    padding: .75rem .9rem;
    display: flex; flex-direction: column; gap: .15rem;
    box-shadow: 0 12px 32px rgba(0,0,0,.35);
    font-size: .85rem;
    color: var(--c-text);
}
.mk-art-card span { color: var(--c-text-dim); font-size: .8rem; }
.mk-art-card-1 { top: 12%;  left: 4%;  transform: rotate(-3deg); }
.mk-art-card-2 { top: 24%;  right: 4%; transform: rotate(2deg); }
.mk-art-card-3 { bottom: 14%; left: 7%; transform: rotate(1deg); }
@media (max-width: 980px) { .mk-hero-art { display: none; } }

/* --- Value props --- */
.mk-props {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.mk-prop {
    padding: 1.5rem;
    background: var(--c-card);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
}
.mk-prop h3 { margin: 0 0 .4rem; font-size: 1.1rem; }
.mk-prop p  { margin: 0; color: var(--c-text-dim); line-height: 1.5; }
@media (max-width: 880px) { .mk-props { grid-template-columns: 1fr; } }

/* --- Feature grid --- */
.mk-feature-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
@media (max-width: 1100px) { .mk-feature-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px)  { .mk-feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .mk-feature-grid { grid-template-columns: 1fr; } }
.mk-feature {
    background: var(--c-card);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    padding: 1.25rem;
    transition: border-color .15s, transform .15s;
}
.mk-feature:hover { border-color: rgba(201,42,42,.5); transform: translateY(-2px); }
.mk-feature-icon { font-size: 1.6rem; margin-bottom: .5rem; }
.mk-feature h3 { margin: 0 0 .35rem; font-size: 1rem; }
.mk-feature p  { margin: 0; font-size: .9rem; color: var(--c-text-dim); line-height: 1.5; }

/* --- Pricing --- */
.mk-pricing { border-top: 1px solid var(--c-line); }
.mk-pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
@media (max-width: 880px) { .mk-pricing-grid { grid-template-columns: 1fr; } }
.mk-pricing-card {
    position: relative;
    padding: 1.75rem 1.25rem;
    background: var(--c-card);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    display: flex; flex-direction: column; gap: .55rem; align-items: flex-start;
    transition: border-color .15s, transform .15s;
}
.mk-pricing-card:hover { transform: translateY(-2px); border-color: rgba(201,42,42,.5); }
.mk-pricing-card strong { font-size: 1.15rem; }
.mk-pricing-card.is-featured {
    border-color: var(--c-brand);
    box-shadow: 0 0 0 1px var(--c-brand), 0 16px 36px rgba(201,42,42,.18);
}
.mk-pricing-card .btn { margin-top: auto; align-self: stretch; text-align: center; }
.mk-badge {
    position: absolute; top: -.75rem; right: 1rem;
    background: var(--c-brand); color: #fff;
    padding: .15rem .65rem;
    border-radius: 999px;
    font-size: .72rem; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase;
}

/* --- Contact --- */
.mk-contact {
    background:
        radial-gradient(800px 500px at 80% 0%, rgba(201,42,42,.10), transparent 70%),
        linear-gradient(180deg, transparent, rgba(255,255,255,.02));
    border-top: 1px solid var(--c-line);
}
.mk-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 2.5rem;
    align-items: start;
}
@media (max-width: 880px) { .mk-contact-grid { grid-template-columns: 1fr; gap: 1.25rem; } }
.mk-contact-copy h2 { font-size: clamp(1.5rem, 2.5vw, 2.1rem); margin: 0 0 .65rem; }
.mk-contact-copy p { color: var(--c-text-dim); line-height: 1.6; }
.mk-contact-meta {
    list-style: none; padding: 0; margin: 1.25rem 0 0;
    display: flex; flex-direction: column; gap: .5rem;
    font-size: .9rem; color: var(--c-text-dim);
}
.mk-contact-meta strong { color: var(--c-text); }
.mk-contact-form {
    background: var(--c-card);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    padding: 1.5rem;
    position: relative;
}

/* ============================================================
 * Product family showcase ("More tools for your department")
 * ============================================================ */
.mk-suite {
    border-top: 1px solid var(--c-line);
    background: linear-gradient(180deg, rgba(255,255,255,.015), transparent);
}
.mk-suite-row {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 2.5rem;
    align-items: center;
    padding: 2.5rem 0;
    border-bottom: 1px solid var(--c-line);
}
.mk-suite-row:last-of-type { border-bottom: 0; }
.mk-suite-row-flip { grid-template-columns: 1fr 1.15fr; }
.mk-suite-row-flip .mk-suite-art  { order: 2; }
.mk-suite-row-flip .mk-suite-copy { order: 1; }
@media (max-width: 880px) {
    .mk-suite-row,
    .mk-suite-row-flip { grid-template-columns: 1fr; gap: 1.5rem; padding: 2rem 0; }
    .mk-suite-row-flip .mk-suite-art  { order: 0; }
    .mk-suite-row-flip .mk-suite-copy { order: 0; }
}

.mk-suite-art {
    position: relative;
    min-height: 220px;
}
.mk-suite-img {
    width: 100%;
    height: auto;
    border-radius: var(--r-md);
    border: 1px solid var(--c-line);
    box-shadow: 0 20px 40px rgba(0,0,0,.35);
    display: block;
    background: var(--c-bg-alt);
}
.mk-suite-img-1 { position: relative; z-index: 2; }
.mk-suite-img-2 {
    position: absolute;
    right: -1.5rem;
    bottom: -1.5rem;
    width: 62%;
    z-index: 3;
    box-shadow: 0 24px 50px rgba(0,0,0,.5);
    border-color: rgba(201,42,42,.4);
}
@media (max-width: 880px) {
    .mk-suite-img-2 { position: static; width: 100%; margin-top: 1rem; }
}

.mk-suite-copy h3 {
    font-size: clamp(1.4rem, 2.2vw, 1.85rem);
    margin: .35rem 0 .65rem;
    letter-spacing: -.01em;
}
.mk-suite-copy p { color: var(--c-text-dim); line-height: 1.6; margin: 0 0 .85rem; }
.mk-suite-bullets {
    list-style: none; padding: 0; margin: 0 0 1.1rem;
    display: flex; flex-direction: column; gap: .35rem;
    font-size: .92rem;
    color: var(--c-text-dim);
}
.mk-suite-bullets li::before {
    content: "✓ ";
    color: var(--c-brand-2, #ff5151);
    font-weight: 700;
    margin-right: .15rem;
}
.mk-suite-badge {
    display: inline-block;
    padding: .25rem .6rem;
    background: rgba(59,130,246,.12);
    border: 1px solid rgba(59,130,246,.4);
    color: #6ea8fe;
    border-radius: 999px;
    font-size: .72rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
}
.mk-suite-footnote {
    text-align: center;
    margin: 1.5rem 0 0;
}

/* Square credentials URL list on /admin/billing. */
.square-url-grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .5rem 1rem;
    margin: .5rem 0 0;
    align-items: baseline;
}
.square-url-grid dt {
    font-weight: 600;
    color: var(--c-text-dim);
    font-size: .85rem;
}
.square-url-grid dd {
    margin: 0;
    word-break: break-all;
}
.square-url-grid dd code {
    display: inline-block;
    padding: .25rem .55rem;
    background: var(--c-bg-alt);
    border: 1px solid var(--c-line);
    border-radius: .35rem;
    font-size: .85rem;
}
@media (max-width: 640px) {
    .square-url-grid { grid-template-columns: 1fr; gap: .25rem; }
    .square-url-grid dt { margin-top: .5rem; }
}

/* =================================================================
 * Dashboard V/S Alerts column — header + category-tabs polish
 * Fixes: actions jammed against title; pill row wrapping cramped.
 * ================================================================= */
.dash-col-head {
    align-items: flex-start !important;
    flex-wrap: wrap;
    gap: .5rem .9rem;
    padding-bottom: .55rem;
    margin-bottom: .85rem;
}
.dash-col-head h2 {
    flex: 1 1 auto;
    line-height: 1.25;
}
.dash-col-head > div {
    display: flex; gap: .85rem;
    align-items: center; flex-wrap: wrap;
}
.dash-col-action {
    text-decoration: none;
    padding: .15rem .15rem;
    border-bottom: 1px solid transparent;
    transition: color .12s, border-color .12s;
}
.dash-col-action:hover { color: var(--c-text); border-bottom-color: var(--c-brand); }

.alert-subtabs {
    gap: .4rem .5rem !important;
    margin: .25rem 0 .9rem !important;
    padding: .5rem .6rem;
    background: rgba(255,255,255,.02);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
}
.alert-tab {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .35rem .75rem !important;
    font-weight: 600;
    transition: background .12s, color .12s, border-color .12s;
}
.alert-tab:hover { color: var(--c-text); border-color: var(--c-text-dim); }
.alert-tab .chip {
    min-width: 1.4rem;
    text-align: center;
    background: rgba(255,255,255,.08);
    border-radius: 999px;
    padding: .1rem .45rem !important;
    font-weight: 700;
    color: var(--c-text);
}
.alert-tab.is-active .chip {
    background: rgba(0,0,0,.25);
    color: #fff;
}
/* Per-category active highlight that matches the pill colour. */
.alert-tab.cat-vehicle.is-active  { background: #1d6fa5; border-color: #1d6fa5; color: #fff; }
.alert-tab.cat-ppe.is-active      { background: #c98c00; border-color: #c98c00; color: #fff; }
.alert-tab.cat-scba.is-active     { background: #6f42c1; border-color: #6f42c1; color: #fff; }
.alert-tab.cat-supplies.is-active { background: #0e8a4f; border-color: #0e8a4f; color: #fff; }

/* The alert rows themselves: more vertical air + the ticket number
 * no longer touches the title. */
.alert-row { padding: .65rem .8rem !important; }
.alert-link {
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
        "ticket title  meta"
        "ticket app    meta";
    column-gap: .85rem;
    align-items: center;
    text-decoration: none;
    color: inherit;
}
.alert-ticket {
    grid-area: ticket;
    align-self: center;
    font-size: .78rem; font-weight: 700;
    color: var(--c-text-dim);
    padding: .2rem .45rem;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--c-line);
    border-radius: .35rem;
    white-space: nowrap;
}
.alert-title    { grid-area: title; font-weight: 600; line-height: 1.3; }
.alert-apparatus{ grid-area: app;  font-size: .8rem; }
.alert-meta     { grid-area: meta; }

@media (max-width: 480px) {
    .alert-link {
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "ticket title"
            "ticket app"
            "meta   meta";
    }
    .alert-meta { justify-self: start; padding-top: .35rem; }
}

/* ============================================================ */
/* Mobile + landscape polish (additive, 2026-06)                 */
/* ============================================================ */
@media (max-width: 760px) {
    /* page headers + action rows wrap instead of overflowing off-screen */
    .page-head, .row-between, .dash-quick, .report-head, .report-head-actions { flex-wrap: wrap; gap: 10px; }
    .page-head .btn, .dash-quick .btn { flex: 1 1 auto; text-align: center; }
}
/* Landscape phones: trim the fixed bottom nav so content isn't cramped */
@media (max-height: 480px) and (orientation: landscape) {
    .bottom-nav { padding-top: 2px; padding-bottom: 2px; }
    .bottom-nav .bn-ico { font-size: 14px; }
    .bottom-nav .bn-lab { font-size: 9px; }
    .side-menu-nav { padding-bottom: 24px; }
}

/* Hall Rentals + data tables: scroll horizontally on phones instead of
   getting cut off in portrait (additive, 2026-06). */
@media (max-width: 760px) {
    .data-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; max-width: 100%; }
    .hr-history { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .hr-hist-head, .hr-hist-row { min-width: 600px; }
    /* hall cards/filter rows wrap rather than overflow */
    .hr-filter-row, .hr-card-row, .hr-actions { flex-wrap: wrap; }
}