/* Orderbuch-/DOM-Panel + andockbare rechte Panel-Hüllen des Chart-Studios
   (KONZEPT-Chart-Studio-Order-Book-DOM §5, VORSCHAU 1:1). Nur --fn-*-Tokens, kein Hex.
   Dock-Mechanik 1:1 Signal-Studio (SignalStudioPage.razor.css: sm-collapse/sm-pin/sm-side-rail). */

/* ===== Andock-Hülle (Steuerung links · Orderbuch/Trading rechts) — FlowDesk-Doppelchevron-Modell =====
   Nikos Vorgabe 23.07.2026 (Transfer/Doppelpfeile.png): EINE feste Struktur, die BREITE animiert
   (offen ⇄ Rail). Kein Overlay, kein position:absolute — der Chart (flex:1) füllt immer den Rest,
   nichts springt. Ein Doppel-Chevron als einziges Bedienelement; eingeklappt dreht er 180°.
   Breiten-Transition-Kurve 1:1 FlowDesk. */
.cw-dock {
    /* align-self:stretch + height:auto seit 31.08.2026 fuer BEIDE Seiten (Niko: "das rechte Sideboard
       ist immer noch zu kurz. Es soll ueber die gesamte Laenge gehen - buendig bis zur letzten
       Kachel"). Die Begruendung stand schon unten bei .side-left und galt genauso rechts: .cw-body
       waechst mit der ganzen Chart- und Kachelstrecke und hat keine feste Hoehe, deshalb laesst sich
       height:100% dort nicht aufloesen - die Huelle endete nach ihrem eigenen Inhalt. Gemessen am
       31.08.2026: gemeinsamer Elternteil .cw-body 4919 px, linkes Dock 4919 px, rechtes 573 px.
       Die Regel gehoert deshalb hierher und nicht in die Seiten-Ausnahme (R6). */
    flex: 0 0 auto; position: relative; align-self: stretch; height: auto; min-height: 0;
    display: flex; flex-direction: column;
    width: var(--cw-dock-w, 264px);
    background: var(--fn-bg-muted); border-left: 1px solid var(--fn-border);
    overflow: hidden;
    transition: width 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.cw-dock.collapsed { width: 44px; }

/* Kopfzeile: Doppelpfeil + Titel. Der Doppelpfeil sitzt IMMER BUENDIG an der zum Chart zeigenden Kante:
   rechte Docks (Orderbuch/Trading) → LINKE Kante, linke Steuerspalte (side-left) → RECHTE Kante.
   Die Seite bestimmt die DOM-Reihenfolge (ChartDockPanel.razor). Ein zweispaltiges Grid reserviert
   exakt 26px fuer den Toggle und gibt ausschliesslich den Rest an den Titel; dessen max-width kann die
   Toggle-Spur dadurch nie nach innen ziehen. (Niko 22.08.2026, Screenshot nach PR 1006.) */
.cw-dock-head {
    display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; gap: 8px; flex: 0 0 auto;
    height: 38px; padding: 0 12px 0 6px; border-bottom: 1px solid var(--fn-border);
}
.cw-dock-title {
    flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    font: 600 12px var(--fn-font); color: var(--fn-text-secondary);
    letter-spacing: .04em; text-transform: uppercase;
    opacity: 1; max-width: 220px;
    transition: opacity 0.18s cubic-bezier(0.4, 0, 0.2, 1) 0.12s,
                max-width 0.28s cubic-bezier(0.4, 0, 0.2, 1) 0.04s;
}
/* Inhalt füllt den Rest; im eingeklappten Zustand ausgefadet und ohne eigenen Platz. */
.cw-dock-body {
    flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
    opacity: 1; transition: opacity 0.14s cubic-bezier(0.4, 0, 0.2, 1) 0.06s;
}
/* Innenleben-Ränder in der Hülle neutralisieren (Panels bringen eigene mit). */
.cw-dock-body > .tp { border-left: 0; flex: 1 1 auto; }
.cw-dock-body > .cw-controls { border-right: 0; width: auto; flex: 1 1 auto; }

/* Reiter im Trading-Dock: Trading | Setup-Scanner (Niko 01.09.2026; Maße und Verhalten 1:1 aus der
   abgenommenen Vorschau vom 31.08.2026, Abschnitt 1 „Das Dock bekommt zwei Reiter"). Nur Tokens,
   nie Hex — der aktive Reiter trägt die Unterkante in der Akzentfarbe. */
.cw-dock-tabs {
    display: flex; gap: 0; flex: 0 0 auto;
    border-bottom: var(--fn-border-width) solid var(--fn-border);
}
.cw-dock-tab {
    flex: 1; padding: 8px 6px; border: 0; background: none; cursor: pointer;
    font: 600 11px var(--fn-font); letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--fn-text-tertiary); border-bottom: 2px solid transparent;
}
.cw-dock-tab:hover { color: var(--fn-text-secondary); }
.cw-dock-tab.on { color: var(--fn-primary); border-bottom-color: var(--fn-primary); }

