/**
 * Mobil Sidebar Düzeltmeleri
 * PWA ve mobil cihazlar için sidebar iyileştirmeleri
 */

/* Mobil Sidebar Overlay - Mevcut overlay'i güçlendir */
@media (max-width: 1199.98px) {
    body.overlay-active::after {
        content: '' !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(0, 0, 0, 0.5) !important;
        z-index: 999 !important;
        opacity: 0.65 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        animation: fadeIn 0.3s ease !important;
    }

    .navbar-header {
        z-index: 1001 !important;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Mobil Sidebar - Tüm CSS override'ları */
@media (max-width: 1199.98px) {
    /* Sidebar base styles - tüm özellikleri override et */
    .sidebar {
        position: fixed !important;
        top: 0 !important;
        left: -100% !important;
        right: auto !important;
        width: 280px !important;
        max-width: 85vw !important;
        height: 100vh !important;
        background-color: var(--white, #ffffff) !important;
        z-index: 1000 !important;
        transition: left 0.3s ease !important;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        transform: none !important;
        /* RTL/LTR override */
        inset-inline-start: -100% !important;
        inset-block-start: 0 !important;
        margin: 0 !important;
    }
    
    /* Sidebar açık durumu */
    .sidebar.sidebar-open {
        left: 0 !important;
        right: auto !important;
        inset-inline-start: 0 !important;
        transform: none !important;
    }
    
    /* Sidebar active durumunu override et (mobilde aktif olmamalı) */
    .sidebar.active {
        left: -100% !important;
        inset-inline-start: -100% !important;
        width: 280px !important;
    }
    
    .sidebar.active.sidebar-open {
        left: 0 !important;
        inset-inline-start: 0 !important;
    }
    
    /* Sidebar close button - mobilde görünür */
    .sidebar-close-btn {
        display: flex !important;
        position: absolute;
        top: 12px;
        right: 12px;
        width: 36px;
        height: 36px;
        border: 1px solid var(--input-form-light, #e5e7eb);
        border-radius: 50%;
        background: var(--white, #ffffff);
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 1001;
        transition: all 0.2s ease;
    }
    
    .sidebar-close-btn:hover {
        background: var(--neutral-100, #f3f4f6);
        transform: scale(1.1);
    }
    
    /* Mobil toggle button - her zaman görünür */
    .sidebar-mobile-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border: none;
        background: transparent;
        cursor: pointer;
        padding: 0;
        margin-right: 8px;
    }
    
    .sidebar-mobile-toggle .icon {
        font-size: 24px;
        color: var(--text-primary-light, #1f2937);
    }
    
    /* Desktop toggle - mobilde gizle */
    .sidebar-toggle {
        display: none !important;
    }
    
    /* Body scroll lock when sidebar open */
    body.overlay-active {
        overflow: hidden !important;
        /* iOS: position:fixed body kullanmıyoruz; layout-shift sebebiyle
           sidebar açıldıktan ~300ms sonra ghost-click overlay'e düşüyor
           ve sidebar otomatik kapanıyor. overflow:hidden yeterli. */
    }

    /* Touch hedeflerinde 300ms tıklama gecikmesini ve double-tap zoom'u
       devre dışı bırak — iOS'ta ghost-click problemini önler */
    .sidebar-mobile-toggle,
    .sidebar-close-btn,
    .sidebar-menu li > a,
    .sidebar-menu .dropdown > a {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
    
    
    /* Dashboard main - mobilde full width */
    .dashboard-main {
        margin-left: 0 !important;
        width: 100% !important;
        background-color: var(--bg-color, #f9fafb) !important;
    }
    
    /* Body background düzeltmesi */
    body {
        background-color: var(--bg-color, #f9fafb) !important;
    }
    
    /* Dashboard main body background */
    .dashboard-main-body {
        background-color: transparent !important;
    }
    
    /* Card background düzeltmesi */
    .card {
        background-color: var(--white, #ffffff) !important;
    }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .sidebar {
        width: 300px;
    }
}

/* Küçük mobil cihazlar */
@media (max-width: 575.98px) {
    .sidebar {
        width: 260px;
        max-width: 90vw;
    }
    
    .sidebar-menu {
        padding: 12px 8px;
    }
    
    .sidebar-menu li a {
        padding: 12px 16px;
        font-size: 14px;
    }
    
    .sidebar-menu .menu-icon {
        font-size: 20px;
        margin-right: 12px;
    }
}

/* Touch-friendly improvements */
@media (hover: none) and (pointer: coarse) {
    .sidebar-menu li a {
        min-height: 48px;
        display: flex;
        align-items: center;
    }
    
    .sidebar-close-btn {
        min-width: 44px;
        min-height: 44px;
    }
    
    .sidebar-mobile-toggle {
        min-width: 44px;
        min-height: 44px;
    }
}

/* Dark mode support */
[data-theme="dark"] .sidebar {
    background-color: var(--dark-bg, #1f2937);
    border-right: 1px solid var(--dark-border, #374151);
}

[data-theme="dark"] .sidebar-close-btn {
    background: var(--dark-bg, #1f2937);
    border-color: var(--dark-border, #374151);
    color: var(--dark-text, #f9fafb);
}

[data-theme="dark"] .overlay-active::before {
    background: rgba(0, 0, 0, 0.7);
}

/* Dark mode mobil background düzeltmesi */
@media (max-width: 1199.98px) {
    html[data-theme="dark"] body {
        background-color: var(--bg-color, #1B2431) !important;
    }
    
    html[data-theme="dark"] .dashboard-main {
        background-color: var(--bg-color, #1B2431) !important;
    }
    
    html[data-theme="dark"] .card {
        background-color: var(--white, #273142) !important;
    }
    
    html[data-theme="dark"] .navbar-header {
        background-color: var(--white, #273142) !important;
    }
}

/* Mobilde body ve main container background düzeltmesi */
@media (max-width: 1199.98px) {
    body {
        background-color: var(--bg-color, #f9fafb) !important;
    }
    
    html[data-theme="dark"] body {
        background-color: var(--bg-color, #1B2431) !important;
    }
    
    .dashboard-main {
        background-color: var(--bg-color, #f9fafb) !important;
    }
    
    html[data-theme="dark"] .dashboard-main {
        background-color: var(--bg-color, #1B2431) !important;
    }
    
    .dashboard-main-body {
        background-color: transparent !important;
    }
    
    /* Card'ların background'u düzelt */
    .card {
        background-color: var(--white, #ffffff) !important;
    }
    
    html[data-theme="dark"] .card {
        background-color: var(--white, #273142) !important;
    }
}

/* Yönetici Özeti kartı - her zaman mavi (index sayfası), diğer .card kurallarını ez */
#yonetici-ozet-kart,
#yonetici-ozet-kart .card-body,
#yonetici-ozet-kart .yonetici-ozet-body,
#yonetici-ozet-kart .card-body .row,
#yonetici-ozet-kart .card-body .table-responsive,
#yonetici-ozet-kart .card-body .border-top,
#yonetici-ozet-kart .table {
    background-color: #E4F1FF !important;
}
#yonetici-ozet-kart .card-header {
    background-color: #cce0ff !important;
    border-color: #b3d4ff !important;
}
#yonetici-ozet-kart {
    border-color: #b3d4ff !important;
}