/* Dhan Trading Platform V2 — VFP-style dark trading-terminal theme */
:root {
  color-scheme: dark;
  --bg: #0a0d14;
  --bg-elevated: #0e1118;
  --card: #12151d;
  --card-alt: #161a24;
  --border: #232838;
  --border-soft: #1b1f2c;
  --text: #e7e9ee;
  --text-dim: #aab0c0;
  --text-muted: #6b7280;
  --teal: #2dd4bf;
  --teal-dim: #14b8a680;
  --red: #f87171;
  --red-dim: #ef444480;
  --blue: #3b82f6;
  --blue-dim: #3b82f633;
  --amber: #f59e0b;
  --amber-dim: #f59e0b26;
  --grey: #6b7280;
  --grey-dim: #6b728026;
  --radius: 8px;
  --radius-sm: 6px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
}
.screen { min-height: 100vh; }
.muted { color: var(--text-muted); }
.dim { color: var(--text-dim); }

/* Login */
.login-card {
  max-width: 360px; margin: 14vh auto; background: var(--card);
  border: 1px solid var(--border); padding: 32px; border-radius: var(--radius);
  display: flex; flex-direction: column; gap: 12px;
}
.login-card h1 { font-size: 20px; margin: 0; color: var(--text); }
label { display: flex; flex-direction: column; font-size: 12px; gap: 4px; color: var(--text-dim); }
input, select {
  padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 13px; background: var(--bg-elevated); color: var(--text);
}
input:focus, select:focus { outline: none; border-color: var(--blue); }
button { cursor: pointer; font-family: inherit; }
.error { color: var(--red); font-size: 12px; min-height: 16px; }

/* Header / nav */
#global-header {
  display: flex; align-items: center; gap: 8px; padding: 10px 16px;
  background: var(--bg-elevated); border-bottom: 1px solid var(--border);
}
.brand { font-weight: 700; font-size: 15px; color: var(--text); margin-right: 12px; }
.spacer { flex: 1; }
#tabs { display: flex; gap: 2px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 2px; }
#tabs .tab {
  background: none; border: none; padding: 7px 14px; font-size: 12.5px; font-weight: 500;
  border-radius: var(--radius-sm); color: var(--text-dim);
}
#tabs .tab.active { background: var(--blue); color: #fff; }
#tabs .tab.disabled { color: var(--text-muted); cursor: not-allowed; opacity: 0.55; }
.tab-hint { font-size: 11px; margin-left: 10px; }
.link-btn { background: none; border: none; color: var(--text-dim); font-size: 12px; padding: 6px 10px; border-radius: var(--radius-sm); }
.link-btn:hover { background: var(--card-alt); color: var(--text); }
.badges { display: flex; gap: 6px; font-size: 11px; }
.badge { padding: 3px 9px; border-radius: 999px; background: var(--card-alt); border: 1px solid var(--border); color: var(--text-dim); }
.badge.ok { color: var(--teal); border-color: var(--teal-dim); }
.badge.warn { color: var(--amber); border-color: var(--amber-dim); }
.badge.down { color: var(--red); border-color: var(--red-dim); }

/* 2026-09-22: widened from 1500px — on a wide display, the fixed cap
   plus margin:0 auto centering left large empty gutters on both sides
   (most noticeable on the left, in front of the Live tab's sidebar). */
main { padding: 16px; max-width: 1900px; margin: 0 auto; }

/* Cards */
.card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 12px;
}
.card h2 { margin: 0 0 4px; font-size: 14px; color: var(--text); font-weight: 600; }
.card .subtitle { font-size: 11.5px; color: var(--text-muted); margin: 0 0 10px; }

/* Live page layout */
.live-layout { display: grid; grid-template-columns: 260px 1fr; gap: 14px; align-items: start; }
@media (max-width: 880px) { .live-layout { grid-template-columns: 1fr; } }

