/* ============================================================
   RESPONSIVE.CSS — Tüm sayfalar için mobil/tablet uyumluluk
   ============================================================ */

/* .table-responsive container taşmasın */
.table-responsive { max-width: 100% !important; width: 100% !important; }

/* Tüm resimler ve medya taşmasın */
img, video, canvas, iframe, embed, object { max-width: 100% !important; height: auto !important; }

/* --- Tablet (≤1200px) --- */
@media (max-width: 1200px) {
  .table-responsive-lg { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-responsive-lg > .table { min-width: 900px; }
}

/* --- Tablet / Küçük Ekran (≤992px) --- */
@media (max-width: 992px) {
  /* Sayfa taşmasını engelle — html+body ikisi de gerekli */
  html { overflow-x: hidden !important; }
  body { overflow-x: hidden !important; }
  body > .d-flex { overflow-x: hidden !important; max-width: 100% !important; }

  /* Tablo min-width:760px override */
  .table { min-width: 0 !important; max-width: 100% !important; }
  .table thead th, .table tbody td { white-space: normal !important; word-break: break-word !important; }
  .table-responsive .table { min-width: 700px !important; }

  /* Layout: sidebar zaten layout.php'de flex width transition ile responsive */
  /* Header: kullanıcı adı dropdown'ı taşmasın */
  header .dropdown-menu { min-width: 160px; }
  header h6 { font-size: 13px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }

  /* Fix: sidebar kapalıyken menü başlıkları gizlensin */
  body:not(.sidebar-open) .sidebar .menu-group-title,
  body:not(.sidebar-open) .sidebar .nav-link .link-text,
  body:not(.sidebar-open) .sidebar .nav-link .menu-label,
  body:not(.sidebar-open) .sidebar .sidebar-footer { display: none !important; }
  body:not(.sidebar-open) .sidebar .nav-link,
  body:not(.sidebar-open) .sidebar .btn { justify-content: center !important; padding-left: 4px !important; padding-right: 4px !important; min-width: 0 !important; }
  body:not(.sidebar-open) .sidebar .mb-3.text-center h5 i { display: inline-block !important; }

  /* Sidebar açıkken alt katman */
  body.sidebar-open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 998;
  }
  .sidebar { z-index: 999 !important; position: relative; }

  /* Tablo sarma */
  .table-responsive { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }

  /* Dashboard 3-column → 1 column */
  .dashboard-three-cols { grid-template-columns: 1fr !important; }

  /* KPI cards 2-column */
  .row.g-3.mb-4 > .col-md-3 { flex: 0 0 50% !important; max-width: 50% !important; }

  /* Action butonları fixed header altında kalmasın */
  .main-content { padding: 10px 12px !important; }

  /* DataTable sayfa başı seçici küçült */
  .dataTables_length select { width: auto !important; min-width: 60px !important; }
}

