/* CertMe — mobile-first styles
   Designed for phones first; larger screens enhance.
   Touch targets ≥ 44px, no horizontal scroll, safe-area aware.

   Colour system derived from Health New Zealand / Te Whatu Ora brand assets
   in /assets (navy + teal + ice-blue tukutuku pattern tones).
*/

:root {
    /* Core HNZ-inspired palette */
    --navy: #0b1f3a;
    --navy-deep: #071528;
    --teal: #008a96;
    --teal-bright: #00a3a1;
    --teal-mid: #2a9daa;
    --ice: #e8f6f8;
    --ice-deep: #d4f1f4;
    --pattern: #b8e4ea;

    --bg: #eef8fa;
    --card: #ffffff;
    --text: #0b1f3a;
    --muted: #4a6572;
    --line: #c5dde3;
    --brand: #008a96;
    --brand-dark: #0b1f3a;
    --brand-mid: #006d78;
    --brand-soft: #d4f1f4;
    --accent: #00a3a1;
    --danger: #b42318;
    --ok: #0d7a72;
    --radius: 14px;
    --radius-sm: 10px;
    --shadow: 0 4px 16px rgba(11, 31, 58, 0.08);
    --shadow-lg: 0 12px 32px rgba(11, 31, 58, 0.14);
    --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
    --tap: 48px;
    --topbar-h: 3.5rem;
    --bottom-nav-h: 4.25rem;
    --space: 1rem;
    --space-lg: 1.25rem;
    --max-w: 42rem; /* phones: full width of the screen via .wrap */
    --focus-ring: rgba(0, 138, 150, 0.22);
}

/* —— Reset / base —— */
*,
*::before,
*::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font);
    font-size: 16px; /* prevents iOS input zoom */
    color: var(--text);
    /* Soft ice field + subtle tukutuku-inspired diamond wash (from brand pattern assets) */
    background-color: var(--bg);
    background-image:
        linear-gradient(135deg, rgba(184, 228, 234, 0.35) 25%, transparent 25%),
        linear-gradient(225deg, rgba(184, 228, 234, 0.28) 25%, transparent 25%),
        linear-gradient(45deg, rgba(184, 228, 234, 0.22) 25%, transparent 25%),
        linear-gradient(315deg, rgba(184, 228, 234, 0.22) 25%, transparent 25%);
    background-size: 28px 28px;
    background-position: 0 0, 14px 0, 14px -14px, 0 14px;
    line-height: 1.5;
    min-height: 100vh;
    min-height: 100dvh;
    -webkit-tap-highlight-color: rgba(0, 138, 150, 0.14);
    padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
}

body.no-bottom-nav {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

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

img, svg { max-width: 100%; height: auto; }

.wrap {
    width: 100%;
    max-width: var(--max-w);
    margin: 0 auto;
    padding-left: max(var(--space), env(safe-area-inset-left));
    padding-right: max(var(--space), env(safe-area-inset-right));
}

/* —— Top bar —— */
.topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    /* Dark promo navy → teal (images.jpg + Te Whatu Ora teal) */
    background:
        linear-gradient(180deg, rgba(0, 163, 161, 0.18), transparent 42%),
        linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 48%, var(--brand-mid) 100%);
    color: #fff;
    padding:
        max(0.55rem, env(safe-area-inset-top))
        0
        0.55rem;
    box-shadow: 0 4px 18px rgba(7, 21, 40, 0.28);
    border-bottom: 3px solid var(--teal-bright);
}

.topbar a { color: #fff; }

.topbar-inner {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: var(--tap);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none !important;
    min-height: var(--tap);
    min-width: 0;
    max-width: min(100%, 20rem);
}

.brand-mark {
    width: 3.35rem;
    height: 3.35rem;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--teal-bright), var(--teal));
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 1.2rem;
    flex-shrink: 0;
    border: 2.5px solid rgba(255, 255, 255, 0.92);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.35) inset,
        0 0 0 1px rgba(7, 21, 40, 0.2),
        0 4px 10px rgba(7, 21, 40, 0.35),
        0 8px 18px rgba(0, 0, 0, 0.22);
}

/* Company logo in top bar (tenant branding — not user photo) */
.brand-logo {
    width: 3.35rem;
    height: 3.35rem;
    max-width: 3.35rem;
    max-height: 3.35rem;
    object-fit: cover;
    object-position: center;
    flex-shrink: 0;
    border-radius: 50%;
    background: #fff;
    padding: 0;
    border: 2.5px solid rgba(255, 255, 255, 0.95);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.45) inset,
        0 0 0 1px rgba(7, 21, 40, 0.18),
        0 4px 10px rgba(7, 21, 40, 0.32),
        0 8px 18px rgba(0, 0, 0, 0.2);
}

