/* TireTag "Patio" theme: ivory ground, white cards, ink actions, orange accents, dark navigation rail.
   Loaded last for the authenticated app; the public landing page keeps brand.css only. */

@font-face { font-family: "Archivo"; src: url("../fonts/archivo/Archivo-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../fonts/archivo/Archivo-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../fonts/archivo/Archivo-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../fonts/archivo/Archivo-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../fonts/archivo/Archivo-ExtraBold.ttf") format("truetype"); font-weight: 800; font-style: normal; font-display: swap; }

:root {
    --tt-ink: #1c1f22;
    --tt-ink-soft: #3e4347;
    --tt-orange: #ff5a1f;
    --tt-orange-soft: #ffe6da;
    --tt-link: #a8380a;
    --tt-link-hover: #7c2a08;
    --tt-rail-bg: #222629;
    --tt-rail-active: #3a3f43;
    --tt-rail-text: #b5babe;
    --tt-rail-width: 84px;
    --tt-danger: #b42318;
    --tt-danger-text: #8f1d13;
    --tt-danger-soft: #fdecea;
    --tt-warning: #b54708;
    --tt-warning-text: #93370d;
    --tt-warning-soft: #fef3e2;
    --tt-info: #1849a9;
    --tt-info-soft: #eaf1ff;

    --tt-app-bg: #f4f2ec;
    --tt-surface: #ffffff;
    --tt-surface-soft: #faf9f6;
    --tt-border: #e4e0d6;
    --tt-border-strong: #d3cec2;
    --tt-text: var(--tt-ink);
    --tt-muted: #4a4f53;
    --tt-muted-soft: #5b6064;
    --tt-blue: var(--tt-link);
    --tt-red: var(--tt-danger);
    --tt-amber: var(--tt-warning);
    --tt-radius: 20px;
    --tt-radius-sm: 12px;
    --tt-shadow: 0 1px 2px rgba(28, 31, 34, 0.04);
    --brand-action: var(--tt-ink);

    --rz-text-font-family: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --rz-body-background-color: var(--tt-app-bg);
    --rz-primary: #1c1f22;
    --rz-primary-light: #3e4347;
    --rz-primary-lighter: rgba(28, 31, 34, 0.08);
    --rz-primary-dark: #0e1011;
    --rz-primary-darker: #000000;
    --rz-on-primary: #ffffff;
    --rz-on-primary-lighter: #1c1f22;
    --rz-secondary: #a8380a;
    --rz-secondary-light: #c2410c;
    --rz-secondary-lighter: rgba(255, 90, 31, 0.14);
    --rz-secondary-dark: #8a2e08;
    --rz-secondary-darker: #7c2a08;
    --rz-on-secondary: #ffffff;
    --rz-on-secondary-lighter: #7c2a08;
    --rz-danger: #b42318;
    --rz-danger-light: #d4463a;
    --rz-danger-lighter: #fdecea;
    --rz-danger-dark: #8f1d13;
    --rz-danger-darker: #7a180f;
    --rz-warning: #b54708;
    --rz-warning-light: #dc6803;
    --rz-warning-lighter: #fef3e2;
    --rz-warning-dark: #93370d;
    --rz-warning-darker: #7a2e0e;
    --rz-info: #1849a9;
    --rz-info-light: #2e62c9;
    --rz-info-lighter: #eaf1ff;
    --rz-info-dark: #133b8a;
    --rz-info-darker: #0f2f6e;
    --rz-success: #2f6b4f;
    --rz-success-light: #3f8a66;
    --rz-success-lighter: #e7f3ec;
    --rz-success-dark: #24543e;
    --rz-success-darker: #1b4030;
    --rz-base-50: #ffffff;
    --rz-base-100: #faf9f6;
    --rz-base-200: #f4f2ec;
    --rz-base-300: #e4e0d6;
    --rz-base-400: #b9b4a8;
    --rz-base-500: #8d8a82;
    --rz-base-600: #5b6064;
    --rz-base-700: #4a4f53;
    --rz-base-800: #2b2f33;
    --rz-base-900: #1c1f22;
    --rz-text-color: #1c1f22;
    --rz-text-title-color: #1c1f22;
    --rz-text-secondary-color: #4a4f53;
    --rz-link-color: var(--tt-link);
    --rz-link-hover-color: var(--tt-link-hover);
    --rz-border-radius: 12px;
    --rz-button-border-radius: 999px;
    --rz-input-border-radius: 12px;
    --rz-card-border-radius: 20px;
    --rz-dialog-border-radius: 20px;
    --rz-panel-border-radius: 20px;
    --rz-badge-border-radius: 999px;
    --rz-card-shadow: none;
    --rz-card-padding: 1.25rem;
    --rz-grid-header-background-color: var(--tt-surface-soft);
    --rz-grid-header-text-transform: none;
    --rz-grid-header-font-size: 0.8125rem;
    --rz-tabs-tab-selected-top-border-color: var(--tt-orange);
}

