/* frontend-tv/styles.css — TradingView pivot dark theme.
 *
 * Reuses the color palette + sidebar/alert/watchlist styles from
 * frontend/src/styles/app.css (KLineChart era). The grid is simpler:
 * TV's widget provides its own topbar + tool rail, so we only need
 * a 2-column layout (chart | sidebar).
 */

:root {
  --bg-0: #0a0a0a; --bg-1: #0d0d0d; --bg-2: #111;
  --bg-3: #1a1a1a; --border: #1f1f1f; --border-2: #2a2a2a;
  --text-0: #fafafa; --text-1: #ccc; --text-2: #888; --text-3: #555;
  --accent: #26a69a; --alert: #FF3B30; --note: #666; --selected: #FFD700;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; background: var(--bg-0);
              color: var(--text-0); font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }

#app { display: grid; grid-template-columns: 1fr 320px;
       height: 100vh; width: 100vw; }
#tv_chart_container { background: #050505; min-width: 0; min-height: 0; }
#sidebar { background: var(--bg-1); border-left: 1px solid var(--border);
            display: grid; grid-template-rows: minmax(0, 1.1fr) 4px minmax(0, 0.9fr);
            overflow: hidden; }

.section-header { padding: 8px 12px; border-bottom: 1px solid var(--border);
                   display: flex; justify-content: space-between;
                   font-size: 10px; color: var(--text-2); text-transform: uppercase;
                   letter-spacing: 0.05em; font-weight: 600; }
.section-header .count { background: rgba(38,166,154,0.13); color: var(--accent);
                          padding: 1px 6px; border-radius: 8px; font-size: 10px; }

.alerts-section { display: grid; grid-template-rows: auto 1fr; min-height: 0; overflow: hidden; }
.alert-list { overflow-y: auto; }

.alert-row { padding: 7px 12px; border-bottom: 1px solid #161616; cursor: pointer;
              display: grid; grid-template-columns: 1fr auto; gap: 4px; }
.alert-row:hover { background: var(--bg-3); }
.alert-row .row1 { display: flex; align-items: center; gap: 7px; grid-column: 1/3;
                    font-family: 'JetBrains Mono', monospace; font-size: 11px; }
.alert-row .line-icon { width: 18px; color: #FF6B5C; font-size: 10px;
                         font-family: 'JetBrains Mono', monospace; text-align: center; }
.alert-row .ticker { font-weight: 600; color: var(--text-0); }
.alert-row .price  { color: #FF6B5C; font-weight: 600; }
.alert-row .row2   { font-size: 10px; color: var(--text-3); padding-left: 26px;
                      grid-column: 1/2; }
.alert-row .channel { background: var(--bg-3); padding: 1px 5px; border-radius: 2px;
                       font-family: 'JetBrains Mono', monospace; color: var(--text-2); }
.alert-row .actions { grid-column: 2; display: flex; gap: 4px; opacity: 0;
                       transition: opacity 0.1s; }
.alert-row:hover .actions { opacity: 1; }
.action-btn { width: 18px; height: 18px; display: flex; align-items: center;
               justify-content: center; border-radius: 2px; color: var(--text-2);
               cursor: pointer; font-size: 11px; }
.action-btn:hover { background: var(--border-2); color: var(--text-0); }

.split-handle { background: var(--border); cursor: ns-resize; position: relative; }
.split-handle::after { content: ''; position: absolute; left: 50%; top: 50%;
                        transform: translate(-50%, -50%); width: 18px; height: 1px;
                        background: var(--text-3); }

/* ----- Watchlist sidebar ------------------------------------------------- */
.watchlist { display: grid; grid-template-rows: auto auto auto 1fr; min-height: 0; overflow: hidden; }
.watch-list { overflow-y: auto; }
.wl-tabs { display: flex; gap: 1px; padding: 4px 6px;
            background: #050505; border-bottom: 1px solid #161616; overflow-x: auto; }
.wl-tab  { padding: 3px 8px; border-radius: 3px; font-size: 10px; font-weight: 600;
            color: var(--text-2); cursor: pointer;
            font-family: 'JetBrains Mono', monospace; flex-shrink: 0; }
.wl-tab:hover { background: var(--bg-3); color: var(--text-1); }
.wl-tab.active { background: rgba(38,166,154,0.13); color: var(--accent); }
.wl-tab.add { color: var(--text-3); }

.col-headers { display: grid; grid-template-columns: 1fr 64px 56px;
                gap: 6px; padding: 5px 10px; background: #050505;
                border-bottom: 1px solid #161616;
                font-size: 9px; color: var(--text-3); text-transform: uppercase;
                letter-spacing: 0.04em; font-weight: 600;
                font-family: 'JetBrains Mono', monospace; }
.col-headers > span { cursor: pointer; user-select: none; }
.col-headers > span:hover { color: var(--text-1); }
.col-headers .col-num { text-align: right; }
.col-headers .sort-arrow { color: var(--accent); }

.watch-row { padding: 4px 10px; border-bottom: 1px solid #161616; cursor: pointer;
              display: grid; grid-template-columns: 1fr 64px 56px;
              gap: 6px; align-items: center;
              font-family: 'JetBrains Mono', monospace; font-size: 11px; }
.watch-row:hover { background: var(--bg-3); }
.watch-row.active { background: rgba(38,166,154,0.07);
                     border-left: 2px solid var(--accent); padding-left: 8px; }
.watch-row .w-ticker { color: var(--text-0); font-weight: 600;
                        display: flex; align-items: center; gap: 6px; }
.watch-row .w-ticker .star { color: var(--text-3); font-size: 9px; }
.watch-row .w-ticker .star.on { color: var(--selected); }
.watch-row .w-price { color: var(--text-1); text-align: right; }
.watch-row .w-chg   { font-size: 10px; text-align: right; }
.watch-row .w-chg.up { color: var(--accent); }
.watch-row .w-chg.dn { color: #FF6B5C; }

.wl-header { padding: 8px 12px; border-bottom: 1px solid var(--border);
              display: flex; justify-content: space-between; align-items: center;
              font-size: 10px; color: var(--text-2); text-transform: uppercase;
              letter-spacing: 0.05em; font-weight: 600; }
.wl-header .wl-active { display: flex; align-items: center; gap: 4px;
                         color: var(--text-0); font-weight: 700; }
.wl-header .wl-tools { display: flex; gap: 6px; color: var(--text-3); }
.wl-header .wl-tool  { cursor: pointer; }
.wl-header .wl-tool:hover { color: var(--text-1); }

.wgroup-header { padding: 4px 10px; background: #060606;
                  font-size: 10px; color: var(--text-2); text-transform: uppercase;
                  letter-spacing: 0.04em; font-weight: 600;
                  display: flex; gap: 6px; align-items: center; cursor: pointer;
                  border-bottom: 1px solid #161616; }
.wgroup-header .gcount { margin-left: auto; color: var(--text-3); }

.wl-ctx-menu { position: fixed; background: #1a1a1a;
                border: 1px solid #2a2a2a; border-radius: 4px;
                padding: 4px 0; z-index: 1000; min-width: 200px;
                font-size: 11px; color: #ccc;
                font-family: 'JetBrains Mono', monospace; }
.wl-ctx-menu > div { padding: 6px 12px; cursor: pointer; }
.wl-ctx-menu > div:hover { background: rgba(38,166,154,0.13); }
.wl-ctx-menu > div.danger { color: #FF6B5C; }