/* Cryo/Aureas hub + slot dashboard. Layout locked to brand/mockups (shot 3). */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  min-height: 100%;
}

body.ca-ops {
  background: var(--ca-color-ink-900);
  color: #e8eef5;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 13px;
  line-height: 1.45;
}

a { color: var(--ca-ops-blue); text-decoration: none; }
a:hover { color: var(--ca-color-blue-400); text-decoration: underline; }

.pos { color: var(--ca-color-status-positive); }
.neg { color: var(--ca-color-status-negative); }
.muted { color: var(--ca-ops-muted); }
.warn { color: var(--ca-ops-gold); }

/* ── Shell ── */
.hub-shell { padding: 0 20px 28px; }

.hub-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px 12px;
  background: var(--ca-ops-page);
  border-bottom: 2px solid var(--ca-ops-gold);
  overflow: hidden;
}
.hub-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hub-brand img {
  width: 28px;
  height: 28px;
  display: block;
}
.hub-brand h1 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #e8eef5;
}
.hub-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.hub-clock {
  font-size: 12px;
  color: var(--ca-ops-muted);
}

/* ── Badges ── */
.badge {
  display: inline-block;
  font-family: var(--ca-font-data);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 3px;
  border: 1px solid var(--ca-ops-border);
  color: var(--ca-ops-muted);
  background: transparent;
  white-space: nowrap;
}
.badge-running {
  border-color: var(--ca-color-status-positive);
  color: var(--ca-color-status-positive);
  background: rgba(46, 204, 113, 0.12);
}
.badge-paused {
  border-color: var(--ca-ops-gold);
  color: var(--ca-color-ink-900);
  background: var(--ca-ops-gold);
}
.badge-stopped {
  border-color: var(--ca-color-status-negative);
  color: var(--ca-color-status-negative);
  background: rgba(231, 76, 60, 0.12);
}
.badge-offline {
  border-color: var(--ca-ops-border);
  color: var(--ca-ops-muted);
}
.badge-warn {
  border-color: var(--ca-ops-gold);
  color: var(--ca-ops-gold);
  background: rgba(200, 168, 75, 0.12);
}
.badge-prod {
  border-color: var(--ca-color-status-negative);
  color: var(--ca-color-status-negative);
  background: rgba(231, 76, 60, 0.12);
}
.badge-test {
  border-color: var(--ca-ops-blue);
  color: var(--ca-color-blue-400);
  background: rgba(30, 111, 191, 0.15);
}

/* ── Summary / recorder metric rows ── */
.metric-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  align-items: flex-end;
  padding: 12px 16px;
  margin: 16px 0 0;
}
.recorder {
  padding: 12px 16px;
  margin-top: 12px;
}
.recorder .metric-strip {
  margin: 0;
  padding: 0;
}
.metric-strip .item .k {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ca-ops-muted);
  margin-bottom: 2px;
}
.metric-strip .item .v {
  font-size: 15px;
  font-weight: 600;
}
.exch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
.exch .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}
.exch .dot.up { background: var(--ca-color-status-positive); }
.exch .dot.down { background: var(--ca-color-status-negative); }
.exch .lab { color: var(--ca-ops-muted); font-size: 11px; }

.recorder-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.recorder-head .title {
  font-size: 16px;
  font-weight: 600;
}