.brand-text {
    letter-spacing: -0.01em;
    line-height: 1.2;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Desktop-only top nav (hidden on phone) — single row, overflow via dropdowns */
.nav-desktop {
    display: none;
    flex-wrap: nowrap;
    gap: 0.1rem;
    font-size: 0.9rem;
    align-items: center;
    min-width: 0;
    flex: 1 1 auto;
    justify-content: flex-end;
    overflow: visible;
}

.nav-desktop > a,
.nav-desktop .nav-dd-btn {
    opacity: 0.95;
    text-decoration: none !important;
    padding: 0.4rem 0.55rem;
    border-radius: 8px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: #fff;
    font: inherit;
    cursor: pointer;
}

.nav-desktop > a:hover,
.nav-desktop > a:focus-visible,
.nav-desktop .nav-dd-btn:hover,
.nav-desktop .nav-dd-btn:focus-visible,
.nav-desktop > a.is-active,
.nav-desktop .nav-dd.is-active > .nav-dd-btn {
    background: rgba(255, 255, 255, 0.15);
}

.nav-dd {
    position: relative;
    flex-shrink: 0;
}

.nav-dd-caret {
    margin-left: 0.2rem;
    font-size: 0.7em;
    opacity: 0.85;
}

.nav-dd-menu {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    min-width: 11.5rem;
    max-width: min(18rem, 90vw);
    padding: 0.35rem;
    margin: 0;
    background: #fff;
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18);
    z-index: 200;
    flex-direction: column;
    gap: 0.1rem;
    /* Closed by default — author `display` must not override [hidden] */
    display: none;
}

.nav-dd-menu[hidden] {
    display: none !important;
}

.nav-dd.is-open .nav-dd-menu {
    display: flex;
}

.nav-dd.is-open .nav-dd-menu[hidden] {
    display: flex !important;
}

.nav-dd-menu-end {
    left: auto;
    right: 0;
}

.nav-dd-menu a {
    color: var(--text) !important;
    text-decoration: none !important;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    min-height: 40px;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.nav-dd-menu a:hover,
.nav-dd-menu a:focus-visible,
.nav-dd-menu a.is-active {
    background: var(--brand-soft, #e8f6f6);
    color: var(--brand-dark, #0b4f4e) !important;
}

.nav-dd.is-open .nav-dd-btn {
    background: rgba(255, 255, 255, 0.2);
}

.topbar-inner .brand {
    flex-shrink: 1;
}

.user-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    padding: 0.15rem 0 0.2rem;
    font-size: 0.8rem;
    opacity: 0.95;
    line-height: 1.3;
}

/* Multi-company switcher (only when user has 2+ memberships) */
.company-switcher {
    padding: 0.25rem 0 0.45rem;
}
.company-switcher-form select {
    width: 100%;
    max-width: 100%;
    min-height: 44px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font: inherit;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.45rem 0.75rem;
}
.company-switcher-form select option {
    color: #0b1f3a;
}

.badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    padding: 0.15rem 0.55rem;
    font-size: 0.72rem;
    font-weight: 600;
}

.muted { color: var(--muted); }
.topbar .muted { color: rgba(255, 255, 255, 0.75); }

/* —— Bottom navigation (phones) —— */
.bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    gap: 0.15rem;
    min-height: var(--bottom-nav-h);
    padding:
        0.35rem max(0.35rem, env(safe-area-inset-left))
        max(0.35rem, env(safe-area-inset-bottom))
        max(0.35rem, env(safe-area-inset-right));
    background: #fff;
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 20px rgba(26, 35, 50, 0.08);
}

.bottom-nav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    min-height: var(--tap);
    min-width: 0;
    padding: 0.35rem 0.2rem;
    border-radius: 12px;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none !important;
    -webkit-user-select: none;
    user-select: none;
}

.bottom-nav a .nav-icon {
    font-size: 1.25rem;
    line-height: 1;
    width: 1.5rem;
    height: 1.5rem;
    display: grid;
    place-items: center;
}

.bottom-nav a.is-active,
.bottom-nav a:active {
    color: var(--brand);
    background: var(--brand-soft);
}

.bottom-nav a.nav-new {
    color: #fff;
    background: linear-gradient(145deg, var(--teal-bright), var(--brand-mid));
    margin-top: -0.65rem;
    border-radius: 16px;
    box-shadow: 0 6px 16px rgba(0, 138, 150, 0.4);
    max-width: 4.5rem;
}

.bottom-nav a.nav-new .nav-icon {
    font-size: 1.5rem;
    font-weight: 700;
}

.bottom-nav a.nav-new.is-active,
.bottom-nav a.nav-new:active {
    color: #fff;
    background: var(--accent);
    filter: brightness(1.05);
}

/* —— Main layout —— */
.main {
    padding: 1rem 0 1.5rem;
}

.site-footer {
    display: none; /* phones: bottom nav replaces footer chrome */
    border-top: 1px solid var(--line);
    padding: 1rem 0 1.5rem;
    color: var(--muted);
    font-size: 0.85rem;
}

h1 {
    font-size: 1.45rem;
    line-height: 1.25;
    margin: 0 0 0.5rem;
    letter-spacing: -0.02em;
}

h2 {
    font-size: 1.05rem;
    margin: 0 0 0.75rem;
    letter-spacing: -0.01em;
}

