/* ============================================================================
   CATCHME CRM — THEME 2 ("Mapslyfy" family)
   ----------------------------------------------------------------------------
   Scoped to html[data-cm-theme="theme-2"] so Theme 1 (classic Catchme) stays
   untouched. This file carries the shared structure + light palette; the dark
   palette lives in theme-2-dark.css and is applied with
   html[data-cm-theme="theme-2"][data-bs-theme="dark"].

   Load order matters: this file must be loaded AFTER catchme-theme.css and
   catchme-dark.css. Selectors are prefixed with the theme attribute (which
   outranks the classic unlayered rules) and unlayered on purpose so they also
   outrank @layer cm-color-mode from catchme-dark.css.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. Tokens
   ---------------------------------------------------------------------------- */
html[data-cm-theme="theme-2"] {
    color-scheme: light;

    --t2-bg: #f5f8fc;
    --t2-bg-2: #eef2f7;
    --t2-surface: #ffffff;
    --t2-surface-2: #f7f9fc;
    --t2-surface-3: #e8edf4;
    --t2-border: #e3e8ef;
    --t2-border-2: #cdd6e1;
    --t2-text: #0f172a;
    --t2-text-2: #4b5563;
    --t2-text-3: #94a3b8;

    --t2-teal: #0d9488;
    --t2-teal-strong: #0f766e;
    --t2-blue: #0284c7;
    --t2-violet: #6366f1;
    --t2-green: #10b981;
    --t2-amber: #f59e0b;
    --t2-red: #ef4444;

    --t2-grad: linear-gradient(135deg, #2dd4bf 0%, #38bdf8 100%);
    --t2-grad-solid: #14b8a6;
    --t2-grad-soft: linear-gradient(135deg, rgba(45, 212, 191, 0.16), rgba(56, 189, 248, 0.07) 58%, transparent);
    --t2-on-grad: #04120e;

    --t2-radius: 16px;
    --t2-radius-md: 12px;
    --t2-radius-sm: 10px;
    --t2-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.05);
    --t2-shadow-lg: 0 18px 45px rgba(16, 24, 40, 0.14);

    --t2-success-bg: #e7f8f1;
    --t2-success-text: #0d9488;
    --t2-success-border: #a7e8d4;
    --t2-warning-bg: #fdf4e3;
    --t2-warning-text: #b45309;
    --t2-warning-border: #f5d9a8;
    --t2-danger-bg: #fdecec;
    --t2-danger-text: #dc2626;
    --t2-danger-border: #f6c2c2;
    --t2-info-bg: #e6f2fd;
    --t2-info-text: #0369a1;
    --t2-info-border: #b6daf6;
    --t2-violet-bg: #eeeefe;
    --t2-violet-text: #6366f1;
    --t2-violet-border: #cdcdf6;
    --t2-neutral-bg: #f1f5f9;
    --t2-neutral-text: #64748b;
    --t2-neutral-border: #e2e8f0;
    --t2-selected-bg: #e2f7f4;
    --t2-selected-text: #0f766e;
    --t2-selected-border: #99e6dd;

    --t2-input-bg: #ffffff;
    --t2-sidebar-bg: linear-gradient(180deg, var(--t2-bg-2), var(--t2-bg));
    --t2-topbar-bg: rgba(255, 255, 255, 0.84);
    --t2-content-glow: radial-gradient(1100px 420px at 100% -12%, rgba(45, 212, 191, 0.10), transparent 62%);
    --t2-card-shadow-hover: 0 18px 40px rgba(16, 24, 40, 0.12);

    /* Remap the shared CRM tokens so classic components inherit the palette. */
    --cm-bg: var(--t2-bg);
    --cm-surface: var(--t2-surface);
    --cm-text: var(--t2-text);
    --cm-muted: var(--t2-text-2);
    --cm-soft-muted: var(--t2-text-3);
    --cm-border: var(--t2-border);
    --cm-border-soft: var(--t2-border);
    --cm-primary: var(--t2-teal);
    --cm-primary-hover: var(--t2-teal-strong);
    --cm-radius: var(--t2-radius-md);
    --cm-card-radius: var(--t2-radius);
    --cm-shadow-sm: var(--t2-shadow);
    --cm-shadow-card: var(--t2-shadow);
    --bs-body-bg: var(--t2-bg);
    --bs-body-color: var(--t2-text);
    --bs-border-color: var(--t2-border);
    --bs-primary: var(--t2-teal);
}

/* ----------------------------------------------------------------------------
   2. Shell / background
   ---------------------------------------------------------------------------- */
html[data-cm-theme="theme-2"] body.app-body {
    background: var(--t2-bg) !important;
    color: var(--t2-text) !important;
}

html[data-cm-theme="theme-2"] :is(.app-content, .content-page, .app-content-page, #wrapper, .content-page.app-content-page) {
    background: var(--t2-bg) !important;
    color: var(--t2-text) !important;
}

html[data-cm-theme="theme-2"] .app-container {
    padding: 26px 28px 44px !important;
    max-width: 1560px;
    margin: 0 auto;
}

html[data-cm-theme="theme-2"] ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

html[data-cm-theme="theme-2"] ::-webkit-scrollbar-thumb {
    background: var(--t2-border-2);
    border-radius: 99px;
}

/* ----------------------------------------------------------------------------
   3. Sidebar
   ---------------------------------------------------------------------------- */
html[data-cm-theme="theme-2"] .app-sidebar,
html[data-cm-theme="theme-2"] .app-menu.app-sidebar {
    background: var(--t2-sidebar-bg) !important;
    border-right: 1px solid var(--t2-border) !important;
    color: var(--t2-text) !important;
}

html[data-cm-theme="theme-2"] .app-sidebar-brand {
    background: transparent !important;
    border-bottom: 1px solid var(--t2-border) !important;
}

html[data-cm-theme="theme-2"] .app-sidebar-brand-name {
    color: var(--t2-text) !important;
    font-weight: 800;
    letter-spacing: -0.01em;
}

html[data-cm-theme="theme-2"] .app-sidebar-menu .menu-title,
html[data-cm-theme="theme-2"] .app-sidebar-menu .sub-menu .menu-title {
    color: var(--t2-text-3) !important;
    letter-spacing: 0.12em;
}

html[data-cm-theme="theme-2"] .app-sidebar-menu .menu-item .menu-link {
    color: var(--t2-text-2) !important;
    border-radius: var(--t2-radius-sm);
    font-weight: 500;
}

html[data-cm-theme="theme-2"] .app-sidebar-menu .menu-icon,
html[data-cm-theme="theme-2"] .app-sidebar-menu .menu-arrow {
    color: var(--t2-text-3) !important;
}

html[data-cm-theme="theme-2"] .app-sidebar-menu .menu-item .menu-link:hover,
html[data-cm-theme="theme-2"] .app-sidebar-menu .menu-item .menu-link[aria-expanded="true"] {
    background: var(--t2-surface) !important;
    color: var(--t2-text) !important;
}

html[data-cm-theme="theme-2"] .app-sidebar-menu .menu-item .menu-link:hover .menu-icon,
html[data-cm-theme="theme-2"] .app-sidebar-menu .menu-item .menu-link[aria-expanded="true"] .menu-icon {
    color: var(--t2-teal) !important;
}

html[data-cm-theme="theme-2"] .app-sidebar-menu .menu-item.menuitem-active > .menu-link,
html[data-cm-theme="theme-2"] .app-sidebar-menu .menu-item .menu-link.active {
    position: relative;
    background: linear-gradient(90deg, rgba(45, 212, 191, 0.16), rgba(56, 189, 248, 0.03)) !important;
    color: var(--t2-teal) !important;
}

html[data-cm-theme="theme-2"] .app-sidebar-menu .menu-item.menuitem-active > .menu-link::before,
html[data-cm-theme="theme-2"] .app-sidebar-menu .menu-item .menu-link.active::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--t2-grad);
}

html[data-cm-theme="theme-2"] .app-sidebar-menu .menu-item.menuitem-active > .menu-link .menu-icon,
html[data-cm-theme="theme-2"] .app-sidebar-menu .menu-item .menu-link.active .menu-icon {
    color: var(--t2-teal) !important;
}

html[data-cm-theme="theme-2"] .app-sidebar-menu .sub-menu {
    border-left: 1px solid var(--t2-border) !important;
}

html[data-cm-theme="theme-2"] .app-sidebar-menu .sub-menu .menu-link {
    color: var(--t2-text-2) !important;
}

html[data-cm-theme="theme-2"] .app-sidebar-menu .sub-menu .menu-link:hover,
html[data-cm-theme="theme-2"] .app-sidebar-menu .sub-menu .menu-link.active {
    background: var(--t2-surface) !important;
    color: var(--t2-teal) !important;
}

html[data-cm-theme="theme-2"] .app-menu-badge {
    background: var(--t2-grad) !important;
    color: var(--t2-on-grad) !important;
    border: 0 !important;
    font-weight: 800;
}

html[data-cm-theme="theme-2"] .app-sidebar-user-toggle {
    border: 1px solid var(--t2-border) !important;
    background: var(--t2-surface) !important;
    border-radius: var(--t2-radius-md);
}

html[data-cm-theme="theme-2"] .app-sidebar-user-toggle:hover,
html[data-cm-theme="theme-2"] .app-sidebar-user-toggle[aria-expanded="true"] {
    border-color: var(--t2-teal) !important;
    background: var(--t2-surface-2) !important;
}

html[data-cm-theme="theme-2"] .app-sidebar-avatar {
    background: linear-gradient(135deg, var(--t2-violet), var(--t2-teal)) !important;
    color: var(--t2-on-grad) !important;
}

html[data-cm-theme="theme-2"] .app-sidebar-user-name {
    color: var(--t2-text) !important;
}

html[data-cm-theme="theme-2"] .app-sidebar-user-role {
    background: rgba(13, 148, 136, 0.12) !important;
    color: var(--t2-teal-strong) !important;
}

html[data-cm-theme="theme-2"] .app-sidebar-user-caret {
    color: var(--t2-text-3) !important;
}

html[data-cm-theme="theme-2"] .app-sidebar-profile-menu {
    background: var(--t2-surface) !important;
    border: 1px solid var(--t2-border) !important;
    box-shadow: var(--t2-shadow-lg) !important;
}

html[data-cm-theme="theme-2"] .app-sidebar-profile-menu .dropdown-item {
    color: var(--t2-text-2) !important;
}

html[data-cm-theme="theme-2"] .app-sidebar-profile-menu .dropdown-item i {
    color: var(--t2-teal) !important;
}

