/* ═══════════════════════════════════════════════════════════════════════════
   responsive.css — Mobil responsive override katmanı
   En son yüklenen stylesheet (XcaliburApp::setup_css sırasının sonunda).
   Amaç: tüm ekranları mobilde özellik kaybı olmadan tek kolona akıtmak.

   Breakpoint konvansiyonu (proje geneli):
     - 760px : birincil mobil eşik (içerik tek kolon, tablo kart-modu, nav toggle)
     - 900px : grid 2->1 kolon collapse (landing/pricing/dashboard kartları)
     - 480px : çok dar telefon ince ayarları

   C++ FIRST notu: yapı/veri/genişlik C++ tarafında üretilir; bu dosya yalnızca
   viewport'a tepkiyen görsel akışı (Wt'nin viewport-reaktif API'si yok) yönetir.

   Özgüllük notu: tablo kuralları `table.card-mobile.card-mobile` ile (çift
   class -> 0,2,1) yazılır; bu xcalibur.css'teki `.recordings-table.sortable-table`
   (0,2,0) min-width dayatmalarını ezer ve hem SortableTable hem düz WTable
   (LiveSpaces/Quotas/Management) için aynı kuralları çalıştırır.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────────
   TABLO KART-MODU (SortableTable + düz WTable)
   C++ tarafı: tabloya .card-mobile sınıfı (SortableTable.cpp veya
   apply_table_card_mobile() yardımcısı), her gövde hücresine
   data-label="<kolon başlığı>", header satırına .sortable-header-row,
   filtre satırına (varsa) .sortable-filter-row eklenir.
   Mobilde: kolon başlık satırı gizlenir, her gövde satırı dikey kart olur,
   her hücre "ETIKET ........ değer" satırına döner. Hiçbir kolon/aksiyon
   gizlenmez — yalnızca yeniden akıtılır.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {

    /* min-width dayatmasını kaldır: yatay scroll yerine dikey akış */
    table.card-mobile.card-mobile {
        min-width: 0 !important;
        width: 100% !important;
        display: block !important;
    }

    /* Kart-modu tablonun wrapper'ı yatay kaymaya gerek duymaz */
    .sortable-table-wrapper,
    .live-spaces-table-wrap {
        overflow-x: hidden !important;
    }

    /* Mobilde tablo kart-moduna döner ve doğal akışta uzar; masaüstündeki
       viewport-fit max-height (calc(100vh - 240px)) burada gereksiz/zararlı
       olur — iptal edilir ki sayfa kendi içinde kayabilsin. */
    .live-spaces-table-wrap {
        max-height: none !important;
    }

    table.card-mobile.card-mobile thead,
    table.card-mobile.card-mobile tbody {
        display: block !important;
        width: 100% !important;
    }

    /* Kolon başlık satırı gizlenir — etiketler kartlara taşındı */
    table.card-mobile.card-mobile thead .sortable-header-row {
        display: none !important;
    }

    /* Filtre satırı (SortableTable): kart olmaz, yatay sarılabilir filtre bar'ı */
    table.card-mobile.card-mobile thead .sortable-filter-row {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 10px !important;
        min-width: 0 !important;
    }
    table.card-mobile.card-mobile thead .sortable-filter-row > .table-filter-cell {
        display: block !important;
        flex: 1 1 140px !important;
        min-width: 0 !important;
        padding: 0 !important;
        border: none !important;
    }
    table.card-mobile.card-mobile thead .sortable-filter-row > .table-filter-cell-full {
        flex: 1 1 100% !important;
    }
    table.card-mobile.card-mobile thead .sortable-filter-row .form-control,
    table.card-mobile.card-mobile thead .sortable-filter-row .Wt-edit,
    table.card-mobile.card-mobile thead .sortable-filter-row .Wt-combobox {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Her gövde satırı = kart */
    table.card-mobile.card-mobile tbody tr {
        display: block !important;
        width: 100% !important;
        margin: 0 0 12px 0 !important;
        padding: 2px 0 !important;
        border: 1px solid rgba(255, 255, 255, 0.09) !important;
        border-radius: 8px !important;
        background: rgba(255, 255, 255, 0.025) !important;
        box-sizing: border-box !important;
    }

    /* Her hücre = "ETIKET ....... değer" satırı.
       Değer kısa ise etiketle aynı satırda sağda; uzun/zengin ise (başlık +
       alt-metin gibi) flex-wrap ile etiketin altına tam genişlik akar. */
    table.card-mobile.card-mobile tbody td {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        align-items: baseline !important;
        gap: 4px 12px !important;
        width: auto !important;
        max-width: 100% !important;
        padding: 9px 13px !important;
        border: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
        text-align: right !important;
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
    }
    table.card-mobile.card-mobile tbody td:last-child {
        border-bottom: none !important;
    }

    /* Etiket sütunu — C++ data-label içeriği */
    table.card-mobile.card-mobile tbody td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        text-align: left;
        color: #2A9FD6;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        white-space: normal;
    }

    /* Değer içeriği etiketin sağına yaslanır; sığmazsa alt satıra tam genişlik
       sarar (zengin hücrelerde alt-metin sıkışıp dikey kırılmaz). */
    table.card-mobile.card-mobile tbody td > * {
        margin-left: auto;
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    /* Aksiyon hücreleri (başlığı boş) → tam genişlik dokunmatik bar */
    table.card-mobile.card-mobile tbody td[data-label=""],
    table.card-mobile.card-mobile tbody td:not([data-label]) {
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    table.card-mobile.card-mobile tbody td[data-label=""]::before,
    table.card-mobile.card-mobile tbody td:not([data-label])::before {
        display: none !important;
    }
    table.card-mobile.card-mobile tbody td[data-label=""] > *,
    table.card-mobile.card-mobile tbody td:not([data-label]) > * {
        margin-left: 0 !important;
        max-width: 100% !important;
    }
    table.card-mobile.card-mobile tbody td[data-label=""] .btn,
    table.card-mobile.card-mobile tbody td[data-label=""] button,
    table.card-mobile.card-mobile tbody td:not([data-label]) .btn,
    table.card-mobile.card-mobile tbody td:not([data-label]) button {
        flex: 1 1 auto !important;
        min-height: 38px !important;
    }

    /* "Kayıt yok" gibi tam-genişlik tek hücreli satırlar kart içinde ortalı */
    table.card-mobile.card-mobile tbody td[colspan]::before {
        display: none !important;
    }
    table.card-mobile.card-mobile tbody td[colspan] {
        justify-content: center !important;
        text-align: center !important;
    }
}

/* ───────────────────────────────────────────────────────────────────────────
   DIALOG — mobil güvenlik cap'i
   SettingsPage dialogları zaten C++ tarafında min(Npx, 92vw) ile responsive.
   Bu kural, dönüştürülmemiş tüm dialogları da viewport'a sığdırır (içerik
   taşmaz). setWidth(Npx) inline genişliği max-width ile etkin min(N, 94vw)
   davranışına iner; Wt merkezleme render anındaki gerçek genişliği okuduğundan
   ortalama korunur.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
    .Wt-dialog,
    .modal-dialog {
        max-width: 94vw !important;
        box-sizing: border-box !important;
    }
    .Wt-dialog .Wt-dialog-body,
    .Wt-dialog .body,
    .modal-dialog .modal-body {
        max-width: 100% !important;
        overflow-x: auto !important;
    }
    /* Dialog içindeki sabit-genişlik form alanları sığsın */
    .Wt-dialog input,
    .Wt-dialog select,
    .Wt-dialog textarea,
    .Wt-dialog .form-control {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ───────────────────────────────────────────────────────────────────────────
   ALT PLAYER PANELİ — mobil taşma düzeltmesi
   xcalibur.css mobil bloğu panele `left:8px; right:8px` veriyor (kenar boşluklu
   yüzen kart), ancak başka bir kural width'i viewport'a eşitlediği için panel
   8px sağa taşıyor (8 + 100vw = viewport+8). width:auto ile left/right çiftinin
   genişliği belirlemesini sağlarız → panel 8px gutter'lara tam oturur, taşma yok.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
    .bottom-player-panel {
        width: auto !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }
}

/* ───────────────────────────────────────────────────────────────────────────
   SETTINGS — yan menü + içerik düzeni mobilde dikey yığın
   Masaüstü: `[150px tab rail][esnek içerik]` flex satırı (C++ inline style).
   Mobilde bu satır 380px'i paylaşınca içerik ~190px'e sıkışıp formları
   overflow:hidden ile KESİYORDU (özellik kaybı). Çözüm: flex satırını dikey
   yığına çevir; tab rail'i üstte tam-genişlik YATAY KAYDIRILABİLİR pill bar
   yap (12 sekme tek satırda kaydırılır, hiçbiri gizlenmez); içerik stack'i
   tam genişlik alır. C++ FIRST: yapı/sınıflar C++ tarafında; bu yalnızca
   viewport-reaktif akış.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
    .settings-layout {
        flex-direction: column !important;
        gap: 10px !important;
    }
    /* Tab rail üstte, tam genişlik, doğal yükseklik */
    .settings-menu-shell {
        width: 100% !important;
        flex: 0 0 auto !important;
    }
    .settings-menu-container {
        width: 100% !important;
        flex: 0 0 auto !important;
    }
    /* Dikey pill listesi → yatay kaydırılabilir pill bar (sekme kaybı yok) */
    .settings-menu-shell .nav-stacked {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 6px !important;
        width: 100% !important;
        -webkit-overflow-scrolling: touch;
    }
    .settings-menu-shell .nav-stacked > li {
        flex: 0 0 auto !important;
        float: none !important;
    }
    .settings-menu-shell .nav-stacked > li > a {
        white-space: nowrap !important;
        margin: 0 !important;
    }
    /* Masaüstü daraltma toggle'ı yatay bar'da anlamsız — gizle (sekmeler erişilir kalır) */
    .settings-menu-shell > .admin-btn {
        display: none !important;
    }
    /* İçerik stack'i tam genişlik; formlar artık kesilmez */
    .settings-layout > .Wt-stack {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Settings kartlarındaki satır-içi flex form satırları (C++ inline
       `display:flex` ile kurulu, class'sız) mobilde SARSIN: sabit genişlikli
       inputlar/butonlar alt satıra iner, hiçbiri gizlenmez veya kesilmez. */
    .settings-layout .admin-card [style*="display:flex"],
    .settings-layout .admin-field-group,
    .settings-layout .admin-toolbar,
    .settings-layout .cookie-toolbar {
        flex-wrap: wrap !important;
        min-width: 0 !important;
    }
    /* Form alanları konteynere sığsın (taşma yerine küçül) */
    .settings-layout .admin-card .form-control,
    .settings-layout .admin-card input,
    .settings-layout .admin-card select,
    .settings-layout .admin-card textarea {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}