/* ================================================================
   CANDLESTICK.ID — Stylesheet Utama
   Diadaptasi dari trading-journal-idx-simpler-v2.html
   ================================================================ */

/* ── TOKENS ── */
:root,[data-theme="light"]{
  --bg:#f7f6f2;--sf:#f9f8f5;--sf2:#fbfbf9;--sf-off:#f3f0ec;--sf-off2:#edeae5;--sf-dyn:#e6e4df;
  --bdr:oklch(0.25 0.01 80 / 0.12);--div:oklch(0.25 0.01 80 / 0.08);
  --tx:#28251d;--tx-m:#7a7974;--tx-f:#bab9b4;--tx-inv:#f9f8f4;
  --p:#01696f;--p-h:#0c4e54;--p-a:#0f3638;--p-hi:#cedcd8;
  --ok:#437a22;--ok-h:#2e5c10;--ok-hi:#d4dfcc;
  --er:#a13544;--er-hi:#dececb;
  --gold:#d19900;--gold-hi:#e9e0c6;
  --font-d:'Instrument Serif',Georgia,serif;
  --font-b:'Inter','Helvetica Neue',sans-serif;
  --tx-xs:clamp(.75rem,.7rem + .25vw,.875rem);
  --tx-sm:clamp(.875rem,.8rem + .35vw,1rem);
  --tx-base:clamp(1rem,.95rem + .25vw,1.125rem);
  --tx-lg:clamp(1.125rem,1rem + .75vw,1.5rem);
  --tx-xl:clamp(1.5rem,1.2rem + 1.25vw,2.25rem);
  --sp1:.25rem;--sp2:.5rem;--sp3:.75rem;--sp4:1rem;--sp5:1.25rem;--sp6:1.5rem;
  --sp8:2rem;--sp10:2.5rem;--sp12:3rem;--sp16:4rem;
  --r-sm:.375rem;--r-md:.5rem;--r-lg:.75rem;--r-xl:1rem;--r-full:9999px;
  --tr:180ms cubic-bezier(.16,1,.3,1);
  --sh-sm:0 1px 2px oklch(.2 .01 80/.06);
  --sh-md:0 4px 12px oklch(.2 .01 80/.08);
  --sh-lg:0 12px 32px oklch(.2 .01 80/.12);
  --w-n:640px;--w-d:960px;--w-w:1200px;
}

/* Body styling — gunakan body.candlestick agar tidak konflik dengan Kadence di halaman lain */
body.candlestick{font-family:var(--font-b);font-size:var(--tx-base);color:var(--tx);background:var(--bg)}
body.candlestick ::selection{background:oklch(from var(--p) l c h/.22);color:var(--tx)}
body.candlestick :focus-visible{outline:2px solid var(--p);outline-offset:3px;border-radius:var(--r-sm)}
body.candlestick a,
body.candlestick button,
body.candlestick [role="button"]{transition:color var(--tr),background var(--tr),border-color var(--tr),box-shadow var(--tr),opacity var(--tr)}
@media(prefers-reduced-motion:reduce){body.candlestick *,body.candlestick *::before,body.candlestick *::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ── LAYOUT HELPERS ── */
.candlestick .wrap{max-width:var(--w-w);margin-inline:auto;padding-inline:var(--sp6)}
@media(max-width:640px){.candlestick .wrap{padding-inline:var(--sp4)}}

/* ── NAV ── */
.candlestick .cs-nav{position:sticky;top:0;z-index:100;background:color-mix(in oklab,var(--bg) 85%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--bdr)}
.candlestick .cs-nav-inner{max-width:var(--w-w);margin-inline:auto;padding-inline:var(--sp6);height:52px;display:flex;align-items:center;gap:var(--sp6)}
.candlestick .cs-logo{display:flex;align-items:center;gap:var(--sp2);font-weight:600;font-size:var(--tx-sm);color:var(--tx)}
.candlestick .cs-logo svg{flex-shrink:0}
.candlestick .cs-nav-links{display:flex;gap:var(--sp1);flex:1;list-style:none;padding:0;margin:0}
.candlestick .cs-nav-link{padding:6px 10px;border-radius:var(--r-md);font-size:var(--tx-sm);color:var(--tx-m);font-weight:500;display:inline-block}
.candlestick .cs-nav-link:hover{color:var(--tx);background:var(--sf-off)}
.candlestick .cs-nav-link.active{color:var(--tx);background:var(--sf-off)}
@media(max-width:640px){.candlestick .cs-nav-inner{padding-inline:var(--sp4)}.candlestick .cs-nav-links{gap:0}.candlestick .cs-nav-link{padding:5px 8px;font-size:var(--tx-xs)}}

/* ── PAGE HEADER ── */
.candlestick .page-header{background:var(--sf);border-bottom:1px solid var(--bdr);padding-block:clamp(var(--sp10),6vw,var(--sp16))}
.candlestick .hero-eye{display:flex;align-items:center;gap:var(--sp2);font-size:var(--tx-xs);color:var(--tx-m);font-weight:500;text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--sp3)}
.candlestick .hero-eye-dot{width:6px;height:6px;border-radius:var(--r-full);background:var(--ok)}
.candlestick .page-h1{font-family:var(--font-d);font-size:var(--tx-xl);font-weight:400;color:var(--tx);margin-bottom:var(--sp4);font-style:italic}
.candlestick .page-desc{font-size:var(--tx-base);color:var(--tx-m);max-width:60ch;line-height:1.7}

