/*
 * Tasitlarim2024 utility classes — view'lardan extract edilmis inline
 * style="..." attribute'larinin karsiligi. Yeni view'larda da kullanin;
 * inline style yazmayin.
 */

/* Width — fixed px (siklik sirasi) */
.tw-90       { width: 90px; }
.tw-100      { width: 100px; }
.tw-110      { width: 110px; }
.tw-120      { width: 120px; }
.tw-130      { width: 130px; }
.tw-140      { width: 140px; }
.tw-150      { width: 150px; }
.tw-160      { width: 160px; }
.tw-180      { width: 180px; }
.tw-200      { width: 200px; }
.tw-220      { width: 220px; }
.tw-30       { width: 30px; }
.tw-36       { width: 36px; }
.tw-56       { width: 56px; }
.tw-70       { width: 70px; }
.tw-80       { width: 80px; }
.tw-100p     { width: 100%; }
.tw-30p      { width: 30%; }
.tw-22p      { width: 22%; }
.tw-12p      { width: 12%; }
.tw-4p       { width: 4%; }

/* Width + flex-basis (table colum sabit genislik) */
.tw-100-flex { width: 100px; flex: 0 0 100px; }

/* Max width */
.tmaxw-360   { max-width: 360px; }
.tmaxw-220   { max-width: 220px; min-width: 220px; }

/* Height */
.th-60       { height: 60px; }
.th-80       { height: 80px; }
.th-90       { height: 90px; }
.th-58       { height: 58px; cursor: pointer; }
.th-90vh     { height: 90vh; }

/* Max-height + overflow */
.tmaxh-400-scroll { max-height: 400px; overflow: auto; }
.tmaxh-120-hidden {
    max-height: 120px;
    display: none;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 6px;
    background: #fff;
}

/* Font size */
.tfs-12      { font-size: 12px; }
.tfs-90em    { font-size: .9em; }
.tfs-85rem   { font-size: .85rem; color: var(--muted); }

/* Cursor */
.tcur-pointer { cursor: pointer; }

/* Display */
.td-none     { display: none; }

/* Iframe-style — kenarliksiz, anne kutu boyutunda */
.tframe-fill { border: 0; width: 100%; height: 100%; }

/* Off-screen accessible (autocomplete trap, vb.) */
.toffscreen  {
    position: absolute;
    left: -10000px;
    height: 0;
    width: 0;
    opacity: 0;
}

/* Misc */
.tflex-spread-muted {
    display: flex;
    justify-content: space-between;
    font-size: .85rem;
    color: var(--muted);
}
.tjc-center  { justify-content: center; }
.tcolor-ink  { color: var(--ink); }
.tmin-w-4em-r0 { min-width: 4em; border-radius: 0; }
.toverflow-hidden { overflow: hidden; }
.tbg-pointer { cursor: pointer; }

/* Min-width 220px + 400 max + vertical scroll (dropdown'lar) */
.tmin-220-max-400 {
    min-width: 220px;
    max-height: 400px;
    overflow-y: auto;
}

/* Yuzdesel yukseklik (bar chart) — Main/Index landing page */
.tbar-h-40 { height: 40%; }
.tbar-h-48 { height: 48%; }
.tbar-h-55 { height: 55%; }
.tbar-h-62 { height: 62%; }
.tbar-h-64 { height: 64%; }
.tbar-h-70 { height: 70%; }
.tbar-h-78 { height: 78%; }
.tbar-h-84 { height: 84%; }
.tbar-h-92 { height: 92%; }

/* Scrollable container'lar */
.tmaxh-120-scroll { max-height: 120px; overflow: auto; white-space: pre-wrap; }
.tmaxh-300-scroll { max-height: 300px; overflow: auto; white-space: pre-wrap; }
.tmaxh-380-scroll-bord {
    max-height: 380px; overflow-y: auto;
    border: 1px solid var(--border); border-radius: 6px;
}
.tmaxh-500-scroll-13 { max-height: 500px; overflow-y: auto; font-size: 13px; }
.tmaxh-520-scroll    { max-height: 520px; overflow-y: auto; }
.tmaxh-200-auto      { max-height: 200px; height: auto; width: auto; }
.tmaxh-90-scroll     { max-height: 90px; overflow-y: auto; }

