/* Mandrex Payout Recon - ledger-dark. Square corners, hairlines, tabular figures. */

:root{
  --bg:#0a0c12; --surface:#111520; --surface-2:#171c2a; --surface-3:#1e2436;
  --ink:#e6e9f2; --ink-2:#98a0b8; --ink-3:#656d87;
  --line:#232a3d; --line-2:#323b54;
  --accent:#6d7cff; --accent-2:#9aa4ff; --accent-soft:#191e3c; --on-accent:#080a14;
  --copper:#e0883f; --copper-soft:#2d1f12;
  --good:#2fb98a; --good-soft:#0e2a23;
  --high:#ff6b5e; --high-soft:#331a18;
  --med:#e8a93c; --med-soft:#2d2414;
  --low:#8490ad; --low-soft:#1a2030;
  --shopify:#5bbf7a; --lmb:#6d7cff; --qbo:#e0883f;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SFMono-Regular","Cascadia Mono","Segoe UI Mono",Menlo,Consolas,monospace;
  --rail:214px;
}
:root[data-theme="light"]{
  --bg:#f3f4f8; --surface:#ffffff; --surface-2:#f7f8fb; --surface-3:#eceef4;
  --ink:#121622; --ink-2:#555d75; --ink-3:#7c8499;
  --line:#e1e4ed; --line-2:#cdd2e0;
  --accent:#4753d6; --accent-2:#2f3ab8; --accent-soft:#eceefc; --on-accent:#ffffff;
  --copper:#b96a1e; --copper-soft:#fbf0e4;
  --good:#12805e; --good-soft:#e3f4ee;
  --high:#c8392c; --high-soft:#fcebe8;
  --med:#9a6c0c; --med-soft:#fbf1dc;
  --low:#5d6881; --low-soft:#eef0f5;
  --shopify:#2f7d4c; --lmb:#4753d6; --qbo:#b96a1e;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:14px/1.5 var(--sans); -webkit-font-smoothing:antialiased;
}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.neg{color:var(--high)}
.pos{color:var(--good)}
.muted{color:var(--ink-2)}
.dim{color:var(--ink-3)}
a{color:var(--accent-2)}
button{font:inherit; color:inherit}
h1,h2,h3{margin:0; font-weight:600; letter-spacing:-.01em}

.micro{
  font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-3); font-weight:600;
}

/* ---------- shell ---------- */
.shell{display:grid; grid-template-columns:var(--rail) 1fr; min-height:100vh}

