:root {
    --bg: rgb(111 111 111);
    --bg-elevated: rgb(214 214 214);
    --bg-soft: rgb(255 255 255);
    --border: rgb(0 61 120 / 0.24);
    --text: rgb(0 0 0);
    --text-on-dark: rgb(255 255 255);
    --muted: rgb(32 32 32 / 0.76);
    --primary: rgb(0 61 120);
    --primary-strong: rgb(0 102 177);
    --danger: rgb(226 39 24);
    --surface-blue: rgb(0 61 120 / 0.08);
    --surface-light: rgb(214 214 214 / 0.82);
    --shadow: 0 20px 40px rgba(0, 0, 0, 0.18);
    --border-strong: rgb(0 61 120 / 0.4);
    --radius: 18px;
    --radius-lg: 22px;
    --space-1: 8px;
    --space-2: 12px;
    --space-3: 16px;
    --space-4: 20px;
    --space-5: 24px;
    --dashboard-fullscreen-scale: 1;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

@media (max-width: 760px) {
    body[data-page="logs"] .logs-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Incident reports keep operational data in a compact, editable card. */
.incident-report-section { display: grid; gap: 0.65rem; padding-top: 0.35rem; border-top: 1px solid var(--line, #c4d5e6); }
.incident-report-header h2 { margin: 0; }
.incident-report-stage-form { margin: 0; min-width: min(100%, 340px); }
.incident-report-stage-form label { display: grid; gap: 0.3rem; font-size: 1rem; font-weight: 700; }
.incident-report-stage-form select { min-height: 46px; font-size: 1.08rem; font-weight: 700; }
.incident-report-toggle { border: 0; padding: 0; background: transparent; color: inherit; cursor: pointer; font: inherit; font-size: 1.3rem; font-weight: 800; text-align: left; }
.incident-report-toggle::after { content: " +"; color: var(--brand-blue, #00549c); }
.incident-report-toggle[aria-expanded="true"]::after { content: " -"; }
.incident-report-card h3 { white-space: normal; overflow-wrap: anywhere; }
.incident-report-section h4 { margin: 0; }
.incident-report-parts, #incident-report-image-descriptions { display: grid; gap: 0.55rem; }
.incident-report-part-row { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 0.55rem; }
.incident-report-image-row { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(180px, 2fr) auto; gap: 0.75rem; align-items: center; padding: 0.6rem 0.75rem; background: rgba(255, 255, 255, 0.55); border: 1px solid var(--line, #c4d5e6); border-radius: 0.7rem; }
@media (max-width: 720px) { .incident-report-image-row, .incident-report-part-row { grid-template-columns: 1fr; } }

* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

[hidden] {
    display: none !important;
}

body {
    margin: 0;
    min-height: 100vh;
    font-size: 16px;
    line-height: 1.45;
    background:
        linear-gradient(140deg, rgb(0 102 177 / 0.2) 0%, transparent 32%),
        linear-gradient(180deg, rgb(111 111 111) 0%, rgb(214 214 214) 100%);
    color: var(--text);
}

a {
    color: inherit;
    text-decoration: none;
}

.app-shell {
    min-height: 100vh;
    padding: 12px;
}

.topbar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
    padding: 16px;
    border-radius: var(--radius-lg);
    background: linear-gradient(90deg, rgb(0 61 120) 0%, rgb(0 102 177) 60%, rgb(0 61 120) 100%);
    color: var(--text-on-dark);
    box-shadow: var(--shadow);
}

.topbar-title-group {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.topbar-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.topbar-action-stack {
    display: contents;
}

.topbar h1,
.auth-card h2,
.hero-card h2,
.panel h3 {
    margin: 0;
}

.eyebrow {
    margin: 0 0 6px;
    color: rgb(214 214 214);
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.topbar-brand {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
}

.brand-logo-landscape {
    width: min(260px, 100%);
    max-height: 54px;
    object-fit: contain;
}

.brand-logo-portrait {
    width: min(220px, 100%);
    object-fit: contain;
    margin-bottom: 12px;
}

.auth-brand-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.brand-logo-vettari {
    width: min(220px, 100%);
    object-fit: contain;
    justify-self: center;
}

.brand-logo-gforce {
    width: min(180px, 100%);
    object-fit: contain;
    justify-self: center;
}

.topbar-user {
    display: flex;
    align-items: stretch;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
}

.topbar-identity {
    display: grid;
    gap: 4px;
    align-content: center;
}

.topbar-user-name {
    font-weight: 700;
    font-size: 1rem;
}

.topbar-user-role {
    font-size: 0.9rem;
    color: rgb(214 214 214);
}

.topbar-home-button {
    width: auto;
    min-width: 92px;
}

.topbar-unread-button {
    width: auto;
    min-width: 128px;
    gap: 8px;
}

.topbar-logout-button {
    width: auto;
    min-width: 92px;
}

.topbar-action-stack .ghost-button {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1;
    justify-content: center;
}

.topbar-button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 1rem;
}

.topbar-icon-svg {
    width: 18px;
    height: 18px;
    display: block;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.topbar-button-label {
    display: inline;
}

.mobile-only-block,
.mobile-only-button {
    display: none;
}

.topbar-unread-button-active {
    animation: subtlePulse 1.2s ease-in-out infinite;
}

.topbar-unread-count {
    display: inline-flex;
    min-width: 28px;
    min-height: 28px;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    border-radius: 999px;
    background: rgb(255 255 255 / 0.18);
    font-weight: 700;
}

.topbar-session-link {
    display: inline-flex;
    color: inherit;
}

.topbar-session-box {
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgb(255 255 255 / 0.12);
    border: 1px solid rgb(255 255 255 / 0.18);
    min-width: 220px;
    transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
}

.topbar-session-box[data-state="current"] {
    background: #1d7c45;
    border-color: rgb(255 255 255 / 0.22);
}

.topbar-session-box[data-state="warning"] {
    background: #d6a800;
    border-color: rgb(255 255 255 / 0.22);
}

.topbar-session-box[data-state="idle"] {
    background: #6f6f6f;
    border-color: rgb(255 255 255 / 0.18);
}

.topbar-session-box:hover {
    background: rgb(255 255 255 / 0.18);
    border-color: rgb(255 255 255 / 0.28);
    transform: translateY(-1px);
}

.topbar-session-box[data-state="current"]:hover {
    background: #228a4d;
}

.topbar-session-box[data-state="warning"]:hover {
    background: #e0b100;
}

.topbar-session-box[data-state="idle"]:hover {
    background: #7a7a7a;
}

.topbar-session-title {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgb(214 214 214);
}

.topbar-session-name {
    font-weight: 700;
    font-size: 0.98rem;
    color: var(--text-on-dark);
}

.topbar-session-meta,
.topbar-session-countdown {
    font-size: 0.86rem;
    color: rgb(255 255 255 / 0.92);
}

.role-badge,
.status-pill,
.tag {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 7px 11px;
    background: rgb(0 102 177);
    border: 1px solid rgb(0 61 120 / 0.3);
    color: var(--text-on-dark);
    font-size: 0.82rem;
}

.tag-muted {
    background: rgb(80 80 80);
    border-color: rgb(40 40 40 / 0.45);
    color: var(--text-on-dark);
}

.page-content {
    width: min(1500px, 100%);
    margin: 0 auto;
    min-width: 0;
}

.app-footer {
    display: grid;
    justify-items: center;
    gap: 6px;
    width: min(1500px, 100%);
    margin: 10px auto 0;
    padding: 4px 12px 2px;
}

.app-footer-branding {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: nowrap;
    opacity: 0.72;
    width: min(420px, 100%);
    margin: 0 auto;
}

.app-footer-logo {
    display: block;
    object-fit: contain;
    filter: saturate(0.92);
    max-width: 100%;
    height: 78px;
}

.app-footer-logo-vettari {
    width: auto;
    max-height: 78px;
}

.app-footer-logo-gforce {
    width: auto;
    max-height: 78px;
}

.app-footer-license {
    margin: 0;
    font-size: 1rem;
    line-height: 1.2;
    color: rgb(32 32 32 / 0.76);
    text-align: center;
}

.auth-layout {
    display: grid;
    gap: 20px;
}

.auth-card,
.auth-panel,
.hero-card,
.panel {
    background: var(--surface-light);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    min-width: 0;
    max-width: 100%;
}

.auth-card,
.auth-panel,
.panel {
    padding: 18px;
}

.hero-card {
    padding: 18px;
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 14px;
    background: linear-gradient(120deg, rgb(214 214 214) 0%, rgb(255 255 255) 55%, rgb(214 214 214) 100%);
    min-width: 0;
    max-width: 100%;
}

.muted {
    color: var(--muted);
    line-height: 1.5;
}

.form-grid {
    display: grid;
    gap: 14px;
    margin-top: 18px;
}

.form-grid label {
    display: grid;
    gap: 8px;
    font-size: 0.95rem;
}

input {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--bg-soft);
    color: var(--text);
    min-height: 48px;
    padding: 12px 14px;
    font-size: 1rem;
}

@media (max-width: 760px) {
    /* Native date controls have a large intrinsic minimum width on mobile browsers. */
    .form-grid > label,
    .form-grid > .field,
    label:has(> input[type="date"]),
    label:has(> input[type="datetime-local"]),
    label:has(> input[type="time"]) {
        min-width: 0;
    }

    input[type="date"],
    input[type="datetime-local"],
    input[type="time"] {
        inline-size: 100%;
        min-inline-size: 0;
        max-inline-size: 100%;
        padding-inline: 8px;
        font-size: 0.92rem;
    }
}

select {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--bg-soft);
    color: var(--text);
    min-height: 48px;
    padding: 12px 14px;
    font-size: 1rem;
}

textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--bg-soft);
    color: var(--text);
    padding: 12px 14px;
    font-size: 1rem;
    resize: vertical;
}

input:focus {
    outline: 2px solid rgb(0 102 177 / 0.32);
    border-color: var(--primary);
}

select:focus {
    outline: 2px solid rgb(0 102 177 / 0.32);
    border-color: var(--primary);
}

textarea:focus {
    outline: 2px solid rgb(0 102 177 / 0.32);
    border-color: var(--primary);
}

.primary-button,
.ghost-button,
.danger-button {
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    min-height: 46px;
    border-radius: 14px;
    padding: 0 16px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    text-align: center;
    font-family: inherit;
    font-size: inherit;
}

.primary-button {
    background: var(--primary);
    color: var(--text-on-dark);
}

.ghost-button {
    background: var(--primary-strong);
    border-color: rgb(0 61 120 / 0.4);
    color: var(--text-on-dark);
}

.danger-button {
    min-height: 42px;
    background: var(--danger);
    border-color: rgb(0 0 0 / 0.12);
    color: var(--text-on-dark);
}

.alert-error {
    margin-top: 18px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgb(226 39 24 / 0.12);
    border: 1px solid rgb(226 39 24 / 0.42);
    color: rgb(86 0 0);
}

.alert-success {
    margin-top: 18px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgb(0 102 177 / 0.1);
    border: 1px solid rgb(0 61 120 / 0.24);
    color: rgb(0 61 120);
}

.helper-box {
    margin-top: 18px;
    padding: 14px;
    border-radius: 14px;
    background: rgb(255 255 255 / 0.62);
    border: 1px solid var(--border);
}

.helper-box p {
    margin: 6px 0 0;
}

.checklist-panel {
    border: 2px solid rgb(0 61 120 / 0.32);
}

.checkbox-grid {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.checkbox-chip {
    display: flex !important;
    align-items: center;
    gap: 10px !important;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgb(255 255 255 / 0.76);
    border: 1px solid var(--border);
}

.checkbox-chip input {
    width: auto;
    min-height: 0;
    margin: 0;
}

.helper-selector-grid {
    margin-top: 12px;
}

.helper-selector-option.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pdf-options-box {
    margin-top: 0;
}

.stage-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
}

.stage-summary-card {
    padding: 12px;
    border-radius: 14px;
    background: rgb(255 255 255 / 0.72);
    border: 1px solid var(--border);
    min-width: 0;
}

.stage-summary-card strong {
    display: block;
    margin-top: 4px;
    line-height: 1.35;
}

.incident-status-duration-grid {
    margin-top: 12px;
}

.incident-status-duration-card strong {
    font-variant-numeric: tabular-nums;
    font-size: 1.05rem;
}

.incident-status-duration-card-active {
    border-color: var(--accent);
    background: rgb(18 96 173 / 0.10);
}

.config-toggle {
    margin-top: 16px;
    border-radius: 16px;
    background: rgb(255 255 255 / 0.52);
    border: 1px solid var(--border);
    overflow: hidden;
}

.config-toggle summary {
    list-style: none;
    cursor: pointer;
    padding: 14px 16px;
    font-weight: 600;
    background: rgb(0 61 120 / 0.08);
}

.config-toggle summary::-webkit-details-marker {
    display: none;
}

.config-toggle[open] summary {
    border-bottom: 1px solid var(--border);
}

.config-toggle .form-grid,
.config-toggle .checkbox-grid {
    margin: 0;
    padding: 16px;
}

.pdf-columns-toggle {
    margin-top: 12px;
    background: rgb(255 255 255 / 0.72);
}

.pdf-export-form {
    gap: 12px;
}

.pdf-checkbox-grid {
    grid-template-columns: 1fr;
}

.auth-panel ul,
.simple-list {
    margin: 14px 0 0;
    padding-left: 18px;
    color: var(--muted);
}

.auth-panel-copy {
    display: grid;
    gap: 14px;
}

.auth-panel-copy p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.auth-license {
    text-align: center;
}

.grid-panels {
    display: grid;
    gap: 20px;
}

.home-grid {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 100%;
}

.home-schedule-panel {
    display: grid;
    gap: 6px;
    align-content: start;
    width: 100%;
    max-width: 100%;
}

.home-schedule-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.home-schedule-body {
    min-width: 0;
}

.home-schedule-stage-name {
    margin: 0 0 10px;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.15;
}

.home-schedule-list {
    display: grid;
    gap: 6px;
    min-height: 0;
    min-height: 220px;
    height: auto;
    max-height: 420px;
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-width: thin;
}

.home-schedule-list .dashboard-schedule-row {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) 104px;
    gap: 8px;
    align-items: center;
    min-height: 30px;
    padding: 5px 8px;
    border-radius: 10px;
    background: rgb(255 255 255 / 0.68);
    border: 1px solid var(--border);
    font-size: 0.82rem;
    line-height: 1.12;
}

.home-schedule-list .dashboard-schedule-row > span:first-child,
.home-schedule-list .dashboard-schedule-row > strong,
.home-schedule-list .dashboard-schedule-row > span:last-child {
    min-width: 0;
    align-self: center;
}

.home-schedule-list .dashboard-schedule-row > span:first-child {
    justify-self: start;
    text-align: left;
    white-space: nowrap;
}

.home-schedule-list .dashboard-schedule-row > strong {
    justify-self: stretch;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-schedule-list .dashboard-schedule-row > span:last-child {
    justify-self: end;
    text-align: right;
    white-space: nowrap;
}

.home-schedule-list .dashboard-schedule-current {
    border-color: rgb(36 122 72 / 0.44);
    background: rgb(36 122 72 / 0.12);
}

.home-schedule-list .dashboard-schedule-next {
    border-color: rgb(235 196 24 / 0.44);
    background: rgb(235 196 24 / 0.12);
}

.home-schedule-list .dashboard-schedule-past {
    color: rgb(32 32 32 / 0.62);
}

.home-schedule-list .dashboard-schedule-past strong,
.home-schedule-list .dashboard-schedule-past span {
    text-decoration: line-through;
}

.menu-panel-wide {
    width: 100%;
    max-width: 100%;
}

.home-tags {
    margin-bottom: 16px;
}

.home-menu-grid {
    display: grid;
    gap: 12px;
}

.inline-form {
    display: inline-flex;
}

.home-menu-button {
    min-height: 54px;
    font-size: 1.02rem;
    padding: 0 20px;
    position: relative;
    justify-content: flex-start;
    gap: 10px;
}

.home-menu-alert-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: transparent;
    flex: 0 0 auto;
}

.home-menu-button-alert {
    animation: subtlePulse 1.2s ease-in-out infinite;
}

.home-menu-button-alert .home-menu-alert-dot {
    background: #ffd23c;
    box-shadow: 0 0 0 4px rgb(255 210 60 / 0.22);
}

/* Sparse menus preserve the supervisor's matrix without stretching actions. */
@media (min-width: 800px) {
    body[data-page="home"] .home-menu-grid.home-menu-grid--compact {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-auto-rows: 54px;
        align-content: start;
        flex: 0 0 auto;
    }

    body[data-page="home"] .home-menu-grid.home-menu-grid--compact .home-menu-button {
        min-height: 54px;
        padding: 0 18px;
        font-size: 1rem;
    }
}

.collapsible-box[hidden] {
    display: none !important;
}

.cars-layout {
    display: grid;
    gap: 20px;
    min-width: 0;
}

.registry-layout {
    display: grid;
    gap: 20px;
}

.registry-layout-stacked,
.cars-layout-stacked {
    grid-template-columns: 1fr;
}

.stage-panel,
.full-width-panel {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 100%;
    justify-self: stretch;
    min-width: 0;
    overflow: visible;
}

.registry-form-panel {
    grid-column: 1 / -1;
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.panel-actions {
    margin-top: 14px;
    display: grid;
    gap: 10px;
}

.two-columns {
    grid-template-columns: 1fr;
}

.full-span {
    grid-column: 1 / -1;
}

.form-actions {
    display: flex;
    justify-content: flex-start;
}

.bulk-form {
    display: grid;
    gap: 18px;
}

.bulk-actions-shell {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

.bulk-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 50%;
    gap: 10px;
    padding-top: 8px;
}

.bulk-actions .primary-button,
.bulk-actions .ghost-button,
.bulk-actions .danger-button {
    width: 100%;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.logs-layout {
    grid-template-columns: 1fr;
}

.logs-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    justify-content: start;
}

.logs-tab-button {
    display: grid;
    gap: 6px;
    align-content: center;
    width: 100%;
    min-height: 84px;
    padding: 14px 18px;
    border-radius: 16px;
    background: rgb(255 255 255 / 0.72);
    border: 2px solid var(--border);
    color: var(--text);
    font-weight: 600;
    text-decoration: none;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.22);
    transition: transform 120ms ease, border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}

.logs-tab-button:hover {
    transform: translateY(-1px);
    border-color: var(--border-strong);
}

.logs-tab-title {
    font-size: 1.05rem;
    font-weight: 700;
}

.logs-tab-meta {
    font-size: 0.8rem;
    color: var(--muted);
}

.logs-tab-button.is-active {
    background: var(--primary);
    border-color: rgb(0 61 120 / 0.66);
    color: var(--text-on-dark);
    box-shadow: 0 0 0 3px rgb(0 102 177 / 0.18);
}

.logs-tab-button.is-active .logs-tab-meta {
    color: rgb(255 255 255 / 0.88);
}

.logs-filter-grid {
    width: 100%;
}

.checklist-mode-tabs {
    margin-top: 18px;
    margin-bottom: 8px;
}

.checklist-mode-tabs.logs-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
}

.checklist-mode-tabs .logs-tab-button,
.checklist-mode-tabs.logs-tabs .logs-tab-button {
    min-height: 60px;
    padding: 10px 16px;
}

.checklist-mode-tabs .logs-tab-title,
.checklist-mode-tabs.logs-tabs .logs-tab-title {
    font-size: 0.98rem;
}

.checklist-mode-tabs-mobile-readonly.logs-tabs {
    grid-template-columns: repeat(2, minmax(220px, min(25vw, 360px)));
}

.checklist-audience-filter {
    display: grid;
    gap: 6px;
    min-width: 0;
    padding: 0;
    border: 0;
}

.checklist-audience-filter legend {
    padding: 0;
    font-size: 0.82rem;
    font-weight: 700;
}

.checklist-audience-buttons {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.checklist-audience-button {
    min-width: 0;
    min-height: 40px;
    padding: 0 14px;
    text-align: center;
}

.onboard-link-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.onboard-link-card {
    display: grid;
    grid-template-columns: minmax(140px, 0.7fr) minmax(0, 1.3fr);
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    background: rgb(255 255 255 / 0.76);
}

.onboard-link-pilot,
.onboard-link-value {
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 12px;
}

.onboard-link-pilot {
    background: rgb(0 61 120 / 0.08);
}

.onboard-link-form {
    display: flex;
    width: 100%;
    gap: 8px;
}

.onboard-link-form input {
    min-width: 0;
    flex: 1;
}

.onboard-open-link {
    width: 100%;
    text-align: center;
}

@media (max-width: 720px) {
    .onboard-link-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .onboard-link-card {
        grid-template-columns: minmax(110px, 0.75fr) minmax(0, 1.25fr);
    }

    .onboard-link-form {
        flex-direction: column;
    }

    .onboard-link-form .primary-button {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .checklist-audience-buttons {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.tires-tabs-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tires-tabs-row .logs-tab-button {
    min-width: 0;
    min-height: 52px;
    padding: 8px 12px;
}

.tires-tabs-row .logs-tab-title {
    font-size: 0.92rem;
}

.checklist-percentage-groups {
    display: grid;
    gap: 18px;
    margin-top: 18px;
}

.checklist-percentage-group {
    border: 2px solid rgb(0 61 120 / 0.22);
    border-radius: 18px;
    background: rgb(255 255 255 / 0.5);
    overflow: hidden;
}

.checklist-percentage-heading,
.checklist-percentage-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: rgb(255 255 255 / 0.74);
}

.checklist-percentage-summary {
    cursor: pointer;
    list-style: none;
}

.checklist-percentage-summary::-webkit-details-marker {
    display: none;
}

.checklist-percentage-group-collapsible[open] .checklist-percentage-summary {
    border-bottom: 2px solid rgb(0 61 120 / 0.18);
}

.checklist-percentage-meter {
    display: grid;
    gap: 4px;
    min-width: 240px;
    width: 100%;
}

.checklist-percentage-labels {
    position: relative;
    height: 16px;
}

.checklist-percentage-label {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    font-size: 0.72rem;
    line-height: 1;
    white-space: nowrap;
    font-weight: 700;
}

.checklist-percentage-label-ok {
    color: rgb(17 86 45);
    left: 0;
    transform: none;
}

.checklist-percentage-label-pending {
    color: rgb(80 80 80);
    left: 50%;
}

.checklist-percentage-label-nok {
    color: rgb(144 18 8);
    left: 100%;
    transform: translateX(-100%);
}

/* Dashboard V1.1.3: fixed information grid; only open incidents may extend the page. */
@media (min-width: 800px) {
    body[data-page="dashboard"] .dashboard-layout {
        --dashboard-row-height: max(300px, calc((100vh - 260px) / 2));
        width: 100%;
    }

    body[data-page="dashboard"] .dashboard-grid {
        display: grid;
        grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 2fr);
        grid-template-areas:
            "matrix schedule checklist"
            "open cars cars";
        grid-template-rows: var(--dashboard-row-height) minmax(var(--dashboard-row-height), max-content);
        gap: 16px;
        height: auto;
        align-items: start;
    }

    body[data-page="dashboard"] .dashboard-grid:has(.dashboard-open-panel.is-empty) {
        grid-template-areas:
            "matrix schedule checklist"
            "open cars cars";
    }

    body[data-page="dashboard"] .dashboard-grid > .dashboard-matrix-panel,
    body[data-page="dashboard"] .dashboard-grid > .dashboard-schedule-panel,
    body[data-page="dashboard"] .dashboard-grid > .dashboard-checklists-panel,
    body[data-page="dashboard"] .dashboard-grid > .dashboard-cars-panel {
        display: block;
        height: var(--dashboard-row-height);
        min-height: var(--dashboard-row-height);
        padding: 14px;
        overflow: hidden;
    }

    body[data-page="dashboard"] .dashboard-grid > .dashboard-open-panel {
        display: block;
        height: auto;
        min-height: var(--dashboard-row-height);
        padding: 14px;
        overflow: visible;
    }

    body[data-page="dashboard"] .dashboard-open-panel.is-empty {
        display: block;
    }

    body[data-page="dashboard"] .dashboard-panel-toggle {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        height: 100%;
        min-height: 0;
    }

    body[data-page="dashboard"] .dashboard-open-panel .dashboard-panel-toggle {
        display: block;
        height: auto;
    }

    body[data-page="dashboard"] .dashboard-panel-summary {
        pointer-events: none;
        min-height: 28px;
        margin-bottom: 8px;
    }

    body[data-page="dashboard"] .dashboard-panel-body-fill {
        min-height: 0;
        overflow: hidden;
    }

    body[data-page="dashboard"] .dashboard-schedule-list,
    body[data-page="dashboard"] .dashboard-checklist-groups {
        height: 100%;
        overflow-y: auto;
        padding-right: 4px;
    }

    body[data-page="dashboard"] .dashboard-matrix-panel .dashboard-panel-body-fill,
    body[data-page="dashboard"] .dashboard-cars-panel .dashboard-panel-body-fill {
        height: 100%;
    }

    body[data-page="dashboard"] .dashboard-matrix-grid {
        height: 100%;
    }

    body[data-page="dashboard"] .dashboard-open-panel .dashboard-panel-body-fill,
    body[data-page="dashboard"] .dashboard-open-incident-list {
        height: auto;
        overflow: visible;
    }

    body[data-page="dashboard"] .dashboard-open-incident-list {
        display: grid;
        gap: 8px;
    }

    body[data-page="dashboard"] .dashboard-cars-panel .dashboard-cards-grid {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        grid-template-rows: repeat(4, minmax(0, 1fr));
        grid-auto-rows: 0;
        height: 100%;
        gap: 7px;
        overflow: hidden;
    }

    body[data-page="dashboard"] .dashboard-cars-panel .dashboard-car-card {
        min-height: 0;
        height: 100%;
        overflow: hidden;
    }
}

@media (min-width: 800px) {
    body[data-page="pilots"] .pilot-mobile-card-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    body[data-page="pilots"] .pilot-mobile-card {
        min-width: 0;
        padding: 16px 18px;
        gap: 12px;
    }

    body[data-page="pilots"] .pilot-mobile-card-name {
        font-size: 1.18rem;
        line-height: 1.16;
    }

    body[data-page="pilots"] .pilot-mobile-card-meta {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        font-size: 0.96rem;
        line-height: 1.22;
    }

    body[data-page="pilots"] .pilot-mobile-card-meta small {
        font-size: 0.74rem;
    }

    body[data-page="pilots"] .pilot-mobile-card .action-stack.equal-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        max-width: none;
    }

    body[data-page="pilots"] .pilot-mobile-card .action-stack.equal-actions > *,
    body[data-page="pilots"] .pilot-mobile-card .action-stack.equal-actions form,
    body[data-page="pilots"] .pilot-mobile-card .action-stack.equal-actions a,
    body[data-page="pilots"] .pilot-mobile-card .action-stack.equal-actions button {
        width: 100%;
        margin: 0;
    }
}

.checklist-percentage-bar {
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: rgb(255 255 255 / 0.54);
    border: 1px solid rgb(0 61 120 / 0.12);
}

.checklist-percentage-segment {
    height: 100%;
}

.checklist-percentage-segment-ok {
    background: rgb(27 122 64);
}

.checklist-percentage-segment-pending {
    background: rgb(160 160 160);
}

.checklist-percentage-segment-nok {
    background: rgb(226 39 24);
}

.checklist-percentage-heading-cell {
    text-align: center !important;
}

.checklist-percentage-label-cell {
    min-width: 240px;
}

.checklist-percentage-metric-cell {
    min-width: 290px;
    width: 290px;
    padding-left: 18px !important;
    padding-right: 18px !important;
    text-align: center;
}

.stage-grid {
    grid-template-columns: 1fr;
}

.wide-span {
    grid-column: 1 / -1;
}

.checkbox-field {
    display: flex !important;
    align-items: center;
    gap: 10px !important;
    padding-top: 4px;
}

.checkbox-field input {
    width: auto;
}

.action-stack {
    display: grid;
    gap: 10px;
    min-width: 100%;
}

.action-stack > * {
    width: 100%;
}

.action-stack form {
    margin: 0;
}

.action-stack form button,
.action-stack a {
    width: 100%;
}

.equal-actions {
    max-width: 160px;
}

.table-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    margin-top: 12px;
    padding-bottom: 4px;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    border-radius: 16px;
    width: 100%;
    max-width: 100%;
}

/* This table only exists in the mobile Calendar view. Keep horizontal movement inside it. */
.schedule-mobile-calendar-scroll {
    overflow-x: auto !important;
    overflow-y: hidden;
    max-width: 100%;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y !important;
}

.schedule-mobile-calendar-table {
    width: 410px !important;
    min-width: 410px !important;
    table-layout: fixed;
}

.schedule-mobile-calendar-table th,
.schedule-mobile-calendar-table td {
    padding-inline: 5px;
}

.schedule-mobile-calendar-table th:first-child,
.schedule-mobile-calendar-table td:first-child {
    width: 34px;
    white-space: nowrap;
}

.schedule-mobile-calendar-table th:nth-child(2),
.schedule-mobile-calendar-table td:nth-child(2) {
    width: 198px;
}

.schedule-mobile-calendar-table th:nth-child(3),
.schedule-mobile-calendar-table td:nth-child(3),
.schedule-mobile-calendar-table th:nth-child(4),
.schedule-mobile-calendar-table td:nth-child(4) {
    width: 72px;
    padding-inline: 3px;
    white-space: nowrap;
}

.narrow-flow-panel {
    width: min(100%, 1040px);
    justify-self: start;
}

.box-group {
    border: 1px solid rgb(0 61 120 / 0.16);
    border-radius: 18px;
    background: rgb(255 255 255 / 0.72);
    padding: 12px;
    min-width: 0;
}

.operation-card-grid {
    display: grid;
    gap: 16px;
    margin-top: 12px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.operation-card {
    display: grid;
    gap: 8px;
    padding: 18px;
    border-radius: 18px;
    background: rgb(255 255 255 / 0.8);
    border: 2px solid rgb(0 61 120 / 0.18);
}

.operation-card-header {
    display: grid;
    gap: 0;
}

.operation-card-header h4,
.operation-card-header p,
.operation-card-chassis,
.operation-card-staff p,
.operation-card-meta-grid div {
    margin: 0;
}

.operation-card-inline {
    line-height: 1.2;
}

.operation-card-chassis {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--muted);
}

.operation-card-staff {
    display: grid;
    gap: 2px;
}

.operation-card-divider {
    height: 1px;
    background: rgb(0 61 120 / 0.16);
    width: 100%;
    margin: 2px 0;
}

.operation-card-mobile-dropdown {
    padding: 0;
    overflow: hidden;
}

.operation-card-mobile-summary {
    display: grid;
    gap: 2px;
    padding: 14px 16px;
    cursor: pointer;
    list-style: none;
    background: rgb(255 255 255 / 0.76);
}

.operation-card-mobile-summary::-webkit-details-marker {
    display: none;
}

.operation-card-mobile-summary-label {
    font-size: 0.72rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.operation-card-mobile-summary-value {
    font-size: 1.06rem;
    line-height: 1.05;
}

.operation-card-mobile-body {
    display: grid;
    gap: 8px;
    padding: 0 16px 16px;
    border-top: 1px solid rgb(0 61 120 / 0.16);
}

.operation-card-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 18px;
}

.operation-card-meta-grid div {
    display: grid;
    gap: 2px;
}

.operation-card-meta-grid span {
    font-size: 0.8rem;
    color: var(--muted);
}

.box-group-conflict {
    border-color: rgb(226 39 24 / 0.55);
    box-shadow: inset 0 0 0 1px rgb(226 39 24 / 0.16);
}

.box-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.box-group-heading {
    display: grid;
    gap: 6px;
}

.box-group-header h4 {
    margin: 0;
    font-size: 1rem;
}

.box-group-shared-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    color: var(--muted);
    font-size: 0.86rem;
}

.box-group-comboboxes {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, minmax(140px, 1fr));
    margin-top: 4px;
}

.box-multiselect {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgb(255 255 255 / 0.76);
    overflow: hidden;
}

.box-multiselect-summary {
    list-style: none;
    cursor: pointer;
    display: grid;
    gap: 2px;
    padding: 10px 12px;
    background: rgb(255 255 255 / 0.76);
}

.box-multiselect-summary::-webkit-details-marker {
    display: none;
}

.box-multiselect-label {
    font-size: 0.78rem;
    color: var(--muted);
}

.box-multiselect-value {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.25;
}

.box-multiselect[open] .box-multiselect-summary {
    border-bottom: 1px solid var(--border);
}

.box-multiselect-options {
    display: grid;
    gap: 8px;
    padding: 10px;
    max-height: 220px;
    overflow-y: auto;
}

.box-multiselect-option {
    margin: 0;
}

.cars-distribution-actions {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

.cars-distribution-card {
    display: grid;
    gap: 12px;
    padding: 14px;
    border-radius: 16px;
    background: rgb(255 255 255 / 0.62);
    border: 1px solid var(--border);
}

.cars-distribution-card-button {
    align-content: end;
}

.cars-distribution-card .primary-button,
.cars-distribution-card .ghost-button,
.cars-distribution-card .danger-button {
    width: 100%;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0;
    min-width: 640px;
    background: rgb(255 255 255 / 0.72);
    border-radius: 16px;
    overflow: hidden;
}

.data-table th,
.data-table td {
    text-align: left;
    padding: 10px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
    font-size: 0.88rem;
}

.data-table th {
    color: var(--muted);
    font-weight: 600;
    white-space: nowrap;
    background: rgb(0 61 120 / 0.08);
}

.data-table tbody tr:hover td {
    background: rgb(255 255 255 / 0.85);
}

.checklist-table tbody tr:hover td {
    background: rgb(255 255 255 / 0.82);
}

.data-table input,
.data-table select {
    min-width: 86px;
    min-height: 40px;
    padding: 8px 10px;
    font-size: 0.9rem;
}

.wide-table .vin-column {
    width: 138px;
    max-width: 138px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wide-table .compact-number-column,
.wide-table .compact-number-cell {
    width: 72px;
    min-width: 72px;
    max-width: 72px;
    text-align: center;
}

.wide-table .compact-number-input {
    min-width: 60px !important;
    width: 60px;
    text-align: center;
    padding-inline: 6px;
}

.wide-table .staff-column,
.wide-table .staff-cell {
    min-width: 150px;
}

.wide-table .staff-select {
    min-width: 150px !important;
    width: 150px;
}

.wide-table .staff-select.staff-select-duplicate {
    background: rgb(255 243 176);
    border-color: rgb(214 161 0);
    font-weight: 700;
}

.car-registry-table .vin-column {
    width: 240px;
    max-width: 240px;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-all;
    font-size: 0.83rem;
    line-height: 1.25;
}

.car-registry-table .pilot-column {
    min-width: 180px;
}

.car-registry-mobile-list {
    display: grid;
    gap: 10px;
}

.car-registry-mobile-card {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgb(255 255 255 / 0.8);
    overflow: hidden;
}

.car-registry-mobile-card-inactive {
    background: rgb(245 245 245 / 0.9);
}

.car-registry-mobile-summary {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: start;
    gap: 8px;
    padding: 12px;
    cursor: pointer;
    list-style: none;
}

.car-registry-mobile-summary::-webkit-details-marker {
    display: none;
}

.car-registry-mobile-chassis,
.car-registry-mobile-number {
    white-space: nowrap;
}

.car-registry-mobile-pilot {
    min-width: 0;
    overflow-wrap: anywhere;
}

.car-registry-mobile-body {
    display: grid;
    gap: 10px;
    padding: 0 12px 12px;
    border-top: 1px solid rgb(0 61 120 / 0.14);
}

.car-registry-mobile-details {
    display: grid;
    gap: 4px;
}

.car-registry-mobile-details div {
    font-size: 0.8rem;
    line-height: 1.12;
}

.car-registry-mobile-actions {
    max-width: none;
}

.expiration-scroll {
    max-height: 356px;
    overflow-y: auto;
    overflow-x: hidden;
}

.expiration-table tbody tr {
    cursor: pointer;
}

.expiration-table tbody tr:hover td {
    background: rgb(255 255 255 / 0.9);
}

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgb(0 0 0 / 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 40;
}

.modal-overlay[hidden] {
    display: none !important;
}

.profile-modal-overlay {
    background: rgb(8 20 34 / 0.42);
    backdrop-filter: blur(8px);
}

.profile-modal-card {
    width: min(580px, 100%);
}

.profile-modal-card .modal-header p {
    margin: 4px 0 0;
    color: var(--muted);
}

.profile-modal-form {
    margin-top: 18px;
}

.profile-modal-form .form-actions {
    justify-content: center;
    gap: 10px;
}

.modal-card {
    width: min(920px, 100%);
    max-height: 80vh;
    overflow: auto;
    padding: 20px;
    border-radius: 20px;
    background: rgb(214 214 214);
    border: 1px solid var(--border-strong);
    box-shadow: 0 24px 60px rgb(0 0 0 / 0.28);
}

.modal-close-button {
    width: auto;
    min-width: 120px;
}

.pilot-edit-modal-card {
    width: min(640px, 100%);
}

.pilot-edit-form {
    margin-top: 16px;
}

.pilot-weight-updated {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.78em;
    font-weight: 500;
}

.pilot-weight-updated.is-stale {
    display: inline-block;
    padding: 2px 5px;
    border-radius: 4px;
    background: #f6d649;
    color: #302707;
}

.commissioner-weight-form {
    display: flex;
    align-items: end;
    gap: 8px;
}

.commissioner-weight-form label {
    display: grid;
    gap: 4px;
    font-size: 0.82rem;
}

.commissioner-weight-form input {
    width: 110px;
    min-width: 0;
}

.commissioner-pilots-table .pilot-weight-updated {
    margin-top: 0;
}

@media (max-width: 720px) {
    .commissioner-weight-form {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 12px;
        align-items: end;
    }

    .commissioner-weight-form label {
        flex: 1;
    }

    .commissioner-weight-form input {
        width: 100%;
    }

    .commissioner-weight-form .primary-button {
        width: 100%;
        min-height: 40px;
        padding-inline: 8px;
        justify-content: center;
        text-align: center;
    }
}

.tire-lookup-modal-card.is-inactive {
    background: #9f2e2e;
    border-color: #6f1717;
    color: #fff;
}

.tire-lookup-modal-card.is-inactive .panel-header,
.tire-lookup-modal-card.is-inactive .stage-summary-card,
.tire-lookup-modal-card.is-inactive .table-subtext {
    color: inherit;
}

.tire-lookup-modal-card.is-inactive .stage-summary-card {
    background: rgb(255 255 255 / 0.16);
    border-color: rgb(255 255 255 / 0.42);
}

.pilot-select {
    min-width: 220px !important;
}

.pilot-mobile-card-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
}

.pilot-mobile-card {
    display: grid;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    border: 2px solid rgb(0 61 120 / 0.18);
    background: rgb(255 255 255 / 0.8);
}

.pilot-mobile-card-name {
    font-size: 0.96rem;
    line-height: 1.12;
}

.pilot-mobile-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.pilot-mobile-card-header .tag {
    flex: 0 0 auto;
    margin-left: auto;
}

.pilot-mobile-card-meta {
    display: grid;
    gap: 2px;
    font-size: 0.82rem;
    line-height: 1.12;
}

.pilot-mobile-card-footer {
    display: grid;
    gap: 8px;
}

.pilot-mobile-card-footer .ghost-button,
.pilot-mobile-card-footer .danger-button {
    justify-content: center;
    text-align: center;
}

.pilot-mobile-card-inactive {
    background: rgb(245 245 245 / 0.92);
}

.driver-number-display,
.driver-weight-display,
.ballast-display {
    white-space: nowrap;
}

.table-subtext {
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.83rem;
    line-height: 1.4;
}

body.incident-save-freeze::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1000;
    cursor: progress;
}

form[data-incident-auto-save].is-saving {
    cursor: progress;
}

.compact-button {
    min-height: 40px;
    white-space: nowrap;
}

.empty-panel {
    border: 1px dashed var(--border);
    border-radius: 16px;
}

.header-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.conflict-pill {
    background: var(--danger);
    border-color: rgb(0 0 0 / 0.14);
    color: var(--text-on-dark);
}

.conflict-row td {
    background: rgb(226 39 24 / 0.08);
}

.day-divider-row td {
    background: rgb(0 61 120 / 0.16);
    color: var(--text);
    font-weight: 700;
    border-top: 2px solid rgb(0 61 120 / 0.45);
}

.past-session-row td {
    text-decoration: line-through;
    color: rgb(32 32 32 / 0.72);
}

.conflict-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.conflict-chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    background: var(--danger);
    color: var(--text-on-dark);
    font-size: 0.78rem;
    font-weight: 600;
}

