/* =====================================================================
   HOOLA FOS — MOBILE APP UI (agent + manager phone screens)
   Presentation only: applies to elements marked .app-view / .app-* and never
   touches the admin desktop portal. Plain (unlayered) CSS, so it wins over the
   Tailwind utility classes still present in the markup.
   ===================================================================== */

:root {
    /* Brand: Hoola Health violet, on a faintly violet-tinted ground */
    --ground: #F4F2F8;
    --surface: #FFFFFF;
    --surface-2: #ECE8F4;          /* one tone step below surface, for fields and inset areas */
    --surface-3: #E1DBEE;
    --ink: #1B1530;
    --ink-2: #4A4360;
    --ink-3: #6E6787;              /* secondary notes only */
    --accent: #5B45A0;
    --accent-press: #4A378A;
    --accent-soft: #E7E1F5;
    --on-accent: #FFFFFF;

    /* Status meanings, used for pitch / outcome only */
    --hot: #C2410C;   --hot-soft: #FDE7DC;
    --warm: #A16207;  --warm-soft: #FBF0D4;
    --cold: #1D4ED8;  --cold-soft: #E0E9FD;
    --ok: #15803D;    --ok-soft: #DDF2E3;
    --danger: #B91C1C;

    --radius-card: 22px;
    --radius-field: 14px;
    --tabbar-h: 68px;
    --font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* The page ground; the admin desktop portal paints its own background over it */
body { background: var(--ground); }
.app-login, .app-tabbar { font-family: var(--font); }

/* Anything the app hides stays hidden, whatever these styles say */
.app-view .hidden, .app-view.hidden, .app-tabbar.hidden { display: none !important; }

/* ---------- Screen frame ---------- */
.app-view {
    max-width: 480px;
    margin: 0 auto;
    padding: 8px 16px calc(var(--tabbar-h) + 32px + env(safe-area-inset-bottom));
    font-family: var(--font);
    color: var(--ink);
}

/* Top bar: back control + screen title */
.app-back {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 40px;
    padding: 0 14px 0 6px;
    margin: 4px 0 10px -6px;
    border-radius: 999px;
    color: var(--accent);
    font-weight: 600;
    font-size: 15px;
    background: transparent;
    transition: background-color .15s ease, transform .1s ease;
}
.app-back:active { background: var(--accent-soft); transform: scale(.97); }
.app-back svg { width: 22px; height: 22px; }

.app-title {
    font-size: 28px !important;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--ink);
    margin: 0 0 18px !important;
}

/* ---------- Cards / forms ---------- */
.app-view form,
.app-card {
    background: var(--surface) !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: var(--radius-card) !important;
    padding: 20px !important;
}

.app-view hr { border: 0; height: 4px; margin: 0; }

/* Labels: readable sentence case */
.app-view label.block {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--ink-2) !important;
    margin-bottom: 8px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* Fields */
.app-view input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
.app-view select,
.app-view textarea {
    width: 100%;
    background-color: var(--surface-2) !important;
    border: 2px solid transparent !important;
    border-radius: var(--radius-field) !important;
    color: var(--ink) !important;
    font-family: var(--font);
    font-size: 16px;
    font-weight: 500;
    min-height: 52px;
    padding: 12px 14px !important;
    box-shadow: none !important;
    transition: border-color .15s ease, background-color .15s ease;
}
.app-view textarea { min-height: 88px; line-height: 1.5; }
.app-view input::placeholder, .app-view textarea::placeholder { color: var(--ink-3); opacity: 1; }
.app-view input:focus, .app-view select:focus, .app-view textarea:focus {
    outline: none;
    border-color: var(--accent) !important;
    background-color: var(--surface) !important;
    --tw-ring-shadow: 0 0 #0000 !important;
}
.app-view input:disabled, .app-view select:disabled { opacity: .55; }
.app-view .readonly-field, .app-view [readonly] {
    background-color: var(--ground) !important;
    color: var(--ink-2) !important;
    font-size: 15px !important;
}

