/* Match the legacy Django Unfold admin's color system (admin/config/settings/unfold/color.py):
   the "primary" (green) and "base" (neutral) oklch scales, plus Unfold's own
   font-color tokens (font.important-dark = base-100, font.default-dark =
   base-300, font.subtle-dark = base-400, and the *-light equivalents at
   base-900/600/500). Everything below uses !important because Radzen injects
   its own theme stylesheet (material.css / material-dark.css) dynamically,
   after this file loads, so normal cascade order can't be relied on.

   Radzen has no built-in "is dark theme active" selector, but the injected
   stylesheet's <link id="radzen-theme-link"> href always contains "-dark"
   for a dark variant (see Radzen.Blazor.js setTheme()) — so we use :has() to
   scope the dark-theme block instead of duplicating rules or needing JS. */
:root {
    /* Unfold's Tailwind config points font-sans at Inter (loaded via Google Fonts in
       index.html) instead of Radzen's own default ('Source Sans Pro' stack) — this is the
       only typography gap, since Radzen's own default body font-size (0.875rem) already
       matches Unfold's Tailwind `text-sm` base size. */
    --rz-text-font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;

    --rz-primary: oklch(59.6% .145 163.225) !important;
    --rz-primary-light: oklch(69.6% .17 162.48) !important;
    --rz-primary-lighter: oklch(59.6% .145 163.225 / 12%) !important;
    --rz-primary-dark: oklch(50.8% .118 165.612) !important;
    --rz-primary-darker: oklch(43.2% .095 166.913) !important;

    /* Radzen's default active-item text color (--rz-on-primary-lighter) is a
       hardcoded violet (#4340D2), not derived from --rz-primary, so it needs
       its own override to follow the brand green. Nested (2nd-level) items —
       e.g. "Units" under "Fleet Management" — use a *separate* set of
       "2nd-level" variables with the same hardcoded violet default, so they
       need the same fix independently. */
    --rz-panel-menu-item-active-color: var(--rz-primary) !important;
    --rz-panel-menu-item-active-indicator: var(--rz-primary) !important;
    --rz-panel-menu-item-2nd-level-active-color: var(--rz-primary) !important;

    /* Controls the 2nd-level item link's own padding-left, which combines with Radzen's fixed
       -36px icon margin to place the icon — measured directly: 3.5rem (56px) put the icon 12px
       right of the parent's own title/icon-free text (which starts at the row's base 16px
       padding), so this is knocked down to 2.75rem (44px) to land the icon flush with it. */
    --rz-panel-menu-item-2nd-level-offset: 2.75rem !important;

    /* RadzenProfileMenu's always-visible header trigger (the "top item" —
       our avatar+name) defaults to its own solid pill background: raw
       --rz-base-700 in dark theme, --rz-primary (green) in light theme.
       Both show as a mismatched box behind the avatar in the navbar, so
       make it blend into the header instead. The forced white toggle-button
       text color assumed that colored pill too, so it needs to follow our
       theme-adaptive text color now that the pill is gone. */
    --rz-profile-menu-top-item-background-color: transparent !important;
    --rz-profile-menu-toggle-button-color: var(--rz-text-color) !important;

    /* A single line between the sidebar and the header/body, in either theme. */
    --rz-sidebar-border-inline-end: var(--rz-border-base-300) !important;

    /* No divider lines between sidebar nav items/groups either. */
    --rz-panel-menu-item-border: none !important;

    /* The sidebar-toggle icon defaults to --rz-on-primary (white), meant to sit on Radzen's
       default colored header — invisible against our plain white header in light mode. */
    --rz-sidebar-toggle-color: var(--rz-text-color) !important;

    /* Light theme: plain white surfaces (per request — no tinted gray). */
    --rz-base-background-color: #ffffff !important;
    --rz-body-background-color: #ffffff !important;
    --rz-header-background-color: #ffffff !important;
    --rz-header-color: oklch(21% .034 264.665) !important;
    --rz-header-border: var(--rz-border-base-300) !important;
    --rz-text-color: oklch(44.6% .03 256.802) !important;
    --rz-text-title-color: oklch(21% .034 264.665) !important;
    --rz-text-secondary-color: oklch(55.1% .027 264.364) !important;
    --rz-panel-menu-item-active-background-color: oklch(92.8% .006 264.531) !important;
}

