/* Overview pages: dashboard (/), accounts (/ucty), account detail (/ucty/:id), account dialogs. Prefix: ov- */

/* ---------- shared ---------- */
.ov-ink { color: var(--fg); }
.ov-title-link { color: var(--fg); }
.ov-title-link:hover { color: var(--accent-text); }
.ov-h-icon { display: flex; align-items: center; gap: 8px; }
.ov-h-icon svg { display: block; }
.ov-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--fg-3)); flex: none; }
.ov-gap-4 { gap: 4px; }
.ov-gap-6 { gap: 6px; }
.ov-strike { text-decoration: line-through; }
.ov-pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.ov-refreshing { opacity: 0.6; transition: opacity 0.15s; pointer-events: none; }
.ov-dash { display: flex; flex-direction: column; gap: 16px; }
.empty .ov-cta svg { color: inherit; opacity: 1; }
.ov-li-right { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; font-variant-numeric: tabular-nums; }

/* Tables become lists based on the card's own width (sidebar or not). */
.ov-cq { container: ov / inline-size; }
.ov-cq-wide { container: ovw / inline-size; }
.ov-only-mob { display: none; }
@container ov (max-width: 660px) {
  .ov-only-desk { display: none; }
  .ov-only-mob { display: flex; }
}
@container ovw (max-width: 900px) {
  .ov-only-desk { display: none; }
  .ov-only-mob { display: flex; }
}
@container ovw (max-width: 1100px) {
  .ov-col-md { display: none; }
}

