/* ==========================================================================
   Nexus Marketplace — portal/console shell (operator + admin)
   Built on brand_assets/tokens.css. Dark, sharp, red-accented dashboards.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

body {
  min-height: 100vh;
  background:
    radial-gradient(900px 500px at 100% -10%, rgba(255,2,0,0.10), transparent 60%),
    radial-gradient(700px 500px at -10% 110%, rgba(168,0,0,0.10), transparent 55%),
    var(--bg);
}

a { color: inherit; }
.mp-mute { color: var(--mute); }
.mp-nowrap { white-space: nowrap; }
.mp-right { text-align: right; }

/* ----- App shell ---------------------------------------------------------- */
.mp-shell { max-width: var(--container); margin: 0 auto; padding: var(--s-5) var(--gutter) var(--s-9); }

.mp-topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--gutter);
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
}
.mp-topbar .nx-logo { font-size: 1.35rem; }
.mp-topbar .mp-sep { width: 1px; height: 22px; background: var(--border-soft); }
.mp-topbar h1 {
  font-size: 1rem; font-weight: var(--w-semi); letter-spacing: var(--track-eyebrow);
  text-transform: uppercase; color: var(--mute); margin: 0;
}
.mp-spacer { flex: 1; }
.mp-userchip { display: flex; align-items: center; gap: var(--s-3); font-size: var(--type-small); }
.mp-userchip .mp-email { color: var(--fg); }
.mp-userchip .mp-role { color: var(--mute); }

/* ----- Headers ------------------------------------------------------------ */
.mp-pagehead { margin: var(--s-7) 0 var(--s-5); }
.mp-pagehead .eyebrow { color: var(--nx); margin-bottom: var(--s-2); }
.mp-pagehead h2 { margin: 0; }
.mp-pagehead p { color: var(--mute); margin: var(--s-2) 0 0; max-width: 60ch; }

/* ----- Stats -------------------------------------------------------------- */
.mp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s-4); margin-bottom: var(--s-6); }
.mp-stat { background: var(--surface-elevated); border: 1px solid var(--border-subtle); border-radius: var(--r-card); padding: var(--s-5); box-shadow: var(--shadow-card); }
.mp-stat .mp-statnum { font-size: 2.25rem; font-weight: var(--w-bold); letter-spacing: var(--track-snug); line-height: 1; }
.mp-stat .mp-statlbl { display: block; margin-top: var(--s-2); font-size: var(--type-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--mute); }
.mp-stat.is-accent { border-color: rgba(255,2,0,0.4); }
.mp-stat.is-accent .mp-statnum { color: var(--nx); }

/* ----- Panel -------------------------------------------------------------- */
.mp-panel { background: var(--surface-elevated); border: 1px solid var(--border-subtle); border-radius: var(--r-card); box-shadow: var(--shadow-card); overflow: hidden; }
.mp-panel + .mp-panel { margin-top: var(--s-5); }
.mp-panel-head { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-5); border-bottom: 1px solid var(--border-subtle); }
.mp-panel-head h3 { margin: 0; }
.mp-panel-body { padding: var(--s-5); }

/* ----- Tabs / toolbar ----------------------------------------------------- */
.mp-tabs { display: inline-flex; gap: var(--s-1); padding: var(--s-1); background: var(--surface-floating); border: 1px solid var(--border-subtle); border-radius: var(--r-pill); }
.mp-tab { appearance: none; border: 0; background: transparent; color: var(--mute); cursor: pointer;
  padding: var(--s-2) var(--s-5); font-family: var(--font-sans); font-size: var(--type-small); font-weight: var(--w-semi);
  letter-spacing: 0.04em; text-transform: uppercase; border-radius: var(--r-pill);
  transition: color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out); }
.mp-tab:hover { color: var(--fg); }
.mp-tab[aria-selected="true"] { background: var(--nx); color: var(--fg); }
.mp-tab:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }

.mp-filters { display: inline-flex; flex-wrap: wrap; gap: var(--s-2); }
.mp-chip { appearance: none; cursor: pointer; background: var(--surface-floating); color: var(--mute);
  border: 1px solid var(--border-subtle); border-radius: var(--r-pill); padding: 6px var(--s-4);
  font-family: var(--font-sans); font-size: var(--type-small); font-weight: var(--w-semi); letter-spacing: 0.03em;
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); }
.mp-chip:hover { color: var(--fg); border-color: var(--border-strong); }
.mp-chip[aria-pressed="true"] { color: var(--fg); border-color: var(--nx); box-shadow: inset 0 0 0 1px var(--nx); }
.mp-chip:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }

