/*
 * App-spezifisches CSS von fin.martinnce.de.
 *
 * Hier steht, was nicht ins Design-System gehoert: Anbindung von htmx und
 * Plotly, die Vollbildansicht der Diagramme und die Positionierung der
 * Tab-Leiste. Wird nach dem Design-System geladen.
 */

/* --- Tab-Leiste -------------------------------------------------------- */

/* Klebt unter der Navigation (deren Hoehe: 4rem). */
#tab-bar {
    position: sticky;
    top: 4rem;
    z-index: 30;
}

#tab-bar .ds-tabs {
    scrollbar-width: thin;
    scrollbar-color: var(--ds-color-border) transparent;
}

#tab-bar .ds-tabs::-webkit-scrollbar {
    height: 6px;
}

#tab-bar .ds-tabs::-webkit-scrollbar-thumb {
    background-color: var(--ds-color-border);
    border-radius: var(--ds-radius-sm);
}

.tab-panel {
    min-height: calc(100vh - 200px);
}

/*
 * Typ-Badge in der Watchlist: Die Hintergrundfarbe setzt das JavaScript nach
 * Wertpapierart, damit sie zur Serienfarbe im Diagramm passt. Hier bleibt nur,
 * was davon unabhaengig ist.
 */
.type-badge {
    color: var(--ds-color-text-inverse);
    background: var(--ds-color-text-muted);
    border-color: transparent;
    cursor: pointer;
}

.type-badge:hover {
    opacity: 0.8;
}

/*
 * Das Suchdropdown wird von app.js frei positioniert und muss deshalb aus dem
 * Fluss genommen sein - Sache der App, nicht des Design-Systems.
 */
#search-results {
    position: fixed;
    z-index: 99999;
}

/* Zeile, die zur hervorgehobenen Serie im Diagramm gehoert. */
.is-highlighted > td {
    background: var(--ds-color-accent-bg);
}

/* --- Diagramme --------------------------------------------------------- */

.chart-container {
    width: 100%;
    height: 400px;
}

.chart-container--tall {
    height: 500px;
}

/* Herkunft der Kursdaten in der Diagrammlegende. */
.ds-legend__swatch[data-source="live"] { background: var(--ds-color-accent); }
.ds-legend__swatch[data-source="db"] { background: var(--ds-color-text-subtle); }

/* Plotly-Werkzeugleiste zurueckhaltender gestalten. */
.modebar {
    top: 8px !important;
    right: 8px !important;
}

.modebar-group {
    background: rgba(255, 255, 255, 0.95) !important;
}

.modebar-btn {
    color: var(--ds-color-text-subtle) !important;
}

.modebar-btn:hover {
    color: var(--ds-color-text) !important;
}

/* --- Vollbild fuer Diagramme ------------------------------------------- */

/*
 * Zwei Wege: die echte Fullscreen-API und - fuer iOS im Standalone-Modus, wo
 * sie fehlt - eine reine CSS-Vergroesserung.
 */
.chart-section:fullscreen,
.chart-section.chart-maximized {
    background: var(--ds-color-surface);
    width: 100vw !important;
    height: 100vh !important;
    padding: var(--ds-space-4);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.chart-section.chart-maximized {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
}

.chart-section:fullscreen .chart-container,
.chart-section.chart-maximized .chart-container {
    flex: 1;
    min-height: 0;
    height: auto !important;
}

.chart-section:fullscreen .fundamentals-section,
.chart-section.chart-maximized .fundamentals-section {
    flex: none;
    border-top: var(--ds-border-width-hairline) solid var(--ds-color-border-soft);
}

.chart-section:fullscreen .chart-container .js-plotly-plot,
.chart-section:fullscreen .chart-container .plot-container,
.chart-section:fullscreen .chart-container .svg-container,
.chart-section.chart-maximized .chart-container .js-plotly-plot,
.chart-section.chart-maximized .chart-container .plot-container,
.chart-section.chart-maximized .chart-container .svg-container {
    width: 100% !important;
    height: 100% !important;
}

/* --- Kerzengrafik in der Chart-Hilfe ----------------------------------- */

.candle-demo {
    display: flex;
    justify-content: center;
    gap: var(--ds-space-12);
}

.candle {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.candle__wick {
    width: 2px;
    background: currentColor;
}

.candle[data-direction="up"] { color: var(--ds-color-positive); }
.candle[data-direction="down"] { color: var(--ds-color-negative); }

.candle[data-direction="up"] .candle__wick[data-part="upper"] { height: 1.25rem; }
.candle[data-direction="up"] .candle__wick[data-part="lower"] { height: 0.75rem; }
.candle[data-direction="down"] .candle__wick[data-part="upper"] { height: 0.75rem; }
.candle[data-direction="down"] .candle__wick[data-part="lower"] { height: 1.25rem; }

.candle__body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 2rem;
    height: 3rem;
    padding: var(--ds-space-1) 0;
    border-radius: var(--ds-radius-sm);
    background: currentColor;
    color: var(--ds-color-text-inverse);
    font-size: 0.625rem;
    text-align: center;
}

.candle__caption {
    margin-top: var(--ds-space-2);
    font-weight: var(--ds-font-weight-medium);
}