/* QORE Trading Desk — V6.6.4 layout (load after app.css) */

/* ---- Header globale ---- */
.td-globalheader { display: flex; gap: 0.6rem; padding: 0.7rem 0.9rem; background: #010409; border: 1px solid #30363d; border-radius: 8px; margin-bottom: 0.8rem; flex-wrap: wrap; }
.td-gh-item { display: flex; flex-direction: column; min-width: 110px; padding: 0 0.4rem; }
.td-gh-label { color: #8b949e; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; }
.td-gh-value { color: #f0f6fc; font-family: "JetBrains Mono", Consolas, monospace; font-size: 1.05rem; font-weight: 600; margin-top: 0.15rem; }
.td-gh-value.placeholder { color: #6e7681; font-style: italic; font-weight: 400; }
.td-gh-value.long { color: #3fb950; }
.td-gh-value.short { color: #ff7b72; }
.td-gh-spacer { flex: 1 1 auto; }
.td-panic-btn {
    align-self: center;
    background: #b91c1c;
    color: #fff;
    border: 1px solid #7f1d1d;
    border-radius: 6px;
    padding: 0.55rem 1.4rem;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: background 0.1s ease, transform 0.05s ease;
    box-shadow: 0 0 0 1px rgba(255, 0, 0, 0.18);
}
.td-panic-btn:hover { background: #dc2626; }
.td-panic-btn:active { transform: translateY(1px); }
.td-panic-btn:disabled { background: #6b7280; cursor: not-allowed; opacity: 0.7; }

/* ---- Tabs ---- */
.td-tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid #30363d; margin-bottom: 0; padding-bottom: 0; }
.td-tabs-l1 { background: #0d1117; padding: 0.3rem 0.3rem 0; border-radius: 8px 8px 0 0; border: 1px solid #30363d; border-bottom: none; }
.td-tabs-l2 { background: #161b22; padding: 0.3rem 0.4rem 0; border: 1px solid #30363d; border-top: none; border-radius: 0; }

.td-tab { display: inline-flex; align-items: center; gap: 0.45rem; background: transparent; color: #8b949e; border: 1px solid transparent; border-bottom: 2px solid transparent; padding: 0.45rem 0.85rem; font-size: 0.92rem; cursor: pointer; border-radius: 6px 6px 0 0; }
.td-tab:hover { background: #161b22; color: #c9d1d9; }
.td-tab.active { background: #161b22; color: #58a6ff; border-bottom-color: #58a6ff; font-weight: 600; }
.td-tab[data-soon] { cursor: not-allowed; opacity: 0.55; }
.td-tab[data-soon]:hover { background: transparent; }

.td-tab-label { letter-spacing: 0.02em; }
.td-led { display: inline-block; width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 4px currentColor; }
.td-led.on { background: #3fb950; color: #3fb950; }
.td-led.off { background: #6e3030; color: #ff7b72; box-shadow: none; }
.td-count { display: inline-block; min-width: 18px; padding: 0 0.3rem; background: #1f6feb33; color: #58a6ff; border-radius: 999px; font-size: 0.72rem; font-family: "JetBrains Mono", monospace; text-align: center; }
.td-soon { font-size: 0.65rem; color: #d4a72c; background: #312e09; padding: 0.05rem 0.35rem; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.05em; }

/* ---- Split layout SX/DX ---- */
.td-split { display: grid; grid-template-columns: 360px 1fr; gap: 0.8rem; margin-top: 0; }
.td-pane { background: #161b22; border: 1px solid #30363d; border-top: none; border-radius: 0 0 8px 8px; padding: 0.8rem 1rem; min-height: 540px; }
.td-pane:first-child { border-radius: 0 0 0 8px; }
.td-pane:last-child { border-radius: 0 0 8px 0; }
.td-pane-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.6rem; padding-bottom: 0.5rem; border-bottom: 1px solid #30363d; }
.td-pane-header h3 { margin: 0; font-size: 1rem; color: #f0f6fc; font-weight: 600; }
.td-pane-header h3 span { color: #58a6ff; font-family: "JetBrains Mono", monospace; }

/* ---- SX Live bar SVG (V6.6.5: full width + grid tick + 5s vertical) ---- */
.td-livebar-topinfo {
    display: flex; gap: 1rem; padding: 0.35rem 0.6rem;
    background: #0d1117; border: 1px solid #30363d; border-radius: 6px;
    margin-bottom: 0.5rem; font-family: "JetBrains Mono", monospace; font-size: 0.85rem;
    flex-wrap: wrap;
}
.td-livebar-topinfo .lbinfo { display: flex; gap: 0.35rem; align-items: baseline; }
.td-livebar-topinfo .lbl { color: #8b949e; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; }
.td-livebar-topinfo .val { color: #f0f6fc; font-weight: 600; min-width: 3ch; text-align: right; }
.td-livebar-topinfo .val-buy { color: #3fb950; }
.td-livebar-topinfo .val-sell { color: #ff7b72; }
.td-livebar-topinfo .val.pos { color: #3fb950; }
.td-livebar-topinfo .val.neg { color: #ff7b72; }
.td-livebar-wrap { width: 100%; }
.td-livebar-svg { width: 100%; height: 420px; background: #0d1117; border: 1px solid #30363d; border-radius: 6px; display: block; }

.td-position-overlay { margin-top: 0.7rem; padding: 0.6rem 0.8rem; background: #0d1117; border: 1px dashed #30363d; border-radius: 6px; }
.td-position-overlay h4 { margin: 0 0 0.3rem; font-size: 0.85rem; color: #d4a72c; text-transform: uppercase; letter-spacing: 0.05em; }
.td-position-overlay p { margin: 0; color: #6e7681; font-style: italic; font-size: 0.82rem; }

/* SVG sub-styles */
.sx-grid { stroke: #30363d; stroke-width: 0.4; }
.sx-grid.minor { stroke: #1c2129; stroke-width: 0.3; }
.sx-grid.major { stroke: #30363d; stroke-width: 0.5; stroke-dasharray: 2 4; }
.sx-vgrid { stroke: #2a3a5a; stroke-width: 0.3; }
.sx-axis { fill: #8b949e; font-size: 9px; font-family: "JetBrains Mono", monospace; }
.sx-axis.open { fill: #d4a72c; font-weight: bold; font-size: 11px; }
.sx-axis.fill { fill: #58a6ff; font-weight: bold; font-size: 11px; }
.sx-axis.tp   { fill: #3fb950; font-weight: bold; font-size: 11px; }
.sx-axis.sl   { fill: #ff7b72; font-weight: bold; font-size: 11px; }
.sx-axis-x { fill: #6e7681; font-size: 9px; font-family: "JetBrains Mono", monospace; }
.sx-tick { stroke-width: 0.4; stroke: #0d1117; }
.sx-tick.buy { fill: #3fb950; }
.sx-tick.sell { fill: #ff7b72; }
.sx-tick.unk { fill: #6e7681; }
.sx-current { stroke: #58a6ff; stroke-width: 1; stroke-dasharray: 4 3; }
.sx-empty { fill: #6e7681; font-size: 11px; font-style: italic; }

/* ---- Posizione aperta: FILL / SL / TP overlay ---- */
.sx-pos-line.fill { stroke: #58a6ff; stroke-width: 1.5; }
.sx-pos-line.tp   { stroke: #3fb950; stroke-width: 1.2; stroke-dasharray: 6 4; }
.sx-pos-line.sl   { stroke: #ff7b72; stroke-width: 1.2; stroke-dasharray: 6 4; }
.sx-pos-badge { font-family: "JetBrains Mono", monospace; font-size: 10px; font-weight: bold; }
.sx-pos-badge.fill { fill: #58a6ff; }
.sx-pos-badge.tp   { fill: #3fb950; }
.sx-pos-badge.sl   { fill: #ff7b72; }

/* ---- DX strategy toggle ---- */
.td-strategy-toggle { display: flex; align-items: center; gap: 0.5rem; }
.td-toggle-label { color: #8b949e; font-size: 0.8rem; }
.td-toggle-btn { background: #0d1117; color: #ff7b72; border: 1px solid #6e3030; padding: 0.25rem 0.7rem; border-radius: 4px; cursor: pointer; font-family: "JetBrains Mono", monospace; font-size: 0.78rem; font-weight: 600; }
.td-toggle-btn[data-state="on"] { background: #033a16; color: #3fb950; border-color: #2ea043; }
.td-toggle-btn:hover { filter: brightness(1.1); }

/* ---- DX bars table ---- */
.td-table-wrap { overflow: auto; max-height: 480px; border: 1px solid #30363d; border-radius: 6px; }
.td-bars-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.td-bars-table thead { position: sticky; top: 0; background: #010409; z-index: 1; }
.td-bars-table th, .td-bars-table td { padding: 0.35rem 0.5rem; text-align: right; border-bottom: 1px solid #21262d; font-family: "JetBrains Mono", Consolas, monospace; white-space: nowrap; }
.td-bars-table th { color: #8b949e; font-weight: 600; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; text-align: center; cursor: help; }
.td-bars-table th.td-th-expand, .td-bars-table th.td-th-trade { width: 26px; }
.td-bars-table th.td-th-score { color: #d4a72c; }
.td-bars-table tr:hover { background: #161b22; }

.td-time { text-align: left !important; color: #8b949e; }
.td-range { color: #8b949e; }
.td-dir { text-align: center; font-weight: 600; }
.td-dir-long, .td-dir-up { color: #3fb950; }
.td-dir-short, .td-dir-down { color: #ff7b72; }
.td-dir-doji { color: #d4a72c; }
/* TOTAL score colorato per tier sizing (V6.6.5 debug):
   tier0 (<78)   = no trade,  grigio
   tier1 (78-82) = 1/3 nominal, verde chiaro
   tier2 (83-87) = 2/3 nominal, verde medio (intensità testo + sfondo soft)
   tier3 (>=88)  = full nominal, verde acceso (testo + sfondo evidenti) */
.td-score-total { font-weight: 700; }
.td-score-total.td-score-tier0 { color: #6e7681; }
.td-score-total.td-score-tier1 { color: #7ee787; }
.td-score-total.td-score-tier2 { color: #3fb950; background: #033a1655; }
.td-score-total.td-score-tier3 { color: #d4ffe0; background: #2ea04388; box-shadow: inset 0 0 0 1px #3fb950; border-radius: 4px; }
.td-tbd { color: #6e7681; font-style: italic; }

.td-expand-cell { text-align: center !important; padding: 0 !important; }
.td-expand-btn { background: transparent; color: #8b949e; border: none; cursor: pointer; font-size: 0.75rem; padding: 0 0.3rem; }
.td-expand-btn:hover { color: #58a6ff; }

/* ---- Righe posizione (open/close) interleaved tra le bar ---- */
.td-pos-row td.td-pos-cell {
    text-align: left !important;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.4rem 0.7rem;
    border-left: 3px solid transparent;
}
.td-pos-row.td-pos-open td.td-pos-cell {
    background: #161b22;
    color: #d4a72c;
    border-left-color: #d4a72c;
}
.td-pos-cell .pos-dir-long  { color: #3fb950; font-weight: 700; }
.td-pos-cell .pos-dir-short { color: #ff7b72; font-weight: 700; }
.td-pos-row.td-pos-close td.td-pos-cell {
    background: #0d1117;
    color: #58a6ff;
    border-left-color: #58a6ff;
}
.td-pos-row.td-pos-close.td-pos-close-win td.td-pos-cell {
    background: #033a16;
    color: #3fb950;
    border-left-color: #3fb950;
}
.td-pos-row.td-pos-close.td-pos-close-loss td.td-pos-cell {
    background: #490202;
    color: #ff7b72;
    border-left-color: #ff7b72;
}
.td-pos-row.td-pos-close.td-pos-close-flat td.td-pos-cell {
    background: #161b22;
    color: #58a6ff;
    border-left-color: #58a6ff;
}

/* ---- Espansione bar (V6.6.5: SCORE-allineato con riga compressa) ---- */
.td-expansion { background: #010409; }
.td-expansion td { padding: 0.25rem 0.5rem !important; font-size: 0.76rem; }
.td-no-cells { color: #6e7681; font-style: italic; font-size: 0.8rem; }
.td-exp-header th { background: #0d1117; color: #8b949e; text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.04em; text-align: right; padding: 0.3rem 0.5rem !important; border-bottom: 1px solid #30363d; }
.td-exp-header th:first-child { text-align: center; }
.td-exp-cap { color: #8b949e; font-weight: 700; text-align: left !important; }
.td-exp-level-num { text-align: center !important; color: #6e7681; }
.td-exp-price { color: #f0f6fc; font-weight: 600; }
.td-exp-sell  { color: #ff7b72; }
.td-exp-buy   { color: #3fb950; }
.td-exp-tot   { color: #c9d1d9; }
.td-exp-delta.pos { color: #3fb950; }
.td-exp-delta.neg { color: #ff7b72; }
.td-exp-spacer { background: #010409; border-left: 1px solid #21262d; border-right: 1px solid #21262d; }
.td-exp-flag { color: #6e7681; }
.td-exp-flag .exp-ok { color: #3fb950; font-weight: 700; }
.td-exp-flag .exp-pct { color: #58a6ff; }
.td-exp-flag .exp-va { color: #d4a72c; letter-spacing: -1px; }

/* ---- Imbalance grafici (V6.6.5): rettangoli verde/rosso che span 2 livelli ---- */
.td-exp-imb-cell { position: relative; padding: 0 !important; }
.exp-imb-box {
    position: absolute; left: 25%; right: 25%;
    top: 0; bottom: 0;
}
.exp-imb-box.exp-imb-long  { background: #3fb950cc; box-shadow: inset 0 0 0 1px #2ea04388; }
.exp-imb-box.exp-imb-short { background: #ff7b72cc; box-shadow: inset 0 0 0 1px #f85149aa; }
/* Una cella e' "edge-top" se la diagonale parte qui (= top di una sola diagonale, niente partner sopra) */
.exp-imb-box.exp-imb-edge-top { top: 25%; bottom: -1px; border-radius: 4px 4px 0 0; }
/* "edge-bot" = bot di una diagonale (= chiusura): rect parte da top:-1 a bot 75% */
.exp-imb-box.exp-imb-edge-bot { top: -1px; bottom: 25%; border-radius: 0 0 4px 4px; }
/* "mid" = cella che e' simultaneamente bot di una diag e top della successiva: blocco continuo */
.exp-imb-box.exp-imb-mid { top: -1px; bottom: -1px; }
.td-exp-sum td { background: #161b22; color: #c9d1d9; font-weight: 600; border-top: 1px solid #30363d; }
.td-exp-score td { background: #1c2129; color: #d4a72c; font-weight: 700; }
.td-exp-score-cell { text-align: right; }
.td-exp-total td.td-exp-totalcell { background: #1f2937; color: #d4a72c; text-align: center; font-weight: 700; font-size: 0.85rem; padding: 0.5rem !important; letter-spacing: 0.05em; }

@media (max-width: 1100px) {
    .td-split { grid-template-columns: 1fr; }
    .td-pane { border-radius: 0 0 8px 8px; }
}