@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400&display=swap');

/* ============================================================
   p4.css — Priority4 shared design system for /native pages
   Apple "liquid glass" inspired. One stylesheet for every page:
   no more per-page <style> blocks.
   ============================================================ */

:root {
    --p4-tint: #c1272d;               /* department red */
    --p4-tint-soft: rgba(193, 39, 45, 0.14);
    --p4-radius: 20px;
    --p4-radius-sm: 12px;

    /* Control-panel wash: richer slate-blue → indigo → brand red, plus a
       cool bloom top-left. Matches the app's native P4Background. */
    --p4-base: #E8EDF5;
    --p4-wash: linear-gradient(135deg,
        rgba(120, 145, 195, 0.22) 0%,
        rgba(120, 145, 195, 0.10) 32%,
        rgba(220, 130, 110, 0.08) 68%,
        rgba(220, 130, 110, 0.18) 100%);
    --p4-text: #1c1c1e;
    --p4-muted: #6e6e73;
    --p4-card-bg: #ffffff;
    --p4-glass: rgba(255, 255, 255, 0.62);
    --p4-glass-strong: rgba(255, 255, 255, 0.82);
    --p4-glass-border: rgba(255, 255, 255, 0.65);
    --p4-card-tint: rgba(49, 58, 70, 0.06);
    --p4-shadow: 0 8px 24px rgba(30, 40, 60, 0.14);
    --p4-divider: rgba(60, 60, 67, 0.12);
    color-scheme: light;
}

/* Dark: follows the system unless the user forced Light (data-theme on <html>). */
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) {
        --p4-base: #13161B;
        --p4-wash: linear-gradient(135deg,
            rgba(42, 62, 110, 0.28) 0%,
            rgba(42, 62, 110, 0.16) 40%,
            rgba(110, 38, 32, 0.13) 72%,
            rgba(110, 38, 32, 0.24) 100%);
        --p4-text: #f2f2f7;
        --p4-muted: #98989f;
        --p4-card-bg: #23272f;
        --p4-glass: rgba(44, 44, 52, 0.58);
        --p4-glass-strong: rgba(56, 56, 64, 0.80);
        --p4-glass-border: rgba(255, 255, 255, 0.14);
        --p4-card-tint: rgba(49, 58, 70, 0.35);
        --p4-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
        --p4-divider: rgba(255, 255, 255, 0.12);
        color-scheme: dark;
    }
}
/* Dark: forced by the user (Appearance → Dark) regardless of the system. */
html[data-theme="dark"] {
    --p4-base: #13161B;
    --p4-wash: linear-gradient(135deg,
        rgba(42, 62, 110, 0.28) 0%,
        rgba(42, 62, 110, 0.16) 40%,
        rgba(110, 38, 32, 0.13) 72%,
        rgba(110, 38, 32, 0.24) 100%);
    --p4-text: #f2f2f7;
    --p4-muted: #98989f;
    --p4-card-bg: #23272f;
    --p4-glass: rgba(44, 44, 52, 0.58);
    --p4-glass-strong: rgba(56, 56, 64, 0.80);
    --p4-glass-border: rgba(255, 255, 255, 0.14);
    --p4-card-tint: rgba(49, 58, 70, 0.35);
    --p4-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    --p4-divider: rgba(255, 255, 255, 0.12);
    color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--p4-wash) fixed;
    background-color: var(--p4-base);
    color: var(--p4-text);
    font-family: "Nunito", -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI", Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.45;
    -webkit-text-size-adjust: 100%;
}

/* On computer-width screens, render at 100% (crisp, native resolution).
   Phones and the in-app web view (narrow) stay at 100% too. */
@media (min-width: 768px) {
    html { zoom: 1.0; }

    /* Slim, subtle scrollbars on computer screens (Chrome/Safari + Firefox). */
    * { scrollbar-width: thin; scrollbar-color: rgba(120, 120, 128, 0.45) transparent; }
    *::-webkit-scrollbar { width: 10px; height: 10px; }
    *::-webkit-scrollbar-track { background: transparent; }
    *::-webkit-scrollbar-thumb {
        background: rgba(120, 120, 128, 0.4);
        border-radius: 999px;
        border: 2px solid transparent;
        background-clip: padding-box;
    }
    *::-webkit-scrollbar-thumb:hover {
        background: rgba(120, 120, 128, 0.65);
        border: 2px solid transparent;
        background-clip: padding-box;
    }
    *::-webkit-scrollbar-corner { background: transparent; }
}

/* Page container — respects the notch and the app's overlay bars. */
.p4-page {
    padding: calc(env(safe-area-inset-top) + 12px) 32px calc(env(safe-area-inset-bottom) + 40px);
    max-width: 1800px;
    margin: 0 auto;
}
/* The page itself never pans sideways — anything wider than the viewport
   scrolls inside its own card (overflow-x:auto wrappers), not the body.
   `clip` on body (not `hidden`): hidden turns the body into its own scroll
   container sized to its content, which on short pages (Truck Build) cut the
   gear menu off at the bottom of the content. min-height keeps the body at
   least the viewport tall for the same reason. */
html { overflow-x: hidden; }
body { overflow-x: clip; min-height: 100dvh; }

.p4-center {
    min-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

h1 { font-size: 24px; font-weight: 700; margin: 0 0 4px; }
h2 { font-size: 19px; font-weight: 650; margin: 0 0 4px; }
h3 { font-size: 16px; font-weight: 600; margin: 0 0 2px; }
p  { margin: 6px 0; }

/* Calmer type inside cards: section headers match the hero title, and the
   muted description line under them matches the hero subtitle. */
.p4-card h2 { font-size: 17px; font-weight: 650; }
.p4-card > p.p4-muted { font-size: 13px; margin-top: 0; }
.p4-muted { color: var(--p4-muted); }
.p4-caption { font-size: 13px; color: var(--p4-muted); }

/* ---------- Glass surfaces ---------- */

.p4-card {
    background: var(--p4-card-bg);
    border: 1px solid var(--p4-divider);
    border-radius: var(--p4-radius);
    box-shadow: var(--p4-shadow);
    padding: 15px;
    margin-bottom: 12px;
}

.p4-card > h1:first-child,
.p4-card > h2:first-child { margin-top: 0; }

/* Left accent panel: a solid band down the left whose width equals the card's
   corner radius, with its top-left/bottom-left corners rounded to match — so the
   colour follows the rounded corner up to the top and bottom edges, then runs
   straight down, with a straight inner edge. Hero = red (matches the icon);
   other cards = slate. Content is padded over so it clears the band. Table cards
   opt out; on phones, navigation/list cards opt out too. */
.p4-hero, .p4-card { position: relative; }
/* Accent band: hero cards only (red). Plain cards have NO left band — the
   slate band that used to run down every card is gone by design. */
/* (hero's left padding is set in its base rule below, after the padding shorthand) */
.p4-hero::before {
    content: "";
    position: absolute;
    /* Extend 1px past the padding box so the band sits flush over the card's
       border — no white sliver on the left/top/bottom. */
    left: -1px; top: -1px; bottom: -1px;
    border-top-left-radius: inherit;
    border-bottom-left-radius: inherit;
    pointer-events: none;
    width: 16px; background: #B03A2E;   /* = hero radius */
}
@media (max-width: 640px) {
    /* Phones: near full-width content — the 32px desktop gutters look like
       empty sidebars on a narrow screen. */
    .p4-page { padding-left: 12px; padding-right: 12px; }
}

/* Details modal: settings grouped into cards, two-up on roomier screens. */
.p4-detail-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 720px) { .p4-detail-grid { grid-template-columns: 1fr 1fr; } }
/* Stacked variant: every card full width (Details modal). */
.p4-detail-grid.p4-detail-stack { grid-template-columns: 1fr; }
/* Two / three fields side by side inside a full-width card. */
.p4-detail-card .p4-detail-row  { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; align-items: start; }
.p4-detail-card .p4-detail-row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 14px; align-items: start; }
@media (max-width: 560px) { .p4-detail-card .p4-detail-row, .p4-detail-card .p4-detail-row3 { grid-template-columns: 1fr; } }
/* A floating-label field with its save button alongside (not underneath). */
.p4-detail-inline { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.p4-detail-inline > .p4-float { flex: 1; min-width: 0; margin-bottom: 0; }
.p4-detail-inline > .p4-btn { flex: 0 0 auto; }
.p4-detail-card .p4-float { margin-bottom: 12px; }
.p4-detail-card {
    border: 1px solid var(--p4-divider);
    border-radius: 14px;
    padding: 14px 14px 4px;
    background: var(--p4-card-tint);
}
.p4-detail-card > h4 {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--p4-muted);
}
.p4-detail-card .p4-btn { margin-bottom: 12px; }

