/* NosMarket — the Blazor half of NosMaster.
   Same palette as the dashboard's index.html so the two read as one product, but a
   denser layout: this page's job is to put thousands of auction rows on screen. */

:root {
  --bg:#12141a; --panel:#1a1d26; --panel2:#20242f; --line:#272b38; --ink:#e6e9f0;
  --dim:#8b93a7; --accent:#5eead4; --warn:#fbbf24; --bad:#f87171; --ok:#4ade80;

  /* NosTale item rarity ramp. -2/-1 are the "damaged" tiers the client paints grey,
     0 is plain, 1..8 climb to the gold that every player reads as "this is the good one". */
  --r-bad:#8b93a7; --r0:#e6e9f0; --r1:#9fe8a0; --r2:#7fd4e8; --r3:#7fa9e8;
  --r4:#a98ce8; --r5:#e08ce8; --r6:#e8a05e; --r7:#e8d15e; --r8:#ffd700;
}

* { box-sizing: border-box; }

body {
  margin:0; background:var(--bg); color:var(--ink);
  font:13px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
}

a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }

/* --- chrome ------------------------------------------------------------- */

header {
  display:flex; align-items:baseline; gap:14px; padding:10px 16px;
  border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--bg); z-index:3;
}
header h1 {
  font-size:14px; margin:0; letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
}
header .sub { color:var(--dim); font-size:11px; }
header .home { margin-left:auto; color:var(--dim); font-size:11px; }
header .home:hover { color:var(--accent); }

.subtabs {
  display:flex; gap:2px; padding:0 12px; border-bottom:1px solid var(--line);
  position:sticky; top:41px; background:var(--bg); z-index:2;
}
.subtab {
  background:transparent; border:0; border-bottom:2px solid transparent;
  padding:9px 14px; color:var(--dim); letter-spacing:.06em; text-transform:uppercase; font-size:11px;
}
.subtab:hover { color:var(--ink); text-decoration:none; }
.subtab.active { color:var(--accent); border-bottom-color:var(--accent); }

main { padding:14px; }

/* --- building blocks ---------------------------------------------------- */

.panel { background:var(--panel); border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.panel > h2 {
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim);
  margin:0; padding:9px 12px; border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:8px;
}
.panel > .body { padding:10px 12px; }

.muted { color:var(--dim); }
.ok { color:var(--ok); } .bad { color:var(--bad); } .warn { color:var(--warn); }

.row { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.pill { border:1px solid var(--line); border-radius:999px; padding:1px 8px; font-size:11px; color:var(--dim); }

button {
  background:#232734; color:var(--ink); border:1px solid var(--line); border-radius:5px;
  padding:4px 9px; font:inherit; cursor:pointer;
}
button:hover { border-color:var(--accent); color:var(--accent); }
button:disabled { opacity:.4; cursor:default; border-color:var(--line); color:var(--dim); }

input, select {
  background:#0e1015; border:1px solid var(--line); color:var(--ink); border-radius:5px;
  padding:3px 6px; font:inherit;
}
input:focus, select:focus { outline:none; border-color:var(--accent); }

.empty { padding:40px; text-align:center; color:var(--dim); }
.empty h2 { color:var(--ink); font-size:15px; }

/* --- the icon gallery --------------------------------------------------- */

.icongrid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(56px, 1fr)); gap:4px;
  max-height:68vh; overflow:auto; padding:4px;
}
.iconcell {
  display:flex; flex-direction:column; align-items:center; gap:2px; padding:4px 2px;
  border:1px solid transparent; border-radius:5px; background:var(--panel2);
}
.iconcell:hover { border-color:var(--accent); }
.iconcell img {
  width:32px; height:32px; image-rendering:pixelated;   /* 32px art: never smooth it */
}
.iconcell span { font-size:10px; color:var(--dim); }

/* --- the auction browser ------------------------------------------------- */

.mkt { display:flex; flex-direction:column; gap:10px; }

