/* =========================================================================
   Field app — base + shell: app bar, bottom tab bar (left rail on tablets), connection banner.
   Mobile first (360–430 px phones), tablets from 768 px. Colours, spacing and type come from the
   shared tokens (_content/TicketingSystem.UI.Shared/css/tokens.css), loaded first; the look follows
   the customer portal (white cards on a light page, accent-coloured active navigation).
   Content styles: app.css. Prefix fa- keeps these apart from the portal/staff shell classes.
   ========================================================================= */

:root {
    --fa-accent-soft: #ebf3fc;          /* same as the portal's --portal-accent-soft */
    --fa-appbar-h: 52px;
    --fa-tabbar-h: 60px;
    --fa-rail-w: 216px;
    --fa-content-max: 960px;
    --fa-safe-top: env(safe-area-inset-top, 0px);
    --fa-safe-bottom: env(safe-area-inset-bottom, 0px);
    --fa-safe-left: env(safe-area-inset-left, 0px);
    --fa-safe-right: env(safe-area-inset-right, 0px);
    --fa-gutter: 12px;
    --fa-actionbar-h: 64px;
    /* Text-safe variants of the tone colours (WCAG AA 4.5:1 on white and with white text): the shared
       tones (#16a34a 3.3:1, #dc2626 4.4:1) stay for fills, borders, icons and large numbers. */
    --fa-success-strong: #15803d;
    --fa-success-stronger: #166534;
    --fa-danger-text: #b91c1c;
}

/* ---------- base -------------------------------------------------------- */
html, body {
    margin: 0;
    padding: 0;
    background: var(--ts-surface-page);
    color: var(--ts-text);
    font-family: var(--ts-font-family);
    font-size: 15px;
    line-height: 1.45;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

body { min-height: 100vh; min-height: 100dvh; overflow-x: hidden; }

a { color: var(--ts-accent-text); text-decoration: none; }
a:hover { color: var(--ts-accent-hover); }

h1 { font-size: 1.25rem; font-weight: 600; margin: 0; line-height: 1.3; }
h1:focus, h2:focus { outline: none; }

a:focus-visible,
button:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 2px solid var(--ts-accent);
    outline-offset: 2px;
}

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

/* iOS Safari zooms into inputs below 16 px; keep editors at 16 px on phones. */
@media (max-width: 767.98px) {
    input, textarea, select { font-size: 16px !important; }
}

/* ---------- shell ------------------------------------------------------- */
.fa-shell {
    min-height: 100vh;
    min-height: 100dvh;
    padding-bottom: calc(var(--fa-tabbar-h) + var(--fa-safe-bottom));
    box-sizing: border-box;
}

.fa-shell__main { min-width: 0; }

/* App bar (rendered by each page through <AppBar>): brand on the root tabs, back + title on sub-pages. */
.fa-appbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: var(--fa-appbar-h);
    padding: var(--fa-safe-top) max(8px, var(--fa-safe-right)) 0 max(8px, var(--fa-safe-left));
    background: var(--ts-surface);
    border-bottom: 1px solid var(--ts-border);
    box-sizing: border-box;
}

.fa-appbar__back,
.fa-iconbtn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: var(--ts-radius-sm);
    background: transparent;
    color: var(--ts-text);
    font-size: 1.25rem;
    cursor: pointer;
}

.fa-appbar__back:hover, .fa-iconbtn:hover { background: var(--ts-surface-page); color: var(--ts-text); }

.fa-appbar__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 44px;
    padding-left: 6px;
    font-size: 1rem;
    color: var(--ts-text);
}

.fa-appbar__app {
    font-weight: 400;
    color: var(--ts-text-muted);
    padding-left: 10px;
    border-left: 1px solid var(--ts-border);
    white-space: nowrap;
}

.fa-appbar__text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }

