/* ─────────────────────────────────────────────────────────────────────────
   Pro My Account — dark theme

   Almost entirely a token swap: the rest of the plugin already paints with
   --pma-surface / --pma-bg / --pma-border / --pma-text, so redefining those is
   enough. What follows the token block is the short list of places where the
   original stylesheets hard-coded a light colour.

   The theme is resolved onto <html data-pma-resolved> by PMA_Theme's boot
   script before first paint, so there is never a flash of the wrong theme.
   ───────────────────────────────────────────────────────────────────────── */

html[data-pma-resolved="dark"] {
  --pma-bg:           #0f1115;
  --pma-surface:      #171a21;
  --pma-surface-2:    #1e222b;
  --pma-border:       #2a2f3a;
  --pma-border-soft:  #232732;

  --pma-text:         #e9eaee;
  --pma-text-2:       #b3b7c2;
  --pma-text-3:       #7f8494;

  --pma-shadow-xs:    0 1px 4px rgba(0,0,0,.45);
  --pma-shadow-sm:    0 2px 12px rgba(0,0,0,.45);
  --pma-shadow-md:    0 4px 24px rgba(0,0,0,.5);
  --pma-shadow-lg:    0 10px 44px rgba(0,0,0,.6);

  color-scheme: dark;
}

/* Native controls (date pickers, scrollbars, autofill) follow this. */
html[data-pma-resolved="dark"] .pma-scope,
html[data-pma-resolved="dark"] .pma-dashboard {
  color-scheme: dark;

  /* The loading veil dims instead of washing out. */
  --pma-veil: rgba(15,17,21,.72);
}

/* ── Surfaces the original stylesheets painted white ─────────────────────── */

html[data-pma-resolved="dark"] .pma-dashboard,
html[data-pma-resolved="dark"] .pma-main {
  background: var(--pma-bg);
  color: var(--pma-text);
}

html[data-pma-resolved="dark"] .pma-sidebar,
html[data-pma-resolved="dark"] .pma-topbar,
html[data-pma-resolved="dark"] .pma-card,
html[data-pma-resolved="dark"] .pma-stat-card,
html[data-pma-resolved="dark"] .pma-course-card,
html[data-pma-resolved="dark"] .pma-order-row,
html[data-pma-resolved="dark"] .pma-ticket-row,
html[data-pma-resolved="dark"] .pma-table-head,
html[data-pma-resolved="dark"] .pma-notification-item,
html[data-pma-resolved="dark"] .pma-download-card,
html[data-pma-resolved="dark"] .pma-subscription-row,
html[data-pma-resolved="dark"] .pma-empty-state,
html[data-pma-resolved="dark"] .pma-quick-btn,
html[data-pma-resolved="dark"] .pma-mobile-nav,
html[data-pma-resolved="dark"] .pma-chat-bubble,
html[data-pma-resolved="dark"] .pma-ticket-view-wrap,
html[data-pma-resolved="dark"] .pma-ord,
html[data-pma-resolved="dark"] .pma-ord-toolbar,
html[data-pma-resolved="dark"] .pma-addr-editor .pma-card,
html[data-pma-resolved="dark"] .pma-payment-modal-card {
  background: var(--pma-surface);
  border-color: var(--pma-border);
  color: var(--pma-text);
}

/* ── Sidebar menu ────────────────────────────────────────────────────────
   The light theme tints the active row with the brand at 8% and prints the
   label in the brand colour. On a #171a21 surface an 8% tint is invisible
   and a #7C1695 label is unreadable, so the three sidebar tokens are swapped
   for dark-side equivalents: a stronger brand wash and the light brand tint
   (which is the brand mixed toward white) as the accent. */
html[data-pma-resolved="dark"] .pma-sidebar {
  --pma-nav-hover:  rgba(255,255,255,.055);
  --pma-nav-active: var(--pma-brand-ring, rgba(255,255,255,.09));
  --pma-nav-accent: var(--pma-brand-light, #e9eaee);
}

html[data-pma-resolved="dark"] .pma-nav-group + .pma-nav-group,
html[data-pma-resolved="dark"] .pma-side-foot {
  border-color: var(--pma-border);
}

html[data-pma-resolved="dark"] .pma-nav-group-title {
  color: var(--pma-text-3);
}

/* The brand block is the one lit surface in a dark column, so it needs a
   shadow to sit on rather than a border to be cut out by. */
html[data-pma-resolved="dark"] .pma-profile-card {
  box-shadow: 0 12px 34px rgba(0,0,0,.5);
}

html[data-pma-resolved="dark"] .pma-section-header h2,
html[data-pma-resolved="dark"] .pma-widget-header h3,
html[data-pma-resolved="dark"] .pma-quick-title,
html[data-pma-resolved="dark"] .pma-stat-value,
html[data-pma-resolved="dark"] .pma-ticket-name,
html[data-pma-resolved="dark"] .pma-order-row-product,
html[data-pma-resolved="dark"] .pma-course-name {
  color: var(--pma-text);
}

html[data-pma-resolved="dark"] .pma-section-sub,
html[data-pma-resolved="dark"] .pma-stat-label,
html[data-pma-resolved="dark"] .pma-order-date,
html[data-pma-resolved="dark"] .pma-ticket-date,
html[data-pma-resolved="dark"] .pma-empty-sub {
  color: var(--pma-text-3);
}

/* ── Form controls ───────────────────────────────────────────────────────── */

html[data-pma-resolved="dark"] .pma-input,
html[data-pma-resolved="dark"] .pma-select,
html[data-pma-resolved="dark"] .pma-textarea,
html[data-pma-resolved="dark"] input[type="text"].pma-input,
html[data-pma-resolved="dark"] .pma-ord-search input {
  background: var(--pma-surface-2);
  border-color: var(--pma-border);
  color: var(--pma-text);
}

html[data-pma-resolved="dark"] .pma-input::placeholder,
html[data-pma-resolved="dark"] .pma-textarea::placeholder,
html[data-pma-resolved="dark"] .pma-ord-search input::placeholder {
  color: var(--pma-text-3);
}

html[data-pma-resolved="dark"] .pma-input:focus,
html[data-pma-resolved="dark"] .pma-select:focus,
html[data-pma-resolved="dark"] .pma-textarea:focus {
  border-color: var(--pma-brand);
}

/* Chrome paints autofilled fields with its own near-white. */
html[data-pma-resolved="dark"] input:-webkit-autofill,
html[data-pma-resolved="dark"] input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--pma-text);
  -webkit-box-shadow: 0 0 0 1000px var(--pma-surface-2) inset;
}

