/* ============================================
   BERBER SİSTEMİ — GLOBAL MOBİL CSS
   mobile-first, 320px → md(768px) → lg(1024px)
   ============================================ */

/* ── Reset & Base ──────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }

/* ── Touch targets ─────────────────────────── */
button, a, input, select, textarea {
  min-height: 44px;
  touch-action: manipulation;
}
button { cursor: pointer; }

/* ── Bottom Navigation (mobile only) ──────── */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--bg2);
  border-top: 1px solid var(--border);
  z-index: 9999;
  padding: 0;
  height: 56px;
  box-shadow: 0 -4px 20px rgba(0,0,0,.4);
}
.bottom-nav-inner {
  display: flex;
  height: 100%;
}
.bn-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--muted);
  text-decoration: none;
  font-family: 'Barlow Condensed', sans-serif, system-ui, sans-serif;
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: color .2s;
  border: none;
  background: none;
  padding: 0;
  min-height: auto;
}
.bn-item.active { color: var(--gold); }
.bn-item svg { width: 18px; height: 18px; flex-shrink: 0; display: block; }

/* ── Kart sistemi (tablo satırları için) ─── */
.mobil-kart {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px 16px;
  margin-bottom: 8px;
}
.mobil-kart-satir {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 0;
  font-size: 13px;
}
.mobil-kart-satir:not(:last-child) {
  border-bottom: 1px solid var(--border);
}
.mk-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  flex-shrink: 0;
  padding-top: 1px;
}
.mk-val {
  color: var(--text);
  text-align: right;
  font-size: 13px;
}

/* ── Responsive utilities ───────────────────── */
.hide-mobile { display: none !important; }
.show-mobile { display: flex !important; }

@media (min-width: 768px) {
  .hide-mobile { display: initial !important; }
  .show-mobile { display: none !important; }
  .bottom-nav  { display: none !important; }
}

/* ── Mobile breakpoint ──────────────────────── */
@media (max-width: 767px) {
  /* Sidebar tamamen gizle */
  .sidebar { display: none !important; }
  
  /* Main tam genişlik al */
  .main { width: 100% !important; }
  body { overflow-x: hidden !important; }

  /* Bottom nav göster */
  .bottom-nav { display: block; }

  /* Main içeriğe alt padding (bottom nav için) */
  .main { padding-bottom: 64px; }

  /* Tam genişlik butonlar */
  .btn-row { flex-direction: column; }
  .btn-row .btn-ileri,
  .btn-row .btn-geri { width: 100%; }

  /* Input'lar tam genişlik */
  .form-row { grid-template-columns: 1fr !important; }

  /* Drawer tam ekran */
  .detay-panel,
  .drawer { width: 100vw !important; max-width: 100vw !important; min-height: 100dvh !important; height: auto !important; }
  .drawer-overlay,
  .detay-overlay { align-items: stretch !important; }

  /* Modal tam ekran */
  .modal { max-width: 100vw !important; width: 100vw !important; margin: 0 !important; border-radius: 0 !important; min-height: 100dvh !important; height: auto !important; overflow-y: auto; }
  .modal-overlay { align-items: flex-end !important; padding: 0 !important; }

  /* Tablo başlıklarını gizle */
  .tablo-head,
  .t-head { display: none !important; }

  /* Tablo satırları karta dönüşür */
  .tablo-satir,
  .t-satir {
    display: block !important;
    padding: 14px 16px !important;
    margin-bottom: 6px !important;
    border: 1px solid var(--border) !important;
    border-radius: 6px !important;
    background: var(--bg2) !important;
  }
  .tablo-satir > *,
  .t-satir > * {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 13px;
    border-bottom: 1px solid var(--border);
  }
  .tablo-satir > *:last-child,
  .t-satir > *:last-child { border-bottom: none; }

  /* Stat grid 2 kolon */
  .stat-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Hizmet grid tek kolon */
  .hizmet-grid { grid-template-columns: 1fr !important; }
  .personel-grid-randevu { grid-template-columns: repeat(2, 1fr) !important; }

  /* Content padding */
  .content { padding: 16px !important; }
  .wrap { padding: 24px 16px 80px !important; }
}

/* Bottom nav link renkleri - tarayıcı default override */
.bottom-nav a,
.bottom-nav a:link,
.bottom-nav a:visited,
.bottom-nav a:hover,
.bottom-nav a:active {
  color: var(--muted) !important;
  text-decoration: none !important;
}
.bottom-nav a.active {
  color: var(--gold) !important;
}