/* Selection controls as tappable chips */
.app-view label:has(> input[type="checkbox"]),
.app-view label:has(> input[type="radio"]) {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--ink);
    font-size: 15px;
    font-weight: 500;
    transition: background-color .15s ease, color .15s ease, transform .1s ease;
}
.app-view label:has(> input[type="checkbox"]:checked),
.app-view label:has(> input[type="radio"]:checked) {
    background: var(--accent);
    color: var(--on-accent);
}
.app-view label:has(> input:checked) .text-blue-600 { color: var(--on-accent) !important; }
.app-view label:has(> input[type="checkbox"]):active,
.app-view label:has(> input[type="radio"]):active { transform: scale(.97); }
.app-view input[type="checkbox"], .app-view input[type="radio"] { accent-color: var(--accent); }
.app-view label:has(> input:checked) input { accent-color: #fff; }

/* Chip groups lose their boxed backgrounds */
.app-view .app-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}

/* ---------- Buttons ---------- */
.app-btn-primary,
.app-view button[type="submit"]:not(.app-btn-secondary) {
    background: var(--accent) !important;
    color: var(--on-accent) !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 999px !important;
    min-height: 56px;
    font-weight: 700 !important;
    font-size: 17px !important;
    letter-spacing: -0.01em;
    transition: background-color .15s ease, transform .1s ease;
}
.app-btn-primary:active,
.app-view button[type="submit"]:not(.app-btn-secondary):active { background: var(--accent-press) !important; transform: scale(.98); }
.app-btn-primary:disabled, .app-view button[type="submit"]:disabled { background: var(--surface-3) !important; color: var(--ink-3) !important; }

.app-btn-secondary {
    background: var(--surface-2) !important;
    color: var(--ink) !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 999px !important;
    min-height: 56px;
    font-weight: 700 !important;
    font-size: 17px !important;
    transition: background-color .15s ease, transform .1s ease;
}
.app-btn-secondary:active { background: var(--surface-3) !important; transform: scale(.98); }

/* Inline "Search" buttons next to a field */
.app-btn-inline {
    background: var(--ink) !important;
    color: #fff !important;
    border-radius: var(--radius-field) !important;
    min-height: 52px;
    padding: 0 18px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    flex-shrink: 0;
}
.app-btn-inline:active { transform: scale(.97); }
.app-btn-inline:disabled { background: var(--surface-3) !important; color: var(--ink-3) !important; }

/* Location / selfie action tiles */
.app-tile {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 84px;
    border: 0 !important;
    border-radius: 18px !important;
    background: var(--surface-2) !important;
    color: var(--ink) !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    transition: background-color .15s ease, transform .1s ease;
}
.app-tile svg { width: 26px; height: 26px; color: var(--accent); }
.app-tile .text-xs { font-size: 14px !important; color: var(--ink) !important; }
.app-tile:active { transform: scale(.97); background: var(--surface-3) !important; }

/* Section headings inside forms */
.app-view h3 { color: var(--ink) !important; font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }
.app-view h3 svg { width: 20px; height: 20px; color: var(--accent); }

/* Photo previews */
.app-view img.object-cover { border: 0 !important; border-radius: 18px !important; box-shadow: none !important; }
.app-retake {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent !important; border: 0 !important;
    color: var(--danger) !important; font-size: 14px !important; font-weight: 600 !important;
}
.app-retake svg { width: 16px; height: 16px; }

/* Punch panel inside onboarding forms */
.app-view [id$="-punch-panel"] { border-top: 0 !important; background: var(--ground); border-radius: 18px; padding: 16px !important; margin-top: 4px !important; }
.app-view [id$="-punch-panel"] h3 svg { color: var(--accent); }

/* Search result dropdowns float: the one place a shadow belongs */
.app-view [id$="-results"], .app-view [id$="-results-container"] {
    border: 0 !important;
    border-radius: 16px !important;
    background: var(--surface) !important;
    box-shadow: 0 12px 32px rgba(27, 21, 48, .16) !important;
}
.app-view [id$="-results"] > div, .app-view [id$="-results-container"] > div { padding: 14px 16px !important; }
.app-view [id$="-results"] > div:active, .app-view [id$="-results-container"] > div:active { background: var(--accent-soft) !important; }

/* Status text under location buttons */
.app-view [id$="location-status"] { font-size: 14px !important; font-weight: 600 !important; }

/* =====================================================================
   DASHBOARD
   ===================================================================== */
