/* ══════════════════════════════════════════════════════════════
   Mobil uyum katmanı.

   fleet.css tasarım sistemini ve modül stillerini TELEFON/TABLET için
   düzeltir. _Layout içinde EN SON yüklenir — modül dosyalarını da
   ezebilmesi gerekir, bu yüzden sırası önemlidir.

   Kırılım noktaları (Bootstrap ile aynı tutuldu):
     ≤ 575.98px  küçük telefon
     ≤ 767.98px  telefon           → liste tabloları KART olur
     ≤ 991.98px  tablet / dar pencere → kenar çubuğu çekmeceye döner
   ══════════════════════════════════════════════════════════════ */

:root {
    /* Alt gezinme çubuğunun kapladığı yer; içerik bu kadar boşluk bırakır. */
    --mobilenav-height: 58px;
    /* Çentik/ev düğmesi güvenli alanları. Destek yoksa 0 olur. */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
}

/* ══════════════════════════════════════════════════════════════
   1) Temel davranış — her ekran boyutunda geçerli
   ══════════════════════════════════════════════════════════════ */

/* Dokunmatikte gri tıklama parıltısı, tasarımın kendi vurgu renginin
   üstüne binip kirli görünüyor; kapatılır. */
a, button, [role="button"], .fleet-tab, .fleet-page-btn, .sidebar__link {
    -webkit-tap-highlight-color: transparent;
}

/* Sayfa sonuna gelince arkadaki gövdenin kaymasını (scroll chaining) ve
   iOS'taki "lastik" etkisinin altındaki içeriği açmasını engeller. */
body.fleet-app {
    overscroll-behavior-y: none;
    -webkit-text-size-adjust: 100%;
}

/* Yatay kaydırılabilen her kap, iOS'ta parmakla akıcı kaysın. */
.table-responsive,
.fleet-tabs,
.line-table-wrap,
.alloc-table-wrap,
.fleet-modal__scroll {
    -webkit-overflow-scrolling: touch;
}

/* Uzun kod/ünvan metinleri kartı yana taşırmasın. */
.cell-title,
.page-header__subtitle,
.fleet-hint {
    overflow-wrap: anywhere;
}

/* ══════════════════════════════════════════════════════════════
   2) Kenar çubuğu, üst çubuk ve alt gezinme (≤ 991.98px)
   ══════════════════════════════════════════════════════════════ */

/* Çekmece açıkken gövde kilitlenir (site.js sınıfı ekler). Konum sabitlemesi
   iOS'ta gereklidir: overflow:hidden tek başına arka planı durdurmaz. */
body.fleet-app.is-drawer-open {
    overflow: hidden;
    touch-action: none;
}

