/* ==========================================================================
   MARKETNINJA — System B  ·  App re-skin + data-plane component layer
   --------------------------------------------------------------------------
   Loads AFTER bunkio.css (tokens + core) and admin.css (sidebar console).
   Changes ONLY brand identity — a violet ramp + the MarketNinja wordmark —
   plus a handful of components with no equivalent in the shared sheets
   (app-switcher, roadmap badge, opportunity-type pills, identity tree,
   spread bar, discovery frontier). Materials, elevation, buttons, tables,
   drawer, charts: all inherited unchanged.
   Money semantics: emerald = positive margin/return, amber/red = risk.
   ========================================================================== */

/* ---------- 1. BRAND RE-SKIN (violet, leaning further from blue) ---------- */
:root {
  --brand-50:  #f6f1ff;
  --brand-100: #ece3fe;
  --brand-200: #d8c9fd;
  --brand-300: #bda6fb;
  --brand-400: #9b78f7;
  --brand-500: #8257f4;
  --brand-600: #6d3ff0;  /* primary action — MarketNinja violet */
  --brand-700: #5a2bd8;
  --brand-800: #4a22b0;
  --brand-900: #3c1c8c;

  /* Derived tokens that hard-code the old blue — re-tint to violet */
  --e-brand: 0 4px 14px rgba(109, 63, 240, 0.35);
  --state-booked: linear-gradient(135deg, #8257f4 0%, #5a2bd8 100%);
  --type-room: linear-gradient(135deg, #8257f4 0%, #5a2bd8 100%);
  --pinstripe-ink: rgba(109, 63, 240, 0.035);   /* Pinstripe finish in MarketNinja violet */
}
[data-theme="dark"] {
  --brand-600: #8b6cf5; /* brighter violet on dark for contrast */
  --brand-700: #6d3ff0;
  --pinstripe-ink: rgba(139, 108, 245, 0.055);
}

/* A few shared rules bake the old blue in as an rgba literal (dark selection
   states / focus rings). Re-point the most visible ones to violet. */
[data-theme="dark"] .side-nav a.here { background: rgba(130, 87, 244, 0.18); color: #cdbcff; }
[data-theme="dark"] .tbl tr.sel td { background: rgba(130, 87, 244, 0.14); }
[data-theme="dark"] .status.booked { background: rgba(130, 87, 244, 0.18); color: #cdbcff; border-color: rgba(130, 87, 244, 0.38); }
[data-theme="dark"] .dd-opt.sel,
[data-theme="dark"] .nav-dd-inner a.sel { background: rgba(130, 87, 244, 0.18); color: #cdbcff; }

/* ---------- 2. WORDMARK ---------------------------------------------------- */
/* "MarketNinja" as one word: Market = violet, Ninja = ink (flips light on dark).
   A small violet shuriken mark carries the visual weight of the other apps' tiles. */
.mn-mark {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-700) 100%);
  box-shadow: 0 3px 8px rgba(109, 63, 240, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 0; line-height: 1;   /* hide the text glyph; the mark is drawn centered below */
}
/* Draw the sparkle as a centered SVG mask — glyph metrics can't be trusted to
   center a dingbat, so we paint the shape ourselves, dead-center and crisp. */
.mn-mark::before {
  content: ""; display: block; width: 19px; height: 19px; background: #fff;
  -webkit-mask: var(--mn-spark) center / contain no-repeat;
          mask: var(--mn-spark) center / contain no-repeat;
}
:root {
  --mn-spark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5C12.85 7.2 16.8 11.15 22.5 12C16.8 12.85 12.85 16.8 12 22.5C11.15 16.8 7.2 12.85 1.5 12C7.2 11.15 11.15 7.2 12 1.5Z' fill='%23000'/%3E%3C/svg%3E");
}
.logo-mn {
  display: inline-flex; align-items: baseline; gap: 0;
  font-weight: 800; font-size: var(--fs-lg); letter-spacing: -0.02em;
  text-decoration: none; white-space: nowrap;
}
.logo-mn .mk { color: var(--brand-600); }   /* Market — violet */
.logo-mn .nj { color: var(--text); }          /* Ninja  — ink, flips near-white on dark */

/* ---------- 3. APP-SWITCHER ------------------------------------------------ */
/* The "view another app" control. Sits where the sidebar logo would; opening it
   reveals the portfolio apps that share System B. */
.app-switch { position: relative; padding: var(--s-2) var(--s-2) var(--s-4); }
.app-switch-btn {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 6px 8px; border-radius: var(--r-md); cursor: pointer;
  background: transparent; border: 1px solid transparent; text-align: left;
  transition: background 0.15s, border-color 0.15s;
}
.app-switch-btn:hover { background: var(--surface-sunken); border-color: var(--line); }
.app-switch-btn .chev { margin-left: auto; color: var(--text-3); font-size: 11px; transition: transform 0.18s; }
.app-switch.open .app-switch-btn { background: var(--surface-sunken); border-color: var(--line); }
.app-switch.open .app-switch-btn .chev { transform: rotate(180deg); }

.app-switch-panel {
  position: absolute; top: calc(100% - var(--s-2)); left: var(--s-2); right: var(--s-2); z-index: 95;
  display: none; padding: 6px; border-radius: var(--r-lg);
  background: var(--glass-strong-bg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); box-shadow: var(--e4), var(--highlight);
}
.app-switch.open .app-switch-panel { display: block; animation: pop 0.16s ease; }
.asw-group {
  padding: 8px 10px 4px; font-size: 10px; font-weight: 800; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text-3);
}
.app-switch-panel a {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-md);
  color: var(--text); text-decoration: none;
}
.app-switch-panel a:hover { background: var(--surface-sunken); text-decoration: none; }
.app-switch-panel a.cur { background: var(--brand-50); }
[data-theme="dark"] .app-switch-panel a.cur { background: rgba(130, 87, 244, 0.16); }
.app-switch-panel a .who { flex: 1; min-width: 0; line-height: 1.25; }
.app-switch-panel a .who b { display: block; font-size: var(--fs-sm); }
.app-switch-panel a .who span { font-size: var(--fs-xs); color: var(--text-3); }
.app-switch-panel a .ext { color: var(--text-3); font-size: var(--fs-sm); }
.asw-mk {
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.asw-mk.bunkio { background: linear-gradient(135deg, #5265f0, #3542bd); }
.asw-mk.slate  { background: linear-gradient(135deg, var(--ink-700), var(--ink-900)); }
.asw-mk.mn     { background: linear-gradient(135deg, var(--brand-500), var(--brand-700)); }
.dotcur { width: 8px; height: 8px; border-radius: 50%; background: var(--ok-500); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18); }

/* ---------- 4. ROADMAP BADGE (future features) ---------------------------- */
.roadmap {
  display: inline-flex; align-items: center; gap: 5px;
  font: 700 var(--fs-xs)/1 var(--font); color: var(--brand-700);
  padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--brand-50); border: 1px dashed var(--brand-300);
}
.roadmap::before { content: '◇'; font-size: 11px; }
[data-theme="dark"] .roadmap { background: rgba(130, 87, 244, 0.12); color: #cdbcff; border-color: rgba(130, 87, 244, 0.4); }
.roadmap-legend {
  display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--text-3);
}
/* Planned surfaces wear the shared PINSTRIPE finish (bunkio.css §3) in app ink.
   .is-planned is the "planned feature" application of it — kept as its own class
   so the semantic stays greppable; pair with the ◇ roadmap badge. */
.is-planned { position: relative; }
.is-planned::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: repeating-linear-gradient(135deg, transparent 0 9px, var(--pinstripe-ink) 9px 18px);
}

/* ---------- 5. OPPORTUNITY-TYPE PILLS ------------------------------------- */
/* Type-agnostic feed marks each row by underwriting type (ADR 0008). */
.otype {
  display: inline-flex; align-items: center; gap: 5px;
  font: 700 var(--fs-xs)/1 var(--font); color: #fff;
  padding: 4px 10px; border-radius: var(--r-pill);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.otype.flip     { background: linear-gradient(135deg, #8257f4, #5a2bd8); }
.otype.lot      { background: linear-gradient(135deg, #f59e0b, #d97706); }
.otype.buyback  { background: linear-gradient(135deg, #10b981, #059669); }
.otype.assembly { background: linear-gradient(135deg, #38bdf8, #0284c7); }
.otype.partout  { background: linear-gradient(135deg, #f472b6, #db2777); }
.otype.property { background: linear-gradient(135deg, #64748b, #334155); }

/* ---------- 6. SPREAD BAR (buy → resale → net) ---------------------------- */
/* A single horizontal read of an underwritten spread: cost segment + net-margin
   segment. Emerald net = healthy, amber = thin. Numbers ride above. */
.spreadbar { display: flex; flex-direction: column; gap: 6px; }
.spreadbar .track {
  display: flex; height: 30px; border-radius: var(--r-md); overflow: hidden;
  box-shadow: var(--e-inset); background: var(--surface-sunken);
}
.spreadbar .seg {
  display: flex; align-items: center; justify-content: center;
  font: 700 var(--fs-xs)/1 var(--font); color: #fff; white-space: nowrap; min-width: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.spreadbar .seg.cost { background: linear-gradient(180deg, var(--ink-400), var(--ink-600)); }
.spreadbar .seg.fees { background: linear-gradient(180deg, var(--warn-400), var(--warn-600)); }
.spreadbar .seg.net  { background: linear-gradient(180deg, var(--ok-400), var(--ok-600)); }
.spreadbar .seg.net.thin { background: linear-gradient(180deg, var(--warn-400), var(--warn-600)); }
.spreadbar .cap { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--text-3); font-weight: 600; }

/* ---------- 7. IDENTITY TREE (brand → family → model → variant, ADR 0023) - */
.tree { display: flex; flex-direction: column; }
.tree .node {
  display: flex; align-items: center; gap: 10px; padding: 9px 0;
  border-bottom: 1px solid var(--line); font-size: var(--fs-sm);
}
.tree .node:last-child { border-bottom: 0; }
.tree .node .glyph {
  width: 26px; height: 26px; border-radius: 7px; flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 13px;
  background: var(--matte-raised); border: 1px solid var(--line); box-shadow: var(--e1), var(--highlight);
}
.tree .node .lbl { font-weight: 600; }
.tree .node .lbl small { display: block; font-size: var(--fs-xs); color: var(--text-3); font-weight: 500; }
.tree .node .tag { margin-left: auto; }
/* indentation rails */
.tree .node.d1 { padding-left: 24px; }
.tree .node.d2 { padding-left: 48px; }
.tree .node.d3 { padding-left: 72px; }
.tree .node[class*="d"] { position: relative; }
.tree .node.d1::before, .tree .node.d2::before, .tree .node.d3::before {
  content: ''; position: absolute; left: 12px; top: 0; bottom: 0; width: 1px; background: var(--line-strong);
}
.tree .node.d2::before { left: 36px; }
.tree .node.d3::before { left: 60px; }
/* an identity-bearing variant axis chip */
.axis {
  display: inline-flex; align-items: center; gap: 5px; font: 700 10.5px/1 var(--font);
  padding: 3px 8px; border-radius: var(--r-pill); color: var(--brand-700);
  background: var(--brand-50); border: 1px solid var(--brand-200);
}
[data-theme="dark"] .axis { background: rgba(130, 87, 244, 0.14); color: #cdbcff; border-color: rgba(130, 87, 244, 0.34); }

/* Two-column detail split (main + aside) that collapses on narrow screens */
.grid.split { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
@media (max-width: 860px) { .grid.split { grid-template-columns: 1fr; } }

/* ---------- 8. DISCOVERY FRONTIER (exploit / explore / retire) ------------- */
.frontier { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
@media (max-width: 700px) { .frontier { grid-template-columns: 1fr; } }
.frontier .lane {
  border-radius: var(--r-lg); padding: var(--s-3) var(--s-4);
  background: var(--matte); border: 1px solid var(--line); box-shadow: var(--e1), var(--highlight);
}
.frontier .lane h5 {
  margin: 0 0 6px; font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
  display: flex; align-items: center; gap: 6px; color: var(--text-3);
}
.frontier .lane.exploit h5 { color: var(--ok-600); }
.frontier .lane.explore h5 { color: var(--brand-600); }
.frontier .lane.retire  h5 { color: var(--text-3); }
.frontier .cat {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 5px 0; font-size: var(--fs-sm); border-bottom: 1px dashed var(--line);
}
.frontier .cat:last-child { border-bottom: 0; }
.frontier .cat .y { font-weight: 700; font-variant-numeric: tabular-nums; }
.frontier .lane.retire .cat { color: var(--text-3); text-decoration: line-through; text-decoration-color: var(--line-strong); }

/* ---------- 9. GRID EXTENSIONS + SMALL HELPERS ---------------------------- */
.grid.c5 { grid-template-columns: repeat(5, 1fr); }
.grid.c6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1080px) { .grid.c5, .grid.c6 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px)  { .grid.c5, .grid.c6 { grid-template-columns: repeat(2, 1fr); } }

.mono { font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; font-size: 12px; }
.pos { color: var(--ok-600); font-weight: 700; }
.neg { color: var(--danger-500); font-weight: 700; }
.dim-planned { opacity: 0.85; }
/* faceted category tag (emergent taxonomy) */
.facet {
  display: inline-flex; align-items: center; font: 600 10.5px/1 var(--font);
  padding: 3px 8px; border-radius: var(--r-pill); color: var(--text-2);
  background: var(--surface-sunken); border: 1px solid var(--line);
}

/* Sidebar environment chip: the MarketNinja label is longer than Bunkio's
   "Production", so keep it on one line in the narrow rail. */
.side-foot .env-chip { white-space: nowrap; letter-spacing: 0.03em; }

/* Wider content on large monitors — this console is data-dense (10-column
   opportunity feeds, source tables) and benefits from the extra room. Capped
   in steps so body text and single-column cards never sprawl edge-to-edge. */
.content { max-width: 1560px; }
@media (min-width: 1900px) { .content { max-width: 1740px; } }

/* ---------- 10. MOBILE GUARDS --------------------------------------------- */
/* Queue rows with multiple action buttons: let them wrap onto their own line
   instead of forcing the row wider than the viewport. */
@media (max-width: 620px) {
  .q-row { flex-wrap: wrap; }
  .q-row .row { flex-wrap: wrap; }
}