/* ================================================================
   RESPONSIVE — Comprehensive Mobile & Tablet Breakpoints
   Covers: Admin Panel · Client Portal · Public Website
   ================================================================ */

/* ═══════════════════════════════════════════════════════════════
   LARGE TABLET — ≤ 1200px
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
  .grid-cols-4  { grid-template-columns: repeat(2, 1fr); }
  .metric-row   { grid-template-columns: repeat(2, 1fr); }
  .pipeline-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════
   TABLET — ≤ 1024px
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .grid-cols-3  { grid-template-columns: repeat(2, 1fr); }

  /* KB form — sidebar collapses below */
  .grid-cols-3 .col-span-2 { grid-column: span 2; }
  .grid-cols-3 .col-span-1 { grid-column: span 2; }

  /* Ticket header stack */
  .ticket-header { flex-direction: column; gap: var(--space-4); }

  /* Auth panel — hide brand panel on tablet */
  .auth-panel--brand { flex: 0 0 320px; padding: var(--space-12) var(--space-8); }
}

/* ═══════════════════════════════════════════════════════════════
   SMALL TABLET / LARGE PHONE — ≤ 900px
   Admin / Portal sidebar slides off-canvas
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* ── Sidebar: slide off-canvas ─────────────────────────────── */
  .app-sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: var(--z-modal);
    width: var(--sidebar-width) !important;
    box-shadow: none;
  }

  .app-sidebar.open {
    transform: translateX(0);
    box-shadow: var(--shadow-xl);
  }

  /* ── Main content — expand to full width ───────────────────── */
  .admin-content-wrapper,
  .portal-content-wrapper {
    margin-left: 0 !important;
  }

  /* ── Topbar — expand to full width ────────────────────────────*/
  .app-topbar {
    left: 0 !important;
    padding: 0 var(--space-4);
  }

  /* ── Show hamburger and sidebar close on mobile ───────────── */
  .admin-hamburger {
    display: flex !important;
  }
  .sidebar-close-btn {
    display: flex !important;
  }

  /* ── Hide user info text on small screens ──────────────────── */
  .topbar-user-info { display: none; }
  .topbar-signout   { display: none; }

  /* ── Topbar breadcrumb — shorten on narrow screens ─────────── */
  .topbar-breadcrumb .sep,
  .topbar-breadcrumb .current { display: none; }

  /* ── Main content padding ──────────────────────────────────── */
  .app-main   { padding: var(--space-5); }
  .portal-main { padding: var(--space-5); }

  /* ── Metric row ─────────────────────────────────────────────── */
  .metric-row { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }

  /* ── Pipeline kanban ─────────────────────────────────────────── */
  .pipeline-grid { grid-template-columns: repeat(2, 1fr); }

  /* ── Auth — hide brand panel, show form only ────────────────── */
  .auth-panel--brand { display: none; }
  .auth-panel--form  { flex: 1; padding: var(--space-8) var(--space-6); }

  /* ── Public nav ─────────────────────────────────────────────── */
  .public-menu,
  .public-desktop-actions { display: none !important; }
  .mobile-menu-toggle { display: flex !important; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE — ≤ 640px
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* ── Typography scaling ─────────────────────────────────────── */
  :root {
    --text-3xl: 1.5rem;
    --text-2xl: 1.25rem;
    --text-xl:  1.125rem;
  }

  /* ── All multi-column grids collapse ────────────────────────── */
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4 { grid-template-columns: 1fr !important; }

  /* KB article form full width */
  .grid-cols-3 .col-span-2,
  .grid-cols-3 .col-span-1 { grid-column: span 1; }

  /* ── Metric row — 1 column ──────────────────────────────────── */
  .metric-row   { grid-template-columns: 1fr; gap: var(--space-3); }
  .pipeline-grid { grid-template-columns: 1fr; }

  /* ── Main content padding ───────────────────────────────────── */
  .app-main    { padding: var(--space-4); }
  .portal-main { padding: var(--space-4); }

  /* ── Page header row — stack vertically ─────────────────────── */
  .d-flex.justify-between.align-center.mb-6,
  .page-header {
    flex-direction: column;
    align-items: flex-start !important;
    gap: var(--space-3);
  }

  /* Make action buttons full-width in stacked headers */
  .d-flex.justify-between.align-center.mb-6 > a.btn,
  .d-flex.justify-between.align-center.mb-6 > .btn,
  .page-header > a.btn,
  .page-header > .btn {
    width: 100%;
    justify-content: center;
  }

  .page-title { font-size: var(--text-xl); }
  .page-subtitle { max-width: 100%; }
  .topbar-title, .topbar-breadcrumb { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-actions { margin-left: auto; }
  .app-topbar { height: 60px; }
  .app-main, .portal-main { margin-top: 60px !important; }

  /* ── Cards ──────────────────────────────────────────────────── */
  .card__header { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .card__body   { padding: var(--space-4); }

  /* ── Tables — always scrollable on mobile ───────────────────── */
  .table-responsive {
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }

  /* Shrink table cells for mobile */
  .table thead th,
  .table tbody td { padding: 10px var(--space-3); font-size: 0.8125rem; }

  /* Hide less important table columns on very small screens */
  .table .d-flex.align-center.justify-end.gap-2 {
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-1);
  }

  /* ── Topbar ─────────────────────────────────────────────────── */
  .app-topbar { padding: 0 var(--space-3); gap: var(--space-2); }
  .topbar-actions { gap: var(--space-2); }

  /* ── Stat cards ─────────────────────────────────────────────── */
  .stat-card { flex-direction: row; }

  /* ── Forms ───────────────────────────────────────────────────── */
  .form-control { font-size: 1rem; } /* Prevent iOS zoom on focus */

  /* ── Touch targets ───────────────────────────────────────────── */
  .btn { min-height: 44px; }
  .btn--sm { min-height: 36px; }
  .btn--xs { min-height: 30px; }
  .btn { white-space: normal; text-align: center; }
  .sidebar-link { min-height: 44px; }
  .form-control { min-height: 44px; }
  select.form-control { min-height: 44px; }

  /* ── Hero (public site) ─────────────────────────────────────── */
  .hero { padding: var(--space-12) 0 var(--space-10); }
  .hero__grid { grid-template-columns: 1fr !important; gap: var(--space-8); }
  .hero__title { font-size: 1.875rem; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__stats { gap: var(--space-5); }
  .hero__card  { max-width: 100%; }

  /* ── Public site container ──────────────────────────────────── */
  .container  { padding: 0 var(--space-4); }
  .section    { padding: var(--space-10) 0; }

  /* ── Public footer ──────────────────────────────────────────── */
  .public-footer { padding: var(--space-12) 0 var(--space-6); }

  /* ── Auth ───────────────────────────────────────────────────── */
  .auth-card  { margin: var(--space-4); padding: var(--space-6); border-radius: var(--radius-lg); }
  .auth-shell { background: #ffffff; }
  .auth-panel--form { padding: var(--space-6) var(--space-4); }

  /* ── CTA card ───────────────────────────────────────────────── */
  .cta-card { padding: var(--space-8) var(--space-5); }

  /* ── Ticket header ──────────────────────────────────────────── */
  .ticket-header {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-4);
  }
  .ticket-info__title { font-size: var(--text-xl); }

  /* ── Portal user trigger — hide info text ───────────────────── */
  .portal-user-info { display: none; }

  /* ── Admin sidebar width — full-width on very small ─────────── */
  .app-sidebar { width: min(var(--sidebar-width), 85vw) !important; }
}

/* ═══════════════════════════════════════════════════════════════
   EXTRA SMALL — ≤ 380px (iPhone SE, Galaxy A01, etc.)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
  .app-main    { padding: var(--space-3); }
  .portal-main { padding: var(--space-3); }
  .hero__title { font-size: 1.625rem; }
  .metric-card__value { font-size: var(--text-2xl); }
  .table thead th,
  .table tbody td { padding: 8px var(--space-2); font-size: 0.75rem; }
}

/* ═══════════════════════════════════════════════════════════════
   PRINT
   ═══════════════════════════════════════════════════════════════ */
@media print {
  .app-sidebar, .app-topbar, .btn, .alert,
  .admin-hamburger, .sidebar-overlay,
  .notif-btn, .topbar-actions { display: none !important; }

  .admin-content-wrapper,
  .portal-content-wrapper { margin-left: 0 !important; }

  .app-main, .portal-main {
    margin: 0 !important;
    padding: var(--space-4) !important;
  }

  .card { box-shadow: none !important; border: 1px solid #ccc !important; }
  body  { color: #000; background: #fff; font-size: 12px; }
}