/*
 * UI-AUDIT 2026-11-02 — storefront responsive fixes (CRIT-U1 + safety).
 *
 * Problem (CRIT-U1): the Laravel storefront initialises a Swiper.js carousel
 * on `.nav-swiper` with `slidesPerView: 1` + autoplay. The Next.js port
 * doesn't bundle Swiper.js, so the raw `.swiper-wrapper > .swiper-slide` tree
 * renders as a horizontal flex strip ~1050px wide. At 375px that caused
 * horizontal page scroll on every storefront page.
 *
 * Fix: force the correct Swiper visual (single-slide-at-a-time) in pure CSS.
 * We also add a 70-second keyframe animation that cycles through the seven
 * slides every 10s to match Laravel's autoplay cadence, so the UX stays
 * identical even without the Swiper runtime.
 *
 * Note on scope: this file is only loaded by the storefront layout, not the
 * admin surface. Admin shells don't ship Swiper markup.
 */

/* ------------------------------------------------------------------
 * CRIT-U1: Swiper carousel in the top notification strip.
 * ------------------------------------------------------------------ */

/* Hide the overflow — matches what a mounted Swiper does. */
#header_meau .extra-nav .swiper-container.nav-swiper {
  overflow: hidden;
  position: relative;
  width: 100%;
}

/* Make the wrapper horizontally scrollable at the parent width and animate
 * a translateX cycle through the seven slides. 7 × 10 000ms = 70 000ms. */
#header_meau .extra-nav .swiper-container.nav-swiper .swiper-wrapper {
  display: flex;
  width: 700%;
  animation: me-navswiper 70s steps(7, end) infinite;
}

#header_meau .extra-nav .swiper-container.nav-swiper .swiper-slide {
  flex: 0 0 calc(100% / 7);
  min-width: 0;
}

@keyframes me-navswiper {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* Users who prefer reduced motion: freeze on the first slide. */
@media (prefers-reduced-motion: reduce) {
  #header_meau .extra-nav .swiper-container.nav-swiper .swiper-wrapper {
    animation: none;
  }
}

/* ------------------------------------------------------------------
 * Mobile + tablet safety net — the storefront body must not horizontally
 * scroll.
 *
 * UI-SWEEP 2026-11-03 — widened from `max-width: 480px` → `768px` and
 * added `#header_meau` to the clip set. The TopHeader renders the
 * nav-swiper strip ABOVE `#main`, so clipping only `#main` left the
 * swiper-wrapper (7 × parent width ≈ 2430px) contributing to
 * `document.body.scrollWidth`, flagged by the responsive audit at both
 * 375 and 768 on every storefront page (login, register, password-reset,
 * every /account/v4/*). `overflow: clip` is what removes the scrollWidth
 * contribution — `hidden` only hides visually.
 *
 * Scoped by `#main` + `#header_meau` + specific swipers so sticky nav,
 * modals, and any absolutely-positioned overlay keep positioning
 * correctly. We do NOT clip `html` or `body` directly — doing that
 * breaks position:sticky in Chromium.
 * ------------------------------------------------------------------ */

@media (max-width: 768px) {
  /* overflow-x: clip instead of hidden. `hidden` creates a scroll
     container but doesn't shrink `document.body.scrollWidth` — the
     responsive audit still saw 832px wide body at vp=768 with `hidden`.
     `clip` both prevents scroll AND excludes the clipped children from
     the parent's scrollWidth. Supported Chrome 90+, Firefox 81+,
     Safari 16+. Safe for the browsers the staging target supports. */
  html,
  body {
    overflow-x: clip;
  }
  #main,
  #header_meau,
  #footer_meau,
  .me-footer {
    overflow-x: clip;
    max-width: 100vw;
  }
  /* Any Swiper container not clipped by #header_meau (e.g. the register
     page's `.reviews-slide` carousel) still needs its own clip because
     body.scrollWidth measures across siblings. */
  .swiper-container,
  .swiper {
    overflow-x: clip;
    max-width: 100%;
  }
}