html[data-cm-theme="theme-2"] .app-sidebar-profile-menu .dropdown-item:hover {
    background: var(--t2-surface-2) !important;
    color: var(--t2-text) !important;
}

html[data-cm-theme="theme-2"] .app-sidebar-profile-menu .dropdown-divider {
    border-top-color: var(--t2-border) !important;
}

/* ----------------------------------------------------------------------------
   4. Topbar and header controls
   ---------------------------------------------------------------------------- */
html[data-cm-theme="theme-2"] :is(.app-topbar, .navbar-custom.app-topbar, .topbar.app-topbar-inner, .app-topbar-inner) {
    background: var(--t2-topbar-bg) !important;
    border-bottom: 1px solid var(--t2-border) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    color: var(--t2-text) !important;
}

html[data-cm-theme="theme-2"] .app-container .alert {
    border-radius: var(--t2-radius-md);
}

/* ----------------------------------------------------------------------------
   5. Page hero / headings
   ---------------------------------------------------------------------------- */
html[data-cm-theme="theme-2"] :is(.drivers-page-header, .app-page-hero, .page-admin-wide .app-page-hero) {
    position: relative;
    overflow: hidden;
    align-items: center;
    padding: 24px 28px;
    border: 1px solid var(--t2-border) !important;
    border-radius: 18px;
    background: var(--t2-grad-soft), var(--t2-surface) !important;
}

html[data-cm-theme="theme-2"] :is(.drivers-page-header, .app-page-hero)::after {
    content: "";
    position: absolute;
    right: -90px;
    top: -130px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(45, 212, 191, 0.24), transparent 62%);
    pointer-events: none;
}

html[data-cm-theme="theme-2"] :is(.drivers-page-header, .app-page-hero) > * {
    position: relative;
    z-index: 1;
}

html[data-cm-theme="theme-2"] .drivers-page-header h1,
html[data-cm-theme="theme-2"] .app-page-title {
    color: var(--t2-text) !important;
    font-weight: 800;
    letter-spacing: -0.02em;
}

html[data-cm-theme="theme-2"] .drivers-page-header p,
html[data-cm-theme="theme-2"] .app-breadcrumb {
    color: var(--t2-text-2) !important;
}

html[data-cm-theme="theme-2"] .app-breadcrumb {
    border-bottom-color: var(--t2-border) !important;
}

html[data-cm-theme="theme-2"] .app-breadcrumb-list .breadcrumb-item.active {
    color: var(--t2-teal) !important;
}

html[data-cm-theme="theme-2"] .app-breadcrumb-list .breadcrumb-item + .breadcrumb-item::before {
    color: var(--t2-text-3) !important;
}

/* ----------------------------------------------------------------------------
   6. Surfaces / cards
   ---------------------------------------------------------------------------- */
html[data-cm-theme="theme-2"] :is(
    .app-topbar, .app-sidebar, .card, .app-card, .app-detail-card,
    .drivers-table-card, .drivers-metric-card, .drivers-chart-card,
    .driver-tab-card, .van-tab-card, .alerts-card, .dashboard-panel,
    .dashboard-kpi-card, .dashboard-total-card, .modal-content, .modal-header,
    .dropdown-menu, .select2-dropdown, .select2-search--dropdown,
    .flatpickr-calendar, .warning-document-current, .warning-document-upload,
    .driver-profile-hero, .van-profile-hero, .app-detail-hero, .app-detail-section,
    .drivers-table-card, .drivers-pagination, .app-table-footer, .table-sticky-wrapper,
    .routes-day-row, .rental-periods-list, .rental-periods-list-head, .rental-period-card,
    .tasks-card, .permission-toolbar, .permission-role-tabs, .permission-category,
    .permission-item, .quick-link-admin-card, .typology-admin-card,
    .superadmin-workspaces-card, .superadmin-workspaces-total, .inventory-order-panel,
    .billing-price-card, .workspace-domain-preview > div, .workspace-file-drop,
    .messages-preview-note, .scorecards-view-toggle, .app-detail-report-section,
    .driver-profile-card, .driver-profile-tabs-card, .driver-profile-extra-section,
    .driver-tab-table-card, .driver-document-card, .driver-document-archive-section,
    .van-period-card, .van-tab-card-header, .comment-composer-card, .comment-area-box,
    .comment-attachment-card, .comment-attachment-preview, .support-form, .support-row,
    .van-wizard-steps, .van-wizard-main, .van-follow-card, .contract-offboarding-docs,
    .warning-document-preview, .warning-document-empty, .warning-document-file,
    .fine-documents-panel, .team-calendar-event-detail dl div, .team-calendar-detail-section
) {
    background: var(--t2-surface) !important;
    border-color: var(--t2-border) !important;
    color: var(--t2-text) !important;
    box-shadow: var(--t2-shadow) !important;
}

html[data-cm-theme="theme-2"] :is(.card, .app-card, .drivers-table-card, .modal-content, .dropdown-menu) {
    border-radius: var(--t2-radius) !important;
}

html[data-cm-theme="theme-2"] :is(.card-header, .app-card-header, .card .head, .modal-header, .modal-footer) {
    background: var(--t2-surface-2) !important;
    border-color: var(--t2-border) !important;
    color: var(--t2-text) !important;
}

html[data-cm-theme="theme-2"] :is(.card-body, .modal-body, .app-card-body) {
    background: transparent !important;
    color: var(--t2-text) !important;
}

html[data-cm-theme="theme-2"] :is(.card .head h3, .card-header h1, .card-header h2, .card-header h3,
    .card-header h4, .card-header h5, .app-card-header h5, .header-title) {
    color: var(--t2-text) !important;
}

html[data-cm-theme="theme-2"] :is(.card .head .hint, .card-header p, .card-header small) {
    color: var(--t2-text-3) !important;
}

/* ----------------------------------------------------------------------------
   7. Typography
   ---------------------------------------------------------------------------- */
html[data-cm-theme="theme-2"] :is(h1, h2, h3, h4, h5, h6,
    .alerts-card-title, .alerts-row-main strong, .app-driver-avatar-name,
    .app-topbar-user-name, .drivers-metric-card strong, .app-sidebar-brand,
    .side-nav-link, .menu-title, .form-label, .menu-link, .menu-text,
    .dashboard-kpi-value, .text-dark, .text-body, .tasks-column-title,
    .tasks-column-header strong, .billing-price, .rental-period-title,
    .rental-period-dates, .permission-item, .scorecards-trend-title) {
    color: var(--t2-text) !important;
}

html[data-cm-theme="theme-2"] :is(.text-muted, .form-text, .drivers-page-header p,
    .app-topbar-user-role, .drivers-metric-card > span, .alerts-row-main,
    .alerts-empty-state, .drivers-table-count, .tasks-card p, .tasks-card-meta,
    .phone-security, .rental-period-card small, .billing-price-card p,
    .billing-feature-list, .typology-admin-card p, .inventory-order-panel p) {
    color: var(--t2-text-2) !important;
}

html[data-cm-theme="theme-2"] .app-content a:not(.btn):not(.drivers-btn):not(.page-link):not(.app-status-pill):not(.route-payment-pill):not(.dashboard-calendar-day-number):not(.dashboard-calendar-event):not(.dashboard-calendar-mode-row):not(.dashboard-calendar-upcoming-row):not(.dashboard-calendar-new) {
    color: var(--t2-teal) !important;
}

html[data-cm-theme="theme-2"] .app-content a:not(.btn):not(.drivers-btn):not(.page-link):not(.app-status-pill):not(.route-payment-pill):not(.dashboard-calendar-day-number):not(.dashboard-calendar-event):not(.dashboard-calendar-mode-row):not(.dashboard-calendar-upcoming-row):not(.dashboard-calendar-new):hover {
    color: var(--t2-teal-strong) !important;
}

/* ----------------------------------------------------------------------------
   8. Buttons
   ---------------------------------------------------------------------------- */
html[data-cm-theme="theme-2"] .drivers-btn {
    height: 36px;
    padding: 0 14px;
    border-radius: var(--t2-radius-sm);
    font-weight: 600;
    transition: filter 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

html[data-cm-theme="theme-2"] .drivers-btn-outline {
    border: 1px solid var(--t2-border) !important;
    background: var(--t2-surface) !important;
    color: var(--t2-text) !important;
}

html[data-cm-theme="theme-2"] .drivers-btn-outline:hover {
    border-color: var(--t2-border-2) !important;
    background: var(--t2-surface-2) !important;
}

html[data-cm-theme="theme-2"] .drivers-btn-primary {
    border: 1px solid transparent !important;
    background: var(--t2-grad) !important;
    color: var(--t2-on-grad) !important;
    box-shadow: 0 4px 14px rgba(45, 212, 191, 0.25) !important;
}

html[data-cm-theme="theme-2"] .drivers-btn-primary:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

html[data-cm-theme="theme-2"] :is(.app-create-button, .btn-primary, .btn-success, .app-search-button) {
    border: 1px solid transparent !important;
    background: var(--t2-grad) !important;
    color: var(--t2-on-grad) !important;
    border-radius: var(--t2-radius-sm) !important;
    box-shadow: 0 4px 14px rgba(45, 212, 191, 0.25) !important;
}

html[data-cm-theme="theme-2"] :is(.app-create-button, .btn-primary, .btn-success, .app-search-button):hover {
    filter: brightness(1.06);
    color: var(--t2-on-grad) !important;
}

html[data-cm-theme="theme-2"] :is(.app-create-button i, .btn-primary i, .btn-success i, .app-search-button i) {
    color: var(--t2-on-grad) !important;
}

html[data-cm-theme="theme-2"] :is(.app-export-button, .btn-light, .btn-secondary, .btn-outline-secondary,
    .btn-outline-primary, .btn-default, .app-popup-cancel, .route-dispute-status-cancel) {
    border: 1px solid var(--t2-border) !important;
    background: var(--t2-surface) !important;
    color: var(--t2-text) !important;
    border-radius: var(--t2-radius-sm) !important;
    box-shadow: none !important;
}

html[data-cm-theme="theme-2"] :is(.app-export-button, .btn-light, .btn-secondary, .btn-outline-secondary,
    .btn-outline-primary, .btn-default, .app-popup-cancel):hover {
    border-color: var(--t2-border-2) !important;
    background: var(--t2-surface-2) !important;
    color: var(--t2-text) !important;
}

html[data-cm-theme="theme-2"] :is(.app-export-button i, .btn-light i, .btn-secondary i) {
    color: var(--t2-text) !important;
}

html[data-cm-theme="theme-2"] :is(.btn-danger, .app-delete-button) {
    border: 1px solid var(--t2-danger-border) !important;
    background: var(--t2-surface) !important;
    color: var(--t2-danger-text) !important;
}

html[data-cm-theme="theme-2"] :is(.btn-danger, .app-delete-button):hover {
    background: var(--t2-danger-bg) !important;
}

html[data-cm-theme="theme-2"] :is(.app-table-action, .app-inline-actions .btn, .app-table-media-action) {
    background: transparent !important;
    color: var(--t2-text-2) !important;
    border: 0 !important;
    border-radius: 8px !important;
}

html[data-cm-theme="theme-2"] :is(.app-table-action, .app-inline-actions .btn, .app-table-media-action):hover {
    background: var(--t2-surface-3) !important;
    color: var(--t2-teal) !important;
}

html[data-cm-theme="theme-2"] :is(.app-table-action i, .app-inline-actions .btn i, .app-table-action svg,
    .app-inline-actions .btn svg, .app-table-media-action i) {
    color: inherit !important;
}

/* ----------------------------------------------------------------------------
   9. Metrics
   The base theme neutralises summary metrics with !important; Theme 2 wins via
   the extra attribute specificity plus its own !important declarations.
   ---------------------------------------------------------------------------- */
html[data-cm-theme="theme-2"] .app-content .drivers-metric-card,
html[data-cm-theme="theme-2"] .app-content [class*="-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(--metric-border, var(--t2-border)) !important;
    border-radius: var(--t2-radius) !important;
    background: var(--metric-bg, var(--t2-surface)) !important;
    background-image: none !important;
    color: var(--t2-text) !important;
    text-align: center !important;
    text-decoration: none !important;
    box-shadow: var(--t2-shadow) !important;
    transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease !important;
}

html[data-cm-theme="theme-2"] .app-content .drivers-metric-card::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    height: 3px !important;
    background: var(--metric-color, var(--t2-teal)) !important;
}

