/* ========================================================
   CITRINE V2 • UI KIT
   Token desain + komponen bersama (c-*). Semua modul baru memakai ini;
   file CSS modul hanya berisi tata letak khusus modul tersebut.
   ======================================================== */
:root {
  --c-bg: #121213;
  --c-card: #18181a;
  --c-panel: #1e1e20;
  --c-raised: #232326;
  --c-hover: #242427;
  --c-line: #262629;
  --c-line-2: #29292c;
  --c-line-3: #2e2e32;
  --c-text: #ececef;
  --c-text-strong: #f4f4f5;
  --c-text-2: #c4c4cc;
  --c-text-3: #a1a1aa;
  --c-muted: #8f8f97;
  --c-faint: #67676f;
  --c-gold: #e0b04a;
  --c-gold-mid: #d4a33a;
  --c-gold-dark: #a8781e;
  --c-gold-soft: rgba(224, 176, 74, 0.1);
  --c-gold-line: rgba(224, 176, 74, 0.5);
  --c-pos: #10b981;  --c-pos-text: #34d399;
  --c-neg: #ef4444;  --c-neg-text: #f87171;
  --c-warn: #f59e0b; --c-warn-text: #fbbf24;
  --c-neu: #64748b;
  --c-blue: #60a5fa;
  --c-violet: #c4b5fd;
  --c-r-sm: 6px; --c-r: 10px; --c-r-lg: 14px;
  --c-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}

/* ---------- kartu ---------- */
.c-card { background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--c-r-lg); padding: 16px; min-width: 0; font-weight: 400; }
.c-card-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; font-size: 13.5px; font-weight: 400; color: #e4e4e7; }
.c-card-title svg { width: 16px; height: 16px; color: var(--c-muted); flex: 0 0 16px; }
.c-note { margin-left: auto; font-size: 11px; color: var(--c-faint); }
.c-label { margin: 18px 0 8px; font-size: 12.5px; color: var(--c-text-3); }
.c-hint { margin: 10px 2px 0; font-size: 11.5px; line-height: 1.55; color: var(--c-faint); }
.c-hint code { color: var(--c-text-2); }

