/* PatriotLPR.Client base + buttons. Tokens come from theme.css (linked before this file).
   Buttons ported from TowSmart.Client app.css + TowDriverDashboardV2 btn-*-pro, re-tokened. No green/red. */

/* ---------- Base font + ultra-compact density ---------- */
html, body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 0.875rem;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

a { color: var(--accent); }
a:hover { color: var(--accent-hover); }

.table { --bs-table-bg: var(--card-bg); --bs-table-color: var(--text-primary); --bs-table-hover-color: var(--text-primary); --bs-table-hover-bg: var(--accent-soft); border-color: var(--border-color); }
.table > :not(caption) > * > * { font-size: 0.8125rem; padding: 0.3rem 0.5rem; border-color: var(--border-color); }
.table thead th { background-color: var(--surface-2); color: var(--text-secondary); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.02em; }
/* Compact tables stay single-line: inside a .table-responsive scroller the table scrolls sideways instead of wrapping.
   .cell-clip caps a long text cell with an ellipsis (pair it with a title= tooltip for the full value). */
.table-responsive > .table > :not(caption) > * > * { white-space: nowrap; }
.cell-clip { display: inline-block; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }

.card { background-color: var(--card-bg); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: 0.5rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); transition: box-shadow 0.3s ease; }
.card:hover { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12); }

.form-control, .form-select { border-radius: 0.375rem; border: 1px solid var(--border-color); background-color: var(--card-bg); color: var(--text-primary); font-size: 0.8125rem; transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.form-control:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 0.2rem var(--accent-soft); background-color: var(--card-bg); color: var(--text-primary); }

/* ---------- Buttons (TowSmart .btn; compact: every button is .btn-sm size, 28px) ---------- */
.btn {
    --bs-btn-padding-y: 0.25rem;
    --bs-btn-padding-x: 0.625rem;
    --bs-btn-font-size: 0.8125rem;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    border-radius: 0.375rem;
    font-weight: 500;
    line-height: 1.2;
    transition: all 0.3s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:disabled, .btn.disabled { transform: none; }
.btn-sm { --bs-btn-padding-y: 0.25rem; --bs-btn-padding-x: 0.5rem; --bs-btn-font-size: 0.8125rem; height: 28px; min-height: 28px; }
.btn-lg { --bs-btn-padding-y: 0.5rem; --bs-btn-padding-x: 1rem; --bs-btn-font-size: 0.9375rem; min-height: 36px; }

.btn-primary {
    --bs-btn-bg: var(--btn-primary-bg); --bs-btn-border-color: var(--btn-primary-bg); --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--btn-primary-hover); --bs-btn-hover-border-color: var(--btn-primary-hover); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--btn-primary-hover); --bs-btn-active-border-color: var(--btn-primary-hover); --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: var(--surface-2); --bs-btn-disabled-border-color: var(--border-color); --bs-btn-disabled-color: var(--text-secondary); --bs-btn-disabled-opacity: 1;
}
.btn-secondary {
    --bs-btn-bg: var(--surface-2); --bs-btn-border-color: var(--border-color); --bs-btn-color: var(--text-primary);
    --bs-btn-hover-bg: var(--border-color); --bs-btn-hover-border-color: var(--border-color); --bs-btn-hover-color: var(--text-primary);
    --bs-btn-active-bg: var(--border-color); --bs-btn-active-border-color: var(--border-color); --bs-btn-active-color: var(--text-primary);
    --bs-btn-disabled-bg: var(--surface-2); --bs-btn-disabled-border-color: var(--border-color); --bs-btn-disabled-color: var(--text-secondary);
}
.btn-outline-primary {
    --bs-btn-color: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-bg: transparent;
    --bs-btn-hover-bg: var(--btn-primary-bg); --bs-btn-hover-border-color: var(--btn-primary-bg); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--btn-primary-hover); --bs-btn-active-border-color: var(--btn-primary-hover); --bs-btn-active-color: #fff;
}
.btn-outline-secondary {
    --bs-btn-color: var(--text-secondary); --bs-btn-border-color: var(--border-color); --bs-btn-bg: transparent;
    --bs-btn-hover-bg: var(--surface-2); --bs-btn-hover-border-color: var(--border-color); --bs-btn-hover-color: var(--text-primary);
    --bs-btn-active-bg: var(--surface-2); --bs-btn-active-border-color: var(--border-color); --bs-btn-active-color: var(--text-primary);
}
.btn-link { --bs-btn-color: var(--accent); --bs-btn-hover-color: var(--accent-hover); }