html[data-cm-theme="theme-2"] .app-content .drivers-metric-card:hover {
    border-color: var(--metric-border, var(--t2-border-2)) !important;
    box-shadow: var(--t2-card-shadow-hover) !important;
    transform: translateY(-2px) !important;
}

html[data-cm-theme="theme-2"] .app-content .drivers-metric-card strong {
    color: var(--metric-color, var(--t2-teal)) !important;
}

/* Tone tints keep every module's metrics on the same palette. */
html[data-cm-theme="theme-2"] :is(
    .drivers-metric-blue, .zones-metric-blue, .van-accidents-metric-blue,
    .phone-damages-metric-total, .documentation-metric-expiring, .fuel-metric-blue
) {
    --metric-bg: var(--t2-info-bg) !important;
    --metric-border: var(--t2-info-border) !important;
    --metric-color: var(--t2-info-text) !important;
}

html[data-cm-theme="theme-2"] :is(
    .drivers-metric-green, .zones-metric-green, .phone-damages-metric-repair,
    .phones-metric-available
) {
    --metric-bg: var(--t2-success-bg) !important;
    --metric-border: var(--t2-success-border) !important;
    --metric-color: var(--t2-success-text) !important;
}

html[data-cm-theme="theme-2"] :is(
    .drivers-metric-amber, .zones-metric-amber, .van-accidents-metric-amber,
    .documentation-metric-pending
) {
    --metric-bg: var(--t2-warning-bg) !important;
    --metric-border: var(--t2-warning-border) !important;
    --metric-color: var(--t2-warning-text) !important;
}

html[data-cm-theme="theme-2"] :is(
    .drivers-metric-red, .zones-metric-red, .van-accidents-metric-red,
    .phone-damages-metric-hit, .documentation-metric-expired
) {
    --metric-bg: var(--t2-danger-bg) !important;
    --metric-border: var(--t2-danger-border) !important;
    --metric-color: var(--t2-danger-text) !important;
}

html[data-cm-theme="theme-2"] :is(.drivers-metric-purple, .zones-metric-purple) {
    --metric-bg: var(--t2-violet-bg) !important;
    --metric-border: var(--t2-violet-border) !important;
    --metric-color: var(--t2-violet-text) !important;
}

html[data-cm-theme="theme-2"] :is(
    .drivers-metric-slate, .zones-metric-neutral, .van-accidents-metric-neutral,
    .phones-metric-total, .phones-metric-assigned
) {
    --metric-bg: var(--t2-neutral-bg) !important;
    --metric-border: var(--t2-neutral-border) !important;
    --metric-color: var(--t2-neutral-text) !important;
}

html[data-cm-theme="theme-2"] :is(.drivers-metric-blue, .zones-metric-blue) {
    --metric-color: var(--t2-blue);
}

html[data-cm-theme="theme-2"] :is(.drivers-metric-green, .zones-metric-green) {
    --metric-color: var(--t2-green);
}

html[data-cm-theme="theme-2"] :is(.drivers-metric-amber, .zones-metric-amber) {
    --metric-color: var(--t2-amber);
}

html[data-cm-theme="theme-2"] :is(.drivers-metric-red, .zones-metric-red) {
    --metric-color: var(--t2-red);
}

html[data-cm-theme="theme-2"] .dashboard-kpi-icon {
    background: var(--t2-surface-3) !important;
    color: var(--t2-teal) !important;
}

html[data-cm-theme="theme-2"] .dashboard-quick-link {
    background: var(--t2-surface) !important;
    border-color: var(--t2-border) !important;
    color: var(--t2-text) !important;
}

html[data-cm-theme="theme-2"] .dashboard-quick-link .mdi {
    color: var(--t2-text-3) !important;
}

/* ----------------------------------------------------------------------------
   10. Filters and form controls
   ---------------------------------------------------------------------------- */
html[data-cm-theme="theme-2"] .drivers-filter-bar,
html[data-cm-theme="theme-2"] :is(.alerts-card-header, .permission-toolbar, .app-search-card .card-body) {
    background: var(--t2-surface) !important;
    border-color: var(--t2-border) !important;
    border-radius: var(--t2-radius) !important;
    color: var(--t2-text) !important;
}

html[data-cm-theme="theme-2"] :is(.form-control, .form-select, .input-group-text,
    .select2-selection, .select2-search__field, .app-search input,
    .drivers-filter-bar input, .drivers-filter-bar select,
    .cm-period-trigger, .cm-period-popover, .cm-period-calendar-panel,
    .scorecard-dsp-field input, .scorecard-dsp-correction select, .scorecard-dsp-correction textarea,
    .flatpickr-input, .ql-editor, .ql-container, .modal-body textarea) {
    background: var(--t2-input-bg) !important;
    color: var(--t2-text) !important;
    border-color: var(--t2-border) !important;
    border-radius: var(--t2-radius-sm) !important;
}

html[data-cm-theme="theme-2"] :is(.form-control, .form-select):focus,
html[data-cm-theme="theme-2"] .select2-container--focus .select2-selection {
    border-color: var(--t2-teal) !important;
    box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.14) !important;
}

html[data-cm-theme="theme-2"] :is(input, textarea)::placeholder {
    color: var(--t2-text-3) !important;
}

html[data-cm-theme="theme-2"] .select2-selection__rendered {
    color: var(--t2-text-2) !important;
}

html[data-cm-theme="theme-2"] .select2-selection__placeholder {
    color: var(--t2-text-3) !important;
}

html[data-cm-theme="theme-2"] .select2-selection__choice {
    background: var(--t2-selected-bg) !important;
    border-color: var(--t2-selected-border) !important;
    color: var(--t2-selected-text) !important;
}

html[data-cm-theme="theme-2"] .select2-selection__choice :is(span, button) {
    color: inherit !important;
}

html[data-cm-theme="theme-2"] :is(.select2-results__option--highlighted, .select2-results__option--selected) {
    background: var(--t2-selected-bg) !important;
    color: var(--t2-selected-text) !important;
}

html[data-cm-theme="theme-2"] .form-check-input:checked {
    background-color: var(--t2-teal) !important;
    border-color: var(--t2-teal) !important;
}

html[data-cm-theme="theme-2"] .input-group-text {
    background: var(--t2-surface-2) !important;
}

/* ----------------------------------------------------------------------------
   11. Tables
   ---------------------------------------------------------------------------- */
html[data-cm-theme="theme-2"] :is(.table-responsive, .table-sticky-wrapper) {
    background: var(--t2-surface) !important;
    border: 1px solid var(--t2-border) !important;
    border-radius: var(--t2-radius) !important;
    box-shadow: var(--t2-shadow) !important;
}

html[data-cm-theme="theme-2"] :is(.drivers-table, .app-data-table, table.table) {
    --bs-table-bg: transparent;
    --bs-table-color: var(--t2-text);
    color: var(--t2-text) !important;
    background: transparent !important;
}

html[data-cm-theme="theme-2"] :is(.drivers-table, .app-data-table, table.table) thead th {
    background: var(--t2-surface-2) !important;
    color: var(--t2-text-3) !important;
    border-color: var(--t2-border) !important;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}

html[data-cm-theme="theme-2"] :is(.drivers-table, .app-data-table, table.table) tbody td {
    background: var(--t2-surface) !important;
    color: var(--t2-text) !important;
    border-color: var(--t2-border) !important;
}

html[data-cm-theme="theme-2"] :is(.drivers-table, .app-data-table, table.table) tbody tr:hover > td {
    background: var(--t2-surface-2) !important;
}

html[data-cm-theme="theme-2"] .table-sticky-wrapper thead th {
    background: var(--t2-surface-2) !important;
}

html[data-cm-theme="theme-2"] :is(.drivers-person-link strong, .drivers-code-chip) {
    color: var(--t2-text) !important;
}

html[data-cm-theme="theme-2"] .drivers-code-chip {
    background: var(--t2-surface-3) !important;
}

html[data-cm-theme="theme-2"] :is(.drivers-person-link small, .drivers-count) {
    color: var(--t2-text-2) !important;
}

html[data-cm-theme="theme-2"] :is(.drivers-table, .app-data-table, table.table) a:not(.btn):not(.app-status-pill) {
    color: var(--t2-teal) !important;
    font-weight: 600;
}

/* ----------------------------------------------------------------------------
   12. Tabs
   ---------------------------------------------------------------------------- */
html[data-cm-theme="theme-2"] :is(.routes-tabs, .scorecards-view-toggle, .driver-profile-tabs,
    .driver-extra-tabs, .typology-tabs, .permission-role-tabs) {
    background: transparent !important;
    border-color: var(--t2-border) !important;
}