/* ---------- daftar baris ---------- */
.c-rows { background: var(--c-panel); border-radius: var(--c-r); overflow: hidden; }
.c-row { display: flex; align-items: flex-start; gap: 11px; padding: 11px 14px; border-bottom: 1px solid var(--c-line-2); color: inherit; text-decoration: none; }
.c-row:last-child { border-bottom: none; }
.c-row.center { align-items: center; }
.c-row.clickable { cursor: pointer; }
.c-row.clickable:hover, .c-row.open, a.c-row:hover { background: var(--c-hover); }
.c-row.off { opacity: 0.55; }
.c-row-ico {
  flex: 0 0 26px; height: 26px; border-radius: 50%; background: #2a2a2d; color: #d4d4d8;
  display: flex; align-items: center; justify-content: center; margin-top: 1px; font-size: 12px;
}
.c-row-ico svg { width: 13px; height: 13px; }
.c-row-ico.lg { flex-basis: 32px; height: 32px; }
.c-row-ico.lg svg { width: 15px; height: 15px; }
.c-row-ico.danger { background: rgba(239, 68, 68, 0.12); color: var(--c-neg-text); border-radius: 9px; }
.c-row-body { flex: 1; min-width: 0; }
.c-row-line { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.c-row-main { flex: 1; min-width: 0; font-size: 13px; line-height: 1.45; color: var(--c-text); overflow-wrap: anywhere; text-decoration: none; }
a.c-row-main:hover { color: var(--c-gold); }
.c-row-side { flex: 0 0 auto; font-size: 12px; color: var(--c-muted); white-space: nowrap; margin-top: 2px; }
.c-row-side b { font-weight: 500; color: var(--c-text-strong); }
.c-row-sub { margin-top: 3px; font-size: 12px; line-height: 1.55; color: #9a9aa2; }
.c-row-sub b { font-weight: 500; color: #e4e4e7; }
.c-row-meta { display: block; margin-top: 3px; font-size: 11.5px; color: var(--c-faint); }
.c-row-act { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.c-rank, .c-initial { font-size: 11.5px; color: #d4d4d8; font-variant-numeric: tabular-nums; }
.c-initial { font-weight: 500; color: #e4e4e7; }
.c-rank.circle { flex: 0 0 24px; height: 24px; border-radius: 50%; background: #2a2a2d; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; }
.c-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.c-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.c-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.c-quote { font-style: italic; color: #d4d4d8; }

/* ---------- tombol ---------- */
.c-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 16px;
  border-radius: var(--c-r); cursor: pointer; white-space: nowrap; text-decoration: none;
  font: inherit; font-size: 13px; font-weight: 500; color: var(--c-on-accent, #fff);
  border: 1px solid var(--c-gold); background: linear-gradient(160deg, var(--c-gold) 0%, var(--c-gold-mid) 45%, var(--c-gold-dark) 100%);
}
.c-btn:hover { filter: brightness(1.07); }
.c-btn.ghost { background: var(--c-panel); border-color: var(--c-line-3); color: #e4e4e7; font-weight: 400; }
.c-btn.ghost:hover { background: #26262a; filter: none; }
.c-btn.outline { background: transparent; border-color: var(--c-line-3); color: var(--c-text-2); font-weight: 400; }
.c-btn.outline:hover { border-color: var(--c-gold-line); color: var(--c-gold); filter: none; }
.c-btn.sm { height: 30px; padding: 0 12px; font-size: 12px; }
.c-btn.lg { height: 42px; font-size: 14px; border-radius: 11px; }
.c-btn.block { display: flex; width: 100%; }
.c-btn svg { width: 14px; height: 14px; }
.c-btn.sm svg { width: 13px; height: 13px; }
.c-btn:disabled, .c-btn[disabled] { opacity: 0.6; cursor: default; filter: none; }
.c-btn.busy svg { animation: c-rot 0.9s linear infinite; }
.c-icon-btn {
  width: 30px; height: 30px; flex: 0 0 auto; border-radius: 8px; border: 1px solid transparent; background: transparent;
  color: var(--c-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.c-icon-btn:hover { background: #26262a; color: var(--c-text-strong); }
.c-icon-btn.danger:hover { color: var(--c-neg-text); }
.c-icon-btn.accent:hover { background: #2a2a2d; color: var(--c-gold); }
.c-icon-btn.boxed { width: 32px; height: 32px; background: var(--c-panel); border-color: #2a2a2d; color: var(--c-text-3); }
.c-icon-btn.sm { width: 28px; height: 28px; }
.c-icon-btn svg { width: 15px; height: 15px; }
.c-icon-btn.sm svg { width: 14px; height: 14px; }
.c-icon-btn:disabled { opacity: 0.3; cursor: default; background: transparent; }

/* ---------- input & field ---------- */
.c-input, .c-form input:not([type=checkbox]):not([type=radio]), .c-form select, .c-form textarea {
  height: 36px; padding: 0 12px; border-radius: var(--c-r); background: var(--c-panel); border: 1px solid #2a2a2d;
  color: var(--c-text-strong); font: inherit; font-size: 13px; outline: none; color-scheme: dark; min-width: 0;
}
.c-input.lg { height: 40px; font-size: 14px; }
.c-input.sm { height: 30px; padding: 0 8px; font-size: 12px; }
.c-input:focus, .c-form input:focus, .c-form select:focus, .c-form textarea:focus {
  border-color: rgba(224, 176, 74, 0.6); box-shadow: 0 0 0 3px var(--c-gold-soft);
}
.c-input::placeholder, .c-form input::placeholder { color: var(--c-faint); }
.c-form { display: flex; flex-direction: column; gap: 12px; }
.c-form.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.c-form .span { grid-column: 1 / -1; }
.c-form label:not(.c-check) { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--c-text-3); }
.c-form-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
@media (max-width: 900px) { .c-form.cols-2 { grid-template-columns: 1fr; } }

/* field berikon (select / input tanpa bingkai di dalam bingkai) */
.c-field {
  position: relative; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 8px 0 11px;
  background: var(--c-panel); border: 1px solid #2a2a2d; border-radius: var(--c-r); color: var(--c-text-3); cursor: pointer;
  transition: border-color .15s, background .15s;
}
.c-field:hover { background: #222225; }
.c-field:focus-within { border-color: rgba(224, 176, 74, 0.55); box-shadow: 0 0 0 3px var(--c-gold-soft); }
.c-field svg { width: 15px; height: 15px; flex: 0 0 15px; color: #77777f; }
.c-field.gold-ico svg { color: var(--c-gold); }
.c-field select, .c-field input {
  appearance: none; -webkit-appearance: none; background: transparent; border: none; outline: none; color: var(--c-text-2);
  font: inherit; font-size: 13px; height: 100%; min-width: 0; color-scheme: dark;
}
.c-field input { flex: 1; color: var(--c-text); cursor: text; }
.c-field input::placeholder { color: var(--c-faint); }
.c-field select {
  cursor: pointer; padding-right: 20px; max-width: 220px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2377777f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 2px center;
}
.c-field select option, .c-field select optgroup { background: var(--c-panel); color: var(--c-text); }
.c-field.on { border-color: rgba(224, 176, 74, 0.45); background: rgba(224, 176, 74, 0.06); }
.c-field.on svg { color: var(--c-gold); }
.c-field.on select { color: var(--c-text-strong); }

/* checkbox & saklar */
.c-check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #b4b4bb; cursor: pointer; }
.c-check input { accent-color: var(--c-gold-mid); width: 15px; height: 15px; }
.c-switch { position: relative; width: 34px; height: 20px; flex: 0 0 34px; cursor: pointer; }
.c-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.c-switch input:disabled { cursor: not-allowed; }
.c-switch span { position: absolute; inset: 0; border-radius: 999px; background: #3a3a3e; transition: background .15s; }
.c-switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #d4d4d8; transition: transform .15s; }
.c-switch input:checked + span { background: var(--c-gold-mid); }
.c-switch input:checked + span::after { transform: translateX(14px); background: #fff; }

/* segmented control */
.c-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; background: var(--c-panel); border-radius: var(--c-r); padding: 3px; }
.c-seg button { display: flex; align-items: center; justify-content: center; gap: 7px; height: 32px; border-radius: 8px; border: none;
  background: transparent; color: var(--c-text-3); font: inherit; font-size: 12.5px; cursor: pointer; }
.c-seg button svg { width: 14px; height: 14px; }
.c-seg button.on { background: #2a2a2d; color: var(--c-text-strong); }

/* ---------- badge, dot, angka ---------- */
.c-badge {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px; line-height: 1.4; padding: 1px 7px; border-radius: var(--c-r-sm);
  border: 1px solid #3a3a3e; color: var(--c-text-3); white-space: nowrap; font-style: normal; font-weight: 400;
}
.c-badge.filled { background: var(--c-panel); border-color: #2a2a2d; color: var(--c-muted); }
.c-badge.gold { color: var(--c-gold); border-color: rgba(224, 176, 74, 0.45); }
.c-badge.pos { color: var(--c-pos-text); border-color: rgba(52, 211, 153, 0.45); }
.c-badge.neg { color: var(--c-neg-text); border-color: rgba(248, 113, 113, 0.5); }
.c-badge.warn { color: var(--c-warn-text); border-color: rgba(251, 191, 36, 0.45); }
.c-badge.info { color: var(--c-blue); border-color: rgba(96, 165, 250, 0.4); }
.c-badge.violet { color: var(--c-violet); border-color: rgba(196, 181, 253, 0.4); }
.c-badge.white { color: #e4e4e7; border-color: #52525b; }
.c-badge.muted { color: var(--c-muted); }
.c-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.c-chip { display: inline-flex; align-items: center; font-size: 12px; padding: 4px 10px; border-radius: 8px; background: var(--c-panel);
  border: 1px solid var(--c-line-2); color: var(--c-text); font-style: normal; }
.c-chip em { font-style: normal; font-size: 11px; color: var(--c-faint); margin-left: 6px; }
.c-chip[data-q], .c-chip.toggle { cursor: pointer; font: inherit; font-size: 12px; }
.c-chip.toggle { color: var(--c-text-3); }
.c-chip.toggle:hover { border-color: var(--c-line-3); color: var(--c-text); }
.c-chip.toggle.on { border-color: var(--c-gold-line); background: var(--c-gold-soft); color: var(--c-text-strong); }
.c-chip[data-q]:hover { border-color: var(--c-gold-line); }
.c-count { font-size: 11px; color: var(--c-text-3); background: #26262a; border-radius: 5px; padding: 1px 6px; }

.c-dot { display: inline-block; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: #71717a; }
.c-dot.sm { width: 6px; height: 6px; }
.c-dot.lg { width: 10px; height: 10px; }
.c-dot.pos, .c-dot.ok { background: var(--c-pos); }
.c-dot.neg, .c-dot.bad { background: var(--c-neg); }
.c-dot.warn { background: var(--c-warn); }
.c-dot.neu { background: var(--c-neu); }
.c-dot.off { background: #52525b; }
.c-dot.blue { background: var(--c-blue); }
.c-dot.white { background: #e4e4e7; }
.c-dot.violet { background: var(--c-violet); }
.c-dot.gold { background: var(--c-gold); }
.c-dot.mix { background: linear-gradient(135deg, var(--c-gold), #6366f1); }
.c-dot.ring.ok, .c-dot.ring.pos { box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18); }
.c-dot.ring.warn { box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18); }
.c-dot.ring.bad, .c-dot.ring.neg { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2); }

/* titik status di tombol dock */
.c-dock-dot { position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: #71717a; box-shadow: 0 0 0 2px var(--c-bg); }
.c-dock-dot.ok { background: #22c55e; }
.c-dock-dot.warn { background: var(--c-warn); }
.c-dock-dot.bad { background: var(--c-neg); animation: c-pulse 1.6s infinite; }
@keyframes c-pulse { 50% { box-shadow: 0 0 0 2px var(--c-bg), 0 0 0 5px rgba(239, 68, 68, 0.25); } }


/* ---------- keadaan kosong / error / memuat ---------- */
.c-empty { padding: 12px 14px; font-size: 12.5px; line-height: 1.55; color: var(--c-muted); }
.c-empty.boxed { margin-top: 16px; padding: 18px; border-radius: 12px; background: #19191b; border: 1px dashed #333337; color: #b4b4bb; }
.c-empty b { color: var(--c-text-strong); font-weight: 500; }
.c-error { padding: 12px 14px; border-radius: var(--c-r); background: rgba(239, 68, 68, 0.1); color: #fca5a5; font-size: 12.5px; }
.c-loading { display: flex; align-items: center; gap: 10px; padding: 16px; font-size: 13px; color: var(--c-muted); }
.c-spin { width: 16px; height: 16px; flex: 0 0 16px; border-radius: 50%; border: 2px solid #3a3a3e; border-top-color: var(--c-gold); animation: c-rot 0.8s linear infinite; }
@keyframes c-rot { to { transform: rotate(360deg); } }

/* ---------- menu popover ---------- */
.c-menu { position: fixed; z-index: 3000; min-width: 230px; padding: 6px; border-radius: var(--c-r-lg); background: var(--c-card);
  border: 1px solid #2a2a2d; box-shadow: var(--c-shadow); display: none; font-weight: 400; }
.c-menu.open { display: block; }
.c-menu-label { padding: 8px 10px 6px; font-size: 11.5px; color: var(--c-muted); }
.c-menu-item {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: none; border-radius: 9px;
  background: transparent; color: #d4d4d8; font: inherit; font-size: 13px; text-align: left; cursor: pointer; text-decoration: none;
}
.c-menu-item:hover { background: #232326; }
.c-menu-item.on { background: rgba(224, 176, 74, 0.08); }
.c-menu-item svg { width: 15px; height: 15px; color: var(--c-muted); flex: 0 0 15px; }
.c-menu-item.danger:hover, .c-menu-item.danger:hover svg { color: var(--c-neg-text); }
.c-menu-item.accent { color: var(--c-gold); } .c-menu-item.accent svg { color: var(--c-gold); }

/* ======================================================== GRADASI EMAS
   Satu bahasa visual dengan tombol utama & dock aktif: gradasi emas + kilau tipis di atas + cahaya lembut. */
:root {
  --c-grad-gold: linear-gradient(160deg, #e0b04a 0%, #d4a33a 45%, #a8781e 100%);
  --c-grad-soft: linear-gradient(160deg, rgba(224, 176, 74, 0.2) 0%, rgba(212, 163, 58, 0.09) 55%, rgba(168, 120, 30, 0.05) 100%);
  --c-grad-depth: linear-gradient(160deg, #303034 0%, #242427 100%);
  --c-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.028) 0%, rgba(255, 255, 255, 0) 140px);
  --c-glow: 0 6px 18px rgba(212, 163, 58, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  --c-glow-soft: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 0 1px rgba(224, 176, 74, 0.35);
}
/* tombol utama */
.c-btn:not(.ghost):not(.outline) { background: var(--c-grad-gold); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.c-btn:not(.ghost):not(.outline):hover { box-shadow: var(--c-glow); filter: brightness(1.05); }
.c-btn.ghost:hover, .c-btn.outline:hover { background: var(--c-grad-soft); border-color: var(--c-gold-line); color: var(--c-text-strong); }

/* elemen aktif / terpilih: gradasi lembut + bingkai emas */
.c-seg button.on, .c-chip.toggle.on, .c-menu-item.on, .st-nav button.on, .ex-ds-item.on, .c-field.on {
  background: var(--c-grad-soft) !important; box-shadow: var(--c-glow-soft); border-color: transparent !important;
}
.c-seg button.on { color: var(--c-text-strong); }
.c-switch input:checked + span { background: var(--c-grad-gold); box-shadow: var(--c-glow); }
.c-badge.gold { background: var(--c-grad-soft); }
.c-icon-btn.accent:hover { background: var(--c-grad-soft); }

/* kedalaman halus pada kartu, ikon baris, & angka urut */
.c-card { background-image: var(--c-sheen); }
.c-row-ico:not(.danger), .c-rank.circle { background: var(--c-grad-depth); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.c-row.clickable:hover .c-row-ico:not(.danger) { background: var(--c-grad-gold); color: #fff; }

/* ikon KPI atas & avatar workspace */
.top-stats-row .stat-icon { background: var(--c-grad-soft); border-color: rgba(224, 176, 74, 0.28); color: var(--c-gold); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.st-avatar, .analyst-avatar.has-user { box-shadow: var(--c-glow); }

/* teks angka besar dengan kilau emas tipis (judul angka utama) */
.ai-rate-num, .tr-hot-metric b:not(.zero), #viewAnalytics .an-donut-center b {
  background: linear-gradient(180deg, #ffffff 0%, #f1e3c4 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}