@media (max-width: 991.98px) {
    /* Çekmece, çentikli ekranlarda kenardan içeri girer. */
    .sidebar {
        height: 100vh;
        height: 100dvh;
        width: min(84vw, 300px);
        padding-top: var(--safe-top);
        padding-bottom: var(--safe-bottom);
        padding-left: var(--safe-left);
        box-shadow: none;
    }

    .sidebar.sidebar--open {
        box-shadow: 0 0 40px rgba(44, 40, 36, 0.28);
    }

    /* Mobilde daraltma modu yoktur; genişliği fleet.css'teki sabit değere
       değil, yukarıdaki oransal genişliğe bağlarız. */
    .sidebar.sidebar--collapsed {
        width: min(84vw, 300px);
    }

    /* Logo çekmecenin kenarlarına dayanmasın. */
    .sidebar__brand img {
        max-width: 190px;
        width: 100%;
        height: auto;
    }

    /* Çekmece menüsü parmakla kullanılır: satırlar büyür. */
    .sidebar__link,
    .sidebar__group-toggle {
        padding: 11px 12px;
        font-size: 0.95rem;
        min-height: 44px;
    }

    .sidebar__sublink {
        padding: 10px 12px 10px 26px;
        min-height: 40px;
    }

    .sidebar__icon {
        width: 20px;
        height: 20px;
    }

    .sidebar-overlay {
        -webkit-backdrop-filter: blur(1px);
        backdrop-filter: blur(1px);
    }

    /* Üst çubuk çentiğin altına iner ve yapışkan kalır. */
    .topbar {
        height: auto;
        min-height: var(--topbar-height);
        padding: 0 10px;
        padding-top: var(--safe-top);
        padding-left: calc(10px + var(--safe-left));
        padding-right: calc(10px + var(--safe-right));
        gap: 8px;
    }

    .topbar__toggle {
        width: 40px;
        height: 40px;
    }

    /* Uzun sayfa başlıkları üst çubuğu iki satıra bölmesin. */
    .topbar__breadcrumb {
        min-width: 0;
        overflow: hidden;
    }

    .topbar__page-title {
        display: block;
        font-size: 0.95rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ── Alt gezinme çubuğu (yalnız telefon) ──────────────────────
   Telefonda en çok kullanılan dört ekran ve menü, başparmağın ulaştığı
   yerde durur. Tablette ve masaüstünde gizlidir; oralarda kenar çubuğu
   zaten görünür ya da tek dokunuşla açılır. */

.mobilenav {
    display: none;
}

@media (max-width: 767.98px) {
    .mobilenav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        background: var(--bg-secondary);
        border-top: 1px solid var(--border-color);
        padding-bottom: var(--safe-bottom);
        box-shadow: 0 -2px 12px rgba(44, 40, 36, 0.06);
    }

    .mobilenav__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-height: var(--mobilenav-height);
        padding: 6px 2px;
        background: none;
        border: none;
        color: var(--text-muted);
        font-size: 0.66rem;
        font-weight: 600;
        line-height: 1.1;
        text-decoration: none;
        text-align: center;
        cursor: pointer;
        transition: color var(--transition);
    }

    .mobilenav__item svg {
        width: 21px;
        height: 21px;
    }

    .mobilenav__item--active {
        color: var(--color-primary);
    }

    .mobilenav__label {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Okunmamış bildirim rozeti — zil üst çubukta kalsa da menü sekmesinde
       de görünür olmalı; telefonda üst çubuk kaydırmayla gözden kaybolabilir. */
    .mobilenav__item {
        position: relative;
    }

    .mobilenav__badge {
        position: absolute;
        top: 5px;
        left: 50%;
        margin-left: 4px;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        border-radius: 9px;
        background: var(--color-primary);
        color: #fff;
        font-size: 0.6rem;
        font-weight: 700;
        line-height: 16px;
        text-align: center;
    }

    /* İçerik alt çubuğun altında kalmasın. */
    .content-area {
        padding: 10px 10px calc(var(--mobilenav-height) + var(--safe-bottom) + 12px);
    }

    /* Bildirim menüsü telefonda ekran genişliğine yayılır. */
    .topbar__menu.notif-menu,
    .topbar__profile-menu .topbar__menu {
        position: fixed !important;
        left: 8px !important;
        right: 8px !important;
        top: calc(var(--topbar-height) + var(--safe-top) + 4px) !important;
        transform: none !important;
        width: auto;
        min-width: 0;
        max-width: none;
    }
}

/* ══════════════════════════════════════════════════════════════
   3) Sayfa başlığı, araç çubuğu ve filtreler (≤ 767.98px)
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {
    .page-header {
        margin-bottom: 12px;
        gap: 10px;
    }

    .page-header__title {
        font-size: 1.12rem;
    }

    /* Ekranın ana eylemi ("Yeni Cari" gibi) telefonda tam genişlik alır:
       başparmakla ıskalanmayacak tek hedef olur. */
    .page-header__actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .page-header__actions > .btn {
        width: 100%;
        justify-content: center;
        min-height: 42px;
    }

    /* Tek başına kalan son düğme (1, 3, 5... adet) satırı tamamlar; yanında
       boş bir yarım sütun bırakmak dengesiz görünürdü. */
    .page-header__actions > .btn:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    /* KPI kartları telefonda da İKİ sütun kalır. Alt alta dizilseler dört
       kart bütün ekranı doldurur ve asıl iş olan liste görünmezdi;
       kart zaten yatay yerleşimli olduğu için dar sütunda da okunur. */
    .kpi-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-bottom: 12px;
    }

    .kpi-card {
        padding: 9px 10px;
        column-gap: 9px;
    }

    .kpi-card__icon {
        width: 26px;
        height: 26px;
    }

        .kpi-card__icon svg {
            width: 14px;
            height: 14px;
        }

    .kpi-card__value {
        font-size: 1.1rem;
    }

    .kpi-card__title {
        font-size: 0.74rem;
    }

    /* ── Araç çubuğu ──
       Arama her zaman görünür; filtreler "Filtreler" düğmesiyle açılır.
       Dört seçim kutusunu alt alta açık bırakmak, listeyi ekrandan düşürürdü. */
    .fleet-card__toolbar {
        flex-direction: column;
        align-items: stretch;
        padding: 10px;
        gap: 8px;
    }

    .fleet-toolbar {
        gap: 8px;
    }

    .fleet-toolbar__search {
        flex: 1 1 100%;
        min-width: 0;
        max-width: none;
    }

    .fleet-toolbar__filters {
        min-width: 0;
    }

    /* mobile.js'in oluşturduğu açılır filtre kabı. */
    .fleet-toolbar__more {
        display: none;
        width: 100%;
        gap: 8px;
        grid-template-columns: 1fr 1fr;
        margin-top: 2px;
    }

    .fleet-toolbar__more.is-open {
        display: grid;
    }

    .fleet-toolbar__more .fleet-toolbar__filters {
        width: 100%;
    }

    /* "Temizle" gibi tam satır isteyen öğeler. */
    .fleet-toolbar__more > .btn,
    .fleet-toolbar__more > .fleet-toolbar__filters:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .fleet-toolbar__toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        flex: 0 0 auto;
        min-height: 40px;
        padding: 0 12px;
        white-space: nowrap;
    }

    .fleet-toolbar__toggle svg {
        width: 15px;
        height: 15px;
        transition: transform var(--transition);
    }

    .fleet-toolbar__toggle.is-open svg {
        transform: rotate(180deg);
    }

    /* Etkin filtre sayısı rozeti — filtreler kapalıyken de görünür kalmalı. */
    .fleet-toolbar__toggle-count {
        min-width: 17px;
        padding: 0 5px;
        border-radius: 9px;
        background: var(--color-primary);
        color: #fff;
        font-size: 0.66rem;
        font-weight: 700;
        line-height: 17px;
    }

    .fleet-toolbar__toggle-count:empty {
        display: none;
    }

    /* Kayıt sayısı + sayfa boyutu satırı. */
    .fleet-card__toolbar > .d-flex {
        justify-content: space-between;
        width: 100%;
    }
}