/* ── FILTERS ── */
.candlestick .filters{display:flex;gap:var(--sp2);flex-wrap:wrap;margin-bottom:var(--sp6)}
.candlestick .pill{padding:5px 14px;border-radius:var(--r-full);font-size:var(--tx-sm);color:var(--tx-m);border:1px solid var(--bdr);font-weight:500;background:none;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center}
.candlestick .pill:hover{background:var(--sf-off);color:var(--tx)}
.candlestick .pill.active{background:var(--p);color:var(--tx-inv);border-color:var(--p)}
.candlestick a.pill{text-decoration:none}
.candlestick .pill-count{font-size:var(--tx-xs);opacity:.7;margin-left:4px}

/* ── ARCHIVE GRID ── */
.candlestick .archive-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(310px,100%),1fr));gap:var(--sp5);list-style:none;padding:0;margin:0}
@media(max-width:500px){.candlestick .archive-grid{grid-template-columns:1fr}}

/* ── CARD ── */
.candlestick .card{background:var(--sf);border:1px solid var(--bdr);border-radius:var(--r-xl);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--sh-sm);text-decoration:none;color:inherit;transition:box-shadow var(--tr),transform var(--tr)}
.candlestick a.card{cursor:pointer}
.candlestick a.card:hover{box-shadow:var(--sh-md);transform:translateY(-1px)}
.candlestick a.card:active{transform:translateY(0)}
.candlestick .card-img{height:52px;display:flex;align-items:center;justify-content:flex-start;padding:var(--sp4);font-family:var(--font-d);font-size:var(--tx-lg);font-style:italic;color:var(--p);border-bottom:1px solid var(--bdr);font-weight:400}
.candlestick .card-body{padding:var(--sp4) var(--sp5);flex:1;display:flex;flex-direction:column;gap:var(--sp2)}
.candlestick .card-meta{display:flex;gap:var(--sp2);flex-wrap:wrap}
.candlestick .card-title{font-size:var(--tx-sm);font-weight:600;color:var(--tx);line-height:1.4;margin:0}
.candlestick .card-desc{font-size:var(--tx-xs);color:var(--tx-m);line-height:1.6;flex:1;margin:0}
.candlestick .card-foot{padding:var(--sp3) var(--sp5);border-top:1px solid var(--bdr);display:flex;flex-direction:column;gap:4px}
.candlestick .card-date{font-size:var(--tx-xs);color:var(--tx-f)}
.candlestick .card-targets{display:flex;gap:8px;align-items:center;font-size:var(--tx-xs);color:var(--tx-m);flex-wrap:wrap}
.candlestick .tp1{color:var(--p);font-weight:600}
.candlestick .tp2{color:var(--ok);font-weight:700}
.candlestick .tp-sep{color:var(--bdr)}

