/* Arac kaydetme modalinin yeni tasarimi icin yardimci stiller. */
#app-modal .vm-header {
    background: #fff;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    align-items: center;
    gap: .75rem;
}

#app-modal .vm-header .vm-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #eaf1ff;
    color: #0d6efd;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

#app-modal .vm-header h4 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
}

#app-modal .vm-header .vm-subtitle {
    color: #6c757d;
    font-size: .82rem;
    margin: 0;
}

#app-modal .vm-help-toggle {
    margin-left: auto;
    color: #0d6efd;
    background: transparent;
    border: 0;
    font-size: .9rem;
    text-decoration: none;
    white-space: nowrap;
}

#app-modal .vm-help-toggle:hover {
    text-decoration: underline;
}

#app-modal .vm-body {
    background: #f7f8fa;
    padding: .9rem 1rem;
    max-height: calc(100vh - 180px);
    /* overflow-y: auto — eski "visible" ikinci .vm-side eklendiginde modal'in
       DISINA tasiyordu (foto kartinin govdesi modal-footer'in altinda goruluyordu).
       Auto ile body kendi icinde scroll olur, modal sinirlari korunur. */
    overflow-y: auto;
    overflow-x: hidden;
}

#app-modal .vm-card {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: .5rem;
    padding: .75rem .9rem .85rem;
    margin-bottom: .75rem;
}

#app-modal .vm-card-title {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-weight: 700;
    color: #212529;
    font-size: .9rem;
    margin: 0 0 .65rem 0;
}

#app-modal .vm-card-title .vm-bullet {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #eaf1ff;
    color: #0d6efd;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .65rem;
    font-weight: 700;
}

#app-modal .vm-label {
    font-size: .8rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: .25rem;
    display: block;
}

#app-modal .vm-side {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: .5rem;
    padding: .75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .65rem;
    height: 100%;
}

#app-modal .vm-side .vm-side-icon {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: #eaf1ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#app-modal .vm-side .vm-side-icon img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
}

#app-modal .vm-dropzone {
    width: 100%;
    border: 1.5px dashed #c9d3e1;
    border-radius: .5rem;
    padding: .75rem .5rem;
    text-align: center;
    color: #6c757d;
    font-size: .75rem;
    line-height: 1.25;
    cursor: pointer;
    background: #fafbfd;
    transition: background .15s, border-color .15s;
}

#app-modal .vm-dropzone:hover,
#app-modal .vm-dropzone.is-drag {
    background: #eaf1ff;
    border-color: #0d6efd;
    color: #0d6efd;
}

#app-modal .vm-side-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
    width: 100%;
}

#app-modal .vm-side-actions .btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    padding: .5rem .25rem;
    font-size: .7rem;
    font-weight: 600;
}

#app-modal .vm-side-actions .btn i {
    font-size: 1rem;
}

#app-modal .modal-footer {
    background: #fff;
    padding: .75rem 1.25rem;
    border-top: 1px solid #e9ecef;
}

#app-modal .vm-footer-row {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: .75rem;
    width: 100%;
}

@media (max-width: 575.98px) {
    #app-modal .vm-footer-row {
        grid-template-columns: 1fr;
    }
}

/* Floating label kompakt boyut */
#app-modal .form-floating > .form-control,
#app-modal .form-floating > .form-select {
    height: calc(2.85rem + 2px);
    min-height: calc(2.85rem + 2px);
    padding-top: 1.15rem;
    padding-bottom: .35rem;
    font-size: .85rem;
}

#app-modal .form-floating > .form-control:focus ~ label,
#app-modal .form-floating > .form-control:not(:placeholder-shown) ~ label,
#app-modal .form-floating > .form-select ~ label {
    opacity: .75;
    transform: scale(.78) translateY(-.5rem) translateX(.15rem);
}

#app-modal .form-floating > label {
    padding: .65rem .75rem;
    font-size: .85rem;
    color: #6c757d;
}

#app-modal .form-floating > textarea.form-control {
    height: auto;
    min-height: 80px;
    padding-top: 1.4rem;
}

/* input-group icinde form-floating: select + buton yan yana hizali kalmali */
#app-modal .input-group > .form-floating {
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}