.app-home-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0 20px; }
.app-avatar {
    width: 48px; height: 48px; border-radius: 999px; flex-shrink: 0;
    background: var(--accent); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 20px;
}
.app-greeting { font-size: 24px !important; font-weight: 800 !important; letter-spacing: -0.025em; line-height: 1.15; color: var(--ink) !important; }
.app-subline { font-size: 14px; color: var(--ink-2); font-weight: 500; margin-top: 2px; display: flex; align-items: center; gap: 6px; }
.app-role {
    display: inline-block; background: var(--accent-soft) !important; color: var(--accent) !important;
    font-size: 13px !important; font-weight: 700 !important; padding: 2px 10px !important; border-radius: 999px !important;
    text-transform: lowercase !important; letter-spacing: 0 !important; margin: 0 !important;
}
.app-role::first-letter { text-transform: uppercase; }
.app-icon-btn {
    width: 44px; height: 44px; border-radius: 999px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--surface) !important; color: var(--ink-2) !important; border: 0 !important; box-shadow: none !important;
    transition: transform .1s ease, background-color .15s ease;
}
.app-icon-btn:active { transform: scale(.94); background: var(--surface-2) !important; }
.app-icon-btn svg { width: 20px; height: 20px; }

/* Today panel: the one big number */
.app-today {
    background: var(--accent);
    color: #fff;
    border-radius: 28px;
    padding: 22px 22px 18px;
    margin-bottom: 14px;
}
.app-today-top { display: flex; align-items: center; justify-content: space-between; font-size: 15px; font-weight: 600; color: rgba(255,255,255,.88); }
.app-today-count { font-size: 76px !important; font-weight: 800 !important; letter-spacing: -0.05em; line-height: 1; color: #fff !important; margin: 14px 0 4px; display: block; font-variant-numeric: tabular-nums; }
.app-today-label { font-size: 16px; font-weight: 600; color: rgba(255,255,255,.88); }
.app-today-link {
    margin-top: 18px; width: 100%;
    display: flex; align-items: center; justify-content: space-between;
    background: rgba(255,255,255,.14); color: #fff;
    border-radius: 16px; padding: 14px 16px; font-weight: 700; font-size: 15px;
    transition: background-color .15s ease, transform .1s ease;
}
.app-today-link:active { background: rgba(255,255,255,.24); transform: scale(.99); }
.app-today-link svg { width: 20px; height: 20px; }

/* Primary action: Punch Visit, full width */
.app-action-main {
    width: 100%;
    display: flex; align-items: center; gap: 16px;
    background: var(--ink); color: #fff;
    border-radius: 24px; padding: 20px;
    text-align: left;
    transition: transform .1s ease, background-color .15s ease;
}
.app-action-main:active { transform: scale(.985); background: #2a2245; }
.app-action-main .app-action-icon { background: rgba(255,255,255,.12); color: #fff; }
.app-action-main .app-action-title { color: #fff; }
.app-action-main .app-action-sub { color: rgba(255,255,255,.72); }

.app-action-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.app-action {
    display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
    background: var(--surface); color: var(--ink);
    border-radius: 22px; padding: 18px;
    text-align: left;
    transition: transform .1s ease, background-color .15s ease;
}
.app-action:active { transform: scale(.97); background: var(--surface-2); }
.app-action-icon {
    width: 46px; height: 46px; border-radius: 15px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-soft); color: var(--accent);
}
.app-action-icon svg { width: 24px; height: 24px; }
.app-action-title { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; display: block; }
.app-action-sub { font-size: 14px; color: var(--ink-2); font-weight: 500; display: block; margin-top: 2px; }
.app-action-main .app-chev { margin-left: auto; width: 22px; height: 22px; color: rgba(255,255,255,.6); }

.app-row-link {
    width: 100%; margin-top: 12px;
    display: flex; align-items: center; gap: 14px;
    background: var(--surface); color: var(--ink);
    border-radius: 22px; padding: 16px 18px; text-align: left; font-weight: 700; font-size: 16px;
    transition: transform .1s ease, background-color .15s ease;
}
.app-row-link:active { transform: scale(.985); background: var(--surface-2); }
.app-row-link .app-chev { margin-left: auto; width: 20px; height: 20px; color: var(--ink-3); }

.app-quiet-btn {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--ink-3); font-size: 14px; font-weight: 600;
    padding: 10px 14px; border-radius: 999px; background: transparent;
}
.app-quiet-btn:active { background: var(--surface-2); }
.app-quiet-btn svg { width: 16px; height: 16px; }

/* =====================================================================
   ONBOARDING MENU
   ===================================================================== */
.app-list { background: var(--surface); border-radius: var(--radius-card); overflow: hidden; }
.app-list-item {
    width: 100%;
    display: flex; align-items: center; gap: 14px;
    padding: 16px 18px; text-align: left;
    background: var(--surface); color: var(--ink);
    transition: background-color .15s ease;
}
.app-list-item + .app-list-item { box-shadow: inset 0 8px 0 -6px var(--ground); }
.app-list-item:active { background: var(--surface-2); }
.app-list-item .app-action-title { font-size: 17px; }
.app-list-item .app-chev { margin-left: auto; width: 20px; height: 20px; color: var(--ink-3); }

/* =====================================================================
   DAY REPORT / TIMELINE
   ===================================================================== */
.app-date-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    background: var(--surface) !important; border: 0 !important; box-shadow: none !important;
    border-radius: 999px !important; padding: 6px !important; margin-bottom: 14px !important;
}
.app-date-bar > span { font-size: 17px !important; font-weight: 700 !important; color: var(--ink) !important; }
.app-date-btn {
    width: 44px; height: 44px; border-radius: 999px !important;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--surface-2) !important; color: var(--ink) !important; padding: 0 !important;
}
.app-date-btn:active { transform: scale(.94); background: var(--surface-3) !important; }
.app-date-btn svg { width: 20px; height: 20px; }

