/* Options-Journal – ruhige Tabellenoberfläche; Farbe nur für Gewinn/Verlust und Status */
:root {
  --paper: #eef1f0;
  --surface: #ffffff;
  --ink: #1c2833;
  --muted: #5e6b73;
  --rule: #d6dddb;
  --rule-strong: #b9c3c1;
  --gain: #17714f;
  --loss: #ad3434;
  --accent: #2f52a8;
  --accent-soft: #e3e9f7;
  --row-hover: #f5f7f6;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #12181c;
    --surface: #182127;
    --ink: #dde5e8;
    --muted: #8c9aa2;
    --rule: #2a363d;
    --rule-strong: #3b4a52;
    --gain: #4fbf92;
    --loss: #e57b7b;
    --accent: #88a4ee;
    --accent-soft: #223050;
    --row-hover: #1d282f;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { font-size: 15px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
code, .mono { font-family: var(--mono); font-size: 0.86em; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Kopfzeile */
.top {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 0.5rem 2rem; padding: 1.1rem 1.5rem 0.6rem;
}
.top h1 { margin: 0; font-size: 1.35rem; font-weight: 650; letter-spacing: -0.01em; }
.sync { display: flex; gap: 1.25rem; color: var(--muted); font-size: 0.9rem; }
.sync-error { color: var(--loss); }

/* Filter */
.filters {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem 1rem;
  padding: 0.5rem 1.5rem 1rem;
}
.filters label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.8rem; color: var(--muted); }
.filters .search { flex: 1 1 16rem; max-width: 24rem; }
input, select, textarea, button { font: inherit; color: inherit; }
.filters input, .filters select {
  padding: 0.35rem 0.5rem; border: 1px solid var(--rule-strong); border-radius: 4px;
  background: var(--surface); font-size: 0.92rem;
}
.count { margin: 0 0 0.4rem auto; color: var(--muted); font-size: 0.85rem; font-variant-numeric: tabular-nums; }

/* Tabelle */
.table-wrap {
  margin: 0 1.5rem 2rem; overflow: auto; max-height: calc(100vh - 10rem);
  background: var(--surface); border: 1px solid var(--rule); border-radius: 6px;
}
table { border-collapse: separate; border-spacing: 0; width: 100%; }
#journal { font-size: 0.9rem; font-variant-numeric: tabular-nums; }
#journal > thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface); border-bottom: 1px solid var(--rule-strong);
  padding: 0.55rem 0.6rem; text-align: left; font-weight: 600; font-size: 0.8rem;
  color: var(--muted); white-space: nowrap; cursor: pointer; user-select: none;
}
#journal > thead th:hover { color: var(--ink); }
#journal > thead th[aria-sort="ascending"]::after { content: " \25B2"; font-size: 0.65em; }
#journal > thead th[aria-sort="descending"]::after { content: " \25BC"; font-size: 0.65em; }
#journal td { padding: 0.42rem 0.6rem; border-bottom: 1px solid var(--rule); white-space: nowrap; vertical-align: top; }
#journal th.num, #journal td.num { text-align: right; }
.strong { font-weight: 600; }
.cur { font-size: 0.85em; font-weight: 400; opacity: 0.8; }
.gain { color: var(--gain); }
.loss { color: var(--loss); }

tbody.pos > tr.main:hover > td { background: var(--row-hover); }
/* offene Positionen: Akzentkante links */
tbody.pos > tr.main > td:first-child { border-left: 3px solid transparent; }
tbody.status-offen > tr.main > td:first-child,
tbody.status-teilweise > tr.main > td:first-child { border-left-color: var(--accent); }
.open-tag {
  display: inline-block; padding: 0 0.4rem; border-radius: 3px; font-size: 0.78rem;
  background: var(--accent-soft); color: var(--accent);
}

.assign-tag {
  display: inline-block; padding: 0 0.4rem; border-radius: 3px; font-size: 0.72rem;
  border: 1px solid var(--rule-strong); color: var(--muted);
}

.toggle {
  border: 0; background: none; padding: 0; cursor: pointer; text-align: left;
  font-weight: 550; border-bottom: 1px dotted var(--rule-strong);
}
.toggle[aria-expanded="true"] { color: var(--accent); border-bottom-color: var(--accent); }

