/* mobile.css — LifeLine Pro mobil düzen (≤768px)
   style.css'ten SONRA yüklenir; masaüstü görünümü etkilemez.
   Tablolar mobile.js tarafından .ll-kart sınıfı + td[data-label] ile işaretlenir. */

/* Masaüstünde gizli olan mobil öğeler */
.nav-toggle, #nav-perde, .mobil-only { display: none !important; }
canvas { touch-action: none; }

@media (max-width: 768px) {

  /* ── Genel ─────────────────────────────────────────────── */
  html, body { overflow-x: clip; }
  input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: 16px !important; } /* iOS odak zoom'unu engeller */
  .action-btn { min-width: 36px; min-height: 36px; }
  .modal-close { padding: 6px 10px; font-size: 22px; }

  /* ── Giriş ekranı ──────────────────────────────────────── */
  .login-wrap { padding: 16px; }
  .login-box { width: 100%; max-width: 400px; padding: 32px 20px; }

  /* ── Header ────────────────────────────────────────────── */
  header { padding: 0 12px; }
  .header-sol { display: flex; align-items: center; gap: 8px; }
  .nav-toggle { display: inline-flex !important; align-items: center; justify-content: center;
    width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 8px;
    background: #fff; font-size: 20px; cursor: pointer; color: var(--text); }
  .logo { font-size: 18px; }
  .user-info { gap: 6px; }
  #user-name-header, #user-role-header, .hdr-genis { display: none !important; }

  /* ── Yan menü → açılır çekmece ─────────────────────────── */
  .layout { overflow: visible; }
  nav { display: flex; position: fixed; top: 0; left: 0; bottom: 0; width: 270px; max-width: 85vw;
    z-index: 150; overflow-y: auto; padding-top: 20px; box-shadow: var(--shadow-lg);
    transform: translateX(-105%); transition: transform .2s ease; }
  body.nav-acik nav { transform: none; }
  #nav-perde { position: fixed; inset: 0; background: rgba(24,24,27,.45); z-index: 140; }
  body.nav-acik #nav-perde { display: block !important; }
  .nav-item { padding: 12px 18px; font-size: 15px; }
  nav .mobil-only { display: flex !important; }
  nav .mobil-ayrac { display: block !important; border-top: 1px solid var(--border); margin: 10px 0 4px; }

  /* ── Sayfa düzeni ──────────────────────────────────────── */
  main { overflow: visible; padding: 14px 12px 24px; }
  .page-header { flex-wrap: wrap; gap: 10px; }
  .page-header > div:last-child { flex-wrap: wrap; }
  .page-title { font-size: 19px; }
  .stat-card { padding: 12px 14px; }
  .stat-value { font-size: 24px; }
  .alarm-bar { flex-wrap: wrap; }

  /* Inline 2 sütunlu grid'ler (dashboard, proje/müşteri bilgileri, muayene kartı, belgeler...) */
  [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:2fr 1fr auto"] { grid-template-columns: 1fr !important; }
  #pd-qr-icerik [style*="repeat(3,1fr)"] { grid-template-columns: 1fr 1fr !important; }

  /* Arama / filtre çubukları */
  .search-bar { flex-wrap: wrap; }
  .search-bar > * { flex: 1 1 calc(50% - 8px) !important; min-width: 0 !important; }
  .search-bar > .search-wrap { flex-basis: 100% !important; }

  /* ── Tablolar → kart ───────────────────────────────────── */
  table.ll-kart thead { display: none; }
  table.ll-kart, table.ll-kart tbody, table.ll-kart tr, table.ll-kart td { display: block; width: 100%; }
  table.ll-kart tr { padding: 10px 12px; border-bottom: 1px solid var(--border); }
  table.ll-kart td { position: relative; padding: 4px 0 4px 38% !important; min-height: 24px;
    border: none; white-space: normal !important; }
  table.ll-kart td::before { content: attr(data-label); position: absolute; left: 0; top: 5px; width: 35%;
    font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; line-height: 1.3; }
  table.ll-kart td:not([data-label]), table.ll-kart td[data-label=""] { padding-left: 0 !important; }
  table.ll-kart td:not([data-label])::before, table.ll-kart td[data-label=""]::before { content: none; }
  table.ll-kart td[colspan] { padding: 8px 0 !important; text-align: center; }
  table.ll-kart td[data-label=""]:last-child { text-align: right; }
  table.ll-kart td input, table.ll-kart td select { width: 100% !important; }
  table.ll-kart td[style*="visibility:hidden"], table.ll-kart td[style*="visibility: hidden"] { display: none; }

  /* ── Modallar → tam ekran ──────────────────────────────── */
  .modal-overlay { align-items: stretch; }
  .modal { width: 100vw !important; max-width: 100vw !important; height: 100vh; height: 100dvh;
    max-height: 100vh !important; max-height: 100dvh !important; border-radius: 0; border: none;
    display: flex; flex-direction: column; }
  .modal-header { padding: 12px 14px; }
  .modal-body { padding: 14px !important; flex: 1 0 auto; }
  .modal-footer { padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); flex-wrap: wrap; }
  .modal-footer .btn { flex: 1 1 auto; justify-content: center; }

  /* Modal sekme çubukları — yatay kaydırma */
  .ll-sekme-bar { overflow-x: auto; padding: 0 6px !important; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .ll-sekme-bar::-webkit-scrollbar { display: none; }
  .ll-sekme-bar > div { flex-shrink: 0; white-space: nowrap; padding: 10px 12px !important; }

  /* Bayi projeleri istatistik şeridi */
  #bp-stats { flex-wrap: wrap; }
  #bp-stats > div { flex: 1 1 50% !important; }

  /* İmza canvas'ları ekrana sığsın */
  #mua-imza-canvas, #mkd-imza-canvas { width: 100%; height: auto; }

  /* Bildirim */
  #toast { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); text-align: center; }
}