/* ═══════════════════════════════════════════════════════════════
   DESIGN SYSTEM – CORE STYLES  (portal.css)
   Global design tokens & shared components for DSPortal
   Extends Bootstrap 5.3.3 with consistent design tokens
═══════════════════════════════════════════════════════════════ */

/* ── Design tokens ── */
:root {
    /* Palette: "Cloud" (Aayura Global rebrand). Every text pair here is 4.5:1 or more unless marked. */

    /* ── Accent: the action blue (primary buttons, active states, selected chips). Gold is no longer a UI colour. ── */
    --ts-accent: #2f55c0;         /* white text 6.6:1 */
    --ts-accent-hover: #4169db;   /* white text 4.9:1 */
    --ts-accent-dark: #2448a8;    /* pressed; also the darker edge of accent fills. White text 8.2:1 */
    --ts-accent-bg: #e8eefb;      /* accent tint (hover rows, soft pills) */
    --ts-accent-shadow: 0 2px 8px rgba(47,85,192,.22);
    --ts-accent-shadow-hover: 0 4px 12px rgba(65,105,219,.35);
    --ts-on-accent: #ffffff;      /* text on the accent fill, both themes */
    --ts-accent-text: #2f55c0;    /* accent-toned text on the card: 6.6:1 */
    --ts-brand-accent: #d9773f;   /* apricot: the "Scaffolding" half of the wordmark only (a logotype, not body text) */
    --ts-focus-ring: var(--ts-primary);   /* keyboard focus ring: 6.6:1 on white, 6.2:1 on the page */
    --ts-focus-ring-inverse: #8fb0ff;     /* the ring on navy fills (modal headers, skip link, toasts): 6:1+ */
    --ts-focus-halo: rgba(47,85,192,.15); /* soft glow around a focused field; decoration only, the ring is the indicator */
    --ts-focus-gap: #ffffff;              /* buttons: the gap between the button and its ring */
    --ts-btn-focus-ring: #4169db;         /* buttons: the ring outside the gap (4.6:1 on the page; #8fb0ff was 2:1) */
    --ts-on-fill: #ffffff;   /* text on a coloured button fill (primary, success, info, danger); turns dark in dark mode */
    --ts-link: var(--ts-primary);
    --ts-link-hover: #1f3f9e;

    /* ── Buttons: disabled and secondary (outline) ── */
    --ts-btn-disabled-bg: #eef1f6;
    --ts-btn-disabled-fg: #8a93ab;   /* inactive controls are exempt from the 4.5:1 rule */
    --ts-btn-outline-bg: var(--ts-card);
    --ts-btn-outline-border: #e1e6f0;
    --ts-btn-outline-fg: #2f55c0;
    --ts-btn-outline-hover-bg: #eef3fe;
    --ts-btn-outline-hover-border: #b9c8f0;
    --ts-btn-outline-hover-fg: #1f3f9e;
    --ts-btn-outline-active-bg: #dce5fb;

    /* ── Dark / Navy (brand navy: fills with white text, and --ts-dark-text for headings) ── */
    --ts-dark: #1b2a5e;
    --ts-dark-mid: #243672;
    --ts-dark-light: #2e4388;
    --ts-header-bg: linear-gradient(135deg, #1b2a5e 0%, #243672 100%);

    /* ── Primary (links, info) ── */
    --ts-primary: #2f55c0;         /* 6.6:1 on white, 5.7:1 on --ts-primary-light */
    --ts-primary-light: #e8eefb;

    /* ── Text ── */
    --ts-text: #2a3350;            /* body text */
    --ts-text-dark: #141c38;       /* strongest text */
    --ts-sub: #5a6480;
    --ts-muted: #5a6480;           /* 6:1 on white, 5.5:1 on the page */
    --ts-muted-light: #9ca3af;
    --ts-muted-text: var(--ts-muted);
    --ts-dark-text: var(--ts-dark);   /* navy as a text colour; turns light in dark mode (--ts-dark itself stays navy for fills) */
    --ts-placeholder: #c4c9d8;

    /* ── Surfaces ── */
    --ts-card: #ffffff;
    --ts-bg: #f7f8fb;
    --ts-input-bg: #f9fafc;
    --ts-hover-bg: #f7f9fd;

    /* ── Borders ── */
    --ts-border: #e1e6f0;
    --ts-border-light: #e1e6f0;
    --ts-border-lighter: #eef1f6;
    --ts-border-hover: #cdd4e2;

    /* ── Muted (neutral badges) ── */
    --ts-muted-bg: rgba(90,100,128,.1);
    --ts-muted-border: rgba(90,100,128,.2);

    /* ── Success ── */
    --ts-success: #1e7a4d;   /* 5.3:1 on white, 4.8:1 on its tint */
    --ts-success-bg: #e8f6ee;
    --ts-success-border: rgba(30,122,77,.25);

    /* ── Danger ── */
    --ts-danger: #bf3f57;    /* 5.2:1 on white, 4.7:1 on its tint; white text on it 5.2:1 */
    --ts-danger-bright: var(--ts-danger);
    --ts-danger-bg: #fff1f3;
    --ts-danger-border: rgba(191,63,87,.25);

    /* ── Warning ── */
    --ts-warn: #8f6300;      /* 5.3:1 on white, 4.9:1 on its tint */
    --ts-warn-bg: #fff4d6;
    --ts-warn-border: rgba(143,99,0,.25);

    /* ── Alert banners ── */
    --ts-alert-warn-bg: var(--ts-warn-bg);
    --ts-alert-warn-border: var(--ts-warn-border);
    --ts-alert-warn-text: var(--ts-warn);
    --ts-alert-success-bg: var(--ts-success-bg);
    --ts-alert-success-border: var(--ts-success-border);
    --ts-alert-success-text: var(--ts-success);

    /* ── Info ── */
    --ts-info: #2f55c0;
    --ts-info-bg: #e8eefb;
    --ts-info-border: #b9c8f0;
    --ts-info-hover: #dce5fb;

    /* ── Other hues used by single buttons and labels (each 4.5:1 or more on the card) ── */
    --ts-sky: #0369a1;          /* was #0284c7, 3.8:1 on its tint */
    --ts-sky-bg: #f0f9ff;
    --ts-sky-border: #bae6fd;
    --ts-indigo: #4f46e5;       /* was #6366f1, 4.3:1 */
    --ts-indigo-fill: #4f46e5;  /* white text on it: 6.3:1 in both themes */
    --ts-indigo-border: #c7d2fe;
    --ts-violet: #8e44ad;
    --ts-ot-morning-bg: #b45309;  /* work schedule OT headers, white text: 5.0:1 (was #e67e22, 2.9:1) */
    --ts-ot-evening-bg: #8e44ad;  /* 5.9:1 */

    /* ── Utilities ── */
    /* ── Status tones: text and fill pairs used by dashboard tags, cards and pills ── */
    --ts-tone-danger-fg: var(--ts-danger);
    --ts-tone-danger-bg: var(--ts-danger-bg);
    --ts-tone-warn-fg: var(--ts-warn);
    --ts-tone-warn-bg: var(--ts-warn-bg);
    --ts-tone-ok-fg: var(--ts-success);
    --ts-tone-ok-bg: var(--ts-success-bg);
    --ts-tone-info-fg: var(--ts-info);
    --ts-tone-info-bg: var(--ts-info-bg);

    /* ── Receivables ageing buckets (each 3:1 or more on the card) ── */
    --ts-age-notdue: #5a7ea6;
    --ts-age-30: #a87800;
    --ts-age-60: #c25e12;
    --ts-age-90: #9a3412;
    --ts-age-over90: var(--ts-danger);

    /* ── Totals rows (table footers and summary rows): a blue tint with navy text, 11:1 ── */
    --ts-total-bg: var(--ts-accent-bg);
    --ts-total-hover-bg: var(--ts-info-hover);
    --ts-total-fg: var(--ts-dark-text);
    --ts-total-border: var(--ts-info-border);

    /* ── Dashboard surfaces ── */
    --ts-tile-bg: var(--ts-hover-bg);
    --ts-on-dark: #ffffff;   /* text on navy (--ts-dark) fills */
    --ts-on-dark-soft: rgba(255,255,255,.85);    /* secondary text on navy: 9:1 */
    --ts-on-dark-muted: rgba(255,255,255,.72);   /* tertiary text on navy: 6.5:1 (was white at .5, 4.2:1) */
    --ts-on-dark-accent: #8fb0ff;                /* an accent icon or word on navy: 6:1 (the action blue is 2:1 there) */
    --ts-on-dark-btn: rgba(255,255,255,.12);     /* a quiet button on navy */
    --ts-on-dark-btn-border: rgba(255,255,255,.2);
    --ts-on-dark-btn-hover: rgba(255,255,255,.2);
    --ts-hero-glow: rgba(143,176,255,.16);       /* decorative glow on navy cards */
    --ts-avatar-bg: #dce5fb;                     /* initials on the navy profile card: navy on light blue, 10.8:1 */
    --ts-avatar-fg: #1b2a5e;
    --ts-toast-bg: var(--ts-dark);          /* confirmations: white text 13.6:1 */
    --ts-toast-danger-bg: var(--ts-danger); /* errors: white text 5.2:1 */
    --ts-toast-border: transparent;
    --ts-modal-close-bg: #dce5fb;           /* the close button on navy modal headers; its dark cross is 16:1 */
    --ts-modal-close-hover-bg: #b9c8f0;

    /* ── App shell: sidebar and top bar (light, "Cloud") ── */
    --ts-nav-bg: #f3f6fd;
    --ts-nav-border: #d3dcef;          /* the sidebar's right edge (and the phone top bar's bottom edge) */
    --ts-nav-shadow: 4px 0 12px rgba(27,42,94,.04);   /* a soft lift along the sidebar's edge */
    --ts-nav-fg: #3a4a6b;              /* 8.2:1 on the sidebar */
    --ts-nav-fg-hover: #1b2a5e;        /* 12.6:1 */
    --ts-nav-fg-muted: #5a6480;        /* 5.4:1 */
    --ts-nav-hover: rgba(27,42,94,.06);
    --ts-nav-divider: #e2e8f5;
    --ts-nav-active-bg: #dce5fb;
    --ts-nav-active-fg: #1b2a5e;       /* 10.8:1 */
    --ts-nav-sub-active-bg: var(--ts-nav-active-bg);
    --ts-nav-sub-active-fg: var(--ts-nav-active-fg);
    --ts-nav-focus-ring: var(--ts-focus-ring);
    --ts-nav-search-bg: #ffffff;       /* the search box in the phone menu */
    --ts-nav-search-bg-focus: #ffffff;
    --ts-nav-search-border: #e2e8f5;
    --ts-nav-search-fg: #1b2a5e;
    --ts-wordmark: #1b2a5e;
    --ts-wordmark-accent: var(--ts-brand-accent);
    --ts-wordmark-tagline: #3a4a6b;    /* "an Aayura Global company" */
    --ts-topbar-bg: var(--ts-card);
    --ts-topbar-mobile-bg: #f3f6fd;
    --ts-topbar-mobile-fg: #1b2a5e;
    --ts-topbar-mobile-border: var(--ts-nav-border);
    --ts-topbar-mobile-btn: #ffffff;
    --ts-topbar-mobile-btn-border: #e2e8f5;
    --ts-page-bg: var(--ts-bg);
    --ts-selected-bg: #eef3fe;       /* the selected row in a split list */

    /* ── Dashboard "Today" panel: a light blue panel in light mode, lifted navy in dark ── */
    --ts-panel-bg: #e8eefb;
    --ts-panel-fg: #1b2a5e;          /* 11.7:1 */
    --ts-panel-muted: #51607f;       /* 5.4:1 */
    --ts-panel-divider: #d5def4;
    --ts-panel-icon-bg: #ffffff;
    --ts-panel-link: #2f55c0;        /* 5.7:1 */
    --ts-panel-danger: var(--ts-tone-danger-fg);
    --ts-panel-warn: var(--ts-tone-warn-fg);
    --ts-panel-ok: var(--ts-tone-ok-fg);
    --ts-panel-info: var(--ts-tone-info-fg);
    --ts-panel-band-bg: #2f55c0;     /* phone "Coming up": the weekday band on each date badge */
    --ts-panel-band-fg: #ffffff;     /* 6.6:1 */

    /* ── Sign-in pages: the brand panel follows the sidebar ── */
    --ts-auth-bg: var(--ts-nav-bg);
    --ts-auth-fg: var(--ts-nav-fg-hover);
    --ts-auth-fg-soft: var(--ts-nav-fg);
    --ts-auth-fg-muted: var(--ts-nav-fg-muted);
    --ts-auth-art-tube: rgba(27,42,94,.10);
    --ts-auth-art-brace: rgba(217,119,63,.35);
    --ts-auth-point-bg: #dce5fb;
    --ts-auth-point-fg: var(--ts-accent);   /* 5.2:1 on its tile */

    /* ── Report charts: first and second series (3:1 or more on the card) ── */
    --ts-chart-1: var(--ts-dark-mid);
    --ts-chart-2: #a87800;
    /* ── Attendance marks: overtime and double overtime (4.5:1 or more on the card and page) ── */
    --ts-att-ot: #b45309;
    --ts-att-ot2: #7e22ce;
    --ts-star: var(--ts-warn);
    --ts-backdrop: rgba(12,18,32,.45);
    --ts-table-alt: #f3f5fa;   /* subtotal / group rows in report tables (dark value below) */

    --ts-radius: 10px;
    --ts-shadow: 0 2px 12px rgba(20,28,56,.06);
    --ts-shadow-lg: 0 4px 24px rgba(20,28,56,.08);
}

/* ── Cell status tints (overdue / warning rows) ── */
.ts-cell-overdue {
    border-left: 4px solid var(--ts-danger-bright) !important;
}

.ts-cell-warn {
    border-left: 4px solid var(--ts-warn) !important;
}

/* ── ToDo row left-border indicators ── */
.ts-approved-table tbody tr.td-border-overdue > td:first-child { border-left: 4px solid var(--ts-danger-bright) !important; }
.ts-approved-table tbody tr.td-border-priority > td:first-child { border-left: 4px solid var(--ts-warn) !important; }
.ts-approved-table tbody tr.td-border-invoice > td:first-child { border-left: 4px solid var(--ts-primary) !important; }
.ts-approved-table tbody tr.td-border-default > td:first-child { border-left: 4px solid var(--ts-border-hover) !important; }
.ts-approved-table tbody tr[class^="td-border-"]:first-child > td { border-top: 1px solid var(--ts-border) !important; }

/* ── Profile metadata grid ── */
.pr-meta-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 24px;
    padding: 0 28px 20px;
    border-top: 1px solid var(--ts-border-lighter);
    padding-top: 16px;
}

