html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* Workspace identity */
.workspace-coming-soon .item {
    cursor: default;
    opacity: 0.82;
}

.workspace-bottom-indicator {
    cursor: default;
}

/* Crash Analysis uses red for the complete primary visual language. */
body.workspace-crash {
    --bs-primary: #c62828;
    --bs-primary-rgb: 198, 40, 40;
    --workspace-primary: #c62828;
    --workspace-primary-hover: #a61f1f;
    --workspace-primary-soft: rgba(198, 40, 40, 0.15);
}

body.workspace-crash ::selection {
    background: rgba(198, 40, 40, 0.3);
}

body.workspace-crash .btn:focus,
body.workspace-crash .btn:active:focus,
body.workspace-crash .btn-link.nav-link:focus,
body.workspace-crash .form-control:focus,
body.workspace-crash .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem rgba(198, 40, 40, 0.55);
}

body.workspace-crash .workspace-bottom-indicator ion-icon {
    color: var(--workspace-primary) !important;
}

body.workspace-crash a:not(.btn):not(.item):not(.badge):not(.chip),
body.workspace-crash a:not(.btn):not(.item):not(.badge):not(.chip):hover,
body.workspace-crash a:not(.btn):not(.item):not(.badge):not(.chip):active,
body.workspace-crash a:not(.btn):not(.item):not(.badge):not(.chip):focus,
body.workspace-crash .text-primary,
body.workspace-crash a.text-primary,
body.workspace-crash .btn-link,
body.workspace-crash .btn-text-primary,
body.workspace-crash .action-button-list > li .btn.text-primary,
body.workspace-crash .notification-dialog.android-style .notification-footer .notification-button,
body.workspace-crash .profile-info .link {
    color: var(--workspace-primary) !important;
}

body.workspace-crash .appHeader:before,
body.workspace-crash .appHeader.bg-primary,
body.workspace-crash .appHeader.scrolled.bg-primary.is-active,
body.workspace-crash .profileBox,
body.workspace-crash .profileBox:before,
body.workspace-crash .action-group,
body.workspace-crash .bg-primary,
body.workspace-crash .badge-primary,
body.workspace-crash .chip-primary,
body.workspace-crash .divider.bg-primary,
body.workspace-crash .appBottomMenu .item .action-button,
body.workspace-crash .progress-bar,
body.workspace-crash .message-item.user .bubble,
body.workspace-crash .form-wizard-section .button-item.active strong,
body.workspace-crash .fab-button .fab,
body.workspace-crash .fab-button .dropdown-menu .dropdown-item,
body.workspace-crash .pagination .page-item .page-link {
    background: var(--workspace-primary) !important;
    border-color: var(--workspace-primary) !important;
}

body.workspace-crash .bg-primary,
body.workspace-crash a.bg-primary,
body.workspace-crash .badge-primary,
body.workspace-crash .chip-primary,
body.workspace-crash .appBottomMenu .item .action-button,
body.workspace-crash .progress-bar,
body.workspace-crash .message-item.user .bubble,
body.workspace-crash .fab-button .fab,
body.workspace-crash .fab-button .dropdown-menu .dropdown-item,
body.workspace-crash .pagination .page-item .page-link {
    color: #fff !important;
}

body.workspace-crash .bg-primary a,
body.workspace-crash .alert-primary a {
    color: #fff !important;
}

body.workspace-crash .listview .icon-box,
body.workspace-crash .image-listview > li .item .icon-box {
    background: var(--workspace-primary) !important;
    color: #fff !important;
}

body.workspace-crash a.bg-primary:hover,
body.workspace-crash a.bg-primary:active,
body.workspace-crash .btn-primary:hover,
body.workspace-crash .btn-primary:focus,
body.workspace-crash .btn-primary:active,
body.workspace-crash .btn-primary.active,
body.workspace-crash .fab-button.dropdown.show .fab,
body.workspace-crash .fab-button .fab:hover,
body.workspace-crash .fab-button .fab:active,
body.workspace-crash .fab-button .dropdown-menu .dropdown-item:hover,
body.workspace-crash .fab-button .dropdown-menu .dropdown-item:active {
    background: var(--workspace-primary-hover) !important;
    border-color: var(--workspace-primary-hover) !important;
}