html[data-cm-theme="theme-2"] :is(.routes-tab, .scorecards-tab, .driver-profile-tab, .driver-extra-tab,
    .typology-tab, .driver-profile-back, .scorecards-view-toggle-button, .scorecards-trend-metric,
    .alerts-tabs .nav-link, .nav-tabs .nav-link, .permission-role-tabs .nav-link) {
    border: 1px solid var(--t2-border) !important;
    background: var(--t2-surface) !important;
    color: var(--t2-text-2) !important;
    border-radius: var(--t2-radius-sm) !important;
}

html[data-cm-theme="theme-2"] :is(.routes-tab, .scorecards-tab, .driver-profile-tab, .driver-extra-tab,
    .typology-tab, .scorecards-view-toggle-button, .scorecards-trend-metric,
    .alerts-tabs .nav-link, .nav-tabs .nav-link, .permission-role-tabs .nav-link):hover {
    background: var(--t2-surface-2) !important;
    color: var(--t2-text) !important;
}

html[data-cm-theme="theme-2"] :is(.routes-tab.active, .scorecards-tab.active, .driver-profile-tab.active,
    .driver-extra-tab.active, .typology-tab.active, .feedback-vote.is-active,
    .alerts-tabs .nav-link.active, .nav-tabs .nav-link.active, .permission-role-tabs .nav-link.active,
    .scorecards-view-toggle-button.is-active, .scorecards-trend-metric.is-active) {
    background: var(--t2-selected-bg) !important;
    color: var(--t2-selected-text) !important;
    border-color: var(--t2-selected-border) !important;
    font-weight: 600;
}

/* ----------------------------------------------------------------------------
   13. Pagination
   ---------------------------------------------------------------------------- */
html[data-cm-theme="theme-2"] :is(.pagination, .drivers-pagination, .app-table-footer) {
    color: var(--t2-text) !important;
}

html[data-cm-theme="theme-2"] .page-item .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--t2-border) !important;
    border-radius: var(--t2-radius-sm) !important;
    background: var(--t2-surface) !important;
    color: var(--t2-text-2) !important;
    font-size: 13px;
    font-weight: 600;
}

html[data-cm-theme="theme-2"] .page-item .page-link:hover {
    border-color: var(--t2-border-2) !important;
    color: var(--t2-text) !important;
}

html[data-cm-theme="theme-2"] .page-item.active .page-link {
    background: var(--t2-grad) !important;
    border-color: transparent !important;
    color: var(--t2-on-grad) !important;
}

html[data-cm-theme="theme-2"] .page-item.disabled .page-link {
    opacity: 0.5;
    background: var(--t2-surface-2) !important;
}

/* ----------------------------------------------------------------------------
   14. Status pills / badges
   ---------------------------------------------------------------------------- */
html[data-cm-theme="theme-2"] :is(.app-status-pill, .driver-tab-pill,
    [class*="-status-pill"], [class*="-type-pill"], [class*="-severity-pill"],
    [class*="-source-pill"], [class*="-score-pill"], .badge, .alerts-count, .alerts-tag,
    .drivers-code-chip, .phone-model-pill, .phone-status-pill, .zone-empty-pill,
    .app-user-pill, .user-role-pill, .inventory-product-chip, .documentation-status-chip,
    .documentation-header-pill, .scorecard-value, .rental-period-status, .maintenance-evidence,
    .maintenance-forecast, .route-cycle-badge, .route-payment-btn, .route-payment-pill,
    .billing-plan-type, .billing-current-badge, .audit-badge, .superadmin-billing-state) {
    background: var(--t2-neutral-bg) !important;
    color: var(--t2-neutral-text) !important;
    border: 1px solid var(--t2-neutral-border) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    font-weight: 600;
}

html[data-cm-theme="theme-2"] :is(.app-status-pill.is-success, .driver-tab-pill-success,
    .drivers-status-1, .warnings-severity-green, .dnr-status-success, .zone-status-pill.is-visible,
    .contract-status-pill.is-current, .pave-score-success, .alerts-ok, .scorecard-value.is-good,
    .driver-scorecard-value.is-good, .route-payment-btn.is-valid, .badge.bg-success,
    .audit-badge-created, .billing-plan-type.is-public, .superadmin-billing-state.is-active) {
    background: var(--t2-success-bg) !important;
    color: var(--t2-success-text) !important;
    border-color: var(--t2-success-border) !important;
}

html[data-cm-theme="theme-2"] :is(.app-status-pill.is-warning, .driver-tab-pill-warning,
    .alerts-tag-warning, .alerts-count-warning, .warnings-severity-amber, .fuel-type-amber,
    .dnr-fault-warning, .fine-status-pending, .maintenance-status-pill.is-open,
    .pave-score-warning, .accident-severity-2, .evaluation-status-warning,
    .driver-scorecard-value.is-warn, .scorecard-value.is-warn, .rental-period-status.is-open,
    .documentation-header-pill, .route-cycle-badge.is-orange, .route-payment-btn.is-dispute,
    .drivers-count-warning, .drivers-count-danger) {
    background: var(--t2-warning-bg) !important;
    color: var(--t2-warning-text) !important;
    border-color: var(--t2-warning-border) !important;
}

html[data-cm-theme="theme-2"] :is(.app-status-pill.is-danger, .driver-tab-pill-danger,
    .alerts-tag-danger, .alerts-count-danger, .accident-severity-3,
    .driver-scorecard-value.is-bad, .scorecard-value.is-bad, .phone-damage-type-hit,
    .inventory-product-chip.is-deleted, .maintenance-forecast.is-alert,
    .badge.bg-danger, .audit-badge-deleted, .route-payment-pill.is-disputed) {
    background: var(--t2-danger-bg) !important;
    color: var(--t2-danger-text) !important;
    border-color: var(--t2-danger-border) !important;
}

html[data-cm-theme="theme-2"] :is(.app-status-pill.is-info, .driver-tab-pill-info,
    .absence-type-pill, .fuel-type-blue, .user-role-pill, .accident-severity-1,
    .inventory-product-chip:not(.is-deleted), .billing-current-badge, .audit-badge-updated) {
    background: var(--t2-info-bg) !important;
    color: var(--t2-info-text) !important;
    border-color: var(--t2-info-border) !important;
}

html[data-cm-theme="theme-2"] :is(.app-status-pill.is-muted, .app-status-pill.is-neutral) {
    background: var(--t2-neutral-bg) !important;
    color: var(--t2-neutral-text) !important;
    border-color: var(--t2-neutral-border) !important;
}

html[data-cm-theme="theme-2"] :is(.app-status-pill, .driver-tab-pill, .inventory-product-chip,
    .badge, .route-cycle-badge) :is(strong, b, span, a) {
    color: inherit !important;
}

html[data-cm-theme="theme-2"] :is(.zone-count-pill, .zone-more-pill) {
    background: var(--t2-info-bg) !important;
    color: var(--t2-info-text) !important;
    border-color: var(--t2-info-border) !important;
}

html[data-cm-theme="theme-2"] .zone-more-pill {
    background: var(--t2-violet-bg) !important;
    color: var(--t2-violet-text) !important;
    border-color: var(--t2-violet-border) !important;
}

/* ----------------------------------------------------------------------------
   15. Dropdowns / menus / tooltips
   ---------------------------------------------------------------------------- */
html[data-cm-theme="theme-2"] .dropdown-menu {
    border: 1px solid var(--t2-border) !important;
    border-radius: var(--t2-radius-md) !important;
    box-shadow: var(--t2-shadow-lg) !important;
    padding: 6px;
}

html[data-cm-theme="theme-2"] .dropdown-item {
    border-radius: var(--t2-radius-sm);
    color: var(--t2-text-2) !important;
    font-weight: 500;
}

html[data-cm-theme="theme-2"] .dropdown-item i {
    color: var(--t2-text-3);
}

html[data-cm-theme="theme-2"] .dropdown-item:hover,
html[data-cm-theme="theme-2"] .dropdown-item:focus {
    background: var(--t2-surface-2) !important;
    color: var(--t2-text) !important;
}

html[data-cm-theme="theme-2"] .dropdown-item.active,
html[data-cm-theme="theme-2"] .dropdown-item:active {
    background: var(--t2-selected-bg) !important;
    color: var(--t2-selected-text) !important;
}

html[data-cm-theme="theme-2"] .dropdown-divider {
    border-top-color: var(--t2-border) !important;
}

/* ----------------------------------------------------------------------------
   16. Modals and popups
   ---------------------------------------------------------------------------- */
html[data-cm-theme="theme-2"] .modal-content {
    border: 1px solid var(--t2-border) !important;
    border-radius: var(--t2-radius) !important;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28) !important;
}

html[data-cm-theme="theme-2"] .modal-header {
    background: var(--t2-surface) !important;
    border-bottom: 1px solid var(--t2-border) !important;
}

html[data-cm-theme="theme-2"] .modal-footer {
    background: var(--t2-surface) !important;
    border-top: 1px solid var(--t2-border) !important;
}

html[data-cm-theme="theme-2"] .modal-title,
html[data-cm-theme="theme-2"] .app-popup-form-title {
    color: var(--t2-text) !important;
    font-weight: 700;
}

html[data-cm-theme="theme-2"] .modal-title i {
    color: var(--t2-teal);
}

html[data-cm-theme="theme-2"] .app-popup-modal .modal-body,
html[data-cm-theme="theme-2"] .app-popup-mode > .app-content,
html[data-cm-theme="theme-2"] body.app-popup-mode,
html[data-cm-theme="theme-2"] body.app-popup-mode .app-content {
    background: var(--t2-surface-2) !important;
}

html[data-cm-theme="theme-2"] .app-popup-form-content {
    background: var(--t2-surface) !important;
    border: 1px solid var(--t2-border) !important;
    border-radius: var(--t2-radius-md) !important;
    box-shadow: none !important;
}

html[data-cm-theme="theme-2"] .app-popup-form-header,
html[data-cm-theme="theme-2"] .app-popup-form-footer {
    border-color: var(--t2-border) !important;
}

html[data-cm-theme="theme-2"] .app-popup-form-footer {
    background: var(--t2-surface) !important;
}

html[data-cm-theme="theme-2"] .app-popup-frame {
    background: var(--t2-surface-2) !important;
}

html[data-cm-theme="theme-2"] .modal .btn-close {
    opacity: 0.6;
}

html[data-cm-theme="theme-2"] .modal .btn-close:hover {
    opacity: 1;
}

/* ----------------------------------------------------------------------------
   17. Alerts / notices
   ---------------------------------------------------------------------------- */
html[data-cm-theme="theme-2"] .alert {
    border-radius: var(--t2-radius-md);
    border-width: 1px;
    border-style: solid;
}

html[data-cm-theme="theme-2"] .alert-success {
    background: var(--t2-success-bg) !important;
    color: var(--t2-success-text) !important;
    border-color: var(--t2-success-border) !important;
}