/* ---------- TowSmart "pro" buttons (TowDriverDashboardV2 btn-clock-pro / btn-text-pro) ---------- */
.btn-clock-pro {
    background: var(--btn-primary-bg);
    border: 1px solid var(--btn-primary-bg);
    border-radius: 8px;
    padding: 0.375rem 0.75rem;
    min-height: 28px;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    transition: all 0.3s ease;
    cursor: pointer;
}
.btn-clock-pro:hover { background: var(--btn-primary-hover); border-color: var(--btn-primary-hover); transform: translateY(-1px); }
.btn-clock-pro:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.btn-clock-pro i { font-size: 1rem; }
/* On the dark sidebar gradient / banners: TowSmart's original translucent look */
.btn-clock-pro.on-dark { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.3); color: var(--sidebar-text); }
.btn-clock-pro.on-dark:hover { background: rgba(255, 255, 255, 0.25); border-color: rgba(255, 255, 255, 0.4); }
.btn-clock-pro.ghost { background: transparent; border-color: var(--border-color); color: var(--text-primary); }
.btn-clock-pro.ghost:hover { background: var(--surface-2); }

.btn-text-pro { display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; }
.btn-main { font-weight: 600; line-height: 1; }
.btn-sub { font-size: 0.7rem; opacity: 0.8; line-height: 1; }

/* ---------- Validation (no green/red: accent = valid, navy / near-white = invalid) ---------- */
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--accent); }
.invalid { outline: 1px solid var(--text-primary); }
.validation-message { color: var(--text-primary); font-weight: 600; }

#blazor-error-ui {
    background: var(--surface-2);
    color: var(--text-primary);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

/* Touch / narrow screens: bigger tap targets, desktop stays compact.
   Checkboxes, radios and switches keep a small visible box; a transparent border widens the hit area to ~36px. */
@media (pointer: coarse), (max-width: 767.98px) {
    .form-check { padding-left: 0; }
    .form-check .form-check-input { float: none; margin-left: 0 !important; margin-right: .25rem; }

    .form-check-input[type="checkbox"]:not([role="switch"]),
    .form-check-input[type="radio"] {
        width: 36px !important;
        height: 36px !important;
        border: 8px solid transparent !important;
        border-radius: 12px;
        background-clip: padding-box;
        box-shadow: inset 0 0 0 1px var(--border-color);
        vertical-align: middle;
        margin-top: 0;
    }
    .form-check-input[type="radio"] { border-radius: 50%; }

    .form-switch .form-check-input,
    .form-check-input[role="switch"] {
        width: 56px !important;
        height: 36px !important;
        border: 8px solid transparent !important;
        border-radius: 18px;
        background-clip: padding-box;
        box-shadow: inset 0 0 0 1px var(--border-color);
        vertical-align: middle;
        margin-top: 0;
    }

    .form-check-input:focus { box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 .2rem var(--accent-soft); }

    .btn, .icon-btn, .page-link { min-height: 36px; min-width: 36px; }
    .btn-close, .app-toast-close, .dropdown-item { min-height: 36px; }
    .btn-close, .app-toast-close { min-width: 36px; box-sizing: border-box; }
    .dropdown-item { display: flex; align-items: center; gap: .4rem; }
    .btn.p-0 { display: inline-flex; align-items: center; justify-content: center; }
}