html[data-pma-resolved="dark"] .pma-btn-sm,
html[data-pma-resolved="dark"] .pma-text-btn {
  background: var(--pma-surface-2);
  border-color: var(--pma-border);
  color: var(--pma-text-2);
}
html[data-pma-resolved="dark"] .pma-btn-sm:hover { border-color: var(--pma-brand); color: var(--pma-text); }

/* ── Status pills: pale backgrounds become tinted darks ──────────────────── */

html[data-pma-resolved="dark"] .pma-status-badge,
html[data-pma-resolved="dark"] .pma-priority-badge,
html[data-pma-resolved="dark"] .pma-order-stage-badge {
  background: rgba(255,255,255,.05) !important;
}

html[data-pma-resolved="dark"] .pma-order-stage-badge.pending  { color: #fbbf24; border-color: rgba(251,191,36,.4); }
html[data-pma-resolved="dark"] .pma-order-stage-badge.refunded { color: #9ca3af; border-color: rgba(156,163,175,.4); }
html[data-pma-resolved="dark"] .pma-priority-badge.low         { color: #9ca3af; border-color: rgba(156,163,175,.4); }
html[data-pma-resolved="dark"] .pma-priority-badge.high        { color: #fbbf24; border-color: rgba(251,191,36,.4); }
html[data-pma-resolved="dark"] .pma-status-badge.waiting-user  { color: #fbbf24; border-color: rgba(251,191,36,.4); }
html[data-pma-resolved="dark"] .pma-status-badge.cancelled     { color: #9ca3af; border-color: rgba(156,163,175,.4); }

/* ── Premium layer ───────────────────────────────────────────────────────── */

html[data-pma-resolved="dark"] .pma-topbar-kbd,
html[data-pma-resolved="dark"] .pma-palette-esc,
html[data-pma-resolved="dark"] .pma-palette-foot kbd,
html[data-pma-resolved="dark"] .pma-return-item-qty input,
html[data-pma-resolved="dark"] .pma-map-zoom button,
html[data-pma-resolved="dark"] .pma-map-locate {
  background: var(--pma-surface-2);
  border-color: var(--pma-border);
  color: var(--pma-text-2);
}

html[data-pma-resolved="dark"] .pma-palette-backdrop,
html[data-pma-resolved="dark"] .pma-modal-backdrop { background: rgba(0,0,0,.66); }

html[data-pma-resolved="dark"] .pma-switch-thumb { background: #e9eaee; }

html[data-pma-resolved="dark"] .pma-map-credit {
  background: rgba(23,26,33,.82);
  color: var(--pma-text-3);
}

/* Raster tiles are drawn for light UIs; take the edge off without inverting. */
html[data-pma-resolved="dark"] .pma-map-tile { filter: brightness(.82) saturate(.85) contrast(1.05); }

html[data-pma-resolved="dark"] .pma-sk {
  background: linear-gradient(90deg, #1c2029 25%, #262b36 37%, #1c2029 63%);
  background-size: 400% 100%;
}

html[data-pma-resolved="dark"] .pma-rating label { color: #333845; }

/* ── Cart and checkout surfaces ──────────────────────────────────────────── */

html[data-pma-resolved="dark"] .pma-shop,
html[data-pma-resolved="dark"] .pma-cart,
html[data-pma-resolved="dark"] .pma-checkout {
  background: var(--pma-bg);
  color: var(--pma-text);
}

html[data-pma-resolved="dark"] .pma-toast-item,
html[data-pma-resolved="dark"] .pma-shop .pma-panel,
html[data-pma-resolved="dark"] .pma-shop .pma-summary,
html[data-pma-resolved="dark"] .pma-cart-row,
html[data-pma-resolved="dark"] .pma-pick-card {
  background: var(--pma-surface);
  border-color: var(--pma-border);
  color: var(--pma-text);
}

/* ── Print always uses the light document ────────────────────────────────── */

@media print {
  html[data-pma-resolved="dark"] body { background: #fff; color: #000; }
}