/* ── Slot grid ── */
.slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.ca-ops-slot-card {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ca-ops-slot-card.is-offline { opacity: 0.62; }

/* Shot 4 card rows — fills match the painted mock (header shares the lighter band). */
.ca-ops-slot-card.is-table {
  padding: 0;
  gap: 0;
  overflow: hidden;
}
.card-row {
  padding: 10px 14px;
  border-bottom: 1px solid var(--ca-ops-border);
}
.card-row:last-child { border-bottom: none; }
.ca-ops-slot-card.is-table > .card-row:nth-child(odd) {
  background: color-mix(in srgb, var(--ca-ops-panel) 48%, var(--ca-ops-page));
}
.ca-ops-slot-card.is-table > .card-row:nth-child(even) {
  background: color-mix(in srgb, var(--ca-ops-panel) 20%, var(--ca-ops-page));
}
.ca-ops-slot-card.is-table > .card-row.card-row-head {
  background: color-mix(in srgb, var(--ca-ops-panel) 48%, var(--ca-ops-page));
  border-bottom: 2px solid var(--ca-ops-gold);
}
.card-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  background: color-mix(in srgb, var(--ca-ops-panel) 48%, var(--ca-ops-page));
  border-bottom: 2px solid var(--ca-ops-gold);
}
.card-row-head .head-left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  min-width: 0;
}
.card-row-head .head-right {
  font-size: 12px;
  color: var(--ca-ops-muted);
  text-align: right;
  white-space: nowrap;
}
.card-row-head .sep { color: var(--ca-ops-border); margin: 0 4px; }
.card-row-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px 10px;
}
.card-row-metrics .k {
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ca-ops-muted);
}
.card-row-metrics .v { font-size: 13px; font-weight: 600; }
.card-row-meta-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}
.card-row-meta-line .cycle { margin-left: auto; }
.card-row-meta .opening-headline { margin-top: 6px; }
.card-row-books .section-label { margin-top: 8px; }
.card-row-books .section-label:first-child { margin-top: 0; }
.card-row-books,
.card-row-hist { min-width: 0; }
.card-row-books .ca-ops-dense-table th,
.card-row-books .ca-ops-dense-table td,
.card-row-hist .ca-ops-dense-table th,
.card-row-hist .ca-ops-dense-table td {
  border-bottom-color: var(--ca-ops-border);
}
.card-row-books .ca-ops-dense-table tr:last-child td,
.card-row-hist .ca-ops-dense-table tr:last-child td {
  border-bottom: none;
}
.card-row-snap { font-size: 11px; color: var(--ca-ops-muted); }
.card-row-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.card-row-controls .slot-controls {
  padding-top: 0;
  border-top: none;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.card-header-left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}
.slot-id {
  font-size: 12px;
  color: var(--ca-ops-blue);
  font-weight: 600;
}
.slot-name { font-size: 16px; font-weight: 600; }
.slot-sub {
  font-size: 12px;
  color: var(--ca-ops-muted);
}
.slot-sub .sep { color: var(--ca-ops-border); margin: 0 4px; }
.snap-line { font-size: 11px; color: var(--ca-ops-muted); }

.metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
}
.metrics .k {
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ca-ops-muted);
}
.metrics .v { font-size: 13px; font-weight: 600; }

.pill-row { display: flex; flex-wrap: wrap; gap: 4px; }
.ca-ops-meta-pill {
  font-family: var(--ca-font-data);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
}
.pill-ok {
  border-color: var(--ca-color-status-positive);
  color: var(--ca-color-status-positive);
  background: rgba(46, 204, 113, 0.10);
}
.pill-err {
  border-color: var(--ca-color-status-negative);
  color: var(--ca-color-status-negative);
  background: rgba(231, 76, 60, 0.10);
}
.pill-info {
  border-color: var(--ca-ops-blue);
  color: var(--ca-color-blue-400);
  background: rgba(30, 111, 191, 0.12);
}
.pill-warn {
  border-color: var(--ca-ops-gold);
  color: var(--ca-ops-gold);
  background: rgba(200, 168, 75, 0.10);
}
.pill-muted { color: var(--ca-ops-muted); }

.cycle { font-size: 12px; }
.cycle-ok { color: var(--ca-color-status-positive); }
.cycle-info { color: var(--ca-color-blue-400); }
.cycle-warn { color: var(--ca-ops-gold); }

.opening-headline {
  font-size: 12px;
  color: var(--ca-color-blue-400);
  margin-bottom: 4px;
}
.opening-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  font-size: 11px;
}
.open-step {
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid var(--ca-ops-border);
  color: var(--ca-ops-muted);
}
.open-step-done {
  border-color: var(--ca-color-status-positive);
  color: var(--ca-color-status-positive);
  background: rgba(46, 204, 113, 0.10);
}
.open-step-live {
  border-color: var(--ca-ops-blue);
  color: var(--ca-color-blue-400);
  background: rgba(30, 111, 191, 0.15);
  font-weight: 600;
}
.open-step-pending { color: var(--ca-ops-muted); opacity: 0.7; }
.open-step-arrow { color: var(--ca-ops-border); font-size: 10px; }

