/* ============================================================
   Jay Ess Unity — Field Verification System · design system
   Palette : Brand Blue (primary, from the "J") · Brand Orange
             (accent, from the "S") · Cool paper background
   Type    : "Sora" (display) + "Inter" (body)
   Shell   : top app bar + desktop sidebar + mobile bottom tabs
   NOTE    : all component colours read the --fv-* / brand variables
             below — change the brand here and the whole app follows.
   ============================================================ */

:root {
    --fv-bg: #f3f6fc;            /* cool paper with a faint blue cast */
    --fv-card: #ffffff;
    --fv-ink: #16213a;           /* deep navy-charcoal text */
    --fv-muted: #64708f;
    --fv-border: #dde5f2;
    --fv-primary: #1d5ae0;       /* Jay Ess blue (the "J") */
    --fv-primary-dark: #1743ae;
    --fv-primary-soft: #e9f1fe;
    --fv-accent: #f7801e;        /* Jay Ess orange (the "S") */
    --fv-accent-dark: #e4610b;
    --fv-ring: rgba(29, 90, 224, .30);
    --fv-radius: 1rem;

    /* Public aliases (same values) — prefer these in new markup. */
    --primary-color: var(--fv-primary);
    --primary-dark: var(--fv-primary-dark);
    --primary-light: var(--fv-primary-soft);
    --secondary-color: var(--fv-accent);
    --accent-color: var(--fv-accent);
    --background-color: var(--fv-bg);
    --card-color: var(--fv-card);
    --text-color: var(--fv-ink);
    --muted-color: var(--fv-muted);
    --border-color: var(--fv-border);
}

html { -webkit-tap-highlight-color: transparent; }