/* Phone (<768px) only: 44px tap targets; 16px input font also stops iOS zoom-on-focus. Desktop keeps the compact look. */
@media (max-width: 767.98px) {
    input.form-control, select.form-control, select.form-select, textarea.form-control,
    .form-control, .form-select, .input-group-text {
        min-height: 44px !important;
        font-size: 16px !important;
    }
    .form-control, .form-select { padding-top: .375rem; padding-bottom: .375rem; line-height: 1.5; }
    .form-control::placeholder { font-size: 16px; }
    textarea.form-control { min-height: 88px !important; }
    input.form-control[type="color"] { min-height: 44px !important; }

    .btn { min-height: 44px; }
    .btn:has(> i:only-child), .btn.p-0, .icon-btn, .btn-close, .app-toast-close, .page-link {
        min-height: 40px; min-width: 40px; box-sizing: border-box;
    }
    .btn { display: inline-flex; align-items: center; justify-content: center; gap: .25rem; }
    .btn.w-100, .btn.d-block { display: flex; }

    .form-check-input[type="checkbox"]:not([role="switch"]),
    .form-check-input[type="radio"] { width: 40px !important; height: 40px !important; }
    .form-switch .form-check-input,
    .form-check-input[role="switch"] { width: 60px !important; height: 40px !important; }
    /* Bare checkboxes/radios (no .form-check-input): bigger box; a wrapping label becomes a 40px-tall tap row. */
    input[type="checkbox"]:not(.form-check-input), input[type="radio"]:not(.form-check-input) { width: 22px; height: 22px; flex-shrink: 0; }
    label:has(> input[type="checkbox"]:not(.form-check-input)), label:has(> input[type="radio"]:not(.form-check-input)) { min-height: 40px; display: flex; align-items: center; gap: .5rem; }


    /* Overflow guard: page-level blocks fit the viewport; only .table-responsive (and similar wrappers) scroll sideways. */
    .content > *, .content .row, .content .card, .content .d-flex { max-width: 100%; min-width: 0; }
    .content .table-responsive { max-width: 100%; overflow-x: auto; }
}

/* Phone stacked-card tables (Polish B). Opt in: <table class="plr-stack table ..."> and put data-label="Column" on each body <td>.
   Each row becomes a card; each cell is a compact label | value row. Header row hidden (sorting stays on desktop/tablet).
   Add .plr-hide-phone to a cell to drop it on phones (e.g. Username that equals Email). Desktop unchanged. */