.pr-meta-item {
    padding: 8px 0;
}

.pr-meta-label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ts-muted);
    margin-bottom: 2px;
}

.pr-meta-value {
    font-size: .9rem;
    font-weight: 600;
    color: var(--ts-text);
}

.pr-meta-value-highlight {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--ts-text-dark);
}

@media (max-width: 767px) {
    .pr-meta-grid {
        gap: 0 14px;
        padding: 16px 18px 16px 18px;
        border-top: 1px solid var(--ts-border-lighter);
    }

    .pr-meta-item {
        padding: 6px 12px 6px 0;
    }
}

/* ── Modern tabs ── */
.ts-tabs {
    display: flex;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 0 0 0;
    border-bottom: 2px solid var(--ts-border);
    flex-wrap: wrap;
}

.ts-tabs .nav-item {
    margin-bottom: -2px;
}

.ts-tabs .nav-link {
    display: block;
    padding: 10px 20px;
    font-size: .85rem;
    font-weight: 600;
    color: var(--ts-muted);
    text-decoration: none;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 8px 8px 0 0;
    background: none;
    transition: color .15s, border-color .15s, background .15s;
    cursor: pointer;
}

.ts-tabs .nav-link:hover {
    color: var(--ts-text);
    background: var(--ts-bg);
}

.ts-tabs .nav-link.active {
    color: var(--ts-on-accent);
    border-bottom-color: var(--ts-accent-dark);
    background: var(--ts-accent);
    font-weight: 700;
}

.ts-tabs .nav-link.active:hover {
    color: var(--ts-on-accent);
    background: var(--ts-accent);
}

.ts-tabs + .tab-content {
    background: var(--ts-card);
    border: 1px solid var(--ts-border);
    border-top: none;
    border-radius: 0 0 var(--ts-radius) var(--ts-radius);
    padding: 6px 24px 20px;
}

@media (max-width: 767px) {
    .ts-tabs {
        gap: 0;
    }

    .ts-tabs .nav-link {
        padding: 6px 10px;
        font-size: .78rem;
    }

    .ts-tabs + .tab-content {
        padding: 8px 12px 14px;
    }
}

/* ── Page layout ── */
.ts-page {
    margin: 0 auto;
    padding: 1rem 1rem 3rem;
}

/* ── Action buttons ── */
.ts-btn {
    padding: .65rem 1.4rem;
    border-radius: 8px;
    font-size: .9rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: opacity .15s, transform .1s;
    white-space: nowrap;
    box-sizing: border-box;
    display: inline-block;
    text-decoration: none;
    text-align: center;
    line-height: 1.5;
}

    .ts-btn:active {
        transform: scale(.97);
    }

.ts-btn-save {
    background: var(--ts-text);
    color: var(--ts-on-fill);
}

    .ts-btn-save:hover {
        opacity: .85;
        color: var(--ts-on-fill);
    }

.ts-btn-submit {
    background: var(--ts-accent);
    color: var(--ts-on-accent);
    transition: background .15s, box-shadow .15s, transform .1s;
}

    .ts-btn-submit:hover {
        background: var(--ts-accent-hover);
        color: var(--ts-on-accent);
        box-shadow: var(--ts-accent-shadow-hover);
    }

    .ts-btn-submit:active {
        background: var(--ts-accent-dark);
        box-shadow: none;
    }

    .ts-btn.ts-btn-submit:disabled,
    .ts-btn.ts-btn-submit:disabled:hover {
        background: var(--ts-btn-disabled-bg);
        color: var(--ts-btn-disabled-fg);
        box-shadow: none;
        opacity: 1;
    }

.ts-btn-danger {
    background: var(--ts-danger-bg);
    color: var(--ts-danger);
    border: 1px solid var(--ts-danger-border);
}

    .ts-btn-danger:hover {
        background: var(--ts-danger-bright);
        color: var(--ts-on-fill);
    }

.ts-btn-outline {
    background: var(--ts-btn-outline-bg);
    color: var(--ts-btn-outline-fg);
    border: 1px solid var(--ts-btn-outline-border);
    transition: background .15s, border-color .15s, color .15s, transform .1s;
}

    .ts-btn-outline:hover {
        background: var(--ts-btn-outline-hover-bg);
        border-color: var(--ts-btn-outline-hover-border);
        color: var(--ts-btn-outline-hover-fg);
    }

    .ts-btn-outline:active {
        background: var(--ts-btn-outline-active-bg);
    }

    .ts-btn.ts-btn-outline:disabled,
    .ts-btn.ts-btn-outline:disabled:hover {
        background: var(--ts-btn-disabled-bg);
        border-color: var(--ts-btn-disabled-bg);
        color: var(--ts-btn-disabled-fg);
        opacity: 1;
    }

/* Primary and secondary buttons: a ring with a gap, drawn as a shadow so it follows the rounded corners. */
.ts-btn-submit:focus-visible,
.ts-btn-outline:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px var(--ts-focus-gap), 0 0 0 5px var(--ts-btn-focus-ring);
}

.ts-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.ts-btn-submit.ts-btn-icon {
    color: var(--ts-on-accent);
}

    .ts-btn-submit.ts-btn-icon:hover {
        color: var(--ts-on-accent);
    }