.table-empty {
    color: var(--muted);
    text-align: center;
    padding: 18px 12px;
}

.checklist-accordion-list {
    display: grid;
    gap: 14px;
    margin-top: 18px;
}

.checklist-dropdown {
    margin: 0;
    border: 2px solid rgb(0 61 120 / 0.28);
    border-radius: 18px;
    background: rgb(255 255 255 / 0.68);
    overflow: hidden;
}

.checklist-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    cursor: pointer;
    list-style: none;
    background: rgb(255 255 255 / 0.76);
}

.checklist-summary > div:first-child {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    color: var(--muted);
    cursor: grab;
    letter-spacing: 1px;
}

.checklist-card.is-dragging {
    opacity: 0.72;
}

.checklist-change-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-left: 8px;
    border-radius: 50%;
    background: #f2bf24;
    vertical-align: middle;
}

.checklist-summary::-webkit-details-marker {
    display: none;
}

.checklist-card-body {
    padding: 0 18px 18px;
    border-top: 2px solid rgb(0 61 120 / 0.18);
}

.tire-set-title {
    display: grid;
    gap: 3px;
}

.tire-set-pilot-name {
    display: block;
}

.tire-set-save-actions {
    margin-top: 12px;
}

.checklist-meta-row {
    margin-top: 14px;
}

.checklist-actions-row {
    margin-top: 12px;
}

.checklist-template-editor {
    margin-top: 14px;
    padding: 12px;
    border: 1px solid rgb(0 61 120 / 0.18);
    border-radius: 12px;
    background: rgb(255 255 255 / 0.55);
}

.checklist-template-editor summary {
    color: var(--primary);
    font-weight: 700;
    cursor: pointer;
}

.checklist-template-editor form {
    margin-top: 14px;
}

.checklist-template-editor .form-actions {
    gap: 10px;
}

.checklist-card-body > .panel-actions a[href$="/download"] {
    display: none;
}

.checklist-template-editor [data-checklist-editor-row]:not([data-checklist-new-row]) {
    cursor: grab;
}

.checklist-template-editor [data-checklist-editor-row].is-dragging {
    opacity: 0.55;
}

.checklist-editor-row-action {
    width: 1%;
    white-space: nowrap;
}

.checklist-editor-row-action .compact-button {
    min-height: 34px;
}

.checklist-table-shell {
    border: 2px solid rgb(0 61 120 / 0.22);
    border-radius: 16px;
    background: rgb(255 255 255 / 0.62);
}

/* Keep the item description tight to its content so status columns follow it. */
.checklist-response-table {
    width: max-content;
    min-width: 0;
    table-layout: auto;
}

.checklist-response-table th:first-child,
.checklist-response-table td:first-child {
    width: 1%;
    white-space: nowrap;
    padding-right: 8px;
}

.checklist-response-table th:not(:first-child),
.checklist-response-table td:not(:first-child) {
    width: 56px;
    min-width: 56px;
    padding-inline: 4px;
    text-align: center;
}

.checklist-personal-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 14px 0;
}