/* ------------------------------------------------------------------
 * UI-AUDIT 2026-11-03 — register-page label positioning.
 *
 * The Laravel original served ONE bundled CSS per page: login got
 * `login_css.min.css`, register got `register_css.min.css`. The port's
 * storefront layout loads BOTH `first-login.min.css` and
 * `first-register.min.css` globally. `first-login.min.css` has
 * `.sign-form .item-field label { position: absolute; top: 11px;
 * left: 15px; opacity: .3 }` to float login labels INSIDE the input
 * (login's "placeholder-like label" pattern). On the register page,
 * that same rule — never meant to apply there — wins on specificity
 * (0,2,1 beats first-register's `.item-field label` at 0,1,1) and
 * drops register labels into the inputs at 0.3 opacity, producing
 * the "double text" effect vs clean label-above-input on live.
 *
 * Fix: `.register-page` is already set on the register wrapper
 * (`<div className="container register-page">` in RegisterForm.tsx).
 * Scope an override here to restore normal block-label layout for
 * every field inside .register-page. Specificity (0,3,1) beats
 * first-login's (0,2,1). Login behaviour is untouched.
 * ------------------------------------------------------------------ */
.register-page .sign-form .item-field label {
  position: static;
  top: auto;
  left: auto;
  max-width: none;
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

/* ------------------------------------------------------------------
 * UI-AUDIT 2026-11-03 — V4 account-shell stub.
 *
 * The /account/v4/* pages (dashboard, consultations/book Acuity iframe,
 * applicants, payments, documents, intake, apply-485, toe) use these
 * classes: .page-head, .page-h1, .page-sub, .page-actions,
 * .client-id-tag, .card.is-flush, .btn, .btn.is-primary. They came
 * from Laravel's V4 shell CSS which the port did NOT carry over —
 * keystone.css (admin-only) has .page-sub + .card but not the rest,
 * and keystone.css isn't loaded on the storefront layout anyway.
 *
 * Without this stub, V4 pages render flush-left with no container,
 * no title spacing, iframe pressed to the viewport edge. This block
 * supplies the minimum visual contract so V4 is usable on staging
 * (and later prod). Full V4-shell CSS port stays flagged in
 * GO_LIVE_READINESS.md as a follow-up.
 * ------------------------------------------------------------------ */
.page-head {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 20px 8px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.page-head > div:first-child {
  flex: 1 1 auto;
  min-width: 0;
}
.page-h1 {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 6px 0;
  color: #0a0a0a;
}
.page-sub {
  font-size: 14px;
  color: #6b7280;
  margin: 0 0 4px 0;
  letter-spacing: -0.011em;
}
.page-sub.client-id-tag {
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px;
  color: #4b5563;
  margin-top: 8px;
}
.page-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}
.page-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #fff;
  border: 1px solid rgba(49,49,49,.2);
  border-radius: 8px;
  font-size: 13px;
  color: #1f2937;
  text-decoration: none;
  cursor: pointer;
}
.page-actions .btn.is-primary {
  background: #4a7c2e;
  border-color: #4a7c2e;
  color: #fff;
}
.page-actions .btn:hover { background: #f3f4f6; }
.page-actions .btn.is-primary:hover { background: #3f6a28; }

/* Generic storefront card used by V4 (consultations/book, applicants
 * list, etc.). .is-flush strips default padding so the Acuity iframe
 * fills edge-to-edge. */
.card {
  max-width: 1200px;
  margin: 0 auto 24px;
  background: #fff;
  border: 1px solid rgba(49,49,49,.12);
  border-radius: 12px;
}
.card.is-flush {
  padding: 0;
  overflow: hidden;
}
.card.is-flush iframe {
  display: block;
  width: 100%;
  border: 0;
}

/* Design tokens the V4 markup consumes via var(...). Keystone (admin)
 * defines these on :root but keystone.css isn't loaded on storefront.
 * Scope them to .page-head's descendants + the shared V4 container
 * surfaces so we don't accidentally shadow a Laravel storefront token. */
.page-head,
.page-head ~ .stat-strip,
.page-head ~ .home-section-head,
.page-head ~ .app-list,
.page-head ~ .grid-2,
.page-head ~ .card,
.page-head ~ div .card {
  --bg: #fafafa;
  --card: #fff;
  --border: #e5e5e5;
  --border-soft: #f0f0f0;
  --hover: #f5f5f5;
  --text: #171717;
  --text-2: #404040;
  --muted: #737373;
  --muted-2: #a3a3a3;
  --brand: #4a7c2e;
  --brand-dark: #3f6a28;
  --amber: #f59e0b;
  --amber-bg: rgba(245,158,11,0.12);
  --blue: #3b82f6;
  --blue-bg: rgba(59,130,246,0.12);
  --green: #22c55e;
  --green-bg: rgba(34,197,94,0.12);
}

/* ---- KPI tiles at top of /account/v4 dashboard ---- */
.stat-strip {
  max-width: 1200px;
  margin: 0 auto 20px;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.stat-strip .stat {
  background: #fff;
  border: 1px solid rgba(49,49,49,.12);
  border-radius: 10px;
  padding: 16px 18px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .15s ease, border-color .15s ease;
  display: block;
  max-width: none;
  margin: 0;
}
.stat-strip .stat.is-link:hover {
  border-color: #4a7c2e;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.stat-label {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.stat-value {
  font-size: 28px;
  font-weight: 700;
  color: #0a0a0a;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.stat-sub {
  font-size: 12.5px;
  color: #737373;
  margin-top: 4px;
}
.stat-sub.is-warn { color: #b45309; font-weight: 500; }

/* ---- Section headers (In progress / Documents etc.) ---- */
.home-section-head {
  max-width: 1200px;
  margin: 24px auto 10px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.home-section-title {
  font-size: 16px;
  font-weight: 600;
  color: #0a0a0a;
  letter-spacing: -0.015em;
  margin: 0;
}
.seg {
  display: inline-flex;
  gap: 2px;
  background: #f3f4f6;
  padding: 3px;
  border-radius: 8px;
}
.seg button {
  background: transparent;
  border: 0;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px;
  color: #4b5563;
  cursor: pointer;
}
.seg button.is-on {
  background: #fff;
  color: #0a0a0a;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  font-weight: 500;
}
.seg-count.num {
  margin-left: 4px;
  color: #9ca3af;
  font-variant-numeric: tabular-nums;
}

/* ---- Application list / empty state ---- */
.app-list {
  max-width: 1200px;
  margin: 0 auto 22px;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.v4-empty {
  text-align: center;
  padding: 32px 20px !important;
}
.v4-empty-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f3f4f6;
  color: #6b7280;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.v4-empty h4 {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 4px 0;
  color: #111827;
}
.v4-empty p {
  color: #6b7280;
  font-size: 13.5px;
  max-width: 480px;
  margin: 0 auto 14px;
}
.v4-empty-actions {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ---- 2-column card grid (Recent activity | Quick actions) ---- */
.grid-2 {
  max-width: 1200px;
  margin: 0 auto 24px;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  align-items: start;
}
.grid-2 > div > .card,
.grid-2 > .card {
  max-width: none;
  margin: 0;
}
.card-head {
  padding: 14px 18px;
  border-bottom: 1px solid rgba(49,49,49,.08);
}
.card-title {
  font-size: 14px;
  font-weight: 600;
  color: #0a0a0a;
  letter-spacing: -0.015em;
}

/* ---- Quick actions list ---- */
.qa-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.qa-list li { border-bottom: 1px solid rgba(49,49,49,.06); }
.qa-list li:last-child { border-bottom: 0; }
.qa-list a {
  display: grid;
  grid-template-columns: 32px 1fr 16px;
  gap: 12px;
  align-items: center;
  padding: 12px 18px;
  text-decoration: none;
  color: #111827;
  transition: background .12s ease;
}
.qa-list a:hover { background: #f9fafb; }
.qa-list .qa-i {
  width: 32px;
  height: 32px;
  background: #ecfdf5;
  color: #4a7c2e;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.qa-list .qa-text { display: block; min-width: 0; }
.qa-list .qa-text strong {
  display: block;
  font-weight: 600;
  font-size: 13.5px;
  color: #111827;
}
.qa-list .qa-text small {
  display: block;
  font-size: 12px;
  color: #6b7280;
  margin-top: 1px;
}
.qa-list .qa-arr { color: #9ca3af; }

/* ---- Recent activity list ---- */
.activity-list {
  padding: 4px 0;
}
.activity-item {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 10px 18px;
}
.activity-avatar,
.activity-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
}
.activity-avatar.avatar-self { background: #e0e7ff; color: #4338ca; }
.activity-avatar.avatar-me   { background: #ecfdf5; color: #4a7c2e; }
.activity-icon.ic-doc        { background: #f3f4f6; color: #6b7280; }
.activity-text {
  font-size: 13.5px;
  color: #111827;
  line-height: 1.4;
}
.activity-sub {
  font-size: 12px;
  color: #6b7280;
  margin-top: 2px;
}
.activity-time {
  font-size: 11.5px;
  color: #9ca3af;
  white-space: nowrap;
}

/* ---- btn.is-sm variant used across V4 ---- */
.btn.is-sm {
  padding: 6px 10px;
  font-size: 12.5px;
}

/* ------------------------------------------------------------------
 * UI-AUDIT 2026-11-03 — TopHeader signed-in dropdown.
 *
 * The signed-in user chip is a CSS :hover dropdown per the comment in
 * TopHeader.tsx ("Dropdown is CSS :hover driven"). The ported CSS set
 * (first-login.min.css + first-register.min.css + new_critical_css.min.css +
 * image.min.css) only carries the text styling (.drop-menu-client a) —
 * the visibility rules (display:none default + :hover reveal) and the
 * dropdown panel chrome live in the CDN'd login/register bundles that
 * weren't carried over. Without them the whole menu shows expanded
 * (Client Area / My Messages / My Applications / Sign Out all visible
 * as a plain list).
 *
 * Restore the hover-dropdown behaviour here so the authed header
 * matches the live client portal: Client ID + name visible, dropdown
 * reveals on hover with a bordered white panel.
 * ------------------------------------------------------------------ */
.acc-info-top .h-username {
  position: relative;
  display: inline-block;
}
.acc-info-top .name-client {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: #09213e;
  text-decoration: none;
  font-weight: 500;
}
.acc-info-top .name-client .noti-number {
  background: #e11d48;
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 999px;
  min-width: 18px;
  text-align: center;
  margin-right: 4px;
}
.acc-info-top .css-icon-dropdown {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid #09213e;
  border-bottom: 1.5px solid #09213e;
  transform: rotate(45deg);
  margin-left: 2px;
  margin-bottom: 3px;
  transition: transform .15s ease;
}
.acc-info-top .h-username:hover .css-icon-dropdown {
  transform: rotate(-135deg);
  margin-bottom: 0;
  margin-top: 3px;
}

/* The dropdown panel — hidden by default, revealed on hover. */
.acc-info-top .drop-menu-client {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 180px;
  background: #fff;
  border: 1px solid rgba(49,49,49,.12);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  padding: 6px 0;
  margin-top: 4px;
  z-index: 1000;
}
/* Reveal on hover of either the trigger or the panel itself (so the
 * mouse can transit without the panel closing). */
.acc-info-top .h-username:hover .drop-menu-client,
.acc-info-top .drop-menu-client:hover {
  display: block;
}
/* Also pad the trigger-to-panel gap so the hover doesn't flicker. */
.acc-info-top .drop-menu-client::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}
.acc-info-top .drop-menu-client ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.acc-info-top .drop-menu-client li { display: block; }
.acc-info-top .drop-menu-client a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 14px;
  color: #1f2937 !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  text-decoration: none;
  transition: background .12s ease;
}
.acc-info-top .drop-menu-client a:hover {
  background: #f3f4f6;
  color: #0a0a0a !important;
}
.acc-info-top .drop-menu-client .noti-number {
  background: #e11d48;
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 999px;
  min-width: 18px;
  text-align: center;
}
/* Compact the Client ID + name block layout. */
.acc-info-top { text-align: right; line-height: 1.5; }
.acc-info-top > div > span { font-size: 12.5px; color: #6b7280; }
.acc-info-top > div > b { font-size: 12.5px; color: #111827; font-weight: 600; }

/* Keep V4 pages comfortable on phones. */
@media (max-width: 640px) {
  .page-head {
    padding: 16px 16px 4px;
    flex-direction: column;
  }
  .page-actions { width: 100%; }
  .page-h1 { font-size: 20px; }
  .card { margin: 0 12px 16px; }
  .stat-strip {
    grid-template-columns: repeat(2, 1fr);
    padding: 0 16px;
  }
  .grid-2 {
    grid-template-columns: 1fr;
    padding: 0 16px;
  }
  .home-section-head,
  .app-list { padding: 0 16px; }
}