.navbar {
  background-color: white;
}

:root {
    --bs-link-color: #204F96;
    --bs-link-hover-color: #5F8EB5;
}

.btn-primary {
    color: #fff;
    background-color: #204F96;
    border-color: #204F96;
    box-shadow: 0 0.125rem 0.25rem 0 rgb(33 79 150 / 31%);
}

.btn-primary:hover {
    color: #fff !important;
    background-color: #5F8EB5 !important;
    border-color: #5F8EB5 !important;
    transform: translateY(-1px) !important;
    cursor: pointer;
}

.bg-menu-theme .menu-inner > .menu-item.active > .menu-link {
    color: #204F96;
    background-color: rgb(130 210 195 / 41%) !important;
}

.bg-menu-theme .menu-inner > .menu-item.active:before {
    background: #204F96;
}

.app-brand .layout-menu-toggle {
    background-color: #204F96;
    border: 7px solid #f5f5f9;
}

a {
    color: #204F96;
}

.bg-label-primary {
    background-color: rgb(130 210 195 / 41%) !important;
    color: #204F96 !important;
}

.text-bg-primary {
    color: #fff !important;
    background-color: #204F96 !important;
}

.input-group:focus-within .form-control, .input-group:focus-within .input-group-text {
    border-color: #204F96;
}

.btn-link {
    --bs-btn-font-weight: 400;
    --bs-btn-color: var(--bs-link-color);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--bs-link-hover-color);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--bs-link-hover-color);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: rgba(67, 89, 113, 0.6);
    --bs-btn-disabled-border-color: transparent;
    --bs-btn-box-shadow: none;
    --bs-btn-focus-shadow-rgb: rgb(33 79 150 / 31%);
    text-decoration: none;
}

.form-control:focus, .form-select:focus {
    border-color: #204F96;
}

.form-check-input:checked, .form-check-input[type=checkbox]:indeterminate {
    background-color: #204F96;
    border-color: #204F96;
    box-shadow: 0 0.125rem 0.25rem 0 rgb(33 79 150 / 31%);
}

.switch-input:checked ~ .switch-toggle-slider {
    background: #204F96;
    color: #fff;
}

.switch-input:checked ~ .switch-toggle-slider {
    background: #204F96;
    color: #fff;
}

.bg-green-solvd {
    background-color: rgb(130 210 195 / 41%) !important;
}

.btn-check:checked + .btn-primary, .btn-check:active + .btn-primary, .btn-primary:active, .btn-primary.active, .btn-primary.show.dropdown-toggle, .show > .btn-primary.dropdown-toggle {
    color: #fff !important;
    background-color: #204F96 !important;
    border-color: #204F96 !important;
}

.btn-primary:disabled {
    color: #fff !important;
    background-color: #dddddd !important;
    border-color: #dddddd !important;
    box-shadow: none !important;
}

.country-flag-language {
    border: 1px solid #204F96;
    border-radius: 2px;
}

.nav-pills .nav-link.active, .nav-pills .nav-link.active:hover, .nav-pills .nav-link.active:focus {
  background-color: #204F96;
  color: #fff;
  box-shadow: 0 2px 4px 0 rgba(105, 108, 255, 0.4);
}

/* =========================================================
   GlassCheck — Responsive (tablette/mobile) helpers
   Toutes les règles ci-dessous sont scoppées à <md/<lg ;
   le rendu desktop reste inchangé.
   ========================================================= */

/* SVG véhicule : laisser le container piloter la largeur sur mobile */
@media (max-width: 991.98px) {
    .svg-container svg {
        min-width: 100% !important;
        max-width: 100%;
        height: auto;
    }
}

/* Dropdowns rétroviseurs sur le SVG : masqués en <md, le burger menu de
   sélection des pièces reste accessible (icône fa-bars). */
@media (max-width: 767.98px) {
    #rear-mirror-dropdown-right,
    #rear-mirror-dropdown-left,
    #rear-mirror-dropdown-right-menu,
    #rear-mirror-dropdown-left-menu {
        display: none !important;
    }
}

/* Icône "clear" du champ VIN : sur DESKTOP on reproduit le rendu d'origine
   (offset px fixe), sur mobile on bascule en em + centrage vertical pour ne
   plus glisser hors champ sur les petits viewports. */
.glass-vin-input-wrapper {
    position: relative;
}
.glass-vin-input-wrapper #clear-immat-vin-input {
    position: absolute;
    right: 55px;
    top: 8px;
    cursor: pointer;
    z-index: 1000;
}
@media (max-width: 767.98px) {
    .glass-vin-input-wrapper .form-control {
        padding-right: 2.5rem; /* place pour l'icône clear */
    }
    .glass-vin-input-wrapper #clear-immat-vin-input {
        right: 3.25rem;
        top: 50%;
        transform: translateY(-50%);
        z-index: 5;
        line-height: 1;
    }
}

/* Cards info véhicule / sghost : retirer le min-height fixe sur mobile
   (laisse le contenu décider de la hauteur, évite les vides). */