.app-stats {
    background: var(--accent) !important; color: #fff !important;
    border-radius: 28px !important; padding: 20px 20px 18px !important; box-shadow: none !important;
    margin-bottom: 14px !important;
}
.app-stats-head { display: flex; align-items: baseline; justify-content: space-between; }
.app-stats-head .app-stats-title { font-size: 15px; font-weight: 600; color: rgba(255,255,255,.88); }
.app-stats-total { font-size: 15px !important; font-weight: 700 !important; background: rgba(255,255,255,.16) !important; padding: 4px 12px !important; border-radius: 999px !important; }
.app-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
.app-stat { background: rgba(255,255,255,.12); border-radius: 18px; padding: 12px; }
.app-stat-num { font-size: 34px !important; font-weight: 800 !important; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.app-stat-label { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.85); margin-top: 6px; display: flex; align-items: center; gap: 4px; }
.app-stat-label svg { width: 14px; height: 14px; }

.app-pill-btn {
    flex: 1;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 52px; border-radius: 999px !important;
    background: var(--surface) !important; color: var(--ink) !important;
    font-weight: 700 !important; font-size: 15px !important; border: 0 !important; box-shadow: none !important;
    transition: transform .1s ease, background-color .15s ease;
}
.app-pill-btn:active { transform: scale(.97); background: var(--surface-2) !important; }
.app-pill-btn svg { width: 18px; height: 18px; color: var(--accent); }

.app-timeline { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; overflow: visible !important; }
.app-timeline > ul { border: 0 !important; }
.app-timeline > ul > li + li { border-top: 0 !important; }
.app-empty { padding: 48px 16px !important; color: var(--ink-2); }
.app-empty svg { width: 40px; height: 40px; color: var(--ink-3); margin-bottom: 10px; }
.app-empty p { color: var(--ink-2) !important; font-size: 16px; }