.checklist-personal-summary--mechanic {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.checklist-personal-card {
    min-width: 0;
    overflow: hidden;
    padding: 12px;
    border: 2px solid rgb(0 61 120 / 0.22);
    border-radius: 16px;
    background: rgb(255 255 255 / 0.62);
}

.checklist-personal-card h4 {
    margin: 0 0 10px;
    font-size: 0.94rem;
    line-height: 1.2;
}

.checklist-personal-card-headings,
.checklist-personal-card-row {
    display: grid;
    grid-template-columns: minmax(76px, .8fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    min-width: 0;
}

.checklist-personal-card-headings {
    margin-bottom: 5px;
    color: var(--muted);
    font-size: 0.67rem;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
}

.checklist-personal-card-row + .checklist-personal-card-row {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgb(0 61 120 / 0.14);
}

.checklist-personal-card-row > strong {
    font-size: 0.78rem;
    line-height: 1.15;
}

.checklist-completion-meter {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.checklist-completion-track {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: rgb(0 61 120 / 0.14);
}

.checklist-completion-track > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--primary);
}

.checklist-completion-meter strong {
    font-size: 0.68rem;
    white-space: nowrap;
}

@media (max-width: 700px) {
    .checklist-personal-summary,
    .checklist-personal-summary--mechanic {
        grid-template-columns: minmax(0, 1fr);
    }

    .checklist-personal-card {
        padding: 10px;
    }

    .checklist-personal-card-headings,
    .checklist-personal-card-row {
        grid-template-columns: minmax(67px, .78fr) minmax(0, 1fr) minmax(0, 1fr);
        gap: 6px;
    }

    .checklist-personal-card-headings {
        font-size: 0.6rem;
    }

    .checklist-personal-card-row > strong {
        font-size: 0.72rem;
    }

    .checklist-completion-meter {
        gap: 4px;
    }

    .checklist-completion-meter strong {
        font-size: 0.62rem;
    }
}

.checklist-dependent-session-cell-hidden {
    visibility: hidden;
}

.checklist-toggle-cell {
    width: min(100%, 56px);
    min-height: 40px;
    border: 1px solid rgb(0 61 120 / 0.24);
    border-radius: 10px;
    background: rgb(214 214 214);
    color: var(--text);
    font-weight: 700;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.checklist-toggle-cell.is-empty {
    background: rgb(255 255 255 / 0.88);
    border-color: rgb(0 61 120 / 0.2);
    color: transparent;
}

.checklist-toggle-cell.is-ok {
    background: rgb(27 122 64);
    border-color: rgb(17 86 45);
    color: var(--text-on-dark);
}

.checklist-toggle-cell.is-nok {
    background: rgb(226 39 24);
    border-color: rgb(144 18 8);
    color: var(--text-on-dark);
}

@media (max-width: 980px) {
    /* One invariant type scale for every checklist layout, regardless of column count. */
    body[data-page="checklists"] .checklist-table,
    body[data-page="checklists"] .checklist-percentage-table {
        font-size: 0.74rem !important;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body[data-page="checklists"] .checklist-table th,
    body[data-page="checklists"] .checklist-table td,
    body[data-page="checklists"] .checklist-percentage-table th,
    body[data-page="checklists"] .checklist-percentage-table td,
    body[data-page="checklists"] .checklist-table th *,
    body[data-page="checklists"] .checklist-table td *,
    body[data-page="checklists"] .checklist-percentage-table th *,
    body[data-page="checklists"] .checklist-percentage-table td * {
        font-size: 0.74rem !important;
        line-height: 1.08 !important;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }
}

.incident-list,
.incident-comment-list {
    display: grid;
    gap: 14px;
    margin-top: 16px;
}

.incidents-layout {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.desktop-only-block {
    display: block;
}

.incidents-mobile-tabs {
    display: grid;
    width: 100%;
    max-width: 100%;
}

.incidents-mobile-tabs.logs-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    justify-content: stretch;
}

.incidents-mobile-tabs .logs-tab-button {
    min-height: 48px;
    padding: 8px 14px;
    border-radius: 14px;
}

.incidents-mobile-tabs .logs-tab-title {
    font-size: 0.94rem;
    line-height: 1.04;
}

.staff-tabs.logs-tabs {
    grid-template-columns: repeat(3, minmax(180px, min(22vw, 320px)));
    margin-bottom: 4px;
}

.staff-mobile-card-list {
    display: grid;
    gap: 10px;
}

.staff-mobile-card {
    display: grid;
    gap: 6px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: rgb(255 255 255 / 0.78);
}

.staff-mobile-card-inactive {
    background: rgb(245 245 245 / 0.9);
}

.staff-mobile-card-pending,
.staff-pending-row td {
    background: rgb(255 239 153 / 0.78) !important;
}

.status-pending {
    background: #d6a800;
    border-color: rgb(111 78 0 / 0.34);
    color: #1c1c1c;
}

.auth-action-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.auth-action-row button {
    width: 100%;
    min-height: 44px;
    justify-content: center;
    text-align: center;
}

.auth-registration-button {
    margin: 0;
}

@media (max-width: 560px) {
    .auth-action-row button {
        padding-inline: 8px;
        font-size: 0.88rem;
    }
}

.public-registration-overlay {
    z-index: 80;
}

.public-registration-modal-card {
    width: min(700px, 100%);
}

.public-registration-form {
    margin-top: 18px;
}

.public-registration-pix {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.public-registration-pix[hidden] {
    display: none;
}

.staff-mobile-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.staff-mobile-card-meta-stack {
    display: grid;
    gap: 2px;
}

.staff-mobile-card-meta-item {
    white-space: nowrap;
    font-size: 0.8rem;
    line-height: 1.08;
}

.staff-mobile-actions {
    max-width: none;
}

.staff-name-filter {
    display: grid;
    gap: 4px;
    margin-top: 12px;
    max-width: 360px;
    font-size: 0.8rem;
    font-weight: 800;
}

.schedule-desktop-tabs {
    grid-template-columns: repeat(2, minmax(220px, min(25vw, 360px)));
    margin-bottom: 4px;
}

.schedule-desktop-tabs .logs-tab-button {
    min-height: 42px !important;
    height: 42px !important;
    padding: 4px 16px !important;
    align-items: center;
    align-content: center;
}

.schedule-desktop-tabs .logs-tab-title {
    font-size: 0.96rem;
    line-height: 1;
}

.schedule-mobile-session-list {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.schedule-mobile-day-divider {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--muted);
    margin-top: 4px;
}

.schedule-mobile-session-card {
    display: grid;
    gap: 5px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: rgb(255 255 255 / 0.76);
}

.schedule-mobile-session-card-current {
    border-color: rgb(226 141 40 / 0.8);
    background: rgb(255 237 214 / 0.82);
}

.schedule-mobile-session-card-past {
    background: rgb(245 245 245 / 0.78);
}

.schedule-mobile-session-card-past * {
    text-decoration: line-through;
}

.schedule-mobile-session-row {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.schedule-mobile-session-row-top {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.schedule-mobile-session-row-bottom {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    font-size: 0.74rem;
    color: var(--muted);
}

.schedule-mobile-session-order,
.schedule-mobile-session-status {
    white-space: nowrap;
}

.schedule-mobile-session-name {
    min-width: 0;
    overflow-wrap: anywhere;
}

.incidents-mobile-filters {
    display: none;
}

.incidents-mobile-filter-trigger {
    display: inline-flex;
    width: 100%;
    min-height: 42px;
    padding: 0 16px !important;
    justify-content: center;
    align-items: center;
    border-radius: 14px;
    border: 1px solid rgb(0 61 120 / 0.4);
    background: var(--primary-strong);
    color: var(--text-on-dark);
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1;
    box-shadow: none;
    transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
}

.config-toggle summary.incidents-mobile-filter-trigger {
    background: var(--primary-strong);
    border: 1px solid rgb(0 61 120 / 0.4);
    color: var(--text-on-dark);
}

.incidents-mobile-filter-trigger:hover {
    background: var(--primary);
    border-color: rgb(0 61 120 / 0.48);
    transform: translateY(-1px);
}

.config-toggle[open] > .incidents-mobile-filter-trigger {
    background: var(--primary-strong);
    border-color: rgb(0 61 120 / 0.4);
}

.incidents-mobile-filters summary {
    list-style: none;
}

.incidents-mobile-filters summary::-webkit-details-marker {
    display: none;
}

.incident-filter-grid,
.incident-create-grid {
    width: min(100%, 1100px);
}

.incident-stage-dropdown {
    position: relative;
    min-width: 0;
    width: 100%;
}

.incident-stage-dropdown::before {
    content: "Etapas";
    display: block;
    margin-bottom: 8px;
    font-size: 0.95rem;
    font-weight: 400;
    line-height: normal;
}

.incident-stage-dropdown summary {
    min-height: 38px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    list-style: none;
}

.incident-stage-dropdown summary::-webkit-details-marker { display: none; }
.incident-stage-options {
    position: absolute;
    z-index: 20;
    top: calc(100% + 4px);
    left: 0;
    width: min(340px, 100%);
    display: grid;
    gap: 7px;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 12px 24px rgb(0 0 0 / 0.16);
}

.incident-stage-dropdown .incident-stage-options label {
    display: flex !important;
    grid-template-columns: none;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-weight: 600;
}

.incident-stage-dropdown .incident-stage-options input {
    width: auto;
    min-height: 18px;
    margin: 0;
}

@media (min-width: 800px) {
    .incident-filter-grid.desktop-only-block {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
        max-width: none;
    }
}

@media (min-width: 800px) {
    .incident-filter-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        max-width: none;
    }
}

.incidents-mobile-panel[hidden] {
    display: none !important;
}

.incident-card,
.incident-comment-card {
    display: grid;
    gap: 10px;
    padding: 16px;
    border-radius: 18px;
    background: rgb(255 255 255 / 0.76);
    border: 2px solid rgb(0 61 120 / 0.16);
}

.incident-card-header,
.incident-comment-header,
.incident-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

.incident-description,
.incident-comment-card p {
    margin: 0;
    line-height: 1.5;
}

.incident-card-footer {
    color: var(--muted);
    font-size: 0.88rem;
}

.incident-comment-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.incident-comment-actions form {
    margin: 0;
}

.incident-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, 140px);
    gap: 10px;
    margin-top: 8px;
}

.incident-photo-tile {
    display: block;
    width: 140px;
    height: 140px;
    overflow: hidden;
    border-radius: 16px;
    border: 2px solid rgb(0 61 120 / 0.18);
    background: rgb(255 255 255 / 0.72);
}

.incident-photo-tile img {
    display: block;
    width: 100%;
    height: 140px;
    object-fit: cover;
}

.incident-priority-pill,
.incident-priority-pill:hover {
    color: var(--text-on-dark);
}

.incident-priority-p1 {
    border-color: rgb(226 39 24 / 0.56);
    box-shadow: inset 0 0 0 1px rgb(226 39 24 / 0.16);
}

.incident-priority-p2 {
    border-color: rgb(240 120 30 / 0.56);
    box-shadow: inset 0 0 0 1px rgb(240 120 30 / 0.14);
}

.incident-priority-p3 {
    border-color: rgb(235 196 24 / 0.62);
    box-shadow: inset 0 0 0 1px rgb(235 196 24 / 0.18);
}

.incident-priority-p4 {
    border-color: rgb(36 122 72 / 0.42);
    box-shadow: inset 0 0 0 1px rgb(36 122 72 / 0.14);
}

.incident-priority-pill.incident-priority-p1 {
    background: rgb(226 39 24);
}

.incident-priority-pill.incident-priority-p2 {
    background: rgb(240 120 30);
}

.incident-priority-pill.incident-priority-p3 {
    background: rgb(235 196 24);
    color: rgb(0 0 0);
}

.incident-priority-pill.incident-priority-p4 {
    background: rgb(36 122 72);
}

.incident-toast-stack {
    position: fixed;
    right: 18px;
    bottom: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(320px, calc(100vw - 36px));
    z-index: 60;
    pointer-events: none;
}

.incident-toast {
    display: grid;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgb(36 122 72);
    border: 1px solid rgb(255 255 255 / 0.22);
    box-shadow: 0 18px 36px rgb(0 0 0 / 0.22);
    pointer-events: auto;
}

.incident-toast-p1 {
    background: rgb(226 39 24);
}

.incident-toast-p2 {
    background: rgb(240 120 30);
}

.incident-toast-p3 {
    background: rgb(235 196 24);
}

.incident-toast-p4 {
    background: rgb(36 122 72);
}

.incident-toast-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.incident-toast-title {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-on-dark);
}

.incident-toast-close {
    min-width: 28px;
    min-height: 28px;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid rgb(255 255 255 / 0.24);
    background: rgb(255 255 255 / 0.16);
    color: var(--text-on-dark);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
}

.incident-toast p {
    margin: 0;
    color: rgb(255 255 255 / 0.92);
    font-size: 0.84rem;
    line-height: 1.4;
}

.incident-toast-meta {
    display: grid;
    gap: 4px;
}

.incident-toast-meta strong {
    color: var(--text-on-dark);
    font-size: 0.88rem;
}

.incident-toast-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.unread-comment-pill {
    background: #0b61c2;
    color: #fff;
}

@keyframes subtlePulse {
    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgb(255 210 60 / 0.18);
    }
    50% {
        transform: scale(1.015);
        box-shadow: 0 0 0 6px rgb(255 210 60 / 0.08);
    }
}

.multiselect-field {
    height: 96px !important;
    min-height: 96px !important;
    padding: 2px 8px !important;
    font-size: 0.95rem;
    line-height: 1.05;
}

.multiselect-field option {
    padding: 0;
    line-height: 1.05;
}

.barcode-input-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.barcode-scan-button {
    white-space: nowrap;
}

.barcode-helper-box {
    margin-top: 12px;
}

.new-tire-position-cell {
    white-space: nowrap;
}

.new-tire-position-code {
    font-weight: 700;
}

.new-tire-position-separator {
    margin: 0 4px;
}

.tires-inactive-header {
    margin-top: 22px;
}

.topbar-fullscreen-button {
    width: auto;
    min-width: 132px;
}

.dashboard-layout {
    display: grid;
    gap: 18px;
    height: calc(100vh - 180px);
    min-height: 0;
}

.dashboard-top-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
}

.dashboard-top-item {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgb(255 255 255 / 0.62);
    border: 1px solid var(--border);
}

.dashboard-top-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}

.dashboard-top-item strong {
    font-size: 1rem;
}

.dashboard-top-item span:last-child {
    font-size: 0.82rem;
    color: var(--muted);
}

.dashboard-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 45fr) minmax(0, 30fr) minmax(0, 25fr);
    grid-template-areas:
        "matrix schedule checklist"
        "open cards cards";
    grid-template-rows: minmax(320px, auto) auto;
    align-items: stretch;
    justify-items: stretch;
    height: auto;
    min-height: 0;
}

.dashboard-grid > * {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    justify-self: stretch;
    height: auto;
}

.dashboard-matrix-panel {
    grid-area: matrix;
    overflow: hidden;
    padding: 16px 16px 12px;
    min-height: 320px;
    height: 320px;
    --dashboard-matrix-font-scale: 1.04;
    --dashboard-matrix-row-scale: 1.08;
    --dashboard-matrix-header-scale: 1.06;
    --dashboard-matrix-spacer-scale: 1;
}

.dashboard-schedule-panel {
    grid-area: schedule;
    overflow: hidden;
    padding: 16px 16px 12px;
    min-height: 320px;
    height: 320px;
    --dashboard-schedule-row-scale: 1;
    --dashboard-schedule-gap: 6px;
}

.dashboard-checklists-panel {
    grid-area: checklist;
    overflow: hidden;
    padding: 16px 16px 12px;
    min-height: 320px;
    height: 320px;
}

.dashboard-open-panel {
    grid-area: open;
    padding: 16px 16px 12px;
    align-self: start;
    height: auto;
    min-height: 250px;
}

.dashboard-cars-panel {
    grid-area: cards;
    padding: 16px 16px 12px;
    align-self: start;
    height: auto;
    min-height: 250px;
}

.dashboard-panel-toggle {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: 100%;
    height: 100%;
}

.dashboard-open-panel .dashboard-panel-toggle,
.dashboard-cars-panel .dashboard-panel-toggle {
    height: auto;
}

.dashboard-open-panel .dashboard-panel-body-fill,
.dashboard-cars-panel .dashboard-panel-body-fill {
    height: auto;
}

.dashboard-panel-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-width: 0;
    cursor: pointer;
    list-style: none;
    padding: 0;
    margin: 0;
}

.dashboard-panel-summary::-webkit-details-marker {
    display: none;
}

.dashboard-panel-summary > * {
    margin: 0;
}

.dashboard-panel-body {
    min-height: 0;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    margin-top: 6px;
}

.dashboard-matrix-panel .dashboard-panel-summary h3,
.dashboard-schedule-panel .dashboard-panel-summary h3,
.dashboard-checklists-panel .dashboard-panel-summary h3,
.dashboard-open-panel .dashboard-panel-summary h3,
.dashboard-cars-panel .dashboard-panel-summary h3 {
    font-size: 1rem;
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: 0;
}

.dashboard-fullscreen-active .dashboard-matrix-panel,
.dashboard-fullscreen-active .dashboard-schedule-panel {
    padding: calc(14px * var(--dashboard-fullscreen-scale)) calc(14px * var(--dashboard-fullscreen-scale)) calc(11px * var(--dashboard-fullscreen-scale));
}

.dashboard-fullscreen-active .dashboard-matrix-panel .dashboard-panel-summary h3,
.dashboard-fullscreen-active .dashboard-schedule-panel .dashboard-panel-summary h3,
.dashboard-fullscreen-active .dashboard-checklists-panel .dashboard-panel-summary h3,
.dashboard-fullscreen-active .dashboard-open-panel .dashboard-panel-summary h3,
.dashboard-fullscreen-active .dashboard-cars-panel .dashboard-panel-summary h3 {
    font-size: calc(1rem * var(--dashboard-fullscreen-scale) * 1.08);
}

.dashboard-fullscreen-active .dashboard-open-panel .dashboard-panel-summary h3,
html:fullscreen .dashboard-open-panel .dashboard-panel-summary h3,
html:-webkit-full-screen .dashboard-open-panel .dashboard-panel-summary h3 {
    font-size: clamp(0.9rem, 0.84vw, 1rem) !important;
}

.dashboard-fullscreen-active .dashboard-matrix-panel .dashboard-panel-body,
.dashboard-fullscreen-active .dashboard-schedule-panel .dashboard-panel-body {
    margin-top: calc(6px * var(--dashboard-fullscreen-scale));
}

.dashboard-fullscreen-active .dashboard-matrix-panel {
    --dashboard-matrix-font-scale: calc(var(--dashboard-matrix-font-scale) * 1.1);
    --dashboard-matrix-header-scale: calc(var(--dashboard-matrix-header-scale) * 1.08);
    --dashboard-matrix-spacer-scale: calc(var(--dashboard-matrix-spacer-scale) * 1.16);
}

.dashboard-fullscreen-active .dashboard-schedule-panel {
    --dashboard-schedule-row-scale: calc(var(--dashboard-schedule-row-scale) * 1.18);
}

.dashboard-fullscreen-active .dashboard-grid,
html:fullscreen .dashboard-grid,
html:-webkit-full-screen .dashboard-grid {
    grid-template-rows: 320px auto;
    height: auto;
}

.dashboard-fullscreen-active .dashboard-grid > *,
html:fullscreen .dashboard-grid > *,
html:-webkit-full-screen .dashboard-grid > * {
    height: auto;
}

.dashboard-fullscreen-active .dashboard-matrix-panel,
.dashboard-fullscreen-active .dashboard-schedule-panel,
.dashboard-fullscreen-active .dashboard-checklists-panel,
html:fullscreen .dashboard-matrix-panel,
html:fullscreen .dashboard-schedule-panel,
html:fullscreen .dashboard-checklists-panel,
html:-webkit-full-screen .dashboard-matrix-panel,
html:-webkit-full-screen .dashboard-schedule-panel,
html:-webkit-full-screen .dashboard-checklists-panel {
    min-height: 320px;
    height: 320px;
}

.dashboard-fullscreen-active .dashboard-open-panel .dashboard-panel-toggle,
.dashboard-fullscreen-active .dashboard-open-panel .dashboard-panel-body-fill,
.dashboard-fullscreen-active .dashboard-cars-panel .dashboard-panel-toggle,
.dashboard-fullscreen-active .dashboard-cars-panel .dashboard-panel-body-fill,
html:fullscreen .dashboard-open-panel .dashboard-panel-toggle,
html:fullscreen .dashboard-open-panel .dashboard-panel-body-fill,
html:fullscreen .dashboard-cars-panel .dashboard-panel-toggle,
html:fullscreen .dashboard-cars-panel .dashboard-panel-body-fill,
html:-webkit-full-screen .dashboard-open-panel .dashboard-panel-toggle,
html:-webkit-full-screen .dashboard-open-panel .dashboard-panel-body-fill,
html:-webkit-full-screen .dashboard-cars-panel .dashboard-panel-toggle,
html:-webkit-full-screen .dashboard-cars-panel .dashboard-panel-body-fill {
    height: auto;
}

.dashboard-fullscreen-active .dashboard-layout,
html:fullscreen .dashboard-layout,
html:-webkit-full-screen .dashboard-layout {
    height: auto;
}

html:fullscreen,
html:-webkit-full-screen {
    overflow-y: auto;
}

.dashboard-fullscreen-active .dashboard-panel-toggle,
.dashboard-fullscreen-active .dashboard-panel-body-fill,
html:fullscreen .dashboard-panel-toggle,
html:fullscreen .dashboard-panel-body-fill,
html:-webkit-full-screen .dashboard-panel-toggle,
html:-webkit-full-screen .dashboard-panel-body-fill {
    height: 100%;
}

.dashboard-fullscreen-active .dashboard-matrix-grid,
html:fullscreen .dashboard-matrix-grid,
html:-webkit-full-screen .dashboard-matrix-grid {
    height: 100%;
    min-height: 0;
}

