/* ══════════════════════════════════════════════
   Wasla Dashboard — app.css
   Blue + Orange brand palette + Zinc-based dark mode
   ══════════════════════════════════════════════ */

body {
  background: var(--wasla-canvas);
}

/* ── Page header ── */
.page-header {
  margin-bottom: 1.25rem;
}
.page-header .page-title {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--wasla-ink);
  margin-bottom: 0.125rem;
}
.page-header .page-subtitle {
  font-size: 0.8125rem;
  color: var(--wasla-muted);
  font-weight: 400;
}

/* ── Sidebar (Cycle 17 B — navy rail per brand_identity_v2.md §5.5) ──
   Was flat white; the prototype identity is a solid navy rail with
   white-ish items and a white/lighter-navy active pill. */
.sidebar {
  background: var(--wasla-navy, #1D3A5E);
  border-inline-end: 1px solid var(--wasla-navy-deep, #152C49);
}

@media (min-width: 992px) {
  .sidebar {
    position: sticky;
    top: 56px;
    height: calc(100vh - 56px);
    overflow-y: auto;
  }
}

/* ── Mobile sidebar collapse ──
   Below 992px the sidebar collapses by default and is toggled via the
   hamburger button. We hide the sidebar entirely on small screens unless
   the .open class is present. */
@media (max-width: 991.98px) {
  .wasla-sidebar-collapsible {
    display: none;
  }
  .wasla-sidebar-collapsible.open {
    display: block;
    border-inline-end: none;
    border-bottom: 1px solid var(--wasla-navy-deep, #152C49);
    box-shadow: 0 4px 16px rgba(20, 40, 70, 0.18);
  }
}

/* Cycle 17 B — navy rail items: white-ish text on navy. */
.sidebar .nav-link {
  color: rgba(255, 255, 255, 0.78);
  border-radius: 8px;
  padding: 0.625rem 1rem;
  font-size: 0.8125rem;
  transition: background 0.15s, color 0.15s;
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

/* Cycle 17 B — hover: subtle white overlay; active: white pill with
   navy text and an electric-blue leading marker (left border). */
.sidebar .nav-link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.sidebar .nav-link.active {
  background: #ffffff;
  color: var(--wasla-heading, #1D3A5E);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--wasla-blue, #0557E7);
}

.sidebar .nav-link svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.85;
}

.sidebar .nav-link:hover svg,
.sidebar .nav-link.active svg {
  opacity: 1;
}

/* Cycle 17 B — on the navy rail, idle icons need a white stroke so
   they read against navy; the per-icon `--icon-*` rainbow tokens are
   preserved (see §"colorful per-icon sidebar" below) but overridden
   to white for the default navy-rail state. The ACTIVE row is a white
   pill, so there the per-icon colour is restored for a colourful
   accent against white. */
.sidebar .nav-link[data-section] svg {
  stroke: #ffffff;
}
.sidebar .nav-link[data-section].active svg {
  stroke: var(--wasla-blue, #0557E7);
}

/* ── Sidebar section labels ── */
/* Cycle 17 B — on the navy rail, group labels are a muted navy-tint
   small-caps (per brand_identity_v2.md §5.5). rgba white at .55 on
   navy #1D3A5E ≈ 4.7:1 for the 11px small-caps. */
.sidebar-section-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.75rem 1rem 0.25rem;
  margin-top: 0.5rem;
}

.sidebar-section-label:first-child {
  margin-top: 0;
  padding-top: 0.25rem;
}

/* ── Metric cards ── */
.card-metric .card-body {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.metric-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.metric-icon svg {
  width: 24px;
  height: 24px;
}

.metric-icon.icon-primary {
  background: var(--wasla-ai-tint, #E5ECFC);
  color: var(--wasla-blue, #0557E7);
}

.metric-icon.icon-blue {
  background: var(--wasla-chip-blue-bg);
  color: var(--wasla-chip-blue-fg);
}

.metric-icon.icon-amber {
  background: var(--wasla-chip-amber-bg);
  color: var(--wasla-chip-amber-fg);
}

.metric-icon.icon-purple {
  background: var(--wasla-chip-purple-bg);
  color: var(--wasla-chip-purple-fg);
}

.metric-label {
  color: var(--wasla-muted);
  font-size: 0.8125rem;
  font-weight: 500;
}

.metric-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--wasla-ink);
  /* Cycle 6 (T-H-001): 1.2 was cramped on 1.5rem display values.
     1.3 keeps the tile compact while giving descenders room. */
  line-height: 1.3;
  /* Cycle 6 (T-H-003): tabular-nums so a column of values like
     1,234 / 12,345 / 999 stays optically aligned — proportional
     digits made the tiles feel sloppy when stacked. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ── Product cards (storefront) ── */
.product-card {
  transition: transform 0.2s, box-shadow 0.2s;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.product-card .card-img-wrapper {
  overflow: hidden;
  border-radius: 10px 10px 0 0;
}

.product-card .card-img-wrapper img {
  transition: transform 0.3s;
}

.product-card:hover .card-img-wrapper img {
  transform: scale(1.05);
}

.discount-badge {
  position: absolute;
  top: 10px;
  inset-inline-start: 10px;
  background: var(--wasla-danger);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  z-index: 1;
}

/* ── Empty states ── */
.empty-state {
  text-align: center;
  padding: 3rem 1.5rem;
}

.empty-state svg {
  width: 56px;
  height: 56px;
  color: var(--wasla-line);
  margin-bottom: 0.75rem;
}

.empty-state .empty-state-text {
  color: var(--wasla-muted);
  font-size: 0.875rem;
  margin-bottom: 1rem;
}

.empty-state .btn {
  margin-top: 0.25rem;
}

/* ── Tables (Cycle 17 B — navy header band per brand_identity_v2.md §5.7) ──
   Header row is a solid navy band with white bold text — exactly the
   PDF's "Key UI Elements" bars. Body rows white, 1px line separators,
   subtle canvas-tint hover. */
.table > thead > tr > th {
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--wasla-navy, #1D3A5E);
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: none;
  padding: 0.75rem;
  white-space: nowrap;
}

.table > thead > tr > th:first-child {
  border-start-start-radius: 8px;
}
.table > thead > tr > th:last-child {
  border-start-end-radius: 8px;
}

.table > tbody > tr > td {
  padding: 0.75rem;
  vertical-align: middle;
  color: var(--wasla-body, #56606F);
  border-bottom-color: var(--wasla-line, #E4E7EC);
}

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

/* ── Card headers ── */
.card-header {
  font-weight: 600;
  font-size: 0.9375rem;
  border-bottom: 1px solid var(--wasla-line, #E4E7EC);
  padding: 0.875rem 1rem;
}

/* ── Badge polish ── */
.badge {
  font-weight: 500;
  padding: 0.35em 0.65em;
  font-size: 0.75rem;
}

/* ── Status indicator dot ── */
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-inline-end: 0.375rem;
}
.status-dot.dot-success { background: var(--wasla-success); }
.status-dot.dot-warning { background: var(--wasla-warning); }
.status-dot.dot-danger  { background: var(--wasla-danger); }
.status-dot.dot-info    { background: var(--wasla-blue); }
.status-dot.dot-muted   { background: var(--wasla-muted); }

/* ── File input styling ── */
.form-control[type="file"] {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
}

/* ── Checkbox / radio list (Django CheckboxSelectMultiple) ── */
.card-body ul {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--wasla-line);
  border-radius: 6px;
  padding: 0.5rem;
}

.card-body ul li {
  padding: 0.3rem 0.25rem;
}

.card-body ul li label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.875rem;
  border-radius: 4px;
  padding: 0.15rem 0.25rem;
  transition: background 0.1s;
}

.card-body ul li label:hover {
  background: rgba(5, 87, 231, 0.06);
}

.card-body ul li input[type="checkbox"],
.card-body ul li input[type="radio"] {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  accent-color: var(--wasla-blue, #0557E7);
}

/* ── Auth card (Cycle 17 B — flat solid per brand_identity_v2.md §11) ──
   The auth card is a panel; glass-morphism is demoted platform-wide.
   Flat white surface, 1px line border, faint shadow — consistent with
   every other card. The --surface-glass-* tokens stay defined (Lane A)
   but are no longer applied here. */
.auth-card {
  background: var(--wasla-surface, #ffffff);
  border: 1px solid var(--wasla-line, #E4E7EC);
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(20, 40, 70, 0.10);
}

/* ── Product image thumbnail ── */
.product-thumb {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--wasla-line);
}

.product-thumb-placeholder {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--wasla-canvas);
  border: 1px solid var(--wasla-line);
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-thumb-placeholder svg {
  width: 20px;
  height: 20px;
  color: var(--wasla-muted);
}

/* ── Quick stat card (dashboard) ── */
.card-stat .card-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-stat .stat-label {
  font-size: 0.8125rem;
  color: var(--wasla-muted);
  font-weight: 500;
}

.card-stat .stat-value {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--wasla-ink);
}

/* ── Link card hover ── */
.card-clickable {
  transition: border-color 0.15s, box-shadow 0.15s;
  cursor: pointer;
}

.card-clickable:hover {
  border-color: var(--brand-primary, #0557E7);
  box-shadow: 0 1px 3px rgba(5, 87, 231, 0.12), 0 6px 16px rgba(5, 87, 231, 0.08);
}

/* ── KPI cards (unified) ── */
.kpi-row .card {
  transition: transform 0.15s, box-shadow 0.15s;
}

.kpi-row .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* ── Scrollbar styling (sidebar) ── */
.sidebar::-webkit-scrollbar {
  width: 4px;
}

.sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.22);
  border-radius: 4px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.38);
}

/* ── Brand navbar (Cycle 17 B — navy bar per brand_identity_v2.md §5.4) ──
   The prototype top nav is a solid navy bar with a white wordmark and
   white/translucent links. Bootstrap's `navbar-dark` modifier is
   applied in the template — which already expects a dark surface — so
   the white-text hooks now line up with the navy background.
   Shared by dashboard_base.html + storefront/base.html. */
.brand-navbar {
  background: var(--wasla-navy, #1D3A5E);
  border-bottom: 1px solid var(--wasla-navy-deep, #152C49);
}

/* ── Theme toggle button (Phase G: motion + elevation tokens) ── */
.wasla-theme-toggle {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  border-radius: 0.5rem;
  padding: 0.25rem 0.5rem;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-elev-1);
  transition: background var(--motion-hover),
              border-color var(--motion-hover),
              box-shadow var(--motion-hover);
}

.wasla-theme-toggle:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: var(--shadow-elev-2);
}

.wasla-theme-toggle:active {
  transform: scale(0.98);
  transition: transform var(--motion-press);
}

/* ── Navbar polish (Cycle 17 B — navy bar, white wordmark + links) ──
   The base templates apply Bootstrap's `navbar-dark`; the children
   below are now styled to sit on the solid navy surface. */
.brand-navbar .navbar-brand {
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #ffffff;
}

.brand-navbar .navbar-brand:hover,
.brand-navbar .navbar-brand:focus {
  color: #ffffff;
}

.brand-navbar .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.82);
}

.brand-navbar .navbar-nav .nav-link:hover {
  color: #ffffff;
}

/* Active link — gold-dotted underline marker (gold is a brand
   signature; brand_identity_v2.md §5.4). */
.brand-navbar .navbar-nav .nav-link.active {
  color: #ffffff;
  font-weight: 600;
  border-bottom: 2px solid var(--wasla-gold, #D4AF36);
}

/* The primary nav action ("Start Registration") uses `btn-light` in
   the template — promote it to the electric-blue primary so it is the
   single unmistakable CTA in the navy bar. */
.brand-navbar .btn-light {
  background: var(--wasla-blue, #0557E7);
  border-color: var(--wasla-blue, #0557E7);
  color: #ffffff;
  font-weight: 600;
}

.brand-navbar .btn-light:hover,
.brand-navbar .btn-light:focus {
  background: var(--wasla-blue-hover, #0246C4);
  border-color: var(--wasla-blue-hover, #0246C4);
  color: #ffffff;
}

.brand-navbar .btn-light.disabled,
.brand-navbar .btn-light:disabled {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.6);
  opacity: 1;
}

/* Secondary navbar actions (Logout, Account, Wishlist, Admin) keep
   `btn-outline-light` — a ghost-on-navy: transparent + white + white
   border. */
.brand-navbar .btn-outline-light {
  border-color: rgba(255, 255, 255, 0.55);
  color: #ffffff;
  background: transparent;
  font-size: 0.8125rem;
  padding: 0.35rem 0.75rem;
}

.brand-navbar .btn-outline-light:hover,
.brand-navbar .btn-outline-light:focus {
  background: rgba(255, 255, 255, 0.12);
  border-color: #ffffff;
  color: #ffffff;
}

.brand-navbar .form-select-sm {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.28);
  color: #ffffff;
  font-size: 0.8125rem;
  padding: 0.3rem 2rem 0.3rem 0.6rem;
}

.brand-navbar .form-select-sm option {
  background: var(--wasla-navy, #1D3A5E);
  color: #ffffff;
}

.brand-navbar .form-control,
.brand-navbar .form-control-sm {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.28);
  color: #ffffff;
}

.brand-navbar .form-control::placeholder,
.brand-navbar .form-control-sm::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

.brand-navbar .badge.text-bg-light {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
  font-weight: 500;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

/* `text-white-50` (used for "Store:" / username labels) reads fine on
   navy — keep Bootstrap's default translucent white. */
.brand-navbar .text-white-50 {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* The theme-toggle's translucent-white base already suits the navy
   bar; keep it as-is (rule defined above). navbar-toggler defaults
   already assume a dark bg under navbar-dark. */

/* ── Auth layout — C17: flat v2 canvas; navy topbar owned by .wasla-auth-topbar.
   The legacy orange-glow glass backdrop + white-glass header override are
   retired (they fought Lane D's navy auth shell via specificity + !important). */
body.auth-body {
  background: var(--wasla-canvas, #F4F6F9);
  min-height: 100vh;
}

/* ══════════════════════════════════════════════
   Dark Mode — Cycle 19 Lane C
   Reworked from the pre-C17 zinc-grey leftover to a proper v2 dark
   counterpart: the navy identity deepened toward near-black. The dark
   token ramp lives in tokens.css ([data-bs-theme="dark"]); these rules
   exist only for components that hard-code a light value or need a
   dark-specific treatment. Everything else flips via the tokens.
   ══════════════════════════════════════════════ */

/* Page + body: deep-navy canvas, off-white text. .sidebar and
   .brand-navbar are navy in light mode already and flip via the
   --wasla-navy token, so they need no per-component dark rule. */
[data-bs-theme="dark"] body,
[data-bs-theme="dark"] body.wasla-body {
  background: var(--wasla-canvas, #0E1726);
  color: var(--wasla-ink, #E8ECF3);
}

/* The navy rail darkens via --wasla-navy; the leading border too. */
[data-bs-theme="dark"] .sidebar {
  border-inline-end-color: var(--wasla-navy-deep, #0A1322);
}

/* Sidebar nav rows: the navy-rail treatment still works on the deeper
   navy, but the active white pill is too stark on a dark UI — use a
   raised-navy fill with the electric-blue marker instead. */
[data-bs-theme="dark"] .sidebar .nav-link.active {
  background: var(--wasla-surface-hover, #22335A);
  color: #ffffff;
  box-shadow: inset 3px 0 0 var(--wasla-blue, #3C7BF0);
}

[data-bs-theme="dark"] .sidebar .nav-link[data-section].active svg {
  stroke: #ffffff;
}

/* Cards: dark surface, low-contrast border, deeper shadow. */
[data-bs-theme="dark"] .card {
  background: var(--wasla-surface, #1B2A47);
  border-color: var(--wasla-line, #2B3A57);
  box-shadow: var(--wasla-shadow);
}

[data-bs-theme="dark"] .metric-label {
  color: var(--wasla-body, #AEB9CC);
}

[data-bs-theme="dark"] .metric-value {
  color: var(--wasla-ink, #E8ECF3);
}

/* Metric icon chips hard-code light tint+glyph hexes — re-tone to
   deep-tinted fills with lifted glyphs for the dark canvas. */
[data-bs-theme="dark"] .metric-icon.icon-primary {
  background: var(--wasla-ai-tint, #16294D);
  color: var(--wasla-blue, #3C7BF0);
}

/* Cycle 26 Lane B: dark-mode chip palette flipped via tokens.css (was 12 inline hex rules here). */

[data-bs-theme="dark"] footer,
[data-bs-theme="dark"] footer.bg-light {
  background: var(--wasla-navy, #101B2E) !important;
  border-color: var(--wasla-line, #2B3A57) !important;
  color: var(--wasla-muted, #7C879B);
}

[data-bs-theme="dark"] footer .text-muted {
  color: var(--wasla-muted, #7C879B) !important;
}

/* Generic Bootstrap .bg-light renders a light fill on the dark canvas (cards,
   badges, placeholders — ~50 template uses); only footer.bg-light was handled.
   Flip the generic helper to the raised dark surface in dark mode so it stops
   reading as a bright patch. Dark-scoped only; light mode is unchanged. */
[data-bs-theme="dark"] .bg-light {
  background-color: var(--wasla-surface-raised, #16223C) !important;
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  background: var(--wasla-surface-raised, #16223C);
  border-color: var(--wasla-line, #2B3A57);
  color: var(--wasla-ink, #E8ECF3);
}

[data-bs-theme="dark"] .form-control::placeholder {
  color: var(--wasla-muted, #7C879B);
}

[data-bs-theme="dark"] .form-label,
[data-bs-theme="dark"] .form-check-label,
[data-bs-theme="dark"] .col-form-label {
  color: var(--wasla-body, #AEB9CC);
}

[data-bs-theme="dark"] .form-check-input {
  background-color: var(--wasla-surface-raised, #16223C);
  border-color: var(--wasla-line-strong, #3A4D70);
}

[data-bs-theme="dark"] .form-check-input:checked {
  background-color: var(--wasla-blue, #3C7BF0);
  border-color: var(--wasla-blue, #3C7BF0);
}

[data-bs-theme="dark"] .card h1,
[data-bs-theme="dark"] .card h2,
[data-bs-theme="dark"] .card h3,
[data-bs-theme="dark"] .card h4,
[data-bs-theme="dark"] .card h5,
[data-bs-theme="dark"] .card h6,
[data-bs-theme="dark"] .card-title {
  color: var(--wasla-ink, #E8ECF3);
}

[data-bs-theme="dark"] .card-header.bg-white {
  background: var(--wasla-surface, #1B2A47) !important;
  border-color: var(--wasla-line, #2B3A57);
  color: var(--wasla-ink, #E8ECF3);
}

[data-bs-theme="dark"] .empty-state svg {
  color: var(--wasla-line-strong, #3A4D70);
}

[data-bs-theme="dark"] .empty-state .empty-state-text {
  color: var(--wasla-muted, #7C879B);
}

[data-bs-theme="dark"] .product-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

[data-bs-theme="dark"] .page-header .page-title {
  color: var(--wasla-ink, #E8ECF3);
}

[data-bs-theme="dark"] .page-header .page-subtitle {
  color: var(--wasla-muted, #7C879B);
}

/* DES-05: the dashboard page-title lockup is styled by .wasla-feature-header__title
   (defined in cycle15-platform.css, theme-aware via --wasla-heading). The 40
   remaining inline-navy h1s were migrated to that class, so the two PR #135
   !important catch-alls ([data-bs-theme=dark] .wasla-feature-header h1 and
   h1[style*=wasla-navy]) are retired here: no template carries inline navy text. */

/* Tables: the navy header band darkens via --wasla-navy; body rows
   need dark-surface text + a deep hover tint. */
[data-bs-theme="dark"] .table > thead > tr > th {
  background: var(--wasla-navy, #101B2E);
  color: #ffffff;
  border-bottom-color: var(--wasla-line, #2B3A57);
}

[data-bs-theme="dark"] .table > tbody > tr > td {
  color: var(--wasla-body, #AEB9CC);
  border-color: var(--wasla-line, #2B3A57);
}

[data-bs-theme="dark"] .table-hover > tbody > tr:hover {
  background-color: var(--wasla-surface-hover, #22335A);
}

[data-bs-theme="dark"] .card-header {
  border-bottom-color: var(--wasla-line, #2B3A57);
}

[data-bs-theme="dark"] .product-thumb {
  border-color: var(--wasla-line, #2B3A57);
}

[data-bs-theme="dark"] .product-thumb-placeholder {
  background: var(--wasla-surface-raised, #16223C);
  border-color: var(--wasla-line-strong, #3A4D70);
}

[data-bs-theme="dark"] .card-stat .stat-value {
  color: var(--wasla-ink, #E8ECF3);
}

[data-bs-theme="dark"] .card-clickable:hover {
  border-color: var(--wasla-blue, #3C7BF0);
  box-shadow: 0 1px 3px rgba(60, 123, 240, 0.2),
              0 6px 16px rgba(60, 123, 240, 0.12);
}

/* The navy-rail scrollbar uses translucent white — that still reads on
   the deepened navy, so no dark override is needed; the pre-C17 grey
   override is removed. */

/* .brand-navbar darkens via the --wasla-navy token (it is
   `background: var(--wasla-navy)` in light mode) — no per-component
   dark rule, the legacy gradient override is removed. */

[data-bs-theme="dark"] .auth-card {
  background: var(--wasla-surface, #1B2A47);
  border-color: var(--wasla-line, #2B3A57);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

[data-bs-theme="dark"] .card-body ul {
  border-color: var(--wasla-line, #2B3A57);
}

[data-bs-theme="dark"] .card-body ul li label:hover {
  background: var(--wasla-surface-hover, #22335A);
}

/* ── Storefront product card polish ── */
.product-card .card-body {
  padding: 1rem;
}

.product-card .card-body .fw-bold {
  font-size: 0.9375rem;
  line-height: 1.4;
  margin-bottom: 0.25rem;
}

.product-card .card-body .text-success {
  font-size: 1.0625rem;
}

/* ── prefers-color-scheme fallback (Cycle 19 Lane C; tokenised Lane-F) ──
   When the OS prefers dark and no explicit theme is set, mirror the v2
   dark surface treatment. The global --wasla-* tokens cannot be used
   directly here: without a [data-bs-theme="dark"] attribute they still
   hold their light :root values, and redefining them on :root inside this
   media query would flip EVERY token consumer under OS-dark (a far broader
   change than this deliberately-scoped fallback). So we declare a LOCAL
   OS-dark palette once below — values mirror the tokens.css dark ramp
   (--wasla-canvas/-surface/-line/-ink/etc.) — and reference it. One source
   of truth for this block; no scattered hexes to hand-sync with tokens.css. */
@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme="light"]) {
    --_osdark-canvas: #0E1726;         /* = --wasla-canvas */
    --_osdark-ink: #E8ECF3;            /* = --wasla-ink */
    --_osdark-navy: #101B2E;           /* = --wasla-navy / --wasla-canvas-navy */
    --_osdark-navy-deep: #0A1322;      /* = --wasla-navy-deep */
    --_osdark-surface: #1B2A47;        /* = --wasla-surface */
    --_osdark-surface-raised: #16223C; /* = --wasla-surface-raised */
    --_osdark-surface-hover: #22335A;  /* = --wasla-surface-hover */
    --_osdark-line: #2B3A57;           /* = --wasla-line */
    --_osdark-line-strong: #3A4D70;    /* = --wasla-line-strong */
    --_osdark-body: #AEB9CC;           /* = --wasla-body */
    --_osdark-blue: #3C7BF0;           /* = --wasla-blue */
  }

  :root:not([data-bs-theme="light"]) body,
  :root:not([data-bs-theme="light"]) body.wasla-body {
    background: var(--_osdark-canvas);
    color: var(--_osdark-ink);
  }

  :root:not([data-bs-theme="light"]) .sidebar {
    background: var(--_osdark-navy);
    border-inline-end-color: var(--_osdark-navy-deep);
  }

  :root:not([data-bs-theme="light"]) .sidebar .nav-link.active {
    background: var(--_osdark-surface-hover);
    color: #ffffff;
    box-shadow: inset 3px 0 0 var(--_osdark-blue);
  }

  :root:not([data-bs-theme="light"]) .card {
    background: var(--_osdark-surface);
    border-color: var(--_osdark-line);
  }

  :root:not([data-bs-theme="light"]) .metric-label {
    color: var(--_osdark-body);
  }

  :root:not([data-bs-theme="light"]) .table > thead > tr > th {
    background: var(--_osdark-navy);
    color: #ffffff;
    border-bottom-color: var(--_osdark-line);
  }

  :root:not([data-bs-theme="light"]) .table > tbody > tr > td {
    color: var(--_osdark-body);
  }

  :root:not([data-bs-theme="light"]) footer,
  :root:not([data-bs-theme="light"]) footer.bg-light {
    background: var(--_osdark-navy) !important;
    border-color: var(--_osdark-line) !important;
  }

  :root:not([data-bs-theme="light"]) .form-label,
  :root:not([data-bs-theme="light"]) .form-check-label,
  :root:not([data-bs-theme="light"]) .col-form-label {
    color: var(--_osdark-body);
  }

  :root:not([data-bs-theme="light"]) .card h1,
  :root:not([data-bs-theme="light"]) .card h2,
  :root:not([data-bs-theme="light"]) .card h3,
  :root:not([data-bs-theme="light"]) .card h4,
  :root:not([data-bs-theme="light"]) .card h5,
  :root:not([data-bs-theme="light"]) .card h6,
  :root:not([data-bs-theme="light"]) .card-title {
    color: var(--_osdark-ink);
  }

  :root:not([data-bs-theme="light"]) .form-control,
  :root:not([data-bs-theme="light"]) .form-select {
    background: var(--_osdark-surface-raised);
    border-color: var(--_osdark-line);
    color: var(--_osdark-ink);
  }

  :root:not([data-bs-theme="light"]) .form-check-input {
    background-color: var(--_osdark-surface-raised);
    border-color: var(--_osdark-line-strong);
  }

  :root:not([data-bs-theme="light"]) .form-check-input:checked {
    background-color: var(--_osdark-blue);
    border-color: var(--_osdark-blue);
  }

  :root:not([data-bs-theme="light"]) .auth-card {
    background: var(--_osdark-surface);
    border-color: var(--_osdark-line);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  }

  :root:not([data-bs-theme="light"]) body.auth-body {
    background: var(--_osdark-canvas);
  }

  :root:not([data-bs-theme="light"]) body.auth-body header {
    background: var(--_osdark-navy) !important;
    border-bottom-color: var(--_osdark-line) !important;
    color: var(--_osdark-ink);
  }

  :root:not([data-bs-theme="light"]) body.auth-body header .navbar-brand {
    color: var(--_osdark-ink);
  }
}

/* ══════════════════════════════════════════════════════════════════
   Cycle 4 — mobile-quality fixes
   See Docs/audit/MASTER_FINDINGS.md for context. Each rule keyed to
   a finding ID for grep-back.
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* M-H-003: iOS Safari auto-zooms inputs with computed font-size < 16px.
     The form-select-sm in the navbar (13px) was the worst offender —
     focusing the language switcher zoomed every page. */
  .form-control,
  .form-select,
  input,
  select,
  textarea {
    font-size: 16px;
  }
}

/* M-H-001: storefront bottom-nav is ~56px tall on mobile but main
   only had pb-5 (48px) — bottom 8-12px of every page sat behind the
   fixed nav. Add a guaranteed body padding when the nav is visible.
   LAN-010: scope to pages that actually render the bottom nav (storefront)
   via :has(), so the public/landing layout no longer carries a phantom gap. */
@media (max-width: 767.98px) {
  body.wasla-body:has(.wasla-storefront-bottomnav) {
    padding-bottom: 4.5rem;
  }
}

/* M-M-001/2: WCAG 2.5.5 minimum tap target is 44x44 CSS px. Both the
   theme toggle and small navbar buttons were ~26-30px. Bump them up
   only on touch viewports so desktop hover affordance stays compact. */
@media (max-width: 767.98px) {
  .wasla-theme-toggle,
  .brand-navbar .btn-sm,
  .brand-navbar .btn-outline-light,
  .brand-navbar .btn-primary {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* M-M-004: fixed `white-space: nowrap` on table headers forced
   horizontal scroll for long Arabic words even when the table only
   had 3-4 columns. Let them wrap on narrow viewports. */
@media (max-width: 575.98px) {
  .table > thead > tr > th {
    white-space: normal;
  }
}

/* ══════════════════════════════════════════════════════════════════
   Cycle 5 — visual polish (A4 / A7 / A9 / A11)
   See plan §A and Docs/audit/MASTER_FINDINGS.md.
   ══════════════════════════════════════════════════════════════════ */

/* A4: clickable table rows (rows that contain an action <a> via the
   final cell) deserve a cursor affordance. Apply via :has(); on
   browsers without :has() the row stays default-cursor — graceful. */
@supports selector(:has(*)) {
  .table-hover tbody tr:has(a.btn) {
    cursor: pointer;
  }
}

/* A7: explicit focus-visible ring across form inputs. Bootstrap's
   default is too subtle on glass surfaces. 2px ring at the brand
   colour, small offset to keep field crisp. */
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible {
  outline: 2px solid var(--brand-primary, #0557E7);
  outline-offset: 1px;
  box-shadow: none;
}

/* A9: sidebar scrollbar contrast. Cycle 17 B — re-toned for the navy
   rail (translucent white instead of zinc grey). */
.sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.28);
}
.sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.45);
}
/* C19 Lane C: the navy rail's translucent-white scrollbar reads fine
   on the deepened dark navy — no dark-mode override needed. */

/* A11: dashboard mobile sidebar hamburger toggle: WCAG 2.5.5 44×44
   minimum on mobile only. Cycle 4 fixed the navbar buttons; missed
   this one. */
@media (max-width: 991.98px) {
  #waslaSidebarToggle {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ══════════════════════════════════════════════════════════════════
   Cycle 5 (B) — colorful per-icon sidebar
   Each nav-link gets data-section="<key>" in sidebar.html; the SVG
   inherits stroke from --icon-<key> tokens defined in tokens.css
   (light + dark mode variants). Opacity-driven dim/active state
   preserved from the original grayscale rules.
   ══════════════════════════════════════════════════════════════════ */

.sidebar .nav-link[data-section] svg {
  opacity: 0.85;
  transition: opacity var(--motion-hover, 150ms ease-out);
}

.sidebar .nav-link[data-section]:hover svg,
.sidebar .nav-link[data-section].active svg {
  opacity: 1;
}

.sidebar .nav-link[data-section="dashboard"]          svg { stroke: var(--icon-dashboard); }
.sidebar .nav-link[data-section="products"]           svg { stroke: var(--icon-products); }
.sidebar .nav-link[data-section="categories"]         svg { stroke: var(--icon-categories); }
.sidebar .nav-link[data-section="orders"]             svg { stroke: var(--icon-orders); }
.sidebar .nav-link[data-section="coupons"]            svg { stroke: var(--icon-coupons); }
.sidebar .nav-link[data-section="shipping"]           svg { stroke: var(--icon-shipping); }
.sidebar .nav-link[data-section="shipping-settings"]  svg { stroke: var(--icon-shipping-settings); }
.sidebar .nav-link[data-section="wallet"]             svg { stroke: var(--icon-wallet); }
.sidebar .nav-link[data-section="balance"]            svg { stroke: var(--icon-balance); }
.sidebar .nav-link[data-section="settlements"]        svg { stroke: var(--icon-settlements); }
.sidebar .nav-link[data-section="reviews"]            svg { stroke: var(--icon-reviews); }
.sidebar .nav-link[data-section="returns"]            svg { stroke: var(--icon-returns); }
.sidebar .nav-link[data-section="gift-cards"]         svg { stroke: var(--icon-gift-cards); }
.sidebar .nav-link[data-section="loyalty"]            svg { stroke: var(--icon-loyalty); }
.sidebar .nav-link[data-section="app-store"]          svg { stroke: var(--icon-app-store); }
.sidebar .nav-link[data-section="subscriptions"]      svg { stroke: var(--icon-subscriptions); }
.sidebar .nav-link[data-section="import"]             svg { stroke: var(--icon-import); }
.sidebar .nav-link[data-section="themes"]             svg { stroke: var(--icon-themes); }
.sidebar .nav-link[data-section="customize"]          svg { stroke: var(--icon-customize); }
.sidebar .nav-link[data-section="banners"]            svg { stroke: var(--icon-banners); }
.sidebar .nav-link[data-section="sections"]           svg { stroke: var(--icon-sections); }
.sidebar .nav-link[data-section="pages"]              svg { stroke: var(--icon-pages); }
.sidebar .nav-link[data-section="export"]             svg { stroke: var(--icon-export); }
.sidebar .nav-link[data-section="ai"]                 svg { stroke: var(--icon-ai); }
.sidebar .nav-link[data-section="analytics"]          svg { stroke: var(--icon-analytics); }
.sidebar .nav-link[data-section="settings"]           svg { stroke: var(--icon-settings); }

/* On hover/active the parent nav-link bg already tints brand-blue —
   keep the icon at full opacity (above) and don't override stroke,
   so the colour reads cleanly through the brand background. */

/* ══════════════════════════════════════════════════════════════════
   Cycle 6 — typography polish (cross-locale)
   See plan §A and Docs/audit/MASTER_FINDINGS.md.
   ══════════════════════════════════════════════════════════════════ */

/* T-H-004: Bootstrap's default heading margin/line-height vary
   slightly between heading levels and depend on which raw element
   wraps them. Lock a consistent rhythm so .h3 + <h3> + <h4 class="h3">
   all look the same. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  line-height: 1.25;
  margin-top: 0;            /* let containers control top space */
  margin-bottom: 0.5rem;
}

/* T-H-003: tabular-nums on every number-bearing surface where
   columns / lines need to align optically. Scope tightly so prose
   stays in proportional figures. */
.table > tbody > tr > td,
.table > tbody > tr > th,
.kpi-row .card,
.metric-value,
.metric-label,
.badge {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* T-M-001: 2-token letter-spacing scale. Sidebar section labels
   use --tracking-label (existing 0.08em). Body + headings use
   --tracking-normal (zero). */
:root {
  --tracking-normal: 0;
  --tracking-label: 0.08em;
}

/* T-M-003: page subtitle line-height — title + subtitle group
   should read as a unit. */
.page-header .page-subtitle,
.text-muted.small {
  line-height: 1.5;
}

/* T-M-002: documented intentional locale font-size variance for
   sidebar nav-links. AR glyphs are heavier and benefit from a
   small size bump. The actual values live in wasla-{ltr,rtl}.css —
   this comment is the documentation. (No CSS rule.) */

/* ══════════════════════════════════════════════════════════════════
   Cycle 6 — data presentation standardisation
   See plan §B.
   ══════════════════════════════════════════════════════════════════ */

/* D-H-002: card body padding standardisation. Pages currently mix
   p-3, p-4, p-0 ad-hoc. Default to comfortable p-4; let pages
   opt-down to p-3 for filter/search cards via .card-compact. */
.card .card-body {
  padding: 1.25rem; /* between p-3 (1rem) and p-4 (1.5rem); strikes balance */
}
.card.card-compact .card-body {
  padding: 1rem;
}

/* D-H-003: required-field visual hint. Templates can mark a label
   <span class="required-mark" aria-hidden="true">*</span> next to
   <label>, OR add `class="form-control required"` to the input.
   Either way, visually distinct without screen-reader noise (the
   <abbr title="required"> the agent suggested duplicates the
   `required` HTML attribute already announced by AT). */
.required-mark {
  color: var(--wasla-danger);
  margin-inline-start: 0.25rem;
  font-weight: 600;
}

/* Help-text shade — slightly lighter than label so eyes settle on
   the input first, not the explanation. */
.form-text,
.help-text {
  color: var(--wasla-body);
  font-size: 0.8125rem;
  line-height: 1.5;
}

/* D-H-005 + cross-cutting #4: end-aligned form action row.
   Adopt `<div class="form-actions">…</div>` everywhere instead of
   per-page inline flex utilities. */
.form-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}
.form-actions .btn-cancel,
.form-actions .btn-back {
  margin-inline-end: auto; /* push secondary action to the START */
}

/* D-M-004: KPI metric tile uniform height. Pages mixed flex-column
   (older) and flex-row card-clickable (newer) → uneven row heights.
   Force a min so the row reads as a clean strip. */
.kpi-row .card,
.card-metric,
.card-stat {
  min-height: 92px;
}

/* Cross-cutting #5: every action column right-aligned. Adopt
   `<th class="text-end">` + `<td class="text-end">` for the LAST
   column on data tables. This rule auto-aligns the last cell as
   a fallback if a template forgets, but only inside .table-actions
   marker so we don't break legitimate left-aligned last columns. */
.table.table-actions > tbody > tr > td:last-child,
.table.table-actions > thead > tr > th:last-child {
  text-align: end;
}

/* ── Cycle 26 Lane C: global a11y — visible focus ring on all .btn elements.
   Addresses the C25 Lane E forward-listed item: Bootstrap's default
   :focus-visible was relying on browser defaults; this adds an explicit
   electric-blue v2 outline + box-shadow for clearly-visible focus across
   keyboard navigation. Uses var(--wasla-blue) so it flips to the lifted
   dark-blue under [data-bs-theme="dark"]. ── */
.btn:focus-visible {
  outline: 2px solid var(--wasla-blue, #0557E7);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(5, 87, 231, 0.25);
}

/* Light + dark Bootstrap secondary/outline variants get a subtle focus too. */
.btn-outline-secondary:focus-visible,
.btn-outline-light:focus-visible {
  outline: 2px solid var(--wasla-blue, #0557E7);
  outline-offset: 2px;
}