/* --- Mobil (≤768px) --- */
@media (max-width: 768px) {
  /* Sayfa taşmasını engelle — html+body ikisi de gerekli */
  html { overflow-x: hidden !important; }
  body { overflow-x: hidden !important; }
  body > .d-flex { overflow-x: hidden !important; max-width: 100% !important; }

  /* Tablo min-width:760px override — taşma yapmasın */
  .table { min-width: 0 !important; max-width: 100% !important; }
  .table thead th, .table tbody td { white-space: normal !important; word-break: break-word !important; }
  .table-responsive .table { min-width: 620px !important; }

  /* KPI cards 2-column */
  .row.g-3.mb-4 > .col-md-3 { flex: 0 0 50% !important; max-width: 50% !important; }

  /* Action bar: butonları alt alta değil wrap */
  .d-flex.justify-content-between.align-items-center.mb-3 { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; }
  .d-flex.justify-content-between.align-items-center.mb-3 > div { justify-content: center !important; }
  .d-flex.justify-content-between.align-items-center.mb-3 .badge { align-self: flex-start; }

  /* Filter bar: form elemanları stacked */
  .d-flex.flex-wrap.justify-content-between.align-items-center.mb-3.gap-2 { flex-direction: column !important; align-items: stretch !important; }
  .d-flex.flex-wrap.justify-content-between.align-items-center.mb-3.gap-2 form { flex-direction: column !important; width: 100% !important; }
  .d-flex.flex-wrap.justify-content-between.align-items-center.mb-3.gap-2 form select,
  .d-flex.flex-wrap.justify-content-between.align-items-center.mb-3.gap-2 form .form-select { width: 100% !important; min-width: unset !important; max-width: none !important; }
  .d-flex.flex-wrap.justify-content-between.align-items-center.mb-3.gap-2 > div:last-child { width: 100% !important; }
  .d-flex.flex-wrap.justify-content-between.align-items-center.mb-3.gap-2 > div:last-child input { width: 100% !important; }

  /* Header title alanı */
  header .d-flex.align-items-center h6 { font-size: 12px !important; max-width: 120px; }

  /* Modal: mobilde tam ekran */
  .modal-dialog { margin: 0 !important; }
  .modal-dialog:not(.modal-lg):not(.modal-xl) { max-width: 100% !important; }
  .modal-content { border-radius: 0 !important; border: none !important; min-height: 100vh; }
  .modal-header { border-radius: 0 !important; padding: 10px 12px !important; }
  .modal-body { padding: 12px !important; }
  .modal-footer { padding: 10px 12px !important; }

  /* Custom header bars (satis, calisan, alis, etc) */
  [class$="-header"]:not(.sa-header):not(.modal-header):not(.card-header):not(.page-header) {
    flex-direction: column !important;
    align-items: stretch !important;
    text-align: center;
  }
  [class$="-header"]:not(.sa-header):not(.modal-header):not(.card-header):not(.page-header) .baslik { justify-content: center; }
  [class$="-header"]:not(.sa-header):not(.modal-header):not(.card-header):not(.page-header) .d-flex.gap-2 { justify-content: center; flex-wrap: wrap; }
  [class$="-header"] .btn { font-size: 11px !important; padding: 3px 8px !important; }

  /* Custom flex-based table rows (musteriler, urunler, etc) */
  .musteri-row, .urun-row,
  [class*="-row"].d-flex.align-items-center { 
    flex-wrap: wrap !important; 
    min-height: auto !important; 
    padding: 6px 8px !important; 
    gap: 4px 0;
  }
  .musteri-row > div, .urun-row > div,
  [class*="-row"].d-flex.align-items-center > div { 
    width: auto !important; 
    min-width: unset !important; 
    flex: 1 1 45% !important; 
    border-right: none !important; 
    padding: 2px 4px !important; 
    font-size: 11px !important;
  }
  .musteri-row > div:last-child, .urun-row > div:last-child,
  [class*="-row"].d-flex.align-items-center > div:last-child { flex: 1 1 100% !important; text-align: left !important; }

  /* Tablo başlıklarının yan yana %'li yapısını bozma - sadece akışı düzelt */
  .d-flex.align-items-center.px-3.py-2.mb-0[style*="background:#1a3c6e"] { 
    flex-wrap: wrap !important; 
    padding: 6px 8px !important; 
    gap: 2px 8px;
  }
  .d-flex.align-items-center.px-3.py-2.mb-0[style*="background:#1a3c6e"] > div { 
    width: auto !important; 
    min-width: unset !important; 
    flex: 0 0 auto !important;
    font-size: 10px !important;
    border-right: none !important;
    padding: 2px 4px !important;
  }

  /* Card padding */
  .card-body { padding: 8px !important; }
  .card-header { padding: 8px 10px !important; font-size: 12px !important; }

  /* Form row: col-md-* → full width */
  .row > [class*="col-md-"] { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; }

  /* Butonlar daha küçük */
  .btn-sm { font-size: 10px !important; padding: 3px 6px !important; }

  /* DataTables araçları */
  .dataTables_wrapper .dataTables_filter { text-align: left !important; width: 100% !important; }
  .dataTables_wrapper .dataTables_filter input { width: 100% !important; max-width: none !important; }
  .dataTables_wrapper .dataTables_length { text-align: left !important; width: 100% !important; margin-bottom: 6px; }

  /* Genel tablo hücre boyutlandırması */
  .table th, .table td { padding: 4px 6px !important; font-size: 11px !important; }
  .table { font-size: 11px !important; }

  /* Dashboard KPI */
  .kpi-card .value { font-size: 22px !important; }
  .kpi-card { padding: 14px 18px !important; min-height: 80px !important; }
  .kpi-icon { width: 48px !important; height: 48px !important; font-size: 20px !important; }

  /* Satış tablosu özel */
  .satis-table thead th { font-size: 11px !important; padding: 5px 6px !important; white-space: nowrap; }
  .satis-table tbody td { font-size: 11px !important; padding: 5px 6px !important; }

  /* Sağ sidebar widget */
  .right-widgets { flex-direction: row !important; flex-wrap: wrap !important; }
  .right-widgets .widget { flex: 1 1 45% !important; }

  /* col-md-2 ve col-lg-* → mobilde tam genişlik */
  .row > [class*="col-md-2"],
  .row > [class*="col-lg-"],
  .row > [class*="col-xl-"] { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; }

  /* container-fluid padding */
  .container-fluid.p-4 { padding: 12px !important; }
  .container-fluid.p-3 { padding: 8px 10px !important; }

  /* Müşteri detay sayfası: col-md-3 avatar/not kartları tam genişlik */
  .row .col-md-3,
  .row .col-md-4,
  .row .col-md-5 { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; }

  /* Login sayfası: col-md-4 tam genişlik */
  .container.mt-5 .row.justify-content-center .col-md-4,
  .container.mt-4 .row.justify-content-center .col-md-5 { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; }

  /* İçerik geniş formlar */
  .col-lg-8.offset-lg-2 { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; margin-left: 0 !important; }

  /* Sayfa içi kart ikili sütunlar */
  .col-lg-6 { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; }

  /* Filter bar inline style flex wrap */
  div[style*="display:flex"][style*="align-items:center"][style*="gap:8px"][style*="flex-wrap:wrap"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  div[style*="display:flex"][style*="align-items:center"][style*="gap:8px"][style*="flex-wrap:wrap"] form {
    width: 100% !important;
  }
  div[style*="display:flex"][style*="align-items:center"][style*="gap:8px"][style*="flex-wrap:wrap"] form select,
  div[style*="display:flex"][style*="align-items:center"][style*="gap:8px"][style*="flex-wrap:wrap"] form .form-select {
    max-width: none !important;
    width: 100% !important;
  }

  /* input-group filterler */
  .input-group { max-width: none !important; width: 100% !important; }

  /* Customer row özel */
  .customer-card > [class^="col-"] { border-right: none !important; padding-left: 4px !important; padding-right: 4px !important; }
  body.page-musteriler .card-body .row.small.mb-1.px-2.py-1 { display: none !important; }
}

/* --- Çok Küçük Ekran (≤576px) --- */
@media (max-width: 576px) {
  /* Sayfa taşmasını engelle — html+body ikisi de gerekli */
  html { overflow-x: hidden !important; }
  body { overflow-x: hidden !important; }
  body > .d-flex { overflow-x: hidden !important; max-width: 100% !important; }

  /* KPI cards tek sütun */
  .row.g-3.mb-4 > .col-md-3 { flex: 0 0 100% !important; max-width: 100% !important; }

  /* Action butonları */
  .btn { font-size: 11px !important; padding: 4px 8px !important; }

  /* Mobilde sidebar açıldığında içerik daralmasın, sidebar overlay olsun */
  body.sidebar-open .sidebar { 
    position: fixed !important; 
    left: 0; 
    top: 0; 
    z-index: 9999 !important; 
    width: 260px !important; 
    min-width: 260px !important; 
    max-width: 260px !important;
    height: 100vh !important;
    box-shadow: 4px 0 20px rgba(0,0,0,0.3);
  }
  body.sidebar-open .d-flex > .flex-grow-1 { margin-left: 0 !important; width: 100% !important; }

  /* Tablo min-width override — layout.php'deki min-width:760px taşmaya yol açıyor */
  .table { min-width: 0 !important; max-width: 100% !important; }
  .table thead th, .table tbody td { white-space: normal !important; word-break: break-word !important; font-size: 10px !important; padding: 3px 4px !important; }
  .table { font-size: 10px !important; }

  /* Table-responsive içindeki tablolar scroll olsun — min-width KALDIRILDI,
     taşma yapıp sayfayı genişletmesin. Tablo kendi container'ında scroll olur. */

  /* Custom flex tablolar (musteri-row, urun-row) — sarılsın */
  .musteri-row, .urun-row,
  [class*="-row"].d-flex.align-items-center {
    flex-wrap: wrap !important;
    min-height: auto !important;
    padding: 4px 6px !important;
    gap: 2px 0;
  }

  /* Header */
  header h6 { font-size: 11px !important; max-width: 80px; }
  header .btn { font-size: 10px !important; }

  /* Main content padding */
  .main-content { padding: 4px 6px !important; }

  /* Modal tam ekran */
  .modal-dialog { margin: 0 !important; }
  .modal-content { border-radius: 0 !important; min-height: 100vh; }
  .modal-header { padding: 8px 10px !important; }
  .modal-header h5 { font-size: 14px !important; }
  .modal-body { padding: 10px !important; }
  .modal-footer { padding: 8px 10px !important; }

  /* Badge'ler küçülsün */
  .badge { font-size: 10px !important; padding: 0.2em 0.4em !important; }

  /* Sol frame'ler (ör: müşteri isim/ünvan) */
  .fw-semibold[style*="font-size:13px"] { font-size: 12px !important; }

  /* Dashboard */
  .kpi-card .value { font-size: 20px !important; }
  .kpi-card .meta { font-size: 11px !important; }

  /* Kart içi başlık */
  .card .card-body h6 { font-size: 12px !important; }

  /* Tablo header custom */
  .d-flex.align-items-center.px-3.py-2.mb-0[style*="background:#1a3c6e"] > div { font-size: 9px !important; }

  /* Satis header butonları daha kompakt */
  .satis-header .btn { font-size: 10px !important; padding: 3px 8px !important; }

  /* Formlar */
  .form-label { font-size: 11px !important; margin-bottom: 2px !important; }
  .form-control, .form-select { font-size: 11px !important; padding: 4px 6px !important; }
  .input-group-sm .form-control { font-size: 11px !important; }

  /* === Dashboard taşma düzeltmeleri === */
  /* Ana cari/satis özet satırı: flex → column */
  .dashboard-wrapper div[style*="display:flex"][style*="gap:16px"][style*="width:100%"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .dashboard-wrapper div[style*="min-width:300px"] {
    min-width: unset !important;
    width: 100% !important;
  }
  .dashboard-wrapper div[style*="flex:1"] {
    width: 100% !important;
  }
  /* 30 günlük satış/masraf kutuları: flex → column */
  .dashboard-wrapper div[style*="display:flex"][style*="gap:12px"] {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  .dashboard-wrapper [style*="min-width:170px"],
  .dashboard-wrapper [style*="min-width:180px"] {
    min-width: unset !important;
    width: 100% !important;
  }
  /* Sparkline SVG container */
  .dashboard-wrapper div[style*="justify-content:flex-end"][style*="gap:24px"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .dashboard-wrapper div[style*="justify-content:flex-end"][style*="gap:24px"] > div {
    justify-content: center !important;
  }

  /* === Genel taşma koruması === */
  /* .flex-grow-1 ve direct children taşmasın */
  .flex-grow-1 { max-width: 100% !important; overflow-x: hidden !important; }
}

/* --- Super Admin Responsive --- */
@media (max-width: 992px) {
  .sa-sidebar {
    position: fixed !important;
    left: -240px;
    top: 0;
    z-index: 9999 !important;
    width: 240px !important;
    min-width: 240px !important;
    height: 100vh !important;
    transition: left 0.22s ease !important;
    box-shadow: none;
  }
  .sa-sidebar.open {
    left: 0 !important;
    box-shadow: 4px 0 20px rgba(0,0,0,0.3);
  }
  .sa-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 9998;
  }
  .sa-sidebar-overlay.show { display: block; }
  .sa-header {
    padding: 8px 12px !important;
  }
  .sa-header h6 { font-size: 13px !important; }
  .main-content { padding: 12px !important; }
  .sa-sidebar-toggle {
    display: inline-flex !important;
  }
}

@media (max-width: 768px) {
  .main-content { padding: 10px !important; }
  .sa-header h6 { font-size: 12px !important; }
  .sa-header .badge { font-size: 10px !important; }
}

@media (max-width: 576px) {
  .sa-header .d-flex.align-items-center.gap-2 { gap: 4px !important; }
  .sa-header .btn { font-size: 10px !important; padding: 3px 6px !important; }
  .main-content { padding: 8px !important; }
}

/* --- Genel Utilities --- */
.text-nowrap { white-space: nowrap !important; }
.text-break-word { word-break: break-word !important; overflow-wrap: break-word !important; }

/* Mobilde scroll'u iyileştir */
.table-responsive { -webkit-overflow-scrolling: touch; }
.table-responsive::-webkit-scrollbar { height: 4px; }
.table-responsive::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }

/* .table-responsive olmayan tabloları mobilde kaydırılabilir yap */
@media (max-width: 768px) {
  .main-content table.table:not(.table-borderless):not(.bilgi-table):not(.table-bordered) {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
}

/* Sayfa yüklenirken sidebar geçiş animasyonu */
.sidebar, .sa-sidebar { transition: width 0.22s ease, min-width 0.22s ease, left 0.22s ease !important; }

/* DataTables sayfalama butonları mobil */
.paginate_button { padding: 2px 6px !important; font-size: 11px !important; }
.dataTables_info { font-size: 11px !important; }

/* SweetAlert2 mobil */
@media (max-width: 576px) {
  .swal2-popup { width: auto !important; margin: 0 12px !important; padding: 16px !important; }
  .swal2-title { font-size: 16px !important; }
  .swal2-html-container { font-size: 13px !important; }
  .swal2-actions .btn { font-size: 12px !important; }
}

/* Dashboard KPI row mobil stack */
@media (max-width: 768px) {
  .kpi-row { flex-direction: column !important; gap: 10px !important; }
  .card-tiles { grid-template-columns: 1fr !important; }
}

/* POS sayfası responsive ek */
@media (max-width: 768px) {
  .pos-grid { grid-template-columns: 1fr !important; }
  .pos-product-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .pos-customer-area { flex-direction: column !important; }
}