/* Masaüstünde filtre açma düğmesi hiç görünmez. */
@media (min-width: 768px) {
    .fleet-toolbar__toggle {
        display: none !important;
    }

    /* Açılır kap masaüstünde şeffaftır: içindekiler satıra geri döner. */
    .fleet-toolbar__more {
        display: contents;
    }
}

/* ══════════════════════════════════════════════════════════════
   4) Liste tabloları → KART (≤ 991.98px)

   Dokuz sütunlu bir liste dar ekranda yatay kaydırmayla okunamaz; sütunlar
   sıkışınca ürün adları harf harf bölünür. Her satır, başlığı solda /
   değeri sağda duran bir karta dönüşür. Etiketler mobile.js tarafından
   <thead> başlıklarından okunup td[data-label] olarak basılır — modül
   JS'lerinin hiçbiri değişmez.

   Eşik, kenar çubuğunun çekmeceye döndüğü noktayla AYNIDIR: ekran menüyü
   taşıyamıyorsa dokuz sütunlu tabloyu hiç taşıyamaz. Tablette kartlar iki
   sütuna dizilir (aşağıda).
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 991.98px) {
    /* Kart düzeninde yatay kaydırma kalmaz. */
    .fleet-table-wrapper.table-responsive {
        overflow-x: visible;
    }

    .fleet-table:not(.fleet-table--fixed) {
        display: block;
        border: none;
    }

        .fleet-table:not(.fleet-table--fixed) > thead {
            /* Ekran okuyucudan da gizlenir: etiketler artık hücrelerin içinde. */
            display: none;
        }

        .fleet-table:not(.fleet-table--fixed) > tbody {
            display: block;
        }

            .fleet-table:not(.fleet-table--fixed) > tbody > tr {
                display: block;
                margin: 8px;
                border: 1px solid var(--border-color);
                border-radius: var(--radius-md);
                background: var(--bg-secondary);
                box-shadow: var(--shadow-sm);
                overflow: hidden;
            }

            /* Izgara (flex değil): bir hücrede birden çok satır olabiliyor
               (ünvan + alt bilgi, telefon + e-posta). Flex'te bunlar YAN YANA
               dizilip hücreyi taşırıyordu; ızgarada hepsi değer sütununda
               alt alta iner. */
            .fleet-table:not(.fleet-table--fixed) > tbody > tr > td {
                display: grid;
                grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
                column-gap: 12px;
                align-items: baseline;
                width: auto;
                padding: 7px 11px;
                border-bottom: 1px dashed var(--border-color);
                text-align: right;
                overflow-wrap: anywhere;
            }

                .fleet-table:not(.fleet-table--fixed) > tbody > tr > td:last-child {
                    border-bottom: none;
                }

                /* Etiket sütunu. data-label taşımayan hücrede hiç çıkmaz. */
                .fleet-table:not(.fleet-table--fixed) > tbody > tr > td[data-label]::before {
                    content: attr(data-label);
                    grid-column: 1;
                    grid-row: 1;
                    text-align: left;
                    font-size: 0.72rem;
                    font-weight: 700;
                    text-transform: uppercase;
                    letter-spacing: 0.03em;
                    color: var(--text-muted);
                }

                /* Değerler her zaman ikinci sütunda; etiketin altına kaymazlar.
                   justify-self: rozet ve etiketler kendi genişliğinde kalır —
                   ızgara hücresi varsayılan olarak esnetir ve rozetin zemini
                   bütün sütunu kaplardı. */
                .fleet-table:not(.fleet-table--fixed) > tbody > tr > td[data-label] > * {
                    grid-column: 2;
                    justify-self: end;
                    max-width: 100%;
                }

    /* Kart başlığı: metin taşıyan ilk hücre (mobile.js işaretler).
       Etiketsiz, vurgulu ve tam genişlikte durur. */
    .fleet-table:not(.fleet-table--fixed) > tbody > tr > td.is-card-title {
        display: block;
        text-align: left;
        background: var(--color-cream);
        font-weight: 600;
        color: var(--text-primary);
        padding: 9px 11px;
    }

        .fleet-table:not(.fleet-table--fixed) > tbody > tr > td.is-card-title::before {
            display: none;
        }

    /* Görsel şerit: başlıktan önce gelen metinsiz hücre (stok resmi). */
    .fleet-table:not(.fleet-table--fixed) > tbody > tr > td.is-card-media {
        display: flex;
        justify-content: center;
        padding: 10px 11px 0;
        border-bottom: none;
    }

        .fleet-table:not(.fleet-table--fixed) > tbody > tr > td.is-card-media::before {
            display: none;
        }

    /* Boş/az içerikli hücreler kartı gereksiz uzatmasın. */
    .fleet-table:not(.fleet-table--fixed) > tbody > tr > td:empty {
        display: none;
    }

    /* Sayı hücreleri sağda zaten hizalı; ek hizalama sınıfı boşa çıkmasın. */
    .fleet-table:not(.fleet-table--fixed) > tbody > tr > td.cell-number {
        text-align: right;
        white-space: normal;
    }

    /* Çok satırlı hücreler (ünvan + alt bilgi, iletişim listesi) sağa yaslanır. */
    .fleet-table:not(.fleet-table--fixed) > tbody > tr > td .cell-sub,
    .fleet-table:not(.fleet-table--fixed) > tbody > tr > td .cell-title {
        text-align: right;
    }

    .fleet-table:not(.fleet-table--fixed) > tbody > tr > td.is-card-title .cell-sub,
    .fleet-table:not(.fleet-table--fixed) > tbody > tr > td.is-card-title .cell-title {
        text-align: left;
    }

    /* ── İşlem düğmeleri ──
       Kartın alt şeridi olur; hedefler 38px'e büyür. */
    .fleet-table:not(.fleet-table--fixed) > tbody > tr > td.cell-actions {
        display: flex;
        justify-content: flex-end;
        width: auto;
        padding: 8px 10px;
        background: var(--color-cream);
        border-top: 1px solid var(--border-color);
    }

        .fleet-table:not(.fleet-table--fixed) > tbody > tr > td.cell-actions::before {
            display: none;
        }

    .fleet-table:not(.fleet-table--fixed) .fleet-action-group {
        gap: 8px;
    }

    .fleet-table:not(.fleet-table--fixed) .fleet-action-btn {
        width: 38px;
        height: 38px;
        border-color: var(--border-color);
        background: var(--bg-secondary);
    }

        .fleet-table:not(.fleet-table--fixed) .fleet-action-btn svg {
            width: 16px;
            height: 16px;
        }

    /* ── Özel satırlar ──
       Boş durum ve "yükleniyor" iskeleti kart kabuğu almaz.
       .is-full-row sınıfını mobile.js basar; :has() desteklemeyen eski
       tarayıcılarda da doğru görünsün diye ikisi birlikte yazılır. */
    .fleet-table:not(.fleet-table--fixed) > tbody > tr.is-full-row,
    .fleet-table:not(.fleet-table--fixed) > tbody > tr:has(> td[colspan]) {
        margin: 0;
        border: none;
        box-shadow: none;
        background: none;
    }

    .fleet-table:not(.fleet-table--fixed) > tbody > tr > td[colspan] {
        display: block;
        text-align: center;
        padding: 0;
        border: none;
    }

        .fleet-table:not(.fleet-table--fixed) > tbody > tr > td[colspan]::before {
            display: none;
        }

    /* İskelet satırında ilk üç hücre yeter; dokuz gri çizgi gürültü olurdu. */
    .fleet-table > tbody > tr.is-skeleton-row > td:nth-child(n+4) {
        display: none;
    }

    .fleet-table > tbody > tr.is-skeleton-row > td::before {
        display: none;
    }

    .fleet-page-btn {
        min-width: 36px;
        height: 36px;
    }
}

