/*
 * Yönetim panelinin MOBİL kabuğu.
 *
 * NEDEN VAR: site.css masaüstü için yazılmış ve telefonda üç şeyi bozuyordu:
 *   1) `body { border-left/right: 1px solid #111 }` — ekranın iki yanında
 *      siyah çizgi.
 *   2) `#container { width: 80%; text-align: center }` — 390pt ekranda
 *      %20'si boşa gidiyor, tablo ve form etiketleri ortalanıyor.
 *   3) Tablolar sarmalayıcısız — sayfa yatay kayıyor (Metrics'te 8 tablo,
 *      hiçbirinde `.table-responsive` yok).
 *
 * site.css'e DOKUNULMADI: masaüstü paneli bu kurallara göre çizilmiş durumda.
 * Bunun yerine bu dosya site.css'ten SONRA yükleniyor ve yalnız küçük
 * ekranlarda devreye giriyor.
 *
 * Ölçüm: iPhone 16e (390pt) Safari.
 */

:root {
    --app-orange: #ff9500;
    --app-orange-deep: #e07b00;
    --app-ink: #1d1d1f;
    --app-line: rgba(29, 29, 31, .12);
    /* Dokunma hedefi alt sınırı (Apple İnsan Arayüzü Kılavuzu) */
    --app-touch: 44px;
    --app-tabbar: 58px;
}

/* ---------------------------------------------------------------
   Uygulama hissi — her ekranda geçerli
   --------------------------------------------------------------- */

body {
    /* Gri vurgu karesi "web sayfası" hissi veren ilk şey */
    -webkit-tap-highlight-color: transparent;
}

/* Sayfa sonunda lastik gibi esneyip arka planı göstermesin */
html {
    overscroll-behavior-y: contain;
}

/* Üst çubuk sabit: uzun tablolarda gezinirken menü kaybolmasın */
/* Üst çubuk sabit: uzun tablolarda gezinirken menü kaybolmasın.
   Arka plan HEADER'IN KENDİSİNDE olmalı — yalnız `.navbar`a verilince
   üstündeki "Admin Panel" şeridi saydam kalıyor ve sayfa oradan
   görünüyordu (cihazda bildirildi, 2026-09-26). */
body > header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: saturate(180%) blur(12px);
}

body > header .navbar {
    margin-bottom: 0 !important;
    /* Şeffaf: arka plan header'dan geliyor, iki kat blur olmasın */
    background: transparent;
}

/* Sayfa üstündeki "Admin Panel" kısayolu: menüde zaten Panel var,
   burada yalnız dar bir şerit olarak dursun — `mt-2` yapışkan başlığın
   içinde saydam bir boşluk açıyordu. */
body > header #admin-panel-container {
    margin-top: 0 !important;
    padding-top: 6px;
}

.navbar-brand {
    font-weight: 800;
    letter-spacing: -.02em;
}

/* ---------------------------------------------------------------
   Yan çekmece (offcanvas) — hamburger menünün yerine
   --------------------------------------------------------------- */

#appDrawer {
    width: min(320px, 86vw);
}

#appDrawer .offcanvas-body {
    padding-top: 0;
}

#appDrawer .nav-link {
    display: flex;
    align-items: center;
    /* Dokunma hedefi kurali .nav-link'e `justify-content: center` veriyor;
       cekmecede ikon+etiket SOLA yanasik olmali, yoksa her satir ortalanip
       menu listesi gibi okunmuyor. */
    justify-content: flex-start;
    text-align: left;
    gap: 12px;
    min-height: var(--app-touch);
    padding: 10px 12px;
    border-radius: 12px;
    color: var(--app-ink);
    font-weight: 600;
}

#appDrawer .nav-link i {
    width: 22px;
    text-align: center;
    color: var(--app-orange-deep);
}

#appDrawer .nav-link:hover,
#appDrawer .nav-link.is-active {
    background: rgba(255, 149, 0, .12);
}

.drawer-section-title {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #8a8580;
    margin: 18px 12px 6px;
}

/* ---------------------------------------------------------------
   Alt sekme çubuğu — yalnız yönetici, yalnız telefon
   --------------------------------------------------------------- */

.app-tabbar {
    display: none;
}

@media (max-width: 991.98px) {
    /* Yönetici değilse satır içi `display:none` duruyor ve bu kuralı ezer;
       checkAdminStatus() `display:''` yapınca burası devreye girer. */
    .app-tabbar {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1040;
        background: rgba(255, 255, 255, .94);
        backdrop-filter: saturate(180%) blur(14px);
        border-top: 1px solid var(--app-line);
        /* Çentikli telefonlarda ana ekran çizgisinin altına girmesin */
        padding-bottom: env(safe-area-inset-bottom);
    }

    .app-tabbar-inner {
        display: flex;
        align-items: stretch;
        height: var(--app-tabbar);
    }

    .app-tab {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        text-decoration: none;
        color: #6b6660;
        font-size: 10.5px;
        font-weight: 600;
        line-height: 1;
        min-width: 0;
    }

    .app-tab i {
        font-size: 17px;
    }

    .app-tab span {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .app-tab.is-active {
        color: var(--app-orange-deep);
    }

    /* Sekme çubuğu içeriğin son satırını kapatmasın */
    body.has-tabbar #container {
        padding-bottom: calc(var(--app-tabbar) + env(safe-area-inset-bottom) + 16px);
    }

    body.has-tabbar #footer {
        margin-bottom: calc(var(--app-tabbar) + env(safe-area-inset-bottom));
    }
}