body.workspace-crash .btn-primary,
body.workspace-crash .btn-primary.disabled,
body.workspace-crash .btn-primary:disabled {
    background: var(--workspace-primary) !important;
    border-color: var(--workspace-primary) !important;
    color: #fff !important;
}

body.workspace-crash .btn-outline-primary {
    background: transparent !important;
    border-color: var(--workspace-primary) !important;
    color: var(--workspace-primary) !important;
}

body.workspace-crash .btn-outline-primary:hover,
body.workspace-crash .btn-outline-primary:active,
body.workspace-crash .btn-text-primary:active,
body.workspace-crash .btn-text-primary.active {
    background: var(--workspace-primary-soft) !important;
    border-color: var(--workspace-primary) !important;
    color: var(--workspace-primary) !important;
}

body.workspace-crash .btn-outline-primary.active,
body.workspace-crash .btn-check:checked + .btn-outline-primary {
    background: var(--workspace-primary) !important;
    border-color: var(--workspace-primary) !important;
    color: #fff !important;
}

body.workspace-crash .border-primary,
body.workspace-crash .alert-primary,
body.workspace-crash .alert-outline-primary,
body.workspace-crash .stepper .stepper-button,
body.workspace-crash .stepper .form-control {
    border-color: var(--workspace-primary) !important;
}

body.workspace-crash .alert-primary,
body.workspace-crash .stepper .stepper-button {
    background: var(--workspace-primary) !important;
}

body.workspace-crash .alert-outline-primary,
body.workspace-crash .alert-outline-primary a,
body.workspace-crash .alert-outline-primary .alert-title,
body.workspace-crash .alert-outline-primary .btn-close,
body.workspace-crash .stepper .form-control,
body.workspace-crash .appHeader.scrolled.bg-primary .headerButton {
    color: var(--workspace-primary) !important;
}

body.workspace-crash .appHeader.scrolled.bg-primary:not(.is-active) {
    background: transparent !important;
}

body.workspace-crash .appHeader.bg-primary:not(.scrolled) .headerButton,
body.workspace-crash .appHeader.bg-primary:not(.scrolled) a.headerButton:not(.btn):not(.item):not(.badge):not(.chip),
body.workspace-crash .appHeader.scrolled.bg-primary.is-active .headerButton,
body.workspace-crash .appHeader.scrolled.bg-primary.is-active a.headerButton:not(.btn):not(.item):not(.badge):not(.chip) {
    color: #fff !important;
}

body.workspace-crash .alert-outline-primary .btn-close:before,
body.workspace-crash .alert-outline-primary .btn-close:after {
    background: var(--workspace-primary) !important;
}

body.workspace-crash .chip-primary.chip-outline {
    background: transparent !important;
    color: var(--workspace-primary) !important;
    box-shadow: inset 0 0 0 1px var(--workspace-primary) !important;
}

body.workspace-crash .appBottomMenu .item.active i.bi,
body.workspace-crash .appBottomMenu .item.active i.icon,
body.workspace-crash .appBottomMenu .item.active ion-icon,
body.workspace-crash .appBottomMenu .item.active strong,
body.workspace-crash .nav-tabs.lined .nav-item .nav-link.active,
body.workspace-crash .nav-tabs .nav-link.active,
body.workspace-crash .form-group .input-wrapper.active .form-label {
    color: var(--workspace-primary) !important;
}

body.workspace-crash .nav-tabs.lined .nav-item .nav-link.active {
    border-bottom-color: var(--workspace-primary) !important;
}