:root:has(#radzen-theme-link[href*="-dark"]) {
    /* Dark theme: Unfold's own near-black scale (base-900 surface, base-800
       borders) instead of Radzen's default lighter gray dark theme. */
    --rz-base-background-color: oklch(21% .034 264.665) !important;
    --rz-body-background-color: oklch(21% .034 264.665) !important;
    --rz-header-background-color: oklch(21% .034 264.665) !important;
    --rz-header-color: oklch(96.7% .003 264.542) !important;
    --rz-header-border: var(--rz-border-base-300) !important;
    --rz-text-color: oklch(87.2% .01 258.338) !important;
    --rz-text-title-color: oklch(96.7% .003 264.542) !important;
    --rz-text-secondary-color: oklch(70.7% .022 261.325) !important;
    --rz-border-base-300: 1px solid oklch(27.8% .033 256.848) !important;
    --rz-panel-menu-item-active-background-color: rgba(255, 255, 255, 0.06) !important;

    /* RadzenDataGrid uses its own --rz-grid-* border/hover tokens (based on
       --rz-border-base-600), not --rz-border-base-300, so the row dividers
       need their own override to get the same subtle Unfold line instead of
       Radzen's default mid-gray. */
    --rz-grid-cell-border: 1px solid oklch(27.8% .033 256.848) !important;
    --rz-grid-header-cell-border-bottom: 1px solid oklch(27.8% .033 256.848) !important;
    --rz-grid-border: 1px solid oklch(27.8% .033 256.848) !important;
    --rz-grid-frozen-cell-border: 1px solid oklch(27.8% .033 256.848) !important;
    --rz-grid-hover-background-color: rgba(255, 255, 255, 0.04) !important;

    /* Alternating rows default to --rz-base-900, Radzen's own hardcoded dark
       value (#121212) — much blacker than our Unfold base-900 override — so
       every other row rendered near-black. Use a subtle translucent overlay
       instead, so the zebra banding stays but reads as a soft tint. */
    --rz-grid-stripe-background-color: rgba(255, 255, 255, 0.03) !important;

    /* RadzenProfileMenu's dropdown panel defaults to raw --rz-base-700 in
       dark theme (unlike light theme, which already follows
       --rz-base-background-color) — override it to match our surface color
       instead of Radzen's default gray. */
    --rz-profile-menu-background-color: var(--rz-base-background-color) !important;
    --rz-profile-menu-item-hover-background-color: rgba(255, 255, 255, 0.05) !important;
}

/* The header already gets its bottom line from --rz-header-border above — Radzen also adds
   its own drop shadow under it by default, which reads as a heavier/duplicated separation
   line than the sidebar's single border, so it's turned off. Height is pinned explicitly (not
   just left to its own content-driven size) so it lines up exactly with .sidebar-brand below —
   matches the legacy Unfold admin's own header/logo row height (~64px, its h-16 / h-[65px]). */
.rz-header {
    box-shadow: none !important;
    height: 4rem !important;
    display: flex !important;
    align-items: center !important;
}

/* MainLayout.razor's sidebar content: logo header, a scrollable nav area that takes whatever
   space is left, and the profile block pinned to the very bottom. */