html[data-cm-theme="theme-2"] .alert-danger,
html[data-cm-theme="theme-2"] .alert-error {
    background: var(--t2-danger-bg) !important;
    color: var(--t2-danger-text) !important;
    border-color: var(--t2-danger-border) !important;
}

html[data-cm-theme="theme-2"] .alert-warning {
    background: var(--t2-warning-bg) !important;
    color: var(--t2-warning-text) !important;
    border-color: var(--t2-warning-border) !important;
}

html[data-cm-theme="theme-2"] .alert-info {
    background: var(--t2-info-bg) !important;
    color: var(--t2-info-text) !important;
    border-color: var(--t2-info-border) !important;
}

html[data-cm-theme="theme-2"] .app-top-notice {
    background: var(--t2-info-bg) !important;
    color: var(--t2-info-text) !important;
    border-color: var(--t2-info-border) !important;
    border-radius: var(--t2-radius-md);
}

html[data-cm-theme="theme-2"] .app-top-notice-danger {
    background: var(--t2-danger-bg) !important;
    color: var(--t2-danger-text) !important;
    border-color: var(--t2-danger-border) !important;
}

html[data-cm-theme="theme-2"] .app-top-notice :is(i, span, a) {
    color: inherit !important;
}

/* ----------------------------------------------------------------------------
   18. Empty states
   ---------------------------------------------------------------------------- */
html[data-cm-theme="theme-2"] :is(.drivers-empty-state, .driver-tab-empty, .tasks-empty-card, .empty) {
    background: var(--t2-surface) !important;
    color: var(--t2-text) !important;
}

html[data-cm-theme="theme-2"] :is(.drivers-empty-state, .driver-tab-empty, .tasks-empty-card) > i {
    background: var(--t2-surface-3) !important;
    border-color: var(--t2-border) !important;
    color: var(--t2-teal) !important;
}

html[data-cm-theme="theme-2"] :is(.drivers-empty-state, .driver-tab-empty, .tasks-empty-card) p {
    color: var(--t2-text-2) !important;
}

/* ----------------------------------------------------------------------------
   19. Detail pages, comments and documents
   ---------------------------------------------------------------------------- */
html[data-cm-theme="theme-2"] :is(.driver-profile-info-grid, .driver-profile-extra-grid,
    .driver-scorecards-summary, .driver-tab-summary-grid, .driver-documents-hero,
    .driver-documents-summary) > article,
html[data-cm-theme="theme-2"] :is(.driver-profile-back, .driver-profile-extra-trigger, .driver-extra-tab,
    .driver-tab-empty > i, .driver-document-file-button, .driver-document-archive-icon,
    .driver-tab-icon-pill, .driver-tab-code, .driver-tab-comment-button,
    .driver-tab-counts > span, .driver-profile-tab em, .drivers-btn-ghost, .van-follow-card > i,
    .app-detail-note, .app-detail-icon-info, .task-assignee-user, .task-attachment-link) {
    background: var(--t2-surface-2) !important;
    color: var(--t2-text) !important;
    border-color: var(--t2-border) !important;
    box-shadow: none !important;
}

html[data-cm-theme="theme-2"] :is(.driver-profile-info-grid, .driver-profile-extra-grid,
    .driver-scorecards-summary, .driver-tab-summary-grid, .driver-documents-hero,
    .driver-documents-summary, .van-period-card, .driver-document-card) :is(strong, b, dd),
html[data-cm-theme="theme-2"] :is(.van-wizard-field > span, .van-wizard-step, .van-follow-card strong,
    .comment-attachment-name, .comment-body, .ql-editor, .app-detail-note p) {
    color: var(--t2-text) !important;
}

html[data-cm-theme="theme-2"] :is(.driver-profile-info-grid, .driver-profile-extra-grid,
    .driver-scorecards-summary, .driver-tab-summary-grid, .van-period-card, .driver-document-card) :is(small, dt, label),
html[data-cm-theme="theme-2"] :is(.app-detail-note > span, .ql-editor.ql-blank::before, .app-document-meta-item) {
    color: var(--t2-text-2) !important;
}

html[data-cm-theme="theme-2"] :is(.driver-profile-status, .driver-profile-quick-state > span,
    .driver-profile-compliance, .driver-document-card-status, .driver-tab-status) {
    background: var(--t2-neutral-bg) !important;
    color: var(--t2-neutral-text) !important;
    border-color: var(--t2-neutral-border) !important;
}

html[data-cm-theme="theme-2"] :is(.driver-profile-status-1, .van-profile-status-1,
    .driver-profile-quick-state .is-ok, .driver-profile-compliance.is-ok,
    .driver-document-card-status.is-valid, .driver-tab-status.bg-success) {
    background: var(--t2-success-bg) !important;
    color: var(--t2-success-text) !important;
    border-color: var(--t2-success-border) !important;
}

html[data-cm-theme="theme-2"] :is(.driver-tab-status.bg-warning, .driver-document-card-status.is-expiring) {
    background: var(--t2-warning-bg) !important;
    color: var(--t2-warning-text) !important;
    border-color: var(--t2-warning-border) !important;
}

html[data-cm-theme="theme-2"] :is(.driver-tab-status.bg-danger, .driver-document-card-status.is-expired) {
    background: var(--t2-danger-bg) !important;
    color: var(--t2-danger-text) !important;
    border-color: var(--t2-danger-border) !important;
}

html[data-cm-theme="theme-2"] .warning-document-current-head {
    background: var(--t2-surface) !important;
    border-color: var(--t2-border) !important;
}

/* ----------------------------------------------------------------------------
   20. Specialised shared surfaces
   ---------------------------------------------------------------------------- */
html[data-cm-theme="theme-2"] :is(.tasks-column, .tasks-column-header, .billing-limit-list > div,
    .messages-preview-alert, .typology-admin-icon, .alerts-card-title i, .quick-link-admin-icon,
    .user-api-keys-avatar, .user-api-keys-empty, .user-api-keys-item, .user-api-keys-form,
    .user-api-keys-endpoint, .user-api-keys-snippet summary, .workspace-custom-domain-row,
    .superadmin-members-list span, .route-cycle-option, .route-cycle-panel-title,
    .route-day-summary-header, .route-summary-user-card, .support-row-head,
    .inventory-product-form-section, .quick-link-form-preview, .preventive-form-van,
    .zone-assignment-summary, .maintenance-document-card, .maintenance-document-empty,
    .inspection360-tire-report-card, .dnr-fault-context, .maintenance-kpi-grid > div,
    .inspection360-section, .inspection360-tire-card, .inspection360-check-row,
    .inspection360-section-header, .support-form-toolbar, .inventory-variant-row,
    .quick-link-form-panel, .maintenance-detail-card, .inspection360-wizard-nav,
    .inspection360-wizard-actions, .inspection360-report-card) {
    background: var(--t2-surface-2) !important;
    border-color: var(--t2-border) !important;
    color: var(--t2-text) !important;
    box-shadow: none !important;
}

html[data-cm-theme="theme-2"] :is(.tasks-column-title, .tasks-column-header strong,
    .support-form-toolbar strong, .support-form-toolbar b, .zone-assignment-summary strong,
    .quick-link-form-preview strong, .dnr-fault-context strong, .maintenance-detail-card strong,
    .absence-log-metrics strong, .route-register-card-main strong, .route-section-title strong,
    .route-summary-popup-cycle-name, .route-summary-popup-registered-pill,
    .route-summary-popup-chip-value) {
    color: var(--t2-text) !important;
}

html[data-cm-theme="theme-2"] :is(.tasks-card p, .tasks-card-meta, .absence-log-header p,
    .route-register-card-main span, .route-register-label, .route-section-title span,
    .route-cycle-option-main small, .route-duration-helper, .route-summary-popup-registered,
    .route-summary-popup-chip-label, .route-summary-popup-empty, .scorecards-trend-scale > span) {
    color: var(--t2-text-2) !important;
}

html[data-cm-theme="theme-2"] :is(.absence-log-metrics > article, .route-summary-popup-cycle,
    .route-summary-popup-registered-pill, .route-summary-popup-chip, .route-summary-popup-empty,
    .route-typology-card, .route-typology-tabs, .route-register-card, .route-register-main,
    .route-cycle-panel, .route-duration-section, .route-day-summary, .driver-profile-extra,
    .team-calendar-event-detail, .team-calendar-detail-section) {
    background: var(--t2-surface) !important;
    border-color: var(--t2-border) !important;
    color: var(--t2-text) !important;
}

html[data-cm-theme="theme-2"] :is(.route-cycle-option:has(input:checked), .route-typology-tab.active,
    .route-summary-popup-cycle-duration,
    .route-register-card-icon, .route-cycle-total, .route-day-summary-total) {
    background: var(--t2-selected-bg) !important;
    border-color: var(--t2-selected-border) !important;
    color: var(--t2-selected-text) !important;
}

html[data-cm-theme="theme-2"] .route-register-meta-row {
    background: var(--t2-surface-2) !important;
    border-color: var(--t2-border) !important;
    color: var(--t2-text) !important;
}
html[data-cm-theme="theme-2"] .route-register-meta-row > i { color: var(--t2-text-2) !important; }
html[data-cm-theme="theme-2"] .route-register-change-day {
    background: var(--t2-surface-2) !important;
    border-color: var(--t2-border) !important;
    color: var(--t2-text) !important;
}

/* ----------------------------------------------------------------------------
   21. Charts / calendars
   ---------------------------------------------------------------------------- */
html[data-cm-theme="theme-2"] :is(.apexcharts-text, .apexcharts-legend-text) {
    fill: var(--t2-text-2) !important;
    color: var(--t2-text-2) !important;
}

html[data-cm-theme="theme-2"] .apexcharts-gridline {
    stroke: var(--t2-border) !important;
}

html[data-cm-theme="theme-2"] .progress {
    background: var(--t2-surface-3) !important;
}

html[data-cm-theme="theme-2"] .progress-bar {
    background: var(--t2-grad) !important;
}

html[data-cm-theme="theme-2"] :is(.dashboard-calendar-weekday, .dashboard-calendar-cell,
    .dashboard-calendar-actions button, .scorecards-trend-ranges > *,
    .scorecards-trend-scale button, .scorecard-file-links a) {
    background: var(--t2-surface) !important;
    color: var(--t2-text) !important;
    border-color: var(--t2-border) !important;
}

html[data-cm-theme="theme-2"] .dashboard-calendar-cell.is-muted {
    color: var(--t2-text-3) !important;
}