/* ── BADGES ── */
.candlestick .badge{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:var(--r-full);font-size:var(--tx-xs);font-weight:600;white-space:nowrap}
.candlestick .b-ai{background:color-mix(in oklch,var(--gold) 12%,var(--sf));color:color-mix(in oklch,var(--gold) 70%,var(--tx));border:1px solid color-mix(in oklch,var(--gold) 20%,var(--bdr))}
.candlestick .b-open{background:color-mix(in oklch,var(--p) 10%,var(--sf));color:var(--p);border:1px solid color-mix(in oklch,var(--p) 20%,var(--bdr))}
.candlestick .b-profit{background:color-mix(in oklch,var(--ok) 10%,var(--sf));color:var(--ok);border:1px solid color-mix(in oklch,var(--ok) 20%,var(--bdr))}
.candlestick .b-loss{background:color-mix(in oklch,var(--er) 10%,var(--sf));color:var(--er);border:1px solid color-mix(in oklch,var(--er) 20%,var(--bdr))}
.candlestick .b-watch{background:var(--sf-off);color:var(--tx-m);border:1px solid var(--bdr)}
.candlestick .b-pending{background:color-mix(in oklch,var(--gold) 10%,var(--sf));color:var(--gold);border:1px solid color-mix(in oklch,var(--gold) 20%,var(--bdr))}

/* ── SINGLE PAGE ── */
.candlestick .single-wrap{display:grid;grid-template-columns:1fr;gap:var(--sp10);align-items:start;padding-block:var(--sp10);max-width:820px;margin-inline:auto}
.candlestick .back-link{display:inline-flex;align-items:center;gap:6px;font-size:var(--tx-sm);color:var(--tx-m);margin-bottom:var(--sp5);padding:5px 10px;border-radius:var(--r-md);border:1px solid var(--bdr);text-decoration:none}
.candlestick .back-link:hover{background:var(--sf-off);color:var(--tx)}
.candlestick .single-meta{display:flex;align-items:center;gap:var(--sp2);flex-wrap:wrap;margin-bottom:var(--sp4)}
.candlestick .single-date{font-size:var(--tx-xs);color:var(--tx-f)}
.candlestick .single-h1{font-family:var(--font-d);font-size:var(--tx-xl);font-weight:400;font-style:italic;margin-bottom:var(--sp4);line-height:1.15}
.candlestick .single-lead{font-size:var(--tx-base);color:var(--tx-m);line-height:1.8;margin-bottom:var(--sp6);max-width:64ch}
.candlestick .divider{height:1px;background:var(--div);margin-block:var(--sp6)}

/* ── CHART SLOT ── */
.candlestick .chart-slot{background:var(--sf-off);border:2px dashed var(--bdr);border-radius:var(--r-lg);padding:var(--sp8);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp2);text-align:center;color:var(--tx-m);min-height:200px;margin-bottom:var(--sp6)}
.candlestick .chart-slot svg{opacity:.4}
.candlestick .chart-slot-label{font-size:var(--tx-sm);font-weight:600}
.candlestick .chart-img{width:100%;border-radius:var(--r-lg);border:1px solid var(--bdr);margin-bottom:var(--sp6);display:block}

/* ── AI SCORING TABLES ── */
.candlestick .table-label{font-size:var(--tx-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tx-m);margin-bottom:var(--sp3)}
.candlestick .table-wrap{overflow-x:auto;border-radius:var(--r-lg);border:1px solid var(--bdr);margin-bottom:var(--sp5)}
.candlestick .ai-table{width:100%;border-collapse:collapse;font-size:var(--tx-sm)}
.candlestick .ai-table th{background:var(--sf-off);padding:var(--sp2) var(--sp4);font-size:var(--tx-xs);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--tx-m);text-align:left;border-bottom:1px solid var(--bdr)}
.candlestick .ai-table td{padding:var(--sp3) var(--sp4);border-bottom:1px solid var(--bdr);color:var(--tx);vertical-align:top}
.candlestick .ai-table tr:last-child td{border-bottom:none}
.candlestick .ai-table tbody tr:hover td{background:color-mix(in oklch,var(--p) 3%,var(--sf))}
.candlestick .ai-table .row-total{background:color-mix(in oklch,var(--p) 5%,var(--sf))}
.candlestick .ai-table .row-ok td:last-child{color:var(--ok);font-weight:700}
.candlestick .score-pill{display:inline-block;background:color-mix(in oklch,var(--p) 10%,var(--sf));color:var(--p);border-radius:var(--r-full);padding:2px 10px;font-weight:700;font-size:var(--tx-xs);white-space:nowrap}
.candlestick .score-pill.ok{background:color-mix(in oklch,var(--ok) 10%,var(--sf));color:var(--ok)}
.candlestick .score-pill.er{background:color-mix(in oklch,var(--er) 10%,var(--sf));color:var(--er)}