/* ----- Tables ------------------------------------------------------------- */
.mp-tablewrap { width: 100%; overflow-x: auto; }
.mp-tbl { width: 100%; border-collapse: collapse; font-size: var(--type-small); }
.mp-tbl thead th {
  text-align: left; padding: var(--s-3) var(--s-4); position: sticky; top: 0;
  font-size: var(--type-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase;
  color: var(--mute); font-weight: var(--w-semi); background: var(--surface-floating);
  border-bottom: 1px solid var(--border-soft); white-space: nowrap;
}
.mp-tbl tbody td { padding: var(--s-4); border-bottom: 1px solid var(--border-subtle); vertical-align: middle; }
.mp-tbl tbody tr { transition: background-color var(--dur) var(--ease-out); }
.mp-tbl tbody tr:hover { background: rgba(255,255,255,0.025); }
.mp-tbl .mp-strong { font-weight: var(--w-semi); color: var(--fg); }
.mp-tbl .mp-sub { color: var(--mute); font-size: 0.8rem; }
.mp-actions { display: inline-flex; gap: var(--s-2); justify-content: flex-end; flex-wrap: wrap; }

/* ----- Badges ------------------------------------------------------------- */
.mp-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--r-pill);
  font-size: 0.72rem; font-weight: var(--w-semi); letter-spacing: 0.06em; text-transform: uppercase;
  border: 1px solid transparent; white-space: nowrap; }