html[data-cm-theme="theme-2"] :is(.dashboard-calendar-cell.is-today,
    .dashboard-calendar-actions .is-active, .scorecards-trend-ranges .is-active,
    .scorecards-trend-scale .is-active) {
    background: var(--t2-selected-bg) !important;
    color: var(--t2-selected-text) !important;
    border-color: var(--t2-selected-border) !important;
}

html[data-cm-theme="theme-2"] .fc-event {
    border-radius: 6px;
    border-color: transparent;
}

html[data-cm-theme="theme-2"] .fc .fc-button-primary {
    background: var(--t2-grad) !important;
    border-color: transparent !important;
    color: var(--t2-on-grad) !important;
}

html[data-cm-theme="theme-2"] .fc .fc-toolbar-title {
    color: var(--t2-text) !important;
}

html[data-cm-theme="theme-2"] .fc-theme-standard :is(td, th, .fc-scrollgrid) {
    border-color: var(--t2-border) !important;
}

/* ----------------------------------------------------------------------------
   22. Misc legacy surfaces
   ---------------------------------------------------------------------------- */
html[data-cm-theme="theme-2"] :is(.flatpickr-months, .flatpickr-month, .flatpickr-weekdays,
    .flatpickr-weekday, .flatpickr-current-month, .flatpickr-monthDropdown-months) {
    background: var(--t2-surface-2) !important;
    color: var(--t2-text) !important;
}

html[data-cm-theme="theme-2"] .flatpickr-day {
    color: var(--t2-text) !important;
}

html[data-cm-theme="theme-2"] :is(.flatpickr-day.selected, .flatpickr-day.startRange,
    .flatpickr-day.endRange, .flatpickr-day.inRange, .flatpickr-day:hover) {
    background: var(--t2-selected-bg) !important;
    color: var(--t2-selected-text) !important;
    border-color: var(--t2-selected-border) !important;
}

html[data-cm-theme="theme-2"] :is(.swal2-popup, .app-confirm-popup) {
    background: var(--t2-surface) !important;
    color: var(--t2-text) !important;
    border-radius: var(--t2-radius) !important;
}

html[data-cm-theme="theme-2"] :is(.swal2-title, .app-confirm-popup .swal2-title) {
    color: var(--t2-text) !important;
}

html[data-cm-theme="theme-2"] .swal2-html-container {
    color: var(--t2-text-2) !important;
}

html[data-cm-theme="theme-2"] .app-confirm-delete-button {
    background: var(--t2-red) !important;
    border-color: transparent !important;
    color: #fff !important;
}

html[data-cm-theme="theme-2"] .app-confirm-cancel-button {
    background: var(--t2-surface-3) !important;
    border-color: var(--t2-border) !important;
    color: var(--t2-text) !important;
}

html[data-cm-theme="theme-2"] .select2-container {
    background: transparent !important;
    box-shadow: none !important;
}

/* ----------------------------------------------------------------------------
   23. Responsive
   ---------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    html[data-cm-theme="theme-2"] .app-container {
        padding: 16px 14px 32px !important;
    }

    html[data-cm-theme="theme-2"] :is(.drivers-page-header, .app-page-hero) {
        padding: 18px 18px;
    }

    html[data-cm-theme="theme-2"] .app-popup-mode.page-warning-documents:not(.page-driver-form):not(.page-van-form):not(.page-inspection360-form) .app-container,
    html[data-cm-theme="theme-2"] .app-popup-mode.page-fuel-documents:not(.page-driver-form):not(.page-van-form):not(.page-inspection360-form) .app-container,
    html[data-cm-theme="theme-2"] .app-popup-mode.page-absence-documents:not(.page-driver-form):not(.page-van-form):not(.page-inspection360-form) .app-container,
    html[data-cm-theme="theme-2"] .app-popup-mode.page-fine-documents:not(.page-driver-form):not(.page-van-form):not(.page-inspection360-form) .app-container,
    html[data-cm-theme="theme-2"] .app-popup-mode.page-accident-documents:not(.page-driver-form):not(.page-van-form):not(.page-inspection360-form) .app-container,
    html[data-cm-theme="theme-2"] .app-popup-mode.page-accident-photos:not(.page-driver-form):not(.page-van-form):not(.page-inspection360-form) .app-container,
    html[data-cm-theme="theme-2"] .app-popup-mode.page-pave-documents:not(.page-driver-form):not(.page-van-form):not(.page-inspection360-form) .app-container,
    html[data-cm-theme="theme-2"] .app-popup-mode.page-documentation-documents:not(.page-driver-form):not(.page-van-form):not(.page-inspection360-form) .app-container,
    html[data-cm-theme="theme-2"] .app-popup-mode.page-preventive-maintenance-documents:not(.page-driver-form):not(.page-van-form):not(.page-inspection360-form) .app-container,
    html[data-cm-theme="theme-2"] .app-popup-mode.page-preventive-maintenance-history:not(.page-driver-form):not(.page-van-form):not(.page-inspection360-form) .app-container,
    html[data-cm-theme="theme-2"] .app-popup-mode.page-contract-documents:not(.page-driver-form):not(.page-van-form):not(.page-inspection360-form) .app-container,
    html[data-cm-theme="theme-2"] .app-popup-mode.page-incidence-documents:not(.page-driver-form):not(.page-van-form):not(.page-inspection360-form) .app-container {
        padding: 16px !important;
    }
}

/* ----------------------------------------------------------------------------
   24. Authentication pages
   ---------------------------------------------------------------------------- */
html[data-cm-theme="theme-2"] {
    --auth-bg: var(--t2-bg);
    --auth-surface: var(--t2-surface);
    --auth-text: var(--t2-text);
    --auth-muted: var(--t2-text-2);
    --auth-border: var(--t2-border);
    --auth-soft: var(--t2-surface-2);
    --auth-link: var(--t2-teal);
}

html[data-cm-theme="theme-2"] body .auth-card {
    border-radius: var(--t2-radius) !important;
}

html[data-cm-theme="theme-2"] body .auth-card .drivers-btn-primary {
    background: var(--t2-grad) !important;
    border-color: transparent !important;
    color: var(--t2-on-grad) !important;
}

html[data-cm-theme="theme-2"] body .auth-card .form-control:focus {
    border-color: var(--t2-teal) !important;
    box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.15) !important;
}

html[data-cm-theme="theme-2"] body .auth-card .form-check-input:checked {
    background-color: var(--t2-teal) !important;
    border-color: var(--t2-teal) !important;
}

html[data-cm-theme="theme-2"] body .auth-hero-panel {
    background: linear-gradient(150deg, #0b1019 0%, #0d2b2a 100%) !important;
}

html[data-cm-theme="theme-2"] body .auth-hero-title {
    color: #f8fafc !important;
}

html[data-cm-theme="theme-2"] body .auth-eyebrow {
    background: rgba(45, 212, 191, 0.16) !important;
    border-color: rgba(45, 212, 191, 0.35) !important;
    color: #7ff0e4 !important;
}

html[data-cm-theme="theme-2"] body .auth-hero-metric {
    background: #16333a !important;
    border-color: #245059 !important;
}

html[data-cm-theme="theme-2"] body .register-step-pill.is-active span {
    background: var(--t2-grad) !important;
    border-color: transparent !important;
    color: var(--t2-on-grad) !important;
}

html[data-cm-theme="theme-2"] body .register-file-drop:hover,
html[data-cm-theme="theme-2"] body .register-file-logo {
    border-color: var(--t2-teal) !important;
    color: var(--t2-teal) !important;
}

/* ----------------------------------------------------------------------------
   25. Form wizards (driver, van, user, 360 inspection, maintenance)
   ---------------------------------------------------------------------------- */
html[data-cm-theme="theme-2"] :is(.driver-wizard-steps, .van-wizard-steps, .user-wizard-steps,
    .inspection360-wizard-nav) {
    border-color: var(--t2-border) !important;
    background: var(--t2-surface-2) !important;
    color: var(--t2-text) !important;
}

html[data-cm-theme="theme-2"] :is(.driver-wizard-step, .van-wizard-step, .user-wizard-step,
    .inspection360-wizard-step) {
    color: var(--t2-text-2) !important;
}

html[data-cm-theme="theme-2"] :is(.driver-wizard-step, .van-wizard-step, .user-wizard-step,
    .inspection360-wizard-step):not(:last-child)::after {
    background: var(--t2-border) !important;
}

html[data-cm-theme="theme-2"] :is(.driver-wizard-step, .van-wizard-step, .user-wizard-step,
    .inspection360-wizard-step) span {
    background: var(--t2-surface) !important;
    border-color: var(--t2-border) !important;
    color: var(--t2-text-2) !important;
}

html[data-cm-theme="theme-2"] :is(.driver-wizard-step, .van-wizard-step, .user-wizard-step,
    .inspection360-wizard-step).is-active {
    color: var(--t2-text) !important;
}

html[data-cm-theme="theme-2"] :is(.driver-wizard-step, .van-wizard-step, .user-wizard-step,
    .inspection360-wizard-step).is-active span {
    background: var(--t2-grad) !important;
    border-color: transparent !important;
    color: var(--t2-on-grad) !important;
    box-shadow: 0 6px 16px rgba(45, 212, 191, 0.28) !important;
}

html[data-cm-theme="theme-2"] :is(.driver-wizard-step, .van-wizard-step, .user-wizard-step,
    .inspection360-wizard-step):is(.is-done, .is-complete) span {
    background: var(--t2-surface) !important;
    border-color: var(--t2-teal) !important;
    color: var(--t2-teal) !important;
}

html[data-cm-theme="theme-2"] :is(.driver-wizard-content, .van-wizard-main, .user-wizard-content) {
    background: var(--t2-surface) !important;
    color: var(--t2-text) !important;
}

html[data-cm-theme="theme-2"] .driver-wizard-panel {
    color: var(--t2-text) !important;
}

/* ----------------------------------------------------------------------------
   26. Form/popup footer actions
   Mirrors the shared footer button rules with an extra theme prefix so the
   Theme 2 palette outranks catchme-theme.css.
   ---------------------------------------------------------------------------- */
html[data-cm-theme="theme-2"] .app-content :is(.app-form-footer, .form-actions, .modal-footer) :is(.drivers-btn, .btn),
html[data-cm-theme="theme-2"] .app-popup-mode :is(.app-popup-form-footer, .modal-footer) :is(.drivers-btn, .btn, .app-popup-submit, .app-popup-cancel),
html[data-cm-theme="theme-2"] .modal :is(.app-popup-form-footer, .modal-footer) :is(.drivers-btn, .btn, .app-popup-submit, .app-popup-cancel) {
    border-radius: var(--t2-radius-sm) !important;
}

html[data-cm-theme="theme-2"] .app-content :is(.app-form-footer, .form-actions, .modal-footer) :is(.drivers-btn-outline, .btn-light, .btn-secondary),
html[data-cm-theme="theme-2"] .app-popup-mode :is(.app-popup-form-footer, .modal-footer) :is(.drivers-btn-outline, .btn-light, .btn-secondary, .app-popup-cancel),
html[data-cm-theme="theme-2"] .modal :is(.app-popup-form-footer, .modal-footer) :is(.drivers-btn-outline, .btn-light, .btn-secondary, .app-popup-cancel) {
    border: 1px solid var(--t2-border) !important;
    background: var(--t2-surface) !important;
    color: var(--t2-text) !important;
}

html[data-cm-theme="theme-2"] .app-content :is(.app-form-footer, .form-actions, .modal-footer) :is(.drivers-btn-primary, .btn-primary, .app-popup-submit),
html[data-cm-theme="theme-2"] .app-popup-mode :is(.app-popup-form-footer, .modal-footer) :is(.drivers-btn-primary, .btn-primary, .app-popup-submit),
html[data-cm-theme="theme-2"] .modal :is(.app-popup-form-footer, .modal-footer) :is(.drivers-btn-primary, .btn-primary, .app-popup-submit) {
    border: 1px solid transparent !important;
    background: var(--t2-grad) !important;
    color: var(--t2-on-grad) !important;
}

html[data-cm-theme="theme-2"] .app-popup-submit {
    border: 1px solid transparent !important;
    background: var(--t2-grad) !important;
    color: var(--t2-on-grad) !important;
}

html[data-cm-theme="theme-2"] .app-popup-submit:hover,
html[data-cm-theme="theme-2"] .app-popup-submit:focus {
    filter: brightness(1.06);
    color: var(--t2-on-grad) !important;
}

/* ----------------------------------------------------------------------------
   27. Visual enrichment — colour, depth and uniform surfaces
   ---------------------------------------------------------------------------- */

/* Content canvas gets a soft brand glow for depth. */
html[data-cm-theme="theme-2"] :is(.app-content, .content-page, .app-content-page) {
    background: var(--t2-content-glow), var(--t2-bg) !important;
    background-attachment: fixed;
}

/* Consistent hero for the redesign headers, now shared with the task board. */
html[data-cm-theme="theme-2"] :is(.drivers-page-header, .tasks-page-header, .app-page-hero, .maintenance-page-header, .billing-page-header) {
    position: relative;
    overflow: hidden;
    align-items: center;
    padding: 24px 28px;
    border: 1px solid rgba(45, 212, 191, 0.30) !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, rgba(45, 212, 191, 0.22), rgba(56, 189, 248, 0.10) 52%, transparent), var(--t2-surface) !important;
    box-shadow: 0 14px 34px rgba(16, 40, 40, 0.07) !important;
}