/* ── PARAMETER CARDS (Single page) ── */
.candlestick .param-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--sp3);margin-bottom:var(--sp6)}
.candlestick .param-card{background:var(--sf-off);border:1px solid var(--bdr);border-radius:var(--r-lg);padding:var(--sp4)}
.candlestick .param-card-label{font-size:var(--tx-xs);color:var(--tx-m);margin-bottom:4px}
.candlestick .param-card-val{font-size:var(--tx-base);font-weight:700}
.candlestick .param-card-val.sm{font-size:var(--tx-sm)}
.candlestick .param-card-val.p{color:var(--p)}
.candlestick .param-card-val.er{color:var(--er)}
.candlestick .param-card-val.ok{color:var(--ok)}
.candlestick .param-card-hint{color:var(--tx-f);font-weight:400;font-size:var(--tx-xs)}

/* ── PORTOFOLIO ── */
.candlestick .porto-kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr));gap:var(--sp4);margin-bottom:var(--sp8)}
.candlestick .kpi{background:var(--sf);border:1px solid var(--bdr);border-radius:var(--r-lg);padding:var(--sp5);box-shadow:var(--sh-sm)}
.candlestick .kpi-label{font-size:var(--tx-xs);font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--tx-m);margin-bottom:var(--sp2)}
.candlestick .kpi-val{font-family:var(--font-d);font-size:var(--tx-xl);font-weight:400;color:var(--tx);font-style:italic;line-height:1}
.candlestick .kpi-sub{font-size:var(--tx-xs);color:var(--tx-f);margin-top:var(--sp1)}
.candlestick .porto-table-wrap{overflow-x:auto;border-radius:var(--r-lg);border:1px solid var(--bdr);box-shadow:var(--sh-sm)}
.candlestick .porto-table{width:100%;border-collapse:collapse;font-size:var(--tx-sm)}
.candlestick .porto-table th{background:var(--sf-off);padding:var(--sp3) var(--sp4);font-size:var(--tx-xs);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--tx-m);text-align:left;border-bottom:1px solid var(--bdr);white-space:nowrap}
.candlestick .porto-table td{padding:var(--sp3) var(--sp4);border-bottom:1px solid var(--bdr);color:var(--tx);white-space:nowrap}
.candlestick .porto-table tr:last-child td{border-bottom:none}
.candlestick .porto-table tbody tr:hover td{background:color-mix(in oklch,var(--p) 3%,var(--sf))}
.candlestick .pos{color:var(--ok)}
.candlestick .neg{color:var(--er)}
.candlestick .tabular{font-variant-numeric:tabular-nums}

/* ── ABOUT ── */
.candlestick .about-section{background:var(--sf);border:1px solid var(--bdr);border-radius:var(--r-lg);padding:var(--sp6)}
.candlestick .about-section + .about-section{margin-top:var(--sp5)}
.candlestick .about-label{font-size:var(--tx-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--p);margin-bottom:var(--sp3)}

/* ── METHOD CHIP ── */
.candlestick .method-chip{display:inline-flex;align-items:center;gap:8px;background:color-mix(in oklch,var(--p) 8%,var(--sf));border:1px solid color-mix(in oklch,var(--p) 20%,var(--bdr));border-radius:var(--r-full);padding:4px 12px;margin-top:var(--sp3)}
.candlestick .method-chip span{font-size:var(--tx-xs);font-weight:600;color:var(--p)}
.candlestick .method-chip em{font-size:var(--tx-xs);color:var(--tx-m);font-style:normal}

/* ── CATATAN BOX ── */
.candlestick .note-box{background:var(--sf-off);border:1px solid var(--bdr);border-radius:var(--r-lg);padding:var(--sp4);color:var(--tx-m);line-height:1.8;margin-bottom:var(--sp6)}