/**
 * #34 SP500 五日收盤通道 — 只放 .ssp-* 沒涵蓋的部分。
 *
 * 顏色全部走 brand-system.css 的 token。漲跌色沿用 --color-market-up/down
 * （light #CC0000 / #009900、dark #FF0000 / #00FF00），與聊天 tab 報價表同調。
 * 橘色依品牌政策只留給 active / 選中，不拿來畫資料；三條指標線用系統裡的
 * --color-info 藍，中線以虛線區分（不另外發明顏色）。
 */

.uc-wrap { display: flex; flex-direction: column; height: 100%; overflow: hidden; }

.uc-head {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 7px 12px; flex-shrink: 0;
    border-bottom: 1px solid var(--color-border-subtle);
    background: var(--quote-panel-surface, var(--color-bg-tertiary));
}
.uc-title { font-size: 13px; font-weight: 600; }
.uc-sub { font-size: 11.5px; color: var(--color-text-muted); }
.uc-spacer { flex: 1; }

.uc-search {
    font: inherit; font-size: 12.5px; width: 150px;
    color: var(--color-text-primary);
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-default);
    border-radius: 7px; padding: 4px 9px;
}
.uc-search:focus-visible {
    outline: 2px solid var(--color-accent); outline-offset: 1px;
    border-color: var(--color-accent);
}

.uc-pill {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11.5px; color: var(--color-text-secondary);
    background: var(--color-bg-hover); border-radius: 10px; padding: 2px 8px;
    font-variant-numeric: tabular-nums;
}
.uc-pill b { font-weight: 500; color: var(--color-text-primary); }
.uc-sw { width: 11px; height: 3px; border-radius: 2px; flex: none; background: var(--color-info); }
.uc-sw-dash {
    width: 11px; height: 0; flex: none;
    border-top: 3px dashed var(--color-text-secondary);
}

/* 走勢圖最後一根還沒收完的 K 棒 —— 圖例列的對應標籤。
   圖上是虛線框 + 垂直虛線,這裡是文字,兩邊同一件事。 */
.uc-livetag {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11.5px; font-style: italic;
    color: var(--color-text-secondary);
    border: 1px dashed var(--color-border-default); border-radius: 10px;
    padding: 1px 8px;
    font-variant-numeric: tabular-nums;
}
.uc-livetag[hidden] { display: none; }

.uc-seg { display: inline-flex; background: var(--color-bg-hover); border-radius: 7px; padding: 2px; gap: 2px; }
.uc-seg button {
    font: inherit; font-size: 12px; color: var(--color-text-tertiary);
    background: none; border: 0; border-radius: 5px; padding: 3px 9px; cursor: pointer;
}
.uc-seg button[aria-pressed="true"] {
    background: var(--color-bg-tertiary); color: var(--color-text-primary); font-weight: 500;
}
.uc-seg button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }

.uc-tbl-wrap { flex: 1; overflow: auto; }
.uc-tbl-wrap::-webkit-scrollbar { width: 6px; height: 6px; }
.uc-tbl-wrap::-webkit-scrollbar-track { background: var(--quote-panel-bg, var(--color-bg-page)); }
.uc-tbl-wrap::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 3px; }

.uc-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; min-width: 1000px; }
.uc-table th {
    position: sticky; top: 0; z-index: 6; text-align: center;
    font-size: 12px; font-weight: 500; letter-spacing: .02em;
    color: var(--quote-table-header-text, var(--color-text-secondary));
    background: var(--quote-table-header-bg, var(--color-bg-hover));
    padding: 5px 10px; border-bottom: 1px solid var(--color-border-default); white-space: nowrap;
}
.uc-table td {
    padding: 7px 12px; text-align: right; white-space: nowrap;
    border-bottom: 1px solid var(--color-border-default);
    color: var(--quote-table-text, var(--color-text-primary));
    font-variant-numeric: tabular-nums;
}
.uc-table tbody tr { cursor: pointer; }
.uc-table tbody tr:nth-child(even) td { background: var(--quote-row-alt-bg, var(--color-bg-secondary)); }
.uc-table tbody tr:hover td { background: var(--color-bg-hover); }
.uc-table tbody tr.uc-on td { background: var(--color-accent-subtle); }
.uc-table tbody tr:last-child td { border-bottom: 0; }

