/*
  Area pass: Tolls, IFTA, Jobs and HOS / ELD (boards: canvas-customers-fuel Tolls / TollAdd / TollDelete / TollImport /
  Ifta / IftaMileage / IftaMileageAdd / IftaMileageDelete, canvas-drivers HosEld / Jobs / JobPostingForm /
  JobPostingDetails / HireDriver).
  Everything is scoped under .pui-tolls (the page body of the four views) and uses the pui-tolls- prefix.
*/

/* Page frame: the boards pad the main area 24px 28px 40px and space the blocks 20px apart. */
.pui-page.pui-tolls { padding: 24px 28px 40px; gap: 20px; }

/* ── Needs you chips ───────────────────────────────────────────────────────────────────────── */

.pui-tolls-needs-label {
    font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .05em;
    color: var(--muted-foreground); margin-right: 4px;
}
.pui-tolls .cn-button.pui-tolls-chip {
    height: 32px; padding: 0 12px; border-radius: 999px; background: var(--card); border: 1px solid var(--border);
    font-size: 13px; font-weight: 500; color: var(--foreground); box-shadow: none; gap: 8px;
}
.pui-tolls .cn-button.pui-tolls-chip:hover { background: var(--accent); }
.pui-tolls .cn-button.pui-tolls-chip[aria-pressed="true"] { border-color: var(--primary); background: var(--tone-info-bg); }
.pui-tolls .pui-tolls-chip .cn-badge { height: 20px; }
.pui-tolls .pui-tolls-chip .cn-badge::before { display: inline-block; }

/* ── List card: tabs, filter bar, table, pager ─────────────────────────────────────────────── */

.pui-tolls .pui-list-card.cn-card { overflow: hidden; gap: 0; padding: 0; border-radius: 12px; }
.pui-tolls .pui-list-toolbar { padding: 14px 16px; border-bottom: 1px solid var(--border); gap: 12px; }
.pui-tolls .pui-list-card .cn-tabs-list {
    display: flex; gap: 2px; padding: 3px; background: var(--muted); border-radius: 9px; width: max-content;
    max-width: 100%; height: auto;
}
.pui-tolls .pui-list-card .cn-tabs-trigger {
    height: 30px; padding: 0 12px; border-radius: 7px; font-size: 13px; font-weight: 500; gap: 6px; box-shadow: none;
    border: 0; color: var(--muted-foreground);
}
.pui-tolls .pui-list-card .cn-tabs-trigger[aria-selected="true"] {
    background: var(--card); color: var(--foreground); box-shadow: 0 1px 2px oklch(0.2 0.02 258 / .08);
}
.pui-tolls-count { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--muted-foreground); }

.pui-tolls .pui-filter-bar { align-items: center; gap: 8px; }
.pui-tolls .pui-filter-bar > .pui-tolls-search { position: relative; flex: 1 1 280px; max-width: 420px; }
.pui-tolls .pui-tolls-search > .cn-input { height: 36px; width: 100%; padding-left: 34px; border-radius: 8px; font-size: 14px; }
.pui-tolls-search-icon {
    position: absolute; left: 10px; top: 50%; margin-top: -8px; color: var(--muted-foreground); pointer-events: none; z-index: 1;
}
.pui-tolls .pui-filter-bar > .pui-tolls-filter { flex: 0 0 auto; width: auto; min-width: 0; }

.pui-tolls .pui-list-table { padding: 0; }
.pui-tolls .pui-list-card table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pui-tolls .pui-list-card thead th {
    height: 38px; padding: 0 12px; font-size: 12px; font-weight: 500; color: var(--muted-foreground);
    border-bottom: 1px solid var(--border); white-space: nowrap; text-align: left;
}
.pui-tolls .pui-list-card tbody td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; font-size: 13px; }
.pui-tolls .pui-list-card tbody tr:last-child td { border-bottom: 0; }
.pui-tolls .pui-list-card tbody tr:hover td { background: oklch(0.98 0.004 250); }
.pui-tolls .pui-list-footer { padding: 0; border-top: 1px solid var(--border); }
.pui-tolls .pui-list-footer .pui-pager { border-top: 0; }
.pui-tolls-warn { color: var(--tone-warning-fg); }
.pui-tolls-help { font-size: 12px; color: var(--muted-foreground); }

/* ── Import result banner ──────────────────────────────────────────────────────────────────── */

.pui-tolls-banner {
    padding: 12px 14px; border: 1px solid oklch(0.88 0.05 250); border-radius: 10px; background: var(--tone-info-bg);
    color: var(--tone-info-fg); font-size: 13px;
}
.pui-tolls-banner .cn-button-variant-link { color: inherit; font-weight: 500; height: auto; padding: 0; }
.pui-tolls-banner .cn-button-variant-ghost { height: 24px; width: 24px; color: inherit; }

