/* ck_watchlist.css - Lallink Watchlist Page */

/* ── Page shell ── */
.ckw-page { display:flex; height:calc(100vh - var(--cl-nav-h,56px)); overflow:hidden; background:var(--cl-bg,#0d0d0d); }

/* ── Sidebar ── */
.ckw-sidebar { width:220px; flex-shrink:0; border-right:1px solid var(--cl-border,#1e1e1e); display:flex; flex-direction:column; background:var(--cl-surface,#141414); overflow:hidden; }
.ckw-sidebar-header { padding:14px 14px 10px; border-bottom:1px solid var(--cl-border,#1e1e1e); }
.ckw-sidebar-title { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:var(--cl-text-muted,#888); margin-bottom:10px; }
.ckw-new-btn { width:100%; display:flex; align-items:center; gap:7px; background:rgba(0,200,150,.1); border:1px solid rgba(0,200,150,.25); color:#00C896; font-size:12px; font-weight:700; padding:7px 10px; border-radius:6px; cursor:pointer; transition:all .15s; }
.ckw-new-btn:hover { background:rgba(0,200,150,.18); }
.ckw-new-btn svg { flex-shrink:0; }
.ckw-quota { font-size:11px; color:var(--cl-text-muted,#888); margin-top:8px; }
.ckw-quota .ck-premium-pill { font-size:9px; }

.ckw-list { flex:1; overflow-y:auto; padding:6px; }
.ckw-wl-item { display:flex; align-items:center; gap:6px; padding:8px 10px; border-radius:6px; cursor:pointer; transition:all .15s; position:relative; }
.ckw-wl-item:hover { background:var(--cl-border,#1e1e1e); }
.ckw-wl-item.active { background:rgba(0,200,150,.1); }
.ckw-wl-item.active .ckw-wl-name { color:#00C896; }
.ckw-wl-name { flex:1; font-size:13px; font-weight:600; color:var(--cl-text,#e8e8e8); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ckw-wl-name-input { flex:1; background:var(--cl-border,#1e1e1e); border:1px solid #00C896; border-radius:4px; color:var(--cl-text,#e8e8e8); font-size:13px; font-weight:600; padding:2px 6px; outline:none; min-width:0; }
.ckw-wl-count { font-size:11px; color:var(--cl-text-muted,#888); flex-shrink:0; }
.ckw-wl-del { background:none; border:none; color:var(--cl-text-muted,#888); cursor:pointer; padding:2px 4px; border-radius:3px; display:none; font-size:13px; flex-shrink:0; }
.ckw-wl-item:hover .ckw-wl-del { display:block; }
.ckw-wl-del:hover { color:#FF4444; }

/* ── Main area ── */
.ckw-main { flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0; }

/* ── Top bar ── */
.ckw-topbar { display:flex; align-items:center; gap:10px; padding:10px 16px; border-bottom:1px solid var(--cl-border,#1e1e1e); flex-shrink:0; background:var(--cl-surface,#141414); flex-wrap:wrap; }
.ckw-wl-title { font-size:16px; font-weight:800; color:var(--cl-text,#e8e8e8); }
.ckw-title-input { background:none; border:none; border-bottom:2px solid #00C896; color:var(--cl-text,#e8e8e8); font-size:16px; font-weight:800; outline:none; padding:0 4px 2px; min-width:120px; }
.ckw-topbar-spacer { flex:1; }

/* ── Add stock search ── */
.ckw-add-wrap { position:relative; }
.ckw-add-input-row { display:flex; align-items:center; gap:6px; background:var(--cl-border,#1e1e1e); border:1px solid var(--cl-border,#2a2a2a); border-radius:7px; padding:6px 10px; transition:border .15s; }
.ckw-add-input-row:focus-within { border-color:#00C896; }
.ckw-add-input { background:none; border:none; color:var(--cl-text,#e8e8e8); font-size:13px; outline:none; width:200px; }
.ckw-add-input::placeholder { color:var(--cl-text-muted,#888); }
.ckw-add-dropdown { position:absolute; top:calc(100% + 4px); left:0; right:0; background:var(--cl-surface,#141414); border:1px solid var(--cl-border,#2a2a2a); border-radius:8px; overflow:hidden; z-index:50; box-shadow:0 8px 24px rgba(0,0,0,.4); max-height:280px; overflow-y:auto; display:none; }
.ckw-add-dropdown.open { display:block; }
.ckw-add-item { display:flex; align-items:center; justify-content:space-between; padding:9px 12px; cursor:pointer; border-bottom:1px solid var(--cl-border,#1a1a1a); }
.ckw-add-item:last-child { border-bottom:none; }
.ckw-add-item:hover { background:var(--cl-border,#1e1e1e); }
.ckw-add-sym { font-size:13px; font-weight:700; color:var(--cl-text,#e8e8e8); }
.ckw-add-co  { font-size:11px; color:var(--cl-text-muted,#888); margin-top:2px; }
.ckw-add-sect { font-size:11px; color:var(--cl-text-muted,#666); }
.ckw-add-dup { font-size:12px; color:#f59e0b; padding:10px 14px; }

/* ── Refresh badge ── */
.ckw-refresh-badge { display:flex; align-items:center; gap:5px; font-size:11px; color:var(--cl-text-muted,#888); padding:4px 8px; border-radius:20px; border:1px solid var(--cl-border,#1e1e1e); }
.ckw-refresh-badge .dot { width:6px; height:6px; border-radius:50%; background:#888; }
.ckw-refresh-badge.live .dot { background:#00C896; animation:pulse .8s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ── Table ── */
.ckw-table-wrap { flex:1; overflow:auto; }
.ckw-table { width:100%; border-collapse:collapse; font-size:13px; }
.ckw-table thead th { position:sticky; top:0; background:var(--cl-surface,#141414); padding:8px 12px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--cl-text-muted,#888); text-align:left; border-bottom:1px solid var(--cl-border,#1e1e1e); white-space:nowrap; }
.ckw-table thead th.num { text-align:right; }
.ckw-table tbody tr { border-bottom:1px solid var(--cl-border,#1a1a1a); cursor:pointer; transition:background .1s; position:relative; }
.ckw-table tbody tr:hover { background:var(--cl-surface,#141414); }
.ckw-table tbody tr.drag-over { border-top:2px solid #00C896; }
.ckw-table td { padding:10px 12px; vertical-align:middle; }
.ckw-table td.num { text-align:right; font-variant-numeric:tabular-nums; }

/* Row number */
.ckw-row-num { color:var(--cl-text-muted,#888); font-size:12px; width:32px; }

/* Symbol cell */
.ckw-sym { font-weight:700; color:var(--cl-text,#e8e8e8); }
.ckw-co  { font-size:11px; color:var(--cl-text-muted,#888); margin-top:1px; }

/* LTP */
.ckw-ltp { font-weight:700; font-variant-numeric:tabular-nums; }

/* Change */
.ckw-chg.up { color:#00C896; }
.ckw-chg.dn { color:#FF4444; }

/* Actions cell */
.ckw-actions { display:flex; gap:4px; align-items:center; opacity:0; transition:opacity .15s; white-space:nowrap; }
.ckw-table tbody tr:hover .ckw-actions { opacity:1; }
.ckw-action-btn { background:none; border:none; color:var(--cl-text-muted,#888); cursor:pointer; padding:4px 6px; border-radius:4px; font-size:13px; display:flex; align-items:center; transition:all .15s; }
.ckw-action-btn:hover { background:var(--cl-border,#1e1e1e); color:var(--cl-text,#e8e8e8); }
.ckw-action-btn.del:hover { color:#FF4444; }

/* Drag handle */
.ckw-drag-handle { color:var(--cl-text-muted,#666); cursor:grab; padding:4px; font-size:14px; }
.ckw-drag-handle:active { cursor:grabbing; }
.ckw-table tbody tr.dragging { opacity:.4; }

/* ── Empty states ── */
.ckw-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; min-height:200px; color:var(--cl-text-muted,#888); gap:8px; }
.ckw-empty-icon { font-size:40px; opacity:.3; }
.ckw-empty-title { font-size:15px; font-weight:700; color:var(--cl-text,#e8e8e8); }
.ckw-empty-sub { font-size:13px; }

/* ── Confirm modal ── */
.ckw-confirm-overlay { position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:600; display:flex; align-items:center; justify-content:center; }
.ckw-confirm-box { background:var(--cl-surface,#141414); border:1px solid var(--cl-border,#2a2a2a); border-radius:12px; padding:24px; max-width:380px; width:100%; }
.ckw-confirm-title { font-size:16px; font-weight:800; margin-bottom:8px; color:var(--cl-text,#e8e8e8); }
.ckw-confirm-msg   { font-size:13px; color:var(--cl-text-muted,#888); margin-bottom:20px; }
.ckw-confirm-btns  { display:flex; gap:8px; justify-content:flex-end; }

/* ── Premium gate inline ── */
.ckw-premium-note { font-size:12px; color:#00C896; display:flex; align-items:center; gap:4px; }

/* ── Light theme ── */
[data-theme="light"] .ckw-page { background:#f5f5f5; }
[data-theme="light"] .ckw-sidebar,
[data-theme="light"] .ckw-topbar { background:#fff; }
[data-theme="light"] .ckw-table thead th { background:#fff; }
[data-theme="light"] .ckw-add-dropdown { background:#fff; border-color:#ddd; }
[data-theme="light"] .ckw-confirm-box { background:#fff; border-color:#ddd; }

/* ── Responsive ── */
@media (max-width:768px) {
  .ckw-sidebar { width:180px; }
  .ckw-add-input { width:140px; }
}
@media (max-width:600px) {
  .ckw-sidebar { display:none; }
  .ckw-table td.hide-sm, .ckw-table th.hide-sm { display:none; }
}