/* Timeline items rendered by the day-report scripts */
:is(.app-view, .app-desk) .tl-item { padding: 6px 0 !important; }
:is(.app-view, .app-desk) .tl-rail { left: 21px !important; top: 52px !important; bottom: -8px !important; border-left: 2px dotted var(--surface-3) !important; width: 0 !important; }
:is(.app-view, .app-desk) .tl-row { padding: 0 !important; gap: 12px !important; }
:is(.app-view, .app-desk) .tl-dot {
    width: 44px !important; height: 44px !important; border: 0 !important; box-shadow: none !important;
    background: var(--accent-soft) !important; color: var(--accent) !important; border-radius: 15px !important;
    font-size: 13px !important; font-weight: 800 !important;
}
:is(.app-view, .app-desk) .tl-dot.tl-onboard { background: var(--ok-soft) !important; color: var(--ok) !important; }
:is(.app-view, .app-desk) .tl-dot.tl-lead { background: var(--warm-soft) !important; color: var(--warm) !important; }
:is(.app-view, .app-desk) .tl-card { background: var(--surface) !important; border: 0 !important; box-shadow: none !important; border-radius: 20px !important; padding: 16px !important; }
:is(.app-view, .app-desk) .tl-title { font-size: 17px !important; font-weight: 700 !important; color: var(--ink) !important; letter-spacing: -0.01em; }
:is(.app-view, .app-desk) .tl-time { font-family: var(--font) !important; font-size: 14px !important; font-weight: 600 !important; color: var(--ink-2) !important; font-variant-numeric: tabular-nums; }
:is(.app-view, .app-desk) .tl-cat { font-size: 14px !important; font-weight: 600 !important; color: var(--ink-2) !important; text-transform: none !important; letter-spacing: 0 !important; }
:is(.app-view, .app-desk) .tl-badge { font-size: 13px !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: 0 !important; border-radius: 999px !important; padding: 2px 10px !important; }
:is(.app-view, .app-desk) .tl-foot { border-top: 0 !important; background: var(--ground); border-radius: 14px; padding: 10px 12px !important; margin-top: 4px; }
:is(.app-view, .app-desk) .tl-status { font-size: 14px !important; font-weight: 600 !important; color: var(--ink-2) !important; }
:is(.app-view, .app-desk) .tl-pitch { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px !important; padding: 4px 10px !important; font-size: 13px !important; font-weight: 700 !important; }
:is(.app-view, .app-desk) .tl-pitch svg { width: 15px; height: 15px; }
:is(.app-view, .app-desk) .tl-pitch-hot { background: var(--hot-soft) !important; color: var(--hot) !important; }
:is(.app-view, .app-desk) .tl-pitch-warm { background: var(--warm-soft) !important; color: var(--warm) !important; }
:is(.app-view, .app-desk) .tl-pitch-cold { background: var(--cold-soft) !important; color: var(--cold) !important; }
:is(.app-view, .app-desk) .tl-lead-box { background: var(--ground) !important; border: 0 !important; border-radius: 14px !important; font-size: 14px !important; color: var(--ink) !important; }
:is(.app-view, .app-desk) .tl-lead-box div { display: flex; align-items: center; gap: 6px; }
:is(.app-view, .app-desk) .tl-lead-box svg { width: 16px; height: 16px; color: var(--ink-3); }
:is(.app-view, .app-desk) .tl-distance { font-family: var(--font) !important; background: transparent !important; border: 0 !important; box-shadow: none !important; font-size: 13px !important; font-weight: 600 !important; color: var(--ink-3) !important; }

/* Manager team picker */
.app-team-picker { background: var(--surface) !important; border: 0 !important; border-radius: var(--radius-card) !important; padding: 16px !important; }
.app-team-picker label { text-transform: none !important; letter-spacing: 0 !important; font-size: 14px !important; font-weight: 600 !important; color: var(--ink-2) !important; }

/* =====================================================================
   LOGIN
   ===================================================================== */