.sidebar-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Sidebar's logo/brand row — same fixed height as .rz-header above, so their bottom borders
   land on the same horizontal line across the full width, plus its own border to separate the
   logo from the nav menu below it (both per the legacy Unfold admin's layout). */
.sidebar-brand {
    height: 4rem;
    box-sizing: border-box;
    border-bottom: var(--rz-border-base-300);
}

/* The brand row's "Fleet Management System" subtitle uses .rz-text-caption, whose color
   Radzen defines as var(--rz-text-color) (plain body-text brightness) — not muted enough to
   read as the legacy Unfold admin's "text-subtle" tone under the title text. Override it to
   the same secondary/subtle color other muted labels (.list-footer, .stat-card-label) already
   use, scoped to this row only so it doesn't affect other .rz-text-caption uses (e.g. the
   sidebar profile's email line, which is meant to read at full body brightness). */
.sidebar-brand .rz-text-caption {
    color: var(--rz-text-secondary-color);
}

.sidebar-nav {
    flex: 1 1 auto;
    overflow-y: auto;
}

/* NavMenu.razor's leaf items — Radzen's own default icon-to-text gap (16px) is wider than
   the legacy Unfold admin's (mr-3, 12px). This is a plain global rule (not scoped Blazor CSS,
   brand.css never is) but it only ever matches nav-menu icons since RadzenPanelMenu is only
   used for the sidebar in this app. */
.rz-panel-menu .rz-navigation-item-icon {
    margin-right: 0.75rem !important;
}

.sidebar-profile {
    flex: 0 0 auto;
    /* No horizontal padding here: RadzenProfileMenu's own internal .rz-navigation-item-link
       already carries the same 16px horizontal padding the nav menu's items use — adding more
       here would double it up and push this row's toggle arrow out of line with theirs. */
    padding: 0.75rem 0;
    border-top: var(--rz-border-base-300);
    position: relative;
}

/* RadzenProfileMenu's own root <ul> defaults to display:inline-block, shrink-wrapped to its
   content's width — unlike the nav menu's <ul>, which is already full-width by default. That
   left this row's whole .rz-navigation-item-link chain (and so its toggle arrow) narrower and
   offset instead of spanning edge-to-edge like the nav items above it. Force it block/100%
   so the two use the exact same width and their arrows land in the same column. */
.sidebar-profile .rz-profile-menu {
    display: block !important;
    width: 100% !important;
    /* Also has its own default padding (the nav menu's <ul> has none, relying solely on
       .rz-navigation-item-link's 16px padding below it) — left in place, it insets this row
       an extra 16px on top of that, still pushing the arrow out of the nav items' column. */
    padding: 0 !important;
}

/* Radzen also styles .rz-navigation-item-link's own padding differently depending on context —
   0 here (a compact dropdown trigger by default) vs. the nav menu's 1rem (a full-width sidebar
   item) — so with the wrapper width now matching above, this is the last piece needed for the
   two arrows to land in the same column. */
.sidebar-profile .rz-navigation-item-link {
    padding: 0 1rem !important;
}

/* The rule above also matches this trigger's own dropdown popup items ("View site", "Change
   password", "Log out") — they're .rz-navigation-item-link too, just nested one level deeper
   inside .rz-navigation-menu — so its zero vertical padding (meant only for the compact trigger
   row) was cramming those rows down to ~21px each with no breathing room. Restore Radzen's own
   default menu-item padding (0.5rem block / 1rem inline) for anything inside the popup
   specifically; this selector is more specific (3 classes vs. 2) so it wins over the rule above
   despite both using !important. */
.sidebar-profile .rz-navigation-menu .rz-navigation-item-link {
    padding: 0.5rem 1rem !important;
}

/* Last piece: Radzen's own .item-text wrapper (around this row's custom Template content)
   defaults to flex: 0 1 auto (shrink-wrapped to content), unlike the nav menu's own text span
   (flex: 1 1 auto, growing to fill the row) — that's what let the toggle arrow float based on
   this row's content width instead of sitting flush against the same padded right edge. */
.sidebar-profile .item-text {
    flex: 1 1 auto !important;
}

/* RadzenProfileMenu's dropdown (.rz-navigation-menu) positions itself with `top: 100%` by
   default, opening downward — fine in the header, but the sidebar's profile block sits at the
   very bottom of the viewport, so a downward-opening popup runs off-screen. Flip it to open
   upward here specifically. */
.sidebar-profile .rz-navigation-menu {
    top: auto !important;
    bottom: 100% !important;
}

.sidebar-profile-info {
    min-width: 0;
}

.sidebar-profile-email {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* MainLayout.razor's @Body wrapper — a flex column at least as tall as .rz-body's own
   scrollport, so ListFooter.razor's `margin-top: auto` below can push it all the way to the
   bottom on a short page (few table rows), instead of it sitting right under the last row with
   empty space beneath. On a long page that already overflows this height, there's no leftover
   space to push into, so it just sits after the content as normal — that's what the sticky
   positioning below is for, keeping it visible while such a page scrolls. */
.page-content {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

/* ListFooter.razor — total row count under each list page's table, matching the legacy
   Unfold admin's changelist footer (e.g. "5 Site"). `margin-top: auto` (see .page-content
   above) pins it to the bottom regardless of table size; `position: sticky` on top of that
   keeps it visible while a long/overflowing page scrolls, rather than scrolling away — the
   same viewport-height-constrained, overflow:auto scrollport the sidebar's profile block sits
   flush against. .rz-body has its own 16px padding *and* wraps an inner .rz-p-4 div with
   another 16px — two paddings between this element and the true bottom edge, not one — which
   the negative margin/bottom values below cancel out. Height is pinned to .sidebar-profile's
   own rendered height (12px padding top/bottom + its two-line name/email content = 77px, per
   live measurement) rather than a smaller guess — both blocks share the same bottom edge (via
   the sticky/margin values above), so matching height is what makes their top border lines
   land on the same row too, not just their bottoms. */
.list-footer {
    position: sticky;
    bottom: -1rem;
    z-index: 5;
    margin-top: auto;
    margin-right: -1rem;
    margin-bottom: -2rem;
    margin-left: -1rem;
    height: 77px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 0 1.25rem;
    background: var(--rz-base-background-color);
    border-top: var(--rz-border-base-300);
    color: var(--rz-text-secondary-color);
    font-size: 0.8rem;
}

/* Roles add/edit page: the permission-picker's tab strip (RadzenTabs on RoleFormPage.razor) —
   each tab's Template renders "<span>Label</span><span class="permission-tab-count">N</span>",
   which this turns into a rounded count pill sitting right after the tab's plain text label. */
.permission-tab-count {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    background: var(--rz-primary-lighter, rgba(99, 102, 241, 0.15));
    color: var(--rz-primary);
    font-size: 0.7rem;
    font-weight: 600;
}

.permission-tab-content {
    padding-top: 1rem;
}

/* One PermissionCard.razor per submenu (Units, Shifts, Roles, ...) inside that tab strip. */
.permission-card {
    padding: 1rem 1.25rem;
    border: var(--rz-border-base-300) !important;
    border-radius: var(--rz-border-radius, 6px) !important;
}

.permission-card-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--rz-text-title-color);
}

/* Technical permission-code prefix (e.g. "fleet.units") shown under the title, standing in
   for the Django/Laravel-style fully-qualified model path the reference design shows there. */
.permission-card-path {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
}

.permission-card-divider {
    border-top: var(--rz-border-base-300);
    margin: 0.75rem 0;
}

.permission-select-all {
    padding: 0 !important;
    margin-bottom: 0.6rem;
}

.permission-checkbox-row {
    row-gap: 0.5rem !important;
}

/* Dashboard summary tiles (StatCard.razor). */
.stat-card {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem 1.1rem;
    background: var(--rz-base-background-color);
    border: var(--rz-border-base-300, 1px solid oklch(92% 0 0));
    border-radius: var(--rz-border-radius, 6px);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.stat-card[style*="cursor:pointer"]:hover {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.stat-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    flex-shrink: 0;
}

.stat-card-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--rz-text-title-color);
}