/* Tablette kartlar iki sütuna dizilir: 768px genişlikte tek sütun kart
   satırları gereksiz uzar, listeye çok az kayıt sığardı. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .fleet-table:not(.fleet-table--fixed) > tbody {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        padding: 10px;
        align-items: start;
    }

        .fleet-table:not(.fleet-table--fixed) > tbody > tr {
            margin: 0;
        }

        /* Boş durum ve iskelet satırı bütün genişliği kaplar. */
        .fleet-table:not(.fleet-table--fixed) > tbody > tr.is-full-row,
        .fleet-table:not(.fleet-table--fixed) > tbody > tr.is-skeleton-row {
            grid-column: 1 / -1;
        }
}

/* Sayfalama telefonda ortalanır ve hedefleri büyür. */
@media (max-width: 767.98px) {
    .fleet-pagination {
        flex-direction: column;
        gap: 8px;
        padding: 10px;
    }
}

/* ══════════════════════════════════════════════════════════════
   5) Modaller → tam ekran sayfa (≤ 767.98px)

   Telefonda ortalanmış küçük bir kutu hem yer israfıdır hem de klavye
   açıldığında alan bırakmaz. Modal, kendi başlık ve alt çubuğu sabit
   kalan bir sayfaya dönüşür.
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {
    .fleet-modal .modal-dialog {
        margin: 0;
        max-width: none;
        width: 100%;
        height: 100dvh;
        /* h-75 gibi yardımcı sınıflar telefonda geçersiz kılınır. */
        min-height: 100dvh;
    }

    /* Bootstrap'in .h-75 / .modal-dialog-centered kombinasyonunu ezer. */
    .fleet-modal .modal-dialog.h-75,
    .fleet-modal .modal-dialog.modal-dialog-centered {
        height: 100dvh !important;
        align-items: stretch;
    }

    .fleet-modal .modal-content {
        height: 100%;
        min-height: 100dvh;
        border: none;
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }

    .fleet-modal .modal-header {
        flex: none;
        padding: 10px 14px;
        padding-top: calc(10px + var(--safe-top));
        position: sticky;
        top: 0;
        z-index: 3;
        background: var(--bg-secondary);
    }

    .fleet-modal .modal-body {
        flex: 1 1 auto;
        overflow-y: auto;
        min-height: 0;
    }

    .fleet-modal .modal-footer {
        flex: none;
        padding: 10px 12px;
        padding-bottom: calc(10px + var(--safe-bottom));
        gap: 8px;
        position: sticky;
        bottom: 0;
        z-index: 3;
        background: var(--bg-secondary);
    }

        /* Kaydet / Vazgeç telefonda yan yana ve tam genişlikte. */
        .fleet-modal .modal-footer > .btn {
            flex: 1 1 0;
            min-width: 0;
            min-height: 44px;
            justify-content: center;
            margin: 0;
        }

        /* Alt çubuktaki bilgi metni ("toplam ...") kendi satırına iner. */
        .fleet-modal .modal-footer > .fleet-toolbar__meta {
            flex: 1 1 100%;
            text-align: center;
            margin: 0 0 2px;
        }

    /* Gövde artık kendi kaydırma kabıdır; iç kap yüksekliğini bırakır. */
    .fleet-modal__scroll {
        max-height: none;
        overflow: visible;
    }

    .fleet-modal .btn-close {
        width: 34px;
        height: 34px;
        margin: -6px -4px -6px 0;
    }

    /* Sekmeler yapışkan kalır: uzun formda kullanıcı hangi bölümde
       olduğunu kaybetmesin. */
    .fleet-modal .fleet-tabs {
        position: sticky;
        top: 0;
        z-index: 2;
        padding: 0 10px;
    }

    .fleet-tab {
        padding: 10px 11px;
        min-height: 42px;
    }

    .fleet-modal__error {
        margin: 12px 12px 0;
    }
}