/* ── Add toll sheet ────────────────────────────────────────────────────────────────────────── */

/* (the sheet's two-column grid is under "Sheets" below) */
.pui-tolls-field-error { font-size: 12px; color: var(--tone-danger-fg); }
.pui-tolls-sheet .cn-input-group.pui-tolls-invalid { border-color: var(--tone-danger-fg); }

/* ── Import dialog ─────────────────────────────────────────────────────────────────────────── */

/* (the dialog frames are under "Dialog frames" below) */
.pui-tolls-file-box {
    padding: 12px; border: 1px dashed var(--input); border-radius: 8px; background: var(--muted);
}
.pui-tolls-file-icon {
    width: 36px; height: 36px; border-radius: 8px; background: var(--card); border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center; flex: none;
}

/* ── Dialog frames (board: .cn-dialog 14px radius, header 20px 24px, footer border-top) ─────
   The dialog root is portaled out of .pui-tolls, so these hang off the root classes, not the page scope. */

.cn-dialog-root.pui-tolls-confirm .cn-dialog,
.cn-dialog-root.pui-tolls-dialog .cn-dialog {
    padding: 0; gap: 0; border-radius: 14px; max-width: calc(100vw - 32px); width: min(440px, calc(100vw - 32px));
}
.cn-dialog-root.pui-tolls-dialog .cn-dialog { width: min(500px, calc(100vw - 32px)); }
.cn-dialog-root.pui-tolls-dialog-sm .cn-dialog { width: min(460px, calc(100vw - 32px)); }
.cn-dialog-root.pui-tolls-confirm .cn-dialog-header,
.cn-dialog-root.pui-tolls-dialog .cn-dialog-header { padding: 20px 24px 0; gap: 4px; }
.cn-dialog-root.pui-tolls-confirm .cn-dialog-header { padding-bottom: 20px; }
.cn-dialog-root.pui-tolls-confirm .cn-dialog-title,
.cn-dialog-root.pui-tolls-dialog .cn-dialog-title { font-size: 17px; font-weight: 600; line-height: 1.3; }
.cn-dialog-root.pui-tolls-confirm .cn-dialog-description,
.cn-dialog-root.pui-tolls-dialog .cn-dialog-description { font-size: 13px; line-height: 1.45; color: var(--muted-foreground); }
.cn-dialog-root.pui-tolls-confirm .cn-dialog-footer,
.cn-dialog-root.pui-tolls-dialog .cn-dialog-footer {
    padding: 16px 24px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 8px;
}
.pui-tolls-dialog-body { padding: 16px 24px 20px; }
.pui-tolls-dialog-sm .pui-tolls-dialog-body { padding: 16px 24px 24px; }
.pui-tolls-dialog-sm .pui-fields { grid-template-columns: 140px minmax(0, 1fr); }
.cn-dialog-root.pui-tolls-dialog .cn-field-description { font-size: 12px; color: var(--muted-foreground); }
.cn-dialog-root.pui-tolls-dialog .cn-label { font-size: 13px; font-weight: 500; }

/* ── Filter selects (the board's outline buttons: 32px, 13px, label as the placeholder) ────── */

.pui-tolls .pui-filter-bar > .cn-select-root { flex: 0 0 auto; width: auto; }
.pui-tolls .cn-select-trigger.pui-tolls-filter {
    height: 32px; width: auto; min-width: 0; padding: 0 10px; gap: 8px; border-radius: 7px; font-size: 13px;
    font-weight: 500; background: var(--card); color: var(--foreground); border: 1px solid var(--input); box-shadow: none;
}
.pui-tolls .cn-select-trigger.pui-tolls-filter[data-placeholder] { color: var(--foreground); }

/* ── Tables ────────────────────────────────────────────────────────────────────────────────── */

.pui-tolls-table thead th:last-child, .pui-tolls-table tbody td:last-child { width: 48px; padding-left: 4px; padding-right: 8px; }
.pui-tolls .pui-pager .cn-label { font-weight: 400; font-size: 13px; color: var(--muted-foreground); }
.pui-tolls .pui-pager { font-size: 13px; }
.pui-tolls-footer-note { font-size: 13px; color: var(--muted-foreground); padding: 12px 16px; }

/* ── Sheets (Add toll, New posting, Posting details) ──────────────────────────────────────── */

