/* The look comes from MudBlazor (Layout/RodaxisTheme.cs). Only what MudBlazor does not cover lives here. */

/* Loading screen (index.html) until Blazor renders: a truck on the road, in the colors of RodaxisTheme. */
.boot {
    --boot-bg: #f4f6f9; --boot-text: #5b6474; --boot-road: #c3cad4;
    --truck-body: #13314a; --truck-cab: #eb6834; --truck-stripe: #eb6834; --truck-window: #dbe7f3;
    --truck-chassis: #0b2033; --truck-wheel: #1d2430; --truck-hub: #cfd6df; --truck-light: #fdb022;
    position: fixed; inset: 0; z-index: 1500;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.25rem;
    padding: 1rem; background: var(--boot-bg); color: var(--boot-text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
:root[data-boot-theme="dark"] .boot {
    --boot-bg: #0f1720; --boot-text: #9aa8b8; --boot-road: #2a3a4c;
    --truck-body: #7fb3e8; --truck-cab: #f08a5d; --truck-stripe: #13314a; --truck-window: #0e1b2a;
    --truck-chassis: #2a3a4c; --truck-wheel: #050a10; --truck-hub: #9aa8b8;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-boot-theme="light"]) .boot {
        --boot-bg: #0f1720; --boot-text: #9aa8b8; --boot-road: #2a3a4c;
        --truck-body: #7fb3e8; --truck-cab: #f08a5d; --truck-stripe: #13314a; --truck-window: #0e1b2a;
        --truck-chassis: #2a3a4c; --truck-wheel: #050a10; --truck-hub: #9aa8b8;
    }
}
.boot-scene { display: flex; flex-direction: column; align-items: center; }
.boot-truck { overflow: visible; animation: boot-bob .45s ease-in-out infinite alternate; }
.boot-truck .trailer { fill: var(--truck-body); }
.boot-truck .stripe { fill: var(--truck-stripe); }
.boot-truck .cab { fill: var(--truck-cab); }
.boot-truck .window { fill: var(--truck-window); }
.boot-truck .light { fill: var(--truck-light); }
.boot-truck .chassis { fill: var(--truck-chassis); }
.boot-truck .wheel circle { fill: var(--truck-wheel); }
.boot-truck .wheel .hub, .boot-truck .wheel .spoke { fill: var(--truck-hub); }
.boot-truck .wheel { transform-box: fill-box; transform-origin: center; animation: boot-spin .5s linear infinite; }
.boot-speed line { stroke: var(--boot-road); stroke-width: 2.5; stroke-linecap: round; animation: boot-speed .7s linear infinite; }
.boot-speed line:nth-child(2) { animation-delay: .23s; }
.boot-speed line:nth-child(3) { animation-delay: .46s; }
.boot-road {
    width: 220px; max-width: 80vw; height: 4px; margin-top: 2px; border-radius: 2px;
    background: repeating-linear-gradient(90deg, var(--boot-road) 0 22px, transparent 22px 36px);
    animation: boot-road .45s linear infinite;
}
.boot-text { margin: 0; font-size: 1rem; font-weight: 500; letter-spacing: .01em; }
.boot-percent::before { content: var(--blazor-load-percentage-text, ""); margin-left: .4em; font-variant-numeric: tabular-nums; opacity: .8; }

@keyframes boot-bob { to { transform: translateY(-1.5px); } }
@keyframes boot-spin { to { transform: rotate(360deg); } }
@keyframes boot-road { to { background-position: -36px 0; } }
@keyframes boot-speed {
    0% { transform: translateX(0); opacity: 0; }
    30% { opacity: 1; }
    100% { transform: translateX(-14px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .boot-truck, .boot-truck .wheel, .boot-speed line, .boot-road { animation: none; }
}

#blazor-error-ui { display: none; position: fixed; inset: auto 0 0 0; z-index: 2000; padding: .75rem 1rem; background: #fef3f2; color: #b42318; border-top: 1px solid #b42318; }
#blazor-error-ui .reload { margin-left: .5rem; color: inherit; font-weight: 600; }

/* Tables and cards */
.clickable { cursor: pointer; }
tr.inactive td { opacity: .55; }
.num, td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.num-font { font-variant-numeric: tabular-nums; }
.mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; word-break: break-all; }
.refetching { opacity: .5; transition: opacity .15s; }

.shortcut { cursor: pointer; min-height: 120px; transition: box-shadow .15s, transform .15s; }
.shortcut:hover { box-shadow: 0 4px 16px rgba(16, 24, 40, .12); transform: translateY(-1px); }

/* KPI tiles (Components/KpiTile.razor) */
.kpi { border-left: 4px solid var(--mud-palette-lines-default) !important; transition: box-shadow .15s; }
.kpi-bad { border-left-color: var(--mud-palette-error) !important; }
.kpi-warn { border-left-color: var(--mud-palette-warning) !important; }
.kpi-ok { border-left-color: var(--mud-palette-success) !important; }
.kpi-info { border-left-color: var(--mud-palette-info) !important; }
.kpi-selected { box-shadow: 0 0 0 2px var(--mud-palette-primary) inset; }

/* Photos (trips, fuel, expenses, maintenance) */
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .75rem; }
.photos figure { margin: 0; }
.photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; display: block; background: var(--mud-palette-background-gray); }
.photos figcaption { font-size: .8rem; color: var(--mud-palette-text-secondary); margin-top: .25rem; }
.thumb { max-width: 160px; border-radius: 8px; display: block; }
.mini { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; margin-right: .25rem; vertical-align: middle; }