/* Tablette modal kenarlardan biraz nefes alsın ama yüksekliği taşmasın. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .fleet-modal .modal-dialog.h-75 {
        height: calc(100dvh - 32px) !important;
    }

    .fleet-modal__scroll {
        max-height: calc(100dvh - 210px);
    }
}

/* ══════════════════════════════════════════════════════════════
   6) Form alanları (≤ 767.98px)

   iOS Safari, yazı boyutu 16px'in altındaki bir alana odaklanınca sayfayı
   OTOMATİK YAKINLAŞTIRIR ve düzeni bozar. Bu yüzden telefonda tüm giriş
   alanları en az 16px olur — estetik değil, işlevsel bir zorunluluktur.
   ══════════════════════════════════════════════════════════════ */

/* Yakınlaştırma eşiği tablette de geçerlidir; iPad Safari aynı davranışı
   gösterir. Bu yüzden yalnızca yazı boyutu 991.98px'e kadar uygulanır. */
@media (max-width: 991.98px) {
    .custom-input,
    .custom-select,
    .custom-textarea,
    .auth-input,
    .form-control,
    .form-select,
    .fleet-toolbar__search .custom-input,
    .fleet-toolbar__filters .custom-select,
    .line-table .custom-input,
    .line-table .custom-select,
    .attribute-field .custom-input,
    .attribute-field .custom-select {
        font-size: 16px;
    }
}