/* ── WhatsApp Sabit Buton ──────────────────── */
.wa-btn {
  position: fixed;
  right: 20px;
  bottom: 80px; /* bottom-nav üstünde */
  width: 52px;
  height: 52px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(37,211,102,.4);
  z-index: 9998;
  text-decoration: none !important;
  transition: transform .2s, box-shadow .2s;
  -webkit-tap-highlight-color: transparent;
}
.wa-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 24px rgba(37,211,102,.5);
}
.wa-btn svg {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

/* Masaüstünde daha aşağıda (bottom-nav yok) */
@media (min-width: 768px) {
  .wa-btn {
    bottom: 28px;
    right: 28px;
    width: 56px;
    height: 56px;
  }
  .wa-btn svg {
    width: 30px;
    height: 30px;
  }
}
/* SAFARI / WHATSAPP FIX */

html,
body {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.content,
.wrap,
.main {
  padding-bottom: 120px !important;
}

button,
.btn,
.bn-item {
  min-height: 52px !important;
}

body {
  font-size: 16px !important;
  background: #111315 !important;
}
/* DURUM ÇUBUĞU TIKLAMA VE GÖRÜNÜRLÜK FIX */

/* 1. Bekliyor/Tamamlandı badge'ini tıklanabilir yap */
.bekliyor, .tamamlandi, .iptal, [class*="badge"], [class*="status"] {
    cursor: pointer !important;
    pointer-events: auto !important; /* Tıklamayı engelleyen her şeyi devre dışı bırakır */
    position: relative !important;
    z-index: 9999 !important; /* Katman olarak en üste alır */
}

/* 2. Eğer "Tamamlandı" seçeneği bir dropdown içindeyse mobilde görünmesini zorla */
select option {
    background-color: #1a1d21 !important;
    color: white !important;
}

/* 3. Modal ve Drawer (Açılır Panel) içindeki kaydırma sorununu çöz */
.drawer, .modal, .detay-panel {
    overflow-y: auto !important;
    max-height: 100dvh !important; /* Dinamik viewport yüksekliği */
    display: block !important; /* Gizli kalmasını engelle */
}

/* 4. Alt kısımda butonların kaybolmasını engellemek için ekstra boşluk */
.modal-content, .drawer-body {
    padding-bottom: 80px !important;
}
/* ── GÜVENLİ ALAN VE ÇAKIŞMA ÇÖZÜMÜ ── */

:root {
  /* iPhone alt barı için dinamik boşluk */
  --safe-bottom: env(safe-area-inset-bottom, 20px); 
}

/* Modal ve Drawer'ın altındaki butonların görünmesi için */
.modal, .drawer, .detay-panel {
  height: 100dvh !important;
  max-height: 100dvh !important;
  padding-bottom: calc(100px + var(--safe-bottom)) !important; /* Alt menü + safe area */
  display: flex !important;
  flex-direction: column;
}

/* İçeriğin alt menüyle karışmasını önleyen ana boşluk */
.content, .wrap, .main {
  padding-bottom: calc(90px + var(--safe-bottom)) !important;
}

/* Durum çubuğunun (Bekliyor/Tamamlandı) tıklanabilirliği */
.status-badge, .bekliyor, .tamamlandi {
  position: relative !important;
  z-index: 10001 !important; /* Bottom-nav 9999 olduğu için onu geçmeli */
  pointer-events: auto !important;
  margin-bottom: 5px; /* Yazıların birbirine girmemesi için */
}

/* Bottom Nav'ın telefonun en alt çizgisine yapışmaması için */
.bottom-nav {
  height: calc(56px + var(--safe-bottom)) !important;
  padding-bottom: var(--safe-bottom) !important;
  z-index: 9999;
}

/* Butonların birbirine girmesini engelleyen satır ayarı */
.btn-row, .modal-footer {
  margin-top: 15px;
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* ── SON ÇARE: ÇAKIŞMA VE BUTON TEMİZLİĞİ ── */

/* 1. Alt kısımdaki butonların üst üste binmesini engelle */
.detay-panel, .drawer, .modal {
    display: flex !important;
    flex-direction: column !important;
    height: 100dvh !important;
    padding-bottom: 120px !important; /* Alt menüden kurtar */
}

/* 2. "İPTAL" ve "TAMAMLANDI" butonlarını sabitleme, normal akışa döndür */
.detay-panel button, 
.detay-panel .btn,
.iptal, .tamamlandi {
    position: relative !important; /* Fixed veya absolute varsa iptal et */
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    margin: 5px 0 !important;
    z-index: 10 !important;
}

/* 3. Durum seçim menüsünü (DURUM yazan yer) genişlet ve okunur yap */
select[name="durum"], .status-select, #durum-degistir {
    width: 100% !important;
    height: 50px !important;
    background: #1a1d21 !important;
    color: #fff !important;
    border: 1px solid var(--gold) !important;
    padding: 0 10px !important;
    font-size: 16px !important; /* Safari zoom yapmasın diye */
    margin-bottom: 20px !important;
}

/* 4. Not Kaydet butonu ve İşlem Geçmişi arasındaki karışıklığı gider */
.not-section, .islem-gecmisi {
    margin-bottom: 25px !important;
    padding: 10px !important;
    border-bottom: 1px solid #333;
}

/* 5. Alt barın (Bottom Nav) her şeyin altında kalmasını sağla */
.bottom-nav {
    z-index: 999 !important;
}
/* ── SON DOKUNUŞ: ÜST ÜSTE BİNEN ETİKETİ DÜZELT ── */

/* İptal butonunun üzerine binen o etiketi (badge) hedef alalım */
.detay-panel .bekliyor, 
.detay-panel [class*="badge"] {
    position: relative !important; /* Sabit konumlandırmayı boz */
    top: auto !important;
    left: auto !important;
    display: inline-block !important;
    margin: 10px 0 !important; /* Butonla arasına mesafe koy */
    transform: none !important; /* Eğer kaydırılmışsa sıfırla */
    z-index: 5 !important;
}

/* İptal butonunun temiz ve geniş görünmesini sağla */
.iptal, .btn-iptal {
    margin-top: 15px !important;
    clear: both !important; /* Üstteki elemanlarla çakışmayı önle */
}