/* Technicals tab — extracted from styles.css */
/* ═══════════════════════════════════════════════════════════════════════
   TECHNICAL ANALYSIS TAB
   ═══════════════════════════════════════════════════════════════════════ */

.ta-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.ta-tf-pills {
    display: flex;
    gap: 4px;
}

.ta-tf-pill {
    padding: 6px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.ta-tf-pill:hover { border-color: var(--border-active); color: var(--text-primary); }
.ta-tf-pill.active { background: rgba(255,255,255,0.08); border-color: var(--border-active); color: var(--text-primary); font-weight: 600; }

.ta-view-toggle {
    display: flex;
    gap: 4px;
}

.ta-view-btn {
    padding: 6px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.ta-view-btn:hover { border-color: var(--border-active); color: var(--text-primary); }
.ta-view-btn.active { background: rgba(0,240,255,0.08); border-color: var(--neon-cyan); color: var(--neon-cyan); font-weight: 600; }

/* Gauges row */
.ta-gauges-row {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-bottom: 32px;
}

.ta-gauge {
    text-align: center;
    flex: 0 0 200px;
}

.ta-gauge-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.ta-gauge-svg {
    width: 240px;
    height: 140px;
}

.ta-gauge-label {
    font-size: 20px;
    font-weight: 700;
    margin-top: -4px;
    margin-bottom: 10px;
}

.ta-gauge-counts {
    display: flex;
    justify-content: space-around;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
}

.ta-gauge-counts span {
    line-height: 1.5;
}

.ta-sell-count { color: #b05252; }
.ta-buy-count { color: #4d9e6e; }
.ta-neutral-count { color: var(--text-muted); }

/* Tables */
.ta-tables-row {
    display: flex;
    gap: 24px;
}

.ta-table-col {
    flex: 1;
}

.ta-table-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.ta-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    font-family: var(--font-body, 'Inter', sans-serif);
}

.ta-table th {
    text-align: left;
    color: var(--text-muted);
    font-weight: 500;
    padding: 5px 8px;
    border-bottom: 1px solid var(--border);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ta-table th:nth-child(2),
.ta-table th:nth-child(3) {
    text-align: right;
}

.ta-table td {
    padding: 5px 8px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    color: var(--text-secondary);
}

.ta-table td.ta-val {
    text-align: right;
    color: var(--text-primary);
}

.ta-table td.ta-buy     { text-align: right; color: var(--gain);      font-weight: 600; }
.ta-table td.ta-sell    { text-align: right; color: var(--loss);      font-weight: 600; }
.ta-table td.ta-neutral { text-align: right; color: var(--text-muted); font-weight: 500; }

/* ── AI Summary Panel (ta-ai-*) ─────────────────────────────────────────────── */

.ta-ai-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 6px;
    max-width: 100%;
}

/* Two-column paired layout (Key Levels|Volume, Momentum|MAs, Setup|Risk) */
.ta-ai-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: start;
}

/* 2-col KV grid for use inside a half-width column */
.ta-ai-kv-grid--2col {
    grid-template-columns: repeat(2, 1fr) !important;
}

/* Stale banner */
.ta-ai-stale {
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.30);
    border-radius: var(--radius-sm);
    padding: 7px 14px;
    font-size: 14px;
    color: #f59e0b;
    letter-spacing: 0.2px;
}

/* Header card */
.ta-ai-header {
    background: linear-gradient(135deg, rgba(0,240,255,0.05) 0%, rgba(0,240,255,0.01) 100%);
    border: 1px solid rgba(0,240,255,0.18);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ta-ai-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ta-ai-badge {
    font-size: 14px;
    font-weight: 700;
    color: var(--neon-cyan);
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.ta-ai-date {
    font-size: 14px;
    color: var(--text-muted);
}

.ta-ai-header-signals {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ta-ai-signal-pill {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    border-radius: var(--radius-full);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    border: 1px solid transparent;
    flex-shrink: 0;
}

.ta-ai-conf {
    font-size: 14px;
    color: var(--text-muted);
}
.ta-ai-conf strong {
    color: var(--text-secondary);
    font-weight: 600;
}

.ta-ai-align {
    font-size: 14px;
    color: var(--text-muted);
    font-style: italic;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    line-height: 1.5;
}

/* Section cards */
.ta-ai-section {
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 13px 15px;
}

.ta-ai-section-label {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-bottom: 10px;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--border);
}

.ta-ai-prose {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-secondary);
    margin: 0;
}

/* Timeframe grid */
.ta-ai-tf-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.ta-ai-tf-card {
    background: rgba(255,255,255,0.025);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
}

.ta-ai-tf-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.ta-ai-tf-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.ta-ai-tf-desc {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.55;
}

/* KV grid — 3 columns for dense sections */
.ta-ai-kv-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.ta-ai-kv {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 9px 11px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.ta-ai-kv-label {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    white-space: nowrap;
}

.ta-ai-kv-value {
    font-size: 14px;
    color: var(--text-primary);
    line-height: 1.4;
    word-break: break-word;
}

.ta-ai-kv-full {
    grid-column: 1 / -1;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.55;
    padding-top: 6px;
    border-top: 1px solid var(--border);
    margin-top: 2px;
}

.ta-ai-italic { font-style: italic; }

/* Trade setup — hero metric layout */
.ta-ai-setup {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Bias pill: auto-width, not full-stretch */
.ta-ai-setup > .ta-ai-signal-pill {
    align-self: flex-start;
    font-size: 14px;
    padding: 5px 16px;
}

/* Trade setup KV: 4 columns for entry/stop/t1/t2 */
.ta-ai-setup-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    margin-top: 2px;
}

.ta-ai-setup-grid .ta-ai-kv {
    border-color: rgba(0,240,255,0.10);
    background: rgba(0,240,255,0.03);
}

.ta-ai-setup-grid .ta-ai-kv-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.ta-ai-invalidation {
    font-size: 14px;
    color: var(--loss);
    font-style: italic;
    padding-top: 4px;
    opacity: 0.85;
}

/* Caution flags */
.ta-ai-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding-top: 2px;
}

.ta-ai-flag {
    background: rgba(176, 82, 82, 0.09);
    border: 1px solid rgba(176, 82, 82, 0.22);
    border-radius: var(--radius-sm);
    padding: 3px 10px;
    font-size: 14px;
    color: var(--loss);
    line-height: 1.4;
}

/* Footer row (patterns + events side by side) */
.ta-ai-footer-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.ta-ai-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.ta-ai-tag {
    background: rgba(0,240,255,0.04);
    border: 1px solid rgba(0,240,255,0.12);
    border-radius: var(--radius-sm);
    padding: 3px 10px;
    font-size: 14px;
    color: var(--text-secondary);
}

/* Key price levels table */
/* Key Price Levels table — responsive */
.ta-ai-levels-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.ta-ai-levels-table {
    width: 100%;
    min-width: 320px;
    border-collapse: collapse;
}
.ta-ai-levels-table th,
.ta-ai-levels-table td {
    font-size: 14px;
    padding: 5px 8px;
    white-space: nowrap;
}
/* TYPE column */
.ta-ai-levels-table th:nth-child(1),
.ta-ai-levels-table td:nth-child(1) { width: 30%; }
/* LEVEL column */
.ta-ai-levels-table td:nth-child(2) {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: 14px;
    text-align: right;
    width: 22%;
}
/* SOURCE column — truncate on small screens */
.ta-ai-levels-table td:nth-child(3) {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-muted);
    font-size: 14px;
}
/* STRENGTH column — monospace dots */
.ta-ai-levels-table th:nth-child(4),
.ta-ai-levels-table td:nth-child(4) {
    font-family: monospace;
    color: var(--text-muted);
    letter-spacing: 2px;
    text-align: center;
    width: 14%;
}
/* Hide Strength column on narrow panels */
@media (max-width: 600px) {
    .ta-ai-levels-table th:nth-child(4),
    .ta-ai-levels-table td:nth-child(4) { display: none; }
    .ta-ai-levels-table td:nth-child(3) { max-width: 80px; }
}

/* Placeholder (no data yet) */
.ta-ai-placeholder {
    text-align: center;
    padding: 52px 24px;
    background: rgba(0,240,255,0.015);
    border: 1px dashed rgba(0,240,255,0.12);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.ta-ai-ph-icon { font-size: 38px; }

.ta-ai-ph-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.2px;
}

.ta-ai-ph-sub {
    font-size: 14px;
    color: var(--text-muted);
    max-width: 340px;
    line-height: 1.6;
}

/* Responsive */
@media (max-width: 900px) {
    .ta-ai-setup-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 768px) {
    .ta-ai-two-col      { grid-template-columns: 1fr; }
    .ta-ai-tf-row       { grid-template-columns: 1fr; }
    .ta-ai-kv-grid      { grid-template-columns: repeat(2, 1fr); }
    .ta-ai-kv-grid--2col{ grid-template-columns: 1fr !important; }
    .ta-ai-footer-row   { grid-template-columns: 1fr; }
    .ta-ai-setup-grid   { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
    .ta-ai-kv-grid      { grid-template-columns: 1fr; }
    .ta-ai-kv-grid--2col{ grid-template-columns: 1fr !important; }
    .ta-ai-setup-grid   { grid-template-columns: 1fr !important; }
}


/* Chart view */
.ta-overlay-toggles {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.ta-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
}

.ta-toggle input[type="checkbox"] {
    accent-color: var(--neon-cyan);
}

.ta-ohlc-legend {
    font-size: 13px;
    font-family: var(--font-body, 'Inter', sans-serif);
    color: var(--text-primary);
    padding: 6px 0;
    letter-spacing: 0.3px;
}

.ta-ohlc-legend span {
    margin-right: 4px;
}

#ta-lw-main, #ta-lw-rsi, #ta-lw-macd {
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.ta-panel-label {
    position: absolute;
    top: 6px;
    left: 8px;
    font-size: 11px;
    color: rgba(255,255,255,0.35);
    z-index: 2;
    pointer-events: none;
    font-family: var(--font-body, 'Inter', sans-serif);
}

/* Chart row: main charts + right indicator panel */
.ta-chart-row {
    display: flex;
    gap: 0;
}

.ta-chart-col {
    flex: 1;
    min-width: 0;
}

.ta-indicators-panel {
    width: 90px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    border-left: 1px solid var(--border);
    background: rgba(0,0,0,0.1);
}

.ta-ind-item {
    font-size: 11px;
    font-family: var(--font-body, 'Inter', sans-serif);
    color: rgba(255,255,255,0.2);
    cursor: pointer;
    padding: 4px 0;
    transition: color 0.15s ease, opacity 0.15s ease;
    user-select: none;
    white-space: nowrap;
}

.ta-ind-item:hover {
    color: rgba(255,255,255,0.5);
}

.ta-ind-item.active {
    color: var(--ind-color, var(--text-primary));
    font-weight: 600;
}

/* Hide Lightweight Charts watermark */
#ta-lw-main a[href*="tradingview"],
#ta-lw-rsi a[href*="tradingview"],
#ta-lw-macd a[href*="tradingview"],
#ta-lw-main div[style*="bottom: 4px"],
#ta-lw-rsi div[style*="bottom: 4px"],
#ta-lw-macd div[style*="bottom: 4px"] {
    display: none !important;
}

.ta-rsi-val, .ta-rsi-ma-val {
    font-family: var(--font-mono);
    font-weight: 600;
}