/*
 * Eronor Mobile Responsive Overrides
 * ----------------------------------
 * Admin + Partner + Restoran panelleri icin genel mobil iyilestirmeler.
 * Sadece dar viewport'larda (< 768px) devreye girer -> masaustu layout'u bozmaz.
 *
 * Kapsam:
 *   - Modal fullscreen (mobilde form/tab'lar rahat sigsin)
 *   - Tab bar yatay scroll (6+ sub-tab dar ekranda swipe ile gezilir)
 *   - Nav/icon toolbar scroll (Restoran modal ustundeki 10+ ikon)
 *   - Table responsive wrapper (POS, Cihaz, Zone tablolari)
 *   - Form input dokunmatik boyut (42px min-height)
 *   - Card grid padding
 *   - Sticky modal footer (Kaydet butonu her zaman erisilebilir)
 *
 * Regressiondan kacinmak icin:
 *   - Sadece @media (max-width: 767.98px) kapsaminda
 *   - !important kullaniliyor cunku Vue scoped CSS zaten inline
 *   - Belirli class'lar (.no-mobile-wrap, .modal-fullscreen) hariç tutuluyor
 */

/* ==========================================================================
   MOBILE (< 768px)
   ========================================================================== */
@media (max-width: 767.98px) {

    /* --------------------------------------------------------------
       BODY / GLOBAL
       -------------------------------------------------------------- */
    body {
        font-size: 14px;
    }

    /* Container'larda yan bosluklari azalt - dar ekranda icerige yer ac */
    .container-fluid,
    .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* --------------------------------------------------------------
       MODAL - Full-screen mobilde
       -------------------------------------------------------------- */
    .modal-dialog:not(.modal-fullscreen):not(.modal-sm):not(.modal-md-noresize) {
        margin: 0 !important;
        max-width: 100vw !important;
        width: 100vw !important;
        min-height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .modal-dialog:not(.modal-fullscreen):not(.modal-sm) .modal-content {
        border-radius: 0 !important;
        border: none !important;
        min-height: 100vh !important;
        max-height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Modal body scroll edilebilir olsun - footer sabit kalsin */
    .modal-body {
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Sticky footer - Kaydet butonu her zaman gorulur */
    .modal-footer {
        position: sticky !important;
        bottom: 0 !important;
        z-index: 5 !important;
        background: inherit !important;
        border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
        padding: 8px 12px !important;
    }

    .modal-header {
        padding: 10px 12px !important;
    }

    .modal-title,
    .modal-header h5,
    .modal-header h6 {
        font-size: 16px !important;
    }

    /* --------------------------------------------------------------
       NAV / TAB - Yatay scroll
       -------------------------------------------------------------- */
    .nav-tabs,
    .nav-pills,
    [role="tablist"] {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .nav-tabs::-webkit-scrollbar,
    .nav-pills::-webkit-scrollbar,
    [role="tablist"]::-webkit-scrollbar {
        height: 3px;
    }

    .nav-tabs::-webkit-scrollbar-thumb,
    .nav-pills::-webkit-scrollbar-thumb,
    [role="tablist"]::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.2);
        border-radius: 3px;
    }

    .nav-tabs .nav-link,
    .nav-tabs .nav-item,
    .nav-pills .nav-link,
    [role="tablist"] > button,
    [role="tablist"] > a {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        font-size: 13px !important;
        padding: 6px 10px !important;
    }

    /* Ust icon toolbar (Restoran modal - 10+ ikon) */
    .icon-toolbar,
    #store-tab-icons,
    .storeTab-nav,
    ul.nav.icon-nav {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
    }

    /* --------------------------------------------------------------
       FORM - Dokunmatik boyut
       -------------------------------------------------------------- */
    .form-control,
    .form-select,
    .form-check-input,
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="number"],
    input[type="search"],
    select,
    textarea {
        min-height: 42px !important;
        font-size: 15px !important; /* iOS zoom onlemek icin >= 16px ideal, ama 15px yeterli */
    }

    .form-check-input {
        min-height: 22px !important;
        min-width: 22px !important;
    }

    .form-floating > label {
        font-size: 13px !important;
    }

    /* Small button'lar mobilde daha kucuk kalmasin */
    .btn {
        min-height: 38px;
        padding: 6px 12px;
        font-size: 14px;
    }

    .btn-sm {
        min-height: 32px;
        padding: 4px 8px;
        font-size: 12px;
    }

    /* Icon-only buttonlarda min-width */
    .btn-group-sm > .btn,
    .btn-group > .btn {
        min-width: 34px;
    }

    /* --------------------------------------------------------------
       TABLE - Horizontal scroll wrapper
       -------------------------------------------------------------- */
    .table-responsive-mobile,
    .pos-table-wrap,
    .legacy-delivery-table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .table:not(.no-mobile-scroll) {
        font-size: 12.5px;
    }

    .table:not(.no-mobile-scroll) thead th,
    .table:not(.no-mobile-scroll) tbody td {
        padding: 6px 8px !important;
        white-space: nowrap;
    }

    /* --------------------------------------------------------------
       KART / GRID
       -------------------------------------------------------------- */
    .row {
        --bs-gutter-x: 0.5rem;
    }

    /* Kart grid mobilde her zaman tek kolon */
    .card {
        margin-bottom: 8px;
    }

    /* --------------------------------------------------------------
       SIDEBAR (main-component.vue restoran ekrani)
       -------------------------------------------------------------- */
    .sidebar,
    .b-example-vr,
    aside.sidebar {
        max-width: 100vw !important;
    }

    /* main-component d-flex flex-nowrap layout'unda mobile column */
    main.d-flex.flex-nowrap {
        flex-direction: column !important;
        flex-wrap: wrap !important;
    }

    /* --------------------------------------------------------------
       HEADER / TOGGLE ROW
       -------------------------------------------------------------- */
    /* Maintenance/Cache/Web/Kiosk toggle satirini kucult */
    .form-check.form-switch {
        margin-bottom: 4px !important;
    }

    /* --------------------------------------------------------------
       LEAFLET HARITA
       -------------------------------------------------------------- */
    .restaurant-location-map,
    .delivery-mini-map,
    .leaflet-container {
        min-height: 260px !important;
        max-height: 60vh;
    }

    /* --------------------------------------------------------------
       BADGE / STATUS
       -------------------------------------------------------------- */
    .badge {
        font-size: 11px;
        padding: 4px 8px;
    }

    /* --------------------------------------------------------------
       ORDER / DASHBOARD ekrani
       -------------------------------------------------------------- */
    .order-box,
    .card-box {
        margin-bottom: 8px;
    }

    /* Dropdown mobilde tam genislik */
    .dropdown-menu {
        max-width: calc(100vw - 20px);
        overflow-x: auto;
    }

    /* --------------------------------------------------------------
       STORE SETTINGS MODAL (#storeSettings)
       Header'daki 4 toggle (Kiosk/Web/Cache/Maintenance) position-absolute
       + float-end ile masaustunde saga hizaliyken mobilde h3 uzerine ust uste
       yigiliyordu. Toggle'lari yatay scroll'a al, header'i column yap.
       -------------------------------------------------------------- */
    #storeSettings.modal {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    #storeSettings .modal-dialog {
        padding: 0 !important;
    }

    #storeSettings .modal-header {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 8px 12px !important;
        gap: 8px !important;
    }

    #storeSettings .modal-header h3 {
        font-size: 16px !important;
        margin: 0 !important;
        line-height: 1.3;
    }

    /* position-absolute'i sifirla - static akisa gecir */
    #storeSettings .modal-header > .position-absolute {
        position: static !important;
        transform: none !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        gap: 10px !important;
        padding: 4px 0;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    #storeSettings .modal-header > .position-absolute::-webkit-scrollbar {
        height: 2px;
    }

    #storeSettings .modal-header .form-check.form-switch {
        float: none !important;
        margin: 0 !important;
        white-space: nowrap;
        flex-shrink: 0;
        font-size: 12px !important;
        display: flex !important;
        align-items: center;
        min-width: max-content;
        padding-left: 0;
    }

    #storeSettings .modal-header .form-check-input {
        margin: 0 6px 0 0 !important;
        min-height: 20px !important;
        min-width: 32px !important;
    }

    #storeSettings .modal-header .form-check-label {
        font-size: 12px !important;
        color: #0d6efd !important;
    }

    /* Modal body padding kucult - form alanlarina yer ac */
    #storeSettings .modal-body {
        padding: 8px !important;
    }

    /* Ikon toolbar (10+ icon) tek yatay scroll bar */
    #storeSettings .modal-body #myTab {
        margin-bottom: 6px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }

    #storeSettings .modal-body #myTab .nav-link {
        padding: 6px 8px !important;
    }

    #storeSettings .modal-body #myTab .nav-link svg {
        width: 22px !important;
        height: 22px !important;
    }

    /* Sub-tab bar (Genel/Yerellestirme/Web/...) - ikon toolbar altinda ayri scroll */
    #storeSettings [role="tablist"]:not(#myTab) .nav-link,
    #storeSettings [role="tablist"]:not(#myTab) > button {
        padding: 6px 12px !important;
        font-size: 13px !important;
    }

    /* --------------------------------------------------------------
       RESTORAN CASE EKRANI - Siparis kolonlari (main-component.vue)
       Masaustunde 4 kolon yan yana (Bekliyor / Onayli / Hazirlaniyor / Hazir)
       Mobilde her biri col-12 -> dikey akis, baslik+sayaç okunakli
       -------------------------------------------------------------- */
    .siparis_sutunlari .row {
        flex-direction: column !important;
        margin: 0 !important;
    }

    .siparis_sutunlari .row > .col,
    .siparis_sutunlari .row > [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        margin-bottom: 8px !important;
    }

    /* ColumnHeader (baslik + sayaç) - yatay tasmayi engelle */
    .siparis_sutunlari .col > .rounded-3,
    .siparis_sutunlari .col .fw-bold,
    .siparis_sutunlari .col .card-header {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        padding: 8px 12px !important;
    }

    /* OrderBox kartlari mobilde tam genislik + kompakt */
    .siparis_sutunlari .OrderBox,
    .siparis_sutunlari .order-box {
        margin-bottom: 6px;
    }

    /* Bos durum mesaji - "Henuz goruntulenecek siparis yok" */
    .restaurant-main-content h1,
    .restaurant-main-content h3.alert {
        font-size: 18px !important;
        padding: 12px !important;
        text-align: center;
    }

    /* --------------------------------------------------------------
       MAINMENU (navbar) - Mobilde acilir menu item'lari dokunmatik iyilestirme
       Item'lar arasi bosluk + tam genislik + border ayirici
       -------------------------------------------------------------- */
    .navbar-collapse.show .navbar-nav .nav-link,
    .navbar-collapse.collapsing .navbar-nav .nav-link {
        padding: 12px 16px !important;
        border-radius: 8px;
        margin-bottom: 4px;
        min-height: 46px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .navbar-collapse.show .navbar-nav .nav-link:hover,
    .navbar-collapse.show .navbar-nav .nav-link:active {
        background-color: rgba(255, 255, 255, 0.08);
    }

    /* Dropdown item'lar */
    .navbar-collapse.show .dropdown-menu {
        border: none !important;
        padding-left: 16px;
    }

    /* Toggle switch iceren nav-link (Web/Kiosk) - farkli goster */
    .navbar-collapse.show .nav-link:has(.form-check-input) {
        background-color: rgba(255, 255, 255, 0.05);
    }

    /* --------------------------------------------------------------
       LAYOUT SPACER - MainMenu (navbar.fixed-top) ve HeaderMenu (sticky-top)
       Restoran ekranindaki MainMenu.vue navbar 'fixed-top' - dokumandan
       cikariyor, altindaki icerik uste kayiyor. Cozum: mobilde ana content'e
       padding-top ekle -> icerik navbar'in altinda basliyor.
       HeaderMenu (admin) sticky-top - dokumandan cikmaz, override GEREKMEZ.
       -------------------------------------------------------------- */
    .restaurant-main-content {
        padding-top: 68px !important;
    }

    /* --------------------------------------------------------------
       CATALOG - Kategori-urun listesi (Catalog.vue)
       PC'de .catalog-scroll ic scroll (height: 94vh) sticky-top header
       ile catisma yok. Mobilde restaurant-main-content'e zaten padding-top
       verildigi icin catalog-scroll ekstra margin-top gerekmez.
       -------------------------------------------------------------- */
    .catalog-scroll {
        height: calc(100vh - 68px) !important;
        max-height: calc(100vh - 68px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Urun kartlari mobilde sol margin kucult - ekran genisligini kullansin */
    .collapse[id^="category"] > .card,
    .collapse[id^="category"] .card.ms-5 {
        margin-left: 8px !important;
        margin-right: 8px !important;
    }

    /* Urun kartinda logo+baslik+status butonlari sikismasin */
    .collapse[id^="category"] .card-body .clearfix > img {
        width: 60px !important;
        height: 60px !important;
        object-fit: cover;
    }

    .collapse[id^="category"] .card-body .float-start.ms-2 .fw-bold {
        font-size: 13px !important;
        line-height: 1.3;
    }

    .collapse[id^="category"] .card-body .text-muted {
        font-size: 11px !important;
    }

    /* Urun kartindaki 3 status buton (durum/ozel/onerilen) kucult */
    .collapse[id^="category"] .card-body .position-absolute.top-0.end-0 .btn {
        padding: 2px 6px !important;
        min-height: 30px !important;
    }

    /* Urun Ekle butonu ms-5'i azalt */
    .collapse[id^="category"] + .ms-5,
    .collapse[id^="category"] .ms-5 {
        margin-left: 8px !important;
    }
}

/* ==========================================================================
   TABLET (768px - 991px) - Ek kucultmeler
   Kaldirildi: kullanici bu range'de modal/font kucultmesini istemedi.
   Sadece nav-tabs tasarsa scroll edilebilir kalir (regression-safe).
   ========================================================================== */
@media (min-width: 768px) and (max-width: 991.98px) {

    /* Tab bar tabletde de tasarsa scroll edilebilir - font/margin dokunulmaz */
    .nav-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
    }

    .nav-tabs .nav-link {
        white-space: nowrap !important;
    }
}

/* ==========================================================================
   Ortak - tum ekranlarda dokunmatik iyilestirme
   ========================================================================== */

/* Tıklanabilir alanlar icin cursor: pointer */
.cursor-pointer {
    cursor: pointer;
}

/* Yatay scroll edilebilir alanlar icin smooth scroll */
[role="tablist"],
.nav-tabs,
.nav-pills,
.table-responsive,
.overflow-auto {
    scroll-behavior: smooth;
}

/* iOS Safari tap highlight'i temizle */
button,
a,
[role="tab"],
[role="button"] {
    -webkit-tap-highlight-color: transparent;
}