.banner {
  border:1px solid var(--line); border-left-width:3px; border-radius:6px;
  padding:8px 12px; display:flex; align-items:center; gap:10px; background:var(--panel);
}
.banner.bad  { border-left-color:var(--bad); }
.banner.warn { border-left-color:var(--warn); }

.toolbar .body { gap:6px; }
.toolbar .body + .body { border-top:1px solid var(--line); }
.shellbar { gap:8px; }
.shellchip {
  display:inline-flex; align-items:center; gap:3px;
  border:1px solid var(--line); border-radius:5px; padding:2px 4px; background:var(--panel2);
}
.shellchip button { padding:0 5px; line-height:1.4; }

.resultbar { padding:0 2px; }

table.auctions { width:100%; border-collapse:collapse; }
table.auctions th, table.auctions td {
  text-align:left; padding:4px 8px; border-bottom:1px solid var(--line); white-space:nowrap;
}
table.auctions th {
  color:var(--dim); font-weight:500; font-size:11px; text-transform:uppercase;
  letter-spacing:.08em; position:sticky; top:0; background:var(--panel); z-index:1;
}
table.auctions tbody tr:hover td { background:var(--panel2); }
table.auctions .num { text-align:right; font-variant-numeric:tabular-nums; }
table.auctions .small { font-size:11px; }
.accentnum { color:var(--accent); font-variant-numeric:tabular-nums; }