/* Grouped list inside a card (like an iOS inset list) */
.p4-list { margin: 0; padding: 0; list-style: none; }
.p4-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 2px;
    border-bottom: 1px solid var(--p4-divider);
}
.p4-list li:last-child { border-bottom: none; }

/* ---------- Buttons ---------- */

/* Flat iOS-style button set — muted fire-department palette, rounded
   rectangles, subtle shadow, no gloss/gradient. Default = Secondary (never
   white). Dark text on light fills, white text on dark fills. */
.p4-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 11px 18px;
    border-radius: 12px;
    border: 1px solid transparent;
    background: #D9DDE2;                 /* Secondary */
    color: #1c1c1e;                      /* dark text on light */
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    transition: filter 0.12s ease, transform 0.12s ease;
    -webkit-tap-highlight-color: transparent;
}
.p4-btn:hover { filter: brightness(0.96); }
.p4-btn:active { transform: scale(0.98); }
.p4-btn:disabled { opacity: 0.45; pointer-events: none; }

.p4-btn-primary { background: #313A46; color: #fff; }   /* Primary — slate */
.p4-btn-slate   { background: #313A46; color: #fff; }
.p4-btn-danger  { background: #B03A2E; color: #fff; }    /* Danger — red */
.p4-btn-success { background: #3F7F5A; color: #fff; }    /* Success — green */
.p4-btn-warn,
.p4-btn-warning { background: #C88A1F; color: #fff; }    /* Warning — amber */
.p4-btn-info    { background: #4B6EA9; color: #fff; }    /* Info — blue */
.p4-btn-secondary { background: #D9DDE2; color: #1c1c1e; }
.p4-btn-tertiary  { background: #EEF1F4; color: #1c1c1e; }

.p4-btn-block { display: flex; width: 100%; }

/* Compact button + a real button row (admin screens: buttons, not full-width blocks). */
.p4-btn-sm { min-height: 34px; padding: 7px 14px; font-size: 14px; }

/* Neutral outlined button — visible border on solid cards (e.g. Pause/Resume). */
.p4-btn-outline {
    background: transparent;
    border: 1px solid var(--p4-divider, rgba(49, 58, 70, 0.35));
    color: var(--p4-text);
    box-shadow: none;
}
.p4-btn-outline:hover { background: rgba(120, 120, 128, 0.10); }
.p4-modal-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
}
.p4-modal-actions-extra { display: inline-flex; gap: 8px; }
.p4-modal-actions #fSave { margin-left: auto; }

/* Per-user Page Access list (User Admin manage modal). */
.p4-access { margin-top: 16px; border-top: 1px solid var(--p4-divider); padding-top: 14px; }
.p4-access-head {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--p4-muted);
    margin-bottom: 6px;
}
/* No inner cap — the modal body scrolls, so the list fills the space. */
.p4-access-list { max-height: none; }
.p4-access-sec {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--p4-muted);
    margin: 12px 0 2px;
}
.p4-access-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 4px;
    border-bottom: 1px solid var(--p4-divider);
    font-size: 14px;
    cursor: pointer;
}
/* Access rows use a green toggle switch instead of a bare checkbox. */
.p4-access-row input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    width: 46px;
    height: 28px;
    border-radius: 999px;
    background: var(--p4-divider);
    position: relative;
    cursor: pointer;
    transition: background 0.15s ease;
    margin: 0;
}
.p4-access-row input[type="checkbox"]::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: transform 0.15s ease;
}
.p4-access-row input[type="checkbox"]:checked { background: #198754; }
.p4-access-row input[type="checkbox"]:checked::after { transform: translateX(18px); }

/* Row list used in Login Attempts + Page Access lookup modals. */
.p4-la-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 4px;
    border-bottom: 1px solid var(--p4-divider);
    font-size: 14px;
}
.p4-la-row:last-child { border-bottom: none; }
.p4-la-row .p4-btn { flex-shrink: 0; }

/* AED Reports — one card per past inspection. */
.ar-insp {
    border: 1px solid var(--p4-divider);
    border-radius: var(--p4-radius-sm);
    padding: 12px;
    margin-bottom: 10px;
    background: var(--p4-card-tint);
}
.ar-block { margin-top: 8px; }
.ar-block-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--p4-muted);
    margin-bottom: 4px;
}
.ar-line { font-size: 14px; margin-bottom: 3px; }
.ar-pads { display: flex; flex-wrap: wrap; gap: 6px; }