/* Der inaktive Reiter bleibt im Baum (laufender Scan, Trading-Eingaben), nimmt aber keinen Platz. */
.cw-dock-tabpanel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.cw-dock-tabpanel[hidden] { display: none; }

/* Vertikales Rail-Label — nur im eingeklappten Zustand sichtbar (mittig auf der Rail). */
.cw-dock-vlabel {
    position: absolute; top: 44px; left: 0; right: 0; text-align: center;
    writing-mode: vertical-rl; margin: 0 auto;
    font: 600 11px var(--fn-font-mono, monospace); letter-spacing: .14em; text-transform: uppercase;
    color: var(--fn-text-secondary); pointer-events: none;
    opacity: 0; transition: opacity 0.14s ease;
}

/* Rechte Huelle: Beschriftung linksbuendig, also zum Chart hin (Niko 24.08.2026, abgenommene
   Vorschau VORSCHAU-Chart-Studio-Rail-Beschriftung.html).

   Ursache: writing-mode stapelt Zeilen quer zur Leserichtung. Bei vertical-rl laufen sie von
   RECHTS nach links, deshalb liegt die einzige Zeile an der rechten Kante ihres Kastens - links
   ist das zum Chart hin und wirkt richtig, rechts ist es vom Chart weg. vertical-lr stapelt von
   links. Leserichtung, Buchstabenlage und Hoehe bleiben unveraendert; nur die Kante wechselt.

   Festgemacht an der SEITE, nicht am Text: damit gilt es fuer jede rechte Huelle, auch fuer
   spaeter hinzukommende, ohne dass jemand daran denken muss. */
.cw-dock:not(.side-left) .cw-dock-vlabel { writing-mode: vertical-lr; }

/* Eingeklappt: Titel ausfaden + zusammenschieben, Inhalt weg, Rail-Label ein. */
.cw-dock.collapsed .cw-dock-title { opacity: 0; max-width: 0; }
.cw-dock.collapsed .cw-dock-body { opacity: 0; pointer-events: none; }
.cw-dock.collapsed .cw-dock-vlabel { opacity: 1; transition-delay: 0.22s; }
.cw-dock.collapsed .cw-dock-head {
    grid-template-columns: 26px 0; border-bottom-color: transparent;
    justify-content: center; padding: 0; gap: 0;
}

/* Zieh-Griff fuer die Breite (Niko 22.08.2026) — an der chartzugewandten Kante, Optik wie der Hoehen-
   Splitter .cw-vsplit (Token-Akzent erst beim Ueberfahren/Ziehen); eingeklappt nicht vorhanden. */
.cw-dock-resize {
    position: absolute; top: 0; bottom: 0; width: 6px; z-index: 2;
    cursor: col-resize; touch-action: none; background: transparent;
    transition: background 0.14s ease, box-shadow 0.14s ease;
}
.cw-dock:not(.side-left) .cw-dock-resize { left: 0; }
.cw-dock.side-left .cw-dock-resize { right: 0; }
.cw-dock-resize:hover, .cw-dock.resizing .cw-dock-resize {
    background: var(--fn-accent-soft); box-shadow: inset 0 0 0 1px var(--fn-accent-line);
}
.cw-dock.collapsed .cw-dock-resize { display: none; }
/* Waehrend des Ziehens keine Breiten-Animation — sonst laeuft die Huelle dem Zeiger hinterher. */
.cw-dock.resizing { transition: none; }