@media (max-width: 767.98px) {
    .vindecode-card .card-body,
    .glassdecode-card .card-body,
    .sghost-card .card-body,
    .srate-card .card-body {
        min-height: auto !important;
    }
}

/* Liste des VIN exemples : sur mobile (<md), chaque libellé long (jusqu'à
   130 chars : "VIN : Marque + équipements") déborderait d'un chip compact.
   On bascule donc en liste verticale d'items cliquables (pattern selectable
   list, touch-friendly). Sur desktop, on conserve le rendu d'origine (ul/li
   puces classiques + hover underline). */
@media (max-width: 767.98px) {
    .vin-exemple {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.375rem;
        padding-left: 0;
        list-style: none;
        margin: 0.5rem 0 0.75rem;
        max-width: 100%;
    }
    .vin-exemple li {
        margin: 0;
        min-width: 0;
    }
    .vin-exemple li::before {
        content: none;
    }
    .vin-exemple li span {
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;
        width: 100%;
        min-height: 36px;
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
        font-weight: 500;
        color: #204F96;
        background-color: rgba(130, 210, 195, 0.14);
        border: 1px solid rgba(32, 79, 150, 0.18);
        border-radius: 0.5rem;
        cursor: pointer;
        transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
        line-height: 1.35;
        word-break: break-word;
        overflow-wrap: anywhere;
        text-align: left;
        box-sizing: border-box;
    }
    .vin-exemple li span::before {
        content: "\f061"; /* fa-solid arrow-right */
        font-family: "Font Awesome 6 Free", "FontAwesome", sans-serif;
        font-weight: 900;
        font-size: 0.75rem;
        color: #5F8EB5;
        flex-shrink: 0;
        margin-top: 0.15rem;
    }
    .vin-exemple li span:hover {
        background-color: rgba(130, 210, 195, 0.28);
        border-color: rgba(32, 79, 150, 0.35);
        color: #204F96;
        text-decoration: none;
    }
    .vin-exemple li span:active {
        background-color: #204F96;
        border-color: #204F96;
        color: #fff;
        transform: scale(0.99);
    }
    .vin-exemple li span:active::before {
        color: #fff;
    }
}

/* Onglets scrollables horizontalement sur mobile (pattern Material).
   Sur desktop, le comportement Bootstrap d'origine (wrap) est conservé.
   Le défilement vers l'onglet actif est géré en JS (auto-scroll au shown.bs.tab). */
@media (max-width: 991.98px) {
    .nav-tabs-glass {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        scroll-snap-type: x proximity;
        scroll-padding-inline: 1rem;
        scrollbar-width: none; /* Firefox */
        /* Edge fade pour indiquer qu'on peut scroller. Le mask laisse les
           bords gauche/droit légèrement estompés sur ~1.25rem. */
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 1.25rem, #000 calc(100% - 1.25rem), transparent 100%);
                mask-image: linear-gradient(to right, transparent 0, #000 1.25rem, #000 calc(100% - 1.25rem), transparent 100%);
    }
    .nav-tabs-glass::-webkit-scrollbar {
        display: none; /* Safari/Chrome */
    }
    .nav-tabs-glass .nav-item {
        flex: 0 0 auto;
        scroll-snap-align: center;
    }
    .nav-tabs-glass .nav-link {
        white-space: nowrap;
    }
}

/* Label de l'onglet "Dossier" : tronqué sur mobile pour éviter qu'un long
   immat + marque + modèle ne pousse l'onglet hors écran. */
@media (max-width: 575.98px) {
    #tab-dossier-label {
        display: inline-block;
        max-width: 11rem;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: bottom;
        white-space: nowrap;
    }
}

/* Boutons d'action dans la liste des pièces : sur mobile, augmenter la
   colonne et donner un tap-target lisible (~32px). Les icônes restent
   visuellement identiques sur desktop. */
@media (max-width: 991.98px) {
    .part-actions-col {
        flex: 0 0 auto;
        width: 16.66667%; /* col-2 */
    }
    .part-actions-col .fa-solid,
    .part-actions-col .fa {
        display: inline-block;
        padding: 0.375rem;
        min-width: 2rem;
        text-align: center;
    }
}

/* Modaux trop larges : sur tablette/mobile, basculer en plein écran pour
   éviter qu'un modal-xl déborde du viewport. */
@media (max-width: 991.98px) {
    .modal-fullscreen-lg-down .modal-dialog {
        max-width: none;
        width: 100%;
        height: 100%;
        margin: 0;
    }
    .modal-fullscreen-lg-down .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0;
    }
    .modal-fullscreen-lg-down .modal-body {
        overflow-y: auto;
    }
}

/* Pagination KNP de la liste des derniers calculs : scroll horizontal
   sur mobile uniquement (scoppé pour ne pas affecter les autres .navigation
   ailleurs dans le projet). */
@media (max-width: 767.98px) {
    #last-estimates-div .navigation {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}