@media (max-width: 767.98px) {
    .custom-input,
    .custom-select,
    .custom-textarea {
        padding: 9px 12px;
        min-height: 44px;
    }

    .custom-select {
        padding-right: 30px;
    }

    .fleet-toolbar__search .custom-input {
        padding-left: 38px;
        min-height: 44px;
    }

    .fleet-input-append {
        flex-wrap: wrap;
    }

        .fleet-input-append .custom-input {
            flex: 1 1 100%;
        }

        .fleet-input-append .btn {
            flex: 1 1 auto;
            justify-content: center;
            min-height: 42px;
        }

    /* Anahtar ve onay kutuları parmakla rahat vurulacak boyuta gelir. */
    .fleet-switch {
        min-height: 48px;
    }

    .custom-checkbox .form-check-input,
    .custom-radio .form-check-input {
        width: 1.4em;
        height: 1.4em;
    }

    /* Tekrarlayıcı (yetkili/adres) kartlarında silme düğmesi büyür. */
    .fleet-repeater__remove {
        width: 34px;
        height: 34px;
    }

    /* Genel düğme yüksekliği. */
    .btn-fleet-primary,
    .btn-fleet-outline,
    .btn-fleet-danger {
        min-height: 40px;
    }
}

/* ══════════════════════════════════════════════════════════════
   7) Modül düzeltmeleri
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {
    /* ── Fatura / makbuz satır tablosu ──
       Düzenlenebilir dokuz sütun telefonda yatay kaydırmayla kullanılamaz;
       her satır kendi mini formuna dönüşür. */
    .line-table-wrap {
        border: none;
        overflow: visible;
    }

    .line-table {
        display: block;
        min-width: 0;
    }

        .line-table > thead {
            display: none;
        }

        .line-table > tbody {
            display: block;
        }

            .line-table > tbody > tr {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 8px;
                margin-bottom: 10px;
                padding: 10px;
                border: 1px solid var(--border-color);
                border-radius: var(--radius-md);
                background: var(--bg-secondary);
            }

            .line-table > tbody > tr > td {
                display: block;
                padding: 0;
                border: none;
            }

                .line-table > tbody > tr > td[data-label]::before {
                    content: attr(data-label);
                    display: block;
                    margin-bottom: 3px;
                    font-size: 0.68rem;
                    font-weight: 700;
                    text-transform: uppercase;
                    letter-spacing: 0.03em;
                    color: var(--text-muted);
                }

    /* Ürün adı ve toplam tam genişlik ister. */
    .line-table > tbody > tr > td.line-product,
    .line-table > tbody > tr > td.line-col-total {
        grid-column: 1 / -1;
        min-width: 0;
        width: auto;
    }

    /* Sıra numarası ve silme düğmesi aynı üst şeritte durur. */
    .line-table > tbody > tr > td.line-col-no {
        grid-column: 1;
        grid-row: 1;
        width: auto;
        padding-top: 0 !important;
        font-weight: 700;
        color: var(--text-muted);
    }

    .line-table > tbody > tr > td.line-col-action {
        grid-column: 2;
        grid-row: 1;
        width: auto;
        text-align: right;
    }

    .line-table > tbody > tr > td.line-product {
        grid-row: 2;
    }

    .line-table > tbody > tr > td.line-col-qty,
    .line-table > tbody > tr > td.line-col-unit,
    .line-table > tbody > tr > td.line-col-price,
    .line-table > tbody > tr > td.line-col-disc,
    .line-table > tbody > tr > td.line-col-vat {
        width: auto;
    }

    .line-table > tbody > tr > td.line-col-total {
        padding-top: 6px !important;
        border-top: 1px dashed var(--border-color);
    }

    .line-remove {
        width: 36px;
        height: 36px;
        margin: 0;
        border-color: var(--border-color);
    }

    .line-total-value {
        font-size: 1.05rem;
    }

    /* ── Ürün / cari arama açılır listesi ──
       Ekran yüksekliğinin yarısını geçmez; altındaki alanlar görünür kalır. */
    .product-search__results {
        max-height: 45dvh;
    }

    .product-option {
        padding: 10px;
        flex-wrap: wrap;
    }

    .product-option__code {
        min-width: 0;
    }

    .product-option__stock {
        width: 100%;
        text-align: left;
    }

    /* ── Fatura toplamları ── */
    .invoice-totals__row--grand .invoice-totals__value {
        font-size: 1.1rem;
    }

    /* ── Kapatma/eşleştirme tablosu (tahsilat) ──
       Bu tablo dar ve okunur; kart yapmak yerine yatay kaydırma bırakılır. */
    .alloc-table-wrap {
        overflow-x: auto;
        max-height: 50dvh;
    }

    .alloc-table {
        min-width: 460px;
    }

    /* ── Stok resimleri ── */
    .stock-image-grid {
        grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
        gap: 8px;
    }

    /* ── Dinamik özellik ızgarası ── */
    .attribute-grid {
        grid-template-columns: 1fr;
    }

    /* ── Tanımlar ekranındaki satır içi formlar ── */
    .definition-form {
        flex-wrap: wrap;
    }

        .definition-form > .custom-input,
        .definition-form > .custom-select {
            flex: 1 1 100%;
        }

        .definition-form > .btn {
            flex: 1 1 auto;
            justify-content: center;
        }

    /* ── Raporlar ── */
    .report-head {
        gap: 10px;
    }

    .report-head__right {
        text-align: left;
    }

    .report-balance__value {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* ── Cari virman akış oku ──
       Ok 90° döndürüldüğünde genişliği yüksekliğine geçer; %100 genişlikte
       kalırsa taraf kartlarının üstüne taşıyordu. Kare boyuta sabitlenir. */
    .transfer-arrow__icon {
        width: 30px;
        height: 30px;
    }

    .transfer-arrow {
        min-width: 0;
        padding: 2px 0;
    }

    /* ── Bildirim listesi ── */
    .notif-row__actions {
        padding-left: 0;
    }

    /* ── Bildirim zili menüsü ── */
    .notif-menu__body {
        max-height: 60dvh;
    }

    /* ── Ana sayfa kur kartları ──
       İki sütuna sığdırmak için sembol küçülür ve alış/satış bacakları
       alt alta iner; yan yana kalırsa rakamlar karttan taşıyordu. */
    .rate-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 8px;
    }

    .rate-card {
        column-gap: 9px;
        padding: 10px 11px;
    }

    .rate-card__symbol {
        width: 30px;
        height: 30px;
        font-size: 0.95rem;
    }

    .rate-card__value {
        font-size: 1.15rem;
    }

    .rate-card__foot {
        flex-direction: column;
        gap: 1px;
    }

    .rate-card__leg {
        justify-content: space-between;
    }

    /* ── Bildirim / hata kutuları ── */
    .fleet-toast-container {
        bottom: calc(var(--mobilenav-height) + var(--safe-bottom) + 12px);
    }
}