body.workspace-crash .form-control:focus,
body.workspace-crash .form-select:focus,
body.workspace-crash .form-group.boxed .form-control:focus {
    border-color: var(--workspace-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(198, 40, 40, 0.2);
}

body.workspace-crash .form-group.basic .form-control:focus,
body.workspace-crash .form-group.basic .custom-select:focus {
    border-bottom-color: var(--workspace-primary) !important;
    box-shadow: inset 0 -1px 0 0 var(--workspace-primary) !important;
}

body.workspace-crash .form-check-input:checked,
body.workspace-crash .form-check-input:checked ~ .form-check-label:after {
    background-color: var(--workspace-primary) !important;
    border-color: var(--workspace-primary) !important;
}

/* Replace legacy inline blue accents on user-facing pages. */
body.workspace-crash [style*="color:#1E74FD"],
body.workspace-crash [style*="color: #1E74FD"],
body.workspace-crash [style*="color:#1e74fd"],
body.workspace-crash [style*="color: #1e74fd"] {
    color: var(--workspace-primary) !important;
}

body.workspace-crash [style*="background:#1E74FD"],
body.workspace-crash [style*="background: #1E74FD"],
body.workspace-crash [style*="background:#1e74fd"],
body.workspace-crash [style*="background: #1e74fd"] {
    background: var(--workspace-primary) !important;
}

body.workspace-crash [style*="linear-gradient(90deg,#1E74FD"] {
    background: linear-gradient(90deg, #c62828 0%, #ef5350 100%) !important;
}

body.workspace-crash [style*="background:#EBF3FF"],
body.workspace-crash [style*="background: #EBF3FF"],
body.workspace-crash [style*="background:#EEF2FF"],
body.workspace-crash [style*="background: #EEF2FF"],
body.workspace-crash [style*="background:#e8f0ff"],
body.workspace-crash [style*="background: #e8f0ff"] {
    background: var(--workspace-primary-soft) !important;
}

/* The wizard provides its own accessible clear-search button. */
.wizard-search-input::-webkit-search-cancel-button {
    display: none;
    -webkit-appearance: none;
}

/* Blazor Reconnect UI */
#components-reconnect-modal {
    display: none;
}

#components-reconnect-modal.components-reconnect-show {
    display: block;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-failed,
#components-reconnect-modal.components-reconnect-show .components-reconnect-rejected {
    display: none;
}

#components-reconnect-modal.components-reconnect-failed {
    display: block;
}

#components-reconnect-modal.components-reconnect-failed .components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed .components-reconnect-rejected {
    display: none;
}

#components-reconnect-modal.components-reconnect-rejected {
    display: block;
}

#components-reconnect-modal.components-reconnect-rejected .components-reconnect-show,
#components-reconnect-modal.components-reconnect-rejected .components-reconnect-failed {
    display: none;
}

#components-reconnect-modal.components-reconnect-hide {
    display: none;
}

.vedito-reconnect-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.vedito-reconnect-overlay .modal-dialog {
    max-width: 340px;
    margin: auto;
}

.vedito-reconnect-overlay .modal-content {
    text-align: center;
}

/* ?? Vehicle card ???????????????????????????????????????????? */
.veh-card-name {
    color: #444;
}
.veh-card-vin {
    color: #222;
}
.veh-fav-chip {
    background: #FFF8E1;
    border: 1px solid #FFD54F;
    border-radius: 8px;
    padding: 3px 10px;
    min-width: 70px;
}
.veh-fav-label {
    font-size: .72rem;
    color: #888;
    line-height: 1.3;
}
.veh-fav-value {
    font-size: .85rem;
    color: #795548;
    font-weight: 600;
    line-height: 1.3;
}

/* ?? Vehicle card dark mode ?????????????????????????????????? */
body.dark-mode-active .veh-card-name {
    color: #c8cdd3;
}
body.dark-mode-active .veh-card-vin {
    color: #d0d6de;
}
body.dark-mode-active .veh-fav-chip {
    background: rgba(255, 248, 225, 0.08);
    border-color: rgba(255, 213, 79, 0.35);
}
body.dark-mode-active .veh-fav-label {
    color: #9aa3af;
}
body.dark-mode-active .veh-fav-value {
    color: #e8ddd6;
}