.dashboard-panel-body-fill {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.dashboard-panel-toggle:not([open]) .dashboard-panel-body {
    display: none;
}

.dashboard-table-scroll {
    margin-top: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    width: 100%;
    max-width: 100%;
}

.dashboard-matrix-grid {
    display: grid;
    grid-template-rows:
        minmax(calc(34px * var(--dashboard-matrix-header-scale)), auto)
        minmax(0, 2fr)
        minmax(calc(6px * var(--dashboard-matrix-spacer-scale)), auto)
        minmax(0, 4fr)
        minmax(calc(6px * var(--dashboard-matrix-spacer-scale)), auto)
        minmax(0, 1fr);
    height: auto;
    min-height: 250px;
}

.dashboard-matrix-grid-header,
.dashboard-matrix-row {
    display: grid;
    grid-template-columns: minmax(0, 30fr) repeat(4, minmax(0, 10fr));
    min-width: 0;
    align-items: stretch;
}

.dashboard-matrix-grid-cell {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 calc(10px * var(--dashboard-matrix-font-scale));
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.dashboard-matrix-grid-header .dashboard-matrix-grid-cell {
    min-height: calc(34px * var(--dashboard-matrix-header-scale));
    font-size: calc(0.72rem * var(--dashboard-matrix-font-scale));
    line-height: 1;
    color: rgb(56 70 84);
    font-weight: 700;
    background: rgb(0 61 120 / 0.08);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.dashboard-matrix-grid-header .dashboard-matrix-grid-cell:first-child {
    border-top-left-radius: 14px;
}

.dashboard-matrix-grid-header .dashboard-matrix-grid-cell:last-child {
    border-top-right-radius: 14px;
}

.dashboard-centered {
    text-align: center !important;
    justify-content: center;
}

.dashboard-matrix-priority-header {
    font-weight: 700;
}

.dashboard-matrix-priority-header-p1 {
    background: rgb(226 39 24 / 0.2) !important;
    color: rgb(120 18 10);
    border-bottom-color: rgb(226 39 24 / 0.38) !important;
}

.dashboard-matrix-priority-header-p2 {
    background: rgb(240 120 30 / 0.22) !important;
    color: rgb(126 58 0);
    border-bottom-color: rgb(240 120 30 / 0.4) !important;
}

.dashboard-matrix-priority-header-p3 {
    background: rgb(235 196 24 / 0.28) !important;
    color: rgb(110 82 0);
    border-bottom-color: rgb(235 196 24 / 0.44) !important;
}

.dashboard-matrix-total-header {
    justify-content: center;
}

.dashboard-matrix-group {
    display: grid;
    grid-template-rows: repeat(var(--dashboard-matrix-group-rows), minmax(0, 1fr));
    min-height: 0;
}

.dashboard-matrix-row {
    transition: background-color 120ms ease, box-shadow 120ms ease;
    min-height: 0;
}

.dashboard-matrix-row .dashboard-matrix-grid-cell {
    min-height: 100%;
    background: rgb(255 255 255 / 0.62);
    border-bottom: 1px solid rgb(0 61 120 / 0.14);
    border-right: 1px solid rgb(0 61 120 / 0.08);
}

.dashboard-matrix-group-andamento .dashboard-matrix-row .dashboard-matrix-grid-cell {
    background: rgb(244 248 252 / 0.74);
}

.dashboard-matrix-group-concluido .dashboard-matrix-row .dashboard-matrix-grid-cell {
    background: rgb(236 236 236 / 0.78);
}

.dashboard-matrix-status-cell {
    justify-content: flex-start;
    font-weight: 600;
    font-size: calc(1rem * min(var(--dashboard-matrix-font-scale), 1.02));
    line-height: 1.04;
}

.dashboard-status-label-mobile {
    display: none;
}

.dashboard-matrix-row .dashboard-matrix-grid-cell:first-child {
    border-left: 2px solid rgb(0 61 120 / 0.2);
}

.dashboard-matrix-row .dashboard-matrix-grid-cell:last-child {
    border-right: 2px solid rgb(0 61 120 / 0.2);
}

.dashboard-matrix-group .dashboard-matrix-row:first-child .dashboard-matrix-grid-cell {
    border-top: 2px solid rgb(0 61 120 / 0.24);
}

.dashboard-matrix-group .dashboard-matrix-row:last-child .dashboard-matrix-grid-cell {
    border-bottom: 2px solid rgb(0 61 120 / 0.24);
}

.dashboard-matrix-group .dashboard-matrix-row:first-child .dashboard-matrix-grid-cell:first-child {
    border-top-left-radius: 12px;
}

.dashboard-matrix-group .dashboard-matrix-row:first-child .dashboard-matrix-grid-cell:last-child {
    border-top-right-radius: 12px;
}

.dashboard-matrix-group .dashboard-matrix-row:last-child .dashboard-matrix-grid-cell:first-child {
    border-bottom-left-radius: 12px;
}

.dashboard-matrix-group .dashboard-matrix-row:last-child .dashboard-matrix-grid-cell:last-child {
    border-bottom-right-radius: 12px;
}

.dashboard-matrix-section-spacer {
    min-height: calc(4px * var(--dashboard-matrix-spacer-scale));
    border-top: 1px solid rgb(0 61 120 / 0.3);
    border-bottom: 1px solid rgb(255 255 255 / 0.56);
    background: rgb(0 61 120 / 0.14);
    border-radius: 999px;
    align-self: center;
}

.dashboard-matrix-highlight-cell {
    font-weight: 700;
    box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.32);
}

.dashboard-matrix-highlight-cell-p1 {
    background: rgb(226 39 24 / 0.86) !important;
}

.dashboard-matrix-highlight-cell-p2 {
    background: rgb(240 120 30 / 0.86) !important;
}

.dashboard-matrix-highlight-cell-p3 {
    background: rgb(235 196 24 / 0.9) !important;
}

.dashboard-matrix-count,
.dashboard-matrix-total {
    display: inline-flex;
    min-width: calc(22px * var(--dashboard-matrix-row-scale));
    min-height: calc(16px * var(--dashboard-matrix-row-scale));
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    border-radius: 999px;
    background: rgb(255 255 255 / 0.9);
    border: 1px solid var(--border);
    font-weight: 700;
    font-size: calc(0.95rem * var(--dashboard-matrix-font-scale));
}

.dashboard-matrix-total {
    background: rgb(0 61 120 / 0.12);
}

.dashboard-matrix-highlight-cell .dashboard-matrix-count {
    background: rgb(255 255 255 / 0.96);
    border-width: 2px;
    font-size: calc(0.95rem * var(--dashboard-matrix-font-scale));
}

.dashboard-matrix-highlight-cell-p1 .dashboard-matrix-count {
    border-color: rgb(130 18 10);
    color: rgb(130 18 10);
}

.dashboard-matrix-highlight-cell-p2 .dashboard-matrix-count {
    border-color: rgb(138 62 0);
    color: rgb(138 62 0);
}

.dashboard-matrix-highlight-cell-p3 .dashboard-matrix-count {
    border-color: rgb(120 86 0);
    color: rgb(120 86 0);
}

@media (min-width: 1200px) {
    .dashboard-matrix-grid {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Operational dashboard: use the full workspace below the compact header. */
@media (min-width: 1200px) {
    body[data-page="dashboard"] .dashboard-layout {
        height: calc(133.333333vh - 168px);
        min-height: 0;
    }

    body[data-page="dashboard"] .dashboard-grid {
        grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.72fr) minmax(300px, 0.78fr);
        grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
        height: 100%;
        min-height: 0;
        gap: 18px;
    }

    body[data-page="dashboard"] .dashboard-grid:has(.dashboard-open-panel.is-empty) {
        grid-template-areas:
            "matrix schedule checklist"
            "cards cards cards";
    }

    body[data-page="dashboard"] .dashboard-open-panel.is-empty {
        display: none;
    }

    body[data-page="dashboard"] .dashboard-matrix-panel,
    body[data-page="dashboard"] .dashboard-schedule-panel,
    body[data-page="dashboard"] .dashboard-checklists-panel,
    body[data-page="dashboard"] .dashboard-open-panel,
    body[data-page="dashboard"] .dashboard-cars-panel {
        min-height: 0;
        height: 100%;
        padding: 20px;
        align-self: stretch;
    }

    body[data-page="dashboard"] .dashboard-panel-toggle,
    body[data-page="dashboard"] .dashboard-panel-body-fill,
    body[data-page="dashboard"] .dashboard-open-panel .dashboard-panel-toggle,
    body[data-page="dashboard"] .dashboard-open-panel .dashboard-panel-body-fill,
    body[data-page="dashboard"] .dashboard-cars-panel .dashboard-panel-toggle,
    body[data-page="dashboard"] .dashboard-cars-panel .dashboard-panel-body-fill {
        height: 100%;
    }

    body[data-page="dashboard"] .dashboard-panel-summary h3 {
        font-size: 1.16rem;
    }

    body[data-page="dashboard"] .dashboard-schedule-panel {
        --dashboard-schedule-row-scale: 1.12;
        --dashboard-schedule-gap: 9px;
    }

    body[data-page="dashboard"] .dashboard-cards-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        grid-auto-rows: minmax(0, 1fr);
        flex: 1 1 auto;
        height: 100%;
    }

    body[data-page="dashboard"] .dashboard-car-card {
        height: 100%;
        padding: 12px;
    }
}

/* Settings exports keep the selected stage and its actions together on wide screens. */
.settings-export-form {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    align-items: end;
    gap: 12px;
    margin-top: 14px;
}

.settings-export-form > label {
    min-width: 0;
    margin: 0;
}

.settings-export-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.settings-database-export {
    width: 40%;
    margin: 14px 0 0 60%;
}

.settings-database-export .danger-button {
    width: 100%;
}

.settings-export-light-button,
.settings-export-database-button {
    min-height: 40px;
    padding: 9px 16px;
    border: 0;
    border-radius: 9px;
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

.settings-export-light-button {
    color: #063b68;
    background: #8fd0f3;
}

.settings-export-light-button:hover,
.settings-export-light-button:focus-visible {
    background: #6ec1ee;
    outline: 2px solid rgb(0 102 177 / 0.35);
    outline-offset: 2px;
}

.settings-export-database-button {
    width: 100%;
    color: #fff;
    background: #003d78;
}

.settings-export-database-button:hover,
.settings-export-database-button:focus-visible {
    background: #002c58;
    outline: 2px solid rgb(0 61 120 / 0.35);
    outline-offset: 2px;
}

.office-task-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    margin: 24px 0;
}
.office-module-nav { margin-bottom: 30px; }
.office-task-global-selectors { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.office-task-helper-selector .checkbox-chip,
.office-task-car-selector .checkbox-chip { font-size: 0.94rem; }
.office-task-helper-selector .checkbox-chip input,
.office-task-car-selector .checkbox-chip input { width: 18px; height: 18px; }
.form-readonly-note { display: grid; align-content: center; gap: 3px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px; background: rgb(5 72 129 / .08); }
.form-readonly-note span { color: var(--muted); font-size: .8rem; }
.panel-actions:has([data-incident-auto-save-status]) { display: grid; justify-items: start; gap: 8px; }
.panel-actions:has([data-incident-auto-save-status]) .incident-task-generate-action { display: flex; width: 100%; margin: 0; }
.office-task-list, .office-pending-grid { display: grid; gap: 14px; }
.office-task-card { padding: 16px; border: 2px solid var(--border); border-left-width: 8px; border-radius: 12px; background: rgb(255 255 255 / .78); }
.office-task-card[draggable="true"] { cursor: grab; }
.office-task-card.is-dragging { opacity: .45; }
.office-task-card.priority-p1 { border-left-color: #d72929; }
.office-task-card.priority-p2 { border-left-color: #e0ad00; }
.office-task-card.priority-p3 { border-left-color: #147e50; }
.office-task-card-header, .office-task-meta, .office-task-cars { margin-bottom: 10px; }
.office-task-card-header { display: flex; justify-content: space-between; gap: 14px; }
.office-task-card h4 { margin: 3px 0 0; font-size: 1.05rem; }
.office-task-service { color: var(--primary); font-size: .78rem; font-weight: 800; text-transform: uppercase; }
.office-task-meta { color: var(--muted); font-size: .83rem; }
.office-task-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(390px, 520px); gap: 16px; align-items: stretch; }
.office-task-description { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 12px; min-height: 96px; padding: 14px 16px; border-radius: 10px; background: rgb(5 72 129 / .06); }
.office-task-description h4 { margin: 0; font-size: 1.22rem; line-height: 1.35; }
.office-task-cars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; align-content: start; }
.office-task-car-row { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 58px; padding: 9px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.office-task-car-row input { width: 18px; height: 18px; }
.office-task-car-row span { display: grid; gap: 2px; }
.office-task-car-row small { color: var(--muted); font-size: .74rem; font-weight: 700; }
.office-task-car-row.is-complete { color: #126b43; background: rgb(31 145 81 / .12); border-color: #3c9b6c; }
.office-task-delete { display: flex; justify-content: flex-end; }
.task-incident-preview-card { width: min(760px, calc(100vw - 32px)); max-height: min(80vh, 760px); overflow: auto; }
.task-incident-preview-content { display: grid; gap: 16px; }
.task-incident-preview-description { margin: 0; white-space: pre-wrap; font-size: 1rem; line-height: 1.55; }
.office-pending-user { padding: 14px; border: 1px solid var(--border); border-radius: 10px; background: rgb(255 255 255 / .65); }
.office-pending-task-list { display: grid; gap: 8px; }
.office-pending-task-card { display: grid; gap: 4px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 8px; color: inherit; background: rgb(255 255 255 / .78); text-decoration: none; }
a.office-pending-task-card { cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
a.office-pending-task-card:hover { border-color: var(--primary); background: rgb(5 95 171 / .08); transform: translateY(-1px); }
.office-pending-task-card small { color: var(--muted); font-weight: 700; }
@media (max-width: 1100px) { .office-task-main { grid-template-columns: minmax(0, 1fr) minmax(280px, 400px); } .office-task-cars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .office-task-card-header, .office-task-main { grid-template-columns: 1fr; flex-direction: column; } .office-task-cars { grid-template-columns: 1fr; } }

@media (max-width: 720px) {
    .settings-export-form {
        align-items: stretch;
        flex-direction: column;
    }

    .settings-export-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .settings-database-export {
        width: 100%;
        margin-left: 0;
    }
}

.dashboard-priority-p1 {
    border-color: rgb(226 39 24 / 0.42);
}

.dashboard-priority-p2 {
    border-color: rgb(240 120 30 / 0.42);
}

.dashboard-priority-p3 {
    border-color: rgb(235 196 24 / 0.55);
}

.dashboard-schedule-list,
.dashboard-open-incident-list,
.dashboard-p4-list,
.dashboard-car-modal-incidents,
.dashboard-checklist-rows,
.dashboard-checklist-groups {
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-width: thin;
}

.dashboard-schedule-list,
.dashboard-checklist-groups,
.dashboard-cards-grid {
    display: grid;
    gap: 6px;
}

.dashboard-schedule-list {
    gap: var(--dashboard-schedule-gap);
    align-content: start;
    flex: 1 1 auto;
    height: 100%;
    grid-auto-rows: var(--dashboard-schedule-row-height, auto);
}

.dashboard-open-incident-list,
.dashboard-p4-list,
.dashboard-car-modal-incidents,
.dashboard-checklist-rows {
    display: grid;
    gap: 6px;
}

.dashboard-schedule-row {
    display: grid;
    grid-template-columns: calc(54px * var(--dashboard-schedule-row-scale)) minmax(0, 1fr) calc(104px * var(--dashboard-schedule-row-scale));
    gap: calc(8px * var(--dashboard-schedule-row-scale));
    align-items: center;
    min-height: calc(28px * var(--dashboard-schedule-row-scale));
    padding: calc(4px * var(--dashboard-schedule-row-scale)) calc(8px * var(--dashboard-schedule-row-scale));
    border-radius: 10px;
    background: rgb(255 255 255 / 0.68);
    border: 1px solid var(--border);
    font-size: calc(0.82rem * var(--dashboard-schedule-row-scale));
    line-height: 1.12;
}

.dashboard-schedule-current {
    border-color: rgb(36 122 72 / 0.44);
    background: rgb(36 122 72 / 0.12);
}

.dashboard-schedule-next {
    border-color: rgb(235 196 24 / 0.44);
    background: rgb(235 196 24 / 0.12);
}

.dashboard-schedule-past {
    color: rgb(32 32 32 / 0.62);
}

.dashboard-schedule-past strong,
.dashboard-schedule-past span {
    text-decoration: line-through;
}

.dashboard-open-incident {
    display: grid;
    gap: clamp(3px, 0.35vw, 6px);
    padding: clamp(6px, 0.65vw, 11px) clamp(8px, 0.85vw, 14px);
    border-radius: 12px;
    background: rgb(255 255 255 / 0.78);
    border: 2px solid rgb(0 61 120 / 0.16);
    cursor: pointer;
}

.dashboard-open-incident-stage {
    min-height: 0;
    align-content: start;
}

.dashboard-open-incident:focus {
    outline: 2px solid rgb(0 102 177 / 0.28);
}

.dashboard-open-incident-header,
.dashboard-open-incident-meta {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.7rem;
    line-height: 1.05;
}

.dashboard-open-incident-stage .dashboard-open-incident-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: baseline;
    column-gap: clamp(8px, 0.9vw, 16px);
    row-gap: 0;
    font-size: clamp(0.5rem, 0.38vw, 0.62rem);
    line-height: 1.08;
}

.dashboard-open-incident-stage .dashboard-open-incident-header strong,
.dashboard-open-incident-stage .dashboard-open-incident-header span {
    font-weight: 700;
}

.dashboard-open-incident-title,
.dashboard-open-incident-meta-line {
    display: block;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-open-incident-stage .dashboard-open-incident-header strong {
    font-size: 1em;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-open-incident-stage .dashboard-open-incident-header span {
    font-size: 0.94em;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
}

.dashboard-open-incident-stage .dashboard-open-incident-title {
    font-size: clamp(0.88rem, 0.72vw, 0.96rem) !important;
    line-height: 1.1 !important;
}

.dashboard-open-incident-stage .dashboard-open-incident-meta-line {
    font-size: clamp(0.88rem, 0.72vw, 0.96rem) !important;
    line-height: 1.1 !important;
    text-align: right;
}

.dashboard-open-incident-stage p {
    font-size: clamp(0.74rem, 0.58vw, 0.8rem);
    line-height: 1.14;
}

.dashboard-fullscreen-active .dashboard-open-incident-stage .dashboard-open-incident-header,
html:fullscreen .dashboard-open-incident-stage .dashboard-open-incident-header,
html:-webkit-full-screen .dashboard-open-incident-stage .dashboard-open-incident-header {
    font-size: clamp(0.78rem, 0.78vw, 0.82rem) !important;
}

.dashboard-fullscreen-active .dashboard-open-incident-stage .dashboard-open-incident-title,
html:fullscreen .dashboard-open-incident-stage .dashboard-open-incident-title,
html:-webkit-full-screen .dashboard-open-incident-stage .dashboard-open-incident-title {
    font-size: clamp(0.78rem, 0.78vw, 0.82rem) !important;
    line-height: 1.08 !important;
}

.dashboard-fullscreen-active .dashboard-open-incident-stage .dashboard-open-incident-meta-line,
html:fullscreen .dashboard-open-incident-stage .dashboard-open-incident-meta-line,
html:-webkit-full-screen .dashboard-open-incident-stage .dashboard-open-incident-meta-line {
    font-size: clamp(0.78rem, 0.78vw, 0.82rem) !important;
    line-height: 1.08 !important;
}

.dashboard-fullscreen-active .dashboard-open-incident-stage p,
html:fullscreen .dashboard-open-incident-stage p,
html:-webkit-full-screen .dashboard-open-incident-stage p,
.dashboard-fullscreen-active .dashboard-open-incident p,
.dashboard-fullscreen-active .dashboard-p4-item p,
html:fullscreen .dashboard-open-incident p,
html:fullscreen .dashboard-p4-item p,
html:-webkit-full-screen .dashboard-open-incident p,
html:-webkit-full-screen .dashboard-p4-item p {
    font-size: clamp(0.66rem, 0.66vw, 0.7rem) !important;
}

.dashboard-open-incident p,
.dashboard-p4-item p {
    margin: 0;
    font-size: 0.7rem;
    line-height: 1.08;
}

.dashboard-open-incident-list {
    flex: 1 1 auto;
    max-height: none;
}

.dashboard-open-footer {
    display: grid;
    gap: 8px;
    min-height: 0;
    flex: 1 1 auto;
    padding-top: 10px;
    border-top: 1px solid rgb(0 61 120 / 0.14);
    margin-top: 10px;
}

.dashboard-open-footer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.dashboard-open-footer-header h4 {
    margin: 0;
    font-size: 0.86rem;
}

.dashboard-p4-item {
    display: grid;
    gap: 4px;
    padding: 8px 10px;
    border-radius: 12px;
    background: rgb(255 255 255 / 0.7);
    border: 1px solid var(--border);
}

.dashboard-p4-list {
    min-height: 0;
}

.dashboard-checklist-groups {
    display: grid;
    gap: 14px;
    align-content: start;
    height: 100%;
}

.dashboard-checklist-group {
    display: grid;
    gap: 8px;
}

.dashboard-checklist-group h4 {
    margin: 0;
    font-size: 0.74rem;
}

.dashboard-checklist-row {
    display: grid;
    gap: 3px;
    padding: 6px 7px;
    border-radius: 11px;
    background: rgb(255 255 255 / 0.72);
    border: 1px solid var(--border);
}

.dashboard-checklist-row-header {
    min-width: 0;
}

.dashboard-checklist-row-header-stacked {
    display: block;
}

.dashboard-checklist-row-header strong {
    display: block;
    font-size: 0.68rem;
    line-height: 1.04;
    overflow-wrap: anywhere;
}

.dashboard-checklist-car-numbers {
    display: inline;
    margin-left: 6px;
    font-size: 0.58rem;
    color: var(--muted);
    font-weight: 600;
}

.dashboard-checklist-metric-inline .checklist-percentage-meter {
    min-width: 0;
    width: 100%;
}

.dashboard-checklist-metric-inline .checklist-percentage-labels {
    height: 11px;
}

.dashboard-checklist-metric-inline .checklist-percentage-label {
    font-size: 0.58rem;
}

.dashboard-checklist-metric-inline .checklist-percentage-bar {
    height: 5px;
}

.dashboard-cards-grid {
    display: grid;
    gap: 5px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-auto-rows: auto;
    align-content: start;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow: visible;
    padding-right: 0;
    height: auto;
}

.dashboard-car-card {
    display: grid;
    gap: 2px;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    padding: 4px 6px;
    border-radius: 10px;
    border: 2px solid rgb(0 61 120 / 0.18);
    background: rgb(255 255 255 / 0.82);
    text-align: left;
    cursor: pointer;
    align-content: center;
    overflow: hidden;
}

.dashboard-car-card strong {
    font-size: 0.62rem;
    line-height: 1.02;
    overflow-wrap: anywhere;
}

.dashboard-car-card span {
    line-height: 1.08;
    font-size: 0.72rem;
    color: var(--muted);
    align-self: center;
    justify-self: center;
    text-align: center;
    overflow-wrap: anywhere;
}

.dashboard-status-ok {
    border-color: rgb(36 122 72 / 0.48);
    background: rgb(36 122 72 / 0.18);
}

.dashboard-status-p1 {
    border-color: rgb(226 39 24 / 0.6);
    background: rgb(226 39 24 / 0.18);
}

.dashboard-status-p2 {
    border-color: rgb(240 120 30 / 0.6);
    background: rgb(240 120 30 / 0.18);
}

.dashboard-status-p3 {
    border-color: rgb(235 196 24 / 0.66);
    background: rgb(235 196 24 / 0.22);
}

.dashboard-open-incident-stage.dashboard-priority-p1 {
    border-color: rgb(226 39 24 / 0.6);
    background: rgb(226 39 24 / 0.18);
}

.dashboard-open-incident-stage.dashboard-priority-p2 {
    border-color: rgb(240 120 30 / 0.6);
    background: rgb(240 120 30 / 0.18);
}

.dashboard-open-incident-stage.dashboard-priority-p3 {
    border-color: rgb(235 196 24 / 0.66);
    background: rgb(235 196 24 / 0.22);
}

.dashboard-car-modal {
    width: min(980px, 100%);
}

.dashboard-car-modal-grid {
    display: grid;
    gap: 16px;
    margin-top: 16px;
    grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr);
}

.dashboard-car-modal-section {
    display: grid;
    gap: 8px;
}

.dashboard-car-modal-section h4,
.dashboard-car-modal-section p {
    margin: 0;
}

.status-ok {
    background: var(--primary);
    border-color: rgb(0 61 120 / 0.34);
    color: var(--text-on-dark);
}

.status-off {
    background: var(--danger);
    border-color: rgb(0 0 0 / 0.12);
    color: var(--text-on-dark);
}

.status-warning {
    background: var(--primary-strong);
    border-color: rgb(0 61 120 / 0.3);
    color: var(--text-on-dark);
}

.wide-table {
    min-width: 1600px;
}

.auth-card h2,
.hero-card h2 {
    font-size: clamp(1.45rem, 4vw, 2rem);
}

.panel h3,
.auth-panel h3 {
    font-size: clamp(1.05rem, 3.2vw, 1.25rem);
}

.topbar h1 {
    font-size: clamp(1.3rem, 4vw, 2rem);
}

@media (max-width: 799px) {
    .app-shell {
        padding: 10px;
    }

    .topbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "title brand"
            "user user";
        align-items: start;
        gap: 10px 12px;
        margin-bottom: 14px;
        padding: 12px 14px;
        position: relative;
    }

    .topbar-title-group {
        grid-area: title;
        gap: 2px;
    }

    .topbar-title-row {
        gap: 0;
    }

    .topbar h1 {
        font-size: 1.9rem;
        line-height: 1.02;
    }

    body[data-page="schedule"] .topbar h1 {
        font-size: 1.26rem;
        line-height: 1.06;
        max-width: 170px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    body[data-page="schedule"] .schedule-mobile-calendar-table th,
    body[data-page="schedule"] .schedule-mobile-calendar-table td {
        font-size: 0.8rem;
        line-height: 1.12;
        padding: 8px 7px;
    }

    body[data-page="schedule"] .schedule-mobile-calendar-table {
        width: 440px;
        min-width: 440px;
        table-layout: fixed;
    }

    body[data-page="schedule"] .schedule-mobile-calendar-table th,
    body[data-page="schedule"] .schedule-mobile-calendar-table td {
        overflow-wrap: anywhere;
    }

    body[data-page="schedule"] .schedule-mobile-calendar-table th:first-child,
    body[data-page="schedule"] .schedule-mobile-calendar-table td:first-child {
        width: 30px;
        padding-inline: 4px;
        white-space: nowrap;
    }

    body[data-page="schedule"] .schedule-mobile-calendar-table th:last-child,
    body[data-page="schedule"] .schedule-mobile-calendar-table td:last-child {
        width: 68px;
        padding-inline: 3px;
        white-space: nowrap;
    }

    body[data-page="schedule"] .schedule-mobile-calendar-scroll {
        overflow-x: auto;
        overflow-y: hidden;
        max-width: 100%;
        touch-action: pan-x pan-y;
        overscroll-behavior-x: contain;
    }

    body[data-page="schedule"] .schedule-mobile-calendar-active-row td {
        background: rgb(189 224 255 / 0.78);
    }

    body[data-page="schedule"] .schedule-desktop-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        max-width: 100%;
        gap: 8px;
    }

    body[data-page="schedule"] .schedule-desktop-tabs .logs-tab-button {
        min-width: 0;
        padding-inline: 8px !important;
    }

    body[data-page="schedule"] .incidents-mobile-tabs .logs-tab-title {
        font-size: 0.78rem;
    }

    body[data-page="staff"] .registry-layout {
        width: 100%;
        max-width: 100%;
        margin: 0;
        gap: 14px;
    }

    body[data-page="staff"] .panel {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding-left: 10px;
        padding-right: 10px;
    }

    body[data-page="staff"] .staff-tabs.logs-tabs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    body[data-page="staff"] .staff-tabs .logs-tab-button {
        min-height: 34px;
        padding: 5px 8px;
        border-radius: 11px;
    }

    body[data-page="staff"] .staff-tabs .logs-tab-title {
        font-size: 0.74rem;
        line-height: 1.04;
    }

    body[data-page="staff"] .staff-mobile-card {
        width: 100%;
        max-width: 100%;
        padding: 14px;
        gap: 10px;
    }

    body[data-page="staff"] .staff-mobile-card-header strong {
        font-size: 0.98rem;
        line-height: 1.14;
    }

    body[data-page="staff"] .staff-mobile-card .table-subtext {
        margin-top: 0;
        font-size: 0.78rem;
        line-height: 1.18;
    }

    body[data-page="staff"] .staff-mobile-card-meta-item {
        font-size: 0.79rem;
        line-height: 1.18;
    }

    body[data-page="staff"] .staff-mobile-card-meta-stack {
        gap: 4px;
        padding: 8px 0;
        border-top: 1px solid rgb(0 61 120 / 0.12);
        border-bottom: 1px solid rgb(0 61 120 / 0.12);
    }

    body[data-page="staff"] .staff-mobile-card .action-stack.equal-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        margin-top: 2px;
    }

    body[data-page="staff"] .staff-mobile-card .ghost-button,
    body[data-page="staff"] .staff-mobile-card .danger-button,
    body[data-page="staff"] .staff-mobile-card form button {
        min-height: 36px;
        padding: 6px 8px;
        font-size: 0.76rem;
    }

    body[data-page="schedule"] .stage-summary-grid {
        gap: 8px;
        margin-top: 10px;
        width: 100%;
        max-width: 100%;
    }

    body[data-page="schedule"] .stage-summary-card {
        padding: 7px 8px;
        border-radius: 12px;
        min-width: 0;
        overflow: hidden;
    }

    body[data-page="schedule"] .stage-summary-card .table-subtext {
        margin-top: 0;
        font-size: 0.64rem;
        line-height: 1.02;
    }

    body[data-page="schedule"] .stage-summary-card strong {
        margin-top: 2px;
        font-size: 0.76rem;
        line-height: 1.05;
        overflow-wrap: anywhere;
    }

    body[data-page="schedule"] .schedule-mobile-session-list {
        gap: 8px;
    }

    body[data-page="schedule"] .schedule-mobile-day-divider {
        font-size: 0.7rem;
    }

    body[data-page="schedule"] .schedule-mobile-session-card {
        padding: 8px 9px;
        gap: 4px;
    }

    body[data-page="schedule"] .schedule-mobile-session-row-top {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 5px;
        font-size: 0.74rem;
        line-height: 1.04;
    }

    body[data-page="schedule"] .schedule-mobile-session-row-bottom {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px 8px;
        font-size: 0.66rem;
        line-height: 1.03;
    }

    body[data-page="checklists"] .checklist-panel {
        width: calc(100% - 10px);
        max-width: calc(100% - 10px);
        margin: 0 auto;
    }

    body[data-page="checklists"] .checklist-mode-tabs.logs-tabs,
    body[data-page="checklists"] .checklist-mode-tabs-mobile-readonly.logs-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        justify-content: stretch;
    }

    body[data-page="checklists"] .checklist-mode-tabs .logs-tab-button,
    body[data-page="checklists"] .checklist-mode-tabs.logs-tabs .logs-tab-button {
        min-height: 34px;
        padding: 5px 8px;
        border-radius: 11px;
    }

    body[data-page="checklists"] .checklist-mode-tabs .logs-tab-title,
    body[data-page="checklists"] .checklist-mode-tabs.logs-tabs .logs-tab-title {
        font-size: 0.78rem;
        line-height: 1.05;
    }

    body[data-page="checklists"] .checklist-summary {
        padding: 11px 12px;
        gap: 8px;
    }

    body[data-page="checklists"] .checklist-summary strong {
        font-size: 0.86rem;
        line-height: 1.1;
    }

    body[data-page="checklists"] .checklist-card-body {
        padding: 0 12px 12px;
    }

    body[data-page="checklists"] .checklist-meta-row .tag,
    body[data-page="checklists"] .header-badges .tag {
        font-size: 0.66rem;
    }

    body[data-page="checklists"] .checklist-table th,
    body[data-page="checklists"] .checklist-table td,
    body[data-page="checklists"] .data-table th,
    body[data-page="checklists"] .data-table td {
        font-size: 0.74rem !important;
        line-height: 1.08;
        padding: 7px 6px;
    }

    body[data-page="checklists"] .checklist-table th *,
    body[data-page="checklists"] .checklist-table td * {
        font-size: inherit;
        line-height: inherit;
    }

    body[data-page="checklists"] .checklist-toggle-cell {
        min-height: 32px;
        font-size: 0.74rem;
    }

    body[data-page="checklists"] .checklist-table {
        table-layout: auto;
    }

    body[data-page="checklists"] .checklist-table th:not(:first-child),
    body[data-page="checklists"] .checklist-table td:not(:first-child) {
        width: 56px;
        min-width: 56px;
        padding-inline: 4px;
        text-align: center;
    }

    body[data-page="checklists"] .checklist-static-empty-cell {
        color: transparent;
    }

    body[data-page="checklists"] .checklist-percentage-table {
        width: max-content;
        min-width: 512px;
    }

    body[data-page="checklists"] .checklist-percentage-table th:first-child,
    body[data-page="checklists"] .checklist-percentage-table td:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        width: 102px;
        min-width: 102px;
        padding-right: 5px;
        background: rgb(255 255 255 / 0.96);
        box-shadow: 5px 0 7px rgb(0 61 120 / 0.08);
    }

    body[data-page="checklists"] .checklist-percentage-table th:first-child {
        z-index: 3;
        background: rgb(232 240 248 / 0.98);
    }

    body[data-page="checklists"] .checklist-percentage-table .checklist-percentage-metric-cell {
        width: 200px;
        min-width: 200px;
        padding-inline: 6px !important;
    }

    body[data-page="checklists"] .checklist-percentage-table .checklist-percentage-meter {
        min-width: 184px;
    }

    body[data-page="checklists"] .checklist-percentage-table .checklist-percentage-bar {
        height: 7px;
    }

    body[data-page="checklists"] .checklist-percentage-label-cell .table-subtext,
    body[data-page="checklists"] .checklist-percentage-heading-cell {
        font-size: 0.74rem;
    }

    body[data-page="checklists"] .checklist-percentage-label {
        font-size: 0.58rem;
    }

    body[data-page="checklists"] .checklist-percentage-bar {
        height: 10px;
    }

    body[data-page="cars"] .operation-card-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    body[data-page="cars"] .operation-card-mobile-summary {
        padding: 12px 14px;
    }

    body[data-page="cars"] .operation-card-mobile-summary-value {
        font-size: 1rem;
    }

    body[data-page="cars"] .operation-card-mobile-body {
        padding: 0 14px 14px;
    }

    body[data-page="cars"] .operation-card-header h4 {
        font-size: 0.92rem;
        line-height: 1.12;
    }

    body[data-page="cars"] .operation-card-inline,
    body[data-page="cars"] .operation-card-staff p,
    body[data-page="cars"] .operation-card-meta-grid strong {
        font-size: 0.8rem;
        line-height: 1.12;
    }

    body[data-page="cars"] .operation-card-meta-grid span {
        font-size: 0.7rem;
    }

    body[data-page="cars"] .operation-card-meta-grid {
        gap: 6px 12px;
    }

    body[data-page="car-registry"] .registry-layout {
        width: 100%;
        max-width: 100%;
        margin: 0;
        gap: 14px;
    }

    body[data-page="car-registry"] .panel {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 0;
        padding-left: 10px;
        padding-right: 10px;
    }

    body[data-page="car-registry"] .car-registry-mobile-card {
        width: 100%;
        max-width: 100%;
    }

    body[data-page="car-registry"] .car-registry-mobile-summary {
        padding: 10px;
        gap: 6px;
    }

    body[data-page="car-registry"] .car-registry-mobile-chassis,
    body[data-page="car-registry"] .car-registry-mobile-number,
    body[data-page="car-registry"] .car-registry-mobile-pilot {
        font-size: 0.86rem;
        line-height: 1.06;
    }

    body[data-page="car-registry"] .car-registry-mobile-body {
        padding: 0 10px 10px;
    }

    body[data-page="car-registry"] .car-registry-mobile-details div {
        font-size: 0.74rem;
    }

    body[data-page="car-registry"] .car-registry-mobile-actions {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body[data-page="car-registry"] .car-registry-mobile-actions .ghost-button,
    body[data-page="car-registry"] .car-registry-mobile-actions .danger-button,
    body[data-page="car-registry"] .car-registry-mobile-actions form button {
        min-height: 32px;
        padding: 4px 8px;
        font-size: 0.74rem;
    }

    body[data-page="pilots"] .pilot-mobile-card-list {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0;
        justify-content: start;
    }

    body[data-page="pilots"] .page-content {
        width: 100%;
        max-width: 100%;
    }

    body[data-page="pilots"] .registry-layout {
        width: 100%;
        max-width: 100%;
        margin: 0;
        gap: 14px;
    }

    body[data-page="pilots"] .registry-layout-stacked .full-width-panel,
    body[data-page="pilots"] .panel {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 0;
        padding-left: 10px;
        padding-right: 10px;
    }

    body[data-page="pilots"] .pilot-mobile-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        padding: 10px 12px;
        gap: 10px;
    }

    body[data-page="pilots"] .pilot-mobile-card-name {
        font-size: 0.96rem;
        line-height: 1.14;
    }

    body[data-page="pilots"] .pilot-mobile-card-meta {
        display: grid;
        gap: 4px;
        font-size: 0.82rem;
        line-height: 1.16;
    }

    body[data-page="pilots"] .pilot-mobile-card .pilot-weight-updated,
    body[data-page="pilots"] .pilot-mobile-card .pilot-weight-updated.is-stale {
        display: block;
        width: fit-content;
        margin-top: 3px;
    }

    body[data-page="pilots"] .pilot-mobile-card .action-stack.equal-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: none;
        width: 100%;
    }

    body[data-page="pilots"] .pilot-mobile-card .ghost-button,
    body[data-page="pilots"] .pilot-mobile-card .danger-button,
    body[data-page="pilots"] .pilot-mobile-card form button {
        min-height: 32px;
        padding: 4px 8px;
        font-size: 0.74rem;
    }

    body[data-page="pilots"] .pilot-mobile-card-footer {
        display: grid;
        gap: 10px;
        width: 100%;
    }

    body[data-page="pilots"] .pilot-mobile-card-footer .tag {
        width: auto;
        justify-self: start;
        padding-left: 12px;
        padding-right: 12px;
    }

    body[data-page="pilots"] .pilot-mobile-card .action-stack > *,
    body[data-page="pilots"] .pilot-mobile-card .action-stack a,
    body[data-page="pilots"] .pilot-mobile-card .action-stack form,
    body[data-page="pilots"] .pilot-mobile-card .action-stack form button {
        width: 100%;
        max-width: 100%;
    }

    .eyebrow {
        margin: 0;
        font-size: 0.72rem;
        letter-spacing: 0.06em;
    }

    .topbar-home-button,
    .topbar-logout-button {
        display: inline-flex;
        position: absolute;
        top: 50px;
        width: 34px;
        min-width: 34px;
        min-height: 28px;
        padding: 0;
        font-size: 0.82rem;
    }

    .topbar-unread-button {
        position: absolute;
        top: 50px;
        width: 34px;
        min-width: 34px;
        min-height: 28px;
        padding: 0;
        font-size: 0.82rem;
        gap: 0;
    }

    .topbar-home-button .topbar-button-label,
    .topbar-unread-button .topbar-button-label,
    .topbar-logout-button .topbar-button-label {
        display: none;
    }

    .topbar-home-button {
        right: 102px;
    }

    .topbar-unread-button {
        right: 58px;
    }

    .topbar-logout-button {
        right: 14px;
    }

    .topbar-home-button .topbar-button-icon,
    .topbar-unread-button .topbar-button-icon {
        font-size: 0.9rem;
    }

    .topbar-home-button .topbar-icon-svg {
        width: 16px;
        height: 16px;
    }

    .topbar-home-button .topbar-button-icon {
        margin: 0;
    }

    .topbar-unread-count {
        position: absolute;
        top: -6px;
        right: -6px;
        min-width: 16px;
        min-height: 16px;
        padding: 0 4px;
        font-size: 0.62rem;
    }

    .topbar-brand {
        grid-area: brand;
        justify-content: flex-end;
        align-self: start;
        width: auto;
    }

    .brand-logo-landscape {
        width: 152px;
        max-width: 40vw;
        max-height: 34px;
    }

    .topbar-user {
        grid-area: user;
        width: 100%;
        justify-content: space-between;
        align-items: stretch;
        gap: 8px;
        padding-top: 26px;
    }

    .topbar-identity {
        min-width: 0;
    }

    .topbar-user-name {
        font-size: 0.92rem;
        line-height: 1.08;
    }

    .topbar-user-role {
        font-size: 0.8rem;
        line-height: 1.08;
    }

    .topbar-session-link {
        margin-left: auto;
    }

    .topbar-session-box {
        min-width: 156px;
        padding: 8px 10px;
        border-radius: 12px;
    }

    .topbar-session-title {
        font-size: 0.66rem;
    }

    .topbar-session-name {
        font-size: 0.86rem;
        line-height: 1.08;
    }

    .topbar-session-meta,
    .topbar-session-countdown {
        font-size: 0.74rem;
        line-height: 1.08;
    }

    .topbar-fullscreen-button {
        display: none;
    }

    .desktop-only-panel {
        display: none;
    }

    .mobile-only-block {
        display: block;
    }

    .mobile-only-button {
        display: inline-flex;
    }
}

@media (min-width: 800px) {
    .app-shell {
        padding: 28px;
    }

    .topbar {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        margin-bottom: 24px;
        padding: 18px 22px;
    }

    .topbar-brand {
        justify-content: center;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        flex: 1;
        width: auto;
        padding-top: 2px;
    }

    .topbar-title-row {
        align-items: flex-start;
        flex-wrap: nowrap;
    }

    .topbar-action-stack {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
    }

    .topbar-home-button,
    .topbar-unread-button,
    .topbar-logout-button,
    .topbar-fullscreen-button {
        min-width: 118px;
        min-height: 36px;
        padding: 0 12px;
        justify-content: center;
        font-size: 0.9rem;
    }

    .topbar-button-icon {
        display: none;
    }

    .topbar-button-label {
        display: inline;
    }

    .brand-logo-landscape {
        width: min(420px, 100%);
        max-height: 68px;
    }

    .topbar-user {
        align-items: center;
        justify-content: flex-end;
        width: auto;
    }

    .auth-layout {
        grid-template-columns: 1.1fr 0.9fr;
        align-items: stretch;
    }

    .grid-panels {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #home-layout {
        display: grid !important;
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) !important;
        gap: 20px !important;
        align-items: start !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    #home-schedule-card {
        grid-column: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        align-self: start !important;
    }

    #home-menu-card {
        grid-column: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        align-self: start !important;
    }

    .home-menu-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
    }

    .cars-layout {
        grid-template-columns: 1.4fr 0.8fr;
        align-items: start;
    }

    .registry-layout {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }

    .stage-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .two-columns {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .hero-card {
        padding: 24px;
        margin-bottom: 20px;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 18px;
    }

    .auth-card,
    .auth-panel,
    .panel {
        padding: 24px;
    }

    .panel-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 18px;
        align-items: center;
    }

    .checkbox-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tires-tabs-row.logs-tabs {
        grid-template-columns: repeat(3, minmax(140px, 180px));
        justify-content: start;
    }

    .tires-tabs-row .logs-tab-button {
        min-height: 44px;
        padding: 6px 12px;
    }

    .tires-tabs-row .logs-tab-title {
        font-size: 0.88rem;
    }

    .stage-summary-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .pdf-checkbox-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .primary-button,
    .ghost-button,
    .danger-button {
        width: auto;
    }

    .bulk-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 50%;
    }

    .equal-actions {
        max-width: 180px;
    }
}

