/* reseller-dashboard.css — page-specific styles for the reseller's own
   dashboard. Reuses site-nav, card patterns, and buttons as-is from
   components.css; this file covers what's genuinely new here. */

.dashboard-logout-btn { padding: 8px 18px; font-size: 14px; }

.dashboard-hero { padding: var(--space-6) 0 var(--space-5); }

.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  padding-bottom: var(--space-6);
}
@media (max-width: 639px) { .dashboard-stats { grid-template-columns: 1fr; } }

.stat-card {
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: var(--space-4);
}
.stat-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-tertiary); margin: 0 0 var(--space-2); font-weight: 600; }
.stat-value { font-family: var(--font-display); font-size: clamp(24px, 4vw, 32px); font-weight: 700; margin: 0; }
.stat-value-emerald { color: var(--emerald); }

/* Header actions — Payouts and Messages sit beside Log Out so both are
   reachable from anywhere on the page. */
.dashboard-header-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.dashboard-header-btn { position: relative; padding: 10px var(--space-3); font-size: 14px; }
.header-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--emerald);
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
}
.header-badge[hidden] { display: none; }
@media (max-width: 520px) {
  .dashboard-header-btn { padding: 8px 10px; font-size: 13px; }
}

/* Payout rules — always visible in the modal, whatever the balance.
   The complaint this fixes: resellers only discovered the minimum after
   making a sale. */
.payout-rules {
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-input);
  padding: var(--space-3);
  margin-bottom: var(--space-4);
  font-size: 13px;
  color: var(--text-secondary);
}
.payout-rules p { margin: 0 0 var(--space-2); color: var(--text-primary); }
.payout-rules ul { margin: 0; padding-left: var(--space-4); }
.payout-rules li + li { margin-top: 4px; }
.payout-rules strong { color: var(--text-primary); }

/* Payouts. Reuses .stat-label / .stat-value-emerald / .cap-notice from
   above rather than inventing parallel styles for the same ideas. */
.dashboard-payout-section { padding-bottom: var(--space-5); }
.dashboard-payout-section h3 { margin-bottom: var(--space-3); }

.payout-balance-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
@media (max-width: 639px) { .payout-balance-grid { grid-template-columns: 1fr; } }

.payout-balance-item {
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: var(--space-4);
}
/* The number that actually lands in their bank gets the emphasis. */
.payout-balance-item-final { border-color: rgba(15, 174, 121, 0.32); }

.payout-balance-value {
  font-family: var(--font-display);
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 700;
  margin: 0;
}
.payout-balance-fee { color: var(--text-secondary); }

.payout-method-row { margin-bottom: var(--space-3); }
.dashboard-payout-section label {
  display: block;
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: var(--space-1);
  margin-top: var(--space-3);
}
.dashboard-payout-section select,
.dashboard-payout-section input[type="text"] {
  width: 100%;
  max-width: 420px;
}

.payout-success {
  background: rgba(15, 174, 121, 0.12);
  border: 1px solid rgba(15, 174, 121, 0.32);
  border-radius: var(--radius-input);
  padding: var(--space-3);
  margin: var(--space-3) 0;
  font-size: 14px;
  color: var(--text-primary);
}
.payout-success[hidden] { display: none; }

/* ---------- Store name ---------- */
.dashboard-name-section { padding-bottom: var(--space-5); }
.dashboard-name-section h3 { margin-bottom: var(--space-2); }
.dashboard-name-section input { max-width: 420px; }

/* The store URL, stated plainly and read-only. A reseller changing their
   store's name will reasonably assume the link changed too — it can't
   (stores.id is the PK behind three foreign keys), and saying so here is
   cheaper than a support message asking why an old link still works. */
.store-url-locked {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  max-width: 420px;
  margin: 0 0 var(--space-4);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-input);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-tertiary);
}
.store-url-locked .ph { color: var(--signal-blue); flex-shrink: 0; margin-top: 2px; }
/* word-break so a long slug wraps inside the box instead of pushing it
   wider than the phone. */
.store-url-locked strong { color: var(--text-secondary); font-weight: 600; word-break: break-all; }

.dashboard-bio-section { padding-bottom: var(--space-5); }
.dashboard-bio-section h3 { margin-bottom: var(--space-2); }

.dashboard-products-section { padding-bottom: var(--space-5); }
.dashboard-products-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); flex-wrap: wrap; }
.dashboard-products-header h3 { margin: 0; }