/* 凍結「#」與「代號」兩欄 —— 與 .ssp-table 的動態凍結同精神，
   但這張表欄寬固定，所以 left 可以寫死。
   背景必須是**不透明**的預混合色（禁 rgba）：水平捲動時會透出底下的欄位。 */
.uc-c-rank, .uc-c-tkr {
    position: sticky; z-index: 5;
    background: var(--quote-panel-surface, var(--color-bg-tertiary));
}
.uc-c-rank { left: 0; width: 46px; color: var(--color-text-muted); font-size: 11.5px; }
.uc-c-tkr { left: 46px; width: 84px; text-align: left; font-weight: 500; }
.uc-table tbody tr:nth-child(even) .uc-c-rank,
.uc-table tbody tr:nth-child(even) .uc-c-tkr { background: var(--quote-row-alt-bg, var(--color-bg-secondary)); }
.uc-table tbody tr:hover .uc-c-rank,
.uc-table tbody tr:hover .uc-c-tkr { background: var(--color-bg-hover); }
.uc-table tbody tr.uc-on .uc-c-rank,
.uc-table tbody tr.uc-on .uc-c-tkr { background: var(--color-accent-subtle); }
.uc-table th.uc-c-rank, .uc-table th.uc-c-tkr {
    z-index: 7; background: var(--quote-table-header-bg, var(--color-bg-hover));
}

.uc-c-name {
    text-align: left; color: var(--color-text-secondary);
    max-width: 200px; overflow: hidden; text-overflow: ellipsis;
}
.uc-grp { border-left: 1px solid var(--color-border-default); }

.uc-up { color: var(--color-market-up); }
.uc-dn { color: var(--color-market-down); }
.uc-zz { color: var(--color-text-muted); }

.uc-chart { flex: 1; min-height: 0; }
.uc-msg {
    display: flex; align-items: center; justify-content: center; height: 100%;
    padding: 24px; text-align: center; line-height: 1.7;
    color: var(--color-text-secondary); font-size: 13px;
}
/* 畫不出通道線的票（沒有 raw_close_price）在代號後面點一個灰點，
   點進去會說明原因 —— 不要讓使用者點了得到空圖卻不知道為什麼。 */
.uc-nochart {
    display: inline-block; width: 5px; height: 5px; border-radius: 50%;
    background: var(--color-text-muted); opacity: .4; margin-left: 5px; vertical-align: middle;
}

/* 盤中現價 ─ 那根 K 棒還沒收完時標成斜體，與已確定的數字區分 */
.uc-table td.uc-px { font-weight: 500; }
.uc-table td.uc-px.uc-live { font-style: italic; }
.uc-table td.uc-chg { font-variant-numeric: tabular-nums; }

/* ── 均線（5/10/20/60 根 30 分 K） ─────────────────────────
   顏色避開紅綠（K 棒漲跌）與藍（通道線）。粉與紫在色盲下相近，
   所以圖上另外用「線寬依週期遞增」當第二層編碼（見 UsChannelPanel.js）。
   深淺色都看得清楚，所以兩個主題共用同一組；要分再在 dark 區塊覆寫。 */
:root {
    --uc-ma5:  #F59E0B;   /* 琥珀 */
    --uc-ma10: #EC4899;   /* 粉 */
    --uc-ma20: #A855F7;   /* 紫 */
    --uc-ma60: #14B8A6;   /* 青 */
}

.uc-mas { display: inline-flex; align-items: center; gap: 4px; }
.uc-ma {
    font: inherit; cursor: pointer; border: 0;
    line-height: normal;
}
.uc-ma:hover { background: var(--color-bg-active, var(--color-bg-hover)); }
.uc-ma:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
/* 關掉的那條:整顆變淡 + 色塊只剩外框,一眼看得出是關著的 */
.uc-ma.uc-off { opacity: 0.45; }
.uc-ma.uc-off .uc-sw { background: transparent !important; box-shadow: inset 0 0 0 1px currentColor; }

.uc-sw-ma5  { background: var(--uc-ma5); }
.uc-sw-ma10 { background: var(--uc-ma10); }
.uc-sw-ma20 { background: var(--uc-ma20); }
.uc-sw-ma60 { background: var(--uc-ma60); }