.section-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ca-ops-muted);
  margin-bottom: 4px;
}
.more-line { font-size: 11px; padding: 2px 0; }

.ca-ops-dense-table { font-size: 11px; }
.ca-ops-dense-table th {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ca-ops-muted);
  padding: 4px 6px;
}
.ca-ops-dense-table td { padding: 4px 6px; }
.ca-ops-dense-table .sym { color: var(--ca-color-blue-400); }
.ca-ops-dense-table tr.other td { color: var(--ca-ops-muted); font-style: italic; }
.ca-ops-dense-table tr.other .sym { color: var(--ca-ops-blue); opacity: 0.7; }
.ca-ops-dense-table td.legs { white-space: nowrap; }
.ca-ops-dense-table .leg-line {
  display: flex;
  gap: 8px;
  align-items: baseline;
  line-height: 1.35;
}
.ca-ops-dense-table .leg-line + .leg-line { margin-top: 2px; }
.ca-ops-dense-table .leg-line .sym { min-width: 11.5em; }

.card-row-hist .pnl-summary {
  margin-top: 8px;
}
.pnl-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding-top: 8px;
  border-top: 1px solid var(--ca-ops-border);
}
.pnl-summary .k {
  display: block;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ca-ops-muted);
}
.pnl-summary .v { font-size: 12px; font-weight: 600; }
.pnl-summary .since { font-weight: 500; color: var(--ca-ops-muted); font-size: 11px; }

.slot-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--ca-ops-border);
}

@media (max-width: 480px) {
  .hub-shell { padding: 0 10px 20px; }
  .slot-page { padding: 10px 10px 24px; }
  .slot-grid { grid-template-columns: minmax(0, 1fr); }
  .card-row, .card-row-head { padding-left: 10px; padding-right: 10px; }
  .card-row-head { flex-wrap: wrap; align-items: flex-start; }
  .card-row-head .head-right {
    white-space: normal;
    text-align: left;
    width: 100%;
  }
  .card-row-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-row-books, .card-row-hist {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .card-row-hist .ca-ops-dense-table { min-width: 420px; }
  .card-row-books .ca-ops-dense-table { min-width: 320px; }
}

/* ── Buttons ── */
.btn {
  padding: 4px 10px;
  border: 1px solid var(--ca-ops-border);
  border-radius: 3px;
  background: var(--ca-ops-page);
  color: #e8eef5;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.btn:hover { border-color: var(--ca-ops-blue); }
.btn-ok {
  border-color: var(--ca-color-status-positive);
  color: var(--ca-color-status-positive);
}
.btn-ok:hover { background: rgba(46, 204, 113, 0.12); }
.btn-danger {
  border-color: var(--ca-color-status-negative);
  color: var(--ca-color-status-negative);
}
.btn-danger:hover { background: rgba(231, 76, 60, 0.12); }
.btn-gold {
  background: var(--ca-ops-gold);
  border-color: var(--ca-ops-gold);
  color: var(--ca-color-ink-900);
  font-weight: 600;
}
.btn-gold:hover { filter: brightness(1.08); border-color: var(--ca-ops-gold); }
.btn-kill {
  background: var(--ca-color-status-negative);
  border-color: var(--ca-color-status-negative);
  color: #fff;
  font-weight: 700;
  padding: 6px 14px;
  font-size: 12px;
}

/* ── Logs ── */
.log-viewer { margin-top: 16px; overflow: hidden; }
.log-tabs {
  display: flex;
  border-bottom: 1px solid var(--ca-ops-border);
  overflow-x: auto;
}
.log-tab {
  padding: 8px 14px;
  font-size: 12px;
  cursor: pointer;
  color: var(--ca-ops-muted);
  border: none;
  background: none;
  font-family: inherit;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.log-tab:hover { color: #e8eef5; background: rgba(26, 46, 68, 0.6); }
.log-tab.is-active {
  color: var(--ca-ops-gold);
  border-bottom-color: var(--ca-ops-gold);
}
.log-pane {
  height: 280px;
  overflow-y: auto;
  padding: 10px 14px;
  background: var(--ca-color-ink-900);
  font-size: 12px;
  line-height: 1.65;
  color: var(--ca-ops-muted);
}
.log-pane .log-line { display: block; }
.log-pane .log-line:nth-child(even) { background: rgba(26, 46, 68, 0.35); }
.log-ts { color: var(--ca-ops-blue); }
.log-lvl-info { color: var(--ca-ops-muted); }
.log-lvl-warn { color: var(--ca-ops-gold); }
.log-lvl-err { color: var(--ca-color-status-negative); }

/* ── Per-slot dashboard extras ── */
.slot-page { max-width: 560px; padding: 16px 20px 32px; }
.kill-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  margin-top: 16px;
  border: 1px solid rgba(231, 76, 60, 0.45);
  background: rgba(231, 76, 60, 0.08);
}
.kill-bar strong { color: var(--ca-color-status-negative); font-size: 13px; }

/* ── Login ── */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.login-card {
  width: 340px;
  padding: 28px 28px 24px;
}
.login-card .brand-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.login-card h1 {
  font-size: 20px;
  font-weight: 600;
  text-align: center;
}
.login-card .sub {
  text-align: center;
  font-size: 12px;
  color: var(--ca-ops-muted);
  margin-bottom: 20px;
}
.login-card label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ca-ops-muted);
  margin-bottom: 6px;
}
.login-card input[type="password"] {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--ca-ops-border);
  border-radius: 3px;
  background: var(--ca-color-ink-900);
  color: #e8eef5;
  font: inherit;
  font-family: var(--ca-font-data);
  margin-bottom: 16px;
}
.login-card input:focus {
  outline: none;
  border-color: var(--ca-ops-gold);
}
.login-card .btn-gold { width: 100%; padding: 8px; font-size: 13px; }