.lead {
    color: var(--muted);
    margin: 0 0 1rem;
    font-size: 0.95rem;
}

/* —— Cards —— */
.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
    box-shadow: var(--shadow);
    margin-bottom: 0.85rem;
}

.card-flush {
    padding: 0;
    overflow: hidden;
}

.page-header {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.page-header-text { min-width: 0; }

.page-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.page-actions .btn {
    width: 100%;
}

/* —— Stats (always one row of equal boxes on desktop) —— */
.grid-stats {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.55rem;
    margin-bottom: 1rem;
    width: 100%;
}

.grid-stats .stat {
    flex: 1 1 0;
    min-width: 0; /* allow shrink so four fit on one row */
}

/* Phones only: 2×2 */
@media (max-width: 520px) {
    .grid-stats {
        flex-wrap: wrap;
    }
    .grid-stats .stat {
        flex: 1 1 calc(50% - 0.3rem);
        max-width: calc(50% - 0.28rem);
    }
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;
}

.stat {
    background: linear-gradient(180deg, #fff 0%, var(--brand-soft) 100%);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 0.65rem 0.4rem;
    text-align: center;
    box-sizing: border-box;
}

.stat strong {
    display: block;
    font-size: 1.25rem;
    color: var(--brand-dark);
    line-height: 1.2;
}

.stat span {
    display: block;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* —— Buttons (touch-friendly) —— */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border: none;
    border-radius: 12px;
    padding: 0.85rem 1.15rem;
    min-height: var(--tap);
    font-weight: 600;
    font-size: 1rem;
    font-family: inherit;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none !important;
    touch-action: manipulation;
    -webkit-appearance: none;
    appearance: none;
}

.btn:hover { filter: brightness(1.04); }
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

.btn-primary {
    background: linear-gradient(180deg, var(--teal-bright) 0%, var(--brand) 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 138, 150, 0.28);
}
.btn-accent {
    background: linear-gradient(180deg, #1ab0ae 0%, var(--brand-mid) 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 109, 120, 0.25);
}
.btn-secondary { background: var(--ice); color: var(--text); border: 1px solid var(--line); }
.btn-danger { background: #fef3f2; color: var(--danger); border: 1px solid #fecdca; }
.btn-block { width: 100%; }
.btn-sm {
    padding: 0.55rem 0.85rem;
    min-height: 40px;
    font-size: 0.9rem;
}
/* Action buttons in tables — do NOT set display:flex on the <td> itself.
   Flex on table cells breaks border-collapse row lines (gap after "By" column). */
.table-actions {
    white-space: nowrap;
    text-align: right;
    vertical-align: middle;
}
.table-actions .btn {
    vertical-align: middle;
}
.table-actions .btn + .btn {
    margin-left: 0.4rem;
}
/* Non-table use of .table-actions (if any wrapper div) */
div.table-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    justify-content: flex-end;
}
div.table-actions .btn + .btn {
    margin-left: 0;
}

/* —— Forms —— */
.form-group { margin-bottom: 1rem; }

.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.4rem;
    font-size: 0.9rem;
}

.form-group input:not([type="checkbox"]):not([type="radio"]),
.form-group select,
.form-group textarea {
    width: 100%;
    max-width: 100%;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    padding: 0.85rem 0.9rem;
    min-height: var(--tap);
    font: inherit;
    font-size: 16px; /* critical: stop iOS zoom on focus */
    background: #fff;
    color: var(--text);
    -webkit-appearance: none;
    appearance: none;
    touch-action: manipulation;
}

.form-group input:not([type="checkbox"]):not([type="radio"]):focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.form-group textarea {
    min-height: 7rem;
    resize: vertical;
    line-height: 1.45;
}

.form-group select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235c6b7a' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

/* Checkbox list (admin categories) */
.check-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.check-list label {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-weight: 500;
    min-height: var(--tap);
    padding: 0.35rem 0.5rem;
    border-radius: 10px;
    margin: 0;
    cursor: pointer;
}

.check-list label:active {
    background: var(--brand-soft);
}

.check-list input[type="checkbox"],
.check-list input[type="radio"],
.form-group input[type="checkbox"],
.form-group input[type="radio"] {
    width: 1.35rem;
    height: 1.35rem;
    min-width: 1.35rem;
    min-height: 1.35rem;
    margin: 0;
    padding: 0;
    border: 2px solid var(--line);
    border-radius: 4px;
    background: #fff;
    flex-shrink: 0;
    accent-color: var(--brand);
    -webkit-appearance: auto;
    appearance: auto;
    cursor: pointer;
    pointer-events: auto;
}
/* —— Form section headings (e.g. Take 5) —— */
.form-section-block {
    margin: 1.35rem 0 0.85rem;
    padding: 0.75rem 0.85rem;
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
    border-radius: var(--radius-sm);
    border-bottom: 3px solid var(--teal);
    color: #fff;
}

.form-section-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.01em;
}

.form-section-help {
    margin: 0.4rem 0 0;
    font-size: 0.82rem;
    line-height: 1.4;
    color: rgba(232, 246, 248, 0.92);
    white-space: pre-line;
}

.yn-pick {
    gap: 0.4rem;
}

.yn-pick .role-option {
    flex: 1 1 30%;
    min-width: 4.5rem;
}

/* —— Region accordion (registration campus pick) —— */
.region-accordion {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--card);
}