html[data-cm-theme="theme-2"] :is(.drivers-page-header, .tasks-page-header, .app-page-hero)::after {
    content: "";
    position: absolute;
    right: -80px;
    top: -140px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(45, 212, 191, 0.30), transparent 62%);
    pointer-events: none;
}

html[data-cm-theme="theme-2"] :is(.drivers-page-header, .tasks-page-header, .app-page-hero) > * {
    position: relative;
    z-index: 1;
}

html[data-cm-theme="theme-2"] :is(.drivers-page-header, .tasks-page-header, .app-page-hero) h1 {
    font-weight: 800;
    letter-spacing: -0.025em;
}

/* Uniform card surface: same border, radius, shadow and hover lift everywhere. */
html[data-cm-theme="theme-2"] :is(
    .card, .app-card, .drivers-table-card, .drivers-chart-card, .driver-tab-card, .van-tab-card,
    .alerts-card, .dashboard-panel, .dashboard-total-card, .quick-link-admin-card,
    .typology-admin-card, .superadmin-workspaces-card, .superadmin-workspaces-total,
    .billing-price-card, .rental-period-card, .tasks-card, .driver-profile-card,
    .driver-profile-tabs-card, .driver-document-card, .van-period-card, .warning-document-current
) {
    border-radius: var(--t2-radius) !important;
    border: 1px solid var(--t2-border) !important;
    box-shadow: var(--t2-shadow) !important;
    transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}

html[data-cm-theme="theme-2"] :is(
    .card, .app-card, .drivers-chart-card, .driver-tab-card, .van-tab-card, .alerts-card,
    .dashboard-panel, .dashboard-total-card, .quick-link-admin-card, .typology-admin-card,
    .superadmin-workspaces-card, .billing-price-card, .rental-period-card, .tasks-card
):hover {
    border-color: var(--t2-border-2) !important;
    box-shadow: var(--t2-card-shadow-hover) !important;
    transform: translateY(-2px) !important;
}

/* Card headers share a subtle brand wash and a gradient accent line. */
html[data-cm-theme="theme-2"] :is(.card-header, .app-card-header, .card .head) {
    position: relative;
    background: linear-gradient(90deg, rgba(45, 212, 191, 0.09), transparent 58%), var(--t2-surface-2) !important;
    border-color: var(--t2-border) !important;
}

html[data-cm-theme="theme-2"] :is(.card-header, .app-card-header, .card .head)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--t2-grad);
    border-radius: 3px 0 0 3px;
}

/* Table headers pick up the brand tint; rows stay calm. */
html[data-cm-theme="theme-2"] :is(.drivers-table, .app-data-table, table.table) thead th {
    background: linear-gradient(180deg, rgba(45, 212, 191, 0.07), transparent), var(--t2-surface-2) !important;
    color: var(--t2-text-2) !important;
}

/* Primary buttons keep the gradient; hover gains depth. */
html[data-cm-theme="theme-2"] :is(.drivers-btn-primary, .app-create-button, .btn-primary, .btn-success, .app-search-button, .app-popup-submit):hover {
    box-shadow: 0 8px 22px rgba(45, 212, 191, 0.35) !important;
}

/* Secondary controls react with brand colour instead of plain gray. */
html[data-cm-theme="theme-2"] :is(.drivers-btn-outline, .app-export-button, .app-popup-cancel):hover {
    border-color: rgba(13, 148, 136, 0.45) !important;
    background: var(--t2-surface-2) !important;
    color: var(--t2-teal) !important;
}

/* Sidebar gains a soft brand glow behind the active section. */
html[data-cm-theme="theme-2"] .app-sidebar-shell {
    background: linear-gradient(180deg, rgba(45, 212, 191, 0.05), transparent 220px) !important;
}

/* ----------------------------------------------------------------------------
   28. Dashboard KPI tiles — coloured figures and icon chips
   ---------------------------------------------------------------------------- */
html[data-cm-theme="theme-2"] .page-dashboard .app-content .dashboard-kpi-card {
    border-radius: var(--t2-radius) !important;
    border: 1px solid var(--kpi-border, var(--t2-border)) !important;
    background: var(--kpi-bg, var(--t2-surface)) !important;
    box-shadow: var(--t2-shadow) !important;
    transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}

html[data-cm-theme="theme-2"] .page-dashboard .app-content .dashboard-kpi-card:hover {
    box-shadow: var(--t2-card-shadow-hover) !important;
    transform: translateY(-2px) !important;
}

html[data-cm-theme="theme-2"] .page-dashboard .app-content .dashboard-kpi-card .dashboard-kpi-value {
    color: var(--kpi-color, var(--t2-text)) !important;
}

html[data-cm-theme="theme-2"] .page-dashboard .app-content .dashboard-kpi-card .dashboard-kpi-icon {
    background: var(--kpi-soft, var(--t2-surface-3)) !important;
    color: var(--kpi-color, var(--t2-teal)) !important;
}

html[data-cm-theme="theme-2"] .dashboard-kpi-blue {
    --kpi-color: var(--t2-blue);
    --kpi-soft: var(--t2-info-bg);
    --kpi-border: var(--t2-border);
}

html[data-cm-theme="theme-2"] .dashboard-kpi-green {
    --kpi-color: var(--t2-green);
    --kpi-soft: var(--t2-success-bg);
    --kpi-border: var(--t2-border);
}

html[data-cm-theme="theme-2"] .dashboard-kpi-amber {
    --kpi-color: var(--t2-amber);
    --kpi-soft: var(--t2-warning-bg);
    --kpi-border: var(--t2-border);
}

html[data-cm-theme="theme-2"] .dashboard-kpi-violet {
    --kpi-color: var(--t2-violet);
    --kpi-soft: var(--t2-violet-bg);
    --kpi-border: var(--t2-border);
}

html[data-cm-theme="theme-2"] .dashboard-kpi-red {
    --kpi-color: var(--t2-red);
    --kpi-soft: var(--t2-danger-bg);
    --kpi-border: var(--t2-border);
}

html[data-cm-theme="theme-2"] .dashboard-kpi-slate {
    --kpi-color: var(--t2-text-2);
    --kpi-soft: var(--t2-neutral-bg);
    --kpi-border: var(--t2-border);
}

/* ----------------------------------------------------------------------------
   29. Popups — seamless surface (no grey frame) aligned with the modal header
   ---------------------------------------------------------------------------- */
html[data-cm-theme="theme-2"] .app-popup-mode:not(.page-driver-form):not(.page-van-form):not(.page-inspection360-form):not(.page-task-detail) {
    background: var(--t2-surface) !important;
}