.ts-btn-notes {
    background: var(--ts-info-bg, var(--dm-bg-f0f4ff, #f0f4ff));
    color: var(--ts-info, var(--dm-fg-3b5bdb, #3b5bdb));
    border: 1px solid var(--ts-info-border, #c5d0e6);
}

    .ts-btn-notes:hover {
        background: var(--ts-info, #3b5bdb);
        color: var(--ts-on-fill);
        border-color: var(--ts-info, #3b5bdb);
    }

.ts-btn-info {
    background: var(--ts-sky-bg);
    color: var(--ts-sky);
    border: 1px solid var(--ts-sky-border);
}

    .ts-btn-info:hover {
        background: var(--ts-sky);
        color: var(--ts-on-fill);
        border-color: var(--ts-sky);
    }

.ts-btn-todo {
    background: var(--ts-accent-bg);
    color: var(--ts-accent-text);
    border: 1px solid var(--ts-accent);
}

    .ts-btn-todo:hover {
        background: var(--ts-accent);
        color: var(--ts-on-accent);
        border-color: var(--ts-accent-dark);
    }

.ts-btn-stock {
    background: var(--ts-success-bg, rgba(22,163,74,.1));
    color: var(--ts-success, var(--dm-fg-15803d, #15803d));
    border: 1px solid var(--ts-success-border, rgba(22,163,74,.25));
}

    .ts-btn-stock:hover {
        background: var(--ts-success, #15803d);
        color: var(--ts-on-fill);
        border-color: var(--ts-success, #15803d);
    }

.ts-btn-done {
    background: var(--ts-accent);
    color: var(--ts-on-accent);
    border: 1px solid var(--ts-accent-dark);
    box-shadow: var(--ts-accent-shadow);
}

.ts-btn-done:hover {
    background: var(--ts-accent-hover);
    border-color: var(--ts-accent-hover);
    color: var(--ts-on-accent);
    box-shadow: var(--ts-accent-shadow-hover);
}

.ts-btn-email {
    background: linear-gradient(135deg, var(--dm-bg-fafbff, #fafbff) 0%, var(--dm-bg-f0f4ff, #f0f4ff) 100%);
    color: var(--ts-indigo);
    border: 1px solid var(--ts-indigo-border);
}

    .ts-btn-email:hover {
        background: var(--ts-indigo-fill);
        color: var(--ts-on-dark); /* on a fill that is the same indigo in both themes: 6.3:1 */
        border-color: var(--ts-indigo-fill);
    }

.ts-btn-icon {
    width: 42px;
    height: 42px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
}

/* ── Approved / data table ── */
.ts-approved-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 9px !important;
}

    .ts-approved-table thead th {
        background: var(--ts-header-bg);
        color: var(--ts-on-dark);
        font-size: .7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .05em;
        padding: .5rem .75rem;
        white-space: nowrap;
    }

        .ts-approved-table thead th:first-child { border-radius: 6px 0 0 0; }
        .ts-approved-table thead th:last-child  { border-radius: 0 6px 0 0; }

    .ts-approved-table tbody td {
        background: var(--ts-card);
        border-top: 1px solid var(--ts-border);
        border-bottom: 1px solid var(--ts-border);
        padding: .65rem .75rem;
        font-size: .9rem;
        color: var(--ts-text);
        vertical-align: middle;
    }

        .ts-approved-table tbody td:first-child {
            border-left: 1px solid var(--ts-border);
            border-radius: var(--ts-radius) 0 0 var(--ts-radius);
        }

        .ts-approved-table tbody td:last-child {
            border-right: 1px solid var(--ts-border);
            border-radius: 0 var(--ts-radius) var(--ts-radius) 0;
        }

    .ts-approved-table tbody tr:hover td {
        background: var(--ts-hover-bg);
    }

/* Numeric / decimal column — right-aligned */
.ts-approved-table th.ts-num,
.ts-approved-table td.ts-num {
    text-align: right;
}

/* Totals / summary row */
.ts-approved-table tbody tr.pr-totals-row td {
    background: var(--ts-total-bg);
    color: var(--ts-total-fg);
    font-weight: 700;
    border-color: var(--ts-total-border);
}

.ts-approved-table tbody tr.pr-totals-row:hover td {
    background: var(--ts-total-hover-bg);
    color: var(--ts-total-fg);
}

/* ── Empty table state ── */
.ts-approved-table:not(:has(tbody tr)) thead { display: none; }
.ts-approved-table:not(:has(tbody tr)) tfoot { display: none; }

.ts-approved-table:not(:has(tbody tr)) {
    display: block;
}
.ts-approved-table:not(:has(tbody tr)) tbody {
    display: block;
}
.ts-approved-table:not(:has(tbody tr)) tbody::after {
    content: 'No results found';
    display: block;
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--ts-muted);
    font-size: .9rem;
    font-style: italic;
}

/* ── tfoot ── */

.ts-approved-table tfoot tr td,
.ts-approved-table tfoot tr th {
    background: var(--ts-total-bg);
    color: var(--ts-total-fg);
    font-size: .8rem;
    font-weight: 700;
    padding: 10px 14px;
    border-top: 2px solid var(--ts-total-border) !important;
    border-bottom: 1px solid var(--ts-total-border) !important;
    border-left: none !important;
    border-right: none !important;
    white-space: nowrap;
}

.ts-approved-table tfoot tr td:first-child,
.ts-approved-table tfoot tr th:first-child { border-radius: 0 0 0 6px; border-left: 1px solid var(--ts-total-border) !important; }

.ts-approved-table tfoot tr td:last-child,
.ts-approved-table tfoot tr th:last-child  { border-radius: 0 0 6px 0; border-right: 1px solid var(--ts-total-border) !important; }

/* Action cell */
.ts-action-cell {
    white-space: nowrap;
    text-align: right;
}

    .ts-action-cell > .inline-flex {
        justify-content: flex-end;
        gap: .4rem;
    }

/* Inline flex helper */
.inline-flex {
    display: inline-flex;
}

/* Balance tab: mobile-only combined contact cell is hidden on desktop */
.bal-col-mobile-contact { display: none; }

/* ── Filter bar ── */
.ts-filter-bar {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

    .ts-filter-bar label {
        font-size: .7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--ts-muted);
        margin: 0;
    }

    .ts-filter-bar .form-control,
    .ts-filter-bar .form-select {
        border: 1px solid var(--ts-border);
        border-radius: 6px;
        padding: .35rem .5rem;
        font-size: .9rem;
        background: var(--ts-bg);
        color: var(--ts-text);
        min-width: 200px;
    }

/* ── Vehicle assignment bubble ── */
.vehicle-assign-bubble {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px 3px 8px;
    border-radius: 999px;
    background: var(--ts-accent-bg);
    color: var(--dm-fg-dark, var(--ts-dark));
    border: 1px solid var(--ts-info-border);
    font-size: .82rem;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    transition: background .15s, box-shadow .15s;
    white-space: nowrap;
}

/* Pill-shaped buttons that open a dialog (vehicle assignment, to-do notes, days present): the page's font, not the browser's button font. */
button.vehicle-assign-bubble,
button.ts-notes-bubble,
button.rp-clickable {
    font-family: inherit;
    line-height: inherit;
}
button.vehicle-assign-bubble:focus-visible,
button.ts-notes-bubble:focus-visible,
button.rp-clickable:focus-visible {
    outline: 2px solid var(--ts-focus-ring);
    outline-offset: 2px;
}

.vehicle-assign-bubble:hover {
    background: var(--ts-accent);
    color: var(--ts-on-accent);
    box-shadow: var(--ts-accent-shadow);
}

/* ── Global checkbox size ── */
input[type=checkbox] {
    width: 24px;
    height: 24px;
    accent-color: var(--ts-accent);
    cursor: pointer;
    flex-shrink: 0;
    vertical-align: middle;
}

/* ── Show-all checkbox ── */
.ts-show-all {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .88rem;
    font-weight: 500;
    color: var(--ts-text);
    cursor: pointer;
    user-select: none;
}

    .ts-show-all input[type=checkbox] {
    }

/* ── Modal backdrop ── */
.modal-backdrop {
    background-color: #000 !important;
    opacity: 0 !important;
}

.modal-backdrop.show {
    opacity: 0.55 !important;
}

/* ── Modernised Bootstrap 5 modals ── */
.ts-modal.show {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.ts-modal .modal-dialog {
    margin: 1rem auto;
    max-height: calc(100vh - 2rem);
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* The dialog stacks its content in a column, so Bootstrap's "centered" (align-items) only centred it
   across. Auto margins centre it down the page as well, and a dialog taller than the screen still
   scrolls from its top instead of being clipped. */
.ts-modal .modal-dialog-centered > .modal-content {
    margin-block: auto;
}

.ts-modal::-webkit-scrollbar {
    display: none;
}

.ts-modal {
    scrollbar-width: none;
    -ms-overflow-style: none;
    z-index: 1060 !important;
    touch-action: manipulation;
    overflow: hidden !important;
}

.modal-backdrop {
    z-index: 1055 !important;
    pointer-events: none !important;
}

.ts-modal .modal-content {
    border: none;
    border-radius: 14px;
    box-shadow: 0 8px 40px rgba(0,0,0,.18);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 2rem);
    touch-action: manipulation;
    overflow: hidden;
}

.ts-modal .modal-header {
    background: var(--ts-header-bg);
    color: var(--ts-on-dark);
    border: none;
    padding: 16px 24px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.1px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ts-modal .modal-header .btn-close {
    filter: none;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 6px;
    background-color: var(--ts-modal-close-bg);
    flex-shrink: 0;
    opacity: 1;
    transition: background-color .15s, transform .1s;
}

/* Phones: a 44px close button, like the sheet's. */
@media (max-width: 767.98px) {
    .ts-modal .modal-header .btn-close {
        width: 44px;
        height: 44px;
        border-radius: 10px;
    }
}

.ts-modal .modal-header .btn-close:hover {
    background-color: var(--ts-modal-close-hover-bg);
    transform: scale(1.1);
}

.ts-modal .modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 20px 24px;
    font-size: .92rem;
    color: var(--ts-text);
    line-height: 1.6;
    touch-action: manipulation;
}

.ts-modal .modal-body::-webkit-scrollbar {
    display: none;
}

.ts-modal .modal-footer {
    border-top: 1px solid var(--ts-border);
    padding: 12px 20px;
    gap: 8px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.ts-modal .modal-footer .btn-primary,
.ts-modal .modal-footer .ts-btn-submit {
    background: var(--ts-accent);
    border-color: var(--ts-accent);
    color: var(--ts-on-accent);
    font-weight: 700;
    border-radius: 8px;
    padding: 8px 20px;
}

    .ts-modal .modal-footer .btn-primary:hover,
    .ts-modal .modal-footer .ts-btn-submit:hover {
        background: var(--ts-accent-hover);
        border-color: var(--ts-accent-hover);
        color: var(--ts-on-accent);
    }

    .ts-modal .modal-footer .btn-primary:active,
    .ts-modal .modal-footer .ts-btn-submit:active {
        background: var(--ts-accent-dark);
        border-color: var(--ts-accent-dark);
    }

.ts-modal .modal-footer .btn-secondary {
    background: var(--ts-border);
    border: none;
    color: var(--ts-text);
    font-weight: 600;
    border-radius: 8px;
    padding: 8px 20px;
}

/* ── Detail grid inside modals ── */
.ts-detail-grid {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 0;
}

.ts-detail-label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ts-muted);
    padding: .55rem 1rem .55rem 0;
    border-bottom: 1px solid var(--ts-border);
}

.ts-detail-value {
    font-size: .92rem;
    color: var(--ts-text);
    font-weight: 500;
    padding: .55rem 0;
    border-bottom: 1px solid var(--ts-border);
    overflow-wrap: break-word;
    word-break: break-all;
    min-width: 0;
}

.ts-detail-grid > :nth-last-child(-n+2) {
    border-bottom: none;
}

/* ── Validation ── */
.ts-page .text-danger {
    font-size: .78rem;
    margin-top: 2px;
    display: block;
}

/* ── Download link ── */
.ts-download-link {
    display: inline-block;
    padding: .3rem .7rem;
    background: var(--ts-accent);
    color: var(--ts-on-accent);
    font-size: .8rem;
    font-weight: 700;
    border-radius: 6px;
    text-decoration: none;
    transition: background .15s;
}

    .ts-download-link:hover {
        background: var(--ts-accent-hover);
        color: var(--ts-on-accent);
        text-decoration: none;
    }


/* Notes bubble — hidden on desktop, visible on mobile */
.ts-notes-bubble { display: none; }
.ts-notes-inline { display: block; }

/* Name badge — hidden on desktop */
.ts-name-badge { display: none; }

/* ── Project Items header row inside modals ── */
.ts-modal .pi-section .pi-header-row {
    background: var(--ts-header-bg);
    border-radius: 6px 6px 0 0;
    padding: 8px 12px !important;
    border-bottom: none !important;
    margin-bottom: 4px !important;
}

.ts-modal .pi-section .pi-header-row .us-label {
    color: var(--ts-on-dark);
}

/* ── Quotation / Invoice item totals ── */
.qi-totals {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .25rem;
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 2px solid var(--ts-accent);
}

.qi-total-row {
    display: flex;
    gap: 1rem;
    align-items: center;
}

    .qi-total-row .us-label {
        min-width: 100px;
        text-align: right;
        margin: 0;
    }

    .qi-total-row .fw-bold {
        min-width: 100px;
        text-align: right;
        font-size: .9rem;
    }

.qi-total-gross {
    padding-top: .4rem;
    border-top: 1px solid var(--ts-border);
}

    .qi-total-gross .fw-bold {
        font-size: 1rem;
        color: var(--dm-fg-dark, var(--ts-dark));
    }

/* ═══════════════════════════════════════════════════════════════
   MOBILE  ≤ 767px
═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    /* ── Page ── */
    .ts-page {
        overflow-x: hidden;
        max-width: 100%;
    }

    /* DataTables 2.x layout on mobile */
    .dt-layout-row {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Search: no label, full width */
    .dt-layout-row:has(.dt-search),
    .dt-layout-row:has(.dt-search) .dt-layout-end,
    .dt-layout-row:has(.dt-search) .dt-layout-start,
    .dt-search {
        width: 100% !important;
        display: block !important;
    }
    .dt-search label { display: none; }
    .dt-search input {
        width: 100% !important;
        box-sizing: border-box;
        display: block;
    }

    .ts-btn {
        width: 100%;
        max-width: 100%;
        text-align: center;
        box-sizing: border-box;
    }

    /* Icon buttons always stay square — overrides the width:100% above */
    .ts-btn.ts-btn-icon {
        width: 42px;
        height: 42px;
        max-width: 42px;
        flex-shrink: 0;
        flex-basis: 42px;
    }

    /* ── Filter bar ── */
    .ts-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .ts-filter-bar .form-control,
    .ts-filter-bar .form-select {
        width: 100%;
        min-width: 0;
    }

    /* ── Keep table layout on mobile ── */
    .ts-approved-table.ts-table-fixed { display: table !important; }
    .ts-approved-table.ts-table-fixed thead { display: table-header-group !important; }
    .ts-approved-table.ts-table-fixed tbody { display: table-row-group !important; }
    .ts-approved-table.ts-table-fixed tbody tr { display: table-row !important; background: none; border: none; border-radius: 0; box-shadow: none; margin: 0; }
    .ts-approved-table.ts-table-fixed tbody td { display: table-cell !important; border-radius: 0 !important; }
    .ts-approved-table.ts-table-fixed tbody td::before { display: none !important; }

    /* ── Key-value table on mobile ── */
    .ts-kv-wrapper { display: block !important; min-width: 0 !important; }
    .ts-approved-table.ts-kv-table { display: block !important; width: 100% !important; }
    .ts-approved-table.ts-kv-table tbody { display: block !important; }
    .ts-approved-table.ts-kv-table tbody tr {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between;
        align-items: baseline;
        margin: 0 !important;
        padding: 8px 4px;
        border-bottom: 1px solid var(--ts-border);
        background: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    .ts-approved-table.ts-kv-table tbody td {
        display: block !important;
        border: none !important;
        padding: 0 !important;
        background: none !important;
    }
    .ts-approved-table.ts-kv-table tbody td::before { display: none !important; }
    .ts-approved-table.ts-kv-table tbody td:first-child {
        text-align: left !important;
        font-size: .85rem;
        border-radius: 0 !important;
    }
    .ts-approved-table.ts-kv-table tbody td:last-child {
        text-align: right !important;
        font-weight: 600;
        font-size: .85rem;
        border-radius: 0 !important;
    }
    .ts-approved-table.ts-kv-table tbody tr.pr-totals-row {
        background: var(--ts-total-bg) !important;
        border-radius: 6px !important;
        padding: 8px 8px;
        margin-top: 4px;
        border-color: var(--ts-total-border);
    }
    .ts-approved-table.ts-kv-table tbody tr.pr-totals-row td {
        font-weight: 700 !important;
    }

    /* ── Table → cards ── */
    .ts-approved-table thead {
        display: none;
    }

    .ts-approved-table,
    .ts-approved-table tbody,
    .ts-approved-table tfoot {
        display: block;
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
    }

    .ts-approved-table tbody tr {
        max-width: 100%;
        box-sizing: border-box;
    }

    .ts-approved-table tfoot tr {
        display: flex;
        flex-direction: column;
        background: var(--ts-total-bg);
        border: 1px solid var(--ts-total-border);
        border-radius: var(--ts-radius);
        margin-top: 4px;
        overflow: hidden;
    }

    .ts-approved-table tfoot tr td,
    .ts-approved-table tfoot tr th {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        text-align: right;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        border-top: none !important;
        border-bottom: 1px solid var(--ts-total-border) !important;
        padding: .6rem .9rem;
        font-size: .8rem;
        color: var(--ts-total-fg);
    }

    /* hide empty filler colspan cells in tfoot on mobile */
    .ts-approved-table tfoot tr td[data-label=""],
    .ts-approved-table tfoot tr th[data-label=""] { display: none; }

    .ts-approved-table tfoot tr td:last-child,
    .ts-approved-table tfoot tr th:last-child {
        border-bottom: none !important;
    }

    .ts-approved-table tbody tr {
        display: flex;
        flex-direction: column;
        background: var(--ts-card);
        border: 1px solid var(--ts-border);
        border-radius: var(--ts-radius);
        margin-bottom: 5px;
        overflow: hidden;
        box-shadow: var(--ts-shadow);
    }

    /* ToDo row left-border indicators on mobile cards */
    .ts-approved-table tbody tr.td-border-overdue { border-left: 4px solid var(--ts-danger-bright) !important; }
    .ts-approved-table tbody tr.td-border-priority { border-left: 4px solid var(--ts-warn) !important; }
    .ts-approved-table tbody tr.td-border-invoice { border-left: 4px solid var(--ts-primary) !important; }
    .ts-approved-table tbody tr.td-border-default { border-left: 4px solid #90a4ae !important; }
    .ts-approved-table tbody tr.td-border-overdue > td:first-child,
    .ts-approved-table tbody tr.td-border-priority > td:first-child,
    .ts-approved-table tbody tr.td-border-invoice > td:first-child,
    .ts-approved-table tbody tr.td-border-default > td:first-child { border-left: none !important; }
    .ts-approved-table tbody tr[class*="td-border-"] { margin-bottom: 7px; }

    .ts-approved-table tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border: none !important;
        border-radius: 0 !important;
        border-bottom: 1px solid var(--ts-border) !important;
        padding: .45rem .9rem;
        overflow-wrap: break-word;
        word-break: break-all;
        min-width: 0;
    }

        .ts-approved-table tbody td:last-child {
            border-bottom: none !important;
        }

        .ts-approved-table tbody td::before {
            content: attr(data-label);
            font-size: .7rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .05em;
            color: var(--ts-muted);
            min-width: 110px;
            flex-shrink: 0;
            text-align: left;
        }

    /* Name cell as card header */
    .ts-approved-table tbody td.us-name-cell {
        order: -1;
        background: var(--ts-header-bg);
        color: var(--ts-on-dark);
        font-weight: 700;
        font-size: .95rem;
        padding: 10px 14px;
        border-bottom: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

        .ts-approved-table tbody td.us-name-cell::before {
            display: none;
        }

    .ts-name-badge {
        display: inline-block;
        font-size: .82rem;
        font-weight: 800;
        color: var(--ts-on-dark);
        margin-left: auto;
        white-space: nowrap;
    }

    /* Suppress hover tint on mobile */
    .ts-approved-table tbody tr:hover td {
        background: inherit;
    }

    /* Restore name-cell header background even when parent row is touch-hovered */
    .ts-approved-table tbody tr:hover td.us-name-cell,
    .ts-approved-table tbody td.us-name-cell:hover {
        background: var(--ts-header-bg);
    }

    /* Action cell */
    .ts-approved-table tbody td.ts-action-cell {
        flex: 0 0 100% !important;
        box-sizing: border-box;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: .5rem;
        padding: .5rem 1rem;
    }

    .ts-approved-table tbody td.ts-action-cell::before,
    .ts-approved-table tbody td.ts-no-label::before {
        display: none;
    }

    .ts-approved-table tbody td.ts-no-label {
        display: block;
        position: relative;
    }

    /* Inline cells: display on same row on mobile */
    .ts-approved-table tbody tr:has(td.ts-inline-cell) {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .ts-approved-table tbody tr:has(td.ts-inline-cell) td.us-name-cell {
        flex: 0 0 100%;
    }

    .ts-approved-table tbody td.ts-inline-cell {
        flex: 1 1 auto;
        min-width: 0;
        border-bottom: none !important;
        display: flex;
        align-items: center;
    }

    .ts-approved-table tbody td.ts-inline-cell + td.ts-inline-cell {
        flex: 0 0 auto;
        justify-content: flex-end;
    }

    .ts-approved-table tbody tr:has(td.ts-inline-cell) td:not(.ts-inline-cell):not(.us-name-cell) {
        flex: 0 0 100%;
    }

    /* Compact table: single-line rows on mobile */
    .ts-compact-table tbody tr {
        flex-direction: row !important;
        align-items: center;
        justify-content: space-between;
        padding: 5px 12px;
        gap: 8px;
        margin-bottom: 3px;
    }

    .ts-compact-table tbody td {
        padding: 0 !important;
        border-bottom: none !important;
    }

    .ts-compact-table tbody td.ts-num {
        margin-left: auto;
        text-align: right;
    }

    /* Prevent task name overlapping the notes bubble on mobile */
    .td-task-name {
        padding-right: 58px;
    }

    /* Notes bubble at top-right of mobile card */
    .ts-notes-bubble {
        position: absolute;
        top: 8px;
        right: 10px;
        display: flex;
        align-items: center;
        gap: 4px;
        background: var(--ts-info-bg);
        color: var(--ts-info);
        border: 1px solid var(--ts-info-border);
        border-radius: 20px;
        padding: 2px 10px;
        font-size: .72rem;
        font-weight: 700;
        cursor: pointer;
        z-index: 1;
    }

    .ts-notes-inline {
        display: none;
    }

    .ts-approved-table tbody td.ts-action-cell > .inline-flex {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: .4rem;
        width: 100%;
        justify-content: flex-end;
    }

    .ts-approved-table tbody td.ts-action-cell > .inline-flex > .ts-btn,
    .ts-approved-table tbody td.ts-action-cell > .inline-flex > form {
        flex: 1 0 40%;
        box-sizing: border-box;
    }

    .ts-approved-table tbody td.ts-action-cell > .inline-flex > .ts-btn,
    .ts-approved-table tbody td.ts-action-cell > .inline-flex > form > .ts-btn {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }

    .ts-approved-table tbody td.ts-action-cell > .inline-flex > .ts-btn.ts-btn-icon,
    .ts-approved-table tbody td.ts-action-cell > .inline-flex > form > .ts-btn.ts-btn-icon {
        width: 42px;
        height: 42px;
        flex: 0 0 42px;
    }

    .ts-approved-table tbody td.ts-action-cell > .inline-flex > form:has(.ts-btn-icon) {
        flex: 0 0 auto;
    }

    /* Hide totals label cell on mobile */
    .ts-approved-table tbody tr.pr-totals-row td:first-child {
        display: none;
    }

    /* ── Modal on mobile — keep below fixed topbar ── */
    .ts-modal.show {
        padding-top: calc(66px + env(safe-area-inset-top)) !important;
        padding-bottom: 1rem !important;
        align-items: center !important;
        box-sizing: border-box;
    }

    .ts-modal .modal-dialog {
        margin: 0 1rem;
        width: calc(100% - 2rem);
        max-height: calc(100vh - 66px - env(safe-area-inset-top) - 2rem);
    }

    /* ── Modal on mobile ── */
    .ts-modal .modal-footer {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }

    .ts-modal .modal-footer > .ts-btn,
    .ts-modal .modal-footer > form {
        flex: 1 0 40%;
        box-sizing: border-box;
    }

    .ts-modal .modal-footer > form > .ts-btn {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }

    /* Keep table layout inside modals (no card transformation) */
    .ts-modal .ts-approved-table { display: table !important; width: 100%; }
    .ts-modal .ts-approved-table thead { display: table-header-group !important; }
    .ts-modal .ts-approved-table tbody { display: table-row-group !important; }
    .ts-modal .ts-approved-table tbody tr { display: table-row !important; background: none; border: none; border-radius: 0; box-shadow: none; margin: 0; }
    .ts-modal .ts-approved-table tbody td { display: table-cell !important; border: none !important; border-bottom: 1px solid var(--ts-border) !important; border-radius: 0 !important; padding: .5rem .6rem !important; font-size: .82rem; vertical-align: middle; }
    .ts-modal .ts-approved-table tbody td::before { display: none !important; }
    .ts-modal .ts-approved-table th { font-size: .68rem; }
    .ts-modal .ts-approved-table td:first-child,
    .ts-modal .ts-approved-table th:first-child { width: 35%; word-break: break-word; }
    .ts-modal .ts-2col-modal td:first-child,
    .ts-modal .ts-2col-modal th:first-child { width: 55%; }

    /* ── Balance tab: split columns desktop-only, combined on mobile ── */
    .bal-col-phone,
    .bal-col-contact { display: none !important; }
    .bal-col-mobile-contact {
        display: flex !important;
        flex: 1 1 auto !important;       /* fill row so outstanding stays right-aligned */
        justify-content: flex-start !important;
    }

    /* ── DataTables on mobile ── */
    .ts-page .dataTables_wrapper {
        display: flex;
        flex-direction: column;
        overflow-x: hidden;
        width: 100%;
    }

    .ts-page .dataTables_filter {
        order: -1;
        float: none;
        text-align: left;
        margin-bottom: .75rem;
        width: 100%;
        box-sizing: border-box;
    }

    .ts-page .dataTables_filter input {
        width: 100%;
        margin-left: 0;
        display: block;
        box-sizing: border-box;
    }

    .ts-page .dataTables_paginate {
        order: 3;
        float: none !important;
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center !important;
        align-items: center;
        gap: 3px;
        padding-top: .5rem;
        width: 95%;
        box-sizing: border-box;
        text-align: center;
    }

    .ts-page .dataTables_paginate span {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 3px;
    }

    .ts-page .dataTables_info {
        order: 4;
        float: none;
        text-align: center;
        padding-top: .25rem;
        font-size: .8rem;
        color: var(--ts-muted);
        width: 100%;
        box-sizing: border-box;
    }

    .ts-page .dataTables_length {
        order: 5;
        float: none;
        text-align: center;
        margin-top: .5rem;
    }

    /* ── Detail grid on mobile ── */
    .ts-detail-grid {
        grid-template-columns: 1fr;
    }

    .ts-detail-label {
        border-bottom: none;
        padding-bottom: .1rem;
        padding-top: .65rem;
    }

    .ts-detail-value {
        padding-top: 0;
        padding-bottom: .5rem;
    }

    /* ── Hide column header labels only in Quotation Items section ── */
    .qi-section .pi-header-row .us-label {
        display: none;
    }

    /* ── Project Items partial — keep rows inline on mobile ── */
    .pi-section .pi-header-row {
        display: none !important;
    }

    /* Show header row inside modals — no wrapping, single line */
    .ts-modal .pi-section .pi-header-row {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: .5rem;
    }

    /* Override user.css wrap rule for pi-item-rows inside modals */
    .ts-modal .modal-body .pi-section .pi-item-row {
        flex-wrap: nowrap !important;
    }

    .pi-section .pi-item-row {
        flex-direction: row !important;
        flex-wrap: nowrap;
        align-items: center;
        gap: .5rem;
    }

    .pi-section .pi-item-row .us-field {
        flex-shrink: 1;
    }

    .pi-section .pi-item-row .us-field:first-child {
        flex: 1 1 0;
        min-width: 0;
    }

    /* UOM column (3rd us-field) — 10px narrower on mobile */
    .pi-section .pi-item-row .us-field:nth-child(3) {
        flex: 0 0 65px !important;
        min-width: 0;
    }

    /* Rate column (2nd us-field) for ProjectItem on mobile */
    .pi-section:not(.qi-section) .pi-item-row .us-field:nth-child(2) {
        flex: 0 0 75px !important;
        min-width: 0;
    }

    .pi-section .pi-item-row .us-input {
        min-width: 0;
        width: 100%;
        box-sizing: border-box;
        font-size: .8rem;
        padding: 6px 8px;
    }

    /* ── Quotation Items — mobile: name on first row, inputs on second ── */
    .qi-section .pi-item-row {
        flex-wrap: wrap !important;
    }

    .qi-section .pi-item-row .us-field:first-child {
        flex: 1 1 100% !important;
        min-width: 0;
    }

    .qi-section .pi-item-row .us-field:nth-child(2) {
        flex: 1 1 0 !important;
        min-width: 0;
    }

    .qi-section .pi-item-row .us-field:nth-child(3) {
        flex: 1 1 0 !important;
        min-width: 0;
    }

    .qi-section .pi-item-row .us-field:nth-child(4) {
        flex: 0 0 55px !important;
        min-width: 0;
    }

    /* Hide Amount column on mobile */
    .qi-section .pi-item-row .us-field:nth-child(5) {
        display: none !important;
    }

    /* Hide qi-section header row on mobile */
    .qi-section .pi-header-row {
        display: none !important;
    }

    /* ProformaInvoice items — hide header row on mobile (overrides qi-section flex rule) */
    .pii-section .pi-header-row {
        display: none !important;
    }
}

/* ── Measurement Items partial ─────────────────────────────────── */
.mi-row-inner {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.mi-name {
    flex: 1 1 auto;
    min-width: 90px;
    font-weight: 600;
    font-size: .875rem;
}
.mi-inputs {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
}
.mi-add-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    font-size: .9rem;
    line-height: 1;
    flex: 0 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (max-width: 575.98px) {
    .mi-row-inner { flex-direction: column; align-items: stretch; }
    .mi-inputs { flex: 0 0 auto; align-self: flex-end; }
    .mi-wh-total { display: none !important; }
}

/* ── Attendance detail table — name + status cell ────────────────── */
.ts-modal .ai-detail-table .ai-name-status-td { display: flex; align-items: center; gap: .5rem; width: 50%; }
.ts-modal .ai-detail-table .ai-name-status-td .ai-emp-name { flex: 1; text-align: left; }
.ts-modal .ai-detail-table .ai-name-status-td .us-badge { margin-left: auto; flex-shrink: 0; }
.ts-modal .ai-detail-table .ai-detail-pair { display: flex; flex-direction: row; width: 100%; }
.ts-modal .ai-detail-table .ai-detail-pair .ai-detail-row { flex: 1; }

/* ── Attendance Items — mobile card layout ─────────────────────── */
@media (max-width: 767px) {
    .ai-header-row { display: none !important; }
    .ai-date-field { max-width: 100% !important; }
    .ai-date-nav { width: 100%; }
    .ai-date-nav #listdate { flex: 1; width: auto !important; }

    .ai-item-row {
        flex-direction: column !important;
        flex-wrap: wrap !important;
        padding: 0 !important;
        border: 1px solid var(--ts-border) !important;
        border-radius: var(--ts-radius);
        overflow: hidden;
        margin-bottom: .5rem;
    }

    .ai-item-row > .us-field {
        flex: 0 0 100% !important;
        width: 100%;
        min-width: 0 !important;
        padding: .4rem .65rem;
        border-bottom: 1px solid var(--ts-border-light) !important;
    }

    .ai-item-row > .us-field:last-child {
        border-bottom: none !important;
    }

    .ai-employee-col {
        background: var(--ts-header-bg) !important;
        padding: .5rem .75rem !important;
    }

    .ai-employee-col .us-label {
        color: var(--ts-on-dark) !important;
        font-weight: 700;
        font-size: .9rem;
        margin: 0;
    }

    .ai-item-row .us-select,
    .ai-item-row input.us-input {
        width: 100% !important;
    }

    .ai-billed-col {
        justify-content: flex-start !important;
        gap: .6rem !important;
    }

    .ai-billed-col .us-label {
        display: block !important;
        font-size: .875rem;
        margin: 0 !important;
    }

    /* Attendance detail modal table — mobile card layout */
    .ts-modal .ai-detail-table { display: block !important; }
    .ts-modal .ai-detail-table thead { display: none !important; }
    .ts-modal .ai-detail-table tbody { display: block !important; }
    .ts-modal .ai-detail-table tbody tr { display: flex !important; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--ts-border) !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; background: none !important; padding: .3rem 0; }
    .ts-modal .ai-detail-table tbody tr:last-child { border-bottom: none !important; }
    .ts-modal .ai-detail-table tbody td { display: inline-flex !important; align-items: center; border: none !important; border-radius: 0 !important; padding: .1rem .4rem !important; font-size: .85rem; }
    .ts-modal .ai-detail-table tbody td::before { display: none !important; }
    /* Merged Employee + Status cell — full width row, name left, badge right */
    .ts-modal .ai-detail-table tbody .ai-name-status-td { flex: 0 0 100% !important; width: 100% !important; display: flex !important; justify-content: space-between; align-items: center; gap: .5rem; padding: .3rem .4rem !important; font-weight: 600; }
    .ts-modal .ai-detail-table tbody .ai-name-status-td .ai-emp-name { flex: 1; text-align: left; }
    .ts-modal .ai-detail-table tbody .ai-name-status-td .us-badge { margin-left: auto; flex-shrink: 0; }
    /* Detail rows drop to full-width second line, left-aligned */
    .ts-modal .ai-detail-table tbody .ai-detail-td { flex: 0 0 100% !important; width: 100%; padding: 0 !important; display: flex !important; flex-direction: column; align-items: flex-start; gap: 0; }
    /* Each detail sub-row */
    .ts-modal .ai-detail-table .ai-detail-row { display: flex; align-items: center; gap: .4rem; padding: .15rem .4rem; border-top: 1px solid var(--ts-border-lighter); font-size: .82rem; width: 100%; text-align: left; }
    .ts-modal .ai-detail-table .ai-detail-row::before { content: attr(data-label); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ts-muted); min-width: 50px; flex-shrink: 0; }
    .ts-modal .ai-detail-table .ai-detail-row[data-label=""]::before { display: none; }

    /* Hide field row when its input/select is hidden (class or jQuery inline style) */
    .ai-item-row > .us-field:has(> input.display-none),
    .ai-item-row > .us-field:has(> select.display-none),
    .ai-item-row > .us-field:has(> input[style*="display: none"]),
    .ai-item-row > .us-field:has(> select[style*="display: none"]),
    .ai-item-row > .us-field:has(> input[style*="display:none"]),
    .ai-item-row > .us-field:has(> select[style*="display:none"]) {
        display: none !important;
    }
}

/* ── ToDo table card layout ─────────────────────────────────────── */
.td-task-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
    flex-wrap: wrap;
}
.td-date-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: .78rem;
    font-weight: 700;
    background: var(--ts-bg);
    color: var(--dm-fg-dark, var(--ts-dark));
    border: 1px solid var(--ts-border);
    white-space: nowrap;
    flex-shrink: 0;
}
.td-task-name {
    font-size: .95rem;
    margin-bottom: 4px;
}
.td-task-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── ToDo modals ───────────────────────────────────────────────── */
.td-modal-task-name {
    font-weight: 600;
    font-size: .95rem;
    color: var(--ts-text);
    background: var(--ts-surface);
    border-left: 3px solid var(--ts-primary);
    padding: .45rem .75rem;
    border-radius: 0 var(--ts-radius) var(--ts-radius) 0;
    margin-bottom: .25rem;
}
.ts-modal-confirm-text {
    color: var(--ts-muted);
    font-size: .9rem;
    margin-bottom: .65rem;
}

/* ── Processing / Loading spinner modals — always on top ── */
#processingModal,
#loadingModal {
    z-index: 2000 !important;
}
.td-note-list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-top: .75rem;
}
.td-note-card {
    border: 1px solid var(--ts-border);
    border-radius: var(--ts-radius);
    overflow: hidden;
}
.td-note-body {
    padding: .5rem .75rem;
    font-size: .9rem;
    color: var(--ts-text);
    white-space: pre-wrap;
}
.td-note-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .3rem .75rem;
    background: var(--ts-surface);
    border-top: 1px solid var(--ts-border-light);
    font-size: .75rem;
    color: var(--ts-muted);
    gap: .5rem;
}

/* ── Project Report Cards ── */
.pr-report-card {
    background: var(--ts-card);
    border: 1px solid var(--ts-border);
    border-radius: var(--ts-radius);
    padding: 14px 16px;
}

.pr-report-card-header {
    margin-top: 0;
    font-family: inherit;
    line-height: inherit;
    font-size: .88rem;
    font-weight: 700;
    color: var(--dm-fg-dark, var(--ts-dark));
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 2px solid var(--ts-accent);
}

.pr-stat-tile {
    flex: 1;
    min-width: 100px;
    text-align: center;
    background: var(--ts-bg);
    border-radius: var(--ts-radius);
    padding: 10px 8px;
}

.pr-stat-value {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--dm-fg-dark, var(--ts-dark));
    word-break: break-word;
}

.pr-stat-label {
    font-size: .75rem;
    color: var(--ts-muted);
    margin-top: 2px;
}

/* ── Tom Select: match us-input look ────────────────────────────────────── */
.ts-wrapper {
    width: 100%;
}
.ts-wrapper .ts-control {
    border: 1px solid var(--ts-border) !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    font-size: 0.875rem !important;
    font-family: inherit !important;
    background: var(--ts-input-bg) !important;
    color: var(--ts-text) !important;
    box-shadow: none !important;
    min-height: unset !important;
    cursor: pointer;
}
.ts-wrapper.focus .ts-control {
    border-color: var(--ts-accent) !important;
    box-shadow: 0 0 0 3px var(--ts-focus-halo) !important;
    outline: 2px solid var(--ts-focus-ring) !important; /* the ring goes on the box, not the bare inner input */
}
.ts-wrapper .ts-control input:focus-visible { outline: none !important; }
.ts-wrapper .ts-dropdown {
    border: 1px solid var(--ts-border) !important;
    border-radius: 8px !important;
    font-size: 0.875rem !important;
    font-family: inherit !important;
    color: var(--ts-text) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.08) !important;
    margin-top: 2px;
}
.ts-wrapper .ts-dropdown .option {
    padding: 8px 12px !important;
}
.ts-wrapper .ts-dropdown .option:hover,
.ts-wrapper .ts-dropdown .option.active {
    background: var(--ts-accent-bg) !important;
    color: var(--ts-text) !important;
}
.ts-wrapper .ts-dropdown .option.selected {
    background: var(--ts-accent) !important;
    color: var(--ts-on-accent) !important;
}
/* Remove double border when a us-input div wraps a Tom Select element */
.us-input:has(.ts-wrapper) {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* ── dropdown-field: filter-bar selects match input height ── */
select.dropdown-field {
    border: 1px solid var(--ts-border);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: .875rem;
    line-height: 1.5;
    height: calc(1.5em + 14px);
    background: var(--ts-input-bg);
    color: var(--ts-text);
    box-sizing: border-box;
    appearance: auto;
    vertical-align: middle;
}

/* ── Quotations: pipeline & lifecycle ───────────────────────────────────── */
.qt-alert {
    display: block;
    margin-bottom: .75rem;
    padding: .5rem .75rem;
    white-space: normal;
}

.qt-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.qt-stat { border-left: 3px solid var(--ts-border-hover); }
.qt-stat-open { border-left-color: var(--ts-primary); }
.qt-stat-won { border-left-color: var(--ts-success); }
.qt-stat-won .pr-stat-value { color: var(--ts-success); }
.qt-stat-lost { border-left-color: var(--ts-danger); }
.qt-stat-rate { border-left-color: var(--ts-accent); }
.qt-stat-follow { border-left-color: var(--ts-warn); }

.qt-action-col { width: 1%; white-space: nowrap; }

.qt-actions {
    gap: .4rem;
    flex-wrap: nowrap;
    align-items: center;
}

.qt-download { padding: 2px 10px; font-size: .8rem; }

.qt-textarea { resize: none; }

.qt-modal-body {
    display: grid;
    gap: .75rem;
}

.qt-hint {
    margin: 0;
    font-size: .78rem;
    color: var(--ts-muted);
}

.qt-section { margin-top: 1rem; }

.qt-timeline {
    list-style: none;
    margin: .25rem 0 0;
    padding: 0;
    display: grid;
    gap: .5rem;
    font-size: .85rem;
}

    .qt-timeline li {
        border-left: 2px solid var(--ts-border);
        padding-left: .6rem;
    }

.qt-timeline-meta {
    display: block;
    font-size: .72rem;
    color: var(--ts-muted);
}

.qt-revision-note {
    font-size: .8rem;
    color: var(--ts-warn);
    margin-top: .25rem;
}


.qt-form-wrap { max-width: 780px; }
.qt-form-panel { max-width: none; }
.qt-form-number { padding: 0 0 1rem; }
.qt-form-number-text { font-size: 1.15rem; font-weight: 600; }

/* ── Ledger report ───────────────────────────────────────────────────────── */
.lg-type-badge {
    font-size: .72rem;
    display: inline-block;
    min-width: 60px;
    text-align: center;
}
.lg-type-wide { min-width: 70px; }

/* ── e-Invoice (IRN) page ────────────────────────────────────────────────── */
.ei-wrap { max-width: 860px; }
.ei-panel { max-width: none; margin-bottom: 1rem; }
.ei-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; word-break: break-all; }
.ei-state { display: flex; gap: .5rem; align-items: baseline; margin: 0 0 .5rem; font-weight: 600; }
.ei-state-good { color: var(--ts-success); }
.ei-state-bad { color: var(--ts-danger); }
.ei-list { margin: 0 0 .5rem; padding-left: 1.2rem; display: grid; gap: .3rem; font-size: .88rem; }
.ei-list-bad { color: var(--ts-danger); }
.ei-list-warn { color: var(--ts-warn); }
.ei-details { margin-top: .75rem; }
.ei-details summary { cursor: pointer; font-size: .85rem; color: var(--ts-primary); }
.ei-json {
    max-height: 320px;
    overflow: auto;
    background: var(--ts-bg);
    border: 1px solid var(--ts-border);
    border-radius: var(--ts-radius);
    padding: .75rem;
    font-size: .75rem;
    margin-top: .5rem;
}
.ei-cancel { margin-top: 1rem; display: grid; gap: .5rem; }

/* ── Receivables: ageing, statements, allocation ─────────────────────────── */
.rv-wrap { max-width: 980px; }
.rv-table { font-variant-numeric: tabular-nums; }
.rv-sub { display: block; font-size: .72rem; color: var(--ts-muted); font-weight: 400; }
.rv-strong { font-weight: 700; }
.rv-danger { color: var(--ts-danger); }
.rv-warn { color: var(--ts-warn); }
.rv-total-row td { font-weight: 700; border-top: 2px solid var(--ts-border-hover); }
.rv-footnote { margin-top: .75rem; max-width: 80ch; }
.rv-section { margin-top: 1rem; }
.rv-settled summary { cursor: pointer; font-size: .85rem; color: var(--ts-primary); }
.rv-notice {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--ts-warn-border);
    background: var(--ts-warn-bg);
    border-radius: var(--ts-radius);
    font-size: .88rem;
}
.rv-col-input { width: 170px; }
.rv-date { margin-top: 4px; }
.rv-summary {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 2rem;
    justify-content: flex-end;
    margin: 1rem 0;
    font-variant-numeric: tabular-nums;
}
.rv-summary .us-label { display: inline; margin-right: .35rem; }

/* ── Toast ───────────────────────────────────────────────────────────────── */
/* Top right on desktop; on tablets and phones across the top, just under the navy bar, so it never sits
   over the sticky Save bar or the middle of a form (site.js also scrolls a focused field out from under it). */
.app-toast {
    position: fixed;
    right: 24px;
    top: calc(80px + var(--toast-offset, 0px));   /* offset: below the offline banner when it shows (site.js) */
    z-index: 2000;
    display: flex;
    align-items: center;
    gap: .75rem;
    max-width: min(560px, calc(100vw - 32px));
    padding: .7rem .9rem .7rem 1rem;
    border-radius: var(--ts-radius);
    background: var(--ts-toast-bg);
    color: var(--ts-on-dark);
    border: 1px solid var(--ts-toast-border);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
    font-size: .9rem;
}
.app-toast[hidden] { display: none; }
.app-toast-error { background: var(--ts-toast-danger-bg); }
@media (max-width: 991.98px) {
    .app-toast {
        top: calc(60px + env(safe-area-inset-top, 0px) + 8px + var(--toast-offset, 0px));
        left: 16px;
        right: 16px;
        width: auto;
        max-width: none;
    }
}
.app-toast-close {
    background: none;
    border: 0;
    color: inherit;
    font-size: 1.3rem;
    line-height: 1;
    min-width: 32px;
    min-height: 32px;
    cursor: pointer;
}

/* ── Attendance bulk actions ─────────────────────────────────────────────── */
.ai-bulk-bar {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .75rem;
}
.ai-bulk-bar .ts-btn { min-height: 40px; }

.pf-stat[data-pf-modal]:focus-visible { outline: 2px solid var(--ts-primary); outline-offset: 2px; }

/* ── Skip link: first thing a keyboard user reaches ──────────────────────── */
.skip-link {
    position: absolute;
    left: 8px;
    top: -48px;
    z-index: 3000;
    padding: .5rem .9rem;
    background: var(--ts-dark);
    color: var(--ts-on-dark);
    border-radius: var(--ts-radius);
    text-decoration: none;
}
.skip-link:focus { top: 8px; color: var(--ts-on-dark); }
#main-content:focus { outline: none; }

/* ── Keyboard focus: one visible ring on everything that can take focus ──────
   --ts-focus-ring is 3:1 or more on every surface (6:1 on white, 7.8:1 on the dark
   card). !important because legacy rules (Bootstrap 4 leftovers in site.css and
   Bootstrap 5's own `outline: 0`) removed it; components may still set their own
   outline-offset (e.g. -3px inside scrolling rows) and add a halo. */
:focus-visible {
    outline: 2px solid var(--ts-focus-ring) !important;
    outline-offset: 2px;
}
/* The sidebar and phone top bar are light (dark in dark mode): their own ring token. On navy fills
   (skip link, navy modal headers) the ring turns light blue. */
#sidebar :focus-visible { outline-color: var(--ts-nav-focus-ring) !important; }
.skip-link:focus-visible,
.modal-header :focus-visible {
    outline-color: var(--ts-focus-ring-inverse) !important;
}
@media (max-width: 991.98px) {
    .nv-topbar > :focus-visible,
    .nv-topbar-actions > :focus-visible,
    .nv-topbar-actions > .dropdown > :focus-visible { outline-color: var(--ts-nav-focus-ring) !important; }
}
/* Fields sit flush: the ring hugs the border instead of floating 2px away. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible { outline-offset: 0; }
/* Search boxes in menus (View as, the top bar's search panel): the ring goes on the box, not the bare input. */
.va-filter:focus-visible { outline: none !important; }
.va-search:focus-within { outline: 2px solid var(--ts-focus-ring); outline-offset: 1px; }
#main-content:focus-visible { outline: none !important; }

/* ── Delivery challan item filter ────────────────────────────────────────── */
.dc-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    align-items: center;
    margin-bottom: .75rem;
}
.dc-filter-bar .us-input { flex: 1 1 220px; max-width: 360px; }
.dc-filter-toggle { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; cursor: pointer; margin: 0; }
.dc-filtered-out { display: none !important; }

/* Report filters stack on phones instead of overflowing. */
@media (max-width: 576px) {
    .pr-filter-row > .us-field { flex: 1 1 100% !important; }
    .pr-filter-row .daterange.w-200px { width: auto !important; flex: 1 1 0; min-width: 0; }
}

/* ── Status pages: error, not found, no access (Views/Shared/_StatusCard.cshtml) ── */
.ep-card {
    max-width: 640px;
    margin: 2rem auto;
    padding: 56px 24px;
    background: var(--ts-card);
    border: 1px solid var(--ts-border);
    border-radius: 14px;
    text-align: center;
    display: grid;
    gap: 14px;
    justify-items: center;
}
.ep-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 20px;
    background: var(--ts-primary-light);
    color: var(--ts-primary);
    font-size: 30px;
}
.ep-code { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ts-muted); }
.ep-title { margin: 0; font-size: 24px; font-weight: 700; color: var(--ts-text-dark); text-wrap: balance; }
.ep-body { margin: 0; max-width: 46ch; font-size: 14px; color: var(--ts-muted); }
.ep-ref { margin: 0; font-size: .8rem; color: var(--ts-muted); }
.ep-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 6px; }
@media (max-width: 575.98px) {
    .ep-card { margin: 1rem 0; padding: 40px 18px; }
    .ep-title { font-size: 20px; }
}

/* ── Quick date chips ───────────────────────────────────────────────────── */
.quick-dates { display: flex; gap: .4rem; margin-top: .35rem; }
.quick-date-chip {
    border: 1px solid var(--ts-border);
    background: var(--ts-card);
    color: var(--ts-text);
    border-radius: 20px;
    padding: 3px 12px;
    font-size: .8rem;
    min-height: 32px;
    cursor: pointer;
}
.quick-date-chip:hover { border-color: var(--ts-border-hover); }

.mi-subtotal { display: block; font-size: .75rem; color: var(--ts-muted); }
.mi-subtotal[hidden] { display: none; }
.dc-available { display: block; font-size: .72rem; color: var(--ts-muted); font-weight: 400; }
.dc-over .dc-available { color: var(--ts-danger); font-weight: 600; }
.dc-over .dc-quantity { border-color: var(--ts-danger); }
.range-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }

