:root {
  --bg: #0f1115;
  --panel: #171a21;
  --panel-border: #262b36;
  --text: #e6e8ec;
  --muted: #8a92a3;
  --accent: #4fd1c5;
  --accent-2: #f0a860;
  --danger: #e05263;
  --good: #57c785;
  font-family: -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
}

header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--panel-border);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.header-top {
  display: flex;
  align-items: center;
  gap: 16px;
}

.account-field {
  margin-left: auto;
}

.schwab-panel {
  margin-bottom: 0;
}

.tab-divider {
  width: 1px;
  align-self: stretch;
  background: var(--panel-border);
  margin: 2px 4px;
}

.tab-break {
  flex-basis: 100%;
  height: 0;
}

.header-logo {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  object-fit: cover;
}

header h1 {
  font-size: 18px;
  margin: 0;
  letter-spacing: 0.5px;
}

header h1 span {
  color: var(--accent);
}

.tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tab-btn {
  background: transparent;
  border: 1px solid var(--panel-border);
  color: var(--muted);
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.tab-btn.active {
  color: var(--bg);
  background: var(--accent);
  border-color: var(--accent);
}

.tab-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.icon-dashboard { -webkit-mask-image: url("icons/dashboard.png"); mask-image: url("icons/dashboard.png"); }
.icon-trade-log { -webkit-mask-image: url("icons/trade-log.png"); mask-image: url("icons/trade-log.png"); }
.icon-positions-log { -webkit-mask-image: url("icons/positions-log.png"); mask-image: url("icons/positions-log.png"); }
.icon-weekly-record { -webkit-mask-image: url("icons/weekly-record.png"); mask-image: url("icons/weekly-record.png"); }
.icon-ticker-charts { -webkit-mask-image: url("icons/ticker-charts.png"); mask-image: url("icons/ticker-charts.png"); }
.icon-leaderboard { -webkit-mask-image: url("icons/leaderboard.png"); mask-image: url("icons/leaderboard.png"); }
.icon-strike-time { -webkit-mask-image: url("icons/strike-time.png"); mask-image: url("icons/strike-time.png"); }
.icon-strike-chooser { -webkit-mask-image: url("icons/strike-chooser.png"); mask-image: url("icons/strike-chooser.png"); }
.icon-roller-put { -webkit-mask-image: url("icons/roller-put.png"); mask-image: url("icons/roller-put.png"); }
.icon-roller-call { -webkit-mask-image: url("icons/roller-call.png"); mask-image: url("icons/roller-call.png"); }
.icon-statement { -webkit-mask-image: url("icons/statement.png"); mask-image: url("icons/statement.png"); }
.icon-alerts { -webkit-mask-image: url("icons/alerts.png"); mask-image: url("icons/alerts.png"); }

.btn-group {
  display: flex;
  gap: 4px;
}

.range-btn {
  background: transparent;
  border: 1px solid var(--panel-border);
  color: var(--muted);
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
}

.range-btn.active {
  color: var(--bg);
  background: var(--accent);
  border-color: var(--accent);
}

main {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.tool-panel {
  display: none;
}

.tool-panel.active {
  display: block;
}

.tool-description {
  color: var(--muted);
  font-size: 13px;
  margin: -2px 0 14px;
  line-height: 1.4;
}

.stepper-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.stepper-btn {
  background: transparent;
  border: 1px solid var(--panel-border);
  color: var(--muted);
  width: 30px;
  height: 30px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
}

.stepper-btn:hover {
  border-color: var(--accent);
  color: var(--text);
}

.stepper-group input {
  background: var(--bg);
  border: 1px solid var(--panel-border);
  color: var(--text);
  padding: 7px 8px;
  border-radius: 6px;
  font-size: 14px;
  width: 72px;
  text-align: center;
}

.current-price-banner {
  font-size: 20px;
  font-weight: 700;
  color: var(--good);
  margin-bottom: 12px;
  min-height: 26px;
}

.current-price-banner .ticker-tag {
  color: var(--muted);
  font-weight: 600;
  font-size: 13px;
  margin-right: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.controls {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 18px;
}

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

.field label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.field input, .field select {
  background: var(--bg);
  border: 1px solid var(--panel-border);
  color: var(--text);
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 14px;
  min-width: 110px;
}

.checkbox-field {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 9px;
  cursor: pointer;
}

.checkbox-field input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
  margin: 0;
  flex-shrink: 0;
}

.checkbox-field label,
.checkbox-field span {
  text-transform: none;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
}

.data-extents-box {
  flex-basis: 100%;
}

.data-extents-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

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

.mini-field label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.mini-field input {
  background: var(--bg);
  border: 1px solid var(--panel-border);
  color: var(--text);
  padding: 7px 8px;
  border-radius: 6px;
  font-size: 14px;
  width: 64px;
}

.chart-toggle-box {
  display: flex;
  flex-direction: column;
  gap: 7px;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  padding: 8px 12px 10px;
  background: rgba(255, 255, 255, 0.02);
}

.chart-toggle-box-title {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.chart-toggle-buttons {
  display: flex;
  gap: 6px;
}

.toggle-btn {
  background: transparent;
  border: 1px solid var(--panel-border);
  color: var(--muted);
  padding: 8px 18px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.toggle-btn:hover {
  border-color: var(--accent);
  color: var(--text);
}

.toggle-btn.active {
  color: var(--bg);
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 10px rgba(79, 209, 197, 0.45);
}

button.primary {
  background: var(--accent);
  color: #08201d;
  border: none;
  padding: 9px 18px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  font-size: 14px;
}

button.primary:hover { opacity: 0.9; }

button.ghost {
  background: transparent;
  border: 1px solid var(--panel-border);
  color: var(--muted);
  padding: 9px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}

.status-line {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 10px;
  min-height: 16px;
}

.status-line.error { color: var(--danger); }

.earnings-banner {
  background: rgba(240, 168, 96, 0.12);
  border: 1px solid var(--accent-2);
  color: var(--accent-2);
  padding: 8px 14px;
  border-radius: 6px;
  margin-bottom: 14px;
  font-size: 13px;
  display: none;
}

.earnings-banner.visible { display: block; }

/* Next week's earnings notice, sitting right under this week's banner --
   deliberately plain (no border/background) so it doesn't compete with
   this week's yellow highlight for attention. */
.earnings-banner-next-week {
  color: var(--muted);
  font-size: 12px;
  margin: -6px 0 14px 2px;
}

.chart-group {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 20px;
}

.chart-subtitle {
  margin: -8px 0 12px;
  font-size: 12px;
  color: var(--muted);
}

.chart-group h3 {
  margin: 0 0 12px 0;
  font-size: 17px;
  color: var(--text);
  font-weight: 700;
  letter-spacing: 0.3px;
}

.chart-wrap {
  position: relative;
  height: 320px;
  margin-bottom: 6px;
}

.chart-wrap.small {
  height: 160px;
}

/* lightweight-charts renders into a plain div, which (unlike <canvas>) has
   no intrinsic size of its own -- without this it collapses to height:0
   inside .chart-wrap even though the wrapper itself has a real height, and
   the chart's autoSize has nothing to key off. */
.lwc-container {
  width: 100%;
  height: 100%;
}

.empty-state {
  color: var(--muted);
  font-size: 13px;
  padding: 40px 0;
  text-align: center;
}

.splash {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 60px 20px;
  text-align: center;
}

.splash > img {
  width: 220px;
  height: 220px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 0 40px rgba(79, 209, 197, 0.25);
}

.splash p {
  color: var(--muted);
  font-size: 14px;
  margin: 0;
}

.splash-loading-bar {
  width: 160px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.splash-loading-bar-fill {
  width: 40%;
  height: 100%;
  border-radius: 2px;
  background: var(--accent);
  animation: splash-loading-slide 1.1s ease-in-out infinite;
}

@keyframes splash-loading-slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

.powered-by {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.powered-by span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.powered-by img {
  height: 28px;
  width: auto;
  display: block;
  /* The logo's artwork is a dark bronze tone with no light pixels, so it
     nearly vanishes against the app's near-black background -- drop-shadow
     (not box-shadow) is alpha-aware and hugs the actual logo shape rather
     than glowing a rectangle around the transparent PNG canvas. */
  filter:
    drop-shadow(0 0 2px rgba(255, 255, 255, 0.85))
    drop-shadow(0 0 6px rgba(255, 255, 255, 0.5));
}

.app-footer {
  margin-top: 32px;
  padding: 18px 0 8px;
  border-top: 1px solid var(--panel-border);
  display: flex;
  justify-content: center;
}

.app-footer .powered-by {
  margin-top: 0;
}

.metrics-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.metric-card {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.metric-label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.metric-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}

.table-wrap {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  white-space: nowrap;
}

.data-table th, .data-table td {
  padding: 8px 10px;
  text-align: right;
  border-bottom: 1px solid var(--panel-border);
}

.data-table th:first-child, .data-table td:first-child,
.data-table th:nth-child(2), .data-table td:nth-child(2) {
  text-align: left;
}

.data-table th {
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.4px;
}

.data-table th[data-key] {
  cursor: pointer;
  user-select: none;
}

.data-table th[data-key]:hover {
  color: var(--text);
}

.data-table th.sort-asc::after { content: " \25B2"; }
.data-table th.sort-desc::after { content: " \25BC"; }

.otm-green { color: var(--good); font-weight: 600; }
.otm-red { color: var(--danger); font-weight: 600; }
.otm-yellow { color: #ffd166; font-weight: 600; }
.otm-cyan { color: #7dd3fc; font-weight: 600; }

/* Dashboard: position IDs opened in the last 7 days with no ROLLED leg --
   a reminder to confirm/correct an auto-matched ID (e.g. from a Schwab
   sync) in the Trade Log while it's still easy to remember. */
.position-id-new {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(87, 199, 133, 0.18);
  color: var(--good);
  font-weight: 700;
}

.position-id-editable {
  cursor: pointer;
  border-bottom: 1px dotted var(--muted);
}

.position-id-editable:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.position-id-input {
  width: 64px;
  background: var(--bg);
  border: 1px solid var(--accent);
  color: var(--text);
  border-radius: 4px;
  padding: 2px 4px;
  font-size: 13px;
}

.notes-editable {
  cursor: pointer;
  border-bottom: 1px dotted var(--muted);
  white-space: normal;
}

.ticker-cell {
  cursor: pointer;
  border-bottom: 1px dotted var(--muted);
}

.ticker-cell:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.notes-editable:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.notes-placeholder {
  color: var(--muted);
  font-style: italic;
}

.notes-input {
  width: 180px;
  background: var(--bg);
  border: 1px solid var(--accent);
  color: var(--text);
  border-radius: 4px;
  padding: 2px 4px;
  font-size: 13px;
}

.expiry-soon {
  color: var(--accent-2);
  font-weight: 700;
}

.expiry-past {
  color: var(--muted);
}

.data-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.03);
}

/* Trade Log: marks the first row of a new week (see markTradeLogWeekBoundaries
   in app.js) -- 2px to win the border-collapse width contest against the
   default 1px row divider, same reasoning as the alert-call border fix. */
tr.week-boundary td {
  border-top: 2px solid var(--text);
}

.status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.status-badge.status-active { background: rgba(87, 199, 133, 0.18); color: var(--good); }
.status-badge.status-assigned { background: rgba(240, 168, 96, 0.18); color: var(--accent-2); }
.status-badge.status-rolled { background: rgba(79, 209, 197, 0.18); color: var(--accent); }
.status-badge.status-closed,
.status-badge.status-expired,
.status-badge.status-called { background: rgba(138, 146, 163, 0.18); color: var(--muted); }
.status-badge.status-needs-review { background: rgba(224, 82, 99, 0.18); color: var(--danger); }
.status-badge.status-expired-call { background: rgba(125, 211, 252, 0.18); color: #7dd3fc; }

.row-action-btn {
  background: transparent;
  border: 1px solid var(--panel-border);
  color: var(--muted);
  padding: 4px 8px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 11px;
  margin-left: 4px;
}

.row-action-btn:hover {
  border-color: var(--accent);
  color: var(--text);
}

.icon-btn {
  padding: 4px 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.chart-group h3 .moneyness-tag {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-transform: none;
  letter-spacing: normal;
  margin-left: 8px;
}

.statement-report h2 {
  margin: 0 0 2px;
  font-size: 22px;
}

.statement-report .tool-description {
  margin: 0 0 18px;
}

.alert-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.alert-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--text);
}

.alert-pct-input {
  background: var(--bg);
  border: 1px solid var(--panel-border);
  color: var(--text);
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 14px;
  width: 64px;
  text-align: center;
}

.alert-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-size: 12px;
  color: var(--muted);
}

.alert-swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  display: inline-block;
  flex-shrink: 0;
}

.alert-swatch-red { background: rgba(224, 82, 99, 0.35); border: 1px solid var(--danger); }
.alert-swatch-yellow { background: rgba(240, 168, 96, 0.35); border: 1px solid var(--accent-2); }

.chat-id-option {
  display: inline-block;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  padding: 6px 12px;
  margin: 8px 6px 0 0;
  cursor: pointer;
  font-size: 13px;
  color: var(--muted);
}

.chat-id-option:hover {
  border-color: var(--accent);
  color: var(--text);
}

/* Dashboard alert highlights (data/alerts.py -> #db-active-table rows).
   Originally calls got a dashed border instead of a background tint to
   distinguish them from puts, but with border-collapse:collapse a shared
   edge only ever shows one side's border -- widening just the top edge to
   win that contest left it visibly thicker than the other 3 sides, which
   looked wrong. Simpler and better-looking: calls get the same background
   tint as puts. Day-of and week-of are mutually exclusive per side, so
   these never combine. */
tr.alert-put-day, tr.alert-call-day { background: rgba(224, 82, 99, 0.18) !important; }
tr.alert-put-day:hover, tr.alert-call-day:hover { background: rgba(224, 82, 99, 0.28) !important; }
tr.alert-put-week, tr.alert-call-week { background: rgba(240, 168, 96, 0.18) !important; }
tr.alert-put-week:hover, tr.alert-call-week:hover { background: rgba(240, 168, 96, 0.28) !important; }

/* Printing (or "Save as PDF") a Statement: hide the app chrome and this
   tab's own controls, show only the generated report, and swap the
   permanently-dark app theme for a light, ink-friendly one. Every
   component already reads its colors from these custom properties, so
   overriding them here is enough to re-theme the whole report without
   touching individual rules. */
@media print {
  header, .tabs, .controls, #statement > .status-line, #stmt-generate, #stmt-print {
    display: none !important;
  }

  :root {
    --bg: #ffffff;
    --panel: #ffffff;
    --panel-border: #ccc;
    --text: #111111;
    --muted: #555555;
    --accent: #0f7a6c;
    --accent-2: #b5651d;
    --danger: #b3202f;
    --good: #1f8a4c;
  }

  main {
    padding: 0;
    max-width: none;
  }

  .chart-group {
    break-inside: avoid;
  }

  /* The glow on the footer logo (.powered-by img) exists only to keep the
     dark-bronze artwork visible against the app's near-black background --
     against print's white page it's unnecessary and just reads as a blurry
     halo, so it's dropped here. */
  .powered-by img {
    filter: none;
  }

  .app-footer {
    break-inside: avoid;
  }

  .data-table tbody tr:hover {
    background: none;
  }
}