/* Phone lists. Below 600px a MudTable (Breakpoint.Xs) becomes a compact list instead of one "label: value" line per cell.
   Mark the cells: m-title = main line, m-end = right of the main line (amount) or of the second line (status),
   m-sub = second line, m-actions = buttons under the item, m-hide = desktop only. Unmarked cells become small label/value lines. */
@media (max-width: 600px) {
    .mud-xs-table .mud-table-body .mud-table-row {
        display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-auto-flow: row dense; column-gap: 12px; row-gap: 2px;
        align-items: start; padding: 12px 16px; border-bottom: 1px solid var(--mud-palette-table-lines);
    }
    .mud-xs-table .mud-table-body .mud-table-row .mud-table-cell {
        grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-width: 0;
        padding: 0 !important; border: none !important; font-size: .8125rem; line-height: 1.5; color: var(--mud-palette-text-secondary);
    }
    .mud-xs-table .mud-table-body .mud-table-cell::before { font-weight: 400; padding: 0 !important; white-space: nowrap; }
    .mud-xs-table .mud-table-body .mud-table-cell > * { text-align: right; }
    .mud-xs-table .mud-table-body .mud-table-cell .mud-typography-caption { font-size: .75rem; }

    .mud-xs-table .mud-table-body .mud-table-cell.m-title,
    .mud-xs-table .mud-table-body .mud-table-cell.m-end,
    .mud-xs-table .mud-table-body .mud-table-cell.m-sub { display: block; }
    .mud-xs-table .mud-table-body .mud-table-cell.m-title { grid-column: 1; order: -3; font-size: .9375rem; font-weight: 600; color: var(--mud-palette-text-primary); overflow-wrap: anywhere; }
    .mud-xs-table .mud-table-body .mud-table-cell.m-sub { grid-column: 1; order: -1; }
    .mud-xs-table .mud-table-body .mud-table-cell.m-end { grid-column: 2; order: -2; text-align: right !important; white-space: nowrap; font-size: .9375rem; color: var(--mud-palette-text-primary); }
    .mud-xs-table .mud-table-body .mud-table-cell.m-title > *,
    .mud-xs-table .mud-table-body .mud-table-cell.m-sub > * { text-align: left; }
    /* m-actions: small buttons in the right column; m-actions-row: wider buttons on their own line at the bottom. */
    .mud-xs-table .mud-table-body .mud-table-cell.m-actions { grid-column: 2; order: -2; justify-content: flex-end; gap: 0; }
    .mud-xs-table .mud-table-body .mud-table-cell.m-actions-row { order: 1; justify-content: flex-end; margin-top: 6px; }
    .mud-xs-table .mud-table-body .mud-table-cell.m-title::before,
    .mud-xs-table .mud-table-body .mud-table-cell.m-end::before,
    .mud-xs-table .mud-table-body .mud-table-cell.m-sub::before,
    .mud-xs-table .mud-table-body .mud-table-cell.m-actions::before,
    .mud-xs-table .mud-table-body .mud-table-cell.m-actions-row::before { content: none; }
    .mud-xs-table .mud-table-body .mud-table-cell.m-hide { display: none !important; }
    .mud-xs-table .mud-table-body .mud-table-cell .mud-chip { margin: 0; }
    .mud-xs-table .mud-table-body .mud-table-cell:empty { display: none; }

    /* Tighter headline numbers and titles on phones. */
    .kpi { padding: 10px 12px !important; }
    .kpi .mud-typography-h5 { font-size: 1.15rem; }
    .page-title { font-size: 1.6rem !important; }

    /* Tabs: text only, so three tabs fit without scroll arrows. */
    .mud-tabs .mud-tab .mud-icon-root { display: none; }
    .mud-tabs .mud-tab { min-width: 0 !important; padding-inline: 12px !important; }
    .mud-tabs .mud-tab:has(.mud-badge) { padding-inline-end: 26px !important; }

    /* Bar charts keep a readable size and scroll sideways instead of shrinking the text. */
    .bar-chart { min-width: 560px; }
    *:has(> .bar-chart) { overflow-x: auto; }

    /* Reports: a real table that scrolls sideways, first column fixed. */
    .report-table .mud-table-cell:first-child { position: sticky; left: 0; z-index: 1; background: var(--mud-palette-surface); }
    .report-table .mud-table-cell { white-space: nowrap; }
}

/* Filters: always open on larger screens; on phones behind the "Filtros" button (Components/FilterBar.razor). */
.filter-toggle { display: none; }
@media (max-width: 600px) {
    .filter-toggle { display: flex; }
    .filter-body:not(.open) { display: none; }
}

/* Summary lists (dashboard): on phones only the first 8 rows, then "Ver todos" (Components/MoreOnPhone.razor). */
.more-on-phone { display: none; }
@media (max-width: 600px) {
    .m-top .mud-table-body .mud-table-row:nth-child(n+9) { display: none; }
    .more-on-phone { display: block; border-top: 1px solid var(--mud-palette-table-lines); }
}

/* Permission editor (Components/PermissionEditor.razor): functions indented under their page. */
.permission-page { padding: 2px 0; }
.permission-page + .permission-page { border-top: 1px solid var(--mud-palette-lines-default); }
.permission-title { font-weight: 600; }
.permission-function { padding-left: 28px; }