/* EWBills.TAB — mobile-first shell. Phone primary; scales up to tablet/laptop.
   This is TAB's own chrome (a top app bar + scrollable content + bottom nav),
   intentionally NOT the EWBills desktop grid shell. */

:root {
    --tab-appbar-h: 56px;
    --tab-bg: #f4f6f8;
    --tab-surface: #ffffff;
    --tab-primary: #0a5ad4;
    --tab-border: #e2e6ea;
    --tab-text: #1c2024;
    --tab-text-muted: #5b6770;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: var(--tab-bg);
    color: var(--tab-text);
    /* Match the EWBills web UI font (EWBills.Web/wwwroot/app.css) so TAB reads as the same app. */
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    -webkit-text-size-adjust: 100%;
}

.tab-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

/* Top app bar — mirrors the EWBills web header: light bar, green logo, account menu. */
.tab-appbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: var(--tab-appbar-h);
    padding: 0 12px;
    padding-top: env(safe-area-inset-top);
    background: var(--tab-surface);
    color: var(--tab-text);
    border-bottom: 1px solid var(--tab-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* Brand (logo + name) doubles as the Home link. */
.tab-appbar-home {
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
}
.tab-logo { display: block; flex: 0 0 auto; }
.tab-appbar-title { display: inline-flex; align-items: flex-start; gap: 1px; font-size: 1.2rem; line-height: 1; }
.tab-appbar-title strong { font-weight: 500; }
/* Brand green = the logo SVG fill (#96CA4F) — matches .tab-login-brandname sup so the
   EWBills TAB wordmark is identical on the login screen and in-app (MW 2026-07-15). */
.tab-appbar-title sup { font-size: 0.45em; font-weight: 700; color: #96CA4F; }

/* Account (user) button + dropdown menu. */
.tab-appbar-userbtn {
    border: none; background: transparent; color: var(--tab-text-muted);
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 8px; font-size: 1.15rem;
}
.tab-appbar-userbtn:hover { background: var(--tab-bg); color: var(--tab-text); }

.tab-usermenu-backdrop { position: fixed; inset: 0; z-index: 10000; }
.tab-usermenu {
    position: fixed; right: 10px; top: calc(var(--tab-appbar-h) - 2px);
    z-index: 10001; min-width: 240px;
    background: var(--tab-surface); border: 1px solid var(--tab-border);
    border-radius: 10px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18); overflow: hidden;
}
.tab-usermenu-head { padding: 12px 16px; border-bottom: 1px solid var(--tab-border); }
.tab-usermenu-name { font-size: 0.88rem; font-weight: 700; color: var(--tab-text); }
.tab-usermenu-email { font-size: 0.76rem; color: var(--tab-text-muted); }
.tab-usermenu-group { padding: 4px 0; border-bottom: 1px solid var(--tab-border); }
.tab-usermenu-group:last-child { border-bottom: none; }
.tab-usermenu-item {
    width: 100%; text-align: left; border: none; background: transparent;
    padding: 10px 16px; font-size: 0.88rem; color: var(--tab-text); cursor: pointer;
}
.tab-usermenu-item:hover:not(:disabled) { background: var(--tab-bg); }
.tab-usermenu-item:disabled { color: var(--tab-text-muted); cursor: default; }
.tab-usermenu-toggle { display: flex; align-items: center; justify-content: space-between; }
.tab-usermenu-state {
    font-size: 0.7rem; font-weight: 700; padding: 1px 8px; border-radius: 9px;
    background: var(--tab-bg); color: var(--tab-text-muted);
}

/* ---- Dark theme — redefine the core tokens; Telerik's own theme is swapped via JS. ---- */
html.dark {
    --tab-bg: #0f1720;
    --tab-surface: #1b2530;
    --tab-primary: #4c8dff;
    --tab-border: #2c3a47;
    --tab-text: #e6eaef;
    --tab-text-muted: #9aa7b3;
}
/* Hardcoded accent surfaces that don't ride the tokens — dark-friendly variants. */
html.dark .tab-statusbadge { background: #1d3a5c; color: #9ec5ff; }
html.dark .tab-statusbadge-attention { background: #463614; color: #f0c878; }
html.dark .tab-statusbadge-done { background: #13371f; color: #6fe39d; }
html.dark .tab-notice { background: #13371f; border-color: #2a5a3a; color: #8fe6ad; }
html.dark .tab-error { background: #3a1a1d; border-color: #6a2a2f; color: #f6a6ac; }
html.dark .tab-linkbtn { color: #6fb3ee; }
html.dark .tab-linkbtn:disabled { color: #667; }
html.dark .tab-login-footer { color: #778; }
html.dark .tab-login-footer a { color: #6fb3ee; }
html.dark .tab-success { color: #6fe39d; }
html.dark .tab-chip { background: #243240; }
html.dark .tab-chip.is-set { background: #1d3a5c; color: #9ec5ff; }
html.dark .tab-chip-warn { background: #463614; color: #f0c878; }
html.dark .tab-line--nohours { background: #2a2410; border-left-color: #b88a2a; }
html.dark .tab-missing { color: #f6a6ac; }
html.dark .tab-cal-day.has-tas { background: #1d3a5c; border-color: #2c5a8f; }
html.dark .tab-cal-day.has-tas:hover { background: #244a73; }

/* Scrollable content area */
.tab-content {
    flex: 1 1 auto;
    padding: 16px;
    overflow-y: auto;
}

.tab-h1 {
    font-size: 1.25rem;
    margin: 4px 0 16px;
}
/* The page heading is focused on navigation (FocusOnNavigate, a11y); it's not keyboard-tabbable,
   so suppress the visible focus box. */
.tab-h1:focus, .tab-h1:focus-visible { outline: none; }

.tab-card {
    background: var(--tab-surface);
    border: 1px solid var(--tab-border);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 16px;
}

.tab-card-lead {
    margin: 0 0 8px;
    font-weight: 600;
}

.tab-card-meta {
    margin: 0;
    color: var(--tab-text-muted);
    font-size: 0.9rem;
}

.tab-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Larger viewports: center the content in a phone-width column so the field layout
   stays the design target even on a laptop. */
@media (min-width: 768px) {
    .tab-content {
        width: 100%;
        max-width: 560px;
        margin: 0 auto;
    }
}

/* ---- Home dashboard tiles ----------------------------------------------- */
.tab-dash {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 18px 0 8px;
}
.tab-dash-tile {
    display: flex; flex-direction: column; gap: 2px;
    border: 1px solid var(--tab-border); border-radius: 10px;
    background: var(--tab-surface); cursor: pointer; text-align: left;
    padding: 12px 14px;
}
.tab-dash-tile:hover { background: var(--tab-bg); }
.tab-dash-tile.is-active { border-color: var(--tab-primary); box-shadow: inset 0 0 0 1px var(--tab-primary); }
.tab-dash-count { font-size: 1.6rem; font-weight: 500; line-height: 1; color: var(--tab-text); }
.tab-dash-tile.is-active .tab-dash-count { color: var(--tab-primary); }
.tab-dash-label { font-size: 0.78rem; color: var(--tab-text-muted); font-weight: 500; }

/* Completed/locked status badge (green). */
.tab-statusbadge-done { color: #1a7f37; background: #e7f5ec; }

/* ---- Completed calendar (month/date view) ------------------------------ */
.tab-cal {
    border: 1px solid var(--tab-border); border-radius: 10px;
    background: var(--tab-surface); padding: 10px; margin: 8px 0 14px;
}
.tab-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.tab-cal-title { font-weight: 700; font-size: 0.95rem; }
.tab-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.tab-cal-dow { text-align: center; font-size: 0.68rem; font-weight: 700; color: var(--tab-text-muted); padding-bottom: 2px; }
.tab-cal-empty { aspect-ratio: 1; }
.tab-cal-day {
    position: relative; aspect-ratio: 1;
    border: 1px solid transparent; border-radius: 8px;
    background: transparent; cursor: default; color: var(--tab-text);
    display: flex; align-items: flex-start; justify-content: flex-start;
    padding: 4px 6px; font-size: 0.8rem;
}
.tab-cal-day:disabled { color: var(--tab-text-muted); opacity: 0.55; }
.tab-cal-day.has-tas { background: #e8f0fc; border-color: #cfe0fb; cursor: pointer; font-weight: 700; }
.tab-cal-day.has-tas:hover { background: #d8e6fb; }
.tab-cal-day.is-sel { border-color: var(--tab-primary); box-shadow: inset 0 0 0 1px var(--tab-primary); }
.tab-cal-badge {
    position: absolute; bottom: 3px; right: 3px;
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
    background: var(--tab-primary); color: #fff;
    font-size: 0.62rem; font-weight: 700; line-height: 16px; text-align: center;
}

/* ---- Recent drafts list (Home) ----------------------------------------- */
.tab-draftlist { padding: 4px 8px; }
.tab-draftrow {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    border: none;
    background: transparent;
    color: var(--tab-text);   /* <button> doesn't inherit color — keep title light in dark mode */
    cursor: pointer;
    text-align: left;
    padding: 12px 4px;
    border-bottom: 1px solid var(--tab-border);
}
.tab-draftrow:last-child { border-bottom: none; }
.tab-draftrow:hover { background: var(--tab-bg); }
.tab-draftrow-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.tab-draftrow-title { font-weight: 500; font-size: 0.92rem; }
.tab-draftrow-sub {
    font-size: 0.78rem; color: var(--tab-text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tab-draftrow-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: 0 0 auto; }
.tab-draftrow-date { font-size: 0.78rem; color: var(--tab-text-muted); }
.tab-statusbadge {
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
    color: var(--tab-primary); background: #e8f0fc; border-radius: 10px; padding: 2px 8px;
}
/* "Needs attention" badge — with the owner / awaiting action. */
.tab-statusbadge-attention { color: #9a6700; background: #fff3cd; }

/* ---- TA wizard ---------------------------------------------------------- */
.tab-stepper {
    display: flex;
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    gap: 4px;
    overflow-x: auto;
}

.tab-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1 0 auto;
    min-width: 60px;
    padding: 4px 2px;
    cursor: pointer;
    color: var(--tab-text-muted);
    font-size: 0.72rem;
    text-align: center;
}

.tab-step-num {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--tab-border);
    background: var(--tab-surface);
    font-weight: 700;
    font-size: 0.85rem;
}

.tab-step.is-active { color: var(--tab-primary); font-weight: 700; }
.tab-step.is-active .tab-step-num { border-color: var(--tab-primary); color: var(--tab-primary); }
.tab-step.is-done .tab-step-num { border-color: var(--tab-primary); background: var(--tab-primary); color: #fff; }

/* Incomplete panel — amber ring + a small dot badge so the foreman sees what's left. */
.tab-step.is-incomplete .tab-step-num { border-color: #f0ad4e; }
.tab-step.is-incomplete .tab-step-num::after {
    content: ""; position: absolute; top: -2px; right: -2px;
    width: 9px; height: 9px; border-radius: 50%;
    background: #f0ad4e; border: 1.5px solid var(--tab-surface);
}

.tab-field { margin-bottom: 14px; }
.tab-field-row { display: flex; gap: 12px; }
.tab-field-row .tab-field { flex: 1; }

/* On narrow phones, stack rows flagged tab-stack-sm (two comboboxes side-by-side get cramped). */
@media (max-width: 520px) {
    .tab-field-row.tab-stack-sm { flex-direction: column; gap: 0; }
}

.tab-label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--tab-text);
}

.tab-req { color: #c0392b; }
.tab-hint { margin: -6px 0 14px; font-size: 0.78rem; color: var(--tab-text-muted); }
.tab-readonly { margin: -2px 0 14px; font-size: 0.92rem; color: var(--tab-text); white-space: pre-wrap; }

.tab-error {
    background: #fdecea;
    border: 1px solid #f5c6cb;
    color: #a4262c;
    border-radius: 8px;
    padding: 10px 12px;
    margin: 0 0 14px;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Inline status banner (e.g. "Draft saved") — in-context, replaces top-corner toasts. */
.tab-notice {
    background: #e7f5ec;
    border: 1px solid #aedbbd;
    color: #1a7f37;
    border-radius: 8px;
    padding: 10px 12px;
    margin: 0 0 14px;
    font-size: 0.85rem;
    font-weight: 600;
}

.tab-field-check { display: flex; align-items: center; gap: 8px; }
.tab-check-label { font-size: 0.9rem; }

.tab-wizard-nav {
    display: flex;
    gap: 8px;
    justify-content: space-between;
    margin: 8px 0 16px;
}

.tab-panel-stub { padding: 8px 0; }

/* ---- Signatures (Agreement panel) -------------------------------------- */
.tab-sigpad-wrap { margin-top: 8px; }
/* White pad regardless of theme so the (black) pen strokes are visible. */
.tab-sigpad {
    display: block; width: 100%; height: 170px;
    border: 1px solid var(--tab-border); border-radius: 8px;
    background: #ffffff; touch-action: none;
}
.tab-sigview { display: flex; flex-direction: column; gap: 12px; }
.tab-sig { border: 1px solid var(--tab-border); border-radius: 8px; padding: 10px; }
.tab-sig-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.tab-sig-role { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; color: var(--tab-text-muted); }
.tab-sig-name { font-size: 0.92rem; font-weight: 500; }
.tab-sig-when { font-size: 0.74rem; color: var(--tab-text-muted); margin-left: auto; }
.tab-sig-img { max-width: 100%; height: auto; background: #fff; border-radius: 6px; }

/* ---- Owner/contractor comment thread + send-back ----------------------- */
.tab-thread { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.tab-comment {
    border: 1px solid var(--tab-border); border-radius: 8px;
    padding: 8px 10px; background: var(--tab-surface);
}
/* Owner notes lean left with an amber edge; contractor replies lean right with a blue edge. */
.tab-comment-owner { border-left: 3px solid #d9a441; }
.tab-comment-contractor { border-left: 3px solid var(--tab-primary); }
.tab-comment-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 3px; }
.tab-comment-author { font-size: 0.74rem; font-weight: 700; color: var(--tab-text-muted); }
.tab-comment-when { font-size: 0.72rem; color: var(--tab-text-muted); margin-left: auto; }
.tab-comment-body { margin: 0; font-size: 0.9rem; color: var(--tab-text); white-space: pre-wrap; }

.tab-sendback { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--tab-border); }

/* ---- Recipient picker + sent record (email on submit) ------------------ */
.tab-recip-list { display: flex; flex-direction: column; gap: 2px; margin: 8px 0; }
.tab-recip { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--tab-border); cursor: pointer; }
.tab-recip-main { display: flex; flex-direction: column; min-width: 0; }
.tab-recip-name { font-size: 0.92rem; color: var(--tab-text); }
.tab-recip-email { font-size: 0.78rem; color: var(--tab-text-muted); overflow: hidden; text-overflow: ellipsis; }
.tab-recip-add { margin: 10px 0 4px; padding: 10px; border: 1px dashed var(--tab-border); border-radius: 8px; }

.tab-sentlog { display: flex; flex-direction: column; gap: 2px; margin: 6px 0; }
.tab-sentrow { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--tab-border); }
.tab-sentrow .tab-sig-when { margin-left: auto; white-space: nowrap; }
.tab-sent-status { font-weight: 700; width: 1.1em; text-align: center; flex: 0 0 auto; }
.tab-sent-status.is-ok { color: #1a7f37; }
.tab-sent-status.is-fail { color: #c0392b; }
html.dark .tab-sent-status.is-ok { color: #6fe39d; }
html.dark .tab-sent-status.is-fail { color: #f6a6ac; }

/* Top-of-wizard callout when the owner sent the TA back for changes. */
.tab-callout {
    border-radius: 8px; padding: 10px 12px; margin: 0 0 14px; font-size: 0.85rem;
    background: var(--tab-surface); border: 1px solid var(--tab-border);
}
.tab-callout-attention { background: #fdf4e3; border-color: #e6c98a; color: #8a5a14; }
.tab-callout-sub { display: block; margin-top: 4px; font-weight: 400; opacity: 0.85; }
html.dark .tab-callout-attention { background: #2a2410; border-color: #5c4a1c; color: #f0c878; }

/* ---- Hours panel -------------------------------------------------------- */
.tab-inline { display: flex; gap: 8px; align-items: center; }
.tab-inline > :first-child { flex: 1; }

.tab-tagbar { display: flex; align-items: center; gap: 8px; margin: 12px 0 4px; }
.tab-tagcount { font-size: 0.8rem; color: var(--tab-text-muted); margin: 0 0 8px; }
.tab-push-right { margin-left: auto; }

.tab-entry { padding: 12px; }
.tab-entry-modes { margin-bottom: 10px; }

/* Two equal-width toggle buttons filling the row (crew source: Saved crew | Copy from TA). */
.tab-toggle-2 { display: flex; gap: 8px; margin-bottom: 10px; }
.tab-toggle-2 > * { flex: 1 1 0; }
.tab-hours-grid { display: flex; gap: 10px; margin-bottom: 10px; }
.tab-hours-grid > div { flex: 1; }

.tab-subhead { font-size: 0.95rem; margin: 16px 0 6px; color: var(--tab-text); }
/* Collapsible section header (Labor / Equipment) — a full-width tap target. */
.tab-section-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    border: none;
    background: transparent;
    color: var(--tab-text);   /* <button> doesn't inherit color (dark-mode legibility) */
    cursor: pointer;
    font-weight: 700;
    text-align: left;
    padding: 8px 0;
}
.tab-section-chevron { color: var(--tab-text-muted); font-size: 0.85rem; width: 1em; }

.tab-line {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 4px;
    border-bottom: 1px solid var(--tab-border);
}
.tab-line input[type="checkbox"] { width: 22px; height: 22px; flex: 0 0 auto; }
.tab-line-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
/* The line body is a full-width tap-to-edit target (no separate edit/delete buttons —
   delete is the tagged "Remove" mode). Resets the <button> back to a plain row. */
.tab-line-click {
    border: none; background: transparent; font: inherit; color: inherit;
    text-align: left; cursor: pointer; gap: 1px;
    padding: 8px 6px; border-radius: 6px; min-height: 44px;
}
.tab-line-click:hover { background: var(--tab-bg); }

/* Line-section header (Labor / Equipment) with an inline "+" add button. */
.tab-linesec-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tab-linesec-head .tab-section-toggle { width: auto; flex: 1; }
.tab-iconbtn {
    flex: 0 0 auto; border: 1px solid var(--tab-border); background: var(--tab-surface);
    color: var(--tab-primary); font-size: 1.4rem; line-height: 1; cursor: pointer;
    width: 40px; height: 40px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
}
.tab-iconbtn:hover { background: var(--tab-bg); }

/* Searchable pick list (add-employee / add-equipment modals). */
.tab-picklist {
    max-height: 46vh; overflow-y: auto;
    border: 1px solid var(--tab-border); border-radius: 8px; margin: 8px 0;
}
.tab-pickrow {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-bottom: 1px solid var(--tab-border);
    cursor: pointer; min-height: 44px;
}
.tab-pickrow:last-child { border-bottom: none; }
.tab-pickrow:hover { background: var(--tab-bg); }
.tab-pickrow input[type="checkbox"] { width: 20px; height: 20px; flex: 0 0 auto; }
.tab-pickrow-text { font-size: 0.9rem; }
.tab-line-name { font-weight: 500; font-size: 0.9rem; }
/* Craft / wage = secondary info (they default; only sometimes adjusted), shown small + muted
   BELOW the hours so hours read as the headline. */
.tab-line-sub { font-size: 0.74rem; color: var(--tab-text-muted); margin-top: 2px; }
/* Missing craft / wage level placeholder — kept but made to stand out (needs office attention). */
.tab-missing { color: #c0392b; font-weight: 700; }

/* Hours = the headline. Bold pills; entered values pop in blue, zeros stay muted. */
.tab-hours-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.tab-chip {
    font-size: 0.82rem; font-weight: 700; line-height: 1.2;
    padding: 2px 9px; border-radius: 11px;
    background: #eef1f4; color: var(--tab-text-muted);
}
/* Allocation recap above the wizard stepper (steps 2+): what TA am I editing?
   Deliberately quiet — one small muted text line, no pills (MW 2026-07-14). */
.tab-ta-summary {
    font-size: 0.78rem;
    color: var(--tab-text-muted);
    margin: -4px 0 10px;   /* tuck up under the h1 */
    cursor: pointer;       /* tap = back to the Allocation step */
}
.tab-ta-summary-sep {
    margin: 0 5px;
    opacity: 0.55;
}
.tab-ta-summary-warn {
    color: #9a6700;
    font-weight: 600;
}
html.dark .tab-ta-summary-warn { color: #f0c878; }
.tab-chip.is-set { background: #d8e6fb; color: #0a4ea8; }
.tab-chip-warn {
    font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
    padding: 2px 9px; border-radius: 11px; background: #fde9c8; color: #9a6700;
}

/* A line with no hours yet — highlight so it's obvious it still needs attention. */
.tab-line--nohours { background: #fff8e6; border-left: 3px solid #f0ad4e; }
.tab-line-hours { font-size: 0.78rem; color: var(--tab-text-muted); }
.tab-line-edit {
    flex: 0 0 auto; border: none; background: transparent; color: var(--tab-primary);
    font-size: 1.2rem; line-height: 1; cursor: pointer;
    min-width: 44px; min-height: 44px;   /* comfortable touch target (phone/tablet primary) */
    display: inline-flex; align-items: center; justify-content: center;
}
.tab-link {
    border: none; background: transparent; color: var(--tab-primary);
    font-size: 0.8rem; cursor: pointer; padding: 4px 0 0; text-align: left;
}
.tab-savecrew { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--tab-border); }
.tab-line-idle { font-size: 0.78rem; color: var(--tab-text-muted); display: flex; align-items: center; gap: 4px; }
.tab-line-del {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    color: #c0392b;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    min-width: 44px; min-height: 44px;   /* comfortable touch target (phone/tablet primary) */
    display: inline-flex; align-items: center; justify-content: center;
}

/* Inline success confirmation (replaces top-corner toasts for in-context actions). */
.tab-success {
    margin: 6px 0 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: #1a7f37;
}

/* Confirmation-dialog body text. */
.tab-confirm-msg {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.45;
}

/* ============================================================================
   Telerik input conventions — mirror EWBills.Web (Dev_Bible: Data Alignment +
   Date Format). Numbers and dates right-align; the empty date-picker mask shows
   MM/DD/YYYY (the .NET format stays MM/dd/yyyy — uppercase is CSS-only, so it
   only capitalizes the placeholder letters and never touches values/parsing).
   ============================================================================ */
.k-numerictextbox .k-input-inner,
.k-datepicker .k-input-inner,
.k-datetimepicker .k-input-inner {
    text-align: right;
}

.k-dateinput .k-input-inner,
.k-datepicker .k-input-inner,
.k-datetimepicker .k-input-inner {
    text-transform: uppercase;
}

/* ---- Search page ---- */
.tab-backbar { margin-bottom: 12px; }

/* ---- Search panel mode toggle (TA # / Date) ---- */
.tab-search-modes {
    display: inline-flex;
    border: 1px solid var(--tab-border);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 14px;
}
.tab-search-mode {
    padding: 7px 18px;
    background: var(--tab-surface);
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--tab-text-muted);
}
.tab-search-mode + .tab-search-mode { border-left: 1px solid var(--tab-border); }
.tab-search-mode:hover { background: var(--tab-bg); }
.tab-search-mode.is-active { background: var(--tab-primary); color: #fff; }

/* ---- Pre-auth login screen ---- */
.tab-login-wrap {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.tab-login-card {
    width: 100%;
    max-width: 24rem;
}
.tab-login-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}
.tab-login-brandname {
    font-size: 1.7rem;
    letter-spacing: -0.02em;
}
.tab-login-brandname sup {
    font-size: 0.9rem;
    color: #96CA4F;
    font-weight: 700;
}
.tab-login-footer {
    margin-top: 20px;
    font-size: 0.75rem;
    color: #888;
    text-align: center;
}
.tab-login-footer-sep {
    margin: 0 6px;
}
.tab-login-footer a {
    color: #1a6fc4;
    text-decoration: underline;
}
.tab-login-loading {
    display: flex;
    justify-content: center;
    padding: 24px 0;
}
.tab-login-btn {
    width: 100%;
}
.tab-login-links {
    display: flex;
    justify-content: space-between;
    margin-top: 14px;
}
.tab-linkbtn {
    background: none;
    border: none;
    padding: 0;
    color: #1a6fc4;
    font-size: 0.85rem;
    cursor: pointer;
    text-decoration: underline;
}
.tab-linkbtn:disabled {
    color: #999;
    cursor: default;
    text-decoration: none;
}
.tab-login-stay {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 2px 0 14px;
}
.tab-login-stay label {
    font-size: 0.9rem;
    color: var(--tab-text-muted);
    cursor: pointer;
}

/* ---- Owner review: document (PDF-like) layout --------------------------- */
.tab-doc-toolbar { display: flex; justify-content: flex-end; margin-bottom: 10px; }

.tab-doc {
    background: var(--tab-surface);
    border: 1px solid var(--tab-border);
    border-radius: 8px;
    padding: 20px 18px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.tab-doc-header { border-bottom: 2px solid var(--tab-text); padding-bottom: 8px; margin-bottom: 14px; }
.tab-doc-headrow { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.tab-doc-title { font-size: 1.05rem; font-weight: 700; margin: 0; }
.tab-doc-tanum { font-size: 0.85rem; color: var(--tab-text-muted); white-space: nowrap; }
.tab-doc-subtitle { font-size: 0.78rem; color: var(--tab-text-muted); }
.tab-doc-status { font-size: 0.78rem; color: var(--tab-text-muted); white-space: nowrap; }

.tab-doc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-bottom: 12px; }
.tab-doc-field { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tab-doc-field--full { grid-column: 1 / -1; }
.tab-doc-flabel {
    font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--tab-text-muted);
}
.tab-doc-fval {
    font-size: 0.9rem; color: var(--tab-text);
    border-bottom: 1px solid var(--tab-border);
    padding-bottom: 2px; min-height: 1.2em; word-break: break-word;
}
.tab-doc-field--block .tab-doc-fval { white-space: pre-wrap; }

.tab-doc-section {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--tab-text); border-bottom: 1.5px solid var(--tab-text-muted);
    padding-bottom: 3px; margin: 16px 0 6px;
}

.tab-doc-tablewrap { overflow-x: auto; }
.tab-doc-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.tab-doc-table th {
    font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
    color: var(--tab-text-muted); text-align: left; padding: 3px 6px;
    border-bottom: 1px solid var(--tab-border); white-space: nowrap;
}
.tab-doc-table td { padding: 4px 6px; border-bottom: 1px solid var(--tab-border); color: var(--tab-text); vertical-align: top; }
.tab-doc-r { text-align: right; }
.tab-doc-subnote { font-size: 0.72rem; color: var(--tab-text-muted); padding-left: 18px; white-space: pre-wrap; }
.tab-doc-note { font-size: 0.85rem; white-space: pre-wrap; margin: 4px 0 0; color: var(--tab-text); }

.tab-doc-legal { font-size: 0.72rem; color: var(--tab-text-muted); margin: 6px 0 12px; }
.tab-doc-sigs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tab-doc-sigbox { display: flex; flex-direction: column; gap: 2px; }
.tab-doc-siglabel {
    font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--tab-text-muted);
}
.tab-doc-sigimg { max-height: 56px; max-width: 100%; object-fit: contain; align-self: flex-start; }
.tab-doc-sigempty { font-size: 0.8rem; color: var(--tab-text-muted); font-style: italic; padding: 6px 0; }
.tab-doc-signame { font-size: 0.88rem; border-top: 1px solid var(--tab-text-muted); padding-top: 2px; margin-top: 4px; }
.tab-doc-sigwhen { font-size: 0.7rem; color: var(--tab-text-muted); }

.tab-doc-sign { margin-top: 8px; }

@media (max-width: 420px) {
    .tab-doc-grid { grid-template-columns: 1fr; }
}