/* MANAGER CSS - MOBİL & MASAÜSTÜ UYUMLU */

/* Main.css çakışmalarını ez */
body {
    overflow: hidden !important; 
    padding: 0 !important;
    display: block !important;
    background-color: var(--bg-color);
}

/* Ekran Yapısı - MASAÜSTÜNDE ORTALANMIŞ APP GÖRÜNÜMÜ */
.screen { 
    display: none; height: 100vh; width: 100%; max-width: 480px; 
    margin: 0 auto; position: relative; 
    background: var(--bg-color); box-shadow: 0 0 30px rgba(0,0,0,0.15); 
}
.screen.active-screen { display: flex; flex-direction: column; }

/* Giriş Ekranı Ortala */
.center-layout {
    align-items: center; justify-content: center; overflow-y: auto;
}

/* Header (Sabit) */
.fixed-header {
    position: absolute; top: 0; left: 0; width: 100%; box-sizing: border-box;
    height: 60px; background: var(--card-bg);
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 20px; border-bottom: 1px solid var(--input-border);
    z-index: 100;
}
.branch-badge { background: var(--brand-red); color: white; padding: 2px 8px; border-radius: 4px; font-size: 0.7rem; font-weight: bold; }
.mgr-name { font-weight: bold; font-size: 0.9rem; margin-left: 5px; color: var(--text-main); }
.theme-btn { cursor: pointer; font-size: 1.2rem; margin-right: 15px; color: var(--text-sub); }
.logout-btn { background: none; border: none; color: var(--brand-blue); font-size: 1.2rem; padding: 0; width: auto; box-shadow: none; margin: 0; }

/* İçerik Alanı (Scrollable) */
.content-scrollable {
    flex: 1; overflow-y: auto; background: var(--bg-color);
    position: relative; margin-top: 60px; /* Header payı */
    height: calc(100vh - 130px); /* Header + Footer payı */
}

/* Tab İçerikleri */
.tab-content { display: none; animation: fadeIn 0.3s; }
.tab-content.active { display: block; }

/* Alt Navigasyon (Instagram Style) */
.bottom-nav {
    position: absolute; bottom: 0; left: 0; width: 100%; box-sizing: border-box;
    height: 70px; background: var(--card-bg); border-top: 1px solid var(--input-border);
    display: flex; justify-content: space-around; align-items: center;
    padding-bottom: env(safe-area-inset-bottom); z-index: 1000;
}
.nav-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: var(--text-sub); font-size: 0.7rem; cursor: pointer; flex: 1; height: 100%;
}
.nav-item i { font-size: 1.4rem; margin-bottom: 4px; transition: 0.2s; }
.nav-item.active { color: var(--brand-red); }
.nav-item.active i { transform: translateY(-3px); }

/* Oyun Seçici */
.game-select-container { margin-bottom: 15px; }
.game-select-container select { 
    width: 100%; padding: 12px; border-radius: 8px; border: 1px solid var(--input-border);
    background: var(--card-bg); color: var(--text-main); font-weight: bold; outline: none;
}

/* BURADAN SONRASI AYNEN KALSIN (Kart Stilleri vs...) */

/* Kart Stilleri */
.status-card { text-align: center; border-top: 4px solid var(--brand-blue); padding: 20px !important; margin-bottom: 15px; }
.st-label { font-size: 0.8rem; font-weight: bold; color: var(--text-sub); letter-spacing: 1px; }
.st-main { font-size: 1.5rem; font-weight: 800; color: var(--brand-red); margin: 10px 0; }
.st-timer { font-family: 'Oswald', sans-serif; font-size: 3rem; line-height: 1; color: var(--text-main); }

.stat-box { text-align: center; padding: 15px !important; margin-bottom: 15px; }
.stat-box i { font-size: 1.5rem; color: var(--text-sub); margin-bottom: 5px; }
.stat-box.active { border: 1px solid var(--brand-blue); }
.stat-box .val { font-size: 1.5rem; font-weight: 800; }