/* Font size scale */
.tfs-75rem { font-size: .75rem; }
.tfs-8rem-tauto { font-size: .8rem; table-layout: auto; }
.tfs-85rem-loose { font-size: 0.85rem; }

/* Borderless button (transparent bg) */
.tbtn-flat { background: transparent; border: 0; padding: 0; cursor: pointer; }

/* Sticky header */
.tsticky-top1 { position: sticky; top: 0; z-index: 1; }

/* Misc */
.tmaxw-350 { max-width: 350px; }
.tflex-1   { flex: 1 1 auto; }
.tgap-5    { gap: 5px; }
.tw-14p    { width: 14%; }
.tw-10p    { width: 10%; }
.tw-200-flex { width: 200px; flex: 0 0 200px; }
.tw-220px  { width: 220px; }
.tw-30px-only { width: 30px; }
.tw-50px   { width: 50px; }
.tw-full   { width: 100%; }
.tcolor-fff-mt12 { color: #fff; margin-top: 12px; }
.tborder-0 { border: 0; }
.tmin-10em { min-width: 10em; border-radius: 0; }
.tswitch-md { width: 2.5em; height: 1.4em; cursor: pointer; }
.th-70 { height: 70px; }

/* ============================================================================
 * Select2 + Bootstrap input-group uyumu — select2-container default'ta block;
 * input-group flex layout'unu kiriyor, yandaki button/text alt satira dusuyor.
 * Fix: container'i flex item yap, sag taraf radius'unu sifirla (input-group'un
 * son child gibi davransin diye). select2.full.js'in default davranisini
 * bozmadan visual tutarliliği saglar.
 * ============================================================================ */
.input-group > .select2-container--bootstrap-5 {
    flex: 1 1 auto;
    width: 1% !important;
}
.input-group > .select2-container--bootstrap-5 .select2-selection {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
/* Eğer select2 input-group icinde son cocuk DEGILSE (ortada ise) sol radius'u da sifirla */
.input-group > .select2-container--bootstrap-5:not(:last-child) .select2-selection {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
.input-group > .select2-container--bootstrap-5:not(:first-child) .select2-selection {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* ============================================================================
 * Arac islem menusu — grid tile layout (vt-actions-grid)
 * Desktop: bootstrap dropdown icinde acilir, 3-sutun grid.
 * Mobile : offcanvas bottom sheet, 2-sutun grid.
 * Tek HTML — responsive class'larla davranis degisir.
 * ============================================================================ */
.vt-actions-search {
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 6px 10px 6px 28px;
    width: 100%;
    font-size: .85rem;
    background: #f8f9fa url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%236c757d' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E") no-repeat 8px center;
}
.vt-actions-search:focus { outline: 0; border-color: #86b7fe; box-shadow: 0 0 0 .2rem rgba(13,110,253,.15); }

.vt-actions-grid {
    padding: 8px;
    min-width: 360px;
    max-width: 380px;
    /* Belirgin cerceve — kullanici "tikladigimda border tam cerceve gorunsun"
       dedi. Default dropdown-menu cok ince. Burada 2px belirgin sinir +
       gucIu golge. */
    
    border-radius: 10px !important;
    box-shadow: 0 8px 24px rgba(13, 110, 253, .15), 0 2px 6px rgba(0,0,0,.08) !important;
}

/* Konum: Popper.js'in dinamik transform'una karismiyoruz — her butona
   gore relatif konum hesaplansin. Yatay/dikey kaydirma icin
   data-bs-offset (vehicle.js icinde) kullaniliyor. */
.vt-actions-group {
    margin-bottom: 4px;
}
.vt-actions-group-title {
    font-size: .6rem;
    font-weight: 700;
    color: #6c757d;
    letter-spacing: .03em;
    text-transform: uppercase;
    padding: 2px 0 2px 2px;
    margin-bottom: 4px;
}
/* Flex-wrap: tile'lar yan yana, sigmazsa alt satira gecer.
   Tum islemler 2 satira sigar — kompakt + horizontal. */
.vt-actions-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.vt-action-tile {
    flex: 0 0 auto;
    width: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 2px;
    min-height: 54px;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    background: #fff;
    color: #212529;
    text-decoration: none;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.vt-action-tile:hover {
    background: #f1f5ff;
    border-color: #b6d4fe;
    color: #0d6efd;
}
.vt-action-tile:focus {
    outline: 2px solid #86b7fe;
    outline-offset: 1px;
}
.vt-action-tile i {
    font-size: 1rem;
    color: #495057;
}
.vt-action-tile:hover i { color: #0d6efd; }
.vt-action-tile .vt-label {
    font-size: .65rem;
    font-weight: 500;
    text-align: center;
    line-height: 1;
}
/* Tehlikeli action (Sil) — kirmizi vurgu */
.vt-action-tile.vt-danger { border-color: #f1c1c1; }
.vt-action-tile.vt-danger i,
.vt-action-tile.vt-danger .vt-label { color: #dc3545; }
.vt-action-tile.vt-danger:hover {
    background: #fdecec; border-color: #f5b5b5; color: #b02a37;
}
.vt-action-tile.vt-danger:hover i { color: #b02a37; }

.vt-actions-empty {
    width: 100%;
    text-align: center;
    color: #6c757d;
    padding: 12px 8px;
    font-size: .8rem;
}

/* Mobile (offcanvas) override — daha buyuk tile (parmak dostu) */
@media (max-width: 767.98px) {
    .vt-actions-grid { min-width: 0; max-width: 100%; padding: 12px; }
    .vt-actions-tiles { gap: 6px; }
    .vt-action-tile { width: 76px; min-height: 68px; padding: 8px 4px; }
    .vt-action-tile i { font-size: 1.25rem; }
    .vt-action-tile .vt-label { font-size: .72rem; }
}

/* ============================================================================
 * Sigorta tablolari — Mobile responsive (<576px)
 * vt-wrap zaten overflow-x:auto veriyor ama 6-7 sutun dar ekrana cok sigmaz.
 * Cozum: kritik olmayan kolonlari gizle — sadece (Tur, Bitis, Tutar, Islem)
 * goster.
 * ============================================================================ */
@media (max-width: 575.98px) {
    /* Sigorta listesi: Sirketi + Police + Baslangic Tarihi gizle */
    #insuranceTable .vt-col-sirket,
    #insuranceTable .vt-col-police {
        display: none !important;
    }
    /* Baslangic tarihi (ilk vt-col-bakim-on) gizle, Bitis gorunur kalsin */
    #insuranceTable thead th.vt-col-bakim-on:first-of-type,
    #insuranceTable tbody td.vt-col-bakim-on:first-of-type {
        display: none !important;
    }

    /* Sigorta dosyalari listesi: Tip + Indirilebilir + Kayit Tarihi gizle */
    #insuranceFilesTable .vt-col-tip,
    #insuranceFilesTable .vt-col-indir,
    #insuranceFilesTable .vt-col-bakim-on {
        display: none !important;
    }

    /* tfoot Toplam colspan'i — gizli kolonlari hesaba kat */
    #insuranceTable tfoot td[colspan] { white-space: nowrap; }
}

/* ============================================================================
 * TARIH INPUT STANDARDI — proje genelinde tutarli yukseklik.
 *
 * Sorun:
 *   - <input type="date"> tarayıcının native calendar-picker-indicator'unu
 *     gosterir; Chrome'da bu ikon input'u 1-2px buyutur.
 *   - bootstrap-datepicker plugin'i <input type="text" class="datepicker">
 *     kullaniyor; yaninda .datepicker-open icon button olabiliyor.
 *   - <input type="datetime-local"> daha da buyuk (saat input'u eklenince).
 *   - Bu uc varyant ayni form'da yan yana oldugunda yukseklik tutarsiz, goz
 *     yoran amator bir gorunum cikariyor.
 *
 * Cozum:
 *   Bootstrap'in form-control yukseklikleri (.form-control = 38px,
 *   .form-control-sm = 31px) referans alinarak TUM date-type input'lara
 *   ayni min-height + padding + line-height zorlanir.
 * ============================================================================ */

/* Default boyut — form-control 38px standardi */
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
input[type="week"],
input.datepicker {
    min-height: calc(1.5em + 0.75rem + 2px);     /* = ~38px (form-control) */
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    box-sizing: border-box;
}

/* Small boyut — form-control-sm 31px standardi.
   !important: Chrome native date input picker'in icindeki padding/height'i
   bazen override etmiyor; biraz zor zorlamak gerek. */
input[type="date"].form-control-sm,
input[type="datetime-local"].form-control-sm,
input[type="time"].form-control-sm,
input[type="month"].form-control-sm,
input[type="week"].form-control-sm,
input.datepicker.form-control-sm {
    min-height: calc(1.5em + 0.5rem + 2px) !important;
    height: calc(1.5em + 0.5rem + 2px) !important;
    padding: 0.25rem 0.5rem !important;
    font-size: .875rem !important;
    line-height: 1.5 !important;
}

/* Large boyut — form-control-lg 48px standardi */
input[type="date"].form-control-lg,
input[type="datetime-local"].form-control-lg,
input[type="time"].form-control-lg,
input.datepicker.form-control-lg {
    min-height: calc(1.5em + 1rem + 2px);         /* = ~48px (form-control-lg) */
    padding: 0.5rem 1rem;
    font-size: 1.25rem;
    line-height: 1.5;
}

/* Native takvim ikonu — opaklik animasyonu (hover'da netlesir) */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.55;
    transition: opacity .15s ease;
    padding: 0;
}
input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator,
input[type="time"]:hover::-webkit-calendar-picker-indicator,
input[type="month"]:hover::-webkit-calendar-picker-indicator,
input[type="week"]:hover::-webkit-calendar-picker-indicator {
    opacity: 1;
}

/* bootstrap-datepicker input-group icindeki takvim ikon butonu —
   yandaki input ile ayni yukseklikte olsun (Bootstrap zaten ayarlar ama
   datepicker'in trigger button stili bazen kaciyor). */
.input-group .datepicker-open,
.input-group .input-group-text.datepicker-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.6rem;
    border-left: 0;
    background: #f8f9fa;
    color: #6c757d;
    cursor: pointer;
}
.input-group-sm .datepicker-open,
.input-group-sm .input-group-text.datepicker-open {
    padding: 0 0.5rem;
    font-size: .875rem;
}
.input-group .datepicker-open:hover { color: #0d6efd; background: #eef2ff; }

/* Firefox'ta type=date'in saglina dogru fazla padding olusur — duzelt */
@-moz-document url-prefix() {
    input[type="date"], input[type="datetime-local"], input[type="time"] {
        padding-right: 0.5rem;
    }
}

/* Form-floating ile birlikte kullanildiginda label/placeholder gore
   yukseklik ayarlamasi (Bootstrap default'unu kirma — sadece eski hardcoded
   inline style'lari override etmek icin) */
.form-floating > input[type="date"],
.form-floating > input[type="datetime-local"],
.form-floating > input.datepicker {
    min-height: calc(3.5rem + 2px);   /* form-floating default = 58px */
    padding-top: 1.625rem;
    padding-bottom: .625rem;
}

/* ============================================================================
 * Lastik islem yon segmenti (tire-direction-toggle)
 * Bootstrap'in btn-check + btn-outline-* default'u cok parlak/canli; daha
 * sade segmented control gorunumu icin custom kurallari.
 * ============================================================================ */
.tire-direction-toggle .btn {
    padding: 0.5rem 0.75rem;
    font-weight: 600;
    border-width: 1.5px;
    transition: all .15s ease;
}
.tire-direction-toggle .btn-check:checked + .btn-outline-success {
    background-color: #198754;
    border-color: #198754;
    color: #fff;
    box-shadow: 0 2px 8px rgba(25, 135, 84, .2);
}
.tire-direction-toggle .btn-check:checked + .btn-outline-danger {
    background-color: #dc3545;
    border-color: #dc3545;
    color: #fff;
    box-shadow: 0 2px 8px rgba(220, 53, 69, .2);
}
.tire-direction-toggle .btn-check:not(:checked) + .btn-outline-success {
    color: #198754;
    background: #fff;
}
.tire-direction-toggle .btn-check:not(:checked) + .btn-outline-danger {
    color: #dc3545;
    background: #fff;
}
.tire-direction-toggle .btn:hover:not(.active) {
    background: #f8f9fa;
}