/* ===== YÖNETİM PANELİ - MOBİL UYUMLULUK ===== */
/* Tüm admin sayfaları (activity, staff, salooncontrol, ticket-management, news, costume, library, messages, formlar) */

/* Breakpoints: 992px = tablet/mobile border, 768px = phone, 576px = küçük phone */

/* Overlay: masaüstünde her zaman gizli */
.menu-overlay {
  display: none;
}

/* --- Tablet ve mobil: Offcanvas ve container --- */
@media (max-width: 992px) {
  .main-content {
    padding: 12px 8px;
  }

  /* Offcanvas daraltılmış, overlay ile kapatma */
  .offcanvas,
  .offcanvas.offcanvas-start {
    width: min(320px, 85vw);
    max-width: 100%;
  }

  /* margin-left kalkinca icerik menunun altinda kaliyordu; tiklanamayan sol sutun (Ad Soyad vb.) */
  #mainContainer.shifted,
  #programTableContainer.shifted,
  #addEditProgramContainer.shifted {
    margin-left: 0 !important;
    width: 100% !important;
    padding-left: min(320px, 85vw) !important;
    box-sizing: border-box !important;
  }

  /* Başlık alanı: daha kompakt */
  .containerTitle {
    flex-wrap: wrap;
    gap: 8px;
  }

  .containerTitle .h3,
  .containerTitle .flex-fill {
    font-size: 1.15rem;
    margin: 8px 0 !important;
    padding: 0 4px;
  }

  .containerTitle .btn {
    margin: 8px 0 !important;
    padding: 8px 12px;
  }

  /* Overlay (sayfalarda varsa) */
  .menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1040;
    touch-action: none;
  }

  .menu-overlay.active {
    display: block;
  }

  /* List group (menü) daha okunaklı */
  .offcanvas .list-group-item {
    padding: 12px 16px;
    font-size: 0.95rem;
  }

  .offcanvas-header .offcanvas-title {
    font-size: 1.1rem;
  }

  .offcanvas-header img {
    width: 40px !important;
    height: 40px !important;
  }

  footer {
    font-size: 0.75rem;
    padding: 8px;
    flex-direction: column;
    gap: 2px;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }

  /* Dokunmatik hedefler en az 44px */
  .btn,
  .list-group-item,
  a.list-group-item {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* --- Telefon (768px ve altı) --- */
@media (max-width: 768px) {
  .main-content {
    padding: 10px 6px;
  }

  .offcanvas,
  .offcanvas.offcanvas-start {
    width: min(280px, 82vw);
  }

  .containerTitle .h3 {
    font-size: 1rem;
  }

  /* Kartlar / istatistikler (activity vb.) */
  .stats-card {
    padding: 14px 10px;
  }

  .stats-number {
    font-size: 1.5rem;
  }

  .stats-label {
    font-size: 0.8rem;
  }

  /* Genel butonlar */
  .btn {
    font-size: 0.9rem;
    padding: 8px 14px;
  }

  .form-control,
  .form-select {
    font-size: 16px; /* iOS zoom önleme */
    min-height: 44px;
  }

  .form-select-lg {
    font-size: 1rem;
    padding: 10px 12px;
  }

  /* Modal / kart içerik */
  .card-body,
  .p-4 {
    padding: 1rem !important;
  }

  .row {
    margin-left: -8px;
    margin-right: -8px;
  }

  .row > [class*="col-"] {
    padding-left: 8px;
    padding-right: 8px;
  }

  /* Etkinlik kartları (activity): butonlar tam genişlik */
  .event-item {
    padding: 12px 10px;
  }

  .event-item .btn {
    min-height: 44px;
    width: 100%;
    margin-bottom: 6px;
  }

  .event-item .d-flex.gap-2 {
    flex-direction: column;
  }

  .event-item .d-flex.gap-2 .btn {
    width: 100%;
  }

  /* Bilet yönetimi: liste ve butonlar */
  #eventsListContainer .event-item,
  #eventsListContainer .card {
    margin-bottom: 12px;
  }

  #eventsListContainer .btn {
    min-height: 44px;
  }

  .empty-state {
    padding: 20px 12px;
    font-size: 0.95rem;
  }

  /* Formlar: alan grupları */
  .form-control,
  .form-select {
    min-height: 44px;
  }

  textarea.form-control {
    min-height: 80px;
  }

  /* Genel tablolar: yatay kaydırma */
  .table-responsive,
  .table-responsive-sm {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .card {
    margin-bottom: 12px;
  }

  .card-header {
    font-size: 0.95rem;
    padding: 10px 12px;
  }
}