/* ── Section titles in slot page ── */
.panel-h {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ca-ops-muted);
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--ca-ops-border);
}

/* Aliases so live pill/button/PnL classes map onto the mockup tokens. */
.positive { color: var(--ca-color-status-positive); }
.negative { color: var(--ca-color-status-negative); }
.btn-green { border-color: var(--ca-color-status-positive); color: var(--ca-color-status-positive); }
.btn-green:hover { background: rgba(46, 204, 113, 0.12); }
.btn-red { border-color: var(--ca-color-status-negative); color: var(--ca-color-status-negative); }
.btn-red:hover { background: rgba(231, 76, 60, 0.12); }
.pill-ok, .meta-pill-bull, .meta-pill-green, .meta-pill-ok {
  border-color: var(--ca-color-status-positive);
  color: var(--ca-color-status-positive);
  background: rgba(46, 204, 113, 0.10);
}
.pill-err, .meta-pill-bear, .meta-pill-red, .meta-pill-err {
  border-color: var(--ca-color-status-negative);
  color: var(--ca-color-status-negative);
  background: rgba(231, 76, 60, 0.10);
}
.pill-info, .meta-pill-both, .meta-pill-info {
  border-color: var(--ca-ops-blue);
  color: var(--ca-color-blue-400);
  background: rgba(30, 111, 191, 0.12);
}
.pill-warn, .meta-pill-yellow, .meta-pill-warn {
  border-color: var(--ca-ops-gold);
  color: var(--ca-ops-gold);
  background: rgba(200, 168, 75, 0.10);
}
.pill-muted, .meta-pill-none, .meta-pill-muted { color: var(--ca-ops-muted); }
.login-card .error { color: var(--ca-color-status-negative); font-size: 13px; text-align: center; margin-bottom: 12px; }
.kill-result { color: var(--ca-color-status-negative); font-weight: 600; }
.slot-page .log-pane { height: 220px; }
.rule-accent { width: 36px; height: 2px; background: var(--ca-ops-gold); }
.cycle-muted { color: var(--ca-ops-muted); }
.substrategy-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}