/* ===== side-left: gespiegelte Hülle für die Steuerspalte (ChartControls) =====
   align-self/height sind am 31.08.2026 in die gemeinsame .cw-dock-Regel gewandert, weil sie fuer
   beide Seiten gelten - hier bleibt nur noch, was wirklich seitenabhaengig ist: der Rahmen. */
.cw-dock.side-left {
    border-left: 0;
    border-right: 1px solid var(--fn-border);
}
/* Doppelpfeil an die rechte (chartzugewandte) Kante: Die feste zweite Grid-Spur endet 6px vor dem Rand. */
.cw-dock.side-left .cw-dock-head { grid-template-columns: minmax(0, 1fr) 26px; padding: 0 6px 0 12px; }
.cw-dock.side-left.collapsed .cw-dock-head { grid-template-columns: 0 26px; }

/* On phone-sized viewports the two collapsed 44 px rails used to remove 88 px from the chart.
   Keep their existing touch targets at the edges without letting the collapsed docks participate
   in flex sizing. Opening either dock restores its real panel width. */
@media (max-width: 700px) {
    /* Geoeffnete Docks werden zu seitlichen Schubladen. So bleibt der Chart samt Informationskarten
       in voller Breite; die Bedienelemente bleiben erreichbar, ohne dauerhaft Platz abzuziehen. */
    .cw-body { position: relative; }
    .cw-dock {
        position: absolute;
        top: 0;
        bottom: 0;
        z-index: 25;
        height: auto;
        max-width: calc(100vw - 44px);
    }
    .cw-dock.side-left { left: 0; }
    .cw-dock:not(.side-left) { right: 0; }
    .cw-dock.collapsed {
        width: 0;
        border: 0;
        overflow: visible;
    }
    .cw-dock.collapsed .cw-dock-head {
        position: absolute;
        top: 0;
        width: 44px;
        min-height: 44px;
        background: var(--fn-bg-muted);
        border: var(--fn-border-width) solid var(--fn-border);
    }
    .cw-dock.side-left.collapsed .cw-dock-head { left: 0; border-left: 0; }
    .cw-dock:not(.side-left).collapsed .cw-dock-head { right: 0; border-right: 0; }
    .cw-dock.collapsed .cw-dock-vlabel { display: none; }
}

/* ===== Orderbuch-Panel ===== */
.ob { display: flex; flex-direction: column; min-height: 0; flex: 1; font-family: var(--fn-font-mono, monospace); }
.ob-head { padding: 10px 12px 8px; border-bottom: 1px solid var(--fn-border); font-family: var(--fn-font); }
.ob-meta { display: flex; align-items: center; gap: 6px; margin-top: 7px; }
.ob-chip {
    font: 600 10.5px var(--fn-font-mono, monospace); letter-spacing: .04em; padding: 2px 8px;
    border-radius: var(--fn-radius-pill, 999px); border: 1px solid var(--fn-border-strong);
    color: var(--fn-text-secondary); background: var(--fn-bg-alt);
}
.ob-chip.contract { color: var(--fn-primary); border-color: var(--fn-accent-line); background: var(--fn-accent-soft); }
.ob-chip.src { color: var(--fn-success); border-color: var(--fn-success-soft); background: var(--fn-success-soft); }
.ob-chip.src.delayed { color: var(--fn-warning); border-color: var(--fn-warning-soft); background: var(--fn-warning-soft); }
.ob-conn { width: 8px; height: 8px; border-radius: 50%; background: var(--fn-success); margin-left: auto; }
.ob-conn.off { background: var(--fn-danger); }

