@import '_content/Mileage.Components/Mileage.Components.703b3taxxh.bundle.scp.css';

/* /Layout/MainLayout.razor.rz.scp.css */
.mileage-layout[b-lqy62c4vvj] {
    display: flex;
    height: 100vh;
    overflow: hidden;
    background: var(--mud-palette-background);
}

.mileage-sidebar[b-lqy62c4vvj] {
    width: 200px;
    flex-shrink: 0;
    background: var(--mileage-surface);
    border-right: 1px solid var(--mileage-outline);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.mileage-main[b-lqy62c4vvj] {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
/* /Layout/NavMenu.razor.rz.scp.css */
.nav-brand[b-1cccwp86bw] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 16px 16px;
    font-size: 15px;
    font-weight: 800;
    color: var(--mileage-text-primary);
    border-bottom: 1px solid var(--mileage-outline);
}

.nav-items[b-1cccwp86bw] {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
}

.nav-user[b-1cccwp86bw] {
    margin-top: auto;
    padding: 16px;
    border-top: 1px solid var(--mileage-outline);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nav-user-name[b-1cccwp86bw] {
    font-size: 13px;
    font-weight: 600;
    color: var(--mileage-text-primary);
}

.nav-signout[b-1cccwp86bw] {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: var(--mileage-text-secondary);
    background: none;
    border: 1px solid var(--mileage-outline);
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
    text-align: left;
}

.nav-signout:hover[b-1cccwp86bw] {
    background: var(--mileage-surface-variant);
    color: var(--mileage-text-primary);
}
/* /Pages/Home.razor.rz.scp.css */
.drives-page[b-7ng5bk6gzf] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* Top bar */
.drives-topbar[b-7ng5bk6gzf] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: var(--mileage-surface);
    border-bottom: 1px solid var(--mileage-outline);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.drives-search[b-7ng5bk6gzf] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--mileage-page-bg);
    border: 1px solid var(--mileage-outline);
    border-radius: 8px;
    padding: 7px 12px;
    min-width: 200px;
}

.drives-search input[b-7ng5bk6gzf] {
    border: none;
    background: transparent;
    outline: none;
    font-size: 13px;
    color: var(--mileage-text-primary);
    width: 160px;
}

.drives-search input[b-7ng5bk6gzf]::placeholder {
    color: var(--mileage-text-secondary);
}

.drives-stat-tiles[b-7ng5bk6gzf] {
    display: flex;
    gap: 8px;
    flex: 1;
    flex-wrap: wrap;
}

.add-drive-btn[b-7ng5bk6gzf] {
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--mileage-brand);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
}

.add-drive-btn:hover[b-7ng5bk6gzf] {
    background: #1D4ED8;
}

/* Filter bar */
.drives-filterbar[b-7ng5bk6gzf] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    background: var(--mileage-surface);
    border-bottom: 1px solid var(--mileage-outline);
    flex-shrink: 0;
}

.month-picker[b-7ng5bk6gzf] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.month-nav[b-7ng5bk6gzf] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--mileage-outline);
    border-radius: 6px;
    background: var(--mileage-surface);
    cursor: pointer;
    padding: 0;
}

.month-nav:hover[b-7ng5bk6gzf] {
    background: var(--mileage-surface-variant);
}

.month-label[b-7ng5bk6gzf] {
    font-size: 13px;
    font-weight: 600;
    color: var(--mileage-text-primary);
    min-width: 120px;
    text-align: center;
}

.filters-wrap[b-7ng5bk6gzf] {
    position: relative;
}

.filters-btn[b-7ng5bk6gzf] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--mileage-text-secondary);
    background: var(--mileage-surface);
    border: 1px solid var(--mileage-outline);
    border-radius: 7px;
    padding: 6px 12px;
    cursor: pointer;
    font-family: inherit;
    position: relative;
}