@media (min-width: 1200px) {
    .page-content {
        width: min(1680px, calc(100vw - 72px));
    }

    .app-footer {
        width: min(1680px, calc(100vw - 72px));
    }

    .topbar {
        padding: 22px 26px;
    }

    .hero-card {
        padding: 28px;
        gap: 22px;
    }

    .hero-card > div:first-child {
        max-width: 760px;
    }

    .grid-panels {
        grid-template-columns: 0.95fr 1.1fr 0.95fr;
    }

    .cars-layout {
        grid-template-columns: minmax(0, 1.55fr) minmax(340px, 0.85fr);
        align-items: start;
    }

    .compact-panel {
        position: sticky;
        top: 22px;
    }

    .registry-layout {
        grid-template-columns: minmax(420px, 1.05fr) minmax(0, 1fr);
        align-items: start;
    }

    .operation-card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dashboard-cards-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .cars-distribution-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: stretch;
    }

    .registry-form-panel {
        grid-column: 1;
        position: sticky;
        top: 22px;
    }

    .registry-layout-stacked {
        grid-template-columns: 1fr;
    }

    .registry-layout-stacked .registry-form-panel,
    .registry-layout-stacked .full-width-panel {
        grid-column: 1 / -1;
        position: static;
    }

    .cars-layout-stacked {
        grid-template-columns: 1fr;
    }

    .cars-layout-stacked .compact-panel,
    .cars-layout-stacked .stage-panel,
    .cars-layout-stacked .full-width-panel {
        grid-column: 1 / -1;
        position: static;
    }

    .stage-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .two-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .incident-filter-grid,
    .incident-create-grid {
        grid-template-columns: repeat(3, minmax(220px, 1fr));
    }

    .panel {
        border-radius: 20px;
    }

    .box-group {
        padding: 16px;
    }

    .box-group-header h4 {
        font-size: 1.08rem;
    }

    .data-table {
        min-width: 900px;
    }

    .data-table th,
    .data-table td {
        padding: 12px 11px;
        font-size: 0.92rem;
    }

    .data-table th {
        position: sticky;
        top: 0;
        z-index: 1;
        backdrop-filter: blur(6px);
    }

    .data-table input,
    .data-table select {
        min-width: 96px;
        font-size: 0.92rem;
    }

    .wide-table {
        min-width: 1820px;
    }
}