.summary-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 12px; }
.summary-card .label { font-size: 10.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.summary-card .value { font-size: 22px; font-weight: 700; margin-top: 2px; }
.summary-row { display: flex; gap: 18px; margin-top: 8px; font-size: 12px; }
.summary-row .item .label { font-size: 10px; }
.summary-row .item .value { font-size: 14px; font-weight: 600; margin-top: 1px; }

.strategy-list-item {
  display: block; width: 100%; text-align: left; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 12px; margin-bottom: 8px; color: var(--text); cursor: pointer;
}
.strategy-list-item:hover { border-color: var(--blue); }
.strategy-list-item .row1 { display: flex; justify-content: space-between; align-items: baseline; }
.strategy-list-item .name { font-weight: 700; font-size: 13px; }
.strategy-list-item .ltp { font-size: 12.5px; }
.strategy-list-item .row2 { display: flex; justify-content: space-between; margin-top: 4px; font-size: 11px; color: var(--text-muted); }

.pos { color: var(--teal); }
.neg { color: var(--red); }
.zero { color: var(--text-dim); }

/* Strategy card (main live area) */
.strategy-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px; }
.strategy-card-header { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.strategy-card-header .sym { font-size: 18px; font-weight: 700; }
.strategy-card-header .ltp { font-size: 16px; font-weight: 600; }
.strategy-card-header .status-pill { margin-left: auto; }
.strategy-card-body { display: grid; grid-template-columns: 1fr 240px; gap: 16px; margin-top: 12px; }
@media (max-width: 900px) { .strategy-card-body { grid-template-columns: 1fr; } }

.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-top: 10px; }
.metric-grid .metric { background: var(--card-alt); border-radius: var(--radius-sm); padding: 8px 10px; }
.metric-grid .metric .label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.02em; }
.metric-grid .metric .value { font-size: 15px; font-weight: 700; margin-top: 2px; }

.ob-actions { white-space: nowrap; }
.ob-actions button:disabled { opacity: 0.35; cursor: not-allowed; }
.ob-diff-row { background: var(--card-alt); border-radius: var(--radius-sm); padding: 8px 10px; font-size: 13px; }
.ob-diff-arrow { text-align: center; color: var(--text-muted); font-size: 16px; padding: 2px 0; }