.filters-btn.filters-active[b-7ng5bk6gzf] {
    color: var(--mileage-brand);
    border-color: var(--mileage-brand);
    background: var(--mileage-business-bg, #EFF6FF);
}

.filters-active-dot[b-7ng5bk6gzf] {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mileage-brand);
    margin-left: 2px;
}

/* Filters overlay (click-catcher) */
.filters-overlay[b-7ng5bk6gzf] {
    position: fixed;
    inset: 0;
    z-index: 99;
}

/* Filters panel */
.filters-panel[b-7ng5bk6gzf] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 100;
    background: var(--mileage-surface);
    border: 1px solid var(--mileage-outline);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.13);
    padding: 14px 16px 16px;
    min-width: 240px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.filters-panel-header[b-7ng5bk6gzf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2px;
}

.filters-panel-title[b-7ng5bk6gzf] {
    font-size: 13px;
    font-weight: 700;
    color: var(--mileage-text-primary);
}

.filters-clear-btn[b-7ng5bk6gzf] {
    font-size: 12px;
    font-weight: 600;
    color: var(--mileage-brand);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
}

.filters-clear-btn:hover[b-7ng5bk6gzf] {
    text-decoration: underline;
}

.filters-field[b-7ng5bk6gzf] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.filters-label[b-7ng5bk6gzf] {
    font-size: 11px;
    font-weight: 600;
    color: var(--mileage-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.filters-select[b-7ng5bk6gzf] {
    border: 1.5px solid var(--mileage-outline);
    border-radius: 7px;
    padding: 7px 10px;
    font-size: 13px;
    color: var(--mileage-text-primary);
    background: var(--mileage-surface);
    font-family: inherit;
    outline: none;
    cursor: pointer;
}

.filters-select:focus[b-7ng5bk6gzf] {
    border-color: var(--mileage-brand);
}

.filters-radio-group[b-7ng5bk6gzf] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 2px;
}

.filters-radio-label[b-7ng5bk6gzf] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--mileage-text-primary);
    cursor: pointer;
}

.filters-radio-label input[type="radio"][b-7ng5bk6gzf] {
    accent-color: var(--mileage-brand);
}

.filters-checks[b-7ng5bk6gzf] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding-top: 2px;
    border-top: 1px solid var(--mileage-surface-variant);
}

.filters-check-label[b-7ng5bk6gzf] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--mileage-text-primary);
    cursor: pointer;
}

.filters-check-label input[type="checkbox"][b-7ng5bk6gzf] {
    accent-color: var(--mileage-brand);
    width: 14px;
    height: 14px;
}

/* .month-picker-mud hide lives in GLOBAL app.css — scoped CSS can't reach the MudDatePicker child component. */

/* Tabs */
.drives-tabs[b-7ng5bk6gzf] {
    display: flex;
    border-bottom: 1px solid var(--mileage-outline);
    background: var(--mileage-surface);
    flex-shrink: 0;
    padding: 0 20px;
}

.tab-btn[b-7ng5bk6gzf] {
    font-size: 13px;
    font-weight: 500;
    color: var(--mileage-text-secondary);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 16px;
    cursor: pointer;
    font-family: inherit;
    transition: color 0.1s;
    margin-bottom: -1px;
}

.tab-btn:hover[b-7ng5bk6gzf] {
    color: var(--mileage-text-primary);
}

.tab-btn.active[b-7ng5bk6gzf] {
    color: var(--mileage-brand);
    border-bottom-color: var(--mileage-brand);
    font-weight: 600;
}