/* Last-check status disc on AED Reports rows. */
.ar-ico {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 18px;
    flex-shrink: 0;
}
.ar-ico-pass { background: rgba(25, 135, 84, 0.15); color: #198754; }
.ar-ico-fail { background: rgba(163, 45, 45, 0.14); color: #a32d2d; }
.ar-ico-none { background: var(--p4-card-tint); color: var(--p4-muted); }

/* Initials avatar (User Admin rows). Pair with a .p4-role-* color class. */
.p4-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 14px;
    flex-shrink: 0;
}

/* Reusable green toggle switch (styled checkbox) + its label row. */
.p4-switch-row { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; white-space: nowrap; cursor: pointer; }
.p4-switch {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    width: 44px;
    height: 26px;
    border-radius: 999px;
    background: var(--p4-divider);
    position: relative;
    cursor: pointer;
    margin: 0;
    transition: background 0.15s ease;
}
.p4-switch::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: transform 0.15s ease;
}
.p4-switch:checked { background: #198754; }
.p4-switch:checked::after { transform: translateX(18px); }

/* Reusable square checkbox (green when checked) — table row selection etc. */
.p4-check {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 1.5px solid var(--p4-divider);
    background: #fff;
    position: relative;
    cursor: pointer;
    margin: 0;
}
.p4-check:checked { background: #313a46; border-color: #313a46; }

/* Every native checkbox/radio checks in slate (overrides per-page accent-color
   rules like accent-color:var(--p4-tint) via higher specificity). */
.p4-page input[type="checkbox"],
.p4-page input[type="radio"],
.p4-modal input[type="checkbox"],
.p4-modal input[type="radio"],
.p4-modal-body input[type="checkbox"],
.p4-modal-body input[type="radio"] {
    accent-color: #313a46;
}

/* A checked row gets a subtle slate wash so the selection stands out. */
.p4-page tr:has(input:checked) > td,
.p4-modal tr:has(input:checked) > td,
.p4-modal-body tr:has(input:checked) > td {
    background: rgba(49, 58, 70, 0.07);
}
.p4-check:checked::after {
    content: "";
    position: absolute;
    left: 6px; top: 2px;
    width: 5px; height: 10px;
    border: solid #fff; border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Destructive-action warning panel (Truck Resets). */
.p4-reset-warn {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 14px 0;
    padding: 12px;
    border-radius: var(--p4-radius-sm);
    background: rgba(220, 53, 69, 0.08);
    border: 1px solid rgba(220, 53, 69, 0.28);
}
.p4-reset-warn-ico { font-size: 20px; color: #dc3545; flex-shrink: 0; line-height: 1.2; }
.p4-reset-warn-title { font-weight: 800; font-size: 14px; }
.p4-reset-warn-desc { font-size: 13px; color: var(--p4-muted); margin-top: 2px; }

/* Scheduled resets: settings left, list right on wide screens. */
.p4-sched-cols { display: grid; gap: 18px; }
@media (min-width: 900px) {
    .p4-sched-cols { grid-template-columns: minmax(280px, 380px) 1fr; align-items: start; }
}
.p4-sched-item {
    padding: 12px;
    border-radius: var(--p4-radius-sm);
    background: var(--p4-card-tint);
    border: 1px solid var(--p4-divider);
}
.p4-sched-item.p4-sched-paused {
    background: rgba(255, 159, 10, 0.08);
    border-color: rgba(255, 159, 10, 0.28);
}
.p4-sched-actions { display: flex; gap: 8px; margin-top: 10px; }
.p4-sched-actions .p4-btn { flex: 1; }

/* Grant-access user search (Page Access lookup). */
.p4-grant { margin-top: 14px; }
.p4-grant-results { margin-top: 8px; }
.p4-grant-result {
    padding: 9px 12px;
    border: 1px solid var(--p4-divider);
    border-radius: var(--p4-radius-sm);
    margin-bottom: 6px;
    cursor: pointer;
    font-size: 14px;
}
.p4-grant-result:hover { background: var(--p4-card-tint); }
/* Glass inputs are invisible on the solid modal body — give them a real border. */
.p4-modal-hbf .p4-input,
.p4-modal-hbf .p4-select {
    background-color: var(--p4-card-bg);
    border-color: var(--p4-divider);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Tabs (User Admin manage modal: Details / Page Access). */
.p4-tabs { display: flex; gap: 6px; margin: 4px 0 16px; }
.p4-tab {
    flex: 1;
    padding: 9px 12px;
    border: 1px solid var(--p4-divider);
    background: transparent;
    color: var(--p4-muted);
    border-radius: var(--p4-radius-sm);
    font: inherit;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
}
.p4-tab.is-active { background: #313a46; border-color: #313a46; color: #fff; }

/* Floating-label fields (Bootstrap-style). Input comes first, label second. */
.p4-float { position: relative; margin-bottom: 14px; }
.p4-float > input,
.p4-float > select {
    width: 100%;
    height: 54px;
    padding: 22px 12px 6px;
    font-size: 16px;
    color: var(--p4-text);
    background-color: var(--p4-card-bg);
    border: 1px solid var(--p4-divider);
    border-radius: var(--p4-radius-sm);
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}
.p4-float > input:focus,
.p4-float > select:focus { border-color: var(--p4-tint); }
.p4-float > label {
    position: absolute;
    left: 13px;
    top: 16px;
    color: var(--p4-muted);
    font-size: 16px;
    background: transparent;
    pointer-events: none;
    transition: transform 0.15s ease, font-size 0.15s ease, top 0.15s ease, color 0.15s ease;
}
.p4-float > input:focus + label,
.p4-float > input:not(:placeholder-shown) + label,
.p4-float > select + label {
    top: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.p4-float > input:focus + label,
.p4-float > select:focus + label { color: var(--p4-tint); }

/* Textareas inside a floating-label wrapper: label always sits above the text. */
.p4-float > textarea {
    width: 100%;
    padding: 24px 12px 8px;
    font-size: 16px;
    color: var(--p4-text);
    background-color: var(--p4-card-bg);
    border: 1px solid var(--p4-divider);
    border-radius: var(--p4-radius-sm);
    outline: none;
    resize: vertical;
    min-height: 84px;
}
.p4-float > textarea:focus { border-color: var(--p4-tint); }
.p4-float > textarea + label {
    top: 8px;
    font-size: 11px;
    font-weight: 700;
}
.p4-float > textarea:focus + label { color: var(--p4-tint); }

/* Positive feedback: once a field is filled in (and passes any browser
   validation it has), its border turns green — the red tint is only the
   focus ring on an empty field, not an error state. Limited to fields WITH
   a placeholder ([placeholder]) because :placeholder-shown never matches on
   date/number inputs without one, which would read empty as filled. More
   specific than the :focus rules, so it wins while typing too. */
.p4-float > input[placeholder]:not(:placeholder-shown):valid,
.p4-float > textarea[placeholder]:not(:placeholder-shown):valid {
    border-color: #198754;
}

.p4-btn-icon {
    min-height: 44px;
    width: 44px;
    padding: 0;
    border-radius: 50%;
}

/* ---------- Forms ---------- */

.p4-field { margin-bottom: 14px; }
.p4-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--p4-muted);
    margin: 0 4px 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.p4-input, .p4-select, textarea.p4-input {
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    font: inherit;
    color: var(--p4-text);
    background-color: var(--p4-glass-strong);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    /* Consistent, visible border on every field (matches selects + search;
       glass-border read as nearly invisible on cards). */
    border: 1px solid var(--p4-divider);
    border-radius: var(--p4-radius-sm);
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}
.p4-input:focus, .p4-select:focus {
    border-color: var(--p4-tint);
    box-shadow: 0 0 0 3px var(--p4-tint-soft);
}

.p4-select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 42px;
    /* A clearly visible border (glass-border reads as nearly none on cards). */
    border: 1px solid var(--p4-divider);
}

/* Dropdown text is intentionally smaller than text inputs for a tighter look.
   (Text inputs stay 16px to avoid iOS focus auto-zoom; selects don't zoom.) */
.p4-select,
.p4-float > select,
.p4-field select { font-size: 14px; }

/* ---------- Tables ---------- */

.p4-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}
.p4-table th {
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--p4-muted);
    padding: 8px 10px;
    border-bottom: 1px solid var(--p4-divider);
}
.p4-table td {
    padding: 11px 10px;
    border-bottom: 1px solid var(--p4-divider);
}

/* Unified table headers across every console table — a slate header bar with
   bold white text, taller rows, and column separators. Higher specificity
   (.p4-page/.p4-modal thead th = class + two elements) overrides the per-page
   ".*-table th" rules without touching each page; other header properties
   (horizontal padding, size, letter-spacing) still come from the page's rule. */
.p4-page thead th,
.p4-modal thead th,
.p4-modal-body thead th {
    background: #313a46;
    color: #fff;
    font-weight: 800;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding-top: 14px;
    padding-bottom: 14px;
    border-bottom-color: rgba(255, 255, 255, 0.14);
    border-right: 1px solid rgba(255, 255, 255, 0.14);
}
.p4-page thead th:last-child,
.p4-modal thead th:last-child,
.p4-modal-body thead th:last-child { border-right: 0; }

/* Body gridlines — vertical separators between columns (rows already have a
   bottom border), giving a full grid. */
.p4-page table td,
.p4-modal table td,
.p4-modal-body table td {
    font-size: 14px;
    border-right: 1px solid var(--p4-divider);
}
.p4-page table td:last-child,
.p4-modal table td:last-child,
.p4-modal-body table td:last-child { border-right: 0; }

/* Rounded-corner table look everywhere: a card wrapping a table (directly, or
   via an inner scroll div like inventory) clips its content to the card radius,
   so the slate header rounds into the corners the way Bottle Fill does. */
.p4-card:has(> table),
.p4-card:has(> div > table) {
    overflow: hidden;
}

/* Status columns shrink to their content: a cell holding a status badge sizes
   to the widest label (e.g. "Hydro Overdue") instead of stretching wide, so the
   remaining columns fill the row. */
.p4-page td:has(> .p4-badge),
.p4-page td:has(> .bf-badge),
.p4-page td:has(> .ga-badge),
.p4-modal td:has(> .p4-badge),
.p4-modal td:has(> .bf-badge),
.p4-modal td:has(> .ga-badge) {
    width: 1%;
    white-space: nowrap;
}
/* …and every badge in that column fills the cell, so short labels
   ("In Service") stretch to the same width as the longest ("Hydro Overdue"). */
.p4-page td:has(> .p4-badge) > .p4-badge,
.p4-page td:has(> .bf-badge) > .bf-badge,
.p4-page td:has(> .ga-badge) > .ga-badge,
.p4-modal td:has(> .p4-badge) > .p4-badge,
.p4-modal td:has(> .bf-badge) > .bf-badge,
.p4-modal td:has(> .ga-badge) > .ga-badge {
    display: block;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.02em;
}
.p4-table tr:last-child td { border-bottom: none; }

/* ---------- Status badges ---------- */

.p4-badge {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    /* Uppercase status labels, consistent across every page. */
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.p4-badge-ok    { background: rgba(52, 199, 89, 0.18);  color: #1e9c46; }
.p4-badge-warn  { background: rgba(255, 159, 10, 0.18); color: #c77700; }
.p4-badge-bad   { background: rgba(255, 69, 58, 0.18);  color: #d32f2f; }

/* Status columns (th tagged p4-th-status, td tagged p4-td-status): hug the
   contents — width:1% + nowrap shrinks the column to its widest pill — and
   centre both the STATUS heading and the pill under it. !important beats the
   pages' own `th { text-align:left }` rules, which load after this sheet. */
th.p4-th-status, td.p4-td-status { width: 1%; white-space: nowrap; text-align: center !important; }

/* Phones: status pills shrink to a colored icon disc — the words (IN SERVICE,
   HYDRO OVERDUE, …) eat too much row width. Severity keeps its color:
   green ✓ = good, amber ! = attention, red ✕ = out/failed. */
@media (max-width: 640px) {
    .p4-badge-ok, .p4-badge-warn, .p4-badge-bad {
        position: relative;
        display: inline-block;
        width: 26px !important; height: 26px !important;
        min-width: 26px; max-width: 26px;
        box-sizing: border-box;
        padding: 0 !important;
        border-radius: 50% !important;
        font-size: 0 !important; letter-spacing: 0; line-height: 0;
        vertical-align: middle;
        overflow: hidden;
    }
    /* Glyph pinned to the exact centre of the disc — no baseline drift. */
    .p4-badge-ok::before, .p4-badge-warn::before, .p4-badge-bad::before {
        position: absolute; left: 50%; top: 50%;
        transform: translate(-50%, -50%);
        font-size: 14px; font-weight: 900; line-height: 1;
    }
    .p4-badge-ok::before   { content: "\2713"; }
    .p4-badge-warn::before { content: "!"; }
    .p4-badge-bad::before  { content: "\2715"; }
}

/* Role badges in the user list — one color per role. */
.p4-role { text-transform: uppercase; letter-spacing: 0.03em; font-size: 11px; }
.p4-role-Service     { background: rgba(108, 117, 125, 0.18); color: #495057; }
.p4-role-Firefighter { background: rgba(13, 202, 240, 0.18);  color: #0a7c94; }
.p4-role-Operations  { background: rgba(25, 135, 84, 0.18);   color: #146c43; }
.p4-role-Admin       { background: rgba(220, 53, 69, 0.18);   color: #b02a37; }
.p4-role-Disabled    { background: rgba(255, 193, 7, 0.20);   color: #997404; }
/* Dark: follows the system unless the user forced Light (data-theme on <html>). */
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .p4-role-Service { color: #cfd6de; }
    html:not([data-theme="light"]) .p4-role-Firefighter { color: #6fd6ee; }
    html:not([data-theme="light"]) .p4-role-Operations { color: #6fd69f; }
    html:not([data-theme="light"]) .p4-role-Admin { color: #ff8a94; }
    html:not([data-theme="light"]) .p4-role-Disabled { color: #ffd45e; }
}
/* Dark: forced by the user (Appearance → Dark) regardless of the system. */
html[data-theme="dark"] .p4-role-Service { color: #cfd6de; }
html[data-theme="dark"] .p4-role-Firefighter { color: #6fd6ee; }
html[data-theme="dark"] .p4-role-Operations { color: #6fd69f; }
html[data-theme="dark"] .p4-role-Admin { color: #ff8a94; }
html[data-theme="dark"] .p4-role-Disabled { color: #ffd45e; }

/* User-list filter box. */
.p4-search input {
    width: 100%;
    padding: 11px 14px;
    font-size: 16px;
    color: var(--p4-text);
    background: var(--p4-card-bg);
    border: 1px solid var(--p4-divider);
    border-radius: 999px;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}
.p4-search input:focus { border-color: var(--p4-tint); }
/* Kill the browser autofill yellow/blue wash. */
.p4-search input:-webkit-autofill,
.p4-float > input:-webkit-autofill {
    -webkit-text-fill-color: var(--p4-text);
    transition: background-color 600000s 0s, color 600000s 0s;
}

/* Dark: follows the system unless the user forced Light (data-theme on <html>). */
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .p4-badge-ok { color: #4cd964; }
    html:not([data-theme="light"]) .p4-badge-warn { color: #ffb340; }
    html:not([data-theme="light"]) .p4-badge-bad { color: #ff6961; }
}
/* Dark: forced by the user (Appearance → Dark) regardless of the system. */
html[data-theme="dark"] .p4-badge-ok { color: #4cd964; }
html[data-theme="dark"] .p4-badge-warn { color: #ffb340; }
html[data-theme="dark"] .p4-badge-bad { color: #ff6961; }

/* ---------- Toast (used by p4.js) ---------- */

.p4-toast {
    position: fixed;
    left: 50%;
    bottom: calc(env(safe-area-inset-bottom) + 110px);
    transform: translateX(-50%) translateY(20px);
    display: flex;
    align-items: center;
    gap: 10px;
    background: #313a46;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-left: 7px solid #30d158;
    border-radius: 999px;
    box-shadow: 0 10px 30px rgba(20, 30, 45, 0.35);
    padding: 12px 22px;
    font-weight: 700;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 1000;
    max-width: 86vw;
    text-align: center;
    /* Never a tap target. The element stays in the page (invisible) after its
       first use, fixed ~110px above the bottom and centred — without this it
       silently swallowed taps on whatever sat under it, e.g. the PASS button
       on the last checklist rows on a phone. */
    pointer-events: none;
}
/* A little green check mark for that "saved!" life. */
.p4-toast::before {
    content: "✓";
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #34c759;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.p4-toast.p4-toast-show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ---------- Home tile grid ---------- */

.p4-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.p4-tile {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px;
    background: var(--p4-glass);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid var(--p4-glass-border);
    border-radius: var(--p4-radius);
    box-shadow: var(--p4-shadow);
    text-decoration: none;
    color: var(--p4-text);
    transition: transform 0.12s ease;
    -webkit-tap-highlight-color: transparent;
}
.p4-tile:active { transform: scale(0.97); }

.p4-tile-icon { font-size: 30px; line-height: 1.2; }
.p4-tile-title { font-size: 16px; font-weight: 650; }
.p4-tile-desc { font-size: 12px; color: var(--p4-muted); }

.p4-tile-disabled {
    opacity: 0.45;
    pointer-events: none;
}

/* ---------- Screen renderer (screen.php) ---------- */

.p4-hero {
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 16px;
    padding: 12px 12px 12px 32px;   /* extra left clears the accent band */
    margin-bottom: 12px;
    background: var(--p4-card-bg);
    border: 1px solid var(--p4-divider);
    box-shadow: var(--p4-shadow);
}
.p4-hero-disc {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    background: #313A46;
}
.p4-hero-disc-red { background: #B03A2E; }
/* Slate hero variant (e.g. the Department Message card): same rounded band
   shape as the standard red hero (.p4-hero::before), different color. The
   disc itself needs no override — .p4-hero-disc already defaults to slate. */
.p4-hero-slate::before { background: #313A46; }
.p4-hero-title { font-size: 17px; font-weight: 650; }
.p4-hero-sub { font-size: 13px; color: var(--p4-muted); margin-top: 2px; }

.p4-toolbar {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}
.p4-toolbar .p4-input { flex: 1; }
.p4-toolbar-count { margin-left: auto; align-self: center; white-space: nowrap; }

/* ---------- Phones: filter controls stack full-width ----------
   Search boxes, dropdowns and floating-label fields inside filter rows or
   toolbars each take the whole line instead of squashing side by side.
   !important beats the inline flex/min-width/max-width the pages set for
   their desktop layouts. */
@media (max-width: 640px) {
    .p4-row > .p4-search, .p4-row > .p4-select, .p4-row > .p4-float, .p4-row > .p4-input,
    .p4-card > .p4-search, .p4-card > .p4-select,
    .p4-hero > .p4-search, .p4-hero > .p4-select {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }
    .p4-row { flex-wrap: wrap; }
    .p4-hero { flex-wrap: wrap; }
    /* Checklist rows: the item name wraps, but a PASS/FAIL verdict pair
       always stays side by side. */
    .p4-option > span:first-child { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
    .p4-option > .p4-row { flex-wrap: nowrap; flex: 0 0 auto; }
    /* Status columns need no heading on phones — the icon disc explains
       itself. font-size:0 keeps the column box, just blanks the word. */
    th.p4-th-status { font-size: 0 !important; }
    .p4-toolbar { flex-wrap: wrap; }
    .p4-toolbar .p4-input { flex: 1 1 100%; }
    .p4-toolbar .p4-select { flex: 1 1 100% !important; width: 100%; max-width: none !important; }
    .p4-toolbar .p4-btn { flex: 1 1 100%; width: 100%; }
    .p4-inline-stat { flex: 1 0 auto; padding: 0 10px; }
}
/* Inline stats inside the search card (stats_inline): each is divided from the
   search box and its neighbours by a vertical line. */
.p4-inline-stat {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    align-self: stretch; padding: 0 16px; white-space: nowrap;
    border-left: 1px solid var(--p4-divider);
}
.p4-inline-stat-value { font-weight: 800; font-size: 18px; line-height: 1; }
.p4-inline-stat-label { font-size: 11px; color: var(--p4-muted); text-transform: uppercase; letter-spacing: .03em; margin-top: 3px; }

.p4-stats {
    display: flex;
    align-items: stretch;
    padding: 12px 4px;
}
.p4-stat {
    flex: 1;
    text-align: center;
    border-right: 1px solid var(--p4-divider);
}
.p4-stat:last-child { border-right: none; }
.p4-stat-ic { display: flex; justify-content: center; margin-bottom: 4px; color: var(--p4-muted); }
.p4-stat-value { font-size: 21px; font-weight: 750; font-variant-numeric: tabular-nums; }
.p4-stat-label { font-size: 11px; color: var(--p4-muted); }

.p4-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 2px;
    border-bottom: 1px solid var(--p4-divider);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.p4-item:last-child { border-bottom: none; }
.p4-item:active { opacity: 0.6; }

/* AED check (SDUI): each unit reads as its own spaced card, matching the
   AED Reports list. The wrapping list card goes transparent and its items
   become cards. */
.screen-aed-check #screen-root .p4-card:has(.p4-item) { background: transparent; border: 0; box-shadow: none; padding: 0; }
.screen-aed-check #screen-root .p4-card:has(.p4-item) h2 { margin-left: 4px; }
.screen-aed-check #screen-root .p4-item {
    background: var(--p4-card-bg);
    border: 1px solid var(--p4-divider);
    border-radius: var(--p4-radius);
    box-shadow: var(--p4-shadow);
    margin-bottom: 12px;
    padding: 13px 15px;
}
.screen-aed-check #screen-root .p4-item:last-child { border-bottom: 1px solid var(--p4-divider); }
/* Desktop: the AED check sheet runs taller so the wizard steps fit. */
@media (min-width: 720px) {
    .screen-aed-check .p4-modal { height: 96dvh; max-height: 96dvh; }
}

.p4-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

.p4-item-title { font-size: 15px; font-weight: 550; }
.p4-item-sub { font-size: 12px; color: var(--p4-muted); }
.p4-item-right { margin-left: auto; text-align: right; flex-shrink: 0; }
.p4-item-status { font-size: 12px; font-weight: 750; }
.p4-item-caption { font-size: 11px; color: var(--p4-muted); }

/* Status/stat colors */
.p4-c-success { color: #198754; }
.p4-c-danger  { color: #B03A2E; }
.p4-c-warning { color: #c77700; }
.p4-c-teal    { color: #0d9488; }
.p4-c-green   { color: #4c9d70; }
.p4-c-blue    { color: #5d82b8; }
.p4-c-slate   { color: #313A46; }
.p4-b-success { background: rgba(25, 135, 84, 0.16); }
.p4-b-danger  { background: rgba(176, 58, 46, 0.16); }
.p4-b-warning { background: rgba(199, 119, 0, 0.16); }
.p4-b-teal    { background: rgba(13, 148, 136, 0.16); }
.p4-b-green   { background: rgba(76, 157, 112, 0.16); }
.p4-b-blue    { background: rgba(93, 130, 184, 0.16); }
.p4-b-slate   { background: rgba(49, 58, 70, 0.16); }
/* Dark: follows the system unless the user forced Light (data-theme on <html>). */
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .p4-c-slate { color: #A9B6C9; }
    html:not([data-theme="light"]) .p4-b-slate { background: rgba(169, 182, 201, 0.16); }
}
/* Dark: forced by the user (Appearance → Dark) regardless of the system. */
html[data-theme="dark"] .p4-c-slate { color: #A9B6C9; }
html[data-theme="dark"] .p4-b-slate { background: rgba(169, 182, 201, 0.16); }

/* Modal sheet (item form, filters) */
.p4-modal-backdrop {
    position: fixed;
    inset: 0;
    /* Plain dim scrim, no blur — the convention iOS sheets, Material and
       Bootstrap all follow; blur read as smeared on iPad. */
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 900;
    padding: 0;
}
.p4-modal {
    background: var(--p4-bg-sheet, var(--p4-glass-strong));
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid var(--p4-glass-border);
    border-radius: 22px 22px 0 0;
    width: 100%;
    max-width: 720px;
    /* Consistent, roomy height — modals no longer shrink to their content.
       dvh keeps the header on-screen under mobile-browser toolbars. */
    height: min(94vh, 1000px);
    height: min(94dvh, 1000px);
    max-height: 94vh;
    max-height: 94dvh;
    overflow-y: auto;
    overscroll-behavior: contain; /* don't scroll the page underneath */
    padding: 16px 16px calc(env(safe-area-inset-bottom) + 16px);
}
@media (min-width: 720px) {
    .p4-modal-backdrop { align-items: center; padding: 24px; }
    .p4-modal { border-radius: 22px; }
}
/* Roomier modals on larger screens — more space for busy content. */
@media (min-width: 1100px) { .p4-modal { max-width: 840px; } }
@media (min-width: 1500px) { .p4-modal { max-width: 960px; } }
/* Phones: modals fill the screen — header/footer locked, body scrolls.
   Rounded corners kept, with the slate top-bar color showing behind them. */
@media (max-width: 719px) {
    .p4-modal-backdrop {
        flex-direction: column;
        align-items: stretch;
        padding: 8px;
        background: #313a46;
    }
    .p4-modal {
        flex: 1 1 auto;
        width: 100%;
        height: auto;
        max-height: none;
        border-radius: 20px;
    }
    /* Small dialogs (confirms, the Filters sheet) hug their content instead
       of the full-screen treatment, vertically centred over a dimmed
       backdrop rather than the solid slate panel. */
    .p4-modal-backdrop:has(.p4-modal-sm) { background: rgba(23, 28, 36, 0.6); justify-content: center; }
    .p4-modal.p4-modal-sm { flex: 0 1 auto; height: auto; max-height: 92dvh; margin: auto 0; }
}

/* Small confirmation dialog — the standard centered modal, just sized to its
   content instead of the roomy default. Desktop only; phones keep the full
   modal treatment. */
@media (min-width: 720px) {
    .p4-modal.p4-modal-sm {
        max-width: 440px;
        height: auto;
        max-height: 86vh;
    }
}

/* While a modal is open, the page underneath must not scroll. */
html.p4-modal-lock,
html.p4-modal-lock body {
    overflow: hidden;
    height: 100%;
    overscroll-behavior: none;
}

/* Header / scrolling body / pinned footer (opt-in via .p4-modal-hbf).
   Footer buttons stay put no matter how the body scrolls or tabs change. */
/* Solid body so the tinted header/footer bands read as distinct cards. */
.p4-modal-hbf {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--p4-card-bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.p4-modal-head {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--p4-card-tint);
    border-bottom: 1px solid var(--p4-divider);
}
.p4-modal-head .p4-modal-title { flex: 1; min-width: 0; font-weight: 700; font-size: 18px; }
.p4-modal-head .p4-modal-close { position: static; margin: 0; }
.p4-modal-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px; background: var(--p4-card-bg); }
/* Standard read-only detail/summary block at the top of a modal: a muted card. */
.p4-modal-info {
    padding: 14px;
    border: 1px solid var(--p4-divider);
    border-radius: 12px;
    background: var(--p4-card-tint);
    margin-bottom: 14px;
}
/* Two-up detail card (opt-in via form.detail_columns): pairs sit side by side to
   save vertical space, stacking on narrow screens. Full-width blocks (pill lists)
   span both columns. */
.p4-detail-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.p4-detail-grid2 .p4-detail-span { grid-column: 1 / -1; }
@media (max-width: 480px) { .p4-detail-grid2 { grid-template-columns: 1fr; } }
.p4-modal-foot {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 12px 16px calc(env(safe-area-inset-bottom) + 12px);
    background: var(--p4-card-tint);
    border-top: 1px solid var(--p4-divider);
}
.p4-modal-foot .p4-modal-actions-extra { display: inline-flex; gap: 8px; }
.p4-modal-foot .p4-foot-end { margin-left: auto; }
/* Modal header: hero-style card (icon disc · title/subtitle) with close X far right. */
.p4-modal-hero {
    margin: 0 0 16px;
}
.p4-modal-hero-text {
    flex: 1 1 auto;
    min-width: 0;
}
.p4-modal-hero .p4-hero-title,
.p4-modal-hero .p4-hero-sub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.p4-modal-close {
    flex: 0 0 auto;
    width: 34px; height: 34px;
    border: none;
    border-radius: 50%;
    background: var(--p4-glass, rgba(120, 120, 128, 0.16));
    color: var(--p4-text, inherit);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}
.p4-modal-close:hover { background: rgba(120, 120, 128, 0.28); }

.p4-detail-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 2px;
    border-bottom: 1px solid var(--p4-divider);
    font-size: 14px;
}
.p4-detail-row:last-child { border-bottom: none; }
.p4-detail-row .p4-detail-label { color: var(--p4-muted); }

.p4-blocked {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 14px;
    border-radius: var(--p4-radius-sm);
    background: rgba(176, 58, 46, 0.12);
    color: #B03A2E;
    font-size: 14px;
    font-weight: 550;
}

.p4-group summary {
    font-weight: 650;
    padding: 10px 2px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.p4-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 12px;
    border: 1px solid var(--p4-divider);
    border-radius: 10px;
    margin-bottom: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
.p4-option:last-child { margin-bottom: 0; }
/* Picked option row: muted green (bottle search + location). */
.p4-option.p4-option-selected {
    font-weight: 700;
    background: rgba(25, 135, 84, 0.12);
    border-color: rgba(25, 135, 84, 0.45);
}
.p4-option.p4-option-selected::after { content: "✓"; color: #198754; font-weight: 800; }

/* ---------- Utilities ---------- */

/* Step wizard (web item form) */
.p4-wizard-progress {
    font-size: 13px;
    font-weight: 700;
    color: var(--p4-muted);
    margin: 10px 0 4px;
}
.p4-wizard-nav {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}
.p4-wizard-nav .p4-btn { flex: 1; justify-content: center; }
/* In the pinned footer the nav fills the full width. */
.p4-modal-foot .p4-wizard-nav { flex: 1; margin-top: 0; }

/* List pagination (web): count on the left, Prev/Next on the right. */
.p4-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid var(--p4-divider);
    flex-wrap: wrap;
}
.p4-pager:empty { display: none; }
.p4-pager-btns { display: flex; gap: 8px; }
.p4-pager-btn { min-width: 84px; }
.p4-pager-btn:disabled { opacity: 0.4; cursor: default; }
/* Pager buttons are slate (across the shared pager + the admin pagers). */
.p4-pager .p4-btn, .ba-pager .p4-btn, .pa-pager .p4-btn { background: #313A46; color: #fff; border-color: #313A46; }
.p4-pager .p4-btn:disabled, .ba-pager .p4-btn:disabled, .pa-pager .p4-btn:disabled { opacity: 0.4; }
.p4-pager-info { font-size: 13px; color: var(--p4-muted); font-variant-numeric: tabular-nums; }

.p4-row { display: flex; gap: 12px; align-items: center; }
.p4-grow { flex: 1; }
.p4-stack > * + * { margin-top: 12px; }
.p4-hidden { display: none !important; }

/* ============================================================
   Web shell: top bar + left offcanvas menu (mirrors the app)
   ============================================================ */

/* Stacking: page content < top bar (500, its gear menu inside) < drawer scrim
   (600) < drawer (610) < modals (900+) < toasts/confirm (1000+). The bar sits
   well above any card so the gear menu is never covered by page content. */
.p4-topbar {
    position: sticky;
    top: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: calc(env(safe-area-inset-top) + 2px) 16px 8px;
    min-height: 50px;
    background: #313a46;
    color: #fff;
}
/* Per-user red header (Details → Preferences). Badge flips to white-on-red so
   the count stays legible against the red bar. */
.p4-topbar--red { background: var(--p4-tint); }
.p4-topbar--red .p4-badge-count { background: #fff; color: var(--p4-tint); }
/* Roomier bar on computer screens. */
@media (min-width: 768px) {
    .p4-topbar {
        min-height: 76px;
        padding-top: calc(env(safe-area-inset-top) + 16px);
        padding-bottom: 16px;
    }
}
.p4-topbar-title { font-size: 18px; }

/* Settings (gear) menu — mirrors iOS where Sign out lives under Settings. */
.p4-topbar-settings { margin-left: auto; position: relative; }
.p4-topbar-gear {
    margin-left: auto;
    background: rgba(255, 255, 255, 0.12);
    border: 0;
    color: #fff;
    text-decoration: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.p4-settings-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 232px;
    background: var(--p4-card-bg);
    color: var(--p4-text);
    border: 1px solid var(--p4-divider);
    border-radius: var(--p4-radius-sm);
    box-shadow: var(--p4-shadow);
    padding: 6px;
    display: none;
    z-index: 510;
    overflow: hidden;
}
.p4-settings-menu.open { display: block; }
.p4-settings-user {
    font-size: 12px;
    color: var(--p4-muted);
    padding: 8px 10px;
    border-bottom: 1px solid var(--p4-divider);
    margin-bottom: 4px;
}
/* Compact icon + label rows with dividers between them. */
.p4-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 9px 10px;
    background: none;
    border: 0;
    color: var(--p4-text);
    text-decoration: none;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}
.p4-menu-item + .p4-menu-item { border-top: 1px solid var(--p4-divider); }
.p4-menu-item:hover { background: var(--p4-card-tint); }
.p4-menu-ico {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--p4-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.p4-menu-danger, .p4-menu-danger .p4-menu-ico { color: #a32d2d; }
.p4-signout {
    background: var(--p4-tint);
    color: #fff;
    text-align: center;
    text-decoration: none;
}

/* Segmented button group (User Admin toolbar) — slate, no red. */
.p4-btn-group {
    display: inline-flex;
    border-radius: var(--p4-radius-sm);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
}
.p4-btn-group .p4-btn {
    border: 0;
    border-radius: 0;
    border-right: 2px solid rgba(255, 255, 255, 0.28);
    background: #313a46;
    color: #fff;
    font-weight: 700;
    box-shadow: none;
}
.p4-btn-group .p4-btn:last-child { border-right: 0; }
.p4-btn-group .p4-btn:hover { background: #3c4757; }
.p4-topbar-menu {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 0;
    color: #fff;
    font: inherit;
    font-weight: 700;
    letter-spacing: 0.06em;
    cursor: pointer;
    padding: 6px 4px;
}
.p4-burger {
    width: 20px; height: 14px;
    background:
        linear-gradient(#fff, #fff) 0 0 / 100% 2px no-repeat,
        linear-gradient(#fff, #fff) 0 6px / 100% 2px no-repeat,
        linear-gradient(#fff, #fff) 0 12px / 100% 2px no-repeat;
}
.p4-topbar-title { font-weight: 700; }
.p4-topbar-action {
    margin-left: auto;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    opacity: 0.9;
}

/* Brand lives in the offcanvas menu header: the dog logo + "Priority4". */
.p4-drawer-logo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    padding: 2px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Live password requirement checklist (Change Password modal). */
.p4-pw-rules { margin-top: 12px; display: grid; gap: 6px; }
.p4-pw-rule {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--p4-muted);
}
.p4-pw-rule.is-met { color: var(--p4-text); }
.p4-pw-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    flex-shrink: 0;
    background: rgba(163, 45, 45, 0.14);
    color: #a32d2d;
}
.p4-pw-rule.is-met .p4-pw-dot { background: rgba(25, 135, 84, 0.16); color: #198754; }

.p4-scrim {
    position: fixed;
    inset: 0;
    /* Same plain dim scrim as the modal backdrop (no blur). */
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 600;
}
.p4-scrim.open { opacity: 1; pointer-events: auto; }

.p4-drawer {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: min(84vw, 300px);
    /* Floating slide-out: translucent glass that blurs the content behind it. */
    background: var(--p4-glass-strong);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25);
    transform: translateX(-104%);
    transition: transform 0.25s ease;
    z-index: 610;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.p4-drawer.open { transform: translateX(0); }
.p4-drawer-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: calc(env(safe-area-inset-top) + 12px) 16px 12px;
    background: #313a46;
    color: #fff;
}
.p4-drawer-head strong { font-size: 17px; flex: 1; }
.p4-drawer-mark { width: 30px; height: 30px; font-size: 13px; }
.p4-drawer-close {
    background: none; border: 0; color: #fff;
    font-size: 22px; line-height: 1; cursor: pointer;
}
/* Dock (pin) control — only offered on large screens. */
.p4-drawer-pin {
    display: none;
    align-items: center; justify-content: center;
    width: 30px; height: 30px;
    background: none; border: 0; color: #fff; cursor: pointer;
}

/* Docked sidebar: the drawer stays put and the page shifts right. */
@media (min-width: 992px) {
    .p4-drawer-pin { display: inline-flex; }
    html.p4-dock body { padding-left: min(84vw, 300px); }
    html.p4-dock .p4-drawer {
        transform: none;
        box-shadow: none;
        border-right: 1px solid var(--p4-divider);
        /* Docked: no separate panel — it's part of the page background. */
        background: transparent;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    html.p4-dock .p4-scrim { display: none !important; }
    html.p4-dock .p4-topbar-menu { display: none; }   /* menu is always visible now */
    html.p4-dock .p4-drawer-close { display: none; }   /* undock via the pin instead */
    html.p4-dock .p4-drawer-pin { color: #35b8e0; }    /* lit when docked */
    /* Docked: the menu header lines up with the top bar. */
    html.p4-dock .p4-drawer-head { min-height: 76px; padding-top: 0; padding-bottom: 0; }
}
.p4-drawer-nav { flex: 1; overflow-y: auto; padding: 10px 12px; }
.p4-drawer-sec {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--p4-muted);
    padding: 14px 6px 6px;
}
/* Anchors without href (data-href navigation) still read as links. */
.p4-golink { cursor: pointer; }
.p4-drawer-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 12px;
    margin-bottom: 4px;
    border-radius: var(--p4-radius-sm);
    background: var(--p4-card-bg);
    color: var(--p4-text);
    text-decoration: none;
    font-weight: 600;
    font-size: 13.5px;
    box-shadow: var(--p4-shadow);
}
/* Selected item: solid slate with white text (matches the app's tabs). */
.p4-drawer-item.is-active { background: #313a46; color: #fff; box-shadow: none; }
.p4-drawer-item.is-active .p4-badge-count { background: #fff; color: #313a46; }
.p4-badge-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--p4-tint);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
}
.p4-topbar-menu .p4-badge-count { margin-left: 6px; }
.p4-drawer-item.is-disabled { color: var(--p4-muted); box-shadow: none; opacity: 0.75; }
.p4-drawer-item em {
    font-style: normal;
    font-size: 11px;
    font-weight: 700;
    color: var(--p4-muted);
    background: var(--p4-card-tint);
    padding: 2px 8px;
    border-radius: 999px;
}
.p4-drawer-foot {
    padding: 12px 16px calc(env(safe-area-inset-bottom) + 12px);
    font-size: 13px;
    /* Matches the top-bar color (slate by default, red when the header is red);
       near-white text reads on both. */
    background: #313a46;
    color: rgba(255, 255, 255, 0.9);
}
.p4-drawer-foot strong { color: #fff; }
.p4-drawer-foot a { color: #fff; }
.p4-drawer-foot--red { background: var(--p4-tint); }

/* ============================================================
   Login form
   ============================================================ */

/* Sign-in: gradient wash background; on wide screens a two-pane split with the
   form on the left and a branded image panel on the right. The login page opts
   out of the global 90% zoom so 100dvh fills the whole screen. */
html.p4-login-html { zoom: 1; }
.p4-login-page {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    background: var(--p4-wash) fixed;
    background-color: var(--p4-base);
}
.p4-login-form-col {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    /* Same gradient wash as the main page, behind and around the card. */
    background: var(--p4-wash);
    background-color: var(--p4-base);
}
.p4-login-hero {
    display: none; /* hidden on phones — the card carries the brand there */
}
@media (min-width: 900px) {
    .p4-login-hero {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 6px;
        padding: 48px 56px;
        color: #fff;
        /* Photo muted ~50% by a black overlay, over the app gradient.
           assets/login-hero.webp (~240 KB) with login-hero.jpg as the fallback
           for browsers without image-set(); the original 4.6 MB PNG is not used. */
        background-color: var(--p4-base);
        background-image:
            linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
            url("login-hero.jpg"),
            var(--p4-wash);
        background-image:
            linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
            image-set(url("login-hero.webp") type("image/webp"), url("login-hero.jpg") type("image/jpeg")),
            var(--p4-wash);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    .p4-login-hero-logo {
        width: 96px; height: 96px;
        border-radius: 24px;
        background: #fff;
        padding: 6px;
        object-fit: contain;
        margin-bottom: 8px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    }
    .p4-login-hero h1 { margin: 0; font-size: 40px; color: #fff; }
    .p4-login-hero-tag { margin: 0; font-size: 16px; font-weight: 600; color: rgba(255, 255, 255, 0.82); }
    .p4-login-hero-sub { margin: 14px 0 0; font-size: 15px; line-height: 1.5; max-width: 420px; color: rgba(255, 255, 255, 0.7); }
    /* Desktop shows the hero brand, so drop the duplicate one on the card. */
    .p4-login-form-col .p4-login-brand { display: none; }
}
.p4-login { width: min(92vw, 400px); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22); }
.p4-login-brand { text-align: center; margin-bottom: 18px; }
.p4-login-brand h1 { margin: 8px 0 0; }
.p4-login-logo {
    width: 76px; height: 76px;
    margin: 0 auto;
    display: block;
    border-radius: 50%;
    object-fit: contain;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

/* "or" divider between password sign-in and the SSO options. */
.p4-login-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 0;
    color: var(--p4-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.p4-login-divider::before,
.p4-login-divider::after { content: ""; flex: 1; height: 1px; background: var(--p4-divider); }

/* Apple / SSO sign-in — real, solid buttons, tagged "Coming Soon" (inert). */
.p4-sso ~ .p4-sso { margin-top: 10px; }   /* general sibling: survives script tags between buttons */
.p4-sso[aria-disabled="true"] { cursor: not-allowed; }
.p4-sso:not([aria-disabled="true"]) { cursor: pointer; }
.p4-apple-ico { flex-shrink: 0; margin-top: -2px; }
.p4-sso-apple {
    background: #000;
    border-color: #000;
    color: #fff;
    font-weight: 700;
}
/* Visible outline button (SSO was white-on-white against the card). */
.p4-sso-outline {
    background: transparent;
    border: 1px solid #313a46;
    color: #313a46;
    font-weight: 700;
}
/* Dark: follows the system unless the user forced Light (data-theme on <html>). */
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .p4-sso-outline { border-color: #a9b6c9; color: #a9b6c9; }
}
/* Dark: forced by the user (Appearance → Dark) regardless of the system. */
html[data-theme="dark"] .p4-sso-outline { border-color: #a9b6c9; color: #a9b6c9; }
.p4-soon {
    margin-left: 6px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(120, 120, 128, 0.2);
    color: var(--p4-muted);
}
.p4-sso-apple .p4-soon { background: rgba(255, 255, 255, 0.22); color: #fff; }

/* Slate action button (login prefers slate over the brand red). */
.p4-btn-slate {
    background: #313A46;
    border-color: transparent;
    color: #fff;
    font-weight: 700;
}
.p4-login-mark {
    width: 56px; height: 56px;
    margin: 0 auto;
    border-radius: 50%;
    background: var(--p4-tint);
    color: #fff;
    font-weight: 800;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.p4-field { display: block; margin-bottom: 14px; }
.p4-field > span {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--p4-muted);
    margin-bottom: 6px;
}
.p4-field select,
.p4-field input {
    width: 100%;
    padding: 12px 14px;
    font-size: 16px;
    color: var(--p4-text);
    background-color: var(--p4-card-bg);
    border: 1px solid var(--p4-divider);
    border-radius: var(--p4-radius-sm);
    outline: none;
    appearance: none;
}

/* Down-caret so selects read as dropdowns (appearance:none removed the native one). */
.p4-select,
.p4-field select,
.p4-float > select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%236e6e73' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px 14px;
    padding-right: 38px;
}
.p4-field select:focus,
.p4-field input:focus { border-color: var(--p4-tint); }
.p4-login-error {
    background: rgba(193, 39, 45, 0.12);
    color: var(--p4-tint);
    border-radius: var(--p4-radius-sm);
    padding: 10px 12px;
    font-size: 14px;
    margin-bottom: 14px;
}
.p4-login-error.p4-ok {
    background: #3F7F5A;   /* solid, matches the green success button */
    color: #fff;
}
/* Secondary text links on the login / reset cards (Forgot password?, Back to
   sign in, Sign out): a quiet pill with an icon, no bare underlined link. */
.p4-login-links { text-align: center; margin: 12px 0 2px; }
.p4-login-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--p4-slate, #313A46);
    background: rgba(49, 58, 70, 0.07);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}
.p4-login-link:hover, .p4-login-link:focus-visible { background: rgba(49, 58, 70, 0.14); color: var(--p4-tint); outline: none; }
.p4-login-link svg { width: 14px; height: 14px; flex-shrink: 0; }
html[data-theme="dark"] .p4-login-link { color: #d6dde8; background: rgba(214, 221, 232, 0.10); }
html[data-theme="dark"] .p4-login-link:hover { background: rgba(214, 221, 232, 0.18); color: #fff; }

/* ============================================================
   Confirmation modal (replaces window.confirm on the web)
   ============================================================ */

.p4-confirm-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;   /* invisible = untouchable, like the scrim and offcanvas backdrops */
}
.p4-confirm-backdrop.open { opacity: 1; pointer-events: auto; }
.p4-confirm {
    background: var(--p4-card-bg);
    border-radius: var(--p4-radius);
    box-shadow: var(--p4-shadow);
    width: min(92vw, 400px);
    padding: 24px;
    text-align: center;
    transform: translateY(10px);
    transition: transform 0.2s ease;
}
.p4-confirm-backdrop.open .p4-confirm { transform: translateY(0); }
.p4-confirm-icon {
    width: 60px; height: 60px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: #198754;
    color: #fff;
    font-size: 28px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Destructive confirm (e.g. abandoning a check): red icon instead of green. */
.p4-confirm-danger .p4-confirm-icon { background: #B03A2E; }
.p4-confirm h2 { margin: 0 0 8px; }
.p4-confirm p {
    color: var(--p4-muted);
    white-space: pre-line;
    margin: 0 0 18px;
}
.p4-confirm-actions { display: flex; flex-direction: column; gap: 10px; }

/* ---------- Off-canvas picker (searchable person list) ---------- */
.p4-offcanvas-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1200; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.p4-offcanvas-backdrop.p4-open { opacity: 1; pointer-events: auto; }
.p4-offcanvas { position: fixed; top: 0; right: 0; height: 100%; width: 360px; max-width: 88vw; background: var(--p4-card-bg); box-shadow: -8px 0 24px rgba(0,0,0,.2); transform: translateX(100%); transition: transform .22s ease; z-index: 1201; display: flex; flex-direction: column; }
.p4-offcanvas.p4-open { transform: translateX(0); }
.p4-offcanvas-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px; background: #313a46; color: #fff; }
.p4-offcanvas-head .p4-modal-close { color: #fff; opacity: .85; }
.p4-offcanvas-title { font-weight: 800; font-size: 15px; flex: 1; }
.p4-offcanvas-search { padding: 10px 12px; border-bottom: 1px solid var(--p4-divider); }
.p4-offcanvas-list { overflow-y: auto; flex: 1; -webkit-overflow-scrolling: touch; }
.p4-oc-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 13px 16px; border-bottom: 1px solid var(--p4-divider); cursor: pointer; font-size: 15px; }
.p4-oc-item:hover { background: var(--p4-card-tint); }
.p4-oc-check { color: #c1272d; font-weight: 800; }
.wo-mine { color: #c1272d; font-weight: 800; }

/* ---------- List-style button (icon + label/value + chevron), e.g. Assign to ---------- */
.p4-listbtn { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px; margin-bottom: 14px; background: var(--p4-card-bg); border: 1px solid var(--p4-divider); border-radius: var(--p4-radius-sm); cursor: pointer; text-align: left; color: var(--p4-text); }
.p4-listbtn:hover { background: var(--p4-card-tint); }
.p4-listbtn-ico { width: 34px; height: 34px; border-radius: 50%; background: var(--p4-card-tint); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--p4-text); }
.p4-listbtn-txt { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.p4-listbtn-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--p4-muted); }
.p4-listbtn-val { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p4-listbtn-chev { color: var(--p4-muted); font-size: 20px; }

/* ---------- Responsive table collapse (P4.rtable — DataTables-style "+") ---------- */
.p4-rt-hide { display: none !important; }
/* The expand control: slate disc with a centred +/− (DataTables-style). */
.p4-rt-toggle { position: relative; display: inline-block; width: 22px; height: 22px;
    border: 0; border-radius: 50%; background: #313A46; cursor: pointer; padding: 0;
    margin-right: 8px; vertical-align: middle; flex: 0 0 auto; }
/* Draw the +/− with centred bars — a text glyph never sits dead-centre. */
.p4-rt-toggle::before, .p4-rt-toggle::after { content: ""; position: absolute; background: #fff; border-radius: 1px; }
.p4-rt-toggle::before { width: 10px; height: 2px; left: 6px; top: 10px; }
.p4-rt-toggle::after  { width: 2px; height: 10px; left: 10px; top: 6px; }
.p4-rt-toggle.p4-rt-open::after { display: none; }
tr.p4-rt-child > td { background: var(--p4-card-tint); padding: 10px 14px; }
/* Phones: cell text never wraps — the table collapses columns into the child
   row instead (a wrapped date is harder to read than one more tap). Compact
   type and padding so a row is one clean line. */
@media (max-width: 640px) {
    table.p4-rt thead th, table.p4-rt tbody td { white-space: nowrap; }
    table.p4-rt tbody td { font-size: 13px; padding-top: 9px; padding-bottom: 9px; }
    table.p4-rt tbody tr.p4-rt-child > td { white-space: normal; }
}
.p4-rt-dl { display: flex; flex-direction: column; gap: 7px; }
.p4-rt-item { display: flex; align-items: baseline; gap: 12px; font-size: 13.5px; }
.p4-rt-k { min-width: 92px; flex: 0 0 auto; font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .03em; color: var(--p4-muted); }
.p4-rt-v { flex: 1; min-width: 0; overflow-wrap: anywhere; }