/* RezMarket — dark trader terminal. Dense, monospace numerals, green/red spreads. */
:root {
    --bg: #0b0e14;
    --panel: #111623;
    --grid: #1c2230;
    --fg: #e6e9ef;
    --muted: #8a94a6;
    --accent: #4ea1ff;
    --pos: #3fb950;
    --neg: #f85149;
    --priv: #d2a8ff;
    --pub: #6fb3ff;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 14px;
}

.num, td.num, th.num {
    font-variant-numeric: tabular-nums;
    font-family: "Cascadia Mono", "Consolas", ui-monospace, monospace;
    text-align: right;
}

/* ---- shell ---- */
.app { min-height: 100vh; }

.topnav {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 0 20px;
    height: 48px;
    background: var(--panel);
    border-bottom: 1px solid var(--grid);
    position: sticky;
    top: 0;
    z-index: 10;
}
.topnav .brand {
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--accent);
    margin-right: 8px;
}
.topnav a {
    color: var(--muted);
    text-decoration: none;
    padding: 4px 2px;
    border-bottom: 2px solid transparent;
}
.topnav a:hover { color: var(--fg); }
.topnav a.active { color: var(--fg); border-bottom-color: var(--accent); }

.content { padding: 20px 24px; max-width: 1100px; }

h1 { font-size: 18px; font-weight: 600; margin: 0 0 16px; }
h2 { font-size: 15px; font-weight: 600; margin: 18px 0 10px; }

/* ---- controls ---- */
.controls { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
input, select {
    background: var(--panel);
    color: var(--fg);
    border: 1px solid var(--grid);
    border-radius: 6px;
    padding: 7px 10px;
    font-size: 14px;
}
input.search { min-width: 280px; }
input:focus, select:focus { outline: none; border-color: var(--accent); }
button {
    background: var(--accent);
    color: #04101f;
    border: 0;
    border-radius: 6px;
    padding: 7px 14px;
    font-weight: 600;
    cursor: pointer;
}
button:hover { filter: brightness(1.1); }
label { color: var(--muted); display: inline-flex; gap: 6px; align-items: center; }

/* ---- tables ---- */
table { width: 100%; border-collapse: collapse; }
thead th {
    position: sticky; top: 48px;
    background: var(--panel);
    color: var(--muted);
    font-weight: 600;
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--grid);
    white-space: nowrap;
}
tbody td { padding: 6px 10px; border-bottom: 1px solid var(--grid); }
tbody tr:hover { background: #0f1420; }

.pos { color: var(--pos); }
.neg { color: var(--neg); }
.muted { color: var(--muted); }

/* ---- per-row refresh button ---- */
.rowrefresh {
    background: transparent; border: 1px solid var(--grid); color: var(--muted);
    border-radius: 4px; cursor: pointer; padding: 1px 7px; font-size: 13px; line-height: 1.4;
}
.rowrefresh:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }
.rowrefresh:disabled { opacity: 0.5; cursor: default; }

/* ---- nested recipe breakdown ---- */
.recipe { width: auto; min-width: 420px; margin: 4px 0 8px 12px; font-size: 13px; }
.recipe thead th { position: static; top: auto; background: transparent; padding: 4px 14px 4px 0; font-size: 11px; }
.recipe tbody td { padding: 3px 14px 3px 0; border-bottom: 1px solid var(--grid); }
.recipe tbody tr:hover { background: transparent; }
.recipe tfoot td { padding: 5px 14px 0 0; font-weight: 600; border-top: 1px solid var(--grid); }
.recipe .muted { margin-left: 6px; font-size: 11px; }

/* ---- badges / suggest ---- */
.badge { font-size: 11px; padding: 1px 7px; border-radius: 10px; font-weight: 600; }
.badge.priv { background: rgba(210,168,255,0.15); color: var(--priv); }
.badge.pub { background: rgba(111,179,255,0.15); color: var(--pub); }

.suggest { list-style: none; margin: 0; padding: 0; border: 1px solid var(--grid); border-radius: 6px; max-width: 460px; }
.suggest li { padding: 7px 10px; cursor: pointer; display: flex; justify-content: space-between; gap: 12px; }
.suggest li:hover { background: var(--panel); }

/* ---- loading indicator ---- */
/* Indeterminate top bar: a sliding accent segment while a scan/refresh is in flight. */
.loadingbar { height: 3px; width: 100%; margin: 0 0 12px; border-radius: 2px; overflow: hidden;
    background: var(--grid); position: relative; visibility: hidden; }
.loadingbar.on { visibility: visible; }
.loadingbar.on::after { content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 35%;
    background: var(--accent); border-radius: 2px; animation: lbslide 1.05s ease-in-out infinite; }
@keyframes lbslide { 0% { left: -35%; } 100% { left: 100%; } }
/* Dim + lock the results while loading so stale rows read as "refreshing", not current. */
.results.busy { opacity: 0.45; pointer-events: none; transition: opacity 0.1s; }
.loadmsg { color: var(--accent); font-size: 13px; }

/* ---- routes (transport-chain planner) ---- */
.routecities { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.routecity { display: flex; align-items: center; gap: 4px; }
.routecity input { width: 130px; }
.leghdr { text-align: left; font-size: 14px; font-weight: 700; color: var(--accent);
    padding-top: 14px; border-top: 1px solid var(--grid); }
.summary { font-size: 14px; margin: 4px 0 12px; }