/* =============================================================
   Malina — Responsive Styles
   Mobile-first breakpoints using Malina tokens and layout vars
   ============================================================= */

/* Hamburger lives in the globalbar; hidden on desktop, revealed at ≤768px. */
.hamburger { display: none; }

/* ============================================================
   TABLET — sidebar shrinks, minor adjustments (1100px)
   ============================================================ */
@media (max-width: 1100px) {
  :root {
    --sidebar-w: 220px;
  }

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

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

  .appt-form {
    grid-template-columns: 240px 1fr 220px;
    gap: 18px;
  }

  .page-head {
    padding: 20px 24px 14px;
  }

  .page-body {
    padding: 0 24px 24px;
  }
}

/* ============================================================
   MOBILE — hide sidebar, show hamburger, full-screen modals
   ============================================================ */
@media (max-width: 768px) {
  /* ---- App grid collapses to single column ---- */
  .app {
    grid-template-columns: 1fr;
  }

  /* ---- Sidebar: hidden off-screen by default ---- */
  .sidebar {
    position: fixed;
    top: 0; left: 0;
    width: var(--sidebar-w);
    height: 100%;
    z-index: 300;
    transform: translateX(-100%);
    transition: transform var(--dur-base) var(--ease-out);
    box-shadow: var(--shadow-lg);
  }

  /* .sidebar.open toggled by JS */
  .sidebar.open {
    transform: translateX(0);
  }

  /* Sidebar backdrop (added by JS) */
  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(8, 10, 14, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 299;
    animation: overlay-in var(--dur-base) var(--ease-out);
  }

  /* ---- Hamburger toggle — shown on mobile ---- */
  .hamburger {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    color: var(--fg-muted);
    cursor: pointer;
    background: transparent;
    transition: all var(--dur-fast) var(--ease-out);
    flex-shrink: 0;
  }
  .hamburger:hover { background: var(--bg-elev-2); color: var(--fg); }
  .hamburger .lucide { width: 18px; height: 18px; }

  /* Hide hamburger on desktop (shown by default on mobile via this rule existing) */
  /* On desktop it should be hidden — add .hamburger { display: none; } in non-responsive */

  /* ---- Topbar toolbar items stack ---- */
  .topbar {
    flex-wrap: wrap;
    height: auto;
    min-height: var(--topbar-h);
    padding: 10px 14px;
    gap: 8px;
  }
  .topbar-spacer {
    width: 100%;
    order: 99;
    flex: none;
    display: none;
  }

  /* ---- Modals become full-screen ---- */
  .modal-overlay {
    padding: 0;
    align-items: flex-end;
  }

  .modal, .modal-box {
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    max-width: 100%;
    max-height: 92vh;
    width: 100%;
  }

  .modal.size-sm,
  .modal.size-md,
  .modal.size-lg,
  .modal.size-xl {
    max-width: 100%;
  }

  /* ---- Appointment form collapses to single column ---- */
  .appt-form {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* ---- Stat cards: 1 column ---- */
  .stat-cards {
    grid-template-columns: 1fr 1fr;
  }

  /* ---- Page head stacks ---- */
  .page-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 16px 10px;
  }
  .page-head .actions {
    width: 100%;
    flex-wrap: wrap;
  }
  .page-body {
    padding: 0 16px 24px;
  }

  /* ---- Clients layout: single column, hide side panel ---- */
  .clients-layout.has-side {
    grid-template-columns: 1fr;
  }
  .clients-side {
    display: none;
  }
  .clients-layout.has-side.side-visible .clients-side {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 250;
    overflow-y: auto;
  }

  /* ---- Client drawer: full width on mobile ---- */
  .client-drawer {
    width: 100%;
    right: -100%;
  }

  /* ---- Schedule: allow horizontal scroll ---- */
  .cal {
    overflow-x: auto;
    min-width: 600px;
  }
  .content {
    overflow-x: hidden;
  }

  /* ---- Settings grid single column ---- */
  .settings-grid {
    grid-template-columns: 1fr;
  }
  .settings-grid > .panel.span-2 {
    grid-column: span 1;
  }

  /* ---- Analytics grid: 1 column ---- */
  .analytics-grid {
    grid-template-columns: 1fr;
  }

  /* ---- Info grid: 1 column ---- */
  .info-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* ---- Form grid: 1 column ---- */
  .form-grid {
    grid-template-columns: 1fr;
  }

  /* ---- Detail head stacks ---- */
  .detail-head {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
    gap: 12px;
  }

  /* ---- Subtabs scroll ---- */
  .subtabs {
    padding: 0 16px;
  }
  .detail-body {
    padding: 16px 16px 32px;
  }

  /* ---- Global bar collapses ---- */
  .globalbar {
    padding: 0 12px;
    height: 52px;
    gap: 8px;
  }

  /* ---- App grid: single column even if sidebar was left collapsed ---- */
  .app,
  .app:has(.sidebar.collapsed) {
    grid-template-columns: 1fr;
  }

  /* Mobile drawer should never render as the 52px desktop rail */
  .sidebar.collapsed {
    width: var(--sidebar-w);
  }

  /* ---- Section padding tightens ---- */
  .crm-section {
    padding: 16px 16px;
    gap: 16px;
  }

  /* ---- Section headers stack, actions go full width ---- */
  .sec-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .sec-title { font-size: 22px; }
  .sec-header-actions { width: 100%; }
  .sec-header-actions .btn { flex: 1; justify-content: center; }

  /* ---- Wide data tables scroll horizontally instead of crushing ---- */
  .table-wrap,
  .table-card-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-left: 12px;
    padding-right: 12px;
  }
  .table-wrap .crm-table,
  .table-card-wrap .crm-table {
    table-layout: auto;
    min-width: 640px;
  }

  /* ---- Filter / search bars wrap and search takes a full row ---- */
  .filter-bar,
  .emp-filter-bar {
    padding: 10px 12px;
  }
  .filter-bar .search-wrap,
  .emp-filter-bar .search-wrap { flex: 1 1 100%; }
  .filter-sel { max-width: none; flex: 1 1 140px; }

  /* ---- Schedule topbar: let the dense toolbar wrap to multiple rows ---- */
  #scheduleTopbar { padding: 10px 12px; }

  /* ---- Tap targets: comfortable minimum height on touch ---- */
  .btn,
  .form-input,
  .form-select { min-height: 40px; }
}

/* ============================================================
   SMALL MOBILE (480px) — extra compact
   ============================================================ */
@media (max-width: 480px) {
  .stat-cards {
    grid-template-columns: 1fr;
  }

  .topbar {
    padding: 8px 12px;
  }

  .modal-head, .modal-header {
    padding: 16px 18px 12px;
  }
  .modal-body {
    padding: 16px 18px;
  }
  .modal-foot, .modal-footer {
    padding: 12px 18px 16px;
    flex-wrap: wrap;
  }

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

  .pay-row { padding: 12px 14px; }

  .seg-tabs {
    flex-wrap: wrap;
    border-radius: var(--radius-lg);
  }
}

/* ============================================================
   PRINT — minimal printable layout
   ============================================================ */
@media print {
  .sidebar,
  .globalbar,
  .topbar,
  .hamburger,
  .modal-overlay {
    display: none !important;
  }

  .app {
    display: block;
  }

  .content {
    overflow: visible;
  }

  body {
    overflow: auto;
    background: white;
    color: black;
  }
}