/* =============================================================================
   mobile-responsive.css
   Site geneli mobil uyum katmanı (Hata Tarama Raporu + "mobilde grid kullanılamıyor" geri bildirimi).
   _Layout.cshtml'de EN SON yüklenir; sayfa CSS'lerinin üzerine yazar.
   Tablo kart dönüşümü wwwroot/js/mobile-responsive.js ile birlikte çalışır (td[data-label]).
   ============================================================================= */

/* ---- Genel taşma önlemleri --------------------------------------------------- */
html, body { max-width: 100%; }
img, video, iframe, canvas { max-width: 100%; }
.table-responsive, .mobile-table-wrap { -webkit-overflow-scrolling: touch; }

/* ---- Tablet ve altı: yan menü açılır/kapanır ---------------------------------- */
.mobile-sidebar-toggle { display: none; }
/* Mobil kart/filtre denetimleri masaüstünde görünmez (bkz. telefon bölümü) */
.mc-more, .mc-filter-toggle { display: none; }

@media (max-width: 991.98px) {
    /* Panel ana kolonları (col-md-3 menü + col-md-9 içerik) alt alta dizilir; menü ilk ekranı kaplamasın. */
    .admin-dashboard .container-fluid,
    .student-dashboard .container-fluid,
    .instructor-dashboard .container-fluid,
    .admin-dashboard .container,
    .student-dashboard .container,
    .instructor-dashboard .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .mobile-sidebar-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .5rem;
        width: 100%;
        margin: 0 0 .75rem;
        padding: .7rem 1rem;
        border: 1px solid var(--border-light, #e2e8f0);
        border-radius: 12px;
        background: #fff;
        color: var(--text-primary, #0f172a);
        font-weight: 600;
        font-size: .95rem;
        box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
    }
    .mobile-sidebar-toggle .msb-caret { transition: transform .2s ease; }
    .mobile-sidebar-toggle[aria-expanded="true"] .msb-caret { transform: rotate(180deg); }

    .has-mobile-sidebar .sidebar { display: none; margin-bottom: .75rem; }
    .has-mobile-sidebar .sidebar.mobile-open { display: block; }
    /* Profil kartı mobilde yer kaplamasın; menü maddeleri yeterli. */
    .has-mobile-sidebar .sidebar .admin-profile-card,
    .has-mobile-sidebar .sidebar .profile-card { display: none; }
}

/* ---- Telefon: tablolar kart görünümüne dönüşür ------------------------------- */
@media (max-width: 767.98px) {
    .admin-dashboard .main-content,
    .student-dashboard .main-content,
    .instructor-dashboard .main-content { padding-left: 0; padding-right: 0; }

    /* Başlık + aksiyon düğmesi satırları sarılsın */
    .d-flex.justify-content-between.align-items-center { flex-wrap: wrap; gap: .5rem; }

    /* Form satırları tek kolon */
    .modal-dialog { margin: .5rem; max-width: calc(100vw - 1rem); }
    .modal-dialog.modal-lg, .modal-dialog.modal-xl { max-width: calc(100vw - 1rem); }
    .modal-body { max-height: calc(100vh - 11rem); overflow-y: auto; }
    .modal-footer { flex-wrap: wrap; gap: .5rem; }
    .modal-footer .btn { flex: 1 1 auto; }

    .card-header.d-flex { flex-wrap: wrap; gap: .5rem; }
    .btn-toolbar, .btn-group { flex-wrap: wrap; }

    /* Üst filtre/arama satırları */
    .filter-bar, .filters, .search-box, .dashboard-toolbar { flex-wrap: wrap; }
    .form-select, .form-control { max-width: 100%; }

    /* ---- Tablo → kart ----
       Kart düzeni: başlık (ilk veri sütunu) + köşede #ID, altında 2 kolonlu etiket/değer alanları,
       en altta tam genişlikte aksiyon düğmeleri. Sınıfları js/mobile-responsive.js yazar. */
    table.mobile-cards {
        display: block;
        width: 100%;
        min-width: 0 !important; /* admin-dashboard-components.css'teki global .table { min-width: 800px } */
        margin-bottom: 0;
        border: 0;
        background: transparent;
    }
    table.mobile-cards > thead { display: none; }
    table.mobile-cards > tbody,
    table.mobile-cards > tfoot { display: block; width: 100%; }
    .table-responsive:has(> table.mobile-cards) { overflow: visible; }
    .card-body.p-0 table.mobile-cards { padding: .75rem .75rem 0; }

    table.mobile-cards > tbody > tr {
        position: relative;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-flow: row dense;
        gap: .7rem .875rem;
        margin: 0 0 .75rem;
        padding: .875rem;
        background: #fff;
        border: 1px solid var(--border-light, #e2e8f0);
        border-radius: 14px;
        box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
    }
    table.mobile-cards > tbody > tr > td,
    table.mobile-cards > tbody > tr > th {
        display: block;
        min-width: 0;
        width: auto !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: var(--text-primary, #0f172a);
        font-size: .875rem;
        line-height: 1.35;
        text-align: start !important;
        vertical-align: top;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }
    table.mobile-cards > tbody > tr > td::before,
    table.mobile-cards > tbody > tr > th::before {
        content: attr(data-label);
        display: block;
        margin-bottom: .15rem;
        color: var(--text-secondary, #64748b);
        font-size: .72rem;
        font-weight: 600;
        line-height: 1.2;
    }
    table.mobile-cards > tbody > tr > td[data-label=""]::before,
    table.mobile-cards > tbody > tr > th[data-label=""]::before,
    table.mobile-cards > tbody > tr > td:not([data-label])::before,
    table.mobile-cards > tbody > tr > th:not([data-label])::before { display: none; }
    table.mobile-cards .mc-wide { grid-column: 1 / -1; }
    table.mobile-cards .mc-empty,
    table.mobile-cards .mc-hide,
    table.mobile-cards .mc-extra { display: none !important; }
    table.mobile-cards tr.mc-open > .mc-extra { display: block !important; }
    table.mobile-cards td .badge { white-space: normal; }

    /* Başlık + köşe etiketleri */
    table.mobile-cards > tbody > tr > .mc-title {
        grid-column: 1 / -1;
        order: -1;
        padding-bottom: .6rem !important;
        border-bottom: 1px solid var(--border-light, #eef2f7) !important;
        font-size: 1rem;
        font-weight: 700;
        line-height: 1.3;
    }
    table.mobile-cards > tbody > tr > .mc-title::before { display: none; }
    table.mobile-cards > tbody > tr > .mc-title small { display: inline-block; font-weight: 400; font-size: .8rem; }
    table.mobile-cards tr.mc-has-id > .mc-title { padding-inline-end: 4.75rem !important; }
    table.mobile-cards tr.mc-has-check > .mc-title { padding-inline-start: 2rem !important; }
    table.mobile-cards > tbody > tr > .mc-id {
        position: absolute;
        top: .9rem;
        inset-inline-end: .875rem;
        max-width: 4.5rem;
        padding: .1rem .5rem !important;
        overflow: hidden;
        border-radius: 999px !important;
        background: #f1f5f9 !important;
        color: var(--text-secondary, #64748b);
        font-size: .72rem;
        font-weight: 600;
        text-overflow: ellipsis;
        white-space: nowrap !important;
    }
    table.mobile-cards > tbody > tr > .mc-id::before { content: "#"; display: inline; margin: 0; font-size: inherit; }
    table.mobile-cards > tbody > tr > .mc-id small { font-size: inherit; color: inherit !important; }
    table.mobile-cards > tbody > tr > .mc-check {
        position: absolute;
        top: .95rem;
        inset-inline-start: .875rem;
    }
    table.mobile-cards > tbody > tr > .mc-check::before { display: none; }

    /* Aksiyonlar: kartın altında, etiketli ve parmakla basılabilir düğmeler */
    table.mobile-cards > tbody > tr > .mc-actions {
        grid-column: 1 / -1;
        order: 10;
        display: flex !important;
        flex-wrap: wrap;
        gap: .5rem;
        padding-top: .75rem !important;
        border-top: 1px solid var(--border-light, #eef2f7) !important;
    }
    table.mobile-cards > tbody > tr > .mc-actions::before { display: none; }
    table.mobile-cards .mc-actions > * { flex: 1 1 calc(50% - .25rem); }
    table.mobile-cards .mc-actions .btn-group,
    table.mobile-cards .mc-actions .btn-toolbar,
    table.mobile-cards .mc-actions .d-flex,
    table.mobile-cards .mc-actions .d-inline-flex,
    table.mobile-cards .mc-actions .mc-btn-wrap {
        display: flex !important;
        flex: 1 1 100%;
        flex-wrap: wrap;
        gap: .5rem;
        width: 100%;
    }
    table.mobile-cards .mc-actions form { display: flex; flex: 1 1 calc(50% - .25rem); margin: 0; }
    /* Sayfaya özel ikon düğmeleri (ör. .enrollment-action-btn 28px sabit) de genişlesin */
    table.mobile-cards .mc-actions .btn,
    table.mobile-cards .mc-actions button {
        display: inline-flex;
        flex: 1 1 calc(50% - .25rem);
        width: auto !important;
        min-width: 0;
        height: auto !important;
        align-items: center;
        justify-content: center;
        gap: .375rem;
        min-height: 40px;
        margin: 0 !important;
        padding: .45rem .65rem;
        border-radius: 10px !important;
        font-size: .82rem;
        line-height: 1.2;
        white-space: normal;
    }
    table.mobile-cards .mc-actions .btn > i,
    table.mobile-cards .mc-actions button > i { margin: 0 !important; flex-shrink: 0; }
    table.mobile-cards .mc-actions .mc-icon-only { justify-content: flex-start; text-align: start; }
    table.mobile-cards .mc-actions .mc-icon-only::after {
        content: attr(data-mc-label);
        font-family: inherit;
        font-weight: 500;
    }

    /* "Tüm bilgiler" aç/kapa */
    table.mobile-cards .mc-more {
        grid-column: 1 / -1;
        order: 9;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .4rem;
        width: 100%;
        padding: .45rem .75rem;
        border: 1px dashed var(--border-light, #d9e1ec);
        border-radius: 10px;
        background: #f8fafc;
        color: var(--primary-color, #8a356a);
        font-size: .8rem;
        font-weight: 600;
    }
    table.mobile-cards .mc-more::before { content: attr(data-more); }
    table.mobile-cards tr.mc-open > .mc-more::before { content: attr(data-less); }
    table.mobile-cards .mc-more::after {
        content: "\f078";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        font-size: .65rem;
        transition: transform .2s ease;
    }
    table.mobile-cards tr.mc-open > .mc-more::after { transform: rotate(180deg); }

    /* "Kayıt yok" satırı */
    table.mobile-cards > tbody > tr.mobile-empty-row { display: block; padding: 1.25rem .75rem; text-align: center; }
    table.mobile-cards > tbody > tr.mobile-empty-row > td { text-align: center !important; }
    table.mobile-cards > tbody > tr.mobile-empty-row > td::before { display: none; }

    /* Alt toplam satırları */
    table.mobile-cards > tfoot > tr {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: .5rem;
        padding: .75rem .875rem;
        border-radius: 12px;
        background: #f8fafc;
    }
    table.mobile-cards > tfoot > tr > * { border: 0 !important; padding: 0 !important; background: transparent !important; }
    table.mobile-cards > tfoot > tr > :empty { display: none; }

    /* Az sütunlu tablolar tablo olarak kalır, ekrana sığar */
    table.mobile-compact { min-width: 0 !important; font-size: .875rem; }
    table.mobile-compact th, table.mobile-compact td { white-space: normal !important; }

    /* ---- Filtreler: arama görünür, diğerleri "Diğer filtreler" altında ---- */
    .filters-section .card-body { padding: .875rem; }
    .filters-section:not(.mc-filters-open) .mc-filter-extra { display: none !important; }
    .mc-filter-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        margin-top: .75rem;
        padding: .6rem .9rem;
        border: 1px solid var(--border-light, #e2e8f0);
        border-radius: 10px;
        background: #f8fafc;
        color: var(--text-primary, #0f172a);
        font-size: .875rem;
        font-weight: 600;
    }
    .mc-filter-toggle .mc-filter-caret { transition: transform .2s ease; }
    .mc-filter-toggle[aria-expanded="true"] .mc-filter-caret { transform: rotate(180deg); }

    /* Kart dönüşümü yapılamayan (colspan/rowspan'li) tablolar yatay kaydırılır */
    .mobile-table-wrap { overflow-x: auto; }

    /* Sayfalama */
    .pagination { flex-wrap: wrap; justify-content: center; }
    .dataTables_paginate, .dashboard-pagination { text-align: center; }

    /* İstatistik kartları */
    .stat-card, .stats-card { margin-bottom: .75rem; }
}

/* ---- Çok dar telefonlar: kart alanları tek kolon ------------------------------- */
@media (max-width: 359.98px) {
    table.mobile-cards > tbody > tr { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Sohbet düğmesi / alt sabit öğeler içeriği kapatmasın (rapor E-04) --------- */
.admin-dashboard, .student-dashboard, .instructor-dashboard { padding-bottom: 5.5rem; }
@media (max-width: 991.98px) {
    main[role="main"] { padding-bottom: 1rem; }
}

/* ---- Tablet genişliğinde modallar çok dar kalmasın (rapor E-03) ----------------- */
@media (min-width: 576px) and (max-width: 991.98px) {
    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl { max-width: min(800px, calc(100vw - 2rem)); }
}