.pui-tolls-sheet .cn-sheet { background: var(--card); gap: 0; }
.pui-tolls-sheet .pui-sheet-header { padding: 20px 24px 16px; gap: 4px; border-bottom: 1px solid var(--border); }
.pui-tolls-sheet .pui-sheet-header [data-slot="dialog-title"],
.pui-tolls-sheet .pui-sheet-header [data-slot="sheet-title"] { font-size: 18px; font-weight: 600; line-height: 1.45; }
.pui-tolls-sheet .pui-sheet-header [data-slot="dialog-description"],
.pui-tolls-sheet .pui-sheet-header [data-slot="sheet-description"] { font-size: 13px; line-height: 1.45; color: var(--muted-foreground); }
.pui-tolls-sheet .pui-sheet-footer { padding: 14px 24px; background: var(--card); }
.pui-tolls-sheet .pui-sheet-section { padding: 20px 24px; }
.pui-tolls-sheet .pui-sheet-section-title { font-size: 14px; font-weight: 600; }
.pui-tolls-sheet .cn-label { font-size: 13px; font-weight: 500; }
.pui-tolls-sheet .cn-field-description { font-size: 12px; color: var(--muted-foreground); }
.pui-tolls-sheet .cn-input, .pui-tolls-sheet .cn-textarea { font-size: 14px; }
.pui-tolls-sheet .pui-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pui-tolls-sheet .pui-fields > .pui-tolls-span { grid-column: 1 / -1; }
.pui-tolls-sheet .cn-textarea { min-height: 140px; }
.pui-tolls-sheet-bare .pui-sheet-section-title:empty,
.pui-tolls-sheet-bare .pui-sheet-section > .sc-vstack:first-child:has(> .pui-sheet-section-title:empty) { display: none; }
.pui-tolls-setting { padding: 0; }
.pui-tolls-sheet .pui-sheet-section:last-child { border-bottom: 0; }

/* ── IFTA ──────────────────────────────────────────────────────────────────────────────────── */

.pui-tolls .cn-select-root.pui-tolls-period, .pui-tolls .pui-tolls-period { flex: none; }
.pui-tolls .cn-select-trigger.pui-tolls-period { height: 36px; font-size: 14px; background: var(--card); border: 1px solid var(--input); box-shadow: none; }

/* The underlined tab row: a 1px rule with a 2px primary line under the active tab. */
.pui-tolls-ifta-tabs { display: flex; flex-direction: column; gap: 20px; }
.pui-tolls-ifta-tabs > .cn-tabs-list {
    display: flex; justify-content: flex-start; gap: 20px; border-bottom: 1px solid var(--border); background: transparent;
    padding: 0; border-radius: 0; height: auto; width: 100%; max-width: 100%; margin: 0;
}
.pui-tolls-ifta-tabs > .cn-tabs-list > .cn-tabs-trigger {
    flex: 0 0 auto; height: 40px; padding: 0 2px; font-size: 13px; font-weight: 500; color: var(--muted-foreground);
}
.pui-tolls-ifta-tabs > .cn-tabs-list > .cn-tabs-trigger[data-state="active"] { color: var(--foreground); }
.pui-tolls-tab-body { width: 100%; min-width: 0; }

.pui-tolls-kpi-card.cn-card { padding: 0; overflow: hidden; }
.pui-tolls-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.pui-tolls-kpi { padding: 18px 22px; gap: 4px; border-right: 1px solid var(--border); min-width: 0; }
.pui-tolls-kpi:last-child { border-right: 0; }
.pui-tolls-kpi-label { font-size: 12px; color: var(--muted-foreground); }
.pui-tolls-kpi-value {
    font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 26px; font-weight: 600;
    letter-spacing: -0.02em; line-height: 1.1;
}
.pui-tolls-credit { color: var(--tone-success-fg); }

.pui-tolls-ifta-split.pui-detail { gap: 20px; }
.pui-tolls-ifta-split .pui-detail-main { flex: 999 1 560px; gap: 20px; }
.pui-tolls-ifta-split .pui-detail-rail { flex: 1 1 300px; gap: 20px; }

.pui-tolls-card.cn-card { overflow: hidden; gap: 0; padding: 0; border-radius: 12px; }
.pui-tolls-card .cn-card-header { padding: 16px 20px 12px; gap: 2px 12px; }
.pui-tolls-card .cn-card-title { font-size: 15px; font-weight: 600; line-height: 1.4; }
.pui-tolls-card .cn-card-description { font-size: 13px; margin-top: 2px; line-height: 1.45; }
.pui-tolls-card .cn-card-content { padding: 16px 20px; }
.pui-tolls-card-table { overflow-x: auto; }
.pui-tolls-card table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pui-tolls-card thead th {
    height: 38px; padding: 0 12px; font-size: 12px; font-weight: 500; color: var(--muted-foreground);
    border-bottom: 1px solid var(--border); border-top: 1px solid var(--border); white-space: nowrap; text-align: left;
}
.pui-tolls-card tbody td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; font-size: 13px; }
.pui-tolls-card tbody tr:last-child td { border-bottom: 0; }
.pui-tolls-card tbody tr:hover td { background: oklch(0.98 0.004 250); }
.pui-tolls-card tbody tr.pui-tolls-total-row td { background: var(--muted); font-weight: 600; }
.pui-tolls-card .pui-pager { border-top: 1px solid var(--border); }
.pui-tolls-card .cn-card-action .cn-button { height: 32px; }

