/* =============================================================================
   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; }

@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 ---- */
    table.mobile-cards { border: 0; display: block; width: 100%; }
    table.mobile-cards thead { display: none; }
    table.mobile-cards tbody,
    table.mobile-cards tfoot { display: block; width: 100%; }
    table.mobile-cards tr {
        display: block;
        margin: 0 0 .75rem;
        padding: .25rem .75rem;
        background: #fff;
        border: 1px solid var(--border-light, #e2e8f0);
        border-radius: 12px;
        box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
    }
    table.mobile-cards td,
    table.mobile-cards th[scope="row"] {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: .75rem;
        width: 100% !important;
        padding: .5rem 0 !important;
        border: 0 !important;
        border-bottom: 1px solid var(--border-light, #eef2f7) !important;
        text-align: right !important;
        white-space: normal !important;
        word-break: break-word;
    }
    table.mobile-cards td:last-child { border-bottom: 0 !important; }
    table.mobile-cards td::before {
        content: attr(data-label);
        flex: 0 0 38%;
        max-width: 42%;
        font-weight: 600;
        font-size: .8rem;
        color: var(--text-secondary, #64748b);
        text-align: left;
    }
    table.mobile-cards td[data-label=""]::before,
    table.mobile-cards td:not([data-label])::before { display: none; }
    table.mobile-cards td[data-label=""] { justify-content: flex-end; }
    /* Aksiyon düğmeleri satıra sığsın */
    table.mobile-cards td .btn, table.mobile-cards td .badge { margin: 0 0 .25rem .25rem; }
    table.mobile-cards td > div, table.mobile-cards td > span { max-width: 100%; }
    /* "Kayıt yok" satırı */
    table.mobile-cards tr.mobile-empty-row td { justify-content: center; text-align: center !important; }
    table.mobile-cards tr.mobile-empty-row td::before { display: none; }

    /* 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; }
}

/* ---- 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)); }
}