.ii-add-line { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; margin: .75rem 0; }
.ii-add-line .us-label { width: 100%; margin: 0; }
.ii-add-line select { flex: 1 1 220px; max-width: 360px; }

/* Invoice form: how the scaffolding-rental quantity was worked out (site.js, Invoice/RentalQuantity). The notes are
   .us-hint text; warnings add the .tone-warn wash. */
.ii-rental-note { font-weight: 400; }
.ii-rental-note.tone-warn { padding: .3rem .5rem; border-radius: calc(var(--ts-radius) / 2); }
.ii-rental-summary { display: grid; gap: .4rem; margin: 0 0 .75rem; }
.ii-rental-recalc { margin: 0 0 .75rem; }

/* ── Dashboard: Today board ─────────────────────────────────────────────── */
.today-board { margin-bottom: 1.25rem; }
.today-title { font-size: 1rem; font-weight: 700; color: var(--ts-text-dark); margin: 0 0 .6rem; }
.today-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .6rem; }
.today-card {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: .6rem;
    align-items: center;
    text-align: left;
    padding: .75rem .9rem;
    border: 1px solid var(--ts-border);
    border-left-width: 4px;
    border-radius: var(--ts-radius);
    background: var(--ts-card);
    color: var(--ts-text);
    text-decoration: none;
    min-height: 64px;
    cursor: pointer;
}
.today-card i { grid-row: span 2; font-size: 1.2rem; color: var(--ts-muted); }
.today-card-main { font-weight: 600; color: var(--ts-text-dark); }
.today-card-sub { font-size: .78rem; color: var(--ts-muted); }
.today-card:hover { border-color: var(--ts-border-hover); color: var(--ts-text); }
.today-card:focus-visible { outline: 2px solid var(--ts-primary); outline-offset: 2px; }
.today-ok { border-left-color: var(--ts-success); }
.today-todo { border-left-color: var(--ts-warn); }

