/* ==========================================================================
   responsive.css — Breakpoints · MyClubCar Default Theme
   Breakpoints: 1100px · 900px · 768px · 480px
   ========================================================================== */

/* ── 1100px — Desktop îngust ──────────────────────────────────────────────── */
@media (max-width: 1100px) {

  /* Admin/client layout */
  .grid-main       { grid-template-columns: 1fr 260px; }
  .content         { padding: 22px 20px 50px; }
  .stats           { grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .stat-n          { font-size: 1.4rem; }

  /* Public */
  .pub-topbar-inner { padding: 0 20px; }
  .topbar-search   { width: 140px; }
}

/* ── 900px — Tabletă landscape ────────────────────────────────────────────── */
@media (max-width: 900px) {

  /* Admin/client layout */
  .grid-main  { grid-template-columns: 1fr; }
  .stats      { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .side-card  { margin-bottom: 14px; }
  .content    { padding: 20px 18px 48px; }

  /* Public nav — colapsare */
  .topbar-nav a span { display: none; }
  .topbar-nav a      { padding: 7px 10px; }
  .topbar-search     { width: 120px; }
}

/* ── 768px — Tabletă portrait / Mobil mare ───────────────────────────────── */
@media (max-width: 768px) {

  /* ── Sidebar devine overlay slide-in ── */
  .sb {
    transform: translateX(-100%);
    box-shadow: none;
  }
  .sb.open {
    transform: translateX(0);
    box-shadow: 4px 0 32px rgba(0,0,0,.35);
  }

  .sb-overlay { display: block; pointer-events: none; }
  .sb-overlay.open { pointer-events: auto; }

  /* Main nu mai are margin de sidebar */
  .main { margin-left: 0; }

  /* Hamburger vizibil */
  .btn-hamburger { display: flex; }

  /* Topbar admin/client */
  .topbar       { padding: 0 16px; gap: 10px; height: 54px; }
  .bc-cur       { max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .btn-topbar-sm { display: none; }

  /* Content */
  .content      { padding: 16px 14px 44px; }
  .grid-main    { grid-template-columns: 1fr; gap: 14px; }
  .stats        { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .pg-welcome   { font-size: 1.2rem; }

  /* Tabele */
  .qt th, .qt td { padding: 9px 10px; font-size: .75rem; }

  /* Btn nou — ascunde text pe mobil mic, rămâne icon */
  .btn-new { padding: 9px 14px; }

  /* Public topbar */
  .topbar-nav   { display: none; }
  .topbar-search { display: none; }
  .pub-topbar-inner { padding: 0 16px; gap: 12px; }

  /* Auth */
  .auth-card { padding: 28px 20px 24px; }
}

/* ── 480px — Mobil mic ────────────────────────────────────────────────────── */
@media (max-width: 480px) {

  /* Stats */
  .stats        { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .stat         { padding: 12px 10px; gap: 8px; }
  .stat-ico     { width: 32px; height: 32px; border-radius: 8px; }
  .stat-ico svg { width: 15px; height: 15px; }
  .stat-n       { font-size: 1.3rem; }
  .stat-label   { font-size: .65rem; }
  .stat-trend   { display: none; }

  /* Page header */
  .pg-welcome   { font-size: 1.1rem; }

  /* Topbar */
  .topbar       { height: 50px; }

  /* Btn nou — ascunde label, rămâne doar icon */
  .btn-new .btn-new-label { display: none; }
  .btn-new { padding: 9px 12px; }

  /* Alerts */
  .alert-warn   { font-size: .76rem; padding: 10px 12px; }

  /* Auth */
  .auth-card    { padding: 24px 16px 20px; max-width: 100%; border-radius: var(--r2); }
}

/* ── Compatibility: .tbl = alias for .qt responsive rules ──────────────── */
@media (max-width: 768px) {
  .tbl th, .tbl td { padding: 9px 10px; font-size: .75rem; }
  .form-grid-2, .form-grid-3, .form-row-2 { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .tbl th, .tbl td { font-size: .72rem; padding: 8px 8px; }
  .page-hd { flex-direction: column; gap: 8px; }
}

/* ── Public Catalog — Responsive ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .catalog-hero-inner { flex-direction: column; gap: 24px; }
  .catalog-hero-visual { display: none; }
  .catalog-hero-title { font-size: 1.8rem; }
}
@media (max-width: 768px) {
  .catalog-hero { padding: 36px 0 32px; }
  .catalog-hero-inner { padding: 0 16px; }
  .catalog-main { padding: 24px 16px 48px; }
  .catalog-hero-title { font-size: 1.5rem; }
  .catalog-hero-sub { font-size: .88rem; }
  .catalog-hero-stats { gap: 0; }
  .catalog-hero-stat { padding-right: 16px; }
  .catalog-hero-stat + .catalog-hero-stat { padding-left: 16px; }
  .prod-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
}
@media (max-width: 480px) {
  .catalog-hero-cta { flex-direction: column; align-items: flex-start; }
  .catalog-hero-stats { flex-direction: row; flex-wrap: wrap; gap: 12px; }
  .catalog-hero-stat + .catalog-hero-stat { border-left: none; padding-left: 0; }
  .prod-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .filter-bar { gap: 6px; }
  .filter-btn { padding: 6px 10px; font-size: .73rem; }
}