/* Content area */
.drives-content[b-7ng5bk6gzf] {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.drives-list[b-7ng5bk6gzf] {
    flex: 1;
    overflow-y: auto;
    background: var(--mileage-surface);
}

/* Day header */
.day-header[b-7ng5bk6gzf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 20px 4px;
    background: var(--mileage-page-bg);
    border-bottom: 1px solid var(--mileage-surface-variant);
    position: sticky;
    top: 0;
    z-index: 1;
}

.day-label[b-7ng5bk6gzf] {
    font-size: 12px;
    font-weight: 700;
    color: var(--mileage-text-secondary);
}

.day-count[b-7ng5bk6gzf] {
    font-size: 11px;
    color: var(--mileage-text-secondary);
}

/* Empty state */
.drives-empty[b-7ng5bk6gzf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

/* Detail panel */
.drives-detail[b-7ng5bk6gzf] {
    width: 300px;
    flex-shrink: 0;
    background: var(--mileage-surface);
    border-left: 1px solid var(--mileage-outline);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.detail-header[b-7ng5bk6gzf] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px;
    border-bottom: 1px solid var(--mileage-surface-variant);
}

.detail-date[b-7ng5bk6gzf] {
    font-size: 11px;
    color: var(--mileage-text-secondary);
    font-weight: 500;
    margin-bottom: 2px;
}

.detail-value[b-7ng5bk6gzf] {
    font-size: 20px;
    font-weight: 800;
    color: var(--mileage-text-primary);
    letter-spacing: -0.5px;
}

.detail-km[b-7ng5bk6gzf] {
    font-size: 14px;
    font-weight: 500;
    color: var(--mileage-text-secondary);
    margin-left: 8px;
}

.detail-close[b-7ng5bk6gzf] {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--mileage-text-secondary);
    display: flex;
    padding: 0;
}

.detail-close:hover[b-7ng5bk6gzf] {
    color: var(--mileage-text-secondary);
}

.detail-body[b-7ng5bk6gzf] {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.detail-route[b-7ng5bk6gzf] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.route-label[b-7ng5bk6gzf] {
    font-size: 11px;
    font-weight: 600;
    color: var(--mileage-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}

.route-stop[b-7ng5bk6gzf] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--mileage-surface-variant);
}

.route-stop:last-child[b-7ng5bk6gzf] {
    border-bottom: none;
}

.stop-dot[b-7ng5bk6gzf] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--mileage-surface);
    flex-shrink: 0;
}

.stop-dot.start[b-7ng5bk6gzf] {
    background: var(--mileage-success);
    box-shadow: 0 0 0 1.5px var(--mileage-success);
}

.stop-dot.end[b-7ng5bk6gzf] {
    background: var(--mileage-error);
    box-shadow: 0 0 0 1.5px var(--mileage-error);
}

.stop-address[b-7ng5bk6gzf] {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: var(--mileage-text-primary);
}

.stop-time[b-7ng5bk6gzf] {
    font-size: 12px;
    color: var(--mileage-text-secondary);
}

.detail-stats[b-7ng5bk6gzf] {
    display: flex;
    gap: 0;
}

.detail-stat[b-7ng5bk6gzf] {
    flex: 1;
    padding: 8px 0;
    border-right: 1px solid var(--mileage-surface-variant);
    padding-right: 12px;
    padding-left: 0;
}

.detail-stat:first-child[b-7ng5bk6gzf] { padding-left: 0; }
.detail-stat:last-child[b-7ng5bk6gzf] { border-right: none; padding-right: 0; padding-left: 12px; }
.detail-stat:nth-child(2)[b-7ng5bk6gzf] { padding-left: 12px; }

.stat-l[b-7ng5bk6gzf] {
    font-size: 11px;
    color: var(--mileage-text-secondary);
    font-weight: 500;
    margin-bottom: 2px;
}

.stat-v[b-7ng5bk6gzf] {
    font-size: 14px;
    font-weight: 700;
    color: var(--mileage-text-primary);
}

.detail-note-section[b-7ng5bk6gzf] {}

.detail-note-label[b-7ng5bk6gzf] {
    font-size: 11px;
    font-weight: 600;
    color: var(--mileage-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}

.detail-note[b-7ng5bk6gzf] {
    font-size: 13px;
    color: var(--mileage-text-secondary);
    line-height: 1.5;
}

/* Add drive modal */
.add-drive-overlay[b-7ng5bk6gzf] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.3);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.add-drive-modal[b-7ng5bk6gzf] {
    background: var(--mileage-surface);
    border-radius: 12px;
    width: 480px;
    max-width: 95vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
}