/* KPI tiles: 3 per row on desktop, 2 on phones (app.css). Proportional figures on big standalone values. */
.ov-kpis .kpi-value { font-variant-numeric: normal; }
.ov-kpis .kpi-sub { overflow-wrap: anywhere; }
.ov-kpis .kpi-sub .badge { height: 20px; vertical-align: middle; }
@media (min-width: 601px) {
  .ov-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- dashboard: attention ---------- */
.ov-attn { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 1100px) {
  .ov-attn.two { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
}
.ov-settle { align-items: center; }
.ov-settle .main-col { display: flex; flex-direction: column; gap: 2px; }
.ov-settle-actions { display: flex; gap: 6px; flex: none; }
.ov-res { min-width: 84px; }
.ov-res-win { color: var(--pos); border-color: color-mix(in srgb, var(--pos) 45%, var(--border)); }
.ov-res-win:hover { background: var(--pos-soft); }
.ov-res-loss { color: var(--neg); border-color: color-mix(in srgb, var(--neg) 45%, var(--border)); }
.ov-res-loss:hover { background: var(--neg-soft); }
@media (max-width: 760px) {
  .ov-settle { flex-wrap: wrap; }
  .ov-settle .main-col { flex-basis: 100%; }
  .ov-settle-actions { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ov-res { min-width: 0; }
}
.ov-stale .main-col { display: flex; flex-direction: column; gap: 2px; }

/* ---------- dashboard: layout ---------- */
.ov-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 1100px) {
  .ov-grid { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: start; }
}

/* ---------- dashboard: chart ---------- */
.ov-chart-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ov-chart-sum { font-size: 13px; }
.ov-chart-body { padding-top: 12px; }
.ov-chart-empty { padding: 48px 16px; }
.ov-chart { position: relative; min-height: 276px; }
@media (min-width: 640px) { .ov-chart { min-height: 326px; } }
.ov-svg { display: block; touch-action: pan-y; cursor: crosshair; -webkit-tap-highlight-color: transparent; }
.ov-svg:focus { outline: none; }
.ov-svg:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 4px; }
.ov-gridline { stroke: var(--border); stroke-width: 1; shape-rendering: crispEdges; }
.ov-zero { stroke: var(--border-strong); stroke-width: 1; shape-rendering: crispEdges; }
.ov-axis { fill: var(--fg-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.ov-panel-label { fill: var(--fg-3); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.ov-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ov-line-pos { stroke: var(--pos); }
.ov-line-neg { stroke: var(--neg); }
.ov-area-pos { fill: var(--pos); opacity: 0.1; }
.ov-area-neg { fill: var(--neg); opacity: 0.1; }
.ov-bar { opacity: 0.8; transition: opacity 0.1s; }
.ov-bar-pos { fill: var(--pos); }
.ov-bar-neg { fill: var(--neg); }
.ov-svg.is-hovering .ov-bar { opacity: 0.35; }
.ov-svg.is-hovering .ov-bar.is-active { opacity: 1; }
.ov-dot-mark { stroke: var(--surface); stroke-width: 2; }
.ov-fill-pos { fill: var(--pos); }
.ov-fill-neg { fill: var(--neg); }
.ov-end-label {
  fill: var(--fg); font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums;
  paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round;
}
.ov-cross { stroke: var(--fg-3); stroke-width: 1; shape-rendering: crispEdges; pointer-events: none; }

.ov-tip {
  position: absolute; top: 0; left: 0; z-index: 2; pointer-events: none;
  display: flex; flex-direction: column; gap: 3px;
  min-width: 150px; padding: 8px 10px;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius);
  box-shadow: var(--shadow); font-size: 12px;
}
.ov-tip[hidden] { display: none; }
.ov-tip-date { color: var(--fg-3); font-weight: 600; }
.ov-tip-row { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.ov-tip-row strong { color: var(--fg); font-size: 13px; }
.ov-tip-meta { color: var(--fg-3); white-space: nowrap; }
.ov-key { display: inline-block; width: 12px; height: 2px; border-radius: 1px; flex: none; }
.ov-key-pos { background: var(--pos); }
.ov-key-neg { background: var(--neg); }
.ov-key-zero { background: var(--fg-3); }

.ov-details { margin-top: 8px; border-top: 1px solid var(--border); }
.ov-details > summary {
  display: flex; align-items: center; gap: 6px; min-height: 40px;
  color: var(--fg-2); font-size: 13px; font-weight: 600; cursor: pointer; list-style: none;
}
.ov-details > summary::-webkit-details-marker { display: none; }
.ov-details > summary::before {
  content: ""; width: 6px; height: 6px; margin: 0 4px 0 2px;
  border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor;
  transform: rotate(-45deg); transition: transform 0.12s;
}
.ov-details[open] > summary::before { transform: rotate(45deg); }
.ov-details > summary:hover { color: var(--fg); }
.ov-details .table-wrap { max-height: 320px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius); }

/* ---------- dashboard: upcoming ---------- */
.ov-upcoming { align-items: flex-start; }
.ov-when { flex: none; text-align: right; font-variant-numeric: tabular-nums; }
.ov-target { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.ov-target .progress { flex: 1; max-width: 160px; }

/* ---------- dashboard: platforms ---------- */
.ov-share { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; min-width: 48px; }
.ov-share > span { display: block; height: 100%; border-radius: inherit; background: var(--c, var(--fg-3)); }
.ov-share-cell { display: flex; align-items: center; gap: 8px; min-width: 120px; }
.ov-share-cell .ov-share { flex: 1; }
.ov-plat-meta { display: flex; flex-wrap: wrap; gap: 2px 14px; }

/* ---------- accounts ---------- */
.ov-summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px;
  padding: 16px 18px; margin-bottom: 16px;
}
.ov-sum-main { min-width: 0; }
.ov-sum-value { font-size: 32px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin-top: 2px; white-space: nowrap; }
.ov-chips { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 320px; justify-content: flex-end; min-width: 0; }
.ov-chip {
  display: flex; flex-direction: column; gap: 1px; min-width: 0;
  flex: 0 1 170px; padding: 8px 12px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2);
  font-variant-numeric: tabular-nums;
}
.ov-chip-name { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--fg-2); min-width: 0; }
@media (max-width: 600px) {
  .ov-summary { padding: 14px; gap: 12px; }
  .ov-sum-value { font-size: 28px; }
  .ov-chips { justify-content: stretch; flex-basis: 100%; }
  .ov-chip { flex: 1 1 96px; padding: 8px 10px; }
}

.ov-toolbar .seg { flex: none; }
@media (max-width: 600px) {
  .ov-toolbar .seg { flex: 1 1 100%; }
  .ov-toolbar .seg button { flex: 1; }
}

.ov-subtotal { display: flex; align-items: baseline; gap: 16px; font-size: 13px; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .ov-hide-sm { display: none; } }

/* Fixed layout so columns line up across the per-platform cards. */
.ov-acc-table { table-layout: fixed; }
.ov-acc-table .ov-w-status { width: 108px; }
.ov-acc-table .ov-w-bal { width: 156px; }
.ov-acc-table .ov-w-num { width: 108px; }
.ov-acc-table .ov-w-roi { width: 80px; }
.ov-acc-table .ov-w-bets { width: 76px; }
.ov-acc-table .ov-w-act { width: 176px; }
.ov-acc-table td { vertical-align: top; }
.ov-acc-table td.ov-actions-cell { vertical-align: middle; }
.ov-acc-cell { min-width: 0; }
.ov-acc-cell .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-acc-cell a { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: top; }
.ov-checked { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 4px 6px; margin-top: 2px; }
.ov-acc-item .ov-checked { justify-content: flex-start; }
.ov-actions-cell { width: 1%; white-space: nowrap; text-align: right; }
.ov-actions-cell .row-nowrap { justify-content: flex-end; gap: 4px; }
.ov-btn-compact { padding: 8px 10px; gap: 5px; }
.ov-acc-item { align-items: center; }
.ov-acc-item .main-col { display: flex; flex-direction: column; gap: 2px; }

/* ---------- account detail ---------- */
.ov-detail-title { min-width: 0; }
.ov-detail-title h1 { overflow-wrap: anywhere; }
.ov-detail-title .row { row-gap: 4px; }
.ov-note { align-items: flex-start; }
@media (max-width: 600px) {
  .page-head .ov-detail-actions { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-head .ov-detail-actions .ov-act-main { grid-column: 1 / -1; }
  .page-head .ov-detail-actions .btn { padding-left: 8px; padding-right: 8px; }
}
.ov-match-cell { min-width: 180px; max-width: 360px; }
.ov-match-cell .small { overflow-wrap: anywhere; }
.ov-note-cell { max-width: 300px; }
.ov-ledger-note { overflow-wrap: anywhere; }
.ov-del { color: var(--fg-3); }
.table .ov-del { margin-top: -8px; margin-bottom: -8px; }
.ov-del:hover { color: var(--neg); background: var(--neg-soft); }
.ov-ledger-item { align-items: center; }
.ov-ledger-item .main-col { display: flex; flex-direction: column; gap: 1px; }

/* ---------- dialogs ---------- */
.ov-dlg-account { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; min-width: 0; }
.ov-dlg-live {
  padding: 10px 12px; border-radius: var(--radius);
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: 13px; line-height: 1.6;
}

/* ---------- auto-bet section ---------- */
.card-accent {
  border-color: var(--accent);
  background: var(--surface-2);
}

.card-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.field-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-2);
}

.field-input {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-primary);
  color: var(--fg);
  font-size: 14px;
}

.field-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-alpha-15);
}

.card-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.callout.info {
  padding: 10px 12px;
  background: var(--surface-3);
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.5;
}

.callout.info svg {
  flex-shrink: 0;
  margin-right: 8px;
}