/* Çok dar telefonlarda (≤360px) ızgaralar tek sütuna iner. */
@media (max-width: 360px) {
    .page-header__actions {
        grid-template-columns: 1fr;
    }

    .kpi-grid {
        grid-template-columns: 1fr;
    }

    .fleet-toolbar__more {
        grid-template-columns: 1fr;
    }

    .line-table > tbody > tr {
        grid-template-columns: 1fr;
    }

        .line-table > tbody > tr > td.line-col-action {
            grid-column: 1;
        }

    .rate-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ══════════════════════════════════════════════════════════════
   8) Yatay (landscape) telefon
   Yükseklik çok az; sabit çubuklar ekranı yemesin.
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 991.98px) and (orientation: landscape) and (max-height: 480px) {
    .mobilenav {
        display: none;
    }

    .content-area {
        padding-bottom: 12px;
    }

    .fleet-toast-container {
        bottom: 12px;
    }
}

/* ══════════════════════════════════════════════════════════════
   9) PWA — ana ekrandan açıldığında (standalone)
   Tarayıcı çubuğu yoktur; kendi üst çubuğumuz durum çubuğunun altına iner.
   ══════════════════════════════════════════════════════════════ */

@media (display-mode: standalone) {
    /* Ana ekran uygulamasında metin seçimi kazara sürüklemeye dönüşüyor;
       yalnızca gezinti kromu için kapatılır, içerik seçilebilir kalır. */
    .sidebar,
    .topbar,
    .mobilenav {
        -webkit-user-select: none;
        user-select: none;
    }
}