.authenticator-setup-key code {
    color: #842029;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

body.dark-mode-active .authenticator-setup-key {
    background-color: #343a40;
    border-color: #6c757d;
}

body.dark-mode-active .authenticator-setup-key code {
    color: #ffffff;
}

/* Two-factor authentication */
.two-factor-card {
    border: 0;
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(31, 45, 61, 0.08);
    overflow: hidden;
}

.two-factor-card .card-body {
    padding: 30px;
}

.two-factor-status {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 22px;
    border-bottom: 1px solid #e9ecef;
}

.two-factor-status-dot {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(255, 193, 7, 0.16);
}

.two-factor-status-dot.is-enabled {
    background: #198754;
    box-shadow: 0 0 0 4px rgba(25, 135, 84, 0.16);
}

.two-factor-status-dot.is-disabled {
    background: #ffc107;
}

.two-factor-status-title {
    margin: 0;
    color: #212529;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.45;
}

.two-factor-recovery-count {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 24px;
    padding: 16px 18px;
    border-radius: 12px;
    background: rgba(13, 110, 253, 0.08);
    color: #495057;
}

.two-factor-recovery-count span {
    font-size: 0.95rem;
    line-height: 1.4;
}

.two-factor-recovery-count strong {
    color: #0d6efd;
    font-size: 1.6rem;
    line-height: 1;
}

.two-factor-admin-note {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 22px;
    padding: 14px 16px;
    border-radius: 10px;
    background: rgba(13, 202, 240, 0.1);
    color: #0a5868;
    font-size: 0.9rem;
    line-height: 1.45;
}

.two-factor-admin-note ion-icon {
    flex: 0 0 auto;
    font-size: 20px;
}

.two-factor-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 26px;
}

.two-factor-actions form,
.two-factor-action-item {
    display: block;
    width: 100%;
    margin: 0;
}

.two-factor-actions > .two-factor-action-item > .two-factor-action {
    display: flex !important;
    visibility: visible;
    opacity: 1;
}

.two-factor-actions > .two-factor-action-item:first-child > .two-factor-action {
    border-color: #0d6efd !important;
    color: #0d6efd !important;
}

.two-factor-actions > .two-factor-action-item:nth-child(2) > .two-factor-action {
    border-color: #b58105 !important;
    color: #8a6200 !important;
}

.two-factor-action,
.two-factor-primary-action {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 56px;
    gap: 14px;
    padding: 12px 16px;
    border: 1px solid #e1e5ea;
    border-radius: 12px;
    background: #fff;
    color: #343a40;
    text-align: left;
    box-shadow: none;
}

.two-factor-action:hover,
.two-factor-action:focus {
    background: #f8f9fa;
    color: #0d6efd;
    border-color: #cbd3da;
}

.two-factor-action ion-icon,
.two-factor-primary-action ion-icon {
    flex: 0 0 auto;
    font-size: 21px;
}

.two-factor-action span {
    flex: 1 1 auto;
}

.two-factor-action .two-factor-action-end {
    color: #adb5bd;
    font-size: 17px;
}

.two-factor-action-warning {
    color: #8a6200;
}

.two-factor-action-danger {
    color: #b02a37;
}

.two-factor-primary-action {
    justify-content: center;
    margin-top: 26px;
    border-color: transparent;
    background: #0d6efd;
    color: #fff;
    text-align: center;
}

body.dark-mode-active .two-factor-card {
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.24);
}

body.dark-mode-active .two-factor-status {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode-active .two-factor-status-title {
    color: #f8f9fa;
}

body.dark-mode-active .two-factor-recovery-count {
    background: rgba(88, 166, 255, 0.14);
    color: #c9d1d9;
}

body.dark-mode-active .two-factor-recovery-count strong {
    color: #79b8ff;
}

body.dark-mode-active .two-factor-admin-note {
    background: rgba(13, 202, 240, 0.12);
    color: #9eeaf9;
}

body.dark-mode-active .two-factor-action {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: #e9ecef;
}

body.dark-mode-active .two-factor-action:hover,
body.dark-mode-active .two-factor-action:focus {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.08);
    color: #79b8ff;
}

body.dark-mode-active .two-factor-actions > .two-factor-action-item:first-child > .two-factor-action {
    border-color: #79b8ff !important;
    color: #79b8ff !important;
}

body.dark-mode-active .two-factor-actions > .two-factor-action-item:nth-child(2) > .two-factor-action,
body.dark-mode-active .two-factor-action-warning {
    border-color: #ffd666 !important;
    color: #ffd666 !important;
}

body.dark-mode-active .two-factor-action-danger {
    color: #ff8f9a;
}

body.workspace-crash .two-factor-recovery-count {
    background: var(--workspace-primary-soft);
}