.card-title { font-size: 1rem; color: var(--text-sub); border-bottom: 1px dashed var(--input-border); padding-bottom: 10px; margin-top: 0; }
.settings-list { list-style: none; padding: 0; margin: 0; }
.settings-list li { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--stripe-1); font-size: 0.9rem; }
.settings-list b { color: var(--brand-blue); }

/* Oyun Seçici */
.game-select-container { margin-bottom: 15px; }
.game-select-container select { 
    width: 100%; padding: 12px; border-radius: 8px; border: 1px solid var(--input-border);
    background: var(--card-bg); color: var(--text-main); font-weight: bold;
}

/* Alt Navigasyon (Instagram Style) */
.bottom-nav {
    height: 70px; background: var(--card-bg); border-top: 1px solid var(--input-border);
    display: flex; justify-content: space-around; align-items: center;
    flex-shrink: 0; padding-bottom: env(safe-area-inset-bottom); z-index: 1000;
}
.nav-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: var(--text-sub); font-size: 0.7rem; cursor: pointer; flex: 1; height: 100%;
}
.nav-item i { font-size: 1.4rem; margin-bottom: 4px; transition: 0.2s; }
.nav-item.active { color: var(--brand-red); }
.nav-item.active i { transform: translateY(-3px); }

/* Listeler */
.player-row {
    background: var(--card-bg); padding: 12px; border-radius: 8px; margin-bottom: 8px;
    display: flex; align-items: center; border-left: 4px solid transparent; box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.player-row.online { border-left-color: #27ae60; }
.p-rank { font-weight: bold; width: 30px; color: var(--text-sub); }
.p-nick { font-weight: bold; font-size: 1rem; }
.p-score { margin-left: auto; font-weight: 800; color: var(--brand-blue); font-size: 1.1rem; }

.segment-nav { display: flex; background: var(--input-bg); padding: 5px; border-radius: 8px; margin-bottom: 15px; }
.seg-btn { flex: 1; background: none; border: none; padding: 10px; color: var(--text-sub); border-radius: 6px; box-shadow: none; font-size: 0.8rem; margin: 0; }
.seg-btn.active { background: var(--card-bg); color: var(--brand-red); box-shadow: 0 2px 5px rgba(0,0,0,0.1); }

/* TV Grid */
.tv-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.btn-mini { width: auto; padding: 5px 15px; font-size: 0.8rem; margin: 0; background: var(--brand-blue); }
.tv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tv-card { 
    background: var(--card-bg); padding: 15px; border-radius: 8px; text-align: center; 
    border: 1px solid var(--input-border); position: relative; box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.btn-del-tv { position: absolute; top: 5px; right: 5px; color: var(--brand-red); cursor: pointer; }

/* Modal */
.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 2000; align-items: center; justify-content: center; }
.modal-card { width: 90%; max-width: 350px; position: relative; padding: 20px; }
.modal-close { position: absolute; top: 10px; right: 15px; font-size: 1.5rem; cursor: pointer; color: var(--text-sub); }
.qr-box { width: 100%; height: 250px; background: #000; margin-bottom: 15px; border-radius: 8px; overflow: hidden; }

/* ========================================================
   S25 ULTRA & MODERN MOBİL ZIRHI (DYNAMIC VIEWPORT)
   ======================================================== */
/* 1. Alttaki sanal butonların ekranı kesmesini kesin olarak engeller */
body, html {
    height: 100dvh !important; /* dvh: Dynamic Viewport Height (Sihirli Çözüm) */
    width: 100vw;
    overflow: hidden;
}

.screen { height: 100dvh !important; }

/* 2. Alt Navigasyon Barı (Telefon çentiği/çizgisi boşluğunu korur) */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100%;
    max-width: 480px;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important; 
    z-index: 1000;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 3. Üst Header Esneklik Zırhı (Tavan Boşluklu) */
.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100%;
    max-width: 480px;
    z-index: 1000;
    /* Üstten 12px nefes boşluğu bırakır, çentikli telefonsa çentik kadar daha ekler */
    padding-top: calc(12px + env(safe-area-inset-top, 0px)); 
    padding-bottom: 10px;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box; /* Taşmaları engeller */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    height: auto !important; 
    display: flex;
    justify-content: space-between;
    align-items: center !important; 
}

/* Şube ve Yönetici isimlerini küçült (yerden tasarruf) */
.fixed-header .header-left > div:not(:first-child) {
    font-size: 0.65rem !important;
    line-height: 1.1;
    margin-top: 2px;
}

.fixed-header .header-left {
    max-width: 65%; /* Butonlara yer bırakır */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 4. SADECE ANA SATIRLARI KESMEYİ KALDIR VE ALT SATIRA GEÇİR */
.fixed-header .header-left > div {
    width: 100%;
    white-space: normal !important; /* <--- ÜÇ NOKTA KALKTI, ALT SATIRA GEÇİR (Mükemmel Çözüm) */
    overflow: visible !important;
    text-overflow: unset !important;
    line-height: 1.2;
    margin-bottom: 2px;
}

/* 5. İçerik Kaydırma Alanı Dolgu Ayarı (JS ile Dinamik Yönetilecek) */
.content-scrollable {
    height: 100dvh !important;
    overflow-y: auto;
    padding-top: calc(70px + env(safe-area-inset-top, 0px)); /* Varsayılan */
    padding-bottom: calc(85px + env(safe-area-inset-bottom, 10px)) !important;
}

/* ========================================================
   ENTEGRE ODAK MODU (SAĞA YASLI YEKPARE OKLAR)
   ======================================================== */
.header-hidden { transform: translateY(-100%); }
.nav-hidden { transform: translateY(100%); }

/* Ortak Entegre Ok Tasarımı (Ana Kutularla Aynı Renk, Sağ Kenarda) */
.integrated-toggle {
    position: absolute;
    background: var(--card-bg); /* Üst ve Alt barın orijinal beyaz rengi (yekpare yapar) */
    color: var(--brand-blue); /* Ok rengi IF Sokak mavisi */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1010;
    cursor: pointer;
    border: 1px solid var(--input-border);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.integrated-toggle i { 
    font-size: 14px; 
    transition: transform 0.3s ease; 
}

.integrated-toggle:active { background: var(--bg-color); }

/* Üst Header Oku (Sağda, Aşağı Bakan Çıkıntı) */
.header-toggle-ok {
    bottom: -24px; /* Tam sınırdan dışarı sarkıt */
    right: 20px; /* EKRANIN SAĞINA YASLA */
    width: 45px;
    height: 25px;
    border-radius: 0 0 12px 12px;
    border-top: none; /* Header ile birleşme çizgisini yok et (yekpare) */
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

/* Header gizlenince ikon kendi etrafında dönsün (aşağı baksın) */
.header-hidden .header-toggle-ok i {
    transform: rotate(180deg);
}

/* Alt Footer Oku (Sağda, Yukarı Bakan Çıkıntı) */
.nav-toggle-ok {
    top: -24px; /* Tam sınırdan dışarı sarkıt */
    right: 20px; /* EKRANIN SAĞINA YASLA */
    width: 45px;
    height: 25px;
    border-radius: 12px 12px 0 0;
    border-bottom: none; /* Nav ile birleşme çizgisini yok et (yekpare) */
    box-shadow: 0 -4px 6px rgba(0,0,0,0.05);
}

/* Footer gizlenince ikon kendi etrafında dönsün (yukarı baksın) */
.nav-hidden .nav-toggle-ok i {
    transform: rotate(180deg);
}

/* ========================================================
   HEADER BUTONLARI KOMPAKT ZIRHI (Büyütülmüş ve Ortalanmış)
   ======================================================== */
.fixed-header .header-right button {
    padding: 0 8px !important;
    font-size: 0.7rem !important; /* 0.65'ten 0.7'ye büyütüldü */
    font-weight: 700 !important;
    box-shadow: none !important;
    border-bottom-width: 1px !important;
    min-height: unset !important;
    height: 32px !important; /* 30px'den 32px'e büyütüldü */
    border-radius: 6px !important;
    line-height: 1 !important;
    margin: 0 !important;
    white-space: nowrap !important;
}

.fixed-header .header-right {
    display: flex;
    align-items: center !important;
    height: 100%; /* Dikey ortalama boşluklarını doldurması için eklendi */
}

.fixed-header .header-right {
    align-items: center !important;
}