.ico { width:28px; height:28px; image-rendering:pixelated; display:block; }
.up { color:var(--warn); font-weight:600; margin-left:3px; }
.vnum { color:#525a6e; font-size:10px; margin-left:6px; }
.shell {
  display:inline-block; margin-right:4px; padding:0 4px; border-radius:3px;
  background:var(--panel2); border:1px solid var(--line); color:var(--dim);
}
.shell b { color:var(--ink); margin-left:2px; }

/* rarity ramp, applied to the item name */
.r-bad{color:var(--r-bad)} .r0{color:var(--r0)} .r1{color:var(--r1)} .r2{color:var(--r2)}
.r3{color:var(--r3)} .r4{color:var(--r4)} .r5{color:var(--r5)} .r6{color:var(--r6)}
.r7{color:var(--r7)} .r8{color:var(--r8)}

/* --- rune tiers ---------------------------------------------------------- */
/* C < B < A < S. The ramp is the one players already read on shells in game. */
.tier {
  display:inline-block; min-width:13px; text-align:center; border-radius:2px;
  font-size:9px; font-weight:700; padding:0 2px; margin-right:3px;
  background:#2a2f3d; color:var(--dim);
}
.tier-C { color:#9fb0c9; }
.tier-B { color:#7fd4e8; }
.tier-A { color:#c39bf5; background:#2e2740; }
.tier-S { color:#12141a; background:var(--r8); }
.tier-x { color:var(--bad); }

/* --- item tooltip -------------------------------------------------------- */
/* Pure CSS: no circuit round-trip on hover. The panel must not clip it. */
.panel:has(table.auctions) { overflow: visible; }
td.itemcell { position: relative; }
.tip { display: none; }
td.itemcell:hover .tip {
  display:block; position:absolute; left:0; top:calc(100% + 4px); z-index:60;
  width:340px; white-space:normal;
  background:#0d0f14; border:1px solid var(--line); border-radius:7px;
  box-shadow:0 10px 28px rgba(0,0,0,.65); padding:9px 11px;
  font-size:11px; line-height:1.5; cursor:default;
}
/* The last rows would push the box off the bottom; flip it above instead. */
table.auctions tbody tr:nth-last-child(-n+4) td.itemcell:hover .tip {
  top:auto; bottom:calc(100% + 4px);
}

.tip-head { display:flex; gap:9px; align-items:flex-start; margin-bottom:7px; }
.tip-ico { width:36px; height:36px; image-rendering:pixelated; flex:none; }
.tip-name { font-size:13px; font-weight:600; }
.tip-sub { color:var(--dim); font-size:10px; text-transform:uppercase; letter-spacing:.05em; }

.tip-stats, .tip-foot { border-top:1px solid var(--line); padding-top:6px; margin-top:6px; }
.tip-stats div, .tip-foot div { display:flex; justify-content:space-between; gap:12px; }
.tip-stats span, .tip-foot span { color:var(--dim); }
.tip-stats b, .tip-foot b { font-variant-numeric:tabular-nums; }

.tip-shells { border-top:1px solid var(--line); padding-top:6px; margin-top:6px; }
.tip-label { color:var(--dim); font-size:10px; text-transform:uppercase;
             letter-spacing:.06em; margin-bottom:3px; }
.tip-shell { display:flex; align-items:baseline; gap:5px; }
.tip-shell .eff { flex:1; }
.tip-shell b { color:var(--accent); font-variant-numeric:tabular-nums; }

.tip-desc {
  border-top:1px solid var(--line); padding-top:6px; margin-top:6px;
  color:var(--dim); font-style:italic; white-space:pre-line;
}
.tip-raw {
  margin-top:7px; padding-top:5px; border-top:1px dashed var(--line);
  color:#4a5265; font-size:9px; word-break:break-all;
}

/* --- carved runes -------------------------------------------------------- */
/* The extra stat lines, on top of the shells. The client prints them in a warm
   yellow-orange; a decrease is the same line with a minus, so colour it as bad. */
.tip-runes { border-top:1px solid var(--line); padding-top:6px; margin-top:6px; }
.tip-rune { color:#e8c07a; }
.tip-rune::before { content:"- "; color:#8a7448; }
.tip-rune.neg { color:var(--bad); }

.rune {
  display:inline-block; margin-right:4px; padding:0 4px; border-radius:3px;
  background:#2b2418; border:1px solid #4a3d25; color:#e8c07a;
}
.rune b { margin-left:2px; }
.rune.neg { background:#2e1c1c; border-color:#5a3030; color:var(--bad); }

/* --- pinned tooltips ----------------------------------------------------- */
/* A pin is a clone of the hover box, appended to <body>. It must ignore the
   hover rules entirely, hence the explicit display and fixed positioning. */
.tip.tip-pinned {
  display:block !important; position:fixed; width:340px; white-space:normal;
  background:#0d0f14; border:1px solid var(--accent); border-radius:7px;
  box-shadow:0 14px 40px rgba(0,0,0,.75); padding:0 11px 9px;
  font-size:11px; line-height:1.5;
}
.tip.tip-pinned.dragging { opacity:.9; }

.tip-drag {
  display:flex; align-items:center; justify-content:space-between;
  margin:0 -11px 7px; padding:4px 8px 4px 11px;
  border-bottom:1px solid var(--line); border-radius:6px 6px 0 0;
  background:#171b24; cursor:grab;
  font-size:9px; text-transform:uppercase; letter-spacing:.1em; color:var(--dim);
  user-select:none;
}
.tip-drag:active { cursor:grabbing; }
.tip-close {
  background:transparent; border:0; color:var(--dim); font-size:14px;
  line-height:1; padding:0 3px; cursor:pointer;
}
.tip-close:hover { color:var(--bad); }
/* A line we could not name: dimmed and dashed, so it never passes for a real one. */
.tip-rune.unknown { color:var(--dim); border-bottom:1px dashed #3a4152; }
.shellchip.carved { border-color:#4a3d25; background:#221d14; }

/* --- news markers -------------------------------------------------------- */
/* Deliberately small. On a busy market most stackable listings turn over every
   scan, so a loud badge would drown the table it is meant to annotate. */
.news {
  display:inline-block; margin-left:5px; padding:0 3px; border-radius:2px;
  font-size:9px; font-weight:700; letter-spacing:.04em; vertical-align:middle;
}
.news.new  { background:#14332e; color:var(--accent); text-transform:uppercase; }
.news.up   { color:var(--bad); }
.news.down { color:var(--ok); }

.chk { display:inline-flex; align-items:center; gap:4px; color:var(--dim); cursor:pointer; }
.chk input { width:auto; margin:0; accent-color:var(--accent); }

/* --- fetcher ------------------------------------------------------------- */
.pill.on { border-color:var(--accent); color:var(--accent); background:#14332e; }
.scanbar { border-top:1px solid var(--line); padding-top:8px; }
.panel > h2 button { margin-left:6px; font-size:11px; padding:2px 7px; }

/* --- alerts -------------------------------------------------------------- */
.agroup {
  border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:6px;
  padding:7px 9px; margin-top:8px; background:var(--panel2);
}
.acond { margin-top:5px; padding-left:10px; }
table.auctions tr.sel td { background:var(--panel2); }
table.auctions tr.acked td { opacity:.45; }
.bazfilter code.cblist {
  font-size:10px; color:var(--accent); background:#0e1015;
  border:1px solid var(--line); border-radius:4px; padding:2px 6px;
}
.alertlink { color:var(--warn); font-weight:600; }

/* --- arbitrage ----------------------------------------------------------- */
/* The two per-row actions: open the item on nosapki, and ban it for good.
   Sized to the row rather than the button grid, so a 12-column table of numbers
   does not grow a fat control column. */
/* The anchor and the <button> must be the SAME control to the eye: same box, same
   ground, same text colour. An <a> left to the base link rule is coloured text with no
   background, which reads as part of the item name rather than as a button. */
.iconbtn {
  display:inline-block; width:20px; height:20px; line-height:18px; text-align:center;
  border:1px solid var(--line); border-radius:5px; background:#232734;
  color:var(--ink); font-size:11px; padding:0; cursor:pointer; text-decoration:none;
  vertical-align:middle;
}
.iconbtn:hover { color:var(--accent); border-color:var(--accent); text-decoration:none; }
a.iconbtn:hover { text-decoration:none; }
.iconbtn.ban:hover { color:var(--bad); border-color:var(--bad); background:#2a1518; }
.bannedchip {
  display:inline-flex; align-items:center; gap:4px;
  border:1px solid var(--line); border-left:3px solid var(--bad); border-radius:6px;
  padding:2px 6px; background:var(--panel2); font-size:11px;
}
.bannedchip button { padding:0 5px; line-height:1.4; }
/* The two per-row actions sit at the head of the item cell, so they need to line up
   with the text rather than stack above it. */
td.itemcell .iconbtn { margin-right:3px; vertical-align:middle; }
td.itemcell { vertical-align:middle; }
/* The item icon is a link too. display:block keeps the anchor the exact size of the
   28px image, so there is no stray underline or descender gap under it. */
.icolink { display:block; line-height:0; border-radius:4px; }
.icolink:hover { text-decoration:none; outline:1px solid var(--accent); }

/* --- arbitrage filter bar -------------------------------------------------
   Three groups, each with a caption saying what it decides: which two markets,
   how prices are read, what is worth showing. Every control carries its own
   label above it, because "unit <=" next to a number box is not a question
   anyone can answer. */
.arbbar .body { padding:10px 12px; }
.fgrid { display:flex; flex-direction:column; gap:10px; }
.fgroup { display:flex; flex-direction:column; gap:5px; }
.fgroup + .fgroup { border-top:1px solid var(--line); padding-top:9px; }
.ftitle {
  font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--dim);
}
.frow { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }
.f { display:flex; flex-direction:column; gap:3px; }
.f > span { font-size:11px; color:var(--dim); }
.f input[type=number] { width:104px; }
.f input[type=text], .f input:not([type]) { width:150px; }
.f input[type=range] { width:150px; padding:0; accent-color:var(--accent); }
.f select { min-width:130px; }
.arbbar .swap { align-self:flex-end; padding:4px 8px; }
.arbbar .go { align-self:flex-end; border-color:var(--accent); color:var(--accent); }
.arbbar .go:disabled { border-color:var(--line); color:var(--dim); }