/* ============================================================================
 * vd-quick-modal.css — Araclarim Islemler menusu hizli modal tasarimi.
 * Kapsam: _MaintenanceModal, _CostModal, _FuelEntryModal, _InsuranceModal, _InspectionModal.
 * Hedef: Modern Bakim ekranina (referans tasarim) uygun temiz layout + drag&drop file area.
 * ============================================================================ */

.vd-quick-modal .modal-title {
    font-size: 1.05rem;
    font-weight: 600;
}
.vd-quick-modal .modal-title .vd-q-sep {
    margin: 0 .35rem;
    color: #94a3b8;
    font-weight: 700;
}
.vd-quick-modal .modal-title .vd-q-plate {
    color: #2563eb;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* Form alanlari — referans tasarim daha hava boslukli */
.vd-quick-modal .modal-body { padding: 1.25rem 1.5rem; }
.vd-quick-modal label.vd-q-label {
    display: block;
    font-size: .85rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: .35rem;
}
.vd-quick-modal label.vd-q-label .text-danger { font-weight: 700; }
.vd-quick-modal label.vd-q-label small.vd-q-opt {
    font-weight: 400;
    color: #94a3b8;
    margin-left: .15rem;
}
.vd-quick-modal .form-control,
.vd-quick-modal .form-select {
    border-radius: .5rem;
    border-color: #e2e8f0;
    font-size: .9rem;
    padding: .5rem .75rem;
}
.vd-quick-modal .form-control:focus,
.vd-quick-modal .form-select:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 .15rem rgba(37, 99, 235, .12);
}
.vd-quick-modal textarea.form-control { resize: vertical; min-height: 5.5rem; }
/* Satir/bolme "Aciklama" textarea'lari (form-floating disindaki kucuk hucreler):
   ana "Aciklama" 5.5rem (form-floating) tam kalir; bunlar 2 SATIR yeterli.
   Suffix selektoru calisir cunki desc sinifi DAIMA son sinif:
   "form-control form-control-sm <pref>-row-desc|-split-desc". */
.vd-quick-modal textarea[class$="-row-desc"],
.vd-quick-modal textarea[class$="-split-desc"] { min-height: 3.25rem; }

/* "Faturayi araclara bol": cok arac secilince (70+) cip kutusu + satirlar modali
   sonsuz uzatmasin — her ikisine de ic-scroll cap. Ozet (Dagitilan/Kalan) satir
   alaninin ALTINDA oldugundan her zaman gorunur kalir. */
.split-veh-sel .select2-selection--multiple { max-height: 7rem; overflow-y: auto; }
#maint-split-rows, #exp-split-rows, #fe-split-rows { max-height: 40vh; overflow-y: auto; }

