/* ══════════════════════════════════════════════════════════════════
   Customer Account polish — Cycle 6 (P1 #2 AH-A onwards)
   Storefront customer-account UI: status badges, recent-orders table,
   mobile card-mode (AH-B), pagination chip row (AH-C), profile sidebar
   (AH-D).
   ══════════════════════════════════════════════════════════════════ */

/* ── Status-badge palette (P1 #2 AH-A) ──────────────────────────
   Pre-fix every order in the Recent Orders table used a flat
   `text-bg-light` badge — `delivered`, `cancelled`, `pending`,
   `shipped` all looked identical. Customers had no visual cue when
   scanning their order history.

   Each Order.status maps to a class with the right semantic colour:

     pending / awaiting_payment  → warning  (amber)
     paid / processing           → info     (cyan)
     shipped                     → primary  (brand-blue)
     delivered / completed       → success  (green)
     cancelled / refunded        → secondary muted

   The badges are flat (no border) for visual lightness — the colour
   alone carries the signal. Dark-mode shifts use slightly more
   saturated tones because the same colours wash out on dark backgrounds.
   ────────────────────────────────────────────────────────────────── */

.wasla-status-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  letter-spacing: 0.02em;
  text-transform: capitalize;
  white-space: nowrap;
}

/* Cycle 25 Lane A: status-badge palette migrated from Tailwind hues to
   v2 functional tokens (warning/blue/success). Each rule uses the v2
   functional rgb channels at the same opacity, with token-flip handling
   the dark-mode shift. */
.wasla-status-pending,
.wasla-status-awaiting_payment {
  background: rgba(224, 146, 42, 0.15); /* v2 warning #E0922A */
  color: #a06d18; /* darker v2 warning ink for light-mode contrast */
}

.wasla-status-paid,
.wasla-status-processing {
  background: rgba(5, 87, 231, 0.15); /* v2 blue #0557E7 — was cyan */
  color: #0246C4; /* v2 blue-hover for ink contrast */
}

.wasla-status-shipped {
  background: rgba(5, 87, 231, 0.12);
  color: var(--wasla-blue, #0557E7); /* C21-A: v2 electric-blue — was legacy #1F4FD8 */
}

.wasla-status-delivered,
.wasla-status-completed {
  background: rgba(31, 157, 107, 0.12); /* v2 success #1F9D6B */
  color: #15784f; /* darker v2 success ink */
}

.wasla-status-cancelled,
.wasla-status-refunded,
.wasla-status-returned {
  background: rgba(0, 0, 0, 0.06);
  color: #6c757d;
}

/* Dark-mode adjustments — lift to v2 dark counterparts so the same
   hues read on dark backgrounds. */
[data-bs-theme="dark"] .wasla-status-pending,
[data-bs-theme="dark"] .wasla-status-awaiting_payment {
  background: rgba(232, 162, 74, 0.22); /* v2 warning dark #E8A24A */
  color: #E8A24A;
}

[data-bs-theme="dark"] .wasla-status-paid,
[data-bs-theme="dark"] .wasla-status-processing {
  background: rgba(60, 123, 240, 0.22); /* v2 blue dark #3C7BF0 */
  color: #3C7BF0;
}

[data-bs-theme="dark"] .wasla-status-shipped {
  background: rgba(60, 123, 240, 0.25); /* v2 blue dark #3C7BF0 */
  color: #3C7BF0;
}

[data-bs-theme="dark"] .wasla-status-delivered,
[data-bs-theme="dark"] .wasla-status-completed {
  background: rgba(61, 190, 139, 0.22); /* v2 success dark #3DBE8B */
  color: #3DBE8B;
}

[data-bs-theme="dark"] .wasla-status-cancelled,
[data-bs-theme="dark"] .wasla-status-refunded,
[data-bs-theme="dark"] .wasla-status-returned {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.6);
}

