/* Tokens from the retailerbox.com theme. Dense by design: this is a working tool, not a brochure.
   On a phone every table row becomes a labelled block, so no data is lost to sideways scrolling. */
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+1E00-1E9F, U+2020, U+20A0-20AB, U+2113; }

:root{
  --rb-indigo:#4b3bff; --rb-indigo-600:#3a2be0; --rb-indigo-soft:#efedff;
  --rb-ink:#1b1840; --rb-ink-2:#53506f; --rb-ink-3:#807ca0; --rb-line:#eceaf6; --rb-line-2:#e0ddef;
  --rb-bg:#ffffff; --rb-bg-soft:#f8f8fc; --rb-bg-tint:#f3f2fb;
  --svc-launch:#7b4dff; --svc-launch-text:#5b31e0; --svc-launch-soft:#f0ecff;
  --svc-auto:#12c98a;   --svc-auto-text:#07734f;   --svc-auto-soft:#e3f8ef;
  --svc-list:#ff3e8a;   --svc-list-text:#c1185c;   --svc-list-soft:#ffe9f1;
  --svc-ful:#18c3e0;    --svc-ful-text:#0a7285;    --svc-ful-soft:#e2f6fb;
  --svc-health:#ff6a3d; --svc-health-text:#b8420f; --svc-health-soft:#fff0e9;
  --r:10px; --r-sm:8px;
  --shadow:0 1px 2px rgba(27,24,64,.04), 0 6px 18px rgba(27,24,64,.05);
  --rb-font:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --page:var(--rb-indigo); --page-2:var(--rb-indigo-600); --page-soft:var(--rb-indigo-soft); --page-text:var(--rb-indigo-600);
  color-scheme:light;
}
[data-page="claims"]{--page:var(--svc-ful); --page-2:#0f9fb8; --page-soft:var(--svc-ful-soft); --page-text:var(--svc-ful-text)}
[data-page="deadlines"]{--page:var(--svc-health); --page-2:#e2551f; --page-soft:var(--svc-health-soft); --page-text:var(--svc-health-text)}
[data-page="listings"]{--page:var(--svc-list); --page-2:#e2276f; --page-soft:var(--svc-list-soft); --page-text:var(--svc-list-text)}
[data-page="catalog"]{--page:#0f9fb8; --page-2:#0a7285; --page-soft:var(--svc-ful-soft); --page-text:var(--svc-ful-text)}
[data-page="sales"]{--page:var(--svc-auto); --page-2:#0ea877; --page-soft:var(--svc-auto-soft); --page-text:var(--svc-auto-text)}
[data-page="market"],[data-page="finder"]{--page:var(--svc-launch); --page-2:#5b31e0; --page-soft:var(--svc-launch-soft); --page-text:var(--svc-launch-text)}
[data-page="finds"]{--page:var(--svc-health); --page-2:#e2551f; --page-soft:var(--svc-health-soft); --page-text:var(--svc-health-text)}
[data-page="inventory"]{--page:var(--svc-health); --page-2:#e2551f; --page-soft:var(--svc-health-soft); --page-text:var(--svc-health-text)}
[data-page="health"]{--page:var(--svc-ful); --page-2:#0a7285; --page-soft:var(--svc-ful-soft); --page-text:var(--svc-ful-text)}
[data-page="portfolio"]{--page:var(--rb-ink); --page-2:#2a2560; --page-soft:var(--rb-bg-tint); --page-text:var(--rb-ink)}
[data-page="removals"]{--page:var(--svc-list); --page-2:#e2276f; --page-soft:var(--svc-list-soft); --page-text:var(--svc-list-text)}
[data-page="events"]{--page:var(--svc-auto); --page-2:#0ea877; --page-soft:var(--svc-auto-soft); --page-text:var(--svc-auto-text)}
[data-page="changes"]{--page:var(--rb-indigo); --page-2:var(--rb-indigo-600); --page-soft:var(--rb-indigo-soft); --page-text:var(--rb-indigo-600)}
[data-page="settings"]{--page:var(--svc-launch); --page-2:#5b31e0; --page-soft:var(--svc-launch-soft); --page-text:var(--svc-launch-text)}
[data-page="connect"]{--page:var(--svc-auto); --page-2:#0ea877; --page-soft:var(--svc-auto-soft); --page-text:var(--svc-auto-text)}
[data-page="login"]{--page:var(--rb-ink); --page-2:#2a2560; --page-soft:var(--rb-bg-tint); --page-text:var(--rb-ink)}

*{box-sizing:border-box}
body{margin:0;background:var(--rb-bg-soft);color:var(--rb-ink-2);font:13.5px/1.45 var(--rb-font);
  -webkit-text-size-adjust:100%;overflow-x:hidden}
td, th{overflow-wrap:anywhere}
a{color:var(--page-text);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{color:var(--rb-ink);margin:0;font-weight:750;letter-spacing:-.02em;line-height:1.2}
h1{font-size:19px} h2{font-size:13.5px} h3{font-size:13px}
.layout{display:grid;grid-template-columns:208px 1fr;min-height:100vh}

/* sidebar */
.side{background:var(--rb-ink);color:#b8b4d4;padding:14px 10px;display:flex;flex-direction:column;gap:14px;
  position:sticky;top:0;height:100vh}
.side .brand{display:flex;align-items:center;gap:8px;color:#fff;font-weight:800;font-size:15px;padding:2px 8px}
.side nav{display:flex;flex-direction:column;gap:1px}
.side nav a{display:block;padding:7px 10px;border-radius:var(--r-sm);color:#b8b4d4;font-weight:600;font-size:13px}
.side nav a:hover{background:rgba(255,255,255,.07);color:#fff;text-decoration:none}
.side nav a.on{background:var(--page);color:#fff}
.side .foot{margin-top:auto;font-size:11px;color:#7e7aa3;padding:0 8px;line-height:1.5}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block;vertical-align:middle;margin-right:4px}

/* main */
.main{padding:14px 18px 40px;min-width:0}
.topbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;
  padding-bottom:10px;margin-bottom:12px;border-bottom:1px solid var(--rb-line)}
.topbar h1{display:flex;align-items:center;gap:8px}
.topbar h1::before{content:"";width:4px;height:17px;border-radius:2px;background:var(--page)}
.tools{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
select,input,button,textarea{font:inherit;color:var(--rb-ink);background:var(--rb-bg);
  border:1px solid var(--rb-line-2);border-radius:var(--r-sm);padding:6px 9px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--page);outline-offset:1px}
button,.btn{background:var(--page);color:#fff;border:0;font-weight:700;cursor:pointer;padding:7px 11px}
button:hover,.btn:hover{background:var(--page-2);color:#fff;text-decoration:none}
.btn.ghost{background:var(--rb-bg);color:var(--rb-ink);border:1px solid var(--rb-line-2)}
.btn.ghost:hover{background:var(--page-soft);color:var(--rb-ink)}
.stale{background:var(--svc-health-soft);color:var(--svc-health-text);padding:7px 11px;border-radius:var(--r-sm);
  font-weight:600;font-size:12.5px;margin:0 0 12px}
.note{background:var(--page-soft);color:var(--page-text);border-radius:var(--r-sm);padding:9px 11px;
  font-weight:600;font-size:12.5px}

/* cards and KPIs */
.card{background:var(--rb-bg);border:1px solid var(--rb-line);border-radius:var(--r);box-shadow:var(--shadow);
  padding:14px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(164px,1fr));gap:10px;margin-bottom:12px}
.kpi{padding:11px 13px;border-left:3px solid var(--rb-line-2)}
.kpi .label{color:var(--rb-ink-3);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.kpi .value{font-size:22px;font-weight:800;color:var(--rb-ink);letter-spacing:-.025em;margin:3px 0 1px;
  font-variant-numeric:tabular-nums;line-height:1.15}
.kpi .sub{font-size:11.5px;color:var(--rb-ink-3);line-height:1.35}
.kpi.accent-claimable{border-left-color:var(--svc-auto)}
.kpi.accent-urgent{border-left-color:var(--svc-health)}
.kpi.accent-later{border-left-color:var(--svc-ful)}
.kpi.accent-paid{border-left-color:var(--svc-launch)}
.kpi.accent-missed{border-left-color:var(--svc-list)}
.kpi.accent-missed .value{color:var(--svc-list-text)}

.grid{display:grid;grid-template-columns:1.9fr 1fr;gap:12px;align-items:start}
.section-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:9px;flex-wrap:wrap}

/* chart */
.chart{width:100%;height:150px;display:block}
.chart .bar{fill:var(--page);opacity:.9}
.chart .bar.soon{fill:var(--svc-health)}
.chart text{fill:var(--rb-ink-3);font-size:10px}

/* tables */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:12.5px}
th{text-align:left;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--rb-ink-3);
  font-weight:700;padding:6px 8px;border-bottom:1px solid var(--rb-line-2);white-space:nowrap;
  position:sticky;top:0;background:var(--rb-bg);z-index:1}
td{padding:7px 8px;border-bottom:1px solid var(--rb-line);vertical-align:top;color:var(--rb-ink-2)}
td .muted{font-size:11px}
tbody tr:hover{background:var(--page-soft)}
td.num,th.num{text-align:right}
.pill{display:inline-block;padding:2px 7px;border-radius:999px;font-size:11px;font-weight:700;white-space:nowrap}
.pill.claimable,.pill.recovered{background:var(--svc-auto-soft);color:var(--svc-auto-text)}
.pill.opens_later{background:var(--svc-ful-soft);color:var(--svc-ful-text)}
.pill.check_window{background:var(--svc-launch-soft);color:var(--svc-launch-text)}
.pill.already_paid{background:var(--rb-bg-tint);color:var(--rb-ink-3)}
.pill.expired{background:var(--svc-list-soft);color:var(--svc-list-text)}
.pill.filed,.pill.appealed{background:var(--svc-health-soft);color:var(--svc-health-text)}
.pill.denied{background:var(--svc-list-soft);color:var(--svc-list-text)}
.pill.lost{background:var(--rb-bg-tint);color:var(--rb-ink-3)}
/* account health: ok / watch / act / unknown */
.pill.ok{background:var(--svc-auto-soft);color:var(--svc-auto-text)}
.pill.watch{background:var(--svc-health-soft);color:var(--svc-health-text)}
.pill.act{background:var(--svc-list-soft);color:var(--svc-list-text)}
.pill.unknown{background:var(--rb-bg-tint);color:var(--rb-ink-3)}
.kpi.level-ok{border-left-color:var(--svc-auto)}
.kpi.level-watch{border-left-color:var(--svc-health)}
.kpi.level-act{border-left-color:var(--svc-list)}
.kpi.level-act .value{color:var(--svc-list-text)}
.due{font-weight:700;white-space:nowrap}
.due.soon{color:var(--svc-list-text)}
.due.ok{color:var(--rb-ink-2)}
.muted{color:var(--rb-ink-3)}
.empty{padding:22px;text-align:center;color:var(--rb-ink-3)}
code{background:var(--rb-bg-tint);border-radius:5px;padding:1px 5px;font-family:var(--rb-font);font-weight:600}
.spark{display:flex;align-items:flex-end;gap:2px;height:22px}
.spark i{display:block;background:var(--page);opacity:.85;border-radius:1px;min-height:2px}
.mgrid td{white-space:nowrap}

/* tablet: the sidebar becomes a scrolling strip along the top */
@media(max-width:1000px){
  .layout{grid-template-columns:1fr}
  .side{position:static;height:auto;flex-direction:row;align-items:center;gap:10px;padding:8px 10px;
    overflow-x:auto;scrollbar-width:none}
  .side::-webkit-scrollbar{display:none}
  .side nav{flex-direction:row;gap:4px}
  .side nav a{white-space:nowrap;padding:6px 10px}
  .side .foot{margin:0 0 0 auto;white-space:nowrap;padding:0}
  .grid{grid-template-columns:1fr}
}

/* phone: rows become labelled blocks, so every column is still readable */
@media(max-width:640px){
  body{font-size:14px}
  .main{padding:12px 12px 36px}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .kpi .value{font-size:19px}
  .card{padding:12px}
  .topbar{align-items:flex-start}
  .tools{width:100%}
  .tools select,.tools input,.tools button{flex:1 1 auto;min-width:0}
  .table-wrap{overflow-x:visible}
  table,tbody,tr,td{display:block;width:100%}
  thead{display:none}
  tbody tr{border:1px solid var(--rb-line);border-radius:var(--r-sm);padding:9px 11px;margin-bottom:8px;
    background:var(--rb-bg);overflow:hidden}
  td > *{min-width:0;max-width:100%}
  tbody tr:hover{background:var(--rb-bg)}
  td{border:0;padding:3px 0;display:flex;flex-wrap:wrap;gap:4px 10px;justify-content:space-between;
    align-items:baseline;text-align:right;overflow-wrap:anywhere;min-width:0}
  td::before{content:attr(data-label);color:var(--rb-ink-3);font-size:11px;font-weight:700;
    text-transform:uppercase;letter-spacing:.05em;text-align:left;flex:0 0 38%;min-width:0}
  td:first-child{font-weight:700;color:var(--rb-ink);text-align:left;display:block;margin-bottom:5px;
    padding-bottom:6px;border-bottom:1px solid var(--rb-line)}
  td:first-child::before{display:none}
  td .muted{display:block;font-weight:400;text-align:right}
  td:first-child .muted{text-align:left}
  .mgrid td{white-space:normal}
}

/* login and the seller's connect page */
.login{min-height:100vh;display:grid;place-items:center;padding:18px;
  background:radial-gradient(60% 45% at 50% 0, var(--page-soft) 0, var(--rb-bg-soft) 70%)}
.login .card{width:min(360px,100%)}
.login label{display:block;font-weight:700;color:var(--rb-ink);margin:12px 0 4px}
.login input{width:100%}
.login button{width:100%;margin-top:16px;padding:10px}
.error{background:var(--svc-list-soft);color:var(--svc-list-text);padding:9px 11px;border-radius:var(--r-sm);
  font-weight:700;margin-top:10px}