/* Hizli "+" butonu (cari/poliçe tipi ekleme) */
.vd-quick-modal .vd-q-addon {
    border-radius: .5rem;
    border: 1px solid #d1fae5;
    background: #f0fdf4;
    color: #16a34a;
    padding: .5rem .75rem;
}
.vd-quick-modal .vd-q-addon:hover { background: #dcfce7; border-color: #86efac; }

/* Tarih input'unun yaninda takvim icon button */
.vd-quick-modal .vd-q-date-wrap { position: relative; }
.vd-quick-modal .vd-q-date-wrap .vd-q-date-ico {
    position: absolute; right: .65rem; top: 50%; transform: translateY(-50%);
    color: #64748b; cursor: pointer;
}

/* Drag & drop file area */
.vd-q-dropzone {
    border: 1.5px dashed #cbd5e1;
    border-radius: .65rem;
    padding: 1.5rem 1rem;
    text-align: center;
    color: #64748b;
    background: #f8fafc;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.vd-q-dropzone:hover,
.vd-q-dropzone.is-dragover {
    background: #eff6ff;
    border-color: #2563eb;
    color: #2563eb;
}
.vd-q-dropzone i.vd-q-cloud {
    font-size: 1.5rem;
    display: block;
    margin-bottom: .4rem;
    color: #94a3b8;
}
.vd-q-dropzone.is-dragover i.vd-q-cloud { color: #2563eb; }
.vd-q-dropzone .vd-q-dz-main { font-weight: 600; }
.vd-q-dropzone .vd-q-dz-main strong { color: #1e293b; }
.vd-q-dropzone.is-dragover .vd-q-dz-main strong { color: #2563eb; }
.vd-q-dropzone .vd-q-dz-sub { font-size: .8rem; color: #94a3b8; margin-top: .15rem; }
.vd-q-dropzone .vd-q-dz-file {
    margin-top: .6rem; font-size: .85rem; color: #0f766e; font-weight: 600;
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: .1rem .35rem; max-width: 100%;
}
.vd-q-dropzone .vd-q-dz-file:empty { display: none; }
/* Uzun dosya adi kutudan/ekrandan tasmasin — tek satir + ellipsis (tam adi title'da). */
.vd-q-dropzone .vd-q-dz-name {
    display: inline-block; max-width: 150px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    vertical-align: bottom;
}
.vd-q-dropzone input[type="file"] { display: none; }

/* Kompakt (tek satır) dropzone varyantı — opt-in .vd-q-dz-compact (ilk kullanım: muayene
   modalı, 05-08-2026). Aynı işlev (tıkla/sürükle), dikeyde ~3 satır yerine tek satır. */
.vd-q-dropzone.vd-q-dz-compact {
    display: flex; align-items: center; gap: .6rem;
    padding: .55rem .9rem; text-align: left;
}
.vd-q-dropzone.vd-q-dz-compact i.vd-q-cloud { display: inline-block; margin-bottom: 0; font-size: 1.15rem; }
.vd-q-dropzone.vd-q-dz-compact .vd-q-dz-sub {
    margin-top: 0; margin-left: auto;
    /* Dar kolonda (md-5) tasmasin — tek satir + ellipsis */
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vd-q-dropzone.vd-q-dz-compact .vd-q-dz-file { margin-top: 0; }
/* Dar ekranda sağdaki ipucu satırı gizlenir — ana metin yeterli. */
@media (max-width: 575.98px) {
    .vd-q-dropzone.vd-q-dz-compact .vd-q-dz-sub { display: none; }
}

/* ===== FileUpload komponenti (file-upload.js) — mevcut + pending dosyalar ===== */
.vd-fileupload .fu-existing:not(:empty) { margin-bottom: .4rem; }
.vd-fileupload .fu-file {
    display: flex; align-items: center; gap: .25rem;
    padding: .25rem .5rem; border: 1px solid #e2e8f0; border-radius: .35rem;
    background: #f8fafc; margin-bottom: .25rem; font-size: .85rem;
}
.vd-fileupload .fu-file-name { color: #0f766e; font-weight: 600; }
.vd-fileupload .fu-pending:not(:empty) { margin-bottom: .4rem; display: flex; flex-wrap: wrap; gap: .35rem; }
.vd-fileupload .fu-chip {
    display: inline-flex; align-items: center; gap: .15rem;
    background: #e0edff; color: #1d4ed8; border: 1px solid #bfdbfe;
    padding: .1rem .5rem; border-radius: 999px; font-size: .78rem;
}
.vd-fileupload .fu-chip small { opacity: .8; }
.vd-fileupload .fu-chip-x { cursor: pointer; font-weight: 700; margin-left: .25rem; opacity: .8; }
.vd-fileupload .fu-chip-x:hover { opacity: 1; }
.vd-fileupload .fu-dz { padding: 1rem; }

/* Son N kayit tablosu */
.vd-quick-modal .vd-q-recent-title {
    color: #475569;
    font-size: .85rem;
    font-weight: 600;
    margin-bottom: .5rem;
}
.vd-quick-modal .vd-q-recent table {
    font-size: .85rem;
}
.vd-quick-modal .vd-q-recent thead tr {
    background: #f1f5f9;
}
.vd-quick-modal .vd-q-recent thead td {
    color: #475569;
    font-weight: 600;
    padding: .5rem .75rem;
}
.vd-quick-modal .vd-q-recent tbody td { padding: .5rem .75rem; }

/* Footer — Vazgec/Kaydet */
.vd-quick-modal .modal-footer { padding: 1rem 1.5rem; border-top: 1px solid #f1f5f9; }
.vd-quick-modal .modal-footer .btn {
    border-radius: .5rem;
    padding: .55rem 1.2rem;
    font-weight: 500;
}
.vd-quick-modal .modal-footer .btn-secondary {
    background: #f1f5f9; color: #475569; border-color: #e2e8f0;
}
.vd-quick-modal .modal-footer .btn-secondary:hover { background: #e2e8f0; }
.vd-quick-modal .modal-footer .btn-primary { background: #2563eb; border-color: #2563eb; }

/* Dark mode uyum */
[data-bs-theme="dark"] .vd-quick-modal .form-control,
[data-bs-theme="dark"] .vd-quick-modal .form-select {
    border-color: #334155; background: #1e293b; color: #e2e8f0;
}
[data-bs-theme="dark"] .vd-quick-modal label.vd-q-label { color: #cbd5e1; }
[data-bs-theme="dark"] .vd-q-dropzone {
    background: #1e293b; border-color: #334155; color: #94a3b8;
}
[data-bs-theme="dark"] .vd-q-dropzone:hover,
[data-bs-theme="dark"] .vd-q-dropzone.is-dragover {
    background: #1e3a8a; border-color: #3b82f6;
}
[data-bs-theme="dark"] .vd-quick-modal .vd-q-recent thead tr { background: #1e293b; }
[data-bs-theme="dark"] .vd-quick-modal .modal-footer { border-top-color: #334155; }

/* ============================================================================
   06-08-2026 — KOMPAKT FORM SATIRI (kullanici karari: varyant C)
   Sikayet: 5 hizli/toplu modalda satirlar cok yuksek ve alanlar gereksiz genis.
   Cozum iki parcali: (1) burasi — alan yuksekligi 58px -> ~48px; (2) cshtml'de
   kolonlar icerigin gercek uzunluguna gore (Tarih/Tutar dar) -> 3 satir 2 satira.
   FORM-FLOATING KORUNUR — hicbir alan klasik label'a cevrilmedi.
   Recete UYDURULMADI: #app-modal / .veh-modal (Arac modali, vehicle-modal.css:191)
   kurallarinin birebir esidir; boylece arac modali ile hizli modallar ayni olcude.
   ============================================================================ */
.vd-quick-modal .form-floating > .form-control,
.vd-quick-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;
}
.vd-quick-modal .form-floating > .form-control:focus ~ label,
.vd-quick-modal .form-floating > .form-control:not(:placeholder-shown) ~ label,
.vd-quick-modal .form-floating > .form-select ~ label {
    opacity: .75;
    transform: scale(.78) translateY(-.5rem) translateX(.15rem);
}
.vd-quick-modal .form-floating > label {
    padding: .65rem .75rem;
    font-size: .85rem;
    color: #6c757d;
}
/* Aciklama alanlari: inline height="70px" KALDIRILDI (cshtml), yukseklik burada. */
.vd-quick-modal .form-floating > textarea.form-control {
    height: auto;
    min-height: calc(2.85rem + 2px);
    padding-top: 1.4rem;
}
/* input-group icindeki floating + takvim/artı butonu ayni yukseklikte kalmali */
.vd-quick-modal .input-group > .form-floating { flex: 1 1 auto; width: 1%; min-width: 0; }
.vd-quick-modal .input-group > .form-floating:not(:last-child) > .form-control,
.vd-quick-modal .input-group > .form-floating:not(:last-child) > .form-select {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.vd-quick-modal .input-group > .form-floating ~ .btn,
.vd-quick-modal .input-group > .form-floating ~ .input-group-text { height: calc(2.85rem + 2px); }
/* TlwSelect (ms-in-floating) kutusu 58px'e sabitli (ui/multi-select.css:193) — hizli
   modalda komsu alanlarla ayni boya insin, yoksa arac/coklu secim tek basina uzun kalir. */
.vd-quick-modal .form-floating > .ms-wrap.ms-in-floating .ms-control {
    min-height: calc(2.85rem + 2px);
    padding-top: 1.15rem;
    padding-bottom: .35rem;
    font-size: .85rem;
}
.vd-quick-modal .form-floating > .ms-wrap.ms-in-floating ~ label {
    transform: scale(.78) translateY(-.5rem) translateX(.15rem);
}
/* ============================================================================
   06-08-2026 (2. tur, kullanici geri bildirimi) — ICERIK KADAR GENISLIK
   "Tarihe 10/10/2026 yaziyorum, alan bunun 3 misli yer tutuyor; tutar da oyle.
    Aciklama 2 satir olsun ama genisligi esnesin, dosya alani kalani doldursun."
   12'lik grid bu is icin cok kaba (1 kolon ~95px). Cozum: sabit-genislikli
   yardimci siniflar + esneyen alanlar. YALNIZ >=lg'de gecerli; altinda mevcut
   col-md-* davranisi aynen kalir (tablet/mobilde alt alta iner).
   Kural: dar alanlar (tarih/tutar/km/litre) SABIT, uzun icerikliler (cari/aciklama)
   ESNEK. Boylece arac gizlense de (kilitli mod) satirda delik kalmaz.
   ============================================================================ */
@media (min-width: 992px) {
    .vd-quick-modal .row > .vq-plate { flex: 0 0 auto; width: 205px; }   /* 34 ABC 123 — model */
    .vd-quick-modal .row > .vq-date { flex: 0 0 auto; width: 158px; }    /* 10-10-2026 + takvim ikonu */
    .vd-quick-modal .row > .vq-money { flex: 0 0 auto; width: 142px; }   /* 12.480,00 */
    .vd-quick-modal .row > .vq-num { flex: 0 0 auto; width: 132px; }     /* km / litre */
    .vd-quick-modal .row > .vq-doc { flex: 0 0 auto; width: 195px; }     /* belge / policy no */
    .vd-quick-modal .row > .vq-pick { flex: 0 0 auto; width: 190px; }    /* kisa select (tur/plan) */
    .vd-quick-modal .row > .vq-grow { flex: 1 1 250px; min-width: 230px; }        /* cari/acente */
    .vd-quick-modal .row > .vq-grow-wide { flex: 1 1 420px; min-width: 330px; }   /* aciklama */
    .vd-quick-modal .row > .vq-fill { flex: 1 1 270px; min-width: 250px; }        /* dosya alani */
}
/* Ayrilmamasi gereken alan CIFTI (ilk kullanim: Police No + Tutar). Grid'de iki ayri
   kolon olduklarinda genis ekranda satir sonuna denk gelip birbirinden kopuyorlardi;
   sarmalayici sayesinde HER ZAMAN birlikte kiriliyorlar. */
.vd-quick-modal .vq-pair { display: flex; gap: .5rem; flex-wrap: wrap; }
.vd-quick-modal .vq-pair > * { flex: 1 1 150px; }
@media (min-width: 992px) {
    /* width:auto SART — sarmalayicidaki col-md-6 (%50) yoksa devrede kalir, cift satiri
       doldurur ve Aciklama alt satira duser (06-08-2026 kullanici bildirimi). */
    .vd-quick-modal .row > .vq-pair { flex: 0 0 auto; width: auto; flex-wrap: nowrap; }
    .vd-quick-modal .vq-pair > .vq-doc { flex: 0 0 auto; width: 195px; }
    .vd-quick-modal .vq-pair > .vq-money { flex: 0 0 auto; width: 142px; }
}
/* Sigorta dosya satiri: sag yaridaki [dosya paneli] + [Listeye Ekle] ikilisi. Yukseklik
   dropzone ile ayni (68px) => ust kenarlar hizali, buton panele gore dikey ortali. */
.ins-file-row { min-height: 68px; }
/* Sigorta dosya panelinin BOS durumu — dropzone'un yanindaki sag yari (06-08-2026) */
.ins-file-empty {
    display: flex;
    align-items: center;
    min-height: 68px;
    padding: 0 .9rem;
    border: 1px solid #e2e8f0;
    border-radius: .5rem;
    background: #fafbfc;
    color: #64748b;
    font-size: .82rem;
}
[data-theme="dark"] .ins-file-empty,
[data-bs-theme="dark"] .ins-file-empty { background: #0f172a; border-color: #1e293b; color: #94a3b8; }

/* Aciklama TAM 2 SATIR (kullanici karari) — dosya alani da ayni boyda hizalanir. */
.vd-quick-modal .form-floating > textarea.form-control { min-height: 68px; }
.vd-quick-modal .vd-q-dropzone.vd-q-dz-compact { min-height: 68px; padding: .45rem .9rem; }