/* ================================================================
   NOIR DASHBOARD — GLASS LAYER
   Gallery + Store sections (.nsm / .gm-*) in the member and trainee
   dashboards.

   WHY THIS FILE EXISTS
   The shared seller/gallery partial renders on TWO different canvases:
     • member dashboard  → .noir-dash-shell is --noir-paper (#F4F0E8, light)
     • trainee dashboard → .noir-v3 is dark glass (#0D0A07)
   It was originally built assuming both were dark, so near-white text
   landed on cream and most of the UI was invisible. This layer makes the
   whole skin context-adaptive and gives it a proper frosted treatment.

   METHOD (per current glassmorphism guidance)
     • one token set, re-pointed by ancestor — never per-rule colour hacks
     • at most TWO stacked blur layers; more turns to mush
     • contrast is the thing glass breaks, so text tokens are solid, never
       translucent, and sit at ≥ 4.5:1 on their own surface
     • consistent blur + tint across sibling surfaces
     • a real fallback where backdrop-filter is unsupported
   ================================================================ */

/* ── tokens · LIGHT (member dashboard, paper canvas) ───────────── */
.nsm,
.noir-v2 .nsm {
  --nsm-text:    #1B1712;
  /* #6E6659 measured 4.43:1 against the composited glass surface — just under
     AA for small text. Darkened until it actually cleared 4.5. */
  --nsm-muted:   #5F594E;
  --nsm-surface: rgba(255, 255, 255, .58);
  --nsm-solid:   rgba(255, 255, 255, .88);
  --nsm-line:    rgba(27, 23, 18, .10);
  --nsm-line-2:  rgba(27, 23, 18, .06);
  --nsm-lime:    #5E7A18;              /* the dark-mode lime is unreadable on cream */
  --nsm-accent:  var(--noir-orange, #CB360F);
  --nsm-blur:    saturate(1.6) blur(14px);
  --nsm-shadow:  0 1px 2px rgba(27,23,18,.04), 0 8px 26px rgba(27,23,18,.07);
  --nsm-shadow-l:0 2px 6px rgba(27,23,18,.05), 0 18px 44px rgba(27,23,18,.10);
  --nsm-inset:   inset 0 1px 0 rgba(255,255,255,.85);
  --nsm-field:   rgba(255, 255, 255, .78);
  --nsm-glow:    radial-gradient(120% 90% at 12% -10%, rgba(203,54,15,.10), transparent 60%),
                 radial-gradient(90% 80% at 100% 0%, rgba(61,42,82,.10), transparent 62%);
}

/* ── tokens · DARK (trainee v3 dashboard) ──────────────────────── */
.noir-v3 .nsm,
.nv3-content .nsm,
.noir-admin-v2 .nsm {
  --nsm-text:    #F4F0E8;
  --nsm-muted:   rgba(244, 240, 232, .60);
  --nsm-surface: rgba(244, 240, 232, .055);
  --nsm-solid:   rgba(244, 240, 232, .085);
  --nsm-line:    rgba(244, 240, 232, .12);
  --nsm-line-2:  rgba(244, 240, 232, .07);
  --nsm-lime:    #D6E36A;
  --nsm-blur:    saturate(1.5) blur(18px);
  --nsm-shadow:  0 2px 10px rgba(0,0,0,.28);
  --nsm-shadow-l:0 10px 38px rgba(0,0,0,.42);
  --nsm-inset:   inset 0 1px 0 rgba(244,240,232,.07);
  --nsm-field:   rgba(0, 0, 0, .26);
  --nsm-glow:    radial-gradient(120% 90% at 12% -10%, rgba(203,54,15,.16), transparent 60%),
                 radial-gradient(90% 80% at 100% 0%, rgba(61,42,82,.20), transparent 62%);
}

/* ── the pane the glass sits on ─────────────────────────────────
   Glass over a flat colour reads as nothing. A soft ambient wash
   gives the frost something to refract. */
.nsm {
  position: relative;
  color: var(--nsm-text);
  padding: 22px;
  border-radius: 24px;
  isolation: isolate;
  background-image: var(--nsm-glow);
  background-color: var(--nsm-line-2);
}
.nsm::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  border: 1px solid var(--nsm-line-2);
  pointer-events: none;
  z-index: -1;
}

/* ── surfaces ──────────────────────────────────────────────────
   One recipe, reused. Layer 1 of a maximum of two. */
