/* ServicePlatform FX2 - second visual layer on top of theme.css / fx.js (presentation only).
   Loaded after theme.css. Everything that hides or moves content is scoped under html.fx2-full / html.fx2-lite,
   which fx2.js adds only once it is running - so with JS off (or fx2.js failing) every page looks exactly as before.

   Modes (html class, chosen by fx2.js, persisted in localStorage 'sp.fx2', cycled by the round button):
     fx2-full  everything: aurora orbs, cursor spotlight, 3D tilt, tap sparks, scroll reveal, title decode ...
     fx2-lite  phones / weak devices: reveal, progress bar, page fade, title decode (no orbs / blur / tilt / sparks)
     fx2-off   prefers-reduced-motion or user choice: no decorative motion at all
   Functional mobile helpers (slide-in menu, card-style tables, back-to-top) work in every mode.
   Only transform + opacity are animated; nothing here triggers layout. */

/* ---------------------------------------------------------------- scroll progress bar */
.fx2-progress {
    position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 100;
    transform-origin: 0 50%; transform: scaleX(var(--p, 0));
    background: linear-gradient(90deg, rgb(var(--pa-rgb)), rgb(var(--pa2-rgb)), rgb(var(--pa3-rgb)));
    box-shadow: 0 0 12px rgb(var(--pa-rgb) / 0.8);
    pointer-events: none; will-change: transform; display: none;
}
html.fx2-full .fx2-progress, html.fx2-lite .fx2-progress { display: block; }

/* ---------------------------------------------------------------- drifting aurora orbs (full only) */
.fx2-orbs {
    position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; display: none;
    transform: translate3d(0, calc(var(--sy, 0) * -0.035px), 0);
}
html.fx2-full .fx2-orbs { display: block; }
.fx2-orb {
    position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, rgb(var(--o) / 0.2), transparent 64%);
    animation: fx2-drift 26s ease-in-out 2 alternate; will-change: transform;
}
.fx2-orb:nth-child(1) { --o: var(--pa-rgb);  left: -14vmax; top: -12vmax; }
.fx2-orb:nth-child(2) { --o: var(--pa2-rgb); right: -16vmax; top: 18vh; animation-duration: 33s; animation-delay: -9s; }
.fx2-orb:nth-child(3) { --o: var(--pa3-rgb); left: 18vw; bottom: -24vmax; animation-duration: 39s; animation-delay: -17s; opacity: 0.7; }
@keyframes fx2-drift {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(7vw, 5vh, 0) scale(1.12); }
    100% { transform: translate3d(-5vw, 9vh, 0) scale(0.94); }
}

/* ---------------------------------------------------------------- cursor spotlight (full + mouse only) */
.fx2-spot {
    position: fixed; left: 0; top: 0; width: 440px; height: 440px; margin: -220px 0 0 -220px; z-index: 2;
    border-radius: 50%; pointer-events: none; opacity: 0; mix-blend-mode: screen;
    background: radial-gradient(circle, rgb(var(--pa-rgb) / 0.11), transparent 66%);
    transform: translate3d(var(--x, -999px), var(--y, -999px), 0); transition: opacity 0.4s;
}
.fx2-spot.on { opacity: 1; }

/* ---------------------------------------------------------------- scroll reveal (JS removes the classes after the animation) */
html.fx2-full .fx2-rv, html.fx2-lite .fx2-rv { opacity: 0; transform: translate3d(0, 22px, 0) scale(0.985); }
html.fx2-lite .fx2-rv { transform: translate3d(0, 12px, 0); }
html.fx2-full .fx2-rv.fx2-in, html.fx2-lite .fx2-rv.fx2-in {
    opacity: 1; transform: none;
    transition: opacity 0.6s var(--ease), transform 0.75s var(--ease);
    transition-delay: calc(var(--i, 0) * 45ms);
}

/* ---------------------------------------------------------------- page leave (theme.css already animates the page in) */
html.fx2-leave .main, html.fx2-leave .standalone-wrap { opacity: 0; transition: opacity 0.15s ease-in; }

/* theme.css entrances use fill-mode "both": release the end state so hover lift, tilt and tap feedback work again */
html.fx2-on .content > *, html.fx2-on .standalone-wrap > *, html.fx2-on .stat-card, html.fx2-on .topbar, html.fx2-on .sidebar .nav-item { animation-fill-mode: backwards; }

/* ---------------------------------------------------------------- titles */
html.fx2-full .page-title {
    background: linear-gradient(100deg, var(--text) 0%, var(--pa-hi) 38%, var(--text) 62%);
    background-size: 220% 100%; -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; animation: fx2-title 7s linear 3; padding-bottom: 0.08em;
}
@keyframes fx2-title { to { background-position: -220% 0; } }