.region-acc-item {
    border-bottom: 1px solid var(--line);
    background: #fff;
}

.region-acc-item:last-child {
    border-bottom: 0;
}

.region-acc-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-height: var(--tap);
    padding: 0.65rem 0.85rem;
    border: 0;
    background: var(--ice);
    color: var(--navy);
    font: inherit;
    font-weight: 700;
    font-size: 0.92rem;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.region-acc-toggle:hover,
.region-acc-toggle:focus-visible {
    background: var(--ice-deep);
    outline: none;
}

.region-acc-item.is-open .region-acc-toggle {
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
    color: #fff;
    border-bottom: 2px solid var(--teal);
}

.region-acc-item.has-selection:not(.is-open) .region-acc-toggle {
    background: var(--brand-soft);
    box-shadow: inset 3px 0 0 var(--teal);
}

.region-acc-chevron {
    display: inline-flex;
    width: 1.1rem;
    flex-shrink: 0;
    color: var(--teal);
    font-size: 0.85rem;
    transition: transform 0.15s ease;
}

.region-acc-item.is-open .region-acc-chevron {
    transform: rotate(90deg);
    color: var(--teal-bright);
}

.region-acc-name {
    flex: 1;
    min-width: 0;
    line-height: 1.25;
}

.region-acc-meta {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 600;
    opacity: 0.85;
    white-space: nowrap;
}

.region-acc-item.is-open .region-acc-meta {
    color: rgba(232, 246, 248, 0.9);
}

.region-acc-panel {
    padding: 0.35rem 0.5rem 0.65rem;
    background: #fff;
}

.region-acc-campuses {
    margin: 0;
}

.region-acc-campuses label {
    margin: 0.25rem 0;
}

.check-list input[type="checkbox"]:checked,
.form-group input[type="checkbox"]:checked {
    border-color: var(--brand);
}

/* Sticky form action bar (phones) */
.form-actions {
    display: flex;
    flex-direction: column-reverse;
    gap: 0.55rem;
    margin-top: 1.25rem;
    padding-top: 0.25rem;
}

.form-actions .btn { width: 100%; }

/* Sticky only on larger screens — on phones the bar covered half the form.
   On mobile, actions sit at the bottom of the form after scrolling. */
.form-actions-sticky {
    position: static;
    margin: 1.25rem 0 0;
    padding: 0.85rem 0 0;
    background: transparent;
    border-top: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
}

body.no-bottom-nav .form-actions-sticky {
    bottom: auto;
}

/* Hide verbose chrome on phones (keep forms clean) */
.show-phone-only {
    display: none !important;
}

@media (max-width: 639px) {
    .hide-on-phone {
        display: none !important;
    }
    .show-phone-only {
        display: block !important;
    }
    p.show-phone-only,
    .lead.show-phone-only {
        display: block !important;
    }
    .cert-view-meta-phone {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.4rem 0.55rem;
        margin: 0.25rem 0 0 !important;
    }

    /* Compact success flash after submit */
    .alert-flash-success {
        padding: 0.55rem 0.75rem;
        font-size: 0.9rem;
    }

    /* Tighter page chrome */
    .main {
        padding: 0.75rem 0 1.15rem;
    }
    h1 {
        font-size: 1.25rem;
        margin-bottom: 0.35rem;
    }
    .card {
        padding: 0.85rem 0.9rem;
        margin-bottom: 0.7rem;
    }
    .page-header {
        gap: 0.55rem;
        margin-bottom: 0.75rem;
    }

    /* Top bar: name + Profile only */
    .user-strip {
        font-size: 0.78rem;
        padding: 0.1rem 0 0.15rem;
    }
    .user-strip-profile {
        margin-left: auto;
        font-weight: 600;
        opacity: 0.95;
    }

    /* Type picker: less noise */
    .type-card {
        min-height: 3.5rem;
        padding: 0.85rem 0.95rem;
    }
    .type-card small {
        display: none;
    }

    /* Filters: full-width stack, easier thumbs */
    .filter-bar-card {
        padding: 0.55rem 0.65rem;
    }
    .filter-bar-field {
        flex: 1 1 100%;
    }
    .filter-bar-actions {
        width: 100%;
        margin-top: 0.15rem;
    }
    .filter-bar-actions .btn {
        flex: 1;
    }

    /* Permit view actions: compact row */
    .page-actions-cert-view {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.4rem;
    }
    .page-actions-cert-view .btn {
        width: auto;
        flex: 1 1 auto;
        min-width: 0;
        padding: 0.65rem 0.75rem;
        font-size: 0.9rem;
    }

    /* Approver cards on phone */
    #approve h2 {
        font-size: 1rem;
    }

    /* Next 7 days: denser cards */
    .list-card-this-week {
        padding: 0.8rem 0.85rem;
    }
    .card-this-week .this-week-head h2 {
        font-size: 1.05rem;
    }
}

