/* static/css/mobile.css */

/* Global: yatay taşmaları bastır */
html, body { overflow-x: hidden; }

/* DataTables sarma: dar ekranda taşmadan kaydırılabilsin */
@media (max-width: 576px) {
  /* Tipografi / zoom davranışı */
  body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  /* Kartlar ve grid boşlukları */
  .card { margin-bottom: 0.75rem; border-radius: 0.75rem; }
  .row > [class*="col-"] { margin-bottom: 0.75rem; }

  /* Tablolar: mevcut HTML’i değiştirmeden yatay scroll */
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-collapse: collapse;
    white-space: nowrap;
  }
  .table thead th, .table tbody td, .table th, .table td {
    padding: 0.5rem 0.75rem;
    vertical-align: middle;
  }
  th, td {
    max-width: 320px;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  /* DataTables özel: wrapper ve filter alanları dar ekranda kırılabilsin */
  div.dataTables_wrapper {
    width: 100%;
    overflow-x: auto;
  }
  div.dataTables_filter, div.dataTables_length, div.dataTables_info, div.dataTables_paginate {
    float: none !important;
    text-align: left !important;
    margin: 0.25rem 0;
  }

  /* Buton grupları kırılabilsin */
  .btn-group, .btn-toolbar { flex-wrap: wrap; }
  .btn-group .btn { margin-bottom: 0.5rem; }

  /* Formları tek sütun yap & iOS zoom fix */
  form .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
  input[type="text"], input[type="number"], input[type="date"],
  input[type="time"], select, textarea { font-size: 16px; }

  /* Header/Navbar/Sidebar dolgu ayarı */
  .navbar, .navbar .container, header, .sidebar {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  /* Yardımcı sınıflar */
  .mobile-hidden { display: none !important; }
  .mobile-only   { display: block !important; }
}

/* Orta ekran güvenli dokunuş */
@media (max-width: 768px) {
  .card { border-radius: 0.75rem; }
}

/* Employee Dashboard avatar */
.employee-avatar {
  width: 230px;
  height: 230px;
  object-fit: cover;
}

/* Büyük butonları küçük ekranda taşırmadan kullandır */
@media (max-width: 576px) {
  .employee-avatar {
    width: 56vw !important;   /* ekran genişliğine göre ölçeklenir */
    height: 56vw !important;  /* daire orantısı korunur */
    max-width: 260px;
    max-height: 260px;
  }

  /* btn-lg mobil ayarı: daha kompakt ama hâlâ dokunmatik dostu */
  .btn-lg {
    font-size: 1rem;
    padding: 0.6rem 1rem;
    line-height: 1.1;
  }

  /* Kart içi boşlukları hafif sıkılaştır */
  .card.p-3 { padding: 0.875rem !important; }
  .card-title { font-size: 1.15rem; }
  .card-value { font-size: 1.05rem; }
}

/* Kart düzeni ve başlık mobil cilası */
@media (max-width: 576px) {
  /* col-md-6 olan kartları mobilde tek sütun yap */
  .col-md-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* Kart başlıkları daha okunaklı ama taşmayan */
  .card-title {
    font-size: 1.05rem !important;
    font-weight: 600;
  }

  /* Kart içeriği hafif küçültülmüş */
  .card-value {
    font-size: 0.95rem !important;
  }

  /* Mesajlar ve Turnike kart başlıkları */
  #turnike-panel .card-title,
  .card:has(.btn-primary) .card-title {
    font-size: 1.1rem !important;
    font-weight: 700;
  }
}

/* ==== LOGIN mobil cilası (HTML'e dokunmadan) ==== */
@media (max-width: 576px) {
  /* Login formunu otomatik yakala ve kart gibi göster:
     - /login ile biten veya içinde "login" geçen action'ları hedefliyoruz. */
  form[action$="/login"], form[action*="login"] {
    max-width: 420px;
    margin: 6vh auto 4vh auto;   /* dikeyde ortalama hissi */
    padding: 1rem 1rem 1.25rem;
    background: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  }

  /* Başlık ile alanlar arası nefes */
  form[action$="/login"] h1,
  form[action$="/login"] h2,
  form[action$="/login"] h3,
  form[action*="login"] h1,
  form[action*="login"] h2,
  form[action*="login"] h3 {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
    text-align: center;
  }

  /* iOS zoom sorunsuz yazım + rahat dokunma alanları */
  form[action$="/login"] .form-control,
  form[action*="login"] .form-control,
  form[action$="/login"] input,
  form[action*="login"] input {
    font-size: 16px;
    padding: 0.7rem 0.9rem;
    line-height: 1.2;
  }

  /* Giriş butonunu tek satırda, taşmadan, genişçe */
  form[action$="/login"] .btn,
  form[action*="login"] .btn {
    width: 100%;
    padding: 0.75rem 1rem;
    font-weight: 600;
  }

  /* Checkbox, hatırlatıcı link vb. yardımcı satırlar */
  form[action$="/login"] .form-text,
  form[action*="login"] .form-text,
  form[action$="/login"] .form-check,
  form[action*="login"] .form-check {
    font-size: 0.95rem;
  }

  /* Hata / uyarı mesajlarını formun altına güzelce oturt */
  form[action$="/login"] + .alert,
  form[action*="login"] + .alert,
  .alert.login-alert {
    max-width: 420px;
    margin: 0 auto 1rem auto;
  }
}

/* ==== NAVBAR mobil cilası ==== */
@media (max-width: 576px) {
  /* Logo daha kompakt */
  .navbar-brand img {
    width: 40px;
    height: 40px;
  }

  /* İç boşluklar ve kırılım */
  .navbar .container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .navbar-collapse {
    padding-top: 0.5rem;
  }

  /* Menü linkleri tek kolona rahatça dizilsin */
  .navbar-nav .nav-link {
    padding: 0.5rem 0;
  }

  /* Dropdown menüler çökmede (collapsed) tam genişlikte ve sade görünsün */
  .dropdown-menu {
    position: static !important;   /* mobilde taşma/kaplama yapmasın */
    float: none !important;
    width: 100%;
    margin: 0;
    border: 0;
    box-shadow: none;
  }
  .dropdown-menu .dropdown-item {
    padding: 0.6rem 0;
  }

  /* Dropdown içindeki butonlar (örn. Bildirim butonu) tam genişlik */
  .dropdown-menu .btn,
  #enable-push-btn {
    width: 100%;
    text-align: center;
    margin: 0.25rem 0;
  }

  /* Sağ blok (kullanıcı/avatarlı) açıldığında alt alta dizilsin */
  .navbar-nav.ms-auto {
    margin-top: 0.5rem;
  }

  /* Avatar çevresi daha küçük ve hizalı görünsün */
  .navbar-nav .rounded-circle {
    width: 36px;
    height: 36px;
    object-fit: cover;
  }
}

