/* Safline — Mobile & small-screen polish */

@media (max-width: 767px) {
  html {
    -webkit-text-size-adjust: 100%;
  }

  body {
    overflow-x: hidden;
  }

  /* Prevent iOS zoom on form focus */
  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  .container,
  .container-fluid {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Legacy card / modal system (safline.css) */
  .card {
    padding: 16px;
    margin-bottom: 12px;
  }

  .card-title {
    font-size: 1.1rem;
  }

  .modal-backdrop {
    align-items: flex-end;
    padding: 0;
  }

  .modal {
    width: 100%;
    max-width: 100%;
    max-height: 92dvh;
    margin: 0;
    border-radius: 16px 16px 0 0;
  }

  .modal-header,
  .modal-body,
  .modal-footer {
    padding: 16px;
  }

  .modal-title {
    font-size: 1.15rem;
    padding-inline-end: 2rem;
  }

  .modal-footer {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 8px;
  }

  .modal-footer .btn {
    width: 100%;
  }

  /* Tables — smooth horizontal scroll */
  .overflow-x-auto,
  .table-responsive {
    -webkit-overflow-scrolling: touch;
  }

  .table th,
  .table td {
    padding: 10px 8px;
    white-space: nowrap;
  }

  /* Glass / hero sections */
  .glass-card {
    padding: 1.25rem;
  }

  .hero-section {
    padding: 2rem 1rem;
  }

  .hero-title {
    font-size: 1.75rem;
  }

  .content-wrapper {
    padding: 12px;
  }

  .main-header {
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
  }

  /* Tailwind modal panels — bottom sheet on phones */
  .saf-modal-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .saf-modal-panel {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92dvh !important;
    border-radius: 16px 16px 0 0 !important;
    margin: 0 !important;
  }

  .saf-modal-panel--center {
    align-self: center;
    border-radius: 16px !important;
    margin: 12px !important;
    max-height: calc(100dvh - 24px) !important;
  }

  /* Modal action rows */
  .saf-modal-actions {
    flex-direction: column-reverse !important;
    align-items: stretch !important;
  }

  .saf-modal-actions > * {
    width: 100%;
    justify-content: center;
  }

  /* Card stat grids that stay 3-col on desktop */
  .saf-stat-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
  }

  .saf-stat-grid-3 > * {
    padding: 0.5rem !important;
    font-size: 0.75rem;
  }

  /* Queue booking date list */
  .saf-date-list {
    max-height: 240px !important;
  }

  /* Admin notification dropdown — fit screen */
  .saf-notif-dropdown {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
    top: 4.5rem !important;
  }

  /* KPI numbers — slightly smaller on narrow screens */
  .saf-kpi-value {
    font-size: 1.75rem !important;
  }

  /* Calendar day cells in PersianDatePicker */
  .saf-calendar-grid {
    gap: 0.25rem !important;
  }

  .saf-calendar-day {
    font-size: 0.75rem !important;
    padding: 0.35rem !important;
    min-height: 2rem;
  }

  /* ── Filter bars — compact full-width on mobile ── */
  .saf-filter-bar {
    padding: 0.75rem !important;
  }

  .saf-filter-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
  }

  .saf-filter-search,
  .saf-filter-controls,
  .saf-filter-meta,
  .saf-filter-actions,
  .saf-filter-toolbar {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
  }

  .saf-filter-search {
    min-height: 0 !important;
  }

  .saf-filter-controls {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
  }

  .saf-filter-controls > select,
  .saf-filter-controls > .saf-filter-select,
  .saf-filter-search input,
  .saf-filter-search .relative {
    width: 100% !important;
  }

  .saf-filter-meta {
    width: auto !important;
    align-self: flex-start;
  }

  /* Icon toolbar — equal columns, no empty cells */
  .saf-filter-toolbar {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(2.5rem, 1fr));
    gap: 0.5rem;
  }

  .saf-filter-toolbar > button {
    width: 100% !important;
    min-height: 2.5rem;
    justify-content: center;
  }

  /* Action buttons — full-width rows on mobile */
  .saf-filter-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.5rem;
    width: 100%;
  }

  .saf-filter-actions > button,
  .saf-filter-actions > a {
    width: 100% !important;
    justify-content: center;
  }

  /* Paired actions (e.g. refresh + create) — 2-up */
  .saf-filter-actions--inline {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Reports / multi-button rows — stack full width */
  .saf-filter-actions--row {
    grid-template-columns: 1fr !important;
  }

  /* Filter field grids (reports, audit, org list) */
  .saf-filter-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  .saf-filter-grid > * {
    width: 100%;
    min-width: 0;
  }

  /* Don't stack grid + row layouts twice */
  .saf-filter-row.saf-filter-grid {
    display: grid !important;
    flex-direction: unset !important;
  }

  /* Search + button combo (Users page) */
  .saf-filter-search-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.5rem;
  }

  .saf-filter-search-row > input,
  .saf-filter-search-row > button {
    width: 100% !important;
  }
}

/* Filter bar — desktop baseline */
.saf-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  width: 100%;
}

.saf-filter-search {
  flex: 1 1 12rem;
  min-width: 0;
}

.saf-filter-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  flex-shrink: 0;
}

.saf-filter-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.saf-filter-meta {
  flex-shrink: 0;
}

.saf-filter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  flex-shrink: 0;
}

/* Multi-button rows — 3-up on tablet/desktop, stacked on mobile */
.saf-filter-actions--row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  width: 100%;
}

.saf-filter-actions--row > button,
.saf-filter-actions--row > a {
  width: 100%;
  justify-content: center;
}

/* Paired actions — 2-up on tablet/desktop */
.saf-filter-actions--inline {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  width: 100%;
}

.saf-filter-actions--inline > button,
.saf-filter-actions--inline > a {
  width: 100%;
  justify-content: center;
}

.saf-filter-search-row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}

@media (max-width: 480px) {
  .saf-stat-grid-3 {
    grid-template-columns: 1fr;
  }

  .saf-stat-grid-3 > * {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: start !important;
  }
}

/* Share poster modal — show full 9:16 image in compact panel */
.saf-share-poster-frame {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.saf-share-poster-img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(52dvh, 520px);
  object-fit: contain;
}

@media (min-width: 640px) {
  .saf-share-poster-img {
    max-height: min(58dvh, 560px);
  }
}