/* ============================================================
   Ops UI Framework — components.css
   Badge / Card / KPI / Table / Tabs / Toolbar / Modal / Dialog /
   Loading / Notification / Chart
   ============================================================ */

/* ---------- Badge ---------- */
.ui-badge{display:inline-block;padding:2px 9px;border-radius:var(--r-pill);font-size:var(--fs-xs);font-weight:var(--fw-semi);white-space:nowrap}
.ui-badge--pos{background:var(--pos-bg);color:var(--pos)}
.ui-badge--neg{background:var(--neg-bg);color:var(--neg)}
.ui-badge--warn{background:var(--warn-bg);color:var(--warn)}
.ui-badge--info{background:var(--blue-bg);color:var(--blue)}
.ui-badge--mut{background:var(--mut-bg);color:var(--mut)}

/* ---------- Card ---------- */
.ui-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r3);padding:var(--s4)}
.ui-card__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--s2)}
.ui-card__title{font-weight:var(--fw-semi)}
.ui-card__sub{color:var(--mut);font-size:var(--fs-sm)}

/* ---------- KPI ---------- */
.ui-kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r3);padding:13px 14px}
.ui-kpi__lbl{color:var(--mut);font-size:var(--fs-xs);margin-bottom:var(--s1)}
.ui-kpi__val{font-size:var(--fs-2xl);font-weight:var(--fw-semi)}

/* ---------- Table ---------- */
.ui-table{width:100%;border-collapse:collapse;font-size:var(--fs-md)}
.ui-table th,.ui-table td{text-align:right;padding:6px 9px;border-bottom:1px solid var(--line);white-space:nowrap}
.ui-table th:first-child,.ui-table td:first-child{text-align:left}
.ui-table th{color:var(--mut);font-weight:var(--fw-med);font-size:var(--fs-xs);text-transform:uppercase}
.ui-table tbody tr:hover{background:var(--card-hi)}

/* ---------- Tabs ---------- */
.ui-tabs{display:flex;gap:var(--s1);border-bottom:1px solid var(--line);margin-bottom:var(--s4)}
.ui-tab{padding:7px 14px;color:var(--mut);cursor:pointer;border-bottom:2px solid transparent;font-size:var(--fs-md)}
.ui-tab:hover{color:var(--fg)}
.ui-tab.active{color:var(--accent);border-bottom-color:var(--accent)}

/* ---------- Toolbar ---------- */
.ui-toolbar{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center;margin-bottom:var(--s4)}
.ui-toolbar label{color:var(--mut);font-size:var(--fs-sm)}

/* ---------- Modal / Dialog ---------- */
.ui-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:100;animation:ui-fade .12s ease}
.ui-modal{background:var(--panel);border:1px solid var(--line);border-radius:var(--r3);box-shadow:var(--shadow);max-width:min(720px,92vw);max-height:86vh;overflow:auto;width:100%}
.ui-modal__head{display:flex;justify-content:space-between;align-items:center;padding:var(--s4);border-bottom:1px solid var(--line)}
.ui-modal__title{font-weight:var(--fw-semi);font-size:var(--fs-lg)}
.ui-modal__x{background:transparent;border:0;color:var(--mut);font-size:18px;line-height:1;padding:2px 6px}
.ui-modal__x:hover{color:var(--fg)}
.ui-modal__body{padding:var(--s4)}
.ui-modal__foot{padding:var(--s3) var(--s4);border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:var(--s2)}
.ui-dialog{max-width:min(420px,92vw)}
.ui-dialog__msg{color:var(--fg);font-size:var(--fs-base);line-height:1.5}
@keyframes ui-fade{from{opacity:0}to{opacity:1}}

/* ---------- Loading ---------- */
.ui-loading{display:flex;align-items:center;gap:var(--s2);color:var(--mut);padding:var(--s3) 0;font-size:var(--fs-md)}
.ui-spinner{width:14px;height:14px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:ui-spin .7s linear infinite;display:inline-block}
@keyframes ui-spin{to{transform:rotate(360deg)}}

/* ---------- Notification (toast) ---------- */
.ui-toasts{position:fixed;top:var(--s4);right:var(--s4);display:flex;flex-direction:column;gap:var(--s2);z-index:200;max-width:340px}
.ui-toast{background:var(--panel);border:1px solid var(--line);border-left-width:3px;border-radius:var(--r2);padding:10px 12px;font-size:var(--fs-md);box-shadow:var(--shadow);animation:ui-slide .16s ease}
.ui-toast--info{border-left-color:var(--blue)}
.ui-toast--ok{border-left-color:var(--pos)}
.ui-toast--warn{border-left-color:var(--warn)}
.ui-toast--err{border-left-color:var(--neg)}
@keyframes ui-slide{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}