/* ── Çevrimdışı şeridi ──
   Service worker ağın gittiğini bildirince gösterilir. */

.offline-bar {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--warning);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
}

    .offline-bar svg {
        width: 15px;
        height: 15px;
        flex: none;
    }

body.is-offline .offline-bar {
    display: flex;
}

/* ── Güncelleme / kurulum bildirimi ── */

.pwa-prompt {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + var(--safe-bottom));
    z-index: 1085;
    display: none;
    align-items: center;
    gap: 10px;
    padding: 11px 13px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}

    .pwa-prompt.is-visible {
        display: flex;
    }

@media (max-width: 767.98px) {
    .pwa-prompt {
        bottom: calc(var(--mobilenav-height) + var(--safe-bottom) + 12px);
    }
}

@media (min-width: 768px) {
    .pwa-prompt {
        left: auto;
        right: 24px;
        max-width: 380px;
    }
}

.pwa-prompt__icon {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: var(--radius-md);
    background: var(--color-primary-light);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .pwa-prompt__icon svg {
        width: 18px;
        height: 18px;
    }

.pwa-prompt__body {
    flex: 1;
    min-width: 0;
}

.pwa-prompt__title {
    display: block;
    font-size: 0.87rem;
    font-weight: 700;
    color: var(--text-primary);
}

.pwa-prompt__desc {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.pwa-prompt__actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: none;
}

    .pwa-prompt__actions .btn {
        padding: 5px 11px;
        font-size: 0.8rem;
    }

.pwa-prompt__close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.25rem;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
}