.stat-card-label {
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
}

/* Native <input type="file"> (Settings > General's Logo/Favicon/TTS Client uploads) otherwise
   keeps the browser's own light-chrome "Choose File" button regardless of theme. */
input[type="file"] {
    color: var(--rz-text-color);
    font-size: 0.875rem;
}

input[type="file"]::file-selector-button {
    background: var(--rz-base-200);
    color: var(--rz-text-color);
    border: var(--rz-border-base-300, 1px solid oklch(92% 0 0));
    border-radius: var(--rz-border-radius, 6px);
    padding: 0.4rem 0.8rem;
    margin-right: 0.75rem;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

input[type="file"]::file-selector-button:hover {
    background: var(--rz-base-300);
}

.dashboard-chart-card {
    background: var(--rz-base-background-color);
    border: var(--rz-border-base-300, 1px solid oklch(92% 0 0));
    border-radius: var(--rz-border-radius, 6px);
    padding: 1rem 1.1rem 0.5rem;
}

/* Structural fallback for submenu indentation (e.g. "Units" under "Fleet Management") — the
   --rz-panel-menu-item-2nd-level-offset variable above is Radzen's documented mechanism for this,
   but it depends on Radzen setting a per-item nesting-level custom property that doesn't reliably
   come through, so this targets any item wrapper nested inside another one directly instead —
   guaranteed to only match genuinely nested items regardless of that. */
.rz-panel-menu .rz-navigation-item-wrapper .rz-navigation-item-wrapper .rz-navigation-item-link {
    padding-inline-start: 2.5rem !important;
}

/* Every list page's RadzenDataGrid gives each column an explicit pixel Width, expecting the grid
   to scroll horizontally once those add up to more than the viewport (narrow window, or many
   columns — see Fleet > Operator Profiles). Radzen's own CSS pins .rz-grid-table to width:100%
   though, which makes table-layout:auto shrink every column proportionally to fit instead of
   overflowing — squishing header text into "SIMPER Cl…"/"Ac…" ellipsis rather than scrolling.
   .rz-data-grid-data already forces overflow-x:scroll, so letting the table size itself from its
   columns (width:auto) and only floor it at the container's width (min-width:100%) is enough to
   make that existing scroll container actually kick in. */
.rz-data-grid .rz-grid-table {
    width: auto !important;
    min-width: 100% !important;
}