.dashboard-products-count { font-size: 13px; color: var(--text-tertiary); margin: 0 0 var(--space-3); }

.cap-notice {
  background: rgba(46, 107, 255, 0.1);
  border: 1px solid rgba(46, 107, 255, 0.3);
  border-radius: var(--radius-input);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
  font-size: 14px;
  color: var(--text-primary);
}
.cap-notice[hidden] { display: none; }

.my-product-row-actions { display: flex; align-items: center; gap: var(--space-3); }
.my-product-remove-btn {
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: 16px;
  padding: 4px;
  display: flex;
  align-items: center;
  transition: color var(--motion-fast) var(--ease);
}
.my-product-remove-btn:hover { color: var(--danger); }

.my-product-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-input);
  padding: var(--space-3);
  margin-bottom: var(--space-2);
}
.my-product-row-name { font-weight: 600; }
.my-product-row-price { color: var(--emerald); font-weight: 600; white-space: nowrap; }

/* Inline price editing. The row that owns a margin hint loses its
   bottom margin so the hint reads as attached to it, not floating. */
.my-product-row:has(+ .my-product-margin-hint) { margin-bottom: var(--space-1); }

.my-product-price-edit {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.my-product-currency { color: var(--emerald); font-weight: 600; }
/* margin-bottom:0 is the fix for the price sitting higher than the
   product name in this row.
   The global `input` rule in components.css carries margin-bottom:16px,
   meant for stacked forms. Inside this inline-flex row that margin still
   applied, so .my-product-price-edit measured 16px taller than the input
   inside it. `align-items: center` then centred the ₹ and the buttons
   against that inflated box, pushing the price up relative to the name.
   Nothing was wrong with the alignment rules — the box being aligned was
   the wrong height. Same root cause as .admin-search in admin.css.
   min-height is reset too: this is a compact inline field, not a
   full-size form control. */
.my-product-price-input {
  width: 92px;
  min-height: 0;
  padding: var(--space-2);
  margin-bottom: 0;
  text-align: right;
  color: var(--emerald);
  font-weight: 600;
}
/* Chrome/Safari spinners crowd a 92px field and invite mis-clicks. */
.my-product-price-input::-webkit-outer-spin-button,
.my-product-price-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.my-product-price-input { -moz-appearance: textfield; }

.my-product-save-btn { padding: var(--space-2) var(--space-3); font-size: 13px; }
.my-product-save-btn[hidden] { display: none; }

.my-product-margin-hint {
  color: var(--text-tertiary);
  font-size: 12px;
  margin: 0 0 var(--space-3);
  padding-left: var(--space-3);
}

.dashboard-note {
  padding-bottom: var(--space-8);
  color: var(--text-tertiary);
  font-size: 14px;
}
.dashboard-note .ph-info { color: var(--signal-blue); margin-right: 4px; }
.dashboard-note a { color: var(--text-secondary); }

/* Store Theme */
.theme-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.theme-swatch {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
}
.theme-swatch-preview {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-card);
  border: 1px solid;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: var(--space-3);
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: outline-color var(--motion-fast) var(--ease);
}
.theme-swatch[aria-pressed="true"] .theme-swatch-preview { outline-color: var(--signal-blue); }
.theme-swatch-dot { width: 14px; height: 14px; border-radius: 50%; }
.theme-swatch-bar { height: 6px; width: 85%; border-radius: 3px; }
.theme-swatch-label { font-size: 13px; font-weight: 600; }
.theme-swatch[aria-pressed="true"] .theme-swatch-label { color: var(--signal-blue); }

/* Marketing Kit */
.dashboard-marketing-section { padding-bottom: var(--space-5); }
.dashboard-marketing-section h3 { margin-bottom: var(--space-2); }

.marketing-tips {
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
.marketing-tips-title { font-weight: 600; margin: 0 0 var(--space-2); display: flex; align-items: center; gap: 6px; }
.marketing-tips-title .ph-lightbulb { color: var(--signal-blue); }
.marketing-tips ul { margin: 0; padding-left: 20px; color: var(--text-secondary); font-size: 14px; line-height: 1.6; }
.marketing-tips li + li { margin-top: 6px; }

.marketing-product-card {
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
}
/* Collapsed by default. With five products the kit was several screens
   of scrolling before you reached anything else on the page. */
.marketing-product-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
/* Safari still paints a disclosure triangle without this. */
.marketing-product-head::-webkit-details-marker { display: none; }
.marketing-product-head:hover .marketing-product-name { color: var(--signal-blue); }
.marketing-product-card[open] .marketing-product-head { margin-bottom: var(--space-3); }

.marketing-product-meta {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-tertiary);
  white-space: nowrap;
}
.marketing-caret {
  color: var(--text-tertiary);
  font-size: 16px;
  flex-shrink: 0;
  transition: transform var(--motion-base) var(--ease);
}
.marketing-product-card[open] .marketing-caret { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .marketing-caret { transition: none; } }
.marketing-product-thumb {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 10px;
  background-color: var(--surface-2);
  background-size: cover;
  background-position: center;
}
.marketing-product-name { font-weight: 600; margin: 0; }

