/* ═══════════════════════════════════════════════════════════════
   ShineAuto — Mobile & Responsive Overrides
   Covers: 320px → 1280px  |  phones, tablets, laptops, desktops
   ═══════════════════════════════════════════════════════════════ */

/* ── Hamburger visible on mobile ── */
@media (max-width: 768px) {
  .hamburger { display: flex !important; }

  /* Sidebar: off-canvas slide-in */
  .sidebar {
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    bottom: 0;
    z-index: 150;
    width: 260px;
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    box-shadow: none;
  }
  .sidebar.open {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(15,23,42,.18);
  }
  .sidebar-overlay { display: block !important; }
  .sidebar-overlay.open { opacity: 1; pointer-events: auto; }

  /* Main content full width */
  .main-content {
    max-width: 100vw !important;
    padding: 1rem !important;
  }

  /* Layout */
  .layout-with-sidebar { display: block; }

  /* Page header: stack vertically */
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: .65rem;
    margin-bottom: 1rem;
  }
  .page-header .btn { width: 100%; justify-content: center; }
  .page-title  { font-size: 1.2rem; }

  /* Stats grid: 2 cols on tablet, 1 on phone */
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: .65rem; }

  /* Cards: tighter padding */
  .card-body   { padding: .9rem; }
  .card-header { padding: .75rem 1rem; }

  /* Buttons */
  .btn-lg { padding: .65rem 1.25rem; font-size: .9rem; }

  /* Form rows → single column */
  .form-row,
  .form-row-3 { grid-template-columns: 1fr; gap: .75rem; }

  /* Tables: scrollable, no truncation */
  .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 480px; }
  thead th, tbody td { padding: .6rem .75rem; font-size: .8rem; }

  /* Provider grid */
  .provider-grid { grid-template-columns: 1fr; }

  /* Hero */
  .hero { padding: 3rem 1rem 3.5rem; }
  .hero-search { flex-direction: column; border-radius: var(--radius); padding: .75rem; }
  .hero-search input { width: 100%; font-size: .95rem; }
  .hero-search .btn  { width: 100%; border-radius: var(--radius-sm); }
  .hero-stats { gap: 1.5rem; }

  /* Modals: bottom sheet on mobile */
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal {
    border-radius: var(--radius) var(--radius) 0 0;
    max-width: 100%;
    width: 100%;
    max-height: 92vh;
    animation: slideUpMobile .25s cubic-bezier(.22,.68,0,1.2);
  }
  .modal-footer { flex-direction: column-reverse; }
  .modal-footer .btn { width: 100%; justify-content: center; }

  /* Tabs: scroll, compact */
  .tab-btn { padding: .6rem .85rem; font-size: .8rem; }

  /* Slots */
  .slots-grid { grid-template-columns: repeat(3, 1fr); gap: .4rem; }
  .slot-btn   { padding: .45rem .25rem; font-size: .78rem; }

  /* Auth cards */
  .auth-card { padding: 1.85rem 1.25rem; border-radius: 14px; }

  /* Revenue / dashboard filter bars */
  .filter-bar { flex-direction: column; align-items: stretch; }
  .filter-bar .form-control,
  .filter-bar .btn { width: 100%; }

  /* Topbar: compact right side */
  .topbar-user  { display: none; }
  .topbar-right { gap: .4rem; }
  .topbar-link.hide-mobile { display: none; }

  /* Service type cards (homepage) */
  .service-type-grid { grid-template-columns: 1fr; }

  /* Action bars */
  .table-actions { flex-direction: column; }
  .table-actions .btn { width: 100%; justify-content: center; }

  /* Footer */
  .site-footer .footer-inner { flex-direction: column; gap: .5rem; text-align: center; }
  .footer-right { justify-content: center; }
}

/* ── 480px and below (small phones) ── */
@media (max-width: 480px) {
  :root { --topbar-h: 52px; }

  .stats-grid   { grid-template-columns: 1fr; }
  .topbar-brand span { display: none; } /* icon only */

  .hero h1      { font-size: 1.6rem; }
  .hero p       { font-size: .9rem; }

  .card-title   { font-size: .88rem; }
  .btn          { font-size: .82rem; padding: .5rem 1rem; }
  .btn-sm       { font-size: .75rem; padding: .3rem .7rem; }

  .slots-grid   { grid-template-columns: repeat(2, 1fr); }

  /* Booking page: full-width action bar pills */
  .action-bar   { gap: .25rem; padding: .55rem; }
  .action-pill  { padding: .3rem .65rem; font-size: .75rem; }

  /* Revenue cards */
  .revenue-grid { grid-template-columns: 1fr !important; }

  /* Auth */
  .auth-card { padding: 1.5rem 1rem; }
  .auth-title { font-size: 1.2rem; }

  /* Profile page logo area */
  [style*="display:flex"][style*="gap:1.5rem"] { flex-direction: column; }
}

/* ── 640px – 1024px (tablets / small laptops) ── */
@media (min-width: 769px) and (max-width: 1024px) {
  .main-content   { padding: 1.4rem; max-width: calc(100vw - var(--sidebar-w)); }
  .stats-grid     { grid-template-columns: repeat(2, 1fr); gap: .85rem; }
  .provider-grid  { grid-template-columns: repeat(2, 1fr); }
  .form-row-3     { grid-template-columns: 1fr 1fr; }
}

/* ── Keyframe for mobile modal slide-up ── */
@keyframes slideUpMobile {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ── Sidebar overlay (always in DOM, shown only on mobile) ── */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.42);
  z-index: 140;
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}

/* ── Overflow helpers ── */
.overflow-x-auto { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.no-wrap         { white-space: nowrap; }

/* ── Responsive utilities ── */
@media (max-width: 768px) {
  .hide-mobile   { display: none !important; }
  .show-mobile   { display: block !important; }
}
@media (min-width: 769px) {
  .show-mobile   { display: none !important; }
}

/* ── Booking page mobile layout ── */
@media (max-width: 640px) {
  .dark-modal { border-radius: var(--radius) var(--radius) 0 0; }
  .cover-banner { height: 180px; border-radius: 0; }

  /* Service card stack */
  .svc-card { flex-direction: column; align-items: flex-start; }
}

/* ── Table action buttons: wrap neatly ── */
.table-actions { flex-wrap: wrap; }

/* ── Partner dashboard revenue grid ── */
@media (max-width: 700px) {
  .revenue-grid { grid-template-columns: 1fr !important; }
}

/* ── Search results filter sidebar collapse ── */
@media (max-width: 768px) {
  .search-layout {
    flex-direction: column;
  }
  .search-filters {
    width: 100% !important;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
}

/* ── Topbar brand text: hide on very small ── */
@media (max-width: 360px) {
  .topbar-brand { font-size: .95rem; }
}

/* ── Notification bell: always visible ── */
.notif-bell { color: rgba(255,255,255,.8); text-decoration: none; }
.notif-bell:hover { color: #fff; }