/* ── Mobile card-mode for Recent Orders (P1 #2 AH-B) ─────────
   The desktop table looks fine at md+ but breaks below ~480px (column
   widths collapse, content wraps awkwardly, the action button gets
   pushed to the row below the data it acts on). We hide the table on
   sub-md viewports and render the same data as stacked cards instead.
   ────────────────────────────────────────────────────────────────── */

.wasla-account-orders-table {
  display: none;
}

.wasla-account-orders-cards {
  display: block;
}

@media (min-width: 768px) {
  .wasla-account-orders-table {
    display: block;
  }
  .wasla-account-orders-cards {
    display: none;
  }
}

.wasla-account-order-card {
  /* Stacked card per order with a header row (number + status badge),
     a meta row (date + total), and an actions row at the bottom. */
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  padding: 0.875rem 1rem;
}

.wasla-account-order-card:first-child {
  border-top: 0;
}

.wasla-account-order-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
}

.wasla-account-order-card-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
}

.wasla-account-order-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.wasla-account-order-card-actions .btn {
  flex: 1 1 auto;
  min-width: 0;
}

[data-bs-theme="dark"] .wasla-account-order-card {
  border-top-color: rgba(255, 255, 255, 0.08);
}

/* ── Per-order action group (desktop) (P1 #2 AH-B) ──────────────
   Desktop table's last column gets a tighter button group with
   View / Track. Reuse for mobile too (the cards reference the same
   classes for visual consistency). */

.wasla-account-actions-group {
  display: inline-flex;
  gap: 0.25rem;
  flex-wrap: nowrap;
}

/* ── Wishlist remove-undo flow (P1 #5 WC-B) ──────────────────────
   Same pattern as the Cart Commit 2 undo (cart.css `.wasla-cart-item-*`)
   but adapted to the wishlist's card-column layout. JS toggles
   .is-removing on the column wrapper; the card content fades and
   the .wasla-wishlist-item-removed toast takes over.
   ────────────────────────────────────────────────────────────────── */

.wasla-wishlist-item {
  position: relative;
}

.wasla-wishlist-item-content {
  transition: opacity 0.2s ease-out;
}

.wasla-wishlist-item.is-removing .wasla-wishlist-item-content {
  opacity: 0;
  pointer-events: none;
}

.wasla-wishlist-item-removed {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem;
  background: rgba(220, 38, 38, 0.05);
  border-radius: 8px;
  font-size: 0.9375rem;
  position: absolute;
  inset: 0;
  margin: auto 0;
  height: fit-content;
}

.wasla-wishlist-item-removed[hidden] {
  display: none;
}