body {
    background-color: var(--fv-bg);
    color: var(--fv-ink);
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

h1, h2, h3, .font-display {
    font-family: 'Sora', 'Inter', ui-sans-serif, system-ui, sans-serif;
    letter-spacing: -.01em;
}

/* ---------- app shell ---------- */

.page-content {
    padding-top: 4.5rem;      /* clears the fixed top bar */
    padding-bottom: 6.5rem;   /* clears the mobile tab bar */
    min-height: 100vh;
    /* dvh tracks the phone's shrinking/growing browser chrome; the vh above stays as the fallback. */
    min-height: 100dvh;
}

@media (min-width: 768px) {
    .page-content {
        margin-left: 16.5rem; /* clears the sidebar */
        padding-bottom: 3rem;
    }
}

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

/* ---------- components ---------- */

.card {
    background: var(--fv-card);
    border: 1px solid var(--fv-border);
    border-radius: var(--fv-radius);
    box-shadow: 0 1px 2px rgba(30, 34, 53, .04);
}

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    border-radius: .75rem; font-weight: 600; font-size: .875rem;
    padding: .625rem 1rem; transition: all .15s ease; white-space: nowrap;
}
.btn:focus-visible { outline: 2px solid var(--fv-ring); outline-offset: 2px; }
.btn-primary { background: var(--fv-primary); color: #fff; }
.btn-primary:hover { background: var(--fv-primary-dark); }
.btn-primary:active { transform: scale(.98); }
.btn-secondary { background: #fff; border: 1px solid var(--fv-border); color: var(--fv-ink); }
.btn-secondary:hover { background: #f1f3fa; }
.btn-ghost { color: var(--fv-muted); }
.btn-ghost:hover { background: #eceffb; color: var(--fv-ink); }
.btn-accent { background: var(--fv-accent); color: #fff; }
.btn-accent:hover { background: var(--fv-accent-dark); }
.btn-danger { background: #fee2e2; color: #b91c1c; }
.btn-danger:hover { background: #fecaca; }
.btn-sm { padding: .4rem .7rem; font-size: .8rem; border-radius: .6rem; }

.input, select.input, textarea.input {
    width: 100%; background: #fff; border: 1px solid var(--fv-border);
    border-radius: .75rem; padding: .65rem .85rem; font-size: .95rem; color: var(--fv-ink);
}
.input:focus { outline: none; border-color: var(--fv-primary); box-shadow: 0 0 0 3px var(--fv-ring); }
.input[readonly] { background: #f6f7fc; color: var(--fv-muted); }

/* Safari on iOS zooms the whole page when a field it is focusing is under 16px — and it does not
   zoom back out afterwards, so the agent is left sideways-scrolling a form. 16px is the threshold,
   not a preference; below 768px it wins over the smaller sizes pages set with text-sm / !text-xs. */
@media (max-width: 767px) {
    .input, select.input, textarea.input,
    input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
    input[type="password"], input[type="number"], input[type="search"],
    input[type="date"], input[type="time"], input[type="datetime-local"],
    select, textarea {
        font-size: 16px;
    }
}

/* intl-tel-input wraps every .phone-input in a div.iti that ships as inline-block, which collapses
   the field to its content width instead of filling the grid cell its siblings fill. */
.iti { width: 100%; }

.label { display: block; font-size: .7rem; font-weight: 700; color: var(--fv-muted);
         letter-spacing: .06em; margin-bottom: .35rem; text-transform: uppercase; }

.field-error { color: #dc2626; font-size: .75rem; margin-top: .25rem; }

/* The read-only "label above value" rows across job detail, report review and the scan data sheet
   carry emails, PANs, loan accounts and addresses — single unbreakable tokens that ran out past the
   card edge in a narrow column on a phone. break-word only breaks a token that would overflow
   anyway, so ordinary values still wrap between words as before. */
dd { overflow-wrap: break-word; }

.badge { display: inline-flex; align-items: center; gap: .25rem;
         padding: .2rem .6rem; border-radius: 999px; font-size: .7rem; font-weight: 600; }

/* stat tiles on the dashboards */
.stat {
    border-radius: var(--fv-radius); padding: 1rem 1.1rem; color: #fff;
    position: relative; overflow: hidden; box-shadow: 0 6px 18px rgba(30, 34, 53, .10);
}
.stat .num { font-size: 1.9rem; font-weight: 700; line-height: 1.1; font-family: 'Sora', sans-serif; }
.stat .cap { font-size: .75rem; opacity: .9; font-weight: 500; }
.stat i.bg-icon { position: absolute; right: -.5rem; bottom: -.75rem; font-size: 4rem; opacity: .16; }

/* sidebar links */
.nav-item {
    display: flex; align-items: center; gap: .75rem;
    margin: .125rem .75rem; padding: .6rem .85rem;
    border-radius: .75rem; font-size: .875rem; color: #414868;
    transition: background .12s ease;
}
.nav-item:hover { background: #eceffb; }
.nav-item.active { background: var(--fv-primary-soft); color: var(--fv-primary-dark); font-weight: 600; }
.nav-item i { font-size: 1.05rem; width: 1.25rem; text-align: center; }
.nav-group { padding: 1rem 1.5rem .35rem; font-size: .65rem; font-weight: 700;
             letter-spacing: .1em; text-transform: uppercase; color: #9aa0bd; }

/* mobile bottom tabs */
.tab-item { display: flex; flex-direction: column; align-items: center; gap: .15rem;
            flex: 1; padding: .5rem 0 .35rem; font-size: .65rem; font-weight: 600;
            color: #8b90ad; }
.tab-item i { font-size: 1.3rem; line-height: 1; }
.tab-item.active { color: var(--fv-primary); }

/* tables — horizontal scroll on small screens instead of squeezing */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap table { min-width: 44rem; }
.table-wrap table thead th { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; }

/* progress bar inside job cards */
.meter { height: .35rem; border-radius: 999px; background: #e6e9f6; overflow: hidden; }
.meter > div { height: 100%; border-radius: 999px;
               background: linear-gradient(90deg, var(--fv-primary), #5b8def); }

/* audit timeline */
.timeline { position: relative; padding-left: 1.6rem; }
.timeline::before { content: ''; position: absolute; left: .45rem; top: .35rem; bottom: .35rem;
                    width: 2px; background: var(--fv-border); }
.timeline .node { position: relative; padding-bottom: 1.1rem; }
.timeline .node::before { content: ''; position: absolute; left: -1.36rem; top: .3rem;
                          width: .7rem; height: .7rem; border-radius: 999px;
                          background: var(--fv-primary); box-shadow: 0 0 0 3px #fff; }

/* drawer scrim */
#scrim { position: fixed; inset: 0; background: rgba(30, 34, 53, .45); z-index: 25;
         opacity: 0; pointer-events: none; transition: opacity .2s ease; }
#scrim.show { opacity: 1; pointer-events: auto; }

/* top progress bar */
#fv-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0;
    background: linear-gradient(90deg, var(--fv-primary), var(--fv-accent)); z-index: 60;
    border-radius: 0 2px 2px 0; opacity: 0; transition: width .25s ease, opacity .3s ease; }
#fv-progress.active { opacity: 1; }

/* toasts */
#fv-toasts { position: fixed; top: 4.25rem; right: 1rem; left: 1rem; z-index: 55;
    display: flex; flex-direction: column; gap: .5rem; align-items: flex-end; pointer-events: none; }
@media (min-width: 640px) { #fv-toasts { left: auto; width: 24rem; } }
.fv-toast { pointer-events: auto; width: 100%; display: flex; align-items: flex-start; gap: .6rem;
    background: #fff; border: 1px solid var(--fv-border); border-radius: .9rem;
    box-shadow: 0 8px 24px rgba(30, 34, 53, .14); padding: .8rem 1rem; font-size: .875rem;
    animation: fv-toast-in .25s ease; }
.fv-toast.success { border-left: 4px solid var(--fv-primary); }
.fv-toast.error { border-left: 4px solid #dc2626; }
@keyframes fv-toast-in { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }
.fv-toast.hide { opacity: 0; transform: translateY(-6px); transition: all .3s ease; }

/* pagination */
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: .75rem; margin-top: 1rem; font-size: .8rem; color: var(--fv-muted); }
.pager .pages { display: flex; gap: .25rem; flex-wrap: wrap; }
.pager a, .pager span.pg { min-width: 2.1rem; height: 2.1rem; display: inline-flex; align-items: center;
    justify-content: center; padding: 0 .5rem; border-radius: .6rem; border: 1px solid var(--fv-border);
    background: #fff; font-weight: 600; color: var(--fv-ink); }
.pager a:hover { background: #eceffb; }
.pager .current { background: var(--fv-primary); border-color: var(--fv-primary); color: #fff; }
.pager .disabled { opacity: .4; pointer-events: none; }

/* photo grid */
.shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
@media (min-width: 640px) { .shots { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.shots figure { border: 1px solid var(--fv-border); border-radius: .75rem; overflow: hidden; background: #fff; }
.shots img { width: 100%; height: 7rem; object-fit: cover; display: block; }
.shots figcaption { font-size: .68rem; color: var(--fv-muted); padding: .35rem .5rem; }

@media print {
    header, nav, .no-print { display: none !important; }
    .page-content { margin: 0 !important; padding: 0 !important; }
}

/* Printing the tele-calling worksheet on its own.
   Everything around it is screen furniture — the pinned AI Scan Data panel, the OTP controls, the step
   chips, the Next / Back buttons. Printing carried all of it, so a caller who wanted the tele sheet got
   a stack of pages to sort through. Set on <body> only for the duration of the print. */
@media print {
    body.printing-tele aside,
    body.printing-tele #tele-otp,
    body.printing-tele #tele-stepper,
    body.printing-tele [data-tele-next],
    body.printing-tele [data-tele-back],
    body.printing-tele button[type="submit"] { display: none !important; }
    body.printing-tele [data-step] { break-inside: auto; page-break-inside: auto; }
    body.printing-tele .card { border: 1px solid #999 !important; box-shadow: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------------------------------------------------------------------------
   AUTO-SAVE INDICATOR
   A worksheet that saves itself has to SAY so, continuously. Without this the
   screen is indistinguishable from one that is quietly losing everything, and
   the only rational response to that is to keep pressing Save — which is the
   habit auto-save exists to retire. Pinned bottom-left, out of the way of the
   toasts top-right and of the sticky action bars at the bottom of the sheets.
   --------------------------------------------------------------------------- */
.fv-autosave {
    /* Below md the bottom tab bar owns the foot of the screen (~3.5rem plus the home indicator), and
       this pill sits above it at z-40 — parked at bottom:.75rem it covered the Home tab on exactly
       the two screens that auto-save. Clear the bar; the md rule below drops it back down, where
       there is no tab bar and the sidebar is what has to be cleared instead. */
    position: fixed; left: .75rem; z-index: 40;
    bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px));
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .35rem .7rem; border-radius: 999px;
    font-size: .72rem; font-weight: 600; line-height: 1.4;
    background: #fff; color: var(--fv-muted);
    border: 1px solid var(--fv-border); box-shadow: 0 2px 10px rgba(30, 34, 53, .08);
    max-width: calc(100vw - 1.5rem);
}
.fv-autosave[data-state="saving"] { color: var(--fv-primary); border-color: #cfe0fc; }
.fv-autosave[data-state="saved"]  { color: #047857; border-color: #a7f3d0; background: #ecfdf5; }
.fv-autosave[data-state="dirty"]  { color: #b45309; border-color: #fde68a; background: #fffbeb; }
.fv-autosave[data-state="error"]  { color: #b91c1c; border-color: #fecaca; background: #fef2f2; }
.fv-autosave-spin { animation: fv-autosave-spin 1s linear infinite; display: inline-block; }
@keyframes fv-autosave-spin { to { transform: rotate(360deg); } }
@media (min-width: 768px) { .fv-autosave { left: 17.5rem; bottom: .75rem; } }