/* ---------------------------------------------------------------- status badges breathe (full) */
html.fx2-full tbody tr:nth-child(-n+8) .badge.status-Ready      { animation: fx2-glow-v 2.6s ease-in-out 2; }
html.fx2-full tbody tr:nth-child(-n+8) .badge.status-InProgress,
html.fx2-full tbody tr:nth-child(-n+8) .badge.status-RepairInProcess { animation: fx2-glow-c 2.2s ease-in-out 2; }
html.fx2-full tbody tr:nth-child(-n+8) .badge.status-WaitingForParts,
html.fx2-full tbody tr:nth-child(-n+8) .badge.status-WaitingForApproval { animation: fx2-glow-a 3s ease-in-out 2; }
@keyframes fx2-glow-v { 50% { box-shadow: 0 0 16px -2px rgba(34, 197, 94, 0.7); } }
@keyframes fx2-glow-c { 50% { box-shadow: 0 0 16px -2px rgba(245, 158, 11, 0.65); } }
@keyframes fx2-glow-a { 50% { box-shadow: 0 0 14px -2px rgba(245, 158, 11, 0.65); } }

/* ---------------------------------------------------------------- brand mark + nav glow (full) */
html.fx2-full .logo-icon { animation: fx2-breathe 4.5s ease-in-out 4; }
@keyframes fx2-breathe { 50% { box-shadow: 0 0 26px -2px rgb(var(--pa-rgb) / 0.85); } }

/* ---------------------------------------------------------------- tables: row accent on hover / press */
tbody tr td:first-child { transition: box-shadow 0.25s var(--ease); }
tbody tr:hover td:first-child, tbody tr:active td:first-child { box-shadow: inset 3px 0 0 rgb(var(--pa-rgb)); }

/* ---------------------------------------------------------------- touch: press feedback, no grey tap flash */
button, .btn, a, .nav-item, summary, label { -webkit-tap-highlight-color: transparent; }
@media (hover: none) {
    button:active, .btn:active, .nav-item:active { transform: scale(0.96); transition: transform 0.12s var(--ease); }
}

/* ---------------------------------------------------------------- tap / click sparks (full) */
.fx2-spark {
    position: fixed; left: 0; top: 0; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%;
    pointer-events: none; z-index: 200; background: rgb(var(--pa-rgb)); box-shadow: 0 0 9px rgb(var(--pa-rgb));
}
.fx2-spark[data-c="1"] { background: rgb(var(--pa2-rgb)); box-shadow: 0 0 9px rgb(var(--pa2-rgb)); }
.fx2-spark[data-c="2"] { background: rgb(var(--pa3-rgb)); box-shadow: 0 0 9px rgb(var(--pa3-rgb)); }

/* ---------------------------------------------------------------- floating controls */
.fx2-fab {
    position: fixed; z-index: 60; width: 44px; height: 44px; padding: 0; border-radius: 50%;
    display: grid; place-items: center; cursor: pointer;
    background: rgba(12, 18, 36, 0.82) !important; color: var(--accent) !important;
    border: 1px solid rgb(var(--pa-rgb) / 0.35) !important;
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.8), 0 0 18px -8px rgb(var(--pa-rgb) / 0.8) !important;
}
.fx2-fab svg { width: 20px; height: 20px; position: relative; z-index: 2; }
.fx2-top {
    left: 16px; bottom: calc(18px + env(safe-area-inset-bottom)); opacity: 0; pointer-events: none;
    transform: translate3d(0, 14px, 0) scale(0.8); transition: opacity 0.3s, transform 0.4s var(--ease-spring);
}
.fx2-top.show { opacity: 1; pointer-events: auto; transform: none; }
.fx2-top .ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.fx2-top .ring circle { fill: none; stroke-width: 2.5; }
.fx2-top .ring .bg { stroke: rgb(var(--pa-rgb) / 0.18); }
.fx2-top .ring .fg { stroke: rgb(var(--pa-rgb)); stroke-linecap: round; stroke-dasharray: 125.7; stroke-dashoffset: calc(125.7 - 125.7 * var(--p, 0)); }
.fx2-mode { right: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); }
.fx2-mode.stack { bottom: calc(70px + env(safe-area-inset-bottom)); }
.fx-sound-toggle { bottom: calc(18px + env(safe-area-inset-bottom)); }
.fx2-mode[data-m="off"] { color: var(--muted) !important; border-color: var(--border-strong) !important; }
.fx2-toast {
    position: fixed; left: 50%; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 120;
    transform: translate3d(-50%, 12px, 0); opacity: 0; pointer-events: none; white-space: nowrap;
    padding: 8px 16px; border-radius: 999px; font-size: 0.82rem; letter-spacing: 0.04em;
    background: rgba(12, 18, 36, 0.92); color: var(--text); border: 1px solid rgb(var(--pa-rgb) / 0.4);
    transition: opacity 0.25s, transform 0.35s var(--ease-spring);
}
.fx2-toast.show { opacity: 1; transform: translate3d(-50%, 0, 0); }

