/* ═══════════════════════════════════════════════════════════
   responsive.css — Media queries (desktop ↔ tablet ↔ phone)
   ═══════════════════════════════════════════════════════════ */

/* ── TABLET (≤ 1100px) ──────────────────────────────────── */
@media (max-width: 1100px) {
  .bk-split {
    grid-template-columns: 1fr;
  }
  .bk-right-col {
    position: static;
  }
  .bk-cart-list {
    max-height: 240px;
  }
}

/* ── TABLET (≤ 1024px) ──────────────────────────────────── */
@media (max-width: 1024px) {
  .stat-grid               { grid-template-columns: repeat(2, 1fr); }
  .booking-layout          { grid-template-columns: 1fr; }
  .booking-history-card    { position: static; max-height: 400px; }
  #bookingHistoryList      { max-height: 340px; }
  .manage-layout           { grid-template-columns: 1fr; }
  #manageList, #usersList  { max-height: 400px; }
  .topbar-date             { display: none; }
}

/* ── MOBILE (≤ 768px) ───────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --sidebar-w: 260px;
    --topbar-h:  52px;
  }

  /* Sidebar: slide in from left */
  .sidebar      { transform: translateX(-100%); box-shadow: none; }
  .sidebar.open { transform: translateX(0); box-shadow: 4px 0 32px rgba(0,0,0,0.5); }

  /* Main takes full width */
  .main     { margin-left: 0; }
  .menu-btn { display: flex; align-items: center; }

  .page-container { padding: 16px; }
  .page-title     { font-size: 20px; }

  /* Stats 2-col */
  .stat-grid   { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat-number { font-size: 22px; }
  .stat-card   { padding: 14px; }

  /* Location chips: horizontal scroll */
  .location-cards { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .location-cards::-webkit-scrollbar { display: none; }
  .loc-btn-card { flex-shrink: 0; }

  /* Toolbar stacks */
  .items-toolbar { flex-direction: column; align-items: stretch; }
  .filter-group  { gap: 6px; }
  .filter-input  { min-width: 0; flex: 1 1 calc(50% - 3px); }
  .btn-primary   { width: 100%; justify-content: center; }

  /* Form rows → single column */
  .form-row      { grid-template-columns: 1fr; gap: 0; }
  .bk-form-row2  { grid-template-columns: 1fr; gap: 0; }
  .booking-layout { gap: 14px; }
  .manage-layout  { gap: 14px; }

  /* Booking page */
  .bk-page-header { flex-direction: column; align-items: flex-start; }
  .bk-user-badge  { width: 100%; }
  .bk-split       { grid-template-columns: 1fr; }
  .bk-right-col   { position: static; }

  /* Table: horizontal scroll */
  .items-table-wrap { border-radius: var(--radius-sm); }
  .items-table      { min-width: 580px; }

  /* Modal: slide up from bottom */
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal {
    max-width:     100%;
    max-height:    90vh;
    border-radius: var(--radius) var(--radius) 0 0;
    border-bottom: none;
    animation:     modalInMobile 0.25s ease;
  }
  @keyframes modalInMobile {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }

  /* Project modal actions */
  #projectModalActions { flex-wrap: wrap; gap: 8px; }
  #projectModalActions .btn-secondary,
  #projectModalActions .btn-primary { flex: 1; min-width: 120px; text-align: center; justify-content: center; }

  .detail-grid   { grid-template-columns: 1fr; }
  .manage-form   { padding: 14px; }

  /* Toasts full-width */
  .toast-container { bottom: 16px; right: 16px; left: 16px; max-width: 100%; }
  .toast           { max-width: 100%; }

  .card-header     { flex-wrap: wrap; }
  .filter-input-sm { width: 100%; }
  .pdm-label       { min-width: 80px; }
  .project-ended-note { font-size: 11px; }
  .returner-badge .rb-note { font-size: 10px; }

  #manageList, #usersList { max-height: 300px; }

  /* Manage table responsive block layout */
  #manageList,
  #manageList thead,
  #manageList tbody,
  #manageList th,
  #manageList td,
  #manageList tr { display: block; }
  #manageList thead tr { display: none; }
  #manageList tr   { margin-bottom: 15px; border-bottom: 2px solid var(--border); }
  #manageList td   { padding-left: 50%; text-align: right; position: relative; }
  #manageList td::before {
    content:    attr(data-label);
    position:   absolute;
    left:       15px;
    width:      45%;
    font-weight: 600;
    text-align: left;
    color:      var(--text2);
  }
}

/* ── SMALL PHONES (≤ 480px) ─────────────────────────────── */
@media (max-width: 480px) {
  .dbh-toolbar    { gap: 8px; }
  .dbh-filters    { width: 100%; }
  .dbh-filter-btn { flex: 1; text-align: center; }

  .bk-card-header { flex-wrap: wrap; gap: 8px; }
}

/* ── VERY SMALL (≤ 400px) ───────────────────────────────── */
@media (max-width: 400px) {
  .stat-grid   { grid-template-columns: 1fr 1fr; gap: 8px; }
  .stat-number { font-size: 20px; }
  .stat-card   { padding: 12px 10px; gap: 8px; }
  .stat-icon   { font-size: 18px; }

  .page-title     { font-size: 18px; }
  .page-container { padding: 12px; }
  .form-tab       { font-size: 12px; padding: 10px 6px; }
  .bh-title       { font-size: 12px; }
  .bh-meta        { font-size: 10px; }
  .items-table    { min-width: 480px; }
}

/* ── MENU BUTTON — always visible ──────────────────────────── */
.menu-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      none;
  border:          none;
  color:           var(--text);
  font-size:       20px;
  cursor:          pointer;
  padding:         6px 10px;
  border-radius:   var(--radius-sm);
  transition:      background var(--transition);
  -webkit-tap-highlight-color: transparent;
}

.menu-btn:hover {
  background: var(--bg3);
}