/* ---------- Chart ---------- */
.ui-chart{background:var(--card);border:1px solid var(--line);border-radius:var(--r3);padding:var(--s3);margin-bottom:var(--s3)}
.ui-chart__cap{font-size:var(--fs-sm);color:var(--mut);margin-bottom:var(--s2)}
.ui-chart svg{display:block;width:100%;height:auto}

/* ---------- Log / code pane ---------- */
.ui-log{background:#0a0d12;border:1px solid var(--line);border-radius:var(--r2);padding:var(--s3);font-family:var(--mono);font-size:var(--fs-sm);line-height:1.5;max-height:60vh;overflow:auto;white-space:pre-wrap;word-break:break-all}

/* ---------- Markdown ---------- */
.ui-md h1{font-size:var(--fs-3xl)} .ui-md h2{border:0;color:var(--fg);margin-top:var(--s4)}
.ui-md code{background:#0a0d12;padding:1px 5px;border-radius:4px;font-family:var(--mono)}
.ui-md pre{background:#0a0d12;padding:var(--s3);border-radius:var(--r2);overflow:auto}
.ui-md table{border-collapse:collapse;margin:var(--s3) 0}
.ui-md td{border:1px solid var(--line);padding:5px 9px}

/* ---------- Display-only slider (Strategy Lab) ---------- */
.ui-slider{margin:var(--s3) 0}
.ui-slider__lbl{display:flex;justify-content:space-between;font-size:var(--fs-md);margin-bottom:var(--s2)}
.ui-slider input[type=range]{width:100%;accent-color:var(--blue)}

/* ---------- Note banner ---------- */
.ui-note{background:var(--warn-bg);border:1px solid rgba(210,153,34,.3);color:#e3b341;padding:9px 12px;border-radius:var(--r2);font-size:var(--fs-sm);margin-bottom:var(--s4)}

/* ============ N3 고도화 ============ */
/* Health dot */
.ui-health{display:flex;gap:var(--s3);flex-wrap:wrap}
.ui-hz{display:flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-pill);padding:5px 11px;font-size:var(--fs-sm)}
.ui-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.ui-dot--green{background:var(--pos);box-shadow:0 0 6px var(--pos)}
.ui-dot--yellow{background:var(--warn);box-shadow:0 0 6px var(--warn)}
.ui-dot--red{background:var(--neg);box-shadow:0 0 6px var(--neg)}
.ui-hz .d{color:var(--mut);font-size:var(--fs-xs)}

/* Alert banner */
.ui-alerts{display:flex;flex-direction:column;gap:var(--s2);margin-bottom:var(--s4)}
.ui-alert{display:flex;align-items:center;gap:var(--s2);padding:9px 13px;border-radius:var(--r2);border-left:3px solid;font-size:var(--fs-md);font-weight:var(--fw-med)}
.ui-alert--red{background:var(--neg-bg);border-color:var(--neg);color:#ffb4b0}
.ui-alert--yellow{background:var(--warn-bg);border-color:var(--warn);color:#e3b341}
.ui-alert--info{background:var(--blue-bg);border-color:var(--blue);color:#9cc7ff}

/* Auto-refresh bar */
.ui-refresh{display:flex;align-items:center;gap:var(--s3);font-size:var(--fs-sm);color:var(--mut)}
.ui-refresh .live{width:8px;height:8px;border-radius:50%;background:var(--pos);animation:ui-pulse 1.6s infinite}
@keyframes ui-pulse{0%,100%{opacity:1}50%{opacity:.3}}
.ui-switch{cursor:pointer;user-select:none;border:1px solid var(--line);border-radius:var(--r-pill);padding:3px 10px;font-size:var(--fs-xs)}
.ui-switch.on{background:var(--pos-bg);color:var(--pos);border-color:var(--pos)}

/* Skeleton */
.ui-skel{background:linear-gradient(90deg,var(--card) 25%,var(--card-hi) 50%,var(--card) 75%);background-size:200% 100%;animation:ui-shimmer 1.3s infinite;border-radius:var(--r2)}
.ui-skel--kpi{height:64px}
.ui-skel--row{height:16px;margin:8px 0}
.ui-skel--chart{height:120px}
@keyframes ui-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Empty state */
.ui-empty{text-align:center;color:var(--mut);padding:var(--s8) var(--s4)}
.ui-empty__icon{font-size:34px;opacity:.5;margin-bottom:var(--s2)}
.ui-empty__msg{font-size:var(--fs-md)}

/* Content transition */
.app-content{animation:ui-fadein .18s ease}
@keyframes ui-fadein{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* Event stream (color per type) */
.ui-ev{display:flex;gap:var(--s3);align-items:baseline;padding:6px 10px;border-left:3px solid var(--line);margin-bottom:3px;background:var(--card);border-radius:0 var(--r1) var(--r1) 0;font-size:var(--fs-sm)}
.ui-ev time{color:var(--mut);font-family:var(--mono);font-size:var(--fs-xs);flex-shrink:0;width:66px}
.ui-ev .tag{font-weight:var(--fw-semi);flex-shrink:0;width:78px}
.ui-ev .msg{color:var(--fg);word-break:break-all}
.ev-BUY{border-color:var(--blue)} .ev-BUY .tag{color:var(--blue)}
.ev-SELL{border-color:var(--mut)} .ev-SELL .tag{color:var(--mut)}
.ev-TP{border-color:var(--pos)} .ev-TP .tag{color:var(--pos)}
.ev-SL{border-color:var(--neg)} .ev-SL .tag{color:var(--neg)}
.ev-EOD{border-color:#a371f7} .ev-EOD .tag{color:#a371f7}
.ev-ERROR{border-color:var(--neg)} .ev-ERROR .tag{color:var(--neg)}
.ev-AUTO_STOP{border-color:var(--warn)} .ev-AUTO_STOP .tag{color:var(--warn)}
.ev-RESTART{border-color:#58a6ff} .ev-RESTART .tag{color:#58a6ff}
.ev-RESTORE{border-color:#3fb950} .ev-RESTORE .tag{color:#3fb950}

/* Heatmap */
.ui-heat{display:grid;gap:2px}
.ui-heat .cell{aspect-ratio:1;border-radius:2px;min-height:14px}
.ui-heat .axis{color:var(--mut);font-size:10px;text-align:center}

/* Log viewer toolbar */
.ui-logbar{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap;margin-bottom:var(--s2)}
.ui-log mark{background:var(--warn);color:#000;border-radius:2px}

/* ============ N4 컴포넌트 ============ */
/* Gauge */
.ui-gauge{margin-bottom:var(--s3)}
.ui-gauge__top{display:flex;justify-content:space-between;font-size:var(--fs-sm);margin-bottom:4px}
.ui-gauge__bar{height:8px;border-radius:5px;background:var(--card-hi);overflow:hidden}
.ui-gauge__fill{height:100%;border-radius:5px;transition:width .3s}
.ui-gauge__fill--green{background:var(--pos)} .ui-gauge__fill--yellow{background:var(--warn)} .ui-gauge__fill--red{background:var(--neg)}

/* Command Palette */
.ui-pal{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:300;display:flex;justify-content:center;align-items:flex-start;padding-top:12vh;animation:ui-fade .1s ease}
.ui-pal__box{background:var(--panel);border:1px solid var(--line);border-radius:var(--r3);box-shadow:var(--shadow);width:min(560px,92vw);overflow:hidden}
.ui-pal__in{width:100%;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:14px 16px;font-size:var(--fs-lg);background:transparent}
.ui-pal__in:focus{outline:none}
.ui-pal__list{max-height:56vh;overflow:auto}
.ui-pal__it{display:flex;align-items:center;gap:10px;padding:10px 16px;cursor:pointer;font-size:var(--fs-md)}
.ui-pal__it.sel,.ui-pal__it:hover{background:var(--card-hi)}
.ui-pal__it .k{color:var(--mut);font-size:var(--fs-xs);margin-left:auto}
.ui-pal__grp{color:var(--mut);font-size:var(--fs-xs);text-transform:uppercase;padding:8px 16px 2px}

/* Notification Center */
.ui-nc{position:fixed;top:var(--header-h);right:0;width:min(360px,94vw);max-height:70vh;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:0 0 0 var(--r3);box-shadow:var(--shadow);z-index:180;animation:ui-slide .14s ease}
.ui-nc__hd{display:flex;justify-content:space-between;align-items:center;padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);font-weight:var(--fw-semi)}
.ui-nc__it{display:flex;gap:10px;padding:10px var(--s4);border-bottom:1px solid var(--line);font-size:var(--fs-sm)}
.ui-nc__it .lv{width:8px;height:8px;border-radius:50%;margin-top:5px;flex-shrink:0}
.lv-red{background:var(--neg)} .lv-yellow{background:var(--warn)} .lv-info{background:var(--blue)}

/* Settings */
.ui-set{max-width:640px}
.ui-set__row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.ui-set__row .lbl{font-size:var(--fs-md)} .ui-set__row .desc{color:var(--mut);font-size:var(--fs-xs)}
.ui-seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r1);overflow:hidden}
.ui-seg button{border:0;border-radius:0;background:transparent;padding:5px 12px;font-size:var(--fs-sm)}
.ui-seg button.on{background:var(--blue);color:#fff}
.ui-toggle{width:38px;height:20px;border-radius:11px;background:var(--card-hi);border:1px solid var(--line);cursor:pointer;position:relative}
.ui-toggle.on{background:var(--pos)}
.ui-toggle .kb{position:absolute;top:1px;left:1px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .15s}
.ui-toggle.on .kb{left:19px}