/* ---------------------------------------------------------------
   Telefon düzeltmeleri
   --------------------------------------------------------------- */

@media (max-width: 991.98px) {

    /* site.css'in gövde kenarlıkları ve %80 genişliği */
    body {
        border-left: 0;
        border-right: 0;
        padding-top: 0;
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    #container {
        width: 100%;
        max-width: 100%;
        padding: 16px;
        /* Ortalama yalnız masaüstü tasarımı için anlamlıydı; telefonda
           form etiketleri ve tablo hücreleri de ortalanıyordu. */
        text-align: left;
    }

    /* Panel sayfaları kendi `container py-5`'ini de getiriyor */
    #container .container,
    #container .container-fluid {
        padding-left: 0;
        padding-right: 0;
    }

    #container .py-5 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    h1,
    .display-4 {
        font-size: 1.6rem !important;
        font-weight: 800;
    }

    h2 {
        font-size: 1.3rem;
    }

    /* Tablolar: sarmalayıcısı olmayanlar da yatay kaydırılabilir olsun.
       Aksi halde SAYFA kayıyor ve üst çubuk dışında her şey kaçıyor.
       Sarmalayıcı _Layout'taki `wrapWideTables()` ile ekleniyor — tabloya
       `display:block` vermek kolon hizalamasını bozuyor. */
    #container .table-responsive,
    #container .app-table-scroll {
        -webkit-overflow-scrolling: touch;
    }

    #container table {
        font-size: 13.5px;
    }

    /* Hücreler sarmayınca tablo dar ekranda okunabilir kalıyor; genişlik
       sarmalayıcı sayesinde sayfayı değil kendini kaydırıyor. */
    #container table th,
    #container table td {
        white-space: nowrap;
    }

    /* Dokunma hedefleri. Cekmece baglantilari DISARIDA: onlar kendi
       kuralinda sola yanasik cizilliyor. */
    .btn,
    .navbar .nav-link,
    .dropdown-item,
    .page-link {
        min-height: var(--app-touch);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .btn-sm {
        min-height: 38px;
    }

    /* iOS 16px altındaki alanlara odaklanınca sayfayı BÜYÜTÜYOR — form
       her dokunuşta zıplıyordu.

       Onay kutusu/radyo DIŞARIDA: `min-height` onlara da uygulanınca
       "Beni Hatırla" kutusu dikey olarak uzayıp dikdörtgen görünüyordu. */
    .form-control,
    .form-select,
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        font-size: 16px !important;
        min-height: var(--app-touch);
    }

    /* Kutunun kendisi küçük kalır, dokunma alanı etiketiyle birlikte büyür */
    .form-check {
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: var(--app-touch);
    }

    .form-check .form-check-input {
        margin: 0;
        flex: 0 0 auto;
    }

    .form-check .form-check-label {
        margin: 0;
    }

    /* Yan yana duran buton grupları sıkışıp okunmaz oluyordu */
    .btn-group:not(.btn-group-sm) {
        flex-wrap: wrap;
        gap: 6px;
    }

    .btn-group:not(.btn-group-sm) > .btn {
        border-radius: 8px !important;
    }

    /* Kartlar arası boşluk: panelde `col-md-4 mb-4` telefonda tek kolona
       düşüyor ama alt boşluk kalıyor, üst üste yığılmış görünüyordu */
    .card {
        border-radius: 14px;
        border-color: var(--app-line);
    }

    /* Modal telefonda tam ekran açılsın (uygulama sayfası gibi) */
    .modal-dialog {
        margin: 0;
        max-width: 100%;
        min-height: 100%;
    }

    .modal-content {
        min-height: 100vh;
        border-radius: 0;
        border: 0;
    }

    /* Bildirim tostları üst çubuğun altına insin */
    .toast-container {
        top: 64px !important;
        left: 12px;
        right: 12px !important;
        padding: 0 !important;
    }

    .toast-container .toast {
        width: 100%;
    }

    #footer {
        font-size: 11.5px;
    }
}

/* ---------------------------------------------------------------
   Ana ekrana eklenmiş hâl (tam ekran)
   --------------------------------------------------------------- */

@media (display-mode: standalone) {
    /* Tarayıcı çubuğu yok; durum çubuğunun altına girmemek için */
    body > header {
        padding-top: env(safe-area-inset-top);
    }
}

/* ---------------------------------------------------------------
   Tablo kaydırma sarmalayıcısı (wrapWideTables ile eklenir)
   --------------------------------------------------------------- */

.app-table-scroll {
    width: 100%;
    overflow-x: auto;
}