.nsm-kpi,
.nsm-form,
.nsm-row-item,
.nsm-order,
.nsm-optgroup,
.gm-tile,
.gm-reel,
.nsm-rate,
.nsm-payout,
.gm-grid ~ .nsm-form,
.nsm-quick__f {
  background: var(--nsm-surface) !important;
  -webkit-backdrop-filter: var(--nsm-blur);
  backdrop-filter: var(--nsm-blur);
  border: 1px solid var(--nsm-line) !important;
  box-shadow: var(--nsm-shadow), var(--nsm-inset);
  border-radius: 16px !important;
}

.nsm-kpi { padding: 16px 18px; transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s; }
.nsm-kpi:hover { transform: translateY(-2px); box-shadow: var(--nsm-shadow-l), var(--nsm-inset); }
.nsm-kpi__n { color: var(--nsm-text); letter-spacing: -.8px; }
.nsm-kpi__l { color: var(--nsm-muted); }
.nsm-kpi--pay .nsm-kpi__n { color: var(--nsm-lime); }

.nsm-head h2 { color: var(--nsm-text); }
.nsm-head p, .nsm-head a { color: var(--nsm-muted); }
.nsm-head a:hover { color: var(--nsm-accent); }

/* ── tabs — a single frosted rail with a sliding pill ─────────── */
.nsm-tabs {
  background: var(--nsm-surface) !important;
  -webkit-backdrop-filter: var(--nsm-blur);
  backdrop-filter: var(--nsm-blur);
  border: 1px solid var(--nsm-line);
  box-shadow: var(--nsm-inset);
  border-radius: 999px;
  padding: 5px;
}
.nsm-tab { color: var(--nsm-muted); border-radius: 999px; transition: color .15s, background .15s; }
.nsm-tab:hover { color: var(--nsm-text); }
.nsm-tab.is-on {
  background: var(--nsm-accent);
  color: #fff;
  box-shadow: 0 4px 14px rgba(203,54,15,.32);
}