@media (min-width: 1440px) {
    .page-content {
        width: min(1820px, calc(100vw - 88px));
    }

    .app-footer {
        width: min(1820px, calc(100vw - 88px));
    }

    .cars-layout {
        grid-template-columns: minmax(0, 1.7fr) minmax(360px, 0.8fr);
        gap: 24px;
    }

    .stage-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .two-columns {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .panel-actions {
        gap: 12px;
    }

    .wide-table {
        min-width: 1940px;
    }

    .checkbox-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .pdf-checkbox-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1199px) {
    .dashboard-layout {
        height: auto;
        min-height: 0;
    }

    .dashboard-top-strip,
    .dashboard-grid,
    .dashboard-car-modal-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-grid {
        grid-template-areas:
            "matrix"
            "schedule"
            "checklist"
            "open"
            "cards";
        grid-template-rows: auto;
        height: auto;
        min-height: 0;
    }

    .dashboard-schedule-panel {
        --dashboard-schedule-row-scale: 0.9;
        --dashboard-schedule-gap: 5px;
    }

    .dashboard-schedule-row {
        grid-template-columns: calc(46px * var(--dashboard-schedule-row-scale)) minmax(0, 1fr) calc(90px * var(--dashboard-schedule-row-scale));
        gap: calc(6px * var(--dashboard-schedule-row-scale));
        padding: calc(3px * var(--dashboard-schedule-row-scale)) calc(7px * var(--dashboard-schedule-row-scale));
        font-size: calc(0.74rem * var(--dashboard-schedule-row-scale));
        line-height: 1.06;
    }

    .dashboard-schedule-row strong,
    .dashboard-schedule-row span {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .dashboard-cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-status-label-desktop {
        display: none;
    }

    .dashboard-status-label-mobile {
        display: inline;
    }

    .dashboard-checklist-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 799px) {
    .desktop-only-block {
        display: none !important;
    }

    .incidents-layout {
        width: calc(100% - 10px);
        max-width: calc(100% - 10px);
        margin: 0 auto;
        gap: 14px;
    }

    .incidents-mobile-tabs,
    .incidents-mobile-panel {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .incidents-mobile-tabs.logs-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        justify-content: stretch;
    }

    .incidents-mobile-tabs .logs-tab-button {
        min-height: 34px;
        padding: 5px 10px;
        border-radius: 11px;
    }

    .incidents-mobile-tabs .logs-tab-title {
        font-size: 0.82rem;
        line-height: 1.05;
    }

    .tires-tabs-row.logs-tabs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .tires-tabs-row .logs-tab-button {
        min-height: 34px;
        padding: 5px 8px;
    }

    .tires-tabs-row .logs-tab-title {
        font-size: 0.74rem;
    }

    body[data-page="tires"] .cars-layout {
        width: calc(100% - 10px);
        max-width: calc(100% - 10px);
        margin: 0 auto;
        gap: 14px;
    }

    body[data-page="tires"] .tires-tabs-row,
    body[data-page="tires"] .incidents-mobile-panel,
    body[data-page="tires"] .modal-card {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    body[data-page="tires"] .panel {
        padding-left: 12px;
        padding-right: 12px;
    }

    body[data-page="tires"] .panel-header {
        gap: 8px;
    }

    body[data-page="tires"] .header-badges {
        gap: 6px;
    }

    body[data-page="tires"] .form-grid,
    body[data-page="tires"] .form-grid.two-columns {
        grid-template-columns: minmax(0, 1fr);
    }

    body[data-page="tires"] label.wide-span,
    body[data-page="tires"] .wide-span,
    body[data-page="tires"] .full-span {
        min-width: 0;
    }

    body[data-page="tires"] input,
    body[data-page="tires"] select,
    body[data-page="tires"] textarea,
    body[data-page="tires"] .helper-box,
    body[data-page="tires"] .table-scroll,
    body[data-page="tires"] .bulk-form,
    body[data-page="tires"] .config-toggle {
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    body[data-page="tires"] .barcode-helper-box {
        margin-top: 10px;
    }

    body[data-page="tires"] .new-tire-position-cell {
        white-space: nowrap;
        font-size: 0.72rem;
        line-height: 1.05;
    }

    body[data-page="tires"] .new-tire-position-separator {
        margin: 0 3px;
    }

    body[data-page="tires"] #form-pneu .data-table {
        display: block !important;
        table-layout: auto !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    body[data-page="tires"] #form-pneu .table-scroll {
        overflow-x: hidden !important;
    }

    body[data-page="tires"] #form-pneu .data-table thead {
        display: none !important;
    }

    body[data-page="tires"] #form-pneu .data-table,
    body[data-page="tires"] #form-pneu .data-table tbody,
    body[data-page="tires"] #form-pneu .data-table tr,
    body[data-page="tires"] #form-pneu .data-table td {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    body[data-page="tires"] #form-pneu .data-table tbody {
        display: grid !important;
        gap: 10px;
    }

    body[data-page="tires"] #form-pneu .data-table tr {
        margin-bottom: 10px;
        padding: 10px;
        border: 1px solid var(--border);
        border-radius: 14px;
        background: rgb(255 255 255 / 0.78);
        overflow: hidden;
    }

    body[data-page="tires"] #form-pneu .data-table tbody tr:last-child {
        margin-bottom: 0;
    }

    body[data-page="tires"] #form-pneu .data-table th:first-child,
    body[data-page="tires"] #form-pneu .data-table td:first-child {
        width: 100%;
    }

    body[data-page="tires"] #form-pneu .data-table th:last-child,
    body[data-page="tires"] #form-pneu .data-table td:last-child {
        width: 100%;
    }

    body[data-page="tires"] #form-pneu .data-table td {
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    body[data-page="tires"] #form-pneu .new-tire-position-cell {
        margin-bottom: 8px;
        white-space: normal;
        overflow-wrap: anywhere;
        font-size: 0.86rem;
        line-height: 1.2;
    }

    body[data-page="tires"] #form-pneu .barcode-input-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
        gap: 6px;
        width: 100%;
        max-width: 100%;
    }

    body[data-page="tires"] #form-pneu .barcode-input-row input,
    body[data-page="tires"] #form-pneu .barcode-scan-button {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    body[data-page="tires"] #form-pneu .barcode-scan-button {
        white-space: normal;
        text-align: center;
        padding-left: 10px;
        padding-right: 10px;
    }

    body[data-page="tires"] .checklist-card-body {
        padding: 0 10px 10px;
    }

    body[data-page="tires"] .checklist-summary {
        padding: 11px 10px;
    }

    body[data-page="tires"] .checklist-summary strong,
    body[data-page="tires"] .panel-header h3 {
        font-size: 0.92rem;
        line-height: 1.12;
    }

    body[data-page="tires"] .header-badges .tag,
    body[data-page="tires"] .checklist-meta-row .tag {
        font-size: 0.66rem;
    }

    body[data-page="tires"] .data-table th,
    body[data-page="tires"] .data-table td {
        font-size: 0.74rem;
        line-height: 1.08;
        padding: 7px 6px;
    }

    body[data-page="tires"] .bulk-actions {
        grid-template-columns: 1fr;
    }

    .incidents-mobile-filters {
        display: block;
        margin-top: 14px;
        margin-bottom: 14px;
    }

    .barcode-input-row {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .barcode-scan-button {
        width: 100%;
    }

    .incidents-mobile-filter-form {
        margin-top: 0;
        padding-top: 14px;
    }
}

@media print {
    html,
    body,
    .app-shell,
    .page-content,
    .panel,
    .tag,
    .ghost-button,
    .primary-button,
    .danger-button,
    .topbar,
    .topbar-session-box,
    .data-table th,
    .dashboard-matrix-grid-cell,
    .dashboard-schedule-row,
    .dashboard-open-incident,
    .dashboard-car-card,
    .incident-toast,
    .status-ok,
    .status-off {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}

.data-car-grid,
.data-session-grid {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.data-car-grid {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    align-items: start;
}

.data-session-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

@media (min-width: 900px) {
    .data-session-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.data-car-card,
.data-session-card {
    border: 1px solid var(--line-color, #d8d3c7);
    border-radius: 12px;
    padding: 16px;
}

.data-car-card {
    display: grid;
    gap: 5px;
    min-width: 0;
    min-height: 96px;
    align-content: center;
    color: inherit;
    text-decoration: none;
    background: rgb(255 255 255 / 0.82);
    border: 2px solid rgb(0 61 120 / 0.2);
    padding: 12px;
    transition: transform 120ms ease, border-color 120ms ease, background-color 120ms ease;
}

.data-car-card:hover,
.data-car-card:focus-visible {
    border-color: rgb(0 102 177 / 0.68);
    background: rgb(255 255 255 / 0.96);
    transform: translateY(-1px);
    outline: none;
}

.data-car-card strong {
    font-size: 1.02rem;
    line-height: 1.14;
}

.data-car-card span {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
}

.data-car-pilot {
    font-size: 0.88rem;
    line-height: 1.2;
    color: var(--text);
}

.data-car-card span:last-child {
    font-size: 0.76rem;
    line-height: 1.16;
    color: var(--muted);
}

.data-session-card.is-pending {
    background: #fff0ee;
    border-color: #d76a62;
}

.data-session-card.is-complete {
    background: #edf8ef;
    border-color: #5d9b68;
}

.data-session-summary {
    cursor: pointer;
    list-style: none;
}

.data-session-summary::-webkit-details-marker {
    display: none;
}

.data-session-summary .panel-header {
    margin: 0;
}

.data-upload-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0;
}

.data-upload-button {
    cursor: pointer;
}

.data-file-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.data-file-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.fueling-page {
    display: grid;
    gap: 18px;
}

.kilometers-page {
    display: grid;
    gap: 22px;
}

.office-module-nav {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
}

.office-module-card {
    display: grid;
    gap: 5px;
    min-height: 92px;
    padding: 18px;
    color: var(--text);
    text-decoration: none;
    background: rgb(255 255 255 / 0.82);
    border: 1px solid rgb(0 61 120 / 0.25);
    border-radius: 14px;
    box-shadow: 0 8px 18px rgb(0 0 0 / 0.08);
    transition: transform 120ms ease, background-color 120ms ease, border-color 120ms ease;
}

.office-module-card strong {
    font-size: 1rem;
}

.office-module-card span {
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.25;
}

.office-module-card:hover,
.office-module-card:focus-visible {
    transform: translateY(-2px);
    border-color: rgb(0 102 177 / 0.72);
    background: #fff;
    outline: none;
}

.office-module-card.is-active {
    color: #fff;
    background: var(--primary);
    border-color: var(--primary);
}

.office-module-card.is-active span {
    color: rgb(255 255 255 / 0.8);
}

.office-setup-stage-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    max-width: 760px;
    margin: 0 0 18px;
}

.office-setup-stage-form label,
.office-torque-create-form label {
    display: grid;
    gap: 6px;
    font-weight: 800;
}

.office-setup-grid,
.office-torque-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(390px, 1fr));
    gap: 16px;
}

.office-setup-card,
.office-torque-card {
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgb(255 255 255 / .72);
}

.office-setup-card.is-reference {
    overflow: hidden;
    border: 3px solid #0a6fb1;
    background: #ccecff;
    box-shadow: 0 12px 26px rgb(0 82 145 / 0.28);
}