.modal-header[b-7ng5bk6gzf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    border-bottom: 1px solid var(--mileage-surface-variant);
}

.modal-header h2[b-7ng5bk6gzf] {
    font-size: 16px;
    font-weight: 700;
    color: var(--mileage-text-primary);
    margin: 0;
}

.modal-body[b-7ng5bk6gzf] {
    flex: 1;
    overflow-y: auto;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.form-field[b-7ng5bk6gzf] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.form-field label[b-7ng5bk6gzf] {
    font-size: 12px;
    font-weight: 600;
    color: var(--mileage-text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.form-field input[b-7ng5bk6gzf],
.form-field textarea[b-7ng5bk6gzf] {
    border: 1.5px solid var(--mileage-outline);
    border-radius: 7px;
    padding: 8px 10px;
    font-size: 13px;
    color: var(--mileage-text-primary);
    outline: none;
    background: var(--mileage-surface);
    font-family: inherit;
    width: 100%;
}

.form-field input:focus[b-7ng5bk6gzf],
.form-field textarea:focus[b-7ng5bk6gzf] {
    border-color: var(--mileage-brand);
}

.form-field textarea[b-7ng5bk6gzf] {
    resize: vertical;
    min-height: 64px;
}

.form-row[b-7ng5bk6gzf] {
    display: flex;
    gap: 12px;
}

.form-row .form-field[b-7ng5bk6gzf] {
    flex: 1;
}

.form-error[b-7ng5bk6gzf] {
    font-size: 12px;
    color: var(--mileage-error);
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: 6px;
    padding: 8px 12px;
}

.modal-footer[b-7ng5bk6gzf] {
    display: flex;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid var(--mileage-surface-variant);
}

.btn-cancel[b-7ng5bk6gzf] {
    flex: 1;
    background: var(--mileage-surface);
    color: var(--mileage-text-secondary);
    border: 1.5px solid var(--mileage-outline);
    border-radius: 8px;
    padding: 9px 0;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}

.btn-save[b-7ng5bk6gzf] {
    flex: 2;
    background: var(--mileage-brand);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 9px 0;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}

.btn-save:disabled[b-7ng5bk6gzf] {
    background: #93C5FD;
    cursor: default;
}

/* ── Tab counts ─────────────────────────────────────────────── */
.tab-count[b-7ng5bk6gzf] {
    display: inline-block;
    margin-left: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--mileage-text-secondary);
    background: var(--mileage-surface-variant);
    border-radius: 10px;
    padding: 1px 7px;
}
.tab-btn.active .tab-count[b-7ng5bk6gzf] {
    color: var(--mileage-brand);
    background: var(--mileage-business-bg);
}

/* ── Detail: classification ─────────────────────────────────── */
.detail-classify[b-7ng5bk6gzf],
.detail-vehicle[b-7ng5bk6gzf] {
    padding: 14px 0;
    border-top: 1px solid var(--mileage-surface-variant);
}
.detail-field-label[b-7ng5bk6gzf] {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mileage-text-secondary);
    margin: 10px 0 6px;
}
.classify-tabs[b-7ng5bk6gzf] {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}
.classify-btn[b-7ng5bk6gzf] {
    flex: 1;
    font-size: 12px;
    font-weight: 600;
    padding: 7px 0;
    border-radius: 8px;
    border: 1.5px solid var(--mileage-outline);
    background: var(--mileage-surface);
    color: var(--mileage-text-secondary);
    cursor: pointer;
    font-family: inherit;
    transition: all 0.1s;
}
.classify-btn.business.active[b-7ng5bk6gzf] {
    background: var(--mileage-business-bg);
    border-color: var(--mileage-business-color);
    color: var(--mileage-business-color);
}
.classify-btn.personal.active[b-7ng5bk6gzf] {
    background: var(--mileage-personal-bg);
    border-color: var(--mileage-personal-color);
    color: var(--mileage-personal-color);
}
.classify-btn.unclassified.active[b-7ng5bk6gzf] {
    background: var(--mileage-unclassified-bg);
    border-color: var(--mileage-unclassified-color);
    color: var(--mileage-unclassified-color);
}
.detail-classify[b-7ng5bk6gzf]  .purpose-picker-select,
.detail-vehicle[b-7ng5bk6gzf]  .vehicle-picker {
    width: 100%;
    font-size: 13px;
    padding: 8px 10px;
    border: 1.5px solid var(--mileage-outline);
    border-radius: 8px;
    background: var(--mileage-surface);
    color: var(--mileage-text-primary);
    font-family: inherit;
}
.detail-classify[b-7ng5bk6gzf]  .purpose-picker-empty {
    font-size: 12px;
    color: var(--mileage-unclassified-color);
    background: var(--mileage-unclassified-bg);
    border-radius: 8px;
    padding: 8px 10px;
}
.classify-origin[b-7ng5bk6gzf] {
    margin-top: 8px;
}
.origin-badge[b-7ng5bk6gzf] {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    border-radius: 10px;
    padding: 2px 9px;
}
.origin-badge.auto[b-7ng5bk6gzf] {
    color: var(--mileage-unclassified-color);
    background: var(--mileage-unclassified-bg);
}
.origin-badge.manual[b-7ng5bk6gzf] {
    color: var(--mileage-business-color);
    background: var(--mileage-business-bg);
}
.classify-save[b-7ng5bk6gzf] {
    margin-top: 10px;
    width: 100%;
    background: var(--mileage-brand);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 9px 0;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.classify-save.secondary[b-7ng5bk6gzf] {
    background: var(--mileage-surface);
    color: var(--mileage-text-secondary);
    border: 1.5px solid var(--mileage-outline);
}
.classify-save:disabled[b-7ng5bk6gzf] {
    opacity: 0.6;
    cursor: default;
}

/* ── Responsive: smaller monitors ──────────────────────────────────
   Below 1024px the fixed 300px detail panel squeezes the list until row
   text truncates and the page overflows horizontally. Make the panel an
   overlay drawer (list keeps full width) and collapse the stat tiles to a
   single horizontally-scrollable strip instead of a tall wrapped stack. */
@media (max-width: 1024px) {
    .drives-content[b-7ng5bk6gzf] { position: relative; }

    .drives-detail[b-7ng5bk6gzf] {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 340px;
        max-width: 100%;
        z-index: 40;
        box-shadow: -6px 0 24px rgba(0, 0, 0, 0.14);
    }

    .drives-stat-tiles[b-7ng5bk6gzf] {
        order: 10;
        flex-basis: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
    }
}

@media (max-width: 560px) {
    .drives-detail[b-7ng5bk6gzf] { width: 100%; }
}
/* /Pages/Login.razor.rz.scp.css */
.login-shell[b-br5ccvhqkj] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mileage-page-bg);
    padding: 1.5rem;
}