/* Premium captured: Mittellinie = 0 %, rechts behalten, links verloren */
.captured { display: table-cell; }
.captured > span:last-child { display: inline-block; min-width: 4.4rem; }
.meter {
  display: inline-block; position: relative; width: 4.5rem; height: 0.5rem; margin-right: 0.4rem;
  vertical-align: middle; background: var(--rule); border-radius: 1px;
}
.meter::after { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--muted); }
.meter .bar { position: absolute; top: 0; bottom: 0; width: var(--w, 0%); }
.meter .bar.gain { left: 50%; background: var(--gain); }
.meter .bar.loss { right: 50%; background: var(--loss); }
.meter.over .bar.loss { background: repeating-linear-gradient(90deg, var(--loss) 0 3px, transparent 3px 5px); }

/* Notizen */
.notes-col { min-width: 18rem; white-space: normal !important; }
textarea.note {
  width: 100%; min-height: 1.9rem; resize: vertical; padding: 0.25rem 0.4rem;
  border: 1px solid transparent; border-radius: 4px; background: transparent; line-height: 1.35;
  font-size: 0.88rem; overflow: hidden;
}
textarea.note:hover { border-color: var(--rule); }
textarea.note:focus { border-color: var(--accent); background: var(--surface); outline: none; }
.note-state { display: block; font-size: 0.72rem; color: var(--muted); }
.note-state:empty { display: none; }
.note-state.err { color: var(--loss); }

/* Legs */
tr.legs > td { background: var(--paper); padding: 0.6rem 0.8rem 0.8rem 2.2rem !important; }
.legs-table { width: auto; font-size: 0.84rem; position: sticky; left: 2.2rem; }
.legs-note { position: sticky; left: 2.2rem; }
.legs-table th { text-align: left; font-weight: 600; color: var(--muted); padding: 0.2rem 0.9rem 0.3rem 0; font-size: 0.78rem; }
.legs-table td { border: 0 !important; padding: 0.15rem 0.9rem 0.15rem 0 !important; }
.legs-note { margin: 0.5rem 0 0; color: var(--muted); font-size: 0.82rem; white-space: normal; max-width: 60rem; }

/* Summen */
#totals { position: sticky; bottom: 0; z-index: 2; }
#totals td {
  background: var(--surface); border-top: 1px solid var(--rule-strong);
  padding: 0.5rem 0.6rem; font-weight: 600; white-space: nowrap;
}
#totals tr + tr td { border-top: 0; }
#totals .label { color: var(--muted); font-weight: 500; }

.empty, .orphans { margin: 1rem 1.5rem; max-width: 60rem; }
.orphans h2 { font-size: 1rem; margin: 0 0 0.3rem; }
.orphans p { color: var(--muted); font-size: 0.88rem; margin: 0 0 0.8rem; }
.orphan { display: grid; grid-template-columns: 8rem 1fr; gap: 0.2rem 0.8rem; margin-bottom: 0.6rem; }
.orphan textarea.note { border-color: var(--rule); background: var(--surface); }
.orphan .note-state { grid-column: 2; }

/* Login */
body.login { display: grid; place-items: center; min-height: 100vh; }
.login-box {
  width: min(22rem, 92vw); padding: 1.6rem; background: var(--surface);
  border: 1px solid var(--rule); border-radius: 6px;
}
.login-box h1 { margin: 0 0 1.2rem; font-size: 1.25rem; }
.login-box label { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.9rem; font-size: 0.85rem; color: var(--muted); }
.login-box input { padding: 0.45rem 0.55rem; border: 1px solid var(--rule-strong); border-radius: 4px; background: var(--surface); }
.login-box button {
  width: 100%; padding: 0.5rem; border: 0; border-radius: 4px; cursor: pointer;
  background: var(--accent); color: #fff; font-weight: 600;
}
@media (prefers-color-scheme: dark) { .login-box button { color: #10151a; } }
.error { color: var(--loss); font-size: 0.88rem; }

@media (max-width: 700px) {
  .top, .filters { padding-left: 0.8rem; padding-right: 0.8rem; }
  .table-wrap { margin: 0 0.4rem 1.5rem; max-height: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* die ersten drei Spalten bleiben beim horizontalen Scrollen stehen (left wird per JS gesetzt) */
#journal .stick { position: sticky; background: var(--surface); z-index: 1; }
#journal > thead th.stick { z-index: 3; }
#journal tbody.pos > tr.main:hover > td.stick { background: var(--row-hover); }
#journal .stick.last { box-shadow: 1px 0 0 var(--rule); }