.office-setup-card.is-reference .office-setup-card-title {
    align-items: center;
    margin: -16px -16px 12px;
    padding: 13px 16px;
    color: #fff;
    background: linear-gradient(90deg, #005b9b, #087fc3);
}

.office-setup-card.is-reference .office-setup-card-title h3,
.office-setup-card.is-reference .office-setup-card-title p { color: #fff; }

.office-setup-card.is-reference .office-setup-card-title > span {
    color: #005b9b;
    background: #fff;
    box-shadow: 0 1px 4px rgb(0 0 0 / .2);
}

.office-setup-card.is-reference .office-setup-summary {
    border: 1px solid rgb(0 91 155 / .28);
    background: rgb(255 255 255 / .62);
}

.office-setup-card-title,
.office-setup-summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.office-setup-card-title h3,
.office-torque-card h3 {
    margin: 0;
    font-size: 1.1rem;
}

.office-setup-card-title p {
    margin: 4px 0 0;
    color: var(--muted);
    font-weight: 700;
}

.office-setup-card-title > span {
    padding: 5px 9px;
    border-radius: 999px;
    color: #fff;
    background: #0a5fa8;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .06em;
}

.office-setup-summary {
    margin: 14px 0 4px;
    padding: 9px 12px;
    border-radius: 9px;
    background: rgb(5 72 129 / .08);
    font-size: .88rem;
}

.office-setup-summary strong {
    display: block;
    margin-top: 2px;
    color: var(--primary);
    font-size: 1.05rem;
}

.office-setup-car-layout {
    display: grid;
    grid-template-columns: minmax(100px, 1fr) minmax(100px, 122px) minmax(100px, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    gap: 20px 12px;
    min-height: 510px;
    max-width: 430px;
    margin: 10px auto 0;
}

.office-setup-car-layout > img {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 100%;
    max-height: 360px;
    object-fit: contain;
}

.office-setup-position {
    display: grid;
    gap: 6px;
    min-width: 0;
    padding: 8px;
    border: 1px solid #87afd0;
    border-radius: 10px;
    background: rgb(231 242 251 / .94);
}

.office-setup-position.top.left { grid-column: 1; grid-row: 1; }
.office-setup-position.top.right { grid-column: 3; grid-row: 1; }
.office-setup-position.bottom.left { grid-column: 1; grid-row: 2; }
.office-setup-position.bottom.right { grid-column: 3; grid-row: 2; }
.office-setup-position > strong { color: var(--primary); font-size: .82rem; }
.office-setup-position label { display: grid; gap: 2px; font-size: .67rem; font-weight: 800; }
.office-setup-position input { min-width: 0; padding: 5px 7px; font-size: .78rem; }
.office-setup-form .form-actions { justify-content: center; }

.office-torque-create-form {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(260px, 1fr) auto;
    align-items: end;
    gap: 14px;
    margin: 0 0 20px;
}

.office-torque-create-form .form-actions { margin: 0; }
.office-torque-card { display: grid; gap: 12px; }
.office-torque-card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.office-torque-edit-form { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(180px, 1fr) auto; align-items: end; gap: 10px; }
.office-torque-edit-form label { display: grid; gap: 5px; font-size: .78rem; font-weight: 800; }
.office-torque-delete-card { display: flex; justify-content: flex-end; }
.office-torque-images { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.office-torque-images figure { display: grid; gap: 8px; margin: 0; }
.office-torque-card img { width: 100%; max-height: 650px; object-fit: contain; border-radius: 8px; background: #fff; }

@media (max-width: 680px) {
    .office-task-tabs {
        grid-template-columns: 1fr;
        gap: 8px;
        margin: 14px 0;
    }

    .office-task-tabs .logs-tab-button {
        min-height: 42px;
        padding: 8px 12px;
    }

    .office-setup-grid,
    .office-torque-grid { grid-template-columns: 1fr; }
    .office-setup-grid {
        width: 100%;
        max-width: 100%;
        gap: 8px;
    }
    .office-setup-card {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        overflow: hidden;
    }
    .office-setup-grid.has-chassis-filter .office-setup-card:not(.is-reference) { order: 1; }
    .office-setup-grid.has-chassis-filter .office-setup-card.is-reference { order: 2; }
    .office-setup-stage-form { grid-template-columns: 1fr; max-width: none; }
    .office-setup-form,
    .office-setup-card-title,
    .office-setup-summary,
    .office-setup-car-layout,
    .office-setup-position,
    .office-setup-position label {
        min-width: 0;
        max-width: 100%;
    }
    .office-setup-card-title > div,
    .office-setup-summary > span {
        min-width: 0;
        overflow-wrap: anywhere;
    }
    .office-setup-car-layout {
        grid-template-columns: minmax(0, 1fr) minmax(62px, 0.72fr) minmax(0, 1fr);
        gap: 12px 8px;
        min-height: 510px;
        max-width: 100%;
    }
    .office-setup-position {
        padding: 6px;
    }
    .office-setup-position input {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding-inline: 4px;
    }
    .office-setup-form .form-actions {
        margin-top: 26px;
    }
    .office-setup-form .form-actions .primary-button {
        justify-content: center;
        text-align: center;
    }
    .office-torque-create-form { grid-template-columns: 1fr; }
    .office-torque-edit-form { grid-template-columns: 1fr; }
}

@media (max-width: 980px) {
    body[data-page="schedule"] .schedule-mobile-calendar-table {
        width: 360px !important;
        min-width: 360px !important;
        table-layout: fixed;
    }

    body[data-page="schedule"] .schedule-mobile-calendar-table th,
    body[data-page="schedule"] .schedule-mobile-calendar-table td {
        padding-inline: 3px;
    }

    body[data-page="schedule"] .schedule-mobile-calendar-table th:first-child,
    body[data-page="schedule"] .schedule-mobile-calendar-table td:first-child {
        width: 28px;
    }

    body[data-page="schedule"] .schedule-mobile-calendar-table th:nth-child(2),
    body[data-page="schedule"] .schedule-mobile-calendar-table td:nth-child(2) {
        width: 150px;
    }

    body[data-page="schedule"] .schedule-mobile-calendar-table th:nth-child(3),
    body[data-page="schedule"] .schedule-mobile-calendar-table td:nth-child(3),
    body[data-page="schedule"] .schedule-mobile-calendar-table th:nth-child(4),
    body[data-page="schedule"] .schedule-mobile-calendar-table td:nth-child(4) {
        width: 72px;
    }
}

.office-pending-panel {
    display: grid;
    gap: 8px;
    min-height: 180px;
    align-content: center;
}

@media (max-width: 980px) {
    .office-module-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .office-module-nav {
        grid-template-columns: 1fr;
    }
}

.kilometers-panel {
    display: grid;
    gap: 18px;
}

.kilometers-overview-panel {
    padding: 24px;
}

.kilometers-overview-panel .panel-header h2,
.kilometers-history-panel .panel-header h2 {
    font-size: clamp(1.25rem, 1.4vw, 1.6rem);
}

.kilometers-car-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 9px;
}

.kilometers-car-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-width: 0;
    min-height: 118px;
    padding: 13px;
    text-align: left;
    color: var(--text);
    background: rgb(255 255 255 / 0.84);
    border: 2px solid rgb(0 61 120 / 0.28);
    border-radius: 13px;
    cursor: pointer;
    transition: transform 120ms ease, border-color 120ms ease, background-color 120ms ease;
}

.kilometers-car-card:hover,
.kilometers-car-card:focus-visible {
    transform: translateY(-2px);
    border-color: rgb(0 102 177 / 0.75);
    background: #fff;
    outline: none;
}

.kilometers-car-card.is-current {
    background: rgb(204 233 215 / 0.9);
    border-color: rgb(46 133 83 / 0.72);
}

.kilometers-car-card.is-outdated {
    background: rgb(246 214 214 / 0.9);
    border-color: rgb(194 65 65 / 0.72);
}

.kilometers-car-card.is-current:hover,
.kilometers-car-card.is-current:focus-visible {
    border-color: rgb(29 112 65);
}

.kilometers-car-card.is-outdated:hover,
.kilometers-car-card.is-outdated:focus-visible {
    border-color: rgb(167 42 42);
}

.kilometers-card-chassis {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--primary);
}

.kilometers-card-pilot {
    min-width: 0;
    overflow: hidden;
    color: var(--text);
    font-size: 0.76rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kilometers-card-info {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    min-width: 0;
}

.kilometers-card-footer {
    display: grid;
    gap: 5px;
    margin-top: auto;
}

.kilometers-card-total {
    max-width: 112px;
    font-size: clamp(1.35rem, 1.65vw, 1.7rem);
    line-height: 1.05;
    text-align: right;
    overflow-wrap: anywhere;
}

.kilometers-card-reference,
.kilometers-card-distance {
    font-size: 0.74rem;
    color: var(--muted);
}

.kilometers-card-reference {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kilometers-card-distance {
    font-weight: 700;
    color: var(--primary);
}

.kilometers-history-panel {
    padding: 24px;
}

.kilometers-mobile-history-action,
.kilometers-history-modal {
    display: none;
}

.kilometers-table {
    min-width: 1120px;
}

.kilometers-history-panel .data-table th {
    font-size: 0.82rem;
}

.kilometers-history-panel .data-table td {
    padding-top: 12px;
    padding-bottom: 12px;
}

.kilometers-modal-card {
    width: min(500px, 100%);
}

.kilometers-modal-card .modal-header p {
    margin: 4px 0 0;
    color: var(--muted);
}

.maintenance-page,
.maintenance-panel {
    display: grid;
    gap: 18px;
    min-width: 0;
    max-width: 100%;
}

.maintenance-car-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 9px;
}

.maintenance-car-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 104px;
    padding: 13px;
    color: var(--text);
    text-decoration: none;
    background: rgb(255 255 255 / 0.84);
    border: 2px solid rgb(0 61 120 / 0.28);
    border-radius: 13px;
    transition: transform 120ms ease, border-color 120ms ease, background-color 120ms ease;
}

.maintenance-car-card.is-ok { background: rgb(204 233 215 / 0.9); border-color: rgb(46 133 83 / 0.72); }
.maintenance-car-card.is-warning { background: rgb(255 244 191 / 0.92); border-color: rgb(201 151 0 / 0.78); }
.maintenance-car-card.is-overdue { background: rgb(246 214 214 / 0.92); border-color: rgb(194 65 65 / 0.78); }
.maintenance-car-card.is-selected { color: #fff; background: var(--primary); border-color: var(--primary); }

.maintenance-car-card:hover,
.maintenance-car-card:focus-visible {
    transform: translateY(-2px);
    border-color: var(--primary);
    outline: none;
}

.maintenance-card-info {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.maintenance-card-info strong { font-size: 1.03rem; }
.maintenance-card-info span { overflow: hidden; font-size: 0.82rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.maintenance-card-info small { overflow: hidden; font-size: 0.69rem; text-overflow: ellipsis; white-space: nowrap; }
.maintenance-car-card b { font-size: 1.22rem; text-align: right; white-space: nowrap; }
.maintenance-car-card.is-selected .maintenance-card-info span,
.maintenance-car-card.is-selected .maintenance-card-info small { color: rgb(255 255 255 / 0.84); }

.maintenance-mobile-part-list { display: none; }

.maintenance-catalog-link-row {
    display: flex;
    justify-content: flex-end;
}

.maintenance-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.maintenance-tabs a {
    padding: 9px 14px;
    color: var(--primary);
    font-size: 0.82rem;
    font-weight: 800;
    text-decoration: none;
    border: 1px solid rgb(0 61 120 / 0.3);
    border-radius: 10px;
}

.maintenance-tabs a.is-active {
    color: #fff;
    background: var(--primary);
}

.maintenance-chassis-selector {
    display: grid;
    gap: 5px;
    max-width: 440px;
}

.maintenance-chassis-selector label {
    font-size: 0.8rem;
    font-weight: 800;
}

.maintenance-selected-car {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    color: #fff;
    background: var(--primary);
    border-radius: 12px;
}

.maintenance-selected-car span {
    font-size: 0.9rem;
    font-weight: 800;
}

.maintenance-selected-car strong {
    font-size: 1.2rem;
}

.maintenance-form {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 18px;
    background: rgb(255 255 255 / 0.58);
    border: 1px solid var(--border);
    border-radius: 14px;
}

.maintenance-form h3,
.maintenance-form .form-actions {
    grid-column: 1 / -1;
}

.maintenance-form h3 {
    margin: 0;
}

.maintenance-catalog-table,
.maintenance-history-table {
    max-height: 560px;
}

body[data-page="maintenance"] .maintenance-catalog-table,
body[data-page="maintenance"] .maintenance-history-table,
body[data-page="maintenance"] .maintenance-chassis-table {
    max-height: none;
}

.maintenance-catalog-table .catalog-inline-input {
    box-sizing: border-box;
    width: 100%;
    min-width: 92px;
    padding: 6px 7px;
    font: inherit;
    font-size: 0.78rem;
    color: var(--text);
    background: rgb(255 255 255 / 0.78);
    border: 1px solid rgb(0 61 120 / 0.25);
    border-radius: 6px;
}

.maintenance-catalog-table .catalog-inline-input:focus {
    outline: 2px solid rgb(0 105 180 / 0.25);
    border-color: var(--primary);
}

.maintenance-catalog-table table {
    min-width: 1250px;
}

.maintenance-history-table table {
    min-width: 1200px;
}

.maintenance-chassis-table table {
    min-width: 1500px;
}

.maintenance-filter-form,
.maintenance-service-filters,
.maintenance-execute-actions {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.maintenance-filter-form label {
    display: grid;
    gap: 5px;
    min-width: 240px;
    font-size: 0.8rem;
    font-weight: 800;
}

.maintenance-execute-actions {
    margin-top: 4px;
}

.maintenance-execute-actions p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.84rem;
}

.maintenance-execute-actions-bottom {
    justify-content: flex-end;
    margin-top: 12px;
}

.maintenance-execute-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.maintenance-limit-choice {
    position: relative;
    display: block;
    min-width: 128px;
    padding: 8px 10px;
    color: var(--text);
    font-size: 0.78rem;
    font-weight: 800;
    text-align: center;
    cursor: pointer;
    background: rgb(255 255 255 / 0.72);
    border: 1px solid var(--border);
    border-radius: 8px;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.maintenance-limit-choice.is-warning,
.maintenance-validity-status.is-warning {
    background: rgb(255 244 191 / 0.92);
    border-color: rgb(201 151 0 / 0.78);
}

.maintenance-limit-choice.is-overdue,
.maintenance-validity-status.is-overdue {
    background: rgb(246 214 214 / 0.92);
    border-color: rgb(194 65 65 / 0.78);
}

.maintenance-validity-status {
    display: block;
    min-width: 128px;
    padding: 8px 10px;
    font-size: 0.78rem;
    font-weight: 800;
    text-align: center;
    background: rgb(255 255 255 / 0.72);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.maintenance-limit-choice input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.maintenance-limit-choice:has(input:checked) {
    color: #fff;
    background: #16834d;
    border-color: #0d683c;
}

@media (max-width: 980px) {
    .maintenance-car-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .maintenance-car-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .maintenance-car-card {
        position: relative;
        display: block;
        min-height: 126px;
        padding: 11px;
    }

    .maintenance-card-info {
        display: block;
    }

    .maintenance-card-chassis {
        display: block;
        overflow: hidden;
        font-size: 0.86rem !important;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .maintenance-card-pilot {
        display: block;
        margin-top: 5px;
        overflow: visible !important;
        font-size: 0.78rem !important;
        line-height: 1.2;
        text-overflow: clip !important;
        white-space: normal !important;
    }

    .maintenance-card-vin {
        display: none;
    }

    .maintenance-card-mileage {
        position: absolute;
        right: 11px;
        bottom: 11px;
        max-width: 70px;
        font-size: 0.8rem !important;
        line-height: 1.15;
        text-align: right;
        white-space: normal;
    }

    .maintenance-catalog-bulk-form,
    .maintenance-catalog-bulk-actions,
    .maintenance-chassis-table,
    .maintenance-execute-actions {
        display: none;
    }

    .maintenance-mobile-part-list {
        display: grid;
        gap: 8px;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
    }

    .maintenance-mobile-part-card {
        display: grid;
        grid-template-columns: minmax(56px, 0.7fr) minmax(0, 1.45fr) minmax(72px, 0.9fr);
        align-items: center;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        overflow: hidden;
        min-height: 68px;
        padding: 9px 10px;
        color: var(--text);
        text-align: left;
        background: rgb(255 255 255 / 0.8);
        border: 1px solid var(--border);
        border-radius: 11px;
    }

    .maintenance-mobile-part-group,
    .maintenance-mobile-part-main,
    .maintenance-mobile-part-limit {
        min-width: 0;
    }

    .maintenance-mobile-part-group {
        padding-right: 7px;
        font-size: 0.7rem;
        font-weight: 800;
        line-height: 1.15;
        overflow-wrap: anywhere;
    }

    .maintenance-mobile-part-main {
        display: grid;
        gap: 3px;
        padding-right: 7px;
        border-left: 1px solid rgb(0 61 120 / 0.14);
        padding-left: 8px;
    }

    .maintenance-mobile-part-main strong,
    .maintenance-mobile-part-main small {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .maintenance-mobile-part-main strong { font-size: 0.8rem; }
    .maintenance-mobile-part-main small,
    .maintenance-mobile-part-limit small { font-size: 0.68rem; color: var(--muted); }

    .maintenance-mobile-part-limit {
        display: grid;
        gap: 3px;
        padding-left: 8px;
        border-left: 1px solid rgb(0 61 120 / 0.14);
        text-align: right;
    }

    .maintenance-mobile-part-limit strong { font-size: 0.76rem; white-space: nowrap; }

    .maintenance-mobile-catalog-list .maintenance-mobile-part-card {
        grid-template-columns: minmax(68px, 0.75fr) minmax(0, 2fr);
    }

    .maintenance-mobile-modal-card {
        width: calc(100vw - 24px);
        max-height: calc(100vh - 32px);
        padding: 16px;
    }

    .maintenance-mobile-modal-card .form-actions { margin-top: 4px; }

    .maintenance-mobile-service-actions {
        display: grid;
        gap: 8px;
        margin-top: 16px;
    }

    .maintenance-mobile-service-actions .maintenance-limit-choice {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: 48px;
        padding: 8px 10px;
        text-align: left;
    }

    .maintenance-confirm-modal-card { width: min(420px, calc(100vw - 24px)); }
}

@media (max-width: 900px) {
    body[data-page="maintenance"] {
        overflow-x: hidden;
    }

    body[data-page="maintenance"] .page-content,
    body[data-page="maintenance"] .maintenance-page,
    body[data-page="maintenance"] .maintenance-panel,
    body[data-page="maintenance"] .maintenance-mobile-service-list {
        min-width: 0;
        max-width: 100%;
        overflow-x: hidden;
    }

    body[data-page="maintenance"] .maintenance-mobile-service-list .maintenance-mobile-part-card {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    body[data-page="maintenance"] .maintenance-car-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    body[data-page="maintenance"] .maintenance-car-card {
        position: relative;
        display: block;
        min-width: 0;
        min-height: 126px;
        padding: 11px;
        overflow: hidden;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body[data-page="maintenance"] .maintenance-card-info {
        display: block;
    }

    body[data-page="maintenance"] .maintenance-card-chassis {
        display: block;
        overflow: hidden;
        font-size: 0.86rem !important;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body[data-page="maintenance"] .maintenance-card-pilot {
        display: block;
        margin-top: 4px;
        overflow: visible !important;
        font-size: 0.78rem !important;
        line-height: 1.2;
        text-overflow: clip !important;
        white-space: normal !important;
    }

    body[data-page="maintenance"] .maintenance-card-vin {
        display: none;
    }

    body[data-page="maintenance"] .maintenance-card-mileage {
        position: absolute;
        right: 11px;
        bottom: 11px;
        max-width: 70px;
        font-size: 0.8rem !important;
        line-height: 1.15;
        text-align: right;
        white-space: normal;
    }

    body[data-page="maintenance"] .maintenance-catalog-bulk-form,
    body[data-page="maintenance"] .maintenance-catalog-bulk-actions,
    body[data-page="maintenance"] .maintenance-chassis-table,
    body[data-page="maintenance"] .maintenance-execute-actions {
        display: none;
    }

    body[data-page="maintenance"] .maintenance-mobile-part-list {
        display: grid;
        gap: 8px;
    }

    body[data-page="maintenance"] .maintenance-mobile-part-card,
    body[data-page="maintenance"] .maintenance-mobile-part-card * {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body[data-page="maintenance"] .maintenance-history-table {
        display: block;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y;
    }
}

.maintenance-limit-choice:hover {
    border-color: #16834d;
}

.reference-procedure-list {
    display: grid;
    gap: 10px;
    width: 100%;
    margin-bottom: 18px;
}

.reference-procedure-heading h2 {
    margin: 0 0 2px;
    font-size: 1.2rem;
}

.reference-card-editor {
    padding: 14px 18px;
    background: rgb(255 255 255 / 0.76);
    border: 1px solid var(--border);
    border-radius: 14px;
}

.reference-card-editor summary {
    cursor: pointer;
    color: var(--primary);
    font-size: 1rem;
    font-weight: 800;
}

.reference-card-create-form {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(180px, 0.45fr) auto;
    gap: 12px;
    align-items: end;
    margin-top: 14px;
}

.reference-card-create-form label {
    display: grid;
    gap: 5px;
    font-size: 0.82rem;
    font-weight: 800;
}

.reference-card-delete-form {
    display: flex;
    justify-content: flex-end;
    margin: -4px 0 8px;
}

.reference-card-delete-button {
    display: inline-grid;
    place-items: center;
    width: 34px;
    min-height: 34px;
    padding: 0;
    color: #fff;
    background: var(--danger);
    border: 1px solid rgb(0 0 0 / 0.12);
    border-radius: 7px;
    cursor: pointer;
}

.reference-procedure-card {
    width: 100%;
    overflow: hidden;
    background: rgb(255 255 255 / 0.76);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-soft);
}

.reference-procedure-card summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 64px;
    padding: 16px 20px;
    font-size: 1.12rem;
    font-weight: 800;
    color: var(--text);
    cursor: pointer;
    list-style: none;
}

.reference-procedure-card summary::-webkit-details-marker {
    display: none;
}

.reference-procedure-card[open] summary {
    color: #fff;
    background: var(--primary);
}

.reference-procedure-indicator::before {
    content: "+";
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1;
    border: 1px solid currentColor;
    border-radius: 50%;
}

.reference-procedure-card[open] .reference-procedure-indicator::before {
    content: "-";
}

.reference-procedure-content {
    min-height: 1px;
    padding: 16px 18px;
}

.reference-procedure-text-form {
    display: grid;
    gap: 12px;
}

.reference-procedure-text-form textarea {
    width: 100%;
    min-height: 180px;
    resize: vertical;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
}

.reference-procedure-actions,
.reference-procedure-file,
.reference-procedure-upload-form {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.reference-procedure-actions {
    justify-content: flex-end;
}

.reference-procedure-file {
    justify-content: space-between;
}

.reference-procedure-files {
    display: grid;
    gap: 8px;
    margin-bottom: 12px;
}

.reference-procedure-file-actions,
.reference-procedure-file-actions form {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.reference-procedure-file .reference-card-delete-button {
    width: 32px;
    min-height: 32px;
}

.reference-procedure-image {
    display: block;
    width: min(100%, 840px);
    max-height: 520px;
    object-fit: contain;
    margin-bottom: 4px;
    background: rgb(0 0 0 / 0.06);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.reference-procedure-card.office-torque-card {
    display: block;
    padding: 0;
}

.office-torque-card .reference-procedure-content {
    display: grid;
    gap: 12px;
}

.racebook-page,
.racebook-car-list {
    display: grid;
    gap: 14px;
}

.racebook-import-form {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) minmax(260px, 1.4fr) minmax(260px, 1.4fr) auto;
    gap: 10px;
    align-items: end;
}

.racebook-preview-modal {
    width: min(1040px, calc(100vw - 32px));
    max-height: min(82vh, 820px);
    overflow: auto;
}

.racebook-sectors-modal-card {
    width: min(720px, calc(100vw - 28px));
}

.racebook-preview-backdrop {
    position: fixed;
    z-index: 1000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgb(0 0 0 / 0.48);
    backdrop-filter: blur(3px);
}

.racebook-preview-modal .form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 14px;
}

.racebook-import-form label {
    display: grid;
    gap: 4px;
    font-size: 0.78rem;
    font-weight: 800;
}

.racebook-import-form > strong {
    align-self: center;
    font-size: 1.08rem;
}

.racebook-session-performance,
.racebook-car-performance {
    display: grid;
    gap: 8px;
}

.racebook-session-performance {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.racebook-session-performance > div,
.racebook-car-performance > span {
    display: grid;
    gap: 2px;
    padding: 10px;
    background: rgb(255 255 255 / 0.74);
    border: 1px solid var(--border);
    border-radius: 9px;
}

.racebook-session-performance span,
.racebook-car-performance span {
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--muted);
    text-transform: uppercase;
}

.racebook-session-performance strong {
    color: #4d2c80;
    font-size: 1.1rem;
}

.racebook-session-performance small {
    color: var(--text);
    font-size: 0.78rem;
    font-weight: 800;
}

.racebook-car-performance {
    grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
    margin-top: 12px;
}

.racebook-car-performance strong {
    color: var(--primary);
}

.racebook-car-performance small {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--muted);
}

.racebook-heading h2,
.racebook-car-header strong,
.racebook-outing-header strong {
    margin: 0;
    font-size: 1.18rem;
}

.racebook-heading h2 {
    font-size: clamp(1.55rem, 2vw, 2rem);
}

.racebook-heading .table-subtext {
    margin-top: 6px;
    font-size: 1rem;
    font-weight: 700;
}

.racebook-session-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 2px 8px;
    width: 100%;
}

.racebook-session-tab {
    display: grid;
    flex: 1 1 170px;
    gap: 2px;
    min-width: 158px;
    padding: 11px 14px;
    color: var(--text);
    background: rgb(255 255 255 / 0.72);
    border: 1px solid var(--border);
    border-radius: 10px;
    text-decoration: none;
}

.racebook-session-tab span,
.racebook-car-header span,
.racebook-outing-header span,
.racebook-pressure-grid span {
    font-size: 0.78rem;
}

.racebook-session-tab.is-active {
    color: #fff;
    background: var(--primary);
    border-color: var(--primary);
}

.racebook-car-card {
    padding: 16px;
}

.racebook-car-header,
.racebook-outing-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.racebook-car-header > div,
.racebook-outing-header > div {
    display: grid;
    gap: 3px;
}

.racebook-outing-header > .racebook-outing-title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.racebook-outing-title select {
    min-height: 34px;
    min-width: 180px;
    padding: 5px 10px;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 700;
}

.racebook-car-header strong {
    font-size: 1.5rem;
}

.racebook-car-header span {
    font-size: 1.08rem;
    font-weight: 800;
    color: var(--text);
}

.racebook-outing {
    display: grid;
    grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
    column-gap: 18px;
    align-items: start;
    margin-top: 16px;
    padding: 14px;
    background: rgb(255 255 255 / 0.58);
    border: 2px solid var(--primary);
    border-radius: 12px;
}

.racebook-outing.is-closed {
    border-color: var(--success);
}

.racebook-pressure-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(112px, 1fr));
    gap: 7px;
    width: min(300px, 100%);
    margin: 12px 0;
    grid-column: 1;
}

.racebook-pressure-editor {
    display: grid;
    gap: 10px;
    grid-column: 1;
    margin-top: 12px;
}

.racebook-tire-editor {
    display: grid;
    gap: 8px;
    grid-column: 1;
    margin-top: 12px;
}

.racebook-tire-square {
    display: grid;
    grid-template-columns: minmax(112px, 1fr) minmax(74px, 0.78fr) minmax(112px, 1fr);
    grid-template-rows: repeat(2, minmax(64px, auto));
    gap: 7px;
    align-items: center;
}

.racebook-tire-square label {
    display: grid;
    gap: 4px;
    padding: 6px;
    font-size: 0.7rem;
    font-weight: 800;
    background: rgb(5 72 126 / 0.08);
    border: 1px solid var(--border);
    border-radius: 7px;
}

.racebook-tire-square select {
    min-width: 0;
    min-height: 32px;
    padding: 4px 6px;
    font: inherit;
    font-size: 0.7rem;
}

.racebook-tire-square img {
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-self: center;
    max-width: 80px;
    max-height: 170px;
    object-fit: contain;
}

.racebook-tire-square .tire-de { grid-column: 1; grid-row: 1; }
.racebook-tire-square .tire-dd { grid-column: 3; grid-row: 1; }
.racebook-tire-square .tire-te { grid-column: 1; grid-row: 2; }
.racebook-tire-square .tire-td { grid-column: 3; grid-row: 2; }
.racebook-tire-select.is-rain,
.racebook-tire-square label:has(.racebook-tire-select.is-rain) {
    color: #fff;
    background: #1769aa;
    border-color: #0d4c80;
}

.racebook-repeat-tires {
    justify-self: center;
}

.racebook-pressure-editor > label {
    display: grid;
    gap: 4px;
    font-size: 0.76rem;
    font-weight: 800;
}

.racebook-pressure-editor .primary-button {
    min-height: 38px;
    min-width: 144px;
    justify-self: center;
}

.racebook-pressure-square {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(74px, 0.78fr) minmax(0, 1fr);
    grid-template-rows: repeat(2, minmax(64px, auto)) 18px repeat(2, minmax(64px, auto));
    gap: 6px;
    align-items: center;
}

.racebook-pressure-square::after {
    content: "";
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100%;
    height: 2px;
    background: rgb(0 61 120 / 0.28);
    border-radius: 999px;
}

.racebook-pressure-square label {
    display: grid;
    gap: 3px;
    padding: 6px;
    font-size: 0.68rem;
    font-weight: 800;
    background: rgb(5 72 126 / 0.08);
    border: 1px solid var(--border);
    border-radius: 7px;
}

.racebook-pressure-square input { min-height: 30px; padding: 4px 6px; font-size: 0.82rem; }
.racebook-pressure-square img { justify-self: center; max-height: 170px; max-width: 80px; object-fit: contain; }
.racebook-pressure-square .initial-de { grid-column: 1; grid-row: 1; }
.racebook-pressure-square .initial-dd { grid-column: 3; grid-row: 1; }
.racebook-pressure-square .initial-te { grid-column: 1; grid-row: 2; }
.racebook-pressure-square .initial-td { grid-column: 3; grid-row: 2; }
.racebook-pressure-square .initial-car { grid-column: 2; grid-row: 1 / span 2; }
.racebook-pressure-square .final-de { grid-column: 1; grid-row: 4; }
.racebook-pressure-square .final-dd { grid-column: 3; grid-row: 4; }
.racebook-pressure-square .final-te { grid-column: 1; grid-row: 5; }
.racebook-pressure-square .final-td { grid-column: 3; grid-row: 5; }
.racebook-pressure-square .final-car { grid-column: 2; grid-row: 4 / span 2; }

.racebook-outing-header {
    grid-column: 1 / -1;
    padding-bottom: 10px;
    border-bottom: 1px solid rgb(0 61 120 / 0.18);
}

.racebook-race-laps,
.racebook-race-session-setup {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: end;
    padding: 10px 12px;
    background: rgb(5 72 126 / 0.06);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.racebook-race-laps label,
.racebook-race-session-setup label {
    display: grid;
    gap: 4px;
    min-width: 210px;
    color: var(--text);
    font-size: 0.78rem;
    font-weight: 800;
}

.racebook-race-laps input,
.racebook-race-session-setup input {
    min-height: 34px;
    padding: 5px 8px;
    font: inherit;
}

.racebook-race-session-setup {
    display: grid;
    grid-template-columns: minmax(160px, 20%) auto;
    margin-top: 12px;
}

.racebook-race-session-setup label {
    min-width: 0;
}

.racebook-race-session-setup label:nth-of-type(1) { grid-column: 1; grid-row: 1; }
.racebook-race-session-setup label:nth-of-type(2) { grid-column: 1; grid-row: 2; }

.racebook-race-session-setup .primary-button {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    justify-self: start;
}

.racebook-outing > .table-wrap,
.racebook-outing > .racebook-lap-form {
    grid-column: 2;
}

.racebook-outing > .racebook-close-form {
    grid-column: 1;
}

.racebook-outing-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    gap: 10px;
    padding-top: 14px;
}

.racebook-mobile-sectors {
    display: none;
}

.racebook-mobile-outing-best-lap {
    display: none;
}

.racebook-page.is-mobile-view .racebook-import-form,
.racebook-page.is-mobile-view .racebook-outing > .table-wrap,
.racebook-page.is-mobile-view .racebook-race-session-setup {
    display: none;
}

.racebook-page.is-mobile-view .racebook-outing-actions .primary-button {
    justify-content: center;
    text-align: center;
}

.racebook-page.is-mobile-view .racebook-mobile-sectors {
    display: inline-flex;
    justify-content: center;
    margin-top: 10px;
}

.racebook-page.is-mobile-view .racebook-mobile-outing-best-lap {
    display: grid;
    gap: 2px;
    margin-top: 10px;
    font-size: 0.74rem;
    color: var(--muted);
}

.racebook-page.is-mobile-view .racebook-mobile-outing-best-lap strong {
    color: var(--primary);
    font-size: 1rem;
}

.racebook-laps-table input {
    box-sizing: border-box;
    width: 100%;
    min-width: 78px;
    padding: 6px 8px;
    font: inherit;
    text-align: center;
}

.racebook-lap-time-cell {
    display: flex;
    align-items: center;
    gap: 6px;
}

.racebook-lap-time-cell input {
    min-width: 0;
    flex: 1 1 auto;
}

.racebook-in-button {
    flex: 0 0 auto;
    min-height: 32px;
    padding: 4px 9px;
    color: #fff;
    font: inherit;
    font-size: 0.74rem;
    font-weight: 800;
    background: var(--danger);
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}

.racebook-new-lap-row td {
    background: rgb(5 72 126 / 0.06);
}

.racebook-outing.is-readonly input,
.racebook-outing.is-readonly select {
    color: inherit;
    background: rgb(0 0 0 / 0.04);
    cursor: default;
}

.racebook-outing > .table-wrap {
    grid-row: 2 / span 2;
    margin-top: 12px;
}

.racebook-outing > .racebook-final-pressures {
    grid-column: 1;
}

.racebook-pressure-grid > div {
    display: grid;
    gap: 2px;
    padding: 8px;
    background: rgb(5 72 126 / 0.08);
    border: 1px solid var(--border);
    border-radius: 7px;
}

.racebook-final-pressures > div {
    background: rgb(23 132 83 / 0.1);
}

/* Mirrors the car layout: front tyres on top, left tyres on the left. */
.racebook-pressure-fl { grid-area: 1 / 1; }
.racebook-pressure-fr { grid-area: 1 / 2; }
.racebook-pressure-rl { grid-area: 2 / 1; }
.racebook-pressure-rr { grid-area: 2 / 2; }

.racebook-laps-table .racebook-lap-out td,
.racebook-laps-table .racebook-lap-in td {
    font-weight: inherit;
    background: rgb(5 72 126 / 0.08);
}

.racebook-time-personal {
    color: #0d6c3d;
    font-weight: inherit;
    background: rgb(31 145 81 / 0.17) !important;
}

.racebook-time-global {
    color: #4d2c80;
    font-weight: inherit;
    background: rgb(118 73 164 / 0.22) !important;
}

.racebook-lap-form,
.racebook-close-form,
.racebook-new-outing-form {
    display: grid;
    grid-template-columns: repeat(4, minmax(90px, 1fr)) auto;
    gap: 8px;
    align-items: end;
    margin-top: 12px;
}

.racebook-lap-form label,
.racebook-close-form label,
.racebook-new-outing-form label {
    display: grid;
    gap: 4px;
    font-size: 0.76rem;
    font-weight: 800;
}

.racebook-close-form,
.racebook-new-outing-form {
    grid-template-columns: auto repeat(4, minmax(68px, 1fr)) auto;
    padding-top: 12px;
    border-top: 1px dashed var(--border);
}

.racebook-new-outing-form {
    margin-top: 16px;
    padding: 14px;
    background: rgb(5 72 126 / 0.08);
    border: 1px dashed var(--primary);
    border-radius: 10px;
}

@media (max-width: 860px) {
    .racebook-import-form,
    .racebook-session-performance,
    .racebook-pressure-grid,
    .racebook-lap-form,
    .racebook-close-form,
    .racebook-new-outing-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .racebook-outing {
        grid-template-columns: 1fr;
    }

    .racebook-outing-header,
    .racebook-outing > .table-wrap,
    .racebook-outing > .racebook-lap-form,
    .racebook-outing > .racebook-close-form,
    .racebook-outing > .racebook-final-pressures {
        grid-column: 1;
        grid-row: auto;
    }

    body[data-page="racebook"] .racebook-import-form {
        display: none;
    }

    body[data-page="racebook"] .racebook-outing > .table-wrap {
        display: none;
    }

    .racebook-mobile-sectors {
        display: inline-flex;
        justify-content: center;
        margin-top: 10px;
    }

    .racebook-mobile-outing-best-lap {
        display: grid;
        gap: 2px;
        margin-top: 10px;
        font-size: 0.74rem;
        color: var(--muted);
    }

    .racebook-mobile-outing-best-lap strong {
        color: var(--primary);
        font-size: 1rem;
    }
}

.reference-procedure-upload-form label {
    display: grid;
    gap: 5px;
    min-width: min(100%, 360px);
    font-size: 0.82rem;
    font-weight: 800;
}

.reference-procedure-text {
    white-space: pre-wrap;
}

@media (max-width: 720px) {
    .reference-card-create-form {
        grid-template-columns: 1fr;
    }
}

.reference-pattern-table table {
    min-width: 720px;
}

.reference-copy-line {
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    max-width: 100%;
    margin: 4px 0;
}

.reference-pattern-value {
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    overflow-wrap: anywhere;
    padding: 6px 8px;
    color: var(--text);
    background: rgb(255 255 255 / 0.72);
    border: 1px solid var(--border);
    border-radius: 6px;
}

.reference-copy-button {
    min-width: 38px;
    padding: 6px 9px;
}

@media (max-width: 900px) {
    .maintenance-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .maintenance-form {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 980px) {
    .kilometers-car-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .kilometers-overview-panel,
    .kilometers-history-panel {
        padding: 18px;
    }

    .kilometers-car-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kilometers-car-card {
        position: relative;
        display: block;
        min-height: 126px;
        padding: 11px;
    }

    .kilometers-card-info {
        display: block;
        padding-right: 0;
    }

    .kilometers-card-chassis {
        display: block;
        font-size: 0.86rem;
        white-space: nowrap;
    }

    .kilometers-card-pilot {
        display: block;
        margin-top: 4px;
        overflow: visible;
        font-size: 0.78rem;
        line-height: 1.2;
        text-overflow: clip;
        white-space: normal;
    }

    .kilometers-card-footer {
        display: grid;
        gap: 3px;
        margin-top: 10px;
        padding-right: 68px;
    }

    .kilometers-card-total {
        position: absolute;
        right: 11px;
        bottom: 11px;
        max-width: 70px;
        font-size: 0.8rem;
        line-height: 1.15;
    }

    .kilometers-desktop-history-panel {
        display: none;
    }

    .kilometers-mobile-history-action {
        display: block;
    }

    .kilometers-mobile-history-action .secondary-button {
        width: 100%;
        text-align: center;
    }

    .kilometers-history-modal[hidden] {
        display: none;
    }

    .kilometers-history-modal:not([hidden]) {
        display: grid;
    }

    .kilometers-history-modal-card {
        width: min(100%, 680px);
        max-height: min(78vh, 680px);
        padding: 16px;
    }

    .kilometers-mobile-history-table-wrap {
        max-height: 58vh;
        overflow: auto;
        overscroll-behavior: contain;
    }

    .kilometers-mobile-history-table {
        min-width: 680px;
        font-size: 0.75rem;
    }

    .kilometers-mobile-history-table th,
    .kilometers-mobile-history-table td {
        padding: 8px 7px;
        white-space: nowrap;
    }
}

.fueling-stage-panel {
    display: grid;
    gap: 14px;
}

.fueling-stage-selector {
    display: grid;
    gap: 4px;
    min-width: min(100%, 300px);
}

.fueling-stage-actions {
    display: flex;
    align-items: end;
    justify-content: flex-end;
}

.fueling-total-summary {
    display: grid;
    gap: 2px;
    min-width: 150px;
    padding: 8px 12px;
    border: 1px solid rgb(0 61 120 / 0.3);
    border-radius: 12px;
    background: rgb(255 255 255 / 0.7);
    text-align: right;
}

.fueling-total-summary span {
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
}

.fueling-total-summary strong {
    font-size: 1.2rem;
    color: var(--primary);
    white-space: nowrap;
}

.fueling-stage-selector label {
    font-size: 0.76rem;
    font-weight: 700;
}

.fueling-stage-selector select {
    min-width: 260px;
}

.fueling-car-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 9px;
}

.fueling-car-card {
    display: grid;
    gap: 5px;
    min-width: 0;
    min-height: 118px;
    padding: 13px;
    border: 2px solid rgb(0 61 120 / 0.28);
    border-radius: 13px;
    background: rgb(255 255 255 / 0.84);
    color: var(--text);
    text-align: left;
    cursor: pointer;
    transition: transform 120ms ease, border-color 120ms ease, background-color 120ms ease;
}

.fueling-car-card:hover,
.fueling-car-card:focus-visible {
    transform: translateY(-2px);
    border-color: rgb(0 102 177 / 0.75);
    background: #fff;
    outline: none;
}

.fueling-car-card.is-reserve {
    border-style: dashed;
    background: rgb(232 238 242 / 0.94);
}

.fueling-card-chassis {
    font-size: 1rem;
    line-height: 1.16;
    font-weight: 700;
    color: var(--primary);
}

.fueling-card-mobile-identity,
.fueling-card-mobile-filler,
.fueling-mobile-table-actions {
    display: none;
}

.fueling-car-card strong {
    font-size: 1rem;
    line-height: 1.16;
    overflow-wrap: anywhere;
}

.fueling-card-pilot {
    margin-top: auto;
    font-size: 0.74rem;
    color: var(--muted);
}

.fueling-daily-total {
    display: inline-block;
    min-width: 72px;
    padding: 5px 7px;
    border: 1px solid transparent;
    border-radius: 7px;
    text-align: center;
    white-space: nowrap;
}

.fueling-daily-total.is-zero {
    border-color: #e0b000;
    background: #fff9df;
    font-weight: 700;
}

.fueling-total-row th {
    background: rgb(0 61 120 / 0.12);
    border-top: 2px solid rgb(0 61 120 / 0.38);
    color: var(--primary);
    font-weight: 800;
    white-space: nowrap;
}

.fueling-modal-card {
    width: min(460px, 100%);
}

.fueling-modal-card .modal-header p {
    margin: 4px 0 0;
    color: var(--muted);
}

.fueling-table-modal-card {
    width: min(1100px, calc(100vw - 32px));
    max-height: min(80vh, 760px);
    overflow: hidden;
}

.fueling-table-modal-scroll {
    max-width: 100%;
    max-height: calc(min(80vh, 760px) - 92px);
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
}

@media (max-width: 980px) {
    .fueling-car-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .fueling-stage-panel .panel-header {
        align-items: stretch;
    }

    .fueling-stage-selector select {
        min-width: 0;
        width: 100%;
    }

    .fueling-car-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fueling-car-card {
        min-height: 92px;
        padding: 12px;
    }

    .fueling-card-desktop-identity,
    .fueling-car-card:not(.is-reserve) > strong,
    .fueling-car-card:not(.is-reserve) .fueling-card-pilot {
        display: none;
    }

    .fueling-card-mobile-identity,
    .fueling-card-mobile-filler {
        display: block;
    }

    .fueling-card-mobile-identity {
        font-size: 0.96rem;
        line-height: 1.2;
        font-weight: 800;
        color: var(--primary);
    }

    .fueling-card-mobile-filler {
        font-size: 0.82rem;
        font-weight: 700;
        color: var(--muted);
    }

    .fueling-desktop-table-panel {
        display: none;
    }

    .fueling-mobile-table-actions {
        display: grid;
        gap: 10px;
    }

    .fueling-mobile-table-actions .ghost-button {
        justify-content: center;
        min-height: 48px;
        text-align: center;
    }

    .fueling-table-modal-card {
        width: calc(100vw - 24px);
        max-height: calc(100vh - 40px);
        padding: 14px;
    }

    .fueling-table-modal-card .modal-header {
        align-items: flex-start;
    }

    .fueling-table-modal-card .modal-header h3 {
        font-size: 1rem;
    }

    .fueling-table-modal-card .modal-header p {
        font-size: 0.78rem;
    }

    .fueling-table-modal-scroll {
        max-height: calc(100vh - 156px);
    }

    .fueling-table-modal-scroll .data-table {
        min-width: max-content;
    }
}

@media (min-width: 1100px) {
    /* Keep page panels and the footer aligned with the full-width top bar. */
    .page-content,
    .app-footer {
        width: calc(100% - 16px);
        max-width: none;
    }

    body[data-page="home"] .app-shell {
        display: flex;
        flex-direction: column;
        height: 100vh;
        overflow: hidden;
    }

    body[data-page="home"] .topbar,
    body[data-page="home"] .app-footer {
        flex: 0 0 auto;
    }

    body[data-page="home"] .page-content {
        display: flex;
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
    }

    body[data-page="home"] #home-layout {
        grid-template-columns: minmax(360px, 1fr) minmax(0, 2fr) !important;
        gap: 20px !important;
        min-height: 0;
        height: 100%;
        flex: 1 1 auto;
        align-items: stretch !important;
    }

    body[data-page="home"] .home-menu-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body[data-page="home"] #home-schedule-card,
    body[data-page="home"] #home-menu-card {
        min-height: 0;
        height: 100%;
        align-self: stretch !important;
    }

    body[data-page="home"] #home-schedule-card {
        grid-template-rows: auto minmax(0, 1fr);
    }

    body[data-page="home"] .home-schedule-body,
    body[data-page="home"] .home-schedule-list {
        min-height: 0;
        height: 100%;
        max-height: none;
    }

    body[data-page="home"] .home-schedule-list {
        grid-auto-rows: minmax(42px, 1fr);
        gap: 8px;
    }

    body[data-page="home"] .home-schedule-list .dashboard-schedule-row {
        grid-template-columns: 62px minmax(0, 1fr) 118px;
        min-height: 42px;
        padding: 8px 10px;
        font-size: 0.98rem;
    }

    body[data-page="home"] #home-menu-card {
        display: flex;
        flex-direction: column;
    }

    body[data-page="home"] .home-menu-grid {
        flex: 1 1 auto;
        grid-auto-rows: minmax(0, 1fr);
        gap: 14px;
    }

    body[data-page="home"] .home-menu-button {
        min-height: 0;
        padding: 0 22px;
        font-size: 1.12rem;
    }
}

/* Desktop uses the same visual density as a 75% browser zoom while retaining
   the full viewport width for responsive layouts. */
@media (min-width: 800px) {
    body {
        min-height: 133.333333vh;
        zoom: 0.75;
    }

    /* The Home footer follows the content instead of occupying a fixed slot. */
    body[data-page="home"] .app-shell {
        display: block;
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }

    body[data-page="home"] .page-content {
        display: block;
        min-height: auto;
        overflow: visible;
    }

    body[data-page="home"] #home-layout {
        grid-template-columns: minmax(300px, 1fr) minmax(0, 2fr) !important;
        gap: 18px !important;
        height: auto;
        align-items: start !important;
    }

    body[data-page="home"] #home-schedule-card,
    body[data-page="home"] #home-menu-card {
        height: auto;
        min-height: 0;
    }

    body[data-page="home"] .home-menu-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .dashboard-layout {
        --dashboard-half-height: calc(45vh - 81px);
        height: auto;
        min-height: calc(90vh - 162px);
    }

    .dashboard-grid {
        grid-template-rows: var(--dashboard-half-height) minmax(var(--dashboard-half-height), max-content);
        height: auto;
        align-items: start;
    }

    .dashboard-matrix-panel,
    .dashboard-schedule-panel,
    .dashboard-checklists-panel {
        min-height: 0;
        height: var(--dashboard-half-height);
    }

    .dashboard-open-panel {
        min-height: var(--dashboard-half-height);
        height: auto;
    }

    .dashboard-cars-panel {
        min-height: var(--dashboard-half-height);
        height: var(--dashboard-half-height);
    }

    .dashboard-cars-panel .dashboard-panel-toggle,
    .dashboard-cars-panel .dashboard-panel-body-fill {
        height: 100%;
    }

    .dashboard-cars-panel .dashboard-cards-grid {
        flex: 1 1 auto;
        height: 100%;
        grid-auto-rows: minmax(0, 1fr);
        align-content: stretch;
    }

    .dashboard-cars-panel .dashboard-car-card {
        height: 100%;
    }

    .dashboard-fullscreen-active .dashboard-layout,
    html:fullscreen .dashboard-layout,
    html:-webkit-full-screen .dashboard-layout {
        --dashboard-half-height: calc(45vh - 7px);
        min-height: calc(90vh - 14px);
    }

    .dashboard-fullscreen-active .dashboard-grid,
    html:fullscreen .dashboard-grid,
    html:-webkit-full-screen .dashboard-grid {
        grid-template-rows: var(--dashboard-half-height) minmax(var(--dashboard-half-height), max-content);
        height: auto;
    }

    .dashboard-fullscreen-active .dashboard-matrix-panel,
    .dashboard-fullscreen-active .dashboard-schedule-panel,
    .dashboard-fullscreen-active .dashboard-checklists-panel,
    html:fullscreen .dashboard-matrix-panel,
    html:fullscreen .dashboard-schedule-panel,
    html:fullscreen .dashboard-checklists-panel,
    html:-webkit-full-screen .dashboard-matrix-panel,
    html:-webkit-full-screen .dashboard-schedule-panel,
    html:-webkit-full-screen .dashboard-checklists-panel {
        min-height: 0;
        height: var(--dashboard-half-height);
    }
}

/* Final dashboard layout override. */
@media (min-width: 800px) {
    body[data-page="dashboard"] .dashboard-layout { --dashboard-row-height: max(420px, calc((133.333vh - 210px) / 2)); width: 100%; }
    body[data-page="dashboard"] .dashboard-grid {
        display: grid;
        grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 2fr);
        grid-template-areas: "matrix schedule checklist" "open cars cars";
        grid-template-rows: var(--dashboard-row-height) minmax(var(--dashboard-row-height), max-content);
        gap: 16px;
        height: auto;
        align-items: start;
    }
    body[data-page="dashboard"] .dashboard-grid:has(.dashboard-open-panel.is-empty) { grid-template-areas: "matrix schedule checklist" "open cars cars"; }
    body[data-page="dashboard"] .dashboard-grid > .dashboard-matrix-panel,
    body[data-page="dashboard"] .dashboard-grid > .dashboard-schedule-panel,
    body[data-page="dashboard"] .dashboard-grid > .dashboard-checklists-panel,
    body[data-page="dashboard"] .dashboard-grid > .dashboard-cars-panel {
        display: block;
        height: var(--dashboard-row-height);
        min-height: var(--dashboard-row-height);
        padding: 14px;
        overflow: hidden;
    }
    body[data-page="dashboard"] .dashboard-grid > .dashboard-open-panel { display: block; height: auto; min-height: var(--dashboard-row-height); padding: 14px; overflow: visible; }
    body[data-page="dashboard"] .dashboard-open-panel.is-empty { display: block; }
    body[data-page="dashboard"] .dashboard-panel-toggle { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100%; min-height: 0; }
    body[data-page="dashboard"] .dashboard-open-panel .dashboard-panel-toggle { display: block; height: auto; }
    body[data-page="dashboard"] .dashboard-panel-summary { pointer-events: none; min-height: 28px; margin-bottom: 8px; }
    body[data-page="dashboard"] .dashboard-panel-body-fill { min-height: 0; overflow: hidden; }
    body[data-page="dashboard"] .dashboard-schedule-list,
    body[data-page="dashboard"] .dashboard-checklist-groups { height: 100%; overflow-y: auto; padding-right: 4px; }
    body[data-page="dashboard"] .dashboard-matrix-panel .dashboard-panel-body-fill,
    body[data-page="dashboard"] .dashboard-cars-panel .dashboard-panel-body-fill { height: 100%; }
    body[data-page="dashboard"] .dashboard-matrix-grid { height: 100%; }
    body[data-page="dashboard"] .dashboard-open-panel .dashboard-panel-body-fill,
    body[data-page="dashboard"] .dashboard-open-incident-list { height: auto; overflow: visible; }
    body[data-page="dashboard"] .dashboard-open-incident-list { display: grid; gap: 8px; }
    body[data-page="dashboard"] .dashboard-cars-panel .dashboard-cards-grid {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        grid-template-rows: repeat(4, minmax(0, 1fr));
        grid-auto-rows: 0;
        height: 100%;
        gap: 7px;
        overflow: hidden;
    }
    body[data-page="dashboard"] .dashboard-cars-panel .dashboard-car-card { min-height: 0; height: 100%; overflow: hidden; }
    body[data-page="dashboard"] .dashboard-panel-summary h3 { font-size: 1.08rem; }
    body[data-page="dashboard"] .dashboard-matrix-grid-header .dashboard-matrix-grid-cell { font-size: 0.86rem; }
    body[data-page="dashboard"] .dashboard-matrix-status-cell { font-size: 1rem; }
    body[data-page="dashboard"] .dashboard-matrix-count,
    body[data-page="dashboard"] .dashboard-matrix-total { font-size: 0.96rem; }
    body[data-page="dashboard"] .dashboard-schedule-row { font-size: 0.9rem; min-height: 34px; }
    body[data-page="dashboard"] .dashboard-checklist-group h4 { font-size: 0.88rem; }
    body[data-page="dashboard"] .dashboard-checklist-row-header strong { font-size: 0.78rem; }
    body[data-page="dashboard"] .dashboard-cars-panel .dashboard-car-card strong { font-size: 0.82rem; line-height: 1.12; }
    body[data-page="dashboard"] .dashboard-cars-panel .dashboard-car-card span { font-size: 0.82rem; }
    body[data-page="dashboard"] .dashboard-open-incident { padding: 10px 12px; }
}

/* Keep the dashboard readable under the app-wide 75% desktop zoom. */
@media (min-width: 800px) {
    body[data-page="dashboard"] .dashboard-grid {
        grid-template-rows: 520px minmax(520px, max-content) !important;
    }

    body[data-page="dashboard"] .dashboard-grid > .dashboard-matrix-panel,
    body[data-page="dashboard"] .dashboard-grid > .dashboard-schedule-panel,
    body[data-page="dashboard"] .dashboard-grid > .dashboard-checklists-panel,
    body[data-page="dashboard"] .dashboard-grid > .dashboard-cars-panel {
        height: 520px !important;
        min-height: 520px !important;
    }

    body[data-page="dashboard"] .dashboard-grid > .dashboard-open-panel {
        min-height: 520px !important;
    }
}

/* Dashboard V2 is intentionally isolated from the legacy dashboard layout. */
@media (min-width: 800px) {
    body[data-page="dashboard"] .dash-v2-layout {
        width: 100%;
    }

    body[data-page="dashboard"] .dash-v2-grid {
        display: grid;
        grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 2fr);
        grid-template-areas:
            "matrix schedule checklists"
            "open cars cars";
        grid-template-rows: 360px minmax(360px, max-content);
        gap: 18px;
        align-items: start;
    }

    body[data-page="dashboard"] .dash-v2-card {
        display: block;
        min-width: 0;
        padding: 16px;
        overflow: hidden;
    }

    body[data-page="dashboard"] .dash-v2-matrix {
        grid-area: matrix;
        height: 360px;
        --dashboard-matrix-font-scale: 1;
        --dashboard-matrix-row-scale: 1;
        --dashboard-matrix-header-scale: 1;
        --dashboard-matrix-spacer-scale: 1;
    }
    body[data-page="dashboard"] .dash-v2-schedule {
        grid-area: schedule;
        height: 360px;
        --dashboard-schedule-row-scale: 1;
        --dashboard-schedule-gap: 6px;
    }
    body[data-page="dashboard"] .dash-v2-checklists { grid-area: checklists; height: 360px; }
    body[data-page="dashboard"] .dash-v2-open { grid-area: open; min-height: 360px; overflow: visible; }
    body[data-page="dashboard"] .dash-v2-cars { grid-area: cars; height: 360px; }

    body[data-page="dashboard"] .dash-v2-toggle {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        width: 100%;
        height: 100%;
        min-height: 0;
    }

    body[data-page="dashboard"] .dash-v2-open .dash-v2-toggle { display: block; height: auto; }
    body[data-page="dashboard"] .dash-v2-summary { pointer-events: none; margin-bottom: 10px; }
    body[data-page="dashboard"] .dash-v2-summary::-webkit-details-marker { display: none; }
    body[data-page="dashboard"] .dash-v2-summary h3 { margin: 0; font-size: 1.12rem; }
    body[data-page="dashboard"] .dash-v2-body { min-height: 0; overflow: hidden; }
    body[data-page="dashboard"] .dash-v2-toggle .dash-v2-body { height: 100%; }
    body[data-page="dashboard"] .dash-v2-open .dash-v2-body { height: auto; overflow: visible; }

    body[data-page="dashboard"] .dash-v2-schedule .dashboard-schedule-list,
    body[data-page="dashboard"] .dash-v2-checklists .dashboard-checklist-groups {
        height: 100%;
        overflow-y: auto;
        padding-right: 5px;
    }

    body[data-page="dashboard"] .dash-v2-matrix .dashboard-matrix-grid { height: 100%; }
    body[data-page="dashboard"] .dash-v2-matrix .dashboard-matrix-grid-cell { font-size: 0.9rem; }
    body[data-page="dashboard"] .dash-v2-matrix .dashboard-matrix-status-cell { font-size: 1rem; }
    body[data-page="dashboard"] .dash-v2-matrix .dashboard-matrix-count,
    body[data-page="dashboard"] .dash-v2-matrix .dashboard-matrix-total { font-size: 1rem; }
    body[data-page="dashboard"] .dash-v2-schedule .dashboard-schedule-row { min-height: 36px; font-size: 0.92rem; }
    body[data-page="dashboard"] .dash-v2-checklists .dashboard-checklist-row { padding: 8px; }
    body[data-page="dashboard"] .dash-v2-checklists .dashboard-checklist-row-header strong { font-size: 0.8rem; }

    body[data-page="dashboard"] .dash-v2-open .dashboard-open-incident-list { overflow: visible; }
    body[data-page="dashboard"] .dash-v2-open .dashboard-open-incident { padding: 11px 13px; }

    body[data-page="dashboard"] .dash-v2-cars .dashboard-cards-grid {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        grid-template-rows: repeat(4, minmax(0, 1fr));
        grid-auto-rows: 0;
        height: 100%;
        overflow: hidden;
        gap: 8px;
    }

    body[data-page="dashboard"] .dash-v2-cars .dashboard-car-card {
        display: block;
        position: relative;
        min-height: 0;
        height: 100%;
        padding-bottom: 22px;
    }
    body[data-page="dashboard"] .dash-v2-cars .dashboard-car-card strong {
        display: -webkit-box;
        min-height: 0;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        height: 2.2em;
        font-size: 0.84rem;
        line-height: 1.1;
    }
    body[data-page="dashboard"] .dash-v2-cars .dashboard-car-card span {
        position: absolute;
        right: 6px;
        bottom: 4px;
        left: auto;
        text-align: right;
        font-size: 0.9rem;
        font-weight: 700;
    }
}