/* Cards whose header is one bordered bar (Mileage entries, Fuel purchases). */
.pui-tolls-card[data-testid="state-mileage"] .cn-card-header,
.pui-tolls-card[data-testid="ifta-fuel-purchases"] .cn-card-header { padding: 14px 16px; border-bottom: 1px solid var(--border); align-items: center; }
.pui-tolls-card[data-testid="state-mileage"] thead th,
.pui-tolls-card[data-testid="ifta-fuel-purchases"] thead th { border-top: 0; }
.pui-tolls-card[data-testid="state-mileage"] .cn-card-description,
.pui-tolls-card[data-testid="ifta-fuel-purchases"] .cn-card-description { font-size: 12px; margin-top: 0; }

/* ── Jobs ──────────────────────────────────────────────────────────────────────────────────── */

.pui-tolls .cn-button.pui-tolls-posting-link {
    height: auto; padding: 0; font-size: 13px; font-weight: 600; color: var(--foreground); justify-content: flex-start;
    white-space: normal; text-align: left;
}
.pui-tolls .cn-button.pui-tolls-posting-link:hover { text-decoration: underline; }
.pui-tolls-description { line-height: 1.5; }
.pui-tolls-detail-body .pui-sheet-section { gap: 14px; }
.pui-tolls-detail-body .pui-sheet-section:last-child { border-bottom: 0; }
.pui-tolls-application {
    border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; background: var(--card);
}
.pui-tolls-application-muted { background: var(--background); }

/* ── HOS / ELD ─────────────────────────────────────────────────────────────────────────────── */

.pui-tolls-hos-card.cn-card { max-width: 760px; overflow: hidden; gap: 0; padding: 0; }
.pui-tolls-empty { align-items: center; text-align: center; padding: 56px 32px; gap: 8px; }
.pui-tolls-empty-media {
    width: 44px; height: 44px; border-radius: 12px; background: var(--muted); color: var(--muted-foreground);
    display: flex; align-items: center; justify-content: center;
}
.pui-tolls-empty-title { font-size: 15px; font-weight: 600; }
.pui-tolls-empty-text { font-size: 13px; color: var(--muted-foreground); max-width: 460px; }
.pui-tolls-hos-grid {
    padding: 16px 20px; border-top: 1px solid var(--border); gap: 12px 24px;
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
}

/* ── Outline buttons and number inputs inside this area (board: white fill, --input border, no shadow) ───── */

.pui-tolls .cn-button-variant-outline,
.pui-tolls-sheet .cn-button-variant-outline,
.pui-tolls-confirm .cn-button-variant-outline,
.pui-tolls-dialog .cn-button-variant-outline { background: var(--card); border-color: var(--input); box-shadow: none; }
.pui-tolls .cn-button-variant-outline:hover,
.pui-tolls-sheet .cn-button-variant-outline:hover,
.pui-tolls-confirm .cn-button-variant-outline:hover,
.pui-tolls-dialog .cn-button-variant-outline:hover { background: var(--accent); }
.pui-tolls-dialog input[type="number"]::-webkit-inner-spin-button,
.pui-tolls-dialog input[type="number"]::-webkit-outer-spin-button,
.pui-tolls-sheet input[type="number"]::-webkit-inner-spin-button,
.pui-tolls-sheet input[type="number"]::-webkit-outer-spin-button,
.pui-tolls input[type="number"]::-webkit-inner-spin-button,
.pui-tolls input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.pui-tolls-dialog input[type="number"], .pui-tolls-sheet input[type="number"], .pui-tolls input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* Applicant avatars: 32px circle, 12px semibold initials on the secondary fill. */
.pui-tolls-application .cn-avatar, .pui-tolls-application [data-slot="avatar"] { width: 32px; height: 32px; flex: none; }
.pui-tolls-application [data-slot="avatar-fallback"] {
    background: var(--secondary); color: var(--secondary-foreground); font-size: 12px; font-weight: 600;
}
.pui-tolls-sheet .cn-select-trigger { background: var(--card); }