.fa-appbar__title {
    font-size: 1.0625rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fa-appbar__subtitle {
    font-size: 0.8125rem;
    color: var(--ts-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fa-appbar__actions { margin-left: auto; display: flex; align-items: center; gap: 4px; }

/* Phones: root tabs show the brand; their title stays for screen readers (pages greet in the content). */
@media (max-width: 767.98px) {
    .fa-appbar--root .fa-appbar__text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
}

/* Bottom tab bar on phones. */
.fa-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    display: grid;
    /* One equal column per tab, however many tabs there are (My work, Machines, Van, Activity, Me). */
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    height: calc(var(--fa-tabbar-h) + var(--fa-safe-bottom));
    padding: 0 var(--fa-safe-right) var(--fa-safe-bottom) var(--fa-safe-left);
    background: var(--ts-surface);
    border-top: 1px solid var(--ts-border);
    box-sizing: border-box;
}

.fa-tabbar__brand { display: none; }
.fa-tabbar__brand-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.fa-tabbar__brand-text strong { font-weight: 600; }
.fa-tabbar__brand-text small { color: var(--ts-text-muted); font-size: 0.8125rem; }

.fa-tab {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 44px;
    color: var(--ts-text-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.fa-tab i { font-size: 1.3rem; line-height: 1; }
.fa-tab:hover { color: var(--ts-text); text-decoration: none; }
.fa-tab.active { color: var(--ts-accent); }

.fa-tab.active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 28%;
    right: 28%;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--ts-accent);
}

.fa-tab__badge {
    position: absolute;
    top: 6px;
    left: calc(50% + 6px);
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--ts-radius-pill);
    background: var(--fa-danger-text);
    color: #ffffff;
    font-size: 0.6875rem;
    line-height: 18px;
    text-align: center;
    box-sizing: border-box;
}

.fa-main {
    width: 100%;
    max-width: var(--fa-content-max);
    margin: 0 auto;
    padding: var(--fa-gutter) max(var(--fa-gutter), var(--fa-safe-right)) var(--ts-space-5) max(var(--fa-gutter), var(--fa-safe-left));
    box-sizing: border-box;
}

.fa-main--actions { padding-bottom: calc(var(--fa-actionbar-h) + var(--ts-space-5)); }

.fa-footer {
    padding: var(--ts-space-4) var(--fa-gutter) var(--ts-space-5);
    text-align: center;
    color: var(--ts-text-muted);
    font-size: 0.75rem;
}

/* Sticky action bar for the primary next step (above the tab bar). */
.fa-actionbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--fa-tabbar-h) + var(--fa-safe-bottom));
    z-index: 25;
    display: flex;
    gap: 8px;
    padding: 8px max(var(--fa-gutter), var(--fa-safe-right)) 8px max(var(--fa-gutter), var(--fa-safe-left));
    background: var(--ts-surface);
    border-top: 1px solid var(--ts-border);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
    box-sizing: border-box;
}

.fa-actionbar > * { flex: 1 1 0; min-width: 0; }
.fa-actionbar--confirm { flex-wrap: wrap; }
.fa-actionbar__text { flex: 1 0 100% !important; margin: 0 0 4px; font-size: 0.875rem; font-weight: 600; overflow-wrap: anywhere; }
.fa-actionbar > .fa-btn--icon { flex: 0 0 48px; }

/* ---------- tablets: the tab bar becomes a left rail -------------------- */
@media (min-width: 768px) {
    :root { --fa-gutter: var(--ts-space-5); }

    .fa-shell { padding-bottom: 0; padding-left: var(--fa-rail-w); }

    .fa-tabbar {
        top: 0;
        right: auto;
        width: var(--fa-rail-w);
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 0 8px var(--ts-space-4);
        background: var(--ts-surface-subtle);
        border-top: 0;
        border-right: 1px solid var(--ts-border);
    }

    .fa-tabbar__brand {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: var(--fa-appbar-h);
        margin: 0 -8px 8px;
        padding: 0 16px;
        border-bottom: 1px solid var(--ts-border);
        background: var(--ts-surface);
        color: var(--ts-text);
        font-size: 1rem;
    }

    .fa-tab {
        flex-direction: row;
        justify-content: flex-start;
        gap: 12px;
        padding: 9px 12px;
        border-radius: var(--ts-radius-sm);
        border-left: 3px solid transparent;
        color: var(--ts-text);
        font-size: 0.9rem;
        font-weight: 400;
    }

    .fa-tab i { width: 18px; font-size: 1rem; text-align: center; color: var(--ts-text-muted); }
    .fa-tab:hover { background: rgba(0, 0, 0, 0.04); }
    .fa-tab.active { background: var(--fa-accent-soft); border-left-color: var(--ts-accent); font-weight: 600; }
    .fa-tab.active i { color: var(--ts-accent); }
    .fa-tab.active::before { display: none; }
    .fa-tab__badge { position: static; margin-left: auto; }

    .fa-appbar__brand { display: none; }
    .fa-appbar--root .fa-appbar__text { padding-left: 8px; }
    .fa-actionbar { left: var(--fa-rail-w); bottom: 0; }
}