/* Navbar avatar stilleri */
.nav-avatar-lg {
  border: 2px solid #3F88C4;  /* mevcut temaya uyumlu */
  border-radius: 50%;
  padding: 2px;
}

/* Mobilde dropdown içindeki küçük avatar */
.nav-avatar-sm {
  width: 24px;
  height: 24px;
  object-fit: cover;
}

/* ==== Fixed-top navbar: sadece mobilde sabit, desktop'ta normal ==== */
@media (max-width: 767.98px) {
  .navbar.fixed-top { position: fixed; }
  body { padding-top: 70px; } /* mobilde navbar yüksekliği kadar boşluk */
}

@media (min-width: 768px) {
  .navbar.fixed-top { position: static !important; }
  body { padding-top: 0; } /* desktop’ta normal akış */
}

/* ==== NAVBAR: mobil çökme alanı kaydırılabilir + dokunmatik rahat ==== */
@media (max-width: 991.98px) {
  /* Çöken menü ekranın büyük kısmını kaplasın ama taşarsa dikey kaydırılabilsin */
  .navbar-collapse {
    max-height: 70vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Dropdown içerikleri de taşarsa kaydırılabilsin */
  .dropdown-menu {
    max-height: 60vh;
    overflow-y: auto;
  }

  /* Tıklama alanlarını büyüt (parmak dostu) */
  .navbar-nav .nav-link,
  .dropdown-item {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
}