/* The card is a <MudPaper>: Blazor CSS isolation doesn't stamp this page's scope attribute onto a child
   component's rendered root, so a plain `.login-card` rule never matched it — the card fell back to
   MudPaper defaults (no max-width, ~0 padding → it sized to the body text and the copy ran to the edge).
   `::deep` targets it through the scoped .login-shell so the width + padding actually apply. */
.login-shell[b-br5ccvhqkj]  .login-card {
    width: 100%;
    max-width: 400px;
    padding: 2.5rem;
    border: 1px solid var(--mileage-outline);
    border-radius: 12px;
    background: var(--mileage-surface);
}

.login-brand[b-br5ccvhqkj] {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 22px;
    color: var(--mileage-text-primary);
    margin-bottom: 0.25rem;
}

.login-subtitle[b-br5ccvhqkj] {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: var(--mileage-text-secondary);
    margin-bottom: 1.5rem;
}
/* /Pages/Reports.razor.rz.scp.css */
.reports-page[b-5dqcnwz3fq] {
    padding: 24px 28px;
    background: var(--mileage-page-bg);
    min-height: 100%;
}

.reports-header[b-5dqcnwz3fq] {
    margin-bottom: 16px;
}

.reports-title[b-5dqcnwz3fq] {
    font-size: 20px;
    font-weight: 800;
    color: var(--mileage-text-primary);
    letter-spacing: -0.4px;
}