/* —— Alerts —— */
.alert {
    border-radius: 12px;
    padding: 0.9rem 1rem;
    margin-bottom: 0.85rem;
    font-size: 0.95rem;
}

.alert-error { background: #fef3f2; color: var(--danger); border: 1px solid #fecdca; }
.alert-success { background: #e6f7f4; color: var(--ok); border: 1px solid #9fd9d0; }
.alert-info { background: var(--ice); color: var(--brand-mid); border: 1px solid var(--pattern); }
.alert-warning { background: #fff8eb; color: #9a5b10; border: 1px solid #f5d48a; }

/* —— List cards (replace tables on mobile) —— */
.list-stack {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.list-card {
    display: block;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0.95rem 1rem;
    box-shadow: var(--shadow);
    color: inherit;
    text-decoration: none !important;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
    touch-action: manipulation;
}

a.list-card:active {
    transform: scale(0.99);
    border-color: var(--brand);
}

.list-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.65rem;
    margin-bottom: 0.45rem;
}

.list-card-title {
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.3;
    min-width: 0;
}
.permit-ref {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--brand-mid);
    margin-bottom: 0.12rem;
}
.list-card-this-week .permit-ref {
    color: #d7eef2;
}
.permit-ref-cell {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.list-card-meta {
    display: grid;
    gap: 0.25rem;
    font-size: 0.88rem;
    color: var(--muted);
}

.list-card-meta strong {
    color: var(--text);
    font-weight: 600;
}

.list-card-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.85rem;
}

.list-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.65rem;
    padding-top: 0.55rem;
    border-top: 1px solid var(--line);
    font-size: 0.85rem;
    color: var(--muted);
}

.list-card-cta {
    color: var(--brand);
    font-weight: 600;
    font-size: 0.9rem;
}

/* —— Approver: This Week's Work (darker brand panel + list) —— */
.card-this-week {
    background: linear-gradient(180deg, #8ec4cd 0%, #6eafba 45%, #5a9eab 100%);
    border: 1px solid #3d7d8a;
    box-shadow: 0 8px 24px rgba(11, 31, 58, 0.16);
}
.card-this-week .this-week-head h2 {
    color: var(--navy-deep);
    margin: 0;
}
.card-this-week > .muted,
.card-this-week .this-week-head .muted {
    color: #163445;
}
.list-card-this-week {
    background: linear-gradient(180deg, #5f97a3 0%, #4a8491 55%, #3d7582 100%);
    border-color: #2a5c68;
    box-shadow: 0 4px 14px rgba(11, 31, 58, 0.18);
    color: #f3fbfd;
}
.list-card-this-week .list-card-title {
    color: #ffffff;
}
.list-card-this-week .list-card-meta,
.list-card-this-week .list-card-foot {
    color: #d7eef2;
    border-top-color: rgba(255, 255, 255, 0.18);
}
.list-card-this-week .list-card-meta strong {
    color: #ffffff;
}
.list-card-this-week .list-card-cta {
    color: #ffffff;
}
.list-card-this-week .this-week-window {
    color: #ffffff;
}
a.list-card-this-week:hover,
a.list-card-this-week:focus-visible {
    border-color: var(--navy-deep);
    box-shadow: 0 6px 18px rgba(7, 21, 40, 0.28);
}
.this-week-window,
.permit-window-meta {
    margin-top: 0.2rem;
    font-size: 0.88rem;
}
.this-week-table-wrap {
    margin-top: 0.75rem;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid #2a5c68;
    background: #3f7f8c;
}
table.data-this-week {
    margin: 0;
    color: #f2fafb;
}
table.data-this-week thead th {
    background: #071528;
    color: #e8f6f8;
    border-bottom-color: #071528;
}
table.data-this-week thead th .th-sort-link {
    color: #e8f6f8;
}
table.data-this-week thead th.is-sorted .th-sort-link {
    color: #9fe3ea;
}
table.data-this-week tbody td {
    border-bottom-color: rgba(255, 255, 255, 0.12);
    color: #f2fafb;
}
table.data-this-week tbody tr {
    background: #3f7f8c;
}
table.data-this-week tbody tr:nth-child(even) {
    background: #366f7b;
}
table.data-this-week tbody tr:hover {
    background: #2f6270;
}
table.data-this-week .muted {
    color: #c5e4ea;
}
table.data-this-week .btn-secondary {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.35);
}
table.data-this-week .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.24);
}
/* Shared permit window (This Weeks Work + all permit lists) */
.permit-window-cell,
.this-week-window-cell {
    font-size: 0.9rem;
    white-space: normal;
    vertical-align: top;
}
.permit-window-range,
.this-week-window-range {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.3;
    gap: 0.05rem;
}
.permit-window-to,
.this-week-window-to {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: lowercase;
    opacity: 0.85;
}
.list-card .permit-window-range,
.list-card-this-week .this-week-window-range,
.list-card-this-week .permit-window-range {
    display: inline-flex;
    margin-left: 0.35rem;
    vertical-align: top;
}