/* --- Küçük telefon (576px ve altı) --- */
@media (max-width: 576px) {
  .main-content {
    padding: 8px 4px;
  }

  .offcanvas {
    width: 100%;
    max-width: 280px;
  }

  .containerTitle {
    padding-left: 4px;
    padding-right: 4px;
  }

  .containerTitle .btn {
    padding: 6px 10px;
  }

  .stats-number {
    font-size: 1.35rem;
  }

  .btn {
    padding: 6px 12px;
    font-size: 0.85rem;
  }
}

/* ===== SALON TAKİP (salooncontrol) - MOBİL ÖZEL ===== */
@media (max-width: 992px) {
  /* Filtre satırı: salon / yıl / ay / git → mobilde alt alta veya 2 sütun */
  .saloon-filters-row {
    gap: 10px;
    padding: 12px 8px !important;
  }

  .saloon-filters-row .saloon-select {
    flex: 1 1 100%;
    min-width: 0;
    width: 100% !important;
    max-width: 100%;
  }

  .saloon-filters-row .saloon-year-month {
    flex: 1 1 calc(50% - 8px);
    min-width: 0;
    width: auto !important;
  }

  .saloon-filters-row .saloon-go-btn {
    flex: 1 1 100%;
    margin: 0 !important;
    padding: 10px 16px;
    min-height: 48px;
  }

  /* Takvim tablosu: sarmalayıcıda yatay kaydırma */
  .admin-calendar-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 16px;
    width: 100%;
  }

  #programTableContainer table#calendar {
    min-width: 560px; /* 7 sütun x ~80px */
    width: 100%;
  }

  #programTableContainer table#calendar th,
  #programTableContainer table#calendar td {
    min-width: 70px;
    width: auto;
    padding: 6px 4px;
    font-size: 11px;
    height: 72px;
  }

  #programTableContainer table#calendar th {
    height: 36px;
    font-size: 10px;
  }
}

@media (max-width: 768px) {
  #programTableContainer table#calendar {
    min-width: 480px;
  }

  #programTableContainer table#calendar th,
  #programTableContainer table#calendar td {
    min-width: 60px;
    padding: 4px 2px;
    font-size: 10px;
    height: 64px;
  }

  #programTableContainer table#calendar th {
    font-size: 9px;
  }

  /* Program Ekle formu: alanlar tam genişlik */
  #addEditProgramContainer .container-fluid.d-flex.justify-content-between.mt-3,
  #addEditProgramContainer .d-flex.justify-content-between.mt-3.mb-3 {
    flex-wrap: wrap;
    gap: 8px;
  }

  #addEditProgramContainer .form-check {
    width: 100% !important;
    max-width: 100%;
  }

  #addEditProgramContainer #morningButton,
  #addEditProgramContainer #afternoonButton,
  #addEditProgramContainer #nightButton,
  #addEditProgramContainer #allDayButton {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    font-size: 0.85rem;
    padding: 10px 6px;
  }

  #addEditProgramContainer #priceInfoText {
    width: 100% !important;
    max-width: 100%;
    margin: 8px 0 !important;
  }

  #addEditProgramContainer .container.d-flex {
    flex-wrap: wrap;
  }

  #addEditProgramContainer .container.d-flex .form-select {
    flex: 1 1 100%;
    min-width: 0;
  }

  #addEditProgramContainer .justify-content-between.d-flex {
    flex-wrap: wrap;
    gap: 8px;
  }

  #addEditProgramContainer .justify-content-between.d-flex .btn {
    flex: 1 1 100%;
  }

  #addEditProgramContainer .containerTitle .me-4 {
    margin-right: 0.5rem !important;
  }
}

@media (max-width: 576px) {
  #programTableContainer table#calendar {
    min-width: 420px;
  }

  #programTableContainer table#calendar th,
  #programTableContainer table#calendar td {
    min-width: 52px;
    height: 56px;
    font-size: 9px;
  }

  #addEditProgramContainer #morningButton,
  #addEditProgramContainer #afternoonButton,
  #addEditProgramContainer #nightButton,
  #addEditProgramContainer #allDayButton {
    flex: 1 1 100%;
  }
}

/* Uyarı kutusu mobil */
#warningTitleBack {
  font-size: 0.9rem;
  padding: 10px 8px !important;
  text-align: center;
}

#warningTitle {
  font-size: 0.95rem !important;
}