body { font-family: var(--rz-text-font-family); background: var(--tt-app-bg); }

/* ---------- Shell: rail + main ---------- */
.tt-shell {
    display: grid;
    grid-template-columns: var(--tt-rail-width) minmax(0, 1fr);
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--tt-app-bg);
    color: var(--tt-text);
    font-family: var(--rz-text-font-family);
}

/* site.css collapses .tt-app-shell and hides search below 991px for the old sidebar; the rail keeps both. */
.tt-shell.tt-app-shell { grid-template-columns: var(--tt-rail-width) minmax(0, 1fr) !important; }
.tt-topbar .tt-global-search { display: flex !important; }

.tt-rail {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px 0;
    background: var(--tt-rail-bg);
    overflow-y: auto;
    z-index: 30;
}

.tt-rail-brand { display: block; margin-bottom: 16px; border-radius: 12px; }
.tt-rail-brand img { display: block; width: 48px; height: 48px; border-radius: 12px; }
.tt-rail-spacer { flex: 1 1 auto; min-height: 12px; }

.tt-rail-item {
    width: 68px;
    box-sizing: border-box;
    padding: 9px 2px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--tt-rail-text);
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}
.tt-rail-item .rzi { font-size: 24px; }
.tt-rail-item:hover { background: #2e3337; color: #ffffff; text-decoration: none; }
.tt-rail-item.active,
.tt-rail-item.is-open { background: var(--tt-rail-active); color: #ffffff; font-weight: 700; }
.tt-rail-item.active .rzi { color: var(--tt-orange); }
.tt-rail-item:focus-visible,
.tt-rail-avatar:focus-visible,
.tt-rail-brand:focus-visible { outline: 3px solid var(--tt-orange); outline-offset: 2px; }

.tt-rail-avatar {
    width: 40px;
    height: 40px;
    margin-top: 8px;
    border: 0;
    border-radius: 50%;
    background: var(--tt-orange);
    color: var(--tt-ink);
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}
.tt-rail-avatar.is-large { width: 44px; height: 44px; margin: 0; cursor: default; }

.tt-rail-scrim { position: fixed; inset: 0; z-index: 40; background: transparent; }

.tt-rail-panel {
    position: fixed;
    left: calc(var(--tt-rail-width) + 8px);
    bottom: 16px;
    z-index: 41;
    width: 280px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    box-sizing: border-box;
    padding: 10px;
    border-radius: 20px;
    background: var(--tt-surface);
    color: var(--tt-text);
    box-shadow: 0 12px 32px rgba(28, 31, 34, 0.18), 0 0 0 1px var(--tt-border);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.tt-rail-panel-title { margin: 6px 10px 6px; font-size: 13px; font-weight: 700; color: var(--tt-muted); }
.tt-rail-panel a,
.tt-rail-panel button {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 0 12px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--tt-text);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.tt-rail-panel a:hover,
.tt-rail-panel button:hover,
.tt-rail-panel a:focus-visible,
.tt-rail-panel button:focus-visible { background: var(--tt-app-bg); outline: none; text-decoration: none; }
.tt-rail-panel .rzi { font-size: 22px; color: var(--tt-muted); }
.tt-rail-panel-account { display: flex; align-items: center; gap: 12px; padding: 8px 10px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--tt-border); }
.tt-rail-panel-account div { display: flex; flex-direction: column; min-width: 0; }
.tt-rail-panel-account strong { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-rail-panel-account span:not(.tt-rail-avatar) { font-size: 13px; color: var(--tt-muted); }
.tt-rail-panel-meta { margin: 8px 12px 4px; font-size: 12px; color: var(--tt-muted-soft); }

.tt-main { display: flex; flex-direction: column; min-width: 0; }

.tt-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 68px;
    padding: 12px 32px;
    box-sizing: border-box;
    background: rgba(244, 242, 236, 0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--tt-border);
}
.tt-topbar-tenant { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 15px; font-weight: 700; }
.tt-topbar-tenant span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-topbar-tenant .tt-tenant-logo { width: 32px; height: 32px; object-fit: contain; border-radius: 8px; background: var(--tt-surface); }
.tt-topbar-actions { display: flex; align-items: center; gap: 10px; }
.tt-topbar-actions .rz-dropdown { border-radius: 999px; min-height: 40px; }

.tt-global-search { position: relative; display: flex; align-items: center; min-width: min(34vw, 380px); }
.tt-global-search-icon { position: absolute; left: 14px; font-size: 20px; color: var(--tt-muted); pointer-events: none; z-index: 1; }
.tt-global-search .tt-global-search-input.rz-textbox {
    width: 100%;
    height: 44px;
    padding-left: 42px;
    border-radius: 999px;
    border: 1px solid var(--tt-border-strong);
    background: var(--tt-surface);
}
.tt-global-search-results { border-radius: 16px; border-color: var(--tt-border); box-shadow: 0 12px 32px rgba(28, 31, 34, 0.16); }
.tt-global-search-result { border-radius: 10px; color: var(--tt-text); }
.tt-global-search-result:hover,
.tt-global-search-result:focus-visible { background: var(--tt-app-bg); outline: 2px solid var(--tt-ink); }
.tt-search-type { color: var(--tt-link); }

.tt-page-container {
    width: 100%;
    max-width: 1440px;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 28px 32px 48px;
}

/* ---------- Typography ---------- */
.tt-app-shell :is(h1, h2, h3, h4, .rz-text-h1, .rz-text-h2, .rz-text-h3, .rz-text-h4, .rz-text-h5, .rz-text-h6) {
    font-family: var(--rz-text-font-family);
    color: var(--tt-text);
    letter-spacing: -0.02em;
}
.tt-app-shell :is(h1, .rz-text-h3, .rz-text-h4) { font-weight: 800; }
.tt-app-shell :is(h2, h3, .rz-text-h5, .rz-text-h6) { font-weight: 700; }

/* ---------- Components ---------- */
.rz-card,
.tt-app-shell .rz-card {
    background: var(--tt-surface);
    color: var(--tt-text);
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-radius);
    box-shadow: none;
}

.rz-button { border-radius: 999px; font-weight: 700; letter-spacing: 0; text-transform: none; box-shadow: none; }
.rz-button.rz-primary { --rz-button-background-color: var(--tt-ink); background-color: var(--tt-ink); color: #ffffff; }
.rz-button.rz-primary:not(.rz-state-disabled):hover { background-color: #000000; }
.rz-button.rz-light,
.rz-button.rz-base { background-color: var(--tt-surface); color: var(--tt-text); border: 1px solid var(--tt-border-strong); }
.rz-button.rz-variant-outlined.rz-primary { background: transparent; color: var(--tt-ink); border-color: var(--tt-ink); }
.rz-button.rz-variant-text.rz-primary,
.rz-button.rz-variant-flat.rz-shade-lighter.rz-primary { background: transparent; color: var(--tt-link); }
.rz-button.rz-secondary,
.rz-button.rz-warning { color: #ffffff; }

.rz-textbox,
.rz-textarea,
.rz-dropdown,
.rz-multiselect,
.rz-numeric,
.rz-spinner,
.rz-datepicker > .rz-inputtext,
.rz-autocomplete { border-radius: 12px; border-color: var(--tt-border-strong); background-color: var(--tt-surface); }
.rz-textbox:focus,
.rz-textarea:focus,
.rz-dropdown.rz-state-focused,
.rz-numeric:focus-within { border-color: var(--tt-ink); box-shadow: 0 0 0 3px rgba(255, 90, 31, 0.25); }

.rz-badge { border-radius: 999px; font-weight: 700; text-transform: none; letter-spacing: 0; }
.rz-badge-danger,
.rz-badge.rz-badge-danger { background-color: var(--tt-danger-soft); color: var(--tt-danger-text); }
.rz-badge-warning,
.rz-badge.rz-badge-warning { background-color: var(--tt-warning-soft); color: var(--tt-warning-text); }
.rz-badge-info,
.rz-badge.rz-badge-info { background-color: var(--tt-info-soft); color: var(--tt-info); }

.rz-alert { border-radius: 16px; }
/* Filled alerts become soft tints: strong fills are reserved for genuine problems (danger keeps its weight via text). */
.rz-alert:not(.rz-shade-lighter):not(.rz-shade-light).rz-info { background-color: var(--tt-info-soft); color: var(--tt-info); }
.rz-alert:not(.rz-shade-lighter):not(.rz-shade-light).rz-warning { background-color: var(--tt-warning-soft); color: var(--tt-warning-text); }
.rz-alert:not(.rz-shade-lighter):not(.rz-shade-light).rz-success { background-color: var(--rz-success-lighter); color: var(--rz-success-dark); }
.rz-alert:not(.rz-shade-lighter):not(.rz-shade-light).rz-danger { background-color: var(--tt-danger-soft); color: var(--tt-danger-text); border: 1px solid #f3c4be; }
.rz-alert:not(.rz-shade-lighter):not(.rz-shade-light) :is(.rz-alert-title, .rz-alert-message, .rz-alert-icon, .rz-alert-close-icon, .rz-button) { color: inherit; }
/* Light/lighter shades keep Radzen's tint but get the readable text tones. */
.rz-alert:is(.rz-shade-lighter, .rz-shade-light).rz-warning { color: var(--tt-warning-text); }
.rz-alert:is(.rz-shade-lighter, .rz-shade-light).rz-danger { color: var(--tt-danger-text); }
.rz-alert:is(.rz-shade-lighter, .rz-shade-light).rz-info { color: var(--tt-info); }
.rz-alert:is(.rz-shade-lighter, .rz-shade-light).rz-success { color: var(--rz-success-dark); }
.rz-alert:is(.rz-shade-lighter, .rz-shade-light) :is(.rz-alert-title, .rz-alert-message, .rz-alert-icon) { color: inherit; }

.rz-progressbar,
.tt-progress.rz-progressbar { --rz-progressbar-background-color: #ebe7de; --rz-progressbar-border-radius: 999px; }
.rz-progressbar:is(.rz-primary, .rz-secondary, .rz-info, .rz-base, .rz-light),
.tt-readiness-blue .tt-progress.rz-progressbar { --rz-progressbar-value-background-color: var(--tt-ink); }

/* One title scale for every page heading, whatever Radzen text style the page picked. */
.tt-page-container > :is(h1, .rz-text-h1, .rz-text-h2, .rz-text-h3),
.tt-page-container :is(h1.rz-text-h1, h1.rz-text-h2, h1.rz-text-h3, h1.rz-text-h4, h1) {
    font-size: clamp(1.75rem, 2.4vw, 2.25rem);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.025em;
}

.rz-data-grid,
.rz-datatable { border-radius: 16px; border-color: var(--tt-border); overflow: hidden; background: var(--tt-surface); }
.rz-grid-table thead th { font-weight: 700; color: var(--tt-muted); }
.rz-data-row:hover > td { background: var(--tt-surface-soft); }
.rz-paginator { background: var(--tt-surface); }
.rz-paginator-page.rz-state-active,
.tt-data-grid .rz-paginator-page.rz-state-active { background: var(--tt-ink); color: #ffffff; border-radius: 999px; }

.rz-tabview-nav li.rz-tabview-selected { font-weight: 700; }
.rz-dialog { border-radius: 20px; }
.rz-dialog-titlebar { font-weight: 800; }

:where(.tt-page-container) a { color: var(--tt-link); }

/* Fleet UX buttons (Today, vehicle profile): ink pills instead of the old orange squares. */
.fleet-button { border-radius: 999px; background: var(--tt-ink); color: #ffffff; font-weight: 700; }
.fleet-button:hover { background: #000000; color: #ffffff; text-decoration: none; }
.tt-app-shell :is(button, a, input, select, textarea):focus-visible { outline: 3px solid var(--tt-orange); outline-offset: 2px; }

/* Feature surfaces that used the old blue accents */
.tt-kpi-card.rz-card,
.tt-panel.rz-card,
.tt-control-metric { border-radius: var(--tt-radius); border-color: var(--tt-border); box-shadow: none; }

/* ---------- Dark appearance (Radzen humanistic-dark) ---------- */
html:has(link[href*="-dark"]) {
    --tt-app-bg: #16191b;
    --tt-surface: #1f2326;
    --tt-surface-soft: #252a2e;
    --tt-border: #30363a;
    --tt-border-strong: #42494e;
    --tt-text: #eceeef;
    --tt-muted: #b0b6bb;
    --tt-muted-soft: #9aa1a6;
    --tt-link: #ff8a57;
    --tt-link-hover: #ffb08c;
    --tt-danger-soft: #3a1d1c;
    --tt-danger-text: #ffb3ac;
    --tt-warning-soft: #3a2d14;
    --tt-warning-text: #f8cb7a;
    --tt-info-soft: #1b2a44;
    --tt-info: #a9c8ff;
    --rz-body-background-color: #16191b;
    --rz-primary: #ff6b2c;
    --rz-on-primary: #1a0c05;
    --rz-text-color: #eceeef;
    --rz-text-title-color: #eceeef;
    --rz-text-secondary-color: #b0b6bb;
    --rz-base-background-color: #1f2326;
}
html:has(link[href*="-dark"]) .tt-topbar { background: rgba(22, 25, 27, 0.92); }
html:has(link[href*="-dark"]) .rz-button.rz-primary { background-color: #ff6b2c; color: #1a0c05; }
html:has(link[href*="-dark"]) .tt-rail-avatar { color: #1a0c05; }

/* ---------- Narrow screens: the rail becomes a bottom bar ---------- */
@media (max-width: 767px) {
    .tt-shell.tt-app-shell { grid-template-columns: minmax(0, 1fr) !important; padding-bottom: 72px; }
    .tt-rail {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        height: 72px;
        flex-direction: row;
        justify-content: flex-start;
        gap: 2px;
        padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
        overflow-x: auto;
        overflow-y: hidden;
    }
    .tt-rail-brand,
    .tt-rail-spacer { display: none; }
    .tt-rail-item { width: 64px; flex-shrink: 0; padding: 6px 2px; }
    .tt-rail-avatar { margin: 0 6px; }
    .tt-rail-panel { left: 8px; right: 8px; bottom: 80px; width: auto; max-height: 70vh; }
    .tt-topbar { padding: 10px 16px; min-height: 60px; }
    .tt-global-search { min-width: 0; flex: 1 1 auto; }
    .tt-topbar-tenant span { display: none; }
    .tt-page-container { padding: 16px; }
}