html[data-cm-theme="theme-2"] .app-popup-mode:not(.page-driver-form):not(.page-van-form):not(.page-inspection360-form):not(.page-task-detail) :is(.app-content, .app-container) {
    background: var(--t2-surface) !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* Standard forms keep the shared container padding (20px, 16px on mobile). */
html[data-cm-theme="theme-2"] .app-popup-mode:not(.page-driver-form):not(.page-van-form):not(.page-inspection360-form):not(.page-task-detail) .app-content,
html[data-cm-theme="theme-2"] .app-popup-mode:where(:not(.page-standard-form-popup)):not(.page-driver-form):not(.page-van-form):not(.page-inspection360-form):not(.page-task-detail) .app-container {
    padding: 0 !important;
}

/* Document/photo popups have no .app-popup-form, so they must restore the
   standard inner margin the generic rule above removes. */
html[data-cm-theme="theme-2"] .app-popup-mode.page-warning-documents:not(.page-driver-form):not(.page-van-form):not(.page-inspection360-form) .app-container,
html[data-cm-theme="theme-2"] .app-popup-mode.page-fuel-documents:not(.page-driver-form):not(.page-van-form):not(.page-inspection360-form) .app-container,
html[data-cm-theme="theme-2"] .app-popup-mode.page-absence-documents:not(.page-driver-form):not(.page-van-form):not(.page-inspection360-form) .app-container,
html[data-cm-theme="theme-2"] .app-popup-mode.page-fine-documents:not(.page-driver-form):not(.page-van-form):not(.page-inspection360-form) .app-container,
html[data-cm-theme="theme-2"] .app-popup-mode.page-accident-documents:not(.page-driver-form):not(.page-van-form):not(.page-inspection360-form) .app-container,
html[data-cm-theme="theme-2"] .app-popup-mode.page-accident-photos:not(.page-driver-form):not(.page-van-form):not(.page-inspection360-form) .app-container,
html[data-cm-theme="theme-2"] .app-popup-mode.page-pave-documents:not(.page-driver-form):not(.page-van-form):not(.page-inspection360-form) .app-container,
html[data-cm-theme="theme-2"] .app-popup-mode.page-documentation-documents:not(.page-driver-form):not(.page-van-form):not(.page-inspection360-form) .app-container,
html[data-cm-theme="theme-2"] .app-popup-mode.page-preventive-maintenance-documents:not(.page-driver-form):not(.page-van-form):not(.page-inspection360-form) .app-container,
html[data-cm-theme="theme-2"] .app-popup-mode.page-preventive-maintenance-history:not(.page-driver-form):not(.page-van-form):not(.page-inspection360-form) .app-container,
html[data-cm-theme="theme-2"] .app-popup-mode.page-contract-documents:not(.page-driver-form):not(.page-van-form):not(.page-inspection360-form) .app-container,
html[data-cm-theme="theme-2"] .app-popup-mode.page-incidence-documents:not(.page-driver-form):not(.page-van-form):not(.page-inspection360-form) .app-container {
    padding: 16px 20px 20px !important;
}

html[data-cm-theme="theme-2"] .app-popup-mode:not(.page-driver-form):not(.page-van-form):not(.page-inspection360-form) .app-popup-form {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 16px 20px 20px !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: var(--t2-surface) !important;
}

html[data-cm-theme="theme-2"] .app-popup-mode:not(.page-driver-form):not(.page-van-form):not(.page-inspection360-form) .app-popup-form-content {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html[data-cm-theme="theme-2"] .app-popup-mode.page-standard-form-popup .form-label {
    color: var(--t2-text) !important;
}

html[data-cm-theme="theme-2"] .app-popup-mode.page-standard-form-popup :is(.form-control, .form-select),
html[data-cm-theme="theme-2"] .app-popup-mode.page-standard-form-popup .select2-container--default :is(.select2-selection--single, .select2-selection--multiple) {
    background: var(--t2-input-bg) !important;
    border-color: var(--t2-border) !important;
    color: var(--t2-text) !important;
    border-radius: var(--t2-radius-sm) !important;
}

html[data-cm-theme="theme-2"] .app-popup-mode.page-standard-form-popup :is(.form-control, .form-select):focus,
html[data-cm-theme="theme-2"] .app-popup-mode.page-standard-form-popup .select2-container--focus .select2-selection {
    border-color: var(--t2-teal) !important;
    box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.14) !important;
}

html[data-cm-theme="theme-2"] .app-popup-mode.page-standard-form-popup .select2-selection__rendered {
    color: var(--t2-text) !important;
}

html[data-cm-theme="theme-2"] .app-popup-mode.page-standard-form-popup .select2-selection__placeholder {
    color: var(--t2-text-3) !important;
}

html[data-cm-theme="theme-2"] .app-popup-mode.page-standard-form-popup .form-text {
    color: var(--t2-text-2) !important;
}

/* Team calendar widgets follow the Theme 2 palette everywhere. */
html[data-cm-theme="theme-2"] .team-calendar-label {
    color: var(--t2-text) !important;
}

html[data-cm-theme="theme-2"] .team-calendar-label strong {
    color: var(--t2-red) !important;
}

html[data-cm-theme="theme-2"] .team-calendar-choice span {
    border: 1px solid var(--t2-border) !important;
    background: var(--t2-surface) !important;
    color: var(--t2-text-2) !important;
    border-radius: 999px !important;
}

html[data-cm-theme="theme-2"] .team-calendar-choice input:checked + span {
    border-color: var(--t2-selected-border) !important;
    background: var(--t2-selected-bg) !important;
    color: var(--t2-selected-text) !important;
    font-weight: 700;
}

html[data-cm-theme="theme-2"] .team-calendar-event-form :is(.form-control, .form-select) {
    background: var(--t2-input-bg) !important;
    border-color: var(--t2-border) !important;
    color: var(--t2-text) !important;
    border-radius: var(--t2-radius-sm) !important;
}

html[data-cm-theme="theme-2"] .team-calendar-event-form :is(.form-control, .form-select):focus {
    border-color: var(--t2-teal) !important;
    box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.14) !important;
}

html[data-cm-theme="theme-2"] .team-calendar-check {
    color: var(--t2-text-2) !important;
}

html[data-cm-theme="theme-2"] .team-calendar-check input {
    accent-color: var(--t2-teal);
}

html[data-cm-theme="theme-2"] .team-calendar-file-button {
    border: 1px solid var(--t2-border) !important;
    background: var(--t2-surface) !important;
    color: var(--t2-text) !important;
    border-radius: var(--t2-radius-sm) !important;
}

html[data-cm-theme="theme-2"] .team-calendar-file-button:hover {
    border-color: rgba(13, 148, 136, 0.45) !important;
    color: var(--t2-teal) !important;
}

html[data-cm-theme="theme-2"] .team-calendar-reminder {
    border: 1px solid var(--t2-border) !important;
    background: var(--t2-surface-2) !important;
    border-radius: var(--t2-radius-md) !important;
}

html[data-cm-theme="theme-2"] :is(.team-calendar-reminder strong) {
    color: var(--t2-text) !important;
}

html[data-cm-theme="theme-2"] :is(.team-calendar-reminder small, .team-calendar-reminder i,
    .team-calendar-empty-roles) {
    color: var(--t2-text-2) !important;
}

html[data-cm-theme="theme-2"] .team-calendar-reminder input {
    background: var(--t2-border-2) !important;
    border-color: var(--t2-border-2) !important;
    box-shadow: inset 0 0 0 2px var(--t2-surface-2) !important;
}

html[data-cm-theme="theme-2"] .team-calendar-reminder input:checked {
    background: var(--t2-teal) !important;
}

html[data-cm-theme="theme-2"] :is(.team-calendar-event-detail h2, .team-calendar-detail-kicker,
    .team-calendar-event-detail dd, .team-calendar-detail-section p) {
    color: var(--t2-text) !important;
}

html[data-cm-theme="theme-2"] :is(.team-calendar-event-detail dt, .team-calendar-detail-section h3,
    .team-calendar-detail-meta) {
    color: var(--t2-text-2) !important;
}

/* ----------------------------------------------------------------------------
   30. Team calendar (dashboard) — palette and contrast
   ---------------------------------------------------------------------------- */
html[data-cm-theme="theme-2"] :is(.dashboard-calendar-title a, .dashboard-calendar-new) {
    border: 1px solid transparent !important;
    background: var(--t2-grad) !important;
    color: var(--t2-on-grad) !important;
    border-radius: var(--t2-radius-sm) !important;
    box-shadow: 0 4px 14px rgba(45, 212, 191, 0.25) !important;
}

html[data-cm-theme="theme-2"] :is(.dashboard-calendar-title a, .dashboard-calendar-new) :is(i, span) {
    color: var(--t2-on-grad) !important;
}

html[data-cm-theme="theme-2"] :is(.dashboard-calendar-day-number, .dashboard-calendar-mode-row,
    .dashboard-calendar-upcoming-row) {
    color: var(--t2-text) !important;
}

html[data-cm-theme="theme-2"] .dashboard-calendar-day-number:hover {
    background: var(--t2-selected-bg) !important;
    color: var(--t2-selected-text) !important;
}

html[data-cm-theme="theme-2"] .dashboard-calendar-cell.is-today .dashboard-calendar-day-number {
    background: var(--t2-grad) !important;
    color: var(--t2-on-grad) !important;
}

html[data-cm-theme="theme-2"] :is(.dashboard-calendar-legend, .dashboard-calendar-more,
    .dashboard-calendar-mode-row small) {
    color: var(--t2-text-2) !important;
}

html[data-cm-theme="theme-2"] :is(.dashboard-calendar-mode-panel, .dashboard-calendar-mode-row,
    .dashboard-calendar-upcoming-row, .dashboard-calendar-cell, .dashboard-calendar-weekday) {
    border-color: var(--t2-border) !important;
    background: var(--t2-surface) !important;
}

html[data-cm-theme="theme-2"] .dashboard-calendar-mode-panel {
    background: var(--t2-surface) !important;
}

/* Event type colours on the Theme 2 palette. */
html[data-cm-theme="theme-2"] :is(.dashboard-calendar-event-dot, .dashboard-calendar-event).is-meeting {
    --team-calendar-event-color: var(--t2-blue);
    --team-calendar-event-bg: var(--t2-info-bg);
}

html[data-cm-theme="theme-2"] :is(.dashboard-calendar-event-dot, .dashboard-calendar-event).is-training {
    --team-calendar-event-color: var(--t2-green);
    --team-calendar-event-bg: var(--t2-success-bg);
}

html[data-cm-theme="theme-2"] :is(.dashboard-calendar-event-dot, .dashboard-calendar-event).is-reminder {
    --team-calendar-event-color: var(--t2-violet);
    --team-calendar-event-bg: var(--t2-violet-bg);
}

html[data-cm-theme="theme-2"] :is(.dashboard-calendar-event-dot, .dashboard-calendar-event).is-vacation {
    --team-calendar-event-color: #ec4899;
    --team-calendar-event-bg: #fdf2f8;
}

html[data-cm-theme="theme-2"] :is(.dashboard-calendar-event-dot, .dashboard-calendar-event).is-operational {
    --team-calendar-event-color: var(--t2-amber);
    --team-calendar-event-bg: var(--t2-warning-bg);
}

html[data-cm-theme="theme-2"] :is(.dashboard-calendar-event-dot, .dashboard-calendar-event).is-other {
    --team-calendar-event-color: var(--t2-text-3);
    --team-calendar-event-bg: var(--t2-neutral-bg);
}

html[data-cm-theme="theme-2"] .dashboard-calendar-event {
    border-color: var(--team-calendar-event-color) !important;
    background: var(--team-calendar-event-color) !important;
    color: #ffffff !important;
}

html[data-cm-theme="theme-2"] .dashboard-calendar-event:hover {
    color: #ffffff !important;
}