/* Der kleine Kalender links dient nur der Tagesauswahl — keine Betraege, nur ein Farbpunkt
   je Tag. Der grosse Kalender mit Zahlen steht auf dem Dashboard. */
.mini { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.mini .h { color: var(--dim); font-size: 9.5px; text-align: center; padding-bottom: 3px; }
.mini a {
  aspect-ratio: 1; display: grid; place-items: center; border-radius: 6px; font-size: 11.5px;
  color: var(--muted); text-decoration: none; position: relative; border: 1px solid transparent;
}
.mini a:hover { background: rgba(124,108,245,.08); color: var(--text); }
.mini a.off { color: var(--dim); opacity: .35; }

/* ⚠️ ZWEI AUSSAGEN JE TAG, UND SIE DÜRFEN SICH NICHT INS GEHEGE KOMMEN (Wunsch Dirk,
   14.08.2026: „Können wir in dem Kalender die Tage vielleicht auch einfärben ob es ein
   Gewinntag oder Verlusttag war?").

   Die FLÄCHE sagt, wie der Tag ausging — grün im Plus, rot im Minus. Der PUNKT sagt, ob
   schon etwas geschrieben steht. Beides auf denselben Träger zu legen ginge nicht: Ein
   grüner Punkt hiesse dann mal „Gewinn" und mal „Eintrag da", und man müsste raten, welches
   von beidem gemeint ist. */
.mini a.plus  { background: var(--green-dim); color: var(--green); }
.mini a.minus { background: var(--red-dim);   color: var(--red); }
.mini a.null  { background: rgba(255,255,255,.05); }

/* Der gewählte Tag gewinnt immer — sonst sucht man ihn in einer Fläche gleicher Farben.
   Deshalb steht er NACH den Ergebnisfarben und trägt zusätzlich einen Rahmen. */
.mini a.on {
  background: var(--accent-soft); color: var(--text); font-weight: 650;
  border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset;
}

.mini a i { position: absolute; bottom: 3px; width: 4px; height: 4px; border-radius: 50%; }
/* Geschrieben = Akzentfarbe (die Farbe des Journals), fehlt = gold wie überall im Haus,
   wo etwas offen ist. Grün und Rot sind hier vergeben — sie gehören der Fläche. */
.mini a i.da   { background: var(--accent-2); }
.mini a i.fehlt { background: var(--gold); }

/* Werkzeugleiste des Textfeldes — sieht aus wie ein Editor, kann aber nichts. */
.rt-bar { display: flex; gap: 2px; padding: 6px; border: 1px solid var(--border-2); border-bottom: 0; border-radius: 9px 9px 0 0; background: rgba(255,255,255,.02); flex-wrap: wrap; }
.rt-bar button {
  background: none; border: 0; color: var(--muted); width: 27px; height: 25px; border-radius: 5px;
  cursor: pointer; font-family: inherit; font-size: 12.5px;
}
.rt-bar button:hover { background: rgba(124,108,245,.10); color: var(--text); }
.rt-bar .div { width: 1px; background: var(--border-2); margin: 3px 4px; }
.rt-body {
  border: 1px solid var(--border-2); border-radius: 0 0 9px 9px; padding: 13px 15px; min-height: 190px;
  background: rgba(255,255,255,.02); font-size: 13px; line-height: 1.65;
}
.rt-body h4 { font-size: 13.5px; margin: 0 0 6px; color: var(--accent-2); }
.rt-body p { margin-bottom: 10px; }
.rt-body ul { margin: 0 0 10px 18px; }
.rt-body li { margin-bottom: 3px; }

/* Der fertige Eintrag im Ruhezustand. Er sieht aus wie Text und nicht wie ein Formularfeld
   — genau darum geht es. Dass man hineinklicken kann, sagt der Rand beim Ueberfahren; ein
   dauerhafter Rahmen machte daraus wieder ein Eingabefeld. */
.j-gelesen { transition: border-color .15s ease, background .15s ease; }
.j-gelesen:hover, .j-gelesen:focus {
  border-color: var(--border); background: rgba(124,108,245,.05); outline: none;
}
.j-gelesen:focus { box-shadow: 0 0 0 1px var(--accent) inset; }
.j-gelesen > *:first-child { margin-top: 0; }
.j-gelesen > *:last-child { margin-bottom: 0; }

/* Anhaenge: `.att` steht seit dem 14.08.2026 in `gemeinsam/journal.css` — es gehoert zu
   `gemeinsam/anhaenge.js`, und das laeuft auf mehreren Seiten. Hier stand es zuerst, und
   die Trade-Seite hatte damit eine Liste ohne Aussehen. */

/* Zeitstrahl des Handelstages */
.tl { position: relative; padding-left: 26px; margin-top: 6px; }
.tl::before { content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; background: var(--border); }
.tl .ev { position: relative; padding: 0 0 17px; }
.tl .ev::before {
  content: ""; position: absolute; left: -22px; top: 5px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 3px var(--bg);
}
.tl .ev.g::before { background: var(--green); } .tl .ev.r::before { background: var(--red); }
.tl .ev .t { color: var(--dim); font-size: 11px; }
.tl .ev .h { font-size: 13px; font-weight: 600; margin-top: 1px; }
.tl .ev .s { color: var(--muted); font-size: 12px; margin-top: 2px; }