/* —— Compact filter bar (shared list views) —— */
.filter-bar-card {
    padding: 0.65rem 0.75rem;
}
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.4rem 0.5rem;
}
.filter-bar-field {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    flex: 1 1 6.5rem;
}
.filter-bar-search {
    flex: 1 1 9rem;
    min-width: 8rem;
}
.filter-bar-field label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--muted);
    margin: 0;
}
.filter-bar-field input,
.filter-bar-field select {
    width: 100%;
    min-height: 40px;
    max-width: 100%;
    border: 1.5px solid var(--line);
    border-radius: 8px;
    padding: 0.35rem 0.5rem;
    font: inherit;
    font-size: 0.88rem;
    background: #fff;
    color: var(--text);
}
.filter-bar-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.35rem;
    flex: 0 0 auto;
    padding-bottom: 1px;
}
.filter-bar-actions .btn {
    width: auto;
    min-width: 4.25rem;
}
@media (min-width: 1100px) {
    .filter-bar {
        flex-wrap: nowrap;
    }
    .filter-bar-field {
        flex: 1 1 0;
    }
    .filter-bar-search {
        flex: 1.4 1 0;
    }
}

/* Excel-style sortable column headers */
.th-sort {
    white-space: nowrap;
    padding: 0 !important;
    vertical-align: middle;
}
.th-sort-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    width: 100%;
    min-height: 44px;
    padding: 0.7rem 0.5rem;
    color: var(--muted);
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-decoration: none !important;
    border-radius: 6px;
}
.th-sort-link:hover,
.th-sort-link:focus-visible {
    color: var(--brand);
    background: var(--brand-soft);
    outline: none;
}
.th-sort.is-sorted .th-sort-link {
    color: var(--brand-mid);
}
.th-sort-icon {
    font-size: 0.7rem;
    opacity: 0.75;
    flex-shrink: 0;
    line-height: 1;
}
.th-sort.is-sorted .th-sort-icon {
    opacity: 1;
}