.mp-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.mp-badge.is-approved { color: #4ade80; background: rgba(74,222,128,0.10); border-color: rgba(74,222,128,0.30); }
.mp-badge.is-live     { color: #4ade80; background: rgba(74,222,128,0.14); border-color: rgba(74,222,128,0.40); }
.mp-badge.is-pending  { color: #e0a13a; background: rgba(224,161,58,0.10); border-color: rgba(224,161,58,0.30); }
.mp-badge.is-draft    { color: var(--mute); background: rgba(132,132,132,0.10); border-color: var(--border-soft); }
.mp-badge.is-rejected,
.mp-badge.is-suspended{ color: #ff5a4d; background: rgba(255,2,0,0.10); border-color: rgba(255,2,0,0.35); }
.mp-badge.is-off      { color: var(--mute); background: transparent; border-color: var(--border-soft); }
.mp-badge.is-off::before { background: var(--mute); }

/* ----- Forms -------------------------------------------------------------- */
.mp-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4) var(--s-5); }
.mp-field { display: flex; flex-direction: column; gap: 6px; }
.mp-field.is-full { grid-column: 1 / -1; }
.mp-field label { font-size: var(--type-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--mute); }
.mp-field label .req { color: var(--nx); }
.mp-input, .mp-select, .mp-textarea {
  width: 100%; font-family: var(--font-sans); font-size: 0.95rem; color: var(--fg);
  background: var(--surface-floating); border: 1px solid var(--border-soft); border-radius: var(--r-soft);
  padding: 10px var(--s-3); transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.mp-textarea { min-height: 84px; resize: vertical; line-height: 1.5; }
.mp-input::placeholder, .mp-textarea::placeholder { color: #5a5a5a; }
.mp-input:focus, .mp-select:focus, .mp-textarea:focus { outline: none; border-color: var(--nx); box-shadow: 0 0 0 3px rgba(255,2,0,0.18); }
.mp-input:hover, .mp-select:hover, .mp-textarea:hover { border-color: var(--border-strong); }
.mp-help { font-size: 0.78rem; color: var(--mute); }
.mp-check { display: inline-flex; align-items: center; gap: var(--s-2); cursor: pointer; user-select: none; font-size: 0.95rem; }
.mp-check input { width: 18px; height: 18px; accent-color: var(--nx); }
.mp-fieldset-title { grid-column: 1 / -1; font-size: var(--type-eyebrow); letter-spacing: var(--track-eyebrow);
  text-transform: uppercase; color: var(--nx); margin-top: var(--s-3); padding-top: var(--s-3);
  border-top: 1px dashed var(--border-soft); }

/* ----- Buttons (extends tokens.css .btn) ---------------------------------- */
.btn-sm { padding: 7px var(--s-4); font-size: 0.8rem; }
.btn-success { background: rgba(74,222,128,0.12); color: #6ee79a; border: 1px solid rgba(74,222,128,0.4); }
.btn-success:hover { background: #4ade80; color: #06210f; border-color: #4ade80; }
.btn-danger { background: transparent; color: #ff6a5e; border: 1px solid rgba(255,2,0,0.45); }
.btn-danger:hover { background: var(--nx); color: var(--fg); border-color: var(--nx); }
.btn[disabled] { opacity: 0.5; pointer-events: none; }

/* ----- Auth card ---------------------------------------------------------- */
.mp-auth { min-height: calc(100vh - 0px); display: grid; place-items: center; padding: var(--s-6); }
.mp-auth-card { width: 100%; max-width: 440px; background: var(--surface-floating); border: 1px solid var(--border-subtle);
  border-radius: var(--r-card); padding: var(--s-7); box-shadow: var(--shadow-elevate); }
.mp-auth-card .nx-logo { font-size: 1.6rem; }
.mp-auth-card h2 { margin: var(--s-5) 0 var(--s-2); }
.mp-auth-card .mp-sub { color: var(--mute); margin: 0 0 var(--s-6); }
.mp-auth-switch { display: flex; gap: var(--s-2); margin-bottom: var(--s-6); }
.mp-stack { display: flex; flex-direction: column; gap: var(--s-4); }
.mp-stack .btn { width: 100%; }
.mp-auth-foot { margin-top: var(--s-5); font-size: var(--type-small); color: var(--mute); text-align: center; }
.mp-auth-foot a { color: var(--nx); text-decoration: none; }
.mp-auth-foot a:hover { text-decoration: underline; }

/* ----- Banner / empty / error -------------------------------------------- */
.mp-banner { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-4) var(--s-5);
  border-radius: var(--r-soft); border: 1px solid; margin-bottom: var(--s-5); font-size: var(--type-small); }
.mp-banner.is-warn { color: #e0a13a; background: rgba(224,161,58,0.08); border-color: rgba(224,161,58,0.3); }
.mp-banner.is-info { color: var(--fg); background: rgba(255,255,255,0.03); border-color: var(--border-soft); }
.mp-banner .mp-banner-strong { font-weight: var(--w-semi); }
.mp-empty { text-align: center; padding: var(--s-8) var(--s-5); color: var(--mute); }
.mp-empty .mp-empty-title { color: var(--fg); font-weight: var(--w-semi); margin-bottom: var(--s-2); }

/* ----- Drawer (listing form) --------------------------------------------- */
.mp-overlay { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,0.6); backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease-out); }
.mp-overlay.is-open { opacity: 1; pointer-events: auto; }
.mp-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 51; width: min(680px, 100vw);
  background: var(--surface-elevated); border-left: 1px solid var(--border-soft); box-shadow: var(--shadow-elevate);
  display: flex; flex-direction: column; transform: translateX(100%); transition: transform var(--dur-slow) var(--ease-out); }
.mp-drawer.is-open { transform: translateX(0); }
.mp-drawer-head { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-5) var(--s-6); border-bottom: 1px solid var(--border-subtle); }
.mp-drawer-head h3 { margin: 0; flex: 1; }
.mp-drawer-body { padding: var(--s-6); overflow-y: auto; flex: 1; }
.mp-drawer-foot { display: flex; gap: var(--s-3); justify-content: flex-end; padding: var(--s-5) var(--s-6); border-top: 1px solid var(--border-subtle); }
.mp-iconbtn { appearance: none; background: transparent; border: 1px solid var(--border-soft); color: var(--mute);
  width: 36px; height: 36px; border-radius: var(--r-soft); cursor: pointer; font-size: 1.1rem; line-height: 1;
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); }
.mp-iconbtn:hover { color: var(--fg); border-color: var(--border-strong); }
.mp-iconbtn:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }

/* ----- Toast -------------------------------------------------------------- */
.mp-toasts { position: fixed; right: var(--s-5); bottom: var(--s-5); z-index: 80; display: flex; flex-direction: column; gap: var(--s-2); }
.mp-toast { min-width: 240px; max-width: 360px; padding: var(--s-3) var(--s-4); border-radius: var(--r-soft);
  background: var(--surface-floating); border: 1px solid var(--border-soft); box-shadow: var(--shadow-card);
  font-size: var(--type-small); transform: translateY(8px); opacity: 0; transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out); }
.mp-toast.is-in { transform: translateY(0); opacity: 1; }
.mp-toast.is-ok { border-color: rgba(74,222,128,0.45); }
.mp-toast.is-err { border-color: rgba(255,2,0,0.5); }
.mp-toast .mp-toast-title { font-weight: var(--w-semi); }

/* ----- Loading ------------------------------------------------------------ */
.mp-spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border-soft); border-top-color: var(--nx);
  display: inline-block; animation: mp-spin 0.7s linear infinite; vertical-align: middle; }
@keyframes mp-spin { to { transform: rotate(360deg); } }
.mp-loadrow { display: flex; align-items: center; gap: var(--s-3); color: var(--mute); padding: var(--s-7); justify-content: center; }

/* ----- Responsive --------------------------------------------------------- */
@media (max-width: 720px) {
  .mp-form-grid { grid-template-columns: 1fr; }
  .mp-topbar h1, .mp-topbar .mp-sep { display: none; }
  .mp-userchip .mp-email { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mp-drawer, .mp-overlay, .mp-toast { transition: none; }
  .mp-spinner { animation: none; }
}