/* =========================================================
   RECCO FABRIC CARE — RESPONSIVE STYLESHEET
   4 Breakpoints: Laptop (1200) · Tablet (1024) · Mobile (768) · Small Mobile (480)
   Covers: Marketing site + Customer Login + Admin Login +
           Customer Dashboard + Admin Dashboard
   NOTE: !important used on structural/layout rules for the
   4 app pages so this file always wins, since it loads
   BEFORE each page's own stylesheet in <head>.
   ========================================================= */

/* Global safety net — no page should ever scroll sideways */
/* NOTE: intentionally not setting overflow-x on html/body here —
   doing so breaks position: sticky on the dashboard sidebars.
   Horizontal-scroll prevention is instead handled per-element
   in the breakpoint rules below. */

/* =========================================================
   1. LAPTOP  (≤1200px)
   ========================================================= */
@media (max-width: 1200px) {
  :root { --space-3xl: 7rem; --space-2xl: 4.5rem; }

  .hero__inner { gap: var(--space-xl); }
  .hero__visual { height: 460px; }

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

  .site-footer__top { grid-template-columns: 1.4fr 1fr 1fr; }
  .site-footer__col:last-child {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 24px;
  }

  /* ---- Admin Dashboard ---- */
  html body .adash-stats { grid-template-columns: repeat(2, 1fr) !important; }
  html body .adash-grid, html body .adash-grid--chart { grid-template-columns: 1fr !important; }
  html body .staff-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* =========================================================
   2. TABLET  (≤1024px)
   ========================================================= */
@media (max-width: 1024px) {

  /* ---- Header ---- */
  .logo__img { height: 95px; width: auto; }
  .main-nav { display: none; }
  .menu-toggle { display: flex; }

  /* ---- Hero — stays side-by-side (text left, image right) ---- */
  .hero { padding-top: 108px; }
  .hero__inner {
    grid-template-columns: 1fr 0.9fr;
    gap: var(--space-lg);
    align-items: center;
  }
  .hero__visual { height: 380px; }
  .hero__frame--main { inset: 0 30px 30px 0; }
  .hero__frame--float { width: 42%; height: 44%; left: 0; bottom: -16px; }
  .hero__badge { top: 10px; right: 10px; }
  .hero__title { font-size: clamp(2.2rem, 5vw, 3.2rem); }

  /* ---- Why RECCO — stays side-by-side ---- */
  .why__inner {
    grid-template-columns: 1fr 0.9fr;
    gap: var(--space-lg);
    align-items: center;
  }
  .why__visual { max-width: 100%; margin: 0; }

  /* ---- Process ---- */
  .process__timeline { grid-template-columns: repeat(3, 1fr); row-gap: var(--space-2xl); margin-top: var(--space-xl); padding: 20px 0; }
  .process__track { display: none; }
  .process__step:nth-child(odd), .process__step:nth-child(even) { margin-top: 0; }
  .process__num, .process__step:nth-child(even) .process__num { order: -1; margin: 0 0 10px; }
  .process__label, .process__step:nth-child(even) .process__label { order: 0; margin: 12px 0 0; }
  .process__popup { position: static; opacity: 1; visibility: visible; transform: none; pointer-events: auto; box-shadow: none; background: transparent; padding: 10px 0 0; width: auto; }
  .process__popup::after { display: none; }
  .process__popup h3 { display: none; }
  .process__popup p { color: rgba(255,255,255,0.6); }

  /* ---- Pricing ---- */
  .pricing__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
  .price-card { padding: var(--space-md) var(--space-sm); }
  .price-card--featured {
    grid-column: auto;
    transform: none;
    padding: var(--space-lg) var(--space-sm);
  }
  .price-card--featured:hover { transform: translateY(-8px); }

  /* ---- Testimonials / Stats ---- */
  .testimonials__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
  .stats__grid { grid-template-columns: repeat(2, 1fr); }

  /* ---- Customer Login ---- */
  html body .auth { grid-template-columns: 1fr !important; }
  html body .auth__visual { display: none !important; }
  html body .auth__mobile-logo { display: inline-flex !important; }
  html body .auth__form-side { padding: var(--space-xl) var(--gutter) !important; min-height: 100vh; width: 100% !important; }
  html body .auth__form-wrap { width: 100% !important; max-width: 420px !important; }

  /* ---- Admin Login ---- */
  html body .admin-auth { grid-template-columns: 1fr !important; }
  html body .admin-auth__visual { display: none !important; }
  html body .admin-auth__mobile-logo { display: inline-flex !important; }
  html body .admin-auth__form-side { padding: var(--space-xl) var(--gutter) !important; min-height: 100vh; width: 100% !important; }
  html body .admin-auth__form-wrap { width: 100% !important; max-width: 420px !important; }

  /* ---- Customer Dashboard ---- */
  html body .cdash-sidebar {
    position: fixed !important; left: 0; top: 0; z-index: var(--z-menu);
    transform: translateX(-100%) !important;
    transition: transform var(--dur-med) var(--ease-luxury);
    box-shadow: var(--shadow-card);
  }
  html body .cdash-sidebar.is-open { transform: translateX(0) !important; }
  html body .cdash-topbar .menu-toggle { display: flex !important; }
  html body .cdash-main { width: 100% !important; max-width: 100vw; }
  html body .cdash-grid { grid-template-columns: 1fr !important; }
  html body .cdash-stats { grid-template-columns: repeat(2, 1fr) !important; }
  html body .track-flow { grid-template-columns: repeat(2, 1fr) !important; row-gap: 50px; margin-top: 20px; padding-top: 10px; }
  html body .track-flow__connector, html body .track-flow__connector-fill { display: none !important; }
  html body .track-flow__step--down, html body .track-flow__step--up { margin-top: 0 !important; }

  /* ---- Admin Dashboard ---- */
  html body .adash-sidebar {
    position: fixed !important; left: 0; top: 0; z-index: var(--z-menu);
    transform: translateX(-100%) !important;
    transition: transform var(--dur-med) var(--ease-luxury);
    box-shadow: var(--shadow-card);
  }
  html body .adash-sidebar.is-open { transform: translateX(0) !important; }
  html body .adash-topbar .menu-toggle { display: flex !important; }
  html body .adash-main { width: 100% !important; max-width: 100vw; }
  html body .adash-search { max-width: 220px !important; }
  html body .analytics-hero { flex-direction: column !important; align-items: flex-start !important; gap: var(--space-lg); }
  html body .analytics-hero__divider { display: none !important; }
}

/* =========================================================
   3. MOBILE  (≤768px)
   ========================================================= */
@media (max-width: 768px) {
  :root {
    --space-3xl: 5rem;
    --space-2xl: 3.5rem;
    --space-xl: 2.5rem;
  }

  .logo__img { height: 95px; width: auto; }

  /* ---- Header ---- */
  .site-header__actions .btn--ghost { display: none; }
  .site-header__actions .btn--sm { padding: 10px 16px; font-size: 0.8rem; }

  /* ---- Hero — stacks, image moves above text ---- */
  .hero { padding-top: 100px; padding-bottom: 40px; }
  .hero__inner { grid-template-columns: 1fr; }
  .hero__eyebrow { font-size: 0.65rem; padding: 6px 12px; }
  .hero__title { font-size: clamp(2.2rem, 9vw, 3.2rem); }
  .hero__desc { font-size: 1rem; }
  .hero__cta-row { flex-direction: column; align-items: stretch; gap: var(--space-sm); }
  .hero__cta-row .btn { width: 100%; }
  .hero__visual { height: 320px; order: -1; margin-bottom: var(--space-lg); }
  .hero__frame--float { width: 52%; height: 50%; left: -16px; bottom: -16px; border-width: 4px; }
  .hero__scroll-cue { display: none; }

  /* ---- Why RECCO — stacks ---- */
  .why { padding: var(--space-2xl) 0; }
  .why__inner { grid-template-columns: 1fr; }
  .why__visual { max-width: 460px; margin: 0 auto; }
  .why__stat-chip { right: 0; bottom: -18px; padding: 14px 18px; }
  .why__stat-chip strong { font-size: 1.4rem; }
  .why__list { gap: var(--space-md); }

  /* ---- Services / Process ---- */
  .services__grid { grid-template-columns: 1fr; }
  .service-card__image { aspect-ratio: 16/10; }
  .process__timeline { grid-template-columns: 1fr; gap: var(--space-lg); margin-top: var(--space-lg); }

  /* ---- Stats / Pricing / Benefits / Testimonials ---- */
  .stats__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
  .stat-card { padding: var(--space-md) var(--space-xs); }
  .pricing__grid { grid-template-columns: 1fr; }
  .price-card--featured { grid-column: auto; }
  .benefits__grid { grid-template-columns: 1fr 1fr; gap: var(--space-md); }
  .testimonials__grid { grid-template-columns: 1fr; }

  /* ---- CTA / Footer ---- */
  .cta__title { font-size: clamp(1.8rem, 8vw, 2.6rem); }
  .site-footer__top { grid-template-columns: 1fr; gap: var(--space-lg); }
  .site-footer__brand .logo__img { height: 95px; width: auto; }
  .site-footer__bottom { flex-direction: column; gap: 12px; text-align: center; }

  /* ---- Customer Login ---- */
  html body .auth__form-side { padding: var(--space-lg) var(--gutter) !important; }
  html body .auth-form__row { flex-wrap: wrap; gap: 10px; }

  /* ---- Admin Login ---- */
  html body .admin-auth__form-side { padding: var(--space-lg) var(--gutter) !important; }
  html body .admin-auth__form-side .auth-form__row { flex-wrap: wrap; gap: 10px; }

  /* ---- Customer Dashboard ---- */
  html body .cdash-search { display: none !important; }
  html body .cdash-content { padding: var(--space-lg) var(--gutter) !important; width: 100% !important; }
  html body .hero-card { padding: var(--space-lg) !important; }
  html body .hero-card::after { display: none !important; }
  html body .hero-card__badge { position: static !important; margin-bottom: var(--space-md); width: fit-content; }
  html body .hero-card__actions { flex-wrap: wrap !important; }
  html body .track-flow { grid-template-columns: 1fr !important; row-gap: var(--space-md); }
  html body .rtable__row { grid-template-columns: 1fr 1fr !important; row-gap: 6px; }
  html body .rtable__row span:nth-child(3), html body .rtable__row span:nth-child(4) { display: none !important; }
  html body .profile-chip span { display: none !important; }
  html body .notif-panel { right: 50px !important; width: min(270px, calc(100vw - 80px)) !important; }
  html body .table-tools { flex-wrap: wrap !important; }
  html body .quick-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* ---- Admin Dashboard ---- */
  html body .adash-topbar { padding: 14px var(--gutter) !important; gap: var(--space-md); flex-wrap: wrap; }
  html body .adash-search { display: none !important; }
  html body .adash-date { display: none !important; }
  html body .adash-content { padding: var(--space-lg) var(--gutter) !important; width: 100% !important; }
  html body .adash-stats { grid-template-columns: 1fr 1fr !important; }
  html body .adash-grid, html body .adash-grid--chart { grid-template-columns: 1fr !important; }
  html body .staff-grid { grid-template-columns: 1fr !important; }
  html body .filter-chips { flex-wrap: wrap !important; }
  html body .rtable__row { grid-template-columns: 1fr 1fr !important; row-gap: 6px; }
  html body .table-search { max-width: 100% !important; }
  html body .notif-panel { right: 50px !important; width: min(270px, calc(100vw - 80px)) !important; }
}

/* =========================================================
   4. SMALL MOBILE  (≤480px)
   ========================================================= */
@media (max-width: 480px) {
  .logo__img { height: 95px; width: auto; }

  .hero__frame--main { inset: 0 20px 30px 0; border-radius: var(--radius-md); }
  .hero__frame--float { border-radius: var(--radius-sm); }
  .hero__badge { padding: 10px 14px; gap: 8px; }
  .hero__badge strong { font-size: 0.8rem; }
  .hero__badge span { font-size: 0.68rem; }

  .why__image-frame { border-radius: var(--radius-md); }

  .benefits__grid { grid-template-columns: 1fr; }

  .price-card { padding: var(--space-lg) var(--space-md); }
  .price-card__amount { font-size: 2.1rem; }

  .admin-auth__card { padding: var(--space-xl) var(--space-md); }

  /* ---- Customer Login ---- */
  html body .auth__form-side { padding: var(--space-lg) var(--space-sm) !important; width: 100% !important; }
  html body .auth__form-wrap { max-width: 100% !important; }
  html body .auth-form__row { flex-direction: column; align-items: flex-start !important; gap: 8px; }

  /* ---- Admin Login ---- */
  html body .admin-auth__form-side { padding: var(--space-lg) var(--space-sm) !important; width: 100% !important; }
  html body .admin-auth__form-wrap { max-width: 100% !important; }
  html body .admin-auth__form-side .auth-form__row { flex-direction: column; align-items: flex-start !important; gap: 8px; }

  /* ---- Customer Dashboard ---- */
  html body .cdash-sidebar { width: 84vw !important; max-width: 300px !important; }
  html body .cdash-topbar { padding: 12px var(--space-sm) !important; }
  html body .cdash-content { padding: var(--space-md) var(--space-sm) !important; }
  html body .hero-card { padding: var(--space-md) !important; }
  html body .hero-card__body h1 { font-size: 1.4rem !important; }
  html body .hero-card__actions { flex-direction: column !important; align-items: stretch !important; }
  html body .hero-card__shortcuts { justify-content: center !important; }
  html body .cdash-stats { grid-template-columns: 1fr 1fr !important; gap: var(--space-sm) !important; }
  html body .stat-tile { padding: var(--space-sm) !important; }
  html body .track-flow { grid-template-columns: 1fr !important; }
  html body .track-flow__step--down, html body .track-flow__step--up { margin: 0 !important; }
  html body .rtable__row { grid-template-columns: 1fr 1fr !important; font-size: 0.82rem; }
  html body .table-tools { width: 100% !important; }
  html body .table-search { width: 100% !important; max-width: 100% !important; }
  html body .notif-panel { right: 10px !important; left: 10px !important; width: auto !important; }
  html body .quick-grid { grid-template-columns: 1fr !important; }
  html body .schedule-list li { flex-wrap: wrap !important; }
  html body .mini-calendar__grid { font-size: 0.78rem !important; }

  /* ---- Admin Dashboard ---- */
  html body .adash-sidebar { width: 84vw !important; max-width: 300px !important; }
  html body .adash-topbar { padding: 12px var(--space-sm) !important; }
  html body .adash-content { padding: var(--space-md) var(--space-sm) !important; }
  html body .adash-stats { grid-template-columns: 1fr 1fr !important; gap: var(--space-sm) !important; }
  html body .ov-card { padding: var(--space-sm) !important; }
  html body .staff-grid { grid-template-columns: 1fr !important; }
  html body .rtable__row { grid-template-columns: 1fr 1fr !important; font-size: 0.82rem; }
  html body .notif-panel { right: 10px !important; left: 10px !important; width: auto !important; }
  html body .analytics-hero__item strong { font-size: 1.5rem !important; }
}