/* ── buttons ───────────────────────────────────────────────────── */
.nsm-btn--primary {
  background: var(--nsm-accent); color: #fff;
  box-shadow: 0 4px 16px rgba(203,54,15,.28);
  transition: transform .15s, box-shadow .15s, background .15s;
}
.nsm-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 7px 22px rgba(203,54,15,.36); }
.nsm-btn--ghost {
  background: var(--nsm-surface); color: var(--nsm-text);
  border-color: var(--nsm-line) !important;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.nsm-btn--ghost:hover { background: var(--nsm-solid); }

/* ── product / gallery rows ────────────────────────────────────── */
.nsm-row-item { transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s; }
.nsm-row-item:hover { transform: translateY(-2px); box-shadow: var(--nsm-shadow-l), var(--nsm-inset); }
.nsm-row-item__t { color: var(--nsm-text); }
.nsm-row-item__m { color: var(--nsm-muted); }
.nsm-row-item__p { color: var(--nsm-text); }
.nsm-row-item__img { box-shadow: 0 2px 8px rgba(27,23,18,.12); }

.nsm-icon {
  background: var(--nsm-surface); border-color: var(--nsm-line);
  color: var(--nsm-muted);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background .15s, color .15s;
}
.nsm-icon:hover { background: var(--nsm-solid); color: var(--nsm-text); }

/* status pills — readable on BOTH canvases */
.nsm-pill--live { background: rgba(94,122,24,.14); color: #47600F; }
.nsm-pill--off  { background: rgba(27,23,18,.07);  color: var(--nsm-muted); }
.nsm-pill--new  { background: rgba(203,54,15,.13); color: var(--nsm-accent); }
.noir-v3 .nsm .nsm-pill--live, .nv3-content .nsm .nsm-pill--live { background: rgba(214,227,106,.16); color: #D6E36A; }
.noir-v3 .nsm .nsm-pill--off,  .nv3-content .nsm .nsm-pill--off  { background: rgba(244,240,232,.10); color: rgba(244,240,232,.6); }
.noir-v3 .nsm .nsm-pill--new,  .nv3-content .nsm .nsm-pill--new  { background: rgba(203,54,15,.22); color: #ff8a5c; }
.nsm-prate { color: #9A7B12 !important; }
.noir-v3 .nsm .nsm-prate, .nv3-content .nsm .nsm-prate { color: #F4DC8A !important; }

/* ── forms ─────────────────────────────────────────────────────── */
.nsm-form { padding: 22px !important; }
.nsm-form h3 { color: var(--nsm-text); }
.nsm-field label { color: var(--nsm-muted); }
.nsm-hint { color: var(--nsm-muted); }
.nsm-check { color: var(--nsm-text); }

.nsm .nsm-field input[type=text], .nsm .nsm-field input[type=number],
.nsm .nsm-field input[type=file], .nsm .nsm-field select, .nsm .nsm-field textarea,
.nsm .nsm-order__acts input[type=text], .nsm-quick__f input[type=text] {
  background: var(--nsm-field) !important;
  border: 1px solid var(--nsm-line) !important;
  color: var(--nsm-text) !important;
  border-radius: 12px !important;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.nsm .nsm-field input:focus, .nsm .nsm-field select:focus, .nsm .nsm-field textarea:focus {
  outline: none;
  border-color: var(--nsm-accent) !important;
  box-shadow: 0 0 0 3px rgba(203,54,15,.14);
}
.nsm .nsm-field input::placeholder, .nsm .nsm-field textarea::placeholder { color: var(--nsm-muted) !important; opacity: .75; }
.nsm .nsm-field select option { background: #fff; color: #1B1712; }
.noir-v3 .nsm .nsm-field select option, .nv3-content .nsm .nsm-field select option { background: #1a1510; color: #F4F0E8; }

/* ── orders ────────────────────────────────────────────────────── */
.nsm-order { padding: 16px !important; }
.nsm-order__top, .nsm-order__body { color: var(--nsm-text); }
.nsm-order__body { color: var(--nsm-muted); }
.nsm-order__body div { color: var(--nsm-text); }

/* ── earnings / payout ─────────────────────────────────────────── */
.nsm-payout {
  background:
    linear-gradient(135deg, rgba(94,122,24,.12), rgba(203,54,15,.07)) !important;
  border-color: rgba(94,122,24,.26) !important;
  padding: 22px !important;
}
.noir-v3 .nsm .nsm-payout, .nv3-content .nsm .nsm-payout {
  background: linear-gradient(135deg, rgba(214,227,106,.13), rgba(63,77,47,.10)) !important;
  border-color: rgba(214,227,106,.25) !important;
}
.nsm-payout__n { color: var(--nsm-lime); }
.nsm-payout__l { color: var(--nsm-muted); }

/* ── "rate your order" prompt ──────────────────────────────────── */
.nsm-rate {
  background: linear-gradient(135deg, rgba(244,220,138,.30), rgba(203,54,15,.07)) !important;
  border-color: rgba(180,140,20,.28) !important;
}
.noir-v3 .nsm .nsm-rate, .nv3-content .nsm .nsm-rate {
  background: linear-gradient(135deg, rgba(244,220,138,.14), rgba(203,54,15,.10)) !important;
  border-color: rgba(244,220,138,.28) !important;
}
.nsm-rate__i { color: #B8860B; }
.noir-v3 .nsm .nsm-rate__i, .nv3-content .nsm .nsm-rate__i { color: #F4DC8A; }
.nsm-rate__m strong { color: var(--nsm-text); }
.nsm-rate__m p { color: var(--nsm-muted); }

/* ── alerts ────────────────────────────────────────────────────── */
.nsm-alert { border-radius: 14px; border: 1px solid transparent; }
.nsm-alert--err { background: rgba(203,54,15,.10); color: #8C2A0C; border-color: rgba(203,54,15,.22); }
.nsm-alert--ok  { background: rgba(94,122,24,.12); color: #3F5410; border-color: rgba(94,122,24,.26); }
.noir-v3 .nsm .nsm-alert--err, .nv3-content .nsm .nsm-alert--err { background: rgba(203,54,15,.16); color: #ff8a5c; }
.noir-v3 .nsm .nsm-alert--ok,  .nv3-content .nsm .nsm-alert--ok  { background: rgba(214,227,106,.14); color: #D6E36A; }

/* ── empty states ──────────────────────────────────────────────── */
.nsm-empty { color: var(--nsm-muted); }
.nsm-empty__t { color: var(--nsm-text); }
.nsm-empty p { color: var(--nsm-muted); }

/* ================================================================
   GALLERY BUILDER
   ================================================================ */
.gm-reel { padding: 16px !important; }
.gm-reel__m strong { color: var(--nsm-text); }
.gm-reel__m p { color: var(--nsm-muted); }
.gm-reel__thumb { box-shadow: 0 2px 10px rgba(27,23,18,.16); }

/* Tiles read as glazed prints: the frost is the frame, not the image. */
.gm-tile {
  border-radius: 16px !important;
  box-shadow: var(--nsm-shadow);
  transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s;
}
.gm-tile:hover { transform: translateY(-3px); box-shadow: var(--nsm-shadow-l); }
.gm-tile.is-drag { transform: scale(.97) rotate(-1deg); box-shadow: var(--nsm-shadow-l); }
.gm-tile--add {
  background: var(--nsm-surface) !important;
  border: 1.5px dashed var(--nsm-line) !important;
  box-shadow: none;
}
.gm-tile--add:hover { border-color: var(--nsm-accent) !important; }
.gm-tile--add span { color: var(--nsm-muted); }
.gm-tile--add b { color: var(--nsm-text); }
.gm-tile__noimg { color: var(--nsm-muted); }

.gm-asp span { border-color: var(--nsm-line); color: var(--nsm-muted); background: var(--nsm-surface); }
.gm-asp:has(input:checked) span { border-color: var(--nsm-accent); color: var(--nsm-text); background: rgba(203,54,15,.10); }

.nsm-optgroup { padding: 14px 16px !important; }
.nsm-optval { background: var(--nsm-surface); color: var(--nsm-text); border: 1px solid var(--nsm-line-2); }
.nsm-optval b { color: var(--nsm-accent); }
.noir-v3 .nsm .nsm-optval b, .nv3-content .nsm .nsm-optval b { color: var(--nsm-lime); }

.nsm-reply { background: var(--nsm-surface); border-left-color: var(--nsm-accent); }
.nsm-reply strong { color: var(--nsm-text); }
.nsm-reply p { color: var(--nsm-muted); }
.nsm-av-sm { box-shadow: 0 2px 6px rgba(27,23,18,.18); }

/* ── no backdrop-filter (older Firefox, some Android WebViews) ──
   Fall back to opaque surfaces. Frost is decoration; contrast is not. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nsm-kpi, .nsm-form, .nsm-row-item, .nsm-order, .nsm-optgroup,
  .gm-reel, .nsm-tabs, .nsm-btn--ghost, .nsm-icon, .nsm-quick__f {
    background: var(--nsm-solid) !important;
  }
  .nsm .nsm-field input, .nsm .nsm-field select, .nsm .nsm-field textarea {
    background: #fff !important;
  }
  .noir-v3 .nsm .nsm-field input, .nv3-content .nsm .nsm-field input,
  .noir-v3 .nsm .nsm-field select, .nv3-content .nsm .nsm-field select,
  .noir-v3 .nsm .nsm-field textarea, .nv3-content .nsm .nsm-field textarea {
    background: #14100c !important;
  }
}

/* Respect reduced motion — the lifts are decorative. */
@media (prefers-reduced-motion: reduce) {
  .nsm-kpi, .nsm-row-item, .gm-tile, .nsm-btn--primary { transition: none !important; }
  .nsm-kpi:hover, .nsm-row-item:hover, .gm-tile:hover, .nsm-btn--primary:hover { transform: none !important; }
}

@media (max-width: 768px) {
  .nsm { padding: 14px; border-radius: 18px; }
  .nsm-tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .nsm-tab { flex: none; }
}

/* ── WhatsApp catalog panel (v4.40.0) ────────────────────────── */
.nsm-wa-toggle { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.nsm-wa-url { display: flex; gap: 8px; align-items: center; }
.nsm-wa-url input {
  flex: 1; min-width: 0;
  font-family: var(--noir-mono, ui-monospace, monospace);
  font-size: 12.5px !important;
}
.nsm-wa-warn {
  margin-top: 14px; padding: 12px 14px; border-radius: 12px;
  background: rgba(233, 162, 59, .12); border: 1px solid rgba(233, 162, 59, .34);
  font-size: 13px; line-height: 1.55; color: var(--nsm-text);
}
.nsm-wa-steps {
  margin: 10px 0 6px; padding-left: 20px;
  font-size: 13.5px; line-height: 1.6; color: var(--nsm-text);
}
.nsm-wa-steps li { margin-bottom: 7px; }
/* Orders that came from the catalog, so the seller can see it earning. */
.nsm-src-wa {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600;
  background: rgba(37, 211, 102, .14); border: 1px solid rgba(37, 211, 102, .38);
  color: var(--nsm-text);
}
.nsm-wa-target { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.nsm-wa-target .nsm-check { margin: 0; }