@media (max-width: 767.98px) {
    table.plr-stack, table.plr-stack > tbody { display: block; width: 100%; }
    table.plr-stack > thead { display: none; }
    table.plr-stack > tbody > tr {
        display: block; margin: 0 0 .5rem; padding: .35rem .6rem;
        border: 1px solid var(--border, rgba(0,0,0,.125)); border-radius: .5rem; background: var(--surface, transparent);
    }
    table.plr-stack > tbody > tr > td {
        display: grid; grid-template-columns: 34% 1fr; gap: .5rem; align-items: center;
        padding: .2rem 0 !important; border: 0 !important; min-height: 0; height: auto;
        text-align: left !important; white-space: normal !important; overflow-wrap: anywhere; word-break: break-word;
    }
    table.plr-stack > tbody > tr > td::before {
        content: attr(data-label); font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em;
        color: var(--text-secondary, #6c757d);
    }
    /* Loading / empty rows (colspan, no label) span the full card. */
    table.plr-stack > tbody > tr > td:not([data-label]) { display: block; text-align: center !important; }
    table.plr-stack > tbody > tr > td:not([data-label])::before { content: none; }
    /* Actions: no label, one horizontal row of 40x40 icon buttons. */
    table.plr-stack > tbody > tr > td[data-label="Actions"] {
        display: flex; flex-wrap: nowrap; gap: .35rem; justify-content: flex-start; padding-top: .3rem !important; overflow-x: auto;
    }
    table.plr-stack > tbody > tr > td[data-label="Actions"]::before { content: none; }
    table.plr-stack > tbody > tr > td[data-label="Actions"] .btn {
        min-height: 40px; min-width: 40px; height: 40px; padding: 0 .55rem; flex: 0 0 auto;
    }
    /* Compact label/value lines. */
    table.plr-stack > tbody > tr > td { padding: .05rem 0 !important; line-height: 1.25; font-size: .875rem; }
    table.plr-stack > tbody > tr > td::before { font-size: .68rem; line-height: 1.25; }
    table.plr-stack > tbody > tr { padding: .3rem .55rem; margin-bottom: .4rem; }
    table.plr-stack .plr-hide-phone { display: none !important; }
    /* Phone-only Select-all row (PhoneSelectAll component) for stacked tables whose header checkbox is hidden. */
    .plr-select-all { display: flex; align-items: center; gap: .6rem; min-height: 44px; padding: .25rem .6rem; margin-bottom: .4rem;
        border: 1px solid var(--border, rgba(0,0,0,.125)); border-radius: .5rem; background: var(--surface, transparent); font-weight: 600; cursor: pointer; }
    .plr-select-all .form-check-input { margin: 0; flex-shrink: 0; }
    /* All inline dialogs: backdrop covers the full height. Form dialogs (.plr-form-dlg): fill the screen, backdrop covers the full height, body scrolls, Save/Cancel footer always visible. */
    .modal.d-block, .modal-backdrop.show { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; }
    .modal.d-block { overflow: hidden; }
    .modal.d-block.plr-form-dlg > .modal-dialog { margin: 0; max-width: 100%; width: 100%; height: 100%; min-height: 0; align-items: stretch; }
    .modal.d-block.plr-form-dlg .modal-content { height: 100%; max-height: 100%; border-radius: 0; display: flex; flex-direction: column; overflow: hidden; }
    .modal.d-block.plr-form-dlg .modal-content > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
    .modal.d-block.plr-form-dlg .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
    .modal.d-block.plr-form-dlg .modal-header, .modal.d-block.plr-form-dlg .modal-footer { flex-shrink: 0; }
    .modal.d-block.plr-form-dlg .modal-footer { position: sticky; bottom: 0; z-index: 1; background: var(--surface, #fff); flex-wrap: wrap; }
    /* Values hug their content (badges no longer stretch) and labels top-align with multi-line values. */
    /* Label sits in a fixed left gutter; everything in the cell (text + badges + inputs) flows in the value column. */
    table.plr-stack > tbody > tr > td[data-label]:not([data-label="Actions"]) { display: block; position: relative; padding-left: calc(34% + .5rem) !important; min-height: 1.25rem; }
    table.plr-stack > tbody > tr > td[data-label]:not([data-label="Actions"])::before { position: absolute; left: 0; top: .05rem; width: 34%; }
    /* Dashboard health grid toolbar: range buttons wrap; cadence/PDF/CSV row wraps and its label is not squeezed. */
    #hg-range { flex-wrap: wrap; row-gap: .25rem; }
    #hg-range + .ms-auto { flex-wrap: wrap; margin-left: 0 !important; width: 100%; }
    #hg-cadence { white-space: nowrap; }
    /* Company billing summary chips: readable size, wrap long text. */
    .cbd-chips { font-size: .875rem; }
    .cbd-chips > .badge { font-size: .8125rem; font-weight: 600; white-space: normal; text-align: left; line-height: 1.3; padding: .4em .6em; }
    /* Long text in cards wraps instead of clipping (tow queue .cell-clip, file names, hashes). */
    table.plr-stack .cell-clip { max-width: 100%; white-space: normal; overflow: visible; overflow-wrap: anywhere; }
    table.plr-stack > tbody > tr > td > * { min-width: 0; max-width: 100%; }
    /* Header filter row (tr.plr-stack-filters) stays visible as a 2-up grid of inputs; empty cells drop out. */
    table.plr-stack:has(> thead > tr.plr-stack-filters) > thead { display: block; margin-bottom: .5rem; }
    table.plr-stack > thead > tr:not(.plr-stack-filters) { display: none; }
    table.plr-stack > thead > tr.plr-stack-filters { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
    table.plr-stack > thead > tr.plr-stack-filters > th { display: block; padding: 0 !important; border: 0 !important; min-width: 0; }
    table.plr-stack > thead > tr.plr-stack-filters > th:empty { display: none; }
    table.plr-stack > thead > tr.plr-stack-filters .form-control, table.plr-stack > thead > tr.plr-stack-filters .form-select { width: 100%; }
}

/* PhoneSelectAll is phone-only; desktop keeps the header checkbox. */
@media (min-width: 768px) { .plr-select-all { display: none !important; } }

/* Batch 10 (phone): full-width company pickers; one search box on Users (hide the master-scope finder there). */
@media (max-width: 767.98px) {
    #bm-company, #uum-company { max-width: none !important; width: 100%; margin-left: 0 !important; }
    body:has(#user-search) .msb-idle { display: none; }
}

/* Batch 14 (desktop): admin Users table fits at 1280-1440 — long usernames/emails/junk names wrap, action buttons compact. */
@media (min-width: 768px) {
    #admin-users-table td { overflow-wrap: anywhere; }
    #admin-users-table > tbody > tr > td:nth-child(-n+3) { max-width: 15rem; }
    #admin-users-table > tbody > tr > td[data-label="Actions"] { white-space: nowrap; width: 1%; }
    #admin-users-table > tbody > tr > td[data-label="Actions"] .btn { padding: .15rem .35rem; font-size: .75rem; line-height: 1.2; }
}