.app-login {
    min-height: 100dvh;
    display: flex; flex-direction: column; justify-content: space-between;
    padding: calc(40px + env(safe-area-inset-top)) 24px calc(32px + env(safe-area-inset-bottom));
    background: var(--accent);
    color: #fff;
}
.app-login-mark { background: #fff; border-radius: 28px; width: 112px; height: 112px; display: flex; align-items: center; justify-content: center; }
.app-login-mark img { width: 92px; height: auto; }
.app-login h1 { font-size: 44px !important; font-weight: 800 !important; line-height: 1.02; letter-spacing: -0.04em; color: #fff !important; margin: 36px 0 12px !important; }
.app-login p { font-size: 18px !important; line-height: 1.5; color: rgba(255,255,255,.88) !important; max-width: 22em; margin: 0 !important; }
.app-login-panel { background: #fff; border-radius: 28px; padding: 22px; color: var(--ink); }
.app-login-panel .app-login-hint { font-size: 15px; color: var(--ink-2); font-weight: 500; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.app-login-panel .app-login-hint svg { width: 18px; height: 18px; color: var(--accent); }

/* =====================================================================
   BOTTOM TAB BAR — floats above content, so it carries the one shadow
   ===================================================================== */
.app-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    display: flex; justify-content: center;
    padding: 0 12px calc(10px + env(safe-area-inset-bottom));
    pointer-events: none;
}
.app-tabbar-inner {
    pointer-events: auto;
    width: 100%; max-width: 456px;
    height: var(--tabbar-h);
    display: grid; grid-template-columns: repeat(5, 1fr);
    background: var(--surface);
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(27, 21, 48, .14), 0 2px 6px rgba(27, 21, 48, .06);
    padding: 6px;
}
.app-tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    border-radius: 18px; color: var(--ink-3);
    font-size: 12px; font-weight: 700;
    transition: color .15s ease, background-color .15s ease, transform .1s ease;
}
.app-tab svg { width: 23px; height: 23px; }
.app-tab:active { transform: scale(.94); }
.app-tab.is-active { color: var(--accent); background: var(--accent-soft); }

/* Toasts sit clear of the status bar and read in the app's face */
#custom-toast-container { font-family: var(--font); }

/* =====================================================================
   MOTION — transform/opacity only, and none for people who ask for less
   ===================================================================== */
@keyframes app-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.app-view:not(.hidden) > * { animation: app-rise .38s cubic-bezier(.2, .7, .2, 1) both; }
.app-view:not(.hidden) > *:nth-child(2) { animation-delay: .04s; }
.app-view:not(.hidden) > *:nth-child(3) { animation-delay: .08s; }
.app-view:not(.hidden) > *:nth-child(4) { animation-delay: .12s; }
.app-view:not(.hidden) > *:nth-child(5) { animation-delay: .16s; }
.app-view:not(.hidden) > *:nth-child(n+6) { animation-delay: .2s; }
#history-list > li, #manager-history-list > li { animation: app-rise .34s cubic-bezier(.2, .7, .2, 1) both; }

@media (prefers-reduced-motion: reduce) {
    .app-view:not(.hidden) > *, #history-list > li, #manager-history-list > li { animation: none; }
    .app-view *, .app-tabbar * { transition: none !important; }
}

/* ---------- Small layout pieces used by the new markup ---------- */
.app-login.hidden { display: none !important; }
.app-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.app-id-text { min-width: 0; }
.app-avatar:empty { visibility: hidden; }
.app-foot { text-align: center; margin-top: 28px; }
.app-btn-pair { display: flex; gap: 10px; margin-bottom: 16px; }
.app-btn-pair:not(:has(> :not(.hidden))) { display: none; }
.app-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: var(--surface); border-radius: var(--radius-card); }
.app-team-picker { margin-bottom: 14px; }
.app-check {
    position: absolute; top: -8px; right: -8px;
    width: 28px; height: 28px; border-radius: 999px;
    background: var(--ok); color: #fff;
    display: flex; align-items: center; justify-content: center;
}
.app-check svg { width: 16px; height: 16px; }
.app-retake { margin-top: 8px; padding: 8px 12px !important; border-radius: 999px !important; }
.app-retake:active { background: #FDE8E8 !important; }
/* The login screen is a full-bleed field: drop the page padding meant for scrolling screens */
body:has(> .app-login:not(.hidden)) { padding: 0; }

/* Timeline polish: icons in the dots, sentence-case badges, status text that wraps */
:is(.app-view, .app-desk) .tl-dot svg { width: 22px; height: 22px; }
:is(.app-view, .app-desk) .tl-badge { display: inline-block; text-transform: lowercase !important; }
:is(.app-view, .app-desk) .tl-badge::first-letter { text-transform: uppercase; }
:is(.app-view, .app-desk) .tl-foot { flex-wrap: wrap; justify-content: flex-start !important; gap: 8px !important; }
:is(.app-view, .app-desk) .tl-status { white-space: normal !important; text-align: left !important; overflow: visible !important; }

/* Taps on an icon always belong to the button or link that holds it */
.app-view button svg, .app-view a svg, .app-view label svg, .app-tabbar svg, .app-login svg { pointer-events: none; }

/* ---------- Brand logo ---------- */
.app-login-mark { width: auto; height: auto; display: inline-flex; padding: 14px 20px; border-radius: 22px; }
.app-login-mark img { width: 184px; height: auto; display: block; }
.app-appbar { display: flex; align-items: center; justify-content: space-between; padding: 6px 0 2px; }
.app-appbar-logo { height: 30px; width: auto; display: block; }
.app-home-header { padding-top: 14px; }

/* On wider screens the login keeps its phone proportions, centred on the brand colour */
body:has(> .app-login:not(.hidden)) { background: var(--accent); }
@media (min-width: 768px) {
    .app-login { max-width: 440px; margin: 0 auto; }
}

/* ---------- Update banner: a card at the top of the app, in the brand colour ---------- */
.app-update.hidden { display: none !important; }
.app-update {
    /* Floats over the screen instead of pushing it down, so full-height screens
       (login, home) never get their bottom pushed off the screen */
    position: fixed; top: 0; left: 0; right: 0; z-index: 999;
    padding: calc(10px + env(safe-area-inset-top)) 16px 0;
    font-family: var(--font);
    pointer-events: none;
}
.app-update-card { pointer-events: auto; }
/* While it shows, screens start below it (padding inside a full-height box, so no extra height) */
body:has(> #update-banner:not(.hidden)) .app-view { padding-top: calc(84px + env(safe-area-inset-top)); }
body:has(> #update-banner:not(.hidden)) .app-login { padding-top: calc(96px + env(safe-area-inset-top)); }
.app-update-card {
    max-width: 448px; margin: 0 auto;
    display: flex; align-items: center; gap: 12px;
    background: var(--ink); color: #fff;
    border-radius: 20px; padding: 12px 12px 12px 14px;
    box-shadow: 0 10px 28px rgba(27, 21, 48, .22);   /* it floats over the screen */
    animation: app-rise .38s cubic-bezier(.2, .7, .2, 1) both;
}
.app-update-icon {
    width: 40px; height: 40px; border-radius: 13px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent); color: #fff;
}
.app-update-icon svg { width: 20px; height: 20px; }
.app-update-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.app-update-text strong { font-size: 15px; font-weight: 700; }
.app-update-text span { font-size: 13px; font-weight: 500; color: rgba(255,255,255,.75); }
.app-update-btn {
    flex-shrink: 0; min-height: 40px; padding: 0 16px;
    border-radius: 999px; background: #fff; color: var(--ink);
    font-size: 15px; font-weight: 700;
    transition: transform .1s ease, background-color .15s ease;
}
.app-update-btn:active { transform: scale(.96); background: var(--accent-soft); }
.app-update svg { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .app-update-card { animation: none; } }

/* =====================================================================
   PWA INSTALL GATE — covers everything on phones running in a browser
   ===================================================================== */
.app-gate.hidden { display: none !important; }
.app-gate {
    position: fixed; inset: 0; z-index: 3000;
    background: var(--accent); color: #fff;
    overflow-y: auto;
    font-family: var(--font);
}
body:has(> .app-gate:not(.hidden)) { overflow: hidden; }
.app-gate-inner {
    min-height: 100%; max-width: 440px; margin: 0 auto;
    display: flex; flex-direction: column; justify-content: space-between; gap: 28px;
    padding: calc(40px + env(safe-area-inset-top)) 24px calc(32px + env(safe-area-inset-bottom));
}
.app-gate h1 { font-size: 38px; font-weight: 800; line-height: 1.05; letter-spacing: -0.035em; margin: 32px 0 12px; }
.app-gate-inner > div:first-child > p { font-size: 17px; line-height: 1.5; color: rgba(255,255,255,.88); margin: 0; }   /* intro only, not the panel */
.app-gate-panel { background: #fff; color: var(--ink); border-radius: 28px; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.app-gate-panel .app-btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.app-gate-panel .app-btn-primary.hidden { display: none !important; }
.app-gate-panel .app-btn-primary svg { width: 20px; height: 20px; }
.app-gate-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.app-gate-steps.hidden { display: none !important; }
.app-gate-steps li { display: flex; align-items: center; gap: 14px; font-size: 16px; line-height: 1.4; color: var(--ink); }
.app-gate-steps strong { font-weight: 700; }
.app-gate-step-icon {
    width: 44px; height: 44px; border-radius: 14px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-soft); color: var(--accent);
}
.app-gate-step-icon svg { width: 22px; height: 22px; }
.app-gate-done { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; color: var(--ok); margin: 0; }
.app-gate-done.hidden { display: none !important; }
.app-gate-done svg { width: 22px; height: 22px; }

/* Screen shown when BDE Mobile / Desktop View isn't switched on for the user (#view-access-blocked) */
.app-blocked.hidden { display: none !important; }
.app-blocked h1 { font-size: 30px; }
.app-blocked-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; padding: 13px 18px; background: var(--accent); color: var(--on-accent); font: 700 15px var(--font); border: 0; cursor: pointer; }
.app-blocked-btn svg { width: 18px; height: 18px; }