.rail{
  background:#06080e; border-right:1px solid var(--line);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
}
:root[data-theme="light"] .rail{background:#0d1020}
.rail .brand{padding:18px 16px 14px; border-bottom:1px solid #161c2b}
.rail .brand .name{color:#fff; font-weight:600; font-size:14.5px; letter-spacing:-.01em}
.rail .brand .sub{color:#6b7490; font-size:11px; margin-top:2px}
.mark{display:flex; align-items:center; gap:7px; margin-bottom:9px}
.mark i{width:7px; height:7px; border-radius:50%; display:block}
.mark i:nth-child(1){background:var(--shopify)}
.mark i:nth-child(3){background:var(--lmb)}
.mark i:nth-child(5){background:var(--qbo)}
.mark s{flex:1; height:1px; background:#2b344c; display:block}

.nav{padding:10px 8px; flex:1; overflow:auto}
.nav button{
  display:flex; width:100%; align-items:center; gap:9px; background:none; border:0;
  padding:8px 10px; border-radius:3px; cursor:pointer; color:#97a0ba; text-align:left;
  font-size:13px;
}
.nav button:hover{background:#10141f; color:#dfe3ef}
.nav button[aria-current="true"]{background:var(--accent-soft); color:#fff}
:root[data-theme="light"] .nav button[aria-current="true"]{background:#1d2440; color:#fff}
.nav button .tag{
  margin-left:auto; font-family:var(--mono); font-size:11px; padding:1px 5px;
  border-radius:2px; background:#1a2030; color:#9aa3bc;
}
.nav button .tag.hot{background:var(--high); color:#120a09}
.rail .foot{padding:12px 14px; border-top:1px solid #161c2b; color:#5d6681; font-size:11px}

.main{min-width:0; display:flex; flex-direction:column}
.topbar{
  display:flex; align-items:center; gap:12px; padding:12px 22px;
  border-bottom:1px solid var(--line); background:var(--surface);
  position:sticky; top:0; z-index:20;
}
.topbar .store{font-weight:600}
.topbar .spacer{flex:1}

.btn{
  border:1px solid var(--line-2); background:var(--surface-2); color:var(--ink);
  padding:6px 12px; border-radius:3px; cursor:pointer; font-size:13px;
}
.btn:hover{border-color:var(--accent); color:var(--accent-2)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:600}
.btn.primary:hover{background:var(--accent-2); color:var(--on-accent)}
.btn.ghost{background:none}
.btn.sm{padding:3px 8px; font-size:12px}
select,input[type="text"],input[type="search"],textarea{
  background:var(--surface-2); border:1px solid var(--line-2); color:var(--ink);
  padding:6px 9px; border-radius:3px; font:inherit;
}
select:focus,input:focus,textarea:focus{outline:2px solid var(--accent-soft); border-color:var(--accent)}

.page{padding:22px; display:none}
.page.on{display:block}
.page>header{margin-bottom:16px}
.page>header h2{font-size:19px}
.page>header p{margin:4px 0 0; color:var(--ink-2); max-width:72ch}

/* ---------- cards ---------- */
.card{background:var(--surface); border:1px solid var(--line); border-radius:4px}
.card>.head{
  padding:11px 15px; border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:10px;
}
.card>.head h3{font-size:13.5px}
.card>.body{padding:15px}

.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(178px,1fr)); gap:12px; margin-bottom:16px}
.tile{background:var(--surface); border:1px solid var(--line); border-radius:4px; padding:13px 15px; position:relative; overflow:hidden}
.tile::before{content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--line-2)}
.tile.good::before{background:var(--good)} .tile.high::before{background:var(--high)}
.tile.med::before{background:var(--med)}  .tile.acc::before{background:var(--accent)}
.tile .v{font-family:var(--mono); font-size:25px; font-variant-numeric:tabular-nums; letter-spacing:-.02em; margin-top:7px}
.tile .n{color:var(--ink-3); font-size:11.5px; margin-top:5px}

.grid2{display:grid; grid-template-columns:1.35fr 1fr; gap:14px; align-items:start}
@media (max-width:1080px){.grid2{grid-template-columns:1fr}}

/* ---------- bridge ---------- */
.bridge{width:100%; border-collapse:collapse; font-size:13.5px}
.bridge td{padding:6px 0}
.bridge td.a{text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap}
.bridge tr.rule td{border-top:1px solid var(--line-2); font-weight:600}
.bridge tr.total td{border-top:1px solid var(--line-2); border-bottom:3px double var(--line-2); font-weight:600; font-size:15px}
.bridge tr.src td:first-child{display:flex; align-items:center; gap:8px}
.dot{width:7px; height:7px; border-radius:50%; display:inline-block; flex:none}
.dot.shopify{background:var(--shopify)} .dot.lmb{background:var(--lmb)} .dot.qbo{background:var(--qbo)}
.var{font-size:12px; padding:1px 6px; border-radius:2px; font-family:var(--mono); margin-left:8px}
.var.ok{background:var(--good-soft); color:var(--good)}
.var.bad{background:var(--high-soft); color:var(--high)}

.explain{margin-top:14px; border-top:1px solid var(--line); padding-top:12px}
.explain .row{display:flex; gap:10px; padding:5px 0; font-size:13px; align-items:baseline}
.explain .row .amt{margin-left:auto; font-family:var(--mono); font-variant-numeric:tabular-nums}

/* ---------- severity + codes ---------- */
.sev{
  display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600;
  padding:2px 7px; border-radius:2px; text-transform:uppercase; letter-spacing:.05em;
}
.sev.high{background:var(--high-soft); color:var(--high)}
.sev.medium{background:var(--med-soft); color:var(--med)}
.sev.low{background:var(--low-soft); color:var(--low)}
.sev.ok{background:var(--good-soft); color:var(--good)}

.bars{display:flex; flex-direction:column; gap:8px}
.bars .b{display:grid; grid-template-columns:1fr 46px; gap:10px; align-items:center; font-size:12.5px}
.bars .track{height:16px; background:var(--surface-3); border-radius:2px; overflow:hidden; position:relative}
.bars .fill{height:100%; background:var(--accent)}
.bars .b.high .fill{background:var(--high)} .bars .b.medium .fill{background:var(--med)} .bars .b.low .fill{background:var(--low)}
.bars .lab{position:absolute; left:7px; top:0; line-height:16px; font-size:11px; color:var(--ink)}
.bars .ct{text-align:right; font-family:var(--mono); color:var(--ink-2)}

/* ---------- tables ---------- */
.tblwrap{overflow:auto; border-top:1px solid var(--line)}
table.data{width:100%; border-collapse:collapse; font-size:13px}
table.data th{
  position:sticky; top:0; background:var(--surface-2); text-align:left; font-weight:600;
  font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3);
  padding:8px 11px; border-bottom:1px solid var(--line); white-space:nowrap; z-index:1;
}
table.data td{padding:8px 11px; border-bottom:1px solid var(--line); vertical-align:top}
table.data td.a,table.data th.a{text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap}
table.data tbody tr:hover{background:var(--surface-2)}
table.data tr.clickable{cursor:pointer}
table.data tr.open{background:var(--surface-2)}
table.data td.sub{background:var(--surface-2); padding:0}
.chip{
  display:inline-block; font-size:11px; padding:1px 6px; border-radius:2px;
  background:var(--surface-3); color:var(--ink-2); margin:1px 3px 1px 0; white-space:nowrap;
}
.chip.high{background:var(--high-soft); color:var(--high)}
.chip.medium{background:var(--med-soft); color:var(--med)}
.chip.low{background:var(--low-soft); color:var(--low)}
.chip.ok{background:var(--good-soft); color:var(--good)}

.filters{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:12px}
.seg{display:inline-flex; border:1px solid var(--line-2); border-radius:3px; overflow:hidden}
.seg button{background:var(--surface); border:0; padding:5px 11px; cursor:pointer; font-size:12.5px; color:var(--ink-2)}
.seg button+button{border-left:1px solid var(--line-2)}
.seg button[aria-pressed="true"]{background:var(--accent-soft); color:var(--accent-2); font-weight:600}
:root[data-theme="light"] .seg button[aria-pressed="true"]{color:var(--accent)}

/* ---------- exception detail ---------- */
.detail{padding:14px 16px; border-left:2px solid var(--accent)}
.detail .three{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:12px 0}
@media (max-width:860px){.detail .three{grid-template-columns:1fr}}
.src{border:1px solid var(--line); border-radius:3px; background:var(--surface)}
.src .h{padding:7px 10px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:7px; font-size:12px; font-weight:600}
.src .l{display:flex; justify-content:space-between; gap:12px; padding:4px 10px; font-size:12.5px}
.src .l span:last-child{font-family:var(--mono); font-variant-numeric:tabular-nums}
.src .l.t{border-top:1px solid var(--line); font-weight:600; margin-top:3px; padding-top:6px; padding-bottom:7px}
.src.absent{opacity:.55}
.src.absent .h{color:var(--high)}
.note{display:grid; gap:8px; margin-top:12px}
.note textarea{min-height:52px; resize:vertical; width:100%}
.says{background:var(--surface-2); border:1px solid var(--line); border-radius:3px; padding:10px 12px; font-size:13px}
.says b{display:block; font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); margin-bottom:3px}
.says+.says{margin-top:8px}

/* ---------- files ---------- */
.drops{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
@media (max-width:980px){.drops{grid-template-columns:1fr}}
.drop{
  border:1px dashed var(--line-2); border-radius:4px; background:var(--surface);
  padding:16px; text-align:center; transition:border-color .12s,background .12s;
}
.drop.over{border-color:var(--accent); background:var(--accent-soft)}
.drop.has{border-style:solid; border-color:var(--good)}
.drop h4{margin:8px 0 3px; font-size:13.5px}
.drop p{margin:0 0 10px; color:var(--ink-3); font-size:12px; min-height:32px}
.drop .state{font-size:12px; margin-top:9px; color:var(--ink-2)}
.drop .state.ok{color:var(--good)}
.drop .state.err{color:var(--high)}
.maprow{display:flex; justify-content:space-between; gap:10px; font-size:12px; padding:2px 0; border-bottom:1px dotted var(--line)}
.maprow span:last-child{font-family:var(--mono); color:var(--ink-2)}

.banner{
  display:flex; gap:10px; align-items:center; padding:9px 14px; font-size:12.5px;
  background:var(--copper-soft); border-bottom:1px solid var(--line); color:var(--ink);
}
.banner .dotp{width:6px; height:6px; border-radius:50%; background:var(--copper); flex:none}
.empty{padding:40px 20px; text-align:center; color:var(--ink-3)}
.toast{
  position:fixed; right:18px; bottom:18px; background:var(--surface-3); color:var(--ink);
  border:1px solid var(--line-2); border-radius:3px; padding:10px 14px; font-size:13px;
  box-shadow:0 10px 30px -12px rgba(0,0,0,.7); z-index:50;
}