.marketing-block { padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); }
.marketing-block:first-of-type { border-top: none; padding-top: 0; }
.marketing-block + .marketing-block { margin-top: var(--space-3); }
.marketing-block-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.marketing-block-head span { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-tertiary); font-weight: 600; }
.marketing-block-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  white-space: pre-wrap;
  margin: 0;
}
.marketing-points-list { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.6; color: var(--text-secondary); }
.marketing-points-list li + li { margin-top: 4px; }


/* Sample link block in the marketing kit. Reseller-only content, so the
   note is a reminder not to republish it, not decoration. */
.marketing-block-note {
  margin: 0 0 var(--space-2);
  font-size: 12px;
  color: var(--text-tertiary);
}
.marketing-sample-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px var(--space-3);
  font-size: 13px;
  text-decoration: none;
}

/* ---------- Store analytics ---------- */
.dashboard-analytics-section { padding-bottom: var(--space-5); }
.dashboard-analytics-section h3 { margin-bottom: var(--space-2); }
.dashboard-analytics-section h4 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 15px;
}

/* Six small cards. Explicit column counts per breakpoint, never
   auto-fit -- auto-fit collapses empty tracks and stretches the rest. */
.analytics-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin: var(--space-3) 0 var(--space-4);
}
@media (max-width: 900px) { .analytics-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .analytics-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); } }

.analytics-card .stat-value { font-size: 26px; }
@media (max-width: 460px) { .analytics-card .stat-value { font-size: 21px; } }
.analytics-card-hint {
  margin: var(--space-1) 0 0;
  font-size: 11px;
  color: var(--text-tertiary);
}

.analytics-chart-card {
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
.analytics-chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.analytics-legend { display: inline-flex; gap: var(--space-3); font-size: 12px; color: var(--text-tertiary); }
.analytics-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.analytics-swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.analytics-swatch-visitors { background: var(--emerald); }
.analytics-swatch-views { background: var(--signal-blue); }

/* 30 bars can't shrink below legibility, so the chart keeps its ratio
   and scrolls sideways on a phone rather than squashing. */
.analytics-chart { overflow-x: auto; }
.analytics-chart svg { display: block; width: 100%; min-width: 460px; height: auto; }
.chart-grid { stroke: var(--border-subtle); stroke-width: 1; }
.chart-axis { fill: var(--text-tertiary); font-size: 10px; font-family: var(--font-body); }
.chart-bar-views { fill: var(--signal-blue); opacity: 0.85; }
.chart-bar-visitors { fill: var(--emerald); }

.analytics-top-products h4 { margin-bottom: var(--space-2); }
.top-product-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px auto;
  align-items: center;
  gap: var(--space-3);
  padding: 7px 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 14px;
}
.top-product-row:last-child { border-bottom: 0; }
.top-product-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-product-bar { height: 6px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.top-product-fill { display: block; height: 100%; background: var(--signal-blue); border-radius: 999px; }
.top-product-count { font-size: 12px; color: var(--text-tertiary); white-space: nowrap; }
@media (max-width: 560px) {
  .top-product-row { grid-template-columns: minmax(0, 1fr) auto; }
  .top-product-bar { display: none; }
}

.analytics-footnote { margin-top: var(--space-3); }

/* ---------- Zyentora Family ---------- */
.dashboard-family-section { padding-bottom: var(--space-5); }
.family-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--surface-1);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
}
.family-copy { flex: 1 1 320px; min-width: 0; }
.family-copy h3 { margin: var(--space-1) 0 var(--space-2); }
.family-copy p { margin: 0; color: var(--text-secondary); font-size: 14px; max-width: 52ch; }
.family-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.family-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .family-card { padding: var(--space-4); }
  .family-actions { width: 100%; }
  .family-btn { flex: 1 1 100%; justify-content: center; }
}