/* ============================================================
   MOBILE-FIXES.CSS  (qrnakliye)
   qrbulut'taki mobil uyumluluk duzeltmelerinin portu.
   Tema CSS'ine (qrstyles/styles.css) dokunulmaz; bu dosya
   temadan SONRA yuklenir ve yalnizca dar ekran davranislarini
   duzeltir. Masaustu (>=992px) gorunumu degistirilmez.
   Not: Sidebar'in mobilde kapali baslamasi _HeaderScripts.cshtml
   icindeki head script'i ile yapilir (data-toggled=close).
   ============================================================ */



/* ============================================================
   MOBIL HEADER DUZENI v2
   Amac: dar ekranda header oturakli dursun. Sol grup (logo,
   menu, baslik) duzgun aralikli; SMS rozeti ve toolbar sagda
   sabit. Baslik tek satirda kisalir. Uzun toolbarlar sayfadan
   sayfaya sekil degistirmek yerine kendi icinde yatay kayar.
   ============================================================ */

.app-header .main-header-container {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
    padding-inline: 14px;
}

.app-header .header-content-left {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0; /* basligin kisalabilmesi icin sart */
}

.app-header .header-content-left .header-element {
    display: flex;
    align-items: center;
}

.app-header .header-content-left .header-element:last-child {
    min-width: 0;
    overflow: hidden;
}

.app-header .page-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    line-height: 1.3;
}

.app-header .header-content-right {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    flex: 0 0 auto;
    margin-inline-start: auto;
    gap: 8px;
    min-width: 0;
}

/* Toolbar her ekranda tek satir; sigmazsa kendi icinde yatay kayar */
.app-header .header-content-right .header-element {
    display: flex;
    align-items: center;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.app-header .header-content-right .header-element::-webkit-scrollbar {
    display: none;
}

.app-header .header-content-right .k-button {
    white-space: nowrap;
    flex: 0 0 auto;
}

/* Tablet ve alti */
@media (max-width: 767.98px) {
    .app-header .main-header-container {
        padding-inline: 10px;
        gap: 8px;
    }

    .app-header .header-content-left {
        gap: 8px;
    }

    .app-header .page-title {
        font-size: 0.95rem !important;
    }

    /* Sag taraf ekranin en fazla %60 ini kaplasin, gerisi kayar */
    .app-header .header-content-right {
        max-width: 60vw;
    }

    .app-header .header-content-right .k-button {
        padding-block: 4px;
        padding-inline: 10px;
        font-size: 0.8rem;
    }
}

/* Telefon */
@media (max-width: 479.98px) {
    .app-header .page-title {
        font-size: 0.85rem !important;
    }

    .app-header .header-content-right {
        max-width: 55vw;
        gap: 4px;
    }

    /* Cok dar ekranda SMS rozeti gizlenir; buton alanina yer acilir */
    .app-header .header-content-right > .header-element:has([title*="Kalan SMS"]) {
        display: none;
    }
}

/* Mobilde data-toggled=close/open durumlarinda icerik kaymasin:
   temadaki sifirlama kurali yalnizca close-menu-open icin tanimli,
   close durumunda icerik 15rem saga itiliyordu (grafikler de bu
   daralmis alanda cizilip bozuluyordu). */
@media (max-width: 991.98px) {
    [data-toggled=close] body,
    [data-toggled=open] body {
        --qr-INTERNAL-sidebar-width: 0px;
    }
}

/* Bos toolbar sagdaki blogu sola itmesin: Kendo k-spacer mobilde de
   bosluk kapliyor, SMS rozeti ortada kaliyordu. Mobilde spacer gizlenir;
   icinde gercek buton olmayan (yalniz gizli overflow butonu kalan)
   toolbar tamamen gizlenir. */
@media (max-width: 991.98px) {
    .app-header .qrtoolbar .k-spacer {
        display: none;
    }

    .app-header .header-content-right .header-element:has(.qrtoolbar):not(:has(.qrtoolbar .k-button:not(.k-toolbar-overflow-button))) {
        display: none;
    }
}