.reports-filters[b-5dqcnwz3fq] {
    background: var(--mileage-surface);
    border: 1px solid var(--mileage-outline);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 16px;
}

.filter-row[b-5dqcnwz3fq] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.filter-row label[b-5dqcnwz3fq] {
    font-size: 12px;
    font-weight: 600;
    color: var(--mileage-text-secondary);
}

.filter-row input[b-5dqcnwz3fq], .filter-row select[b-5dqcnwz3fq] {
    padding: 6px 10px;
    border: 1px solid var(--mileage-outline);
    border-radius: 6px;
    font-size: 13px;
}

.btn-generate[b-5dqcnwz3fq] {
    padding: 6px 16px;
    background: var(--mileage-brand);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.btn-generate:hover[b-5dqcnwz3fq] { background: #1D4ED8; }

.stat-cards-row[b-5dqcnwz3fq] {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.export-row[b-5dqcnwz3fq] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.export-label[b-5dqcnwz3fq] {
    font-size: 12px;
    font-weight: 600;
    color: var(--mileage-text-secondary);
}

.btn-export[b-5dqcnwz3fq] {
    padding: 5px 14px;
    border: 1px solid var(--mileage-outline);
    background: var(--mileage-surface);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.btn-export:hover[b-5dqcnwz3fq] { background: var(--mileage-surface-variant); }

.save-row[b-5dqcnwz3fq] {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.save-row input[b-5dqcnwz3fq] {
    padding: 6px 10px;
    border: 1px solid var(--mileage-outline);
    border-radius: 6px;
    font-size: 13px;
    width: 260px;
}

.btn-save[b-5dqcnwz3fq] {
    padding: 6px 14px;
    background: var(--mileage-personal-color);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.btn-save:disabled[b-5dqcnwz3fq] { background: var(--mileage-text-secondary); cursor: default; }
.btn-save:not(:disabled):hover[b-5dqcnwz3fq] { background: #047857; }

.archive-section[b-5dqcnwz3fq] { margin-top: 8px; }

.archive-title[b-5dqcnwz3fq] {
    font-size: 14px;
    font-weight: 700;
    color: var(--mileage-text-secondary);
    margin-bottom: 8px;
}

.archive-table[b-5dqcnwz3fq] {
    width: 100%;
    border-collapse: collapse;
    background: var(--mileage-surface);
    border: 1px solid var(--mileage-outline);
    border-radius: 10px;
    overflow: hidden;
    font-size: 13px;
}

.archive-table th[b-5dqcnwz3fq] {
    background: var(--mileage-page-bg);
    font-weight: 600;
    color: var(--mileage-text-secondary);
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid var(--mileage-outline);
}

.archive-table td[b-5dqcnwz3fq] {
    padding: 8px 12px;
    border-bottom: 1px solid var(--mileage-surface-variant);
}

.btn-export-sm[b-5dqcnwz3fq] {
    padding: 3px 8px;
    border: 1px solid var(--mileage-outline);
    background: var(--mileage-surface);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    margin-right: 3px;
}

.btn-delete[b-5dqcnwz3fq] {
    padding: 3px 8px;
    border: 1px solid #FCA5A5;
    background: #FEF2F2;
    color: var(--mileage-error);
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
}

.reports-loading[b-5dqcnwz3fq] {
    padding: 20px;
    color: var(--mileage-text-secondary);
    font-size: 14px;
}

.reports-empty[b-5dqcnwz3fq] {
    padding: 16px;
    color: var(--mileage-text-secondary);
    font-style: italic;
    font-size: 13px;
}
/* /Pages/Settings.razor.rz.scp.css */
.settings-page[b-6zfcga9yxe] {
    padding: 24px 28px;
    background: var(--mileage-page-bg);
    min-height: 100%;
}

.settings-header[b-6zfcga9yxe] {
    margin-bottom: 24px;
}

.settings-title[b-6zfcga9yxe] {
    font-size: 20px;
    font-weight: 800;
    color: var(--mileage-text-primary);
    letter-spacing: -0.4px;
}

.settings-section[b-6zfcga9yxe] {
    background: var(--mileage-surface);
    border: 1px solid var(--mileage-outline);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.section-title[b-6zfcga9yxe] {
    font-size: 15px;
    font-weight: 700;
    color: var(--mileage-text-primary);
    margin-bottom: 16px;
}

.section-subtitle[b-6zfcga9yxe] {
    font-size: 13px;
    font-weight: 600;
    color: var(--mileage-text-secondary);
    margin-top: 20px;
    margin-bottom: 10px;
}

.add-vehicle-form[b-6zfcga9yxe] {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.form-input[b-6zfcga9yxe] {
    padding: 6px 10px;
    border: 1px solid var(--mileage-outline);
    border-radius: 6px;
    font-size: 13px;
    color: var(--mileage-text-primary);
    background: var(--mileage-surface);
    flex: 1;
    min-width: 100px;
}

.form-input:focus[b-6zfcga9yxe] {
    outline: none;
    border-color: var(--mileage-brand);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.year-input[b-6zfcga9yxe] {
    max-width: 100px;
    flex: 0 0 auto;
}

.btn-primary[b-6zfcga9yxe] {
    padding: 6px 14px;
    background: var(--mileage-brand);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.btn-primary:hover[b-6zfcga9yxe] {
    background: #1D4ED8;
}

.btn-secondary[b-6zfcga9yxe] {
    padding: 5px 12px;
    background: var(--mileage-surface);
    color: var(--mileage-brand);
    border: 1px solid var(--mileage-brand);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

.btn-secondary:hover[b-6zfcga9yxe] {
    background: var(--mileage-business-bg);
}

.btn-danger[b-6zfcga9yxe] {
    padding: 5px 12px;
    background: var(--mileage-surface);
    color: var(--mileage-error);
    border: 1px solid var(--mileage-error);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

.btn-danger:hover[b-6zfcga9yxe] {
    background: #FEF2F2;
}

.error-msg[b-6zfcga9yxe] {
    color: var(--mileage-error);
    font-size: 12px;
    margin-bottom: 10px;
}

.vehicle-list[b-6zfcga9yxe] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vehicle-card[b-6zfcga9yxe] {
    border: 1px solid var(--mileage-outline);
    border-radius: 8px;
    padding: 14px 16px;
    background: var(--mileage-surface);
}

.vehicle-card.primary[b-6zfcga9yxe] {
    border-color: var(--mileage-brand);
    background: var(--mileage-business-bg);
}

.vehicle-card.hidden[b-6zfcga9yxe] {
    opacity: 0.6;
    display: flex;
    align-items: center;
    gap: 12px;
}

.vehicle-info[b-6zfcga9yxe] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.vehicle-name[b-6zfcga9yxe] {
    font-size: 14px;
    font-weight: 600;
    color: var(--mileage-text-primary);
}

.primary-badge[b-6zfcga9yxe] {
    font-size: 11px;
    font-weight: 600;
    color: var(--mileage-brand);
    background: var(--mileage-business-bg);
    padding: 2px 7px;
    border-radius: 10px;
}

.vehicle-actions[b-6zfcga9yxe] {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.odometer-section[b-6zfcga9yxe] {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--mileage-outline);
}

.odometer-title[b-6zfcga9yxe] {
    font-size: 12px;
    font-weight: 600;
    color: var(--mileage-text-secondary);
    margin-bottom: 8px;
}

.odometer-row[b-6zfcga9yxe] {
    display: flex;
    gap: 12px;
    font-size: 13px;
    color: var(--mileage-text-secondary);
    padding: 4px 0;
}

.odometer-row.regression[b-6zfcga9yxe] {
    color: var(--mileage-unclassified-color);
}

.regression-warn[b-6zfcga9yxe] {
    font-size: 12px;
    color: var(--mileage-unclassified-color);
    font-weight: 500;
}

.add-odometer[b-6zfcga9yxe] {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.loading[b-6zfcga9yxe] {
    color: var(--mileage-text-secondary);
    font-size: 13px;
    padding: 10px 0;
}

/* ── Purposes management ────────────────────────────────────── */
.section-hint[b-6zfcga9yxe] {
    font-size: 12px;
    color: var(--mileage-text-secondary);
    margin: 4px 0 12px;
}
.purpose-groups[b-6zfcga9yxe] {
    display: flex;
    gap: 24px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.purpose-group[b-6zfcga9yxe] {
    flex: 1;
    min-width: 260px;
}
.purpose-empty[b-6zfcga9yxe] {
    font-size: 12px;
    color: var(--mileage-text-secondary);
    padding: 6px 0;
}
.purpose-row[b-6zfcga9yxe] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border: 1px solid var(--mileage-outline);
    border-radius: 8px;
    margin-bottom: 6px;
    background: var(--mileage-surface);
}
.purpose-row.hidden[b-6zfcga9yxe] {
    opacity: 0.55;
    background: var(--mileage-page-bg);
}
.purpose-name[b-6zfcga9yxe] {
    font-size: 13px;
    font-weight: 500;
    color: var(--mileage-text-primary);
}
.purpose-actions[b-6zfcga9yxe] {
    display: flex;
    gap: 6px;
}

/* ── Auto-classification ────────────────────────────────────── */
.toggle-row[b-6zfcga9yxe] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--mileage-text-secondary);
    margin-bottom: 8px;
    cursor: pointer;
}
.workhours-row[b-6zfcga9yxe] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.workhours-row .form-input[b-6zfcga9yxe] {
    width: auto;
}
.settings-actions[b-6zfcga9yxe] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}
.settings-msg[b-6zfcga9yxe] {
    font-size: 13px;
    color: var(--mileage-personal-color, #059669);
}

/* ── Mileage rate (004) ─────────────────────────────────────── */
.rate-settings-grid[b-6zfcga9yxe],
.rate-add-form[b-6zfcga9yxe] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}
.rate-field[b-6zfcga9yxe] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 140px;
    flex: 1;
}
.rate-label[b-6zfcga9yxe] {
    font-size: 12px;
    font-weight: 600;
    color: var(--mileage-text-secondary);
}
.rate-surcharge-toggle[b-6zfcga9yxe] {
    align-self: flex-end;
    margin-bottom: 6px;
}
.rate-banner[b-6zfcga9yxe] {
    background: var(--mileage-business-bg);
    border: 1px solid #BFDBFE;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 12px;
    color: #1D4ED8;
    margin: 14px 0;
}
.rate-rule-list[b-6zfcga9yxe] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}
.rate-rule-row[b-6zfcga9yxe] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border: 1px solid var(--mileage-outline);
    border-radius: 8px;
    background: var(--mileage-surface);
    flex-wrap: wrap;
    gap: 8px;
}
.rate-rule-main[b-6zfcga9yxe] {
    display: flex;
    align-items: center;
    gap: 8px;
}
.rate-rule-eff[b-6zfcga9yxe] {
    font-size: 13px;
    font-weight: 600;
    color: var(--mileage-text-primary);
}
.rate-rule-ver[b-6zfcga9yxe] {
    font-size: 11px;
    font-weight: 600;
    color: var(--mileage-brand);
    background: var(--mileage-business-bg);
    padding: 2px 7px;
    border-radius: 10px;
}
.rate-rule-detail[b-6zfcga9yxe] {
    font-size: 12px;
    color: var(--mileage-text-secondary);
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.rate-surcharge[b-6zfcga9yxe] {
    color: var(--mileage-personal-color, #059669);
    font-weight: 600;
}