/* Quick navigation on phones: two tiles per row. */
@media (max-width: 768px) {
    .pf-quicklinks-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ── Dark mode (opt-in from the top bar; stored per device) ─────────────────
   Light mode is untouched: the --dm-* variables below exist only here, and every
   hard-coded light surface or dark text colour in the stylesheets falls back to
   its original value when they are not defined. */
@media screen { /* screen only: printing always uses the light palette (see the print reset below) */
:root[data-theme="dark"] {
    color-scheme: dark;
    --ts-brand-from: #eaf1fa;  /* brand title gradient starts light on the dark ground */
    --ts-age-notdue: #7fa6d4;
    --ts-age-30: #d9a21b;
    --ts-age-60: #f08a3e;
    --ts-age-90: #f0643c;
    --ts-star: var(--ts-warn);
    --ts-backdrop: rgba(0,0,0,.6);
    --ts-chart-1: #7fa6d4;
    --ts-chart-2: #d9a21b;
    --ts-att-ot: #fb923c;
    --ts-att-ot2: #c084fc;

    /* Accent and buttons */
    --ts-accent: #3f66d6;           /* white text 5.1:1 */
    --ts-accent-hover: #4a70de;     /* white text 4.5:1 */
    --ts-accent-dark: #3358c4;      /* pressed */
    --ts-accent-bg: #1c2a4a;
    --ts-accent-shadow: 0 2px 8px rgba(0,0,0,.3);
    --ts-accent-shadow-hover: 0 0 0 1px rgba(143,176,255,.35), 0 6px 16px rgba(63,102,214,.45);
    --ts-on-accent: #ffffff;
    --ts-accent-text: #8fb0ff;      /* 7.9:1 on the dark card */
    --ts-brand-accent: #fdba8c;
    --ts-focus-ring-inverse: #8fb0ff;
    --ts-focus-halo: rgba(143,176,255,.18);
    --ts-focus-gap: #141d30;
    --ts-btn-focus-ring: #8fb0ff;
    --ts-btn-disabled-bg: #1c2640;
    --ts-btn-disabled-fg: #6f7a96;
    --ts-btn-outline-bg: #141d30;
    --ts-btn-outline-border: #253252;
    --ts-btn-outline-fg: #8fb0ff;
    --ts-btn-outline-hover-bg: #1c2a4a;
    --ts-btn-outline-hover-border: #3a4e7a;
    --ts-btn-outline-hover-fg: #b7cbff;
    --ts-btn-outline-active-bg: #1f2c4a;
    --ts-on-fill: #0c1220;          /* the other fills (primary, success, danger) lighten in dark mode, so their text goes dark */
    --ts-link-hover: #b7cbff;

    /* Page, cards and text */
    --ts-card: #141d30;
    --ts-bg: #0c1220;
    --ts-bg-alt: #1c2640;
    --ts-table-alt: #19223a;
    --ts-input-bg: #111a2c;
    --ts-hover-bg: #1a2439;
    --ts-text: #c9d2e6;
    --ts-text-dark: #e3e8f4;
    --ts-sub: #9aa6c2;
    --ts-muted: #9aa6c2;            /* 6.9:1 on the card */
    --ts-muted-text: #9aa6c2;
    --ts-muted-light: #7b87a3;
    --ts-placeholder: #5f6a86;
    --ts-border: #253252;
    --ts-border-light: #253252;
    --ts-border-lighter: #1c2640;
    --ts-border-hover: #3a4e7a;
    --ts-primary: #8fb0ff;
    --ts-primary-light: #1c2a4a;
    --ts-dark-text: var(--ts-text-dark);

    /* Status */
    --ts-success: #6fd39a;
    --ts-success-bg: #143325;
    --ts-success-border: rgba(111,211,154,.3);
    --ts-danger: #f48a9b;
    --ts-danger-bg: #3a1e2a;
    --ts-danger-border: rgba(244,138,155,.3);
    --ts-warn: #e8c067;
    --ts-warn-bg: #352b14;
    --ts-warn-border: rgba(232,192,103,.3);
    --ts-info: #8fb0ff;
    --ts-info-bg: #1c2a4a;
    --ts-info-border: #3a4e7a;
    --ts-info-hover: #1f2c4a;
    --ts-toast-bg: var(--ts-dark);   /* navy, white text 13.6:1; lifts off the dark page */
    --ts-toast-danger-bg: #991b1b;   /* white text 8.3:1 (the pastel dark-mode red would be 2.3:1) */
    --ts-toast-border: #3a4e7a;
    --ts-sky: #38bdf8;
    --ts-sky-bg: #10202c;
    --ts-sky-border: #1e4a63;
    --ts-indigo: #a5b4fc;
    --ts-indigo-fill: #4f46e5;
    --ts-indigo-border: #3b3f7a;
    --ts-violet: #c084fc;
    --ts-ot-morning-bg: #b45309;
    --ts-ot-evening-bg: #8e44ad;

    /* Shell */
    --ts-nav-bg: #101828;
    --ts-nav-border: #253252;
    --ts-nav-shadow: none;
    --ts-nav-fg: #b8c3dc;            /* 10:1 */
    --ts-nav-fg-hover: #e3e8f4;
    --ts-nav-fg-muted: #9aa6c2;      /* 7.6:1 */
    --ts-nav-hover: rgba(255,255,255,.05);
    --ts-nav-divider: #1e293f;
    --ts-nav-active-bg: #1f2c4a;
    --ts-nav-active-fg: #e3e8f4;     /* 11.3:1 */
    --ts-nav-search-bg: #141d30;
    --ts-nav-search-bg-focus: #141d30;
    --ts-nav-search-border: #253252;
    --ts-nav-search-fg: #e3e8f4;
    --ts-wordmark: #e3e8f4;
    --ts-wordmark-tagline: #b8c3dc;
    --ts-topbar-mobile-bg: #101828;
    --ts-topbar-mobile-fg: #e3e8f4;
    --ts-topbar-mobile-btn: #141d30;
    --ts-topbar-mobile-btn-border: #253252;
    --ts-selected-bg: #1c2a4a;

    /* Today panel */
    --ts-panel-bg: #1a2744;
    --ts-panel-fg: #e3e8f4;
    --ts-panel-muted: #9aa6c2;       /* 6.1:1 */
    --ts-panel-divider: rgba(255,255,255,.08);
    --ts-panel-icon-bg: rgba(255,255,255,.08);
    --ts-panel-link: #8fb0ff;
    --ts-panel-band-bg: #8fb0ff;
    --ts-panel-band-fg: #0c1220;     /* 8.8:1 */

    /* Sign-in brand panel */
    --ts-auth-art-tube: rgba(255,255,255,.08);
    --ts-auth-art-brace: rgba(253,186,140,.28);
    --ts-auth-point-bg: #1f2c4a;
    --ts-auth-point-fg: #8fb0ff;
    --dm-on-accent: var(--ts-on-accent);   /* legacy name: text on accent fills */
    --dm-fg-dark: var(--ts-text-dark);
    --dm-bg-e8eaf0: var(--ts-bg-alt);
    --dm-bg-e8f0fe: var(--ts-bg-alt);
    --dm-bg-e9ecef: var(--ts-bg-alt);
    --dm-bg-eef0f8: var(--ts-bg-alt);
    --dm-bg-f0f0f0: var(--ts-bg-alt);
    --dm-bg-f0f4ff: var(--ts-bg-alt);
    --dm-bg-f0f9ff: var(--ts-card);
    --dm-bg-f3f4f5: var(--ts-bg-alt);
    --dm-bg-f4f5f8: var(--ts-bg-alt);
    --dm-bg-f4f6fc: var(--ts-bg-alt);
    --dm-bg-f5f5f5: var(--ts-bg-alt);
    --dm-bg-f5f7fa: var(--ts-bg-alt);
    --dm-bg-f8f9fa: var(--ts-card);
    --dm-bg-f8f9fb: var(--ts-card);
    --dm-bg-f9fafb: var(--ts-card);
    --dm-bg-fafafa: var(--ts-card);
    --dm-bg-fafbff: var(--ts-card);
    --dm-bg-fff: var(--ts-card);
    --dm-bg-fff3cd: var(--ts-bg-alt);
    --dm-fg-000: var(--ts-text);
    --dm-fg-000000: var(--ts-text);
    --dm-fg-002647: var(--ts-text);
    --dm-fg-003c62: var(--ts-text);
    --dm-fg-0056b3: var(--ts-primary);
    --dm-fg-15803d: var(--ts-success);
    --dm-fg-1a2540: var(--ts-text);
    --dm-fg-1a73e8: var(--ts-primary);
    --dm-fg-212529: var(--ts-text);
    --dm-fg-2c3e50: var(--ts-text);
    --dm-fg-3b5bdb: var(--ts-info);
    --dm-fg-495057: var(--ts-text);
    --dm-fg-6366f1: var(--ts-indigo);
    --dm-fg-666: var(--ts-muted);
    --dm-fg-6c757d: var(--ts-muted);
    --dm-fg-777: var(--ts-muted);
    /* Status colours keep their meaning in dark mode (they used to all turn into body text). */
    --dm-fg-7a5b00: var(--ts-warn);
    --dm-fg-8e44ad: var(--ts-violet);
    --dm-fg-92400e: var(--ts-warn);
    --dm-fg-b91c1c: var(--ts-danger);
    --dm-fg-c0392b: var(--ts-danger);
    --dm-fg-dc2626: var(--ts-danger);
    --dm-fg-dc3545: var(--ts-danger);
    --dm-bd-e2e6f0: var(--ts-border);
    --dm-bd-e8eaf0: var(--ts-border);
    --dm-bd-e8f0fe: var(--ts-border);
    --dm-bd-e9ecef: var(--ts-border);
    --dm-bd-eaecf0: var(--ts-border);
    --dm-bd-eee: var(--ts-border);
    --dm-bd-eef0f4: var(--ts-border);
    --dm-bd-f0f2f7: var(--ts-border);
    --dm-bd-ffe08a: var(--ts-border);
    --dm-bd-fff: var(--ts-border);
}
} /* @media screen */

/* ── Print: always the light palette ──
   The dark tokens above are screen-only, so a dark-theme page prints with the light
   tokens. Bootstrap's own dark variables (data-bs-theme="dark") are reset here too. */
@media print {
    :root,
    :root[data-theme="dark"],
    [data-bs-theme="dark"] {
        color-scheme: light;
        --bs-body-color: var(--ts-text);
        --bs-body-bg: var(--ts-card);
        --bs-emphasis-color: var(--ts-text-dark);
        --bs-secondary-color: var(--ts-muted);
        --bs-tertiary-color: var(--ts-muted);
        --bs-secondary-bg: var(--ts-bg);
        --bs-tertiary-bg: var(--ts-bg);
        --bs-border-color: var(--ts-border);
        --bs-heading-color: inherit;
        --bs-link-color: var(--ts-link);
        --ts-page-bg: var(--ts-card);
    }
    /* Paper is white: no grey page ground behind the printed cards and tables. */
    html,
    body,
    .wrapper,
    #content,
    .nv-body,
    .ts-page {
        background: var(--ts-card) !important;
    }
}
:root[data-theme="dark"] body,
:root[data-theme="dark"] #content,
:root[data-theme="dark"] .wrapper { background: var(--ts-bg); color: var(--ts-text); }
:root[data-theme="dark"] .ts-approved-table,
:root[data-theme="dark"] .ts-approved-table td,
:root[data-theme="dark"] .ts-approved-table th { color: var(--ts-text); border-color: var(--ts-border); }
:root[data-theme="dark"] img.nv-logo-img,
:root[data-theme="dark"] .lg-logo { filter: brightness(1.1); }   /* unused: the sidebar and sign-in pages show a text wordmark, not an image */

/* ── Semantic tones (replace the hex-named utilities such as u-bg-fff3cd / u-c-7a5b00) ──
   Text on the tint passes AA in both themes: --ts-warn is 5.0:1 on the gold wash in light mode. */
.tone-warn {
    color: var(--ts-warn);
    background: var(--ts-warn-bg);
    border: 1px solid var(--ts-warn-border);
}
.us-badge-violet { background: var(--ts-violet); color: var(--ts-on-fill); }   /* 5.9:1 light; dark fill takes dark ink */
.us-input.us-input-static { background: var(--ts-bg); }                         /* a read-only value shown like a field */
.rp-subtotal-cell { background: var(--ts-table-alt) !important; }   /* over the table's own cell fill, as the utility it replaces did */
.ts-icon-dim { opacity: .65; }

/* ── Money: one "high outstanding" flag, in words as well as colour (Clients list, dashboard dialog) ── */
.ts-amount-danger { color: var(--ts-danger); font-weight: 600; }
.over-limit {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-left: .4rem;
    padding: .05rem .5rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    color: var(--ts-tone-danger-fg);
    background: var(--ts-tone-danger-bg);
}
.ob-right .over-limit { margin: .2rem 0 0; }
.ra-split-meta .over-limit { grid-column: 1 / -1; grid-row: 3; justify-self: start; margin: 0; }   /* its own line on a compact list row */