/* ==== Mobil uyum (telefon ve küçük tablet) ====
   Yalnızca dar ekranlarda devreye girer; masaüstü görünümüne dokunmaz.
   Diğer stil dosyalarından sonra yüklenir; birçok eski kural !important kullandığı için burada da gerekli yerlerde kullanılır. */

/* Tablette sol menü zaten sürekli açık; menü düğmesi gereksiz */
@media (min-width: 768px) and (max-width: 991.98px) {
    html body.akx-shell .akx-app .akx-topbar-left [data-akx-sidebar-toggle] {
        display: none !important;
    }
}

@media (max-width: 767.98px) {
    /* Sol menü açıkken arkadaki karartma; dokununca menü kapanır (site.js) */
    .akx-sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 39;
        background: rgba(10, 22, 48, .45);
        opacity: 0;
        visibility: hidden;
        transition: opacity .2s ease, visibility .2s ease;
    }

    body.akx-sidebar-open .akx-sidebar-backdrop {
        opacity: 1;
        visibility: visible;
    }

    body.akx-sidebar-open {
        overflow: hidden;
    }
}

@media (max-width: 767.98px) {
    /* clip: yana taşmayı keser ama "hidden" gibi kaydırma kabı oluşturmaz; sabit (sticky) öğeler çalışmaya devam eder */
    html, body.akx-shell {
        overflow-x: clip;
    }

    /* ---- Sol menü: ekranı taşmayan çekmece ---- */
    html body.akx-shell .akx-app .akx-sidebar {
        width: min(300px, 86vw) !important;
        max-width: 86vw;
        z-index: 40;
    }

    /* ---- Üst bar: tek satır, sığan öğeler ---- */
    html body.akx-shell .akx-app .akx-topbar {
        padding: 0 12px !important;
        gap: 8px !important;
        height: 58px !important;
        min-height: 58px !important;
    }

    html body.akx-shell .akx-app .akx-topbar-left {
        flex: 0 0 auto !important;
        min-width: 0;
    }

    html body.akx-shell .akx-app .akx-topbar-left .akx-icon-btn {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        flex: 0 0 40px !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        padding: 0 !important;
        font-size: 22px;
    }

    html body.akx-shell .akx-app .akx-top-brand img {
        height: 30px !important;
        width: auto !important;
        max-width: 120px;
    }

    html body.akx-shell .akx-app .akx-topbar-actions {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        justify-content: flex-end !important;
        gap: 6px !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
    }

    /* Kredi / süre çipi: yalnızca sayılar */
    html body.akx-shell .akx-app .akx-sub-chip {
        min-width: 0;
        padding: 6px 9px !important;
        gap: 6px !important;
        font-size: 12px !important;
        white-space: nowrap;
    }

    html body.akx-shell .akx-app .akx-sub-chip .akx-sub-item {
        font-size: 0 !important;
        gap: 3px !important;
    }

    html body.akx-shell .akx-app .akx-sub-chip .akx-sub-item i,
    html body.akx-shell .akx-app .akx-sub-chip .akx-sub-item b {
        font-size: 12.5px !important;
    }

    html body.akx-shell .akx-app .akx-topbar-actions > .akx-icon-btn,
    html body.akx-shell .akx-app .akx-top-bell {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        flex: 0 0 36px !important;
    }

    /* Kullanıcı: yalnızca baş harf; ad/rol yazısı gizlenir */
    html body.akx-shell .akx-app .akx-top-user {
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        gap: 0 !important;
        flex: 0 0 auto;
        margin: 0 !important;
    }

    html body.akx-shell .akx-app .akx-top-user::before,
    html body.akx-shell .akx-app .akx-top-user::after {
        display: none !important;
    }

    html body.akx-shell .akx-app .akx-top-user-txt {
        display: none !important;
    }

    html body.akx-shell .akx-app .akx-top-user-av {
        width: 36px !important;
        height: 36px !important;
        font-size: 15px !important;
    }

    html body.akx-shell .akx-app .akx-top-logout-btn {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        padding: 0 !important;
        justify-content: center;
    }

    html body.akx-shell .akx-app .akx-top-logout-btn span {
        display: none !important;
    }

    /* Öğrenci üst barındaki saat dar ekranda yer kaplamasın */
    html body.akx-shell .akx-app .akx-clock {
        display: none !important;
    }

    /* ---- İçerik alanı ---- */
    html body.akx-shell .akx-app .akx-main {
        margin-left: 0 !important;
        padding-left: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    html body.akx-shell .akx-app .akx-main .akx-content {
        padding: 14px 12px 28px !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    html body.akx-shell .akx-app .akx-main .akx-content h1,
    html body.akx-shell .akx-app .akx-main .akx-content h2,
    html body.akx-shell .akx-app .akx-main .akx-content h3 {
        overflow-wrap: anywhere;
    }

    /* Tablolar sayfayı genişletmesin: kendi içinde yatay kaysın */
    html body.akx-shell .akx-app .akx-main .akx-content .table-responsive,
    html body.akx-shell .akx-app .akx-main .akx-content .akx-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Sayfa başlığı satırları alt alta */
    html body.akx-shell .akx-app .page-header .row {
        row-gap: 10px;
    }

    html body.akx-shell .akx-app .page-header .col-auto {
        margin-left: 0 !important;
        width: 100%;
    }

    html body.akx-shell .akx-app .akx-row-actions {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Ortak kayıt formu tek sütun */
    html body.akx-shell .akx-app .akx-form-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body.akx-shell .akx-app .akx-form-actions {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* ---- Kayıt listeleri: sabit işlem sütunu tabloyu örtmesin, düğmeler yalnızca simge ---- */
    html body.akx-shell .akx-app .akx-content .akx-data-table .akx-data-actcol {
        position: static !important;
        width: auto !important;
        min-width: 0 !important;
        box-shadow: none !important;
    }

    html body.akx-shell .akx-app .akx-content .akx-data-table .akx-data-actcol .akx-row-actions {
        gap: 4px !important;
    }

    html body.akx-shell .akx-app .akx-content .akx-data-table .akx-data-actcol .btn {
        font-size: 0 !important;
        padding: 7px 9px !important;
        min-height: 34px;
        gap: 0 !important;
    }

    html body.akx-shell .akx-app .akx-content .akx-data-table .akx-data-actcol .btn i {
        font-size: 15px !important;
        margin: 0 !important;
    }

    /* ---- Haftalık plan tablosu: gün sütunları okunur genişlikte, ders sütunu solda sabit ---- */
    html body.akx-shell .akx-app.akx-app .akx-main .akx-content.akx-content .plan-grid-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    html body.akx-shell .akx-app.akx-app .akx-main .akx-content.akx-content .student-plan-shell .plan-grid-wrap .program-grid.plan-write-grid,
    html body.akx-shell .akx-app.akx-app .akx-main .akx-content.akx-content .plan-grid-wrap .program-grid {
        width: 1060px !important;
        min-width: 1060px !important;
    }

    html body.akx-shell .akx-app.akx-app .akx-main .akx-content.akx-content .plan-grid-wrap .program-grid .program-lesson,
    html body.akx-shell .akx-app.akx-app .akx-main .akx-content.akx-content .plan-grid-wrap .program-grid thead th:first-child {
        width: 104px !important;
        min-width: 104px !important;
        max-width: 104px !important;
        position: sticky;
        left: 0;
        z-index: 3;
        background: #fff;
    }

    /* ---- Kurum / süper admin panosu: kartlar tek sütun ---- */
    html body.akx-shell .akx-app .akx-main .akx-content .sa-page .sa-hero,
    html body.akx-shell .akx-app .akx-main .akx-content .sa-page .sa-row-analytics,
    html body.akx-shell .akx-app .akx-main .akx-content .sa-page .sa-row-bottom {
        grid-template-columns: minmax(0, 1fr) !important;
        max-height: none !important;
        min-height: 0 !important;
    }

    html body.akx-shell .akx-app .akx-main .akx-content .sa-page .sa-kpis {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body.akx-shell .akx-app .akx-main .akx-content .sa-page .sa-hero-badge {
        position: static !important;
        transform: none !important;
        display: inline-flex !important;
        margin: 0 0 12px !important;
    }

    html body.akx-shell .akx-app .akx-main .akx-content .sa-page .sa-hero-visual {
        display: none !important;
    }

    html body.akx-shell .akx-app .akx-main .akx-content .sa-page {
        padding: 0 !important;
    }

    /* ---- Kütüphane kategorileri: düğme başlığın altına ---- */
    html body.akx-shell .akx-app .akx-main .akx-content .lib-cat-row {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    html body.akx-shell .akx-app .akx-main .akx-content .lib-cat-row .lib-cat-main {
        flex: 1 1 100% !important;
        min-width: 0 !important;
    }

    html body.akx-shell .akx-app .akx-main .akx-content .lib-cat-row .lib-cat-btn {
        position: static !important;
        margin-left: 0 !important;
    }

    /* Demo sitesindeki "Rol değiştir" rozeti dar ekranda içeriği örtmesin */
    .demo-pill {
        right: 10px !important;
        bottom: 10px !important;
        padding: 7px 11px !important;
        font-size: 11.5px !important;
        opacity: .92;
    }
}