/* ---------------------------------------------------------------- pause everything while the tab is hidden */
html.fx-hidden .fx2-orb, html.fx-hidden .page-title, html.fx-hidden .badge, html.fx-hidden .logo-icon { animation-play-state: paused; }

/* ---------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
    .fx2-orbs, .fx2-spot, .fx2-progress { display: none !important; }
}

/* ===================================================================== MOBILE */
.fx2-burger {
    display: none; width: 44px; height: 44px; padding: 0; margin-right: 10px; flex: 0 0 auto;
    place-items: center; border-radius: 12px; cursor: pointer;
    background: rgb(var(--pa-rgb) / 0.1) !important; color: var(--accent) !important;
    border: 1px solid rgb(var(--pa-rgb) / 0.32) !important; box-shadow: none !important;
}
.fx2-burger svg { width: 22px; height: 22px; }
.fx2-burger .l1, .fx2-burger .l2, .fx2-burger .l3 { transition: transform 0.35s var(--ease), opacity 0.2s; transform-origin: 12px 12px; }
html.fx2-nav-open .fx2-burger .l1 { transform: translate3d(0, 6px, 0) rotate(45deg); }
html.fx2-nav-open .fx2-burger .l2 { opacity: 0; }
html.fx2-nav-open .fx2-burger .l3 { transform: translate3d(0, -6px, 0) rotate(-45deg); }
.fx2-backdrop { display: none; }

@media (max-width: 760px) {
    /* The sidebar leaves the page flow and slides in from the left instead of stacking above the content. */
    html.fx2-nav-ready .app-shell, html.fx2-nav-pre .app-shell { flex-direction: row; z-index: auto; } /* z auto: the sidebar must sit above the backdrop */
    html.fx2-nav-ready .sidebar, html.fx2-nav-pre .sidebar {
        position: fixed; left: 0; top: 0; bottom: 0; height: 100vh; height: 100dvh; width: min(84vw, 300px); z-index: 90;
        transform: translate3d(-104%, 0, 0); visibility: hidden;
        transition: transform 0.4s var(--ease), visibility 0s linear 0.4s;
        padding-bottom: calc(20px + env(safe-area-inset-bottom)); overscroll-behavior: contain;
    }
    html.fx2-nav-open .sidebar {
        transform: none; visibility: visible; transition: transform 0.4s var(--ease), visibility 0s;
        box-shadow: 0 0 0 1px rgb(var(--pa-rgb) / 0.2), 30px 0 80px -20px rgba(0, 0, 0, 0.9);
    }
    html.fx2-nav-ready .fx2-burger { display: grid; }
    html.fx2-nav-ready .fx2-backdrop {
        display: block; position: fixed; inset: 0; z-index: 80; background: rgba(2, 6, 16, 0.62);
        opacity: 0; pointer-events: none; transition: opacity 0.3s;
    }
    html.fx2-nav-open .fx2-backdrop { opacity: 1; pointer-events: auto; }
    html.fx2-nav-open body { overflow: hidden; }
    html.fx2-on .topbar-left { min-width: 0; display: flex; align-items: center; }
    html.fx2-on .topbar .page-title { font-size: 1.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    html.fx2-on .section-chip { display: none; }
    html.fx2-on .sidebar .nav-item { padding-top: 12px; padding-bottom: 12px; } /* thumb-sized rows */

    .content { padding-left: 14px; padding-right: 14px; padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
    .card, fieldset { padding-left: 14px; padding-right: 14px; }
    button:not(.small), .btn:not(.small), input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]), select, textarea { min-height: 44px; }
    input, select, textarea { font-size: 16px; } /* stops iOS zooming the page on focus */
    .fx2-spot { display: none; }

    /* Wide tables become stacked cards (fx2.js adds data-label to every cell). */
    table.fx2-stack, table.fx2-stack tbody, table.fx2-stack tr, table.fx2-stack td { display: block; width: 100%; }
    table.fx2-stack thead { display: none; }
    table.fx2-stack tr {
        border: 1px solid var(--border); border-radius: 14px; padding: 8px 14px; margin-bottom: 10px;
        background: var(--card2); box-shadow: var(--shadow-1);
    }
    table.fx2-stack td {
        display: flex; justify-content: space-between; align-items: center; gap: 14px;
        padding: 7px 0 !important; border: 0 !important; text-align: right; word-break: break-word;
    }
    table.fx2-stack td::before {
        content: attr(data-label); flex: 0 0 36%; text-align: left; color: var(--muted);
        font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.09em;
    }
    table.fx2-stack td:not([data-label])::before, table.fx2-stack td[data-label=""]::before { display: none; }
    table.fx2-stack td[data-label=""] { justify-content: flex-end; }
}