/* Desktop tables (hidden on phone by default) */
.table-wrap {
    display: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table.data {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

table.data th,
table.data td {
    text-align: left;
    padding: 0.7rem 0.5rem;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

table.data th {
    color: var(--muted);
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Definition list for detail views */
.dl {
    display: grid;
    gap: 0.85rem;
    margin: 0;
}

.dl-item {
    display: grid;
    gap: 0.2rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--line);
}

.dl-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.dl-item dt {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    margin: 0;
}

.dl-item dd {
    margin: 0;
    font-size: 1rem;
    word-break: break-word;
}

/* —— Pills —— */
.pill {
    display: inline-block;
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 700;
    background: #eef2f6;
    white-space: nowrap;
    flex-shrink: 0;
}

.pill-draft { background: #fff4e5; color: #9a5b10; }
.pill-completed { background: var(--brand-soft); color: var(--brand-mid); }
.pill-pending_approval { background: #fff4e5; color: #9a5b10; }
.pill-approved { background: var(--brand-soft); color: var(--brand-mid); }
.pill-rejected { background: #fef3f2; color: var(--danger); }
.pill-void { background: #eef2f6; color: #5c6b7a; }
.pill-cancelled { background: #eef2f6; color: #475569; border: 1px solid #cbd5e1; }

/* —— Type picker cards —— */
.type-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
    min-height: 4.25rem;
    background: #fff;
    color: inherit;
    text-decoration: none !important;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
    touch-action: manipulation;
}

.type-card:active {
    transform: scale(0.99);
    border-color: var(--brand);
    box-shadow: var(--shadow);
}

.type-card strong {
    display: block;
    font-size: 1rem;
    line-height: 1.3;
}

.type-card small {
    color: var(--muted);
    display: block;
    margin-top: 0.2rem;
    font-size: 0.85rem;
}

.type-card-arrow {
    color: var(--brand);
    font-size: 1.25rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* —— Standard date / hour pickers (site-wide) —— */
.cm-datetime-hint {
    margin: 0 0 0.45rem;
    font-size: 0.85rem;
}
.datetime-hour-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem;
}
.cm-date-input,
.cm-hour-select,
.datetime-hour-row input[type="date"],
.datetime-hour-row select {
    width: 100%;
    max-width: 100%;
    min-height: var(--tap);
    border: 1.5px solid var(--line);
    border-radius: 12px;
    padding: 0.85rem 0.9rem;
    font: inherit;
    font-size: 16px; /* prevent iOS zoom */
    background: #fff;
    color: var(--text);
    -webkit-appearance: none;
    appearance: none;
}
.cm-date-input:focus,
.cm-hour-select:focus,
.datetime-hour-row input[type="date"]:focus,
.datetime-hour-row select:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--focus-ring);
}
.cm-hour-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235c6b7a' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}
@media (max-width: 380px) {
    .datetime-hour-row {
        grid-template-columns: 1fr;
    }
}

/* —— Certificate photos —— */
.photo-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    margin-bottom: 0.65rem;
}
.photo-thumb {
    display: block;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    border: 1.5px solid var(--line);
    background: #f8fafc;
    aspect-ratio: 1;
    margin: 0;
    padding: 0;
    font-weight: 500;
}
.photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.photo-remove {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.45rem 0.5rem;
    background: rgba(26, 35, 50, 0.72);
    color: #fff;
    font-size: 0.8rem;
    min-height: 40px;
}
.photo-remove input {
    width: 1.1rem;
    height: 1.1rem;
    min-height: 0;
    accent-color: #fff;
}
input[type="file"] {
    width: 100%;
    font: inherit;
    padding: 0.65rem 0;
}
@media (min-width: 640px) {
    .photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* —— Self-registration role picker —— */
.role-pick {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.role-option {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 0;
    padding: 0.85rem 0.9rem;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    min-height: var(--tap);
    cursor: pointer;
    font-weight: 500;
    background: #fff;
}

.role-option:has(input:checked) {
    border-color: var(--brand);
    background: var(--brand-soft);
}

.role-option input {
    width: 1.25rem;
    height: 1.25rem;
    min-height: 0;
    margin-top: 0.15rem;
    accent-color: var(--brand);
    flex-shrink: 0;
}

.role-option-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.role-option-body strong {
    font-size: 1rem;
}

.role-option-body small {
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.35;
}

/* —— Login / install —— */
.login-page {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding:
        max(1rem, env(safe-area-inset-top))
        max(1rem, env(safe-area-inset-right))
        max(1rem, env(safe-area-inset-bottom))
        max(1rem, env(safe-area-inset-left));
    /* Dark navy block (images.jpg) with teal wash + light pattern edge */
    background-color: var(--navy);
    background-image:
        linear-gradient(180deg, rgba(0, 163, 161, 0.22) 0%, transparent 38%),
        linear-gradient(135deg, rgba(184, 228, 234, 0.08) 25%, transparent 25%),
        linear-gradient(225deg, rgba(184, 228, 234, 0.06) 25%, transparent 25%),
        radial-gradient(ellipse at bottom, rgba(0, 138, 150, 0.35), transparent 55%),
        linear-gradient(180deg, var(--navy-deep), var(--navy) 55%, #0a2a40);
    background-size: auto, 32px 32px, 32px 32px, auto, auto;
}

.login-card {
    width: 100%;
    max-width: 420px;
    margin: auto;
    padding: 1.35rem 1.25rem 1.5rem;
    border: 1px solid rgba(184, 228, 234, 0.35);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}

.login-card .brand {
    color: var(--text);
    margin-bottom: 0.35rem;
    align-items: center;
    gap: 0.75rem;
}

.login-card .brand-mark {
    background: linear-gradient(145deg, var(--teal-bright), var(--brand));
    color: #fff;
}

/* Company logo on login (replaces letter mark when branding is set) */
.login-card .login-brand-logo,
.login-card .brand-logo {
    width: 3.5rem;
    height: 3.5rem;
    object-fit: contain;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--line);
    flex-shrink: 0;
    display: block;
}

.login-card .brand-text {
    font-size: 1.15rem;
    line-height: 1.25;
    word-break: break-word;
}

.login-page .lead,
.login-page .muted {
    color: var(--muted);
}

.help-box {
    background: var(--ice);
    border-left: 4px solid var(--teal);
    padding: 0.85rem 1rem;
    border-radius: 0 10px 10px 0;
    color: var(--muted);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

code {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: 0.9em;
    background: var(--ice-deep);
    color: var(--brand-mid);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
}

.empty-state {
    text-align: center;
    padding: 1.5rem 1rem;
    color: var(--muted);
}

.empty-state .btn {
    margin-top: 0.75rem;
}

/* —— Utility —— */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.hide-sm { display: none; }
.show-sm { display: initial; }
.desktop-only { display: none !important; }

.stack-gap { display: flex; flex-direction: column; gap: 0.65rem; }

.section-head {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-bottom: 0.75rem;
}

.section-head h2 { margin: 0; }

/* —— Work order import snapshot (info only, compact table) —— */
.section-divider {
    border: 0;
    border-top: 2px solid var(--teal);
    margin: 1.35rem 0 1rem;
    opacity: 0.55;
}

.wo-import-block {
    margin: 0 0 0.75rem;
}

.wo-import-panel {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--card);
    box-shadow: var(--shadow);
}

.wo-import-panel-head {
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 55%, #0a3a45 100%);
    color: #fff;
    padding: 0.65rem 0.85rem;
    border-bottom: 3px solid var(--teal);
}

.wo-import-title {
    font-size: 0.95rem;
    margin: 0;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.02em;
}

.wo-import-note {
    margin: 0.2rem 0 0;
    font-size: 0.75rem;
    line-height: 1.35;
    color: rgba(232, 246, 248, 0.88);
}

/* Compact label | value table — one field per row (headers stacked) */
.wo-data-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 0.82rem;
}

.wo-data-table th,
.wo-data-table td {
    padding: 0.45rem 0.65rem;
    vertical-align: top;
    border-bottom: 1px solid var(--line);
    word-break: break-word;
    line-height: 1.35;
}

.wo-data-table tr:last-child th,
.wo-data-table tr:last-child td {
    border-bottom: 0;
}

.wo-data-table th {
    width: 34%;
    max-width: 9.5rem;
    background: var(--ice-deep);
    color: var(--navy);
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-align: left;
    border-right: 1px solid var(--line);
}

.wo-data-table td {
    width: 66%;
    background: #fff;
    color: var(--text);
}

.wo-data-table tr:nth-child(even) th {
    background: var(--ice);
}

.wo-data-table tr:nth-child(even) td {
    background: #f7fcfd;
}

.wo-data-table .wo-import-value {
    display: block;
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--navy);
}

.wo-import-empty {
    margin: 0;
    padding: 0.75rem 0.85rem;
    font-size: 0.85rem;
    color: var(--muted);
    background: var(--ice);
    border-top: 1px solid var(--line);
}

@media (max-width: 380px) {
    .wo-data-table th {
        width: 38%;
        font-size: 0.65rem;
        padding: 0.4rem 0.5rem;
    }
    .wo-data-table td {
        padding: 0.4rem 0.5rem;
    }
}

/* —— Wider screens (tablet+) —— */
@media (min-width: 640px) {
    :root {
        --max-w: 58rem; /* ~928px — better room for tables than phone layout */
        --space: 1.25rem;
    }

    body {
        padding-bottom: 0;
    }

    .bottom-nav {
        display: none;
    }

    .nav-desktop {
        display: flex;
        flex-wrap: nowrap;
    }

    .site-footer {
        display: block;
        margin-top: 1rem;
        padding-bottom: max(2rem, env(safe-area-inset-bottom));
    }

    .main {
        padding: 1.5rem 0 2.5rem;
    }

    h1 { font-size: 1.7rem; }

    .card {
        padding: 1.25rem 1.4rem;
    }

    .page-header {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
    }

    .page-actions {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .page-actions .btn {
        width: auto;
    }

    .grid-2 {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.85rem;
    }

    .grid-stats {
        gap: 0.75rem;
        flex-wrap: nowrap; /* keep four boxes on one row on PC */
    }

    .grid-stats .stat {
        flex: 1 1 0;
        min-width: 0;
        max-width: none;
    }

    .stat {
        text-align: center;
        padding: 0.85rem 0.5rem;
    }

    .stat strong { font-size: 1.45rem; }
    .stat span {
        font-size: 0.8rem;
        text-transform: none;
        letter-spacing: 0;
        white-space: nowrap;
    }

    .form-actions {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    .form-actions .btn {
        width: auto;
    }

    .form-actions-sticky {
        position: static;
        margin: 1.25rem 0 0;
        padding: 0;
        background: transparent;
        border: none;
        border-top: none;
        box-shadow: none;
        backdrop-filter: none;
        border-radius: 0;
    }

    .hide-on-phone {
        display: revert !important;
    }
    .show-phone-only {
        display: none !important;
    }
    /* page-actions uses flex — restore when hide-on-phone is on desktop */
    .page-actions.hide-on-phone {
        display: flex !important;
    }
    .user-strip .hide-on-phone {
        display: inline !important;
    }
    span.badge.hide-on-phone {
        display: inline-block !important;
    }

    /* Show tables on larger screens; keep cards as primary on phone */
    .list-stack-mobile-only {
        display: none;
    }

    .table-wrap {
        display: block;
    }

    .hide-sm { display: table-cell; }
    .show-sm { display: none; }
    .desktop-only { display: block !important; }

    .login-page {
        align-items: center;
        padding: 2rem;
    }

    .login-card {
        padding: 1.75rem 1.6rem;
        box-shadow: var(--shadow-lg);
    }

    .section-head {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

/* Desktop PC: wider workspace so list tables are not cramped */
@media (min-width: 960px) {
    :root {
        --max-w: 78rem; /* ~1248px */
    }
}

/* Large / wide monitors */
@media (min-width: 1280px) {
    :root {
        --max-w: 90rem; /* ~1440px */
    }
}

/* Extra-wide monitors */
@media (min-width: 1600px) {
    :root {
        --max-w: 100rem; /* ~1600px */
    }
}

/* Prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .btn:active,
    a.list-card:active,
    .type-card:active {
        transform: none;
    }
}

/* Landscape phones: slightly tighter bottom nav labels */
@media (max-height: 420px) and (orientation: landscape) {
    .bottom-nav a span:not(.nav-icon) {
        display: none;
    }
    .bottom-nav {
        min-height: 3.25rem;
    }
    body {
        padding-bottom: calc(3.25rem + env(safe-area-inset-bottom, 0px));
    }
    .form-actions-sticky {
        bottom: calc(3.25rem + env(safe-area-inset-bottom, 0px));
    }
}