.ob-ctrl { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-bottom: 1px solid var(--fn-border); font-family: var(--fn-font); }
.ob-seg { display: flex; border: 1px solid var(--fn-border-strong); border-radius: 8px; overflow: hidden; }
.ob-seg button {
    font: 500 11.5px var(--fn-font-mono, monospace); color: var(--fn-text-secondary);
    background: transparent; border: 0; border-right: 1px solid var(--fn-border-strong);
    padding: 4px 8px; cursor: pointer;
}
.ob-seg button:last-child { border-right: 0; }
.ob-seg button.on { color: var(--fn-on-primary); background: var(--fn-primary); font-weight: 700; }
.ob-mini {
    width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--fn-border-strong);
    border-radius: 8px; background: var(--fn-bg-alt); color: var(--fn-text-secondary); cursor: pointer;
    font-size: 12px; margin-left: auto;
}
.ob-mini + .ob-mini { margin-left: 0; }
.ob-mini:hover { color: var(--fn-text); background: var(--fn-hover); }
.ob-mini.on { color: var(--fn-primary); border-color: var(--fn-accent-line); background: var(--fn-accent-soft); }

.ob-ladder { flex: 1; min-height: 0; overflow: hidden; padding: 4px 0; }
.ob-ladder.dim .ob-row, .ob-ladder.dim .ob-last { opacity: .35; filter: saturate(.4); }
.ob-state {
    padding: 24px 16px; text-align: center; font: 500 12px var(--fn-font);
    color: var(--fn-text-secondary);
}
.ob-banner {
    display: flex; align-items: center; gap: 8px; margin: 8px; padding: 7px 10px;
    border: 1px solid var(--fn-warning-soft); background: var(--fn-warning-soft); border-radius: 8px;
    font: 500 11.5px var(--fn-font); color: var(--fn-warning);
}

.ob-row { position: relative; display: flex; align-items: center; height: 22px; padding: 0 10px; font-size: 11.5px; }
.ob-row .px { width: 72px; color: var(--fn-text-secondary); }
.ob-row .sz { width: 42px; text-align: right; color: var(--fn-text); font-weight: 600; }
.ob-row .bar { position: relative; flex: 1; height: 14px; margin-left: 8px; border-radius: 2px; overflow: hidden; }
.ob-row .bar i { position: absolute; inset: 0 auto 0 0; border-radius: 2px; }
.ob-row.ask .bar i { background: var(--fn-danger); opacity: .78; }
.ob-row.bid .bar i { background: var(--fn-success); opacity: .78; }
.ob-row.best { background: var(--fn-bg-alt); }
.ob-row.best .px { color: var(--fn-text); }

.ob-last {
    display: flex; align-items: center; gap: 8px; margin: 3px 8px; padding: 4px 8px;
    border: 1px solid var(--fn-accent-line); border-radius: 8px; background: var(--fn-accent-soft);
}
.ob-last .lp { font: 700 12.5px var(--fn-font-mono, monospace); color: var(--fn-text); }
.ob-last .dir.up { color: var(--fn-success); font-size: 11px; }
.ob-last .dir.down { color: var(--fn-danger); font-size: 11px; }
.ob-last .sp { margin-left: auto; font: 400 10.5px var(--fn-font-mono, monospace); color: var(--fn-text-secondary); }

.ob-foot { border-top: 1px solid var(--fn-border); padding: 8px 12px 10px; font-family: var(--fn-font); }
.ob-sums { display: flex; align-items: center; justify-content: space-between; font: 600 11.5px var(--fn-font-mono, monospace); }
.ob-sums .b { color: var(--fn-success); }
.ob-sums .a { color: var(--fn-danger); }
.ob-sums .lbl { font: 400 9.5px var(--fn-font-mono, monospace); color: var(--fn-text-tertiary); letter-spacing: .04em; white-space: nowrap; }
.ob-imb { height: 6px; border-radius: var(--fn-radius-pill, 999px); overflow: hidden; background: var(--fn-danger-soft); margin: 7px 0 5px; display: flex; }
.ob-imb i { background: var(--fn-success); opacity: .8; border-radius: 999px 0 0 999px; }
.ob-imb em { background: var(--fn-danger); opacity: .7; flex: 1; border-radius: 0 999px 999px 0; }
.ob-ts { font: 400 10.5px var(--fn-font-mono, monospace); color: var(--fn-text-tertiary); text-align: right; }