.top-summary-bar { border: 1px solid var(--accent, #3d8bfd); border-radius: var(--radius-sm); padding: 10px; background: linear-gradient(180deg, rgba(61,139,253,0.08), transparent); }
.top-summary-bar .metric { background: var(--card); }
.top-summary-bar .metric .value { font-size: 17px; }

.side-panel { background: var(--card-alt); border-radius: var(--radius-sm); padding: 10px 12px; }
.side-panel h3 { margin: 0 0 8px; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.side-panel .side-row { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid var(--border-soft); font-size: 12px; }
.side-panel .side-row:last-child { border-bottom: none; }
.side-panel .side-row .label { color: var(--text-muted); }
.side-panel .side-row .value { font-weight: 600; }

/* Tables */
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th, td { text-align: left; padding: 7px 9px; border-bottom: 1px solid var(--border-soft); white-space: nowrap; }
th { color: var(--text-muted); font-weight: 500; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.02em; }
td { color: var(--text); }
tbody tr:hover { background: var(--card-alt); }
.table-wrap { overflow-x: auto; }

/* Status pills / badges */
.pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; }
.pill.WAITING, .pill.DRAFT, .pill.NONE { background: var(--grey-dim); color: var(--text-dim); }
.pill.Grid_Bot, .pill.GRID_BOT { background: var(--teal-dim); color: var(--teal); }
.pill.Manual_External, .pill.MANUAL_EXTERNAL, .pill.Mixed, .pill.MIXED { background: var(--amber-dim); color: var(--amber); }
.pill.Other_Strategy, .pill.OTHER_PLATFORM_STRATEGY { background: var(--blue-dim); color: var(--blue); }
.pill.BUY_OPEN, .pill.SELL_OPEN, .pill.OPEN, .pill.PARTIAL, .pill.PARTIAL_BUY, .pill.PARTIAL_SELL, .pill.ARMED { background: var(--amber-dim); color: var(--amber); }
.pill.CONSUMED { background: var(--teal-dim); color: var(--teal); }
.pill.BOUGHT, .pill.COMPLETE, .pill.READY, .pill.HEALTHY, .pill.RUNNING, .pill.ACTIVE, .pill.ENABLED, .pill.CLOSED { background: var(--teal-dim); color: var(--teal); }
.pill.CYCLE_COMPLETE { background: var(--teal-dim); color: var(--teal); }
.pill.CANCELLED, .pill.CANCELLING, .pill.MARKET_CLOSED, .pill.NOT_ARMED { background: var(--grey-dim); color: var(--text-muted); }
.pill.REJECTED, .pill.BLOCKED, .pill.DISABLED, .pill.ERROR_RECONCILIATION_REQUIRED, .pill.UNKNOWN { background: var(--red-dim); color: var(--red); }
.pill.PAPER { background: var(--blue-dim); color: var(--blue); }
.pill.REAL, .pill.TEST { background: var(--red-dim); color: var(--red); font-weight: 800; }
.pill.SMALL { background: var(--amber-dim); color: var(--amber); font-weight: 800; }
.pill.NORMAL { background: var(--teal-dim); color: var(--teal); font-weight: 800; }
/* NASDAQ tab — same ok/warn/down semantics as .badge, applied to .pill for inline status text */
.pill.ok, .pill.CONNECTED, .pill.SUFFICIENT, .pill.VERIFIED { background: var(--teal-dim); color: var(--teal); }
.pill.warn, .pill.NOT_VERIFIED, .pill.REQUIRED { background: var(--amber-dim); color: var(--amber); }
.pill.down, .pill.DISCONNECTED { background: var(--red-dim); color: var(--red); }
.pill.SERIALIZED { background: var(--blue-dim); color: var(--blue); }
.pill.PARALLEL { background: var(--amber-dim); color: var(--amber); }
.pill.ESTIMATED { background: var(--grey-dim); color: var(--text-muted); }
.pill.BROKER_CONFIRMED { background: var(--teal-dim); color: var(--teal); }
/* 2026-09-18 (order-location clarity, PRESENTATION_STATE_LABEL in
   dashboard.js) — deliberately distinct colors so "nothing sent to Dhan
   yet" (grey), "sent, resting/awaiting fill" (amber), and "broker/exchange
   confirmed" (teal) are unmistakable at a glance, never blurred together. */
.pill.WAITING_TRIGGER, .pill.SELL_WAITING_TRIGGER { background: var(--grey-dim); color: var(--text-dim); }
.pill.SUBMITTED, .pill.SELL_SUBMITTED, .pill.PARTIALLY_FILLED { background: var(--amber-dim); color: var(--amber); }
.pill.FILLED, .pill.COMPLETED, .pill.PRICE_IMPROVEMENT { background: var(--teal-dim); color: var(--teal); }
.pill.RECONCILIATION_REQUIRED, .pill.RECOVERY_REQUIRED, .pill.ADVERSE { background: var(--red-dim); color: var(--red); }
.pill.RECONCILIATION_DELAYED_RATE_LIMIT { background: var(--amber-dim, rgba(255,184,0,.15)); color: var(--amber, #ffb800); } /* temporary broker throttling, not a data problem */
.pill.BROKER_AUTH_UNAVAILABLE { background: var(--amber-dim, rgba(255,184,0,.15)); color: var(--amber, #ffb800); } /* broker login unavailable: entries blocked, positions retained, no orders */
.pill.NEUTRAL { background: var(--grey-dim); color: var(--text-muted); }
/* 2026-09-23 (Gap Protection + Stage-vs-Config validation) — GAP_SKIPPED
   is a paused, not-trading level (amber, matches other "waiting" states);
   MATCHED/LIMITED are both healthy authorization states (teal); MISMATCH/
   INVALID must read as unmistakably wrong (red), never confused with a
   routine "not required" grey state. */
.pill.GAP_SKIPPED { background: var(--amber-dim); color: var(--amber); }
.pill.MATCHED, .pill.LIMITED { background: var(--teal-dim); color: var(--teal); }
.pill.MISMATCH, .pill.INVALID { background: var(--red-dim); color: var(--red); font-weight: 800; }
.pill.NO_STAGE { background: var(--grey-dim); color: var(--text-muted); }
.pill.PRODUCTION_STAGE_MISSING { background: var(--red-dim); color: var(--red); font-weight: 800; }
.pill.ON { background: var(--teal-dim); color: var(--teal); }
.pill.NOT_CONFIGURED { background: var(--grey-dim); color: var(--text-muted); }
.pill.NOT_REQUIRED { background: var(--teal-dim); color: var(--teal); }

tr.level-disabled { opacity: 0.5; }
.warn-text { color: var(--amber); font-weight: 700; }
.metric input[type="number"] { width: 100%; margin-top: 4px; background: var(--bg); border: 1px solid var(--border); color: var(--text); border-radius: 4px; padding: 4px 6px; font-size: 13px; }
#cfg-rows input[type="number"] { width: 90px; background: var(--bg); border: 1px solid var(--border); color: var(--text); border-radius: 4px; padding: 3px 6px; font-size: 12px; }
#cfg-rows input[type="checkbox"] { width: 16px; height: 16px; }

.chip { display: inline-block; padding: 1px 6px; border-radius: 4px; font-size: 10px; font-weight: 700; margin-right: 4px; border: 1px solid var(--border); color: var(--text-dim); }
.chip.BUY { color: var(--teal); border-color: var(--teal-dim); }
.chip.SELL { color: var(--red); border-color: var(--red-dim); }

/* Actions */
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.actions button {
  padding: 6px 13px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--card-alt); color: var(--text); font-size: 12px; font-weight: 500;
}
.actions button:hover { border-color: var(--blue); }
.actions button.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.actions button.danger { background: transparent; border-color: var(--red-dim); color: var(--red); }
.actions button.danger:hover { background: var(--red-dim); }
.actions button:disabled { opacity: 0.4; cursor: not-allowed; }

/* Order book */
.filter-tabs { display: flex; gap: 6px; margin: 10px 0; }
.filter-tabs button {
  background: var(--card-alt); border: 1px solid var(--border); color: var(--text-dim);
  padding: 6px 12px; border-radius: var(--radius-sm); font-size: 12px;
}
.filter-tabs button.active { background: var(--blue-dim); border-color: var(--blue); color: var(--text); }
.search-input { width: 220px; }
.orderbook-header { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; }

/* Grid Bot / Add Scrip / Positions */
.filter-tabs input[type="text"], .filter-tabs select, #add-scrip-panel input[type="text"] {
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
  border-radius: var(--radius-sm); padding: 5px 8px; font-size: 12px;
}
.gridbot-actions { display: flex; gap: 6px; flex-wrap: wrap; white-space: nowrap; }
.gridbot-actions .link-btn { font-size: 11px; }
#as-symbol-search { width: 320px; }
.search-results { position: relative; max-height: 220px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-top: 4px; background: var(--card-alt); }
.search-result-row { padding: 6px 10px; cursor: pointer; font-size: 12px; border-bottom: 1px solid var(--border-soft); }
.search-result-row:last-child { border-bottom: none; }
.search-result-row:hover { background: var(--card); }
#add-scrip-panel .actions { margin: 10px 0; }
#as-manual-rows .metric-grid, #as-custom-qty-rows .metric { display: inline-block; }

/* P&L page */
.grand-total { font-size: 34px; font-weight: 800; }
.funds-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.funds-grid .metric { background: var(--card-alt); border-radius: var(--radius-sm); padding: 10px 12px; }
.funds-grid .metric .label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; }
.funds-grid .metric .value { font-size: 16px; font-weight: 700; margin-top: 3px; }

.month-group { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; }
.month-header { display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; }
.month-header .m-name { font-size: 15px; font-weight: 700; }
.month-header .m-count { color: var(--text-muted); font-size: 12px; }
.month-header .spacer { flex: 1; }
.month-header .m-total { font-size: 15px; font-weight: 700; }
.month-header .chevron { color: var(--text-muted); font-size: 11px; }
.month-body { border-top: 1px solid var(--border-soft); padding: 4px 16px 10px; }
.status-tag { font-size: 10px; padding: 2px 8px; border-radius: 4px; font-weight: 700; }
.status-tag.IN_PROGRESS { background: var(--blue-dim); color: var(--blue); }
.status-tag.FINAL { background: var(--grey-dim); color: var(--text-dim); }

/* Drawer (Analyse) */
.drawer { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; justify-content: flex-end; z-index: 50; }
.drawer[hidden] { display: none; } /* [hidden] alone loses to the plain .drawer{display:flex} rule at equal specificity — this makes it win explicitly, since the class rule loads after the UA stylesheet */
.drawer-panel { width: min(520px, 92vw); background: var(--bg-elevated); border-left: 1px solid var(--border); height: 100%; overflow-y: auto; padding: 18px; }
#add-scrip-drawer .drawer-panel, #nasdaq-add-scrip-drawer .drawer-panel { width: min(900px, 96vw); }
.drawer-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.drawer-header h2 { margin: 0; font-size: 16px; }

.placeholder-page { text-align: center; padding: 80px 20px; color: var(--text-muted); }
.placeholder-page h2 { color: var(--text-dim); font-size: 18px; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; }
::-webkit-scrollbar-track { background: transparent; }

/* ===== Trading Activity & Order Journal (Order & Activity Log) ===== */
.jr-root h3 { margin: 14px 0 6px; }
.jr-panel { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; margin: 10px 0; background: var(--card-alt); }
.jr-panel-h { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 6px; }
.jr-panel-line { margin: 3px 0; font-size: 12.5px; }
.jr-inv { display: flex; gap: 14px; flex-wrap: wrap; margin: 10px 0; }
.jr-invbox { flex: 1; min-width: 260px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px; background: var(--card); }
.jr-big { font-size: 18px; font-weight: 700; margin: 2px 0; }
.jr-toolbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 0; }
.jr-sep { width: 1px; height: 20px; background: var(--border); margin: 0 6px; }
.jr-chip { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--card-alt); color: var(--text-dim); font-size: 12px; cursor: pointer; }
.jr-chip.active { background: var(--teal-dim); color: var(--text); border-color: var(--teal); }
.jr-wrap { max-height: 70vh; overflow: auto; }
.jr-table { font-size: 12px; }
.jr-table thead th { position: sticky; top: 0; background: var(--bg-elevated); z-index: 1; white-space: nowrap; }
.jr-table td { vertical-align: top; }
.jr-nowrap { white-space: nowrap; }
.jr-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.jr-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.jr-expl { min-width: 240px; max-width: 420px; white-space: normal; color: var(--text-dim); }
.jr-err { color: var(--red); }
.jr-errmsg { color: var(--text-dim); font-size: 11px; max-width: 260px; white-space: normal; }
.jr-ev { display: inline-block; padding: 1px 7px; border-radius: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; background: var(--grey-dim); color: var(--text-dim); white-space: nowrap; }
.jr-c-trigger { background: var(--teal-dim); color: var(--teal); }
.jr-c-preflight { background: var(--amber-dim); color: var(--amber); }
.jr-c-broker { background: #3b82f633; color: #93c5fd; }
.jr-c-state { background: #22c55e2e; color: #86efac; }
.jr-c-inv { background: #a855f733; color: #d8b4fe; }
.jr-c-level, .jr-c-recon { background: #64748b40; color: #cbd5e1; }
.jr-c-auth, .jr-c-sys, .jr-c-warn { background: var(--grey-dim); color: var(--text-dim); }
.jr-sev-error { background: var(--red-dim); color: #fff; }
.jr-sev-warn { background: var(--amber-dim); color: var(--amber); }
.jr-sev-row-ERROR td:first-child { box-shadow: inset 3px 0 0 var(--red); }
.jr-sev-row-WARN td:first-child { box-shadow: inset 3px 0 0 var(--amber); }
.jr-bf { font-size: 9.5px; padding: 0 5px; border: 1px dashed var(--text-muted); color: var(--text-muted); border-radius: 4px; }
.jr-mk { font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 4px; }
.jr-mk-nse { background: #0ea5e933; color: #7dd3fc; } .jr-mk-gs { background: #f59e0b26; color: var(--amber); }
.jr-hidden-group { display: none; }
.jr-groupnote td { background: var(--card-alt); font-size: 11.5px; }
.jr-attempts { display: flex; flex-direction: column; gap: 8px; }
.jr-attempt { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 10px; background: var(--card-alt); }
.jr-attempt summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.jr-line { padding: 4px 0 4px 10px; border-top: 1px solid var(--border-soft); font-size: 12px; }
.jr-why { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 10px; }
.jr-whycard { border: 1px solid var(--border); border-left: 3px solid var(--amber); border-radius: var(--radius-sm); padding: 10px; background: var(--card-alt); }
.jr-why-h { font-size: 11.5px; color: var(--text-muted); margin-bottom: 6px; }
.jr-why-row { display: flex; gap: 10px; margin: 3px 0; font-size: 12.5px; }
.jr-why-row > span:first-child { width: 86px; color: var(--text-muted); flex-shrink: 0; }
.jr-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 10px 0; }
.jr-filters label { display: flex; flex-direction: column; font-size: 11px; color: var(--text-muted); gap: 2px; }
.jr-statuschips { display: flex; gap: 4px; flex-wrap: wrap; }
.jr-sumblock { margin: 10px 0; }
.jr-sum-h { margin-bottom: 4px; }
.jr-cards { display: flex; flex-wrap: wrap; gap: 8px; }
.jr-card { min-width: 96px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card-alt); }
.jr-card-n { font-size: 20px; font-weight: 700; }
.jr-card-warn { border-color: var(--red); }
.jr-hist { display: inline-flex; align-items: flex-end; gap: 1px; height: 20px; }
.jr-hist i { display: inline-block; width: 4px; background: var(--amber); border-radius: 1px; }
.jr-drawer { width: min(980px, 96vw) !important; }

.jr-errmsg { max-height: 3.2em; overflow: hidden; }
.jr-table td.jr-expl { min-width: 280px; }