body.workspace-crash .two-factor-recovery-count strong,
body.workspace-crash .two-factor-action:hover,
body.workspace-crash .two-factor-action:focus,
body.workspace-crash .two-factor-actions > .two-factor-action-item:first-child > .two-factor-action {
    color: var(--workspace-primary) !important;
}

body.workspace-crash .two-factor-actions > .two-factor-action-item:first-child > .two-factor-action {
    border-color: var(--workspace-primary) !important;
}

body.workspace-crash .two-factor-primary-action {
    background: var(--workspace-primary);
}

body.dark-mode-active.workspace-crash .two-factor-recovery-count {
    background: rgba(198, 40, 40, 0.18);
}

body.dark-mode-active.workspace-crash .two-factor-recovery-count strong,
body.dark-mode-active.workspace-crash .two-factor-action:hover,
body.dark-mode-active.workspace-crash .two-factor-action:focus,
body.dark-mode-active.workspace-crash .two-factor-actions > .two-factor-action-item:first-child > .two-factor-action {
    color: #ff8a80 !important;
}

body.dark-mode-active.workspace-crash .two-factor-actions > .two-factor-action-item:first-child > .two-factor-action {
    border-color: #ff8a80 !important;
}

/* Recovery codes */
.recovery-codes-card {
    border: 0;
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(31, 45, 61, 0.08);
    overflow: hidden;
}

.recovery-codes-card .card-body {
    padding: 28px;
}

.recovery-codes-warning {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 15px 16px;
    border-radius: 12px;
    background: rgba(255, 193, 7, 0.13);
    color: #664d03;
    line-height: 1.45;
}

.recovery-codes-warning ion-icon {
    flex: 0 0 auto;
    margin-top: 1px;
    font-size: 23px;
}

.recovery-codes-warning strong,
.recovery-codes-warning span {
    display: block;
}

.recovery-codes-warning span {
    margin-top: 3px;
    font-size: 0.88rem;
}

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

.recovery-code {
    display: block;
    padding: 12px 10px;
    border: 1px solid #dfe3e7;
    border-radius: 10px;
    background: #f8f9fa;
    color: #212529;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-align: center;
    user-select: all;
}

.recovery-codes-export {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 22px;
}

.recovery-codes-export .btn,
.recovery-codes-continue {
    gap: 8px;
    min-height: 48px;
}

.recovery-codes-export .btn:last-child {
    grid-column: 1 / -1;
}

.recovery-codes-hint {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 14px 2px 0;
    color: #6c757d;
    font-size: 0.8rem;
    line-height: 1.4;
}

.recovery-codes-hint ion-icon {
    flex: 0 0 auto;
    margin-top: 1px;
    font-size: 17px;
}

.recovery-codes-continue {
    margin-top: 24px;
}

body.dark-mode-active .recovery-codes-card {
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.24);
}

body.dark-mode-active .recovery-codes-warning {
    background: rgba(255, 193, 7, 0.13);
    color: #ffe69c;
}

body.dark-mode-active .recovery-code {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

body.dark-mode-active .recovery-codes-hint {
    color: #adb5bd;
}

@media (max-width: 575.98px) {
    .two-factor-card .card-body {
        padding: 22px 18px;
    }

    .two-factor-status {
        align-items: flex-start;
        padding-bottom: 18px;
    }

    .two-factor-recovery-count {
        margin-top: 20px;
        padding: 14px;
    }

    .two-factor-actions {
        margin-top: 22px;
    }

    .recovery-codes-card .card-body {
        padding: 20px 16px;
    }

    .recovery-codes-grid,
    .recovery-codes-export {
        grid-template-columns: 1fr;
    }
}
/* Crash case list */
.crash-case-card { border-radius: 16px; overflow: hidden; }
.crash-case-make { width: 40px; height: 40px; padding: 4px; background: rgba(0, 0, 0, .04); }
.crash-case-make img { max-width: 32px; max-height: 32px; object-fit: contain; }
.crash-case-eyebrow { font-size: .8rem; letter-spacing: .07em; }
.crash-case-inline-icon { vertical-align: -2px; }
.crash-case-meta { font-size: .85rem; }
.crash-case-actions { z-index: 2; }
.crash-case-empty-icon { font-size: 64px; }