/* ===================================================================
   JOBS LIST + TOUCH POLISH (appended section)
   =================================================================== */
.fx2-filters { border: 1px solid var(--border); border-radius: var(--radius); background: var(--card2); }
.fx2-filters > summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px;
    min-height: 48px; padding: 8px 16px; font-weight: 700; user-select: none;
}
.fx2-filters > summary::-webkit-details-marker { display: none; }
.fx2-filters > summary::after { content: "\25BE"; margin-left: auto; color: var(--muted); transition: transform .2s var(--ease); }
.fx2-filters[open] > summary::after { transform: rotate(180deg); }
.fx2-filters-badge {
    min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; display: inline-grid; place-items: center;
    font-size: .78rem; font-weight: 800; color: #04101a; background: rgb(var(--pa-rgb));
    box-shadow: 0 0 12px rgb(var(--pa-rgb) / .5);
}
.fx2-filters-body { padding: 4px 16px 8px; display: grid; gap: 16px; }
.fx2-field label, .fx2-label { display: block; margin-bottom: 6px; }
.fx2-label { color: var(--muted); font-size: .85rem; }
.fx2-field input[type=search], .fx2-field input[type=date], .fx2-field select { width: 100%; min-height: 48px; font-size: 1rem; }
.fx2-search { min-height: 52px !important; font-size: 1.05rem !important; }
.fx2-daterow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fx2-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fx2-chip { position: relative; display: inline-flex; margin: 0; cursor: pointer; }
.fx2-chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.fx2-chip span {
    display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 16px; border-radius: 999px;
    border: 1px solid var(--border-strong); background: var(--card2); color: var(--text); font-size: .95rem;
    transition: all .18s var(--ease); -webkit-tap-highlight-color: transparent;
}
.fx2-chip span small { color: var(--muted); font-size: .78rem; }
.fx2-chip:hover span { border-color: rgb(var(--pa-rgb) / .6); }
.fx2-chip input:checked + span {
    border-color: rgb(var(--pa-rgb)); background: rgb(var(--pa-rgb) / .16); color: var(--text);
    box-shadow: 0 0 14px rgb(var(--pa-rgb) / .35);
}
.fx2-chip input:checked + span::before { content: "\2713"; font-weight: 800; color: rgb(var(--pa-rgb)); }
.fx2-chip input:focus-visible + span { box-shadow: var(--focus-ring); }
.fx2-actions { display: flex; flex-wrap: wrap; gap: 10px; padding: 8px 16px 16px; }
.fx2-btn-lg { min-height: 48px; padding: 10px 24px; font-size: 1rem; display: inline-flex; align-items: center; justify-content: center; }
.fx2-actions button.fx2-btn-lg { flex: 1 1 180px; max-width: 280px; }
.jobs-table .fx2-open { min-height: 44px; min-width: 76px; display: inline-flex; align-items: center; justify-content: center; }
.fx2-pager { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
.fx2-pager .btn { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }

@media (max-width: 760px) {
    .fx2-actions {
        position: sticky; bottom: 0; z-index: 30; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
        background-color: var(--card2); border-top: 1px solid var(--border-strong);
        border-radius: 0 0 var(--radius) var(--radius);
    }
    .fx2-actions .fx2-btn-lg { flex: 1 1 0; max-width: none !important; padding: 10px 12px; }
    .fx2-actions .fx2-export { flex: 1 1 100%; order: 3; }
    .fx2-filters-body { padding: 4px 12px 8px; }
    .fx2-pager { justify-content: center; }
    .fx2-pager .fx2-pg-nav { flex: 1 1 40%; }
    .fx2-pager .fx2-pg-num, .fx2-pager .fx2-pg-cur { min-width: 40px; padding-left: 8px; padding-right: 8px; }
    table.jobs-table.fx2-stack .fx2-open { width: 100%; }
}

@media (pointer: coarse) {
    .checkboxrow { min-height: 44px; display: flex; align-items: center; gap: 10px; }
    .checkboxrow input[type=checkbox] { width: 22px; height: 22px; accent-color: rgb(var(--pa-rgb)); }
    .btn.small, button.small { min-height: 44px; }
    select { min-height: 44px; }
}

/* =====================================================================
   FIT - every page must sit inside the screen at any width (320px phone .. ultra-wide desktop)
   ===================================================================== */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; }