#app-modal .input-group > .form-floating:not(:last-child) > .form-control,
#app-modal .input-group > .form-floating:not(:last-child) > .form-select {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

#app-modal .input-group > .form-floating ~ .btn,
#app-modal .input-group > .form-floating ~ .input-group-text {
    height: calc(2.85rem + 2px);
}

/* ============================================================================
   VEH-MODAL (Araç Düzenle/Yeni) floating-label sistemi
   #app-modal'daki ile ayni stil — yeni cshtml tasarimi (form-floating pattern)
   icin .veh-modal scope'unda paralel kurallar.
   Select2 kullanan dropdown'larda (brand/model/capacity/fuel) ek hizalama icin
   .select2-container hedeflenir — select2 orijinal <select>'i gizler, label
   referansi gizlenmis select'e oldugu icin floating animasyonu tetiklemez:
   bu yuzden select2'li form-floating'larda label'i KALICI floated tutuyoruz.
   ============================================================================ */

.veh-modal .form-floating > .form-control,
.veh-modal .form-floating > .form-select {
    height: calc(2.85rem + 2px);
    min-height: calc(2.85rem + 2px);
    padding-top: 1.15rem;
    padding-bottom: .35rem;
    font-size: .85rem;
}

.veh-modal .form-floating > .form-control:focus ~ label,
.veh-modal .form-floating > .form-control:not(:placeholder-shown) ~ label,
.veh-modal .form-floating > .form-select ~ label {
    opacity: .75;
    transform: scale(.78) translateY(-.5rem) translateX(.15rem);
}

.veh-modal .form-floating > label {
    padding: .65rem .75rem;
    font-size: .85rem;
    color: #6c757d;
}

.veh-modal .form-floating > textarea.form-control {
    height: auto;
    min-height: 70px;
    padding-top: 1.4rem;
}

/* input-group icinde form-floating: input/select + buton yan yana hizali kalmali */
.veh-modal .input-group > .form-floating {
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}

.veh-modal .input-group > .form-floating:not(:last-child) > .form-control,
.veh-modal .input-group > .form-floating:not(:last-child) > .form-select {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.veh-modal .input-group > .form-floating ~ .btn,
.veh-modal .input-group > .form-floating ~ .input-group-text {
    height: calc(2.85rem + 2px);
}

/* SELECT2 + form-floating uyumu — select2 orijinal <select>'i hidden yapinca
   label floating animasyonu calismaz. Workaround: select2 aktif olunca label'i
   KALICI olarak floated pozisyonda tut. */
.veh-modal .form-floating > .form-select.select2-hidden-accessible ~ label {
    opacity: .75;
    transform: scale(.78) translateY(-.5rem) translateX(.15rem);
    pointer-events: none;
    z-index: 2;
}

/* Select2 container'in ust padding'i: floated label icin yer ac. */
.veh-modal .form-floating > .select2-container--bootstrap-5 .select2-selection {
    height: calc(2.85rem + 2px) !important;
    padding-top: 1.15rem;
    padding-bottom: .35rem;
    font-size: .85rem;
}
.veh-modal .form-floating > .select2-container--bootstrap-5 .select2-selection__rendered {
    padding-top: 0;
    line-height: 1.2;
}

/* ============================================================================
   FATURA BÖLME — çok plaka seçimi (split-vehicles select2-multi):
   - chip font'u küçült (kompakt) → 10+ seçimde ekran daha az dolar.
   - seçili olanları dropdown listesinden GİZLE → yalnız eklenebilirler kalır;
     chip (×) ile silinince select2 aria-selected'ı düşürür → otomatik geri gelir.
   select2 init'inde: containerCssClass:'split-veh-sel', dropdownCssClass:'split-veh-dd'.
   ============================================================================ */
.split-veh-sel .select2-selection--multiple .select2-selection__choice {
    font-size: 11px;
    padding: 1px 6px;
    margin: 2px 4px 2px 0;
    line-height: 1.45;
}
.split-veh-sel .select2-selection--multiple .select2-selection__choice__remove {
    margin-right: 3px;
}
.split-veh-dd .select2-results__option[aria-selected="true"] {
    display: none;
}