@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

:root {
    --cm-font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --cm-font-family: var(--cm-font-sans);
    --cm-type-page-title-size: 24px;
    --cm-type-page-title-weight: 700;
    --cm-type-page-title-line: 32px;
    --cm-type-page-subtitle-size: 14px;
    --cm-type-page-subtitle-weight: 400;
    --cm-type-page-subtitle-line: 20px;
    --cm-type-entity-title-size: 28px;
    --cm-type-entity-title-weight: 700;
    --cm-type-entity-title-line: 36px;
    --cm-type-section-title-size: 16px;
    --cm-type-section-title-weight: 700;
    --cm-type-section-title-line: 24px;
    --cm-type-card-title-size: 16px;
    --cm-type-card-title-weight: 700;
    --cm-type-card-title-line: 22px;
    --cm-type-body-size: 14px;
    --cm-type-body-weight: 400;
    --cm-type-body-line: 20px;
    --cm-type-secondary-size: 13px;
    --cm-type-secondary-weight: 500;
    --cm-type-secondary-line: 18px;
    --cm-type-small-size: 12px;
    --cm-type-small-weight: 500;
    --cm-type-small-line: 16px;
    --cm-type-table-header-size: 13px;
    --cm-type-table-header-weight: 600;
    --cm-type-table-header-line: 18px;
    --cm-type-form-label-size: 13px;
    --cm-type-form-label-weight: 600;
    --cm-type-form-label-line: 18px;
    --cm-type-button-size: 14px;
    --cm-type-button-weight: 600;
    --cm-type-button-line: 20px;
    --cm-type-metric-value-size: 26px;
    --cm-type-metric-value-weight: 700;
    --cm-type-metric-value-line: 32px;
    --cm-type-metric-label-size: 14px;
    --cm-type-metric-label-weight: 500;
    --cm-type-metric-label-line: 20px;
    --cm-bg: #f6f7f9;
    --cm-surface: #ffffff;
    --cm-text: #202838;
    --cm-muted: #626d7e;
    --cm-soft-muted: #a1a1aa;
    --cm-border: #e5e7eb;
    --cm-border-soft: oklab(0.92 0.001124 -0.003839 / 0.5);
    --cm-primary: #1d4ed8;
    --cm-primary-hover: #1e40af;
    --cm-radius: 8.4px;
    --cm-card-radius: 10px;
    --cm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --cm-shadow-card: 0 1px 2px rgba(20, 32, 54, 0.035);
    --bs-body-font-family: var(--cm-font-sans);
    --bs-body-font-size: 14px;
    --bs-body-line-height: 1.42857143;
    --bs-body-color: var(--cm-text);
    --bs-border-color: var(--cm-border);
    --bs-primary: var(--cm-primary);
}

/* Team calendar */
.dashboard-calendar-panel {
    min-height: 560px;
}

.dashboard-calendar-actions button {
    display: inline-flex;
    align-items: center;
    gap: var(--cm-component-action-gap, 6px);
    min-height: var(--cm-component-action-height, 36px);
    padding: 0 var(--cm-component-action-padding-x, 12px);
    border: 1px solid var(--cm-border);
    border-radius: var(--cm-component-action-radius, 8px);
    background: #ffffff;
    color: var(--cm-text);
    font-size: var(--cm-type-button-size);
    font-weight: var(--cm-type-button-weight);
    line-height: var(--cm-type-button-line);
    box-shadow: none;
    white-space: nowrap;
}

.dashboard-calendar-actions button.is-active {
    border-color: #1d4ed8;
    background: #eff6ff;
    color: #1d4ed8;
}

.dashboard-calendar-actions button[data-team-calendar-mode="week"]::before {
    content: "\f0e17";
    display: inline-block;
    font: normal normal normal 16px/1 "Material Design Icons";
}

.dashboard-calendar-actions button[data-team-calendar-mode="week"] i {
    display: none;
}

.dashboard-calendar-title a {
    display: inline-flex;
    align-items: center;
    gap: var(--cm-component-action-gap, 6px);
    min-height: var(--cm-component-action-height, 36px);
    padding: 0 var(--cm-component-action-padding-x, 12px);
    border: 1px solid #1d4ed8;
    border-radius: var(--cm-component-action-radius, 8px);
    background: #1d4ed8;
    color: #ffffff;
    font-size: var(--cm-type-button-size);
    font-weight: var(--cm-type-button-weight);
    line-height: var(--cm-type-button-line);
    text-decoration: none;
    white-space: nowrap;
}

.dashboard-calendar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin: 0 0 12px;
    color: #64748b;
    font-size: var(--cm-type-small-size);
    font-weight: 700;
    line-height: var(--cm-type-small-line);
}

.dashboard-calendar-legend span,
.dashboard-calendar-upcoming-row > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.dashboard-calendar-event-dot {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #64748b;
}

.dashboard-calendar-event-dot.is-meeting,
.dashboard-calendar-event.is-meeting {
    --team-calendar-event-color: #2563eb;
    --team-calendar-event-bg: #eff6ff;
}

.dashboard-calendar-event-dot.is-training,
.dashboard-calendar-event.is-training {
    --team-calendar-event-color: #059669;
    --team-calendar-event-bg: #ecfdf5;
}

.dashboard-calendar-event-dot.is-reminder,
.dashboard-calendar-event.is-reminder {
    --team-calendar-event-color: #7c3aed;
    --team-calendar-event-bg: #f5f3ff;
}

.dashboard-calendar-event-dot.is-vacation,
.dashboard-calendar-event.is-vacation {
    --team-calendar-event-color: #db2777;
    --team-calendar-event-bg: #fdf2f8;
}

.dashboard-calendar-event-dot.is-operational,
.dashboard-calendar-event.is-operational {
    --team-calendar-event-color: #d97706;
    --team-calendar-event-bg: #fffbeb;
}

.dashboard-calendar-event-dot.is-other,
.dashboard-calendar-event.is-other {
    --team-calendar-event-color: #475569;
    --team-calendar-event-bg: #f8fafc;
}

.dashboard-calendar-event-dot.is-meeting,
.dashboard-calendar-event-dot.is-training,
.dashboard-calendar-event-dot.is-reminder,
.dashboard-calendar-event-dot.is-vacation,
.dashboard-calendar-event-dot.is-operational,
.dashboard-calendar-event-dot.is-other {
    background: var(--team-calendar-event-color);
}

.dashboard-calendar-grid {
    align-items: stretch;
}

.dashboard-calendar-cell {
    align-items: flex-start;
    justify-content: flex-start;
}

.dashboard-calendar-weekday {
    align-items: center;
    justify-content: center;
    text-align: center;
}

.dashboard-calendar-grid > .dashboard-calendar-weekday {
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    text-align: center !important;
}

.dashboard-calendar-cell {
    min-height: 86px;
    position: relative;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
    overflow: hidden;
}

.dashboard-calendar-day-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    color: #111827;
    font-size: var(--cm-type-small-size);
    font-weight: 700;
    line-height: var(--cm-type-small-line);
    text-decoration: none;
}

.dashboard-calendar-day-number:hover {
    background: #eff6ff;
    color: #1d4ed8;
}

.dashboard-calendar-cell.is-today .dashboard-calendar-day-number {
    background: #1d4ed8;
    color: #ffffff;
}

.dashboard-calendar-event {
    display: block;
    width: 100%;
    min-height: 22px;
    padding: 3px 6px;
    border: 1px solid var(--team-calendar-event-color);
    border-radius: 5px;
    background: var(--team-calendar-event-color);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    overflow: hidden;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-calendar-event strong {
    margin-right: 3px;
    color: inherit;
    font-weight: 700;
}

.dashboard-calendar-event:hover {
    color: #ffffff;
    filter: brightness(0.95);
}

.dashboard-calendar-more {
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
}

.dashboard-calendar-upcoming-list {
    gap: 8px;
}

.dashboard-calendar-upcoming-row {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
}

.dashboard-calendar-mode-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 360px;
    padding: 10px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
}

.dashboard-calendar-mode-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    color: #111827;
    font-size: var(--cm-type-secondary-size);
    font-weight: 600;
    line-height: var(--cm-type-secondary-line);
    text-decoration: none;
}

.dashboard-calendar-mode-row span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.dashboard-calendar-mode-row small {
    flex: 0 0 auto;
    color: #64748b;
    font-size: var(--cm-type-small-size);
    font-weight: var(--cm-type-small-weight);
    line-height: var(--cm-type-small-line);
}

.team-calendar-event-form,
.team-calendar-event-detail {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    min-width: 0;
}

.team-calendar-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
    margin: 0;
}

.team-calendar-label {
    color: #111827;
    font-size: var(--cm-type-form-label-size);
    font-weight: var(--cm-type-form-label-weight);
    line-height: var(--cm-type-form-label-line);
}

.team-calendar-label strong {
    color: #ef4444;
}

.team-calendar-type-options,
.team-calendar-role-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.team-calendar-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.team-calendar-choice span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #ffffff;
    color: #6b7280;
    font-size: var(--cm-type-secondary-size);
    font-weight: var(--cm-type-secondary-weight);
    line-height: var(--cm-type-secondary-line);
}

.team-calendar-choice input:checked + span {
    border-color: #1d4ed8;
    background: #eff6ff;
    color: #1d4ed8;
}

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

.team-calendar-event-form .form-control,
.team-calendar-event-form .form-select {
    min-height: 36px;
    border-color: #e5e7eb;
    border-radius: 8px;
    color: #111827;
    font-size: var(--cm-type-body-size);
    line-height: var(--cm-type-body-line);
}

.team-calendar-event-form textarea.form-control {
    min-height: 64px;
    resize: vertical;
}

.team-calendar-repeat-field {
    max-width: 150px;
}

.team-calendar-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #374151;
    font-size: var(--cm-type-body-size);
    font-weight: var(--cm-type-body-weight);
    line-height: var(--cm-type-body-line);
}

.team-calendar-check input {
    width: 16px;
    height: 16px;
}

.team-calendar-empty-roles {
    color: #6b7280;
    font-size: var(--cm-type-secondary-size);
    font-weight: var(--cm-type-secondary-weight);
    line-height: var(--cm-type-secondary-line);
}

.team-calendar-file-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--cm-component-action-gap, 6px);
    width: fit-content;
    min-height: var(--cm-component-action-height, 36px);
    padding: 0 var(--cm-component-action-padding-x, 12px);
    border: 1px solid #e5e7eb;
    border-radius: var(--cm-component-action-radius, 8px);
    background: #ffffff;
    color: #111827;
    font-size: var(--cm-type-button-size);
    font-weight: var(--cm-type-button-weight);
    line-height: var(--cm-type-button-line);
    box-shadow: none;
    cursor: pointer;
}

.team-calendar-file-button input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.team-calendar-reminder {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #ffffff;
}

.team-calendar-reminder > span {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.team-calendar-reminder i {
    color: #64748b;
    font-size: 18px;
}

.team-calendar-reminder strong,
.team-calendar-reminder small {
    display: block;
}

.team-calendar-reminder strong {
    color: #111827;
    font-size: var(--cm-type-body-size);
    font-weight: 600;
    line-height: var(--cm-type-body-line);
}

.team-calendar-reminder small {
    color: #6b7280;
    font-size: var(--cm-type-small-size);
    font-weight: var(--cm-type-small-weight);
    line-height: var(--cm-type-small-line);
}

.team-calendar-reminder input {
    width: 34px;
    height: 20px;
    flex: 0 0 auto;
    appearance: none;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #e5e7eb;
    box-shadow: inset 0 0 0 2px #ffffff;
    cursor: pointer;
}

.team-calendar-reminder input:checked {
    background: #1d4ed8;
}

.team-calendar-event-detail h2 {
    margin: 0;
    color: #111827;
    font-size: var(--cm-type-section-title-size);
    font-weight: var(--cm-type-section-title-weight);
    line-height: var(--cm-type-section-title-line);
}

.team-calendar-detail-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #64748b;
    font-size: var(--cm-type-small-size);
    font-weight: 700;
    line-height: var(--cm-type-small-line);
}

.team-calendar-event-detail dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

.team-calendar-event-detail dl div,
.team-calendar-detail-section {
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
}

.team-calendar-event-detail dt,
.team-calendar-detail-section h3 {
    margin: 0 0 4px;
    color: #64748b;
    font-size: var(--cm-type-small-size);
    font-weight: 700;
    line-height: var(--cm-type-small-line);
    text-transform: uppercase;
}

.team-calendar-event-detail dd,
.team-calendar-detail-section p {
    margin: 0;
    color: #111827;
    font-size: var(--cm-type-body-size);
    font-weight: 500;
    line-height: var(--cm-type-body-line);
}

.team-calendar-attachments {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.team-calendar-attachments a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #1d4ed8;
    font-size: var(--cm-type-secondary-size);
    font-weight: 600;
    line-height: var(--cm-type-secondary-line);
    text-decoration: none;
}

.team-calendar-detail-meta {
    margin: 0;
    color: #64748b;
    font-size: var(--cm-type-small-size);
    font-weight: var(--cm-type-small-weight);
    line-height: var(--cm-type-small-line);
}

.team-calendar-detail-actions {
    display: flex;
    justify-content: flex-end;
    margin: 2px 0 0;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
}

.team-calendar-delete-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cm-component-action-gap, 6px);
    min-height: var(--cm-component-action-height, 36px);
    padding: 0 var(--cm-component-action-padding-x, 12px);
    border: 1px solid #fecaca;
    border-radius: var(--cm-component-action-radius, 8px);
    background: #ffffff;
    color: #dc2626;
    font-size: var(--cm-type-button-size);
    font-weight: var(--cm-type-button-weight);
    line-height: var(--cm-type-button-line);
    box-shadow: none;
}

.team-calendar-delete-button:hover,
.team-calendar-delete-button:focus {
    border-color: #dc2626;
    background: #fef2f2;
    color: #b91c1c;
}

@media (max-width: 479.98px) {
    .dashboard-calendar-cell {
        min-height: 68px;
        padding: 6px;
    }

    .dashboard-calendar-event {
        font-size: 10px;
    }

    .team-calendar-grid-fields,
    .team-calendar-event-detail dl {
        grid-template-columns: 1fr;
    }

    .team-calendar-repeat-field {
        max-width: none;
    }
}

html {
    font-family: var(--cm-font-sans);
    text-size-adjust: 100%;
}

body,
.app-body {
    background: var(--cm-bg);
    color: var(--cm-text);
    font-family: var(--cm-font-sans) !important;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body,
button,
input,
select,
textarea,
.btn,
.form-control,
.form-select,
.dropdown-menu,
.select2-container,
.select2-results__option,
.flatpickr-calendar,
.modal,
.table,
.dataTable {
    font-family: var(--cm-font-sans) !important;
}

h1,
.h1 {
    color: var(--cm-text);
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    letter-spacing: 0;
}

h2,
.h2 {
    color: var(--cm-text);
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: 0;
}

h3,
.h3,
.card-title {
    color: var(--cm-text);
    font-size: 18px;
    font-weight: 600;
    line-height: 26px;
    letter-spacing: 0;
}

h4,
.h4,
h5,
.h5,
h6,
.h6 {
    color: var(--cm-text);
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: 0;
}

p,
label,
.form-label,
.text-muted,
.small,
small {
    letter-spacing: 0;
}

.text-muted,
.form-text,
small,
.small {
    color: var(--cm-muted) !important;
}

.btn {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 10px;
    border-radius: var(--cm-radius);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0;
    box-shadow: none;
}

.btn-sm {
    min-height: 30px;
    padding: 0 9px;
    font-size: 13px;
    line-height: 18px;
}

.btn-lg {
    min-height: 40px;
    padding: 0 14px;
    font-size: 14px;
    line-height: 20px;
}

.btn-primary {
    border-color: var(--cm-primary) !important;
    background: var(--cm-primary) !important;
    color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus {
    border-color: var(--cm-primary-hover) !important;
    background: var(--cm-primary-hover) !important;
}

.btn-outline-primary,
.btn-light,
.btn-white,
.btn-outline-secondary {
    border-color: var(--cm-border) !important;
    background: #ffffff !important;
    color: var(--cm-text) !important;
}

.form-control,
.form-select,
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
    min-height: 36px;
    border: 1px solid var(--cm-border) !important;
    border-radius: var(--cm-radius) !important;
    background-color: #ffffff;
    color: var(--cm-text);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0;
    box-shadow: var(--cm-shadow-sm);
}

.form-control,
.form-select {
    padding: 7px 12px;
}

.form-control::placeholder,
.select2-selection__placeholder {
    color: var(--cm-soft-muted) !important;
}

.app-global-search .app-global-search-input {
    height: 36px;
    padding-left: 38px;
    border-radius: 10.4px !important;
    background: oklch(0.967 0.001 286.375 / 0.5);
    box-shadow: none;
}

.form-label,
label {
    color: var(--cm-muted);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}

.card,
.modal-content,
.dropdown-menu {
    border-color: var(--cm-border-soft);
    border-radius: var(--cm-card-radius);
    box-shadow: var(--cm-shadow-card);
}

.app-breadcrumb {
    margin: 0 0 24px;
    padding: 0;
}

.app-breadcrumb-row {
    min-height: 40px;
    gap: 16px;
}

.app-page-title,
.page-title {
    margin: 0;
    color: var(--cm-text);
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    letter-spacing: 0;
}

.app-breadcrumb-actions {
    align-items: center;
    gap: 8px;
}

.app-breadcrumb-actions .btn,
.page-title-right .btn {
    height: 32px;
    min-height: 32px;
    border-radius: var(--cm-radius);
}

.app-create-button,
.btn-success.app-create-button,
.btn-success {
    border-color: var(--cm-primary) !important;
    background: var(--cm-primary) !important;
    color: #ffffff !important;
}

.app-export-button,
.btn-secondary,
.btn-light {
    border-color: var(--cm-border) !important;
    background: #ffffff !important;
    color: var(--cm-text) !important;
}

.app-search-card {
    margin-bottom: 24px;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.app-search-card .card-body {
    padding: 0;
}

.app-search-form,
.app-filters {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(176px, 1fr));
    align-items: center;
    gap: 8px !important;
}

.app-search-form > div,
.app-filters > div {
    width: 100% !important;
    min-width: 0;
    margin: 0 !important;
}

.app-search-form .form-control,
.app-search-form .form-select,
.app-search-form .select2-container,
.app-filters .form-control,
.app-filters .form-select,
.app-filters .select2-container {
    width: 100% !important;
}

.app-search-form .btn,
.app-filters .btn,
.app-search-form button[type="submit"],
.app-filters button[type="submit"],
.app-search-card .app-search-button,
.app-search-card .btn-primary.app-search-button {
    height: 36px;
    min-height: 36px;
    border: 1px solid var(--cm-border);
    border-radius: var(--cm-radius);
    background: #ffffff !important;
    color: var(--cm-text) !important;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    box-shadow: var(--cm-shadow-sm);
}

.app-search-card .app-search-button svg,
.app-search-card .app-search-button i {
    color: var(--cm-text) !important;
    stroke: currentColor;
}

.select2-container--default .select2-selection--single {
    height: 36px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 12px;
    padding-right: 32px;
    color: var(--cm-text);
    font-size: 14px;
    line-height: 34px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 34px;
    right: 6px;
}

.table-responsive,
.dataTables_wrapper,
.cm-table-card {
    border: 1px solid var(--cm-border-soft);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: var(--cm-shadow-card);
}

.table-responsive {
    overflow: auto;
}

.table-sticky-wrapper {
    max-height: none;
}

.table,
table.dataTable,
.app-data-table {
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--cm-text);
    font-size: 14px;
    line-height: 20px;
}

.table > :not(caption) > * > *,
table.dataTable > thead > tr > th,
.dataTable > tbody > tr > td,
.app-data-table > :not(caption) > * > * {
    padding: 14px 16px;
    border-bottom-color: var(--cm-border-soft);
}

.table thead th,
.table > thead > tr > th,
table.dataTable > thead > tr > th,
.app-data-table > thead > tr > th,
.table-light > tr > th,
thead.table-light > tr > th {
    height: 50px;
    border-bottom: 1px solid var(--cm-border);
    background: #ffffff !important;
    color: var(--cm-muted);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0;
    text-transform: none !important;
}

.table tbody td,
.table > tbody > tr > td,
table.dataTable > tbody > tr > td,
.app-data-table > tbody > tr > td {
    height: 72px;
    color: var(--cm-text);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.table tbody tr:hover > *,
table.dataTable > tbody > tr:hover > *,
.app-data-table > tbody > tr:hover > * {
    background: oklch(0.967 0.001 286.375 / 0.45);
}

.table-bordered,
.table-bordered > :not(caption) > * {
    border-width: 0;
}

.table-sm > :not(caption) > * > * {
    padding: 12px 14px;
}

.cm-code-chip,
.badge-soft,
.table .badge {
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    border-radius: 999px;
    background: #f4f4f5;
    color: #71717f;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
}

.cm-code-chip {
    max-width: 140px;
    min-height: 28px;
    overflow: hidden;
    border-radius: 5px;
    color: #3f3f46;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cm-status-active,
.badge.bg-success,
.badge.badge-success {
    border: 1px solid #a7f3d0;
    background: #dffbf0 !important;
    color: #059669 !important;
}

.cm-status-danger,
.badge.bg-danger,
.badge.badge-danger {
    border: 1px solid #fecaca;
    background: #fee2e2 !important;
    color: #ef4444 !important;
}

.cm-status-muted,
.badge.bg-secondary,
.badge.badge-secondary {
    border: 1px solid #d4d4d8;
    background: #f4f4f5 !important;
    color: #71717f !important;
}

.badge.bg-info,
.badge.badge-info,
.badge.bg-primary,
.badge.badge-primary,
.badge.bg-soft-info,
.badge.bg-soft-primary {
    border: 1px solid #bfdbfe;
    background: #dbeafe !important;
    color: #2563eb !important;
}

.badge.bg-warning,
.badge.badge-warning,
.badge.bg-soft-warning {
    border: 1px solid #fde68a;
    background: #fef3c7 !important;
    color: #d97706 !important;
}

.badge.bg-soft-success {
    border: 1px solid #a7f3d0;
    background: #dffbf0 !important;
    color: #059669 !important;
}

.badge.bg-soft-danger {
    border: 1px solid #fecaca;
    background: #fee2e2 !important;
    color: #ef4444 !important;
}

.cm-table-actions,
.table-actions,
.action-buttons,
.app-inline-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.cm-table-actions a,
.table-actions a,
.action-buttons a,
.app-inline-actions a,
.app-inline-actions button,
.app-table-action {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 6px;
    background: transparent !important;
    color: #111111 !important;
    font-size: 20px;
    text-decoration: none;
    box-shadow: none !important;
}

.cm-table-actions a:hover,
.table-actions a:hover,
.action-buttons a:hover,
.app-inline-actions a:hover,
.app-inline-actions button:hover,
.app-table-action:hover {
    background: #f4f4f5;
    color: #111111 !important;
}

.app-table-action svg,
.app-inline-actions svg,
.app-table-action i,
.app-inline-actions i {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    stroke-width: 2.25;
    color: #111111 !important;
}

.app-table-action-view,
.app-table-action-info,
.app-table-action-report,
.app-table-action-history,
.app-table-action-download,
.app-table-action-edit,
.app-table-action-delete,
.app-table-action-complete,
.app-table-action-close,
.app-table-action-skip,
.app-action-view,
.app-action-info,
.app-action-edit,
.app-action-delete,
.app-action-muted,
.app-action-save,
.app-action-close,
.app-action-assign {
    color: #111111 !important;
}

.app-action-cell,
td.text-end:last-child {
    text-align: right;
}

.app-content .table-responsive + .mt-3,
.app-content .table-responsive + div[class*="mt-"],
.app-content .pagination-wrapper,
.cm-pagination-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    min-height: 64px;
    margin-top: 0 !important;
    padding: 14px 16px;
    border: 1px solid var(--cm-border-soft);
    border-top: 0;
    border-radius: 0 0 16px 16px;
    background: #ffffff;
    color: var(--cm-muted);
    font-size: 14px;
    line-height: 20px;
    box-shadow: var(--cm-shadow-card);
}

.app-content .table-responsive:has(+ .mt-3),
.app-content .table-responsive:has(+ div[class*="mt-"]) {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.pagination {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
}

.page-link,
.page-item span.page-link {
    min-width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border: 1px solid var(--cm-border);
    border-radius: var(--cm-radius) !important;
    background: #ffffff;
    color: var(--cm-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    box-shadow: var(--cm-shadow-sm);
}

.page-link:hover {
    border-color: oklch(0.87 0.006 286.286);
    background: oklch(0.967 0.001 286.375);
    color: var(--cm-text);
}

.page-item.active .page-link {
    border-color: var(--cm-primary);
    background: var(--cm-primary);
    color: #ffffff;
}

.page-item.disabled .page-link,
.page-item.disabled span.page-link {
    border-color: var(--cm-border);
    background: #ffffff;
    color: var(--cm-soft-muted);
    opacity: 0.72;
}

.pagination svg {
    width: 16px;
    height: 16px;
}

.app-topbar,
.navbar-custom {
    font-family: var(--cm-font-sans) !important;
}

.app-topbar.navbar-custom {
    border-bottom: 1px solid var(--cm-border-soft) !important;
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06) !important;
    backdrop-filter: blur(14px);
}

.app-topbar-inner {
    gap: 16px !important;
}

.app-topbar-left {
    flex: 0 0 auto !important;
}

.app-topbar-actions {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    justify-content: flex-end !important;
    gap: 10px !important;
}

.app-topbar-actions .app-search {
    flex: 1 1 460px !important;
    min-width: 240px !important;
    max-width: 520px !important;
    margin-right: auto !important;
    overflow: visible !important;
}

.app-global-search {
    width: 100% !important;
}

.app-global-search-input {
    height: 38px !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.app-global-search-input:focus {
    border-color: color-mix(in srgb, var(--cm-primary) 34%, var(--cm-border)) !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--cm-primary) 13%, transparent) !important;
}

.app-mobile-search-trigger {
    margin-right: auto !important;
}

.app-mobile-search-modal .modal-dialog {
    width: calc(100% - 24px);
    max-width: 560px;
    margin: 56px auto 16px;
}

.app-mobile-search-modal .modal-content {
    overflow: hidden;
}

.app-mobile-search-modal .modal-header {
    padding: 12px 16px 12px 20px;
    border-bottom: 1px solid var(--cm-border-soft);
}

.app-mobile-search-modal .modal-title {
    font-size: 17px;
    font-weight: 700;
    line-height: 24px;
}

.app-mobile-search-modal .modal-body {
    max-height: calc(100vh - 160px);
    max-height: calc(100dvh - 160px);
    padding: 16px;
    overflow-x: hidden;
    overflow-y: auto;
}

.app-global-search-mobile {
    width: 100%;
}

.app-global-search-mobile .app-global-search-results {
    position: static !important;
    width: 100% !important;
    max-height: none;
    margin-top: 8px;
    padding: 6px;
    border: 1px solid var(--cm-border-soft) !important;
    border-radius: var(--cm-card-radius) !important;
    box-shadow: none !important;
    transform: none !important;
}

.app-global-search-mobile .app-global-search-results .dropdown-header {
    padding: 12px 12px 4px;
}

.app-global-search-mobile .app-global-search-results .dropdown-header h6 {
    margin: 0 !important;
    color: var(--cm-muted) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .06em;
}

.app-global-search-mobile .app-global-search-results .dropdown-item {
    padding: 10px 12px !important;
    border-radius: 10px;
    white-space: normal;
    overflow-wrap: anywhere;
}

.app-global-search-mobile .app-global-search-results .dropdown-item:hover,
.app-global-search-mobile .app-global-search-results .dropdown-item:focus {
    background: color-mix(in srgb, var(--cm-primary) 8%, transparent);
    color: inherit;
}

.app-global-search-mobile .app-global-search-results .dropdown-item h5 {
    margin-bottom: 2px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.3;
}

.app-global-search-mobile .app-global-search-results .dropdown-item .badge {
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 700;
    vertical-align: middle;
}

.app-global-search-mobile .app-global-search-results .dropdown-item .text-muted {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.app-global-search-mobile .app-global-search-results .app-driver-avatar-img {
    width: 34px;
    height: 34px;
}

.app-global-search-mobile .app-global-search-results .app-driver-avatar-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 600;
}

.app-topbar-action {
    flex: 0 0 auto !important;
    transition: border-color .16s ease, box-shadow .16s ease, color .16s ease, background-color .16s ease;
}

.app-topbar-action:hover,
.app-topbar-user:hover {
    border-color: color-mix(in srgb, var(--cm-primary) 28%, var(--cm-border)) !important;
    background: #ffffff !important;
    color: var(--cm-primary) !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08) !important;
}

.app-notification-trigger {
    position: relative !important;
    display: inline-flex !important;
}

.app-notification-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff;
    border-radius: 999px;
    background: #ef4444;
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
}

.app-notifications-menu {
    width: min(320px, calc(100vw - 24px));
    padding: 6px;
    border: 1px solid var(--cm-border-soft) !important;
    border-radius: var(--cm-card-radius) !important;
    box-shadow: var(--cm-shadow-card) !important;
}

.app-notifications-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 10px 12px;
}

.app-notifications-head strong {
    color: var(--cm-text);
    font-size: 14px;
    font-weight: 800;
    line-height: 18px;
}

.app-notifications-head span {
    color: #64748b;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
}

.app-notification-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 28px;
    align-items: center;
    gap: 6px;
    border-radius: var(--cm-radius);
    color: var(--cm-text);
}

.app-notification-item-link {
    min-width: 0;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 8px 4px 8px 8px;
    color: var(--cm-text);
    text-decoration: none;
}

.app-notification-item:hover {
    background: #f8fafc;
}

.app-notification-item-link:hover {
    color: var(--cm-text);
}

.app-notification-item.is-unread {
    background: #eff6ff;
}

.app-notification-item-icon {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--cm-radius);
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 16px;
    line-height: 1;
}

.app-notification-item-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.app-notification-item-copy strong,
.app-notification-item-copy span,
.app-notification-item-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-notification-item-copy strong {
    color: var(--cm-text);
    font-size: 13px;
    font-weight: 750;
    line-height: 17px;
}

.app-notification-item-copy span {
    color: #475569;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
}

.app-notification-item-copy small {
    color: #94a3b8;
    font-size: 11px;
    font-weight: 500;
    line-height: 15px;
}

.app-notification-delete-form {
    margin: 0;
}

.app-notification-delete {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #94a3b8;
    font-size: 16px;
    line-height: 1;
}

.app-notification-delete:hover {
    background: #fee2e2;
    color: #dc2626;
}

.app-notification-empty {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 10px;
    color: #64748b;
    font-size: 13px;
    font-weight: 500;
}

.app-notification-empty i {
    font-size: 18px;
    line-height: 1;
}

.app-notification-all {
    border-radius: 9px;
    font-size: 13px;
    font-weight: 650;
}

.app-topbar-action.app-workspace-switcher {
    width: auto !important;
    max-width: 210px !important;
    padding: 0 12px !important;
    gap: 7px !important;
    color: var(--cm-text) !important;
}

.app-workspace-name {
    min-width: 0;
    max-width: 158px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 700;
    line-height: 18px;
}

.app-subscription-chip {
    width: auto !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-width: 176px !important;
    display: inline-flex;
    flex: 0 0 auto !important;
    align-items: center;
    gap: 7px !important;
    padding: 0 12px !important;
    border: 1px solid var(--cm-border) !important;
    border-radius: 10.4px !important;
    background: #ffffff !important;
    color: var(--cm-text) !important;
    box-shadow: none !important;
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.app-subscription-chip i {
    flex: 0 0 auto;
    font-size: 17px;
    line-height: 1;
}

.app-subscription-copy {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    line-height: 18px;
}

.app-subscription-copy strong {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--cm-text);
    font-size: 13px;
    font-weight: 700;
}

.app-subscription-chip-success {
    border-color: var(--cm-border) !important;
}

.app-subscription-chip-success i {
    color: #16a34a;
}

.app-subscription-chip-warning {
    border-color: var(--cm-border) !important;
}

.app-subscription-chip-warning i {
    color: #d97706;
}

.app-subscription-chip-danger {
    border-color: var(--cm-border) !important;
}

.app-subscription-chip-danger i {
    color: #e11d48;
}

.app-subscription-chip-neutral {
    border-color: var(--cm-border) !important;
}

.app-subscription-chip-neutral i {
    color: var(--cm-muted);
}

.app-subscription-chip:hover {
    border-color: color-mix(in srgb, var(--cm-primary) 28%, var(--cm-border)) !important;
    background: #ffffff !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08) !important;
}

.app-subscription-menu {
    width: min(292px, calc(100vw - 24px));
    padding: 6px;
    border: 1px solid var(--cm-border-soft) !important;
    border-radius: var(--cm-card-radius) !important;
    box-shadow: var(--cm-shadow-card) !important;
}

.app-subscription-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px;
}

.app-subscription-menu-header > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.app-subscription-menu-header strong {
    color: var(--cm-text);
    font-size: 14px;
    font-weight: 800;
    line-height: 18px;
}

.app-subscription-menu-header small {
    color: var(--cm-muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
}

.app-subscription-menu-status {
    min-height: 26px;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    border: 1px solid #d4d4d8;
    border-radius: 999px;
    background: #f4f4f5;
    color: #71717f;
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    white-space: nowrap;
}

.app-subscription-menu-status-success {
    border-color: #a7f3d0;
    background: #dffbf0;
    color: #059669;
}

.app-subscription-menu-status-warning {
    border-color: #fde68a;
    background: #fef3c7;
    color: #d97706;
}

.app-subscription-menu-status-danger {
    border-color: #fecaca;
    background: #fee2e2;
    color: #ef4444;
}

.app-subscription-menu-list {
    display: grid;
    gap: 4px;
    padding: 2px;
}

.app-subscription-menu-list > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    min-height: 32px;
    padding: 6px 8px;
    border-radius: var(--cm-radius);
    background: #f8fafc;
}

.app-subscription-menu-list span {
    color: var(--cm-muted);
    font-size: 12px;
    font-weight: 600;
}

.app-subscription-menu-list strong {
    min-width: 0;
    color: var(--cm-text);
    font-size: 12px;
    font-weight: 800;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-topbar-user {
    min-width: 0 !important;
    max-width: 220px !important;
    padding: 3px 10px 3px 3px !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    background: transparent !important;
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.app-topbar-user-meta {
    min-width: 0 !important;
}

.app-topbar-user-name {
    max-width: 140px !important;
}

@media (max-width: 1199.98px) {
    .app-topbar-actions .app-search {
        flex-basis: 320px !important;
        min-width: 220px !important;
        max-width: 360px !important;
    }

    .app-topbar-action.app-workspace-switcher {
        max-width: 168px !important;
    }

    .app-workspace-name {
        max-width: 116px;
    }

    .app-subscription-chip {
        max-width: 148px !important;
    }

    .app-subscription-copy strong {
        max-width: 94px;
    }

    .app-topbar-user-name {
        max-width: 112px !important;
    }
}

@media (max-width: 767.98px) {
    .app-topbar-inner {
        gap: 10px !important;
    }

    .app-topbar-actions {
        gap: 8px !important;
    }
}

.app-sidebar,
.app-sidebar-menu,
.app-sidebar-menu .menu-title,
.app-sidebar-menu .menu-link {
    font-family: var(--cm-font-sans) !important;
    letter-spacing: 0;
}

.app-sidebar-brand {
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

.app-sidebar-logo {
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

.app-sidebar-logo img {
    width: auto !important;
    max-width: min(170px, calc(100% - 24px)) !important;
    height: auto !important;
    max-height: 38px !important;
    display: block !important;
    margin: 0 auto !important;
    object-fit: contain !important;
}

.app-sidebar-menu .menu-link {
    font-size: 15px;
    font-weight: 500;
    line-height: 20px;
}

.app-sidebar-menu .menu-title {
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
}

.app-footer {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    height: auto;
    min-height: 56px;
    margin: 0;
    padding: 18px 24px 24px;
    border: 0;
    background: transparent;
    color: var(--cm-muted);
    font-family: var(--cm-font-sans) !important;
    font-size: 14px;
    line-height: 20px;
}

.app-footer .container-fluid {
    max-width: 100%;
    padding: 0;
}

.app-footer-inner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 32px;
}

.app-footer-copy {
    color: var(--cm-muted);
}

.content-page,
.app-content-page,
.app-content,
.app-container,
.container-fluid {
    min-width: 0 !important;
    max-width: 100% !important;
}

.content-page {
    overflow-x: clip;
}

.app-content .page-title-box,
.app-content .app-breadcrumb,
.app-content .drivers-page-header {
    min-width: 0;
}

.app-content .page-title-box {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.app-content .page-title-box .page-title,
.app-content .page-title-box h1,
.app-content .page-title-box h4 {
    min-width: 0;
}

.app-content .page-title-right,
.app-content .app-breadcrumb-actions,
.app-content .drivers-page-actions {
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.app-content .page-title-right .btn,
.app-content .app-breadcrumb-actions .btn,
.app-content .drivers-page-actions .btn {
    max-width: 100%;
    white-space: nowrap;
}

.drivers-table-card {
    max-width: 100%;
    border: 1px solid var(--cm-border-soft);
    border-radius: 16px;
    background: #ffffff;
    overflow: hidden;
    box-shadow: var(--cm-shadow-card);
}

.drivers-table-wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}

.drivers-table-wrapper .drivers-table {
    margin-bottom: 0;
}

.zones-page-shell {
    gap: 18px;
}

.zones-metrics-grid {
    max-width: none;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.zones-metric-card {
    min-height: 96px;
    cursor: default;
}

.zones-metric-card:hover {
    transform: none;
}

.zones-metric-neutral {
    --metric-color: #111827;
    --metric-bg: #ffffff;
    --metric-border: #e5e7eb;
}

.zones-metric-blue {
    --metric-color: #2563eb;
    --metric-bg: #ffffff;
    --metric-border: #e5e7eb;
}

.zones-metric-green {
    --metric-color: #10b981;
    --metric-bg: #ffffff;
    --metric-border: #e5e7eb;
}

.zones-metric-amber {
    --metric-color: #f59e0b;
    --metric-bg: #ffffff;
    --metric-border: #e5e7eb;
}

.zones-metric-purple {
    --metric-color: #7c3aed;
    --metric-bg: #ffffff;
    --metric-border: #e5e7eb;
}

.zones-metric-red {
    --metric-color: #ef4444;
    --metric-bg: #ffffff;
    --metric-border: #e5e7eb;
}

.zones-filter-bar {
    grid-template-columns: minmax(260px, 1.4fr) repeat(2, minmax(180px, 1fr));
}

.zones-table {
    min-width: 1120px;
    table-layout: fixed;
}

.zones-table th:nth-child(1),
.zones-table td:nth-child(1) {
    width: 260px;
}

.zones-table th:nth-child(2),
.zones-table td:nth-child(2) {
    width: 520px;
}

.zones-table th:nth-child(3),
.zones-table td:nth-child(3),
.zones-table th:nth-child(4),
.zones-table td:nth-child(4) {
    width: 130px;
}

.zones-table th:nth-child(5),
.zones-table td:nth-child(5) {
    width: 80px;
}

.zone-name-cell {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.zone-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 18px;
}

.zone-name-cell strong {
    display: block;
    color: var(--cm-text);
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
}

.zone-name-cell small {
    display: block;
    color: var(--cm-muted);
    font-size: 12px;
    line-height: 16px;
}

.zones-driver-list {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
}

.zones-driver-list .app-driver-avatar-link {
    max-width: 190px;
    min-height: 30px;
    padding: 2px 8px 2px 2px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #ffffff;
}

.zones-driver-list .app-driver-avatar-img,
.zones-driver-list .app-driver-avatar-initials {
    width: 26px !important;
    height: 26px !important;
    flex: 0 0 26px !important;
    font-size: 10px !important;
}

.zones-driver-list .app-driver-avatar-name {
    overflow: hidden;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zone-count-pill,
.zone-status-pill,
.zone-empty-pill,
.zone-more-pill {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
    white-space: nowrap;
}

.zone-count-pill {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #2563eb;
}

.zone-status-pill.is-visible {
    border-color: #a7f3d0;
    background: #ecfdf5;
    color: #059669;
}

.zone-status-pill.is-hidden,
.zone-empty-pill {
    border-color: #e4e4e7;
    background: #f4f4f5;
    color: #71717f;
}

.zone-more-pill {
    border-color: #ddd6fe;
    background: #f5f3ff;
    color: #7c3aed;
}

@media (max-width: 1399.98px) {
    .zones-metrics-grid,
    .zones-filter-bar {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .zones-metrics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .zones-filter-bar {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .zones-metrics-grid {
        grid-template-columns: 1fr;
    }
}

.drivers-empty-state {
    min-height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px 24px;
    text-align: center;
    background:
        radial-gradient(circle at 50% 0%, rgb(29 78 216 / 0.05), transparent 42%),
        #ffffff;
}

.drivers-empty-state > i {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    background: #eff6ff;
    color: var(--cm-primary);
    font-size: 28px;
    line-height: 1;
}

.drivers-empty-state h2 {
    margin: 4px 0 0;
    color: var(--cm-text);
    font-size: 22px;
    font-weight: 700;
    line-height: 30px;
}

.drivers-empty-state p {
    max-width: 360px;
    margin: 0;
    color: var(--cm-muted);
    font-size: 14px;
    line-height: 20px;
}

.drivers-empty-state .drivers-btn {
    margin-top: 4px;
}

.drivers-table {
    width: 100%;
    min-width: 1180px;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--cm-text);
    font-size: 14px;
    line-height: 20px;
}

.drivers-table thead th {
    height: 50px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--cm-border);
    color: var(--cm-muted);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-transform: none;
}

.drivers-table tbody td {
    height: 72px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--cm-border-soft);
    color: var(--cm-text);
    vertical-align: middle;
    font-size: 14px;
    line-height: 20px;
}

.drivers-person-link {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: var(--cm-text);
    text-decoration: none;
}

.drivers-person-link strong {
    display: block;
    color: #18181b;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}

.drivers-person-link small {
    display: block;
    color: #73798a;
    font-size: 13px;
    line-height: 18px;
}

.drivers-avatar,
.drivers-avatar-img {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 999px;
}

.drivers-avatar-img {
    object-fit: cover;
}

.drivers-code-chip {
    display: inline-flex;
    align-items: center;
    max-width: 132px;
    min-height: 28px;
    padding: 4px 10px;
    overflow: hidden;
    border-radius: 5px;
    background: #f4f4f5;
    color: #3f3f46;
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.drivers-count {
    min-width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #73798a;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-decoration: none;
}

.drivers-count-danger {
    background: #fee2e2;
    color: #ef4444;
    font-weight: 600;
}

.page-drivers-redesign .content-page.app-content-page {
    width: calc(100vw - var(--ct-leftbar-width));
    min-width: 0;
    overflow-x: hidden;
}

.page-drivers-redesign .app-content,
.page-drivers-redesign .app-container {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.page-drivers-redesign .app-container {
    padding: 24px !important;
}

.page-admin-wide .content-page.app-content-page {
    width: calc(100vw - var(--ct-leftbar-width));
    min-width: 0;
    overflow-x: hidden;
}

.page-admin-wide .app-content,
.page-admin-wide .app-container {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.page-admin-wide .app-container {
    padding: 24px !important;
}

.drivers-page-shell {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
    overflow: hidden;
}

.drivers-page-header {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.drivers-page-header h1 {
    margin: 0;
    color: var(--cm-text);
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
}

.drivers-page-header p {
    margin: 4px 0 0;
    color: var(--cm-muted);
    font-size: 14px;
    line-height: 20px;
}

.drivers-page-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.drivers-btn {
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 10px;
    border-radius: var(--cm-radius);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}

.drivers-btn-outline {
    border: 1px solid var(--cm-border) !important;
    background: #ffffff !important;
    color: var(--cm-text) !important;
}

.drivers-btn-primary {
    border: 1px solid var(--cm-primary) !important;
    background: var(--cm-primary) !important;
    color: #ffffff !important;
}

.app-form-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--cm-border);
}

.app-form-footer .drivers-btn {
    min-height: 38px;
}

.drivers-metrics-grid {
    width: 100%;
    max-width: none;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}

.drivers-metric-card {
    --metric-color: #2563eb;
    --metric-bg: #ffffff;
    --metric-border: var(--cm-border-soft);
    min-height: 106px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    border: 1px solid var(--metric-border);
    border-radius: var(--cm-card-radius);
    background: #ffffff;
    color: var(--cm-text);
    text-align: center;
    text-decoration: none;
    box-shadow: var(--cm-shadow-sm);
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.drivers-metric-card:hover {
    border-color: var(--cm-border);
    box-shadow: var(--cm-shadow-sm);
    transform: none;
}

.drivers-metric-card strong {
    color: var(--metric-color);
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
}

.drivers-metric-card span {
    color: #71717a;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}

.drivers-metric-green {
    --metric-color: #00a63e;
}

.drivers-metric-amber {
    --metric-color: #ff8904;
}

.drivers-metric-red {
    --metric-color: #fb2c36;
}

.drivers-metric-slate {
    --metric-color: #a1a1aa;
}

.drivers-metric-blue {
    --metric-color: #1447e6;
}

.drivers-stats-panel[hidden] {
    display: none !important;
}

.drivers-stats-panel {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    max-width: none;
}

.drivers-chart-card {
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--cm-border-soft);
    border-radius: var(--cm-card-radius);
    background: var(--cm-surface);
    box-shadow: var(--cm-shadow-card);
}

.drivers-chart-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.drivers-chart-card-header h2 {
    margin: 0;
    color: var(--cm-text);
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
}

.drivers-chart-card-header span {
    color: var(--cm-muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
    white-space: nowrap;
}

.drivers-bar-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.drivers-bar-row {
    min-width: 0;
}

.drivers-bar-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 7px;
    color: var(--cm-text);
    font-size: 13px;
    line-height: 18px;
}

.drivers-bar-row-head span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.drivers-bar-row-head strong {
    color: var(--cm-text);
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
}

.drivers-bar-track {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--cm-bg);
}

.drivers-bar-track span {
    height: 100%;
    display: block;
    border-radius: inherit;
    background: #2563eb;
}

.drivers-chart-green .drivers-bar-track span,
.drivers-chart-green i {
    background: #10b981;
}

.drivers-chart-blue .drivers-bar-track span,
.drivers-chart-blue i {
    background: #2563eb;
}

.drivers-chart-amber .drivers-bar-track span,
.drivers-chart-amber i {
    background: #f59e0b;
}

.drivers-chart-slate .drivers-bar-track span,
.drivers-chart-slate i {
    background: #64748b;
}

.drivers-chart-red .drivers-bar-track span,
.drivers-chart-red i {
    background: #ef4444;
}

.drivers-donut-wrap {
    display: flex;
    align-items: center;
    gap: 18px;
}

.drivers-donut {
    width: 118px;
    height: 118px;
    flex: 0 0 118px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background:
        radial-gradient(circle at center, var(--cm-surface) 0 56%, transparent 57%),
        conic-gradient(#10b981 0 var(--ok), #ef4444 var(--ok) 100%);
}

.drivers-donut strong {
    color: var(--cm-text);
    font-size: 22px;
    font-weight: 800;
    line-height: 26px;
}

.drivers-donut span {
    color: var(--cm-muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
}

.drivers-chart-legend {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--cm-muted);
    font-size: 13px;
    line-height: 18px;
}

.drivers-chart-legend span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.drivers-chart-legend i {
    width: 9px;
    height: 9px;
    display: inline-flex;
    border-radius: 999px;
}

.drivers-chart-empty {
    margin: 0;
    color: var(--cm-muted);
    font-size: 14px;
    line-height: 20px;
}

.drivers-filter-bar {
    display: grid;
    grid-template-columns: minmax(220px, 267px) repeat(5, minmax(0, 1fr));
    align-items: center;
    gap: 8px;
    max-width: 100%;
}

.drivers-filter-search {
    position: relative;
    width: 100%;
    min-width: 0;
}

.drivers-filter-search i {
    position: absolute;
    left: 12px;
    top: 50%;
    color: var(--cm-muted);
    transform: translateY(-50%);
}

.drivers-filter-bar input,
.drivers-filter-bar select,
.drivers-filter-bar .select2-container,
.drivers-filter-bar .select2-selection {
    width: 100%;
    height: 36px;
    min-height: 36px;
    border: 1px solid var(--cm-border);
    border-radius: var(--cm-radius);
    background: #ffffff;
    color: var(--cm-text);
    font-size: 14px;
    line-height: 20px;
    box-shadow: var(--cm-shadow-sm);
}

.drivers-filter-search input {
    padding: 4px 12px 4px 36px;
}

.drivers-filter-bar select {
    min-width: 0;
    padding: 4px 32px 4px 12px;
}

.drivers-filter-bar .select2-container {
    min-width: 0;
}

.drivers-filter-bar .cm-period-filter {
    width: 100%;
    min-width: 0;
    margin: 0 !important;
}

.drivers-filter-bar .cm-period-trigger {
    width: 100%;
    min-width: 0;
    justify-content: flex-start;
    border-radius: var(--cm-radius);
}

.drivers-filter-bar .cm-period-trigger-chevron {
    margin-left: auto;
}

.drivers-filter-bar .select2-container--default .select2-selection--single {
    border: 1px solid var(--cm-border) !important;
    border-radius: var(--cm-radius) !important;
    background: #ffffff !important;
}

.drivers-filter-bar .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 12px;
    padding-right: 32px;
    color: var(--cm-text);
    font-size: 14px;
    line-height: 34px;
}

.drivers-filter-bar .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 34px;
    right: 6px;
}

.drivers-filter-submit {
    height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    border: 1px solid var(--cm-border);
    border-radius: var(--cm-radius);
    background: #ffffff;
    color: var(--cm-text);
    font-size: 14px;
    font-weight: 500;
}

.drivers-status-pill {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    padding: 3px 12px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: #f4f4f5;
    color: #71717f;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    white-space: nowrap;
}

.drivers-status-1 {
    border-color: #a7f3d0;
    background: #dffbf0;
    color: #059669;
}

.drivers-status-2 {
    border-color: #fde68a;
    background: #fef3c7;
    color: #d97706;
}

.drivers-status-5 {
    border-color: #d4d4d8;
    background: #f4f4f5;
    color: #71717f;
}

.drivers-status-3 {
    border-color: #fecaca;
    background: #fee2e2;
    color: #ef4444;
}

.drivers-status-4 {
    border-color: #bfdbfe;
    background: #dbeafe;
    color: #2563eb;
}

.drivers-row-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    white-space: nowrap;
}

.drivers-row-actions a {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: #111111 !important;
    font-size: 20px;
    text-decoration: none;
}

.drivers-row-actions a.is-view,
.drivers-row-actions a.is-danger {
    color: #111111 !important;
}

@media (min-width: 992px) {
    .app-popup-modal.app-driver-wizard-popup .modal-dialog {
        width: min(94vw, 1100px) !important;
        max-width: min(94vw, 1100px) !important;
        height: min(88vh, 820px) !important;
        max-height: min(88vh, 820px) !important;
        margin: 4vh auto !important;
    }

    .app-popup-modal.app-driver-wizard-popup .modal-header {
        min-height: 56px !important;
        padding: 0 20px !important;
    }

    .app-popup-modal.app-driver-wizard-popup .modal-title {
        font-size: 20px !important;
        line-height: 28px !important;
    }
}

.drivers-compliance {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 20px;
}

.drivers-compliance.is-ok {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}

.drivers-compliance.is-ko {
    background: transparent;
    color: #ff3f4f;
}

a.drivers-compliance.is-action {
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.16s ease, color 0.16s ease;
}

a.drivers-compliance.is-action:hover,
a.drivers-compliance.is-action:focus-visible {
    background: rgba(255, 63, 79, 0.12);
    color: #dc2626;
}

.drivers-table-dash {
    color: #8a8f9c;
}

@media (max-width: 1399.98px) {
    .drivers-filter-bar {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1199.98px) {
    .app-popup-modal.app-van-form-popup .modal-dialog {
        width: min(94vw, 1040px) !important;
        max-width: min(94vw, 1040px) !important;
    }

    .van-wizard-main {
        padding: 34px 34px 28px;
    }

    .van-wizard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .van-wizard-layout {
        grid-template-columns: 1fr;
    }

    .van-wizard-steps {
        display: none;
    }

    .van-wizard-main {
        padding: 24px;
    }

    .van-wizard-grid,
    .van-wizard-follow-grid {
        grid-template-columns: 1fr;
    }

    .van-wizard-footer {
        align-items: stretch;
        flex-direction: column;
        padding: 14px 20px !important;
    }

    .van-wizard-footer > div {
        width: 100%;
        justify-content: flex-end;
    }
}

@media (max-width: 991.98px) {
    .app-search-form,
    .app-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .app-content .table-responsive + .mt-3,
    .app-content .table-responsive + div[class*="mt-"],
    .app-content .pagination-wrapper,
    .cm-pagination-bar {
        align-items: flex-start;
        flex-direction: column;
    }

    .app-content .table-responsive + .mt-3 nav,
    .app-content .table-responsive + div[class*="mt-"] nav,
    .app-content .pagination-wrapper nav,
    .cm-pagination-bar nav {
        width: 100%;
    }

    .page-drivers-redesign .content-page.app-content-page {
        width: 100vw;
    }

    .drivers-page-header {
        flex-direction: column;
    }

    .drivers-page-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .drivers-page-actions .drivers-btn {
        flex: 0 1 auto;
    }

    .drivers-metrics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: none;
    }

    .drivers-filter-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .drivers-stats-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .app-page-title,
    .page-title {
        font-size: 22px;
        line-height: 28px;
    }

    .app-search-form,
    .app-filters {
        grid-template-columns: 1fr;
    }

    .app-content .table-responsive + .mt-3,
    .app-content .table-responsive + div[class*="mt-"],
    .app-content .pagination-wrapper,
    .cm-pagination-bar {
        padding: 12px;
    }

    .pagination {
        flex-wrap: wrap;
    }

    .page-drivers-redesign .app-container {
        padding: 16px !important;
    }

    .drivers-metrics-grid,
    .drivers-filter-bar,
    .drivers-stats-panel {
        grid-template-columns: 1fr;
    }

    .drivers-page-actions .drivers-btn {
        flex: 1 1 100%;
    }

    .drivers-donut-wrap {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 991.98px) {
    .app-popup-modal.app-driver-wizard-popup .modal-dialog {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        height: calc(100vh - 32px) !important;
        max-height: calc(100vh - 32px) !important;
        margin: 16px auto !important;
    }

    .app-popup-modal.app-driver-wizard-popup .modal-header {
        min-height: 56px !important;
        padding: 0 20px !important;
    }

    .app-popup-modal.app-driver-wizard-popup .modal-title {
        font-size: 20px !important;
        line-height: 28px !important;
    }
}

@media (max-width: 575.98px) {
    .app-popup-modal.app-driver-wizard-popup .modal-dialog {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
        margin: 0 !important;
    }

    .app-popup-modal.app-driver-wizard-popup .modal-content {
        border-radius: 0 !important;
    }

    .app-popup-modal.app-driver-wizard-popup .modal-header {
        min-height: 56px !important;
        padding: 0 18px !important;
    }

    .app-popup-modal.app-driver-wizard-popup .modal-title {
        font-size: 20px !important;
        line-height: 28px !important;
    }
}

.drivers-count-warning {
    background: #fef3c7;
    color: #d97706;
    font-weight: 600;
}

.app-content .app-search-card .app-search-button,
.app-content .app-search-form button[type="submit"],
.app-content .app-filters button[type="submit"],
.page-drivers-related .app-search-button {
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 12px !important;
    border: 1px solid var(--cm-border) !important;
    border-radius: var(--cm-radius) !important;
    background: #ffffff !important;
    color: var(--cm-text) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    box-shadow: var(--cm-shadow-sm) !important;
}

.app-content .app-search-card .app-search-button:hover,
.app-content .app-search-form button[type="submit"]:hover,
.app-content .app-filters button[type="submit"]:hover,
.page-drivers-related .app-search-button:hover {
    border-color: oklch(0.87 0.006 286.286) !important;
    background: oklch(0.967 0.001 286.375) !important;
    color: var(--cm-text) !important;
}

.app-content .app-search-card .app-search-button i,
.app-content .app-search-card .app-search-button svg {
    width: 16px;
    height: 16px;
    color: var(--cm-text) !important;
    stroke: currentColor !important;
}

.app-content .table thead th,
.app-content .table-sticky-wrapper thead th,
.app-content table.app-data-table thead th,
.page-drivers-related .table-sticky-wrapper thead th,
.page-typology .table-sticky-wrapper thead th,
.table-light > tr > th,
thead.table-light > tr > th {
    height: 50px !important;
    padding: 14px 16px !important;
    border-bottom: 1px solid var(--cm-border) !important;
    background: #ffffff !important;
    color: var(--cm-muted) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    white-space: normal;
}

.cm-period-filter {
    position: relative;
    display: inline-flex;
    width: auto;
    min-width: 132px;
    vertical-align: top;
}

.cm-period-trigger {
    width: 100%;
    min-width: 0;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid var(--cm-border);
    border-radius: 8px;
    background: #ffffff;
    color: #374151;
    font-family: var(--cm-font-sans);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    white-space: nowrap;
    box-shadow: var(--cm-shadow-sm);
}

.cm-period-trigger [data-cm-period-label] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cm-period-trigger:hover,
.cm-period-filter.is-open .cm-period-trigger {
    border-color: #d1d5db;
    background: #fafafa;
    color: #111827;
}

.cm-period-trigger i {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #4b5563;
    font-size: 16px;
    line-height: 1;
}

.cm-period-trigger-chevron {
    margin-left: -2px;
    color: #9ca3af !important;
}

.cm-period-popover {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 1060;
    width: 414px;
    display: none;
    grid-template-columns: 132px minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: 13px;
    background: #ffffff;
    box-shadow: 0 18px 40px rgba(17, 24, 39, 0.14);
}

.cm-period-filter.is-open .cm-period-popover {
    display: grid;
}

.cm-period-filter.is-align-right .cm-period-popover {
    right: 0;
    left: auto;
}

.cm-period-presets {
    padding: 15px 16px 16px;
    border-right: 1px solid #e5e7eb;
    background: #fbfbfc;
}

.cm-period-presets-title {
    margin: 0 0 14px;
    color: #8b95a5;
    font-size: 10px;
    font-weight: 700;
    line-height: 14px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.cm-period-presets button {
    width: 100%;
    height: 31px;
    display: flex;
    align-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: #1f2937;
    font-family: var(--cm-font-sans);
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
    text-align: left;
}

.cm-period-presets button:hover {
    color: #1d4ed8;
}

.cm-period-calendar-panel {
    position: relative;
    min-height: 306px;
    padding: 12px 18px 44px;
    background: #ffffff;
}

.cm-period-calendar-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.cm-period-clear {
    position: absolute;
    right: 18px;
    bottom: 14px;
    left: 18px;
    height: 30px;
    display: flex;
    align-items: center;
    padding: 0;
    border: 0;
    border-top: 1px solid #eef0f3;
    background: transparent;
    color: #7b8494;
    font-family: var(--cm-font-sans);
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
}

.cm-period-calendar-panel .flatpickr-calendar {
    width: 246px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.cm-period-calendar-panel .flatpickr-months {
    height: 34px;
    align-items: center;
}

.cm-period-calendar-panel .flatpickr-month {
    height: 34px;
    color: #111827;
}

.cm-period-calendar-panel .flatpickr-current-month {
    width: 168px;
    left: 50%;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 5px 0 0;
    color: #111827;
    font-size: 15px;
    font-weight: 700;
    line-height: 22px;
    overflow: visible;
    transform: translateX(-50%);
}

.cm-period-calendar-panel .flatpickr-current-month .cur-month,
.cm-period-calendar-panel .flatpickr-current-month .flatpickr-monthDropdown-months,
.cm-period-calendar-panel .flatpickr-current-month input.cur-year {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #111827;
    font-family: var(--cm-font-sans);
    font-size: 15px;
    font-weight: 700;
    line-height: 22px !important;
    box-shadow: none !important;
}

.cm-period-calendar-panel .flatpickr-current-month .cur-month,
.cm-period-calendar-panel .flatpickr-current-month .flatpickr-monthDropdown-months {
    width: 96px !important;
    min-width: 0 !important;
    max-width: 96px !important;
    flex: 0 0 96px;
    margin: 0 !important;
    text-align: left;
    pointer-events: none;
}

.cm-period-calendar-panel .flatpickr-current-month .numInputWrapper {
    width: 56px !important;
    min-width: 56px;
    flex: 0 0 56px;
}

.cm-period-calendar-panel .flatpickr-current-month input.cur-year {
    width: 56px !important;
    min-width: 0 !important;
    text-align: left;
}

.cm-period-calendar-panel .flatpickr-prev-month,
.cm-period-calendar-panel .flatpickr-next-month {
    width: 30px;
    height: 34px;
    padding: 9px;
    color: #64748b;
    fill: #64748b;
}

.cm-period-calendar-panel .flatpickr-weekdays {
    height: 28px;
}

.cm-period-calendar-panel span.flatpickr-weekday {
    color: #8b95a5;
    font-size: 11px;
    font-weight: 700;
}

.cm-period-calendar-panel .flatpickr-days,
.cm-period-calendar-panel .dayContainer {
    width: 246px !important;
    min-width: 246px !important;
    max-width: 246px !important;
}

.cm-period-calendar-panel .flatpickr-day {
    width: 35px;
    max-width: 35px;
    height: 35px;
    border-radius: 999px;
    color: #111827;
    font-size: 13px;
    font-weight: 500;
    line-height: 35px;
}

.cm-period-calendar-panel .flatpickr-day:hover {
    border-color: #e0e7ff;
    background: #eef2ff;
}

.cm-period-calendar-panel .flatpickr-day.today {
    border-color: #5b5cff;
    color: #4f46e5;
}

.cm-period-calendar-panel .flatpickr-day.selected,
.cm-period-calendar-panel .flatpickr-day.startRange,
.cm-period-calendar-panel .flatpickr-day.endRange {
    border-color: #5b5cff !important;
    background: #ffffff !important;
    color: #4f46e5 !important;
    box-shadow: none !important;
}

.cm-period-calendar-panel .flatpickr-day.inRange {
    border-color: #eef2ff !important;
    background: #eef2ff !important;
    color: #1f2937 !important;
    box-shadow: -5px 0 0 #eef2ff, 5px 0 0 #eef2ff !important;
}

.cm-period-calendar-panel .flatpickr-day.prevMonthDay,
.cm-period-calendar-panel .flatpickr-day.nextMonthDay {
    color: #c6cbd3;
}

@media (max-width: 575.98px) {
    .cm-period-filter {
        width: 100%;
    }

    .cm-period-popover {
        width: min(414px, calc(100vw - 32px));
        grid-template-columns: 118px minmax(0, 1fr);
    }

    .cm-period-presets {
        padding: 14px 12px;
    }

    .cm-period-calendar-panel {
        padding-right: 10px;
        padding-left: 10px;
    }
}

/* Global list system: filters, tables and pagination mirror /drivers. */
.app-content .app-search-card,
.app-content .card.app-search-card {
    margin-bottom: 24px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.app-content .app-search-card > .card-body {
    padding: 0 !important;
}

.app-content .app-search-form,
.app-content .app-filters {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(176px, 100%), 1fr)) !important;
    align-items: center !important;
    gap: 8px !important;
}

.app-content .app-search-form > div,
.app-content .app-filters > div {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
}

.app-content .app-search-form .form-control,
.app-content .app-search-form .form-select,
.app-content .app-search-form .select2-container,
.app-content .app-search-form .select2-selection,
.app-content .app-filters .form-control,
.app-content .app-filters .form-select,
.app-content .app-filters .select2-container,
.app-content .app-filters .select2-selection {
    width: 100% !important;
    height: 36px !important;
    min-height: 36px !important;
    border-color: var(--cm-border) !important;
    border-radius: var(--cm-radius) !important;
    background-color: #ffffff !important;
    color: var(--cm-text) !important;
    font-family: var(--cm-font-sans) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
    box-shadow: var(--cm-shadow-sm) !important;
}

.app-content .app-search-form .form-control,
.app-content .app-search-form .form-select,
.app-content .app-filters .form-control,
.app-content .app-filters .form-select {
    padding: 7px 12px !important;
}

.app-content .app-search-card .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 12px !important;
    padding-right: 32px !important;
    color: var(--cm-text) !important;
    font-size: 14px !important;
    line-height: 34px !important;
}

.app-content .app-search-card .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 34px !important;
    right: 6px !important;
}

.app-content .app-search-card .app-search-button,
.app-content .app-search-form button[type="submit"],
.app-content .app-filters button[type="submit"] {
    width: 100% !important;
    height: 36px !important;
    min-height: 36px !important;
    justify-content: center !important;
    padding: 0 12px !important;
    border: 1px solid var(--cm-border) !important;
    border-radius: var(--cm-radius) !important;
    background: #ffffff !important;
    color: var(--cm-text) !important;
    font-family: var(--cm-font-sans) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    box-shadow: var(--cm-shadow-sm) !important;
}

.app-content .app-search-card .app-search-button:hover,
.app-content .app-search-form button[type="submit"]:hover,
.app-content .app-filters button[type="submit"]:hover {
    border-color: #d1d5db !important;
    background: #fafafa !important;
    color: var(--cm-text) !important;
}

.app-content .app-search-card .app-search-button i,
.app-content .app-search-card .app-search-button svg,
.app-content .app-search-form button[type="submit"] i,
.app-content .app-filters button[type="submit"] i {
    width: 16px !important;
    height: 16px !important;
    color: var(--cm-text) !important;
    font-size: 16px !important;
    stroke: currentColor !important;
}

.app-content .table-responsive.table-sticky-wrapper,
.app-content .table-responsive,
.app-content .dataTables_wrapper,
.app-content .cm-table-card {
    overflow: auto !important;
    border: 1px solid var(--cm-border-soft) !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: var(--cm-shadow-card) !important;
}

.app-content .table-responsive.table-sticky-wrapper:has(+ .mt-3),
.app-content .table-responsive.table-sticky-wrapper:has(+ div[class*="mt-"]),
.app-content .table-responsive:has(+ .mt-3),
.app-content .table-responsive:has(+ div[class*="mt-"]) {
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.app-content .card:has(> .card-body > .table-sticky-wrapper) {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.app-content .card:has(> .card-body > .table-sticky-wrapper) > .card-body {
    padding: 0 !important;
}

.app-content .table,
.app-content table.dataTable,
.app-content table.app-data-table {
    min-width: 980px;
    margin-bottom: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    color: var(--cm-text) !important;
    font-family: var(--cm-font-sans) !important;
    font-size: 14px !important;
    line-height: 20px !important;
}

.app-content .table > :not(caption) > * > *,
.app-content table.dataTable > thead > tr > th,
.app-content table.dataTable > tbody > tr > td,
.app-content table.app-data-table > :not(caption) > * > * {
    padding: 14px 16px !important;
    border-color: var(--cm-border-soft) !important;
}

.app-content .table thead th,
.app-content .table > thead > tr > th,
.app-content table.dataTable > thead > tr > th,
.app-content table.app-data-table > thead > tr > th {
    height: 50px !important;
    border-bottom: 1px solid var(--cm-border) !important;
    background: #ffffff !important;
    color: var(--cm-muted) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}

.app-content .table tbody td,
.app-content .table > tbody > tr > td,
.app-content table.dataTable > tbody > tr > td,
.app-content table.app-data-table > tbody > tr > td {
    height: 72px !important;
    color: var(--cm-text) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
    vertical-align: middle !important;
}

.app-content .table tbody tr:hover > *,
.app-content table.dataTable > tbody > tr:hover > *,
.app-content table.app-data-table > tbody > tr:hover > * {
    background: oklch(0.967 0.001 286.375 / 0.45) !important;
}

.app-content .table tbody td a:not(.btn),
.app-content table.app-data-table tbody td a:not(.btn) {
    color: #1d4ed8 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

.app-content .table tbody td a:not(.btn):hover,
.app-content table.app-data-table tbody td a:not(.btn):hover {
    color: #1e40af !important;
    text-decoration: underline !important;
}

.app-content .table-responsive + .mt-3,
.app-content .table-responsive + div[class*="mt-"],
.app-content .pagination-wrapper,
.app-content .cm-pagination-bar,
.app-content .app-table-footer,
.drivers-pagination {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 16px !important;
    min-height: 64px !important;
    margin-top: 0 !important;
    padding: 14px 16px !important;
    border: 1px solid var(--cm-border-soft) !important;
    border-top: 0 !important;
    border-radius: 0 0 16px 16px !important;
    background: #ffffff !important;
    color: var(--cm-muted) !important;
    font-size: 14px !important;
    line-height: 20px !important;
    box-shadow: var(--cm-shadow-card) !important;
    overflow: visible !important;
    clear: both !important;
}

.app-content .app-table-footer nav,
.app-content .table-responsive + .mt-3 nav,
.app-content .table-responsive + div[class*="mt-"] nav,
.app-content .pagination-wrapper nav,
.app-content .cm-pagination-bar nav,
.drivers-pagination nav {
    display: flex !important;
    width: auto !important;
    max-width: 100% !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
}

.app-content .pagination {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    margin: 0 !important;
}

.drivers-table-card .drivers-table-footer,
.driver-tab-table-card .drivers-table-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    min-height: 62px !important;
    padding: 13px 20px !important;
    border-top: 1px solid var(--cm-border-soft) !important;
    background: #ffffff !important;
    color: #667085 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 18px !important;
}

.drivers-table-card .drivers-table-count,
.driver-tab-table-card .drivers-table-count {
    min-width: 0;
    color: #667085;
    font-size: 13px;
    font-weight: 700;
}

.drivers-table-card .drivers-table-footer .drivers-pagination,
.driver-tab-table-card .drivers-table-footer .drivers-pagination {
    width: auto !important;
    min-height: 0 !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    clear: none !important;
}

.drivers-table-card .drivers-table-footer .drivers-pagination nav,
.driver-tab-table-card .drivers-table-footer .drivers-pagination nav {
    margin-left: 0 !important;
}

.app-content .page-link,
.app-content .page-item span.page-link {
    min-width: 32px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 10px !important;
    border: 1px solid var(--cm-border) !important;
    border-radius: var(--cm-radius) !important;
    background: #ffffff !important;
    color: var(--cm-text) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    box-shadow: var(--cm-shadow-sm) !important;
}

.app-content .page-link:hover {
    border-color: #d1d5db !important;
    background: #fafafa !important;
}

.app-content .page-item.active .page-link {
    border-color: var(--cm-primary) !important;
    background: var(--cm-primary) !important;
    color: #ffffff !important;
}

.app-content .page-item.disabled .page-link,
.app-content .page-item.disabled span.page-link {
    color: var(--cm-soft-muted) !important;
    opacity: 0.72 !important;
}

.app-content .drivers-pagination:has(.drivers-per-page),
.app-content .drivers-table-footer .drivers-pagination:has(.drivers-per-page),
.app-content .app-table-footer:has(.drivers-per-page) {
    flex-wrap: wrap !important;
}

.app-content .drivers-per-page {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-left: auto !important;
    color: var(--cm-muted) !important;
    font-size: 13px !important;
    line-height: 18px !important;
    white-space: nowrap !important;
}

.app-content .drivers-per-page-label {
    margin: 0 !important;
    color: var(--cm-muted) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 18px !important;
}

.app-content .drivers-per-page-select {
    height: 32px !important;
    min-width: 64px !important;
    padding: 0 26px 0 10px !important;
    border: 1px solid var(--cm-border) !important;
    border-radius: var(--cm-radius) !important;
    background-color: #ffffff !important;
    color: var(--cm-text) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 20px !important;
    cursor: pointer !important;
}

.app-content .drivers-per-page + nav {
    margin-left: 0 !important;
}

.app-content .app-action-cell,
.app-content td.text-end:last-child,
.app-content table td:last-child:has(.app-table-action) {
    text-align: right !important;
    white-space: nowrap !important;
}

.app-content .app-table-action,
.app-content .app-inline-actions .app-table-action {
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: #18181b !important;
    box-shadow: none !important;
}

.app-content .app-table-action-view,
.app-content .app-table-action-info,
.app-content .app-table-action-report,
.app-content .app-table-action-history,
.app-content .app-table-action-download,
.app-content .app-table-action-edit,
.app-content .app-table-action-delete,
.app-content .app-table-action-complete,
.app-content .app-table-action-close,
.app-content .app-table-action-skip,
.app-content .app-action-view,
.app-content .app-action-info,
.app-content .app-action-edit,
.app-content .app-action-delete,
.app-content .app-action-assign,
.app-content .app-action-save,
.app-content .app-action-close,
.app-content .app-action-muted {
    color: #111111 !important;
}

.app-content .app-table-action svg,
.app-content .app-table-action i {
    width: 18px !important;
    height: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    stroke-width: 2.25 !important;
    color: #111111 !important;
}

.app-content .tasklist {
    min-height: 160px;
}

.app-content .tasklist .task-item {
    border: 1px solid var(--cm-border-soft) !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: var(--cm-shadow-sm) !important;
}

.app-user-photo {
    width: 40px;
    min-width: 40px;
    height: 40px;
    object-fit: cover;
}

.app-user-photo-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    min-width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e5e7eb;
    color: #374151;
    font-weight: 800;
}

.user-role-pill-list {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.user-role-pill,
.user-status-pill {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    white-space: nowrap;
}

.user-role-pill {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #2563eb;
}

.user-role-pill.is-muted,
.user-status-2 {
    border-color: #d4d4d8;
    background: #f4f4f5;
    color: #71717a;
}

.user-status-1 {
    border-color: #a7f3d0;
    background: #ecfdf5;
    color: #059669;
}

.app-popup-modal.app-user-form-popup .modal-dialog {
    width: min(94vw, 1040px);
    max-width: min(94vw, 1040px);
}

.app-popup-modal.app-user-form-popup .modal-content {
    border-radius: 16px;
}

.app-popup-mode.page-user-form .app-container {
    padding: 18px 22px 16px;
}

.app-popup-mode.page-user-form .app-popup-form {
    gap: 14px;
}

.app-popup-mode.page-user-form .app-popup-form-content {
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
}

.user-form-shell {
    display: grid;
    gap: 14px;
}

.user-wizard-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 8px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.user-wizard-step {
    min-width: 0;
    min-height: 68px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    grid-template-areas:
        "index title"
        "index hint";
    align-items: center;
    column-gap: 10px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: #374151;
    text-align: left;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.user-wizard-step:hover {
    border-color: #dbeafe;
    background: #f8fafc;
}

.user-wizard-step span {
    grid-area: index;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
}

.user-wizard-step strong {
    grid-area: title;
    min-width: 0;
    color: inherit;
    font-size: 14px;
    font-weight: 750;
    line-height: 18px;
}

.user-wizard-step small {
    grid-area: hint;
    min-width: 0;
    overflow: hidden;
    color: #71717a;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-wizard-step.is-active {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.user-wizard-step.is-active span {
    background: #2563eb;
    color: #ffffff;
}

.user-wizard-step.is-complete {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #15803d;
}

.user-wizard-step.is-complete span {
    background: #16a34a;
    color: #ffffff;
}

.user-wizard-panel {
    display: none;
}

.user-wizard-panel.is-active {
    display: block;
}

.user-form-panel {
    padding: 18px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.user-form-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid #eef2f7;
}

.user-form-section-header > span {
    width: 40px;
    height: 40px;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 21px;
    line-height: 1;
}

.user-form-section-header > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.user-form-section-header strong {
    color: #111827;
    font-size: 15px;
    font-weight: 750;
    line-height: 20px;
}

.user-form-section-header small {
    color: #71717a;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
}

.user-form-profile-layout {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.user-form-avatar-card {
    min-height: 142px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px;
    border: 1px dashed #d4d4d8;
    border-radius: 14px;
    background: #fafafa;
}

.user-form-avatar-card img,
.user-form-avatar-card span {
    width: 78px;
    height: 78px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.user-form-avatar-card img {
    object-fit: cover;
}

.user-form-avatar-card span {
    background: linear-gradient(135deg, #1d4ed8, #38bdf8);
    color: #ffffff;
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
}

.user-form-avatar-card small {
    color: #71717a;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
}

.user-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
}

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

.user-wizard-summary-card {
    min-width: 0;
    display: grid;
    gap: 4px;
    padding: 14px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #f8fafc;
}

.user-wizard-summary-card span {
    color: #71717a;
    font-size: 12px;
    font-weight: 650;
    line-height: 16px;
}

.user-wizard-summary-card strong {
    min-width: 0;
    overflow: hidden;
    color: #111827;
    font-size: 14px;
    font-weight: 750;
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-wizard-actions {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.user-wizard-actions .btn {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 10px;
    font-weight: 650;
}

.user-form-field {
    min-width: 0;
    width: 100%;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

.user-form-field-wide {
    grid-column: 1 / -1;
}

.app-popup-mode.page-user-form .form-label {
    color: #374151;
    font-size: 13px;
    font-weight: 650;
    line-height: 18px;
}

.app-popup-mode.page-user-form .form-control,
.app-popup-mode.page-user-form .form-select,
.app-popup-mode.page-user-form .select2-container--default .select2-selection--single,
.app-popup-mode.page-user-form .select2-container--default .select2-selection--multiple {
    min-height: 42px;
    border-color: #d4d4d8 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    font-size: 14px;
}

.app-popup-mode.page-user-form .select2-container--default .select2-selection--multiple {
    padding: 4px 8px;
}

.app-popup-mode.page-user-form .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0;
}

.app-popup-mode.page-user-form input[type="file"].form-control {
    padding: 8px 12px;
}

.app-popup-mode.page-user-form .form-text {
    margin-top: 6px;
    color: #71717a;
    font-size: 12px;
}

.app-popup-mode.page-user-form .app-popup-form-footer {
    margin-top: 0;
    padding: 0;
}

@media (max-width: 767.98px) {
    .user-wizard-steps,
    .user-form-profile-layout,
    .user-form-grid,
    .user-wizard-summary {
        grid-template-columns: 1fr;
    }

    .user-wizard-step {
        min-height: 58px;
    }

    .user-form-avatar-card {
        min-height: 116px;
    }
}

.app-popup-modal.app-quick-link-form-popup .modal-dialog {
    width: min(94vw, 860px);
    max-width: min(94vw, 860px);
}

.app-popup-modal.app-quick-link-form-popup .modal-content {
    border-radius: 16px;
}

.app-popup-mode.page-quick-link-form .app-container {
    padding: 18px 22px 16px;
}

.app-popup-mode.page-quick-link-form .app-popup-form {
    gap: 16px;
}

.app-popup-mode.page-quick-link-form .app-popup-form-content {
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
}

.quick-link-form-panel {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 18px;
    padding: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.quick-link-form-preview {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px;
    border: 1px dashed #d4d4d8;
    border-radius: 14px;
    background: #fafafa;
    text-align: center;
}

.quick-link-preview-icon {
    width: 78px;
    height: 78px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 20px;
    background: #eff6ff;
    color: #2563eb;
    box-shadow: inset 0 0 0 1px #bfdbfe;
}

.quick-link-preview-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.quick-link-preview-icon span {
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
}

.quick-link-form-preview strong {
    max-width: 100%;
    overflow: hidden;
    color: #111827;
    font-size: 16px;
    font-weight: 750;
    line-height: 22px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quick-link-form-preview small {
    max-width: 100%;
    overflow: hidden;
    color: #71717a;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quick-link-form-content {
    min-width: 0;
}

.quick-link-form-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid #eef2f7;
}

.quick-link-form-header > span {
    width: 40px;
    height: 40px;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #ecfdf5;
    color: #059669;
    font-size: 21px;
    line-height: 1;
}

.quick-link-form-header > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.quick-link-form-header strong {
    color: #111827;
    font-size: 15px;
    font-weight: 750;
    line-height: 20px;
}

.quick-link-form-header small {
    color: #71717a;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
}

.quick-link-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.quick-link-form-field {
    min-width: 0;
    width: 100%;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

.app-popup-mode.page-quick-link-form .form-label {
    color: #374151;
    font-size: 13px;
    font-weight: 650;
    line-height: 18px;
}

.app-popup-mode.page-quick-link-form .form-control {
    min-height: 42px;
    border-color: #d4d4d8 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    font-size: 14px;
}

.app-popup-mode.page-quick-link-form input[type="file"].form-control {
    padding: 8px 12px;
}

.app-popup-mode.page-quick-link-form .form-text {
    margin-top: 6px;
    color: #71717a;
    font-size: 12px;
}

.app-popup-mode.page-quick-link-form .app-popup-form-footer {
    margin-top: 36px;
    padding: 24px 22px 6px;
    border-top: 1px solid #eef2f7;
    background: #ffffff;
}

.quick-links-admin-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.quick-link-admin-card {
    min-height: 76px;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--cm-border-soft);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: var(--cm-shadow-sm);
}

.quick-link-admin-icon {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 14px;
    background: #eff6ff;
    color: #2563eb;
    box-shadow: inset 0 0 0 1px #bfdbfe;
}

.quick-link-admin-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.quick-link-admin-icon span {
    font-size: 21px;
    font-weight: 800;
    line-height: 1;
}

.quick-link-admin-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.quick-link-admin-main strong,
.quick-link-admin-main a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quick-link-admin-main strong {
    color: var(--cm-text);
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
}

.quick-link-admin-main a {
    color: #2563eb;
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
    text-decoration: none;
}

.quick-link-admin-main a:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

.quick-link-admin-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.quick-links-admin-pagination {
    margin-top: 8px;
}

@media (max-width: 720px) {
    .quick-link-form-panel {
        grid-template-columns: 1fr;
    }

    .quick-link-form-preview {
        min-height: 150px;
    }

    .quick-link-admin-card {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .quick-link-admin-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
}

.messages-page-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.messages-hero {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 18px;
    border: 1px solid var(--cm-border-soft);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: var(--cm-shadow-sm);
}

.messages-hero-icon {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 28px;
    line-height: 1;
}

.messages-hero-main {
    min-width: 0;
}

.messages-hero-main span {
    display: block;
    margin-bottom: 3px;
    color: #71717a;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    text-transform: uppercase;
}

.messages-hero-main h2 {
    margin: 0;
    color: var(--cm-text);
    font-size: 22px;
    font-weight: 750;
    line-height: 28px;
}

.messages-hero-main p {
    margin: 4px 0 0;
    color: #71717a;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}

.message-status-pill {
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    white-space: nowrap;
}

.message-status-pill.is-active {
    border-color: #a7f3d0;
    background: #ecfdf5;
    color: #059669;
}

.message-status-pill.is-empty {
    border-color: #d4d4d8;
    background: #f4f4f5;
    color: #71717a;
}

.messages-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
    gap: 18px;
    align-items: start;
}

.messages-editor-card,
.messages-preview-card {
    border: 1px solid var(--cm-border-soft);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: var(--cm-shadow-sm);
}

.messages-editor-card {
    padding: 18px;
}

.messages-preview-card {
    padding: 16px;
}

.messages-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid #eef2f7;
}

.messages-card-head > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.messages-card-head strong {
    color: var(--cm-text);
    font-size: 15px;
    font-weight: 750;
    line-height: 20px;
}

.messages-card-head span {
    color: #71717a;
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
}

.messages-delete-link {
    min-height: 30px;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid #fecdd3;
    border-radius: 8px;
    background: #fff1f2;
    color: #e11d48;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    text-decoration: none;
}

.messages-delete-link:hover {
    background: #ffe4e6;
    color: #be123c;
}

.messages-editor-form .form-label {
    color: #374151;
    font-size: 13px;
    font-weight: 650;
    line-height: 18px;
}

.messages-textarea {
    min-height: 210px !important;
    height: auto !important;
    resize: vertical;
    border-color: #d4d4d8 !important;
    border-radius: 12px !important;
    color: var(--cm-text);
    font-size: 14px;
    line-height: 20px;
}

.page-messages .messages-editor-form textarea.messages-textarea.form-control {
    min-height: 210px !important;
    height: auto !important;
}

.messages-form-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
    color: #71717a;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
}

.messages-form-meta strong {
    color: var(--cm-text);
    font-weight: 700;
}

.messages-form-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid #eef2f7;
}

.messages-preview-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 88px;
    padding: 14px;
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}

.messages-preview-alert i {
    flex: 0 0 auto;
    margin-top: 1px;
    font-size: 20px;
    line-height: 1;
}

.messages-preview-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 14px;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fafafa;
    color: #71717a;
    font-size: 12px;
    font-weight: 500;
    line-height: 17px;
}

.messages-preview-note i {
    flex: 0 0 auto;
    color: #64748b;
    font-size: 17px;
    line-height: 1;
}

@media (max-width: 991.98px) {
    .messages-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .messages-hero {
        grid-template-columns: 1fr;
    }

    .messages-card-head,
    .messages-form-meta,
    .messages-form-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .messages-form-footer .drivers-btn {
        width: 100%;
    }
}

.notifications-page-shell {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.notifications-panel {
    border: 1px solid var(--cm-border-soft);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: var(--cm-shadow-sm);
    overflow: hidden;
}

.notifications-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 18px;
    border-bottom: 1px solid #eef2f7;
}

.notifications-panel-head > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.notifications-panel-head strong {
    color: var(--cm-text);
    font-size: 16px;
    font-weight: 800;
    line-height: 21px;
}

.notifications-panel-head span {
    color: #64748b;
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
}

.notification-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 38px;
    align-items: center;
    border-bottom: 1px solid #eef2f7;
    color: var(--cm-text);
}

.notification-row:hover {
    background: #f8fafc;
    color: var(--cm-text);
}

.notification-row.is-unread {
    background: #eff6ff;
}

.notification-row:last-child {
    border-bottom: 0;
}

.notification-row-link {
    min-width: 0;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 14px 8px 14px 18px;
    color: var(--cm-text);
    text-decoration: none;
}

.notification-row-link:hover {
    color: var(--cm-text);
}

.notification-row-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 21px;
    line-height: 1;
}

.notification-row-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.notification-row-main strong,
.notification-row-main span,
.notification-row-main small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notification-row-main strong {
    color: var(--cm-text);
    font-size: 14px;
    font-weight: 750;
    line-height: 18px;
}

.notification-row-main span {
    color: #334155;
    font-size: 13px;
    font-weight: 650;
    line-height: 18px;
}

.notification-row-main small,
.notification-row-time {
    color: #94a3b8;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
}

.notification-row-time {
    white-space: nowrap;
}

.notification-row-delete-form {
    margin: 0;
    padding-right: 12px;
}

.notification-delete-button {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #94a3b8;
    font-size: 18px;
    line-height: 1;
}

.notification-delete-button:hover {
    background: #fee2e2;
    color: #dc2626;
}

.notifications-empty {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 22px 18px;
    color: #64748b;
    font-size: 14px;
    font-weight: 500;
}

.notifications-empty i {
    color: #94a3b8;
    font-size: 24px;
    line-height: 1;
}

@media (max-width: 575.98px) {
    .notification-row-link {
        grid-template-columns: 36px minmax(0, 1fr);
        align-items: flex-start;
        padding: 12px;
    }

    .notification-row-icon {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }

    .notification-row-time {
        grid-column: 2;
    }

    .notification-row-delete-form {
        padding-right: 8px;
    }
}

@media (max-width: 760px) {
    .user-form-profile-layout,
    .user-form-grid {
        grid-template-columns: 1fr;
    }

    .user-form-avatar-card {
        min-height: 122px;
    }
}

@media (max-width: 575.98px) {
    .app-content .app-search-form,
    .app-content .app-filters {
        grid-template-columns: 1fr !important;
    }

    .app-content .table-responsive + .mt-3,
    .app-content .table-responsive + div[class*="mt-"],
    .app-content .pagination-wrapper,
    .app-content .cm-pagination-bar,
    .app-content .app-table-footer,
    .drivers-pagination {
        align-items: flex-start !important;
        flex-direction: column !important;
    }
}

/* Shared page headers: match the /drivers layout on every section. */
.app-content .page-title-box.app-breadcrumb {
    display: block !important;
    width: 100% !important;
    margin: 0 0 24px !important;
    padding: 0 !important;
    border: 0 !important;
}

.app-content .app-breadcrumb-row {
    display: flex !important;
    width: 100% !important;
    min-height: 40px !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 16px !important;
}

.app-content .app-page-title {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 32px !important;
    letter-spacing: 0 !important;
}

.app-content .page-title-right {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    margin-top: 0 !important;
    justify-content: flex-end !important;
}

.app-content .app-breadcrumb-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

.app-content .app-breadcrumb-actions .btn,
.app-content .page-title-right .btn {
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 12px !important;
    border-radius: var(--cm-radius) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 20px !important;
}

@media (max-width: 575.98px) {
    .app-content .app-breadcrumb-row {
        align-items: flex-start !important;
        flex-direction: column !important;
    }

    .app-content .page-title-right,
    .app-content .app-breadcrumb-actions {
        width: 100% !important;
        justify-content: flex-start !important;
        margin-left: 0 !important;
    }
}

/* Global typography lock: keep every page on the Manus font scale. */
:root {
    --cm-font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    --bs-body-font-family: var(--cm-font-sans) !important;
    --bs-body-font-size: 14px !important;
    --bs-body-line-height: 20px !important;
}

html,
body,
.app-body,
.app-content-page,
.app-content,
.content-page,
.content,
.container-fluid {
    font-family: var(--cm-font-sans) !important;
    font-size: 14px !important;
    line-height: 20px !important;
    letter-spacing: 0 !important;
}

.app-content :where(
    p,
    span,
    a,
    label,
    small,
    strong,
    div,
    td,
    th,
    li,
    input,
    select,
    textarea,
    button,
    .btn,
    .form-control,
    .form-select,
    .dropdown-item,
    .dropdown-menu,
    .card,
    .card-body,
    .badge,
    .table,
    .dataTable
):not(i):not([class*="mdi"]):not([class*="feather"]):not([data-feather]) {
    font-family: var(--cm-font-sans) !important;
    letter-spacing: 0 !important;
}

.app-content :where(p, span, a, label, small, strong, div, td, th, li),
.modal :where(p, span, a, label, small, strong, div, td, th, li),
.dropdown-menu,
.select2-container,
.select2-dropdown,
.flatpickr-calendar {
    font-family: var(--cm-font-sans) !important;
}

.app-content :where(.btn, button, input, select, textarea, .form-control, .form-select, .select2-selection__rendered),
.modal :where(.btn, button, input, select, textarea, .form-control, .form-select, .select2-selection__rendered),
.select2-results__option,
.select2-search__field {
    font-family: var(--cm-font-sans) !important;
    font-size: 14px !important;
    line-height: 20px !important;
}

.app-content :where(.table, table.dataTable, table.app-data-table),
.app-content :where(.table td, .table th, table.dataTable td, table.dataTable th, table.app-data-table td, table.app-data-table th) {
    font-family: var(--cm-font-sans) !important;
    font-size: 14px !important;
    line-height: 20px !important;
}

.app-content :where(.page-link, .pagination, .app-table-footer, .drivers-pagination),
.app-content :where(.page-link span, .pagination span, .app-table-footer span, .drivers-pagination span) {
    font-family: var(--cm-font-sans) !important;
    font-size: 14px !important;
    line-height: 20px !important;
}

.app-content h1,
.app-content .h1,
.app-content .app-page-title,
.drivers-page-header h1 {
    font-family: var(--cm-font-sans) !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 32px !important;
    letter-spacing: 0 !important;
}

.app-content h2,
.app-content .h2 {
    font-family: var(--cm-font-sans) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 28px !important;
    letter-spacing: 0 !important;
}

.app-content h3,
.app-content .h3,
.app-content .card-title {
    font-family: var(--cm-font-sans) !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 26px !important;
    letter-spacing: 0 !important;
}

.app-content h4,
.app-content .h4,
.app-content h5,
.app-content .h5,
.app-content h6,
.app-content .h6 {
    font-family: var(--cm-font-sans) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 24px !important;
    letter-spacing: 0 !important;
}

/* Keep Select2 filter text optically centered inside the control. */
.app-content .select2-container--default .select2-selection--single,
.drivers-filter-bar .select2-container--default .select2-selection--single {
    height: 36px !important;
    min-height: 36px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
}

.app-content .select2-container--default .select2-selection--single .select2-selection__rendered,
.drivers-filter-bar .select2-container--default .select2-selection--single .select2-selection__rendered {
    height: 34px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 32px 0 12px !important;
    color: var(--cm-text) !important;
    font-family: var(--cm-font-sans) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
}

.app-content .select2-container--default .select2-selection--single .select2-selection__placeholder,
.drivers-filter-bar .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--cm-muted) !important;
}

.app-content .select2-container--default .select2-selection--single .select2-selection__arrow,
.drivers-filter-bar .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 50% !important;
    right: 8px !important;
    height: 20px !important;
    transform: translateY(-50%) !important;
}

/* Tasks board copied from the Manus Kanban layout. */
.page-tasks-redesign .app-container {
    padding: 24px !important;
}

.tasks-page-shell {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.tasks-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.tasks-page-header h1 {
    margin: 0;
    color: var(--cm-text);
    font-family: var(--cm-font-sans);
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    letter-spacing: 0;
}

.tasks-page-header p {
    margin: 2px 0 0;
    color: var(--cm-muted);
    font-size: 14px;
    line-height: 20px;
}

.tasks-primary-button {
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 12px;
    border: 0 !important;
    border-radius: var(--cm-radius);
    background: var(--cm-primary) !important;
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    box-shadow: none !important;
}

.tasks-primary-button i {
    color: currentColor;
    font-size: 16px;
    line-height: 1;
}

.tasks-board {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.tasks-column {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tasks-column-header {
    min-height: 39px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--tasks-tone-border);
    border-radius: 10.4px;
    background: var(--tasks-tone-bg);
}

.tasks-column-header::before {
    width: 16px;
    height: 16px;
    display: inline-flex;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--tasks-tone);
    content: "";
}

.tasks-column-header span {
    color: var(--cm-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}

.tasks-column-title {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 6px;
}

.tasks-column-info {
    width: 16px;
    height: 16px;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--tasks-tone-border);
    border-radius: 999px;
    background: #ffffff;
    color: var(--tasks-tone);
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    line-height: 14px;
    cursor: help;
}

.tasks-column-header strong {
    min-width: 22px;
    height: 21px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    padding: 2px 8px;
    border: 1px solid var(--cm-border);
    border-radius: var(--cm-radius);
    background: #ffffff;
    color: var(--cm-text);
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
}

.tasks-column-amber {
    --tasks-tone: #f59e0b;
    --tasks-tone-bg: rgb(245 158 11 / 0.05);
    --tasks-tone-border: rgb(245 158 11 / 0.20);
}

.tasks-column-blue {
    --tasks-tone: #3b82f6;
    --tasks-tone-bg: rgb(59 130 246 / 0.05);
    --tasks-tone-border: rgb(59 130 246 / 0.20);
}

.tasks-column-purple {
    --tasks-tone: #a855f7;
    --tasks-tone-bg: rgb(168 85 247 / 0.05);
    --tasks-tone-border: rgb(168 85 247 / 0.20);
}

.tasks-column-green {
    --tasks-tone: #10b981;
    --tasks-tone-bg: rgb(16 185 129 / 0.05);
    --tasks-tone-border: rgb(16 185 129 / 0.20);
}

.tasks-list {
    min-height: 128px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tasks-card,
.tasks-empty-card {
    min-width: 0;
    border: 1px solid oklab(0.92 0.001124 -0.003839 / 0.6);
    border-radius: 10.4px;
    background: #ffffff;
    color: var(--cm-text);
}

.tasks-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.tasks-card:hover {
    border-color: var(--cm-border);
    box-shadow: var(--cm-shadow-sm);
}

.tasks-card-ghost {
    opacity: 0.6;
}

.tasks-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.tasks-card-title {
    min-width: 0;
    flex: 1 1 auto;
    color: var(--cm-text) !important;
    font-size: 14px;
    font-weight: 500 !important;
    line-height: 19.25px;
    text-decoration: none !important;
}

.tasks-card-title:hover {
    color: var(--cm-primary) !important;
}

.tasks-card-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.16s ease;
}

.tasks-card:hover .tasks-card-actions {
    opacity: 1;
}

.tasks-card-actions a {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--cm-radius);
    color: var(--cm-text);
    text-decoration: none;
}

.tasks-card-actions a:hover {
    background: #f4f4f5;
}

.tasks-card-actions a.is-danger {
    color: #111111 !important;
}

.tasks-card-actions a.is-danger:hover {
    background: #f4f4f5;
}

.tasks-card-actions i {
    font-size: 16px;
    line-height: 1;
}

.tasks-card-description {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    color: var(--cm-muted);
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.tasks-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.tasks-priority {
    min-height: 21px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border: 1px solid var(--priority-border);
    border-radius: var(--cm-radius);
    background: var(--priority-bg);
    color: var(--priority-color);
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
}

.tasks-priority-green {
    --priority-bg: rgb(16 185 129 / 0.10);
    --priority-border: rgb(16 185 129 / 0.30);
    --priority-color: #059669;
}

.tasks-priority-amber {
    --priority-bg: rgb(245 158 11 / 0.10);
    --priority-border: rgb(245 158 11 / 0.30);
    --priority-color: #d97706;
}

.tasks-priority-red {
    --priority-bg: rgb(239 68 68 / 0.10);
    --priority-border: rgb(239 68 68 / 0.30);
    --priority-color: #dc2626;
}

.tasks-priority-slate {
    --priority-bg: #f4f4f5;
    --priority-border: #e4e4e7;
    --priority-color: #71717a;
}

.tasks-date {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: auto;
    color: var(--cm-muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    white-space: nowrap;
}

.tasks-date.is-overdue {
    color: #ef4444;
}

.tasks-date i {
    font-size: 14px;
    line-height: 1;
}

.tasks-assignee {
    overflow: hidden;
    padding-top: 2px;
    color: var(--cm-muted);
    font-size: 12px;
    line-height: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tasks-status-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding-top: 4px;
    border-top: 1px solid oklab(0.92 0.001124 -0.003839 / 0.3);
}

.tasks-move-link {
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    border-radius: var(--cm-radius);
    background: transparent;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    text-decoration: none !important;
}

.tasks-move-amber {
    color: #f59e0b !important;
}

.tasks-move-blue {
    color: #3b82f6 !important;
}

.tasks-move-purple {
    color: #a855f7 !important;
}

.tasks-move-green {
    color: #10b981 !important;
}

.tasks-move-link:hover {
    background: #f4f4f5;
}

.tasks-empty-card {
    min-height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    color: var(--cm-soft-muted);
    font-size: 13px;
    line-height: 18px;
}

@media (max-width: 1399.98px) {
    .tasks-board {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .tasks-page-header {
        flex-direction: column;
    }

    .tasks-board {
        grid-template-columns: 1fr;
    }
}

/* Compact task create/edit popup, closer to the Manus dialog size. */
.app-popup-modal.app-task-popup .modal-dialog {
    width: min(92vw, 512px) !important;
    max-width: min(92vw, 512px) !important;
    margin: 6vh auto !important;
}

.app-popup-modal.app-task-popup .modal-content {
    max-height: min(88vh, 720px) !important;
    border-radius: 10.4px !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10) !important;
}

.app-popup-modal.app-task-popup .modal-header {
    min-height: 56px !important;
    padding: 0 20px !important;
    border-bottom: 1px solid var(--cm-border) !important;
    background: #ffffff !important;
}

.app-popup-modal.app-task-popup .modal-title {
    color: var(--cm-text) !important;
    font-family: var(--cm-font-sans) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 28px !important;
}

.app-popup-modal.app-task-popup .modal-body {
    background: #ffffff !important;
}

.app-popup-modal.app-task-popup .app-popup-frame {
    max-height: min(calc(88vh - 56px), 664px) !important;
}

.app-popup-mode.page-task-form {
    background: #ffffff !important;
}

.app-popup-mode.page-task-form .app-container {
    padding: 16px 24px 20px !important;
}

.app-popup-mode.page-task-form .app-form-card,
.app-popup-mode.page-task-form .app-form-card-body {
    max-width: 100% !important;
    margin: 0 auto !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.app-popup-mode.page-task-form .app-popup-form {
    max-width: 100% !important;
    gap: 0 !important;
    margin: 0 auto !important;
}

.app-popup-mode.page-task-form .app-popup-form-content {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px 12px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

.app-popup-mode.page-task-form .app-popup-form-content > .mb-3 {
    width: 100% !important;
    min-width: 0 !important;
    margin-bottom: 0 !important;
}

.app-popup-mode.page-task-form .app-popup-form-content > .mb-3:has(textarea),
.app-popup-mode.page-task-form .app-popup-form-content > .mb-3:has(input[type="file"]) {
    grid-column: auto !important;
}

.app-popup-mode.page-task-form .app-popup-form-content > .task-form-title-field,
.app-popup-mode.page-task-form .app-popup-form-content > .task-form-description-field,
.app-popup-mode.page-task-form .app-popup-form-content > .task-form-deadline-field,
.app-popup-mode.page-task-form .app-popup-form-content > .task-form-attachment-field {
    grid-column: 1 / -1 !important;
}

.app-popup-mode.page-task-form .app-popup-form-content > .mb-3.task-form-description-field:has(textarea),
.app-popup-mode.page-task-form .app-popup-form-content > .mb-3.task-form-attachment-field:has(input[type="file"]) {
    grid-column: 1 / -1 !important;
}

.app-popup-mode.page-task-form .form-label {
    margin-bottom: 5px !important;
    color: #3f3f46 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 18px !important;
}

.app-popup-mode.page-task-form .form-control,
.app-popup-mode.page-task-form .form-select,
.app-popup-mode.page-task-form .select2-container--default .select2-selection--single,
.app-popup-mode.page-task-form .select2-container--default .select2-selection--multiple {
    min-height: 36px !important;
    height: 36px !important;
    border-radius: var(--cm-radius) !important;
    border-color: #d8dee7 !important;
    background-color: #ffffff !important;
    color: var(--cm-text) !important;
    font-size: 14px !important;
    line-height: 20px !important;
    box-shadow: none !important;
}

.app-popup-mode.page-task-form .select2-container {
    width: 100% !important;
    min-width: 0 !important;
}

.app-popup-mode.page-task-form .form-control:focus,
.app-popup-mode.page-task-form .form-select:focus,
.app-popup-mode.page-task-form .select2-container--default.select2-container--focus .select2-selection--single,
.app-popup-mode.page-task-form .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: #93c5fd !important;
    box-shadow: 0 0 0 3px rgb(59 130 246 / 0.14) !important;
}

.app-popup-mode.page-task-form .select2-container--default .select2-selection--multiple {
    height: auto !important;
    min-height: 36px !important;
    padding: 3px 6px !important;
}

.app-popup-mode.page-task-form .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 0 !important;
}

.app-popup-mode.page-task-form .select2-container--default .select2-selection--multiple .select2-selection__choice {
    min-height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 2px 8px !important;
    border: 1px solid #a7f3d0 !important;
    border-radius: 6px !important;
    background: #dffbf0 !important;
    color: #059669 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 16px !important;
}

.app-popup-mode.page-task-form .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    position: static !important;
    order: -1 !important;
    margin: 0 !important;
    border: 0 !important;
    color: #059669 !important;
    font-size: 14px !important;
    line-height: 1 !important;
}

.app-popup-mode.page-task-form textarea.form-control {
    min-height: 78px !important;
    resize: vertical;
}

.app-popup-mode.page-task-form input[type="file"].form-control {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

.app-popup-mode.page-task-form .app-popup-form-footer {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    margin-top: 16px !important;
    padding-top: 0 !important;
    background: #ffffff !important;
}

.app-popup-mode.page-task-form .app-popup-cancel,
.app-popup-mode.page-task-form .app-popup-submit {
    min-width: 0 !important;
    height: 36px !important;
    padding: 0 14px !important;
    border-radius: var(--cm-radius) !important;
    font-size: 14px !important;
    line-height: 20px !important;
}

@media (max-width: 767.98px) {
    .app-popup-modal.app-task-popup .modal-dialog {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        margin: 12px auto !important;
    }
}

@media (max-width: 480px) {
    .app-popup-mode.page-task-form .app-popup-form-content {
        grid-template-columns: 1fr !important;
        padding: 14px !important;
    }
}

.warnings-metrics-grid {
    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
    max-width: 760px;
}

.warnings-filter-bar {
    grid-template-columns: minmax(260px, 1.35fr) minmax(180px, 0.8fr) minmax(220px, 1fr) minmax(190px, 0.8fr);
}

.warnings-filter-bar .cm-period-filter {
    width: 100%;
    min-width: 0;
    margin: 0 !important;
}

.warnings-filter-bar .cm-period-trigger {
    width: 100%;
    height: 36px;
    justify-content: center;
    border-radius: var(--cm-radius);
    box-shadow: var(--cm-shadow-sm);
}

.warnings-table {
    min-width: 1220px;
}

.drivers-table-dash {
    color: var(--cm-soft-muted);
}

.drivers-count-warning {
    background: #fef3c7;
    color: #d97706;
    font-weight: 600;
}

.warnings-table th:nth-child(1),
.warnings-table td:nth-child(1) {
    width: 112px;
}

.warnings-table th:nth-child(2),
.warnings-table td:nth-child(2) {
    width: 260px;
}

.warnings-table th:nth-child(3),
.warnings-table td:nth-child(3) {
    width: 300px;
}

.warnings-table th:nth-child(4),
.warnings-table td:nth-child(4),
.warnings-table th:nth-child(5),
.warnings-table td:nth-child(5) {
    width: 150px;
}

.warnings-table th:nth-child(6),
.warnings-table td:nth-child(6),
.warnings-table th:nth-child(7),
.warnings-table td:nth-child(7) {
    width: 96px;
}

.warnings-status-pill,
.warnings-severity-pill,
.warnings-source-pill {
    display: inline-flex;
    min-height: 28px;
    max-width: 100%;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
    white-space: nowrap;
}

.warnings-status-pill {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #2563eb;
}

.warnings-severity-red {
    border-color: #fecaca;
    background: #fee2e2;
    color: #ef4444;
}

.warnings-severity-amber {
    border-color: #fde68a;
    background: #fef3c7;
    color: #d97706;
}

.warnings-severity-green {
    border-color: #a7f3d0;
    background: #dffbf0;
    color: #059669;
}

.warnings-severity-slate,
.warnings-source-pill {
    border-color: #e4e4e7;
    background: #f4f4f5;
    color: #71717f;
}

.warnings-note {
    display: -webkit-box;
    max-width: 360px;
    overflow: hidden;
    color: var(--cm-text);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.warnings-note-cell {
    min-width: 0;
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: 8px;
}

.warnings-note-open {
    width: 30px;
    height: 30px;
    display: none;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 16px;
    line-height: 1;
}

.warnings-note-open.is-visible {
    display: inline-flex;
}

.warnings-note-open:hover {
    border-color: #bfdbfe;
    background: #dbeafe;
    color: #1d4ed8;
}

.warnings-doc-link {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--cm-border);
    border-radius: var(--cm-radius);
    background: #ffffff;
    color: #1d4ed8 !important;
    font-size: 18px;
    text-decoration: none !important;
    box-shadow: var(--cm-shadow-sm);
}

.warnings-doc-link:hover {
    background: #eff6ff;
    text-decoration: none !important;
}

@media (max-width: 1199.98px) {
    .warnings-filter-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .warnings-filter-bar {
        grid-template-columns: 1fr;
    }
}

.app-popup-modal.app-documents-popup .modal-dialog {
    width: min(92vw, 680px) !important;
    max-width: min(92vw, 680px) !important;
    margin: 4vh auto !important;
}

.app-popup-modal.app-history-popup .modal-dialog {
    width: min(92vw, 680px) !important;
    max-width: min(92vw, 680px) !important;
    margin: 8vh auto !important;
}

.app-popup-modal.app-warning-form-popup .modal-dialog {
    width: min(94vw, 720px) !important;
    max-width: min(94vw, 720px) !important;
    margin: 4vh auto !important;
}

.app-popup-modal.app-warning-form-popup .modal-content {
    max-height: min(88vh, 696px) !important;
    border-radius: 10.4px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10) !important;
}

.app-popup-modal.app-warning-form-popup .modal-header {
    min-height: 56px !important;
    padding: 0 20px !important;
    border-bottom: 1px solid var(--cm-border) !important;
    background: #ffffff !important;
}

.app-popup-modal.app-warning-form-popup .modal-title {
    color: var(--cm-text) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 28px !important;
}

.app-popup-mode.page-warning-form {
    background: #ffffff !important;
}

.app-popup-mode.page-warning-form .app-container {
    padding: 16px 24px 20px !important;
}

.app-popup-mode.page-warning-form .app-form-card,
.app-popup-mode.page-warning-form .app-form-card-body {
    max-width: 100% !important;
    margin: 0 auto !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.app-popup-mode.page-warning-form .app-popup-form {
    max-width: 100% !important;
    gap: 0 !important;
    margin: 0 auto !important;
}

.app-popup-mode.page-warning-form .app-popup-form-content {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

.app-popup-mode.page-warning-form .app-popup-form-content > .mb-3 {
    width: 100% !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

.app-popup-mode.page-warning-form .warning-form-notes-field,
.app-popup-mode.page-warning-form .warning-form-file-field,
.app-popup-mode.page-warning-form .warning-origin-card {
    grid-column: 1 / -1 !important;
}

.warning-origin-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
    border-radius: 12px;
    background: #f8fafc;
    color: #71717f;
    font-size: 14px;
    line-height: 20px;
}

.warning-origin-card div {
    min-width: 0;
    display: block;
}

.warning-origin-card span {
    color: #71717f;
}

.warning-origin-card strong {
    color: var(--cm-text);
    font-weight: 700;
}

.app-popup-mode.page-warning-form .form-label {
    margin-bottom: 5px !important;
    color: #3f3f46 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 18px !important;
}

.app-popup-mode.page-warning-form .form-control,
.app-popup-mode.page-warning-form .form-select,
.app-popup-mode.page-warning-form .select2-container--default .select2-selection--single {
    min-height: 36px !important;
    height: 36px !important;
    border-radius: var(--cm-radius) !important;
    border-color: #d8dee7 !important;
    background-color: #ffffff !important;
    color: var(--cm-text) !important;
    font-size: 14px !important;
    line-height: 20px !important;
    box-shadow: none !important;
}

.app-popup-mode.page-warning-form textarea.form-control {
    min-height: 96px !important;
    height: auto !important;
    resize: vertical;
}

.app-popup-mode.page-warning-form input[type="file"].form-control {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

.app-popup-mode.page-warning-form .select2-container {
    width: 100% !important;
}

.app-popup-mode.page-warning-form > .select2-container--open {
    width: auto !important;
    max-width: calc(100vw - 48px) !important;
    overflow: visible !important;
}

.app-popup-mode.page-warning-form .select2-dropdown {
    border: 1px solid #d8dee7 !important;
    border-radius: var(--cm-radius) !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14) !important;
    overflow: hidden !important;
}

.app-popup-mode.page-warning-form .select2-search--dropdown {
    padding: 8px !important;
}

.app-popup-mode.page-warning-form .select2-search--dropdown .select2-search__field {
    height: 30px !important;
    padding: 4px 8px !important;
    border: 1px solid #d8dee7 !important;
    border-radius: 4px !important;
    color: var(--cm-text) !important;
    outline: 0 !important;
}

.app-popup-mode.page-warning-form .select2-results__options {
    max-height: 168px !important;
    overflow-y: auto !important;
}

.app-popup-mode.page-warning-form .select2-results__option {
    min-height: 30px !important;
    padding: 5px 12px !important;
    color: #4b5563 !important;
    font-size: 13px !important;
    line-height: 20px !important;
}

.app-popup-mode.page-warning-form .select2-container--default .select2-results__option--selected,
.app-popup-mode.page-warning-form .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #1f8f3a !important;
    color: #ffffff !important;
}

.app-popup-mode.page-warning-form .app-popup-form-footer {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    margin: 16px auto 0 !important;
    padding-top: 0 !important;
    background: #ffffff !important;
}

.app-popup-mode.page-warning-form .app-popup-cancel,
.app-popup-mode.page-warning-form .app-popup-submit {
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 14px !important;
    border-radius: var(--cm-radius) !important;
    font-size: 14px !important;
    line-height: 20px !important;
}

.app-popup-modal.app-documents-popup .modal-content {
    max-height: min(78vh, 680px) !important;
    border-radius: 10.4px !important;
    overflow: hidden !important;
}

.app-popup-modal.app-history-popup .modal-content {
    max-height: min(78vh, 620px) !important;
    border-radius: 10.4px !important;
    overflow: hidden !important;
}

.app-popup-modal.app-documents-popup .modal-header {
    min-height: 56px !important;
    padding: 0 20px !important;
    border-bottom: 1px solid var(--cm-border) !important;
    background: #ffffff !important;
}

.app-popup-modal.app-documents-popup .modal-title {
    color: var(--cm-text) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 28px !important;
}

.app-popup-modal.app-history-popup .modal-header {
    min-height: 56px !important;
    padding: 0 20px !important;
    border-bottom: 1px solid var(--cm-border) !important;
    background: #ffffff !important;
}

.app-popup-modal.app-history-popup .modal-title {
    color: var(--cm-text) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 28px !important;
}

.app-popup-mode.page-warning-documents,
.app-popup-mode.page-fuel-documents,
.app-popup-mode.page-absence-documents,
.app-popup-mode.page-fine-documents,
.app-popup-mode.page-accident-documents,
.app-popup-mode.page-accident-photos,
.app-popup-mode.page-pave-documents,
.app-popup-mode.page-documentation-documents,
.app-popup-mode.page-preventive-maintenance-documents,
.app-popup-mode.page-preventive-maintenance-history,
.app-popup-mode.page-contract-documents,
.app-popup-mode.page-incidence-documents {
    background: #ffffff !important;
}

.app-popup-mode.page-warning-documents .app-container,
.app-popup-mode.page-fuel-documents .app-container,
.app-popup-mode.page-absence-documents .app-container,
.app-popup-mode.page-fine-documents .app-container,
.app-popup-mode.page-accident-documents .app-container,
.app-popup-mode.page-accident-photos .app-container,
.app-popup-mode.page-pave-documents .app-container,
.app-popup-mode.page-documentation-documents .app-container,
.app-popup-mode.page-preventive-maintenance-documents .app-container,
.app-popup-mode.page-preventive-maintenance-history .app-container,
.app-popup-mode.page-contract-documents .app-container,
.app-popup-mode.page-incidence-documents .app-container {
    padding: 20px !important;
}

.warning-documents-panel,
.fuel-documents-panel,
.absence-documents-panel,
.fine-documents-panel,
.accident-documents-panel,
.accident-photos-panel,
.pave-documents-panel,
.documentation-documents-panel,
.preventive-maintenance-documents-panel,
.preventive-maintenance-history-panel,
.contract-documents-panel,
.incidence-documents-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 640px;
    margin: 0 auto;
}

.warning-documents-alert {
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid #a7f3d0;
    border-radius: var(--cm-radius);
    background: #ecfdf5;
    color: #059669;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}

.warning-document-current,
.warning-document-upload {
    border: 1px solid var(--cm-border-soft);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: var(--cm-shadow-sm);
}

.warning-document-current {
    overflow: hidden;
}

.warning-document-current-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--cm-border-soft);
}

.warning-document-current-head h2 {
    margin: 0;
    color: var(--cm-text);
    font-size: 16px;
    font-weight: 700;
    line-height: 22px;
}

.warning-document-current-head p {
    margin: 2px 0 0;
    color: var(--cm-muted);
    font-size: 13px;
    line-height: 18px;
}

.warning-document-context {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-top: 4px;
    color: var(--cm-muted);
    font-size: 13px;
    line-height: 18px;
}

.warning-document-context > span + span::before,
.warning-document-context .app-driver-avatar-link + span::before,
.warning-document-context > span + .app-driver-avatar-link::before {
    content: "·";
    margin-right: 10px;
    color: var(--cm-muted);
}

.warning-document-context .app-driver-avatar-link {
    gap: 6px !important;
    font-size: 13px;
}

.warning-document-context .app-driver-avatar-img,
.warning-document-context .app-driver-avatar-initials {
    width: 22px !important;
    height: 22px !important;
    font-size: 10px;
}

.page-contract-documents .contract-documents-panel {
    max-width: 640px;
}

.page-contract-documents .warning-document-current-head,
.page-warning-documents .warning-document-current-head,
.page-fuel-documents .warning-document-current-head,
.page-absence-documents .warning-document-current-head,
.page-fine-documents .warning-document-current-head,
.page-accident-documents .warning-document-current-head,
.page-accident-photos .warning-document-current-head,
.page-pave-documents .warning-document-current-head,
.page-documentation-documents .warning-document-current-head,
.page-incidence-documents .warning-document-current-head {
    align-items: flex-start;
    padding: 14px 16px;
    background: #ffffff;
}

.contract-document-summary,
.app-document-summary {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.contract-document-summary h2,
.app-document-summary h2 {
    margin: 0;
}

.contract-document-identity,
.app-document-identity {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
}

.contract-document-driver .app-driver-avatar-link,
.app-document-primary .app-driver-avatar-link {
    width: max-content;
    min-width: 0;
    max-width: min(100%, 260px);
    display: inline-flex !important;
    gap: 10px !important;
    color: var(--cm-text);
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
}

.contract-document-driver .app-driver-avatar-link:hover,
.contract-document-driver .app-driver-avatar-link:focus,
.app-document-primary .app-driver-avatar-link:hover,
.app-document-primary .app-driver-avatar-link:focus {
    color: #1d4ed8;
    text-decoration: none;
}

.contract-document-driver .app-driver-avatar-img,
.contract-document-driver .app-driver-avatar-initials,
.app-document-primary .app-driver-avatar-img,
.app-document-primary .app-driver-avatar-initials {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border: 2px solid #e5e7eb;
    box-shadow: none;
}

.contract-document-driver .app-driver-avatar-initials,
.app-document-primary .app-driver-avatar-initials {
    background: #eef2ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 800;
}

.contract-document-driver .app-driver-avatar-name,
.app-document-primary .app-driver-avatar-name {
    max-width: 210px;
    color: inherit;
    font-size: 14px;
    font-weight: 700;
}

.app-document-primary-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--cm-text);
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
}

.app-document-primary-label i {
    color: #2563eb;
    font-size: 18px;
    line-height: 1;
}

.contract-document-meta-list,
.app-document-meta-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.contract-document-meta-item,
.app-document-meta-item {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
}

.contract-document-meta-item i,
.app-document-meta-item i {
    color: #2563eb;
    font-size: 15px;
    line-height: 1;
}

.page-contract-documents .warning-document-current-head .drivers-btn,
.page-warning-documents .warning-document-current-head .drivers-btn,
.page-fuel-documents .warning-document-current-head .drivers-btn,
.page-absence-documents .warning-document-current-head .drivers-btn,
.page-fine-documents .warning-document-current-head .drivers-btn,
.page-accident-documents .warning-document-current-head .drivers-btn,
.page-accident-photos .warning-document-current-head .drivers-btn,
.page-pave-documents .warning-document-current-head .drivers-btn,
.page-documentation-documents .warning-document-current-head .drivers-btn,
.page-incidence-documents .warning-document-current-head .drivers-btn {
    flex: 0 0 auto;
    min-height: 36px;
    margin-left: auto;
}

.warning-document-preview {
    height: min(42vh, 300px);
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
}

.warning-document-preview img,
.warning-document-preview iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.warning-document-preview img {
    object-fit: contain;
    padding: 12px;
}

.accident-photos-current {
    overflow: visible;
}

.accident-photos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 12px;
    padding: 14px;
    background: #f8fafc;
}

.accident-photo-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--cm-border-soft);
    border-radius: 10px;
    background: #ffffff;
    box-shadow: var(--cm-shadow-sm);
}

.accident-photo-preview {
    aspect-ratio: 1;
    display: block;
    overflow: hidden;
    background: #eef2f7;
}

.accident-photo-preview img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .18s ease;
}

.accident-photo-preview:hover img,
.accident-photo-preview:focus img {
    transform: scale(1.04);
}

.accident-photo-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px;
}

.accident-photo-meta > div:first-child {
    min-width: 0;
}

.accident-photo-meta strong,
.accident-photo-meta span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.accident-photo-meta strong {
    color: var(--cm-text);
    font-size: 13px;
    font-weight: 700;
    line-height: 18px;
}

.accident-photo-meta span {
    margin-top: 2px;
    color: var(--cm-muted);
    font-size: 12px;
    line-height: 16px;
}

.accident-photo-upload {
    padding: 14px;
}

.accident-photo-preview video,
.accident-photo-file {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef2f7;
    color: var(--cm-muted);
    font-size: 30px;
}

.accident-photo-preview video {
    object-fit: cover;
}

.accident-form-photos {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.accident-form-photos-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.accident-form-photos-count {
    color: var(--cm-muted);
    font-size: 13px;
    font-weight: 600;
}

.accident-form-photos-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.accident-form-photo {
    width: 92px;
    margin: 0;
}

.accident-form-photo a {
    width: 92px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--cm-border-soft);
    border-radius: 8px;
    background: #eef2f7;
    color: var(--cm-muted);
    font-size: 24px;
}

.accident-form-photo a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.accident-form-photo figcaption {
    margin-top: 4px;
    overflow: hidden;
    color: var(--cm-muted);
    font-size: 11px;
    line-height: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.accident-form-photos-empty {
    margin: 0;
    color: var(--cm-muted);
    font-size: 13px;
}

.accident-form-photos-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 14px;
    border: 1px dashed var(--cm-border);
    border-radius: 10px;
    background: #f8fafc;
    color: var(--cm-text);
    text-align: center;
    cursor: pointer;
}

.accident-form-photos-upload.is-invalid {
    border-color: #dc3545;
}

.accident-form-photos-upload i {
    font-size: 22px;
    color: #1d4ed8;
}

.accident-form-photos-upload span {
    font-size: 14px;
    font-weight: 600;
}

.accident-form-photos-upload small {
    color: var(--cm-muted);
    font-size: 12px;
}

.accident-form-photos-upload input {
    display: none;
}

.accident-form-photos-selected {
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--cm-muted);
    font-size: 12px;
}

.accident-form-photos-selected:not(:empty) {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.accident-form-photos-selected li {
    padding: 2px 8px;
    border-radius: 999px;
    background: #eef2ff;
    color: #1d4ed8;
}

.warning-document-file,
.warning-document-empty {
    min-height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px;
    text-align: center;
}

.warning-document-file i,
.warning-document-empty i {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    background: #eff6ff;
    color: var(--cm-primary);
    font-size: 24px;
}

.warning-document-file strong,
.warning-document-empty h2 {
    margin: 0;
    color: var(--cm-text);
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
}

.warning-document-file span,
.warning-document-empty p {
    margin: 0;
    color: var(--cm-muted);
    font-size: 13px;
    line-height: 18px;
}

.warning-document-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-top: 1px solid var(--cm-border-soft);
    color: var(--cm-muted);
    font-size: 13px;
    line-height: 18px;
}

.warning-document-meta span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preventive-documents-list {
    display: grid;
}

.preventive-document-row {
    min-width: 0;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid var(--cm-border-soft);
}

.preventive-document-row:first-child {
    border-top: 0;
}

.preventive-document-icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    background: #eff6ff;
    color: var(--cm-primary);
    font-size: 20px;
}

.preventive-document-main {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.preventive-document-main strong,
.preventive-document-main small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preventive-document-main strong {
    color: var(--cm-text);
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
}

.preventive-document-main small {
    color: var(--cm-muted);
    font-size: 12px;
    line-height: 16px;
}

.preventive-document-actions {
    justify-content: flex-end;
}

.preventive-document-actions form {
    margin: 0;
}

.preventive-history-list {
    display: grid;
    gap: 10px;
    padding: 12px 16px 16px;
}

.page-preventive-maintenance-history .warning-document-current-head {
    align-items: center;
    padding: 10px 16px;
}

.page-preventive-maintenance-history .warning-document-context {
    margin-top: 0;
}

.preventive-history-item {
    min-width: 0;
    display: grid;
    grid-template-columns: 38px 28px minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--cm-border-soft);
    border-radius: 10px;
    background: #ffffff;
}

.preventive-history-item.is-current {
    border-color: #bfdbfe;
    background: #eff6ff;
}

.preventive-history-number {
    color: var(--cm-muted);
    font-size: 14px;
    font-weight: 800;
    line-height: 20px;
}

.preventive-history-icon {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cm-muted);
    font-size: 18px;
}

.preventive-history-main {
    min-width: 0;
    display: grid;
    gap: 6px;
}

.preventive-history-title {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.preventive-history-title > strong {
    min-width: 0;
    overflow: hidden;
    color: var(--cm-text);
    font-size: 14px;
    font-weight: 800;
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preventive-history-meta {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    color: var(--cm-muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
}

.preventive-history-meta span {
    min-width: 0;
}

.preventive-history-meta i {
    font-size: 14px;
    line-height: 1;
}

.preventive-history-meta.is-muted {
    color: #9ca3af;
}

.preventive-history-main p {
    margin: 0;
    color: var(--cm-muted);
    font-size: 12px;
    line-height: 16px;
}

.warning-document-upload {
    padding: 12px 16px;
    box-shadow: none;
}

.warning-document-upload label {
    display: block;
    margin-bottom: 8px;
    color: var(--cm-text);
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
}

.warning-document-upload-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.warning-document-upload-row .form-control {
    height: 36px;
    min-height: 36px;
    padding-top: 6px;
    padding-bottom: 6px;
}

.warning-document-upload p {
    margin: 8px 0 0;
    color: var(--cm-muted);
    font-size: 12px;
    line-height: 16px;
}

.warning-document-footer {
    display: flex;
    justify-content: flex-end;
}

.compliance-gaps-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.compliance-gaps-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.compliance-gaps-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--cm-border);
    border-radius: 10px;
    background: #fafbfd;
}

.compliance-gaps-icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 10px;
    background: rgba(255, 63, 79, 0.12);
    color: #dc2626;
    font-size: 19px;
}

.compliance-gaps-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.compliance-gaps-body strong {
    color: var(--cm-text);
    font-size: 15px;
    font-weight: 750;
    line-height: 20px;
}

.compliance-gaps-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: var(--cm-muted);
    font-size: 13px;
    line-height: 18px;
}

.compliance-gaps-meta i {
    font-size: 15px;
    vertical-align: -2px;
}

.compliance-gaps-help {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--cm-muted);
    font-size: 13px;
    line-height: 18px;
}

.compliance-gaps-help i {
    font-size: 16px;
    color: #1d4ed8;
}

@media (max-width: 767.98px) {
    .app-popup-modal.app-compliance-gaps-popup .modal-dialog {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        margin: 12px auto !important;
    }

    .app-popup-modal.app-warning-form-popup .modal-dialog {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        margin: 12px auto !important;
    }

    .app-popup-mode.page-warning-form .app-popup-form-content {
        grid-template-columns: 1fr !important;
        padding: 0 !important;
    }

    .app-popup-modal.app-documents-popup .modal-dialog {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        margin: 12px auto !important;
    }

    .app-popup-modal.app-history-popup .modal-dialog {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        margin: 12px auto !important;
    }

    .warning-document-upload-row {
        grid-template-columns: 1fr;
    }

    .warning-document-current-head {
        flex-direction: column;
    }

    .page-contract-documents .warning-document-current-head .drivers-btn {
        margin-left: 0;
    }

    .page-warning-documents .warning-document-current-head .drivers-btn,
    .page-fuel-documents .warning-document-current-head .drivers-btn,
    .page-absence-documents .warning-document-current-head .drivers-btn,
    .page-fine-documents .warning-document-current-head .drivers-btn,
    .page-accident-documents .warning-document-current-head .drivers-btn,
    .page-pave-documents .warning-document-current-head .drivers-btn,
    .page-documentation-documents .warning-document-current-head .drivers-btn,
    .page-incidence-documents .warning-document-current-head .drivers-btn {
        margin-left: 0;
    }

    .app-popup-mode.page-warning-documents .app-container,
    .app-popup-mode.page-fuel-documents .app-container,
    .app-popup-mode.page-absence-documents .app-container,
    .app-popup-mode.page-fine-documents .app-container,
    .app-popup-mode.page-accident-documents .app-container,
    .app-popup-mode.page-accident-photos .app-container,
    .app-popup-mode.page-pave-documents .app-container,
    .app-popup-mode.page-documentation-documents .app-container,
    .app-popup-mode.page-preventive-maintenance-documents .app-container,
    .app-popup-mode.page-preventive-maintenance-history .app-container,
    .app-popup-mode.page-contract-documents .app-container,
    .app-popup-mode.page-incidence-documents .app-container {
        padding: 16px !important;
    }

}

@media (max-width: 479.98px) {
    .preventive-document-row {
        grid-template-columns: 40px minmax(0, 1fr);
    }

    .preventive-document-actions {
        grid-column: 2;
        justify-content: flex-start;
    }

    .preventive-history-item {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .preventive-history-icon {
        display: none;
    }

    .preventive-history-item > .app-table-action {
        grid-column: 2;
        justify-self: start;
    }
}

.absences-filter-bar {
    grid-template-columns: minmax(320px, 1.4fr) minmax(220px, 1fr) minmax(240px, 1fr) minmax(190px, 0.8fr);
}

.absences-filter-bar .cm-period-filter {
    width: 100%;
    min-width: 0;
    margin: 0 !important;
}

.absences-filter-bar .cm-period-trigger {
    width: 100%;
    height: 36px;
    justify-content: center;
    border-radius: var(--cm-radius);
    box-shadow: var(--cm-shadow-sm);
}

.absences-table {
    min-width: 1160px;
}

.absences-table th:nth-child(1),
.absences-table td:nth-child(1) {
    width: 270px;
}

.absences-table th:nth-child(2),
.absences-table td:nth-child(2) {
    width: 135px;
}

.absences-table th:nth-child(3),
.absences-table td:nth-child(3) {
    width: 160px;
}

.absences-table th:nth-child(4),
.absences-table td:nth-child(4) {
    width: 360px;
}

.absences-table th:nth-child(8),
.absences-table td:nth-child(8) {
    width: 180px;
}

.absence-date-type {
    min-width: 0;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.absence-date-value {
    color: var(--cm-text);
    font-weight: 600;
    line-height: 20px;
}

.absence-type-pill {
    display: inline-flex;
    min-height: 28px;
    max-width: 100%;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
    white-space: nowrap;
}

.absence-status-pill {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    line-height: 18px;
    white-space: nowrap;
}

.absence-status-1 {
    border-color: #fde68a;
    background: #fffbeb;
    color: #b45309;
}

.absence-status-2 {
    border-color: #a7f3d0;
    background: #ecfdf5;
    color: #047857;
}

.absence-status-3 {
    border-color: #fecaca;
    background: #fef2f2;
    color: #b91c1c;
}

.absence-warning-link,
.absence-warning-action {
    min-width: 46px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 1px solid #fbbf24;
    border-radius: 7px;
    background: #fffbeb;
    color: #b45309 !important;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.absence-warning-action {
    border-color: var(--cm-border-soft);
    background: #ffffff;
    color: #71717f !important;
}

.absence-warning-link:hover,
.absence-warning-action:hover {
    border-color: #f59e0b;
    color: #92400e !important;
}

.absence-warning-link.is-static {
    pointer-events: none;
}

.absence-reason {
    display: -webkit-box;
    max-width: 100%;
    overflow: hidden;
    color: var(--cm-text);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.absence-reason-cell {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.absence-reason-open {
    width: 30px;
    height: 30px;
    display: none;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--cm-border-soft);
    border-radius: var(--cm-radius);
    background: #ffffff;
    color: #2563eb;
    font-size: 18px;
    line-height: 1;
    box-shadow: var(--cm-shadow-sm);
}

.absence-reason-open.is-visible {
    display: inline-flex;
}

.absence-reason-open:hover {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.absence-reason-modal .modal-dialog {
    width: min(92vw, 560px);
    max-width: min(92vw, 560px);
}

.absence-reason-modal .modal-content {
    border: 1px solid var(--cm-border);
    border-radius: 10.4px;
    box-shadow: var(--cm-shadow-md);
}

.absence-reason-modal .modal-header {
    min-height: 56px;
    padding: 0 20px;
    border-bottom: 1px solid var(--cm-border);
}

.absence-reason-modal .modal-title {
    color: var(--cm-text);
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
}

.absence-reason-modal .modal-body {
    padding: 18px 20px 20px;
}

.absence-reason-modal-text {
    margin: 0;
    color: var(--cm-text);
    font-size: 14px;
    line-height: 22px;
    white-space: pre-wrap;
    word-break: break-word;
}

.warnings-doc-link.is-empty {
    color: #71717f !important;
}

.app-popup-modal.app-absence-form-popup .modal-dialog {
    width: min(92vw, 720px) !important;
    max-width: min(92vw, 720px) !important;
    margin: 8vh auto !important;
}

.app-popup-modal.app-absence-form-popup .modal-content {
    max-height: min(76vh, 640px) !important;
    border-radius: 10.4px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10) !important;
}

.app-popup-modal.app-absence-form-popup .modal-header {
    min-height: 56px !important;
    padding: 0 20px !important;
    border-bottom: 1px solid var(--cm-border) !important;
    background: #ffffff !important;
}

.app-popup-modal.app-absence-form-popup .modal-title {
    color: var(--cm-text) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 28px !important;
}

.app-popup-mode.page-absence-form {
    background: #f8fafc !important;
}

.app-popup-mode.page-absence-form .app-container {
    padding: 16px !important;
}

.app-popup-mode.page-absence-form .app-form-card,
.app-popup-mode.page-absence-form .app-form-card-body {
    max-width: 680px !important;
    margin: 0 auto !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.app-popup-mode.page-absence-form .app-popup-form {
    max-width: 680px !important;
    gap: 12px !important;
    margin: 0 auto !important;
}

.app-popup-mode.page-absence-form .app-popup-form-content {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px 14px !important;
    padding: 16px !important;
    border: 1px solid var(--cm-border-soft) !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: var(--cm-shadow-sm) !important;
}

.app-popup-mode.page-absence-form .app-popup-form-content > .mb-3 {
    width: 100% !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

.app-popup-mode.page-absence-form .absence-form-reason-field,
.app-popup-mode.page-absence-form .absence-form-file-field,
.app-popup-mode.page-absence-form .absence-form-status-field {
    grid-column: 1 / -1 !important;
}

.absence-status-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.absence-status-option {
    min-width: 0;
    margin: 0;
}

.absence-status-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.absence-status-option span {
    display: flex;
    width: 100%;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border: 1px solid #d8dee7;
    border-radius: var(--cm-radius);
    background: #ffffff;
    color: #71717f;
    font-size: 14px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    transition: border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
}

.absence-status-option input:focus-visible + span {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .16);
}

.absence-status-option input:checked + span,
.absence-status-option.is-selected span {
    color: var(--cm-text);
}

.absence-status-option:has(input:checked) span {
    color: var(--cm-text);
}

.absence-status-option-1 input:checked + span,
.absence-status-option-1.is-selected span {
    border-color: #fbbf24;
    background: #fffbeb;
    color: #b45309;
}

.absence-status-option-1:has(input:checked) span {
    border-color: #fbbf24;
    background: #fffbeb;
    color: #b45309;
}

.absence-status-option-2 input:checked + span,
.absence-status-option-2.is-selected span {
    border-color: #34d399;
    background: #ecfdf5;
    color: #047857;
}

.absence-status-option-2:has(input:checked) span {
    border-color: #34d399;
    background: #ecfdf5;
    color: #047857;
}

.absence-status-option-3 input:checked + span,
.absence-status-option-3.is-selected span {
    border-color: #fca5a5;
    background: #fef2f2;
    color: #b91c1c;
}

.absence-status-option-3:has(input:checked) span {
    border-color: #fca5a5;
    background: #fef2f2;
    color: #b91c1c;
}

.app-popup-mode.page-absence-form .form-label {
    margin-bottom: 5px !important;
    color: #3f3f46 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 18px !important;
}

.app-popup-mode.page-absence-form .form-control,
.app-popup-mode.page-absence-form .form-select,
.app-popup-mode.page-absence-form .select2-container--default .select2-selection--single {
    min-height: 36px !important;
    height: 36px !important;
    border-radius: var(--cm-radius) !important;
    border-color: #d8dee7 !important;
    background-color: #ffffff !important;
    color: var(--cm-text) !important;
    font-size: 14px !important;
    line-height: 20px !important;
    box-shadow: none !important;
}

.app-popup-mode.page-absence-form textarea.form-control {
    min-height: 96px !important;
    height: auto !important;
    resize: vertical;
}

.app-popup-mode.page-absence-form input[type="file"].form-control {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

.app-popup-mode.page-absence-form .select2-container {
    width: 100% !important;
}

.app-popup-mode.page-absence-form .app-popup-form-footer {
    width: 100% !important;
    max-width: 680px !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    margin: 0 auto !important;
    padding-top: 12px !important;
}

.app-popup-mode.page-absence-form .app-popup-cancel,
.app-popup-mode.page-absence-form .app-popup-submit {
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 14px !important;
    border-radius: var(--cm-radius) !important;
    font-size: 14px !important;
    line-height: 20px !important;
}

@media (max-width: 1199.98px) {
    .absences-filter-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .absences-filter-bar {
        grid-template-columns: 1fr;
    }

    .app-popup-modal.app-absence-form-popup .modal-dialog {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        margin: 12px auto !important;
    }

    .app-popup-mode.page-absence-form .app-popup-form-content {
        padding: 14px !important;
    }
}

@media (max-width: 575.98px) {
    .app-popup-mode.page-absence-form .app-popup-form-content {
        grid-template-columns: 1fr !important;
    }

    .absence-status-options {
        grid-template-columns: 1fr;
    }
}

.fuel-metrics-grid {
    width: 100%;
    max-width: none;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.fuel-metrics-grid .drivers-metric-card {
    min-height: 96px;
    padding: 14px 16px;
}

.fuel-metrics-grid .drivers-metric-card strong {
    font-size: 22px;
    line-height: 28px;
    white-space: nowrap;
}

.fuel-metrics-grid .drivers-metric-card span {
    white-space: nowrap;
}

.fuel-filter-bar {
    grid-template-columns: minmax(180px, 224px) minmax(180px, 224px) minmax(150px, 162px) minmax(170px, 178px) minmax(180px, 184px) minmax(150px, 160px) minmax(150px, 160px);
}

.fuel-filter-bar .cm-period-filter {
    width: 100%;
    min-width: 0;
    margin: 0 !important;
}

.fuel-filter-bar .cm-period-trigger {
    width: 100%;
    height: 36px;
    justify-content: center;
    border-radius: var(--cm-radius);
    box-shadow: var(--cm-shadow-sm);
}

.fuel-table {
    min-width: 1360px;
}

.fuel-table th:nth-child(1),
.fuel-table td:nth-child(1) {
    width: 150px;
}

.fuel-table th:nth-child(2),
.fuel-table td:nth-child(2) {
    width: 260px;
}

.fuel-table th:nth-child(3),
.fuel-table td:nth-child(3),
.fuel-table th:nth-child(8),
.fuel-table td:nth-child(8) {
    width: 190px;
}

.fuel-table th:nth-child(4),
.fuel-table td:nth-child(4),
.fuel-table th:nth-child(5),
.fuel-table td:nth-child(5),
.fuel-table th:nth-child(6),
.fuel-table td:nth-child(6),
.fuel-table th:nth-child(7),
.fuel-table td:nth-child(7),
.fuel-table th:nth-child(9),
.fuel-table td:nth-child(9) {
    width: 100px;
}

.fuel-van-link {
    display: inline-flex;
    flex-direction: column;
    color: var(--cm-text);
    text-decoration: none;
}

.fuel-van-link span {
    color: #18181b;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
}

.fuel-van-link small {
    color: var(--cm-muted);
    font-size: 13px;
    line-height: 18px;
}

.fuel-type-pill {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
    white-space: nowrap;
}

.fuel-type-amber {
    border-color: #fde68a;
    background: #fef3c7;
    color: #d97706;
}

.fuel-type-blue {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #2563eb;
}

.fuel-type-green {
    border-color: #a7f3d0;
    background: #dffbf0;
    color: #059669;
}

.fuel-type-slate {
    border-color: #e4e4e7;
    background: #f4f4f5;
    color: #71717f;
}

.fuel-price {
    color: var(--cm-text);
    font-weight: 700;
    white-space: nowrap;
}

.fuel-comment {
    display: -webkit-box;
    max-width: 220px;
    overflow: hidden;
    color: var(--cm-text);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.page-fuel-redesign {
    color: #24211f;
    font-family: var(--cm-font-sans);
    font-size: 14px;
    line-height: 20px;
}

.page-fuel-redesign .fuel-page-shell {
    gap: 24px;
    color: #24211f;
}

.page-fuel-redesign .drivers-page-header h1 {
    color: #24211f;
    font-family: var(--cm-font-sans);
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
}

.page-fuel-redesign .drivers-page-header p {
    color: #71717a;
    font-size: 14px;
    line-height: 20px;
}

.page-fuel-redesign .drivers-page-actions {
    gap: 8px;
}

.page-fuel-redesign .drivers-page-actions .drivers-btn {
    border-radius: 8.4px;
    font-size: 14px;
    font-weight: 500;
}

.page-fuel-redesign .drivers-page-actions .drivers-btn-outline {
    height: 32px;
    border-color: #e5e7eb !important;
    background: transparent !important;
    color: #24211f !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}

.page-fuel-redesign .drivers-page-actions .drivers-btn-primary {
    height: 36px;
    padding: 0 12px;
    border-color: #1447e6 !important;
    background: #1447e6 !important;
    color: #eff6ff !important;
}

.page-fuel-redesign .fuel-metrics-grid {
    gap: 16px;
}

.page-fuel-redesign .fuel-metrics-grid .drivers-metric-card {
    min-height: 96px;
    border-color: #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: none;
}

.page-fuel-redesign .fuel-metrics-grid .drivers-metric-card:hover {
    border-color: #d4d4d8;
    box-shadow: none;
    transform: none;
}

.page-fuel-redesign .fuel-metrics-grid .drivers-metric-card strong {
    color: #24211f;
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
}

.page-fuel-redesign .fuel-metrics-grid .drivers-metric-card span {
    color: #71717a;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.page-fuel-redesign .fuel-filter-bar {
    gap: 8px;
}

.page-fuel-redesign .fuel-filter-bar .select2-container {
    width: 100% !important;
}

.page-fuel-redesign .fuel-filter-bar .form-control,
.page-fuel-redesign .fuel-filter-bar .select2-container .select2-selection--single,
.page-fuel-redesign .fuel-filter-bar .cm-period-trigger {
    height: 36px;
    border-color: #e5e7eb !important;
    border-radius: 8.4px !important;
    background: transparent !important;
    color: #24211f !important;
    font-size: 14px;
    line-height: 20px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05) !important;
}

.page-fuel-redesign .fuel-filter-bar .select2-container--default .select2-selection--single .select2-selection__rendered,
.page-fuel-redesign .fuel-filter-bar .cm-period-trigger {
    color: #24211f;
    font-size: 14px;
    font-weight: 400;
}

.page-fuel-redesign .fuel-filter-bar .form-control::placeholder {
    color: #71717a;
}

.page-fuel-redesign .fuel-table-card {
    border-color: #e5e7eb;
    border-radius: 8px;
    box-shadow: none;
}

.page-fuel-redesign .fuel-table {
    color: #24211f;
    font-family: var(--cm-font-sans);
    font-size: 14px;
    line-height: 20px;
}

.page-fuel-redesign .fuel-table thead th {
    height: 40px;
    padding: 12px 16px;
    border-bottom-color: #e5e7eb;
    color: #71717a;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    text-transform: uppercase;
}

.page-fuel-redesign .fuel-table tbody td {
    padding: 14px 16px;
    border-bottom-color: #e5e7eb;
    color: #24211f;
    font-size: 14px;
    line-height: 20px;
}

.page-fuel-redesign .fuel-van-link span,
.page-fuel-redesign .fuel-price {
    color: #24211f;
    font-weight: 500;
}

.page-fuel-redesign .fuel-van-link small,
.page-fuel-redesign .drivers-table-dash,
.page-fuel-redesign .fuel-comment,
.page-fuel-redesign .drivers-pagination-summary {
    color: #71717a;
}

.page-fuel-redesign .fuel-type-pill {
    min-height: 24px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
}

.fuel-export-dropdown .dropdown-menu {
    min-width: 160px;
}

@media (max-width: 991.98px) {
    .fuel-metrics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

@media (max-width: 767.98px) {
    .fuel-metrics-grid {
        grid-template-columns: 1fr;
    }

    .fuel-filter-bar {
        grid-template-columns: 1fr;
    }

}

.evaluations-filter-bar {
    grid-template-columns: minmax(220px, 1.4fr) repeat(5, minmax(145px, 1fr));
}

.evaluations-metrics-grid {
    max-width: none;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.evaluations-metric-card {
    min-height: 118px;
    cursor: default;
}

.evaluations-metric-card:hover {
    transform: none;
}

.page-evaluations-redesign .evaluations-metrics-grid .drivers-metric-card {
    min-height: 96px;
    padding: 14px 16px;
}

.page-evaluations-redesign .evaluations-metrics-grid .drivers-metric-card strong {
    font-size: 22px;
    line-height: 28px;
    white-space: nowrap;
}

.page-evaluations-redesign .evaluations-metrics-grid .drivers-metric-card span {
    font-weight: 400;
    white-space: nowrap;
}

.page-evaluations-redesign .drivers-table-card {
    border-color: #e5e7eb;
    border-radius: 8px;
    box-shadow: none;
}

.page-evaluations-redesign .evaluations-table {
    color: #24211f;
    font-family: var(--cm-font-sans);
    font-size: 14px;
    line-height: 20px;
}

.page-evaluations-redesign .evaluations-table thead th {
    height: 40px;
    padding: 12px 16px;
    border-bottom-color: #e5e7eb;
    color: #71717a;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    text-transform: uppercase;
}

.page-evaluations-redesign .evaluations-table tbody td {
    padding: 14px 16px;
    border-bottom-color: #e5e7eb;
    color: #24211f;
    font-size: 14px;
    line-height: 20px;
}

.page-evaluations-redesign .drivers-pagination-summary,
.page-evaluations-redesign .drivers-table-dash,
.page-evaluations-redesign .evaluation-comment {
    color: #71717a;
}

.page-alerts.page-alerts-redesign {
    overflow: auto !important;
    background: #ffffff;
}

.page-alerts.page-alerts-redesign .app-content {
    height: auto !important;
    min-height: calc(100vh - var(--ct-topbar-height));
    overflow: visible !important;
    padding: 0 !important;
}

.page-alerts.page-alerts-redesign .app-content .app-container {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    padding: 28px 28px 36px !important;
}

.alerts-page-shell {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    color: #24211f;
    font-family: var(--cm-font-sans);
}

.alerts-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 24px;
}

.alerts-page-header h1 {
    margin: 0;
    color: #24211f;
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
}

.alerts-page-header p {
    margin: 2px 0 0;
    color: #71717a;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.alerts-refresh-button {
    height: 38px;
    flex: 0 0 auto;
    border-radius: 8px;
    background: #ffffff;
    color: #24211f;
    font-size: 14px;
    font-weight: 500;
}

.alerts-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0 0 0;
    border-bottom: 0;
}

.alerts-tabs .nav-link {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 7px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
    color: #475569;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}

.alerts-tabs .nav-link i {
    color: currentColor;
    font-size: 16px;
    line-height: 1;
}

.alerts-tabs .nav-link strong {
    min-width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
}

.alerts-tabs .nav-link.active {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.alerts-tabs .nav-link.active strong {
    background: #dbeafe;
    color: #1d4ed8;
}

.alerts-tabs .nav-link:hover,
.alerts-card-header:hover {
    background: #f8fafc;
}

.alerts-tabs .nav-link:focus-visible,
.alerts-card-header:focus-visible,
.alerts-list:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: -2px;
}

.alerts-tab-content {
    overflow: visible;
    padding-top: 0;
}

.alerts-tab-content > .tab-pane.active {
    height: auto !important;
}

.alerts-card-grid {
    columns: 2;
    column-gap: 16px;
}

.alerts-card {
    break-inside: avoid;
    margin-bottom: 16px;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: none;
}

.alerts-card-header {
    width: 100%;
    min-height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 0;
    background: #f8fafc;
    padding: 16px;
    color: #24211f;
    text-align: left;
}

.alerts-card-title {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #24211f;
    font-size: 14px;
    font-weight: 650;
    line-height: 20px;
}

.alerts-card-title i {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #eff6ff;
    flex: 0 0 auto;
    color: #1d4ed8;
    font-size: 17px;
    line-height: 1;
}

.alerts-card-title span {
    white-space: normal;
}

.alerts-card-meta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

.alerts-count,
.alerts-ok,
.alerts-tag {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--alert-tag-bg, #f4f4f5);
    color: var(--alert-tag-color, #71717a);
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
    white-space: nowrap;
}

.alerts-count-danger,
.alerts-tag-danger {
    --alert-tag-bg: #fff1f2;
    --alert-tag-color: #e11d48;
    border-color: #fecdd3;
}

.alerts-count-warning,
.alerts-tag-warning {
    --alert-tag-bg: #fffbeb;
    --alert-tag-color: #d97706;
    border-color: #fde68a;
}

.alerts-count-neutral,
.alerts-tag-muted {
    --alert-tag-bg: #f4f4f5;
    --alert-tag-color: #71717a;
    border-color: #e4e4e7;
}

.alerts-ok {
    border-color: #a7f3d0;
    background: #ecfdf5;
    color: #059669;
}

.alerts-card-chevron {
    color: #71717a;
    font-size: 18px;
    transition: transform .18s ease;
}

.alerts-card-header[aria-expanded="false"] .alerts-card-chevron {
    transform: rotate(180deg);
}

.alerts-card-body {
    padding: 0;
}

.alerts-list {
    display: flex;
    flex-direction: column;
    max-height: 400px;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.alerts-row {
    min-width: 0;
    min-height: 56px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 16px;
    border-top: 1px solid #f4f4f5;
}

.alerts-row-main {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
    color: #71717a;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.alerts-row-main strong {
    min-width: 0;
    overflow: hidden;
    color: #24211f;
    font-size: 14px;
    font-weight: 650;
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: normal;
}

.alerts-row-main span {
    min-width: 0;
}

.alerts-row-main a {
    color: #2563eb;
    text-decoration: none;
}

.alerts-row-main a:hover {
    color: #1d4ed8;
}

.alerts-row-main .app-driver-avatar-link {
    min-width: 0;
    gap: 8px !important;
    color: #24211f;
}

.alerts-row-main .app-driver-avatar-img,
.alerts-row-main .app-driver-avatar-initials {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    flex: 0 0 32px !important;
    aspect-ratio: 1 / 1;
    border: 1px solid #e5e7eb !important;
    border-radius: 999px !important;
    background: #f8fafc !important;
    box-shadow: 0 0 0 2px #ffffff;
    font-size: 11px !important;
    overflow: hidden;
}

.alerts-row-main .app-driver-avatar-img {
    display: block;
    object-fit: cover !important;
}

.alerts-row-main .app-driver-avatar-name {
    overflow: hidden;
    color: #24211f;
    font-size: 14px;
    font-weight: 650;
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.alerts-row:hover {
    background: #f8fafc;
}

.alerts-tag-list {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.alerts-empty-state,
.alerts-empty-permissions {
    min-height: 132px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #71717a;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
}

.alerts-empty-state i {
    color: #059669;
    font-size: 16px;
}

.alerts-empty-permissions {
    min-height: 280px;
    flex-direction: column;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
}

.alerts-empty-permissions i {
    color: #71717a;
    font-size: 32px;
}

.alerts-empty-permissions strong {
    color: #24211f;
    font-size: 16px;
    font-weight: 700;
}

@media (max-width: 1199.98px) {
    .alerts-card-grid {
        columns: 1;
    }
}

@media (max-width: 767.98px) {
    .page-alerts.page-alerts-redesign .app-content .app-container {
        padding: 22px 16px 30px !important;
    }

    .alerts-page-header {
        align-items: stretch;
        flex-direction: column;
    }

    .alerts-refresh-button {
        width: 100%;
        justify-content: center;
    }

    .alerts-tabs {
        flex-wrap: wrap;
        padding-bottom: 0;
    }

    .alerts-tabs .nav-link {
        white-space: nowrap;
    }

    .alerts-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }
}

.evaluations-metric-neutral {
    --metric-color: #111827;
    --metric-bg: #ffffff;
    --metric-border: #e5e7eb;
}

.evaluations-metric-red {
    --metric-color: #ef4444;
    --metric-bg: #ffffff;
    --metric-border: #e5e7eb;
}

.evaluations-metric-green {
    --metric-color: #10b981;
    --metric-bg: #ffffff;
    --metric-border: #e5e7eb;
}

.evaluations-metric-amber {
    --metric-color: #f59e0b;
    --metric-bg: #ffffff;
    --metric-border: #e5e7eb;
}

.evaluations-metric-blue {
    --metric-color: #2563eb;
    --metric-bg: #ffffff;
    --metric-border: #e5e7eb;
}

.evaluations-metric-muted {
    --metric-color: #71717a;
    --metric-bg: #ffffff;
    --metric-border: #e5e7eb;
}

.evaluations-table {
    min-width: 1470px;
    table-layout: fixed;
}

.evaluations-table th:nth-child(1),
.evaluations-table td:nth-child(1) {
    width: 230px;
}

.evaluations-table th:nth-child(2),
.evaluations-table td:nth-child(2) {
    width: 160px;
}

.evaluations-table th:nth-child(3),
.evaluations-table td:nth-child(3),
.evaluations-table th:nth-child(4),
.evaluations-table td:nth-child(4),
.evaluations-table th:nth-child(5),
.evaluations-table td:nth-child(5),
.evaluations-table th:nth-child(6),
.evaluations-table td:nth-child(6),
.evaluations-table th:nth-child(7),
.evaluations-table td:nth-child(7),
.evaluations-table th:nth-child(8),
.evaluations-table td:nth-child(8) {
    width: 96px;
}

.evaluations-table th:nth-child(9),
.evaluations-table td:nth-child(9) {
    width: 170px;
}

.evaluations-table th:nth-child(10),
.evaluations-table td:nth-child(10) {
    width: 96px;
}

.evaluations-table th:nth-child(11),
.evaluations-table td:nth-child(11) {
    width: 150px;
}

.evaluations-table th:nth-child(12),
.evaluations-table td:nth-child(12) {
    width: 88px;
}

.evaluation-week {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.evaluation-week strong {
    color: var(--cm-text);
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
}

.evaluation-week span,
.evaluation-week small {
    color: var(--cm-muted);
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    white-space: nowrap;
}

.evaluation-rating-pill,
.evaluation-status-pill {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
    white-space: nowrap;
}

.evaluation-rating-success,
.evaluation-status-success {
    border-color: #a7f3d0;
    background: #ecfdf5;
    color: #059669;
}

.evaluation-rating-warning,
.evaluation-status-warning {
    border-color: #fde68a;
    background: #fffbeb;
    color: #d97706;
}

.evaluation-rating-danger {
    border-color: #fecdd3;
    background: #fff1f2;
    color: #e11d48;
}

.evaluation-status-secondary,
.evaluation-rating-empty,
.evaluation-status-empty {
    border-color: #e4e4e7;
    background: #f4f4f5;
    color: #71717f;
}

.evaluation-comment {
    display: -webkit-box;
    max-width: 100%;
    overflow: hidden;
    color: var(--cm-text);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.evaluation-comment-cell {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.evaluation-comment-open {
    width: 30px;
    height: 30px;
    display: none;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--cm-border-soft);
    border-radius: var(--cm-radius);
    background: #ffffff;
    color: #2563eb;
    font-size: 18px;
    line-height: 1;
    box-shadow: var(--cm-shadow-sm);
}

.evaluation-comment-open.is-visible {
    display: inline-flex;
}

.evaluation-comment-open:hover {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.evaluation-comment-modal .modal-dialog {
    width: min(92vw, 560px);
    max-width: min(92vw, 560px);
}

.evaluation-comment-modal .modal-content {
    border: 1px solid var(--cm-border);
    border-radius: 10.4px;
    box-shadow: var(--cm-shadow-md);
}

.evaluation-comment-modal .modal-header {
    min-height: 56px;
    padding: 0 20px;
    border-bottom: 1px solid var(--cm-border);
}

.evaluation-comment-modal .modal-title {
    color: var(--cm-text);
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
}

.evaluation-comment-modal .modal-body {
    padding: 18px 20px 20px;
}

.evaluation-comment-modal-text {
    margin: 0;
    color: var(--cm-text);
    font-size: 14px;
    line-height: 22px;
    white-space: pre-wrap;
    word-break: break-word;
}

.js-weekly-evaluation-skip.is-loading {
    opacity: .55;
    pointer-events: none;
}

@media (max-width: 1399.98px) {
    .evaluations-metrics-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

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

@media (max-width: 767.98px) {
    .evaluations-metrics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .evaluations-filter-bar {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .evaluations-metrics-grid {
        grid-template-columns: 1fr;
    }
}

.dnrs-metrics-grid {
    max-width: none;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.dnrs-metric-card {
    min-height: 96px;
    cursor: default;
}

.dnrs-metric-card:hover {
    transform: none;
}

.dnrs-metric-neutral {
    --metric-color: #111827;
    --metric-bg: #ffffff;
    --metric-border: #e5e7eb;
}

.dnrs-metric-green {
    --metric-color: #10b981;
    --metric-bg: #ffffff;
    --metric-border: #e5e7eb;
}

.dnrs-metric-blue {
    --metric-color: #2563eb;
    --metric-bg: #ffffff;
    --metric-border: #e5e7eb;
}

.dnrs-metric-amber {
    --metric-color: #f59e0b;
    --metric-bg: #ffffff;
    --metric-border: #e5e7eb;
}

.dnrs-metric-red {
    --metric-color: #ef4444;
    --metric-bg: #ffffff;
    --metric-border: #e5e7eb;
}

.dnrs-metric-muted {
    --metric-color: #71717a;
    --metric-bg: #ffffff;
    --metric-border: #e5e7eb;
}

.dnrs-filter-bar {
    grid-template-columns: minmax(220px, 1.35fr) repeat(5, minmax(145px, 1fr));
}

.dnrs-table {
    min-width: 1180px;
    table-layout: fixed;
}

.dnrs-table th:nth-child(1),
.dnrs-table td:nth-child(1) {
    width: 245px;
}

.dnrs-table th:nth-child(2),
.dnrs-table td:nth-child(2),
.dnrs-table th:nth-child(3),
.dnrs-table td:nth-child(3) {
    width: 84px;
}

.dnrs-table th:nth-child(4),
.dnrs-table td:nth-child(4) {
    width: 170px;
}

.dnrs-table th:nth-child(5),
.dnrs-table td:nth-child(5) {
    width: 240px;
}

.dnrs-table th:nth-child(6),
.dnrs-table td:nth-child(6) {
    width: 110px;
}

.dnrs-table th:nth-child(7),
.dnrs-table td:nth-child(7) {
    width: 116px;
}

.dnrs-table th:nth-child(8),
.dnrs-table td:nth-child(8) {
    width: 170px;
}

.dnrs-table th:nth-child(9),
.dnrs-table td:nth-child(9) {
    width: 98px;
}

.dnr-package,
.dnr-reason {
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: var(--cm-text);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dnr-reason-cell {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.dnr-reason-open {
    width: 30px;
    height: 30px;
    display: none;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--cm-border-soft);
    border-radius: var(--cm-radius);
    background: #ffffff;
    color: #2563eb;
    font-size: 18px;
    line-height: 1;
    box-shadow: var(--cm-shadow-sm);
}

.dnr-reason-open.is-visible {
    display: inline-flex;
}

.dnr-reason-open:hover {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.dnr-reason-modal .modal-dialog {
    width: min(92vw, 560px);
    max-width: min(92vw, 560px);
}

.dnr-reason-modal .modal-content {
    border: 1px solid var(--cm-border);
    border-radius: 10.4px;
    box-shadow: var(--cm-shadow-md);
}

.dnr-reason-modal .modal-header {
    min-height: 56px;
    padding: 0 20px;
    border-bottom: 1px solid var(--cm-border);
}

.dnr-reason-modal .modal-title {
    color: var(--cm-text);
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
}

.dnr-reason-modal .modal-body {
    padding: 18px 20px 20px;
}

.dnr-reason-modal-text {
    margin: 0;
    color: var(--cm-text);
    font-size: 14px;
    line-height: 22px;
    white-space: pre-wrap;
    word-break: break-word;
}

.dnr-status-pill,
.dnr-fault-pill {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
    white-space: nowrap;
}

.dnr-status-success,
.dnr-fault-success {
    border-color: #a7f3d0;
    background: #ecfdf5;
    color: #059669;
}

.dnr-status-warning,
.dnr-fault-warning {
    border-color: #fde68a;
    background: #fffbeb;
    color: #d97706;
}

.dnr-fault-danger {
    border-color: #fecdd3;
    background: #fff1f2;
    color: #e11d48;
}

.dnr-status-empty,
.dnr-fault-empty {
    border-color: #e4e4e7;
    background: #f4f4f5;
    color: #71717f;
}

.dnr-fault-trigger {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
}

.dnr-fault-trigger > i {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    background: #eff6ff;
    color: var(--cm-primary);
    font-size: 16px;
    line-height: 1;
}

.dnr-fault-trigger:hover > i {
    border-color: #93c5fd;
    background: #dbeafe;
}

.dnr-fault-modal .modal-content {
    border: 0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .24);
}

.dnr-fault-modal .modal-header {
    min-height: 68px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--cm-border-soft);
    background: #ffffff;
}

.dnr-fault-modal .modal-title {
    margin: 0;
    color: var(--cm-text);
    font-size: 20px;
    font-weight: 800;
    line-height: 26px;
}

.dnr-fault-modal .modal-header p {
    margin: 2px 0 0;
    color: var(--cm-muted);
    font-size: 13px;
    line-height: 18px;
}

.dnr-fault-modal .modal-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 22px;
    background: #ffffff;
}

.dnr-fault-context {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 14px;
    border-radius: 12px;
    background: #f8fafc;
}

.dnr-fault-context span {
    display: block;
    margin-bottom: 3px;
    color: var(--cm-muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
}

.dnr-fault-context strong {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: var(--cm-text);
    font-size: 14px;
    font-weight: 800;
    line-height: 19px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dnr-fault-options {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.dnr-fault-option {
    min-width: 0;
    margin: 0;
}

.dnr-fault-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.dnr-fault-option span {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border: 1px solid var(--cm-border);
    border-radius: 10px;
    background: #ffffff;
    color: #52525b;
    font-size: 14px;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
}

.dnr-fault-option input:focus-visible + span {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .16);
}

.dnr-fault-option-empty.is-selected span,
.dnr-fault-option-empty:has(input:checked) span {
    border-color: #d4d4d8;
    background: #f4f4f5;
    color: #52525b;
}

.dnr-fault-option-1.is-selected span,
.dnr-fault-option-1:has(input:checked) span {
    border-color: #fecaca;
    background: #fef2f2;
    color: #dc2626;
}

.dnr-fault-option-2.is-selected span,
.dnr-fault-option-2:has(input:checked) span {
    border-color: #a7f3d0;
    background: #ecfdf5;
    color: #059669;
}

.dnr-fault-option-3.is-selected span,
.dnr-fault-option-3:has(input:checked) span {
    border-color: #fde68a;
    background: #fffbeb;
    color: #d97706;
}

.dnr-fault-modal .modal-footer {
    gap: 8px;
    padding: 16px 22px 20px;
    border-top: 1px solid var(--cm-border-soft);
    background: #ffffff;
}

.dnr-fault-modal .btn {
    min-height: 38px;
    border-radius: var(--cm-radius);
    font-weight: 700;
}

@media (max-width: 1399.98px) {
    .dnrs-metrics-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

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

@media (max-width: 767.98px) {
    .dnrs-metrics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dnrs-filter-bar {
        grid-template-columns: 1fr;
    }

    .dnr-fault-context,
    .dnr-fault-options {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .dnrs-metrics-grid {
        grid-template-columns: 1fr;
    }
}

.app-popup-modal.app-fine-form-popup .modal-dialog {
    width: min(92vw, 940px) !important;
    max-width: min(92vw, 940px) !important;
    margin: 4vh auto !important;
}

.app-popup-modal.app-fine-form-popup .modal-content {
    max-height: min(88vh, 900px) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.16) !important;
}

.app-popup-modal.app-fine-form-popup .modal-header {
    min-height: 64px !important;
    padding: 0 28px !important;
    border-bottom: 1px solid var(--cm-border) !important;
    background: #ffffff !important;
}

.app-popup-modal.app-fine-form-popup .modal-title {
    color: var(--cm-text) !important;
    font-family: var(--cm-font-sans) !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 32px !important;
}

.app-popup-mode.page-fine-form {
    background: #f8fafc !important;
}

.app-popup-mode.page-fine-form .app-container {
    padding: 18px 24px 24px !important;
}

.app-popup-mode.page-fine-form .app-form-card,
.app-popup-mode.page-fine-form .app-form-card-body {
    max-width: 884px !important;
    margin: 0 auto !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.app-popup-mode.page-fine-form .app-popup-form {
    max-width: 884px !important;
    gap: 0 !important;
    margin: 0 auto !important;
    padding: 18px 18px 14px !important;
    border: 1px solid var(--cm-border-soft) !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: var(--cm-shadow-sm) !important;
}

.app-popup-mode.page-fine-form .app-popup-form-content {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px 22px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.app-popup-mode.page-fine-form .app-popup-form-content > .mb-3 {
    width: 100% !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

.app-popup-mode.page-fine-form .app-popup-form-content > .mb-3:has(textarea) {
    grid-column: 1 / -1 !important;
}

.app-popup-mode.page-fine-form .app-popup-form-content > .mb-3:has(input[type="file"]) {
    grid-column: auto !important;
}

.app-popup-mode.page-fine-form .form-label {
    margin-bottom: 7px !important;
    color: #3f3f46 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 20px !important;
}

.app-popup-mode.page-fine-form .form-control,
.app-popup-mode.page-fine-form .form-select,
.app-popup-mode.page-fine-form .select2-container--default .select2-selection--single {
    min-height: 46px !important;
    height: 46px !important;
    border-radius: var(--cm-radius) !important;
    border-color: #d8dee7 !important;
    background-color: #ffffff !important;
    color: var(--cm-text) !important;
    font-size: 16px !important;
    line-height: 22px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
}

.app-popup-mode.page-fine-form .select2-container {
    width: 100% !important;
}

.app-popup-mode.page-fine-form .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 44px !important;
}

.app-popup-mode.page-fine-form textarea.form-control {
    min-height: 76px !important;
    height: 76px !important;
    resize: vertical;
}

.app-popup-mode.page-fine-form input[type="file"].form-control {
    padding-top: 9px !important;
    padding-bottom: 9px !important;
}

.app-popup-mode.page-fine-form .form-check,
.app-popup-mode.page-fine-form .form-check-label {
    min-height: 46px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    color: #3f3f46 !important;
    font-size: 16px !important;
}

.app-popup-mode.page-fine-form .fine-responsible-check-field {
    min-height: 73px !important;
    display: flex !important;
    align-items: flex-end !important;
    gap: 9px !important;
    padding-bottom: 4px !important;
}

.app-popup-mode.page-fine-form .fine-responsible-check-field .form-label {
    order: 2 !important;
    margin: 0 !important;
    color: #3f3f46 !important;
    font-size: 16px !important;
    line-height: 22px !important;
}

.app-popup-mode.page-fine-form .fine-responsible-check-field .form-check-input {
    order: 1 !important;
    width: 14px !important;
    height: 14px !important;
    margin: 0 0 3px 0 !important;
    border-color: #a1a1aa !important;
}

.app-popup-mode.page-fine-form .app-popup-form-footer {
    width: 100% !important;
    max-width: none !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    margin: 0 auto !important;
    margin-top: 14px !important;
    padding-top: 14px !important;
    border-top: 1px solid var(--cm-border) !important;
}

.app-popup-mode.page-fine-form .app-popup-cancel,
.app-popup-mode.page-fine-form .app-popup-submit {
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 24px !important;
    border-radius: var(--cm-radius) !important;
    font-size: 16px !important;
    line-height: 22px !important;
}

.app-popup-modal.app-accident-form-popup .modal-dialog {
    width: min(92vw, 920px) !important;
    max-width: min(92vw, 920px) !important;
    margin: 4vh auto !important;
}

.app-popup-modal.app-accident-form-popup .modal-content {
    max-height: min(86vh, 820px) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.16) !important;
}

.app-popup-modal.app-accident-form-popup .modal-header {
    min-height: 64px !important;
    padding: 0 28px !important;
    border-bottom: 1px solid var(--cm-border) !important;
    background: #ffffff !important;
}

.app-popup-modal.app-accident-form-popup .modal-title {
    color: var(--cm-text) !important;
    font-family: var(--cm-font-sans) !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 32px !important;
}

.app-popup-mode.page-accident-form {
    background: #f8fafc !important;
}

.app-popup-mode.page-accident-form .app-container {
    padding: 18px 24px 24px !important;
}

.app-popup-mode.page-accident-form .app-form-card,
.app-popup-mode.page-accident-form .app-form-card-body {
    max-width: 864px !important;
    margin: 0 auto !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.app-popup-mode.page-accident-form .app-popup-form {
    max-width: 864px !important;
    gap: 0 !important;
    margin: 0 auto !important;
    padding: 18px 18px 14px !important;
    border: 1px solid var(--cm-border-soft) !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: var(--cm-shadow-sm) !important;
}

.app-popup-mode.page-accident-form .app-popup-form-content {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px 22px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.app-popup-mode.page-accident-form .app-popup-form-content > .mb-3 {
    width: 100% !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

.app-popup-mode.page-accident-form .app-popup-form-content > .mb-3:has(textarea),
.app-popup-mode.page-accident-form .app-popup-form-content > .mb-3:has(input[type="file"]) {
    grid-column: 1 / -1 !important;
}

.app-popup-mode.page-accident-form .form-label {
    margin-bottom: 7px !important;
    color: #3f3f46 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 20px !important;
}

.app-popup-mode.page-accident-form .form-control,
.app-popup-mode.page-accident-form .form-select,
.app-popup-mode.page-accident-form .select2-container--default .select2-selection--single {
    min-height: 46px !important;
    height: 46px !important;
    border-radius: var(--cm-radius) !important;
    border-color: #d8dee7 !important;
    background-color: #ffffff !important;
    color: var(--cm-text) !important;
    font-size: 16px !important;
    line-height: 22px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
}

.app-popup-mode.page-accident-form .select2-container {
    width: 100% !important;
}

.app-popup-mode.page-accident-form .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 44px !important;
}

.app-popup-mode.page-accident-form textarea.form-control {
    min-height: 88px !important;
    height: 88px !important;
    resize: vertical;
}

.app-popup-mode.page-accident-form input[type="file"].form-control {
    padding-top: 9px !important;
    padding-bottom: 9px !important;
}

.app-popup-mode.page-accident-form .app-popup-form-footer {
    width: 100% !important;
    max-width: none !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    margin: 14px auto 0 !important;
    padding-top: 14px !important;
    border-top: 1px solid var(--cm-border) !important;
}

.app-popup-mode.page-accident-form .app-popup-cancel,
.app-popup-mode.page-accident-form .app-popup-submit {
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 24px !important;
    border-radius: var(--cm-radius) !important;
    font-size: 16px !important;
    line-height: 22px !important;
}

.app-popup-mode.page-accident-report-form {
    background: #f8fafc !important;
}

body.app-body.app-popup-mode.page-accident-report-form .app-container {
    padding: 0 !important;
}

.app-popup-mode.page-accident-report-form .accident-report-wizard.app-popup-form {
    width: 100% !important;
    max-width: none !important;
    height: 100dvh;
    min-height: 0;
    max-height: 100dvh;
    display: flex !important;
    flex-direction: column;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
    color: #171717;
    font-family: var(--cm-font-sans);
    overflow: hidden;
}

.accident-report-wizard [hidden] {
    display: none !important;
}

.accident-report-progress {
    flex-shrink: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    padding: 16px 20px;
    border-bottom: 1px solid #eef2f7;
    background: #ffffff;
}

.accident-report-step {
    position: relative;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 0;
    background: transparent;
    color: #a1a1aa;
    font-size: 13px;
    font-weight: 700;
    line-height: 18px;
    text-align: left;
}

.accident-report-step:not(:last-child)::after {
    content: "";
    height: 2px;
    flex: 1 1 auto;
    min-width: 24px;
    margin-left: 4px;
    background: #e5e7eb;
}

.accident-report-step span {
    width: 26px;
    height: 26px;
    min-width: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #d4d4d8;
    border-radius: 999px;
    background: #ffffff;
    color: inherit;
    font-size: 13px;
    font-weight: 800;
}

.accident-report-step strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.accident-report-step.is-active,
.accident-report-step.is-done {
    color: #1d4ed8;
}

.accident-report-step.is-active span,
.accident-report-step.is-done span {
    border-color: #1d4ed8;
}

.accident-report-step.is-done span {
    background: #1d4ed8;
    color: #ffffff;
}

.accident-report-step.is-active:not(:last-child)::after,
.accident-report-step.is-done:not(:last-child)::after {
    background: #1d4ed8;
}

.accident-report-panels {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 20px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.accident-report-panel h2 {
    margin: 0 0 18px;
    color: #171717;
    font-size: 18px;
    font-weight: 800;
    line-height: 24px;
}

.accident-report-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 18px;
}

.accident-report-field,
.accident-report-upload {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.accident-report-field-wide {
    grid-column: 1 / -1;
}

.accident-report-field > span,
.accident-report-upload strong {
    color: #27272a;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
}

.accident-report-field em {
    color: #f43f5e;
    font-style: normal;
    margin-left: 4px;
}

.accident-report-field input,
.accident-report-field textarea {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
    color: #171717;
    font-size: 14px;
    line-height: 20px;
    padding: 10px 12px;
    outline: 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.accident-report-field input[readonly] {
    background: #f8fafc;
    color: #52525b;
}

.accident-report-field textarea {
    min-height: 78px;
    resize: vertical;
}

.accident-report-field input:focus,
.accident-report-field textarea:focus {
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.accident-report-field small {
    color: #dc2626;
    font-size: 12px;
    font-weight: 600;
}

.accident-report-damage-field > span {
    margin-bottom: 2px;
}

.accident-report-zone-picker {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    padding: 2px 0 0;
}

.accident-report-vehicle {
    width: min(240px, 100%);
    align-self: center;
    padding: 10px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fafafa;
}

.accident-report-vehicle svg {
    display: block;
    width: 100%;
    height: auto;
}

.accident-report-vehicle .vehicle-shell {
    fill: #f4f4f5;
    stroke: #9ca3af;
    stroke-width: 2;
}

.accident-report-vehicle .vehicle-window {
    fill: #bfdbfe;
    stroke: #93c5fd;
    stroke-width: 2;
}

.accident-report-vehicle .vehicle-tire {
    fill: #334155;
}

.accident-report-vehicle text {
    fill: #71717a;
    font-size: 11px;
    font-weight: 600;
}

.accident-report-vehicle .vehicle-zone {
    fill: transparent;
    stroke: transparent;
    stroke-width: 3;
    cursor: pointer;
}

.accident-report-vehicle .vehicle-zone:hover,
.accident-report-vehicle .vehicle-zone.is-selected {
    fill: rgba(244, 63, 94, 0.22);
    stroke: #e11d48;
}

.accident-report-zone-buttons {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
}

.accident-report-zone {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 11px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #f4f4f5;
    color: #71717a;
    font-size: 13px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    transition: border-color .16s ease, background-color .16s ease, color .16s ease, box-shadow .16s ease;
}

.accident-report-damage-field + .accident-report-field {
    margin-top: 4px;
}

.accident-report-zone:hover,
.accident-report-zone.is-selected {
    border-color: #fda4af;
    background: #fff1f2;
    color: #be123c;
    box-shadow: inset 0 0 0 1px rgba(225, 29, 72, 0.12);
}

.accident-report-zone-summary {
    min-height: 18px;
    margin: 0;
    color: #52525b;
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
}

.accident-report-upload {
    position: relative;
    min-height: 44px;
    align-items: center;
    flex-direction: row;
    gap: 10px;
    width: fit-content;
    max-width: 100%;
    padding: 8px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.accident-report-upload input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.accident-report-upload span {
    color: #1d4ed8;
    font-size: 18px;
    line-height: 1;
}

.accident-report-upload small {
    color: #71717a;
}

.accident-report-file-field {
    min-width: 0;
    display: grid;
    gap: 8px;
}

.accident-report-file-field > span {
    color: #27272a;
    font-size: 15px;
    font-weight: 800;
    line-height: 20px;
}

.accident-report-file-field > span small {
    margin-left: 6px;
    color: #71717a;
    font-size: 13px;
    font-weight: 600;
}

.accident-report-photos {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.accident-report-photos > strong {
    color: #27272a;
    font-size: 14px;
    font-weight: 800;
}

.accident-report-photos > div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.accident-report-photos img {
    width: 74px;
    height: 56px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    object-fit: cover;
}

.accident-report-footer,
body.app-body.app-popup-mode.page-accident-report-form .accident-report-wizard .accident-report-footer.app-popup-form-footer {
    width: 100% !important;
    max-width: none !important;
    flex-shrink: 0;
    min-height: 76px;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin: 0 !important;
    padding: 16px 20px !important;
    border-top: 1px solid var(--cm-border) !important;
    background: var(--cm-surface) !important;
    box-shadow: 0 -8px 20px rgba(15, 23, 42, 0.04);
}

.accident-report-footer .btn {
    min-height: 42px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 20px !important;
    text-transform: none;
}

.accident-report-footer .btn[hidden] {
    display: none !important;
}

.accident-report-missing {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    color: #ea580c;
    font-size: 13px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.accident-report-next.is-disabled,
.accident-report-submit.is-disabled {
    opacity: 0.58;
}

@media (max-width: 767.98px) {
    .accident-report-progress {
        display: flex;
        gap: 8px;
        padding: 12px 16px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .accident-report-step {
        min-width: 0;
        flex: 1 0 92px;
        justify-content: center;
        gap: 6px;
        padding: 8px 6px;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        background: #ffffff;
        text-align: center;
    }

    .accident-report-step:not(:last-child)::after {
        content: none;
    }

    .accident-report-step span {
        width: 24px;
        height: 24px;
        min-width: 24px;
    }

    .accident-report-step strong {
        font-size: 12px;
        line-height: 16px;
    }

    .accident-report-panels {
        padding: 16px;
    }

    .accident-report-panel h2 {
        margin-bottom: 14px;
        font-size: 17px;
        line-height: 22px;
    }

    .accident-report-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .accident-report-zone-picker {
        gap: 12px;
        padding-top: 0;
    }

    .accident-report-vehicle {
        width: min(238px, 100%);
    }

    .accident-report-zone-buttons {
        justify-content: flex-start;
    }

    .accident-report-footer,
    body.app-body.app-popup-mode.page-accident-report-form .accident-report-wizard .accident-report-footer.app-popup-form-footer {
        flex-wrap: wrap;
        align-items: stretch;
        gap: 8px;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) !important;
    }

    .accident-report-missing {
        order: -1;
        width: 100%;
        flex-basis: 100%;
        text-align: left;
    }

    .accident-report-footer .btn {
        min-height: 46px !important;
        flex: 1 1 calc(50% - 8px);
    }
}

@media (max-width: 420px) {
    .accident-report-step {
        flex-basis: 82px;
    }

    .accident-report-step strong {
        white-space: normal;
    }

    .accident-report-zone-buttons {
        gap: 7px;
    }
}

.van-accidents-metrics-grid {
    width: 100%;
    max-width: none;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.van-accidents-metric-neutral {
    --metric-color: #111827;
    --metric-bg: #ffffff;
    --metric-border: #e5e7eb;
}

.van-accidents-metric-amber {
    --metric-color: #d97706;
    --metric-bg: #fffbeb;
    --metric-border: #fde68a;
}

.van-accidents-metric-blue {
    --metric-color: #2563eb;
    --metric-bg: #eff6ff;
    --metric-border: #bfdbfe;
}

.van-accidents-metric-red {
    --metric-color: #ef4444;
    --metric-bg: #fff1f2;
    --metric-border: #fecdd3;
}

.van-accidents-filter-bar {
    grid-template-columns: minmax(230px, 1.25fr) repeat(6, minmax(160px, 1fr));
}

.accident-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.accident-list-card {
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--cm-border);
    border-left: 3px solid var(--cm-muted);
    border-radius: 10px;
    background: var(--cm-surface, #fff);
    color: var(--cm-text);
}

.accident-list-card[data-severity="1"] { border-left-color: #60a5fa; }
.accident-list-card[data-severity="2"] { border-left-color: #f59e0b; }
.accident-list-card[data-severity="3"] { border-left-color: #ef4444; }

.accident-card-media { position: relative; }
.accident-card-photo {
    display: block;
    width: 100%;
    height: 200px;
    padding: 0;
    border: 0;
    background: var(--cm-bg);
    color: var(--cm-muted);
    cursor: pointer;
}
.accident-card-photo img { width: 100%; height: 100%; object-fit: cover; }
.accident-card-photo [hidden] { display: none !important; }
.accident-card-placeholder { display: flex; height: 100%; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.accident-card-placeholder > i { font-size: 36px; }
.accident-card-severity { position: absolute; top: 10px; right: 10px; pointer-events: none; }
.accident-card-counter { position: absolute; top: 12px; left: 12px; border-radius: 12px; padding: 2px 8px; background: #0f172abf; color: #fff; font-size: 12px; pointer-events: none; }
.accident-card-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--cm-border);
    border-radius: 50%;
    background: var(--cm-surface, #fff);
    color: var(--cm-text);
    font-size: 24px;
}
.accident-card-arrow.is-previous { left: 8px; }
.accident-card-arrow.is-next { right: 8px; }
.accident-card-body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; min-width: 0; }
.accident-card-body .app-driver-avatar-link { min-width: 0; max-width: 100%; white-space: normal; }
.accident-card-body .app-driver-avatar-name { white-space: normal; overflow-wrap: anywhere; }
.accident-card-details { display: flex; justify-content: space-between; gap: 12px; width: 100%; color: var(--cm-muted); font-size: 13px; }
.accident-card-details > :last-child { text-align: right; overflow-wrap: anywhere; }
.accident-card-status { display: flex; flex-wrap: wrap; gap: 8px; }
.accident-card-actions { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; width: 100%; margin-top: auto; padding-top: 4px; }
.accident-card-photo:focus-visible, .accident-card-arrow:focus-visible { outline: 3px solid #2563eb; outline-offset: -3px; }

@media (max-width: 1599.98px) { .accident-cards-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1199.98px) { .accident-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .accident-cards-grid { grid-template-columns: minmax(0, 1fr); } }

.van-accidents-table {
    min-width: 1480px;
}

.van-accidents-table th,
.van-accidents-table td {
    vertical-align: middle;
}

.van-accidents-table th:nth-child(8),
.van-accidents-table th:nth-child(9),
.van-accidents-table th:nth-child(10),
.van-accidents-table th:nth-child(11),
.van-accidents-table th:nth-child(12),
.van-accidents-table th:nth-child(13),
.van-accidents-table td:nth-child(8),
.van-accidents-table td:nth-child(9),
.van-accidents-table td:nth-child(10),
.van-accidents-table td:nth-child(11),
.van-accidents-table td:nth-child(12),
.van-accidents-table td:nth-child(13) {
    width: 70px;
    text-align: center;
}

.van-accidents-table th:nth-child(14),
.van-accidents-table td:nth-child(14) {
    width: 170px;
}

.accident-file-link,
.accident-claim-link,
.accident-claim-create,
.accident-status-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #2554e8;
    font-weight: 600;
    text-decoration: none;
}

.accident-file-link:hover,
.accident-claim-link:hover,
.accident-claim-create:hover,
.accident-status-link:hover {
    color: #1d4ed8;
}

.accident-status-pill,
.accident-severity-pill,
.accident-third-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 13px;
    font-weight: 700;
    line-height: 18px;
    white-space: nowrap;
}

.accident-status-1 {
    color: #d97706;
    background: #fffbeb;
    border-color: #fcd34d;
}

.accident-status-2 {
    color: #059669;
    background: #ecfdf5;
    border-color: #86efac;
}

.accident-severity-1,
.accident-third-2 {
    color: #2563eb;
    background: #dbeafe;
    border-color: #93c5fd;
}

.accident-severity-2 {
    color: #d97706;
    background: #fffbeb;
    border-color: #fde68a;
}

.accident-severity-3,
.accident-third-1 {
    color: #e11d48;
    background: #fff1f2;
    border-color: #fecdd3;
}

.accident-clip {
    display: inline-block;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}

.van-accidents-empty-row {
    min-height: 190px;
}

.accident-icon-box {
    width: 30px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 1px dashed #d7dde6;
    border-radius: 6px;
    background: #ffffff;
    color: #a3aab5;
    font-size: 15px;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.accident-icon-box span {
    color: inherit;
    font-size: 11px;
    font-weight: 700;
    line-height: 14px;
}

.accident-icon-box:hover {
    color: #2554e8;
    text-decoration: none;
}

.accident-icon-report.is-active {
    border-style: solid;
    border-color: #93c5fd;
    background: #dbeafe;
    color: #2563eb;
}

.accident-icon-insurance.is-active,
.accident-icon-missing.is-active {
    border-style: solid;
    border-color: #86efac;
    background: #dcfce7;
    color: #16a34a;
}

.accident-icon-photos,
.accident-icon-comments {
    width: auto;
    min-width: 42px;
    padding: 0 7px;
    border-style: dashed;
}

.accident-icon-comments {
    border-style: solid;
    border-color: #dbeafe;
    background: #f8fbff;
    color: #475569;
}

.accident-icon-photos.is-active {
    border-style: solid;
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #2563eb;
}

.accident-table-photos {
    position: relative;
    display: inline-flex;
    text-decoration: none;
}

.accident-table-photos-media {
    width: 34px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px dashed #d7dde6;
    border-radius: 6px;
    background: #ffffff;
    color: #a3aab5;
    font-size: 15px;
    line-height: 1;
}

.accident-table-photos.is-active .accident-table-photos-media {
    border-style: solid;
    border-color: #e2e8f0;
}

.accident-table-photos:hover .accident-table-photos-media,
.accident-table-photos:focus .accident-table-photos-media {
    border-color: #93c5fd;
    color: #2554e8;
}

.accident-table-photos-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.accident-table-photos-count {
    position: absolute;
    right: -5px;
    bottom: -5px;
    min-width: 15px;
    padding: 0 3px;
    border: 1px solid #ffffff;
    border-radius: 999px;
    background: #94a3b8;
    color: #ffffff;
    font-size: 9px;
    font-weight: 700;
    line-height: 13px;
    text-align: center;
}

.accident-icon-incident.is-active {
    border-style: solid;
    border-color: #fecdd3;
    background: #fff1f2;
    color: #e11d48;
}

.accident-expedient-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    white-space: nowrap;
}

.accident-expedient-link {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 9px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #ffffff;
    color: #6b7280;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    text-decoration: none;
}

.accident-expedient-link:hover {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #2554e8;
}

@media (max-width: 1399.98px) {
    .van-accidents-filter-bar {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.fines-metrics-grid {
    max-width: none;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.fines-metric-card {
    min-height: 96px;
    cursor: default;
}

.fines-metric-card:hover {
    transform: none;
}

.fines-metric-neutral {
    --metric-color: #111827;
    --metric-bg: #ffffff;
    --metric-border: #e5e7eb;
}

.fines-metric-amber {
    --metric-color: #f59e0b;
    --metric-bg: #ffffff;
    --metric-border: #e5e7eb;
}

.fines-metric-blue {
    --metric-color: #2563eb;
    --metric-bg: #ffffff;
    --metric-border: #e5e7eb;
}

.fines-metric-green {
    --metric-color: #10b981;
    --metric-bg: #ffffff;
    --metric-border: #e5e7eb;
}

.fines-metric-red {
    --metric-color: #ef4444;
    --metric-bg: #ffffff;
    --metric-border: #e5e7eb;
}

.fines-metric-muted {
    --metric-color: #71717a;
    --metric-bg: #ffffff;
    --metric-border: #e5e7eb;
}

.fines-filter-bar {
    grid-template-columns: minmax(260px, 1.4fr) repeat(4, minmax(150px, 1fr));
}

.fines-table {
    min-width: 1900px;
    table-layout: auto;
}

.fines-table th,
.fines-table td {
    white-space: nowrap;
}

.fines-table .fine-expedient {
    max-width: none;
}

.fines-table td > .text-muted {
    max-width: 240px;
    white-space: normal;
    overflow-wrap: anywhere;
}

.fine-file-link,
.fine-plate,
.fine-expedient {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    color: var(--cm-primary);
    font-weight: 600;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fine-file-link:hover,
.fine-plate:hover,
.fine-expedient:hover {
    color: #1e40af;
    text-decoration: underline;
}

.fine-comment-pill {
    display: inline-flex;
    min-width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    background: #eff6ff;
    color: var(--cm-primary);
    font-size: 13px;
    font-weight: 700;
}

.fine-user {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fine-amount {
    color: var(--cm-text);
    font-weight: 700;
    white-space: nowrap;
}

.fine-clip {
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: var(--cm-text);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fine-description-cell {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.fine-description-open {
    width: 30px;
    height: 30px;
    display: none;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--cm-border-soft);
    border-radius: var(--cm-radius);
    background: #ffffff;
    color: #2563eb;
    font-size: 18px;
    line-height: 1;
    box-shadow: var(--cm-shadow-sm);
}

.fine-description-open.is-visible {
    display: inline-flex;
}

.fine-description-open:hover {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.fine-description-modal .modal-dialog {
    width: min(92vw, 560px);
    max-width: min(92vw, 560px);
}

.fine-description-modal .modal-content {
    border: 1px solid var(--cm-border);
    border-radius: 10.4px;
    box-shadow: var(--cm-shadow-md);
}

.fine-description-modal .modal-header {
    min-height: 56px;
    padding: 0 20px;
    border-bottom: 1px solid var(--cm-border);
}

.fine-description-modal .modal-title {
    color: var(--cm-text);
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
}

.fine-description-modal .modal-body {
    padding: 18px 20px 20px;
}

.fine-description-modal-text {
    margin: 0;
    color: var(--cm-text);
    font-size: 14px;
    line-height: 22px;
    white-space: pre-wrap;
    word-break: break-word;
}

.fine-status-pill,
.fine-responsible-pill {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    border: 1px solid #e4e4e7;
    border-radius: 999px;
    background: #f4f4f5;
    color: #71717f;
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
    white-space: nowrap;
}

.fine-status-pending {
    border-color: #fde68a;
    background: #fffbeb;
    color: #d97706;
}

.fine-status-appealed {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #2563eb;
}

.fine-status-paid,
.fine-responsible-pill.is-responsible {
    border-color: #a7f3d0;
    background: #ecfdf5;
    color: #059669;
}

.fine-upload-form {
    margin: 0;
}

.fine-upload-form label {
    height: 30px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0 10px;
    border: 1px solid var(--cm-border);
    border-radius: 999px;
    background: #ffffff;
    color: var(--cm-text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.fine-upload-form label:hover {
    background: #f8fafc;
}

.fine-upload-form input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.fines-empty-row {
    min-height: 220px;
    border: 0;
    box-shadow: none;
}

.phones-page-shell,
.phone-damages-page-shell {
    gap: 24px;
}

.phones-metrics-grid,
.phone-damages-metrics-grid {
    max-width: none;
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.phones-metric-card,
.phone-damages-metric-card {
    min-height: 118px;
    cursor: default;
}

.phones-metric-card:hover,
.phone-damages-metric-card:hover {
    transform: none;
}

.phones-metric-total,
.phone-damages-metric-total {
    --metric-color: #111827;
    --metric-bg: #ffffff;
    --metric-border: #e5e7eb;
}

.phones-metric-available,
.phone-damages-metric-repair {
    --metric-color: #059669;
    --metric-bg: #ecfdf5;
    --metric-border: #a7f3d0;
}

.phones-metric-assigned {
    --metric-color: #2563eb;
    --metric-bg: #eff6ff;
    --metric-border: #bfdbfe;
}

.phone-damages-metric-hit {
    --metric-color: #ef4444;
    --metric-bg: #fff1f2;
    --metric-border: #fecdd3;
}

.phones-filter-bar {
    grid-template-columns: minmax(260px, 1.35fr) repeat(3, minmax(180px, 1fr));
}

.phone-damages-filter-bar {
    grid-template-columns: minmax(280px, 1.5fr) repeat(2, minmax(190px, 1fr));
}

.phones-table {
    min-width: 1180px;
}

.phones-table th,
.phones-table td {
    vertical-align: middle;
}

.phones-table th:nth-child(1),
.phones-table td:nth-child(1) {
    width: 180px;
}

.phones-table th:nth-child(2),
.phones-table td:nth-child(2) {
    width: 210px;
}

.phones-table th:nth-child(3),
.phones-table td:nth-child(3),
.phones-table th:nth-child(4),
.phones-table td:nth-child(4),
.phones-table th:nth-child(5),
.phones-table td:nth-child(5) {
    width: 150px;
}

.phones-table th:nth-child(8),
.phones-table td:nth-child(8) {
    width: 112px;
    text-align: right;
}

.phone-model-pill,
.phone-status-pill {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #f8fafc;
    color: #4b5563;
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
    white-space: nowrap;
}

.phone-status-pill {
    border-color: #bbf7d0;
    background: #ecfdf5;
    color: #059669;
}

.phone-imei-link {
    color: var(--cm-text);
    font-weight: 650;
    text-decoration: none;
}

.phone-imei-link:hover {
    color: var(--cm-primary);
}

.phone-secret-stack {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    color: #6b7280;
    font-size: 13px;
    line-height: 18px;
}

.phones-empty-row {
    min-height: 220px;
    border: 0;
    box-shadow: none;
}

.phone-damages-table {
    min-width: 1320px;
}

.phone-damages-table th,
.phone-damages-table td {
    vertical-align: middle;
}

.phone-damages-table th:nth-child(1),
.phone-damages-table td:nth-child(1),
.phone-damages-table th:nth-child(2),
.phone-damages-table td:nth-child(2),
.phone-damages-table th:nth-child(5),
.phone-damages-table td:nth-child(5) {
    width: 140px;
}

.phone-damages-table th:nth-child(3),
.phone-damages-table td:nth-child(3),
.phone-damages-table th:nth-child(4),
.phone-damages-table td:nth-child(4),
.phone-damages-table th:nth-child(7),
.phone-damages-table td:nth-child(7),
.phone-damages-table th:nth-child(8),
.phone-damages-table td:nth-child(8) {
    width: 180px;
}

.phone-damages-table th:nth-child(6),
.phone-damages-table td:nth-child(6) {
    min-width: 280px;
}

.phone-damages-table th:nth-child(9),
.phone-damages-table td:nth-child(9) {
    width: 120px;
    text-align: right;
}

.phone-damage-file-link {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 13px;
    font-weight: 650;
    line-height: 18px;
    text-decoration: none;
}

.phone-damage-file-link:hover {
    background: #dbeafe;
    color: #1d4ed8;
}

.phone-damage-type-pill {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border: 1px solid #fecdd3;
    border-radius: 999px;
    background: #fff1f2;
    color: #e11d48;
    font-size: 13px;
    font-weight: 650;
    line-height: 18px;
    white-space: nowrap;
}

.phone-damage-type-repair {
    border-color: #a7f3d0;
    background: #ecfdf5;
    color: #059669;
}

.phone-damage-phone,
.phone-damage-comment {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}

.phone-damage-phone {
    color: var(--cm-text);
    font-weight: 650;
}

.phone-damages-empty-row {
    min-height: 220px;
    border: 0;
    box-shadow: none;
}

.app-popup-modal.app-phone-form-popup .modal-dialog,
.app-popup-modal.app-phone-damage-form-popup .modal-dialog {
    width: min(92vw, 760px) !important;
    max-width: min(92vw, 760px) !important;
    margin: 7vh auto !important;
}

.app-popup-modal.app-phone-form-popup .modal-content,
.app-popup-modal.app-phone-damage-form-popup .modal-content {
    max-height: min(82vh, 720px) !important;
    border-radius: 10.4px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10) !important;
}

.app-popup-modal.app-phone-form-popup .modal-header,
.app-popup-modal.app-phone-damage-form-popup .modal-header {
    min-height: 58px !important;
    padding: 0 22px !important;
    border-bottom: 1px solid var(--cm-border) !important;
    background: #ffffff !important;
}

.app-popup-modal.app-phone-form-popup .modal-title,
.app-popup-modal.app-phone-damage-form-popup .modal-title {
    color: var(--cm-text) !important;
    font-family: var(--cm-font-sans) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 30px !important;
}

.app-popup-mode.page-phone-form,
.app-popup-mode.page-phone-damage-form {
    background: #f8fafc !important;
}

.app-popup-mode.page-phone-form .app-container,
.app-popup-mode.page-phone-damage-form .app-container {
    padding: 16px !important;
}

.app-popup-mode.page-phone-form .app-form-card,
.app-popup-mode.page-phone-form .app-form-card-body,
.app-popup-mode.page-phone-damage-form .app-form-card,
.app-popup-mode.page-phone-damage-form .app-form-card-body {
    max-width: 720px !important;
    margin: 0 auto !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.app-popup-mode.page-phone-form .app-popup-form,
.app-popup-mode.page-phone-damage-form .app-popup-form {
    max-width: 720px !important;
    margin: 0 auto !important;
    padding: 16px !important;
    border: 1px solid var(--cm-border-soft) !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: var(--cm-shadow-sm) !important;
}

.app-popup-mode.page-phone-form .app-popup-form-content,
.app-popup-mode.page-phone-damage-form .app-popup-form-content {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px 16px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.app-popup-mode.page-phone-form .app-popup-form-content > .mb-3,
.app-popup-mode.page-phone-damage-form .app-popup-form-content > .mb-3 {
    width: 100% !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

.app-popup-mode.page-phone-form .phone-model-field,
.app-popup-mode.page-phone-form .phone-puk2-field {
    grid-column: 1 / -1 !important;
}

.app-popup-mode.page-phone-damage-form .phone-damage-comment-field,
.app-popup-mode.page-phone-damage-form .phone-damage-file-field {
    grid-column: 1 / -1 !important;
}

.app-popup-mode.page-phone-damage-form textarea.form-control {
    min-height: 92px !important;
    height: auto !important;
    resize: vertical;
}

.app-popup-mode.page-phone-damage-form input[type="file"].form-control {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.app-popup-mode.page-phone-form .form-label,
.app-popup-mode.page-phone-damage-form .form-label {
    margin-bottom: 6px !important;
    color: #3f3f46 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 20px !important;
}

.app-popup-mode.page-phone-form .form-control,
.app-popup-mode.page-phone-form .form-select,
.app-popup-mode.page-phone-form .select2-container--default .select2-selection--single,
.app-popup-mode.page-phone-damage-form .form-control,
.app-popup-mode.page-phone-damage-form .form-select,
.app-popup-mode.page-phone-damage-form .select2-container--default .select2-selection--single {
    min-height: 42px !important;
    height: 42px !important;
    border-radius: var(--cm-radius) !important;
    border-color: #d8dee7 !important;
    background-color: #ffffff !important;
    color: var(--cm-text) !important;
    font-size: 15px !important;
    line-height: 21px !important;
    box-shadow: none !important;
}

.app-popup-mode.page-phone-form .select2-container,
.app-popup-mode.page-phone-damage-form .select2-container {
    width: 100% !important;
}

.app-popup-mode.page-phone-form .select2-container--default .select2-selection--single .select2-selection__rendered,
.app-popup-mode.page-phone-damage-form .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 40px !important;
}

.app-popup-mode.page-phone-form .app-popup-form-footer,
.app-popup-mode.page-phone-damage-form .app-popup-form-footer {
    width: 100% !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    margin-top: 16px !important;
    padding-top: 14px !important;
    border-top: 1px solid var(--cm-border) !important;
}

.app-popup-mode.page-phone-form .app-popup-cancel,
.app-popup-mode.page-phone-form .app-popup-submit,
.app-popup-mode.page-phone-damage-form .app-popup-cancel,
.app-popup-mode.page-phone-damage-form .app-popup-submit {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 16px !important;
    border-radius: var(--cm-radius) !important;
    font-size: 14px !important;
    line-height: 20px !important;
}

.scorecards-page-shell {
    gap: 22px;
}

.scorecards-metrics-grid {
    width: 100%;
    max-width: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.scorecards-dsp-metrics-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.scorecards-metric-card {
    min-height: 110px;
    cursor: default;
}

.scorecards-metric-card:hover {
    transform: none;
}

.scorecards-metric-total {
    --metric-color: #2563eb;
    --metric-bg: #eff6ff;
    --metric-border: #bfdbfe;
}

.scorecards-metric-drivers {
    --metric-color: #059669;
    --metric-bg: #ecfdf5;
    --metric-border: #a7f3d0;
}

.scorecards-metric-unidentified {
    --metric-color: #f59e0b;
    --metric-bg: #fffbeb;
    --metric-border: #fde68a;
}

.scorecards-metric-latest {
    --metric-color: #7c3aed;
    --metric-bg: #f5f3ff;
    --metric-border: #ddd6fe;
}

.scorecards-metric-score {
    --metric-color: #0891b2;
    --metric-bg: #ecfeff;
    --metric-border: #a5f3fc;
}

.scorecards-metric-rank {
    --metric-color: #4f46e5;
    --metric-bg: #eef2ff;
    --metric-border: #c7d2fe;
}

.scorecards-tabs {
    display: inline-flex;
    width: fit-content;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--cm-border);
    border-radius: 10px;
    background: #ffffff;
    box-shadow: var(--cm-shadow-sm);
}

.scorecards-tab {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 14px;
    border-radius: 8px;
    color: #6b7280;
    font-size: 14px;
    font-weight: 650;
    text-decoration: none;
}

.scorecards-tab strong {
    min-width: 24px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 7px;
    border-radius: 999px;
    background: #f4f4f5;
    color: #71717a;
    font-size: 12px;
    font-weight: 750;
    line-height: 16px;
}

.scorecards-tab:hover,
.scorecards-tab.is-active {
    background: #1d4ed8;
    color: #ffffff;
}

.scorecards-tab:hover strong,
.scorecards-tab.is-active strong {
    background: rgba(255, 255, 255, .18);
    color: #ffffff;
}

.scorecards-view-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--cm-border);
    border-radius: 10px;
    background: #ffffff;
}

.scorecards-view-toggle-button {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #6b7280;
    font-family: var(--cm-font-sans);
    font-size: 13px;
    font-weight: 650;
    line-height: 18px;
    white-space: nowrap;
    cursor: pointer;
}

.scorecards-view-toggle-button:hover,
.scorecards-view-toggle-button.is-active {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.scorecards-filter-bar {
    grid-template-columns: minmax(260px, 1.4fr) minmax(210px, 1fr) repeat(2, minmax(130px, 0.7fr));
}

.scorecards-filter-bar-unidentified {
    max-width: 760px;
    grid-template-columns: minmax(260px, 1.4fr) repeat(2, minmax(130px, 0.7fr));
}

.scorecards-filter-bar-dsp {
    max-width: 560px;
    grid-template-columns: repeat(2, minmax(130px, 1fr));
}

.app-content .scorecards-filter-bar-dsp {
    align-items: end !important;
}

.scorecards-trend-card {
    display: grid;
    gap: 18px;
    padding: 18px 20px 20px;
    font-family: var(--cm-font-sans);
}

.scorecards-trend-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.scorecards-trend-header > div:first-child > span {
    color: #6b7280;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
}

.scorecards-trend-ranges,
.scorecards-trend-scale,
.scorecards-trend-metrics {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.scorecards-trend-ranges a,
.scorecards-trend-ranges span,
.scorecards-trend-scale button,
.scorecards-trend-metric {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 11px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
    color: #6b7280;
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: none;
    font-family: var(--cm-font-sans);
}

.scorecards-trend-ranges span {
    border-color: #f3f4f6;
    background: #f9fafb;
    box-shadow: none;
}

.scorecards-trend-ranges a.is-active,
.scorecards-trend-scale button.is-active,
.scorecards-trend-metric.is-active {
    border-color: #1d4ed8;
    background: #eff6ff;
    color: #1d4ed8;
    font-weight: 700;
}

.scorecards-trend-metric {
    cursor: pointer;
}

.scorecards-trend-metric span {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 999px;
    background: var(--metric-color);
}

.scorecards-trend-scale {
    justify-content: flex-end;
}

.scorecards-trend-scale > span {
    color: #6b7280;
    font-size: 13px;
    font-weight: 600;
}

.scorecards-weekly-trend-chart {
    width: 100%;
    min-height: 300px;
}

.scorecards-trend-empty {
    min-height: 260px;
    border: 1px dashed #d1d5db;
    box-shadow: none;
}

.scorecard-rank-cell {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.scorecard-edited-pill {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border: 1px solid #fed7aa;
    border-radius: 7px;
    background: #fff7ed;
    color: #c2410c;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    white-space: nowrap;
}

.scorecard-edited-pill i {
    font-size: 14px;
}

.app-popup-mode.page-scorecard-dsp-edit-form {
    background: #f8fafc !important;
}

.app-popup-mode.page-scorecard-dsp-edit-form .app-container {
    padding: 0 !important;
}

.app-popup-mode.page-scorecard-dsp-edit-form .app-popup-form {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 18px 24px 16px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

.app-popup-mode.page-scorecard-dsp-edit-form .app-popup-form-content {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
}

.scorecard-dsp-edit-panel {
    display: grid;
    gap: 14px;
    width: 100%;
    min-width: 0;
}

.scorecard-dsp-correction {
    display: grid;
    gap: 8px;
    width: 100%;
    margin: 0 0 2px;
    padding: 14px 14px 13px;
    border: 1px solid #f6c98e;
    border-radius: 8px;
    background: #fff8ef;
}

.scorecard-dsp-correction label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    color: #b45309;
    font-size: 13px;
    font-weight: 750;
    line-height: 18px;
}

.scorecard-dsp-correction-fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.scorecard-dsp-correction select,
.scorecard-dsp-correction .select2-container {
    width: min(100%, 340px) !important;
    max-width: 340px !important;
}

.scorecard-dsp-correction select,
.scorecard-dsp-correction textarea,
.scorecard-dsp-field input {
    width: 100%;
    min-height: 36px;
    border: 1px solid #d8dee7;
    border-radius: 8px;
    background: #ffffff;
    color: var(--cm-text);
    font-family: var(--cm-font-sans);
    font-size: 14px;
    line-height: 20px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.scorecard-dsp-correction select,
.scorecard-dsp-field input {
    padding: 0 12px;
}

.scorecard-dsp-correction textarea {
    min-height: 48px;
    height: 48px;
    padding: 7px 12px;
    resize: vertical;
}

.scorecard-dsp-correction select,
.scorecard-dsp-correction .select2-container {
    width: min(100%, 340px) !important;
    max-width: 340px !important;
}

.scorecard-dsp-correction .select2-container--default .select2-selection--single {
    height: 36px !important;
    min-height: 36px !important;
    border-color: #d8dee7 !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05) !important;
}

.scorecard-dsp-correction .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 12px !important;
    padding-right: 34px !important;
    color: var(--cm-text) !important;
    font-size: 14px !important;
    line-height: 34px !important;
}

.scorecard-dsp-correction .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 34px !important;
    right: 8px !important;
}

.scorecard-dsp-section-title {
    display: flex;
    align-items: center;
    min-height: 16px;
    margin: 0;
}

.scorecard-dsp-section-title span {
    color: #475569;
    font-size: 12px;
    font-weight: 750;
    line-height: 16px;
}

.scorecard-dsp-edit-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 12px;
    width: 100%;
    margin: 0;
    padding-top: 0;
}

.scorecard-review-row {
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--cm-border);
    border-radius: 10px;
    background: var(--cm-surface);
}

.scorecard-review-row > summary {
    cursor: pointer;
    overflow-wrap: anywhere;
    color: var(--cm-text);
}

.scorecard-review-row-metrics {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.6;
}

.scorecard-dsp-field {
    display: grid;
    gap: 5px;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.scorecard-dsp-field span {
    color: #334155;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
}

.scorecard-dsp-field input {
    height: 34px;
    min-height: 34px;
}

.scorecard-dsp-field input:focus,
.scorecard-dsp-correction select:focus,
.scorecard-dsp-correction textarea:focus {
    border-color: #93c5fd;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .14);
}

@media (max-width: 767.98px) {
    .scorecard-dsp-correction-fields,
    .scorecard-dsp-edit-grid {
        grid-template-columns: 1fr;
    }
}

.scorecards-filter-field {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.scorecards-filter-field span {
    color: var(--cm-muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
}

.scorecards-filter-input {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--cm-border);
    border-radius: var(--cm-radius);
    padding: 0 14px;
    background: #ffffff;
    color: var(--cm-text);
    font-size: 15px;
    outline: none;
    box-shadow: var(--cm-shadow-sm);
}

.scorecards-table {
    min-width: 1500px;
}

.scorecards-dsp-table {
    table-layout: auto !important;
    width: max-content;
    min-width: 2200px;
}

.app-content .scorecards-dsp-table th,
.app-content .scorecards-dsp-table td {
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    hyphens: manual !important;
}

.app-content .scorecards-dsp-table th:nth-child(1),
.app-content .scorecards-dsp-table td:nth-child(1),
.app-content .scorecards-dsp-table th:nth-child(2),
.app-content .scorecards-dsp-table td:nth-child(2) {
    width: 76px !important;
    min-width: 76px !important;
}

.app-content .scorecards-dsp-table th:nth-child(3),
.app-content .scorecards-dsp-table td:nth-child(3),
.app-content .scorecards-dsp-table th:nth-child(4),
.app-content .scorecards-dsp-table td:nth-child(4) {
    width: 96px !important;
    min-width: 96px !important;
}

.app-content .scorecards-dsp-table th:nth-child(5),
.app-content .scorecards-dsp-table td:nth-child(5) {
    width: 150px !important;
    min-width: 150px !important;
}

.app-content .scorecards-dsp-table th:nth-child(n+6),
.app-content .scorecards-dsp-table td:nth-child(n+6) {
    width: 98px !important;
    min-width: 98px !important;
}

.app-content .scorecards-dsp-table th:nth-child(13),
.app-content .scorecards-dsp-table td:nth-child(13),
.app-content .scorecards-dsp-table th:nth-child(20),
.app-content .scorecards-dsp-table td:nth-child(20) {
    width: 124px !important;
    min-width: 124px !important;
}

.scorecards-table th,
.scorecards-table td {
    vertical-align: middle;
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: manual;
}

.scorecards-table th:last-child,
.scorecards-table td:last-child {
    width: 110px;
    text-align: right;
}

.scorecard-unidentified-driver {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: 7px;
    padding: 5px 10px;
    border: 1px solid #fde68a;
    border-radius: 999px;
    background: #fffbeb;
    color: #b45309;
    font-size: 13px;
    font-weight: 700;
    line-height: 18px;
    white-space: nowrap;
}

.scorecard-unidentified-driver i {
    font-size: 17px;
    line-height: 1;
}

.scorecard-value {
    display: inline-flex;
    min-width: 62px;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    border-radius: 999px;
    background: #f4f4f5;
    color: #71717a;
    font-size: 13px;
    font-weight: 700;
    line-height: 18px;
    white-space: nowrap;
}

.scorecard-value.is-good {
    background: #ecfdf5;
    color: #059669;
}

.scorecard-value.is-warn {
    background: #fffbeb;
    color: #d97706;
}

.scorecard-value.is-bad {
    background: #fff1f2;
    color: #e11d48;
}

.scorecard-score-pill {
    display: inline-flex;
    min-height: 28px;
    min-width: 70px;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    background: #eff6ff;
    color: #2563eb;
    font-weight: 700;
    line-height: 18px;
    white-space: nowrap;
}

.scorecard-file-links {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.scorecard-file-links a {
    min-height: 28px;
    min-width: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 3px 9px;
    border: 1px solid #dbeafe;
    border-radius: 999px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 13px;
    font-weight: 650;
    line-height: 18px;
    text-decoration: none;
    white-space: nowrap;
}

.scorecard-file-links a:hover {
    border-color: #bfdbfe;
    background: #dbeafe;
    color: #1d4ed8;
}

.scorecard-file-links i {
    font-size: 16px;
    line-height: 1;
}

.scorecards-empty-row {
    min-height: 220px;
    border: 0;
    box-shadow: none;
}

.app-popup-modal.app-scorecard-form-popup .modal-dialog {
    width: min(94vw, 1040px) !important;
    max-width: min(94vw, 1040px) !important;
    margin: 4vh auto !important;
}

.app-popup-modal.app-scorecard-form-popup .modal-content {
    max-height: min(88vh, 840px) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 18px 55px rgba(15, 23, 42, .18) !important;
}

.app-popup-modal.app-scorecard-form-popup .modal-header {
    min-height: 64px !important;
    padding: 0 28px !important;
    border-bottom: 1px solid var(--cm-border) !important;
    background: #ffffff !important;
}

.app-popup-modal.app-scorecard-form-popup .modal-title {
    color: var(--cm-text) !important;
    font-family: var(--cm-font-sans) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 30px !important;
}

.app-popup-mode.page-scorecard-form {
    background: #f8fafc !important;
}

.app-popup-mode.page-scorecard-form .app-container {
    padding: 18px 20px !important;
}

.app-popup-mode.page-scorecard-form .app-form-card,
.app-popup-mode.page-scorecard-form .app-form-card-body {
    max-width: 980px !important;
    margin: 0 auto !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.app-popup-mode.page-scorecard-form .app-popup-form {
    max-width: 980px !important;
    margin: 0 auto !important;
    padding: 18px !important;
    border: 1px solid var(--cm-border-soft) !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: var(--cm-shadow-sm) !important;
}

.app-popup-mode.page-scorecard-form .app-popup-form-content {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px 16px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.app-popup-mode.page-scorecard-form .app-popup-form-content > .mb-3 {
    width: 100% !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

.app-popup-mode.page-scorecard-form .scorecard-driver-field,
.app-popup-mode.page-scorecard-form .scorecard-agent-field,
.app-popup-mode.page-scorecard-form .scorecard-import-help,
.app-popup-mode.page-scorecard-form .scorecard-form-section-heading {
    grid-column: 1 / -1 !important;
}

.scorecard-form-section-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 -2px !important;
    padding: 0 !important;
    color: #475569;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    line-height: 18px;
    text-transform: uppercase;
}

.scorecard-form-section-heading::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: #e5e7eb;
}

.scorecard-import-help {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    background: #eff6ff;
    color: #1d4ed8;
}

.scorecard-import-help i {
    font-size: 24px;
    line-height: 1;
}

.scorecard-import-help div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.scorecard-import-help span {
    color: #64748b;
    font-size: 13px;
}

.app-popup-mode.page-scorecard-form .form-label {
    margin-bottom: 6px !important;
    color: #3f3f46 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 20px !important;
}

.app-popup-mode.page-scorecard-form .form-control,
.app-popup-mode.page-scorecard-form .form-select,
.app-popup-mode.page-scorecard-form .select2-container--default .select2-selection--single {
    min-height: 40px !important;
    height: 40px !important;
    border-radius: var(--cm-radius) !important;
    border-color: #d8dee7 !important;
    background-color: #ffffff !important;
    color: var(--cm-text) !important;
    font-size: 14px !important;
    line-height: 20px !important;
    box-shadow: none !important;
}

.app-popup-mode.page-scorecard-form input[type="file"].form-control {
    padding-top: 7px !important;
    padding-bottom: 7px !important;
}

.app-popup-mode.page-scorecard-form .select2-container {
    width: 100% !important;
}

.app-popup-mode.page-scorecard-form .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 38px !important;
}

.app-popup-mode.page-scorecard-form .app-popup-form-footer {
    width: 100% !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    margin-top: 18px !important;
    padding-top: 16px !important;
    border-top: 1px solid var(--cm-border) !important;
}

.app-popup-mode.page-scorecard-form .app-popup-cancel,
.app-popup-mode.page-scorecard-form .app-popup-submit {
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 15px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 20px !important;
}

.app-popup-modal.app-support-form-popup .modal-dialog {
    width: min(94vw, 1120px) !important;
    max-width: min(94vw, 1120px) !important;
    margin: 4vh auto !important;
}

.app-popup-modal.app-support-form-popup .modal-content {
    max-height: min(88vh, 840px) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 18px 55px rgba(15, 23, 42, .18) !important;
}

.app-popup-modal.app-support-form-popup .modal-header {
    min-height: 64px !important;
    padding: 14px 22px !important;
    border-bottom: 1px solid var(--cm-border) !important;
    background: #ffffff !important;
}

.app-popup-modal.app-support-form-popup .modal-title {
    color: var(--cm-text) !important;
    font-family: var(--cm-font-sans) !important;
    font-size: 22px !important;
    font-weight: 750 !important;
    line-height: 30px !important;
}

.app-popup-mode.page-support-form {
    background: #f8fafc !important;
}

.app-popup-mode.page-support-form .app-container {
    padding: 16px !important;
}

.app-popup-mode.page-support-form .app-form-card,
.app-popup-mode.page-support-form .app-form-card-body {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.app-popup-mode.page-support-form .app-popup-form {
    gap: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

.app-popup-mode.page-support-form .app-popup-form-content {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.support-form {
    width: 100%;
}

.support-form-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
    padding: 14px 16px;
    border: 1px solid var(--cm-border-soft);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: var(--cm-shadow-sm);
}

.support-form-toolbar > div > span {
    display: block;
    color: var(--cm-muted);
    font-size: 12px;
    font-weight: 750;
    line-height: 16px;
    text-transform: uppercase;
}

.support-form-toolbar strong {
    display: block;
    color: var(--cm-text);
    font-size: 16px;
    font-weight: 800;
    line-height: 22px;
}

.support-add-row {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 14px;
    border: 1px solid #bfdbfe;
    border-radius: var(--cm-radius);
    background: #eff6ff;
    color: var(--cm-primary);
    font-size: 14px;
    font-weight: 750;
    line-height: 20px;
}

.support-add-row i {
    font-size: 17px;
    line-height: 1;
}

.support-rows {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.support-row,
.support-form-single {
    border: 1px solid var(--cm-border-soft);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: var(--cm-shadow-sm);
}

.support-row {
    overflow: hidden;
}

.support-row-head {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--cm-border-soft);
    background: #f8fafc;
}

.support-row-head span {
    color: var(--cm-muted);
    font-size: 13px;
    font-weight: 750;
    line-height: 18px;
}

.support-row-head strong {
    color: var(--cm-text);
}

.support-remove-row {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #fecaca;
    border-radius: 999px;
    background: #fff1f2;
    color: #e11d48;
    font-size: 16px;
    line-height: 1;
}

.support-form-grid {
    display: grid;
    grid-template-columns: minmax(190px, 1.25fr) minmax(120px, .65fr) minmax(190px, 1.25fr) minmax(170px, 1fr) minmax(132px, .7fr) minmax(120px, .65fr);
    gap: 13px 14px;
    padding: 14px;
}

.support-form-single .support-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.support-field {
    min-width: 0;
    width: 100%;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

.support-field .form-label {
    margin-bottom: 6px !important;
    color: #3f3f46 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 18px !important;
}

.support-field .form-control,
.support-field .form-select,
.support-field .select2-container--default .select2-selection--single {
    min-height: 40px !important;
    height: 40px !important;
    border-radius: var(--cm-radius) !important;
    border-color: #d8dee7 !important;
    background-color: #ffffff !important;
    color: var(--cm-text) !important;
    font-size: 14px !important;
    line-height: 20px !important;
    box-shadow: none !important;
}

.support-field .select2-container {
    width: 100% !important;
}

.support-field .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 38px !important;
}

.support-field .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 38px !important;
}

.app-popup-mode.page-support-form .app-popup-form-footer {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    margin-top: 14px !important;
    padding: 14px 0 0 !important;
    border-top: 1px solid var(--cm-border) !important;
}

.app-popup-mode.page-support-form .app-popup-cancel,
.app-popup-mode.page-support-form .app-popup-submit {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 16px !important;
    border-radius: var(--cm-radius) !important;
    font-size: 14px !important;
    line-height: 20px !important;
}

@media (max-width: 1199.98px) {
    .support-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .support-form-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .support-add-row {
        width: 100%;
    }

    .support-form-grid,
    .support-form-single .support-form-grid {
        grid-template-columns: 1fr;
    }
}

.vans-metrics-grid {
    max-width: 880px;
}

.vans-filter-bar {
    grid-template-columns: minmax(260px, 1.35fr) repeat(3, minmax(190px, 1fr));
}

.vans-table {
    min-width: 1320px;
}

.vans-table th,
.vans-table td {
    vertical-align: middle;
}

.vans-table th:last-child,
.vans-table td:last-child {
    width: 112px;
    text-align: right;
}

.van-identity {
    min-width: 260px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.van-avatar {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #eef2ff;
    color: #1d4ed8;
    font-size: 22px;
}

.van-avatar-img {
    padding: 0;
    object-fit: cover;
}

.van-identity .van-identity-title {
    display: flex;
    flex-direction: row;
    min-width: 0;
    align-items: center;
    gap: 6px;
}

.app-van-status {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    line-height: 0;
    cursor: default;
}

.van-identity .app-van-status {
    max-width: none;
    overflow: visible;
}

.app-van-status-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #a1a1aa;
    box-shadow: 0 0 0 3px rgba(161, 161, 170, .15);
}

.app-van-status-dot--1 {
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, .15);
}

.app-van-status-dot--2 {
    background: #71717a;
    box-shadow: 0 0 0 3px rgba(113, 113, 122, .15);
}

.app-van-status-dot--3 {
    background: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, .16);
}

.app-van-status-dot--4 {
    background: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}

.van-identity div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.van-identity a {
    color: var(--cm-text);
    font-size: 15px;
    font-weight: 750;
    line-height: 20px;
    text-decoration: none;
}

.van-identity a:hover {
    color: #1d4ed8;
}

.van-identity span,
.van-identity small {
    max-width: 220px;
    overflow: hidden;
    color: #667085;
    font-size: 13px;
    line-height: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.van-identity small {
    color: #98a2b3;
}

.van-score-pill,
.van-tags-list span {
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    line-height: 18px;
}

.van-score-pill {
    min-width: 44px;
    padding: 3px 9px;
    background: #fffbeb;
    color: #d97706;
}

.van-tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-width: 190px;
}

.van-tags-list span {
    padding: 3px 9px;
    background: #f4f4f5;
    color: #52525b;
}

.vans-empty-row {
    min-height: 220px;
    border: 0;
    box-shadow: none;
}

.app-popup-modal.app-van-form-popup .modal-dialog {
    width: min(86vw, 1280px) !important;
    max-width: min(86vw, 1280px) !important;
    margin: 6vh auto !important;
}

.app-popup-modal.app-van-form-popup .modal-content {
    max-height: min(86vh, 820px) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10) !important;
}

.app-popup-modal.app-van-form-popup .modal-header {
    min-height: 96px !important;
    align-items: flex-start !important;
    gap: 18px !important;
    padding: 24px 34px 20px !important;
    border-bottom: 1px solid var(--cm-border) !important;
    background: #ffffff !important;
}

.app-popup-modal .app-popup-title-wrap {
    min-width: 0;
    flex: 1 1 auto;
}

.app-popup-modal.app-van-form-popup .modal-title {
    color: var(--cm-text) !important;
    font-family: var(--cm-font-sans) !important;
    font-size: 24px !important;
    font-weight: 750 !important;
    line-height: 30px !important;
}

.app-popup-modal #appCrudPopupSubtitle {
    display: none;
}

.app-popup-modal.app-van-form-popup #appCrudPopupSubtitle {
    display: block;
    margin: 4px 0 0;
    color: #6b7280;
    font-size: 15px;
    line-height: 22px;
}

.app-popup-progress-dots {
    display: none;
}

.app-popup-modal.app-van-form-popup .app-popup-progress-dots {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
}

.app-popup-modal.app-van-form-popup .app-popup-progress-dots span {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #eef2f7;
}

.app-popup-modal.app-van-form-popup .app-popup-progress-dots span.is-active {
    background: #2454f5;
}

.app-popup-modal.app-van-form-popup .btn-close {
    margin-top: 2px !important;
}

.app-popup-mode.page-van-form {
    background: #ffffff !important;
    overflow: hidden !important;
}

.app-popup-mode.page-van-form,
.app-popup-mode.page-van-form body,
.app-popup-mode.page-van-form .app-wrapper,
.app-popup-mode.page-van-form .content-page,
.app-popup-mode.page-van-form .content,
.app-popup-mode.page-van-form .app-container {
    height: 100% !important;
    min-height: 0 !important;
}

.app-popup-mode.page-van-form .app-container {
    padding: 0 !important;
    overflow: hidden !important;
}

.app-popup-mode.page-van-form .app-form-card,
.app-popup-mode.page-van-form .app-form-card-body {
    max-width: 100% !important;
    margin: 0 auto !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.app-popup-mode.page-van-form .app-popup-form {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

.app-popup-mode.page-van-form .app-popup-form-content {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 13px 16px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.app-popup-mode.page-van-form .app-popup-form-content > .mb-3 {
    width: 100% !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

.app-popup-mode.page-van-form .van-tags-field {
    grid-column: 1 / -1 !important;
}

.app-popup-mode.page-van-form .form-label {
    margin-bottom: 6px !important;
    color: #3f3f46 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 20px !important;
}

.app-popup-mode.page-van-form .form-control,
.app-popup-mode.page-van-form .form-select,
.app-popup-mode.page-van-form .select2-container--default .select2-selection--single,
.app-popup-mode.page-van-form .select2-container--default .select2-selection--multiple {
    min-height: 40px !important;
    border-radius: var(--cm-radius) !important;
    border-color: #d8dee7 !important;
    background-color: #ffffff !important;
    color: var(--cm-text) !important;
    font-size: 14px !important;
    line-height: 20px !important;
    box-shadow: none !important;
}

.app-popup-mode.page-van-form .select2-container {
    width: 100% !important;
}

.app-popup-mode.page-van-form .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 38px !important;
}

.app-popup-mode.page-van-form .app-popup-form-footer {
    width: 100% !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    margin-top: 16px !important;
    padding-top: 14px !important;
    border-top: 1px solid var(--cm-border) !important;
}

.app-popup-mode.page-van-form .app-popup-cancel,
.app-popup-mode.page-van-form .app-popup-submit {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 16px !important;
    border-radius: var(--cm-radius) !important;
    font-size: 14px !important;
    line-height: 20px !important;
}

.app-popup-mode.page-van-form .van-wizard-form {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #ffffff;
}

.van-wizard-layout {
    min-height: 0;
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    overflow: auto;
    overscroll-behavior: contain;
}

.van-wizard-steps {
    position: sticky;
    top: 0;
    align-self: start;
    min-height: 100%;
    padding: 30px 34px 24px;
    border-right: 1px solid #e5e7eb;
    background: #ffffff;
}

.van-wizard-step {
    position: relative;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    width: 100%;
    min-height: 68px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #71717f;
    text-align: left;
}

.van-wizard-step:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 20px;
    top: 46px;
    bottom: -22px;
    width: 1px;
    background: #e5e7eb;
}

.van-wizard-step span {
    position: relative;
    z-index: 1;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #e5e7eb;
    border-radius: 999px;
    background: #ffffff;
    color: #71717f;
    font-size: 15px;
    font-weight: 700;
}

.van-wizard-step strong {
    color: currentColor;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
}

.van-wizard-step.is-active {
    color: #24211f;
}

.van-wizard-step.is-active span {
    border-color: #1d4ed8;
    background: #1d4ed8;
    color: #ffffff;
}

.van-wizard-step.is-done span {
    border-color: #1d4ed8;
    color: #1d4ed8;
}

.van-wizard-step em {
    display: inline-flex;
    align-items: center;
    min-height: 18px;
    margin-left: 4px;
    padding: 0 6px;
    border-radius: 999px;
    background: #fee2e2;
    color: #b91c1c;
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
    line-height: 18px;
}

.van-wizard-main {
    padding: 32px 38px 24px;
}

.van-wizard-section.is-hidden,
.van-wizard-footer .is-hidden {
    display: none !important;
}

.van-wizard-section-header {
    margin-bottom: 34px;
}

.van-wizard-section-header h2 {
    margin: 0;
    color: #24211f;
    font-size: 24px;
    font-weight: 600;
    line-height: 30px;
}

.van-wizard-section-header p {
    margin: 4px 0 0;
    color: #787b86;
    font-size: 15px;
    line-height: 22px;
}

.van-wizard-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 36px;
}

.van-wizard-field {
    min-width: 0;
}

.van-wizard-field-wide {
    grid-column: 1 / -1;
}

.van-wizard-field label {
    display: block;
    margin: 0 0 6px;
    color: #767986;
    font-size: 13px;
    font-weight: 750;
    line-height: 18px;
    text-transform: uppercase;
}

.van-wizard-field label span {
    color: #ef4444;
}

.van-wizard-field input,
.van-wizard-field textarea,
.van-wizard-field select,
.van-wizard-field .select2-container--default .select2-selection--multiple {
    width: 100% !important;
    min-height: 42px !important;
    border: 0 !important;
    border-bottom: 1px solid #e5e7eb !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    color: #27272a !important;
    font-size: 15px !important;
    line-height: 22px !important;
    box-shadow: none !important;
}

.van-wizard-field input,
.van-wizard-field textarea,
.van-wizard-field select {
    padding: 8px 0 !important;
    outline: none !important;
}

.van-wizard-field textarea {
    min-height: 62px !important;
    resize: vertical;
}

.van-wizard-field input::placeholder,
.van-wizard-field textarea::placeholder {
    color: #9ca3af;
}

.van-wizard-field .select2-container--default .select2-selection--multiple {
    padding: 3px 0 !important;
}

.van-wizard-field .select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin-top: 4px !important;
}

.van-wizard-field small {
    display: block;
    margin-top: 5px;
    color: #ef4444;
    font-size: 12px;
}

.van-wizard-help {
    color: #858996 !important;
}

.van-wizard-doc-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.van-wizard-doc-field {
    min-height: 78px;
    display: grid !important;
    gap: 10px;
    padding: 14px !important;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #ffffff;
    color: #3f3f46 !important;
    font-size: 14px !important;
    font-weight: 650 !important;
    line-height: 20px !important;
    text-transform: none !important;
}

.van-wizard-doc-field > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.van-wizard-doc-field .mdi {
    color: #3b82f6;
    font-size: 20px;
}

.van-wizard-doc-field input[type="file"] {
    min-height: 34px !important;
    padding: 0 !important;
    border-bottom: 0 !important;
    font-size: 13px !important;
}

.van-wizard-follow-section {
    margin-top: 34px;
    padding-top: 20px;
    border-top: 1px solid #eef2f7;
}

.van-wizard-follow-section h3 {
    margin: 0 0 16px;
    color: #747986;
    font-size: 13px;
    font-weight: 800;
    line-height: 18px;
}

.van-wizard-follow-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.van-follow-card {
    min-height: 74px;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 42px;
    gap: 12px;
    align-items: center;
    padding: 14px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #ffffff;
}

.van-follow-card > span:not(.van-follow-icon) {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.van-follow-card strong {
    color: #3f3f46;
    font-size: 15px;
    font-weight: 750;
    line-height: 20px;
}

.van-follow-card small {
    color: #858996;
    font-size: 13px;
    line-height: 18px;
}

.van-follow-icon {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.van-follow-icon.is-purple {
    color: #8b5cf6;
}

.van-follow-icon.is-blue {
    color: #3b82f6;
}

.van-follow-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.van-follow-card > i {
    width: 38px;
    height: 22px;
    position: relative;
    display: inline-flex;
    border-radius: 999px;
    background: #e5e7eb;
}

.van-follow-card > i::after {
    content: "";
    width: 18px;
    height: 18px;
    position: absolute;
    top: 2px;
    left: 2px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
}

.van-wizard-footer {
    min-height: 76px;
    flex: 0 0 auto;
    display: flex !important;
    align-items: center;
    justify-content: space-between !important;
    gap: 18px;
    margin-top: auto !important;
    padding: 16px 34px !important;
    border-top: 1px solid #e5e7eb !important;
    background: #ffffff;
}

.van-wizard-footer > span {
    color: #8a8f9c;
    font-size: 13px;
    line-height: 18px;
}

.van-wizard-footer > div {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.van-wizard-footer .app-popup-cancel {
    min-width: 0 !important;
    min-height: 36px !important;
    padding: 0 14px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: var(--cm-radius) !important;
    background: #ffffff !important;
    color: var(--cm-text) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    box-shadow: none !important;
}

.van-wizard-footer .app-popup-submit {
    min-width: 0 !important;
    min-height: 36px !important;
    padding: 0 14px !important;
    border-color: var(--cm-primary) !important;
    border-radius: var(--cm-radius) !important;
    background: var(--cm-primary) !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    box-shadow: none !important;
}

.app-sidebar-menu .menu-item .menu-link {
    min-height: 36px !important;
    padding: 8px !important;
    font-size: 14px !important;
    line-height: 20px !important;
    gap: 8px !important;
}

.app-sidebar-menu > .menu-item + .menu-item {
    margin-top: 0 !important;
}

.app-sidebar-menu .menu-item .menu-link > .menu-text {
    font-size: 14px !important;
    line-height: 20px !important;
}

.app-sidebar-menu .menu-icon {
    width: 16px !important;
    min-width: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    line-height: 1 !important;
}

.app-sidebar-menu .menu-title {
    min-height: 27px !important;
    margin: 0 !important;
    padding: 6px 8px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    line-height: 15px !important;
    letter-spacing: 0.1em !important;
}

.app-sidebar-menu > .menu-title + .menu-item {
    margin-top: -4px !important;
}

.app-sidebar-menu .sub-menu {
    margin-left: 19px !important;
    padding-left: 11px !important;
}

.app-sidebar-menu .sub-menu .menu-link {
    min-height: 36px !important;
    padding: 8px !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 500 !important;
}

.app-sidebar-menu .sub-menu .menu-link > .menu-text {
    font-size: 14px !important;
    line-height: 20px !important;
}

.app-sidebar-menu .sub-menu .menu-icon {
    width: 16px !important;
    min-width: 16px !important;
    font-size: 16px !important;
    color: currentColor !important;
}

.page-driver-profile .app-container {
    width: 100%;
    max-width: 100%;
    padding: 24px 26px 24px;
}

.driver-profile-shell {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.driver-profile-back-row {
    display: flex;
    align-items: center;
}

.driver-profile-overview {
    margin: 0;
}

.driver-profile-overview .drivers-metric-card {
    position: relative;
    min-height: 104px;
    align-items: flex-start;
    justify-content: center;
    padding: 18px 20px 18px 64px;
    text-align: left;
}

.driver-profile-overview .drivers-metric-card i {
    width: 34px;
    height: 34px;
    position: absolute;
    top: 18px;
    left: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.05);
    color: currentColor;
    font-size: 18px;
    line-height: 1;
}

.driver-profile-overview .drivers-metric-card strong {
    font-size: 28px;
    line-height: 34px;
}

.driver-profile-back {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    border: 1px solid var(--cm-border);
    border-radius: var(--cm-radius);
    background: #ffffff;
    color: #475569;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: var(--cm-shadow-sm);
}

.driver-profile-back:hover {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #2554e8;
}

.driver-profile-card,
.driver-profile-tabs-card {
    border: 1px solid var(--cm-border-soft);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: var(--cm-shadow-sm);
}

.driver-profile-card {
    overflow: hidden;
    padding: 0;
}

.driver-profile-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    margin-bottom: 0;
    padding: 28px;
    border-bottom: 1px solid var(--cm-border);
    background:
        linear-gradient(135deg, rgba(239, 246, 255, 0.78), rgba(255, 255, 255, 0.92) 46%, rgba(240, 253, 244, 0.62));
}

.driver-profile-avatar {
    width: 92px;
    height: 92px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #ffffff;
    border-radius: 999px;
    background: #eef2ff;
    color: #2554e8;
    font-size: 24px;
    font-weight: 800;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
}

.driver-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.driver-profile-title {
    min-width: 0;
    display: grid;
    gap: 8px;
}

.driver-profile-name-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.driver-profile-name-row h1 {
    margin: 0;
    color: var(--cm-text);
    font-family: var(--cm-font-sans);
    font-size: 30px;
    font-weight: 850;
    line-height: 38px;
    letter-spacing: 0;
}

.driver-profile-status {
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border: 1px solid #d4d4d8;
    border-radius: 999px;
    background: #f4f4f5;
    color: #52525b;
    font-size: 12px;
    font-weight: 800;
    line-height: 18px;
}

.driver-profile-status-1 {
    border-color: #a7f3d0;
    background: #ecfdf5;
    color: #059669;
}

.driver-profile-status-2 {
    border-color: #fde68a;
    background: #fffbeb;
    color: #d97706;
}

.driver-profile-status-5 {
    border-color: #d4d4d8;
    background: #f4f4f5;
    color: #52525b;
}

.driver-profile-status-3 {
    border-color: #fecdd3;
    background: #fff1f2;
    color: #e11d48;
}

.driver-profile-status-4 {
    border-color: #bae6fd;
    background: #e0f2fe;
    color: #0369a1;
}

.driver-profile-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 0;
    color: #6b7280;
    font-size: 13px;
    font-weight: 650;
    line-height: 18px;
}

.driver-profile-meta span {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.driver-profile-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 0;
}

.driver-profile-tags span {
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    background: #eff6ff;
    color: #2554e8;
    font-size: 12px;
    font-weight: 800;
}

.driver-profile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    max-width: 560px;
}

.driver-profile-info-grid,
.driver-profile-extra-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.driver-profile-info-grid {
    padding: 18px;
    background: #ffffff;
}

.driver-profile-info-grid article,
.driver-profile-extra-grid article {
    min-width: 0;
}

.driver-profile-info-grid article {
    display: grid;
    align-content: start;
    gap: 6px;
    min-height: 94px;
    padding: 14px;
    border: 1px solid #eef2f7;
    border-radius: 8px;
    background: #fbfdff;
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.driver-profile-info-grid article:hover {
    border-color: #dbeafe;
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
}

.driver-profile-info-grid article > span,
.driver-profile-extra-grid article > span {
    display: block;
    color: #6b7280;
    font-size: 13px;
    line-height: 18px;
}

.driver-profile-info-grid article > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 760;
    letter-spacing: 0;
    text-transform: uppercase;
}

.driver-profile-info-grid article > span i {
    color: #6b7280;
    font-size: 18px;
    line-height: 1;
}

.driver-profile-info-grid article > strong,
.driver-profile-extra-grid article > strong {
    display: block;
    overflow: hidden;
    color: var(--cm-text);
    font-size: 15px;
    font-weight: 800;
    line-height: 22px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.driver-profile-info-grid a {
    color: #2554e8;
    text-decoration: none;
}

.driver-profile-info-grid a:hover {
    text-decoration: underline;
}

.driver-profile-compliance {
    width: max-content;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
}

.driver-profile-compliance.is-ok {
    border-color: #a7f3d0;
    background: #ecfdf5;
    color: #059669;
}

.driver-profile-compliance.is-nok {
    border-color: #fde68a;
    background: #fffbeb;
    color: #d97706;
}

.driver-profile-quick-state {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.driver-profile-quick-state span {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #ffffff;
    color: #475569;
    font-size: 12px;
    font-weight: 800;
    line-height: 18px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}

.driver-profile-quick-state i {
    font-size: 15px;
    line-height: 1;
}

.driver-profile-quick-state .is-ok {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #15803d;
}

.driver-profile-quick-state .is-warning {
    border-color: #fde68a;
    background: #fffbeb;
    color: #d97706;
}

.driver-profile-quick-state .is-info {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.driver-profile-quick-state .is-muted {
    border-color: #e5e7eb;
    background: #f8fafc;
    color: #64748b;
}

.driver-profile-inline-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.driver-profile-inline-tags em {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    border-radius: 999px;
    background: #f4f4f5;
    color: #52525b;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
    line-height: 18px;
}

.driver-profile-wide {
    grid-column: span 2;
}

.driver-profile-switch-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.driver-profile-switch-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.driver-profile-switch-row strong {
    color: var(--cm-text);
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
}

.driver-profile-switch-row em {
    color: #6b7280;
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
}

.driver-profile-switch {
    width: 32px;
    height: 18px;
    position: relative;
    flex: 0 0 32px;
    display: inline-flex;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #e5e7eb;
    cursor: pointer;
    overflow: hidden;
    transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

.driver-profile-switch::before {
    content: none !important;
    display: none !important;
}

button.driver-profile-switch:hover {
    box-shadow: 0 0 0 3px rgba(37, 84, 232, 0.12);
}

button.driver-profile-switch:focus-visible {
    outline: 2px solid rgba(37, 84, 232, 0.42);
    outline-offset: 3px;
}

.driver-profile-switch::after {
    content: "";
    width: 14px;
    height: 14px;
    position: absolute;
    top: 2px;
    left: 2px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
}

.driver-profile-switch.is-on {
    background: #2554e8;
}

.driver-profile-switch.is-on::after {
    left: 16px;
}

.driver-profile-flag-modal .modal-dialog {
    width: min(92vw, 576px);
    max-width: min(92vw, 576px);
}

.driver-profile-flag-modal .modal-content {
    overflow: hidden;
    border: 1px solid rgba(229, 231, 235, 0.95);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.24);
}

.driver-profile-flag-modal .modal-header {
    min-height: 76px;
    align-items: flex-start;
    padding: 28px 36px 8px;
    border-bottom: 0;
}

.driver-profile-flag-modal .modal-title {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    color: #3f3a36;
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: 0;
}

.driver-profile-flag-modal .modal-title i {
    color: #2563eb;
    font-size: 24px;
    line-height: 1;
}

.driver-profile-flag-modal .modal-title i[data-tone="warning"] {
    color: #eab308;
}

.driver-profile-flag-modal .btn-close {
    margin: -4px -10px 0 auto;
    opacity: 0.55;
}

.driver-profile-flag-modal .modal-body {
    padding: 22px 36px 18px;
}

.driver-profile-flag-description {
    max-width: 420px;
    margin: 0 0 20px;
    color: #b8bad0;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
}

.driver-profile-flag-label {
    display: block;
    margin-bottom: 8px;
    color: #3f3a36;
    font-size: 15px;
    font-weight: 500;
    line-height: 22px;
}

.driver-profile-flag-modal textarea {
    width: 100%;
    min-height: 112px;
    resize: vertical;
    padding: 13px 18px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: #ffffff;
    color: var(--cm-text);
    font-family: var(--cm-font-sans);
    font-size: 15px;
    line-height: 24px;
    outline: none;
}

.driver-profile-flag-modal textarea::placeholder {
    color: #c2c4d9;
}

.driver-profile-flag-modal textarea:focus {
    border-color: #bfdbfe;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.driver-profile-flag-modal .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 14px;
    padding: 12px 36px 28px;
    border-top: 0;
}

.drivers-btn-ghost {
    border-color: transparent !important;
    background: #ffffff !important;
    box-shadow: none !important;
    color: #3f3a36 !important;
}

.driver-profile-extra {
    margin: 0 18px 18px;
    padding-top: 18px;
    border-top: 1px solid var(--cm-border);
}

.driver-profile-extra-trigger {
    width: max-content;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    border: 1px solid var(--cm-border);
    border-radius: var(--cm-radius);
    background: #ffffff;
    color: #475569;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: var(--cm-shadow-sm);
}

.driver-profile-extra-trigger:hover {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #2554e8;
}

.driver-profile-extra-trigger i {
    font-size: 18px;
    line-height: 1;
}

.driver-profile-extra-grid {
    margin-top: 16px;
}

.driver-profile-extra-section {
    margin-top: 20px;
}

.driver-profile-extra-section h2 {
    margin: 0 0 10px;
    color: var(--cm-text);
    font-size: 16px;
    font-weight: 800;
    line-height: 22px;
}

.driver-extra-data-modal .modal-dialog {
    width: min(92vw, 980px);
    max-width: min(92vw, 980px);
}

.driver-extra-data-modal .modal-content {
    max-height: min(86vh, 820px);
    overflow: hidden;
    border: 1px solid rgba(229, 231, 235, 0.9);
    border-radius: 12px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.22);
}

.driver-extra-data-modal .modal-header {
    min-height: 70px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--cm-border);
    background: #ffffff;
}

.driver-extra-data-modal .modal-title {
    margin: 0;
    color: var(--cm-text);
    font-size: 22px;
    font-weight: 800;
    line-height: 28px;
}

.driver-extra-data-modal .modal-header p {
    margin: 2px 0 0;
    color: #667085;
    font-size: 13px;
    font-weight: 650;
    line-height: 18px;
}

.driver-extra-data-modal .modal-body {
    padding: 0;
    background: #fbfbfc;
}

.driver-extra-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    padding: 16px 18px 14px;
    border-bottom: 1px solid var(--cm-border);
    background: #ffffff;
    scrollbar-width: thin;
}

.driver-extra-tabs .nav-item {
    flex: 0 0 auto;
}

.driver-extra-tab {
    min-height: 38px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 13px !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    line-height: 18px !important;
    white-space: nowrap;
}

.driver-extra-tab i {
    font-size: 16px;
    line-height: 1;
}

.driver-extra-tab.active {
    border-color: #bfdbfe !important;
    background: #eff6ff !important;
    color: #2554e8 !important;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.08);
}

.driver-extra-tab-content {
    padding: 20px 24px 24px;
}

.driver-extra-data-modal .driver-profile-extra-section {
    margin-top: 0;
    padding: 18px;
    border: 1px solid var(--cm-border-soft);
    border-radius: 10px;
    background: #ffffff;
    box-shadow: var(--cm-shadow-sm);
}

.driver-extra-data-modal .driver-profile-extra-section + .driver-profile-extra-section {
    margin-top: 14px;
}

.driver-extra-data-modal .driver-profile-extra-grid {
    margin-top: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.driver-extra-data-modal .driver-profile-extra-grid article {
    min-height: 86px;
    padding: 14px;
    border: 1px solid #eef2f7;
    border-radius: 8px;
    background: #fbfdff;
}

.driver-extra-data-modal .driver-profile-extra-grid article > strong {
    white-space: normal;
    overflow-wrap: anywhere;
}

.driver-extra-data-modal .driver-profile-extra-grid a {
    color: #2554e8;
    text-decoration: none;
}

.driver-extra-data-modal .driver-profile-extra-grid a:hover {
    text-decoration: underline;
}

.driver-profile-extra-grid article > strong .driver-profile-inline-tags,
.driver-profile-info-grid article > strong .driver-profile-inline-tags {
    overflow: visible;
    white-space: normal;
}

.driver-profile-tabs-card {
    overflow: hidden;
}

.driver-profile-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    padding: 14px 16px;
    border-bottom: 1px solid var(--cm-border);
    background: #ffffff;
    scrollbar-width: thin;
}

.driver-profile-tabs .nav-item {
    flex: 0 0 auto;
}

.driver-profile-tab {
    min-height: 38px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 13px !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #6b7280 !important;
    font-size: 13px;
    font-weight: 800;
    line-height: 20px;
    white-space: nowrap;
}

.driver-profile-tab em {
    min-width: 22px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 7px;
    border-radius: 999px;
    background: #f4f4f5;
    color: #71717a;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
}

.driver-profile-tab.active {
    border-color: #bfdbfe !important;
    background: #eff6ff !important;
    color: #2554e8 !important;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.08);
}

.driver-profile-tab.active em {
    background: #eff6ff;
    color: #2554e8;
}

.driver-profile-tab-content {
    padding: 16px;
}

.page-driver-absence-log .content-page.app-content-page {
    background: #ffffff;
}

.page-driver-absence-log .app-container {
    max-width: none;
    padding: 30px 32px 28px;
}

.absence-log-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.absence-log-back-row {
    display: flex;
    align-items: center;
}

.absence-log-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--cm-border);
}

.absence-log-driver {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 16px;
}

.absence-log-avatar {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    overflow: hidden;
    border-radius: 999px;
    background: #eef2ff;
    color: #2554e8;
    font-size: 18px;
    font-weight: 850;
}

.absence-log-avatar img,
.absence-log-avatar span {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.absence-log-avatar img {
    object-fit: cover;
}

.absence-log-header h1 {
    margin: 0;
    color: var(--cm-text);
    font-size: 30px;
    font-weight: 800;
    line-height: 38px;
}

.absence-log-header p {
    margin: 2px 0 0;
    color: #475569;
    font-size: 15px;
    font-weight: 700;
    line-height: 22px;
}

.absence-log-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.absence-log-meta span {
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #fbfbfc;
    color: #667085;
    font-size: 12px;
    font-weight: 750;
}

.absence-log-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.absence-log-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.absence-log-metrics article {
    min-height: 104px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 18px;
    border: 1px solid var(--cm-border-soft);
    border-radius: 14px;
    background: #ffffff;
    text-align: center;
    box-shadow: var(--cm-shadow-sm);
}

.absence-log-metrics strong {
    max-width: 100%;
    overflow: hidden;
    color: var(--cm-text);
    font-size: 28px;
    font-weight: 850;
    line-height: 34px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.absence-log-metrics span {
    color: #667085;
    font-size: 13px;
    font-weight: 700;
    line-height: 18px;
}

.absence-log-table-card {
    border-radius: 14px;
}

.absence-log-table {
    min-width: 780px !important;
}

.absence-log-date {
    color: #475569;
    font-weight: 750;
}

.absence-log-reason {
    max-width: 520px;
}

.absence-log-table-card .drivers-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 62px;
    padding: 13px 16px;
    border-top: 1px solid var(--cm-border-soft);
    background: #ffffff;
    color: #667085;
    font-size: 13px;
    font-weight: 700;
}

.absence-log-table-card .drivers-pagination {
    min-height: 0 !important;
    margin-left: auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.absence-log-empty {
    border: 1px solid var(--cm-border-soft);
    border-radius: 14px;
    box-shadow: var(--cm-shadow-sm);
}

.absence-log-modal .modal-dialog {
    width: min(92vw, 720px) !important;
    max-width: min(92vw, 720px) !important;
}

.absence-log-modal .modal-content {
    max-height: min(86vh, 760px) !important;
    overflow: hidden !important;
    border-radius: 12px !important;
}

.absence-log-modal .modal-header {
    min-height: 68px !important;
    padding: 18px 24px !important;
}

.absence-log-modal .modal-title {
    font-size: 22px !important;
    font-weight: 800 !important;
    line-height: 28px !important;
}

.absence-log-modal .modal-header p {
    margin: 2px 0 0;
    color: #667085;
    font-size: 13px;
    font-weight: 650;
}

.absence-log-modal .modal-body {
    padding: 18px 24px 22px !important;
    background: #fbfbfc;
}

.absence-log-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.absence-log-form-content {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
    padding: 18px;
    border: 1px solid var(--cm-border-soft);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: var(--cm-shadow-sm);
}

.absence-log-form-content > .mb-3 {
    margin-bottom: 0 !important;
}

.absence-log-form-content .absence-form-reason-field,
.absence-log-form-content .absence-form-file-field,
.absence-log-form-content .absence-form-status-field,
.absence-log-form-content .warning-form-notes-field,
.absence-log-form-content .warning-form-file-field,
.absence-log-form-content .contract-form-file-field,
.absence-log-form-content .contract-form-notes-field,
.absence-log-driver-field {
    grid-column: 1 / -1;
}

.absence-log-driver-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--cm-border-soft);
}

.absence-log-driver-field span {
    color: #667085;
    font-size: 12px;
    font-weight: 800;
}

.absence-log-driver-field strong {
    color: var(--cm-text);
    font-size: 15px;
    font-weight: 800;
}

.absence-log-form-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid var(--cm-border-soft);
    padding-top: 0.95rem;
    margin-top: 0.15rem;
}

.absence-log-form-footer .btn {
    min-width: 0;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 14px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    box-shadow: none !important;
}

.absence-log-form-footer .btn-light {
    border: 1px solid var(--cm-border, #e5e7eb) !important;
    background: #ffffff !important;
    color: #24211f !important;
}

.absence-log-form-footer .btn-primary {
    border: 1px solid #1d4ed8 !important;
    background: #1d4ed8 !important;
    color: #ffffff !important;
}

.contract-log-table {
    min-width: 980px !important;
}

.contract-log-table th:nth-child(1),
.contract-log-table td:nth-child(1) {
    width: 220px;
}

.contract-log-table th:nth-child(2),
.contract-log-table td:nth-child(2) {
    width: 150px;
}

.contract-log-table th:nth-child(3),
.contract-log-table td:nth-child(3),
.contract-log-table th:nth-child(4),
.contract-log-table td:nth-child(4),
.contract-log-table th:nth-child(5),
.contract-log-table td:nth-child(5),
.contract-log-table th:nth-child(6),
.contract-log-table td:nth-child(6),
.contract-log-table th:nth-child(7),
.contract-log-table td:nth-child(7) {
    width: 132px;
}

.contract-log-employer {
    max-width: 190px;
}

.contract-log-metrics article:nth-child(2) strong {
    font-size: 22px;
    line-height: 28px;
}

.contract-finish-form-content {
    grid-template-columns: 1fr;
}

.contracts-page-shell {
    gap: 22px;
}

.contracts-metrics-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.contracts-tabs {
    width: fit-content;
    max-width: 100%;
}

.contracts-filter-bar {
    grid-template-columns: minmax(190px, 1.25fr) minmax(170px, 1fr) minmax(150px, 1fr) minmax(120px, 0.7fr) minmax(150px, 1fr) minmax(130px, 0.85fr) minmax(130px, 0.85fr);
}

.contracts-table {
    min-width: 1240px;
}

.contracts-table th:nth-child(1),
.contracts-table td:nth-child(1) {
    width: 270px;
}

.contracts-table th:nth-child(2),
.contracts-table td:nth-child(2) {
    width: 160px;
}

.contracts-table th:nth-child(8),
.contracts-table td:nth-child(8) {
    width: 150px;
}

.contracts-table th:nth-child(9),
.contracts-table td:nth-child(9) {
    width: 160px;
}

.contracts-driver-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}

.contracts-driver-cell .app-driver-avatar-link {
    max-width: 100%;
}

.app-driver-status {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    line-height: 0;
    cursor: default;
}

.app-driver-status-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #a1a1aa;
    box-shadow: 0 0 0 3px rgba(161, 161, 170, .15);
}

.app-driver-status-dot--1 {
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, .15);
}

.app-driver-status-dot--2 {
    background: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, .16);
}

.app-driver-status-dot--3 {
    background: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .15);
}

.app-driver-status-dot--4 {
    background: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}

.app-driver-status-dot--5 {
    background: #71717a;
    box-shadow: 0 0 0 3px rgba(113, 113, 122, .15);
}

.contract-status-pill {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    white-space: nowrap;
}

.contract-status-pill.is-current {
    border-color: #a7f3d0;
    background: #ecfdf5;
    color: #059669;
}

.contract-status-pill.is-warning,
.contract-status-pill.is-expiring {
    border-color: #fde68a;
    background: #fffbeb;
    color: #d97706;
}

.contract-status-pill.is-finished,
.contract-status-pill.is-muted {
    border-color: #d4d4d8;
    background: #f4f4f5;
    color: #71717a;
}

.contract-file-link,
.contract-upload-link {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    gap: 6px;
    color: #2563eb;
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
    text-decoration: none;
    cursor: pointer;
}

.contract-file-link:hover,
.contract-upload-link:hover {
    color: #1d4ed8;
}

.contracts-upload-form {
    margin: 0;
}

.contract-upload-link input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.contracts-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    white-space: nowrap;
}

.contracts-action-link {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border: 1px solid var(--cm-border);
    border-radius: var(--cm-radius);
    background: #ffffff;
    color: var(--cm-text);
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    text-decoration: none;
    gap: 6px;
}

.contracts-action-link:hover {
    background: #f4f4f5;
    color: var(--cm-text);
}

.contracts-action-link.is-danger {
    border-color: #fecaca;
    color: #ef4444;
}

.contracts-action-link.is-danger:hover {
    background: #fff1f2;
    color: #dc2626;
}

.documentation-page-shell {
    gap: 22px;
}

.documentation-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.documentation-header-pill {
    display: inline-flex;
    min-height: 22px;
    align-items: center;
    padding: 2px 8px;
    border: 1px solid #fde68a;
    border-radius: 999px;
    background: #fffbeb;
    color: #d97706;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    white-space: nowrap;
}

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

.documentation-metrics-grid .drivers-metric-card {
    min-height: 104px;
    align-items: flex-start;
    text-align: left;
}

.documentation-metrics-grid .drivers-metric-card span {
    color: #71717a;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    text-transform: uppercase;
}

.documentation-metrics-grid .drivers-metric-card strong {
    line-height: 30px;
}

.documentation-metrics-grid .drivers-metric-card small {
    color: #71717a;
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
}

.documentation-metric-pending {
    --metric-color: #d97706;
}

.documentation-metric-expiring {
    --metric-color: #f97316;
}

.documentation-metric-expired {
    --metric-color: #dc2626;
}

.documentation-filter-bar {
    grid-template-columns: minmax(180px, 1.1fr) minmax(160px, 1fr) minmax(180px, 1fr) minmax(180px, 1fr) minmax(150px, 0.85fr) auto;
    align-items: end;
}

.documentation-filter-clear {
    justify-content: center;
    text-decoration: none;
    white-space: nowrap;
}

.documentation-status-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.documentation-status-chip {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border: 1px solid var(--cm-border-soft);
    border-radius: 999px;
    background: #ffffff;
    color: #71717a;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    text-decoration: none;
    transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.documentation-status-chip:hover,
.documentation-status-chip.is-active {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #2563eb;
}

.documentation-table {
    min-width: 1120px;
}

.documentation-table th,
.documentation-table td {
    white-space: nowrap;
}

.documentation-table th:nth-child(2),
.documentation-table td:nth-child(2) {
    width: 220px;
}

.documentation-table th:nth-child(3),
.documentation-table td:nth-child(3) {
    width: 220px;
}

.documentation-status-pill {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    white-space: nowrap;
}

.documentation-status-pill.is-pending {
    border-color: #d4d4d8;
    background: #f4f4f5;
    color: #71717a;
}

.documentation-status-pill.is-valid {
    border-color: #a7f3d0;
    background: #ecfdf5;
    color: #059669;
}

.documentation-status-pill.is-expiring {
    border-color: #fde68a;
    background: #fffbeb;
    color: #d97706;
}

.documentation-status-pill.is-expired {
    border-color: #fecaca;
    background: #fff1f2;
    color: #dc2626;
}

.documentation-entity-link,
.documentation-file-link {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    gap: 6px;
    color: #2563eb;
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
    text-decoration: none;
}

.documentation-entity-link:hover,
.documentation-file-link:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

.documentation-expiration { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-weight: 500; font-variant-numeric: tabular-nums; }
.documentation-expiration.is-success { color: #15803d; }
.documentation-expiration.is-warning { color: #b77905; }
.documentation-expiration.is-danger { color: #dc2626; }
.documentation-expiration.is-muted { color: var(--cm-muted); }
.documentation-expiration-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: currentColor; }
.documentation-files-trigger { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; min-height: 28px; border: 1px solid #c7d7fe; border-radius: 8px; background: #eff6ff; color: #1d4ed8; font-size: 13px; line-height: 18px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.documentation-files-trigger:hover { background: #dbeafe; color: #1d4ed8; }
.documentation-files-trigger:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.documentation-files-trigger.is-missing { color: #be123c; background: #fff1f2; border-color: #fecdd3; }
.documentation-file-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: #dbeafe; font-size: 11px; }
.app-content .documentation-table .documentation-versions-trigger { width: auto; height: 28px; min-height: 28px; flex-shrink: 0; padding: 3px 10px !important; border: 1px solid var(--cm-border) !important; border-radius: 8px; font-size: 13px; }
body.page-documentation-redesign .app-content table.documentation-table :is(th.app-actions-header, td.app-action-cell) { min-width: 230px !important; max-width: none !important; }
.documentation-version-context { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; color: var(--cm-muted); }
.documentation-version-context strong { color: var(--cm-text); }
.documentation-file-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px; margin-bottom: 16px; }
.documentation-file-card { display: flex; align-items: center; gap: 8px; padding: 12px; border: 1px solid var(--cm-border); border-radius: 10px; background: var(--cm-surface); min-width: 0; }
.documentation-file-card-link { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; color: var(--cm-text); text-decoration: none; }
.documentation-file-card-link > i { color: #2563eb; font-size: 20px; flex-shrink: 0; }
.documentation-file-card-link > span { display: grid; gap: 4px; flex: 1; min-width: 0; }
.documentation-file-card-link strong { font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
.documentation-file-card-link small { color: var(--cm-muted); font-size: 12px; }
.documentation-file-card.is-selected { border-color: var(--cm-primary); box-shadow: inset 0 0 0 1px var(--cm-primary); }
.documentation-selected-version { margin-bottom: 24px; }
.documentation-version-upload { padding: 16px; border: 1px solid var(--cm-border); border-radius: 10px; background: var(--cm-surface); margin-top: 24px; }
.documentation-version-upload summary { cursor: pointer; color: var(--cm-text); font-weight: 600; }
.documentation-version-upload summary > i { margin-right: 8px; }
.documentation-version-upload[open] summary { margin-bottom: 16px; }
.documentation-history-panel h2 { display: flex; align-items: center; gap: 8px; font-size: 16px; line-height: 24px; margin: 0 0 16px; }
.documentation-version-upload-footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.documentation-version-upload-footer > div { flex: 0 1 280px; }
.documentation-version-current { background: var(--cm-bg); }
.documentation-history-table { min-width: 720px; }
@media (max-width: 575px) {
    .documentation-version-upload-footer { align-items: stretch; flex-direction: column; }
    .documentation-version-upload-footer > div { flex: auto; }
    .documentation-file-card { flex-wrap: wrap; }
    .documentation-file-card > .app-inline-actions { margin-left: auto; }
}

@media (max-width: 1500px) {
    .contracts-filter-bar {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

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

@media (max-width: 900px) {
    .contracts-metrics-grid,
    .contracts-filter-bar,
    .documentation-metrics-grid,
    .documentation-filter-bar,
    .driver-documents-hero {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .driver-document-card {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .driver-document-card-footer {
        justify-content: space-between;
    }
}

@media (max-width: 575.98px) {
    .contracts-metrics-grid,
    .contracts-filter-bar,
    .documentation-metrics-grid,
    .documentation-filter-bar,
    .driver-documents-hero {
        grid-template-columns: 1fr;
    }

    .contracts-tabs {
        width: 100%;
    }
}

.warning-log-table {
    min-width: 1100px !important;
}

.warning-log-table th:nth-child(1),
.warning-log-table td:nth-child(1) {
    width: 170px;
}

.warning-log-table th:nth-child(2),
.warning-log-table td:nth-child(2),
.warning-log-table th:nth-child(4),
.warning-log-table td:nth-child(4),
.warning-log-table th:nth-child(5),
.warning-log-table td:nth-child(5),
.warning-log-table th:nth-child(6),
.warning-log-table td:nth-child(6) {
    width: 145px;
}

.warning-log-table th:nth-child(3),
.warning-log-table td:nth-child(3) {
    width: 350px;
}

.warning-log-user {
    max-width: 145px;
}

.warning-log-notes {
    max-width: 420px;
}

.warning-log-metrics article:nth-child(3) strong {
    font-size: 22px;
    line-height: 28px;
}

.evaluation-log-table {
    min-width: 1390px !important;
}

.evaluation-log-table th:nth-child(1),
.evaluation-log-table td:nth-child(1),
.evaluation-log-table th:nth-child(2),
.evaluation-log-table td:nth-child(2),
.evaluation-log-table th:nth-child(3),
.evaluation-log-table td:nth-child(3),
.evaluation-log-table th:nth-child(4),
.evaluation-log-table td:nth-child(4),
.evaluation-log-table th:nth-child(5),
.evaluation-log-table td:nth-child(5),
.evaluation-log-table th:nth-child(6),
.evaluation-log-table td:nth-child(6),
.evaluation-log-table th:nth-child(7),
.evaluation-log-table td:nth-child(7),
.evaluation-log-table th:nth-child(9),
.evaluation-log-table td:nth-child(9) {
    width: 120px;
}

.evaluation-log-table th:nth-child(8),
.evaluation-log-table td:nth-child(8) {
    width: 250px;
}

.evaluation-log-table th:nth-child(10),
.evaluation-log-table td:nth-child(10) {
    width: 180px;
}

.evaluation-log-user {
    max-width: 180px;
}

.evaluation-log-comments {
    max-width: 250px;
}

.evaluation-log-notice {
    min-height: 150px;
}

.evaluation-log-form-content > h4 {
    grid-column: 1 / -1;
    margin: 0 !important;
    color: var(--cm-text);
    font-size: 16px;
    font-weight: 800;
    line-height: 22px;
}

.evaluation-log-form-content > .mb-3:last-child {
    grid-column: 1 / -1;
}

.scorecard-log-table,
.accident-log-table {
    min-width: 980px !important;
}

.scorecard-log-table th,
.scorecard-log-table td,
.accident-log-table th,
.accident-log-table td {
    white-space: nowrap;
}

.scorecard-log-table th:last-child,
.scorecard-log-table td:last-child,
.accident-log-table th:last-child,
.accident-log-table td:last-child {
    width: 110px;
}

.accident-log-description {
    max-width: 360px;
}

/* Wide log tables keep their min-width and scroll inside the wrapper instead of being clipped. */
.app-content .accident-log-table-card .table-responsive {
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
}

.document-log-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.document-log-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.document-log-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px;
    border: 1px solid var(--cm-border-soft);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: var(--cm-shadow-sm);
}

.document-log-card header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

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

.document-log-fields label {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
}

.document-log-fields label span {
    color: #667085;
    font-size: 12px;
    font-weight: 800;
}

.document-log-fields input[type="date"],
.document-log-fields input[type="number"],
.document-log-fields input[type="file"] {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--cm-border);
    border-radius: 10px;
    background: #ffffff;
    color: var(--cm-text);
    font-size: 14px;
}

.document-log-fields input[type="date"],
.document-log-fields input[type="number"] {
    padding: 0 12px;
}

.document-log-fields input[type="file"] {
    padding: 8px 10px;
}

.document-log-check,
.document-log-file {
    grid-column: 1 / -1;
}

.document-log-check {
    flex-direction: row !important;
    align-items: center;
}

.document-log-check input {
    width: 16px;
    height: 16px;
}

.document-log-footer {
    display: flex;
    justify-content: flex-end;
}

.page-log-modern .content-page.app-content-page {
    background: #ffffff;
}

.page-log-modern .app-container {
    max-width: none;
    padding: 30px 32px 28px;
}

.app-content .card:has(.table-responsive table[id="example"]) {
    overflow: hidden;
    border: 1px solid var(--cm-border-soft) !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    box-shadow: var(--cm-shadow-sm) !important;
}

.app-content .card:has(.table-responsive table[id="example"]) .card-body {
    padding: 0 !important;
}

.app-content .card:has(.table-responsive table[id="example"]) .table-responsive,
.app-content .col-12 > .table-responsive:has(table[id="example"]) {
    margin: 0;
    border: 1px solid var(--cm-border-soft);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: var(--cm-shadow-sm);
}

.app-content .card:has(.table-responsive table[id="example"]) .table-responsive {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.app-content table[id="example"] {
    width: 100%;
    margin-bottom: 0 !important;
    color: var(--cm-text);
    font-family: var(--cm-font-sans);
    font-size: 14px;
}

.app-content table[id="example"] > :not(caption) > * > * {
    border-color: #eef2f7 !important;
}

.app-content table[id="example"] thead th {
    height: 50px !important;
    padding: 14px 16px !important;
    border-bottom: 1px solid var(--cm-border) !important;
    background: #ffffff !important;
    color: var(--cm-muted) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 20px !important;
    text-transform: none !important;
}

.app-content table[id="example"] tbody td {
    min-height: 64px;
    padding: 14px 16px !important;
    color: var(--cm-text);
    font-size: 14px;
    line-height: 20px;
    vertical-align: middle;
}

.app-content table[id="example"] tbody tr:hover > * {
    background: #fbfdff !important;
}

.app-content .card:has(.table-responsive table[id="example"]) .mt-3:has(.pagination),
.app-content .col-12 > .mt-3:has(.pagination) {
    display: flex;
    justify-content: flex-end;
    min-height: 62px;
    margin-top: 0 !important;
    padding: 13px 16px;
    border-top: 1px solid var(--cm-border-soft);
    background: #ffffff;
}

.app-content .error-text-box {
    display: none !important;
}

.app-content .error-text-box + .text-center,
.app-content .error-text-box + h3 {
    width: min(100%, 720px);
    margin: 18px auto;
    padding: 28px;
    border: 1px solid var(--cm-border-soft);
    border-radius: 14px;
    background: #ffffff;
    color: var(--cm-text);
    text-align: center;
    box-shadow: var(--cm-shadow-sm);
}

.app-content .error-text-box + .text-center h3,
.app-content .error-text-box + h3 {
    margin: 0 !important;
    font-size: 22px;
    font-weight: 800;
    line-height: 28px;
}

.page-log-modern .breadcrumb-wrapper,
.page-log-modern .app-breadcrumb,
.page-log-modern .page-title-box {
    margin-bottom: 22px !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid var(--cm-border) !important;
}

.page-log-modern .page-title-box h1,
.page-log-modern .page-title-box h4,
.page-log-modern .app-breadcrumb-title {
    color: var(--cm-text) !important;
    font-family: var(--cm-font-sans) !important;
    font-size: 30px !important;
    font-weight: 800 !important;
    line-height: 38px !important;
}

.page-log-modern .app-container > .row {
    display: grid !important;
    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    margin: 0 !important;
}

.page-log-modern .app-container > .row > [class*="col-3"],
.page-log-modern .app-container > .row > [class*="col-9"],
.page-log-modern .app-container > .row > [class*="col-12"],
.page-log-modern .app-container > .row > [class*="col-lg-"] {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.page-log-modern .app-container > .row > [class*="col-12"],
.page-log-modern .app-container > .row > [class*="col-lg-10"] {
    grid-column: 1 / -1;
}

.page-log-modern .app-form-card,
.page-log-modern .card {
    border: 1px solid var(--cm-border-soft) !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    box-shadow: var(--cm-shadow-sm) !important;
}

.page-log-modern .app-form-card-body,
.page-log-modern .card-body {
    padding: 18px !important;
}

.page-log-modern .app-form-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.page-log-modern .app-form-content > .mb-3,
.page-log-modern .app-form-content > [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

.page-log-modern .form-label {
    margin-bottom: 6px;
    color: #3f3f46;
    font-size: 13px;
    font-weight: 700;
    line-height: 18px;
}

.page-log-modern .form-control,
.page-log-modern .form-select,
.page-log-modern .select2-container--default .select2-selection--single {
    min-height: 40px !important;
    height: 40px !important;
    border-radius: 8px !important;
    border-color: #d8dee7 !important;
    font-size: 14px !important;
}

.page-log-modern textarea.form-control {
    min-height: 92px !important;
    height: auto !important;
}

.page-log-modern .text-end.mt-4 {
    margin-top: 16px !important;
}

.page-log-modern .text-end.mt-4 .btn-success,
.page-log-modern .app-create-button {
    width: 100%;
    min-height: 40px;
    border-radius: 8px;
    background: #2554e8 !important;
    border-color: #2554e8 !important;
    font-weight: 800;
}

.page-log-modern .table-responsive,
.page-log-modern .table-sticky-wrapper {
    border: 1px solid var(--cm-border-soft) !important;
    border-radius: 14px 14px 0 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

.page-log-modern table.table {
    min-width: 860px;
    margin-bottom: 0 !important;
}

.page-log-modern .table-responsive + .mt-3,
.page-log-modern .table-sticky-wrapper + .mt-3 {
    border-radius: 0 0 14px 14px !important;
    box-shadow: none !important;
}

.page-log-modern .error-text-box {
    display: none;
}

.page-log-modern .error-text-box + .text-center,
.page-log-modern .error-text-box + h3,
.page-log-modern .col-9.mb-4,
.page-log-modern .col-lg-9.mb-4,
.page-log-modern .col-lg-10.mb-4 {
    min-height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 42px 24px !important;
    border: 1px solid var(--cm-border-soft);
    border-radius: 14px;
    background: #ffffff;
    text-align: center;
    box-shadow: var(--cm-shadow-sm);
}

.page-van-log .content-page.app-content-page {
    background: #ffffff;
}

.page-van-log .app-container {
    max-width: none;
    padding: 30px 32px 28px;
}

.van-log-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.van-log-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--cm-border);
}

.van-log-header h1 {
    margin: 14px 0 0;
    color: var(--cm-text);
    font-family: var(--cm-font-sans);
    font-size: 30px;
    font-weight: 800;
    line-height: 38px;
}

.van-log-header p {
    margin: 2px 0 0;
    color: #667085;
    font-size: 15px;
    font-weight: 700;
    line-height: 22px;
}

.van-log-layout {
    display: grid;
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.van-log-form-panel,
.van-log-table-panel {
    min-width: 0;
}

.van-log-form-panel {
    overflow: hidden;
    border: 1px solid var(--cm-border-soft);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: var(--cm-shadow-sm);
}

.van-log-panel-title {
    min-height: 54px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 16px;
    border-bottom: 1px solid var(--cm-border-soft);
    color: var(--cm-text);
    font-size: 14px;
    font-weight: 800;
}

.van-log-panel-title i {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #eff6ff;
    color: #2554e8;
    font-size: 17px;
}

.van-log-form-panel > .row {
    margin: 0 !important;
}

.van-log-form-panel > .row > [class*="col"] {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
}

.van-log-form-panel .app-form-card {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.van-log-form-panel .app-form-card-body {
    padding: 16px !important;
}

.van-log-form-panel .app-form-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.van-log-form-panel .app-form-content > .mb-3,
.van-log-form-panel .app-form-content > [class*="col-"],
.van-log-form-panel .fuel-form-comment-field,
.van-log-form-panel .fuel-form-file-field {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    grid-column: auto !important;
}

.van-log-form-panel .form-label {
    margin-bottom: 6px;
    color: #3f3f46;
    font-size: 13px;
    font-weight: 750;
    line-height: 18px;
}

.van-log-form-panel .form-control,
.van-log-form-panel .form-select,
.van-log-form-panel .select2-container--default .select2-selection--single {
    min-height: 40px !important;
    height: 40px !important;
    border-color: #d8dee7 !important;
    border-radius: 8px !important;
    color: var(--cm-text) !important;
    font-size: 14px !important;
}

.van-log-form-panel textarea.form-control {
    min-height: 92px !important;
    height: auto !important;
}

.van-log-form-panel .text-end.mt-4 {
    margin-top: 16px !important;
}

.van-log-form-panel .text-end.mt-4 .btn-success,
.van-log-form-panel .app-create-button {
    width: 100%;
    min-height: 40px;
    border-radius: 8px;
    border-color: #2554e8 !important;
    background: #2554e8 !important;
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 800;
}

.van-log-table-card {
    overflow: hidden;
    border-radius: 14px;
}

.van-log-table-card .table-responsive,
.van-log-table-card .table-sticky-wrapper {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.van-log-table {
    margin-bottom: 0 !important;
}

.van-maintenance-log-table {
    min-width: 980px !important;
}

.van-accident-log-table {
    min-width: 940px !important;
}

.van-fuel-log-table {
    min-width: 1260px !important;
}

.van-log-table-card .drivers-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 62px;
    padding: 13px 16px;
    border-top: 1px solid var(--cm-border-soft);
    background: #ffffff;
    color: #667085;
    font-size: 13px;
    font-weight: 700;
}

.van-log-table-card .drivers-pagination {
    min-height: 0 !important;
    margin-left: auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.van-log-empty {
    min-height: 320px;
    border: 1px solid var(--cm-border-soft);
    border-radius: 14px;
    box-shadow: var(--cm-shadow-sm);
}

.van-log-avatar i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 24px;
    line-height: 1;
}

.driver-profile-tab-content .table-responsive,
.driver-profile-tab-content .table-sticky-wrapper {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--cm-border-soft);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: none;
}

.driver-profile-tab-content .table-responsive > .row,
.driver-profile-tab-content .table-sticky-wrapper > .row {
    margin: 0 !important;
}

.driver-profile-tab-content .table-responsive > .row > [class*="col-"],
.driver-profile-tab-content .table-sticky-wrapper > .row > [class*="col-"] {
    padding: 0 !important;
}

.driver-profile-tab-content table {
    min-width: 760px;
    margin-bottom: 0 !important;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--cm-text);
    font-family: var(--cm-font-sans);
    font-size: 13px;
    line-height: 18px;
}

.driver-profile-tab-content table thead,
.driver-profile-tab-content table thead.table-light {
    background: #fbfbfc !important;
}

.driver-profile-tab-content table th {
    height: 48px;
    padding: 0 14px !important;
    border-bottom: 1px solid var(--cm-border) !important;
    background: #fbfbfc !important;
    color: #667085 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 16px !important;
    text-transform: none !important;
    white-space: nowrap;
}

.driver-profile-tab-content table td {
    min-height: 56px;
    padding: 12px 14px !important;
    border-bottom: 1px solid #f0f2f5 !important;
    color: #2f3440;
    vertical-align: middle !important;
}

.driver-profile-tab-content table tbody tr:last-child td {
    border-bottom: 0 !important;
}

.driver-profile-tab-content table tbody tr:hover {
    background: #fafbff;
}

.driver-profile-tab-content table a {
    color: #2554e8;
    font-weight: 650;
    text-decoration: none;
}

.driver-profile-tab-content table a:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

.driver-profile-tab-content table .badge {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    line-height: 16px;
}

.driver-profile-tab-content .btn-xs,
.driver-profile-tab-content .btn-sm {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 10px !important;
    border-radius: 7px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 16px !important;
}

.driver-profile-tab-content .btn-light {
    border-color: #e5e7eb !important;
    background: #ffffff !important;
    color: #475569 !important;
}

.driver-profile-tab-content .btn-primary,
.driver-profile-tab-content .btn-info {
    border-color: #2554e8 !important;
    background: #2554e8 !important;
    color: #ffffff !important;
}

.driver-profile-tab-content .btn-danger {
    border-color: #ef4444 !important;
    background: #ef4444 !important;
    color: #ffffff !important;
}

.driver-profile-tab-content .form-control-sm {
    min-height: 32px;
    border-radius: 7px;
    font-size: 12px;
}

.driver-profile-tab-content td.text-center.text-muted,
.driver-profile-tab-content td[colspan] {
    height: 120px;
    color: #667085 !important;
    font-size: 14px;
    font-weight: 650;
}

.driver-profile-tab-content .card {
    border-color: var(--cm-border-soft);
    border-radius: 12px;
    box-shadow: none;
}

.driver-tab-table-card {
    overflow: hidden;
    border: 1px solid var(--cm-border-soft);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: var(--cm-shadow-sm);
}

.driver-scorecards-tab,
.driver-absences-tab,
.driver-evaluations-tab {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.driver-tab-summary-grid,
.driver-scorecards-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.driver-tab-summary-grid article,
.driver-scorecards-summary article {
    min-height: 132px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 34px;
    padding: 24px 20px;
    border: 1px solid var(--cm-border-soft);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: var(--cm-shadow-sm);
    text-align: center;
}

.driver-tab-summary-grid span,
.driver-scorecards-summary span {
    color: #667085;
    font-size: 15px;
    font-weight: 500;
    line-height: 20px;
}

.driver-tab-summary-grid strong,
.driver-scorecards-summary strong {
    color: #111827;
    font-size: 30px;
    font-weight: 800;
    line-height: 34px;
    letter-spacing: 0;
}

.driver-tab-summary-grid strong.is-good,
.driver-scorecards-summary strong.is-good {
    color: #00c853;
}

.driver-tab-summary-grid strong.is-warn,
.driver-scorecards-summary strong.is-warn {
    color: #d97706;
}

.driver-tab-summary-grid strong.is-bad,
.driver-scorecards-summary strong.is-bad {
    color: #ef1745;
}

.driver-tab-table-card .table-responsive,
.driver-tab-table-card .table-sticky-wrapper {
    border: 0;
    border-radius: 0;
}

.driver-tab-clean-table {
    width: 100%;
    min-width: 920px;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}

.driver-tab-clean-table thead th {
    height: 82px;
    padding: 18px 24px;
    border: 0;
    border-bottom: 1px solid var(--cm-border);
    background: #ffffff;
    color: #667085;
    font-size: 15px;
    font-weight: 600;
    line-height: 20px;
    text-align: left;
    white-space: nowrap;
}

.driver-tab-clean-table tbody td {
    height: 68px;
    padding: 16px 24px;
    border: 0;
    border-bottom: 1px solid #f1f5f9;
    color: var(--cm-text);
    font-size: 15px;
    font-weight: 500;
    line-height: 22px;
    vertical-align: middle;
}

.driver-tab-clean-table tbody tr:last-child td {
    border-bottom: 0;
}

.driver-tab-clean-table tbody tr:hover td {
    background: #fbfbfc;
}

.driver-tab-clean-table td > strong {
    color: #111827;
    font-weight: 650;
}

.driver-scorecards-table-card {
    border-radius: 14px;
}

.driver-scorecards-table {
    min-width: 1100px !important;
}

.driver-scorecards-table th,
.driver-scorecards-table td {
    text-align: left;
}

.driver-scorecard-value {
    color: #111827;
    font-weight: 650;
}

.driver-scorecard-value.is-good {
    color: #00c853;
}

.driver-scorecard-value.is-warn {
    color: #d97706;
}

.driver-scorecard-value.is-bad {
    color: #ff1744;
}

.driver-scorecard-value.is-muted {
    color: #a1a1aa;
}

.driver-tab-text-action {
    min-width: 0;
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: 8px;
}

.driver-tab-icon-action {
    width: 30px;
    height: 30px;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 16px;
    line-height: 1;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.driver-tab-icon-action:hover {
    border-color: #bfdbfe;
    background: #dbeafe;
    color: #1d4ed8;
}

.driver-tab-message-modal .modal-dialog {
    width: min(92vw, 560px);
    max-width: min(92vw, 560px);
}

.driver-tab-message-modal .modal-content {
    overflow: hidden;
    border: 1px solid rgba(229, 231, 235, 0.95);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.24);
}

.driver-tab-message-modal .modal-header {
    min-height: 72px;
    padding: 22px 26px 14px;
    border-bottom: 1px solid #f1f5f9;
}

.driver-tab-message-modal .modal-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #24211f;
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
}

.driver-tab-message-modal .modal-title i {
    color: #2563eb;
    font-size: 22px;
}

.driver-tab-message-modal .modal-body {
    max-height: min(58vh, 460px);
    overflow: auto;
    padding: 24px 26px 28px;
}

.driver-tab-message-modal .modal-body p {
    margin: 0;
    color: #3f3a36;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    white-space: normal;
    word-break: break-word;
}

.app-read-text-modal .modal-dialog {
    width: min(92vw, 560px) !important;
    max-width: min(92vw, 560px) !important;
}

.app-read-text-modal .modal-content {
    overflow: hidden !important;
    border: 1px solid var(--cm-border) !important;
    border-radius: 10.4px !important;
    background: #ffffff !important;
    box-shadow: var(--cm-shadow-md) !important;
}

.app-read-text-modal .modal-header {
    min-height: 56px !important;
    align-items: center !important;
    padding: 0 20px !important;
    border-bottom: 1px solid var(--cm-border) !important;
}

.app-read-text-modal .modal-title {
    display: block !important;
    margin: 0 !important;
    color: var(--cm-text) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 28px !important;
}

.app-read-text-modal .modal-title i {
    display: none !important;
}

.app-read-text-modal .modal-body {
    max-height: min(58vh, 460px) !important;
    overflow: auto !important;
    padding: 18px 20px 20px !important;
}

.app-read-text-modal .modal-body p,
.app-read-text-modal .absence-reason-modal-text,
.app-read-text-modal .evaluation-comment-modal-text,
.app-read-text-modal .dnr-reason-modal-text,
.app-read-text-modal .incidence-description-modal-text,
.app-read-text-modal .fine-description-modal-text {
    margin: 0 !important;
    color: var(--cm-text) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 22px !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
}

@media (max-width: 991px) {
    .driver-tab-summary-grid,
    .driver-scorecards-summary {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .driver-tab-summary-grid article,
    .driver-scorecards-summary article {
        min-height: 106px;
        gap: 16px;
    }
}

.driver-documents-cards-tab {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.driver-documents-hero {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.driver-documents-hero article {
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid var(--cm-border-soft);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: var(--cm-shadow-sm);
}

.driver-documents-hero strong {
    display: block;
    color: var(--cm-text);
    font-size: 24px;
    font-weight: 800;
    line-height: 30px;
}

.driver-documents-hero span {
    display: block;
    margin-top: 2px;
    color: #71717a;
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
}

.driver-document-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.driver-document-card {
    min-width: 0;
    min-height: 74px;
    display: grid;
    grid-template-columns: minmax(240px, 1.4fr) minmax(150px, 0.7fr) minmax(220px, 0.9fr);
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--cm-border-soft);
    border-left: 4px solid #d4d4d8;
    border-radius: 12px;
    background: #ffffff;
    color: var(--cm-text);
    text-decoration: none;
    box-shadow: var(--cm-shadow-sm);
}

.driver-document-card.is-valid {
    border-left-color: #10b981;
}

.driver-document-card.is-expiring {
    border-left-color: #f59e0b;
}

.driver-document-card.is-expired,
.driver-document-card.is-pending {
    border-left-color: #ef4444;
}

.driver-document-card-main,
.driver-document-card-footer,
.driver-document-card-meta {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.driver-document-card-meta {
    justify-content: flex-start;
}

.driver-document-card-footer {
    justify-content: flex-end;
}

.driver-document-card-title {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.driver-document-card-title strong {
    overflow: hidden;
    color: var(--cm-text);
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.driver-document-card-title span,
.driver-document-card-meta span,
.driver-document-file-empty {
    color: #71717a;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
}

.driver-document-card-status {
    display: inline-flex;
    min-height: 24px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    white-space: nowrap;
}

.driver-document-card-status.is-valid {
    border-color: #a7f3d0;
    background: #ecfdf5;
    color: #059669;
}

.driver-document-card-status.is-expiring {
    border-color: #fde68a;
    background: #fffbeb;
    color: #d97706;
}

.driver-document-card-status.is-expired,
.driver-document-card-status.is-pending {
    border-color: #fecaca;
    background: #fff1f2;
    color: #dc2626;
}

.driver-document-card-status.is-optional {
    border-color: #d4d4d8;
    background: #f4f4f5;
    color: #71717a;
}

.driver-document-days {
    font-weight: 700 !important;
}

.driver-document-days.is-valid {
    color: #059669 !important;
}

.driver-document-days.is-expiring {
    color: #d97706 !important;
}

.driver-document-days.is-expired,
.driver-document-days.is-pending {
    color: #dc2626 !important;
}

.driver-document-days.is-muted,
.driver-document-days.is-optional {
    color: #71717a !important;
}

.driver-document-file-button {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    text-decoration: none;
    white-space: nowrap;
}

.driver-document-file-button:hover {
    background: #dbeafe;
    color: #1d4ed8;
}

.driver-document-file-button.is-danger {
    border-color: #fecdd3;
    background: #fff1f2;
    color: #e11d48;
}

.driver-document-file-button.is-danger:hover {
    background: #ffe4e6;
    color: #be123c;
}

.driver-document-card-actions {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.driver-document-archive-section {
    overflow: hidden;
    border: 1px solid var(--cm-border-soft);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: var(--cm-shadow-sm);
}

.driver-document-archive-head {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid #f1f5f9;
}

.driver-document-archive-title {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
}

.driver-document-archive-title > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.driver-document-archive-icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #f4f4f5;
    color: #71717a;
    font-size: 24px;
    line-height: 1;
}

.driver-document-archive-title strong {
    color: var(--cm-text);
    font-size: 16px;
    font-weight: 700;
    line-height: 22px;
}

.driver-document-archive-title span {
    color: #71717a;
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
}

.driver-document-archive-upload {
    flex: 0 0 auto;
    margin: 0;
}

.driver-document-archive-upload-button {
    margin: 0;
    cursor: pointer;
}

.driver-document-archive-upload-button input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.driver-document-archive-empty {
    min-height: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 20px;
    padding: 28px;
    border: 2px dashed #e5e7eb;
    border-radius: 12px;
    color: #71717a;
    text-align: center;
}

.driver-document-archive-empty i {
    color: #d4d4d8;
    font-size: 40px;
    line-height: 1;
}

.driver-document-archive-empty strong {
    color: #475569;
    font-size: 15px;
    font-weight: 600;
    line-height: 20px;
}

.driver-document-archive-empty span {
    max-width: 620px;
    color: #71717a;
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
}

.driver-document-archive-list {
    display: flex;
    flex-direction: column;
}

.driver-document-archive-file {
    min-height: 58px;
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(220px, 0.7fr) auto;
    align-items: center;
    gap: 16px;
    padding: 12px 20px;
    border-top: 1px solid #f1f5f9;
}

.driver-document-archive-file:first-child {
    border-top: 0;
}

.driver-document-archive-file > div {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.driver-document-archive-file > div i {
    color: #64748b;
    font-size: 20px;
    line-height: 1;
}

.driver-document-archive-file > div span {
    overflow: hidden;
    color: var(--cm-text);
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.driver-document-archive-file small {
    overflow: hidden;
    color: #71717a;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.driver-document-archive-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

@media (max-width: 900px) {
    .driver-document-archive-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .driver-document-archive-upload,
    .driver-document-archive-upload-button {
        width: 100%;
    }

    .driver-document-archive-file {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .driver-document-archive-actions {
        justify-content: flex-start;
    }
}

.driver-dnr-table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed;
}

.driver-dnr-table.dnrs-table {
    min-width: 1120px !important;
    table-layout: fixed;
}

.driver-dnr-table th:nth-child(1),
.driver-dnr-table td:nth-child(1) {
    width: 84px;
}

.driver-dnr-table th:nth-child(2),
.driver-dnr-table td:nth-child(2) {
    width: 84px;
}

.driver-dnr-table th:nth-child(3),
.driver-dnr-table td:nth-child(3) {
    width: 170px;
}

.driver-dnr-table th:nth-child(4),
.driver-dnr-table td:nth-child(4) {
    width: 240px;
}

.driver-dnr-table th:nth-child(5),
.driver-dnr-table td:nth-child(5) {
    width: 110px;
}

.driver-dnr-table th:nth-child(6),
.driver-dnr-table td:nth-child(6) {
    width: 130px;
}

.driver-dnr-table th:nth-child(7),
.driver-dnr-table td:nth-child(7) {
    width: 116px;
}

.driver-dnr-table th:nth-child(8),
.driver-dnr-table td:nth-child(8) {
    width: 130px;
}

.driver-dnr-table th:nth-child(9),
.driver-dnr-table td:nth-child(9) {
    width: 98px;
}

.driver-dnr-week {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.driver-dnr-week small {
    color: #98a2b3;
    font-size: 10px;
    font-weight: 800;
    line-height: 12px;
}

.driver-tab-stack {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.driver-tab-stack span {
    min-width: 0;
}

.driver-tab-stack small {
    overflow: hidden;
    color: #98a2b3;
    font-size: 11px;
    font-weight: 650;
    line-height: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.driver-tab-stack strong {
    color: #334155;
    font-weight: 800;
}

.driver-tab-counts {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.driver-tab-counts span {
    min-width: 48px;
    min-height: 36px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid #eef2f7;
    border-radius: 8px;
    background: #f8fafc;
    color: #475569;
}

.driver-tab-counts strong {
    font-size: 13px;
    font-weight: 850;
    line-height: 15px;
}

.driver-tab-counts small {
    color: #98a2b3;
    font-size: 10px;
    font-weight: 800;
    line-height: 12px;
}

.driver-tab-counts-wide span {
    min-width: 54px;
}

.driver-tab-count-success,
.driver-tab-counts span.driver-tab-count-success {
    border-color: #a7f3d0;
    background: #ecfdf5;
    color: #059669;
}

.driver-tab-count-warning,
.driver-tab-counts span.driver-tab-count-warning {
    border-color: #fde68a;
    background: #fffbeb;
    color: #d97706;
}

.driver-tab-count-danger,
.driver-tab-counts span.driver-tab-count-danger {
    border-color: #fecdd3;
    background: #fff1f2;
    color: #e11d48;
}

.driver-tab-strong {
    display: inline-block;
    max-width: 180px;
    overflow: hidden;
    color: var(--cm-text);
    font-weight: 750;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}

.driver-tab-number,
.driver-tab-count {
    min-width: 28px;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #f4f4f5;
    color: #475569;
    font-size: 12px;
    font-weight: 800;
}

.driver-tab-code {
    display: inline-flex;
    max-width: 132px;
    overflow: hidden;
    padding: 4px 8px;
    border-radius: 7px;
    background: #f8fafc;
    color: #475569;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inventory-product-stack {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 180px;
    max-width: 520px;
}

.inventory-product-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    padding: 5px 8px;
    border: 1px solid rgba(37, 99, 235, 0.14);
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
}

.inventory-product-chip small {
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
}

.inventory-product-chip strong {
    color: #0f172a;
    font-size: 11px;
    font-weight: 850;
}

.inventory-product-chip.is-deleted {
    border-color: rgba(239, 68, 68, 0.18);
    background: #fef2f2;
    color: #b91c1c;
}

.inventory-product-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 24px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: 12px;
    font-weight: 800;
}

.inventory-products-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
    align-items: start;
    gap: 18px;
}

.inventory-products-catalog {
    min-width: 0;
}

.inventory-product-identity {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    min-width: 220px;
}

.inventory-product-identity img {
    width: 48px;
    height: 48px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    object-fit: contain;
}

.inventory-product-identity div {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.inventory-product-identity strong,
.inventory-order-item-copy strong {
    min-width: 0;
    overflow: hidden;
    color: #0f172a;
    font-size: 13px;
    font-weight: 800;
    line-height: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inventory-product-identity small,
.inventory-order-item-copy small {
    min-width: 0;
    overflow: hidden;
    color: #64748b;
    font-size: 12px;
    font-weight: 650;
    line-height: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inventory-add-form {
    min-width: 230px;
    display: grid;
    grid-template-columns: minmax(150px, 1fr) 30px;
    align-items: center;
    gap: 8px;
}

.inventory-add-form .form-select {
    min-height: 34px;
    border-radius: 9px;
    font-size: 12px;
}

.inventory-order-panel {
    position: sticky;
    top: 92px;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
}

.inventory-order-panel form {
    display: grid;
    gap: 14px;
    padding: 16px;
}

.inventory-order-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eef2f7;
}

.inventory-order-header div {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.inventory-order-header span,
.inventory-order-fields label > span {
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
}

.inventory-order-header strong {
    color: #0f172a;
    font-size: 20px;
    font-weight: 850;
    line-height: 24px;
}

.inventory-order-items {
    display: grid;
    gap: 10px;
    max-height: 330px;
    overflow: auto;
    padding-right: 2px;
}

.inventory-order-item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid #eef2f7;
    border-radius: 8px;
    background: #f8fafc;
}

.inventory-order-item img {
    width: 42px;
    height: 42px;
    border-radius: 7px;
    background: #ffffff;
    object-fit: contain;
}

.inventory-order-item-copy {
    min-width: 0;
    display: grid;
    gap: 1px;
}

.inventory-order-quantity {
    display: inline-grid;
    grid-template-columns: 26px 26px 26px;
    align-items: center;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #ffffff;
}

.inventory-order-quantity button {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: #2563eb;
    font-size: 14px;
    line-height: 1;
}

.inventory-order-quantity span {
    color: #0f172a;
    font-size: 12px;
    font-weight: 850;
    line-height: 26px;
    text-align: center;
}

.inventory-order-fields {
    display: grid;
    gap: 11px;
}

.inventory-order-fields label {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.inventory-order-submit {
    width: 100%;
    justify-content: center;
}

.inventory-order-empty {
    min-height: 270px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 28px;
    text-align: center;
}

.inventory-order-empty i {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 24px;
}

.inventory-order-empty strong {
    color: #0f172a;
    font-size: 15px;
    font-weight: 850;
}

.inventory-order-empty span {
    max-width: 260px;
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
}

.inventory-product-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.inventory-product-form-field,
.inventory-product-form-section,
.inventory-product-form-field label {
    min-width: 0;
}

.inventory-product-form-section {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #f8fafc;
}

.inventory-product-form-section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.inventory-product-form-section-header div {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.inventory-product-form-section-header h3 {
    margin: 0;
    color: #0f172a;
    font-size: 15px;
    font-weight: 850;
    line-height: 20px;
}

.inventory-product-form-section-header p {
    margin: 0;
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
    line-height: 17px;
}

.inventory-variant-list {
    display: grid;
    gap: 9px;
}

.inventory-variant-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 110px 30px;
    align-items: end;
    gap: 9px;
    padding: 10px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #ffffff;
}

.inventory-variant-row label {
    display: grid;
    gap: 5px;
    margin: 0;
}

.inventory-variant-row label > span {
    color: #64748b;
    font-size: 11px;
    font-weight: 750;
    line-height: 14px;
    text-transform: uppercase;
}

.inventory-product-current-photo {
    display: inline-grid;
    grid-template-columns: 44px auto;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 7px 9px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
}

.inventory-product-current-photo img {
    width: 44px;
    height: 44px;
    border-radius: 7px;
    object-fit: contain;
}

.inventory-product-current-photo span {
    color: #475569;
    font-size: 12px;
    font-weight: 700;
}

@media (max-width: 1199.98px) {
    .inventory-products-layout {
        grid-template-columns: 1fr;
    }

    .inventory-order-panel {
        position: static;
    }
}

@media (max-width: 767.98px) {
    .inventory-product-form-grid,
    .inventory-variant-row {
        grid-template-columns: 1fr;
    }

    .inventory-add-form {
        min-width: 0;
        grid-template-columns: minmax(0, 1fr) 30px;
    }

    .inventory-product-form-section-header {
        align-items: stretch;
        flex-direction: column;
    }
}

.driver-tab-clip {
    display: inline-block;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}

.driver-tab-address {
    max-width: 100%;
    color: #334155;
}

.driver-tab-wide-clip {
    max-width: min(420px, 100%);
}

.driver-tab-file-link,
.driver-tab-comment-button {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 10px;
    border: 1px solid #dbeafe;
    border-radius: 7px;
    background: #eff6ff;
    color: #2554e8 !important;
    font-size: 12px;
    font-weight: 800;
    line-height: 16px;
    text-decoration: none !important;
    white-space: nowrap;
}

.driver-tab-file-link:hover,
.driver-tab-comment-button:hover {
    border-color: #bfdbfe;
    background: #dbeafe;
    color: #1d4ed8 !important;
}

button.driver-tab-comment-button {
    cursor: pointer;
    font-family: inherit;
}

.driver-tab-files {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.driver-tab-document-cell,
.driver-tab-upload-form {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.driver-tab-document-cell {
    flex-direction: column;
    align-items: flex-start;
}

.driver-tab-upload-form {
    width: 100%;
}

.driver-tab-upload-form-inline {
    max-width: 360px;
}

.driver-tab-upload-form .form-control {
    max-width: 180px;
}

.driver-tab-upload-form .btn {
    white-space: nowrap;
}

.driver-tab-icon-pill {
    min-width: 38px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 9px;
    border: 1px solid #e5e7eb;
    border-radius: 7px;
    background: #ffffff;
    color: #667085;
    font-size: 13px;
    font-weight: 800;
}

.driver-tab-icon-pill-success {
    border-color: #86efac;
    background: #ecfdf5;
    color: #16a34a;
}

.driver-tab-icon-pill-muted {
    border-style: dashed;
    background: #fbfbfc;
    color: #a1a1aa;
}

.driver-documents-table,
.driver-mobile-damages-table,
.driver-evaluations-table {
    min-width: 960px !important;
}

.driver-scorecards-table {
    min-width: 1100px !important;
}

.driver-documents-tab {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.driver-documents-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.driver-documents-summary article {
    min-height: 86px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding: 16px;
    border: 1px solid var(--cm-border-soft);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: var(--cm-shadow-sm);
}

.driver-documents-summary strong {
    color: var(--cm-text);
    font-size: 26px;
    font-weight: 850;
    line-height: 30px;
}

.driver-documents-summary span {
    color: #667085;
    font-size: 12px;
    font-weight: 750;
    line-height: 16px;
}

.driver-documents-table {
    min-width: 980px !important;
}

.driver-documents-table th:nth-child(1),
.driver-documents-table td:nth-child(1) {
    width: 260px;
}

.driver-documents-table th:nth-child(2),
.driver-documents-table td:nth-child(2),
.driver-documents-table th:nth-child(4),
.driver-documents-table td:nth-child(4),
.driver-documents-table th:nth-child(5),
.driver-documents-table td:nth-child(5),
.driver-documents-table th:nth-child(6),
.driver-documents-table td:nth-child(6) {
    width: 132px;
}

.driver-document-type .driver-tab-strong {
    max-width: 240px;
}

.driver-document-files {
    max-width: 360px;
}

.driver-document-updated {
    min-width: 94px;
}

.driver-accidents-table,
.driver-fines-tab-table {
    min-width: 900px !important;
}

.driver-warning-table,
.driver-absences-table,
.driver-contracts-table,
.driver-inventory-table,
.driver-supports-table {
    min-width: 760px !important;
}

.driver-warning-table.warnings-table {
    min-width: 1040px !important;
}

.driver-warning-table.warnings-table th:nth-child(1),
.driver-warning-table.warnings-table td:nth-child(1) {
    width: 112px;
}

.driver-warning-table.warnings-table th:nth-child(2),
.driver-warning-table.warnings-table td:nth-child(2) {
    width: 300px;
}

.driver-warning-table.warnings-table th:nth-child(3),
.driver-warning-table.warnings-table td:nth-child(3) {
    width: 150px;
}

.driver-warning-table.warnings-table th:nth-child(4),
.driver-warning-table.warnings-table td:nth-child(4),
.driver-warning-table.warnings-table th:nth-child(5),
.driver-warning-table.warnings-table td:nth-child(5),
.driver-warning-table.warnings-table th:nth-child(6),
.driver-warning-table.warnings-table td:nth-child(6) {
    width: 96px;
}

.driver-warning-table.warnings-table th:nth-child(7),
.driver-warning-table.warnings-table td:nth-child(7) {
    width: 132px;
}

.driver-absences-table.absences-table {
    min-width: 1080px !important;
}

.driver-absences-table.absences-table th:nth-child(1),
.driver-absences-table.absences-table td:nth-child(1) {
    width: 135px;
}

.driver-absences-table.absences-table th:nth-child(2),
.driver-absences-table.absences-table td:nth-child(2) {
    width: 170px;
}

.driver-absences-table.absences-table th:nth-child(3),
.driver-absences-table.absences-table td:nth-child(3) {
    width: 330px;
}

.driver-absences-table.absences-table th:nth-child(4),
.driver-absences-table.absences-table td:nth-child(4),
.driver-absences-table.absences-table th:nth-child(5),
.driver-absences-table.absences-table td:nth-child(5),
.driver-absences-table.absences-table th:nth-child(6),
.driver-absences-table.absences-table td:nth-child(6) {
    width: 96px;
}

.driver-absences-table.absences-table th:nth-child(7),
.driver-absences-table.absences-table td:nth-child(7) {
    width: 180px;
}

.driver-absences-table.absences-table th:nth-child(8),
.driver-absences-table.absences-table td:nth-child(8) {
    width: 132px;
}

.driver-tab-pill,
.driver-tab-status {
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    line-height: 16px;
    white-space: nowrap;
}

.driver-tab-pill-success,
.driver-tab-status.bg-success,
.driver-tab-status.badge-success {
    border-color: #a7f3d0;
    background: #ecfdf5 !important;
    color: #059669 !important;
}

.driver-tab-pill-warning,
.driver-tab-status.bg-warning,
.driver-tab-status.badge-warning {
    border-color: #fde68a;
    background: #fffbeb !important;
    color: #d97706 !important;
}

.driver-tab-pill-danger,
.driver-tab-status.bg-danger,
.driver-tab-status.badge-danger {
    border-color: #fecdd3;
    background: #fff1f2 !important;
    color: #e11d48 !important;
}

.driver-tab-pill-info,
.driver-tab-status.bg-info,
.driver-tab-status.badge-info {
    border-color: #bae6fd;
    background: #e0f2fe !important;
    color: #0369a1 !important;
}

.driver-tab-pill-secondary,
.driver-tab-status.bg-secondary,
.driver-tab-status.badge-secondary {
    border-color: #d4d4d8;
    background: #f4f4f5 !important;
    color: #52525b !important;
}

.driver-tab-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.driver-tab-empty {
    min-height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #667085;
    text-align: center;
}

.driver-tab-empty i {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    background: #eff6ff;
    color: #2554e8;
    font-size: 22px;
}

.driver-tab-empty strong {
    color: var(--cm-text);
    font-size: 15px;
    font-weight: 800;
}

.driver-tab-empty span {
    font-size: 13px;
}

.page-van-profile .content-page.app-content-page {
    background: #ffffff;
}

.page-van-profile .app-container {
    max-width: none;
    padding: 34px 34px 30px;
}

.page-van-profile .van-profile-shell {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.page-van-profile .driver-profile-back-row {
    margin-bottom: 2px;
}

.van-profile-card {
    padding: 32px 34px 30px;
}

.van-profile-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 30px;
}

.van-profile-title {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 16px;
    align-items: center;
}

.van-profile-title > .van-avatar {
    grid-row: 1 / 3;
    width: 72px;
    height: 72px;
    font-size: 36px;
}

.van-profile-title p {
    grid-column: 2;
    margin: 4px 0 0;
    color: #667085;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
}

.van-profile-info-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 24px 34px;
}

.van-profile-info-grid small {
    margin-left: 6px;
    color: #98a2b3;
    font-size: 11px;
    font-weight: 750;
}

.van-profile-status-available,
.van-profile-status-active,
.van-profile-status-1 {
    border-color: #a7f3d0;
    background: #ecfdf5;
    color: #059669;
}

.van-profile-status-rented,
.van-profile-status-maintenance,
.van-profile-status-2,
.van-profile-status-5 {
    border-color: #fde68a;
    background: #fffbeb;
    color: #d97706;
}

.van-profile-status-blocked,
.van-profile-status-inactive,
.van-profile-status-3 {
    border-color: #fecdd3;
    background: #fff1f2;
    color: #e11d48;
}

.van-profile-status-unknown,
.van-profile-status-4 {
    border-color: #d4d4d8;
    background: #f4f4f5;
    color: #52525b;
}

.van-profile-tabs-card .driver-profile-tabs {
    gap: 10px 14px;
    padding: 18px 22px 16px;
}

.van-profile-tabs-card .driver-profile-tab {
    min-height: 36px;
    padding: 0 13px !important;
}

.van-profile-tabs-card .driver-profile-tab-content {
    padding: 20px 22px 22px;
}

.van-profile-tabs-card .driver-tab-table-card {
    border-radius: 14px;
}

.van-profile-tabs-card .driver-profile-tab-content table th {
    padding-inline: 18px !important;
}

.van-profile-tabs-card .driver-profile-tab-content table td {
    padding: 16px 18px !important;
}

.van-tab-card {
    border-radius: 12px;
}

.app-status-pill {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 3px 10px;
    border: 1px solid #e4e4e7;
    border-radius: 999px;
    background: #f4f4f5;
    color: #71717f;
    font-size: 13px;
    font-weight: 700;
    line-height: 18px;
    white-space: nowrap;
}

.app-status-pill.is-success {
    border-color: #a7f3d0;
    background: #dffbf0;
    color: #059669;
}

.app-status-pill.is-warning {
    border-color: #fde68a;
    background: #fef3c7;
    color: #d97706;
}

.app-status-pill.is-danger {
    border-color: #fecaca;
    background: #fee2e2;
    color: #ef4444;
}

.app-status-pill.is-info {
    border-color: #bfdbfe;
    background: #dbeafe;
    color: #2563eb;
}

.app-status-pill.is-muted,
.app-status-pill.is-neutral {
    border-color: #e4e4e7;
    background: #f4f4f5;
    color: #71717f;
}

.page-app-detail .content-page.app-content-page {
    background: #ffffff;
}

.page-app-detail .app-container {
    max-width: none;
    padding: 30px 34px;
}

.app-detail-shell {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.app-detail-back-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.app-detail-hero,
.app-detail-card,
.app-detail-tabs-card {
    border: 1px solid var(--cm-border-soft);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: var(--cm-shadow-sm);
}

.app-detail-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 24px;
}

.app-detail-title {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.app-detail-icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 12px;
    font-size: 22px;
}

.app-detail-icon-danger {
    border: 1px solid #fecdd3;
    background: #fff1f2;
    color: #e11d48;
}

.app-detail-icon-info {
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #2554e8;
}

.app-detail-kicker {
    margin-bottom: 4px;
    color: #667085;
    font-size: 12px;
    font-weight: 800;
    line-height: 16px;
    text-transform: uppercase;
}

.app-detail-title h1 {
    margin: 0;
    color: var(--cm-text);
    font-size: 26px;
    font-weight: 850;
    line-height: 32px;
}

.app-detail-badges,
.app-detail-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.app-detail-badges {
    margin-top: 10px;
}

.app-detail-actions {
    justify-content: flex-end;
}

.app-detail-card {
    padding: 22px 24px;
}

.app-detail-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px 28px;
}

.app-detail-grid-compact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px 20px;
}

.app-detail-field {
    min-width: 0;
}

.app-detail-field-wide {
    grid-column: 1 / -1;
}

.app-detail-field span,
.app-detail-note span {
    display: block;
    margin-bottom: 5px;
    color: #667085;
    font-size: 12px;
    font-weight: 800;
    line-height: 16px;
}

.app-detail-field strong,
.app-detail-strong-link {
    color: var(--cm-text);
    font-size: 15px;
    font-weight: 800;
    line-height: 21px;
}

.app-detail-strong-link {
    color: #2554e8;
    text-decoration: none;
}

.app-detail-strong-link:hover {
    color: #1d4ed8;
}

.app-detail-field p,
.app-detail-note p {
    margin: 0;
    color: #344054;
    font-size: 14px;
    font-weight: 650;
    line-height: 21px;
}

.app-detail-tabs-card {
    overflow: hidden;
}

.app-detail-section {
    border: 1px solid var(--cm-border-soft);
    border-radius: 12px;
    background: #ffffff;
    padding: 16px;
}

/* Accident reports: one continuous document, using the shared detail surfaces. */
.accident-report-detail {
    width: 100%;
    max-width: 1120px;
    margin-inline: auto;
}

.accident-report-section-heading,
.accident-report-author {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.accident-report-section-heading {
    margin-bottom: 24px;
}

.accident-report-section-heading h1 {
    margin: 0;
    font-size: 24px;
    line-height: 32px;
}

.accident-report-section-heading h2,
.accident-report-detail-section h2 {
    margin: 0;
    color: var(--cm-text);
    font-size: 16px;
    line-height: 24px;
}

.accident-report-author > div {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.accident-report-author span {
    margin: 0;
    overflow-wrap: anywhere;
}

.accident-report-detail-section {
    margin-top: 28px;
}

.accident-report-detail-section h2 {
    display: flex;
    gap: 10px;
    padding-bottom: 12px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--cm-border);
}

.accident-report-detail-section h2 > span {
    color: var(--cm-muted);
    font-variant-numeric: tabular-nums;
}

.accident-report-document .app-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.accident-report-detail .app-detail-field p {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-weight: 400;
}

.accident-report-detail .app-detail-strong-link {
    overflow-wrap: anywhere;
}

.accident-report-detail .accident-report-zone,
[data-report-vehicle-readonly] .vehicle-zone {
    pointer-events: none;
}

.accident-report-detail .app-detail-gallery {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

@media (max-width: 575.98px) {
    .accident-report-document .app-detail-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.app-detail-report-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.app-detail-report-section {
    border: 1px solid var(--cm-border-soft);
    border-radius: 12px;
    background: #ffffff;
    padding: 16px;
}

.app-detail-report-section h2 {
    margin: 0 0 14px;
    color: var(--cm-text);
    font-size: 16px;
    font-weight: 850;
    line-height: 22px;
}

.app-detail-note {
    border: 1px solid #eef2f7;
    border-radius: 10px;
    background: #f8fafc;
    padding: 12px 14px;
}

.app-detail-note + .app-detail-grid,
.app-detail-note + .app-detail-note {
    margin-top: 12px;
}

.app-detail-two-notes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.app-detail-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
}

.app-detail-photos-summary {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

.app-detail-photo {
    width: 100%;
    aspect-ratio: 1;
    display: block;
    overflow: hidden;
    border: 1px solid var(--cm-border-soft);
    border-radius: 12px;
    background: #f8fafc;
    padding: 0;
    box-shadow: var(--cm-shadow-sm);
}

.app-detail-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .18s ease;
}

.app-detail-photo:hover img {
    transform: scale(1.04);
}

.app-detail-photo-modal .modal-content {
    position: relative;
    border: 0;
    border-radius: 14px;
    background: transparent;
    box-shadow: none;
}

.app-detail-photo-modal .btn-close {
    position: absolute;
    top: -18px;
    right: -18px;
    z-index: 2;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background-color: #ffffff;
    opacity: 1;
}

.app-detail-photo-modal img {
    max-height: 82vh;
    width: 100%;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .35);
}

.inventory-product-detail-photo {
    width: min(100%, 280px);
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    border: 1px solid var(--cm-border);
    border-radius: 8px;
    background: #f8fafc;
}

.inventory-product-detail-photo img {
    max-width: 100%;
    max-height: 200px;
    object-fit: contain;
    display: block;
}

@media (max-width: 1199px) {
    .app-detail-grid,
    .app-detail-grid-compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .page-app-detail .app-container {
        padding: 18px 14px;
    }

    .app-detail-hero {
        flex-direction: column;
        padding: 18px;
    }

    .app-detail-actions {
        width: 100%;
        justify-content: stretch;
    }

    .app-detail-actions .drivers-btn {
        flex: 1 1 auto;
        justify-content: center;
    }

    .app-detail-title h1 {
        font-size: 22px;
        line-height: 28px;
    }

    .app-detail-card {
        padding: 18px;
    }

    .app-detail-grid,
    .app-detail-grid-compact,
    .app-detail-two-notes {
        grid-template-columns: 1fr;
    }

    .app-detail-photo-modal .btn-close {
        top: 8px;
        right: 8px;
    }
}

.van-tab-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--cm-border-soft);
    background: #ffffff;
}

.van-tab-card-header h2 {
    margin: 0;
    color: var(--cm-text);
    font-size: 15px;
    font-weight: 800;
    line-height: 22px;
}

.van-tab-card-header span {
    color: #667085;
    font-size: 12px;
    font-weight: 750;
}

.driver-tab-file-name {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #334155;
    font-weight: 800;
}

.driver-tab-file-name i {
    color: #2554e8;
    font-size: 18px;
    line-height: 1;
}

.van-documents-tab-table {
    min-width: 1040px;
}

.van-documents-tab-table th:nth-child(1),
.van-documents-tab-table td:nth-child(1) {
    width: 270px;
}

.van-documents-tab-table th:nth-child(2),
.van-documents-tab-table td:nth-child(2) {
    width: 128px;
}

.van-documents-tab-table th:nth-child(4),
.van-documents-tab-table td:nth-child(4) {
    width: 132px;
}

.van-documents-tab-table th:nth-child(5),
.van-documents-tab-table td:nth-child(5) {
    width: 180px;
}

.van-documents-tab-table th:nth-child(6),
.van-documents-tab-table td:nth-child(6) {
    width: 112px;
}

.van-doc-type {
    max-width: 238px;
}

.van-documents-cell {
    flex-direction: row;
    align-items: center;
}

.van-doc-date {
    color: #334155;
    font-weight: 750;
    white-space: nowrap;
}

.van-doc-date.is-warning {
    color: #d97706;
}

.van-doc-date.is-danger {
    color: #e11d48;
}

.van-doc-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.van-documentation-overview {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
    padding: 16px;
    border: 1px solid var(--cm-border);
    border-radius: 10px;
    background: var(--cm-surface, #fff);
}

.van-documentation-progress { display: flex; align-items: center; gap: 16px; flex: 1 1 240px; min-width: 0; }
.van-documentation-progress > strong { font-size: 24px; color: var(--cm-text); }
.van-documentation-progress > div { flex: 1; min-width: 0; }
.van-documentation-progress span { color: var(--cm-muted); font-size: 13px; }
.van-documentation-progress progress { display: block; width: 100%; height: 6px; margin-top: 8px; appearance: none; border: 0; border-radius: 999px; overflow: hidden; background: var(--cm-bg); }
.van-documentation-progress progress::-webkit-progress-bar { background: var(--cm-bg); }
.van-documentation-progress progress::-webkit-progress-value { background: var(--cm-primary, #1d4ed8); border-radius: 999px; }
.van-documentation-progress progress::-moz-progress-bar { background: var(--cm-primary, #1d4ed8); }
.van-documentation-counts { display: flex; flex-wrap: wrap; gap: 24px; }
.van-documentation-counts > span { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--cm-muted); }
.van-documentation-counts strong { font-size: 18px; color: var(--cm-text); }
.van-documentation-item { min-width: 0; border: 1px solid var(--cm-border); border-radius: 10px; background: var(--cm-surface, #fff); }
.van-documentation-item-header { display: flex; align-items: center; gap: 16px; padding: 16px; }
.van-documentation-toggle { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--cm-text); text-align: left; }
.van-documentation-toggle:focus-visible { outline: 2px solid var(--cm-primary, #1d4ed8); outline-offset: 4px; border-radius: 4px; }
.van-documentation-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 8px; background: var(--cm-bg); color: var(--cm-primary, #1d4ed8); font-size: 20px; }
.van-documentation-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; flex: 1; min-width: 0; }
.van-documentation-title strong { font-size: 14px; overflow-wrap: anywhere; }
.van-documentation-title small, .van-documentation-expiration small { font-size: 12px; color: var(--cm-muted); }
.van-documentation-expiration { display: flex; flex-direction: column; min-width: 96px; font-size: 13px; }
.van-documentation-chevron { font-size: 20px; color: var(--cm-muted); }
.van-documentation-toggle[aria-expanded="true"] .van-documentation-chevron { transform: rotate(180deg); }
.van-documentation-body { display: grid; gap: 16px; padding: 16px; border-top: 1px solid var(--cm-border); }
.van-documentation-body-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.van-documentation-body-header h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; color: var(--cm-text); }
.van-documentation-files { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 12px; min-width: 0; }
.van-documentation-file-card { display: flex; align-items: center; gap: 16px; min-width: 0; padding: 20px; border: 1px solid var(--cm-border); border-radius: 10px; background: var(--cm-bg); color: var(--cm-text); text-decoration: none; transition: border-color .15s, background .15s; }
.van-documentation-file-card:hover { border-color: #93c5fd; background: var(--cm-surface, #fff); color: var(--cm-text); }
.van-documentation-file-card:focus-visible { outline: 2px solid #60a5fa; outline-offset: 3px; }
.van-documentation-file-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 56px; height: 64px; border: 1px solid var(--cm-border); border-radius: 10px; background: var(--cm-surface, #fff); color: #1d4ed8; font-size: 32px; }
.van-documentation-file-content { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.van-documentation-file-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
.van-documentation-file-title strong { font-size: 14px; overflow-wrap: anywhere; }
.van-documentation-file-title small { color: var(--cm-muted); font-size: 12px; }
.van-documentation-file-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--cm-muted); font-size: 13px; }
.van-documentation-file-meta > span { display: inline-flex; align-items: baseline; gap: 6px; overflow-wrap: anywhere; min-width: 0; }
.van-documentation-file-open { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; color: #1d4ed8; font-size: 13px; font-weight: 600; }
@media (max-width: 767.98px) {
    .van-documentation-item-header { flex-wrap: wrap; gap: 12px; }
    .van-documentation-toggle { flex-basis: 100%; flex-wrap: wrap; gap: 10px; }
    .van-documentation-title { flex-basis: calc(100% - 56px); }
    .van-documentation-expiration { flex: 1; }
    .van-documentation-actions { width: 100%; justify-content: flex-end; }
    .van-documentation-counts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 16px; }
    .van-documentation-file-card { flex-wrap: wrap; align-items: flex-start; gap: 12px; padding: 16px; }
    .van-documentation-file-icon { flex-basis: 40px; height: 48px; font-size: 26px; }
    .van-documentation-file-open { flex-basis: 100%; justify-content: flex-end; padding-top: 12px; border-top: 1px solid var(--cm-border); }
}

.van-documentation-tab {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.documentation-upload-summary {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #dbeafe;
    border-radius: 10px;
    background: #eff6ff;
}

.documentation-upload-summary i {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #ffffff;
    color: #2554e8;
    font-size: 21px;
    line-height: 1;
}

.documentation-upload-summary div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.documentation-upload-summary strong {
    overflow: hidden;
    color: #1e293b;
    font-size: 15px;
    font-weight: 800;
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.documentation-upload-summary span {
    color: #667085;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
}

.van-tab-chart-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
    gap: 16px;
    margin-bottom: 16px;
}

.van-tab-chart-card {
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--cm-border-soft);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: var(--cm-shadow-sm);
}

.van-pave-chart {
    min-height: 220px;
    margin-top: 10px;
}

.van-tab-summary-list {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.van-tab-summary-list article {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 12px;
    border: 1px solid #eef2f7;
    border-radius: 9px;
    background: #fbfbfc;
}

.van-tab-summary-list span {
    color: #667085;
    font-size: 12px;
    font-weight: 750;
}

.van-tab-summary-list strong {
    color: var(--cm-text);
    font-size: 13px;
    font-weight: 850;
}

.van-accidents-tab-table,
.van-documents-tab-table,
.van-fines-tab-table,
.van-incidences-tab-table {
    min-width: 920px !important;
}

.van-accidents-tab-table {
    min-width: 1120px !important;
    table-layout: fixed;
}

.van-accidents-tab-table th:nth-child(1),
.van-accidents-tab-table td:nth-child(1),
.van-accidents-tab-table th:nth-child(3),
.van-accidents-tab-table td:nth-child(3),
.van-accidents-tab-table th:nth-child(5),
.van-accidents-tab-table td:nth-child(5),
.van-accidents-tab-table th:nth-child(6),
.van-accidents-tab-table td:nth-child(6),
.van-accidents-tab-table th:nth-child(7),
.van-accidents-tab-table td:nth-child(7),
.van-accidents-tab-table th:nth-child(8),
.van-accidents-tab-table td:nth-child(8),
.van-accidents-tab-table th:nth-child(9),
.van-accidents-tab-table td:nth-child(9) {
    width: 118px;
}

.van-accidents-tab-table th:nth-child(2),
.van-accidents-tab-table td:nth-child(2) {
    width: 180px;
}

.van-accidents-tab-table th:nth-child(4),
.van-accidents-tab-table td:nth-child(4) {
    width: 230px;
}

.van-accidents-tab-table .app-driver-avatar-link {
    min-width: 0;
    max-width: 210px;
}

.van-accidents-tab-table .app-driver-avatar-name {
    max-width: 158px;
}

.van-maintenance-tab-table,
.van-fuel-tab-table,
.van-inspections-tab-table,
.van-inventory-tab-table,
.van-doc-flow-table,
.van-pave-tab-table {
    min-width: 760px !important;
}

.van-doc-flow-table th:nth-child(1),
.van-doc-flow-table td:nth-child(1) {
    width: 42%;
}

.van-doc-flow-table th:nth-child(2),
.van-doc-flow-table td:nth-child(2),
.van-doc-flow-table th:nth-child(3),
.van-doc-flow-table td:nth-child(3) {
    width: 140px;
}

.van-doc-flow-table th:nth-child(4),
.van-doc-flow-table td:nth-child(4) {
    width: 120px;
}

.van-flow-upload-modal .modal-dialog {
    width: min(92vw, 560px) !important;
    max-width: min(92vw, 560px) !important;
}

.van-flow-upload-form-content {
    grid-template-columns: 1fr;
}

.van-flow-upload-form-content .van-flow-file-field {
    grid-column: 1 / -1;
}

.van-flow-document-modal .modal-dialog {
    width: min(92vw, 720px) !important;
    max-width: min(92vw, 720px) !important;
}

@media (max-width: 1199.98px) {
    .driver-dnr-table {
        min-width: 980px !important;
        table-layout: auto;
    }

    .driver-profile-info-grid,
    .driver-profile-extra-grid,
    .van-profile-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .driver-profile-hero {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .driver-profile-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
        max-width: none;
    }

    .van-tab-chart-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .page-driver-profile .app-container {
        padding: 22px 16px;
    }

    .page-van-profile .app-container {
        padding: 22px 16px;
    }

    .page-driver-absence-log .app-container {
        padding: 22px 16px;
    }

    .page-log-modern .app-container {
        padding: 22px 16px;
    }

    .page-log-modern .app-container > .row {
        grid-template-columns: 1fr;
    }

    .page-log-modern .page-title-box h1,
    .page-log-modern .page-title-box h4,
    .page-log-modern .app-breadcrumb-title {
        font-size: 26px !important;
        line-height: 34px !important;
    }

    .absence-log-header {
        flex-direction: column;
        align-items: stretch;
    }

    .absence-log-driver {
        align-items: flex-start;
    }

    .absence-log-header h1 {
        font-size: 26px;
        line-height: 34px;
    }

    .absence-log-actions {
        justify-content: flex-start;
    }

    .absence-log-actions .drivers-btn {
        flex: 1 1 160px;
    }

    .absence-log-metrics {
        grid-template-columns: 1fr;
    }

    .absence-log-table-card .drivers-table-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .absence-log-table-card .drivers-pagination {
        width: 100% !important;
        justify-content: flex-start !important;
    }

    .absence-log-modal .modal-dialog {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        margin: 12px auto !important;
    }

    .absence-log-modal .modal-header,
    .absence-log-modal .modal-body {
        padding-inline: 16px !important;
    }

    .absence-log-form-content {
        grid-template-columns: 1fr;
        padding: 15px;
    }

    .driver-profile-card {
        padding: 0;
    }

    .driver-profile-overview .drivers-metric-card {
        min-height: 92px;
        padding: 15px 16px 15px 56px;
    }

    .driver-profile-overview .drivers-metric-card i {
        top: 15px;
        left: 16px;
    }

    .driver-profile-overview .drivers-metric-card strong {
        font-size: 24px;
        line-height: 30px;
    }

    .driver-profile-hero {
        grid-template-columns: 1fr;
        padding: 22px 18px;
        text-align: left;
    }

    .van-profile-card {
        padding: 20px 16px;
    }

    .van-profile-hero {
        grid-template-columns: 1fr;
    }

    .driver-profile-avatar {
        width: 76px;
        height: 76px;
    }

    .driver-profile-name-row h1 {
        font-size: 26px;
        line-height: 34px;
    }

    .driver-profile-actions {
        justify-content: flex-start;
    }

    .driver-profile-actions .drivers-btn {
        flex: 1 1 150px;
    }

    .driver-profile-info-grid,
    .driver-profile-extra-grid,
    .van-profile-info-grid {
        grid-template-columns: 1fr;
    }

    .driver-profile-info-grid {
        padding: 12px;
    }

    .driver-profile-extra {
        margin: 0 12px 14px;
    }

    .driver-extra-data-modal .modal-dialog {
        width: calc(100vw - 24px);
        max-width: calc(100vw - 24px);
        margin: 12px auto;
    }

    .driver-extra-data-modal .modal-header {
        padding: 16px 18px;
    }

    .driver-extra-data-modal .modal-title {
        font-size: 20px;
        line-height: 26px;
    }

    .driver-extra-data-modal .modal-body {
        padding: 0;
    }

    .driver-extra-tabs {
        padding: 12px;
    }

    .driver-extra-tab {
        min-height: 36px;
        padding: 0 11px !important;
        font-size: 12px !important;
    }

    .driver-extra-tab-content {
        padding: 14px 12px 16px;
    }

    .driver-extra-data-modal .driver-profile-extra-section {
        padding: 15px;
    }

    .driver-extra-data-modal .driver-profile-extra-grid {
        grid-template-columns: 1fr;
    }

    .driver-profile-wide {
        grid-column: auto;
    }

    .driver-profile-tabs {
        padding-inline: 10px;
    }

    .driver-profile-tab-content {
        padding: 14px 10px;
    }
}

.page-typology .content-page.app-content-page {
    background: #ffffff;
}

.page-typology .app-container {
    max-width: none;
    padding: 34px 32px 28px;
}

.typology-header {
    margin-bottom: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--cm-border);
}

.typology-header-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.typology-header h1 {
    margin: 0;
    color: var(--cm-text);
    font-family: var(--cm-font-sans);
    font-size: 30px;
    font-weight: 750;
    line-height: 38px;
    letter-spacing: 0;
}

.typology-header p {
    margin: 4px 0 0;
    color: var(--cm-muted);
    font-size: 15px;
    line-height: 22px;
}

.typology-overview-link,
.typology-tab {
    text-decoration: none;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.typology-overview-link {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 0 14px;
    border: 1px solid var(--cm-border);
    border-radius: var(--cm-radius);
    background: #ffffff;
    color: var(--cm-text);
    font-size: 14px;
    font-weight: 700;
    box-shadow: var(--cm-shadow-sm);
}

.typology-overview-link:hover,
.typology-overview-link.is-active {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.typology-tabs {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow: visible;
    padding: 2px 0 0;
}

.typology-tab-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.typology-tab-group-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--cm-muted);
    font-size: 12px;
    font-weight: 750;
    line-height: 16px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.typology-tab-group-label i {
    font-size: 15px;
}

.typology-tab-group-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
    gap: 8px;
}

.typology-tab {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 0 13px;
    border: 1px solid var(--cm-border);
    border-radius: 9px;
    background: #ffffff;
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
    line-height: 17px;
    white-space: normal;
    box-shadow: var(--cm-shadow-sm);
}

.typology-tab i {
    flex: 0 0 auto;
    font-size: 17px;
}

.typology-tab span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.typology-tab:hover,
.typology-tab.is-active {
    border-color: #bfdbfe;
    background: #1d4ed8;
    color: #ffffff;
    box-shadow: var(--cm-shadow-sm);
}

.typology-admin-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.typology-admin-card {
    min-height: 126px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    align-items: flex-start;
    padding: 18px;
    border: 1px solid var(--cm-border);
    border-radius: 14px;
    background: #ffffff;
    color: var(--cm-text);
    text-decoration: none;
    box-shadow: var(--cm-shadow-sm);
    transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.typology-admin-card:hover {
    transform: translateY(-2px);
    border-color: #bfdbfe;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.10);
}

.typology-admin-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 22px;
}

.typology-admin-card-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.typology-admin-card-body strong {
    color: var(--cm-text);
    font-size: 16px;
    font-weight: 750;
    line-height: 22px;
}

.typology-admin-card-body small {
    color: var(--cm-muted);
    font-size: 13px;
    line-height: 18px;
}

.typology-admin-count {
    min-width: 32px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 9px;
    border-radius: 999px;
    background: #f8fafc;
    color: #475569;
    font-size: 13px;
    font-weight: 750;
}

.typology-admin-groups {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.typology-admin-group {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.typology-admin-group-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.typology-admin-group-icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 11px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 20px;
}

.typology-admin-group-header h2 {
    margin: 0;
    color: var(--cm-text);
    font-size: 18px;
    font-weight: 750;
    line-height: 24px;
}

.typology-admin-group-header p {
    margin: 2px 0 0;
    color: var(--cm-muted);
    font-size: 13px;
    line-height: 18px;
}

.page-typology .breadcrumb-wrapper,
.page-typology .app-breadcrumb,
.page-typology .page-title-box {
    margin-top: 0;
}

.page-typology .table-responsive {
    border: 1px solid var(--cm-border);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: var(--cm-shadow-sm);
}

.page-typology table.table {
    margin-bottom: 0;
    color: var(--cm-text);
    font-size: 14px;
}

.page-typology table.table thead th {
    padding: 15px 18px;
    border-bottom: 1px solid var(--cm-border);
    background: #fbfcfe !important;
    color: #667085;
    font-size: 13px;
    font-weight: 750;
    text-transform: none;
}

.page-typology table.table tbody td {
    padding: 15px 18px;
    border-bottom: 1px solid #eef2f7;
    vertical-align: middle;
}

.page-typology table.table tbody tr:last-child td {
    border-bottom: 0;
}

.page-typology .btn.app-create-button,
.page-typology .btn-success.app-create-button {
    border-color: #1d4ed8 !important;
    background: #1d4ed8 !important;
    color: #ffffff !important;
    border-radius: var(--cm-radius);
    font-weight: 700;
    box-shadow: var(--cm-shadow-sm);
}

.page-typology .btn-primary,
.page-typology .btn-light,
.page-typology .btn-danger {
    border-radius: var(--cm-radius);
}

@media (max-width: 1399.98px) {
    .fines-metrics-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

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

    .phones-filter-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .phone-damages-filter-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .scorecards-filter-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vans-filter-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

@media (max-width: 767.98px) {
    .fines-metrics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .app-popup-modal.app-fine-form-popup .modal-dialog,
    .app-popup-modal.app-accident-form-popup .modal-dialog {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        margin: 12px auto !important;
    }

    .app-popup-mode.page-fine-form .app-popup-form-content,
    .app-popup-mode.page-accident-form .app-popup-form-content {
        grid-template-columns: 1fr !important;
        padding: 0 !important;
    }

    .driver-documents-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .fines-metrics-grid {
        grid-template-columns: 1fr;
    }

    .app-popup-modal.app-phone-form-popup .modal-dialog,
    .app-popup-modal.app-phone-damage-form-popup .modal-dialog {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        margin: 12px auto !important;
    }

    .app-popup-mode.page-phone-form .app-popup-form-content,
    .app-popup-mode.page-phone-damage-form .app-popup-form-content {
        grid-template-columns: 1fr !important;
    }

    .app-popup-modal.app-van-form-popup .modal-dialog {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        margin: 12px auto !important;
    }

    .app-popup-mode.page-van-form .app-popup-form-content {
        grid-template-columns: 1fr !important;
    }

    .app-popup-modal.app-scorecard-form-popup .modal-dialog {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        margin: 12px auto !important;
    }

    .app-popup-mode.page-scorecard-form .app-popup-form-content {
        grid-template-columns: 1fr !important;
    }

    .driver-documents-summary {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .phones-metrics-grid,
    .phones-filter-bar,
    .phone-damages-metrics-grid,
    .phone-damages-filter-bar,
    .scorecards-metrics-grid,
    .scorecards-filter-bar,
    .vans-metrics-grid,
    .vans-filter-bar,
    .fines-filter-bar,
    .van-accidents-metrics-grid,
    .van-accidents-filter-bar {
        grid-template-columns: 1fr;
    }

    .scorecards-tabs {
        width: 100%;
    }

    .scorecards-tab {
        flex: 1;
    }

    .scorecards-trend-card {
        padding: 16px;
    }

    .scorecards-trend-header,
    .scorecards-trend-scale {
        align-items: flex-start;
        justify-content: flex-start;
        flex-direction: column;
    }

    .scorecards-weekly-trend-chart {
        min-height: 260px;
    }

    .page-typology .app-container {
        padding: 24px 16px;
    }

    .typology-header-main {
        flex-direction: column;
    }

    .typology-overview-link {
        width: 100%;
    }

    .typology-tab-group-items {
        grid-template-columns: repeat(auto-fit, minmax(142px, 1fr));
        gap: 7px;
    }

    .typology-tab {
        min-height: 40px;
        padding: 0 11px;
        font-size: 12px;
    }

    .typology-header h1 {
        font-size: 26px;
        line-height: 34px;
    }

    .typology-admin-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    .typology-admin-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* PAVE index */
.page-pave-index .content-page.app-content-page {
    background: #ffffff;
}

.page-pave-index .app-container {
    max-width: none;
    padding: 30px 34px;
}

.pave-page-shell {
    gap: 18px;
}

.pave-stats-grid {
    width: 100%;
    max-width: none;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.drivers-metric-slate {
    --metric-color: #a1a1aa;
}

.pave-filter-bar {
    grid-template-columns: minmax(260px, 1.25fr) minmax(190px, .75fr) minmax(210px, .75fr) minmax(190px, .65fr);
}

.pave-table {
    min-width: 960px;
    table-layout: fixed;
}

.pave-table th:nth-child(1),
.pave-table td:nth-child(1) {
    width: 230px;
}

.pave-table th:nth-child(2),
.pave-table td:nth-child(2) {
    width: 180px;
}

.pave-van-link {
    display: inline-flex;
    min-width: 0;
    max-width: 100%;
    flex-direction: column;
    gap: 2px;
    color: #2554e8;
    text-decoration: none;
}

.pave-van-link strong {
    color: #2554e8;
    font-size: 14px;
    font-weight: 850;
    line-height: 18px;
}

.pave-van-link span {
    max-width: 185px;
    overflow: hidden;
    color: #667085;
    font-size: 12px;
    font-weight: 650;
    line-height: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pave-van-link small {
    max-width: 185px;
    overflow: hidden;
    color: #98a2b3;
    font-size: 11px;
    font-weight: 650;
    line-height: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pave-rental {
    display: inline-block;
    max-width: 150px;
    overflow: hidden;
    color: #344054;
    font-size: 13px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pave-month-cell {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.pave-score-pill,
.pave-status-pill,
.pave-skip-link {
    min-width: 34px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 0 8px;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    text-decoration: none;
}

a.pave-score-pill:hover {
    filter: brightness(.98);
    text-decoration: none;
}

.pave-score-success {
    border-color: #a7f3d0;
    background: #ecfdf5;
    color: #059669;
}

.pave-score-warning {
    border-color: #fde68a;
    background: #fffbeb;
    color: #d97706;
}

.pave-score-danger {
    border-color: #fecdd3;
    background: #fff1f2;
    color: #e11d48;
}

.pave-score-muted,
.pave-status-skipped {
    border-color: #d4d4d8;
    background: #f4f4f5;
    color: #52525b;
}

.pave-skip-link {
    border-color: #dbe3ef;
    background: #ffffff;
    color: #667085;
    font-weight: 800;
}

.pave-skip-link:hover {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #2554e8;
}

.pave-actions {
    gap: 4px !important;
}

.pave-actions .app-table-action {
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    font-size: 14px !important;
}

.pave-actions .app-table-action i {
    font-size: 14px !important;
    line-height: 1 !important;
}

.app-user-pill {
    min-height: 24px;
    height: 24px;
    max-width: 150px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #f8fafc;
    color: #475467;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    padding: 0 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-created-meta {
    min-width: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.app-created-info {
    color: #111111 !important;
    cursor: help;
}

.app-created-info i {
    font-size: 18px !important;
    line-height: 1 !important;
}

.app-created-column-hidden {
    display: none !important;
}

col.app-created-column-hidden {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    visibility: collapse !important;
}

.app-created-info-tooltip {
    text-align: left;
    white-space: nowrap;
}

.pave-created-meta,
.van-tab-created-meta {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 5px;
}

.pave-created-meta .app-created-meta,
.van-tab-created-meta .app-created-meta {
    min-width: 24px;
}

.pave-empty-state {
    min-height: 260px;
}

@media (max-width: 1199px) {
    .pave-stats-grid,
    .pave-filter-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .page-pave-index .app-container {
        padding: 18px 14px;
    }

    .pave-stats-grid,
    .pave-filter-bar {
        grid-template-columns: 1fr;
    }
}

.app-popup-mode.page-pave-form {
    background: #ffffff !important;
}

.app-popup-modal.app-pave-form-popup .modal-dialog {
    width: min(92vw, 720px) !important;
    max-width: min(92vw, 720px) !important;
}

.app-popup-modal.app-pave-form-popup .modal-content {
    max-height: min(86vh, 720px);
    overflow: hidden;
    border-radius: 12px !important;
}

.app-popup-mode.page-pave-form .app-container {
    padding: 0 !important;
}

.app-popup-mode.page-pave-form .app-popup-form-content {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
    padding: 18px;
}

.app-popup-mode.page-pave-form .app-popup-form-content > .mb-3:has(textarea),
.app-popup-mode.page-pave-form .app-popup-form-content > .mb-3:has(input[type="file"]) {
    grid-column: 1 / -1;
}

.app-popup-mode.page-pave-form .app-popup-form-footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 18px;
    border-top: 1px solid var(--cm-border-soft);
    background: #ffffff;
}

@media (max-width: 767px) {
    .app-popup-mode.page-pave-form .app-popup-form-content {
        grid-template-columns: 1fr;
    }
}

/* Insurance claims */
.page-insurance-claims .content-page.app-content-page,
.page-insurance-claim-detail .content-page.app-content-page {
    background: #ffffff;
}

.page-insurance-claims .app-container {
    max-width: none;
    padding: 30px 34px;
}

.insurance-page-shell {
    gap: 18px;
}

.insurance-status-trigger {
    cursor: pointer;
    text-decoration: none;
}

.insurance-status-trigger:hover,
.insurance-status-trigger:focus {
    text-decoration: none;
    filter: brightness(.96);
}

.insurance-status-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.insurance-stats-grid {
    width: 100%;
    max-width: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.insurance-filter-bar {
    grid-template-columns: minmax(260px, 1.2fr) minmax(180px, .6fr) minmax(170px, .55fr) minmax(200px, .75fr) minmax(190px, .65fr);
}

.insurance-filter-bar .cm-period-filter {
    margin: 0 !important;
}

.insurance-filter-bar .cm-period-trigger {
    width: 100%;
    height: 42px;
}

.insurance-table {
    min-width: 1120px;
    table-layout: fixed;
}

.insurance-table th:nth-child(1),
.insurance-table td:nth-child(1) {
    width: 105px;
}

.insurance-table th:nth-child(2),
.insurance-table td:nth-child(2) {
    width: 125px;
}

.insurance-table th:nth-child(3),
.insurance-table td:nth-child(3) {
    width: 190px;
}

.insurance-table th:nth-child(4),
.insurance-table td:nth-child(4) {
    width: 130px;
}

.insurance-table th:nth-child(5),
.insurance-table td:nth-child(5),
.insurance-table th:nth-child(6),
.insurance-table td:nth-child(6) {
    width: 160px;
}

.insurance-table th:nth-child(7),
.insurance-table td:nth-child(7),
.insurance-table th:nth-child(8),
.insurance-table td:nth-child(8),
.insurance-table th:nth-child(9),
.insurance-table td:nth-child(9) {
    width: 110px;
}

.insurance-table th:nth-child(10),
.insurance-table td:nth-child(10) {
    width: 140px;
}

.insurance-entity-cell {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.insurance-van-link,
.insurance-accident-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #2554e8;
    font-size: 13px;
    font-weight: 850;
    line-height: 18px;
    text-decoration: none;
}

.insurance-table .app-driver-avatar-link {
    max-width: 170px;
}

.insurance-accident-link {
    color: #475569;
}

.insurance-case,
.insurance-company {
    display: inline-block;
    max-width: 150px;
    overflow: hidden;
    color: #344054;
    font-size: 13px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.insurance-comments-pill {
    min-width: 44px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid #dbe3ef;
    border-radius: 8px;
    background: #f8fafc;
    color: #475569;
    font-size: 13px;
    font-weight: 800;
}

.insurance-empty-state {
    min-height: 260px;
}

.app-popup-modal.app-insurance-claim-form-popup .modal-dialog {
    width: min(92vw, 840px) !important;
    max-width: min(92vw, 840px) !important;
    margin: 4vh auto !important;
}

.app-popup-modal.app-insurance-claim-form-popup .modal-content {
    max-height: min(88vh, 760px);
    overflow: hidden;
    border-radius: 12px !important;
}

.app-popup-mode.page-insurance-claim-form {
    background: #ffffff !important;
}

.app-popup-mode.page-insurance-claim-form .app-container {
    padding: 0 !important;
}

.app-popup-mode.page-insurance-claim-form .app-popup-form-content {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
    padding: 18px;
}

.app-popup-mode.page-insurance-claim-form .app-popup-form-content > .mb-3:has(textarea) {
    grid-column: 1 / -1;
}

.app-popup-mode.page-insurance-claim-form .app-popup-form-footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 18px;
    border-top: 1px solid var(--cm-border-soft);
    background: #ffffff;
}

@media (max-width: 1199px) {
    .insurance-filter-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

@media (max-width: 900px) {
    .insurance-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Rental periods */
.page-rental-periods .content-page.app-content-page {
    background: #ffffff;
}

.page-rental-periods .app-container {
    max-width: none;
    padding: 30px 34px;
}

.rental-periods-page-shell {
    gap: 18px;
}

.rental-periods-stats-grid {
    width: 100%;
    max-width: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rental-periods-filter-bar {
    grid-template-columns: minmax(260px, 1.2fr) minmax(180px, .65fr) minmax(220px, .8fr) minmax(190px, .7fr);
}

.rental-periods-filter-bar .cm-period-filter {
    margin: 0 !important;
}

.rental-periods-filter-bar .cm-period-trigger {
    width: 100%;
    height: 42px;
}

.rental-period-card {
    display: grid;
    grid-template-columns: 118px minmax(260px, 1fr) minmax(390px, .95fr) 86px;
    align-items: center;
    gap: 16px;
    min-height: 72px;
    padding: 8px 16px;
    border: 0;
    border-bottom: 1px solid #eef2f7;
    border-radius: 0;
    background: #ffffff;
    box-shadow: none;
}

.rental-period-card:last-child {
    border-bottom: 0;
}

.rental-period-card.is-overdue {
    background: #fffafa;
}

.rental-period-main {
    min-width: 0;
    display: grid;
    gap: 1px;
}

.rental-period-status-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

.rental-period-status,
.rental-period-overdue {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    padding: 0 8px;
    font-size: 12px;
    font-weight: 800;
    line-height: 16px;
}

.rental-period-status.is-open {
    border: 1px solid #fde68a;
    background: #fffbeb;
    color: #b45309;
}

.rental-period-status.is-closed {
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
    color: #15803d;
}

.rental-period-overdue {
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #dc2626;
}

.rental-period-van {
    min-width: 0;
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    color: var(--cm-text);
    text-decoration: none;
}

.rental-period-van strong {
    color: #2554e8;
    font-size: 14px;
    font-weight: 850;
    line-height: 17px;
}

.rental-period-van span,
.rental-period-company,
.rental-period-notes {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rental-period-van span {
    color: #667085;
    font-size: 12px;
    font-weight: 650;
    line-height: 15px;
}

.rental-period-company {
    color: #344054;
    font-size: 13px;
    font-weight: 800;
    line-height: 16px;
}

.rental-period-notes {
    max-width: 100%;
    margin: 0;
    color: #667085;
    font-size: 12px;
    font-weight: 600;
    line-height: 15px;
}

.rental-period-dates {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.rental-period-dates div {
    min-width: 0;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.rental-period-dates span,
.rental-period-meta {
    color: #667085;
    font-size: 12px;
    font-weight: 750;
    letter-spacing: 0;
    line-height: 16px;
    text-transform: none;
}

.rental-period-dates strong {
    overflow: hidden;
    color: #101828;
    font-size: 12px;
    font-weight: 800;
    line-height: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rental-period-dates strong.is-overdue {
    color: #dc2626;
}

.rental-period-meta {
    display: grid;
    gap: 7px;
    text-transform: none;
}

.rental-period-meta span {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 9px;
    border: 1px solid #dbe3ef;
    border-radius: 999px;
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
    font-weight: 800;
    line-height: 16px;
    white-space: nowrap;
}

.rental-period-actions {
    display: flex;
    justify-content: flex-end;
}

.rental-period-actions .drivers-btn {
    min-height: 28px;
    height: 28px;
    padding: 0 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 650;
    white-space: nowrap;
}

.rental-period-finished {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 9px;
    border: 1px solid #dbe3ef;
    border-radius: 6px;
    background: #f8fafc;
    color: #667085;
    font-size: 12px;
    font-weight: 650;
    line-height: 16px;
    white-space: nowrap;
}

.rental-periods-footer {
    margin-top: 0;
}

.rental-periods-empty-state {
    min-height: 280px;
}

.rental-period-form-section-title {
    grid-column: 1 / -1 !important;
    margin: 0 0 0.35rem;
    color: #667085;
    font-size: 12px;
    font-weight: 800;
    line-height: 16px;
    text-transform: uppercase;
}

.rental-period-form-note {
    display: flex;
    align-items: center;
    gap: 6px;
    grid-column: 1 / -1 !important;
    margin-top: -0.2rem;
    color: #f97316;
    font-size: 12px;
    font-weight: 650;
    line-height: 16px;
}

@media (max-width: 1199px) {
    .rental-periods-list-head,
    .rental-period-card {
        grid-template-columns: 110px minmax(220px, 1fr) minmax(300px, 1fr) 82px;
    }

    .rental-period-actions {
        justify-content: flex-end;
    }

    .rental-periods-filter-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .rental-periods-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rental-period-card {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 14px;
    }

    .rental-periods-list-head {
        display: none;
    }

    .rental-period-dates {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .rental-period-actions .drivers-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 767px) {
    .page-rental-periods .app-container {
        padding: 18px 14px;
    }

    .rental-periods-stats-grid,
    .rental-periods-filter-bar,
    .rental-period-meta {
        grid-template-columns: 1fr;
    }
}

/* Fleet incidences */
.page-incidences-fleet .content-page.app-content-page {
    background: #ffffff;
}

.page-incidences-fleet .app-container {
    max-width: none;
    padding: 30px 34px;
}

.incidences-page-shell {
    gap: 18px;
}

.incidences-stats-grid {
    width: 100%;
    max-width: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.incidences-filter-bar {
    grid-template-columns: minmax(260px, 1.15fr) minmax(190px, .7fr) minmax(190px, .7fr) minmax(190px, .7fr) minmax(190px, .65fr);
}

.incidences-filter-bar .cm-period-filter {
    margin: 0 !important;
}

.incidences-filter-bar .cm-period-trigger {
    width: 100%;
    height: 42px;
}

.incidences-table {
    min-width: 1040px;
    table-layout: fixed;
}

.incidences-table th:nth-child(1),
.incidences-table td:nth-child(1) {
    width: 330px;
}

.incidences-table th:nth-child(2),
.incidences-table td:nth-child(2) {
    width: 170px;
}

.incidences-table th:nth-child(3),
.incidences-table td:nth-child(3),
.incidences-table th:nth-child(4),
.incidences-table td:nth-child(4),
.incidences-table th:nth-child(5),
.incidences-table td:nth-child(5),
.incidences-table th:nth-child(6),
.incidences-table td:nth-child(6),
.incidences-table th:nth-child(7),
.incidences-table td:nth-child(7) {
    width: 135px;
}

.incidences-table :is(th.app-actions-header, th:last-child.app-actions-header),
.incidences-table :is(td.app-action-cell, td:last-child:has(.app-inline-actions)) {
    width: 132px !important;
    min-width: 132px !important;
    max-width: 132px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    text-align: right !important;
    white-space: nowrap !important;
}

.incidences-table .app-inline-actions {
    width: 100% !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
}

.incidence-title-cell {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.incidence-title-cell strong,
.incidence-title-cell span {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.incidence-title-cell strong {
    color: #101828;
    font-size: 13px;
    font-weight: 800;
}

.incidence-title-cell span {
    color: #667085;
    font-size: 12px;
    font-weight: 600;
}

.incidence-description-cell {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.incidence-description {
    display: -webkit-box !important;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal !important;
}

.incidence-description-open {
    width: 30px;
    height: 30px;
    display: none;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--cm-border-soft);
    border-radius: var(--cm-radius);
    background: #ffffff;
    color: #2563eb;
    font-size: 18px;
    line-height: 1;
    box-shadow: var(--cm-shadow-sm);
}

.incidence-description-open.is-visible {
    display: inline-flex;
}

.incidence-description-open:hover {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.incidence-van-link,
.incidence-task-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #2554e8;
    font-size: 13px;
    font-weight: 850;
    line-height: 18px;
    text-decoration: none;
}

.incidence-task-link {
    color: #475569;
    font-weight: 750;
}

.incidences-empty-state {
    min-height: 260px;
}

.van-incidences-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.van-tab-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.van-tab-section-head h2 {
    margin: 0;
    color: var(--cm-text);
    font-size: 20px;
    font-weight: 850;
    line-height: 28px;
}

.van-tab-section-head p {
    margin: 2px 0 0;
    color: #667085;
    font-size: 13px;
    font-weight: 700;
    line-height: 18px;
}

.van-incidences-stats {
    max-width: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.van-incidences-card {
    margin: 0;
}

.van-incidences-card .drivers-table-wrapper {
    border-radius: 8px;
}

.app-popup-modal.app-incidence-form-popup .modal-dialog {
    width: min(92vw, 860px) !important;
    max-width: min(92vw, 860px) !important;
    margin: 4vh auto !important;
}

.app-popup-modal.app-incidence-form-popup .modal-content {
    max-height: min(88vh, 820px) !important;
    overflow: hidden !important;
    border-radius: 10px !important;
}

.app-popup-modal.app-incidence-form-popup .modal-header {
    min-height: 64px !important;
    padding: 0 28px !important;
    border-bottom: 1px solid var(--cm-border) !important;
}

.app-popup-mode.page-incidence-form {
    background: #f8fafc !important;
}

.app-popup-mode.page-incidence-form .app-container {
    padding: 18px 24px 24px !important;
}

.app-popup-mode.page-incidence-form .app-form-card,
.app-popup-mode.page-incidence-form .app-form-card-body {
    max-width: 804px !important;
    margin: 0 auto !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.app-popup-mode.page-incidence-form .app-popup-form {
    max-width: 804px !important;
    gap: 0 !important;
    margin: 0 auto !important;
    overflow: visible !important;
}

.app-popup-mode.page-incidence-form .app-popup-form-content {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px 18px !important;
    padding: 18px !important;
    border: 1px solid var(--cm-border-soft) !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .05) !important;
}

.app-popup-mode.page-incidence-form .app-popup-form-content > .mb-3 {
    width: 100% !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

.app-popup-mode.page-incidence-form .app-popup-form-content > .mb-3:has(textarea) {
    grid-column: 1 / -1 !important;
}

.app-popup-mode.page-incidence-form .form-label {
    margin-bottom: 7px !important;
    color: #3f3f46 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
}

.app-popup-mode.page-incidence-form .form-control,
.app-popup-mode.page-incidence-form .form-select,
.app-popup-mode.page-incidence-form .select2-container--default .select2-selection--single {
    min-height: 46px !important;
    height: 46px !important;
    border-radius: var(--cm-radius) !important;
    border: 1px solid #dbe3ef !important;
    background-color: #ffffff !important;
    color: #101828 !important;
    font-size: 14px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04) !important;
}

.app-popup-mode.page-incidence-form .select2-container {
    width: 100% !important;
}

.app-popup-mode.page-incidence-form .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 44px !important;
}

.app-popup-mode.page-incidence-form textarea.form-control {
    min-height: 88px !important;
    height: 88px !important;
    resize: vertical;
}

.app-popup-mode.page-incidence-form input[type="file"].form-control {
    padding-top: 9px !important;
    padding-bottom: 9px !important;
}

.app-popup-mode.page-incidence-form .app-popup-form-footer {
    width: 100% !important;
    max-width: none !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    margin-top: 0 !important;
    padding: 14px 0 0 !important;
    border-top: 1px solid var(--cm-border-soft) !important;
}

@media (max-width: 1199px) {
    .incidences-filter-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

@media (max-width: 900px) {
    .incidences-stats-grid,
    .van-incidences-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Task detail */
body.app-body.app-popup-mode.page-task-detail,
body.app-body.app-popup-mode.page-task-detail .app-content {
    background: var(--cm-bg) !important;
}

.task-detail-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    border: 0;
    border-bottom: 1px solid var(--cm-border);
    border-radius: inherit;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.task-detail-card {
    /* Keep the status menu visible beyond the profile card. */
    overflow: visible;
}

.task-detail-card .task-description-card {
    padding: 8px 24px 24px;
}

.task-detail-card .driver-profile-info-grid article > strong {
    white-space: normal;
    overflow-wrap: anywhere;
}

.task-detail-hero .app-detail-title h1 {
    max-width: 900px;
    font-size: 26px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.task-detail-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.task-status-menu {
    min-width: 210px;
    padding: 8px;
    border: 1px solid var(--cm-border-soft);
    border-radius: 10px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .14);
}

.task-status-menu .dropdown-item {
    min-height: 36px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    color: #344054;
    font-size: 13px;
    font-weight: 750;
}

.task-status-menu .dropdown-item.active,
.task-status-menu .dropdown-item:active {
    background: #eff6ff;
    color: #2554e8;
}

.task-detail-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (min-width: 768px) {
    body.app-body.app-popup-mode.page-task-form .app-popup-form .app-popup-form-content {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.app-body.app-popup-mode.page-task-form.page-standard-form-popup .app-popup-form .app-popup-form-content > .mb-3:is(
        .task-form-status-field, .task-form-priority-field, .task-form-users-field,
        .task-form-roles-field, .task-form-deadline-field, .task-form-attachment-field) {
        grid-column: auto !important;
    }
}

.task-assignees {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.task-assignee-pill,
.task-attachment-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    line-height: 18px;
}

.task-assignee-user {
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #2554e8;
}

.task-assignee-role {
    border: 1px solid #fde68a;
    background: #fffbeb;
    color: #b45309;
}

.task-attachment-link {
    border: 1px solid #dbe3ef;
    background: #f8fafc;
    color: #2554e8;
    text-decoration: none;
}

.task-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.task-section-header span {
    display: block;
    color: #667085;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.task-section-header h2 {
    margin: 2px 0 0;
    color: #101828;
    font-size: 16px;
    font-weight: 600;
}

.task-description-body {
    padding-top: 8px;
    color: #344054;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.65;
    white-space: normal;
    overflow-wrap: anywhere;
}

.task-comments-card .accident-activity {
    min-height: 400px;
}

@media (max-width: 1199px) {
    .task-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .task-detail-hero {
        flex-direction: column;
    }

    .task-detail-hero .app-detail-title h1 {
        font-size: 22px;
    }

    .task-detail-grid {
        grid-template-columns: 1fr;
    }

    .task-detail-actions {
        justify-content: stretch;
    }

    .task-detail-actions .drivers-btn,
    .task-detail-actions .dropdown {
        width: 100%;
    }

    .task-detail-actions .dropdown .drivers-btn {
        justify-content: center;
    }
}

@media (max-width: 767px) {
    .page-incidences-fleet .app-container {
        padding: 18px 14px;
    }

    .incidences-stats-grid,
    .van-incidences-stats,
    .incidences-filter-bar,
    .app-popup-mode.page-incidence-form .app-popup-form-content {
        grid-template-columns: 1fr !important;
    }

    .van-tab-section-head {
        align-items: stretch;
        flex-direction: column;
    }

    .van-tab-section-head .drivers-btn {
        width: 100%;
    }

    .app-popup-modal.app-incidence-form-popup .modal-dialog {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        margin: 12px auto !important;
    }
}

@media (max-width: 767px) {
    .page-insurance-claims .app-container {
        padding: 18px 14px;
    }

    .insurance-stats-grid,
    .insurance-filter-bar,
    .app-popup-mode.page-insurance-claim-form .app-popup-form-content {
        grid-template-columns: 1fr;
    }
}

/* 360 inspections index */
.page-inspections360 .content-page.app-content-page {
    background: #ffffff;
}

.page-inspections360 .app-container {
    max-width: none;
    padding: 30px 34px;
}

.inspections360-page-shell {
    gap: 18px;
}

.inspections360-stats-grid {
    width: 100%;
    max-width: none;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.inspections360-filter-bar {
    grid-template-columns: minmax(260px, 1.15fr) minmax(210px, .85fr) minmax(190px, .75fr) minmax(200px, .75fr);
}

.inspections360-table {
    min-width: 920px;
    table-layout: fixed;
}

.inspections360-table th:nth-child(1),
.inspections360-table td:nth-child(1) {
    width: 215px;
}

.inspections360-table th:nth-child(2),
.inspections360-table td:nth-child(2) {
    width: 120px;
}

.inspections360-table th:nth-child(3),
.inspections360-table td:nth-child(3),
.inspections360-table th:nth-child(4),
.inspections360-table td:nth-child(4) {
    width: 120px;
}

.inspections360-table th:nth-child(5),
.inspections360-table td:nth-child(5) {
    width: 110px;
}

.inspections360-table th:nth-child(6),
.inspections360-table td:nth-child(6) {
    width: 150px;
}

.inspections360-table th:nth-child(7),
.inspections360-table td:nth-child(7) {
    width: 118px;
}

.inspection360-van-link {
    display: inline-flex;
    min-width: 0;
    max-width: 100%;
    flex-direction: column;
    gap: 3px;
    text-decoration: none;
}

.inspection360-van-link strong {
    overflow: hidden;
    color: #2554e8;
    font-size: 14px;
    font-weight: 850;
    line-height: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inspection360-van-link span {
    max-width: 185px;
    overflow: hidden;
    color: #667085;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inspection360-van-link small {
    max-width: 185px;
    overflow: hidden;
    color: #98a2b3;
    font-size: 11px;
    font-weight: 650;
    line-height: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inspection360-user-pill,
.inspection360-photos-pill {
    min-height: 24px;
    height: 24px;
    min-width: 0;
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: 4px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #f8fafc;
    color: #667085;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    padding: 0 8px;
    text-decoration: none;
    white-space: nowrap;
}

a.inspection360-photos-pill:hover {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #2554e8;
    text-decoration: none;
}

.inspection360-user-pill {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inspection360-photos-pill i {
    color: currentColor;
    font-size: 14px;
    line-height: 1;
}

.inspections360-result-pill {
    min-height: 24px !important;
    height: 24px !important;
    padding: 0 8px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 16px !important;
    text-decoration: none !important;
}

a.inspections360-result-pill:hover {
    filter: brightness(.98);
    text-decoration: none !important;
}

.inspection360-notes {
    display: block;
    max-width: 110px;
    overflow: hidden;
    color: #344054;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inspection360-notes-button {
    width: 42px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 1px solid #dbe3ef;
    border-radius: 999px;
    background: #ffffff;
    color: #667085;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    text-decoration: none;
}

.inspection360-notes-button i {
    color: currentColor;
    font-size: 14px;
    line-height: 1;
}

.inspection360-notes-button:hover {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #2554e8;
    text-decoration: none;
}

.inspections360-actions {
    gap: 4px !important;
}

.inspections360-actions .app-table-action {
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    font-size: 14px !important;
}

.inspections360-actions .app-table-action i {
    font-size: 14px !important;
    line-height: 1 !important;
}

.inspections360-empty-state {
    min-height: 260px;
}

.app-popup-modal.app-inspection360-form-popup .modal-dialog {
    width: min(94vw, 1040px) !important;
    max-width: min(94vw, 1040px) !important;
    margin: 4vh auto !important;
}

.app-popup-modal.app-inspection360-notes-popup .modal-dialog {
    width: min(92vw, 620px) !important;
    max-width: min(92vw, 620px) !important;
    margin: 8vh auto !important;
}

.app-popup-modal.app-inspection360-notes-popup .modal-content {
    max-height: min(78vh, 680px) !important;
    border-radius: 10.4px !important;
    overflow: hidden !important;
}

.app-popup-modal.app-inspection360-notes-popup .app-popup-frame {
    height: min(68vh, 600px) !important;
    max-height: calc(78vh - 57px) !important;
}

.app-popup-mode.page-inspection360-notes {
    background: #f8fafc !important;
}

.app-popup-mode.page-inspection360-notes .app-container {
    padding: 16px !important;
}

.inspection360-notes-popup {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.inspection360-notes-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--cm-border-soft);
    border-radius: 10px;
    background: #ffffff;
    box-shadow: var(--cm-shadow-sm);
}

.inspection360-notes-popup-header > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.inspection360-notes-popup-header > div > span {
    color: #667085;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
}

.inspection360-notes-popup-header strong {
    color: var(--cm-text);
    font-size: 16px;
    font-weight: 750;
    line-height: 22px;
}

.inspection360-notes-popup-list {
    min-height: 0;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    padding-right: 4px;
}

.inspection360-notes-popup-item {
    padding: 12px 14px;
    border: 1px solid var(--cm-border-soft);
    border-radius: 10px;
    background: #ffffff;
    box-shadow: var(--cm-shadow-sm);
}

.inspection360-notes-popup-item strong {
    display: block;
    margin-bottom: 6px;
    color: #344054;
    font-size: 13px;
    font-weight: 750;
    line-height: 18px;
}

.inspection360-notes-popup-item p {
    margin: 0;
    color: #475467;
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
    white-space: pre-wrap;
}

.inspection360-notes-popup-empty {
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    border: 1px dashed var(--cm-border);
    border-radius: 10px;
    background: #ffffff;
    color: #667085;
    text-align: center;
}

.inspection360-notes-popup-empty i {
    color: #98a2b3;
    font-size: 26px;
    line-height: 1;
}

.inspection360-notes-popup-empty strong {
    color: var(--cm-text);
    font-size: 16px;
    line-height: 22px;
}

.inspection360-notes-popup-empty span {
    font-size: 13px;
    line-height: 18px;
}

.app-popup-modal.app-inspection360-form-popup .modal-content {
    max-height: min(90vh, 840px) !important;
    overflow: hidden !important;
    border-radius: 10px !important;
}

.app-popup-modal.app-inspection360-form-popup .modal-header {
    min-height: 64px !important;
    padding: 0 28px !important;
    border-bottom: 1px solid var(--cm-border) !important;
}

.app-popup-mode.page-inspection360-form {
    background: #f8fafc !important;
}

.app-popup-mode.page-inspection360-form .app-container {
    padding: 18px 24px 24px !important;
}

.app-popup-mode.page-inspection360-form .app-form-card,
.app-popup-mode.page-inspection360-form .app-form-card-body {
    max-width: 980px !important;
    margin: 0 auto !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.app-popup-mode.page-inspection360-form .app-popup-form {
    max-width: 980px !important;
    gap: 0 !important;
    margin: 0 auto !important;
    overflow: visible !important;
}

.app-popup-mode.page-inspection360-form .app-popup-form-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    padding: 16px !important;
    border: 1px solid var(--cm-border) !important;
    border-radius: 10px !important;
    background: #ffffff !important;
}

.app-popup-mode.page-inspection360-form .inspection360-section {
    margin: 0 !important;
    padding: 0 0 14px !important;
    border-bottom: 1px solid #eef2f7 !important;
}

.app-popup-mode.page-inspection360-form .inspection360-section:last-child {
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.app-popup-mode.page-inspection360-form .inspection360-section-header h3 {
    margin: 0 0 12px !important;
    color: #1f2937 !important;
    font-size: 15px !important;
    font-weight: 850 !important;
}

.app-popup-mode.page-inspection360-form .inspection360-general-grid,
.app-popup-mode.page-inspection360-form .inspection360-tire-fields {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px 16px !important;
}

.app-popup-mode.page-inspection360-form .inspection360-tire-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

.app-popup-mode.page-inspection360-form .inspection360-tire-card {
    padding: 14px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    background: #fbfdff !important;
}

.app-popup-mode.page-inspection360-form .inspection360-tire-card h4 {
    margin: 0 0 12px !important;
    color: #344054 !important;
    font-size: 13px !important;
    font-weight: 850 !important;
}

.app-popup-mode.page-inspection360-form .inspection360-tire-card-wide {
    grid-column: 1 / -1 !important;
}

.app-popup-mode.page-inspection360-form .inspection360-check-list {
    display: grid !important;
    gap: 9px !important;
}

.app-popup-mode.page-inspection360-form .inspection360-check-row {
    display: grid !important;
    grid-template-columns: minmax(130px, .7fr) minmax(190px, .65fr) minmax(220px, 1fr) !important;
    gap: 12px !important;
    align-items: end !important;
}

.app-popup-mode.page-inspection360-form .inspection360-check-name {
    padding-bottom: 11px !important;
    color: #475569 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

.app-popup-mode.page-inspection360-form .form-label {
    margin-bottom: 7px !important;
    color: #3f3f46 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

.app-popup-mode.page-inspection360-form .form-control,
.app-popup-mode.page-inspection360-form .form-select,
.app-popup-mode.page-inspection360-form .select2-container--default .select2-selection--single {
    min-height: 44px !important;
    height: 44px !important;
    border-radius: var(--cm-radius) !important;
    border: 1px solid #dbe3ef !important;
    background-color: #ffffff !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05) !important;
}

.app-popup-mode.page-inspection360-form .select2-container {
    width: 100% !important;
}

.app-popup-mode.page-inspection360-form .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 42px !important;
}

.app-popup-mode.page-inspection360-form select.is-invalid + .select2-container .select2-selection--single {
    border-color: #ef4444 !important;
}

.app-popup-mode.page-inspection360-form textarea.form-control {
    min-height: 70px !important;
    height: 70px !important;
    resize: vertical;
}

.app-popup-mode.page-inspection360-form .app-popup-form-footer {
    width: 100% !important;
    max-width: none !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    margin-top: 14px !important;
}

.inspection360-wizard-nav,
.inspection360-wizard-actions {
    display: none;
}

.inspection360-van-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 10px 14px;
    border: 1px solid var(--cm-border-soft);
    border-radius: 10px;
    background: #f8fbff;
}

.inspection360-van-summary-icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #e0edff;
    color: #2554e8;
    font-size: 20px;
}

.inspection360-van-summary-body {
    min-width: 0;
}

.inspection360-van-summary-body > span {
    display: block;
    color: #667085;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .04em;
}

.inspection360-van-summary-body strong {
    display: block;
    color: #101828;
    font-size: 15px;
    font-weight: 850;
    line-height: 20px;
}

.inspection360-van-summary-body p {
    margin: 2px 0 0;
    color: #667085;
    font-size: 12px;
    font-weight: 650;
}

.app-popup-mode.page-inspection360-form .app-popup-form-content {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.app-popup-mode.page-inspection360-form .inspection360-form {
    min-height: min(66vh, 620px);
    display: grid !important;
    grid-template-columns: 230px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 12px !important;
}

.app-popup-mode.page-inspection360-form .inspection360-wizard-nav {
    display: flex;
    grid-column: 1;
    grid-row: 1 / span 2;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--cm-border-soft);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: var(--cm-shadow-sm);
}

.app-popup-mode.page-inspection360-form .inspection360-wizard-step {
    min-width: 0;
    min-height: 48px;
    width: 100%;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    justify-content: start;
    gap: 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #667085;
    padding: 0 6px;
    text-align: left;
}

.app-popup-mode.page-inspection360-form .inspection360-wizard-step span {
    width: 22px;
    min-width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #eef2f7;
    color: #667085;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
}

.app-popup-mode.page-inspection360-form .inspection360-wizard-step strong {
    min-width: 0;
    overflow: hidden;
    font-size: 12px;
    font-weight: 750;
    line-height: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-popup-mode.page-inspection360-form .inspection360-wizard-step.is-active {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #2554e8;
}

.app-popup-mode.page-inspection360-form .inspection360-wizard-step.is-active span {
    background: #2554e8;
    color: #ffffff;
}

.app-popup-mode.page-inspection360-form .inspection360-wizard-step.is-complete span {
    background: #dcfce7;
    color: #15803d;
}

.app-popup-mode.page-inspection360-form .inspection360-step-panel {
    display: none !important;
}

.app-popup-mode.page-inspection360-form .inspection360-step-panel.is-active {
    min-height: 0;
    display: block !important;
    grid-column: 2;
    grid-row: 1;
    overflow-y: auto;
    padding: 16px !important;
    border: 1px solid var(--cm-border-soft) !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: var(--cm-shadow-sm) !important;
}

.app-popup-mode.page-inspection360-form .inspection360-step-panel .inspection360-section-header {
    margin-bottom: 14px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid #eef2f7 !important;
}

.app-popup-mode.page-inspection360-form .inspection360-step-panel .inspection360-section-header h3 {
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 22px !important;
}

.app-popup-mode.page-inspection360-form .inspection360-wizard-actions {
    display: flex;
    grid-column: 2;
    grid-row: 2;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.app-popup-mode.page-inspection360-form .inspection360-wizard-cancel {
    margin-right: auto;
}

.app-popup-mode.page-inspection360-form .inspection360-wizard-prev,
.app-popup-mode.page-inspection360-form .inspection360-wizard-next,
.app-popup-mode.page-inspection360-form .inspection360-wizard-submit {
    height: 36px !important;
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 0 14px !important;
    border-radius: var(--cm-radius) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
}

.app-popup-mode.page-inspection360-form .inspection360-wizard-prev:disabled {
    opacity: .55;
    pointer-events: none;
}

.app-popup-mode.page-inspection360-form .app-popup-form-footer {
    display: none !important;
}

@media (max-width: 1180px) {
    .inspections360-stats-grid,
    .inspections360-filter-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .app-popup-mode.page-inspection360-form .inspection360-tire-grid,
    .app-popup-mode.page-inspection360-form .inspection360-check-row {
        grid-template-columns: 1fr !important;
    }

    .app-popup-mode.page-inspection360-form .inspection360-check-name {
        padding-bottom: 0 !important;
    }
}

@media (max-width: 720px) {
    .page-inspections360 .app-container {
        padding: 18px 14px;
    }

    .inspections360-stats-grid,
    .inspections360-filter-bar,
    .app-popup-mode.page-inspection360-form .inspection360-general-grid,
    .app-popup-mode.page-inspection360-form .inspection360-tire-fields {
        grid-template-columns: 1fr !important;
    }

    .app-popup-modal.app-inspection360-form-popup .modal-dialog {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        margin: 12px auto !important;
    }

    .app-popup-mode.page-inspection360-form .app-container {
        padding: 14px !important;
    }

    .app-popup-mode.page-inspection360-form .inspection360-wizard-nav {
        grid-column: 1;
        grid-row: 1;
        display: flex;
        overflow-x: auto;
        padding: 8px;
        scroll-snap-type: x proximity;
    }

    .app-popup-mode.page-inspection360-form .inspection360-wizard-step {
        min-width: 128px;
        scroll-snap-align: start;
    }

    .app-popup-mode.page-inspection360-form .inspection360-step-panel.is-active {
        grid-column: 1;
        grid-row: 2;
        min-height: 0;
        padding: 14px !important;
    }

    .app-popup-mode.page-inspection360-form .inspection360-form {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr) auto;
    }

    .app-popup-mode.page-inspection360-form .inspection360-wizard-actions {
        grid-column: 1;
        grid-row: 3;
    }
}

/* 360 inspection popup card cleanup */
.app-popup-mode.page-inspection360-form .app-popup-form-content {
    gap: 14px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.app-popup-mode.page-inspection360-form .inspection360-section {
    margin: 0 !important;
    padding: 18px 20px !important;
    border: 1px solid #dfe7f2 !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04) !important;
}

.app-popup-mode.page-inspection360-form .inspection360-section:last-child {
    padding-bottom: 18px !important;
    border-bottom: 1px solid #dfe7f2 !important;
}

.app-popup-mode.page-inspection360-form .inspection360-section-header {
    margin: -18px -20px 16px !important;
    padding: 14px 20px !important;
    border-bottom: 1px solid #eef2f7 !important;
    border-radius: 10px 10px 0 0 !important;
    background: #ffffff !important;
}

.app-popup-mode.page-inspection360-form .inspection360-section-header h3 {
    margin: 0 !important;
    color: #101828 !important;
    font-size: 16px !important;
    font-weight: 850 !important;
    line-height: 22px !important;
}

.app-popup-mode.page-inspection360-form .inspection360-tire-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

.app-popup-mode.page-inspection360-form .inspection360-tire-card {
    min-height: 0 !important;
    padding: 14px 16px !important;
    border-color: #e3eaf3 !important;
    background: #fbfdff !important;
}

.app-popup-mode.page-inspection360-form .inspection360-tire-card h4 {
    margin-bottom: 12px !important;
    color: #1f2937 !important;
    font-size: 13px !important;
    line-height: 18px !important;
}

.app-popup-mode.page-inspection360-form .inspection360-tire-fields {
    grid-template-columns: minmax(0, 1fr) 110px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: end !important;
}

.app-popup-mode.page-inspection360-form .inspection360-check-list {
    gap: 10px !important;
}

.app-popup-mode.page-inspection360-form .inspection360-check-row {
    grid-template-columns: minmax(140px, .55fr) minmax(180px, .55fr) minmax(260px, 1fr) !important;
    gap: 12px !important;
    padding: 11px !important;
    border: 1px solid #eef2f7 !important;
    border-radius: 8px !important;
    background: #fbfdff !important;
}

.app-popup-mode.page-inspection360-form .inspection360-check-name {
    padding-bottom: 12px !important;
}

@media (max-width: 900px) {
    .app-popup-mode.page-inspection360-form .inspection360-tire-grid,
    .app-popup-mode.page-inspection360-form .inspection360-tire-fields,
    .app-popup-mode.page-inspection360-form .inspection360-check-row {
        grid-template-columns: 1fr !important;
    }

    .app-popup-mode.page-inspection360-form .inspection360-check-name {
        padding-bottom: 0 !important;
    }
}

/* 360 inspection detail */
.page-inspection360-detail .content-page.app-content-page {
    background: #ffffff;
}

.inspection360-detail-shell {
    gap: 18px;
}

.inspection360-detail-hero {
    align-items: flex-start;
}

.inspection360-summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.inspection360-summary-card .app-detail-field p {
    margin-top: 3px;
    color: #667085;
    font-size: 12px;
    font-weight: 650;
}

.inspection360-report-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.inspection360-report-card {
    min-width: 0;
    border: 1px solid var(--cm-border-soft);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(16, 24, 40, .04);
}

.inspection360-tires-card,
.inspection360-observations-card {
    grid-column: 1 / -1;
}

.inspection360-report-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid #eef2f7;
}

.inspection360-report-card-header span {
    display: block;
    margin-bottom: 3px;
    color: #667085;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.inspection360-report-card-header h2 {
    margin: 0;
    color: #101828;
    font-size: 17px;
    font-weight: 850;
    line-height: 22px;
}

.inspection360-report-card-header > i {
    width: 38px;
    height: 38px;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    background: #eff6ff;
    color: #2554e8;
    font-size: 20px;
}

.inspection360-tire-report-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    padding: 16px;
}

.inspection360-tire-report-card {
    min-width: 0;
    padding: 14px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fbfdff;
}

.inspection360-tire-report-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.inspection360-tire-report-title strong {
    min-width: 0;
    color: #101828;
    font-size: 13px;
    font-weight: 850;
    line-height: 18px;
}

.inspection360-tire-report-data {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.inspection360-tire-report-data span {
    display: block;
    margin-bottom: 3px;
    color: #667085;
    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
}

.inspection360-tire-report-data strong {
    color: #101828;
    font-size: 15px;
    font-weight: 850;
}

.inspection360-ok {
    color: #059669 !important;
}

.inspection360-bad {
    color: #e11d48 !important;
}

.inspection360-check-report-list {
    display: grid;
    gap: 0;
    padding: 6px 0;
}

.inspection360-check-report-row {
    min-height: 58px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 13px 20px;
    border-bottom: 1px solid #f1f5f9;
}

.inspection360-check-report-row:last-child {
    border-bottom: 0;
}

.inspection360-check-report-row strong {
    display: block;
    color: #101828;
    font-size: 13px;
    font-weight: 850;
    line-height: 18px;
}

.inspection360-check-report-row p {
    margin: 4px 0 0;
    color: #667085;
    font-size: 12px;
    font-weight: 600;
    line-height: 17px;
}

.inspection360-observations-card > p {
    margin: 0;
    padding: 18px 20px 22px;
    color: #344054;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.65;
}

@media (max-width: 1280px) {
    .inspection360-tire-report-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .inspection360-summary-grid,
    .inspection360-report-grid {
        grid-template-columns: 1fr;
    }

    .inspection360-tire-report-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .inspection360-tire-report-grid {
        grid-template-columns: 1fr;
    }

    .inspection360-check-report-row {
        grid-template-columns: 1fr;
    }
}

/* Maintenance index */
.page-maintenance-index .content-page.app-content-page {
    background: #ffffff;
}

.maintenance-page-shell {
    gap: 16px;
}

.maintenance-status-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.maintenance-status-tabs a {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px;
    border: 1px solid var(--cm-border);
    border-radius: 10px;
    background: #ffffff;
    color: #475467;
    font-size: 14px;
    font-weight: 750;
    text-decoration: none;
    box-shadow: var(--cm-shadow-sm);
}

.maintenance-status-tabs a.is-active {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.maintenance-status-tabs strong {
    min-width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #f2f4f7;
    color: #344054;
    font-size: 12px;
    font-weight: 850;
}

.maintenance-status-tabs a.is-active strong {
    background: #dbeafe;
    color: #1d4ed8;
}

.maintenance-filter-bar {
    grid-template-columns: minmax(240px, 1.35fr) repeat(4, minmax(150px, 1fr));
}

.maintenance-table {
    min-width: 1320px;
}

.maintenance-table tbody tr {
    position: relative;
}

.maintenance-table tbody tr::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 4px;
    border-radius: 0 999px 999px 0;
    background: #f59e0b;
}

.maintenance-table tbody tr.is-closed::before {
    background: #22c55e;
}

.maintenance-table th:nth-child(1),
.maintenance-table td:nth-child(1) {
    width: 170px;
}

.maintenance-table th:nth-child(2),
.maintenance-table td:nth-child(2) {
    width: 210px;
}

.maintenance-table th:nth-child(9),
.maintenance-table td:nth-child(9) {
    width: 128px;
}

.maintenance-table th:nth-child(7),
.maintenance-table td:nth-child(7) {
    width: 142px;
}

.maintenance-table th:last-child,
.maintenance-table td:last-child {
    width: 128px;
}

.maintenance-van-link,
.maintenance-type-cell,
.maintenance-date-cell,
.maintenance-comment-cell {
    min-width: 0;
    display: inline-flex;
    flex-direction: column;
    gap: 3px;
    color: var(--cm-text);
    text-decoration: none;
}

.maintenance-van-link span,
.maintenance-type-cell strong,
.maintenance-date-cell strong {
    color: #101828;
    font-size: 15px;
    font-weight: 850;
    line-height: 20px;
}

.maintenance-van-link small,
.maintenance-type-cell small,
.maintenance-date-cell small,
.maintenance-comment-cell small {
    max-width: 190px;
    overflow: hidden;
    color: #667085;
    font-size: 12px;
    font-weight: 650;
    line-height: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.maintenance-status-pill,
.maintenance-workshop-pill,
.maintenance-forecast,
.maintenance-evidence {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 3px 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 850;
    line-height: 16px;
    white-space: nowrap;
}

.maintenance-status-pill.is-open {
    border-color: #fed7aa;
    background: #fff7ed;
    color: #c2410c;
}

.maintenance-status-pill.is-closed,
.maintenance-workshop-pill.is-closed {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #15803d;
}

.maintenance-workshop-pill.is-open {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.maintenance-doc-dots {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.maintenance-doc-dot {
    width: 9px;
    height: 9px;
    display: inline-flex;
    border-radius: 999px;
    background: #d0d5dd;
}

.maintenance-doc-dot.is-present {
    background: #16a34a;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, .14);
}

.maintenance-evidence {
    border-color: #e5e7eb;
    background: #f9fafb;
    color: #667085;
    text-decoration: none;
}

.maintenance-evidence.is-present {
    border-color: #fecaca;
    background: #fef2f2;
    color: #dc2626;
}

.maintenance-forecast {
    border-color: #e5e7eb;
    background: #f9fafb;
    color: #667085;
}

.maintenance-forecast.is-alert {
    border-color: #fecaca;
    background: #fef2f2;
    color: #dc2626;
}

.maintenance-forecast.is-done {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #15803d;
}

.maintenance-comment-cell {
    align-items: flex-start;
}

.maintenance-comment-cell span {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 13px;
    font-weight: 850;
}

.maintenance-row-actions a.is-edit {
    color: #d97706;
}

@media (max-width: 1399.98px) {
    .maintenance-filter-bar {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .maintenance-filter-bar {
        grid-template-columns: 1fr;
    }
}

/* Maintenance detail */
.page-maintenance-detail .content-page.app-content-page {
    background: #ffffff;
}

.app-detail-icon-warning {
    border: 1px solid #fde68a;
    background: #fffbeb;
    color: #d97706;
}

.maintenance-detail-shell {
    gap: 18px;
}

.maintenance-detail-hero {
    align-items: flex-start;
}

.maintenance-summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.maintenance-summary-card .app-detail-field p {
    margin-top: 3px;
    color: #667085;
    font-size: 12px;
    font-weight: 650;
}

.maintenance-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.maintenance-detail-card {
    min-width: 0;
    border: 1px solid var(--cm-border-soft);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(16, 24, 40, .04);
}

.maintenance-detail-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid #eef2f7;
}

.maintenance-detail-card-header span:not(.driver-tab-pill):not(.app-status-pill) {
    display: block;
    margin-bottom: 3px;
    color: #667085;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.maintenance-detail-card-header h2 {
    margin: 0;
    color: #101828;
    font-size: 17px;
    font-weight: 850;
    line-height: 22px;
}

.maintenance-detail-card-header > i {
    width: 38px;
    height: 38px;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1px solid #fde68a;
    border-radius: 10px;
    background: #fffbeb;
    color: #d97706;
    font-size: 20px;
}

.maintenance-timeline {
    display: grid;
    gap: 0;
    padding: 10px 20px 18px;
}

.maintenance-timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 12px;
    padding: 14px 0;
}

.maintenance-timeline-item::before {
    content: "";
    position: absolute;
    left: 9px;
    top: 35px;
    bottom: -12px;
    width: 2px;
    background: #e5e7eb;
}

.maintenance-timeline-item:last-child::before {
    display: none;
}

.maintenance-timeline-dot {
    width: 20px;
    height: 20px;
    display: inline-flex;
    border: 3px solid #e5e7eb;
    border-radius: 999px;
    background: #ffffff;
}

.maintenance-timeline-item.is-active .maintenance-timeline-dot {
    border-color: #2554e8;
    background: #dbeafe;
}

.maintenance-timeline-item strong {
    display: block;
    color: #101828;
    font-size: 14px;
    font-weight: 850;
    line-height: 18px;
}

.maintenance-timeline-item p {
    margin: 4px 0 0;
    color: #344054;
    font-size: 13px;
    font-weight: 700;
}

.maintenance-timeline-item small {
    display: block;
    margin-top: 3px;
    color: #667085;
    font-size: 12px;
    font-weight: 650;
}

.maintenance-kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 18px 20px;
}

.maintenance-kpi-grid div {
    min-height: 86px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid #eef2f7;
    border-radius: 10px;
    background: #fbfdff;
    padding: 12px;
}

.maintenance-kpi-grid span {
    color: #667085;
    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
}

.maintenance-kpi-grid strong {
    margin-top: 4px;
    color: #101828;
    font-size: 20px;
    font-weight: 850;
    line-height: 1.2;
}

.maintenance-documents-card,
.maintenance-comments-card {
    grid-column: 1 / -1;
}

.maintenance-documents-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    padding: 16px 20px 20px;
}

.maintenance-document-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    min-height: 150px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fbfdff;
    padding: 14px;
}

.maintenance-document-card div:first-child {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.maintenance-document-card div:first-child i {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    font-size: 18px;
}

.maintenance-document-blue div:first-child i {
    background: #eff6ff;
    color: #2554e8;
}

.maintenance-document-slate div:first-child i {
    background: #f1f5f9;
    color: #475569;
}

.maintenance-document-green div:first-child i {
    background: #ecfdf5;
    color: #059669;
}

.maintenance-document-amber div:first-child i {
    background: #fffbeb;
    color: #d97706;
}

.maintenance-document-card strong {
    color: #101828;
    font-size: 13px;
    font-weight: 850;
    line-height: 18px;
}

.maintenance-document-card span {
    color: #667085;
    font-size: 12px;
    font-weight: 650;
}

.maintenance-document-card .drivers-btn {
    width: 100%;
    justify-content: center;
}

.maintenance-document-empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    border: 1px dashed #dbe3ef;
    border-radius: 9px;
    color: #98a2b3 !important;
    font-weight: 850 !important;
}

.maintenance-notes-card p {
    margin: 0;
    padding: 18px 20px 22px;
    color: #344054;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.65;
}

.maintenance-comments-body {
    padding: 18px 20px 22px;
}

.maintenance-document-modal .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: 14px;
}

.maintenance-document-modal .modal-header,
.maintenance-document-modal .modal-footer {
    border-color: #eef2f7;
}

.maintenance-document-modal .modal-body {
    min-height: 58vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    padding: 18px;
}

.maintenance-document-modal img {
    max-width: 100%;
    max-height: 70vh;
    border-radius: 10px;
    object-fit: contain;
}

.maintenance-document-modal iframe {
    width: 100%;
    min-height: 70vh;
    border: 0;
    border-radius: 10px;
    background: #ffffff;
}

.app-popup-mode.page-maintenance-detail {
    background: #f8fafc;
}

.app-popup-mode.page-maintenance-detail .app-container {
    max-width: min(100%, 1040px);
    padding-top: 14px !important;
    padding-bottom: 14px !important;
}

.app-popup-mode.page-maintenance-detail .maintenance-detail-shell {
    gap: 12px;
}

.app-popup-mode.page-maintenance-detail .app-detail-back-row {
    margin-bottom: 0;
}

.app-popup-mode.page-maintenance-detail .maintenance-detail-hero,
.app-popup-mode.page-maintenance-detail .maintenance-detail-card,
.app-popup-mode.page-maintenance-detail .maintenance-summary-card,
.app-popup-mode.page-maintenance-detail .maintenance-comments-card {
    border-radius: 12px;
    box-shadow: none;
}

.app-popup-mode.page-maintenance-detail .maintenance-detail-hero {
    padding: 16px;
}

.app-popup-mode.page-maintenance-detail .app-detail-title h1 {
    font-size: 1.4rem;
}

.app-popup-mode.page-maintenance-detail .maintenance-detail-grid {
    gap: 12px;
}

.app-popup-mode.page-maintenance-detail .maintenance-detail-card {
    padding: 16px;
}

.app-popup-mode.page-maintenance-detail .maintenance-documents-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.app-popup-mode.page-maintenance-detail .maintenance-comments-card {
    margin-bottom: 0;
}

@media (max-width: 767.98px) {
    .app-popup-mode.page-maintenance-detail .app-container {
        padding-right: 12px;
        padding-left: 12px;
    }

    .app-popup-mode.page-maintenance-detail .maintenance-documents-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1199px) {
    .maintenance-summary-grid,
    .maintenance-documents-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .maintenance-detail-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .maintenance-summary-grid,
    .maintenance-documents-grid,
    .maintenance-kpi-grid {
        grid-template-columns: 1fr;
    }
}

.app-popup-modal.app-maintenance-form-popup .modal-dialog {
    width: min(92vw, 820px) !important;
    max-width: min(92vw, 820px) !important;
    margin: 5vh auto !important;
}

.app-popup-modal.app-maintenance-form-popup .modal-content {
    max-height: min(88vh, 760px) !important;
    overflow: hidden !important;
    border-radius: 12px !important;
}

.app-popup-mode.page-maintenance-form {
    background: #f8fafc !important;
}

.app-popup-mode.page-maintenance-form .app-container {
    padding: 18px 22px 22px !important;
}

.app-popup-mode.page-maintenance-form .app-form-card,
.app-popup-mode.page-maintenance-form .app-form-card-body {
    max-width: 760px !important;
    margin: 0 auto !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.app-popup-mode.page-maintenance-form .app-popup-form-content {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px 16px !important;
    padding: 18px !important;
    border: 1px solid var(--cm-border-soft) !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .05) !important;
}

.app-popup-mode.page-maintenance-form .app-popup-form-content > .mb-3,
.app-popup-mode.page-maintenance-form .app-popup-form-content > [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

.app-popup-mode.page-maintenance-form .app-popup-form-content > .col-md-6 {
    grid-column: span 1 !important;
}

.app-popup-mode.page-maintenance-form .maintenance-form-notes-field,
.app-popup-mode.page-maintenance-form .app-popup-form-content > .col-12:not(.col-md-6) {
    grid-column: 1 / -1 !important;
}

.app-popup-mode.page-maintenance-form .form-label {
    margin-bottom: 7px !important;
    color: #3f3f46 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

.app-popup-mode.page-maintenance-form .form-control,
.app-popup-mode.page-maintenance-form .form-select,
.app-popup-mode.page-maintenance-form .select2-container--default .select2-selection--single {
    width: 100% !important;
    min-height: 44px !important;
    height: 44px !important;
    border-radius: var(--cm-radius) !important;
    border: 1px solid #dbe3ef !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05) !important;
}

.app-popup-mode.page-maintenance-form .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 42px !important;
}

.app-popup-mode.page-maintenance-form .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 42px !important;
}

.app-popup-mode.page-maintenance-form textarea.form-control {
    min-height: 96px !important;
    height: auto !important;
}

.app-popup-mode.page-maintenance-form input[type="file"].form-control {
    padding: 9px 11px !important;
}

.app-popup-mode.page-maintenance-form .form-text {
    color: #667085 !important;
    font-size: 12px !important;
    font-weight: 650 !important;
}

.app-popup-mode.page-maintenance-form .app-popup-form-footer {
    position: sticky !important;
    z-index: 3 !important;
    bottom: 0 !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    margin-top: 14px !important;
    padding: 12px 0 0 !important;
    background: #f8fafc !important;
}

@media (max-width: 640px) {
    .app-popup-mode.page-maintenance-form .app-popup-form-content {
        grid-template-columns: 1fr !important;
    }
}

.app-popup-modal.app-maintenance-close-form-popup .modal-dialog {
    width: min(92vw, 760px) !important;
    max-width: min(92vw, 760px) !important;
    margin: 5vh auto !important;
}

.app-popup-modal.app-maintenance-close-form-popup .modal-content {
    max-height: min(86vh, 720px) !important;
    overflow: hidden !important;
    border-radius: 12px !important;
}

.app-popup-mode.page-maintenance-close-form {
    background: #f8fafc !important;
}

.app-popup-mode.page-maintenance-close-form .app-container {
    padding: 18px 22px 22px !important;
}

.app-popup-mode.page-maintenance-close-form .app-form-card,
.app-popup-mode.page-maintenance-close-form .app-form-card-body {
    max-width: 700px !important;
    margin: 0 auto !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.app-popup-mode.page-maintenance-close-form .app-popup-form-content {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px 16px !important;
    padding: 18px !important;
    border: 1px solid var(--cm-border-soft) !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .05) !important;
}

.app-popup-mode.page-maintenance-close-form .app-popup-form-content > .mb-3:has(textarea),
.app-popup-mode.page-maintenance-close-form .app-popup-form-content > .mb-3:nth-last-child(-n+2) {
    grid-column: 1 / -1 !important;
}

.app-popup-mode.page-maintenance-close-form .form-label {
    margin-bottom: 7px !important;
    color: #3f3f46 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

.app-popup-mode.page-maintenance-close-form .form-control {
    min-height: 44px !important;
    border-radius: var(--cm-radius) !important;
    border: 1px solid #dbe3ef !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05) !important;
}

.app-popup-mode.page-maintenance-close-form textarea.form-control {
    min-height: 86px !important;
}

.app-popup-mode.page-maintenance-close-form .app-popup-form-footer {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    margin-top: 14px !important;
}

@media (max-width: 640px) {
    .app-popup-mode.page-maintenance-close-form .app-popup-form-content {
        grid-template-columns: 1fr !important;
    }
}

/* Nueva/editar furgoneta: el popup debe mantener el footer visible y permitir scroll interno. */
.app-popup-modal.app-van-form-popup .modal-dialog {
    margin: 4vh auto !important;
}

.app-popup-modal.app-van-form-popup .modal-content {
    height: min(88vh, 840px) !important;
    max-height: min(88vh, 840px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.app-popup-modal.app-van-form-popup .modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.app-popup-modal.app-van-form-popup .app-popup-frame {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    display: block !important;
    border: 0 !important;
}

.app-popup-mode.page-van-form,
.app-popup-mode.page-van-form body {
    height: 100% !important;
    overflow: hidden !important;
}

.app-popup-mode.page-van-form .app-wrapper,
.app-popup-mode.page-van-form .content-page,
.app-popup-mode.page-van-form .content,
.app-popup-mode.page-van-form .app-container {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.app-popup-mode.page-van-form .van-wizard-form {
    height: 100vh !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
}

.app-popup-mode.page-van-form .van-wizard-layout {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.app-popup-mode.page-van-form .van-wizard-steps {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.app-popup-mode.page-van-form .van-wizard-main {
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-gutter: stable !important;
}

.app-popup-mode.page-van-form .van-wizard-footer {
    position: relative !important;
    z-index: 4 !important;
    flex: 0 0 auto !important;
    margin-top: 0 !important;
    background: #ffffff !important;
}

@media (max-width: 991px) {
    .app-popup-modal.app-van-form-popup .modal-dialog {
        width: calc(100vw - 28px) !important;
        max-width: calc(100vw - 28px) !important;
        margin: 14px auto !important;
    }

    .app-popup-modal.app-van-form-popup .modal-content {
        height: calc(100vh - 28px) !important;
        max-height: calc(100vh - 28px) !important;
    }

    .app-popup-modal.app-van-form-popup .modal-header {
        min-height: 78px !important;
        padding: 18px 22px 14px !important;
    }

    .app-popup-mode.page-van-form .van-wizard-main {
        padding: 28px 28px 24px !important;
    }

    .app-popup-mode.page-van-form .van-wizard-grid,
    .app-popup-mode.page-van-form .van-wizard-follow-grid {
        grid-template-columns: 1fr !important;
    }

    .app-popup-mode.page-van-form .van-wizard-doc-grid {
        grid-template-columns: 1fr !important;
    }

    .app-popup-mode.page-van-form .van-wizard-footer {
        min-height: auto !important;
        align-items: flex-start !important;
        flex-direction: column !important;
        padding: 14px 22px !important;
    }

    .app-popup-mode.page-van-form .van-wizard-footer > div {
        width: 100% !important;
        justify-content: flex-end !important;
    }
}

@media (max-width: 767.98px) {
    .app-popup-mode.page-van-form .van-wizard-layout {
        grid-template-columns: 1fr !important;
    }

    .app-popup-mode.page-van-form .van-wizard-steps {
        display: flex !important;
        min-height: 0 !important;
        height: auto !important;
        gap: 10px;
        overflow-x: auto !important;
        padding: 20px !important;
        border-right: 0 !important;
        border-bottom: 1px solid #e5e7eb !important;
    }

    .app-popup-mode.page-van-form .van-wizard-step {
        min-width: 180px;
        min-height: 52px;
    }

    .app-popup-mode.page-van-form .van-wizard-step::after {
        display: none;
    }

    .app-popup-mode.page-van-form .van-wizard-main {
        padding: 28px 22px !important;
    }
}

.drivers-status-pill,
.warnings-status-pill,
.warnings-severity-pill,
.warnings-source-pill,
.absence-type-pill,
.absence-status-pill,
.evaluation-rating-pill,
.evaluation-status-pill,
.dnr-status-pill,
.accident-status-pill,
.accident-severity-pill,
.fine-status-pill,
.phone-status-pill,
.pave-status-pill,
.maintenance-status-pill,
.driver-tab-pill,
.driver-tab-status,
.van-period-status {
    min-height: 24px !important;
    height: auto !important;
    padding: 3px 10px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 16px !important;
}

/* Uniform popup controls */
.app-popup-mode .app-popup-form-footer,
.driver-wizard-footer,
.van-wizard-footer {
    gap: 8px !important;
}

.app-popup-mode .app-popup-cancel,
.app-popup-mode .driver-wizard-cancel,
.app-popup-mode .driver-wizard-back,
.app-popup-mode .van-wizard-footer .app-popup-cancel {
    min-width: 0 !important;
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 0 14px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: var(--cm-radius) !important;
    background: #ffffff !important;
    color: var(--cm-text) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    text-transform: none !important;
    box-shadow: none !important;
}

.app-popup-mode .app-popup-submit,
.app-popup-mode .driver-wizard-next,
.app-popup-mode .driver-wizard-submit,
.app-popup-mode .van-wizard-footer .app-popup-submit {
    min-width: 0 !important;
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 0 14px !important;
    border: 1px solid var(--cm-primary) !important;
    border-radius: var(--cm-radius) !important;
    background: var(--cm-primary) !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    text-transform: none !important;
    box-shadow: none !important;
}

.app-popup-mode .app-popup-submit:disabled,
.app-popup-mode .app-popup-submit.is-disabled,
.app-popup-mode .driver-wizard-next:disabled,
.app-popup-mode .driver-wizard-next.is-disabled,
.app-popup-mode .driver-wizard-submit:disabled,
.app-popup-mode .driver-wizard-submit.is-disabled {
    opacity: 0.58 !important;
}

/* Canonical popup form layout: match page-absence-form */
.app-popup-modal:is(
    .app-task-popup,
    .app-warning-form-popup,
    .app-fuel-form-popup,
    .app-pave-form-popup,
    .app-absence-form-popup,
    .app-fine-form-popup,
    .app-insurance-claim-form-popup,
    .app-incidence-form-popup,
    .app-inspection360-form-popup,
    .app-maintenance-close-form-popup,
    .app-maintenance-form-popup,
    .app-accident-form-popup,
    .app-phone-form-popup,
    .app-phone-damage-form-popup,
    .app-user-form-popup,
    .app-quick-link-form-popup,
    .app-scorecard-form-popup,
    .app-support-form-popup
) .modal-dialog {
    width: min(92vw, 720px) !important;
    max-width: min(92vw, 720px) !important;
    margin: 8vh auto !important;
}

.app-popup-modal:is(
    .app-task-popup,
    .app-warning-form-popup,
    .app-fuel-form-popup,
    .app-pave-form-popup,
    .app-absence-form-popup,
    .app-fine-form-popup,
    .app-insurance-claim-form-popup,
    .app-incidence-form-popup,
    .app-inspection360-form-popup,
    .app-maintenance-close-form-popup,
    .app-maintenance-form-popup,
    .app-accident-form-popup,
    .app-phone-form-popup,
    .app-phone-damage-form-popup,
    .app-user-form-popup,
    .app-quick-link-form-popup,
    .app-scorecard-form-popup,
    .app-support-form-popup
) .modal-content {
    max-height: min(76vh, 640px) !important;
    border-radius: 10.4px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10) !important;
}

.app-popup-modal:is(
    .app-task-popup,
    .app-warning-form-popup,
    .app-fuel-form-popup,
    .app-pave-form-popup,
    .app-absence-form-popup,
    .app-fine-form-popup,
    .app-insurance-claim-form-popup,
    .app-incidence-form-popup,
    .app-inspection360-form-popup,
    .app-maintenance-close-form-popup,
    .app-maintenance-form-popup,
    .app-accident-form-popup,
    .app-phone-form-popup,
    .app-phone-damage-form-popup,
    .app-user-form-popup,
    .app-quick-link-form-popup,
    .app-scorecard-form-popup,
    .app-support-form-popup
) .modal-header {
    min-height: 56px !important;
    padding: 0 20px !important;
    border-bottom: 1px solid var(--cm-border) !important;
    background: #ffffff !important;
}

.app-popup-modal:is(
    .app-task-popup,
    .app-warning-form-popup,
    .app-fuel-form-popup,
    .app-pave-form-popup,
    .app-absence-form-popup,
    .app-fine-form-popup,
    .app-insurance-claim-form-popup,
    .app-incidence-form-popup,
    .app-inspection360-form-popup,
    .app-maintenance-close-form-popup,
    .app-maintenance-form-popup,
    .app-accident-form-popup,
    .app-phone-form-popup,
    .app-phone-damage-form-popup,
    .app-user-form-popup,
    .app-quick-link-form-popup,
    .app-scorecard-form-popup,
    .app-support-form-popup
) .modal-title {
    color: var(--cm-text) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 28px !important;
}

.app-popup-mode:is(
    .page-task-form,
    .page-warning-form,
    .page-fuel-form,
    .page-pave-form,
    .page-absence-form,
    .page-fine-form,
    .page-insurance-claim-form,
    .page-incidence-form,
    .page-inspection360-form,
    .page-maintenance-close-form,
    .page-maintenance-form,
    .page-accident-form,
    .page-phone-form,
    .page-phone-damage-form,
    .page-user-form,
    .page-quick-link-form,
    .page-scorecard-form,
    .page-support-form,
    .page-documentation-form,
    .page-documentation-upload
) {
    background: #f8fafc !important;
}

.app-popup-mode:is(
    .page-task-form,
    .page-warning-form,
    .page-fuel-form,
    .page-pave-form,
    .page-absence-form,
    .page-fine-form,
    .page-insurance-claim-form,
    .page-incidence-form,
    .page-inspection360-form,
    .page-maintenance-close-form,
    .page-maintenance-form,
    .page-accident-form,
    .page-phone-form,
    .page-phone-damage-form,
    .page-user-form,
    .page-quick-link-form,
    .page-scorecard-form,
    .page-support-form,
    .page-documentation-form,
    .page-documentation-upload
) .app-container {
    padding: 16px !important;
}

.app-popup-mode:is(
    .page-task-form,
    .page-warning-form,
    .page-fuel-form,
    .page-pave-form,
    .page-absence-form,
    .page-fine-form,
    .page-insurance-claim-form,
    .page-incidence-form,
    .page-inspection360-form,
    .page-maintenance-close-form,
    .page-maintenance-form,
    .page-accident-form,
    .page-phone-form,
    .page-phone-damage-form,
    .page-user-form,
    .page-quick-link-form,
    .page-scorecard-form,
    .page-support-form,
    .page-documentation-form,
    .page-documentation-upload
) .app-form-card,
.app-popup-mode:is(
    .page-task-form,
    .page-warning-form,
    .page-fuel-form,
    .page-pave-form,
    .page-absence-form,
    .page-fine-form,
    .page-insurance-claim-form,
    .page-incidence-form,
    .page-inspection360-form,
    .page-maintenance-close-form,
    .page-maintenance-form,
    .page-accident-form,
    .page-phone-form,
    .page-phone-damage-form,
    .page-user-form,
    .page-quick-link-form,
    .page-scorecard-form,
    .page-support-form,
    .page-documentation-form,
    .page-documentation-upload
) .app-form-card-body {
    max-width: 680px !important;
    margin: 0 auto !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.app-popup-mode:is(
    .page-task-form,
    .page-warning-form,
    .page-fuel-form,
    .page-pave-form,
    .page-absence-form,
    .page-fine-form,
    .page-insurance-claim-form,
    .page-incidence-form,
    .page-inspection360-form,
    .page-maintenance-close-form,
    .page-maintenance-form,
    .page-accident-form,
    .page-phone-form,
    .page-phone-damage-form,
    .page-user-form,
    .page-quick-link-form,
    .page-scorecard-form,
    .page-support-form,
    .page-documentation-form,
    .page-documentation-upload
) .app-popup-form {
    max-width: 680px !important;
    gap: 12px !important;
    margin: 0 auto !important;
}

.app-popup-mode:is(
    .page-task-form,
    .page-warning-form,
    .page-fuel-form,
    .page-pave-form,
    .page-absence-form,
    .page-fine-form,
    .page-insurance-claim-form,
    .page-incidence-form,
    .page-inspection360-form,
    .page-maintenance-close-form,
    .page-maintenance-form,
    .page-accident-form,
    .page-phone-form,
    .page-phone-damage-form,
    .page-user-form,
    .page-quick-link-form,
    .page-scorecard-form,
    .page-support-form,
    .page-documentation-form,
    .page-documentation-upload
) .app-popup-form-content {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px 14px !important;
    padding: 16px !important;
    border: 1px solid var(--cm-border-soft) !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: var(--cm-shadow-sm) !important;
}

.app-popup-mode:is(
    .page-task-form,
    .page-warning-form,
    .page-fuel-form,
    .page-pave-form,
    .page-absence-form,
    .page-fine-form,
    .page-insurance-claim-form,
    .page-incidence-form,
    .page-inspection360-form,
    .page-maintenance-close-form,
    .page-maintenance-form,
    .page-accident-form,
    .page-phone-form,
    .page-phone-damage-form,
    .page-user-form,
    .page-quick-link-form,
    .page-scorecard-form,
    .page-support-form,
    .page-documentation-form,
    .page-documentation-upload
) .app-popup-form-content > .mb-3 {
    width: 100% !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

.app-popup-mode .app-popup-form-content > .mb-3:has(textarea),
.app-popup-mode .app-popup-form-content > .mb-3:has(input[type="file"]),
.app-popup-mode .app-popup-form-content > .mb-3:has(.select2-selection--multiple),
.app-popup-mode .app-popup-form-content > .task-form-description-field,
.app-popup-mode .app-popup-form-content > .task-form-users-field,
.app-popup-mode .app-popup-form-content > .task-form-roles-field,
.app-popup-mode .app-popup-form-content > .task-form-attachment-field,
.app-popup-mode .app-popup-form-content > .warning-form-notes-field,
.app-popup-mode .app-popup-form-content > .warning-form-file-field,
.app-popup-mode .app-popup-form-content > .fuel-form-comment-field,
.app-popup-mode .app-popup-form-content > .fuel-form-file-field,
.app-popup-mode .app-popup-form-content > .absence-form-reason-field,
.app-popup-mode .app-popup-form-content > .absence-form-file-field,
.app-popup-mode .app-popup-form-content > .absence-form-status-field,
.app-popup-mode .app-popup-form-content > .phone-damage-comment-field,
.app-popup-mode .app-popup-form-content > .phone-damage-file-field,
.app-popup-mode .app-popup-form-content > .scorecard-driver-field,
.app-popup-mode .app-popup-form-content > .scorecard-import-help {
    grid-column: 1 / -1 !important;
}

.app-popup-mode .app-popup-form-content > .col-12:has(textarea),
.app-popup-mode .app-popup-form-content > .col-12:has(input[type="file"]),
.app-popup-mode .app-popup-form-content > .task-form-description-field,
.app-popup-mode .app-popup-form-content > .task-form-attachment-field,
.app-popup-mode .app-popup-form-content > .warning-form-notes-field,
.app-popup-mode .app-popup-form-content > .warning-form-file-field,
.app-popup-mode .app-popup-form-content > .fuel-form-comment-field,
.app-popup-mode .app-popup-form-content > .fuel-form-file-field,
.app-popup-mode .app-popup-form-content > .absence-form-reason-field,
.app-popup-mode .app-popup-form-content > .absence-form-file-field,
.app-popup-mode .app-popup-form-content > .phone-damage-comment-field,
.app-popup-mode .app-popup-form-content > .phone-damage-file-field,
.app-popup-mode .app-popup-form-content > .contract-form-notes-field,
.app-popup-mode .app-popup-form-content > .contract-form-file-field,
.app-popup-mode .app-popup-form-content > .van-period-notes-field,
.app-popup-mode .app-popup-form-content > .van-period-file-field {
    padding-inline-start: 0 !important;
    padding-inline-end: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.app-popup-mode .app-popup-form-content > .col-12:has(textarea) > .form-label,
.app-popup-mode .app-popup-form-content > .col-12:has(input[type="file"]) > .form-label,
.app-popup-mode .app-popup-form-content > .col-12:has(input[type="file"]) > .form-text,
.app-popup-mode .app-popup-form-content > .task-form-description-field > .form-label,
.app-popup-mode .app-popup-form-content > .task-form-attachment-field > .form-label,
.app-popup-mode .app-popup-form-content > .task-form-attachment-field > .form-text,
.app-popup-mode .app-popup-form-content > .warning-form-notes-field > .form-label,
.app-popup-mode .app-popup-form-content > .warning-form-file-field > .form-label,
.app-popup-mode .app-popup-form-content > .warning-form-file-field > .form-text,
.app-popup-mode .app-popup-form-content > .fuel-form-comment-field > .form-label,
.app-popup-mode .app-popup-form-content > .fuel-form-file-field > .form-label,
.app-popup-mode .app-popup-form-content > .fuel-form-file-field > .form-text,
.app-popup-mode .app-popup-form-content > .absence-form-reason-field > .form-label,
.app-popup-mode .app-popup-form-content > .absence-form-file-field > .form-label,
.app-popup-mode .app-popup-form-content > .absence-form-file-field > .form-text,
.app-popup-mode .app-popup-form-content > .phone-damage-comment-field > .form-label,
.app-popup-mode .app-popup-form-content > .phone-damage-file-field > .form-label,
.app-popup-mode .app-popup-form-content > .phone-damage-file-field > .form-text,
.app-popup-mode .app-popup-form-content > .contract-form-notes-field > .form-label,
.app-popup-mode .app-popup-form-content > .contract-form-file-field > .form-label,
.app-popup-mode .app-popup-form-content > .contract-form-file-field > .form-text,
.app-popup-mode .app-popup-form-content > .van-period-notes-field > .form-label,
.app-popup-mode .app-popup-form-content > .van-period-file-field > .form-label,
.app-popup-mode .app-popup-form-content > .van-period-file-field > .form-text {
    margin-left: -14px !important;
}

.app-popup-mode .app-popup-form-content > .col-12:has(textarea) > .form-control,
.app-popup-mode .app-popup-form-content > .col-12:has(input[type="file"]) > .form-control,
.app-popup-mode .app-popup-form-content > .task-form-description-field > .form-control,
.app-popup-mode .app-popup-form-content > .task-form-attachment-field > .form-control,
.app-popup-mode .app-popup-form-content > .warning-form-notes-field > .form-control,
.app-popup-mode .app-popup-form-content > .warning-form-file-field > .form-control,
.app-popup-mode .app-popup-form-content > .fuel-form-comment-field > .form-control,
.app-popup-mode .app-popup-form-content > .fuel-form-file-field > .form-control,
.app-popup-mode .app-popup-form-content > .absence-form-reason-field > .form-control,
.app-popup-mode .app-popup-form-content > .absence-form-file-field > .form-control,
.app-popup-mode .app-popup-form-content > .phone-damage-comment-field > .form-control,
.app-popup-mode .app-popup-form-content > .phone-damage-file-field > .form-control,
.app-popup-mode .app-popup-form-content > .contract-form-notes-field > .form-control,
.app-popup-mode .app-popup-form-content > .contract-form-file-field > .form-control,
.app-popup-mode .app-popup-form-content > .van-period-notes-field > .form-control,
.app-popup-mode .app-popup-form-content > .van-period-file-field > .form-control {
    width: calc(100% + 28px) !important;
    max-width: none !important;
    margin-left: -14px !important;
}

.app-popup-mode:is(
    .page-task-form,
    .page-warning-form,
    .page-fuel-form,
    .page-pave-form,
    .page-absence-form,
    .page-fine-form,
    .page-insurance-claim-form,
    .page-incidence-form,
    .page-inspection360-form,
    .page-maintenance-close-form,
    .page-maintenance-form,
    .page-accident-form,
    .page-phone-form,
    .page-phone-damage-form,
    .page-user-form,
    .page-quick-link-form,
    .page-scorecard-form,
    .page-support-form,
    .page-documentation-form,
    .page-documentation-upload
) .form-label {
    margin-bottom: 5px !important;
    color: #3f3f46 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 18px !important;
}

.app-popup-mode:is(
    .page-task-form,
    .page-warning-form,
    .page-fuel-form,
    .page-pave-form,
    .page-absence-form,
    .page-fine-form,
    .page-insurance-claim-form,
    .page-incidence-form,
    .page-inspection360-form,
    .page-maintenance-close-form,
    .page-maintenance-form,
    .page-accident-form,
    .page-phone-form,
    .page-phone-damage-form,
    .page-user-form,
    .page-quick-link-form,
    .page-scorecard-form,
    .page-support-form,
    .page-documentation-form,
    .page-documentation-upload
) .form-control,
.app-popup-mode:is(
    .page-task-form,
    .page-warning-form,
    .page-fuel-form,
    .page-pave-form,
    .page-absence-form,
    .page-fine-form,
    .page-insurance-claim-form,
    .page-incidence-form,
    .page-inspection360-form,
    .page-maintenance-close-form,
    .page-maintenance-form,
    .page-accident-form,
    .page-phone-form,
    .page-phone-damage-form,
    .page-user-form,
    .page-quick-link-form,
    .page-scorecard-form,
    .page-support-form,
    .page-documentation-form,
    .page-documentation-upload
) .form-select,
.app-popup-mode:is(
    .page-task-form,
    .page-warning-form,
    .page-fuel-form,
    .page-pave-form,
    .page-absence-form,
    .page-fine-form,
    .page-insurance-claim-form,
    .page-incidence-form,
    .page-inspection360-form,
    .page-maintenance-close-form,
    .page-maintenance-form,
    .page-accident-form,
    .page-phone-form,
    .page-phone-damage-form,
    .page-user-form,
    .page-quick-link-form,
    .page-scorecard-form,
    .page-support-form,
    .page-documentation-form,
    .page-documentation-upload
) .select2-container--default .select2-selection--single {
    min-height: 36px !important;
    height: 36px !important;
    border-radius: var(--cm-radius) !important;
    border-color: #d8dee7 !important;
    background-color: #ffffff !important;
    color: var(--cm-text) !important;
    font-size: 14px !important;
    line-height: 20px !important;
    box-shadow: none !important;
}

.app-popup-mode .select2-container {
    width: 100% !important;
}

.app-popup-mode .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 34px !important;
}

.app-popup-mode .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 34px !important;
}

.app-popup-mode .select2-container--default .select2-selection--multiple {
    min-height: 36px !important;
    height: auto !important;
    border-radius: var(--cm-radius) !important;
    border-color: #d8dee7 !important;
    background-color: #ffffff !important;
    box-shadow: none !important;
}

.app-popup-mode textarea.form-control {
    min-height: 96px !important;
    height: auto !important;
    resize: vertical;
}

.app-popup-mode input[type="file"].form-control {
    min-height: 36px !important;
    height: 36px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

.app-popup-mode:is(
    .page-task-form,
    .page-warning-form,
    .page-fuel-form,
    .page-pave-form,
    .page-absence-form,
    .page-fine-form,
    .page-insurance-claim-form,
    .page-incidence-form,
    .page-inspection360-form,
    .page-maintenance-close-form,
    .page-maintenance-form,
    .page-accident-form,
    .page-phone-form,
    .page-phone-damage-form,
    .page-user-form,
    .page-quick-link-form,
    .page-scorecard-form,
    .page-support-form,
    .page-documentation-form,
    .page-documentation-upload
) .app-popup-form-footer {
    position: static !important;
    width: 100% !important;
    max-width: 680px !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    margin: 0 auto !important;
    padding: 12px 0 0 !important;
    border-top: 0 !important;
    background: transparent !important;
}

@media (max-width: 767.98px) {
    .app-popup-modal:is(
        .app-task-popup,
        .app-warning-form-popup,
        .app-fuel-form-popup,
        .app-pave-form-popup,
        .app-absence-form-popup,
        .app-fine-form-popup,
        .app-insurance-claim-form-popup,
        .app-incidence-form-popup,
        .app-inspection360-form-popup,
        .app-maintenance-close-form-popup,
        .app-maintenance-form-popup,
        .app-accident-form-popup,
        .app-phone-form-popup,
        .app-phone-damage-form-popup,
        .app-user-form-popup,
        .app-quick-link-form-popup,
        .app-scorecard-form-popup,
        .app-support-form-popup
    ) .modal-dialog {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        margin: 12px auto !important;
    }

    .app-popup-mode .app-popup-form-content {
        padding: 14px !important;
    }
}

@media (max-width: 575.98px) {
    .app-popup-mode .app-popup-form-content {
        grid-template-columns: 1fr !important;
    }
}

/* Scorecards popup final overrides */
.app-popup-modal.app-scorecard-form-popup .modal-dialog {
    width: min(94vw, 1040px) !important;
    max-width: min(94vw, 1040px) !important;
    margin: 4vh auto !important;
}

.app-popup-modal.app-scorecard-form-popup .modal-content {
    max-height: min(88vh, 840px) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 18px 55px rgba(15, 23, 42, .18) !important;
}

.app-popup-modal.app-scorecard-form-popup .modal-header {
    min-height: 64px !important;
    padding: 0 28px !important;
}

.app-popup-mode.page-scorecard-form .app-form-card,
.app-popup-mode.page-scorecard-form .app-form-card-body,
.app-popup-mode.page-scorecard-form .app-popup-form,
.app-popup-mode.page-scorecard-form .app-popup-form-footer {
    max-width: 980px !important;
}

.app-popup-mode.page-scorecard-form .scorecard-agent-field,
.app-popup-mode.page-scorecard-form .scorecard-form-section-heading {
    grid-column: 1 / -1 !important;
}

@media (max-width: 767.98px) {
    .app-popup-modal.app-scorecard-form-popup .modal-dialog {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        margin: 12px auto !important;
    }

    .app-popup-mode.page-scorecard-form .app-form-card,
    .app-popup-mode.page-scorecard-form .app-form-card-body,
    .app-popup-mode.page-scorecard-form .app-popup-form,
    .app-popup-mode.page-scorecard-form .app-popup-form-footer {
        max-width: 100% !important;
    }
}

/* Zones redesign final overrides */
.page-zones-redesign .zones-metrics-grid {
    max-width: none !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}

.page-zones-redesign .zones-filter-bar {
    grid-template-columns: minmax(260px, 1.4fr) repeat(2, minmax(180px, 1fr)) !important;
}

.page-zones-redesign .zones-metric-card {
    min-height: 96px !important;
}

.page-zones-redesign .zones-metric-neutral {
    --metric-color: #111827 !important;
}

.page-zones-redesign .zones-metric-blue {
    --metric-color: #2563eb !important;
}

.page-zones-redesign .zones-metric-green {
    --metric-color: #10b981 !important;
}

.page-zones-redesign .zones-metric-amber {
    --metric-color: #f59e0b !important;
}

.page-zones-redesign .zones-metric-purple {
    --metric-color: #7c3aed !important;
}

.page-zones-redesign .zones-metric-red {
    --metric-color: #ef4444 !important;
}

@media (max-width: 1399.98px) {
    .page-zones-redesign .zones-metrics-grid,
    .page-zones-redesign .zones-filter-bar {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 767.98px) {
    .page-zones-redesign .zones-metrics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .page-zones-redesign .zones-filter-bar {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 575.98px) {
    .page-zones-redesign .zones-metrics-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Zone create/edit popup */
.app-popup-modal.app-zone-form-popup .modal-dialog {
    width: min(92vw, 720px) !important;
    max-width: min(92vw, 720px) !important;
    margin: 8vh auto !important;
}

.app-popup-modal.app-zone-form-popup .modal-content {
    max-height: min(76vh, 640px) !important;
    border-radius: 10.4px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10) !important;
}

.app-popup-modal.app-zone-form-popup .modal-header {
    min-height: 56px !important;
    padding: 0 20px !important;
    border-bottom: 1px solid var(--cm-border) !important;
    background: #ffffff !important;
}

.app-popup-modal.app-zone-form-popup .modal-title {
    color: var(--cm-text) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 28px !important;
}

.app-popup-mode.page-zone-form {
    background: #f8fafc !important;
}

.app-popup-mode.page-zone-form .app-container {
    padding: 16px !important;
}

.app-popup-mode.page-zone-form .app-form-card,
.app-popup-mode.page-zone-form .app-form-card-body {
    max-width: 680px !important;
    margin: 0 auto !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.app-popup-mode.page-zone-form .app-popup-form {
    max-width: 680px !important;
    gap: 12px !important;
    margin: 0 auto !important;
}

.app-popup-mode.page-zone-form .app-popup-form-content {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px 14px !important;
    padding: 16px !important;
    border: 1px solid var(--cm-border-soft) !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: var(--cm-shadow-sm) !important;
}

.app-popup-mode.page-zone-form .app-popup-form-content > .mb-3 {
    width: 100% !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

.app-popup-mode.page-zone-assignment-form .zone-assignment-summary,
.app-popup-mode.page-zone-assignment-form .zone-assignment-drivers-field {
    grid-column: 1 / -1;
}

.app-popup-mode.page-zone-assignment-form .zone-assignment-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid #d8dee7;
    border-radius: 10px;
    background: #f8fafc;
}

.app-popup-mode.page-zone-assignment-form .zone-assignment-summary strong,
.app-popup-mode.page-zone-assignment-form .zone-assignment-summary small {
    display: block;
}

.app-popup-mode.page-zone-assignment-form .zone-assignment-summary strong {
    color: #111827;
    font-size: 14px;
    line-height: 20px;
}

.app-popup-mode.page-zone-assignment-form .zone-assignment-summary small {
    color: #64748b;
    font-size: 12px;
    line-height: 18px;
}

.app-popup-mode.page-zone-form .form-label {
    margin-bottom: 5px !important;
    color: #3f3f46 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 18px !important;
}

.app-popup-mode.page-zone-form .form-control,
.app-popup-mode.page-zone-form .form-select,
.app-popup-mode.page-zone-form .select2-container--default .select2-selection--single {
    min-height: 36px !important;
    height: 36px !important;
    border-radius: var(--cm-radius) !important;
    border-color: #d8dee7 !important;
    background-color: #ffffff !important;
    color: var(--cm-text) !important;
    font-size: 14px !important;
    line-height: 20px !important;
    box-shadow: none !important;
}

.app-popup-mode.page-zone-form .select2-container {
    width: 100% !important;
}

.app-popup-mode.page-zone-form .app-popup-form-footer {
    position: static !important;
    width: 100% !important;
    max-width: 680px !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    margin: 0 auto !important;
    padding: 12px 0 0 !important;
    border-top: 0 !important;
    background: transparent !important;
}

@media (max-width: 767.98px) {
    .app-popup-modal.app-zone-form-popup .modal-dialog {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        margin: 12px auto !important;
    }

    .app-popup-mode.page-zone-form .app-popup-form-content {
        grid-template-columns: 1fr !important;
        padding: 14px !important;
    }
}

/* Driver support popup final overrides */
.app-popup-modal.app-support-form-popup .modal-dialog {
    width: min(94vw, 980px) !important;
    max-width: min(94vw, 980px) !important;
    margin: 5vh auto !important;
}

.app-popup-modal.app-support-form-popup .modal-content {
    max-height: min(86vh, 780px) !important;
    border-radius: 10.4px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10) !important;
}

.app-popup-modal.app-support-form-popup .modal-body {
    min-height: 0 !important;
    overflow: hidden !important;
}

.app-popup-modal.app-support-form-popup .app-popup-frame {
    max-height: calc(86vh - 57px) !important;
}

.app-popup-mode.page-support-form,
.app-popup-mode.page-support-form body {
    overflow-y: auto !important;
}

.app-popup-mode.page-support-form .app-container {
    padding: 16px !important;
}

.app-popup-mode.page-support-form .app-form-card,
.app-popup-mode.page-support-form .app-form-card-body,
.app-popup-mode.page-support-form .app-popup-form,
.app-popup-mode.page-support-form .app-popup-form-footer {
    max-width: 940px !important;
}

.app-popup-mode.page-support-form .app-popup-form-content {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.app-popup-mode.page-support-form .support-form-toolbar {
    margin-bottom: 12px !important;
    padding: 12px 14px !important;
    border-radius: 10px !important;
}

.app-popup-mode.page-support-form .support-add-row {
    min-height: 36px !important;
    padding: 0 12px !important;
    border-radius: var(--cm-radius) !important;
}

.app-popup-mode.page-support-form .support-rows {
    gap: 10px !important;
}

.app-popup-mode.page-support-form .support-row,
.app-popup-mode.page-support-form .support-form-single {
    border-radius: 10px !important;
}

.app-popup-mode.page-support-form .support-row-head {
    min-height: 40px !important;
    padding: 8px 12px !important;
}

.app-popup-mode.page-support-form .support-form-grid {
    grid-template-columns: minmax(170px, 1.1fr) minmax(104px, .56fr) minmax(170px, 1.1fr) minmax(148px, .9fr) minmax(126px, .68fr) minmax(104px, .56fr) !important;
    gap: 10px 12px !important;
    padding: 12px !important;
}

.app-popup-mode.page-support-form .support-form-single .support-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    padding: 16px !important;
}

.app-popup-mode.page-support-form .support-field .form-label {
    margin-bottom: 5px !important;
    font-size: 13px !important;
    line-height: 18px !important;
}

.app-popup-mode.page-support-form .support-field .form-control,
.app-popup-mode.page-support-form .support-field .form-select,
.app-popup-mode.page-support-form .support-field .select2-container--default .select2-selection--single {
    min-height: 36px !important;
    height: 36px !important;
    font-size: 14px !important;
    line-height: 20px !important;
}

.app-popup-mode.page-support-form .support-field .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 34px !important;
}

.app-popup-mode.page-support-form .support-field .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 34px !important;
}

.app-popup-mode.page-support-form .app-popup-form-footer {
    position: static !important;
    width: 100% !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    margin: 0 auto !important;
    padding: 12px 0 0 !important;
    border-top: 0 !important;
    background: transparent !important;
}

@media (max-width: 991.98px) {
    .app-popup-mode.page-support-form .support-form-grid,
    .app-popup-mode.page-support-form .support-form-single .support-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 767.98px) {
    .app-popup-modal.app-support-form-popup .modal-dialog {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        margin: 12px auto !important;
    }

    .app-popup-mode.page-support-form .app-container {
        padding: 14px !important;
    }

    .app-popup-mode.page-support-form .support-form-toolbar {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .app-popup-mode.page-support-form .support-form-grid,
    .app-popup-mode.page-support-form .support-form-single .support-form-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Vans page and popup final overrides */
.page-vans-redesign .vans-metrics-grid {
    width: 100% !important;
    max-width: none !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

.app-popup-modal.app-van-form-popup .modal-dialog {
    width: min(92vw, 860px) !important;
    max-width: min(92vw, 860px) !important;
    margin: 6vh auto !important;
}

.app-popup-modal.app-van-form-popup .modal-content {
    height: auto !important;
    max-height: min(82vh, 760px) !important;
    border-radius: 10.4px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10) !important;
}

.app-popup-modal.app-van-form-popup .modal-header {
    min-height: 56px !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 0 20px !important;
    border-bottom: 1px solid var(--cm-border) !important;
    background: #ffffff !important;
}

.app-popup-modal.app-van-form-popup .modal-title {
    color: var(--cm-text) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 28px !important;
}

.app-popup-modal.app-van-form-popup #appCrudPopupSubtitle,
.app-popup-modal.app-van-form-popup .app-popup-progress-dots {
    display: none !important;
}

.app-popup-modal.app-van-form-popup .btn-close {
    margin-top: 0 !important;
}

.app-popup-modal.app-van-form-popup .modal-body {
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #f8fafc !important;
}

.app-popup-modal.app-van-form-popup .app-popup-frame {
    height: min(72vh, 660px) !important;
    max-height: calc(82vh - 57px) !important;
}

.app-popup-mode.page-van-form,
.app-popup-mode.page-van-form body {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: #f8fafc !important;
}

.app-popup-mode.page-van-form .app-wrapper,
.app-popup-mode.page-van-form .content-page,
.app-popup-mode.page-van-form .content,
.app-popup-mode.page-van-form .app-container {
    height: auto !important;
    min-height: 100% !important;
    overflow: visible !important;
}

.app-popup-mode.page-van-form .app-container {
    padding: 16px !important;
}

.app-popup-mode.page-van-form .van-wizard-form {
    width: 100% !important;
    max-width: 820px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin: 0 auto !important;
    overflow: visible !important;
    background: transparent !important;
}

.app-popup-mode.page-van-form .van-wizard-layout {
    display: block !important;
    min-height: 0 !important;
    overflow: visible !important;
}

.app-popup-mode.page-van-form .van-wizard-steps {
    display: none !important;
}

.app-popup-mode.page-van-form .van-wizard-main {
    max-height: none !important;
    padding: 16px !important;
    overflow: visible !important;
    border: 1px solid var(--cm-border-soft) !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: var(--cm-shadow-sm) !important;
}

.app-popup-mode.page-van-form .van-wizard-section-header {
    margin-bottom: 14px !important;
}

.app-popup-mode.page-van-form .van-wizard-section-header h2 {
    margin: 0 !important;
    color: var(--cm-text) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 22px !important;
}

.app-popup-mode.page-van-form .van-wizard-section-header p {
    margin: 2px 0 0 !important;
    color: #64748b !important;
    font-size: 13px !important;
    line-height: 18px !important;
}

.app-popup-mode.page-van-form .van-wizard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px 14px !important;
}

.app-popup-mode.page-van-form .van-wizard-follow-section {
    margin-top: 16px !important;
    padding-top: 14px !important;
}

.app-popup-mode.page-van-form .van-wizard-follow-section h3 {
    margin-bottom: 10px !important;
}

.app-popup-mode.page-van-form .van-wizard-follow-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

.app-popup-mode.page-van-form .van-wizard-field label {
    margin-bottom: 5px !important;
    color: #3f3f46 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 18px !important;
    text-transform: none !important;
}

.app-popup-mode.page-van-form .van-wizard-field input,
.app-popup-mode.page-van-form .van-wizard-field textarea,
.app-popup-mode.page-van-form .van-wizard-field select,
.app-popup-mode.page-van-form .van-wizard-field .select2-container--default .select2-selection--multiple {
    min-height: 36px !important;
    height: auto !important;
    padding: 7px 10px !important;
    border: 1px solid #d8dee7 !important;
    border-radius: var(--cm-radius) !important;
    background: #ffffff !important;
    color: var(--cm-text) !important;
    font-size: 14px !important;
    line-height: 20px !important;
    box-shadow: none !important;
}

.app-popup-mode.page-van-form .van-wizard-field select {
    height: 36px !important;
}

.app-popup-mode.page-van-form .van-wizard-field textarea {
    min-height: 72px !important;
}

.app-popup-mode.page-van-form .van-wizard-footer {
    position: static !important;
    z-index: auto !important;
    width: 100% !important;
    min-height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.app-popup-mode.page-van-form .van-wizard-footer > span {
    margin: 0 !important;
    color: #64748b !important;
    font-size: 13px !important;
    line-height: 18px !important;
}

.app-popup-mode.page-van-form .van-wizard-footer > div {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

.app-popup-mode.page-van-form .app-popup-cancel,
.app-popup-mode.page-van-form .app-popup-submit {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 16px !important;
    border-radius: var(--cm-radius) !important;
    font-size: 14px !important;
    line-height: 20px !important;
}

@media (max-width: 1399.98px) {
    .page-vans-redesign .vans-metrics-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 991.98px) {
    .page-vans-redesign .vans-metrics-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 767.98px) {
    .page-vans-redesign .vans-metrics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .app-popup-modal.app-van-form-popup .modal-dialog {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        margin: 12px auto !important;
    }

    .app-popup-modal.app-van-form-popup .app-popup-frame {
        height: calc(100vh - 96px) !important;
        max-height: calc(100vh - 96px) !important;
    }

    .app-popup-mode.page-van-form .app-container {
        padding: 14px !important;
    }

    .app-popup-mode.page-van-form .van-wizard-grid,
    .app-popup-mode.page-van-form .van-wizard-follow-grid {
        grid-template-columns: 1fr !important;
    }

    .app-popup-mode.page-van-form .van-wizard-footer {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .app-popup-mode.page-van-form .van-wizard-footer > div {
        width: 100% !important;
    }
}

@media (max-width: 575.98px) {
    .page-vans-redesign .vans-metrics-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Maintenance index final overrides */
.drivers-metric-purple {
    --metric-color: #7c3aed;
}

.drivers-metric-card.is-active {
    border-color: color-mix(in srgb, var(--metric-color) 38%, #ffffff) !important;
    background: color-mix(in srgb, var(--metric-color) 7%, #ffffff) !important;
}

.page-maintenance-index .maintenance-metrics-grid {
    width: 100% !important;
    max-width: none !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}

.page-maintenance-index .maintenance-metrics-grid .drivers-metric-card {
    min-height: 96px !important;
}

.page-maintenance-index .maintenance-filter-bar {
    grid-template-columns: minmax(260px, 1.3fr) repeat(4, minmax(150px, 1fr)) !important;
}

.page-maintenance-index .maintenance-table-card {
    border-radius: 14px !important;
}

.page-maintenance-index .maintenance-table {
    min-width: 1460px !important;
    table-layout: fixed;
}

.page-maintenance-index .maintenance-col-van {
    width: 170px !important;
}

.page-maintenance-index .maintenance-col-type {
    width: 220px !important;
}

.page-maintenance-index .maintenance-col-dates {
    width: 150px !important;
}

.page-maintenance-index .maintenance-col-status {
    width: 128px !important;
}

.page-maintenance-index .maintenance-col-docs {
    width: 178px !important;
}

.page-maintenance-index .maintenance-col-comments {
    width: 150px !important;
}

.page-maintenance-index .maintenance-col-forecast { width: 156px; }
.page-maintenance-index .maintenance-col-workshop { width: 190px; }

/* Compact workshop detail shared by the full page and the existing popup. */
.maintenance-record { gap: 0; }
.maintenance-record-header,
.maintenance-record-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
.maintenance-record-header { padding: 16px 20px; border-bottom: 1px solid var(--cm-border); }
.app-popup-mode .maintenance-record .app-detail-title h1 { font-size: 18px !important; line-height: 26px !important; overflow-wrap: anywhere; }
.maintenance-record .app-detail-tabs-card { border: 0; border-radius: 0; box-shadow: none; }
.maintenance-record .driver-profile-tab-content { padding: 20px; }
.maintenance-record .driver-profile-tabs { flex-wrap: wrap; }
.maintenance-record-meta { display: grid; gap: 16px; }
.maintenance-record-meta > div { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.maintenance-record-meta > div > i { padding: 4px 6px; border-radius: 8px; background: var(--cm-bg); color: var(--cm-muted); }
.maintenance-record-meta span { display: block; color: var(--cm-muted); font-size: 13px; }
.maintenance-record-meta strong, .maintenance-record-meta a { display: block; font-weight: 600; overflow-wrap: anywhere; }
.maintenance-record-section { border-top: 1px solid var(--cm-border); margin-top: 20px; padding-top: 16px; }
.maintenance-record-section h2, .maintenance-record .warning-document-current h2 { font-size: 14px; line-height: 20px; margin: 0 0 12px; color: var(--cm-muted); font-weight: 600; }
.maintenance-record-section-heading { margin-bottom: 12px; }
.maintenance-record-section-heading h2 { margin: 0; }
.maintenance-record-notes { white-space: pre-wrap; overflow-wrap: anywhere; margin-bottom: 0; }
.maintenance-tracking-form { margin-top: 16px; }
.maintenance-tracking-form label { display: block; margin: 12px 0 6px; }
.app-popup-mode.page-maintenance-detail .maintenance-record { padding: 0; }
@media (max-width: 575.98px) {
    .maintenance-record-header, .maintenance-record .driver-profile-tab-content { padding: 16px; }
    .maintenance-record .driver-profile-tabs { gap: 0; }
    .maintenance-record .driver-profile-tab { padding: 10px; }
}

.page-maintenance-index .maintenance-col-created {
    width: 150px !important;
}

.page-maintenance-index .maintenance-col-actions {
    width: 128px !important;
}

.page-maintenance-index .maintenance-table th,
.page-maintenance-index .maintenance-table td {
    text-align: left !important;
}

.page-maintenance-index .maintenance-table th:last-child,
.page-maintenance-index .maintenance-table td:last-child {
    text-align: right !important;
}

.page-maintenance-index .maintenance-table th:nth-last-child(2),
.page-maintenance-index .maintenance-table td:nth-last-child(2) {
    text-align: left !important;
}

.page-maintenance-index .maintenance-table .app-created-meta {
    min-width: 0;
    max-width: 140px;
}

.page-maintenance-index .maintenance-row-actions {
    width: 100%;
    justify-content: flex-end;
    gap: 8px;
}

.page-maintenance-index .maintenance-table td > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.page-maintenance-index .maintenance-table th:first-child,
.page-maintenance-index .maintenance-table td:first-child {
    padding-left: 16px !important;
}

.page-maintenance-index .maintenance-table tbody tr::before {
    display: none !important;
}

.page-maintenance-index .maintenance-row-actions {
    justify-content: flex-end;
}

.page-maintenance-index .maintenance-status-stack,
.page-maintenance-index .maintenance-doc-cell {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
}

.page-maintenance-index .maintenance-doc-cell .maintenance-evidence {
    max-width: 100%;
}

.page-maintenance-index .maintenance-doc-cell .maintenance-evidence span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 1399.98px) {
    .page-maintenance-index .maintenance-metrics-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .page-maintenance-index .maintenance-filter-bar {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 767.98px) {
    .page-maintenance-index .maintenance-metrics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .page-maintenance-index .maintenance-filter-bar {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 575.98px) {
    .page-maintenance-index .maintenance-metrics-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Accident create/edit popup final overrides */
.app-popup-modal.app-accident-form-popup .modal-dialog {
    width: min(92vw, 720px) !important;
    max-width: min(92vw, 720px) !important;
    margin: 4vh auto !important;
}

.app-popup-modal.app-accident-form-popup .modal-content {
    max-height: min(76vh, 640px) !important;
    border-radius: 10.4px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10) !important;
}

.app-popup-modal.app-accident-form-popup .modal-header {
    min-height: 56px !important;
    padding: 0 20px !important;
    border-bottom: 1px solid var(--cm-border) !important;
    background: #ffffff !important;
}

.app-popup-modal.app-accident-form-popup .modal-title {
    color: var(--cm-text) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 28px !important;
}

.app-popup-mode.page-accident-form .app-container {
    padding: 16px !important;
}

.app-popup-mode.page-accident-form .app-form-card,
.app-popup-mode.page-accident-form .app-form-card-body {
    max-width: 680px !important;
    margin: 0 auto !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.app-popup-mode.page-accident-form .app-popup-form {
    max-width: 680px !important;
    gap: 12px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.app-popup-mode.page-accident-form .app-popup-form-content {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px 14px !important;
    padding: 16px !important;
    border: 1px solid var(--cm-border-soft) !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: var(--cm-shadow-sm) !important;
}

.app-popup-mode.page-accident-form .app-popup-form-content > .mb-3 {
    width: 100% !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

.app-popup-mode.page-accident-form .app-popup-form-content > .mb-3:has(textarea),
.app-popup-mode.page-accident-form .app-popup-form-content > .mb-3:has(input[type="file"]) {
    grid-column: 1 / -1 !important;
}

.app-popup-mode.page-accident-form .form-label {
    margin-bottom: 5px !important;
    color: #3f3f46 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 18px !important;
}

.app-popup-mode.page-accident-form .form-control,
.app-popup-mode.page-accident-form .form-select,
.app-popup-mode.page-accident-form .select2-container--default .select2-selection--single {
    min-height: 36px !important;
    height: 36px !important;
    border-radius: var(--cm-radius) !important;
    border-color: #d8dee7 !important;
    background-color: #ffffff !important;
    color: var(--cm-text) !important;
    font-size: 14px !important;
    line-height: 20px !important;
    box-shadow: none !important;
}

.app-popup-mode.page-accident-form .select2-container {
    width: 100% !important;
}

.app-popup-mode.page-accident-form .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 34px !important;
}

.app-popup-mode.page-accident-form .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 34px !important;
}

.app-popup-mode.page-accident-form textarea.form-control {
    min-height: 96px !important;
    height: auto !important;
}

.app-popup-mode.page-accident-form input[type="file"].form-control {
    min-height: 36px !important;
    height: 36px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

.app-popup-mode.page-accident-form .app-popup-form-footer {
    position: static !important;
    width: 100% !important;
    max-width: 680px !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    margin: 0 auto !important;
    padding: 12px 0 0 !important;
    border-top: 0 !important;
    background: transparent !important;
}

.app-popup-mode.page-accident-form .app-popup-cancel,
.app-popup-mode.page-accident-form .app-popup-submit {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 16px !important;
    border-radius: var(--cm-radius) !important;
    font-size: 14px !important;
    line-height: 20px !important;
}

@media (max-width: 767.98px) {
    .app-popup-modal.app-accident-form-popup .modal-dialog {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        margin: 12px auto !important;
    }

    .app-popup-mode.page-accident-form .app-popup-form-content {
        grid-template-columns: 1fr !important;
        padding: 14px !important;
    }
}

.page-van-accidents-redesign .van-accidents-metrics-grid {
    width: 100% !important;
    max-width: none !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

@media (max-width: 991.98px) {
    .page-van-accidents-redesign .van-accidents-metrics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 575.98px) {
    .page-van-accidents-redesign .van-accidents-metrics-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Inspection 360 wizard final layout */
.app-popup-modal.app-inspection360-form-popup .modal-dialog {
    width: min(94vw, 1000px) !important;
    max-width: min(94vw, 1000px) !important;
    height: min(84vh, 720px) !important;
    max-height: min(84vh, 720px) !important;
    margin: 5vh auto !important;
}

.app-popup-modal.app-inspection360-form-popup .modal-content {
    height: 100% !important;
    max-height: min(84vh, 720px) !important;
}

.app-popup-modal.app-inspection360-form-popup .app-popup-frame {
    height: 100% !important;
    max-height: none !important;
}

.app-popup-mode.page-inspection360-form .app-form-card,
.app-popup-mode.page-inspection360-form .app-form-card-body,
.app-popup-mode.page-inspection360-form .app-popup-form {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

.app-popup-mode.page-inspection360-form .app-popup-form-content {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.app-popup-mode.page-inspection360-form .app-popup-form-content > .inspection360-form {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 204px minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    gap: 12px !important;
}

.app-popup-mode.page-inspection360-form .inspection360-form,
.app-popup-mode.page-inspection360-form .inspection360-form * {
    box-sizing: border-box !important;
    min-width: 0;
}

.app-popup-mode.page-inspection360-form .inspection360-wizard-nav {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 8px !important;
    border: 1px solid var(--cm-border-soft) !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: var(--cm-shadow-sm) !important;
}

.app-popup-mode.page-inspection360-form .inspection360-wizard-step {
    min-height: 40px !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 26px minmax(0, 1fr) !important;
    align-items: center !important;
    justify-content: start !important;
    gap: 9px !important;
    padding: 0 8px !important;
    text-align: left !important;
}

.app-popup-mode.page-inspection360-form .inspection360-step-panel.is-active {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 14px !important;
}

.app-popup-mode.page-inspection360-form .inspection360-step-panel .inspection360-section-header {
    width: auto !important;
    max-width: none !important;
    margin: -14px -14px 14px !important;
    padding: 12px 14px !important;
}

.app-popup-mode.page-inspection360-form .inspection360-general-grid,
.app-popup-mode.page-inspection360-form .inspection360-tire-grid,
.app-popup-mode.page-inspection360-form .inspection360-tire-fields,
.app-popup-mode.page-inspection360-form .inspection360-check-list,
.app-popup-mode.page-inspection360-form .inspection360-check-row,
.app-popup-mode.page-inspection360-form .inspection360-tire-card,
.app-popup-mode.page-inspection360-form .mb-3,
.app-popup-mode.page-inspection360-form .select2-container {
    width: 100% !important;
    max-width: 100% !important;
}

.app-popup-mode.page-inspection360-form .inspection360-check-row {
    grid-template-columns: minmax(120px, .42fr) minmax(160px, .46fr) minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px !important;
}

.app-popup-mode.page-inspection360-form .inspection360-check-name {
    padding: 0 !important;
    line-height: 18px !important;
}

.app-popup-mode.page-inspection360-form .inspection360-check-row textarea.form-control {
    min-height: 62px !important;
    height: 62px !important;
}

.app-popup-mode.page-inspection360-form .inspection360-tire-grid {
    gap: 10px !important;
    align-items: stretch !important;
}

.app-popup-mode.page-inspection360-form .inspection360-tire-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    min-height: 0 !important;
    padding: 12px !important;
    border-color: #dde7f3 !important;
    background: linear-gradient(180deg, #fbfdff 0%, #f8fbff 100%) !important;
}

.app-popup-mode.page-inspection360-form .inspection360-tire-card h4 {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding-bottom: 7px !important;
    border-bottom: 1px solid #e8eef6 !important;
    color: #111827 !important;
    font-size: 14px !important;
    line-height: 18px !important;
}

.app-popup-mode.page-inspection360-form .inspection360-tire-card h4::before {
    width: 8px;
    height: 8px;
    display: inline-flex;
    flex: 0 0 8px;
    border-radius: 999px;
    background: var(--cm-primary);
    content: "";
}

.app-popup-mode.page-inspection360-form .inspection360-tire-card:not(.inspection360-tire-card-wide) .inspection360-tire-fields {
    grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1fr) !important;
    gap: 6px !important;
    align-items: end !important;
}

.app-popup-mode.page-inspection360-form .inspection360-tire-card:not(.inspection360-tire-card-wide) .inspection360-tire-fields > .mb-3:nth-child(3) {
    grid-column: auto !important;
}

.app-popup-mode.page-inspection360-form .inspection360-tire-card-wide .inspection360-tire-fields {
    grid-template-columns: minmax(0, 1fr) 110px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: end !important;
}

.app-popup-mode.page-inspection360-form .inspection360-tire-card .form-label {
    margin-bottom: 3px !important;
    font-size: 11px !important;
    font-weight: 750 !important;
    line-height: 14px !important;
}

.app-popup-mode.page-inspection360-form .inspection360-tire-card .form-control,
.app-popup-mode.page-inspection360-form .inspection360-tire-card .form-select,
.app-popup-mode.page-inspection360-form .inspection360-tire-card .select2-container--default .select2-selection--single {
    min-height: 36px !important;
    height: 36px !important;
    font-size: 13px !important;
    line-height: 18px !important;
}

.app-popup-mode.page-inspection360-form .inspection360-tire-card .select2-container--default .select2-selection--single .select2-selection__rendered {
    overflow: hidden !important;
    padding-left: 10px !important;
    padding-right: 26px !important;
    line-height: 34px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.app-popup-mode.page-inspection360-form .inspection360-tire-card .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 34px !important;
}

.app-popup-mode.page-inspection360-form .inspection360-wizard-actions {
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

.app-popup-mode.page-inspection360-form .inspection360-wizard-cancel {
    margin-right: auto !important;
}

.app-popup-mode.page-inspection360-form .inspection360-wizard-cancel,
.app-popup-mode.page-inspection360-form .inspection360-wizard-prev,
.app-popup-mode.page-inspection360-form .inspection360-wizard-next,
.app-popup-mode.page-inspection360-form .inspection360-wizard-submit {
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 14px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
}

.app-popup-mode.page-inspection360-form .inspection360-wizard-actions [hidden] {
    display: none !important;
}

.app-popup-mode.page-inspection360-form .app-popup-form-footer {
    display: none !important;
}

@media (max-width: 820px) {
    .app-popup-mode.page-inspection360-form .app-popup-form-content > .inspection360-form {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto minmax(0, 1fr) auto !important;
    }

    .app-popup-mode.page-inspection360-form .inspection360-wizard-nav {
        grid-column: 1 !important;
        grid-row: 1 !important;
        flex-direction: row !important;
        overflow-x: auto !important;
    }

    .app-popup-mode.page-inspection360-form .inspection360-wizard-step {
        min-width: 132px !important;
    }

    .app-popup-mode.page-inspection360-form .inspection360-step-panel.is-active {
        grid-column: 1 !important;
        grid-row: 2 !important;
        max-height: none !important;
    }

    .app-popup-mode.page-inspection360-form .inspection360-wizard-actions {
        grid-column: 1 !important;
        grid-row: 3 !important;
    }
}

.app-popup-modal.app-standard-form-popup {
    z-index: 1060;
}

.app-popup-modal.app-standard-form-popup .modal-dialog {
    width: min(94vw, 760px) !important;
    max-width: min(94vw, 760px) !important;
    margin: 4vh auto !important;
    height: auto !important;
    max-height: min(92vh, 720px) !important;
}

.app-popup-modal.app-standard-form-popup .modal-content {
    max-height: min(92vh, 720px) !important;
    border: 1px solid var(--cm-border-soft) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10) !important;
}

.app-popup-modal.app-standard-form-popup .modal-header {
    min-height: 56px !important;
    padding: 0 20px !important;
    border-bottom: 1px solid var(--cm-border) !important;
    background: #ffffff !important;
}

.app-popup-modal.app-standard-form-popup .modal-title {
    color: var(--cm-text) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 28px !important;
}

.app-popup-modal.app-standard-form-popup .modal-body {
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #ffffff !important;
}

.app-popup-modal.app-standard-form-popup .app-popup-frame {
    width: 100% !important;
    height: calc(92vh - 58px) !important;
    max-height: calc(92vh - 58px) !important;
    border: 0 !important;
    display: block !important;
    background: #ffffff !important;
}

.app-popup-mode.page-standard-form-popup {
    background: #f8fafc !important;
}

.app-popup-mode.page-standard-form-popup .app-container,
.app-popup-mode.page-standard-form-popup .content-page,
.app-popup-mode.page-standard-form-popup .content {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
}

.app-popup-mode.page-standard-form-popup .app-container > .row > [class*="col"] {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.app-popup-mode.page-standard-form-popup .app-form-card,
.app-popup-mode.page-standard-form-popup .app-form-card-body,
.app-popup-mode.page-standard-form-popup .app-popup-form,
.app-popup-mode.page-standard-form-popup .app-popup-form-content {
    width: 100% !important;
    max-width: 720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.app-popup-mode.page-standard-form-popup .app-form-card,
.app-popup-mode.page-standard-form-popup .app-form-card-body {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.app-popup-mode.page-standard-form-popup .app-popup-form {
    gap: 12px !important;
    margin: 0 auto !important;
    padding: 16px !important;
    border: 1px solid var(--cm-border-soft) !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: var(--cm-shadow-sm) !important;
}

.app-popup-mode.page-standard-form-popup .app-popup-form-content {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px 14px !important;
    padding: 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.app-popup-mode.page-standard-form-popup .app-popup-form-content > .mb-3,
.app-popup-mode.page-standard-form-popup .app-popup-form-content > .form-group,
.app-popup-mode.page-standard-form-popup .app-popup-form-content > .row {
    width: 100% !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

.app-popup-mode.page-standard-form-popup .app-popup-form-content > .mb-3:has(textarea),
.app-popup-mode.page-standard-form-popup .app-popup-form-content > .mb-3:has(input[type="file"]),
.app-popup-mode.page-standard-form-popup .app-popup-form-content > .form-group:has(textarea),
.app-popup-mode.page-standard-form-popup .app-popup-form-content > .form-group:has(input[type="file"]) {
    grid-column: 1 / -1 !important;
}

.app-popup-mode.page-standard-form-popup .form-label {
    margin-bottom: 5px !important;
    color: #3f3f46 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 18px !important;
}

.app-popup-mode.page-standard-form-popup .form-control,
.app-popup-mode.page-standard-form-popup .form-select,
.app-popup-mode.page-standard-form-popup .select2-container--default .select2-selection--single,
.app-popup-mode.page-standard-form-popup .select2-container--default .select2-selection--multiple {
    min-height: 36px !important;
    height: 36px !important;
    border-radius: var(--cm-radius) !important;
    border-color: #d8dee7 !important;
    background-color: #ffffff !important;
    color: var(--cm-text) !important;
    font-size: 14px !important;
    line-height: 20px !important;
    box-shadow: none !important;
}

.app-popup-mode.page-standard-form-popup textarea.form-control {
    min-height: 92px !important;
    height: auto !important;
    resize: vertical !important;
}

.app-popup-mode.page-standard-form-popup input[type="file"].form-control {
    min-height: auto !important;
    height: auto !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

.app-popup-mode.page-standard-form-popup .select2-container {
    width: 100% !important;
}

.app-popup-mode.page-standard-form-popup .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 34px !important;
}

.app-popup-mode.page-standard-form-popup .app-popup-form-footer {
    width: 100% !important;
    max-width: 720px !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    margin: 0 auto !important;
    padding-top: 12px !important;
    border-top: 1px solid var(--cm-border) !important;
}

.app-popup-mode.page-standard-form-popup .app-popup-cancel,
.app-popup-mode.page-standard-form-popup .app-popup-submit {
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 14px !important;
    border-radius: var(--cm-radius) !important;
    font-size: 14px !important;
    line-height: 20px !important;
}

.app-popup-mode.page-route-form .app-popup-form,
.app-popup-mode.page-route-form .app-popup-form-content,
.app-popup-mode.page-route-form .app-popup-form-footer {
    max-width: 100% !important;
}

.app-popup-mode.page-route-form .app-popup-form-content {
    display: block !important;
    padding: 0 !important;
    gap: 0 !important;
}

.app-popup-mode.page-route-form .app-popup-form-content > .route-register-shell {
    width: 100% !important;
    max-width: 100% !important;
}

.app-popup-modal.app-route-form-popup {
    --app-popup-width: 820px !important;
    --app-popup-max-height: 92vh !important;
    --app-popup-frame-height: calc(92vh - 58px) !important;
}

.app-popup-modal.app-route-form-popup .modal-dialog,
.app-popup-modal.app-standard-form-popup.app-route-form-popup:not(.app-wizard-popup) .modal-dialog {
    width: min(94vw, 820px) !important;
    max-width: min(94vw, 820px) !important;
    margin: max(12px, 4vh) auto !important;
}

.app-popup-mode.page-route-form .app-container,
.app-popup-mode.page-route-summary .app-container {
    --app-popup-form-width: 100%;
    max-width: 100% !important;
}

.app-popup-mode.page-route-form .app-popup-form-footer {
    width: 100% !important;
    max-width: 100% !important;
}

@media (max-width: 767.98px) {
    .app-popup-modal.app-standard-form-popup .modal-dialog {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        margin: 12px auto !important;
    }

    .app-popup-mode.page-standard-form-popup .app-popup-form-content,
    .app-popup-mode.page-standard-form-popup .app-popup-form-content > .mb-3:has(textarea),
    .app-popup-mode.page-standard-form-popup .app-popup-form-content > .mb-3:has(input[type="file"]),
    .app-popup-mode.page-standard-form-popup .app-popup-form-content > .form-group:has(textarea),
    .app-popup-mode.page-standard-form-popup .app-popup-form-content > .form-group:has(input[type="file"]) {
        grid-template-columns: 1fr !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .app-popup-mode.page-standard-form-popup .app-popup-form-content > .mb-3,
    .app-popup-mode.page-standard-form-popup .app-popup-form-content > .form-group,
    .app-popup-mode.page-standard-form-popup .app-popup-form-content > .row {
        grid-column: 1 / -1 !important;
    }
}

.app-popup-modal[class*="-popup"] .modal-dialog {
    width: min(94vw, 720px) !important;
    max-width: min(94vw, 720px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.app-popup-modal[class*="-popup"] .modal-content {
    max-width: min(94vw, 720px) !important;
}

.app-confirm-popup {
    border-radius: 12px !important;
}

.app-confirm-delete-button,
.app-confirm-cancel-button {
    min-height: 36px !important;
    min-width: 0 !important;
    padding: 0 16px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    line-height: 20px !important;
}

/* Final popup sizing: wizard popups are wider; standard popups stay responsive and scroll inside the iframe. */
.app-popup-modal.app-standard-form-popup .modal-dialog {
    width: min(94vw, 760px) !important;
    max-width: min(94vw, 760px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 32px) !important;
    margin: max(12px, 4dvh) auto !important;
}

.app-popup-modal.app-standard-form-popup .modal-dialog.modal-dialog-scrollable {
    height: auto !important;
    min-height: 0 !important;
}

.app-popup-modal.app-standard-form-popup .modal-content {
    width: 100% !important;
    max-width: none !important;
    max-height: calc(100dvh - 32px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.app-popup-modal.app-standard-form-popup .modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.app-popup-modal.app-standard-form-popup .app-popup-frame {
    width: 100% !important;
    min-height: 0 !important;
    display: block !important;
    border: 0 !important;
    background: #ffffff !important;
}

.app-popup-modal.app-driver-wizard-popup .modal-dialog {
    width: min(96vw, 1180px) !important;
    max-width: min(96vw, 1180px) !important;
    height: min(88dvh, 820px) !important;
    max-height: min(88dvh, 820px) !important;
    margin: max(12px, 4dvh) auto !important;
}

.app-popup-modal.app-driver-wizard-popup .modal-dialog.modal-dialog-scrollable {
    height: min(88dvh, 820px) !important;
}

.app-popup-modal.app-driver-wizard-popup .modal-content {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    max-height: min(88dvh, 820px) !important;
}

.app-popup-mode.page-driver-form,
.app-popup-mode.page-driver-form .content,
.app-popup-mode.page-driver-form .app-container {
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
    background: #ffffff !important;
}

.app-popup-mode.page-driver-form .app-container {
    padding: 0 !important;
}

.app-popup-mode.page-driver-form .app-popup-form.driver-wizard-popup,
.app-popup-mode.page-driver-form .driver-wizard-popup {
    width: 100% !important;
    max-width: none !important;
    height: 100dvh !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.app-popup-mode.page-driver-form .driver-wizard-layout {
    min-height: 0 !important;
}

.app-popup-mode.page-driver-form .driver-wizard-footer {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.app-popup-mode.page-driver-form .driver-wizard-missing {
    position: static !important;
    flex: 1 1 auto !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 0 12px !important;
    text-align: center !important;
    transform: none !important;
}

.app-popup-modal.app-warning-form-popup .modal-dialog {
    width: min(94vw, 760px) !important;
    max-width: min(94vw, 760px) !important;
}

.app-popup-modal.app-scorecard-import-popup .modal-dialog {
    width: min(92vw, 680px) !important;
    max-width: min(92vw, 680px) !important;
    margin: max(16px, 8dvh) auto !important;
}

.app-popup-modal.app-scorecard-import-popup .modal-header {
    min-height: 58px !important;
    padding: 0 22px !important;
}

.app-popup-modal.app-scorecard-import-popup .modal-title {
    font-size: 20px !important;
    line-height: 28px !important;
}

body.app-popup-mode.page-scorecard-import-form {
    background: #f8fafc !important;
}

body.app-popup-mode.page-scorecard-import-form .app-container {
    padding: 14px !important;
}

body.app-popup-mode.page-scorecard-import-form .app-popup-form {
    padding: 16px !important;
    border-radius: 10px !important;
}

body.app-popup-mode.page-scorecard-import-form .app-popup-form-content {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
}

body.app-popup-mode.page-scorecard-import-form .scorecard-import-help {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    margin: 0 !important;
    padding: 14px !important;
    border-color: #bfdbfe;
    border-radius: 8px;
    background: #eff6ff;
}

body.app-popup-mode.page-scorecard-import-form .scorecard-import-help i {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 22px;
}

body.app-popup-mode.page-scorecard-import-form .scorecard-import-help strong {
    color: #1d4ed8;
    font-size: 15px;
    line-height: 20px;
}

body.app-popup-mode.page-scorecard-import-form .scorecard-import-help span {
    color: #475569;
    font-size: 14px;
    line-height: 21px;
}

body.app-popup-mode.page-scorecard-import-form .scorecard-form-section-heading {
    margin: 0 !important;
    color: #475569;
    font-size: 12px;
    line-height: 18px;
}

body.app-popup-mode.page-scorecard-import-form .form-label {
    margin-bottom: 7px !important;
    color: #374151 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

body.app-popup-mode.page-scorecard-import-form input[type="file"].form-control {
    min-height: 42px !important;
    border-radius: 8px !important;
    border-color: #d1d5db !important;
    background-color: #ffffff !important;
    font-size: 14px !important;
}

body.app-popup-mode.page-scorecard-import-form .form-text {
    margin-top: 7px !important;
    color: #6b7280 !important;
    font-size: 13px !important;
    line-height: 18px !important;
}

body.app-popup-mode.page-scorecard-import-form .app-popup-form-footer {
    padding-top: 16px !important;
}

@media (max-width: 767.98px) {
    .app-popup-modal.app-standard-form-popup .modal-dialog,
    .app-popup-modal.app-warning-form-popup .modal-dialog {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        max-height: calc(100dvh - 24px) !important;
        margin: 12px auto !important;
    }

    .app-popup-modal.app-standard-form-popup .modal-content {
        max-height: calc(100dvh - 24px) !important;
    }

    .app-popup-modal.app-scorecard-import-popup .modal-dialog {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        margin: 12px auto !important;
    }

    .app-popup-modal.app-scorecard-import-popup .modal-title {
        font-size: 18px !important;
        line-height: 24px !important;
    }

    body.app-popup-mode.page-scorecard-import-form .app-container,
    body.app-popup-mode.page-scorecard-import-form .app-popup-form {
        padding: 12px !important;
    }

    body.app-popup-mode.page-scorecard-import-form .app-popup-form-footer {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 575.98px) {
    .app-popup-modal.app-driver-wizard-popup .modal-dialog {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
    }

    .app-popup-modal.app-driver-wizard-popup .modal-content {
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
    }
}

.swal2-html-container {
    word-break: break-word;
}

/* Keep CRM tables fitted to their sections instead of creating horizontal scroll. */
.app-content,
.app-container,
.content-page {
    overflow-x: clip !important;
}

.app-content .app-search-card {
    max-width: 100% !important;
    overflow: hidden !important;
}

.app-content .table-responsive,
.app-content .table-responsive.table-sticky-wrapper,
.app-content .dataTables_wrapper,
.app-content .cm-table-card,
.driver-profile-tab-content .table-responsive,
.driver-profile-tab-content .table-sticky-wrapper,
.driver-tab-table-card .table-responsive,
.driver-tab-table-card .table-sticky-wrapper {
    max-width: 100% !important;
    overflow: hidden !important;
}

.app-content .table-responsive > table,
.app-content .table-responsive > .dataTable,
.app-content .dataTables_wrapper table,
.app-content .cm-table-card table,
.driver-profile-tab-content table:not(.drivers-table),
.driver-tab-table-card table:not(.drivers-table) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed !important;
}

.app-content table th,
.app-content table td {
    min-width: 0 !important;
    overflow-wrap: anywhere;
    white-space: normal;
}

.app-content table .app-driver-avatar-link {
    min-width: 0;
    max-width: 100%;
}

.app-content table .app-action-cell,
.app-content table td.text-end:last-child,
.app-content table td:last-child:has(.app-table-action),
.app-content table .app-inline-actions,
.app-content table .driver-tab-actions,
.app-content table .drivers-row-actions {
    white-space: nowrap !important;
}

/* Unified CRM table palette: every section follows the /drivers table styling. */
.app-content .drivers-table-card,
.app-content .table-responsive,
.app-content .table-responsive.table-sticky-wrapper,
.app-content .dataTables_wrapper,
.app-content .cm-table-card,
.app-content .card:has(.table-responsive table[id="example"]) .table-responsive,
.app-content .col-12 > .table-responsive:has(table[id="example"]) {
    border: 1px solid var(--cm-border-soft) !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: var(--cm-shadow-card) !important;
}

.app-content .table,
.app-content .drivers-table,
.app-content table.dataTable,
.app-content table.app-data-table,
.app-content table[id="example"] {
    --bs-table-bg: #ffffff;
    --bs-table-color: var(--cm-text);
    --bs-table-striped-bg: #ffffff;
    --bs-table-striped-color: var(--cm-text);
    --bs-table-hover-bg: oklch(0.967 0.001 286.375 / 0.45);
    --bs-table-hover-color: var(--cm-text);
    --bs-table-border-color: var(--cm-border-soft);
    margin: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: #ffffff !important;
    color: var(--cm-text) !important;
    font-family: var(--cm-font-sans) !important;
    font-size: 14px !important;
    line-height: 20px !important;
}

.app-content .table > :not(caption) > * > *,
.app-content .drivers-table > :not(caption) > * > *,
.app-content table.dataTable > :not(caption) > * > *,
.app-content table.app-data-table > :not(caption) > * > *,
.app-content table[id="example"] > :not(caption) > * > * {
    padding: 14px 16px !important;
    border-color: var(--cm-border-soft) !important;
    background-color: #ffffff !important;
    color: var(--cm-text) !important;
    box-shadow: none !important;
}

.app-content .table thead th,
.app-content .table > thead > tr > th,
.app-content .drivers-table thead th,
.app-content table.dataTable > thead > tr > th,
.app-content table.app-data-table > thead > tr > th,
.app-content table[id="example"] thead th {
    height: 50px !important;
    border-bottom: 1px solid var(--cm-border) !important;
    background: #ffffff !important;
    color: var(--cm-muted) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    vertical-align: middle !important;
}

.app-content .table tbody td,
.app-content .table > tbody > tr > td,
.app-content .drivers-table tbody td,
.app-content table.dataTable > tbody > tr > td,
.app-content table.app-data-table > tbody > tr > td,
.app-content table[id="example"] tbody td {
    height: 72px !important;
    border-bottom: 1px solid var(--cm-border-soft) !important;
    color: var(--cm-text) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
    vertical-align: middle !important;
}

.app-content .table tbody tr:hover > *,
.app-content .drivers-table tbody tr:hover > *,
.app-content table.dataTable > tbody > tr:hover > *,
.app-content table.app-data-table > tbody > tr:hover > *,
.app-content table[id="example"] tbody tr:hover > * {
    background: oklch(0.967 0.001 286.375 / 0.45) !important;
    color: var(--cm-text) !important;
}

.app-content .table tbody tr:last-child > td,
.app-content .drivers-table tbody tr:last-child > td,
.app-content table.dataTable tbody tr:last-child > td,
.app-content table.app-data-table tbody tr:last-child > td,
.app-content table[id="example"] tbody tr:last-child > td {
    border-bottom: 0 !important;
}

.app-content .table-responsive + .mt-3,
.app-content .table-responsive + div[class*="mt-"],
.app-content .pagination-wrapper,
.app-content .cm-pagination-bar,
.app-content .app-table-footer,
.app-content .drivers-pagination,
.app-content .card:has(.table-responsive table[id="example"]) .mt-3:has(.pagination),
.app-content .col-12 > .mt-3:has(.pagination) {
    border: 1px solid var(--cm-border-soft) !important;
    border-top: 0 !important;
    border-radius: 0 0 16px 16px !important;
    background: #ffffff !important;
    color: var(--cm-muted) !important;
    box-shadow: var(--cm-shadow-card) !important;
}

.app-content .table-responsive:has(+ .mt-3),
.app-content .table-responsive:has(+ div[class*="mt-"]),
.app-content .table-responsive:has(+ .pagination-wrapper),
.app-content .table-responsive:has(+ .cm-pagination-bar),
.app-content .table-responsive:has(+ .app-table-footer),
.app-content .col-12 > .table-responsive.table-sticky-wrapper:has(table[id="example"]):has(+ .app-table-footer),
.app-content .col-12 > .table-responsive.table-sticky-wrapper:has(table[id="example"]):has(+ .mt-3),
.app-content .card:has(.table-responsive table[id="example"]) .table-responsive:has(+ .app-table-footer),
.app-content .card:has(.table-responsive table[id="example"]) .table-responsive:has(+ .mt-3),
.app-content .drivers-table-card:has(.drivers-pagination) {
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* Canonical list module: keep every operational section visually aligned with /drivers. */
.page-drivers-redesign .app-content [class*="-metrics-grid"],
.app-content .drivers-metrics-grid {
    width: 100% !important;
    max-width: none !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 14px !important;
}

.page-drivers-redesign .app-content .drivers-metric-card,
.page-drivers-redesign .app-content [class*="-metric-card"],
.app-content .drivers-metric-card {
    min-height: 104px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 18px 16px !important;
    border: 1px solid var(--cm-border-soft) !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: var(--cm-text) !important;
    text-align: center !important;
    text-decoration: none !important;
    box-shadow: var(--cm-shadow-sm) !important;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease !important;
}

.page-drivers-redesign .app-content .drivers-metric-card:hover,
.page-drivers-redesign .app-content [class*="-metric-card"]:hover,
.app-content .drivers-metric-card:hover {
    border-color: #d1d5db !important;
    box-shadow: var(--cm-shadow-card) !important;
    transform: translateY(-1px) !important;
}

.page-drivers-redesign .app-content .drivers-metric-card strong,
.page-drivers-redesign .app-content [class*="-metric-card"] strong,
.app-content .drivers-metric-card strong {
    margin: 0 !important;
    color: var(--metric-color, #111827) !important;
    font-size: 26px !important;
    font-weight: 800 !important;
    line-height: 32px !important;
}

.page-drivers-redesign .app-content .drivers-metric-card span,
.page-drivers-redesign .app-content [class*="-metric-card"] span,
.page-drivers-redesign .app-content .drivers-metric-card small,
.page-drivers-redesign .app-content [class*="-metric-card"] small,
.app-content .drivers-metric-card span,
.app-content .drivers-metric-card small {
    margin: 0 !important;
    color: #71717f !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    text-transform: none !important;
}

.drivers-metric-green,
.phones-metric-available,
.phone-damages-metric-repair {
    --metric-color: #10b981;
}

.drivers-metric-blue,
.documentation-metric-expiring,
.phone-damages-metric-total {
    --metric-color: #2563eb;
}

.drivers-metric-amber,
.documentation-metric-pending {
    --metric-color: #f59e0b;
}

.drivers-metric-red,
.documentation-metric-expired,
.phone-damages-metric-hit {
    --metric-color: #ef4444;
}

.drivers-metric-purple {
    --metric-color: #7c3aed;
}

.drivers-metric-slate,
.phones-metric-total,
.phones-metric-assigned {
    --metric-color: #111827;
}

.page-drivers-redesign .app-content .drivers-metric-card.is-active,
.app-content .drivers-metric-card.is-active {
    border-color: #bfdbfe !important;
    background: #eff6ff !important;
}

.app-content table .app-driver-avatar-link,
.app-content table .drivers-person-link {
    width: max-content !important;
    max-width: min(100%, 260px) !important;
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: var(--cm-text) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 20px !important;
    text-decoration: none !important;
}

.app-content table .app-driver-avatar-img,
.app-content table .app-driver-avatar-initials,
.app-content table .drivers-avatar,
.app-content table .drivers-avatar-img {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
    border-radius: 999px !important;
    object-fit: cover !important;
}

.app-content table .app-driver-avatar-initials,
.app-content table .drivers-avatar {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #eef2ff !important;
    color: #1d4ed8 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

.app-content table .app-driver-avatar-name,
.app-content table .drivers-person-link strong {
    min-width: 0 !important;
    overflow: hidden !important;
    color: var(--cm-text) !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.app-content table :is(.app-vehicle-link, .fuel-van-link, .maintenance-van-link, .pave-van-link, .inspection360-van-link, .insurance-van-link, .incidence-van-link, .van-identity a) {
    max-width: 220px !important;
    display: inline-flex !important;
    min-width: 0 !important;
    flex-direction: column !important;
    gap: 2px !important;
    color: #2554e8 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 18px !important;
    text-decoration: none !important;
}

.app-content table :is(.app-vehicle-link, .fuel-van-link, .maintenance-van-link, .pave-van-link, .inspection360-van-link, .insurance-van-link, .incidence-van-link, .van-identity a) :is(strong, span) {
    min-width: 0 !important;
    overflow: hidden !important;
    color: #2554e8 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.app-content table :is(.app-vehicle-link, .fuel-van-link, .maintenance-van-link, .pave-van-link, .inspection360-van-link, .insurance-van-link, .incidence-van-link, .van-identity a) small {
    min-width: 0 !important;
    overflow: hidden !important;
    color: #71717f !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 16px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.app-content table :is(.app-status-pill, .drivers-status-pill, .warnings-status-pill, .absence-status-pill, .evaluation-status-pill, .dnr-status-pill, .accident-status-pill, .fine-status-pill, .phone-status-pill, .pave-status-pill, .maintenance-status-pill, .documentation-status-pill, .fuel-type-pill, .phone-damage-type-pill, .insurance-status-pill, .incidence-status-pill, .inspections360-result-pill, .warnings-severity-pill, .warnings-source-pill, .zone-status-pill) {
    min-height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 3px 10px !important;
    border: 1px solid #e4e4e7 !important;
    border-radius: 999px !important;
    background: #f4f4f5 !important;
    color: #71717f !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 18px !important;
    white-space: nowrap !important;
}

.app-content table :is(.app-status-pill.is-success, .drivers-status-active, .drivers-status-1, .warnings-status-pill, .absence-status-pill.is-justified, .evaluation-status-pill.is-completed, .documentation-status-pill.is-valid, .maintenance-status-pill.is-closed, .zone-status-pill.is-visible, .phone-damage-type-repair, .warnings-severity-green) {
    border-color: #a7f3d0 !important;
    background: #dffbf0 !important;
    color: #059669 !important;
}

.app-content table :is(.app-status-pill.is-warning, .drivers-status-2, .absence-status-pill.is-pending, .evaluation-status-pill.is-pending, .documentation-status-pill.is-expiring, .maintenance-status-pill.is-open, .fuel-type-amber, .warnings-severity-amber) {
    border-color: #fde68a !important;
    background: #fef3c7 !important;
    color: #d97706 !important;
}

.app-content table :is(.app-status-pill.is-danger, .drivers-status-3, .documentation-status-pill.is-expired, .fine-status-pill.is-pending, .phone-damage-type-hit, .warnings-severity-red) {
    border-color: #fecaca !important;
    background: #fee2e2 !important;
    color: #ef4444 !important;
}

.app-content table :is(.app-status-pill.is-info, .drivers-status-4, .fuel-type-blue) {
    border-color: #bfdbfe !important;
    background: #dbeafe !important;
    color: #2563eb !important;
}

.app-content table .app-table-media-action {
    min-width: 24px !important;
    height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: #111111 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 18px !important;
    text-decoration: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

.app-content table a.app-table-media-action:hover,
.app-content table button.app-table-media-action:hover {
    border-color: transparent !important;
    background: transparent !important;
    color: #111111 !important;
    opacity: .78 !important;
    text-decoration: none !important;
}

.app-content table .app-table-media-action i {
    width: 16px !important;
    height: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: currentColor !important;
    font-size: 16px !important;
    line-height: 1 !important;
}

.app-content table :is(.warnings-doc-link, .accident-file-link, .fine-file-link, .phone-damage-file-link, .documentation-file-link, .contract-file-link, .driver-tab-file-link).app-table-media-action span,
.app-content table :is(.maintenance-evidence, .inspection360-photos-pill).app-table-media-action span {
    display: none !important;
}

.app-content table :is(.maintenance-comment-cell, .evaluation-comment-cell, .insurance-comments-pill, .fine-comment-pill).app-table-media-action {
    min-width: 24px !important;
    padding: 0 !important;
}

.app-content table .app-table-media-count {
    min-width: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: currentColor !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

.app-content table .app-created-info.app-table-action {
    color: #111111 !important;
}

.app-content table :is(a, button).app-table-media-action {
    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    flex-direction: row !important;
    overflow: visible !important;
    vertical-align: middle !important;
}

/* Final list layout fit: every CRM list uses the available width and keeps actions compact. */
.app-content .drivers-table-card,
.app-content .drivers-table-wrapper,
.app-content .table-responsive,
.app-content .dataTables_wrapper,
.app-content .cm-table-card {
    width: 100% !important;
    max-width: 100% !important;
}

.app-content .drivers-table {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
}

.app-content :is(.maintenance-table, .inspections360-table, .phones-table, .phone-damages-table) {
    table-layout: auto !important;
}

.app-content table :is(th.app-actions-header, th:last-child.app-actions-header) {
    width: 1% !important;
    min-width: 112px !important;
    max-width: 160px !important;
    text-align: right !important;
    white-space: nowrap !important;
}

.app-content table :is(td.app-action-cell, td:last-child:has(.app-inline-actions), td:last-child:has(.drivers-row-actions), td:last-child:has(.app-table-action)) {
    width: 1% !important;
    min-width: 112px !important;
    max-width: 160px !important;
    text-align: right !important;
    white-space: nowrap !important;
}

.app-content table :is(.app-inline-actions, .driver-tab-actions, .drivers-row-actions, .table-actions, .cm-table-actions, .action-buttons) {
    width: auto !important;
    min-width: 0 !important;
    justify-content: flex-end !important;
}

.page-users .app-content .table-responsive.table-sticky-wrapper {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
}

.page-users .app-content .table-responsive.table-sticky-wrapper > table.app-data-table {
    width: 100% !important;
    min-width: 900px !important;
    max-width: none !important;
    table-layout: auto !important;
}

.page-users .app-content table.app-data-table :is(th, td) {
    overflow-wrap: normal !important;
}

.page-users .app-content table.app-data-table :is(th:nth-child(1), td:nth-child(1)) {
    width: 24% !important;
    min-width: 190px !important;
}

.page-users .app-content table.app-data-table :is(th:nth-child(2), td:nth-child(2)) {
    width: 26% !important;
    min-width: 220px !important;
}

.page-users .app-content table.app-data-table :is(th:nth-child(3), td:nth-child(3)) {
    width: 18% !important;
    min-width: 120px !important;
}

.page-users .app-content table.app-data-table :is(th:nth-child(4), td:nth-child(4)) {
    width: 16% !important;
    min-width: 140px !important;
}

.page-users .app-content table.app-data-table :is(th:nth-child(5), td:nth-child(5)) {
    width: 10% !important;
    min-width: 90px !important;
}

.page-users .app-content table.app-data-table :is(th.app-actions-header, td.app-action-cell) {
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
}

.page-audits .app-content .table-responsive.table-sticky-wrapper {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
}

.page-audits .app-content .audit-table {
    width: 100% !important;
    min-width: 900px !important;
    max-width: none !important;
    table-layout: auto !important;
}

.page-audits .app-content .audit-table :is(th, td) {
    overflow-wrap: normal !important;
}

.page-audits .app-content .audit-table :is(th:nth-child(1), td:nth-child(1)) {
    width: 12% !important;
    min-width: 110px !important;
}

.page-audits .app-content .audit-table :is(th:nth-child(2), td:nth-child(2)) {
    width: 25% !important;
    min-width: 220px !important;
}

.page-audits .app-content .audit-table :is(th:nth-child(3), td:nth-child(3)) {
    width: 13% !important;
    min-width: 130px !important;
}

.page-audits .app-content .audit-table :is(th:nth-child(4), td:nth-child(4)) {
    width: 38% !important;
    min-width: 300px !important;
}

.page-audits .app-content .audit-table :is(th.app-actions-header, td.app-action-cell) {
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
}

.page-audits .audit-page-heading {
    margin: -10px 0 18px !important;
}

.page-audits .audit-page-heading p {
    max-width: 720px !important;
    margin: 0 !important;
    color: var(--cm-muted) !important;
    font-size: 14px !important;
    line-height: 22px !important;
}

.page-audits .audit-filter-card,
.page-audits .audit-log-panel {
    width: 100% !important;
    border: 1px solid var(--cm-border-soft) !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    box-shadow: var(--cm-shadow-card) !important;
}

.page-audits .audit-filter-card {
    margin-bottom: 20px !important;
    padding: 18px !important;
}

.page-audits .audit-filter-grid {
    display: grid !important;
    grid-template-columns: minmax(220px, 1.35fr) minmax(170px, .8fr) minmax(220px, 1.15fr) minmax(150px, .75fr) minmax(150px, .75fr) !important;
    gap: 14px !important;
}

.page-audits .audit-filter-field {
    min-width: 0 !important;
}

.page-audits .audit-filter-field label,
.page-audits .audit-search-form label {
    display: block !important;
    margin-bottom: 8px !important;
    color: var(--cm-text) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 18px !important;
}

.page-audits .audit-filter-field .form-control,
.page-audits .audit-filter-field .form-select,
.page-audits .audit-search-form .form-control,
.page-audits .audit-filter-field .select2-container .select2-selection {
    min-height: 40px !important;
    border: 1px solid var(--cm-border) !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: var(--cm-text) !important;
    font-size: 14px !important;
}

.page-audits .audit-filter-actions {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    margin-top: 16px !important;
}

.page-audits .audit-apply-button,
.page-audits .audit-clear-button,
.page-audits .audit-export-button {
    min-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 16px !important;
    white-space: nowrap !important;
}

.page-audits .audit-clear-button,
.page-audits .audit-export-button {
    border: 1px solid var(--cm-border) !important;
    background: #ffffff !important;
    color: var(--cm-text) !important;
}

.page-audits .audit-log-panel {
    overflow: hidden !important;
}

.page-audits .audit-log-header {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 18px !important;
    padding: 18px !important;
    border-bottom: 1px solid var(--cm-border-soft) !important;
}

.page-audits .audit-log-header h2 {
    margin: 0 0 6px !important;
    color: var(--cm-text) !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: 28px !important;
}

.page-audits .audit-log-header p {
    margin: 0 !important;
    color: var(--cm-muted) !important;
    font-size: 13px !important;
    line-height: 20px !important;
}

.page-audits .audit-log-tools {
    display: flex !important;
    align-items: flex-end !important;
    gap: 14px !important;
}

.page-audits .audit-search-form {
    min-width: 280px !important;
    display: grid !important;
    grid-template-columns: auto minmax(220px, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
}

.page-audits .audit-search-form label {
    margin-bottom: 0 !important;
    color: var(--cm-muted) !important;
}

.page-audits .audit-table-wrapper {
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
}

.page-audits .app-content .audit-table {
    min-width: 1640px !important;
    table-layout: fixed !important;
}

.page-audits .app-content .audit-table :is(th, td) {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.page-audits .app-content .audit-table :is(th:nth-child(1), td:nth-child(1)) {
    width: 88px !important;
    min-width: 88px !important;
}

.page-audits .app-content .audit-table :is(th:nth-child(2), td:nth-child(2)) {
    width: 185px !important;
    min-width: 185px !important;
}

.page-audits .app-content .audit-table :is(th:nth-child(3), td:nth-child(3)) {
    width: 145px !important;
    min-width: 145px !important;
}

.page-audits .app-content .audit-table :is(th:nth-child(4), td:nth-child(4)) {
    width: 170px !important;
    min-width: 170px !important;
}

.page-audits .app-content .audit-table :is(th:nth-child(5), td:nth-child(5)) {
    width: 150px !important;
    min-width: 150px !important;
}

.page-audits .app-content .audit-table :is(th:nth-child(6), td:nth-child(6)) {
    width: 210px !important;
    min-width: 210px !important;
}

.page-audits .app-content .audit-table :is(th:nth-child(7), td:nth-child(7)) {
    width: 210px !important;
    min-width: 210px !important;
}

.page-audits .app-content .audit-table :is(th:nth-child(8), td:nth-child(8)) {
    width: 92px !important;
    min-width: 92px !important;
}

.page-audits .app-content .audit-table :is(th:nth-child(9), td:nth-child(9)) {
    width: 230px !important;
    min-width: 230px !important;
}

.page-audits .audit-id-cell,
.page-audits .audit-date,
.page-audits .audit-muted-cell,
.page-audits .audit-description,
.page-audits .audit-route {
    color: var(--cm-muted) !important;
}

.page-audits .audit-user-name,
.page-audits .audit-entity {
    color: var(--cm-text) !important;
    font-weight: 700 !important;
}

.page-audits .audit-badge {
    max-width: 132px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 16px !important;
}

.page-audits .audit-badge-created {
    background: #dcfce7 !important;
    color: #166534 !important;
}

.page-audits .audit-badge-updated {
    background: #dbeafe !important;
    color: #1d4ed8 !important;
}

.page-audits .audit-badge-deleted {
    background: #fee2e2 !important;
    color: #b91c1c !important;
}

.page-audits .audit-badge-restored {
    background: #fef3c7 !important;
    color: #92400e !important;
}

.page-audits .audit-badge-relation,
.page-audits .audit-badge-default {
    background: #f1f5f9 !important;
    color: #334155 !important;
}

.page-audits .audit-change-count {
    min-width: 28px !important;
    min-height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
    background: #f8fafc !important;
    color: var(--cm-text) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

.page-audits .audit-view-button {
    width: 34px !important;
    height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border: 1px solid var(--cm-border-soft) !important;
    border-radius: 8px !important;
    background: #f8fafc !important;
    color: #1d4ed8 !important;
}

.page-audits .audit-view-button:hover,
.page-audits .audit-export-button:hover,
.page-audits .audit-clear-button:hover {
    border-color: #cbd5e1 !important;
    background: #f1f5f9 !important;
}

.page-audits .audit-table-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding: 14px 18px !important;
    border-top: 1px solid var(--cm-border-soft) !important;
    color: var(--cm-muted) !important;
    font-size: 13px !important;
}

.page-audits .audit-table-footer nav {
    margin-left: auto !important;
}

.page-audits .audit-detail-modal .modal-content {
    border: 0 !important;
    border-radius: 8px !important;
}

.page-audits .audit-modal-subtitle {
    margin-top: 4px !important;
    color: var(--cm-muted) !important;
    font-size: 13px !important;
}

.page-audits .audit-modal-summary {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
    padding: 12px !important;
    border: 1px solid var(--cm-border-soft) !important;
    border-radius: 8px !important;
    background: #f8fafc !important;
    color: var(--cm-muted) !important;
    font-size: 13px !important;
}

.page-audits .audit-changes-wrapper {
    max-height: 54vh !important;
    overflow: auto !important;
    border: 1px solid var(--cm-border-soft) !important;
    border-radius: 8px !important;
}

.page-audits .audit-changes-table {
    min-width: 720px !important;
}

.page-audits .audit-changes-table th {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
}

.page-audits .audit-changes-table pre {
    max-height: 220px !important;
    margin: 0 !important;
    overflow: auto !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
    color: var(--cm-text) !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
    font-size: 12px !important;
    line-height: 18px !important;
}

.page-audits .audit-user-agent {
    display: grid !important;
    gap: 6px !important;
    margin-top: 16px !important;
    color: var(--cm-muted) !important;
    font-size: 12px !important;
    line-height: 18px !important;
    word-break: break-word !important;
}

.page-audits .audit-empty-state {
    display: grid !important;
    place-items: center !important;
    gap: 10px !important;
    min-height: 220px !important;
    padding: 32px 18px !important;
    color: var(--cm-muted) !important;
    text-align: center !important;
}

.page-audits .audit-empty-state i {
    color: #94a3b8 !important;
    font-size: 34px !important;
}

.page-audits .audit-empty-state h3 {
    margin: 0 !important;
    color: var(--cm-text) !important;
    font-size: 18px !important;
    font-weight: 800 !important;
}

@media (max-width: 1199.98px) {
    .page-audits .audit-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 767.98px) {
    .page-audits .audit-filter-grid,
    .page-audits .audit-search-form {
        grid-template-columns: 1fr !important;
    }

    .page-audits .audit-log-header,
    .page-audits .audit-log-tools,
    .page-audits .audit-filter-actions,
    .page-audits .audit-table-footer {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .page-audits .audit-log-tools,
    .page-audits .audit-search-form {
        width: 100% !important;
        min-width: 0 !important;
    }
}

.app-content .inspections360-table :is(th:nth-child(1), td:nth-child(1)) {
    width: 18% !important;
}

.app-content .inspections360-table :is(th:nth-child(2), td:nth-child(2), th:nth-child(3), td:nth-child(3), th:nth-child(4), td:nth-child(4), th:nth-child(5), td:nth-child(5), th:nth-child(6), td:nth-child(6)) {
    width: auto !important;
}

.app-content .inspections360-table :is(th.app-actions-header, td.app-action-cell) {
    width: 128px !important;
    min-width: 128px !important;
    max-width: 128px !important;
}

.app-content .maintenance-table-card {
    align-self: stretch !important;
}

.app-content .maintenance-table :is(th, td),
.app-content .inspections360-table :is(th, td),
.app-content .phones-table :is(th, td) {
    overflow-wrap: normal !important;
}

.routes-page {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    color: var(--cm-text) !important;
}

.routes-header {
    margin: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 16px !important;
}

.routes-title {
    margin: 0 !important;
    color: var(--cm-text) !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    line-height: 36px !important;
    text-transform: none !important;
}

.routes-subtitle {
    margin: 2px 0 0 !important;
    color: var(--cm-muted) !important;
    font-size: 14px !important;
    line-height: 20px !important;
}

.routes-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

.routes-action {
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0 12px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 20px !important;
}

.routes-tabs {
    margin: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.routes-tab {
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    border: 1px solid var(--cm-border) !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: var(--cm-text) !important;
    padding: 0 12px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    box-shadow: var(--cm-shadow-sm) !important;
}

.routes-tab.active {
    border-color: #bfdbfe !important;
    background: #eff6ff !important;
    color: #1d4ed8 !important;
}

.routes-tab i {
    color: inherit !important;
    font-size: 16px !important;
    line-height: 1 !important;
}

.routes-list {
    display: grid !important;
    gap: 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--cm-border-soft) !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: var(--cm-shadow-card) !important;
}

.routes-row {
    min-height: 72px !important;
    display: grid !important;
    grid-template-columns: 120px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 14px 16px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--cm-border-soft) !important;
    border-radius: 0 !important;
    background: #ffffff !important;
}

.routes-row:last-child {
    border-bottom: 0 !important;
}

.routes-row:hover {
    background: oklch(0.967 0.001 286.375 / 0.45) !important;
}

@media (max-width: 767.98px) {
    .routes-header,
    .routes-row {
        grid-template-columns: 1fr !important;
    }

    .routes-header {
        display: grid !important;
    }

    .routes-actions {
        justify-content: flex-start !important;
    }
}

/* Popup parity: standard forms share one responsive size; wizard forms are the only wider variant. */
.app-popup-modal.app-standard-form-popup:not(.app-wizard-popup) .modal-dialog {
    width: min(94vw, 760px) !important;
    max-width: min(94vw, 760px) !important;
}

.app-popup-modal.app-wizard-popup .modal-dialog {
    width: min(96vw, 1180px) !important;
    max-width: min(96vw, 1180px) !important;
    height: min(88dvh, 820px) !important;
    max-height: min(88dvh, 820px) !important;
    margin: max(12px, 4dvh) auto !important;
}

.app-popup-modal.app-user-form-popup:not(.app-wizard-popup) .modal-dialog {
    width: min(94vw, 860px) !important;
    max-width: min(94vw, 860px) !important;
    margin: max(12px, 5dvh) auto !important;
}

.app-popup-modal.app-user-form-popup:not(.app-wizard-popup) .modal-content {
    max-height: min(88dvh, 780px) !important;
    border-radius: 16px !important;
}

.app-popup-mode.page-user-form .app-popup-form {
    width: 100% !important;
    max-width: 780px !important;
    gap: 12px !important;
}

.app-popup-mode.page-user-form .app-popup-form-content {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.app-popup-mode.page-user-form .app-popup-form-footer {
    max-width: 780px !important;
    padding: 0 !important;
}

.app-popup-mode.page-user-form .form-control,
.app-popup-mode.page-user-form .form-select,
.app-popup-mode.page-user-form .select2-container--default .select2-selection--single,
.app-popup-mode.page-user-form .select2-container--default .select2-selection--multiple {
    min-height: 40px !important;
    border-radius: 10px !important;
}

.app-popup-mode.page-user-form .form-control,
.app-popup-mode.page-user-form .form-select,
.app-popup-mode.page-user-form .select2-container--default .select2-selection--single {
    height: 40px !important;
}

.app-popup-mode.page-user-form input[type="file"].form-control {
    height: 40px !important;
}

.app-popup-modal.app-wizard-popup .modal-dialog.modal-dialog-scrollable {
    height: min(88dvh, 820px) !important;
}

.app-popup-modal.app-wizard-popup .modal-content {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    max-height: min(88dvh, 820px) !important;
}

.app-popup-modal.app-wizard-popup .modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.app-popup-modal.app-wizard-popup .app-popup-frame {
    width: 100% !important;
    min-height: 0 !important;
    display: block !important;
    border: 0 !important;
    background: #ffffff !important;
}

@media (max-width: 575.98px) {
    .app-popup-modal.app-wizard-popup .modal-dialog {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
    }

    .app-popup-modal.app-wizard-popup .modal-content {
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
    }
}

/* Select2 parity: hidden source selects must not contribute to popup width. */
.app-popup-mode select.select2-hidden-accessible,
.app-popup-mode .form-select.select2-hidden-accessible {
    position: absolute !important;
    left: 0 !important;
    width: 1px !important;
    min-width: 1px !important;
    max-width: 1px !important;
    height: 1px !important;
    min-height: 1px !important;
    max-height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}

/* Typology tables keep the actions/info column visible while fitting the page. */
.page-typology .app-content table[id="example"],
.page-typology .app-content .table-responsive > table:has(td:last-child .app-table-action) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed !important;
}

.page-typology .app-content table[id="example"] :is(th.app-actions-header, td.app-action-cell, th:last-child, td:last-child:has(.app-table-action)),
.page-typology .app-content .table-responsive > table:has(td:last-child .app-table-action) :is(th.app-actions-header, td.app-action-cell, th:last-child, td:last-child:has(.app-table-action)) {
    width: 112px !important;
    min-width: 112px !important;
    max-width: 112px !important;
    padding-left: 8px !important;
    padding-right: 12px !important;
    text-align: right !important;
    white-space: nowrap !important;
}

/* Action icons are buttons visually: no link hover treatment in table actions. */
.app-content table a.app-table-action,
.app-content table a.app-table-action:hover,
.app-content table a.app-table-action:focus,
.app-content table a.app-action-edit,
.app-content table a.app-action-edit:hover,
.app-content table a.app-action-edit:focus,
.app-content table a.app-action-delete,
.app-content table a.app-action-delete:hover,
.app-content table a.app-action-delete:focus,
.app-content table .app-inline-actions a,
.app-content table .app-inline-actions a:hover,
.app-content table .app-inline-actions a:focus,
.app-content table .cm-table-actions a,
.app-content table .cm-table-actions a:hover,
.app-content table .cm-table-actions a:focus,
.app-content table .table-actions a,
.app-content table .table-actions a:hover,
.app-content table .table-actions a:focus,
.app-content table .action-buttons a,
.app-content table .action-buttons a:hover,
.app-content table .action-buttons a:focus {
    background: transparent !important;
    color: #111111 !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

.app-content table a.app-table-action:hover i,
.app-content table a.app-table-action:focus i,
.app-content table a.app-action-edit:hover i,
.app-content table a.app-action-edit:focus i,
.app-content table a.app-action-delete:hover i,
.app-content table a.app-action-delete:focus i {
    color: #111111 !important;
    text-decoration: none !important;
}

.app-content .table tbody td a.app-table-action:not(.btn),
.app-content .table tbody td a.app-table-action:not(.btn):hover,
.app-content .table tbody td a.app-table-action:not(.btn):focus,
.app-content table.app-data-table tbody td a.app-table-action:not(.btn),
.app-content table.app-data-table tbody td a.app-table-action:not(.btn):hover,
.app-content table.app-data-table tbody td a.app-table-action:not(.btn):focus {
    color: #111111 !important;
    text-decoration: none !important;
}

.page-van-accidents-redesign .van-accidents-table .app-driver-avatar-link,
.page-van-accidents-redesign .van-accidents-table .app-driver-avatar-link:hover,
.page-van-accidents-redesign .van-accidents-table .app-driver-avatar-link:focus,
.page-van-accidents-redesign .van-accidents-table .app-driver-avatar-link:hover .app-driver-avatar-name,
.page-van-accidents-redesign .van-accidents-table .app-driver-avatar-link:focus .app-driver-avatar-name {
    color: var(--cm-text) !important;
    text-decoration: none !important;
}

.page-van-accidents-redesign .van-accidents-table .accident-expedient-link,
.page-van-accidents-redesign .van-accidents-table .accident-expedient-link:hover,
.page-van-accidents-redesign .van-accidents-table .accident-expedient-link:focus {
    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: #111111 !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

.page-van-accidents-redesign .van-accidents-table .accident-expedient-link span {
    display: none !important;
}

.page-van-accidents-redesign .van-accidents-table .accident-expedient-link i {
    color: #111111 !important;
    font-size: 18px !important;
    line-height: 1 !important;
}

.page-van-accidents-redesign .van-accidents-table {
    width: max-content !important;
    min-width: 1680px !important;
    max-width: none !important;
    table-layout: auto !important;
}

.page-van-accidents-redesign .van-accidents-table thead th {
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
}

.page-van-accidents-redesign .van-accidents-table :is(th, td):nth-child(1) {
    min-width: 118px !important;
}

.page-van-accidents-redesign .van-accidents-table :is(th, td):nth-child(2) {
    min-width: 160px !important;
}

.page-van-accidents-redesign .van-accidents-table :is(th, td):nth-child(3) {
    min-width: 118px !important;
}

.page-van-accidents-redesign .van-accidents-table :is(th, td):nth-child(4) {
    min-width: 118px !important;
}

.page-van-accidents-redesign .van-accidents-table :is(th, td):nth-child(5) {
    min-width: 190px !important;
}

.page-van-accidents-redesign .van-accidents-table :is(th, td):nth-child(6),
.page-van-accidents-redesign .van-accidents-table :is(th, td):nth-child(7),
.page-van-accidents-redesign .van-accidents-table :is(th, td):nth-child(8),
.page-van-accidents-redesign .van-accidents-table :is(th, td):nth-child(9),
.page-van-accidents-redesign .van-accidents-table :is(th, td):nth-child(10),
.page-van-accidents-redesign .van-accidents-table :is(th, td):nth-child(11) {
    min-width: 96px !important;
    text-align: center !important;
}

.page-van-accidents-redesign .van-accidents-table :is(th, td):nth-child(12) {
    min-width: 118px !important;
    text-align: center !important;
}

.page-van-accidents-redesign .van-accidents-table :is(th, td):nth-child(13) {
    min-width: 132px !important;
    text-align: center !important;
}

.page-van-accidents-redesign .van-accidents-table :is(th, td):nth-child(14) {
    min-width: 180px !important;
}

.page-van-accidents-redesign .van-accidents-table :is(th, td):nth-child(15) {
    min-width: 128px !important;
    text-align: right !important;
    white-space: nowrap !important;
}

.workspace-settings-page {
    width: 100%;
    max-width: 100%;
}

.workspace-settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}

.workspace-settings-identity {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 14px;
}

.workspace-settings-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    min-width: 56px;
    height: 56px;
    border: 1px solid var(--cm-border);
    border-radius: 12px;
    background: #071524;
    box-shadow: var(--cm-shadow-sm);
    overflow: hidden;
}

.workspace-settings-logo img {
    width: auto;
    max-width: 44px;
    height: auto;
    max-height: 38px;
    object-fit: contain;
}

.workspace-settings-eyebrow {
    display: block;
    margin-bottom: 2px;
    color: var(--cm-muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    text-transform: uppercase;
}

.workspace-settings-title {
    margin: 0;
    font-size: 28px;
    line-height: 34px;
}

.workspace-settings-subtitle {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
    color: var(--cm-muted);
    font-size: 14px;
    line-height: 20px;
}

.workspace-settings-subtitle a {
    color: var(--cm-primary);
    text-decoration: none;
}

.workspace-settings-dot {
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: var(--cm-soft-muted);
}

.workspace-settings-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.workspace-settings-alert {
    width: 100%;
    border-radius: 10px;
}

.workspace-settings-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: start;
    gap: 24px;
}

.workspace-settings-main {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.workspace-settings-card {
    border-radius: 14px;
    box-shadow: var(--cm-shadow-card);
}

.workspace-settings-card .card-body {
    padding: 24px 26px;
}

.workspace-section-heading {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--cm-border);
}

.workspace-section-heading h2,
.workspace-summary-card h2 {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
}

.workspace-section-heading p {
    max-width: 640px;
    margin: 3px 0 0;
    color: var(--cm-muted);
    font-size: 13px;
    line-height: 19px;
}

.workspace-logo-upload {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 18px;
    align-items: stretch;
}

.workspace-logo-current {
    display: grid;
    gap: 8px;
}

.workspace-logo-current > span,
.workspace-current-file {
    color: var(--cm-muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
}

.workspace-logo-sidebar-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 112px;
    padding: 18px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 12px;
    background: #071524;
    overflow: hidden;
}

.workspace-logo-sidebar-preview img {
    width: auto;
    max-width: min(176px, 100%);
    height: auto;
    max-height: 64px;
    object-fit: contain;
}

.workspace-logo-field {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    min-width: 0;
}

.workspace-file-drop {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 72px;
    margin: 0;
    padding: 16px;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    background: #f8fafc;
    color: var(--cm-text);
    cursor: pointer;
}

.workspace-file-drop:hover {
    border-color: var(--cm-primary);
    background: #f5f8ff;
}

.workspace-file-drop i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    min-width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #ffffff;
    color: var(--cm-primary);
    font-size: 22px;
    box-shadow: var(--cm-shadow-sm);
}

.workspace-file-drop strong,
.workspace-file-drop span {
    display: block;
    min-width: 0;
}

.workspace-file-drop strong {
    font-size: 14px;
    line-height: 20px;
}

.workspace-file-drop span {
    color: var(--cm-muted);
    font-size: 13px;
    line-height: 18px;
    overflow-wrap: anywhere;
}

.workspace-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.workspace-current-file {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}

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

.workspace-domain-preview > div {
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--cm-border);
    border-radius: 12px;
    background: #f8fafc;
}

.workspace-domain-preview span,
.workspace-domain-preview a {
    display: block;
    min-width: 0;
}

.workspace-domain-preview span {
    margin-bottom: 4px;
    color: var(--cm-muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    text-transform: uppercase;
}

.workspace-domain-preview a {
    color: var(--cm-primary);
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.workspace-domain-preview strong {
    display: block;
    font-size: 13px;
    line-height: 18px;
}

.workspace-custom-domains {
    display: grid;
    gap: 12px;
}

.workspace-custom-domain-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: end;
    padding: 14px;
    border: 1px solid var(--cm-border);
    border-radius: 12px;
    background: #f8fafc;
}

.workspace-custom-domain-input {
    min-width: 0;
}

.workspace-custom-domain-options {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    min-height: 38px;
    padding-bottom: 2px;
}

.workspace-settings-side {
    position: sticky;
    top: 88px;
}

.workspace-summary-list {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}

.workspace-summary-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--cm-border);
}

.workspace-summary-list span {
    color: var(--cm-muted);
    font-size: 13px;
    line-height: 18px;
}

.workspace-summary-list strong {
    color: var(--cm-text);
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
    text-align: right;
}

.workspace-save-panel {
    display: grid;
    gap: 10px;
    margin-top: 22px;
}

.workspace-save-panel span {
    color: var(--cm-muted);
    font-size: 12px;
    line-height: 17px;
}

@media (max-width: 1199.98px) {
    .workspace-settings-layout {
        grid-template-columns: 1fr;
    }

    .workspace-settings-side {
        position: static;
    }
}

@media (max-width: 767.98px) {
    .workspace-settings-header {
        align-items: stretch;
        flex-direction: column;
    }

    .workspace-settings-title {
        font-size: 24px;
        line-height: 30px;
    }

    .workspace-settings-card .card-body {
        padding: 18px;
    }

    .workspace-logo-upload {
        grid-template-columns: 1fr;
    }

    .workspace-logo-sidebar-preview {
        min-height: 96px;
    }

    .workspace-domain-preview {
        grid-template-columns: 1fr;
    }

    .workspace-custom-domain-row {
        grid-template-columns: 1fr;
    }

    .workspace-custom-domain-options {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }
}

.user-api-keys-panel {
    display: grid;
    gap: 18px;
    width: 100%;
    min-width: 0;
}

.user-api-keys-user {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--cm-border);
}

.user-api-keys-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    min-width: 48px;
    height: 48px;
    border: 1px solid var(--cm-border);
    border-radius: 12px;
    background: #f8fafc;
    color: var(--cm-primary);
    font-size: 20px;
    font-weight: 700;
    overflow: hidden;
}

.user-api-keys-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-api-keys-user-meta {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.user-api-keys-user-meta strong {
    font-size: 15px;
    line-height: 21px;
}

.user-api-keys-user-meta span,
.user-api-keys-user-meta small {
    color: var(--cm-muted);
    font-size: 13px;
    line-height: 18px;
    overflow-wrap: anywhere;
}

.user-api-keys-reveal {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    background: #eff6ff;
}

.user-api-keys-reveal-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-api-keys-reveal-head > i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    min-width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #ffffff;
    color: var(--cm-primary);
    font-size: 22px;
}

.user-api-keys-reveal-head strong,
.user-api-keys-reveal-head span {
    display: block;
}

.user-api-keys-reveal-head span {
    color: var(--cm-muted);
    font-size: 13px;
    line-height: 18px;
}

.user-api-keys-token-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.user-api-keys-token-row code {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--cm-border);
    border-radius: 10px;
    background: #ffffff;
    color: var(--cm-text);
    font-size: 13px;
    overflow-wrap: anywhere;
}

.user-api-keys-section {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.user-api-keys-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.user-api-keys-section-head strong {
    display: block;
    font-size: 14px;
    line-height: 20px;
}

.user-api-keys-section-head span {
    color: var(--cm-muted);
    font-size: 12px;
    line-height: 17px;
}

.user-api-keys-empty {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    border: 1px dashed var(--cm-border);
    border-radius: 12px;
    background: #f8fafc;
    color: var(--cm-muted);
    font-size: 13px;
}

.user-api-keys-empty i {
    font-size: 20px;
}

.user-api-keys-list {
    display: grid;
    gap: 10px;
}

.user-api-keys-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid var(--cm-border);
    border-radius: 12px;
    background: #f8fafc;
}

.user-api-keys-item-main {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.user-api-keys-item-main strong {
    font-size: 14px;
    line-height: 20px;
    overflow-wrap: anywhere;
}

.user-api-keys-item-main span {
    color: var(--cm-muted);
    font-size: 12px;
    line-height: 17px;
    overflow-wrap: anywhere;
}

.user-api-keys-item-side {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-api-keys-form {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--cm-border);
    border-radius: 12px;
    background: #f8fafc;
}

.user-api-keys-form-row {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.user-api-keys-form-row .form-control {
    min-width: 0;
}

.user-api-keys-steps {
    display: grid;
    gap: 8px;
    margin: 0;
    padding-left: 18px;
    color: var(--cm-muted);
    font-size: 13px;
    line-height: 19px;
}

.user-api-keys-endpoint {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--cm-border);
    border-radius: 10px;
    background: #f8fafc;
}

.user-api-keys-endpoint span {
    color: var(--cm-muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.user-api-keys-endpoint code {
    color: var(--cm-text);
    font-size: 13px;
    overflow-wrap: anywhere;
}

.user-api-keys-snippet {
    border: 1px solid var(--cm-border);
    border-radius: 12px;
    overflow: hidden;
}

.user-api-keys-snippet summary {
    padding: 12px 14px;
    background: #f8fafc;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
}

.user-api-keys-code {
    position: relative;
    padding: 14px;
    background: #0b1727;
}

.user-api-keys-code pre {
    margin: 0;
    color: #e2e8f0;
    font-size: 12px;
    line-height: 18px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.user-api-keys-code .btn {
    position: absolute;
    top: 10px;
    right: 10px;
}

@media (max-width: 767.98px) {
    .user-api-keys-token-row {
        align-items: stretch;
        flex-direction: column;
    }

    .user-api-keys-item {
        align-items: flex-start;
        flex-direction: column;
    }

    .user-api-keys-item-side {
        width: 100%;
        justify-content: space-between;
    }
}

.billing-page-shell {
    width: 100%;
    max-width: 1040px;
    min-height: calc(100dvh - 180px);
    margin-inline: auto;
    padding-block: 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
}

.drivers-page-header.billing-page-header {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
}

.billing-page-header h1 {
    margin: 12px 0 8px;
    font-size: clamp(26px, 3vw, 34px);
    line-height: 1.2;
    letter-spacing: -.8px;
    font-weight: 700;
}

.billing-page-header .drivers-page-actions { justify-content: center; }

.billing-workspace-name {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--cm-muted);
    font-size: 13px;
    font-weight: 600;
}

.billing-workspace-name i { font-size: 18px; }

.billing-status-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px 20px;
    color: var(--cm-muted);
    font-size: 13px;
}

.billing-status-bar strong { color: var(--cm-text); font-weight: 600; }

.billing-price-card .billing-included-label {
    margin: 0 0 -6px;
    color: var(--cm-muted);
    font-size: 12px;
    font-weight: 600;
}

.billing-pricing-section {
    min-width: 0;
}

.billing-pricing-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 20px;
}

.billing-price-card {
    position: relative;
    overflow: hidden;
    min-width: 0;
    display: flex;
    flex-direction: column;
    flex: 0 1 440px;
    width: 100%;
    max-width: 100%;
    gap: 20px;
    min-height: 390px;
    padding: 28px;
    border: 1px solid var(--cm-border);
    border-radius: 14px;
    background: var(--cm-surface);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .04);
    transition: border-color .18s ease;
}

.billing-price-card:hover {
    border-color: #cfd6e3;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .04);
}

.billing-price-card.is-current {
    border-color: #b7c8ff;
    background: var(--cm-surface);
    box-shadow: 0 8px 24px rgba(37, 84, 232, .06);
}

.billing-price-card.is-recommended {
    border-color: #2554e8;
    box-shadow: 0 18px 44px rgba(37, 84, 232, .15);
}

.billing-price-card.is-recommended::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: #2554e8;
}

.billing-plan-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-height: 28px;
}

.billing-price-card-header {
    min-width: 0;
}

.billing-price-card-header h2 {
    margin: 0 0 6px;
    color: #101828;
    font-size: 24px;
    font-weight: 700;
    line-height: 30px;
}

.billing-price-card-header p {
    min-height: 0;
    margin: 0;
    color: #667085;
    font-size: 13px;
    line-height: 19px;
}

.billing-plan-type,
.billing-recommended-badge,
.billing-current-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 850;
    line-height: 14px;
    white-space: nowrap;
}

.billing-plan-type.is-public {
    border: 1px solid #a7f3d0;
    background: #ecfdf5;
    color: #047857;
}

.billing-plan-type.is-private {
    border: 1px solid #d1d5db;
    background: #f9fafb;
    color: #374151;
}

.billing-current-badge {
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #2554e8;
}

.billing-recommended-badge {
    border: 1px solid #101828;
    background: #101828;
    color: #ffffff;
}

.billing-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--cm-border);
    flex-wrap: wrap;
}

.billing-price strong {
    color: #101828;
    font-size: clamp(28px, 4vw, 38px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -1px;
}

.billing-price span {
    color: #667085;
    font-size: 14px;
    font-weight: 700;
}

.billing-limit-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

.billing-limit-list > div {
    min-width: 0;
    padding: 12px 8px;
    border: 1px solid #eef2f7;
    border-radius: 10px;
    background: #f8fafc;
}

.billing-limit-list dt {
    margin: 0 0 4px;
    color: #667085;
    font-size: 11px;
    font-weight: 600;
    line-height: 14px;
    text-transform: none;
}

.billing-limit-list dd {
    margin: 0;
    color: #101828;
    font-size: 18px;
    font-weight: 900;
    line-height: 24px;
}

.billing-feature-list {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.billing-feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
    color: #344054;
    font-size: 13px;
    line-height: 18px;
}

.billing-feature-list i {
    color: #12b76a;
    font-size: 17px;
    line-height: 18px;
}

.billing-card-form {
    margin-top: auto;
}

.billing-card-form .drivers-btn {
    width: 100%;
    justify-content: center;
    min-height: 44px;
    border-radius: 8px;
    font-weight: 600;
}

.billing-page-shell .drivers-empty-state {
    padding: 42px 20px;
}

@media (max-width: 767.98px) {
    .page-admin-wide .app-container {
        padding: 18px !important;
    }

    .billing-page-shell { min-height: auto; padding-block: 16px; gap: 20px; }
    .billing-price-card { padding: 22px; }
}

/* User form wizard: outrank the generic standard-popup grid applied to iframe forms. */
.app-popup-mode.page-standard-form-popup.page-user-form .app-popup-form {
    width: 100% !important;
    max-width: 780px !important;
    gap: 12px !important;
}

.app-popup-mode.page-standard-form-popup.page-user-form .app-popup-form-content {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.app-popup-mode.page-standard-form-popup.page-user-form .app-popup-form-footer {
    max-width: 780px !important;
    padding: 0 !important;
}

body.app-popup-mode.page-standard-form-popup.page-user-form:not(.page-driver-form):not(.page-van-form):not(.page-inspection360-form) .app-popup-form-content {
    display: block !important;
    grid-template-columns: none !important;
}

/* User wizard should read like one clean form surface, not a stack of cards. */
body.app-popup-mode.page-standard-form-popup.page-user-form .app-popup-form {
    max-width: 980px !important;
    gap: 18px !important;
    padding: 24px 28px 20px !important;
    border: 1px solid var(--cm-border-soft) !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: var(--cm-shadow-sm) !important;
}

body.app-popup-mode.page-standard-form-popup.page-user-form .app-popup-form-content {
    max-width: 100% !important;
}

body.app-popup-mode.page-standard-form-popup.page-user-form .user-form-shell {
    gap: 20px !important;
}

body.app-popup-mode.page-standard-form-popup.page-user-form .user-wizard-steps {
    gap: 12px !important;
    padding: 0 0 18px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--cm-border-soft) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.app-popup-mode.page-standard-form-popup.page-user-form .user-wizard-step {
    min-height: 58px !important;
    padding: 8px 10px !important;
    border-color: transparent !important;
    border-radius: 10px !important;
    background: transparent !important;
}

body.app-popup-mode.page-standard-form-popup.page-user-form .user-wizard-step.is-active {
    border-color: #bfdbfe !important;
    background: #eff6ff !important;
}

body.app-popup-mode.page-standard-form-popup.page-user-form .user-form-panel {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.app-popup-mode.page-standard-form-popup.page-user-form .user-form-section-header {
    display: none !important;
}

body.app-popup-mode.page-standard-form-popup.page-user-form .user-form-profile-layout {
    grid-template-columns: 150px minmax(0, 1fr) !important;
    gap: 28px !important;
}

body.app-popup-mode.page-standard-form-popup.page-user-form .user-form-avatar-card {
    min-height: 132px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

body.app-popup-mode.page-standard-form-popup.page-user-form .user-form-grid {
    gap: 18px 24px !important;
}

body.app-popup-mode.page-standard-form-popup.page-user-form .user-wizard-actions {
    align-items: center !important;
    padding-top: 2px !important;
}

body.app-popup-mode.page-standard-form-popup.page-user-form .app-popup-form-footer {
    max-width: 100% !important;
    padding-top: 16px !important;
    border-top: 1px solid var(--cm-border) !important;
}

body.app-popup-mode.page-standard-form-popup.page-user-form .user-wizard-summary {
    gap: 0 !important;
    border: 1px solid var(--cm-border-soft) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}

body.app-popup-mode.page-standard-form-popup.page-user-form .user-wizard-summary-card {
    border: 0 !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--cm-border-soft) !important;
    background: #ffffff !important;
}

body.app-popup-mode.page-standard-form-popup.page-user-form .user-wizard-summary-card:nth-last-child(-n + 2) {
    border-bottom: 0 !important;
}

body.app-popup-mode.page-standard-form-popup.page-user-form .user-wizard-summary-card:nth-child(odd) {
    border-right: 1px solid var(--cm-border-soft) !important;
}

@media (max-width: 767.98px) {
    body.app-popup-mode.page-standard-form-popup.page-user-form .app-popup-form {
        padding: 18px !important;
    }

    body.app-popup-mode.page-standard-form-popup.page-user-form .user-form-profile-layout {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    body.app-popup-mode.page-standard-form-popup.page-user-form .user-wizard-summary-card:nth-child(odd) {
        border-right: 0 !important;
    }

    body.app-popup-mode.page-standard-form-popup.page-user-form .user-wizard-summary-card:nth-last-child(-n + 2) {
        border-bottom: 1px solid var(--cm-border-soft) !important;
    }

    body.app-popup-mode.page-standard-form-popup.page-user-form .user-wizard-summary-card:last-child {
        border-bottom: 0 !important;
    }
}

.superadmin-workspaces-page {
    display: grid;
    gap: 22px;
}

.superadmin-workspaces-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
}

.superadmin-workspaces-header h1 {
    margin: 0;
    color: var(--cm-text);
    font-size: 28px;
    font-weight: 900;
    line-height: 34px;
}

.superadmin-eyebrow {
    display: block;
    margin-bottom: 4px;
    color: var(--cm-muted);
    font-size: 12px;
    font-weight: 850;
    line-height: 16px;
    text-transform: uppercase;
}

.superadmin-workspaces-total {
    min-width: 112px;
    display: grid;
    gap: 2px;
    padding: 10px 14px;
    border: 1px solid var(--cm-border-soft);
    border-radius: 10px;
    background: #ffffff;
    text-align: right;
    box-shadow: var(--cm-shadow-sm);
}

.superadmin-workspaces-total span {
    color: var(--cm-muted);
    font-size: 11px;
    font-weight: 800;
    line-height: 14px;
    text-transform: uppercase;
}

.superadmin-workspaces-total strong {
    color: var(--cm-text);
    font-size: 20px;
    font-weight: 900;
    line-height: 24px;
}

.superadmin-workspaces-filter {
    display: grid;
    grid-template-columns: minmax(260px, 560px) auto;
    gap: 10px;
    align-items: center;
}

.superadmin-workspaces-search {
    position: relative;
    min-width: 0;
}

.superadmin-workspaces-search i {
    position: absolute;
    top: 50%;
    left: 14px;
    z-index: 1;
    color: var(--cm-muted);
    font-size: 18px;
    line-height: 1;
    transform: translateY(-50%);
}

.superadmin-workspaces-search .form-control {
    height: 42px;
    padding-left: 42px;
    border-radius: 10px;
}

.superadmin-workspaces-filter .btn {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 10px;
    font-weight: 750;
}

.superadmin-workspaces-card {
    overflow: hidden;
    border: 1px solid var(--cm-border-soft);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: var(--cm-shadow-card);
}

.superadmin-workspaces-card-body {
    padding: 0;
}

.superadmin-workspaces-table {
    min-width: 1120px;
    table-layout: fixed;
}

.superadmin-workspaces-table thead th {
    padding: 14px 18px;
    border-bottom: 1px solid var(--cm-border-soft);
    background: #f8fafc;
    color: var(--cm-muted);
    font-size: 12px;
    font-weight: 850;
    line-height: 16px;
    text-transform: uppercase;
}

.superadmin-workspaces-table th:nth-child(1) {
    width: 30%;
}

.superadmin-workspaces-table th:nth-child(2) {
    width: 24%;
}

.superadmin-workspaces-table th:nth-child(3) {
    width: 12%;
}

.superadmin-workspaces-table th:nth-child(4) {
    width: 18%;
}

.superadmin-workspaces-table th:nth-child(5) {
    width: 10%;
}

.superadmin-workspaces-table th:nth-child(6) {
    width: 150px;
}

.superadmin-workspaces-table tbody td {
    padding: 18px;
    border-bottom: 1px solid var(--cm-border-soft);
    vertical-align: middle;
}

.superadmin-workspaces-table tbody tr:last-child td {
    border-bottom: 0;
}

.superadmin-workspace-identity {
    min-width: 0;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
}

.superadmin-workspace-logo {
    width: 58px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--cm-border);
    border-radius: 10px;
    background: #f8fafc;
    overflow: hidden;
}

.superadmin-workspace-logo img {
    width: auto;
    max-width: 48px;
    height: auto;
    max-height: 34px;
    object-fit: contain;
}

.superadmin-workspace-logo span {
    color: var(--cm-primary);
    font-size: 18px;
    font-weight: 900;
}

.superadmin-workspace-copy,
.superadmin-workspace-title {
    min-width: 0;
}

.superadmin-workspace-copy {
    display: grid;
    gap: 5px;
}

.superadmin-workspace-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.superadmin-workspace-title span {
    flex: 0 0 auto;
    color: var(--cm-muted);
    font-size: 12px;
    font-weight: 850;
}

.superadmin-workspace-title strong {
    min-width: 0;
    overflow: hidden;
    color: var(--cm-text);
    font-size: 14px;
    font-weight: 850;
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.superadmin-workspace-copy a,
.superadmin-workspace-copy small {
    min-width: 0;
    overflow: hidden;
    color: var(--cm-muted);
    font-size: 12px;
    line-height: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.superadmin-workspace-copy a:hover {
    color: var(--cm-primary);
}

.superadmin-billing-state {
    width: fit-content;
    margin-bottom: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 850;
    line-height: 16px;
}

.superadmin-billing-state.is-active {
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
    color: #15803d;
}

.superadmin-billing-state.is-inactive {
    border: 1px solid #fecdd3;
    background: #fff1f2;
    color: #e11d48;
}

.superadmin-workspaces-table td[data-label="Billing"] small {
    display: block;
    overflow-wrap: anywhere;
}

.superadmin-usage-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.superadmin-usage-grid > div {
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid var(--cm-border-soft);
    border-radius: 10px;
    background: #f8fafc;
}

.superadmin-usage-grid span,
.superadmin-workspace-dates span {
    display: block;
    color: var(--cm-muted);
    font-size: 11px;
    font-weight: 800;
    line-height: 14px;
}

.superadmin-usage-grid strong {
    display: block;
    color: var(--cm-text);
    font-size: 18px;
    font-weight: 900;
    line-height: 22px;
}

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

.superadmin-members-list span {
    max-width: 100%;
    padding: 4px 9px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #f8fafc;
    color: var(--cm-text);
    font-size: 12px;
    font-weight: 750;
    line-height: 16px;
    overflow-wrap: anywhere;
    white-space: normal;
}

.superadmin-workspace-dates {
    display: grid;
    gap: 6px;
}

.superadmin-workspace-dates strong {
    display: block;
    color: var(--cm-text);
    font-size: 12px;
    font-weight: 750;
    line-height: 16px;
    white-space: nowrap;
}

.superadmin-workspace-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.superadmin-workspace-actions .btn {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 9px;
    white-space: nowrap;
}

.superadmin-workspaces-pagination {
    padding: 14px 18px 18px;
    border-top: 1px solid var(--cm-border-soft);
}

@media (max-width: 1199.98px) {
    .superadmin-workspaces-table {
        min-width: 980px;
    }

    .superadmin-workspaces-table th:nth-child(4),
    .superadmin-workspaces-table td:nth-child(4) {
        display: none;
    }
}

@media (max-width: 991.98px) {
    .page-superadmin-workspaces .table-responsive {
        overflow: visible !important;
    }

    .superadmin-workspaces-table,
    .superadmin-workspaces-table thead,
    .superadmin-workspaces-table tbody,
    .superadmin-workspaces-table tr,
    .superadmin-workspaces-table td {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
    }

    .superadmin-workspaces-table {
        border-collapse: separate;
        border-spacing: 0;
    }

    .superadmin-workspaces-table thead {
        display: none;
    }

    .superadmin-workspaces-table tbody {
        display: grid;
        gap: 12px;
        padding: 14px;
    }

    .superadmin-workspaces-table tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
        gap: 12px;
        padding: 14px;
        border: 1px solid var(--cm-border-soft);
        border-radius: 12px;
        background: #ffffff;
        box-shadow: var(--cm-shadow-sm);
    }

    .superadmin-workspaces-table tbody td {
        display: grid !important;
        grid-template-columns: 112px minmax(0, 1fr);
        align-items: start;
        justify-self: stretch;
        gap: 12px;
        padding: 0;
        border: 0;
    }

    .superadmin-workspaces-table tbody td::before {
        content: attr(data-label);
        color: var(--cm-muted);
        font-size: 11px;
        font-weight: 850;
        line-height: 16px;
        text-transform: uppercase;
    }

    .superadmin-workspace-identity {
        grid-template-columns: 50px minmax(0, 1fr);
    }

    .superadmin-workspace-logo {
        width: 50px;
        height: 44px;
    }

    .superadmin-members-list {
        max-height: none;
    }

    .page-superadmin-workspaces .app-content table.superadmin-workspaces-table tbody tr td {
        height: auto !important;
    }

    .superadmin-workspace-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .superadmin-workspaces-table tbody td:last-child,
    .superadmin-workspaces-table tbody td.app-action-cell,
    .page-superadmin-workspaces .app-content table.superadmin-workspaces-table tbody tr td.app-action-cell,
    .superadmin-workspace-actions {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        inline-size: 100% !important;
        white-space: normal !important;
        text-align: left !important;
    }
}

@media (max-width: 767.98px) {
    .page-superadmin-workspaces .app-container {
        padding: 16px !important;
    }

    .superadmin-workspaces-header {
        align-items: stretch;
        flex-direction: column;
    }

    .superadmin-workspaces-header h1 {
        font-size: 24px;
        line-height: 30px;
    }

    .superadmin-workspaces-total {
        width: 100%;
        text-align: left;
    }

    .superadmin-workspaces-filter {
        grid-template-columns: 1fr;
    }

    .superadmin-workspaces-filter .btn {
        width: 100%;
    }

    .superadmin-workspaces-card {
        border-radius: 12px;
    }

    .superadmin-workspaces-table tbody {
        padding: 10px;
    }

    .superadmin-workspaces-table tbody tr {
        padding: 12px;
    }

    .superadmin-workspaces-table tbody td {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .superadmin-usage-grid {
        grid-template-columns: 1fr 1fr;
    }

    .superadmin-workspace-actions,
    .superadmin-workspace-actions form,
    .superadmin-workspace-actions .btn {
        width: 100%;
    }

    .superadmin-workspaces-pagination {
        padding: 12px;
    }
}

@media (max-width: 420px) {
    .superadmin-workspace-identity {
        grid-template-columns: 1fr;
    }

    .superadmin-workspace-logo {
        width: 58px;
    }

    .superadmin-usage-grid {
        grid-template-columns: 1fr;
    }
}

/* Driver profile tabs: make every legacy tab table behave like the modern full-width sections. */
.page-driver-profile .driver-profile-tab-content .table-responsive,
.page-driver-profile .driver-profile-tab-content .table-sticky-wrapper,
.page-driver-profile .driver-profile-tab-content .driver-tab-table-card,
.page-driver-profile .driver-profile-tab-content .drivers-table-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    border-radius: 8px !important;
}

.page-driver-profile .driver-profile-tab-content table,
.page-driver-profile .driver-profile-tab-content .driver-tab-clean-table,
.page-driver-profile .driver-profile-tab-content .driver-scorecards-table,
.page-driver-profile .driver-profile-tab-content .driver-evaluations-table,
.page-driver-profile .driver-profile-tab-content .driver-documents-table,
.page-driver-profile .driver-profile-tab-content .driver-mobile-damages-table,
.page-driver-profile .driver-profile-tab-content .driver-dnr-table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed !important;
}

.page-driver-profile .driver-profile-tab-content table th,
.page-driver-profile .driver-profile-tab-content table td,
.page-driver-profile .driver-profile-tab-content .driver-tab-clean-table th,
.page-driver-profile .driver-profile-tab-content .driver-tab-clean-table td {
    min-width: 0 !important;
    max-width: none !important;
    padding: 12px 10px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    text-overflow: clip !important;
}

.page-driver-profile .driver-profile-tab-content table th {
    height: 44px !important;
    vertical-align: middle !important;
}

.page-driver-profile .driver-profile-tab-content table td {
    height: auto !important;
    min-height: 52px !important;
}

.page-driver-profile .driver-profile-tab-content table :is(th.app-actions-header, th:last-child.app-actions-header),
.page-driver-profile .driver-profile-tab-content table :is(td.app-action-cell, td:last-child:has(.app-inline-actions), td:last-child:has(.driver-tab-actions), td:last-child:has(.drivers-row-actions), td:last-child:has(.app-table-action)) {
    width: 132px !important;
    min-width: 132px !important;
    max-width: 132px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    text-align: right !important;
    white-space: nowrap !important;
}

.page-driver-profile .driver-profile-tab-content table :is(.app-inline-actions, .driver-tab-actions, .drivers-row-actions, .table-actions, .cm-table-actions, .action-buttons) {
    width: 100% !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
}

.page-driver-profile .driver-profile-tab-content table :is(.app-table-action, .app-created-info) {
    flex: 0 0 24px !important;
}

.page-driver-profile .driver-profile-tab-content .app-created-column-hidden {
    display: none !important;
}

.page-driver-profile .driver-profile-tab-content :is(.warnings-note, .phone-damage-comment, .driver-tab-clip, .driver-tab-wide-clip) {
    max-width: 100% !important;
    white-space: normal !important;
}

@media (max-width: 991.98px) {
    .page-driver-profile .driver-profile-tab-content .table-responsive,
    .page-driver-profile .driver-profile-tab-content .table-sticky-wrapper,
    .page-driver-profile .driver-profile-tab-content .driver-tab-table-card,
    .page-driver-profile .driver-profile-tab-content .drivers-table-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .page-driver-profile .driver-profile-tab-content table,
    .page-driver-profile .driver-profile-tab-content .driver-tab-clean-table {
        min-width: 860px !important;
    }
}

/* Van profile tabs: keep every tab table inside the same full-width section system. */
.page-van-profile .driver-profile-tab-content .table-responsive,
.page-van-profile .driver-profile-tab-content .table-sticky-wrapper,
.page-van-profile .driver-profile-tab-content .driver-tab-table-card,
.page-van-profile .driver-profile-tab-content .drivers-table-wrapper,
.page-van-profile .driver-profile-tab-content .van-tab-card {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    border-radius: 8px !important;
}

.page-van-profile .driver-profile-tab-content table,
.page-van-profile .driver-profile-tab-content .app-data-table,
.page-van-profile .driver-profile-tab-content .van-accidents-tab-table,
.page-van-profile .driver-profile-tab-content .van-maintenance-tab-table,
.page-van-profile .driver-profile-tab-content .van-fuel-tab-table,
.page-van-profile .driver-profile-tab-content .van-pave-tab-table,
.page-van-profile .driver-profile-tab-content .van-inspections-tab-table,
.page-van-profile .driver-profile-tab-content .van-incidences-tab-table,
.page-van-profile .driver-profile-tab-content .van-documents-tab-table,
.page-van-profile .driver-profile-tab-content .van-fines-tab-table,
.page-van-profile .driver-profile-tab-content .van-inventory-tab-table,
.page-van-profile .driver-profile-tab-content .van-doc-flow-table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed !important;
}

.page-van-profile .driver-profile-tab-content table th,
.page-van-profile .driver-profile-tab-content table td {
    min-width: 0 !important;
    max-width: none !important;
    padding: 12px 10px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    text-overflow: clip !important;
}

.page-van-profile .driver-profile-tab-content table th {
    height: 44px !important;
    vertical-align: middle !important;
}

.page-van-profile .driver-profile-tab-content table td {
    height: auto !important;
    min-height: 52px !important;
}

.page-van-profile .driver-profile-tab-content table :is(th.app-actions-header, th:last-child.app-actions-header),
.page-van-profile .driver-profile-tab-content table :is(td.app-action-cell, td:last-child:has(.app-inline-actions), td:last-child:has(.driver-tab-actions), td:last-child:has(.drivers-row-actions), td:last-child:has(.app-table-action)) {
    width: 132px !important;
    min-width: 132px !important;
    max-width: 132px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    text-align: right !important;
    white-space: nowrap !important;
}

.page-van-profile .driver-profile-tab-content table :is(.app-inline-actions, .driver-tab-actions, .drivers-row-actions, .table-actions, .cm-table-actions, .action-buttons) {
    width: 100% !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
}

.page-van-profile .driver-profile-tab-content table :is(.app-table-action, .app-created-info) {
    flex: 0 0 24px !important;
}

.page-van-profile .driver-profile-tab-content .app-created-column-hidden {
    display: none !important;
}

.page-van-profile .driver-profile-tab-content :is(.driver-tab-clip, .driver-tab-wide-clip, .van-doc-type, .van-doc-date) {
    max-width: 100% !important;
    white-space: normal !important;
}

@media (max-width: 991.98px) {
    .page-van-profile .driver-profile-tab-content .table-responsive,
    .page-van-profile .driver-profile-tab-content .table-sticky-wrapper,
    .page-van-profile .driver-profile-tab-content .driver-tab-table-card,
    .page-van-profile .driver-profile-tab-content .drivers-table-wrapper,
    .page-van-profile .driver-profile-tab-content .van-tab-card {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .page-van-profile .driver-profile-tab-content table,
    .page-van-profile .driver-profile-tab-content .app-data-table {
        min-width: 860px !important;
    }
}

/* Fleet incidences final table alignment. Keep action tools inside the visible section. */
.page-incidences-fleet .app-content table.incidences-table :is(th.app-actions-header, th:last-child.app-actions-header),
.page-incidences-fleet .app-content table.incidences-table :is(td.app-action-cell, td:last-child:has(.app-inline-actions)) {
    width: 132px !important;
    min-width: 132px !important;
    max-width: 132px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    text-align: right !important;
    white-space: nowrap !important;
}

.page-incidences-fleet .app-content table.incidences-table .app-inline-actions {
    width: 100% !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
}

/* Mobile app shell: final overrides for the customized Ubold layout. */
@media (max-width: 1140px) {
    html:not([data-layout="horizontal"]) .app-menu.app-sidebar {
        position: fixed !important;
        top: 0 !important;
        right: auto !important;
        left: 0 !important;
        z-index: 1040 !important;
        width: min(84vw, 292px) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 48px) !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        padding-bottom: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateX(-104%) !important;
        transition: transform .22s ease, box-shadow .22s ease !important;
        box-shadow: none !important;
    }

    html.sidebar-enable:not([data-layout="horizontal"]) .app-menu.app-sidebar {
        transform: translateX(0) !important;
        box-shadow: 24px 0 50px rgba(15, 23, 42, .28) !important;
    }

    html.sidebar-enable body.app-body {
        overflow: hidden !important;
    }

    #custom-backdrop.offcanvas-backdrop {
        z-index: 1035 !important;
        background-color: rgba(15, 23, 42, .44) !important;
    }

    .app-sidebar-shell,
    .app-sidebar-scroll {
        min-height: 0 !important;
        max-height: calc(100dvh - 56px) !important;
    }
}

@media (max-width: 767.98px) {
    .app-topbar,
    .navbar-custom.app-topbar {
        height: 56px !important;
        min-height: 56px !important;
    }

    .app-topbar-inner {
        height: 56px !important;
        padding: 0 14px !important;
    }

    .app-icon-button,
    .app-topbar-action,
    .app-topbar-user,
    .app-topbar-avatar {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
    }

    .content-page.app-content-page,
    .app-content-page,
    .content-page {
        width: 100% !important;
        max-width: 100vw !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .app-content .app-container,
    .page-tasks-redesign .app-container,
    .page-dashboard .app-container {
        padding: 14px !important;
    }

    .app-breadcrumb-row,
    .drivers-page-header,
    .tasks-page-header {
        gap: 12px !important;
    }

    .app-breadcrumb-actions,
    .drivers-page-actions {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .app-breadcrumb-actions .btn,
    .drivers-page-actions .btn,
    .drivers-page-actions .drivers-btn,
    .tasks-primary-button {
        width: 100% !important;
        min-height: 40px !important;
        white-space: normal !important;
    }

    .app-content .table-responsive,
    .app-content .table-sticky-wrapper,
    .app-content .drivers-table-wrapper,
    .app-content .dataTables_wrapper {
        max-width: 100% !important;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    .app-content .drivers-table-wrapper,
    .app-content .table-sticky-wrapper {
        max-height: min(70dvh, 620px) !important;
    }

    .app-content .app-inline-actions,
    .app-content .drivers-row-actions,
    .app-content .table-actions,
    .app-content .cm-table-actions,
    .tasks-card-actions {
        opacity: 1 !important;
    }
}

@media (max-width: 575.98px) {
    .page-dashboard .dashboard-redesign {
        gap: 12px !important;
    }

    .page-dashboard .dashboard-kpi-grid,
    .page-drivers-redesign .app-content [class*="-metrics-grid"],
    .app-content .drivers-metrics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .page-dashboard .dashboard-kpi-card,
    .page-drivers-redesign .app-content .drivers-metric-card,
    .page-drivers-redesign .app-content [class*="-metric-card"],
    .app-content .drivers-metric-card {
        min-height: 86px !important;
        gap: 4px !important;
        padding: 12px !important;
        border-radius: 8px !important;
    }

    .page-dashboard .dashboard-kpi-icon {
        width: 30px !important;
        height: 30px !important;
        border-radius: 8px !important;
        font-size: 16px !important;
    }

    .page-dashboard .dashboard-kpi-value,
    .page-drivers-redesign .app-content .drivers-metric-card strong,
    .page-drivers-redesign .app-content [class*="-metric-card"] strong,
    .app-content .drivers-metric-card strong {
        margin: 4px 0 0 !important;
        font-size: 22px !important;
        line-height: 26px !important;
    }

    .page-dashboard .dashboard-kpi-label,
    .page-drivers-redesign .app-content .drivers-metric-card span,
    .page-drivers-redesign .app-content [class*="-metric-card"] span,
    .page-drivers-redesign .app-content .drivers-metric-card small,
    .page-drivers-redesign .app-content [class*="-metric-card"] small,
    .app-content .drivers-metric-card span,
    .app-content .drivers-metric-card small {
        font-size: 12px !important;
        line-height: 16px !important;
    }

    .page-dashboard .dashboard-tabs-nav {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding-bottom: 1px !important;
        scrollbar-width: none;
    }

    .page-dashboard .dashboard-tabs-nav::-webkit-scrollbar {
        display: none;
    }

    .page-dashboard .dashboard-tabs-nav > li {
        flex: 0 0 auto !important;
    }

    .page-dashboard .dashboard-tabs-nav .ms-auto {
        width: auto !important;
        margin-left: 0 !important;
    }

    .page-dashboard .dashboard-tabs-nav .nav-link,
    .page-dashboard .dashboard-refresh-link {
        min-height: 38px !important;
        padding: 8px 10px !important;
    }

    .page-dashboard .dashboard-section-grid-three,
    .page-dashboard .dashboard-section-grid-two {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        margin-bottom: 12px !important;
    }

    .page-dashboard .dashboard-panel {
        min-height: 0 !important;
        padding: 18px !important;
        border-radius: 8px !important;
    }

    .page-dashboard .dashboard-quick-links {
        grid-template-columns: 1fr !important;
    }

    .page-dashboard .dashboard-task-grid,
    .page-dashboard .dashboard-metric-pair {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .page-dashboard .task-mini,
    .page-dashboard .dashboard-metric-pair a {
        min-height: 58px !important;
        padding: 8px !important;
    }

    .page-dashboard .dashboard-calendar-panel {
        min-height: 0 !important;
    }

    .page-dashboard .dashboard-calendar-panel > header {
        align-items: flex-start !important;
        flex-direction: column !important;
    }

    .page-dashboard .dashboard-calendar-actions {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .page-dashboard .dashboard-calendar-actions button,
    .page-dashboard .dashboard-calendar-title a {
        min-height: 34px !important;
        padding: 0 8px !important;
    }

    .page-dashboard .dashboard-calendar-weekday,
    .page-dashboard .dashboard-calendar-cell {
        min-height: 38px !important;
        font-size: 12px !important;
    }

    .page-tasks-redesign .tasks-page-shell {
        gap: 14px !important;
    }

    .page-tasks-redesign .tasks-board {
        display: flex !important;
        grid-template-columns: none !important;
        gap: 12px !important;
        margin-right: -14px !important;
        padding-right: 14px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .page-tasks-redesign .tasks-column {
        flex: 0 0 min(88vw, 330px) !important;
        scroll-snap-align: start;
    }

    .page-tasks-redesign .tasks-list {
        max-height: calc(100dvh - 196px) !important;
        overflow-y: auto !important;
        padding-right: 2px !important;
        -webkit-overflow-scrolling: touch;
    }

    .van-wizard-layout,
    .app-popup-mode.page-van-form .van-wizard-layout {
        display: block !important;
        grid-template-columns: 1fr !important;
    }

    .van-wizard-steps,
    .app-popup-mode.page-van-form .van-wizard-steps {
        display: none !important;
    }

    .van-wizard-main,
    .app-popup-mode.page-van-form .van-wizard-main {
        padding: 18px !important;
    }

    .van-wizard-grid,
    .van-wizard-follow-grid,
    .app-popup-mode.page-van-form .van-wizard-grid,
    .app-popup-mode.page-van-form .van-wizard-follow-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .van-wizard-footer,
    .app-popup-mode.page-van-form .van-wizard-footer {
        align-items: stretch !important;
        flex-direction: column !important;
        gap: 10px !important;
        padding: 12px 0 0 !important;
    }

    .van-wizard-footer > div,
    .app-popup-mode.page-van-form .van-wizard-footer > div {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .van-wizard-footer .btn,
    .app-popup-mode.page-van-form .van-wizard-footer .btn {
        width: 100% !important;
    }
}

@media (max-width: 360px) {
    .page-dashboard .dashboard-kpi-grid,
    .page-drivers-redesign .app-content [class*="-metrics-grid"],
    .app-content .drivers-metrics-grid,
    .app-breadcrumb-actions,
    .drivers-page-actions {
        grid-template-columns: 1fr !important;
    }

    .page-dashboard .dashboard-quick-links {
        grid-template-columns: 1fr !important;
    }
}

/* Vans table: keep operational column headers readable inside the mobile scroller. */
.page-vans-redesign .vans-table {
    min-width: 1360px !important;
}

.page-vans-redesign .vans-table thead th {
    height: 50px !important;
    min-height: 50px !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
}

.page-vans-redesign .vans-table :is(th, td):nth-child(1) {
    min-width: 210px !important;
}

.page-vans-redesign .vans-table :is(th, td):nth-child(2) {
    min-width: 118px !important;
}

.page-vans-redesign .vans-table :is(th, td):nth-child(3) {
    min-width: 145px !important;
}

.page-vans-redesign .vans-table :is(th, td):nth-child(4) {
    min-width: 120px !important;
}

.page-vans-redesign .vans-table :is(th, td):nth-child(5) {
    min-width: 88px !important;
}

.page-vans-redesign .vans-table :is(th, td):nth-child(6) {
    min-width: 165px !important;
}

.page-vans-redesign .vans-table :is(th, td):nth-child(7) {
    min-width: 175px !important;
}

.page-vans-redesign .vans-table :is(th, td):nth-child(8) {
    min-width: 140px !important;
}

.page-vans-redesign .vans-table :is(th, td):nth-child(9) {
    min-width: 128px !important;
}

.page-vans-redesign .vans-table :is(th, td):nth-child(10) {
    min-width: 132px !important;
}

.page-vans-redesign .vans-table :is(th, td):nth-child(11) {
    min-width: 132px !important;
}

/* Mobile van popup: keep the close control visible and let the embedded form scroll. */
@media (max-width: 767.98px) {
    .app-popup-modal.app-van-form-popup .modal-dialog.modal-dialog-centered {
        width: 100vw !important;
        max-width: 100vw !important;
        min-height: calc(100dvh - 16px) !important;
        height: calc(100dvh - 16px) !important;
        align-items: flex-start !important;
        margin: 8px 0 !important;
    }

    .app-popup-modal.app-van-form-popup .modal-content {
        width: 100% !important;
        height: calc(100dvh - 16px) !important;
        max-height: calc(100dvh - 16px) !important;
        border-radius: 0 !important;
    }

    .app-popup-modal.app-van-form-popup .modal-header {
        min-height: 52px !important;
        padding: 0 14px !important;
    }

    .app-popup-modal.app-van-form-popup .modal-title {
        font-size: 16px !important;
        line-height: 22px !important;
    }

    .app-popup-modal.app-van-form-popup .btn-close {
        width: 32px !important;
        height: 32px !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        align-self: center !important;
    }

    .app-popup-modal.app-van-form-popup .modal-body {
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .app-popup-modal.app-van-form-popup .app-popup-frame {
        height: calc(100dvh - 68px) !important;
        max-height: calc(100dvh - 68px) !important;
    }

    .app-popup-mode.page-van-form,
    .app-popup-mode.page-van-form body {
        height: auto !important;
        min-height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
    }

    .app-popup-mode.page-van-form .app-wrapper,
    .app-popup-mode.page-van-form .content-page,
    .app-popup-mode.page-van-form .content,
    .app-popup-mode.page-van-form .app-container,
    .app-popup-mode.page-van-form .van-wizard-form,
    .app-popup-mode.page-van-form .van-wizard-layout {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    .app-popup-mode.page-van-form .app-container {
        padding: 12px !important;
    }

    .app-popup-mode.page-van-form .van-wizard-main {
        padding: 16px !important;
        overflow: visible !important;
    }
}

/* Final mobile table pass: all operational tables scroll horizontally with readable headers. */
@media (max-width: 767.98px) {
    .app-content :is(.drivers-table-wrapper, .table-responsive, .table-sticky-wrapper, .dataTables_wrapper) {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    .app-content :is(.drivers-table-wrapper, .table-responsive, .table-sticky-wrapper) > table,
    .app-content :is(.drivers-table, .app-data-table, table.dataTable, table[id="example"]) {
        width: max-content !important;
        min-width: max(100%, 920px) !important;
        max-width: none !important;
        table-layout: auto !important;
    }

    .app-content :is(.drivers-table, .app-data-table, .table, table.dataTable, table[id="example"]) thead th {
        min-width: 112px !important;
        height: 50px !important;
        min-height: 50px !important;
        vertical-align: middle !important;
        white-space: nowrap !important;
        overflow-wrap: normal !important;
        word-break: keep-all !important;
        text-overflow: clip !important;
    }

    .app-content :is(.drivers-table, .app-data-table, .table, table.dataTable, table[id="example"]) :is(th, td) {
        overflow-wrap: normal !important;
        word-break: normal !important;
    }

    .app-content :is(.drivers-table, .app-data-table, .table, table.dataTable, table[id="example"]) :is(th:first-child, td:first-child) {
        min-width: 168px !important;
    }

    .app-content :is(.drivers-table, .app-data-table, .table, table.dataTable, table[id="example"]) :is(th:last-child, td:last-child) {
        min-width: 112px !important;
        white-space: nowrap !important;
    }
}

/* Mobile section tops: make actions and KPI cards scan as distinct controls. */
.app-content .drivers-metric-card {
    position: relative !important;
    overflow: hidden !important;
    border-color: color-mix(in srgb, var(--metric-color, #d1d5db) 30%, #ffffff) !important;
    background: linear-gradient(180deg, var(--metric-bg, #ffffff) 0%, #ffffff 100%) !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .07) !important;
}

.app-content .drivers-metric-card::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    height: 3px !important;
    background: var(--metric-color, #d1d5db) !important;
}

.drivers-metric-green,
.phones-metric-available,
.phone-damages-metric-repair {
    --metric-bg: #ecfdf5;
}

.drivers-metric-blue,
.documentation-metric-expiring,
.phone-damages-metric-total {
    --metric-bg: #eff6ff;
}

.drivers-metric-amber,
.documentation-metric-pending {
    --metric-bg: #fffbeb;
}

.drivers-metric-red,
.documentation-metric-expired,
.phone-damages-metric-hit {
    --metric-bg: #fef2f2;
}

.drivers-metric-purple {
    --metric-bg: #f5f3ff;
}

.drivers-metric-slate,
.phones-metric-total,
.phones-metric-assigned {
    --metric-bg: #f8fafc;
}

@media (max-width: 767.98px) {
    .app-content .drivers-page-actions {
        padding: 8px !important;
        border: 1px solid var(--cm-border-soft) !important;
        border-radius: 8px !important;
        background: #ffffff !important;
        box-shadow: 0 8px 18px rgba(15, 23, 42, .06) !important;
    }

    .app-content .drivers-page-actions .dropdown {
        width: 100% !important;
    }

    .app-content .drivers-page-actions .drivers-btn {
        border-radius: 8px !important;
        font-weight: 700 !important;
        line-height: 18px !important;
        box-shadow: none !important;
    }

    .app-content .drivers-page-actions .drivers-btn-outline {
        border-color: #cbd5e1 !important;
        background: #f8fafc !important;
        color: #334155 !important;
    }

    .app-content .drivers-page-actions .drivers-btn-primary {
        border-color: #1d4ed8 !important;
        background: #1d4ed8 !important;
        color: #ffffff !important;
        grid-column: 1 / -1 !important;
        box-shadow: 0 8px 16px rgba(29, 78, 216, .22) !important;
    }

    .app-content .drivers-page-actions .drivers-btn i {
        flex: 0 0 auto !important;
    }

    .app-content .drivers-metrics-grid {
        gap: 10px !important;
    }

    .page-drivers-redesign .app-content .drivers-metrics-grid .drivers-metric-card,
    .page-drivers-redesign .app-content [class*="-metrics-grid"] .drivers-metric-card,
    .app-content .drivers-metric-card {
        align-items: flex-start !important;
        justify-content: center !important;
        min-height: 90px !important;
        padding: 16px 14px 14px !important;
        border-color: color-mix(in srgb, var(--metric-color, #d1d5db) 34%, #ffffff) !important;
        background-color: var(--metric-bg, #ffffff) !important;
        background-image: linear-gradient(180deg, var(--metric-bg, #ffffff) 0%, #ffffff 108%) !important;
        box-shadow: 0 8px 18px rgba(15, 23, 42, .08) !important;
        text-align: left !important;
    }

    .app-content .drivers-metric-card strong,
    .page-drivers-redesign .app-content .drivers-metric-card strong,
    .page-drivers-redesign .app-content [class*="-metric-card"] strong {
        font-size: 24px !important;
        line-height: 30px !important;
    }

    .app-content .drivers-metric-card span,
    .app-content .drivers-metric-card small,
    .page-drivers-redesign .app-content .drivers-metric-card span,
    .page-drivers-redesign .app-content [class*="-metric-card"] span,
    .page-drivers-redesign .app-content .drivers-metric-card small,
    .page-drivers-redesign .app-content [class*="-metric-card"] small {
        color: #475569 !important;
        font-weight: 600 !important;
    }
}

/* Documentation popup: preserve full-width fields inside the shared two-column form grid. */
.app-popup-mode:is(.page-standard-form-popup, .page-documentation-form) .app-popup-form-content > .col-12,
.app-popup-mode:is(.page-standard-form-popup, .page-documentation-form) .app-popup-form-content > .documentation-assign-field,
.app-popup-mode:is(.page-standard-form-popup, .page-documentation-form) .app-popup-form-content > .documentation-expiration-field,
.app-popup-mode:is(.page-standard-form-popup, .page-documentation-form) .app-popup-form-content > #expires_at_wrapper {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

.app-popup-mode:is(.page-standard-form-popup, .page-documentation-form) .app-popup-form-content > .col-12 :is(.form-control, .form-select, .select2-container),
.app-popup-mode:is(.page-standard-form-popup, .page-documentation-form) .documentation-assign-field :is(.form-control, .form-select, .select2-container),
.app-popup-mode:is(.page-standard-form-popup, .page-documentation-form) .documentation-expiration-field :is(.form-control, .form-select, .select2-container),
.app-popup-mode:is(.page-standard-form-popup, .page-documentation-form) #expires_at_wrapper :is(.form-control, .form-select, .select2-container) {
    width: 100% !important;
    max-width: 100% !important;
}

body.app-popup-mode.page-standard-form-popup.page-documentation-form .app-popup-form-content > .col-12.mb-3,
body.app-popup-mode.page-standard-form-popup.page-documentation-form .app-popup-form-content > .documentation-assign-field.col-12,
body.app-popup-mode.page-standard-form-popup.page-documentation-form .app-popup-form-content > .documentation-expiration-field.col-12,
body.app-popup-mode.page-standard-form-popup.page-documentation-form .app-popup-form-content > #expires_at_wrapper.col-12 {
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

body.app-popup-mode.page-standard-form-popup.page-documentation-form .app-popup-form-content > .col-12.mb-3 :is(.form-control, .form-select, .select2-container, .select2-selection),
body.app-popup-mode.page-standard-form-popup.page-documentation-form .documentation-assign-field :is(.form-control, .form-select, .select2-container, .select2-selection),
body.app-popup-mode.page-standard-form-popup.page-documentation-form .documentation-expiration-field :is(.form-control, .form-select, .select2-container, .select2-selection),
body.app-popup-mode.page-standard-form-popup.page-documentation-form #expires_at_wrapper :is(.form-control, .form-select, .select2-container, .select2-selection) {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Summary metric cards: keep every section neutral, without colored headers. */
.app-content .drivers-metric-card,
.app-content .drivers-metric-card.is-active {
    --metric-color: #111827 !important;
    --metric-bg: #ffffff !important;
    --metric-border: var(--cm-border-soft) !important;
    border-color: var(--cm-border-soft) !important;
    background: #ffffff !important;
    background-image: none !important;
}

.app-content .drivers-metric-card::before {
    display: none !important;
    background: transparent !important;
}

.app-content .drivers-metric-card strong {
    color: var(--cm-text) !important;
}

/* Requested list refinements */
.app-overflow-tooltip-enabled {
    cursor: help;
}

.tooltip .tooltip-inner {
    max-width: min(420px, calc(100vw - 24px));
    text-align: left;
    white-space: pre-wrap;
    word-break: break-word;
}

.app-content table [data-overflow-tooltip] {
    min-width: 0;
}

.warnings-note-cell,
.absence-reason-cell,
.evaluation-comment-cell,
.dnr-reason-cell,
.fine-description-cell {
    display: block !important;
}

.phone-number-value,
.phone-model-pill,
.phone-imei-link,
.phone-status-pill {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.phone-number-value {
    display: inline-block;
    vertical-align: middle;
}

.page-supports-redesign .app-container {
    max-width: none;
    padding: 30px 34px;
}

.page-supports-redesign .app-search-card,
.page-supports-redesign .app-search-form,
.page-supports-redesign .supports-table-card {
    width: 100% !important;
    max-width: 100% !important;
}

.page-supports-redesign .supports-table {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed;
}

.page-supports-redesign .supports-table :is(th, td) {
    vertical-align: middle;
}

.page-supports-redesign .supports-table :is(th:nth-child(1), td:nth-child(1)),
.page-supports-redesign .supports-table :is(th:nth-child(3), td:nth-child(3)) {
    width: 20%;
}

.page-supports-redesign .supports-table :is(th:nth-child(2), td:nth-child(2)),
.page-supports-redesign .supports-table :is(th:nth-child(5), td:nth-child(5)),
.page-supports-redesign .supports-table :is(th:nth-child(7), td:nth-child(7)),
.page-supports-redesign .supports-table :is(th:nth-child(8), td:nth-child(8)) {
    width: 10%;
}

.page-supports-redesign .supports-table :is(th:nth-child(4), td:nth-child(4)) {
    width: 22%;
}

.page-supports-redesign .supports-table :is(th:nth-child(6), td:nth-child(6)) {
    width: 8%;
}

.supports-reason,
.supports-zone {
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: var(--cm-text);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-van-accidents-redesign .van-accidents-table {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
}

.page-van-accidents-redesign .van-accidents-table :is(th, td) {
    min-width: 0 !important;
    padding-inline: 8px !important;
    overflow: hidden;
    font-size: 12px !important;
}

.page-van-accidents-redesign .van-accidents-table :is(th, td):nth-child(1) { width: 8% !important; }
.page-van-accidents-redesign .van-accidents-table :is(th, td):nth-child(2) { width: 10% !important; }
.page-van-accidents-redesign .van-accidents-table :is(th, td):nth-child(3) { width: 8% !important; }
.page-van-accidents-redesign .van-accidents-table :is(th, td):nth-child(4) { width: 8% !important; }
.page-van-accidents-redesign .van-accidents-table :is(th, td):nth-child(5) { width: 13% !important; }
.page-van-accidents-redesign .van-accidents-table :is(th, td):nth-child(6) { width: 7% !important; }
.page-van-accidents-redesign .van-accidents-table :is(th, td):nth-child(7),
.page-van-accidents-redesign .van-accidents-table :is(th, td):nth-child(8),
.page-van-accidents-redesign .van-accidents-table :is(th, td):nth-child(9),
.page-van-accidents-redesign .van-accidents-table :is(th, td):nth-child(10),
.page-van-accidents-redesign .van-accidents-table :is(th, td):nth-child(11),
.page-van-accidents-redesign .van-accidents-table :is(th, td):nth-child(12),
.page-van-accidents-redesign .van-accidents-table :is(th, td):nth-child(13) { width: 5% !important; }
.page-van-accidents-redesign .van-accidents-table :is(th, td):nth-child(14) { width: 3% !important; }
.page-van-accidents-redesign .van-accidents-table :is(th, td):nth-child(15) { width: 8% !important; }

.page-van-accidents-redesign .van-accidents-table .app-driver-avatar-link,
.page-van-accidents-redesign .van-accidents-table .accident-clip {
    max-width: 100% !important;
}

.page-insurance-claims .drivers-table-wrapper {
    overflow-x: visible;
}

.page-insurance-claims .insurance-table {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
}

.page-insurance-claims .insurance-table :is(th, td) {
    min-width: 0 !important;
    padding-inline: 10px !important;
}

.page-insurance-claims .insurance-table :is(th:nth-child(1), td:nth-child(1)) { width: 9% !important; }
.page-insurance-claims .insurance-table :is(th:nth-child(2), td:nth-child(2)) { width: 10% !important; }
.page-insurance-claims .insurance-table :is(th:nth-child(3), td:nth-child(3)) { width: 17% !important; }
.page-insurance-claims .insurance-table :is(th:nth-child(4), td:nth-child(4)) { width: 11% !important; }
.page-insurance-claims .insurance-table :is(th:nth-child(5), td:nth-child(5)) { width: 13% !important; }
.page-insurance-claims .insurance-table :is(th:nth-child(6), td:nth-child(6)) { width: 13% !important; }
.page-insurance-claims .insurance-table :is(th:nth-child(7), td:nth-child(7)) { width: 8% !important; }
.page-insurance-claims .insurance-table :is(th:nth-child(8), td:nth-child(8)) { width: 7% !important; }
.page-insurance-claims .insurance-table :is(th:nth-child(9), td:nth-child(9)) { width: 4% !important; }
.page-insurance-claims .insurance-table :is(th:nth-child(10), td:nth-child(10)) { width: 8% !important; }

.page-insurance-claims .insurance-case,
.page-insurance-claims .insurance-company,
.page-insurance-claims .insurance-table .app-driver-avatar-link {
    max-width: 100%;
}

.pave-month-cell {
    width: 100%;
    justify-content: center;
}

.pave-skip-link {
    width: 28px;
    min-width: 28px;
    height: 28px;
    padding: 0;
    border-color: #dbeafe;
    background: #eff6ff;
    color: #1d4ed8;
}

.pave-skip-link span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.pave-skip-link i {
    font-size: 16px;
    line-height: 1;
}

.page-messages .messages-page-shell {
    gap: 16px;
}

.page-messages .messages-hero,
.page-messages .messages-editor-card,
.page-messages .messages-preview-card {
    border-radius: 8px;
    box-shadow: none;
}

.page-messages .messages-hero {
    border-color: #dbe3ef;
    background: linear-gradient(90deg, #ffffff 0%, #f8fafc 100%);
}

.page-messages .messages-hero-icon {
    border-radius: 8px;
    background: #ecfdf5;
    color: #059669;
}

.page-messages .messages-layout {
    grid-template-columns: minmax(0, 1.5fr) minmax(320px, .7fr);
}

.page-messages .messages-textarea,
.page-messages .messages-editor-form textarea.messages-textarea.form-control {
    min-height: 260px !important;
    border-radius: 8px !important;
}

.page-messages .messages-preview-alert {
    min-height: 132px;
    border-color: #dbeafe;
    border-radius: 8px;
    background: #f8fbff;
    color: #1e3a8a;
}

.page-messages .messages-preview-note {
    border-radius: 8px;
}

.page-roles-redesign .app-container {
    max-width: none;
    padding: 30px 34px;
}

.roles-page-shell {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.page-roles-redesign .roles-summary-card,
.page-roles-redesign .roles-permissions-card {
    border: 1px solid var(--cm-border-soft);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: none;
}

.page-roles-redesign .roles-summary-card .drivers-table :is(th, td) {
    height: 48px !important;
    padding: 10px 16px !important;
}

.page-roles-redesign .roles-summary-card .drivers-table :is(th:nth-child(1), td:nth-child(1)) {
    width: 36%;
}

.page-roles-redesign .roles-summary-card .drivers-table :is(th:nth-child(2), td:nth-child(2)) {
    width: 18%;
}

.page-roles-redesign .roles-summary-card .drivers-table :is(th:nth-child(3), td:nth-child(3)) {
    width: 18%;
}

.page-roles-redesign .roles-summary-card .drivers-table :is(th:nth-child(4), td:nth-child(4)) {
    width: 72px;
}

.page-roles-redesign .roles-permissions-row {
    margin-inline: 0;
}

.page-roles-redesign .roles-permissions-row > .col-12 {
    padding-inline: 0;
}

.page-roles-redesign .permission-toolbar {
    top: 12px;
    border-color: #dbe3ef;
    border-radius: 8px;
    box-shadow: none;
}

.page-roles-redesign .permission-role-tabs {
    gap: 6px;
    padding: 6px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #f8fafc;
}

.page-roles-redesign .permission-role-tabs .nav-item {
    min-width: 0;
}

.page-roles-redesign .permission-role-tabs .nav-link {
    min-height: 34px;
    border-radius: 6px;
    color: #475569;
    font-size: 13px;
    font-weight: 650;
}

.page-roles-redesign .permission-role-tabs .nav-link.active {
    background: #eff6ff;
    color: #1d4ed8;
}

.page-roles-redesign .permission-category {
    padding: 14px;
    border: 1px solid #eef2f7;
    border-radius: 8px;
    background: #ffffff;
}

.page-roles-redesign .permission-category-title {
    color: var(--cm-text);
    font-size: 15px;
    line-height: 20px;
}

.page-roles-redesign .permission-item {
    border-radius: 8px;
    background: #fbfcfe;
}

.app-content table td.app-action-cell:not(:last-child) {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
}

.app-content table th:last-child.app-actions-header,
.app-content table td:last-child.app-action-cell {
    width: 128px !important;
    min-width: 112px !important;
    max-width: 160px !important;
}

.page-pave-index .pave-table th:last-child.app-actions-header,
.page-pave-index .pave-table td.app-action-cell,
.page-pave-index .pave-table td:last-child.app-action-cell {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    text-align: center !important;
}

.page-pave-index .pave-table th:last-child.app-actions-header {
    text-align: left !important;
}

/* PAVE month matrix polish: keep scores/statuses and auxiliary actions separated. */
.page-pave-index .pave-table {
    width: 100% !important;
    min-width: 1120px !important;
    table-layout: fixed !important;
}

.page-pave-index .pave-table :is(th, td) {
    vertical-align: middle !important;
}

.page-pave-index .pave-table :is(th:nth-child(n+3), td:nth-child(n+3)) {
    width: calc((100% - 410px) / 6) !important;
    min-width: 118px !important;
    padding-inline: 12px !important;
    text-align: center !important;
}

.page-pave-index .pave-month-cell {
    width: 100% !important;
    min-height: 58px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}

.page-pave-index .pave-month-state,
.page-pave-index .pave-month-actions {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
}

.page-pave-index .pave-month-actions {
    gap: 7px !important;
    min-height: 22px !important;
}

.page-pave-index .pave-score-pill,
.page-pave-index .pave-status-pill {
    min-width: 44px !important;
    height: 28px !important;
    padding: 0 10px !important;
    gap: 5px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    line-height: 18px !important;
}

.page-pave-index .pave-status-pill {
    min-width: 76px !important;
}

.page-pave-index .pave-status-pill i {
    width: 14px !important;
    height: 14px !important;
    color: currentColor !important;
    font-size: 14px !important;
    line-height: 1 !important;
}

.page-pave-index .pave-month-actions .app-table-action,
.page-pave-index .pave-month-actions .app-created-info {
    width: 22px !important;
    min-width: 22px !important;
    height: 22px !important;
    min-height: 22px !important;
    border-radius: 7px !important;
    color: #475467 !important;
    opacity: .82 !important;
}

.page-pave-index .pave-month-actions .app-table-action:hover,
.page-pave-index .pave-month-actions .app-created-info:hover {
    opacity: 1 !important;
}

.page-pave-index .pave-month-actions .app-action-delete:hover {
    background: #fff1f2 !important;
    color: #e11d48 !important;
}

.page-pave-index .pave-month-actions .app-table-action i,
.page-pave-index .pave-month-actions .app-created-info i {
    width: 15px !important;
    height: 15px !important;
    color: currentColor !important;
    font-size: 15px !important;
    line-height: 1 !important;
}

.page-pave-index .pave-created-meta,
.page-pave-index .pave-month-actions .pave-created-meta,
.page-pave-index .pave-month-actions .app-created-meta {
    width: auto !important;
    min-width: 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
}

.page-pave-index .pave-skip-link {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    border-color: #bfdbfe !important;
    background: #eff6ff !important;
    color: #1d4ed8 !important;
}

.page-pave-index .pave-skip-link:hover {
    border-color: #93c5fd !important;
    background: #dbeafe !important;
}

.page-pave-index .pave-skip-link i {
    width: 17px !important;
    height: 17px !important;
    color: currentColor !important;
    font-size: 17px !important;
    line-height: 1 !important;
}

@media (max-width: 991.98px) {
    .page-supports-redesign .app-container,
    .page-roles-redesign .app-container {
        padding: 20px 16px;
    }

    .page-van-accidents-redesign .drivers-table-wrapper,
    .page-insurance-claims .drivers-table-wrapper {
        overflow-x: auto;
    }

    .page-van-accidents-redesign .van-accidents-table {
        min-width: 1120px !important;
        max-width: none !important;
    }

    .page-insurance-claims .insurance-table {
        min-width: 980px !important;
        max-width: none !important;
    }

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

/* Messages: align with the CRM page standard. */
.page-messages-redesign .app-container {
    max-width: none;
    padding: 30px 34px;
}

.page-messages-redesign .messages-page-shell {
    gap: 18px;
}

.page-messages-redesign .messages-metrics-grid {
    width: 100%;
    max-width: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.page-messages-redesign .app-content .messages-metrics-grid .drivers-metric-card {
    min-height: 86px !important;
    align-items: flex-start !important;
    padding: 16px !important;
    text-align: left !important;
}

.page-messages-redesign .app-content .messages-metrics-grid .drivers-metric-card strong {
    font-size: 22px !important;
    line-height: 28px !important;
}

.page-messages-redesign .app-content .messages-metrics-grid .drivers-metric-card span {
    font-size: 13px !important;
    line-height: 18px !important;
}

.page-messages-redesign .messages-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
    gap: 18px;
    align-items: start;
}

.page-messages-redesign .messages-editor-card,
.page-messages-redesign .messages-preview-card {
    padding: 0;
    border: 1px solid var(--cm-border-soft);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: none;
}

.page-messages-redesign .messages-card-head {
    min-height: 58px;
    margin: 0;
    padding: 14px 16px;
    border-bottom: 1px solid var(--cm-border-soft);
}

.page-messages-redesign .messages-card-head strong {
    font-size: 15px;
    line-height: 20px;
}

.page-messages-redesign .messages-card-head span {
    color: var(--cm-muted);
    font-size: 13px;
    line-height: 18px;
}

.page-messages-redesign .messages-editor-form {
    padding: 16px;
}

.page-messages-redesign .messages-editor-form .form-label {
    margin-bottom: 8px;
    color: var(--cm-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}

.page-messages-redesign .messages-textarea,
.page-messages-redesign .messages-editor-form textarea.messages-textarea.form-control {
    min-height: 220px !important;
    border-color: var(--cm-border) !important;
    border-radius: 8px !important;
    font-size: 14px;
    line-height: 20px;
}

.page-messages-redesign .messages-form-meta {
    margin-top: 8px;
    color: var(--cm-muted);
}

.page-messages-redesign .messages-form-footer {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--cm-border-soft);
}

.page-messages-redesign .messages-preview-card {
    overflow: hidden;
}

.page-messages-redesign .messages-preview-alert,
.page-messages-redesign .messages-preview-note {
    margin: 16px;
    border-radius: 8px;
    box-shadow: none;
}

.page-messages-redesign .messages-preview-alert {
    min-height: 120px;
    border-color: #dbeafe;
    background: #eff6ff;
    color: #1d4ed8;
}

.page-messages-redesign .messages-preview-note {
    margin-top: 0;
    border-color: var(--cm-border-soft);
    background: #fafafa;
    color: var(--cm-muted);
}

.page-messages-redesign .messages-delete-action {
    border-color: #fecdd3 !important;
    color: #e11d48 !important;
}

.page-messages-redesign .messages-delete-action:hover {
    background: #fff1f2 !important;
    color: #be123c !important;
}

@media (max-width: 991.98px) {
    .page-messages-redesign .app-container {
        padding: 20px 16px;
    }

    .page-messages-redesign .messages-metrics-grid,
    .page-messages-redesign .messages-layout {
        grid-template-columns: 1fr;
    }
}

/* Canonical CRUD popup layout: shared spacing and field alignment across modules. */
.app-popup-modal.app-standard-form-popup:not(.app-wizard-popup) .modal-dialog,
.app-popup-modal:is(
    .app-task-popup,
    .app-warning-form-popup,
    .app-fuel-form-popup,
    .app-pave-form-popup,
    .app-absence-form-popup,
    .app-fine-form-popup,
    .app-insurance-claim-form-popup,
    .app-incidence-form-popup,
    .app-maintenance-close-form-popup,
    .app-maintenance-form-popup,
    .app-accident-form-popup,
    .app-phone-form-popup,
    .app-phone-damage-form-popup,
    .app-user-form-popup,
    .app-quick-link-form-popup,
    .app-scorecard-form-popup,
    .app-support-form-popup
) .modal-dialog {
    width: min(94vw, 840px) !important;
    max-width: min(94vw, 840px) !important;
    margin: max(12px, 5dvh) auto !important;
}

.app-popup-modal.app-standard-form-popup:not(.app-wizard-popup) .modal-content,
.app-popup-modal:is(
    .app-task-popup,
    .app-warning-form-popup,
    .app-fuel-form-popup,
    .app-pave-form-popup,
    .app-absence-form-popup,
    .app-fine-form-popup,
    .app-insurance-claim-form-popup,
    .app-incidence-form-popup,
    .app-maintenance-close-form-popup,
    .app-maintenance-form-popup,
    .app-accident-form-popup,
    .app-phone-form-popup,
    .app-phone-damage-form-popup,
    .app-user-form-popup,
    .app-quick-link-form-popup,
    .app-scorecard-form-popup,
    .app-support-form-popup
) .modal-content {
    max-width: none !important;
    max-height: calc(100dvh - 32px) !important;
    border-radius: 10px !important;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18) !important;
}

body.app-popup-mode:is(
    .page-task-form,
    .page-warning-form,
    .page-fuel-form,
    .page-pave-form,
    .page-absence-form,
    .page-fine-form,
    .page-insurance-claim-form,
    .page-incidence-form,
    .page-maintenance-close-form,
    .page-maintenance-form,
    .page-accident-form,
    .page-phone-form,
    .page-phone-damage-form,
    .page-user-form,
    .page-quick-link-form,
    .page-scorecard-form,
    .page-support-form,
    .page-documentation-form,
    .page-documentation-upload
) :is(.app-container, .app-form-card, .app-form-card-body, .app-popup-form, .app-popup-form-content, .app-popup-form-footer) {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.app-popup-mode:is(
    .page-task-form,
    .page-warning-form,
    .page-fuel-form,
    .page-pave-form,
    .page-absence-form,
    .page-fine-form,
    .page-insurance-claim-form,
    .page-incidence-form,
    .page-maintenance-close-form,
    .page-maintenance-form,
    .page-accident-form,
    .page-phone-form,
    .page-phone-damage-form,
    .page-user-form,
    .page-quick-link-form,
    .page-scorecard-form,
    .page-support-form,
    .page-documentation-form,
    .page-documentation-upload
) .app-container {
    padding: 16px !important;
}

body.app-popup-mode:is(
    .page-task-form,
    .page-warning-form,
    .page-fuel-form,
    .page-pave-form,
    .page-absence-form,
    .page-fine-form,
    .page-insurance-claim-form,
    .page-incidence-form,
    .page-maintenance-close-form,
    .page-maintenance-form,
    .page-accident-form,
    .page-phone-form,
    .page-phone-damage-form,
    .page-user-form,
    .page-quick-link-form,
    .page-scorecard-form,
    .page-support-form,
    .page-documentation-form,
    .page-documentation-upload
) .app-popup-form {
    gap: 0 !important;
    padding: 18px !important;
    border: 1px solid var(--cm-border-soft) !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    box-shadow: var(--cm-shadow-sm) !important;
}

body.app-popup-mode:is(
    .page-task-form,
    .page-warning-form,
    .page-fuel-form,
    .page-pave-form,
    .page-absence-form,
    .page-fine-form,
    .page-insurance-claim-form,
    .page-incidence-form,
    .page-maintenance-close-form,
    .page-maintenance-form,
    .page-accident-form,
    .page-phone-form,
    .page-phone-damage-form,
    .page-user-form,
    .page-quick-link-form,
    .page-scorecard-form,
    .page-support-form,
    .page-documentation-form,
    .page-documentation-upload
) .app-popup-form-content {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px 14px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.app-popup-mode:not(.page-driver-form):not(.page-van-form):not(.page-inspection360-form) .app-popup-form-content > .mb-3,
body.app-popup-mode:not(.page-driver-form):not(.page-van-form):not(.page-inspection360-form) .app-popup-form-content > [class*="col-"] {
    min-width: 0 !important;
    max-width: 100% !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

body.app-popup-mode:not(.page-driver-form):not(.page-van-form):not(.page-inspection360-form) .app-popup-form-content > :is(.col-12, .app-popup-field-wide, [class*="-notes-field"], [class*="-comment-field"], [class*="-description-field"], [class*="-attachment-field"], [class*="-file-field"]),
body.app-popup-mode:not(.page-driver-form):not(.page-van-form):not(.page-inspection360-form) .app-popup-form-content > .mb-3:has(textarea),
body.app-popup-mode:not(.page-driver-form):not(.page-van-form):not(.page-inspection360-form) .app-popup-form-content > .mb-3:has(input[type="file"]) {
    grid-column: 1 / -1 !important;
}

body.app-popup-mode:not(.page-driver-form):not(.page-van-form):not(.page-inspection360-form) .app-popup-form-content > :is(.col-md-6, .col-lg-6, .col-6):not(:has(textarea)):not(:has(input[type="file"])) {
    grid-column: auto !important;
}

body.app-popup-mode:not(.page-driver-form):not(.page-van-form):not(.page-inspection360-form) .app-popup-form-content :is(.form-label, .form-text) {
    margin-left: 0 !important;
}

body.app-popup-mode:not(.page-driver-form):not(.page-van-form):not(.page-inspection360-form) .app-popup-form-content :is(.form-control, .form-select, .select2-container, .select2-selection) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-left: 0 !important;
}

body.app-popup-mode:not(.page-driver-form):not(.page-van-form):not(.page-inspection360-form) .app-popup-form-content textarea.form-control {
    min-height: 84px !important;
    height: auto !important;
    resize: vertical;
}

body.app-popup-mode:not(.page-driver-form):not(.page-van-form):not(.page-inspection360-form) .app-popup-form-content input[type="file"].form-control {
    height: auto !important;
    min-height: 36px !important;
}

body.app-popup-mode:not(.page-driver-form):not(.page-van-form):not(.page-inspection360-form) .app-popup-form-footer {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    padding: 16px 0 0 !important;
    border-top: 0 !important;
}

body.app-popup-mode:not(.page-driver-form):not(.page-van-form):not(.page-inspection360-form) .app-popup-cancel,
body.app-popup-mode:not(.page-driver-form):not(.page-van-form):not(.page-inspection360-form) .app-popup-submit {
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 14px !important;
    border-radius: 8px !important;
}

body.app-popup-mode.page-incidence-form .app-popup-form-content {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px 16px !important;
}

body.app-popup-mode.page-incidence-form .app-popup-form-content > .incidence-type-field,
body.app-popup-mode.page-incidence-form .app-popup-form-content > .incidence-driver-field,
body.app-popup-mode.page-incidence-form .app-popup-form-content > .incidence-van-field,
body.app-popup-mode.page-incidence-form .app-popup-form-content > .incidence-date-field {
    grid-column: auto !important;
}

body.app-popup-mode.page-incidence-form .app-popup-form-content > .incidence-title-field,
body.app-popup-mode.page-incidence-form .app-popup-form-content > .incidence-file-field,
body.app-popup-mode.page-incidence-form .app-popup-form-content > .incidence-description-field {
    grid-column: 1 / -1 !important;
}

body.app-popup-mode.page-incidence-form .app-popup-form-content > [class*="incidence-"] {
    min-width: 0 !important;
}

body.app-popup-mode.page-scorecard-dsp-edit-form .app-container {
    padding: 0 !important;
}

body.app-popup-mode.page-scorecard-dsp-edit-form .app-popup-form {
    margin: 0 !important;
    padding: 18px 24px 16px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

body.app-popup-mode.page-scorecard-dsp-edit-form .app-popup-form-content {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
}

.app-popup-modal.app-scorecard-dsp-edit-popup .modal-dialog {
    width: min(92vw, 700px) !important;
    max-width: min(92vw, 700px) !important;
    margin: max(16px, 7dvh) auto !important;
}

.app-popup-modal.app-scorecard-dsp-edit-popup .modal-content {
    max-height: calc(100dvh - 32px) !important;
    border-radius: 8px !important;
}

.app-popup-modal.app-scorecard-dsp-edit-popup .modal-header {
    min-height: 58px !important;
    padding: 0 24px !important;
}

.app-popup-modal.app-scorecard-dsp-edit-popup .modal-title {
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    font-size: 20px !important;
    line-height: 28px !important;
}

.app-popup-modal.app-scorecard-dsp-edit-popup .modal-title i {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 17px;
    line-height: 1;
}

body.app-popup-mode.page-scorecard-dsp-edit-form .app-popup-form-footer {
    margin-top: 4px !important;
    padding: 0 !important;
    gap: 8px !important;
}

body.app-popup-mode.page-scorecard-dsp-edit-form .app-popup-submit,
body.app-popup-mode.page-scorecard-dsp-edit-form .app-popup-cancel {
    min-height: 36px !important;
    border-radius: 8px !important;
}

body.app-popup-mode.page-scorecard-dsp-edit-form .app-popup-submit {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #2563eb !important;
    color: #ffffff !important;
}

@media (max-width: 767.98px) {
    .app-popup-modal.app-standard-form-popup:not(.app-wizard-popup) .modal-dialog,
    .app-popup-modal:is(
        .app-task-popup,
        .app-warning-form-popup,
        .app-fuel-form-popup,
        .app-pave-form-popup,
        .app-absence-form-popup,
        .app-fine-form-popup,
        .app-insurance-claim-form-popup,
        .app-incidence-form-popup,
        .app-maintenance-close-form-popup,
        .app-maintenance-form-popup,
        .app-accident-form-popup,
        .app-phone-form-popup,
        .app-phone-damage-form-popup,
        .app-user-form-popup,
        .app-quick-link-form-popup,
        .app-scorecard-form-popup,
        .app-support-form-popup
    ) .modal-dialog {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        margin: 12px auto !important;
    }

    body.app-popup-mode:not(.page-driver-form):not(.page-van-form):not(.page-inspection360-form):not(.page-accident-report-form) .app-container {
        padding: 12px !important;
    }

    body.app-popup-mode:not(.page-driver-form):not(.page-van-form):not(.page-inspection360-form):not(.page-accident-report-form) .app-popup-form {
        padding: 14px !important;
    }

    body.app-popup-mode:not(.page-driver-form):not(.page-van-form):not(.page-inspection360-form) .app-popup-form-content {
        grid-template-columns: 1fr !important;
    }

    body.app-popup-mode:not(.page-driver-form):not(.page-van-form):not(.page-inspection360-form) .app-popup-form-content > .mb-3,
    body.app-popup-mode:not(.page-driver-form):not(.page-van-form):not(.page-inspection360-form) .app-popup-form-content > [class*="col-"] {
        grid-column: 1 / -1 !important;
    }

    body.app-popup-mode:not(.page-driver-form):not(.page-van-form):not(.page-inspection360-form) .app-popup-form-footer {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.app-popup-mode.page-incidence-form .app-popup-form-content > [class*="incidence-"] {
        grid-column: 1 / -1 !important;
    }
}

/* Final typography system: one CRM scale across lists, details, forms and special screens. */
.app-content,
.app-content-page,
.app-container,
.app-popup-mode,
.app-popup-modal,
.modal,
.dropdown-menu,
.select2-container,
.select2-dropdown,
.select2-results,
.flatpickr-calendar,
.dataTables_wrapper {
    font-family: var(--cm-font-sans) !important;
}

.app-content :is(h1, h2, h3, h4, h5, h6, p, span, small, label, input, select, textarea, button, a, td, th),
.app-popup-mode :is(h1, h2, h3, h4, h5, h6, p, span, small, label, input, select, textarea, button, a, td, th),
.modal :is(h1, h2, h3, h4, h5, h6, p, span, small, label, input, select, textarea, button, a, td, th) {
    font-family: inherit;
    letter-spacing: 0;
}

.app-content :is(
    .drivers-page-header h1,
    .routes-title,
    .app-page-title,
    .page-title,
    .page-title-box h1,
    .page-title-box h4,
    .audit-page-heading h1
) {
    margin-top: 0 !important;
    color: var(--cm-text) !important;
    font-size: var(--cm-type-page-title-size) !important;
    font-weight: var(--cm-type-page-title-weight) !important;
    line-height: var(--cm-type-page-title-line) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.app-content :is(
    .drivers-page-header p,
    .routes-subtitle,
    .audit-page-heading p,
    .app-page-subtitle,
    .page-subtitle,
    .app-detail-kicker,
    .driver-profile-meta,
    .van-profile-title p
) {
    color: var(--cm-muted) !important;
    font-size: var(--cm-type-page-subtitle-size) !important;
    font-weight: var(--cm-type-page-subtitle-weight) !important;
    line-height: var(--cm-type-page-subtitle-line) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.app-content :is(.app-detail-title h1, .driver-profile-name-row h1, .van-profile-title h1) {
    color: var(--cm-text) !important;
    font-size: var(--cm-type-entity-title-size) !important;
    font-weight: var(--cm-type-entity-title-weight) !important;
    line-height: var(--cm-type-entity-title-line) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.app-content :is(
    .app-detail-section h2,
    .app-detail-report-section h2,
    .task-section-header h2,
    .driver-profile-extra-section h2,
    .driver-profile-tab-content h2,
    .route-summary-card h2,
    .route-dispute-card h2,
    .audit-log-header h2,
    .card-header h2,
    .card-header h3
),
.page-dashboard .app-content :is(
    .app-card-header h5,
    .dashboard-panel h2,
    .dashboard-section-title
) {
    color: var(--cm-text) !important;
    font-size: var(--cm-type-section-title-size) !important;
    font-weight: var(--cm-type-section-title-weight) !important;
    line-height: var(--cm-type-section-title-line) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.app-content :is(.card-title, .driver-tab-card-title, .permission-category-title),
.app-popup-mode :is(.app-form-section-title, .form-section-title, h3, h4) {
    color: var(--cm-text) !important;
    font-size: var(--cm-type-card-title-size) !important;
    font-weight: var(--cm-type-card-title-weight) !important;
    line-height: var(--cm-type-card-title-line) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.app-content :is(.drivers-metric-card strong, [class*="-metric-card"] strong),
.page-dashboard .app-content :is(.dashboard-kpi-card strong, .dashboard-metric-pair strong) {
    font-size: var(--cm-type-metric-value-size) !important;
    font-weight: var(--cm-type-metric-value-weight) !important;
    line-height: var(--cm-type-metric-value-line) !important;
    letter-spacing: 0 !important;
}

.app-content :is(.drivers-metric-card span, .drivers-metric-card small, [class*="-metric-card"] span, [class*="-metric-card"] small),
.page-dashboard .app-content :is(.dashboard-kpi-label, .dashboard-metric-pair span) {
    color: var(--cm-muted) !important;
    font-size: var(--cm-type-metric-label-size) !important;
    font-weight: var(--cm-type-metric-label-weight) !important;
    line-height: var(--cm-type-metric-label-line) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.app-content :is(table, .table, .drivers-table, table.dataTable, table.app-data-table) {
    font-size: var(--cm-type-body-size) !important;
    font-weight: var(--cm-type-body-weight) !important;
    line-height: var(--cm-type-body-line) !important;
}

.app-content :is(.table thead th, .drivers-table thead th, table.dataTable > thead > tr > th, table.app-data-table > thead > tr > th, table[id="example"] thead th),
.driver-profile-tab-content table th,
.page-van-profile .driver-profile-tab-content table th {
    color: var(--cm-muted) !important;
    font-size: var(--cm-type-table-header-size) !important;
    font-weight: var(--cm-type-table-header-weight) !important;
    line-height: var(--cm-type-table-header-line) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.app-content :is(.table tbody td, .drivers-table tbody td, table.dataTable > tbody > tr > td, table.app-data-table > tbody > tr > td, table[id="example"] tbody td),
.driver-profile-tab-content table td,
.page-van-profile .driver-profile-tab-content table td {
    font-size: var(--cm-type-body-size) !important;
    font-weight: var(--cm-type-body-weight) !important;
    line-height: var(--cm-type-body-line) !important;
}

.app-content :is(.text-muted, .form-text, small, .small, .app-detail-field p, .app-detail-note p, .audit-modal-subtitle, .audit-user-agent),
.app-popup-mode :is(.text-muted, .form-text, small, .small) {
    color: var(--cm-muted) !important;
    font-size: var(--cm-type-secondary-size) !important;
    font-weight: var(--cm-type-secondary-weight) !important;
    line-height: var(--cm-type-secondary-line) !important;
    letter-spacing: 0 !important;
}

.app-content :is(label, .form-label),
.app-popup-mode :is(label, .form-label),
.modal :is(label, .form-label),
.select2-container :is(.select2-selection__rendered, .select2-results__option),
.flatpickr-calendar,
.app-content :is(
    .app-detail-field span,
    .app-detail-note span,
    .driver-profile-info-grid article > span,
    .driver-profile-extra-grid article > span,
    .van-profile-info-grid small
) {
    color: var(--cm-muted) !important;
    font-size: var(--cm-type-form-label-size) !important;
    font-weight: var(--cm-type-form-label-weight) !important;
    line-height: var(--cm-type-form-label-line) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

html body .select2-container.select2-container--default .select2-results__option--selected,
html body .select2-container.select2-container--default .select2-results__option[aria-selected="true"] {
    background: #ecfdf5 !important;
    color: #065f46 !important;
}

.select2-dropdown {
    overflow: hidden !important;
    border: 1px solid var(--cm-border) !important;
    border-radius: var(--cm-component-control-radius, 8px) !important;
    background: #ffffff !important;
    box-shadow: var(--cm-shadow-lg, 0 16px 40px rgba(15, 23, 42, .12)) !important;
}

.select2-container--open .select2-dropdown--below {
    border-top-left-radius: var(--cm-component-control-radius, 8px) !important;
    border-top-right-radius: var(--cm-component-control-radius, 8px) !important;
}

.select2-container--open .select2-dropdown--above {
    border-bottom-left-radius: var(--cm-component-control-radius, 8px) !important;
    border-bottom-right-radius: var(--cm-component-control-radius, 8px) !important;
}

.select2-search--dropdown {
    padding: 8px !important;
    background: #ffffff !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    min-height: 34px !important;
    border: 1px solid var(--cm-border) !important;
    border-radius: var(--cm-component-control-radius, 8px) !important;
    background: #ffffff !important;
    color: var(--cm-text) !important;
    outline: none !important;
    box-shadow: none !important;
}

.select2-container--default .select2-results__option {
    padding: 8px 12px !important;
}

.app-content :is(input, select, textarea, .form-control, .form-select),
.app-popup-mode :is(input, select, textarea, .form-control, .form-select),
.modal :is(input, select, textarea, .form-control, .form-select),
.select2-container .select2-selection {
    font-size: var(--cm-type-body-size) !important;
    font-weight: var(--cm-type-body-weight) !important;
    line-height: var(--cm-type-body-line) !important;
}

.app-content :is(.btn, .drivers-btn, .routes-action),
.app-popup-mode :is(.btn, .drivers-btn, .app-popup-submit, .app-popup-cancel),
.modal :is(.btn, .drivers-btn) {
    font-size: var(--cm-type-button-size) !important;
    font-weight: var(--cm-type-button-weight) !important;
    line-height: var(--cm-type-button-line) !important;
    letter-spacing: 0 !important;
}

.app-content :is(.btn-sm, .app-table-media-action, .app-status-pill, .driver-profile-status, .driver-profile-tab, .routes-tab, .badge) {
    font-size: var(--cm-type-secondary-size) !important;
    line-height: var(--cm-type-secondary-line) !important;
    letter-spacing: 0 !important;
}

.app-content :is(.app-table-action, .app-inline-actions .app-table-action) {
    font-size: 18px !important;
    line-height: 1 !important;
}

.app-content :is(.app-status-pill, [class*="-status-pill"], [class*="-type-pill"], [class*="-severity-pill"], [class*="-source-pill"]) {
    font-weight: 700 !important;
    text-transform: none !important;
}

/* Component consistency: header actions */
:root {
    --cm-component-action-height: 36px;
    --cm-component-action-padding-x: 12px;
    --cm-component-action-gap: 6px;
    --cm-component-action-radius: 8px;
    --cm-component-action-icon-size: 18px;
}

.app-content .drivers-page-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

.app-content .drivers-page-actions :is(.drivers-btn, .btn.drivers-btn, button.drivers-btn, a.drivers-btn),
.app-content :is(.app-detail-actions, .driver-profile-actions, .van-profile-actions, .task-detail-actions) :is(.drivers-btn, .btn.drivers-btn, button.drivers-btn, a.drivers-btn) {
    min-height: var(--cm-component-action-height) !important;
    height: var(--cm-component-action-height) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--cm-component-action-gap) !important;
    padding: 0 var(--cm-component-action-padding-x) !important;
    border-radius: var(--cm-component-action-radius) !important;
    font-size: var(--cm-type-button-size) !important;
    font-weight: var(--cm-type-button-weight) !important;
    line-height: var(--cm-type-button-line) !important;
    white-space: nowrap !important;
    box-shadow: none !important;
}

.app-content .drivers-page-actions .drivers-btn-outline,
.app-content :is(.app-detail-actions, .driver-profile-actions, .van-profile-actions, .task-detail-actions) .drivers-btn-outline {
    border-color: var(--cm-border) !important;
    background: #ffffff !important;
    color: var(--cm-text) !important;
}

.app-content .drivers-page-actions .drivers-btn-primary,
.app-content :is(.app-detail-actions, .driver-profile-actions, .van-profile-actions, .task-detail-actions) .drivers-btn-primary {
    border-color: var(--cm-primary) !important;
    background: var(--cm-primary) !important;
    color: #ffffff !important;
}

.app-content .drivers-page-actions .dropdown {
    display: inline-flex !important;
}

.app-content .drivers-page-actions .dropdown-toggle::after {
    margin-left: 2px !important;
}

.app-content .drivers-page-actions :is(.drivers-btn i, .drivers-btn svg),
.app-content :is(.app-detail-actions, .driver-profile-actions, .van-profile-actions, .task-detail-actions) :is(.drivers-btn i, .drivers-btn svg) {
    flex: 0 0 auto !important;
    width: var(--cm-component-action-icon-size) !important;
    height: var(--cm-component-action-icon-size) !important;
    font-size: var(--cm-component-action-icon-size) !important;
    line-height: 1 !important;
}

/* Component consistency: filter controls */
:root {
    --cm-component-control-height: 36px;
    --cm-component-control-radius: 8px;
    --cm-component-control-padding-x: 12px;
    --cm-component-control-border: var(--cm-border);
}

.app-content .drivers-filter-bar {
    align-items: center !important;
    gap: 8px !important;
}

.app-content .drivers-filter-bar :is(input, select, .form-control, .form-select, .select2-container, .select2-selection, .cm-period-trigger, .drivers-btn) {
    min-height: var(--cm-component-control-height) !important;
    height: var(--cm-component-control-height) !important;
    border-radius: var(--cm-component-control-radius) !important;
    font-size: var(--cm-type-body-size) !important;
    line-height: var(--cm-type-body-line) !important;
}

.app-content .drivers-filter-bar :is(input, select, .form-control, .form-select, .select2-selection, .cm-period-trigger) {
    border: 1px solid var(--cm-component-control-border) !important;
    background: #ffffff !important;
    color: var(--cm-text) !important;
    box-shadow: var(--cm-shadow-sm) !important;
}

.app-content .drivers-filter-bar :is(input, .form-control) {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

.app-content .drivers-filter-bar :is(select, .form-select) {
    min-width: 0 !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

.app-content .drivers-filter-search input {
    padding-left: 36px !important;
}

.app-content .drivers-filter-search i {
    font-size: 16px !important;
    line-height: 1 !important;
}

.app-content .drivers-filter-bar .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-right: 32px !important;
    padding-left: var(--cm-component-control-padding-x) !important;
    color: var(--cm-text) !important;
    line-height: calc(var(--cm-component-control-height) - 2px) !important;
}

.app-content .drivers-filter-bar .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--cm-soft-muted) !important;
}

.app-content .drivers-filter-bar .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: calc(var(--cm-component-control-height) - 2px) !important;
    right: 6px !important;
}

.app-content .drivers-filter-bar .cm-period-filter {
    min-width: 0 !important;
}

.app-content .drivers-filter-bar .cm-period-trigger {
    width: 100% !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 0 var(--cm-component-control-padding-x) !important;
}

/* Component consistency: metric cards */
:root {
    --cm-component-metric-min-height: 88px;
    --cm-component-metric-padding: 16px;
    --cm-component-metric-gap: 4px;
    --cm-component-metric-radius: 8px;
}

.app-content .drivers-metrics-grid {
    gap: 16px !important;
}

.app-content .drivers-metrics-grid .drivers-metric-card {
    min-height: var(--cm-component-metric-min-height) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: var(--cm-component-metric-gap) !important;
    padding: var(--cm-component-metric-padding) !important;
    border: 1px solid var(--cm-border-soft) !important;
    border-radius: var(--cm-component-metric-radius) !important;
    background: #ffffff !important;
    box-shadow: none !important;
    text-align: left !important;
}

.app-content .drivers-metrics-grid .drivers-metric-card:hover {
    border-color: var(--cm-border) !important;
    box-shadow: var(--cm-shadow-sm) !important;
    transform: none !important;
}

/* Metric icons occupy a separate column instead of overlaying the value. */
.app-content .drivers-metrics-grid .drivers-metric-card:has(> i) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 34px !important;
    grid-template-rows: auto auto;
    column-gap: 12px !important;
    align-content: center;
}
.app-content .drivers-metrics-grid .drivers-metric-card > i {
    position: static !important;
    inset: auto !important;
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 0 !important;
    border-radius: 10px;
    background: var(--cm-bg) !important;
    color: var(--cm-muted) !important;
    font-size: 20px !important;
    line-height: 1 !important;
}
.app-content .drivers-metrics-grid .drivers-metric-card:has(> i) > strong {
    grid-column: 1;
    grid-row: 1;
}
.app-content .drivers-metrics-grid .drivers-metric-card:has(> i) > span {
    grid-column: 1;
    grid-row: 2;
}

.app-content .drivers-metrics-grid .drivers-metric-card strong {
    color: var(--cm-text) !important;
    font-size: var(--cm-type-metric-value-size) !important;
    font-weight: var(--cm-type-metric-value-weight) !important;
    line-height: var(--cm-type-metric-value-line) !important;
    white-space: nowrap !important;
}

.app-content .drivers-metrics-grid .drivers-metric-card span,
.app-content .drivers-metrics-grid .drivers-metric-card small {
    color: var(--cm-muted) !important;
    font-size: var(--cm-type-metric-label-size) !important;
    font-weight: var(--cm-type-metric-label-weight) !important;
    line-height: var(--cm-type-metric-label-line) !important;
}

/* Component consistency: tables, status and row actions */
:root {
    --cm-component-table-header-height: 42px;
    --cm-component-table-row-min-height: 56px;
    --cm-component-table-cell-padding-y: 10px;
    --cm-component-table-cell-padding-x: 16px;
    --cm-component-table-action-size: 30px;
    --cm-component-status-pill-height: 28px;
}

.app-content :is(.drivers-table, .app-data-table, .table, table.dataTable, table[id="example"]) thead th {
    height: var(--cm-component-table-header-height) !important;
    min-height: var(--cm-component-table-header-height) !important;
    padding: 0 var(--cm-component-table-cell-padding-x) !important;
    vertical-align: middle !important;
}

.app-content :is(.drivers-table, .app-data-table, .table, table.dataTable, table[id="example"]) tbody td {
    min-height: var(--cm-component-table-row-min-height) !important;
    padding: var(--cm-component-table-cell-padding-y) var(--cm-component-table-cell-padding-x) !important;
    vertical-align: middle !important;
}

.app-content table :is(td.app-action-cell, td:last-child:has(.app-inline-actions), td:last-child:has(.drivers-row-actions), td:last-child:has(.app-table-action)) {
    text-align: right !important;
}

.app-content table :is(.app-inline-actions, .driver-tab-actions, .drivers-row-actions, .table-actions, .cm-table-actions, .action-buttons) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    white-space: nowrap !important;
}

.app-content table :is(.app-table-action, .app-created-info, .app-table-action-delete) {
    width: var(--cm-component-table-action-size) !important;
    height: var(--cm-component-table-action-size) !important;
    min-width: var(--cm-component-table-action-size) !important;
    min-height: var(--cm-component-table-action-size) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border-radius: 999px !important;
    font-size: 18px !important;
    line-height: 1 !important;
}

.app-content table :is(.app-table-action i, .app-table-action svg, .app-created-info i, .app-created-info svg) {
    width: 18px !important;
    height: 18px !important;
    font-size: 18px !important;
    line-height: 1 !important;
}

.app-content table :is(.app-status-pill, [class*="-status-pill"], [class*="-type-pill"], [class*="-severity-pill"], [class*="-source-pill"]) {
    min-height: var(--cm-component-status-pill-height) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 3px 10px !important;
    border-radius: 999px !important;
    font-size: var(--cm-type-secondary-size) !important;
    font-weight: 700 !important;
    line-height: var(--cm-type-secondary-line) !important;
    white-space: nowrap !important;
}

/* Component consistency: tabs */
:root {
    --cm-component-tab-height: 36px;
    --cm-component-tab-padding-x: 12px;
    --cm-component-tab-gap: 6px;
    --cm-component-tab-radius: 8px;
}

.app-content :is(.routes-tabs, .driver-profile-tabs, .app-detail-tabs) {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
}

.app-content :is(.routes-tab, .driver-profile-tab, .app-detail-tab) {
    min-height: var(--cm-component-tab-height) !important;
    height: var(--cm-component-tab-height) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--cm-component-tab-gap) !important;
    padding: 0 var(--cm-component-tab-padding-x) !important;
    border-radius: var(--cm-component-tab-radius) !important;
    font-size: var(--cm-type-button-size) !important;
    font-weight: var(--cm-type-button-weight) !important;
    line-height: var(--cm-type-button-line) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.app-content :is(.routes-tab, .driver-profile-tab, .app-detail-tab) :is(i, svg) {
    width: 16px !important;
    height: 16px !important;
    font-size: 16px !important;
    line-height: 1 !important;
}

.app-content .routes-tab {
    border: 1px solid var(--cm-border) !important;
    background: #ffffff !important;
    color: var(--cm-text) !important;
}

.app-content .routes-tab.active,
.app-content .routes-tab[aria-selected="true"] {
    border-color: #bfdbfe !important;
    background: #eff6ff !important;
    color: #1d4ed8 !important;
}

/* Component consistency: form and secondary detail actions */
:root {
    --cm-component-form-action-height: 38px;
    --cm-component-form-action-padding-x: 14px;
}

.app-content :is(.app-form-footer, .form-actions, .modal-footer),
.app-popup-mode :is(.app-popup-form-footer, .modal-footer),
.modal :is(.app-popup-form-footer, .modal-footer) {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
}

.app-content :is(.app-form-footer, .form-actions, .modal-footer) :is(.drivers-btn, .btn),
.app-popup-mode :is(.app-popup-form-footer, .modal-footer) :is(.drivers-btn, .btn, .app-popup-submit, .app-popup-cancel),
.modal :is(.app-popup-form-footer, .modal-footer) :is(.drivers-btn, .btn, .app-popup-submit, .app-popup-cancel) {
    min-height: var(--cm-component-form-action-height) !important;
    height: var(--cm-component-form-action-height) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--cm-component-action-gap) !important;
    padding: 0 var(--cm-component-form-action-padding-x) !important;
    border-radius: var(--cm-component-action-radius) !important;
    font-size: var(--cm-type-button-size) !important;
    font-weight: var(--cm-type-button-weight) !important;
    line-height: var(--cm-type-button-line) !important;
    white-space: nowrap !important;
}

.app-content :is(.app-form-footer, .form-actions, .modal-footer) :is(.drivers-btn-outline, .btn-light, .btn-secondary),
.app-popup-mode :is(.app-popup-form-footer, .modal-footer) :is(.drivers-btn-outline, .btn-light, .btn-secondary, .app-popup-cancel),
.modal :is(.app-popup-form-footer, .modal-footer) :is(.drivers-btn-outline, .btn-light, .btn-secondary, .app-popup-cancel) {
    border: 1px solid var(--cm-border) !important;
    background: #ffffff !important;
    color: var(--cm-text) !important;
}

.app-content :is(.app-form-footer, .form-actions, .modal-footer) :is(.drivers-btn-primary, .btn-primary, .app-popup-submit),
.app-popup-mode :is(.app-popup-form-footer, .modal-footer) :is(.drivers-btn-primary, .btn-primary, .app-popup-submit),
.modal :is(.app-popup-form-footer, .modal-footer) :is(.drivers-btn-primary, .btn-primary, .app-popup-submit) {
    border: 1px solid var(--cm-primary) !important;
    background: var(--cm-primary) !important;
    color: #ffffff !important;
}

/* Component consistency: CRM entity links */
:root {
    --cm-component-entity-link-color: #2554e8;
    --cm-component-entity-link-hover-color: #1d4ed8;
    --cm-component-entity-link-focus-ring: rgba(37, 84, 232, 0.34);
}

.app-content :is(
    .app-entity-link,
    .app-driver-avatar-link,
    .drivers-person-link,
    .app-vehicle-link,
    .fuel-van-link,
    .maintenance-van-link,
    .pave-van-link,
    .inspection360-van-link,
    .insurance-van-link,
    .insurance-accident-link,
    .incidence-van-link,
    .fine-plate,
    .fine-expedient,
    .documentation-entity-link,
    .rental-period-van,
    .tasks-card-title,
    .phone-imei-link,
    .driver-tab-code,
    .driver-tab-link,
    .incidence-task-link,
    .app-detail-strong-link
) {
    text-decoration: none !important;
    cursor: pointer !important;
}

.app-content :is(
    .app-entity-link,
    .app-driver-avatar-link,
    .drivers-person-link,
    .app-vehicle-link,
    .fuel-van-link,
    .maintenance-van-link,
    .pave-van-link,
    .inspection360-van-link,
    .insurance-van-link,
    .insurance-accident-link,
    .incidence-van-link,
    .fine-plate,
    .fine-expedient,
    .documentation-entity-link,
    .rental-period-van,
    .tasks-card-title,
    .phone-imei-link,
    .driver-tab-code,
    .driver-tab-link,
    .incidence-task-link,
    .app-detail-strong-link
):hover,
.app-content :is(
    .app-entity-link,
    .app-driver-avatar-link,
    .drivers-person-link,
    .app-vehicle-link,
    .fuel-van-link,
    .maintenance-van-link,
    .pave-van-link,
    .inspection360-van-link,
    .insurance-van-link,
    .insurance-accident-link,
    .incidence-van-link,
    .fine-plate,
    .fine-expedient,
    .documentation-entity-link,
    .rental-period-van,
    .tasks-card-title,
    .phone-imei-link,
    .driver-tab-code,
    .driver-tab-link,
    .incidence-task-link,
    .app-detail-strong-link
):focus {
    color: var(--cm-component-entity-link-hover-color) !important;
    text-decoration: none !important;
}

.app-content :is(
    .app-entity-link,
    .app-driver-avatar-link,
    .drivers-person-link,
    .app-vehicle-link,
    .fuel-van-link,
    .maintenance-van-link,
    .pave-van-link,
    .inspection360-van-link,
    .insurance-van-link,
    .insurance-accident-link,
    .incidence-van-link,
    .fine-plate,
    .fine-expedient,
    .documentation-entity-link,
    .rental-period-van,
    .tasks-card-title,
    .phone-imei-link,
    .driver-tab-code,
    .driver-tab-link,
    .incidence-task-link,
    .app-detail-strong-link
):is(:hover, :focus) :is(span, strong, small, .app-driver-avatar-name) {
    text-decoration: none !important;
}

.app-content :is(
    .drivers-table,
    .app-data-table,
    table.dataTable,
    table[id="example"],
    .table
) tbody td a:not(.btn):not(.drivers-btn):not(.dropdown-item):not(.app-table-action):not(.app-table-media-action):not(.routes-tab):not(.driver-profile-tab):not(.app-detail-tab):hover {
    text-decoration: none !important;
}

.app-content :is(
    .app-entity-link,
    .app-driver-avatar-link,
    .drivers-person-link,
    .app-vehicle-link,
    .fuel-van-link,
    .maintenance-van-link,
    .pave-van-link,
    .inspection360-van-link,
    .insurance-van-link,
    .insurance-accident-link,
    .incidence-van-link,
    .fine-plate,
    .fine-expedient,
    .documentation-entity-link,
    .rental-period-van,
    .tasks-card-title,
    .phone-imei-link,
    .driver-tab-code,
    .driver-tab-link,
    .incidence-task-link,
    .app-detail-strong-link
):focus-visible {
    outline: 2px solid var(--cm-component-entity-link-focus-ring) !important;
    outline-offset: 3px !important;
    border-radius: 6px !important;
}

.app-content .dashboard-list-row,
.app-content .dashboard-list-row:hover,
.app-content .dashboard-list-row:focus {
    text-decoration: none !important;
    cursor: pointer !important;
}

.app-content .dashboard-list-row:is(:hover, :focus) :is(span, strong, small) {
    text-decoration: none !important;
}

.app-content .dashboard-list-row:focus-visible {
    outline: 2px solid var(--cm-component-entity-link-focus-ring) !important;
    outline-offset: 3px !important;
    border-radius: 8px !important;
}

/* Top notices: shared banner pattern for global and page-level alerts. */
.app-top-notice {
    width: 100%;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 14px;
    padding: 10px 14px;
    border: 1px solid var(--cm-border-soft);
    border-radius: 8px;
    background: #ffffff;
    color: var(--cm-text);
    font-size: var(--cm-type-secondary-size);
    font-weight: 700;
    line-height: var(--cm-type-secondary-line);
}

.app-top-notice-main {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.app-top-notice-main .mdi {
    flex: 0 0 auto;
    font-size: 18px;
    line-height: 1;
}

.app-top-notice-text {
    min-width: 0;
    overflow-wrap: anywhere;
}

.app-top-notice-action {
    flex: 0 0 auto;
    color: currentColor;
    font-size: var(--cm-type-small-size);
    font-weight: 700;
    line-height: var(--cm-type-small-line);
    text-decoration: none;
}

.app-top-notice-action:hover {
    color: currentColor;
    text-decoration: none;
}

.app-top-notice-action:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.app-top-notice-info {
    border-color: #dbe5f4;
    background: #eff4fc;
    color: #294c83;
}

.app-top-notice-danger {
    border-color: color-mix(in srgb, var(--cm-danger) 28%, transparent);
    background: color-mix(in srgb, var(--cm-danger) 8%, #ffffff);
    color: var(--cm-danger);
}

.app-top-notice-warning {
    border-color: color-mix(in srgb, var(--cm-warning) 34%, transparent);
    background: color-mix(in srgb, var(--cm-warning) 14%, #ffffff);
    color: #92400e;
}

@media (max-width: 575.98px) {
    .app-top-notice {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }
}

/* Auth pages: align login/register with the CRM visual system. */
body.authentication-bg.page-auth-login,
body.authentication-bg.page-auth-register {
    min-height: 100vh;
    background:
        radial-gradient(circle at top left, rgba(29, 78, 216, 0.08), transparent 34rem),
        linear-gradient(180deg, #f8fafc 0%, #f3f4f6 100%) !important;
    color: var(--cm-text);
    font-family: var(--cm-font-sans) !important;
}

.auth-page-wrap {
    min-height: 100vh;
    padding: 24px;
}

.auth-card {
    border: 1px solid var(--cm-border-soft) !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: var(--cm-shadow-card) !important;
}

.auth-card .card-body {
    background: #ffffff;
}

.auth-hero-panel {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at top right, rgba(96, 165, 250, 0.28), transparent 18rem),
        linear-gradient(135deg, #111827 0%, #1f2937 58%, #243b53 100%);
    color: #ffffff;
}

.auth-hero-panel::after {
    content: "";
    position: absolute;
    inset: auto 24px 24px auto;
    width: 140px;
    height: 140px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 20px;
    transform: rotate(8deg);
}

.auth-hero-content {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 540px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 40px;
}

.auth-workspace-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 210px;
    margin-bottom: 28px;
    text-decoration: none !important;
}

.auth-workspace-logo img {
    max-width: 100%;
    max-height: 72px;
    object-fit: contain;
}

.auth-workspace-logo-form {
    max-width: 150px;
    margin: 0 auto 18px;
}

.auth-workspace-logo-form img {
    max-height: 52px;
}

.auth-eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    margin-bottom: 14px;
    padding: 3px 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.86);
    font-size: var(--cm-type-secondary-size);
    font-weight: 700;
    line-height: var(--cm-type-secondary-line);
}

.auth-hero-title {
    max-width: 420px;
    margin: 0 0 14px;
    color: #ffffff;
    font-size: 28px;
    font-weight: 800;
    line-height: 36px;
    letter-spacing: 0;
}

.auth-hero-copy {
    max-width: 430px;
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: var(--cm-type-body-size);
    font-weight: var(--cm-type-body-weight);
    line-height: var(--cm-type-body-line);
}

.auth-hero-metrics {
    margin-top: 36px;
}

.auth-hero-metric {
    height: 100%;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
}

.auth-hero-metric div {
    margin-bottom: 4px;
    color: rgba(255, 255, 255, 0.72);
    font-size: var(--cm-type-small-size);
    font-weight: 700;
    line-height: var(--cm-type-small-line);
    text-transform: none;
}

.auth-hero-metric strong,
.auth-hero-metric small {
    display: block;
}

.auth-hero-metric strong {
    margin-bottom: 3px;
    color: #ffffff;
    font-size: 18px;
    font-weight: 800;
    line-height: 24px;
}

.auth-hero-metric small {
    color: rgba(255, 255, 255, 0.74);
    font-size: var(--cm-type-small-size);
    font-weight: var(--cm-type-small-weight);
    line-height: var(--cm-type-small-line);
}

.page-auth-login .form-label,
.page-auth-register .form-label {
    color: var(--cm-text);
    font-size: var(--cm-type-form-label-size);
    font-weight: var(--cm-type-form-label-weight);
    line-height: var(--cm-type-form-label-line);
}

.page-auth-login .form-control,
.page-auth-register .form-control {
    min-height: var(--cm-component-control-height);
    border: 1px solid var(--cm-border) !important;
    border-radius: var(--cm-component-control-radius) !important;
    background: #ffffff !important;
    color: var(--cm-text) !important;
    font-size: var(--cm-type-body-size);
    line-height: var(--cm-type-body-line);
    box-shadow: none !important;
}

.page-auth-login .form-control:focus,
.page-auth-register .form-control:focus {
    border-color: color-mix(in srgb, var(--cm-primary) 34%, var(--cm-border)) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--cm-primary) 13%, transparent) !important;
}

.page-auth-login .input-group-text,
.page-auth-register .input-group-text {
    border-color: var(--cm-border) !important;
    border-radius: 0 var(--cm-component-control-radius) var(--cm-component-control-radius) 0 !important;
    background: #ffffff !important;
    color: var(--cm-muted) !important;
}

.auth-info-card {
    margin-bottom: 16px;
    padding: 14px;
    border: 1px solid var(--cm-border-soft);
    border-radius: 8px;
    background: #f8fafc;
}

.auth-submit,
.auth-form-actions .drivers-btn {
    min-height: var(--cm-component-form-action-height) !important;
    height: var(--cm-component-form-action-height) !important;
}

.auth-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 18px;
}

.auth-form-actions [data-register-login-link] {
    margin-right: auto;
}

.register-step-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--cm-muted);
    font-size: var(--cm-type-secondary-size);
    font-weight: 700;
    line-height: var(--cm-type-secondary-line);
}

.register-step-pill span {
    width: 28px;
    min-width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #e5e7eb;
    color: var(--cm-muted);
    font-weight: 800;
}

.register-step-pill.is-active,
.register-step-pill.is-complete {
    color: var(--cm-text);
}

.register-step-pill.is-active span,
.register-step-pill.is-complete span {
    background: #eff6ff;
    color: var(--cm-primary);
}

.register-step-line {
    flex: 1 1 auto;
    height: 1px;
    min-width: 24px;
    background: var(--cm-border);
}

.register-file-drop {
    width: 100%;
    min-height: 72px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 12px;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    background: #f8fafc;
    cursor: pointer;
    transition: border-color .16s ease, background-color .16s ease;
}

.register-file-drop:hover {
    border-color: color-mix(in srgb, var(--cm-primary) 34%, #cbd5e1);
    background: #ffffff;
}

.register-file-logo {
    width: 60px;
    min-width: 60px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--cm-border-soft);
    border-radius: 8px;
    background: #ffffff;
    color: var(--cm-muted);
}

.register-file-logo i {
    font-size: 22px;
    line-height: 1;
}

.register-file-logo img {
    max-width: 48px;
    max-height: 30px;
    object-fit: contain;
}

.register-file-drop strong,
.register-file-drop small {
    display: block;
}

.register-file-drop strong {
    color: var(--cm-text);
    font-size: var(--cm-type-body-size);
    font-weight: 700;
    line-height: var(--cm-type-body-line);
}

.register-file-drop small {
    color: var(--cm-muted);
    font-size: var(--cm-type-small-size);
    font-weight: var(--cm-type-small-weight);
    line-height: var(--cm-type-small-line);
    overflow-wrap: anywhere;
}

.register-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 991.98px) {
    .auth-card {
        max-width: 560px;
        margin: 0 auto;
    }
}

@media (max-width: 575.98px) {
    .auth-page-wrap {
        padding: 12px;
    }

    .auth-card {
        border-radius: 12px !important;
    }

    .auth-form-actions {
        justify-content: stretch;
    }

    .auth-form-actions .drivers-btn {
        flex: 1 1 auto;
    }

    .auth-form-actions [data-register-login-link] {
        flex-basis: 100%;
        margin-right: 0;
    }

    .register-step-pill strong {
        display: none;
    }
}

.page-van-preventive-maintenance .preventive-tabs {
    margin-bottom: 16px;
}

.page-van-preventive-maintenance .preventive-progress {
    display: grid;
    gap: 9px;
    min-width: 320px;
}

.page-van-preventive-maintenance .preventive-progress.is-pm {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0;
}

.page-van-preventive-maintenance .preventive-progress-block {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.page-van-preventive-maintenance .preventive-progress-block.is-date {
    padding-left: 14px;
    border-left: 1px solid var(--cm-border-soft);
}

.page-van-preventive-maintenance .preventive-progress-block:not(.is-date) {
    padding-right: 14px;
}

.page-van-preventive-maintenance .preventive-progress-block strong {
    display: block;
    color: var(--cm-muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 14px;
}

.page-van-preventive-maintenance .preventive-progress-block small {
    display: block;
    min-width: 0;
    color: var(--cm-muted);
    font-size: 11px;
    font-weight: 500;
    line-height: 14px;
    white-space: nowrap !important;
}

.page-van-preventive-maintenance .preventive-progress-block em {
    display: block;
    color: var(--cm-muted);
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    line-height: 14px;
    text-align: center !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
}

.page-van-preventive-maintenance .preventive-progress-empty {
    color: var(--cm-muted);
    font-size: var(--cm-type-small-size);
    font-style: italic;
    font-weight: 500;
    line-height: var(--cm-type-small-line);
}

.page-van-preventive-maintenance .preventive-progress-block em.is-success {
    color: #047857;
}

.page-van-preventive-maintenance .preventive-progress-block em.is-warning {
    color: #b45309;
}

.page-van-preventive-maintenance .preventive-progress-block em.is-danger {
    color: #b91c1c;
}

.page-van-preventive-maintenance .preventive-progress-block.is-secondary {
    opacity: 0.84;
}

.page-van-preventive-maintenance .preventive-bar {
    width: 100%;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #f1f5f9;
}

.page-van-preventive-maintenance .preventive-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
}

.page-van-preventive-maintenance .preventive-bar span.is-ok {
    background: #10b981;
}

.page-van-preventive-maintenance .preventive-bar span.is-soon {
    background: #f59e0b;
}

.page-van-preventive-maintenance .preventive-bar span.is-expired {
    background: #ef4444;
}

.page-van-preventive-maintenance .preventive-bar span.is-missing {
    background: #94a3b8;
}

.page-van-preventive-maintenance .preventive-source-notice {
    margin-bottom: 16px;
}

.page-van-preventive-maintenance .preventive-source-notice > span {
    color: var(--cm-muted);
    font-size: var(--cm-type-small-size);
    line-height: var(--cm-type-small-line);
    white-space: nowrap;
}

.page-van-preventive-maintenance .preventive-table {
    min-width: 940px;
    table-layout: fixed;
}

.page-van-preventive-maintenance .preventive-table th,
.page-van-preventive-maintenance .preventive-table td {
    vertical-align: middle !important;
}

.page-van-preventive-maintenance .preventive-table tbody td {
    height: 64px !important;
}

.page-van-preventive-maintenance .preventive-table .preventive-col-vehicle {
    width: 25%;
}

.page-van-preventive-maintenance .preventive-table .preventive-col-state {
    width: 132px;
}

.page-van-preventive-maintenance .preventive-table .preventive-col-progress {
    width: 44%;
}

.page-van-preventive-maintenance .preventive-table .preventive-col-file,
.page-van-preventive-maintenance .preventive-table .preventive-tab-file {
    width: 86px;
}

.page-van-preventive-maintenance .preventive-table .preventive-col-km {
    width: 190px;
}

.preventive-file-link {
    position: relative;
}

.preventive-file-link .app-table-action-count {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 1px solid #ffffff;
    border-radius: 999px;
    background: var(--cm-primary);
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    line-height: 14px;
}

.page-van-preventive-maintenance .preventive-row-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.page-van-preventive-maintenance .preventive-row-actions .preventive-update-btn {
    white-space: nowrap;
    text-decoration: none;
}

.page-van-preventive-maintenance .preventive-row-actions .preventive-update-btn i {
    flex: 0 0 auto;
    width: var(--cm-component-action-icon-size);
    height: var(--cm-component-action-icon-size);
    font-size: var(--cm-component-action-icon-size);
    line-height: 1;
}

.page-van-profile .van-preventive-tab-table {
    table-layout: fixed !important;
}

.page-van-profile .van-preventive-tab-table .preventive-tab-type {
    width: 74px !important;
}

.page-van-profile .van-preventive-tab-table .preventive-tab-file {
    width: 78px !important;
}

.page-van-profile .van-preventive-tab-table :is(th, td) {
    vertical-align: middle !important;
}

.preventive-form-van {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px solid var(--cm-border);
    border-radius: 8px;
    background: #f8fafc;
}

.preventive-form-van strong {
    color: var(--cm-text);
    font-size: var(--cm-type-body-size);
    font-weight: 800;
    line-height: var(--cm-type-body-line);
}

.preventive-form-van span {
    color: var(--cm-muted);
    font-size: var(--cm-type-small-size);
    line-height: var(--cm-type-small-line);
}

.van-preventive-tab-table .driver-tab-stack {
    display: grid;
    gap: 4px;
}

.van-preventive-tab-table .driver-tab-file-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--cm-primary);
    font-size: var(--cm-type-small-size);
    font-weight: 700;
    line-height: var(--cm-type-small-line);
}

.app-popup-modal.app-preventive-maintenance-form-popup .modal-dialog {
    width: min(94vw, 900px) !important;
    max-width: min(94vw, 900px) !important;
    margin: 4vh auto !important;
}

.app-popup-modal.app-preventive-maintenance-form-popup .modal-content {
    max-height: 92vh !important;
    overflow: hidden !important;
}

.app-popup-modal.app-preventive-maintenance-form-popup .modal-body {
    overflow: hidden !important;
}

.app-popup-modal.app-preventive-maintenance-form-popup .app-popup-frame {
    height: calc(92vh - 58px) !important;
    max-height: calc(92vh - 58px) !important;
}

.app-popup-mode.page-preventive-maintenance-form {
    background: #f8fafc !important;
}

.app-popup-mode.page-preventive-maintenance-form .app-container {
    max-width: 860px !important;
    padding: 14px !important;
}

.app-popup-mode.page-preventive-maintenance-form .app-popup-form {
    min-height: calc(100vh - 28px);
    justify-content: space-between;
}

.app-popup-mode.page-preventive-maintenance-form .app-popup-form-content {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px 14px !important;
    padding: 14px !important;
    border-radius: 8px !important;
}

.app-popup-mode.page-preventive-maintenance-form .app-popup-form-content > .row.preventive-form {
    grid-column: 1 / -1;
    width: auto;
    margin: 0;
}

.app-popup-mode.page-preventive-maintenance-form .preventive-form > [class*="col"] {
    min-width: 0;
}

.app-popup-mode.page-preventive-maintenance-form .form-control,
.app-popup-mode.page-preventive-maintenance-form .form-select,
.app-popup-mode.page-preventive-maintenance-form textarea,
.app-popup-mode.page-preventive-maintenance-form input[type="file"] {
    max-width: 100%;
    min-width: 0;
}

.app-popup-mode.page-preventive-maintenance-form .app-popup-form-footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 12px !important;
    border-radius: 8px;
    background: #ffffff;
}

@media (max-width: 991.98px) {
    .app-popup-mode.page-preventive-maintenance-form .app-popup-form-content {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (max-width: 767.98px) {
    .page-van-preventive-maintenance .preventive-progress {
        min-width: 260px;
    }

    .page-van-preventive-maintenance .preventive-progress.is-pm {
        grid-template-columns: minmax(0, 1fr);
        gap: 9px;
    }

    .page-van-preventive-maintenance .preventive-progress-block.is-date {
        padding-left: 0;
        border-left: 0;
    }

    .page-van-preventive-maintenance .preventive-progress-block:not(.is-date) {
        padding-right: 0;
    }

    .page-van-preventive-maintenance .preventive-filter-bar {
        grid-template-columns: 1fr !important;
    }

    .page-van-preventive-maintenance .preventive-source-notice {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .page-van-preventive-maintenance .preventive-source-notice > span {
        white-space: normal;
    }

    .preventive-form-van {
        align-items: flex-start;
        flex-direction: column;
    }

    .app-popup-modal.app-preventive-maintenance-form-popup .modal-dialog {
        width: calc(100vw - 12px) !important;
        max-width: calc(100vw - 12px) !important;
        margin: 6px auto !important;
    }

    .app-popup-modal.app-preventive-maintenance-form-popup .modal-content {
        max-height: calc(100vh - 12px) !important;
        border-radius: 8px !important;
    }

    .app-popup-modal.app-preventive-maintenance-form-popup .app-popup-frame {
        height: calc(100vh - 68px) !important;
        max-height: calc(100vh - 68px) !important;
    }

    .app-popup-mode.page-preventive-maintenance-form .app-container {
        padding: 10px !important;
    }

    .app-popup-mode.page-preventive-maintenance-form .app-popup-form {
        min-height: calc(100vh - 20px);
    }

    .app-popup-mode.page-preventive-maintenance-form .app-popup-form-content {
        display: block !important;
        padding: 12px !important;
    }

    .app-popup-mode.page-preventive-maintenance-form .preventive-form > [class*="col"] {
        width: 100%;
        max-width: 100%;
    }

    .app-popup-mode.page-preventive-maintenance-form .app-popup-form-footer > * {
        flex: 1 1 140px;
    }
}

.van-wizard-form [hidden],
body.app-popup-mode.page-van-form .van-wizard-form [hidden],
body.app-popup-mode.page-van-form .van-wizard-section.is-hidden,
body.app-popup-mode.page-van-form .van-wizard-footer .is-hidden {
    display: none !important;
}

.app-popup-modal.app-van-form-popup .modal-dialog {
    width: min(96vw, 1180px) !important;
    max-width: min(96vw, 1180px) !important;
    height: min(88dvh, 820px) !important;
    max-height: min(88dvh, 820px) !important;
    margin: max(12px, 4dvh) auto !important;
}

.app-popup-modal.app-van-form-popup .modal-dialog.modal-dialog-scrollable {
    height: min(88dvh, 820px) !important;
}

.app-popup-modal.app-van-form-popup .modal-content {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    max-height: min(88dvh, 820px) !important;
}

.app-popup-modal.app-van-form-popup .app-popup-frame {
    height: calc(min(88dvh, 820px) - 58px) !important;
    max-height: calc(min(88dvh, 820px) - 58px) !important;
}

body.app-popup-mode.page-van-form,
body.app-popup-mode.page-van-form .content,
body.app-popup-mode.page-van-form .app-container {
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
    background: #ffffff !important;
}

body.app-popup-mode.page-van-form .app-container {
    padding: 0 !important;
}

body.app-popup-mode.page-van-form .van-wizard-form {
    width: 100% !important;
    max-width: none !important;
    height: 100dvh !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

body.app-popup-mode.page-van-form .van-wizard-layout {
    flex: 1 1 auto !important;
    display: grid !important;
    grid-template-columns: 280px minmax(0, 1fr) !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

body.app-popup-mode.page-van-form .van-wizard-steps {
    display: block !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 30px 34px 24px !important;
    overflow: hidden !important;
    border-right: 1px solid #e5e7eb !important;
    background: #ffffff !important;
}

body.app-popup-mode.page-van-form .van-wizard-main {
    min-height: 0 !important;
    max-height: none !important;
    padding: 32px 38px 24px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
    scrollbar-gutter: stable !important;
}

body.app-popup-mode.page-van-form .van-wizard-footer {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    min-height: 76px !important;
    padding: 14px 38px !important;
    border-top: 1px solid #e5e7eb !important;
}

body.app-popup-mode.page-van-form .van-wizard-footer > span {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
}

body.app-popup-mode.page-van-form .van-wizard-footer > div {
    width: auto !important;
    flex: 0 0 auto;
}

@media (max-width: 767.98px) {
    body.app-popup-mode.page-van-form .van-wizard-layout {
        grid-template-columns: 1fr !important;
    }

    body.app-popup-mode.page-van-form .van-wizard-steps {
        display: flex !important;
        height: auto !important;
        gap: 10px;
        overflow-x: auto !important;
        padding: 20px !important;
        border-right: 0 !important;
        border-bottom: 1px solid #e5e7eb !important;
    }

    body.app-popup-mode.page-van-form .van-wizard-step {
        min-width: 180px;
        min-height: 52px;
    }

    body.app-popup-mode.page-van-form .van-wizard-step::after {
        display: none;
    }

    body.app-popup-mode.page-van-form .van-wizard-main {
        padding: 28px 22px !important;
    }

    body.app-popup-mode.page-van-form .van-wizard-grid,
    body.app-popup-mode.page-van-form .van-wizard-follow-grid,
    body.app-popup-mode.page-van-form .van-wizard-doc-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Inspection 360 popup parity with the driver wizard. */
.app-popup-modal.app-inspection360-form-popup .modal-dialog,
.app-popup-modal.app-inspection360-form-popup .modal-dialog.modal-dialog-scrollable {
    width: min(96vw, 1180px) !important;
    max-width: min(96vw, 1180px) !important;
    height: min(88dvh, 820px) !important;
    max-height: min(88dvh, 820px) !important;
    margin: max(12px, 4dvh) auto !important;
}

.app-popup-modal.app-inspection360-form-popup .modal-content {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    max-height: min(88dvh, 820px) !important;
    overflow: hidden !important;
    border-radius: 16px !important;
}

.app-popup-modal.app-inspection360-form-popup .modal-header {
    min-height: 56px !important;
    padding: 0 20px !important;
}

.app-popup-modal.app-inspection360-form-popup .modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.app-popup-modal.app-inspection360-form-popup .app-popup-frame {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    display: block !important;
    border: 0 !important;
    background: #ffffff !important;
}

body.app-popup-mode.page-inspection360-form,
body.app-popup-mode.page-inspection360-form .content,
body.app-popup-mode.page-inspection360-form .app-content,
body.app-popup-mode.page-inspection360-form .app-container {
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
    background: #ffffff !important;
}

body.app-popup-mode.page-inspection360-form .app-container {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
}

body.app-popup-mode.page-inspection360-form .inspection360-wizard-popup {
    width: 100% !important;
    max-width: none !important;
    height: 100dvh !important;
    min-height: 0 !important;
    display: flex !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
    color: var(--cm-text) !important;
    font-family: var(--cm-font-sans, Inter, system-ui, -apple-system, sans-serif) !important;
}

body.app-popup-mode.page-inspection360-form .inspection360-form {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 280px minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    gap: 0 !important;
}

body.app-popup-mode.page-inspection360-form .inspection360-wizard-nav {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 30px 34px 24px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-right: 1px solid var(--cm-border) !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

body.app-popup-mode.page-inspection360-form .inspection360-wizard-step {
    position: relative !important;
    width: 100% !important;
    min-height: 62px !important;
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--cm-muted) !important;
    text-align: left !important;
}

body.app-popup-mode.page-inspection360-form .inspection360-wizard-step:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 20px;
    top: 43px;
    bottom: -19px;
    width: 1px;
    background: var(--cm-border);
}

body.app-popup-mode.page-inspection360-form .inspection360-wizard-step span {
    position: relative !important;
    z-index: 1 !important;
    width: 38px !important;
    height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 3px solid var(--cm-border) !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: var(--cm-muted) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
}

body.app-popup-mode.page-inspection360-form .inspection360-wizard-step strong {
    min-width: 0 !important;
    overflow: hidden !important;
    color: currentColor !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 20px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.app-popup-mode.page-inspection360-form .inspection360-wizard-step.is-active {
    color: var(--cm-text) !important;
}

body.app-popup-mode.page-inspection360-form .inspection360-wizard-step.is-active span {
    border-color: var(--cm-primary) !important;
    background: var(--cm-primary) !important;
    color: #ffffff !important;
}

body.app-popup-mode.page-inspection360-form .inspection360-wizard-step.is-complete span {
    border-color: var(--cm-primary) !important;
    color: var(--cm-primary) !important;
}

body.app-popup-mode.page-inspection360-form .inspection360-step-panel {
    display: none !important;
}

body.app-popup-mode.page-inspection360-form .inspection360-step-panel.is-active {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-height: 0 !important;
    display: block !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 32px 38px 24px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
    scrollbar-gutter: stable !important;
}

body.app-popup-mode.page-inspection360-form .inspection360-step-panel .inspection360-section-header {
    margin: 0 0 24px !important;
    padding: 0 !important;
    border: 0 !important;
}

body.app-popup-mode.page-inspection360-form .inspection360-step-panel .inspection360-section-header h3 {
    margin: 0 !important;
    color: var(--cm-text) !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    line-height: 30px !important;
}

body.app-popup-mode.page-inspection360-form .inspection360-section {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

body.app-popup-mode.page-inspection360-form .inspection360-general-grid,
body.app-popup-mode.page-inspection360-form .inspection360-tire-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px 36px !important;
}

body.app-popup-mode.page-inspection360-form .inspection360-tire-card,
body.app-popup-mode.page-inspection360-form .inspection360-check-row {
    min-width: 0 !important;
    border: 1px solid var(--cm-border-soft) !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    box-shadow: var(--cm-shadow-sm) !important;
}

body.app-popup-mode.page-inspection360-form .inspection360-tire-card {
    padding: 16px !important;
}

body.app-popup-mode.page-inspection360-form .inspection360-tire-fields,
body.app-popup-mode.page-inspection360-form .inspection360-check-row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px 20px !important;
}

body.app-popup-mode.page-inspection360-form .inspection360-check-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

body.app-popup-mode.page-inspection360-form .inspection360-check-row {
    grid-template-columns: minmax(150px, .75fr) minmax(160px, .8fr) minmax(260px, 1.45fr) !important;
    padding: 16px !important;
}

body.app-popup-mode.page-inspection360-form .inspection360-check-name {
    padding-top: 31px !important;
    color: var(--cm-text) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 20px !important;
}

body.app-popup-mode.page-inspection360-form .inspection360-tire-card h4 {
    margin: 0 0 14px !important;
    color: var(--cm-text) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 20px !important;
}

body.app-popup-mode.page-inspection360-form .inspection360-form .form-label {
    margin-bottom: 8px !important;
    color: var(--cm-muted) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 20px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

body.app-popup-mode.page-inspection360-form .inspection360-form .form-control,
body.app-popup-mode.page-inspection360-form .inspection360-form .form-select,
body.app-popup-mode.page-inspection360-form .inspection360-form .select2-container--default .select2-selection--single,
body.app-popup-mode.page-inspection360-form .inspection360-form .select2-container--default .select2-selection--multiple {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--cm-border) !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    color: var(--cm-text) !important;
    font-size: 16px !important;
    line-height: 24px !important;
    box-shadow: none !important;
}

body.app-popup-mode.page-inspection360-form .inspection360-form textarea.form-control {
    min-height: 96px !important;
    resize: vertical !important;
}

body.app-popup-mode.page-inspection360-form .inspection360-wizard-actions {
    grid-column: 2 !important;
    grid-row: 2 !important;
    min-height: 76px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    padding: 14px 38px !important;
    border-top: 1px solid var(--cm-border) !important;
    background: #ffffff !important;
}

body.app-popup-mode.page-inspection360-form .inspection360-wizard-actions [hidden] {
    display: none !important;
}

body.app-popup-mode.page-inspection360-form .inspection360-wizard-cancel {
    margin-right: auto !important;
}

@media (max-width: 767.98px) {
    .app-popup-modal.app-inspection360-form-popup .modal-dialog {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
    }

    .app-popup-modal.app-inspection360-form-popup .modal-content {
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
    }

    body.app-popup-mode.page-inspection360-form .inspection360-form {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto minmax(0, 1fr) auto !important;
    }

    body.app-popup-mode.page-inspection360-form .inspection360-wizard-nav {
        grid-column: 1 !important;
        grid-row: 1 !important;
        height: auto !important;
        flex-direction: row !important;
        gap: 10px !important;
        overflow-x: auto !important;
        padding: 20px !important;
        border-right: 0 !important;
        border-bottom: 1px solid var(--cm-border) !important;
    }

    body.app-popup-mode.page-inspection360-form .inspection360-wizard-step {
        min-width: 180px !important;
        min-height: 52px !important;
    }

    body.app-popup-mode.page-inspection360-form .inspection360-wizard-step::after {
        display: none !important;
    }

    body.app-popup-mode.page-inspection360-form .inspection360-step-panel.is-active {
        grid-column: 1 !important;
        grid-row: 2 !important;
        padding: 28px 22px !important;
    }

    body.app-popup-mode.page-inspection360-form .inspection360-general-grid,
    body.app-popup-mode.page-inspection360-form .inspection360-tire-grid,
    body.app-popup-mode.page-inspection360-form .inspection360-tire-fields,
    body.app-popup-mode.page-inspection360-form .inspection360-tire-card:not(.inspection360-tire-card-wide) .inspection360-tire-fields,
    body.app-popup-mode.page-inspection360-form .inspection360-tire-card-wide .inspection360-tire-fields,
    body.app-popup-mode.page-inspection360-form .inspection360-check-row {
        grid-template-columns: 1fr !important;
    }

    body.app-popup-mode.page-inspection360-form .inspection360-check-name {
        padding-top: 0 !important;
    }

    body.app-popup-mode.page-inspection360-form .inspection360-wizard-actions {
        grid-column: 1 !important;
        grid-row: 3 !important;
        min-height: auto !important;
        flex-wrap: wrap !important;
        align-items: stretch !important;
        padding: 16px !important;
    }

    body.app-popup-mode.page-inspection360-form .inspection360-wizard-cancel,
    body.app-popup-mode.page-inspection360-form .inspection360-wizard-prev,
    body.app-popup-mode.page-inspection360-form .inspection360-wizard-next,
body.app-popup-mode.page-inspection360-form .inspection360-wizard-submit {
        flex: 1 1 140px !important;
    }
}

.app-popup-modal.app-standard-form-popup.app-team-calendar-event-popup:not(.app-wizard-popup) .modal-dialog,
.app-popup-modal.app-team-calendar-event-detail-popup .modal-dialog {
    width: min(calc(100vw - 32px), 820px) !important;
    max-width: min(calc(100vw - 32px), 820px) !important;
}

.app-popup-modal.app-team-calendar-event-popup .modal-content,
.app-popup-modal.app-team-calendar-event-detail-popup .modal-content {
    border-radius: 12px !important;
}

body.app-popup-mode.page-scorecard-dsp-edit-form .scorecard-dsp-correction .select2-container {
    width: min(100%, 340px) !important;
    max-width: 340px !important;
}

body.app-popup-mode.page-scorecard-dsp-edit-form:not(.page-driver-form):not(.page-van-form):not(.page-inspection360-form) .app-popup-form-content .scorecard-dsp-correction .select2-container {
    width: min(100%, 340px) !important;
    max-width: 340px !important;
}

body.app-popup-mode.page-scorecard-dsp-edit-form .scorecard-dsp-correction .select2-selection--single {
    height: 36px !important;
    min-height: 36px !important;
}

body.app-popup-mode.page-scorecard-dsp-edit-form .scorecard-dsp-edit-panel {
    display: grid !important;
    grid-column: 1 / -1 !important;
    gap: 14px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
}

body.app-popup-mode.page-scorecard-dsp-edit-form .scorecard-dsp-correction,
body.app-popup-mode.page-scorecard-dsp-edit-form .scorecard-dsp-section-title,
body.app-popup-mode.page-scorecard-dsp-edit-form .scorecard-dsp-edit-grid {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.app-popup-mode.page-scorecard-dsp-edit-form .scorecard-dsp-correction {
    margin-bottom: 2px !important;
    padding: 14px 14px 13px !important;
    border-color: #f6c98e !important;
    background: #fff8ef !important;
}

/* CRM workspace surfaces. Kept after legacy adapters so shared components win.
   Geometry for sidebar collapse, popup scrolling and domain grids stays upstream. */
body.app-body {
    --app-bg: var(--cm-bg);
    --app-text: var(--cm-text);
    --app-muted: var(--cm-muted);
    background: var(--cm-bg) !important;
}

body.app-body .app-content-page,
body.app-body .app-content {
    background: var(--cm-bg) !important;
}

body.app-body .app-menu.app-sidebar {
    background: #f9fafb !important;
    border-right: 1px solid var(--cm-border) !important;
    color: var(--cm-text);
}

.app-sidebar .app-sidebar-brand {
    background: #f9fafb !important;
    border-bottom: 1px solid var(--cm-border) !important;
    padding-inline: 16px;
}

.app-sidebar .app-sidebar-logo {
    gap: 10px;
    justify-content: flex-start !important;
    min-width: 0;
}

.app-sidebar .app-sidebar-logo.logo-dark {
    display: flex !important;
}

.app-sidebar .app-sidebar-logo.logo-light {
    display: none !important;
}

.app-sidebar .app-sidebar-logo img {
    width: 30px !important;
    height: 30px !important;
    margin: 0 !important;
    flex: 0 0 30px;
    object-fit: contain;
    border-radius: 6px;
}

.app-sidebar-brand-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--cm-text);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -.2px;
}

.app-sidebar .app-sidebar-menu .menu-title {
    color: #697587 !important;
    opacity: 1;
    font-weight: 600;
    letter-spacing: .65px;
}

.app-sidebar .app-sidebar-menu .menu-item .menu-link {
    color: #485467 !important;
    border-radius: 7px;
    background: transparent;
    transition: background-color .15s ease, color .15s ease;
}

.app-sidebar .app-sidebar-menu .menu-icon,
.app-sidebar .app-sidebar-menu .menu-arrow {
    color: #768295 !important;
}

.app-sidebar .app-sidebar-menu .sub-menu {
    border-left-color: #dce1e9;
}

.app-sidebar .app-sidebar-menu .menu-item .menu-link:hover,
.app-sidebar .app-sidebar-menu .menu-item .menu-link[aria-expanded=true] {
    background: #eceff3 !important;
    color: var(--cm-text) !important;
}

.app-sidebar .app-sidebar-menu .menu-item .menu-link.active {
    background: #e8effc !important;
    color: #1d4ed8 !important;
    font-weight: 600;
}

.app-sidebar .app-sidebar-menu .menu-link.active .menu-icon {
    color: #1d4ed8 !important;
}

html[data-sidenav-size="condensed"] .app-sidebar-brand-name {
    display: none;
}

body.app-body .app-topbar {
    background: #ffffff !important;
    border-bottom: 1px solid var(--cm-border) !important;
    box-shadow: none !important;
}

.app-content :is(.drivers-page-header, .tasks-page-header) {
    margin-bottom: 0;
}

.app-content :is(.drivers-table-card, .app-detail-card, .driver-profile-card,
    .driver-profile-tabs-card, .van-profile-card, .dashboard-panel) {
    background: #ffffff !important;
    border-color: var(--cm-border) !important;
    border-radius: 10px !important;
    box-shadow: var(--cm-shadow-card) !important;
}

.app-content .drivers-filter-bar,
body.app-body .app-content .card.app-search-card {
    padding: 12px !important;
    border: 1px solid var(--cm-border) !important;
    border-radius: 10px !important;
    background: #eef1f5 !important;
    box-shadow: none !important;
    gap: 8px !important;
}

body.app-body .app-content .card.app-search-card {
    margin-bottom: 0 !important;
}

.app-content .drivers-filter-bar :is(input, select, .form-control, .form-select, .select2-selection, .cm-period-trigger) {
    box-shadow: none !important;
}

/* One text tone and weight for native fields, rich selects and period controls. */
body.app-body :is(input:not(:where([type="hidden"], [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="button"], [type="submit"], [type="reset"], [type="image"])), textarea, select, .cm-period-trigger),
body.app-body .select2-container--default .select2-selection--single .select2-selection__rendered,
body.app-body .cm-period-trigger > span {
    color: var(--cm-text) !important;
    font-weight: var(--cm-type-body-weight) !important;
}

body.app-body :is(input, textarea)::placeholder,
body.app-body .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--cm-soft-muted) !important;
    font-weight: var(--cm-type-body-weight) !important;
    opacity: 1;
}

body.app-body :is(.drivers-filter-search, .app-global-search, .cm-period-trigger) > i {
    color: var(--cm-muted) !important;
}

.app-content .drivers-metrics-grid .drivers-metric-card.is-active {
    border-color: #9bb7ef !important;
    background: #f0f5ff !important;
    box-shadow: inset 3px 0 0 var(--cm-primary) !important;
}

.app-content .drivers-metrics-grid .drivers-metric-card:hover {
    border-color: #acbbcf !important;
    background: #fafcff !important;
}

.app-content :is(.drivers-table, .app-data-table, .table, table.dataTable) thead th {
    background: #f8f9fb !important;
    border-bottom: 1px solid var(--cm-border) !important;
    color: #526075 !important;
}

/* Let content define CRM column widths; scroll the existing wrapper on narrow
   screens instead of splitting identifiers and headings into single letters. */
body.app-body .app-content .drivers-table {
    table-layout: auto !important;
}

body.app-body .app-content .drivers-table :is(th, td) {
    overflow-wrap: normal !important;
    word-break: normal !important;
}

body.app-body .app-content .drivers-table th {
    white-space: nowrap !important;
}

body.app-body .app-content .drivers-table td:not(.app-action-cell) {
    max-width: 360px;
}

.app-content :is(.drivers-table, .app-data-table) tbody td {
    height: var(--cm-component-table-row-min-height) !important;
    border-bottom-color: #edf0f4 !important;
    font-variant-numeric: tabular-nums;
}

.app-content :is(.drivers-table, .app-data-table) tbody tr:hover > td {
    background: #f4f7fc !important;
}

.app-content table .app-table-action {
    color: #647187 !important;
    border-radius: 6px !important;
}

.app-content table .app-table-action:hover {
    background: #e8effc !important;
    color: var(--cm-primary) !important;
}

.app-content table .app-action-delete:hover {
    background: #fff0f1 !important;
    color: #b42335 !important;
}

.app-content .drivers-table :is(.app-action-cell, .app-actions-header) {
    position: sticky;
    right: 0;
    z-index: 1;
    background: #fff;
    box-shadow: -1px 0 0 var(--cm-border);
}

.app-content :is(.drivers-table-footer, .drivers-pagination) {
    border-top-color: var(--cm-border) !important;
    background: #fff;
}

.page-dashboard .dashboard-kpi-grid {
    gap: 12px;
}

.page-dashboard .app-content .dashboard-kpi-card {
    min-height: 116px !important;
    padding: 16px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 32px;
    grid-template-rows: auto auto;
    align-content: center;
    gap: 8px;
    background: #fff !important;
    border: 1px solid var(--cm-border) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    transform: none !important;
}

.page-dashboard .app-content .dashboard-kpi-card:hover {
    border-color: #acbbcf !important;
    background: #fafcff !important;
}

.page-dashboard .app-content .dashboard-kpi-card .dashboard-kpi-value {
    grid-column: 1;
    grid-row: 1;
    color: var(--cm-text) !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 32px !important;
    font-variant-numeric: tabular-nums;
}

.page-dashboard .app-content .dashboard-kpi-card .dashboard-kpi-icon {
    grid-column: 2;
    grid-row: 1;
    width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    background: #f0f4fa !important;
    color: #526e98 !important;
    border-radius: 8px;
}

.page-dashboard .app-content .dashboard-kpi-card .dashboard-kpi-label {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 13px !important;
}

.page-dashboard .dashboard-panel {
    padding: 20px;
}

.page-dashboard .dashboard-redesign > .drivers-page-header {
    margin-bottom: 0;
}

.page-dashboard .dashboard-section-grid-three > .dashboard-panel:not(.dashboard-chart-panel) {
    min-height: 190px;
}

.page-dashboard .dashboard-quick-link {
    width: auto;
    min-width: 110px;
}

.page-dashboard .dashboard-panel-warning {
    background: #fff !important;
    border-top: 3px solid #e6b966 !important;
}

.app-content :is(.driver-profile-hero, .van-profile-hero) {
    background: #fff !important;
    padding: 24px;
}

.app-content .driver-profile-avatar {
    box-shadow: none;
    border: 1px solid var(--cm-border);
}

.app-content .driver-profile-info-grid article {
    background: #f8f9fb;
    border-color: transparent;
    box-shadow: none;
}

.app-content .van-profile-card {
    padding: 24px;
}

.app-content .van-profile-hero {
    padding: 0 0 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--cm-border);
}

.app-content .van-profile-info-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
    gap: 12px;
}

.app-content .van-profile-info-grid article > strong {
    white-space: normal;
    overflow-wrap: anywhere;
}

.app-content .tasks-column {
    padding: 8px;
    background: #eef1f5;
    border-radius: 10px;
}

.app-content .tasks-card {
    border-color: #e1e6ed;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(20, 32, 54, .035);
}

.app-content .tasks-card-title {
    font-weight: 600;
    line-height: 1.5;
}

body.app-popup-mode :is(.form-control, .form-select),
body.app-popup-mode .driver-wizard-grid > label > :is(input, select, textarea),
body.app-popup-mode:is(.page-driver-form, .page-van-form, .page-inspection360-form) :is(.driver-wizard, .van-form, .inspection360-form) :is(.form-control, .form-select),
body.app-popup-mode .select2-container--default .select2-selection--single {
    border: 1px solid #d7dde6 !important;
    border-radius: 8px !important;
    background-color: #fff !important;
    padding-inline: 12px;
    box-shadow: none !important;
}

body.app-popup-mode :is(.form-control, .form-select):disabled,
body.app-popup-mode .select2-container--disabled .select2-selection--single {
    background: #f1f3f6 !important;
    color: #748094 !important;
}

body.app-popup-mode :is(.form-control, .form-select):focus,
body.app-popup-mode .driver-wizard-grid > label > :is(input, select, textarea):focus,
.app-content .drivers-filter-bar :is(input, select):focus,
.select2-container--open .select2-selection {
    border-color: #7198e7 !important;
    outline: 2px solid #dbe8ff !important;
    outline-offset: 1px;
}

.app-popup-modal .modal-content {
    border: 1px solid var(--cm-border) !important;
    box-shadow: 0 20px 60px rgba(20, 32, 54, .18) !important;
}

body.app-body.app-popup-mode {
    background: #fff !important;
}

body.app-popup-mode.page-standard-form-popup .app-popup-form {
    border-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.app-popup-mode.page-driver-form .driver-wizard-footer.app-popup-form-footer {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
}

body.app-popup-mode.page-driver-form .driver-wizard-grid .select2-selection--single {
    height: 44px !important;
    min-height: 44px !important;
}

body.app-popup-mode.page-driver-form .driver-wizard-grid .select2-selection__rendered {
    line-height: 42px !important;
}

body.app-popup-mode.page-driver-form .driver-wizard-grid .select2-selection__arrow {
    height: 42px !important;
}

body.app-body :is(a, button, [role="tab"]):focus-visible {
    outline: 2px solid #4877d3 !important;
    outline-offset: 3px;
}

.app-content :is(.drivers-empty-state, .driver-tab-empty, .tasks-empty-card) {
    color: var(--cm-muted);
    background: #fafbfd;
    box-shadow: none;
}

@media (max-width: 767.98px) {
    .page-dashboard .app-content .dashboard-kpi-card {
        min-height: 104px !important;
        padding: 12px !important;
    }

    .app-content :is(.driver-profile-hero, .van-profile-hero) {
        padding: 16px;
    }

    .app-content .drivers-filter-bar {
        padding: 10px !important;
    }

    body.app-body .app-content .drivers-metrics-grid .drivers-metric-card {
        border: 1px solid var(--cm-border) !important;
        box-shadow: none !important;
    }

    body.app-body .app-content .drivers-page-actions {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    body.app-body .app-content .drivers-page-actions > .drivers-btn {
        flex: 1 1 140px !important;
        width: auto !important;
    }
}

@media (min-width: 768px) {
    body.app-body .app-content .drivers-metrics-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    }

    body.app-body .app-content .drivers-filter-bar {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-sidebar .app-sidebar-menu .menu-item .menu-link {
        transition: none;
    }
}

/* Consistency pass: shared popup canvas, form rhythm and document actions. */
body.app-body.app-popup-mode:is(.page-driver-form, .page-van-form, .page-inspection360-form) :is(input.form-control:not([type="file"]), .form-select, .select2-selection--single) {
    height: 44px !important;
    min-height: 44px !important;
    border: 1px solid #d7dde6 !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: none !important;
}

body.app-body.app-popup-mode:is(.page-driver-form, .page-van-form, .page-inspection360-form) .select2-selection--single .select2-selection__rendered {
    line-height: 42px !important;
}

body.app-body.app-popup-mode:is(.page-driver-form, .page-van-form, .page-inspection360-form) .select2-selection--single .select2-selection__arrow {
    height: 42px !important;
}

body.app-body.app-popup-mode .van-wizard-footer.app-popup-form-footer {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

@media (max-width: 767.98px) {
    body.app-body.app-popup-mode .van-wizard-footer.app-popup-form-footer {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 12px 16px !important;
        gap: 10px !important;
    }

    body.app-body.app-popup-mode .van-wizard-footer > [data-van-wizard-status] {
        grid-column: 1 / -1;
        order: -1;
    }
}

body.app-body .app-content .select2-container .select2-search--inline .select2-search__field {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.app-body .app-content .drivers-page-shell {
    gap: 24px !important;
}

body.app-body .app-content .drivers-filter-bar {
    width: 100% !important;
    max-width: none !important;
    align-items: end !important;
}

body.app-body .app-content .drivers-metric-card > strong {
    order: -1;
    font-size: 26px !important;
    line-height: 32px !important;
}

body.app-body .app-content .drivers-metric-card > strong > span {
    font: inherit !important;
    color: inherit !important;
}

body.app-body .app-content :is(.app-card, .drivers-table-card, .app-detail-card, .app-detail-hero, .typology-admin-card, .absence-log-metrics > article) {
    border-radius: 10px !important;
    box-shadow: none !important;
}

body.app-body .app-content .app-data-table {
    table-layout: auto !important;
}

body.app-body .app-content .app-data-table :is(th, td) {
    min-width: 0;
    max-width: 360px;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

body.app-body .app-content .app-data-table thead th {
    height: 42px !important;
    padding: 10px 16px !important;
    background: #f8f9fb !important;
}

body.app-body .app-content .app-data-table tbody td {
    height: 56px;
    padding: 10px 16px !important;
}

body.app-body .app-content :is(table .driver-tab-pill, .app-data-table .badge, .rental-period-status) {
    display: inline-flex !important;
    align-items: center;
    min-height: 28px !important;
    padding: 3px 10px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    line-height: 18px !important;
    font-weight: 600 !important;
}

body.app-body .app-content .drivers-table-card > .drivers-pagination {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between !important;
    gap: 12px;
    min-height: 64px;
    padding: 14px 16px !important;
    border-top: 1px solid var(--cm-border);
}

body.app-body .app-content .drivers-pagination-summary {
    margin: 0 !important;
    color: var(--cm-muted);
    font-size: 13px !important;
}

body.app-body .app-content .scorecards-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.app-body .app-content .scorecards-tab {
    display: inline-flex;
    align-items: center;
    min-height: 36px !important;
    padding: 0 12px !important;
    border: 1px solid var(--cm-border) !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: var(--cm-text) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

body.app-body .app-content .scorecards-tab.is-active {
    border-color: #bfdbfe !important;
    background: #eff6ff !important;
    color: #1d4ed8 !important;
}

body.app-body .app-content :is(.scorecards-tab, .routes-tab):hover {
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
}

body.app-body :is(.drivers-btn, .app-table-action, .routes-tab, .scorecards-tab, .dropdown-item, .app-popup-cancel, .app-popup-submit):focus-visible {
    outline: 2px solid #2563eb !important;
    outline-offset: 2px;
}

body.app-body.app-popup-mode .app-content {
    background: #fff !important;
    padding: 0 !important;
}

body.app-body.app-popup-mode.page-standard-form-popup:not(.page-driver-form):not(.page-van-form):not(.page-inspection360-form):not(.page-accident-report-form) .app-container {
    width: 100% !important;
    max-width: none !important;
    padding: 20px !important;
}

body.app-body.app-popup-mode.page-standard-form-popup:not(.page-driver-form):not(.page-van-form):not(.page-inspection360-form):not(.page-accident-report-form) .app-popup-form {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    justify-content: flex-start !important;
}

body.app-body.app-popup-mode.page-standard-form-popup:not(.page-driver-form):not(.page-van-form):not(.page-inspection360-form) .app-popup-form-content {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.app-body.app-popup-mode.page-standard-form-popup:not(.page-driver-form):not(.page-van-form):not(.page-inspection360-form):not(.page-accident-report-form) .app-popup-form-footer {
    width: 100% !important;
    max-width: none !important;
    position: static !important;
    margin-top: 20px !important;
    padding: 16px 0 0 !important;
    border-top: 1px solid var(--cm-border) !important;
    border-radius: 0 !important;
    gap: 8px !important;
}

body.app-body .modal .modal-header {
    min-height: 56px;
    padding: 14px 20px !important;
    border-bottom: 1px solid var(--cm-border) !important;
    background: #fff !important;
}

body.app-body .modal .modal-title {
    color: var(--cm-text) !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 26px !important;
}

body.app-popup-mode .warning-document-current-head {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding: 16px !important;
}

body.app-popup-mode :is(.app-document-summary, .contract-document-summary) {
    flex: 1;
    min-width: 0;
}

body.app-popup-mode :is(.app-document-identity, .contract-document-identity) {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
}

body.app-popup-mode .warning-document-current-head > .drivers-btn {
    flex: 0 0 auto;
    margin: 0 !important;
}

/* Fuel documents use the shared preview shell without a second upload card. */
body.app-popup-mode.page-fuel-documents .fuel-documents-panel {
    padding-top: 20px;
}

body.app-body.page-fuel-documents .warning-document-current {
    box-shadow: none !important;
    border-radius: 10px;
}

body.app-body.page-fuel-documents .warning-document-upload {
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

body.app-body.page-fuel-documents .warning-document-upload-row > .drivers-btn-primary {
    background: #1d4ed8 !important;
    color: #fff !important;
    box-shadow: none !important;
}

body.app-body.page-fuel-documents .warning-document-upload-row > .drivers-btn-primary:hover {
    background: #1e40af !important;
}

body.app-popup-mode .warning-document-upload {
    padding: 16px !important;
}

/* Keep preview geometry independent of the auto-sized parent iframe. */
body.app-popup-mode .warning-document-preview {
    height: 300px;
}

body.app-popup-mode .warning-document-upload-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start;
    gap: 8px !important;
}

body.app-popup-mode .warning-document-upload-row > .drivers-btn {
    width: auto !important;
    min-height: 36px !important;
}

body.app-body.app-popup-mode .warning-document-footer .drivers-btn {
    min-height: 36px !important;
    padding: 0 14px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
}

body.app-body .app-content .absence-log-metrics > article {
    min-height: 88px;
    text-align: left;
    align-items: flex-start;
    padding: 16px;
}

body.app-body .app-content .absence-log-metrics > article strong {
    font-size: 26px;
    line-height: 32px;
}

body.app-body.app-popup-mode .app-popup-form .app-popup-form-content textarea {
    min-height: 84px !important;
}

@media (max-width: 575.98px) {
    body.app-popup-mode .warning-document-preview {
        height: 240px;
    }

    body.app-body.app-popup-mode.page-standard-form-popup:not(.page-driver-form):not(.page-van-form):not(.page-inspection360-form):not(.page-accident-report-form) .app-container {
        padding: 16px !important;
    }

    body.app-popup-mode .warning-document-current-head {
        flex-wrap: wrap;
    }

    body.app-popup-mode .warning-document-upload-row {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* Keep wizard iframe and outer modal on the same mobile height contract. */
@media (max-width: 767.98px) {
    .app-popup-modal.app-wizard-popup .modal-dialog.modal-dialog-scrollable {
        height: calc(100dvh - 16px) !important;
        max-height: calc(100dvh - 16px) !important;
    }
    .app-popup-modal.app-wizard-popup .modal-content {
        height: 100% !important;
        max-height: 100% !important;
    }
    .app-popup-modal.app-wizard-popup .modal-header { flex-shrink: 0; }
    .app-popup-modal.app-wizard-popup .modal-body {
        flex: 1 1 0 !important;
        min-height: 0 !important;
    }
    .app-popup-modal.app-wizard-popup .app-popup-frame {
        height: 100% !important;
        max-height: 100% !important;
    }
}
/* Platform feedback: shared CRM surfaces with category, vote and roadmap layouts. */
.feedback-layout { display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: 24px; align-items: start; }
.feedback-categories { padding: 16px; }
.feedback-categories h2, .feedback-section-title { margin: 0 0 12px; font-size: 16px; line-height: 24px; font-weight: 600; }
.feedback-categories nav { display: grid; gap: 4px; }
.feedback-categories .routes-tab { justify-content: space-between !important; width: 100%; }
.page-feedback .feedback-categories h2, .page-feedback .feedback-section-title, .page-feedback .feedback-announcement h2 { font-size: 16px !important; line-height: 24px !important; }
.feedback-list { display: grid; gap: 12px; min-width: 0; }
.feedback-list .feedback-section-title { margin-bottom: 0; }
.feedback-idea { display: flex; align-items: flex-start; gap: 16px; padding: 20px; }
.feedback-card-content { min-width: 0; flex: 1; }
.page-feedback h3, .feedback-announcement h2 { font-size: 16px; line-height: 24px; font-weight: 600; margin: 0 0 4px; overflow-wrap: anywhere; }
.feedback-body { color: var(--cm-muted); white-space: pre-wrap; overflow-wrap: anywhere; margin: 0 0 16px; }
.feedback-card-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.feedback-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--cm-muted); overflow-wrap: anywhere; }
.feedback-meta > span { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.page-feedback .feedback-vote { display: flex; flex-direction: column; gap: 0; min-width: 44px; min-height: 64px; padding: 6px 10px; border-color: var(--cm-border); }
.page-feedback .feedback-vote.is-active { color: var(--cm-primary) !important; background: #eff6ff !important; border-color: var(--cm-primary) !important; }
.feedback-roadmap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; }
.feedback-roadmap-column { min-width: 0; display: grid; gap: 12px; padding: 16px; border-radius: 10px; background: var(--cm-bg); border: 1px solid var(--cm-border); }
.feedback-column-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--cm-muted); }
.feedback-column-header h2 { margin: 0; font-size: 16px; }
.feedback-roadmap-card, .feedback-announcement { padding: 20px; }
.feedback-status-form { display: flex; gap: 8px; margin-top: 16px; }
.feedback-status-form .form-select { flex: 1; min-width: 0; width: auto; }
@media (max-width: 991.98px) {
    .feedback-layout, .feedback-roadmap { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .feedback-categories nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .feedback-idea { padding: 16px; gap: 12px; }
    .feedback-roadmap-card, .feedback-announcement { padding: 16px; }
    .feedback-meta { gap: 8px; }
}

/* Accident comments pilot: shared composer with a chronological activity feed. */
.app-popup-modal.app-activity-popup .modal-dialog { width: min(94vw, 1280px) !important; max-width: min(94vw, 1280px) !important; margin: 4vh auto !important; }
.app-popup-modal.app-documentation-history-popup .modal-dialog { width: min(94vw, 960px) !important; max-width: min(94vw, 960px) !important; }
.app-popup-modal.app-documentation-history-popup .modal-content { max-width: 100% !important; }
.app-popup-modal.app-activity-popup .modal-dialog .modal-content { width: 100% !important; max-width: none !important; max-height: 92vh !important; overflow: hidden; }

/* Shared side-panel presentation, selected by the popup profile. */
.app-popup-modal.app-side-panel { padding: 0 !important; }
.app-popup-modal.app-side-panel .modal-dialog {
    width: min(100vw, 960px) !important;
    max-width: min(100vw, 960px) !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    margin: 0 0 0 auto !important;
}
.app-popup-modal.app-side-panel .modal-dialog .modal-content {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    max-height: 100% !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden;
}
.app-popup-modal.app-side-panel .modal-body { flex: 1; padding: 0 !important; overflow: hidden; }
.app-popup-modal.app-side-panel.fade .modal-dialog { transform: translateX(100%); }
.app-popup-modal.app-side-panel.show .modal-dialog { transform: none; }
.app-popup-modal.app-activity-popup .modal-title { display: flex; align-items: center; gap: 12px; }
.app-popup-modal.app-activity-popup .modal-title > i { order: 1; margin-left: auto; flex-shrink: 0; }
body.app-popup-mode.page-accident-comments .app-container { padding: 0 !important; max-width: none; }
.app-popup-mode.page-accident-comments .accident-activity { height: 100vh; min-height: 0; }
.app-popup-mode.page-accident-comments .accident-activity-main { min-height: 0; }
.app-popup-mode.page-accident-comments .accident-activity-feed { overflow-y: auto; min-height: 0; }
.accident-activity { display: grid; grid-template-columns: 164px minmax(0, 1fr); min-height: 560px; color: var(--cm-text); background: var(--cm-surface, #fff); }
.accident-activity-filters { padding: 24px 12px; border-right: 1px solid var(--cm-border); background: var(--cm-bg); }
.accident-activity-caption { display: block; padding: 0 10px 12px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--cm-muted); }
.accident-activity-filter { display: flex; justify-content: space-between; gap: 8px; width: 100%; padding: 9px 10px; margin-bottom: 4px; border: 0; border-radius: 8px; background: transparent; color: var(--cm-muted); font-size: 13px; }
.accident-activity-filter.is-active { background: var(--cm-surface, #fff); color: var(--cm-text); font-weight: 600; }
.accident-activity-filter:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.accident-activity-main { min-width: 0; display: flex; flex-direction: column; }
.accident-activity-context { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 14px 20px; border-bottom: 1px solid var(--cm-border); font-size: 12px; color: var(--cm-muted); }
.accident-activity-feed { padding: 8px 20px 24px; flex: 1; min-width: 0; }
.accident-activity .accident-activity-day h2 { display: flex; align-items: center; gap: 12px; margin: 20px 0 14px; color: var(--cm-muted); font-size: 11px !important; line-height: 16px !important; font-weight: 600; text-align: center; }
.accident-activity-day h2::before, .accident-activity-day h2::after { content: ''; height: 1px; background: var(--cm-border); flex: 1; }
.accident-activity-entry { display: flex; gap: 10px; margin-bottom: 12px; padding: 12px; border: 1px solid var(--cm-border); border-radius: 6px; font-size: 13px; }
.accident-activity-entry[hidden], .accident-activity-day[hidden] { display: none; }
.accident-activity-entry.is-system { background: var(--cm-bg); border-left: 3px solid #94a3b8; color: var(--cm-muted); }
.accident-activity-entry > .mdi { font-size: 18px; color: #94a3b8; }
.accident-activity-entry.is-comment > .mdi { color: #2563eb; }
.accident-activity-avatar { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 999px; object-fit: cover; background: var(--cm-bg); }
.accident-activity-delete { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; color: var(--cm-muted); text-decoration: none; transition: color .15s ease, background-color .15s ease; }
.accident-activity-delete:hover, .accident-activity-delete:focus-visible { color: #dc2626; background: rgba(220, 38, 38, .08); }
.accident-activity-delete .mdi { font-size: 15px; }
.accident-activity-copy { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.accident-activity-copy header { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 7px; }
.accident-activity-copy header strong { font-weight: 600; }
.accident-activity-copy time { margin-left: auto; white-space: nowrap; font-size: 11px; color: var(--cm-muted); }
.accident-activity-copy .app-status-pill { min-height: 0; padding: 1px 5px; font-size: 10px; line-height: 15px; border-radius: 4px; }
.accident-activity-changes { padding: 0; margin: 8px 0 0; list-style: none; }
.accident-activity-changes li + li { margin-top: 5px; }
.accident-activity-text { white-space: pre-wrap; margin-top: 8px; }
.accident-activity-composer { padding: 12px 20px 16px; border-top: 1px solid var(--cm-border); }
.accident-activity-composer .comment-composer-card { margin-top: 0 !important; box-shadow: none; background: var(--cm-surface, #fff); }
.accident-activity-composer .comment-area-box .ql-container.ql-snow,
.accident-activity-composer .js-quill-editor,
.accident-activity-composer .ql-editor { min-height: 80px !important; }
.accident-activity-composer .comment-area-box > .bg-light { flex-wrap: wrap; gap: 8px; }
.accident-activity-composer .comment-area-box > .bg-light > .d-flex { flex-wrap: wrap; min-width: 0; max-width: 100%; }
.accident-activity-composer .js-comment-file-input { max-width: 100%; }
.accident-activity-composer .js-attachments-list:empty { display: none; }
.accident-activity-composer .comment-mention-menu { top: auto !important; bottom: calc(100% + 8px); max-height: 240px; max-width: calc(100% - 24px); }
@media (max-width: 767.98px) {
    .app-popup-mode.page-accident-comments .accident-activity { height: auto; min-height: 400px; }
    .app-popup-mode.page-accident-comments .accident-activity-feed { overflow-y: visible; }
    .accident-activity { grid-template-columns: minmax(0, 1fr); min-height: 400px; }
    .accident-activity-filters { display: flex; gap: 6px; padding: 10px 12px; border-right: 0; border-bottom: 1px solid var(--cm-border); }
    .accident-activity-caption { display: none; }
    .accident-activity-filter { margin: 0; padding: 8px; }
    .accident-activity-context, .accident-activity-composer { padding: 12px; }
    .accident-activity-feed { padding: 0 12px 16px; }
    .accident-activity-copy time { flex-basis: 100%; margin-left: 0; }
}

/* Action icons: neutral by default and semantic colour on hover/focus. Native
   titles are replaced by the shared Bootstrap tooltip in the base layout. */
body.app-body .app-content :is(.app-table-action, .app-table-media-action) {
    transition: background-color .15s ease, color .15s ease;
}

body.app-body .app-content :is(.app-table-action, .app-table-media-action) :is(i, svg) {
    transition: color .15s ease;
}

body.app-body .app-content :is(.app-table-action, .app-table-media-action):is(:hover, :focus-visible) {
    background: var(--action-hover-bg, #e8effc) !important;
    color: var(--action-hover-color, #1d4ed8) !important;
}

body.app-body .app-content :is(.app-table-action, .app-table-media-action):is(:hover, :focus-visible) :is(i, svg) {
    color: var(--action-hover-color, #1d4ed8) !important;
}

body.app-body .app-content :is(
    .app-action-view, .app-table-action-view,
    .app-action-info, .app-table-action-info,
    .app-action-document, .app-table-action-document,
    .app-table-action-documentation, .app-table-action-contracts,
    .app-table-action-report, .app-table-action-download,
    .app-table-media-action-document
) {
    --action-hover-color: #1d4ed8;
    --action-hover-bg: #e8effc;
}

body.app-body .app-content :is(.app-action-edit, .app-table-action-edit, .app-table-action-weekly) {
    --action-hover-color: #b45309;
    --action-hover-bg: #fef3c7;
}

body.app-body .app-content :is(.app-action-delete, .app-table-action-delete) {
    --action-hover-color: #b42335;
    --action-hover-bg: #fff0f1;
}

body.app-body .app-content :is(.app-action-close, .app-table-action-close) {
    --action-hover-color: #c2410c;
    --action-hover-bg: #ffedd5;
}

body.app-body .app-content :is(
    .app-action-complete, .app-table-action-complete,
    .app-action-save, .app-action-assign, .app-table-action-assign,
    .app-table-action-validate, .app-table-action-billing
) {
    --action-hover-color: #15803d;
    --action-hover-bg: #dcfce7;
}

body.app-body .app-content :is(.app-action-comment, .app-table-action-comment, .app-table-media-action-comment) {
    --action-hover-color: #0f766e;
    --action-hover-bg: #ccfbf1;
}

body.app-body .app-content :is(
    .app-table-action-history, .app-table-action-dispute,
    .app-table-action-photo, .app-table-media-action-photo
) {
    --action-hover-color: #6d28d9;
    --action-hover-bg: #f3e8ff;
}

body.app-body .app-content :is(.app-table-action-skip, .app-action-muted) {
    --action-hover-color: #475569;
    --action-hover-bg: #eef2f6;
}

/* Compact reading and confirmation popups share the CRM shell with lighter spacing. */
body.app-body .app-popup-modal.app-compact-popup .modal-dialog {
    width: min(calc(100vw - 32px), 672px) !important;
    max-width: min(calc(100vw - 32px), 672px) !important;
    min-height: calc(100dvh - 48px) !important;
    max-height: none !important;
    margin: 24px auto !important;
}

body.app-body .app-popup-modal.app-compact-popup.app-confirmation-popup .modal-dialog {
    width: min(calc(100vw - 32px), 512px) !important;
    max-width: min(calc(100vw - 32px), 512px) !important;
}

body.app-body .app-popup-modal.app-compact-popup .modal-content {
    max-width: none !important;
    max-height: calc(100dvh - 48px) !important;
    border-radius: 10px !important;
    background: var(--cm-surface, #fff) !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .14) !important;
}

body.app-body .app-popup-modal.app-compact-popup .modal-header {
    min-height: 0 !important;
    padding: 24px 24px 12px !important;
    border-bottom: 0 !important;
    background: var(--cm-surface, #fff) !important;
}

body.app-body .app-popup-modal.app-compact-popup .modal-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px !important;
    line-height: 24px !important;
    font-weight: 600 !important;
}

body.app-body .app-popup-modal.app-compact-popup .modal-title i {
    color: var(--cm-primary, #1d4ed8);
    font-size: 18px;
}

body.app-body .app-popup-modal.app-confirmation-popup .modal-title {
    font-size: 18px !important;
}

.app-compact-popup .app-confirmation-copy {
    padding: 0 24px;
    color: var(--cm-muted);
    font-size: 14px;
    line-height: 20px;
}

.app-compact-popup .app-confirmation-copy p { margin-bottom: 8px; }

body.app-body .app-popup-modal.app-compact-popup .modal-footer {
    padding: 16px 24px 24px;
    border-top: 0 !important;
    gap: 8px;
}

body.app-body .app-popup-modal.app-compact-popup :is(.modal-body, .modal-footer) {
    background: var(--cm-surface, #fff) !important;
}

body.app-body .app-popup-modal.app-compact-popup .btn-close {
    width: 12px;
    height: 12px;
    padding: 0;
}

body.app-body .app-popup-modal.app-compact-popup .modal-footer .drivers-btn-primary {
    background: var(--cm-primary, #1d4ed8) !important;
    border-color: var(--cm-primary, #1d4ed8) !important;
    box-shadow: none !important;
}

body.app-body .app-popup-modal.app-compact-popup .modal-footer > * { margin: 0; }

body.app-body.app-popup-mode.page-standard-form-popup.page-route-summary:not(.page-driver-form):not(.page-van-form):not(.page-inspection360-form) .app-container {
    padding: 4px 24px 24px !important;
}

body.app-body.app-popup-mode.page-route-summary .route-summary-popup-cycle-title {
    background: color-mix(in srgb, var(--cm-primary, #1d4ed8) 10%, var(--cm-surface, #fff)) !important;
}

body.app-body.app-popup-mode.page-route-summary .route-summary-popup-chip {
    border: 0 !important;
    background: var(--cm-bg, #f5f7fa) !important;
    box-shadow: none !important;
}

/* Rich van selector used by search/filter forms. */
.app-van-select-container .select2-selection__rendered,
.app-driver-select-container .select2-selection__rendered {
    overflow: hidden;
}

.app-van-select-value,
.app-driver-select-value {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    color: var(--cm-text) !important;
    font-size: 14px !important;
    font-weight: var(--cm-type-body-weight) !important;
    line-height: 20px !important;
}

.app-van-select-value i,
.app-driver-select-value i {
    flex: 0 0 auto;
    color: var(--cm-muted);
    font-size: 17px;
    line-height: 1;
}

.app-van-select-value > span,
.app-driver-select-value > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-van-select-value.is-placeholder,
.app-driver-select-value.is-placeholder {
    color: var(--cm-soft-muted) !important;
    font-weight: var(--cm-type-body-weight) !important;
}

.app-van-select-dropdown .select2-search--dropdown .select2-search__field,
.app-driver-select-dropdown .select2-search--dropdown .select2-search__field {
    padding-left: 36px !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23626d7e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 12px center !important;
    background-size: 16px 16px !important;
}

.app-van-select-dropdown .select2-results__options,
.app-driver-select-dropdown .select2-results__options {
    max-height: 340px;
}

.app-van-select-option,
.app-driver-select-option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.app-van-select-avatar {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #e8f0fe;
    color: #1d4ed8;
}

.app-van-select-avatar i {
    font-size: 18px;
    line-height: 1;
}

.app-van-select-body,
.app-driver-select-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.app-van-select-plate,
.app-driver-select-name {
    color: var(--cm-text) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 18px !important;
}

.app-van-select-meta,
.app-driver-select-meta {
    overflow: hidden;
    color: var(--cm-muted) !important;
    font-size: 12.5px !important;
    font-weight: 400 !important;
    line-height: 16px !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Shared hover/focus for all Select2 controls, including popup overrides. */
html body .select2-container.select2-container--default .select2-results__option.select2-results__option--highlighted[aria-selected] {
    background: var(--cm-bg) !important;
    color: var(--cm-text) !important;
}

html body .select2-container.select2-container--default .select2-results__option.select2-results__option--highlighted:is(.select2-results__option--selected, [aria-selected="true"]) {
    background: #d1fae5 !important;
    color: #065f46 !important;
}

.app-driver-select-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-driver-select-avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    overflow: hidden;
    border-radius: 50%;
    background: #e8f0fe;
    color: #1d4ed8;
    font-size: 13px;
    font-weight: 600;
}

.app-driver-select-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.app-driver-select-value .app-driver-select-avatar {
    width: 22px;
    height: 22px;
    font-size: 10px;
}

/* Contract disclosure and multiple private documents. */
.contracts-table .contract-status-pill {
    border: 0;
    border-left: 2px solid currentColor;
    border-radius: 0;
    background: transparent;
    padding: 0 10px;
    min-height: 20px;
}
.contracts-table .contracts-driver-cell { gap: 4px; }
.contracts-table .contracts-action-link { min-height: 32px; font-size: 13px; border-radius: 8px; background: var(--cm-surface, #fff); }
.contracts-table .contracts-document-button { position: relative; }
.contract-file-missing { position: absolute; right: -3px; top: -3px; width: 9px; height: 9px; border-radius: 50%; background: #ef4444; }
.contracts-hours { white-space: nowrap; font-size: 12px; font-variant-numeric: tabular-nums; }
.contracts-expand { display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--cm-muted); width: 28px; height: 32px; }
.contracts-expand[aria-expanded="true"] i { transform: rotate(180deg); }
.app-content .contracts-table .contract-details-row[hidden] { display: none; }
.app-content .contracts-table .contract-details-row > td {
    position: static; width: auto; max-width: none; padding: 20px; white-space: normal;
    background: var(--cm-bg); text-align: left; box-shadow: none;
}
.contract-details-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.contract-details-card { min-width: 0; padding: 20px; border: 1px solid var(--cm-border); border-radius: 12px; background: var(--cm-surface, #fff); }
.contract-details-card h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 20px; color: var(--cm-muted); font-size: 12px; font-weight: 600; letter-spacing: .7px; text-transform: uppercase; }
.contract-details-data { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; }
.contract-details-data dt { color: var(--cm-muted); font-weight: 400; margin-bottom: 3px; }
.contract-details-data dd { color: var(--cm-text); margin: 0; overflow-wrap: anywhere; white-space: pre-line; }
.contract-detail-wide { grid-column: 1 / -1; }
.contract-document-group + .contract-document-group { margin-top: 20px; }
.contract-document-group h3 { color: #60a5fa; font-size: 12px; font-weight: 600; text-transform: uppercase; margin: 0 0 8px; }
.contract-document-item, .contract-document-empty, .contract-document-add { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--cm-border); border-radius: 10px; color: var(--cm-text); text-decoration: none; margin-bottom: 8px; }
.contract-document-item span { min-width: 0; overflow-wrap: anywhere; flex: 1; }
.contract-document-item > i, .contract-document-empty > i { font-size: 22px; color: var(--cm-muted); }
.contract-document-item[aria-current="true"] { border-color: #60a5fa; }
.contract-document-empty { border-style: dashed; color: #d97706; background: var(--cm-bg); min-height: 64px; }
.contract-document-add { justify-content: center; color: var(--cm-muted); border-style: dashed; }
.contract-history-empty { color: var(--cm-muted); font-style: italic; text-align: center; padding: 16px 0; }
.contract-history-item { border-left: 2px solid var(--cm-border); padding: 0 0 16px 14px; margin-bottom: 12px; overflow-wrap: anywhere; }
.contract-history-item strong, .contract-history-item time { display: block; }
.contract-history-item time { color: var(--cm-muted); font-size: 12px; margin: 4px 0 8px; }
.contract-history-item p { margin: 4px 0; white-space: pre-line; }
.contract-upload-zone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 20px; min-height: 132px; border: 2px dashed var(--cm-border); border-radius: 10px; color: var(--cm-muted); text-align: center; cursor: pointer; }
.contract-upload-zone > i { font-size: 30px; line-height: 1; }
.contract-upload-zone input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.contract-upload-zone:focus-within { outline: 2px solid #2563eb; outline-offset: 2px; }
.contract-selected-files { padding-left: 20px; margin: 8px 0 0; overflow-wrap: anywhere; }
.contract-selected-files:empty { display: none; }
.contract-finish-fields { width: 100%; min-width: 0; }
.page-contract-finish-form .app-popup-form-footer .app-popup-submit { background: #ef4444; border-color: #ef4444; color: #fff; }
.page-contract-finish-form .app-popup-form-footer .app-popup-submit:hover { background: #dc2626; }
.contract-documents-panel .warning-document-upload { display: block; margin-top: 16px; }
.contract-documents-panel .warning-document-upload .contract-upload-zone { display: flex; font-weight: 400; }
html body.app-body.page-contracts-redesign .drivers-page-header { padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
html body.app-body.page-contracts-redesign .drivers-page-header::after { display: none !important; }
html body.app-body.page-contracts-redesign .app-content .drivers-metric-card { min-height: 84px !important; align-items: flex-start !important; text-align: left !important; background: var(--cm-surface, #fff) !important; border: 1px solid var(--cm-border) !important; box-shadow: none !important; }
html body.app-body.page-contracts-redesign .app-content .drivers-metric-card::before { display: none !important; }
html body.app-body:is(.page-contracts-redesign, .page-driver-profile) .app-content .contracts-table .contract-status-pill { border: 0 !important; border-left: 2px solid currentColor !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
html body.app-body:is(.page-contracts-redesign, .page-driver-profile) .app-content .contracts-table .contracts-action-link { width: auto !important; padding: 0 10px !important; color: var(--cm-text) !important; border: 1px solid var(--cm-border) !important; box-shadow: none !important; }
html body.app-body:is(.page-contracts-redesign, .page-driver-profile) .app-content .contracts-table .contracts-action-link.is-danger,
html body.app-body:is(.page-contracts-redesign, .page-driver-profile) .app-content .contracts-table .contracts-action-link.is-danger :is(span, i) { color: #ef4444 !important; border-color: #fecaca !important; }
html body.app-body:is(.page-contracts-redesign, .page-driver-profile) .app-content .contracts-table .contract-details-row > td { text-align: left !important; padding: 20px !important; }
html body.app-body:is(.page-contracts-redesign, .page-driver-profile) .app-content .contract-details-card h2 { font-size: 12px !important; line-height: 18px !important; color: var(--cm-muted) !important; }
html body.app-body:is(.page-contracts-redesign, .page-driver-profile) .app-content .contract-details-card h3 { font-size: 12px !important; line-height: 18px !important; color: #60a5fa !important; }
html body.app-body:is(.page-contracts-redesign, .page-driver-profile) .app-content .contract-details-card dt { font-weight: 400 !important; }
html body.app-body.app-popup-mode.page-contract-finish-form .app-popup-form-footer .app-popup-submit { background: #ef4444 !important; border-color: #ef4444 !important; color: #fff !important; box-shadow: none !important; }
html body.app-body.app-popup-mode.page-contract-finish-form .app-popup-submit i { color: inherit !important; }
html body.app-body .app-contract-finish-form-popup .modal-title i { color: #ef4444 !important; margin-right: 6px; }
html body.app-body:is(.page-contracts-redesign, .page-driver-profile) .app-content .contracts-table { min-width: 1160px; }
html body.app-body:is(.page-contracts-redesign, .page-driver-profile) .app-content .contracts-table :is(th, td):nth-child(1):not([colspan]) { width: 210px; }
html body.app-body:is(.page-contracts-redesign, .page-driver-profile) .app-content .contracts-table :is(th, td):nth-child(8) { width: 70px; }
html body.app-body:is(.page-contracts-redesign, .page-driver-profile) .app-content .contracts-table :is(th, td):nth-child(9) { width: 280px !important; min-width: 280px !important; max-width: none !important; }
html body.app-body:is(.page-contracts-redesign, .page-driver-profile) .app-content .contracts-action-link :is(span, i) { color: inherit !important; }
@media (max-width: 991.98px) {
    .contract-details-grid { grid-template-columns: minmax(0, 1fr); }
    .contract-details-card { padding: 16px; }
    .contracts-table .contract-details-grid { max-width: calc(100vw - 88px); }
}

/* ============================================================================
   DARK SIDEBAR — always on
   ----------------------------------------------------------------------------
   The sidebar keeps a dark surface for both theme families (Theme 1 and
   Theme 2) and both color modes (light and night). It lives inside
   @layer cm-color-mode (declared by catchme-dark.css) so its !important
   declarations outrank the unlayered light adapters and the night-mode
   surface rules, while still following each theme's accent color.
   ============================================================================ */
@layer cm-color-mode {
    html body.app-body .app-menu.app-sidebar {
        --cm-sb-bg: #071524;
        --cm-sb-border: rgba(148, 163, 184, 0.14);
        --cm-sb-brand-border: rgba(148, 163, 184, 0.12);
        --cm-sb-submenu-border: rgba(148, 163, 184, 0.15);
        --cm-sb-text: #f8fafc;
        --cm-sb-text-2: #cbd5e1;
        --cm-sb-icon: #93a4b8;
        --cm-sb-title: #64748b;
        --cm-sb-hover-bg: #13283d;
        --cm-sb-active-bg: rgba(56, 189, 248, 0.16);
        --cm-sb-active-text: #ffffff;
        --cm-sb-accent: #38bdf8;
        background: var(--cm-sb-bg) !important;
        border-right: 1px solid var(--cm-sb-border) !important;
        color: var(--cm-sb-text) !important;
        box-shadow: none !important;
    }

    html[data-cm-theme="theme-2"] body.app-body .app-menu.app-sidebar {
        --cm-sb-active-bg: linear-gradient(90deg, rgba(45, 212, 191, 0.18), rgba(56, 189, 248, 0.04));
        --cm-sb-active-text: #5eead4;
        --cm-sb-accent: #2dd4bf;
    }

    html body.app-body .app-menu.app-sidebar :is(.app-sidebar-shell, .app-sidebar-scroll) {
        background: transparent !important;
    }

    html body.app-body .app-menu.app-sidebar .app-sidebar-brand {
        background: transparent !important;
        border-bottom: 1px solid var(--cm-sb-brand-border) !important;
    }

    html body.app-body .app-menu.app-sidebar .app-sidebar-brand-name {
        color: var(--cm-sb-text) !important;
    }

    html body.app-body .app-menu.app-sidebar .app-sidebar-menu :is(.menu-title, .sub-menu .menu-title) {
        color: var(--cm-sb-title) !important;
        opacity: 1 !important;
    }

    html body.app-body .app-menu.app-sidebar .app-sidebar-menu .menu-item .menu-link {
        color: var(--cm-sb-text-2) !important;
    }

    html body.app-body .app-menu.app-sidebar .app-sidebar-menu .menu-item .menu-link > .menu-text {
        color: inherit !important;
    }

    html body.app-body .app-menu.app-sidebar .app-sidebar-menu :is(.menu-icon, .menu-arrow) {
        color: var(--cm-sb-icon) !important;
    }

    html body.app-body .app-menu.app-sidebar .app-sidebar-menu .menu-item .menu-link:is(:hover, [aria-expanded="true"]) {
        background: var(--cm-sb-hover-bg) !important;
        color: var(--cm-sb-text) !important;
    }

    html body.app-body .app-menu.app-sidebar .app-sidebar-menu .menu-item .menu-link:is(:hover, [aria-expanded="true"]) :is(.menu-icon, .menu-arrow) {
        color: var(--cm-sb-accent) !important;
    }

    html body.app-body .app-menu.app-sidebar .app-sidebar-menu .menu-item.menuitem-active > .menu-link,
    html body.app-body .app-menu.app-sidebar .app-sidebar-menu .menu-item .menu-link.active {
        background: var(--cm-sb-active-bg) !important;
        color: var(--cm-sb-active-text) !important;
    }

    html body.app-body .app-menu.app-sidebar .app-sidebar-menu .menu-item.menuitem-active > .menu-link .menu-icon,
    html body.app-body .app-menu.app-sidebar .app-sidebar-menu .menu-item .menu-link.active .menu-icon {
        color: var(--cm-sb-accent) !important;
    }

    html body.app-body .app-menu.app-sidebar .app-sidebar-menu .sub-menu {
        border-left-color: var(--cm-sb-submenu-border) !important;
    }

    html body.app-body .app-menu.app-sidebar .app-sidebar-menu .sub-menu .menu-link {
        color: var(--cm-sb-text-2) !important;
    }

    html body.app-body .app-menu.app-sidebar .app-sidebar-menu .sub-menu .menu-link:is(:hover, .active) {
        background: var(--cm-sb-hover-bg) !important;
        color: var(--cm-sb-accent) !important;
    }
}
/* Shared human-comment counters, including compact table actions. */
html body.app-body .app-content .app-comment-count {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: auto !important;
    min-width: 42px;
    padding: 3px 8px !important;
    white-space: nowrap;
}
html body.app-body .app-content .app-comment-count.has-comments {
    color: #1d4ed8 !important;
    border: 1px solid #bfdbfe !important;
    background: #eff6ff !important;
}
html body.app-body .app-content .app-comment-count.is-empty {
    color: #64748b !important;
    border: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
}
html body.app-body .app-content .app-comment-count > span { display: inline !important; font-size: 12px; font-weight: 600; }
html body.app-body .app-content .app-comment-count > i { color: inherit !important; }

/* Fleet summaries share the CRM surface, typography and compact status pills. */
.drivers-filter-field { display: flex; flex-direction: column; gap: 6px; min-width: 150px; flex: 1 1 150px; }
.drivers-filter-field > span { color: var(--cm-muted); font-size: 12px; font-weight: 600; }
.drivers-filter-field .drivers-filter-search { width: 100%; min-width: 0; }
.driver-profile-info-grid article > strong { overflow-wrap: anywhere; }
.driver-profile-private[open] > summary { margin-bottom: 16px; }
.fleet-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.fleet-summary-grid.fleet-summary-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fleet-summary-card { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px; min-width: 0; border: 1px solid var(--cm-border); border-radius: 10px; color: var(--cm-text); background: var(--cm-surface); text-decoration: none; }
.fleet-summary-card.is-active { border-bottom: 3px solid #1d4ed8; }
.fleet-summary-chips { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.drivers-donut.fleet-summary-donut { width: 58px; height: 58px; flex-basis: 58px; background: radial-gradient(circle at center, var(--cm-surface) 0 56%, transparent 57%), var(--segments); }
.drivers-donut.fleet-summary-donut strong { font-size: 14px; font-weight: 600; }
.fleet-summary-card small.text-danger { color: #b42318 !important; }
.maintenance-table td, .maintenance-table td .app-status-pill, .maintenance-table td .maintenance-status-pill, .maintenance-table td .maintenance-forecast, .maintenance-table td .app-comment-count > span, .maintenance-table td .app-created-meta { font-weight: 400 !important; }
.maintenance-table .maintenance-type-cell > span, .maintenance-table .maintenance-date-cell > span { display: block; font-weight: 400; color: var(--cm-text); }
.maintenance-table .maintenance-forecast { padding: 0; background: transparent; border: 0; }
.inspections360-table td:nth-last-child(4) { max-width: 240px; }
/* Linked fleet records retain their status tones in tables, cards and dialogs. */
html body.app-body .app-content :is(.accident-icon-box, .app-status-pill, .absence-status-option).incidence-tone-1 { color: #9a3412 !important; background: #fff7ed !important; border-color: #fdba74 !important; }
html body.app-body .app-content :is(.accident-icon-box, .app-status-pill, .absence-status-option).incidence-tone-2 { color: #1d4ed8 !important; background: #eff6ff !important; border-color: #93c5fd !important; }
html body.app-body .app-content :is(.accident-icon-box, .app-status-pill, .absence-status-option).incidence-tone-3 { color: #15803d !important; background: #f0fdf4 !important; border-color: #86efac !important; }
.incidence-status-options .absence-status-option:has(input:checked) { outline: 2px solid currentColor; outline-offset: 2px; }
html body.app-body .app-content .incidence-status-options .absence-status-option { border-radius: var(--cm-radius); }
html body.app-body .app-content .incidence-status-options .absence-status-option > span { color: inherit !important; background: inherit !important; border-color: inherit !important; }
.accident-icon-report.has-missing-friendly-part { position: relative; }
.accident-icon-report.has-missing-friendly-part::after { content: ''; position: absolute; top: -2px; right: -2px; width: 7px; height: 7px; border-radius: 50%; background: #dc2626; }
.van-accidents-table .accident-clip { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px !important; }
html body.app-body .app-content .drivers-table [data-highlighted-row] { outline: none; }
html body.app-body .app-content .drivers-table [data-highlighted-row] > td { background: #eff6ff !important; }
html body.app-body .app-content .drivers-table [data-highlighted-row] > td:first-child { border-left: 3px solid #1d4ed8 !important; }
.incidences-table th:nth-child(1), .incidences-table td:nth-child(1) { width: 16%; }
.incidences-table th:nth-child(3), .incidences-table td:nth-child(3) { width: 28%; max-width: 300px; white-space: normal; }
@media (max-width: 991.98px) {
    .fleet-summary-grid, .fleet-summary-grid.fleet-summary-two { grid-template-columns: 1fr; }
}

/* Monthly absence totals: native links preserve keyboard and no-JS filtering. */
.absence-monthly-panel { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 24px; padding: 24px; }
.absence-monthly-main { min-width: 0; }
.absence-monthly-main h2 { font-size: 18px; line-height: 26px; margin: 0; }
.absence-monthly-main .drivers-page-header { margin-bottom: 12px; }
.absence-monthly-metrics { display: grid; gap: 12px; }
html body.app-body .app-content .absence-monthly-metrics .drivers-metric-card { padding: 10px 16px !important; min-height: 84px !important; gap: 2px !important; align-items: flex-start !important; text-align: left !important; }
.absence-monthly-metrics small { color: var(--cm-muted); }
.absence-monthly-chart { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; margin: 12px 0; }
.absence-monthly-column { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--cm-text); font-size: 12px; border-radius: 6px; padding: 4px 0; }
.absence-monthly-column:hover, .absence-monthly-column.is-active { background: var(--cm-bg); outline: 2px solid #93c5fd; }
.absence-monthly-column:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }
.absence-monthly-track { height: 190px; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; border-bottom: 1px solid var(--cm-border); }
.absence-monthly-track strong { font-size: 12px; margin-bottom: 4px; }
.absence-monthly-bar { display: block; width: min(100%, 26px); flex-shrink: 0; }
.absence-monthly-bar.is-success { background: #15803d; }
.absence-monthly-bar.is-warning { background: #d97706; }
.absence-monthly-bar.is-danger { background: #dc2626; }
@media (max-width: 991.98px) {
    .absence-monthly-panel { grid-template-columns: 1fr; padding: 16px; gap: 16px; }
    .absence-monthly-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .absence-monthly-metrics { grid-template-columns: 1fr; }
    .absence-monthly-chart { gap: 2px; }
    .absence-monthly-column { font-size: 10px; }
}

/* Evaluation criteria: native radios retain keyboard and required-field behavior. */
.evaluation-criterion { border: 0; padding: 0; margin: 0; min-width: 0; }
.evaluation-criterion legend { float: none; width: auto; font-size: 14px; }
.evaluation-rating-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.evaluation-rating-choice { position: relative; cursor: pointer; margin: 0; }
.evaluation-rating-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.evaluation-rating-choice .app-status-pill { border: 2px solid transparent; }
.evaluation-rating-choice input:checked + .app-status-pill { opacity: 1; border-color: currentColor; }
.evaluation-rating-choice input:focus-visible + .app-status-pill { outline: 2px solid var(--cm-primary, #1d4ed8); outline-offset: 3px; }
body.app-body .app-content .app-table-action.evaluation-edit-action,
body.app-body .app-content .app-table-action.evaluation-edit-action i { color: var(--cm-text, #1e293b) !important; }
body.app-body .app-content .app-table-action.evaluation-edit-action.is-pending,
body.app-body .app-content .app-table-action.evaluation-edit-action.is-pending i { color: var(--cm-danger, #dc2626) !important; }