/*!
 * okan-phone.css — ofis ekranlarının telefon görünümü (#139 · ADR 0039).
 * Yalnız telefon genişliğinde (< 768 px) devreye girer; masaüstü görünümü değişmez.
 *
 * LİSTE KARTLARI: okan-datatable.js telefonda tabloya `okan-cards` sınıfını koyar ve her hücreye kolon başlığını
 * `data-label` olarak yazar. Satır kart olur: ana alanlar görünür (`okan-card-more` olmayanlar), karta dokununca
 * diğerleri açılır (`okan-card-open`). Başlık satırı gizlenir; filtre satırı başlık etiketli kutular olarak kalır.
 */
@media (max-width: 767.98px) {
    /* --- tablo → kart --- */
    table.okan-cards, table.okan-cards > tbody, table.okan-cards > tbody > tr { display: block; width: 100% !important; }
    table.okan-cards > thead { display: block; }
    table.okan-cards > thead > tr:not(.okan-filters) { display: none; }

    /* Filtre satırı: etiketli kutular, alt alta sarar. Boş hücre (filtresi olmayan kolon) görünmez. */
    table.okan-cards > thead > tr.okan-filters { display: none; }
    table.okan-cards.okan-filters-open > thead > tr.okan-filters { display: flex; flex-wrap: wrap; gap: 6px 10px; padding: 4px 0 10px; }
    table.okan-cards > thead > tr.okan-filters > th {
        display: flex; align-items: center; gap: 6px; padding: 0 !important; border: 0 !important;
        position: static !important; box-shadow: none !important; width: auto !important; min-width: 0 !important; background: none !important;
    }
    table.okan-cards > thead > tr.okan-filters > th.okan-card-empty { display: none; }
    table.okan-cards > thead > tr.okan-filters > th[data-label]:not([data-label=""])::before {
        content: attr(data-label); font-size: .74rem; font-weight: 600; color: var(--ct-secondary-color, #6b7785); white-space: nowrap;
    }
    table.okan-cards > thead > tr.okan-filters > th .form-control,
    table.okan-cards > thead > tr.okan-filters > th .form-select { min-width: 120px; }

    /* Kart */
    table.okan-cards > tbody > tr {
        border: 1px solid var(--ct-border-color, #dee2e6); border-radius: 8px; margin: 0 0 8px; padding: 6px 10px 4px;
        background: var(--ct-secondary-bg, #fff);
    }
    table.okan-cards > tbody > tr > td {
        /* Etiket solda (yüzer), değer sağda tek blok: hücrede birden çok parça (tarih + kişi, kg + saat) olsa da bölünmez. */
        display: flow-root; padding: 3px 0 !important;
        border: 0 !important; position: static !important; left: auto !important; box-shadow: none !important;
        background: none !important; text-align: right !important; width: auto !important; min-width: 0 !important;
        white-space: normal !important; overflow-wrap: anywhere;
    }
    table.okan-cards > tbody > tr > td::before {
        content: attr(data-label); float: left; max-width: 45%; margin-right: 12px; text-align: left;
        font-size: .78rem; color: var(--ct-secondary-color, #6b7785);
    }
    /* Etiketsiz hücreler (seçim kutusu, durum topu) kartın başında yan yana durur. */
    table.okan-cards > tbody > tr > td[data-label=""] { display: inline-flex; margin-right: 10px; vertical-align: middle; }
    table.okan-cards > tbody > tr > td[data-label=""]::before { content: none; }
    table.okan-cards > tbody > tr > td[data-label=""]:empty { display: none; }   /* boş işaret hücresi (Sevkiyat: yürüyen emir değil) satır açmasın */
    /* Tek alanlı kart (Firmalar): alan etiketsiz başlık, sola yaslı */
    table.okan-cards > tbody > tr > td.okan-card-title { display: block; text-align: left !important; font-weight: 600; font-size: .95rem; }
    table.okan-cards > tbody > tr > td.okan-card-title::before { content: none; }
    table.okan-cards > tbody > tr > td.okan-card-more { display: none; }
    table.okan-cards > tbody > tr.okan-card-open > td.okan-card-more { display: flow-root; }

    /* "Ayrıntı" ipucu: yalnız gizli alanı olan kartta */
    table.okan-cards > tbody > tr.okan-card-has-more::after {
        content: "Ayrıntı ▾"; display: block; text-align: center; font-size: .72rem; padding-top: 2px;
        color: var(--ct-primary, #3e60d5);
    }
    table.okan-cards > tbody > tr.okan-card-has-more.okan-card-open::after { content: "Kapat ▴"; }

    /* Grup başlığı (RowGroup / drill) ve boş tablo iletisi kart değil, düz satır */
    table.okan-cards > tbody > tr.okan-rowgroup, table.okan-cards > tbody > tr.dtrg-group,
    table.okan-cards > tbody > tr:has(> td.dt-empty) { border: 0; padding: 6px 2px; background: none; }
    table.okan-cards > tbody > tr.okan-rowgroup > td, table.okan-cards > tbody > tr.dtrg-group > td,
    table.okan-cards > tbody > tr > td.dt-empty { display: block; text-align: left !important; }
    table.okan-cards > tbody > tr > td.dt-empty::before { content: none; }

    /* Çizgili/hover gölgeleri kartta gereksiz */
    html body table.okan-dt.okan-cards > tbody > tr:nth-of-type(n):not(.okan-x) > * { box-shadow: none !important; }
    table.okan-cards > tbody > tr.selected { border-color: var(--ct-primary, #3e60d5); }

}

/* Süzgeç düğmesi yalnız telefonda */
button.okan-phone-filters { display: none; }

/* ARAÇ ÇUBUĞU (Hayati, 11.10.2026 "çok dağınık"): telefonda iki düzenli satır, sola yaslı.
   1) arama — tam genişlik, etiketsiz (yer tutucu "Ara…"); ekranın eklediği seçici/düğme (Planlama) alta sarar
   2) süzgeç simgesi (yazı sığmıyordu; title "Süzgeçler") + grid düğmeleri (görünüm, kolonlar, yenile, Excel, PDF; ekranın ek düğmesi) aynı satırda */
@media (max-width: 767.98px) {
    div.dt-container > .row:first-child { row-gap: 8px; margin-bottom: 4px; }
    div.dt-container > .row:first-child > .dt-layout-start,
    div.dt-container > .row:first-child > .dt-layout-end {
        display: flex !important; flex-wrap: wrap; align-items: center; justify-content: flex-start !important;
        gap: 6px; width: 100%; margin: 0 !important; text-align: left !important;
    }
    div.dt-container .dt-search { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; }
    div.dt-container .dt-search > label { display: none; }
    div.dt-container .dt-search input { flex: 1 1 150px; min-width: 0 !important; width: auto; margin-left: 0 !important; }
    /* Tek araç şeridi: süzgeç simgesi + grid simgeleri dar düğmelerle bir satır; yazılı ana düğme (Planlama: Planla) altta tam genişlik. */
    div.dt-container .dt-layout-end > .dt-buttons { display: flex !important; flex-wrap: wrap; width: 100% !important; margin: 0 !important; }
    div.dt-container .dt-buttons > .btn, div.dt-container .dt-buttons > .btn-group > .btn { padding: .35rem .55rem; }
    div.dt-container .dt-buttons > .btn-primary { flex: 1 1 100%; margin-top: 6px !important; border-radius: var(--ct-border-radius, .25rem) !important; }
    div.dt-container .dt-search > :not(input) { margin-left: 0 !important; }
    button.okan-phone-filters { display: inline-flex; align-items: center; }
    button.okan-phone-filters.active { border-color: var(--ct-primary, #3e60d5); color: var(--ct-primary, #3e60d5); }
    /* Alt satır (bilgi, sayfa boyutu, sayfalama) da sola yaslı, sarar */
    div.dt-container > .row:not(:first-child):not(.dt-layout-table) > .dt-layout-start,
    div.dt-container > .row:not(:first-child):not(.dt-layout-table) > .dt-layout-end { display: flex !important; flex-wrap: wrap; align-items: center; gap: 6px; text-align: left !important; justify-content: flex-start !important; }
}

/* ÜST ŞERİT — detay ve düzenleme sayfaları (Hayati, 12.10.2026): geri düğmesi (<okan-back />) hep en solda,
   sayfanın işlemleri sağda. Geri düğmesi kenarlıklı ve tek satır ("Listeye Dön" iki satıra kırılmaz).
   Telefonda şeritteki bütün düğmeler yalnız simge ve şeride eşit yayılır; iç içe kutular (div, form) aradan kalkar. */
.okan-actions { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.okan-actions .btn, .okan-back { white-space: nowrap; }
@media (max-width: 767.98px) {
    .okan-actions { flex-wrap: nowrap; gap: 6px; }
    .okan-actions div, .okan-actions form { display: contents !important; }   /* d-flex (!important) iç kutuyu da aç */
    .okan-actions .btn {
        flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center;
        font-size: 0; padding: 0; height: 2.75rem;   /* metin gizli; simge kalır (title adını söyler) · hepsi aynı boy */
    }
    .okan-actions .btn i { font-size: 1.15rem; margin: 0 !important; }
    .okan-actions .btn .spinner-border { width: 1rem; height: 1rem; }
    .okan-actions > .badge, .okan-actions .badge { flex: 0 0 auto; }
}