/* =====================================================================
   Ortak duyarlı (responsive) katman — tüm sayfalarda yüklenir.
   Masaüstü görünümü değiştirmez; kurallar yalnızca kırılım noktalarında
   devreye girer. Sayfalardaki satır içi düzen stilleri sınıflara taşındığı
   için burada !important gerekmez.
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }

img, svg, video { max-width: 100%; height: auto; }

/* Yatay taşmayı kaynağında engelle */
html, body { max-width: 100%; overflow-x: hidden; }

/* --- Uygulama başlığı ---------------------------------------------- */
.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  max-width: 1100px;
  margin: 20px auto 0;
  padding: 0 20px;
}
.app-header__brand { display: flex; align-items: center; gap: 15px; min-width: 0; }
.app-header__brand img { height: 50px; flex-shrink: 0; }
.app-header__title { font-size: 24px; color: #1e293b; margin: 0; line-height: 1.2; }
.app-header__subtitle { font-size: 13px; color: #64748b; margin: 0; }
.app-header__actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.app-header__user { text-align: right; margin-right: 6px; }

/* --- Araç çubuğu (arama + filtreler) -------------------------------- */
.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 15px;
}
.toolbar__group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.toolbar__group input[type="search"] { min-width: 240px; }

/* --- Form eylem düğmeleri ------------------------------------------- */
.form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 15px; flex-wrap: wrap; }

/* --- Tablo: geniş ekranda yatay kaydırma ---------------------------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* =====================================================================
   Tablet ve altı
   ===================================================================== */
@media (max-width: 900px) {
  .app-header { margin-top: 14px; padding: 0 14px; }
  .app-header__title { font-size: 19px; }
  .container { padding: 0 14px !important; }

  .toolbar { align-items: stretch; }
  .toolbar__group { width: 100%; }
  .toolbar__group input[type="search"] { flex: 1 1 100%; min-width: 0; }
  .toolbar__group select,
  .toolbar__group button { flex: 1 1 calc(50% - 4px); }
}

/* =====================================================================
   Telefon
   ===================================================================== */
@media (max-width: 640px) {
  .app-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .app-header__brand img { height: 38px; }
  .app-header__title { font-size: 17px; }
  .app-header__subtitle { display: none; }

  .app-header__actions { width: 100%; }
  .app-header__user { text-align: left; margin: 0 0 4px; width: 100%; }
  /* Düğmeler eşit bölünsün, parmakla rahat basılsın */
  .app-header__actions > a,
  .app-header__actions > button {
    flex: 1 1 calc(50% - 5px);
    justify-content: center;
    min-height: 42px;
  }

  /* iOS'ta odaklanınca sayfayı yakınlaştırmaması için 16px */
  input, select, textarea { font-size: 16px !important; }

  .form-actions { flex-direction: column-reverse; }
  .form-actions > button { width: 100%; min-height: 44px; }

  .card { padding: 14px !important; border-radius: 12px !important; }

  /* -------------------------------------------------------------------
     Tablolar telefonda kart olur.
     13 sütunlu poliçe tablosu yatay kaydırmayla kullanılamıyordu; her satır
     "etiket: değer" biçiminde bir karta dönüşür. Etiketler JS'in her hücreye
     yazdığı data-label değerinden gelir.
     ------------------------------------------------------------------- */
  .table-cards table,
  .table-cards thead,
  .table-cards tbody,
  .table-cards th,
  .table-cards td,
  .table-cards tr { display: block; width: 100%; }

  .table-cards thead { position: absolute; left: -9999px; }   /* başlıklar gizlenir, ekran okuyucuda kalır */

  .table-cards tr {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    margin-bottom: 10px;
    padding: 6px 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  }

  .table-cards td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 7px 10px !important;
    border: 0;
    border-bottom: 1px solid #f1f5f9;
    text-align: left !important;
  }
  .table-cards td:last-child { border-bottom: 0; }

  .table-cards td::before {
    content: attr(data-label);
    flex: 0 0 42%;
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .02em;
  }
  /* Etiketsiz hücreler (işlem düğmeleri) tam genişlik kullanır */
  .table-cards td:not([data-label])::before { content: none; }
  .table-cards td[data-label=""] { justify-content: flex-end; }

  /* Boş liste mesajı kart olmasın */
  .table-cards td[colspan]::before { content: none; }
  .table-cards td[colspan] { justify-content: center; }

  /* Sayfalama */
  #sayfalama { flex-direction: column; gap: 10px; align-items: stretch !important; text-align: center; }
  #sayfalama > div { display: flex; gap: 8px; }
  #sayfalama button { flex: 1; min-height: 40px; }

  /* Modal telefonda tam ekrana yakın */
  .modal { width: 100% !important; max-width: 100% !important; max-height: 92vh; overflow-y: auto; }
  .modal-overlay { padding: 10px !important; align-items: flex-end !important; }
  .modal-footer { flex-direction: column-reverse; gap: 8px; }
  .modal-footer .btn { width: 100%; min-height: 44px; }

  /* Bildirimler ekranı kaplamasın (kap JS'te element.style ile kuruluyor) */
  #bildirimKabi { left: 12px !important; right: 12px !important; top: 12px !important; }
  #bildirimKabi > div { max-width: 100% !important; }

  /* Vekaleten görüntüleme şeridi (JS'te element.style ile kuruluyor) */
  .vekalet-serit {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px;
    padding: 10px 14px !important;
  }

  /* PDF yükleme alanı telefonda daha derli toplu */
  .upload-zone { padding: 18px 14px !important; }
  .upload-zone h3 { font-size: 15px; }
  .upload-zone i.fa-file-pdf { font-size: 34px !important; }

  /* Giriş / kayıt / davet sayfaları kenarlara yapışmasın */
  body.auth-sayfa { padding: 16px !important; align-items: flex-start !important; }
}

