/* extraping UI.
 *
 * Design tokens map onto the parent site's CSS variables when present
 * (site_chrome mode links /css/style.css first), with standalone fallbacks.
 * Dark mode therefore works automatically via the site's [data-theme] switch.
 * Element selectors are scoped under .ep-app so nothing leaks into the parent
 * site's chrome; class selectors are extraping-specific (no collisions).
 */
:root {
  --ep-bg: var(--color-bg-secondary, #f5f6f8);
  --ep-card: var(--color-bg-elevated, #fff);
  --ep-ink: var(--color-text-primary, #1c2430);
  --ep-muted: var(--color-text-tertiary, #68727f);
  --ep-line: var(--color-border, #dde2e8);
  --ep-accent: var(--color-accent-primary, #2563eb);
  --ep-accent-hover: var(--color-accent-primary-hover, #1d4ed8);
  --ep-radius: var(--radius-lg, 8px);
  --ep-font: var(--font-family, system-ui, -apple-system, "Segoe UI", sans-serif);
  /* Loss ramp: a data-visualization scale, deliberately brand-independent. */
  --l0: #22a34a; --l1: #9ac412; --l2: #eab308; --l3: #f97316; --l4: #dc2626; --l5: #7f1d1d;
}

/* ---- standalone chrome (no parent site) ---------------------------------- */
body.ep-standalone { margin: 0; font: 14px/1.45 var(--ep-font); background: var(--ep-bg); color: var(--ep-ink); }
body.ep-standalone * { box-sizing: border-box; }
header.top { display: flex; align-items: center; gap: 1.5rem; background: #101827; color: #e5e9f0; padding: .55rem 1rem; }
header.top .brand { color: #fff; font-weight: 700; font-size: 1.05rem; text-decoration: none; }
header.top nav { display: flex; gap: .9rem; flex: 1; }
header.top nav a { color: #b7c1cf; text-decoration: none; }
header.top nav a.on, header.top nav a:hover { color: #fff; }
header.top .who { display: flex; gap: .6rem; align-items: center; font-size: .85rem; color: #b7c1cf; }
header.top button { background: none; border: 1px solid #3a4657; color: #b7c1cf; border-radius: 4px; padding: .15rem .5rem; cursor: pointer; }
main.ep-main { max-width: 1200px; margin: 1.2rem auto; padding: 0 1rem; }

/* ---- app scope ------------------------------------------------------------ */
.ep-app { font-size: 14px; line-height: 1.45; color: var(--ep-ink); font-family: var(--ep-font); }
.ep-app * { box-sizing: border-box; }
.ep-app a { color: var(--ep-accent); text-decoration: none; }
.ep-app a:hover { text-decoration: underline; }
.ep-app h1 { font-size: 1.35rem; margin: .2rem 0 .8rem; }
.ep-app h2 { font-size: 1rem; margin: 0 0 .6rem; }

/* extraping's own view tabs (site-chrome mode) */
.ep-nav { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: 1rem; }
.ep-nav > a { padding: .4rem .95rem; border: 1px solid var(--ep-line); border-radius: 999px;
  background: var(--ep-card); color: var(--ep-ink); font-weight: 500; }
.ep-nav > a:hover { border-color: var(--ep-accent); text-decoration: none; }
.ep-nav > a.on { background: var(--ep-accent); border-color: var(--ep-accent); color: #fff; }
.ep-nav-user { margin-left: auto; display: flex; gap: .6rem; align-items: center; }
.ep-adminlink { font-size: .85rem; color: var(--ep-muted) !important; }

.card { background: var(--ep-card); border: 1px solid var(--ep-line); border-radius: var(--ep-radius); padding: 1rem; margin-bottom: 1rem; }
.card.narrow { max-width: 340px; }
.muted { color: var(--ep-muted); } .small { font-size: .8rem; }
.scroll { overflow-x: auto; }
.flash { max-width: 1200px; margin: .8rem auto; padding: .6rem 1rem; background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 6px; color: #065f46; }
.flash.err { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.flash.token pre { background: #101827; color: #d1fae5; padding: .6rem; border-radius: 6px; overflow-x: auto; }

.ep-app table { border-collapse: collapse; width: 100%; }
.ep-app th, .ep-app td { text-align: left; padding: .4rem .55rem; border-bottom: 1px solid var(--ep-line); vertical-align: middle; }
.ep-app thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--ep-muted); }
.ep-app tr.disabled td { opacity: .45; }
.ep-app table.kv th { width: 220px; color: var(--ep-muted); font-weight: 500; }

form.row, .grid { display: flex; flex-wrap: wrap; gap: .8rem; align-items: end; }
.ep-app label { display: flex; flex-direction: column; gap: .2rem; font-size: .82rem; color: var(--ep-muted); }
.ep-app label.chk { flex-direction: row; align-items: center; }
.ep-app input, .ep-app select { padding: .35rem .5rem; border: 1px solid var(--ep-line); border-radius: 5px;
  font: inherit; color: var(--ep-ink); background: var(--ep-card); }
.ep-app button { padding: .4rem .8rem; border: 0; border-radius: 5px; background: var(--ep-accent); color: #fff; font: inherit; cursor: pointer; }
.ep-app button:hover { background: var(--ep-accent-hover); }
.ep-app button.danger { background: #dc2626; }
form.inline { display: inline-flex; gap: .3rem; align-items: center; }
.actions { white-space: nowrap; }
.badge { font-size: .72rem; padding: .1rem .4rem; border-radius: 4px; color: #fff; }
.badge.warn { background: #f59e0b; } .badge.err { background: #dc2626; }
.ep-app td.bad { color: #dc2626; font-weight: 600; } .ep-app td.ok { color: var(--l0); }
ul.chips { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; }
ul.chips li { background: var(--ep-bg); border: 1px solid var(--ep-line); border-radius: 999px; padding: .15rem .3rem .15rem .7rem; display: inline-flex; gap: .3rem; align-items: center; }

/* ---- graph page ------------------------------------------------------------ */
.rangebar { display: flex; gap: .4rem; align-items: center; margin-bottom: .7rem; flex-wrap: wrap; }
.rbtn { padding: .25rem .7rem; border: 1px solid var(--ep-line); border-radius: 5px; background: var(--ep-card); color: var(--ep-ink) !important; }
.rbtn:hover { text-decoration: none !important; border-color: var(--ep-accent); }
.rbtn.on { background: var(--ep-accent); color: #fff !important; border-color: var(--ep-accent); }
.clamp { margin-left: auto; flex-direction: row !important; align-items: center; gap: .3rem; }
.graphsub { margin: .1rem 0; color: var(--ep-muted); }
#ep-graph { background: var(--ep-card); border: 1px solid var(--ep-line); border-radius: var(--ep-radius); padding: .6rem; }
.ep-legend { display: flex; gap: .55rem; align-items: center; margin-top: .5rem; color: var(--ep-muted); font-size: .82rem; flex-wrap: wrap; }
.ep-legend i { display: inline-block; width: 14px; height: 14px; border-radius: 3px; }
.ep-legend .l0 { background: var(--l0); } .ep-legend .l1 { background: var(--l1); }
.ep-legend .l2 { background: var(--l2); } .ep-legend .l3 { background: var(--l3); }
.ep-legend .l4 { background: var(--l4); } .ep-legend .l5 { background: var(--l5); }
.tiernote { margin-left: auto; }

/* uPlot text inside the app must follow the theme (canvas colors via app.js) */
.ep-app .u-title, .ep-app .u-legend, .ep-app .u-legend .u-label, .ep-app .u-legend .u-value { color: var(--ep-ink); }

/* ---- dashboard card grid ---------------------------------------------------- */
.locsec { margin-bottom: 1.4rem; }
.lochead { display: flex; align-items: baseline; gap: .6rem; margin: 0 0 .6rem;
  padding-bottom: .3rem; border-bottom: 2px solid var(--ep-line); font-size: 1.05rem; }
.cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .8rem; }
.gcard { background: var(--ep-card); border: 1px solid var(--ep-line); border-radius: var(--ep-radius);
  padding: .6rem .7rem .5rem; min-width: 0; box-shadow: var(--shadow-sm, none); }
.gcard.stale { opacity: .55; }
.gcard-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.gcard-head a { font-weight: 600; color: var(--ep-ink) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gcard-head a:hover { color: var(--ep-accent) !important; text-decoration: none; }
.gcard-sub { min-height: 1.1em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spark { margin-top: .3rem; height: 88px; overflow: hidden; }
.spark .u-wrap { pointer-events: none; }
.gcard-stats { display: flex; flex-wrap: wrap; gap: .25rem .8rem; margin-top: .35rem;
  padding-top: .35rem; border-top: 1px solid var(--ep-line); font-size: .76rem; }
.gcard-stats .stat b { font-weight: 600; color: var(--ep-muted); }
.gcard-stats .stat:last-child { margin-left: auto; }
.pill { font-size: .75rem; font-weight: 700; color: #fff; padding: .15rem .5rem;
  border-radius: 999px; white-space: nowrap; }
.pill.l0 { background: var(--l0); } .pill.l1 { background: var(--l1); }
.pill.l2 { background: var(--l2); } .pill.l3 { background: var(--l3); }
.pill.l4 { background: var(--l4); } .pill.l5 { background: var(--l5); }
.pill.nodata { background: #9aa4b2; }
.lc { display: inline-block; width: 11px; height: 11px; border-radius: 3px; vertical-align: -1px; }
.lc.l0 { background: var(--l0); } .lc.l1 { background: var(--l1); }
.lc.l2 { background: var(--l2); } .lc.l3 { background: var(--l3); }
.lc.l4 { background: var(--l4); } .lc.l5 { background: var(--l5); }