/* ---------- connection: Blazor reconnect element + device offline -------- */
#components-reconnect-modal,
.fa-offline {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: none;
    align-items: center;
    gap: 10px;
    min-height: var(--fa-appbar-h);
    padding: var(--fa-safe-top) max(var(--fa-gutter), var(--fa-safe-right)) 0 max(var(--fa-gutter), var(--fa-safe-left));
    background: #fffbeb;
    border-bottom: 2px solid var(--ts-tone-warning);
    color: var(--ts-text);
    font-size: 0.875rem;
    font-weight: 600;
    box-sizing: border-box;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

#components-reconnect-modal > i, .fa-offline > i { color: var(--ts-tone-warning); font-size: 1.15rem; }
#components-reconnect-modal .fa-conn__msg { display: none; flex: 1 1 auto; min-width: 0; }
#components-reconnect-modal .fa-btn { display: none; min-height: 36px; padding: 0 14px; font-size: 0.875rem; }

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-retrying,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-paused,
#components-reconnect-modal.components-reconnect-resume-failed,
#components-reconnect-modal.components-reconnect-rejected { display: flex; }

#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-resume-failed { background: #fef2f2; border-bottom-color: var(--ts-tone-danger); }

#components-reconnect-modal.components-reconnect-show:not(.components-reconnect-retrying) .fa-conn__msg--show,
#components-reconnect-modal.components-reconnect-retrying .fa-conn__msg--retrying,
#components-reconnect-modal.components-reconnect-failed .fa-conn__msg--failed,
#components-reconnect-modal.components-reconnect-paused .fa-conn__msg--paused,
#components-reconnect-modal.components-reconnect-resume-failed .fa-conn__msg--resume-failed,
#components-reconnect-modal.components-reconnect-rejected .fa-conn__msg--rejected { display: block; }

#components-reconnect-modal.components-reconnect-failed [data-fa-retry],
#components-reconnect-modal.components-reconnect-paused [data-fa-resume],
#components-reconnect-modal.components-reconnect-resume-failed [data-fa-reload] { display: inline-flex; }

.fa-conn__spinner {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(217, 119, 6, 0.3);
    border-top-color: var(--ts-tone-warning);
    border-radius: 50%;
    animation: fa-spin 0.8s linear infinite;
}

#components-reconnect-modal.components-reconnect-failed .fa-conn__spinner,
#components-reconnect-modal.components-reconnect-paused .fa-conn__spinner,
#components-reconnect-modal.components-reconnect-resume-failed .fa-conn__spinner { display: none; }

html.fa-is-offline:not(.fa-is-disconnected) .fa-offline { display: flex; }

/* While disconnected nothing can be saved: dim the page and block taps (the banner stays usable). */
html.fa-is-disconnected body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(255, 255, 255, 0.45);
}

/* Offline but the circuit is still up for a moment: disable anything that saves. */
html.fa-is-offline [data-fa-online] {
    pointer-events: none;
    opacity: 0.45;
}

@keyframes fa-spin { to { transform: rotate(360deg); } }

/* Toasts (DxToastProvider, top-centre) start below the app bar so they never hide the back button
   or the title. DevExpress' toast classes are internal: this is the only place that names them. */
.dxbl-toast-portal.dxbl-toast-align-top { top: calc(var(--fa-appbar-h) + var(--fa-safe-top)); max-width: calc(100vw - 24px); }
/* The toast's close "×" is 19 px by default: give it a 44 px tap area; the negative margin keeps the toast compact. */
.dxbl-toast-portal button.dxbl-toast-close-btn { min-width: 44px; min-height: 44px; margin: -10px -10px -10px 0; }

/* Sign-in result pages (SignInLayout): light page, centred card — like the portal's login. */
.fa-signin {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ts-space-5) var(--ts-space-4);
    box-sizing: border-box;
}

.fa-signin__card {
    width: 100%;
    max-width: 420px;
    padding: var(--ts-space-6) var(--ts-space-5);
    background: var(--ts-surface);
    border: 1px solid var(--ts-border);
    border-radius: var(--ts-radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
}

.fa-signin__brand { display: flex; align-items: center; gap: 10px; margin-bottom: var(--ts-space-5); font-size: 1rem; }
.fa-signin__card h1 { font-size: 1.35rem; margin-bottom: 6px; }
.fa-signin__lead { margin: 0 0 var(--ts-space-5); color: var(--ts-text-muted); }
/* Password sign-in (PasswordSignIn / PasswordChange). 16 px inputs: iOS Safari zooms the page into smaller ones. */
.fa-signin .fa-input { font-size: 16px; }
.fa-signin__alert { margin-bottom: var(--ts-space-4); }
.fa-signin__help { margin: var(--ts-space-4) 0 0; }
.fa-signin__secondary { margin-top: var(--ts-space-2); }
.fa-signin__account {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: var(--ts-space-4);
    font-weight: 600;
    overflow-wrap: anywhere;
}
.fa-signin__account i { font-size: 1.25rem; color: var(--ts-text-muted); }

/* Blazor's unhandled-error bar. */
#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    padding: 12px 16px calc(12px + var(--fa-safe-bottom));
    background: #fffbeb;
    box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.2);
}

#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 16px; top: 10px; }