body { max-width: 100%; overflow-x: clip; min-height: 100vh; min-height: 100dvh; }
img, video, canvas, svg, iframe, embed, object { max-width: 100%; }
img, video { height: auto; }
.main, .content, .card, fieldset, .grid > *, .standalone-wrap, .topbar-left { min-width: 0; }
.content { width: 100%; max-width: 1680px; margin-left: auto; margin-right: auto; }
h1, h2, h3, h4, p, li, td, th, label, a, .badge, .mono, .muted { overflow-wrap: break-word; }
table { max-width: 100%; }
/* a card holding a wide table scrolls sideways inside itself instead of stretching the page */
@media (min-width: 761px) {
    .card:has(> table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
pre, code, .mono-block { max-width: 100%; overflow-x: auto; white-space: pre-wrap; word-break: break-word; }
.page-title { font-size: clamp(1.15rem, 4.4vw, 1.8rem); }
@media (max-width: 380px) {
    /* root font stays 16px (was shrunk to 15px: hurt readability on small phones) */
    .content { padding-left: 10px; padding-right: 10px; }
    .card, fieldset { padding-left: 12px; padding-right: 12px; }
}
@media (min-width: 761px) and (max-width: 1100px) {
    .sidebar { width: 210px; }
    .content { padding-left: 18px; padding-right: 18px; }
}
@media (min-width: 1900px) {
    html { font-size: 17px; }
}
@media (orientation: landscape) and (max-height: 480px) {
    .fx2-orbs, .fx2-spot { display: none !important; }
    .topbar { padding-top: 8px; padding-bottom: 8px; }
}

/* ---- fit fixes found in QA ---- */
input, select, textarea, button { box-sizing: border-box; max-width: 100%; }
.fx2-daterow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fx2-field, .fx2-filters-body, .fx2-filters { min-width: 0; }
@media (max-width: 760px) {
    /* the three round buttons sit side by side instead of stacking, so they cover less of the page */
    .fx2-mode.stack { bottom: calc(18px + env(safe-area-inset-bottom)); right: 70px; }
    .fx2-fab, .fx-sound-toggle { width: 44px; height: 44px; }
    /* pages with a sticky Apply/Reset bar: lift the round buttons above it */
    html.fx2-has-bar .fx-sound-toggle, html.fx2-has-bar .fx2-mode, html.fx2-has-bar .fx2-mode.stack, html.fx2-has-bar .fx2-top {
        bottom: calc(96px + env(safe-area-inset-bottom));
    }
    /* the job-sheet toast sits above the lifted round buttons so neither covers the other */
    html.fx2-has-bar .js-toast { bottom: calc(150px + env(safe-area-inset-bottom)); }
}

/* =====================================================================
   PHONE COMPACT - less chrome above the content, jobs closer to the top
   ===================================================================== */
@media (max-width: 760px) {
    .topbar { padding: 8px 12px; }
    .fx2-burger { width: 44px; height: 44px; margin-right: 8px; }
    html.fx2-nav-ready .topbar .page-title { font-size: 1.1rem; }
    .content { padding-top: 10px; }
    .card { padding: 10px 12px; margin-bottom: 10px; }
    .card > form { margin: 0; }
    /* the card that only wraps stacked rows drops its own chrome - the rows are already cards */
    .card:has(> table.fx2-stack) { background: none; border: 0; box-shadow: none; padding: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
    .card:has(> table.fx2-stack)::before, .card:has(> table.fx2-stack)::after { display: none; }
    table.fx2-stack { min-width: 0 !important; width: 100%; }
    table.fx2-stack td, table.fx2-stack tbody th { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 5px 0 !important; border: 0 !important; text-align: right; position: static; background: none; }
    table.fx2-stack td.fx2-empty { display: none; }
    table.fx2-stack .fx2-v { min-width: 0; text-align: right; overflow-wrap: anywhere; }
    table.fx2-stack td::before, table.fx2-stack tbody th::before { content: attr(data-label); flex: 0 0 34%; text-align: left; color: var(--muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.09em; }
    table.fx2-stack td[data-label=""]::before { display: none; }

    /* Jobs list: one compact 5-line card per job instead of 9 label/value rows */
    table.jobs-table.fx2-stack tr {
        display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 10px; row-gap: 2px; align-items: center;
        grid-template-areas: "no tok st" "cust cust cust" "mob mob svc" "reg reg udh" "act act act";
        padding: 10px 12px;
    }
    table.jobs-table.fx2-stack td { display: block; padding: 0 !important; text-align: left; }
    table.jobs-table.fx2-stack td::before { display: none; }
    table.jobs-table.fx2-stack td .fx2-v { text-align: left; }
    /* Columns are matched by class, not by the header text: the header is translated (EN / Hindi). */
    table.jobs-table.fx2-stack td.col-no   { grid-area: no; color: var(--muted); font-size: 0.8rem; }
    table.jobs-table.fx2-stack td.col-tok  { grid-area: tok; font-weight: 700; letter-spacing: 0.04em; }
    table.jobs-table.fx2-stack td.col-st   { grid-area: st; justify-self: end; }
    table.jobs-table.fx2-stack td.col-cust { grid-area: cust; font-size: 1.05rem; font-weight: 600; margin-top: 4px; }
    table.jobs-table.fx2-stack td.col-mob  { grid-area: mob; color: var(--muted); font-size: 0.9rem; }
    table.jobs-table.fx2-stack td.col-svc  { grid-area: svc; justify-self: end; color: var(--muted); font-size: 0.9rem; }
    table.jobs-table.fx2-stack td.col-reg  { grid-area: reg; color: var(--muted); font-size: 0.8rem; }
    table.jobs-table.fx2-stack td.col-due  { grid-area: udh; justify-self: end; color: var(--warn); font-weight: 600; }
    table.jobs-table.fx2-stack td.col-act  { grid-area: act; margin-top: 8px; }
    table.jobs-table.fx2-stack td.col-act .btn { display: flex; width: 100%; justify-content: center; align-items: center; min-height: 44px; }
    .fx2-pager { margin-top: 4px; }
}

@media (max-width: 760px) {
    table.fx2-stack td.fx2-empty, table.jobs-table.fx2-stack td.fx2-empty { display: none !important; }
    /* the filter panel is already a bordered box - drop the card around it */
    .card:has(> form > .fx2-filters), .card:has(> .fx2-filters) { background: none; border: 0; box-shadow: none; padding: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
    .card:has(> form > .fx2-filters)::before, .card:has(> form > .fx2-filters)::after { display: none; }
}

/* Phone menu, first paint: the inline head script adds fx2-nav-pre on phones so the sidebar is already off-screen
   before fx2.js runs (no flash of the stacked menu). It is dropped again after 3s if fx2.js never took over. */
@media (max-width: 760px) {
    html.fx2-nav-pre .sidebar { transition: none; }
    html.fx2-nav-pre .section-chip { display: none; }
}

/* =====================================================================
   JOBS FILTERS ON DESKTOP - compact: search + dates + sort share one row, chips are slimmer, so even with the panel
   open the job list stays on screen (the panel itself starts collapsed, see Pages/Jobs/Index.cshtml)
   ===================================================================== */
@media (min-width: 900px) {
    .card:has(> form > .fx2-filters) { padding: 8px 10px; margin-bottom: 12px; }
    .fx2-filters > summary { min-height: 44px; padding-top: 0; padding-bottom: 0; }
    .fx2-filters-body { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px 14px; padding: 4px 14px 6px; }
    .fx2-filters-body > :nth-child(1) { grid-column: span 5; order: 1; }  /* search */
    .fx2-filters-body > :nth-child(2) { grid-column: span 4; order: 2; }  /* from / to */
    .fx2-filters-body > :nth-child(6) { grid-column: span 3; order: 3; }  /* sort */
    .fx2-filters-body > :nth-child(3), .fx2-filters-body > :nth-child(4) { grid-column: span 12; order: 4; }
    .fx2-filters-body > :nth-child(5) { grid-column: span 12; order: 5; }
    .fx2-filters-body .fx2-label, .fx2-filters-body label { margin-bottom: 4px; font-size: 0.78rem; }
    .fx2-filters-body input[type=search], .fx2-filters-body input[type=date], .fx2-filters-body select { min-height: 44px; }
    .fx2-search { min-height: 44px !important; font-size: 1rem !important; }
    .fx2-filters-body .fx2-chips { gap: 6px; }
    .fx2-actions { padding: 6px 14px 10px; flex-wrap: nowrap; }
    .fx2-actions .fx2-btn-lg, .fx2-actions button.fx2-btn-lg { flex: 0 0 auto; min-height: 44px; padding: 8px 22px; max-width: none; }
}
@media (min-width: 900px) and (pointer: fine) {
    .fx2-chip span { min-height: 44px; padding: 0 12px; font-size: 0.875rem; }
}

/* =====================================================================
   PHASE 4 - short menu, phone bottom bar, home tiles, jobs list cards
   (docs/UI-SIMPLIFICATION-PLAN.md; markup in Pages/Shared/_Layout.cshtml, Index, Money, More, Jobs/Index)
   ===================================================================== */
/* PC sidebar: big "+ New job", then max 6 items; "More" is a fold with the rest */
.nav-cta {
    display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; margin: 4px 0 12px;
    border-radius: 12px; font-weight: 700; font-size: 1rem; color: #04101a; background: rgb(var(--pa-rgb));
    text-decoration: none;
}
.nav-cta:hover { color: #04101a; text-decoration: none; filter: brightness(1.08); }
.nav-cta .nav-ico { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2.4; opacity: 1; }
.sidebar .nav-item { min-height: 48px; font-size: 1rem; }
.nav-more > summary { list-style: none; cursor: pointer; }
.nav-more > summary::-webkit-details-marker { display: none; }
.nav-more > summary::after { content: "\25BE"; margin-left: auto; color: var(--muted); transition: transform .2s var(--ease); }
.nav-more[open] > summary::after { transform: rotate(180deg); }
.nav-more-list { display: grid; gap: 2px; padding: 2px 0 6px 12px; }
.nav-sub {
    display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 12px; border-radius: 10px;
    color: #c5d0de; font-size: .92rem; text-decoration: none;
}
.nav-sub:hover { background: rgb(var(--pa-rgb) / 0.06); color: #fff; text-decoration: none; }
.nav-sub.active { color: var(--accent); background: rgb(var(--pa-rgb) / 0.12); }
.nav-sub .nav-ico { width: 18px; height: 18px; }
.sidebar-footer .lang-toggle { margin-bottom: 6px; }
.sidebar-who { overflow-wrap: anywhere; }

/* Phone bottom tab bar: 5 tabs, icon + word, 56px tall (48px+ targets) */
.bottom-bar { display: none; }
@media (max-width: 760px) {
    html.has-bbar .fx2-burger, html.has-bbar.fx2-nav-ready .fx2-burger { display: none; }
    .bottom-bar {
        display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
        padding: 0 4px env(safe-area-inset-bottom); background: var(--card2); border-top: 1px solid var(--border-strong);
        box-shadow: 0 -8px 24px -12px rgba(0, 0, 0, 0.8);
    }
    .bb-item {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; min-width: 48px;
        padding: 4px 2px; color: var(--muted); font-size: .8rem; font-weight: 600; line-height: 1.15; text-align: center; text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }
    .bb-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .bb-item svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .bb-item:hover { text-decoration: none; color: var(--text); }
    .bb-item.active { color: var(--accent); }
    .bb-item.bb-new { color: #04101a; }
    .bb-item.bb-new svg { width: 40px; height: 30px; padding: 3px 8px; border-radius: 999px; background: rgb(var(--pa-rgb)); stroke-width: 2.6; }
    .bb-item.bb-new span { color: var(--text); }
    /* room for the bar under the content; lift the round buttons and the sticky filter bar above it */
    html.has-bbar .content { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }
    html.has-bbar .fx2-actions { bottom: calc(56px + env(safe-area-inset-bottom)); }
    html.has-bbar .fx2-top, html.has-bbar .fx2-mode, html.has-bbar .fx2-mode.stack, html.has-bbar .fx-sound-toggle { bottom: calc(70px + env(safe-area-inset-bottom)); }
    html.has-bbar.fx2-has-bar .fx2-top, html.has-bbar.fx2-has-bar .fx2-mode, html.has-bbar.fx2-has-bar .fx2-mode.stack, html.has-bbar.fx2-has-bar .fx-sound-toggle { bottom: calc(150px + env(safe-area-inset-bottom)); }
    html.has-bbar .fx2-toast { bottom: calc(130px + env(safe-area-inset-bottom)); }
}
@media print { .bottom-bar, .nav-cta { display: none !important; } }

/* Home + Money tiles */
.home-page { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); align-items: start; }
.home-page > .home-alerts, .home-page > .home-new { grid-column: 1 / -1; }
.home-alerts { display: flex; flex-wrap: wrap; gap: 8px; }
.home-alert {
    display: inline-flex; align-items: center; min-height: 48px; padding: 8px 16px; border-radius: 12px; font-weight: 700;
    color: #1a1200; background: rgb(var(--st-money)); text-decoration: none;
}
.home-alert:hover { color: #1a1200; text-decoration: none; filter: brightness(1.08); }
.home-new { display: flex; align-items: center; justify-content: center; min-height: 56px; font-size: 1.15rem; font-weight: 700; }
.jobs-new { margin-bottom: 10px; }
.home-tile { display: grid; gap: 8px; padding: 16px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--card2); min-width: 0; }
.home-tile.money { border-color: rgb(var(--st-money) / 0.55); }
.home-main { display: grid; gap: 2px; color: inherit; text-decoration: none; min-height: 48px; }
.home-main:hover { text-decoration: none; color: inherit; }
.home-label { color: var(--muted); font-size: .95rem; font-weight: 600; }
.home-value { font-size: 1.75rem; font-weight: 700; line-height: 1.2; color: var(--text); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.home-tile.money .home-value { color: rgb(var(--st-money)); }
.home-sub { color: var(--muted); font-size: .9rem; }
.home-act { display: inline-flex; align-items: center; min-height: 48px; font-weight: 700; }
.home-empty { margin: 0; color: var(--muted); }
.home-empty a { display: inline-flex; align-items: center; min-height: 48px; margin-left: 6px; font-weight: 700; }
.home-today { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.home-today a {
    display: grid; justify-items: center; gap: 2px; min-height: 64px; padding: 8px 4px; border-radius: 10px;
    border: 1px solid var(--border); color: var(--text); text-decoration: none;
}
.home-today a:hover { text-decoration: none; border-color: rgb(var(--pa-rgb) / .6); }
.home-today b { font-size: 1.5rem; line-height: 1.2; }
.home-today span { color: var(--muted); font-size: .85rem; }
.home-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.home-rows li { display: flex; justify-content: space-between; gap: 10px; }
.home-rows li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) {
    .home-page { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .home-tile { padding: 12px 14px; }
}

/* /More page */
.more-lang { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.more-lang-label { font-weight: 700; }
.more-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.more-link {
    display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 16px; border-radius: 12px;
    border: 1px solid var(--border-strong); background: var(--card2); color: var(--text); font-size: 1rem; text-decoration: none;
}
.more-link:hover { text-decoration: none; color: var(--text); border-color: rgb(var(--pa-rgb) / .6); }
.more-link svg { width: 22px; height: 22px; flex: 0 0 auto; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Work report tabs (Daily work / History / Reports; staff: My work / History / Repair pay) */
.report-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.rt-tab {
    display: inline-flex; align-items: center; min-height: 48px; padding: 8px 16px; border-radius: 999px;
    border: 1px solid var(--border-strong); background: var(--card2); color: var(--text); font-weight: 600; text-decoration: none;
}
.rt-tab:hover { text-decoration: none; color: var(--text); border-color: rgb(var(--pa-rgb) / .6); }
.rt-tab.on { border-color: rgb(var(--pa-rgb)); background: rgb(var(--pa-rgb) / .16); }

/* Jobs list: one row of quick chips + whole-card links (token, status chip, customer, balance) */
.jobs-quick { display: flex; gap: 8px; overflow-x: auto; margin: 0 0 10px; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
.jq-chip {
    flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 48px; padding: 8px 16px; border-radius: 999px;
    border: 1px solid var(--border-strong); background: var(--card2); color: var(--text); font-weight: 600; text-decoration: none; white-space: nowrap;
}
.jq-chip:hover { text-decoration: none; color: var(--text); border-color: rgb(var(--pa-rgb) / .6); }
.jq-chip.on { border-color: rgb(var(--pa-rgb)); background: rgb(var(--pa-rgb) / .16); }
.jobs-showing { margin-bottom: 8px; font-size: .9rem; }
.job-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.job-card {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tok st" "name due" "meta meta";
    column-gap: 10px; row-gap: 4px; align-items: center; min-height: 64px; padding: 12px 14px; border-radius: 12px;
    border: 1px solid var(--border-strong); background: var(--card2); color: var(--text); text-decoration: none;
}
.job-card:hover, .job-card:focus-visible { text-decoration: none; color: var(--text); border-color: rgb(var(--pa-rgb) / .6); }
.job-card.is-closed { opacity: .8; }
.jc-tok { grid-area: tok; font-weight: 700; letter-spacing: .04em; }
.jc-st { grid-area: st; justify-self: end; }
.jc-name { grid-area: name; font-size: 1.05rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jc-due { grid-area: due; justify-self: end; color: rgb(var(--st-money)); font-weight: 700; white-space: nowrap; }
.jc-meta { grid-area: meta; color: var(--muted); font-size: .8rem; overflow-wrap: anywhere; }
.jobs-empty { margin: 8px 0; }
@media (max-width: 760px) {
    .card.jobs-results { background: none; border: 0; box-shadow: none; padding: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
    .card.jobs-results::before, .card.jobs-results::after { display: none; }
    .job-cards { grid-template-columns: minmax(0, 1fr); }
    .jc-meta { display: none; } /* phone card = 4 things only */
    .job-card { grid-template-areas: "tok st" "name due"; }
}