/* Çok dar ekranlar (≤380px) */
@media (max-width: 380px) {
  .app-header__actions > a,
  .app-header__actions > button { flex: 1 1 100%; }
  .table-cards td { flex-direction: column; gap: 2px; }
  .table-cards td::before { flex: none; }
}

/* Yazdırma: yalnızca tablo */
@media print {
  .app-header__actions, .toolbar, #sayfalama, .upload-zone, #policeForm { display: none !important; }
  .card { box-shadow: none !important; border: 1px solid #cbd5e1; }
}

/* =====================================================================
   kullanici.css tabanlı sayfalar (kullanıcılar, ayarlar, platform yönetimi)
   ===================================================================== */
.page-header { flex-wrap: wrap; gap: 12px; }

@media (max-width: 900px) {
  .page-header { padding: 0 4px; }
}

@media (max-width: 640px) {
  .page-header {
    flex-direction: column;
    align-items: stretch;
  }
  .page-header h1 { font-size: 19px; }
  /* Başlıktaki eylem düğmeleri satıra yayılsın */
  .page-header > div:last-child { display: flex; flex-wrap: wrap; gap: 8px; }
  .page-header > div:last-child > a,
  .page-header > div:last-child > button {
    flex: 1 1 calc(50% - 4px);
    justify-content: center;
    min-height: 42px;
  }

  .container { padding: 16px 14px !important; }

  /* Satır işlem düğmeleri kart içinde sığsın */
  .table-cards .btn-action {
    flex: 1 1 auto;
    min-height: 36px;
    margin: 2px;
  }
  .table-cards td[data-label=""] { flex-wrap: wrap; gap: 4px; }

  /* Rapor ayarlarındaki alıcı listesi */
  #epostaListesi > div { flex-wrap: wrap; gap: 6px; }
  #yeniEposta { min-width: 0; }

  /* Özet kartı ızgaraları tek/çift sütuna insin */
  #istatistikSeridi { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #platformOzet { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 380px) {
  #istatistikSeridi, #platformOzet { grid-template-columns: 1fr !important; }
  .page-header > div:last-child > a,
  .page-header > div:last-child > button { flex: 1 1 100%; }
}