.wasla-wishlist-item-removed-text {
  color: var(--text-muted, #6c757d);
  flex: 1 1 auto;
}

[data-bs-theme="dark"] .wasla-wishlist-item-removed {
  background: rgba(252, 165, 165, 0.06);
}

/* Cycle 23 Lane A: --text-muted is undefined upstream so the hardcoded
   #6c757d fallback renders on dark — too dark against the wishlist
   remove-undo toast on the dark canvas. Lift to the dark muted tone. */
[data-bs-theme="dark"] .wasla-wishlist-item-removed-text { color: #9ca3af; }

@media (prefers-reduced-motion: reduce) {
  .wasla-wishlist-item-content { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════
   Cycle 19 Lane B — storefront platform-chrome v2 re-tone
   Navy identity for the Wasla-owned chrome: account-auth pages, the
   system pages (coming-soon / maintenance / offline), the storefront
   footer band and the mobile bottom nav. The merchant-themed shopping
   surface (home / product / cart / checkout / CMS page) is OUT of
   scope and keeps its tenant theming — none of these selectors touch
   it.
   ══════════════════════════════════════════════════════════════════ */

/* ── Account-auth cards (login / register / profile / home) ──────
   Flat white v2 cards: 1px line border, 12px radius, barely-there
   shadow — replacing the Bootstrap `.shadow-sm` glassy default. */
.wasla-account-card {
  background: var(--wasla-surface, #FFFFFF);
  border: 1px solid var(--wasla-line, #E4E7EC);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(20, 40, 70, 0.06);
}

.wasla-account-card-header {
  background: var(--wasla-surface, #FFFFFF);
  border-bottom: 1px solid var(--wasla-line, #E4E7EC);
  color: var(--wasla-heading, #1D3A5E);
}

/* Navy headline shared with the auth funnel (`.wasla-auth-headline`
   is defined inline in layouts/auth_base.html for the dashboard auth
   shell; storefront pages need their own copy of the rule because the
   storefront base does not load that inline style block). */
.wasla-auth-headline {
  color: var(--wasla-heading, #1D3A5E);
  font-weight: 700;
}

/* Orders table — navy header band, white bold text (v2 §5.7). */
.wasla-account-table > thead > tr > th {
  background: var(--wasla-navy, #1D3A5E);
  color: #fff;
  font-weight: 600;
  border-color: var(--wasla-navy-deep, #152C49);
}

.wasla-account-table > tbody > tr:hover > * {
  background-color: var(--wasla-canvas, #F4F6F9);
}

/* ── System pages (coming-soon / maintenance / offline) ──────────
   Flat v2 surface, navy headline, generous white space, electric-blue
   CTA where present. Dependency-light — no external assets. */
.wasla-system-card {
  background: var(--wasla-surface, #FFFFFF);
  border: 1px solid var(--wasla-line, #E4E7EC);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(20, 40, 70, 0.06);
  padding: 3rem 1.5rem;
  margin-top: 1.5rem;
}

.wasla-system-icon {
  font-size: 56px;
  line-height: 1;
  margin-bottom: 1rem;
}

.wasla-system-headline {
  color: var(--wasla-heading, #1D3A5E);
  font-weight: 700;
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
}

.wasla-system-body {
  color: var(--wasla-body, #56606F);
  margin-bottom: 1.5rem;
}

.wasla-system-body:last-child {
  margin-bottom: 0;
}

/* ── Storefront footer — navy band (v2 §2.1: footer = navy) ──────
   The legacy `.storefront-footer` class is kept on the element so the
   cycle4-foundations dark-mode hook still resolves; `.wasla-storefront-footer`
   layers the v2 navy band on top. */
.wasla-storefront-footer {
  background: var(--wasla-navy, #1D3A5E);
  border-top: 1px solid var(--wasla-navy-deep, #152C49);
  color: #fff;
}

.wasla-storefront-footer__brand {
  color: #fff;
}

.wasla-storefront-footer__link {
  color: rgba(255, 255, 255, 0.75);
}

.wasla-storefront-footer__link:hover,
.wasla-storefront-footer__link:focus {
  color: var(--wasla-gold, #D4AF36);
}

.wasla-storefront-footer__muted {
  color: rgba(255, 255, 255, 0.55);
}

/* ── Mobile bottom nav — flat white shell, electric-blue active ──── */
.wasla-storefront-bottomnav {
  background: var(--wasla-surface, #FFFFFF);
  border-top: 1px solid var(--wasla-line, #E4E7EC);
  box-shadow: 0 -1px 4px rgba(20, 40, 70, 0.06);
  z-index: 1030;
}

.wasla-bottomnav-link {
  color: var(--wasla-muted, #8A93A1);
}

.wasla-bottomnav-link.is-active {
  color: var(--wasla-blue, #0557E7);
  font-weight: 600;
}

/* Dark-mode: keep the footer navy band readable; Lane C owns the
   broader dark ramp, this only prevents the bottom nav / system card
   washing out against the existing dark surface. */
[data-bs-theme="dark"] .wasla-storefront-bottomnav {
  background: var(--wasla-navy-deep, #152C49);
  border-top-color: rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .wasla-account-card,
[data-bs-theme="dark"] .wasla-system-card {
  border-color: rgba(255, 255, 255, 0.08);
}

/* The account-card header, auth headline and system-page headline all
   consume --wasla-heading now (Cycle 20 Lane F), which flips to
   off-white under [data-bs-theme="dark"] via the token. The reactive
   PR #135 override block is retired — no per-component dark rule. */