/* ════════════════════════════════════════════
   admin-mobile.css — Mobile Responsive for Admin
   ════════════════════════════════════════════ */

.hamburger-btn {
  display: none;
}

/* ── Sidebar Overlay (mobile < 1024px) ── */
@media (max-width: 1023px) {
  .admin-sidebar {
    position: fixed !important;
    left: -260px !important;
    top: 0 !important;
    bottom: 0 !important;
    z-index: 60 !important;
    width: 240px !important;
    transition: left 0.3s ease !important;
    flex-shrink: 0 !important;
  }
  .admin-sidebar.open {
    left: 0 !important;
  }
  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 55;
  }
  .sidebar-overlay.open {
    display: block !important;
  }
  .admin-main {
    margin-left: 0 !important;
    width: 100% !important;
    min-height: 0 !important;
    overflow: auto !important;
  }
  .admin-main > .flex-1 {
    min-height: 0 !important;
  }
  body {
    overflow: visible !important;
  }
  .hamburger-btn {
    display: inline-flex !important;
  }
  .admin-header h1 {
    font-size: 15px !important;
  }
}

@media (min-width: 1024px) {
  .hamburger-btn {
    display: none !important;
  }
}

/* ── Table Horizontal Scroll ── */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 4px;
}
.table-wrap table {
  min-width: max-content;
}

/* ── Stat cards responsive ── */
@media (max-width: 767px) {
  .stat-grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 480px) {
  .stat-grid-4 {
    grid-template-columns: 1fr !important;
  }
  /* Prevent col-span-2 from overflowing a 1-column grid.
     In a 1-column grid, grid-column:span 2 creates implicit tracks
     that push the grid wider than its container. */
  .stat-grid-4 > .col-span-2 {
    grid-column: 1 / -1 !important;
  }
}

/* ── Ensure text wraps properly in flex items on narrow screens ── */
@media (max-width: 767px) {
  .stat-card .flex-1.min-w-0 p,
  .bg-amber-50 .flex-1.min-w-0 p,
  .bg-red-50 .flex-1.min-w-0 p {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }
}

/* ── Form responsive ── */
@media (max-width: 767px) {
  .form-row {
    flex-direction: column !important;
  }
  .form-row > * {
    width: 100% !important;
  }
  .filter-bar {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .filter-bar > * {
    flex: 1 1 auto !important;
    min-width: 120px !important;
  }
}

/* ── Header responsive ── */
@media (max-width: 767px) {
  .admin-header {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }
  .admin-header .header-right {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
}

/* ── Content area ── */
@media (max-width: 767px) {
  .admin-content {
    padding: 12px !important;
  }
  .content-card {
    padding: 12px !important;
  }
}

/* ── Limit input/select width on desktop ── */
@media (min-width: 768px) {
  .admin-main input.f-input,
  .admin-main select.f-select,
  .admin-main textarea.f-input {
    max-width: 420px !important;
  }
  /* Allow modal inputs to fill modal width */
  .admin-main [class*="max-w-"] input.f-input,
  .admin-main [class*="max-w-"] select.f-select,
  .admin-main [class*="max-w-"] textarea.f-input {
    max-width: 100% !important;
  }
}

/* ── Setting sell code mobile ── */
@media (max-width: 1023px) {
  .setting-header-mobile {
    display: block !important;
  }
  .setting-header-desktop {
    display: none !important;
  }
}
@media (min-width: 1024px) {
  .setting-header-mobile {
    display: none !important;
  }
  .setting-header-desktop {
    display: block !important;
  }
}

/* ── Hero carousel slide row mobile ── */
@media (max-width: 767px) {
  .slide-row {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }
  .slide-row .flex-1.min-w-0 {
    width: calc(100% - 100px) !important;
    flex: initial !important;
  }
  .slide-row .slide-actions {
    width: 100% !important;
    display: flex !important;
    justify-content: flex-end !important;
    opacity: 1 !important;
    padding-top: 4px !important;
  }
  .slide-row > div:nth-child(4) {
    flex-wrap: wrap !important;
    gap: 6px !important;
    justify-content: flex-start !important;
    width: 100% !important;
    padding-left: 0 !important;
    border-top: 1px solid #f1f5f9;
    padding-top: 8px !important;
    margin-top: 4px !important;
  }
  .slide-row > div:nth-child(4) > div {
    text-align: left !important;
    flex: 1 !important;
    min-width: 60px !important;
  }
}