/* =========================================================
 * Quant App – Styles (FINAL, drop-in)
 * - Flat theme, tanpa perubahan struktur HTML/JS
 * - Top Picks: grid 3 kolom (desktop), scroll horizontal (mobile)
 * - Stale dimming: #top-picks.is-stale .pick-card → redup (sampai <15:00 WIB)
 * - Progress bar: .score-rail / .score-fill (warna dari JS inline)
 * =======================================================*/

/* ---------- 1) THEME TOKENS ---------- */
:root{
  --bg:#f6f8fb;
  --surface:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --border:#e5e7eb;
  --radius:12px;
  --primary:#1e90ff;        /* dodgerblue */
  --primary-hover:#1877d4;
}

*{ box-sizing:border-box; }
html,body{ min-height:100%; }
body{
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji",sans-serif;
  line-height:1.5;
}
section{ background:transparent; }

/* ---------- 2) LAYOUT ---------- */
#app.container{ max-width:460px;width:100%;margin:auto; }

/* Fullscreen pages (splash, login, liveness) */
#splash-page,#login-page,#liveness-check{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100vh;margin:0;padding:0;overflow:hidden;
  flex-direction:column;
}

/* ---------- 3) FLAT CARDS / SURFACES ---------- */
.this-page{
  background:var(--surface)!important;
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:none; color:var(--text)!important;
  position:relative; z-index:5;
}
#home-page>.this-page{ background:var(--surface)!important;border-radius:var(--radius); }

/* ---------- 4) SPLASH VISUALS ---------- */
.bg-overlay{
  position:absolute; inset:0; z-index:1;
  background:#0f172a!important; filter:none!important; background-image:none!important;
}
.bg-overlay::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:transparent!important; mix-blend-mode:normal!important; opacity:1!important;
}
/* Logo splash */
#splash-logo{ border:4px solid var(--primary); border-radius:50%; max-width:15%; }

/* ---------- 5) TYPOGRAPHY ---------- */
h1,h2,h3,h4,h5,h6{ font-weight:800; letter-spacing:-.02em; margin:0; }
.fw-900{ font-weight:900; }
#manifesto p,#manifesto ol{ color:var(--muted)!important; margin:0; }

/* Label “Updated in …” di bawah judul Markov */
#markov-updated{ color:var(--muted); text-align:center; margin:-6px 0 .5rem; font-size:.9rem; }

/* ---------- 6) BUTTONS ---------- */
.btn{ border-radius:10px; box-shadow:none!important; font-weight:600; }
.btn-primary{ background:var(--primary)!important; border-color:var(--primary)!important; }
.btn-primary:hover,.btn-primary:focus{ background:var(--primary-hover)!important; border-color:var(--primary-hover)!important; }

/* Outline buttons (vote list) */
.btn-outline-primary{ border-color:var(--primary)!important; color:var(--primary)!important; background:transparent!important; }
.btn-outline-primary:hover,.btn-outline-primary:focus{ background:var(--primary)!important; color:#fff!important; }

/* ---------- 7) FORMS ---------- */
.form-label{ font-weight:700; color:var(--text)!important; }
.form-control{ border-radius:10px; border:1px solid var(--border); box-shadow:none; }
.form-control:focus{ border-color:var(--primary); outline:none; box-shadow:none; }

/* ---------- 8) HOME HEADER ---------- */
#home-page .this-page:first-of-type{ border:1px solid var(--border); }
#home-page h2{ font-weight:600; color:var(--text); }
#home-page i{ color:var(--primary)!important; }
/* Embedded About Us iframe */
#about-us-embed{
  width:100%;
  border:0;
  box-shadow:#eee 0px 5px 20px 0px
}

/* ---------- 9) EMITEN LIST / INFO ---------- */
#emiten-list{ gap:.5rem!important; }
#emiten-list a{ text-decoration:none; width:auto; min-width:30%; }
.emiten-info{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); }

/* ---------- 10) COUNTDOWN ---------- */
#countdown{ font-size:3rem; font-weight:800; color:var(--primary)!important; }

/* ---------- 11) LINKS ---------- */
.text-center a{ color:var(--primary)!important; text-decoration:none; }
.text-center a:hover{ text-decoration:underline; }

/* ---------- 12) TOP PICKS – GRID & CARDS ---------- */
/* 3 kolom di desktop (sesuai file lama) */ /* :contentReference[oaicite:2]{index=2} */
.picks-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; }
#pickCard{ width:12.5rem; }

/* Mobile: jadi scroller horizontal dengan snap */ /* :contentReference[oaicite:3]{index=3} */
@media (max-width:960px){
  #picksOuter{ width:100%; }
  .picks-grid{ display:flex; flex-wrap:nowrap; overflow-x:auto; gap:1rem; padding-bottom:.75rem; scroll-snap-type:x mandatory; }
  .pick-card{ flex:0 0 70%; scroll-snap-align:start; }       /* :contentReference[oaicite:4]{index=4} */
  .picks-grid>.pick-card:first-child{ margin-left:1rem; }
  .picks-grid>.pick-card:last-child{ margin-right:1rem; }
  .picks-grid::-webkit-scrollbar{ display:none; }
}

/* Kartu */
#top-picks .pick-card{ position:relative; }                   /* :contentReference[oaicite:5]{index=5} */
.pick-card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:1rem;
}
.pick-head{ display:flex; align-items:center; gap:.5rem; margin-bottom:.25rem; }
.pick-ticker{ letter-spacing:-.02em; margin:0; }
.pick-score{ font-size:.9rem; color:var(--muted); }

/* Progress bar (warna di-set inline JS; ini hanya base + animasi) */
.score-rail{
  width:100%; height:10px; background:#edf2f7;
  border-radius:999px; overflow:hidden; margin:.35rem 0 .5rem;
}
.score-fill{ height:100%; transition:width .25s ease, background .25s ease; }

/* Bullets & badge */
.pick-bullets{ margin:0; padding-left:1.1rem; min-height:150px;width: 14rem; }
.pick-bullets li{ margin:.15rem 0; }
.pick-bullets li > strong{color: #007bff;text-transform: uppercase;}
.pick-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.8rem; padding:.25rem .5rem; border-radius:999px;
  background:#eaf4ff; color:var(--primary);
}
.pick-cta{ margin-top:.75rem; width:100%; }

/* ---------- 13) STALE DIMMING (drop-in, tidak mengganggu yang lain) ---------- */
/* aktif ketika JS memberi class #top-picks.is-stale */        /* :contentReference[oaicite:6]{index=6} */
#top-picks.is-stale .pick-card{
  opacity:.55; filter:grayscale(40%) saturate(85%); transition:opacity .2s, filter .2s;
}
#top-picks.is-stale .pick-card:hover{ opacity:.85; filter:none; }

/* ---------- 14) REKO TABLE ---------- */

#dump-wrap{ overflow-x:auto; }
#dump-wrap > div:nth-child(2){display:none}

#reko-section h5{ letter-spacing:-.01em; }
#reko-thead th, #dump-wrap th{ color:#475569; position:sticky; top:0; background:#fafafa; } /* :contentReference[oaicite:7]{index=7} */
#reko-tbody td, #dump-wrap td{ border:none; vertical-align:middle; }                          /* :contentReference[oaicite:8]{index=8} */
.reko-right{ text-align:right; }
.reko-pos{ color:#0a7f4f; font-weight:600; }
.reko-neg{ color:#b71c1c; font-weight:600; }
.reko-small{ font-size:12px; color:#64748b; }
#reko-tbody table thead tr th,#dump-wrap table thead tr th{ background:#ddd; font-size:.9rem; text-align:center!important; } /* :contentReference[oaicite:9]{index=9} */

/* --- feed chips (NM/MK) --- */
.feed-chip{
  display:inline-block; font-size:.72rem; line-height:1;
  font-weight:800; letter-spacing:.02em;
  padding:.275rem .55rem; border-radius:999px;
}
.feed-chip.nm{ background:#0f766e; color:#fff; } /* non-markov, optional */
.feed-chip.mk{ background:#6f42c1; color:#fff; } /* markov */



/* Loading shimmer */
.reko-shimmer{
  height:56px; background:linear-gradient(90deg,#f4f4f4 0%,#eaeaea 50%,#f4f4f4 100%);
  background-size:200% 100%; animation:rekoShimmer 1.3s infinite; border-radius:8px;
}
@keyframes rekoShimmer{
  0%{ background-position:200% 0 } 100%{ background-position:-200% 0 }
}

/* ---------- 15) NOTIFICATIONS ---------- */
#notif-container{
  position:fixed; bottom:1rem; left:1rem;
  display:flex; flex-direction:column; gap:.5rem;
  pointer-events:none; z-index:9999;
}
.notif{
  background:gold; color:var(--text);
  border-radius:10px; padding:.5rem .75rem; font-size:.8rem; white-space:nowrap;
  opacity:0; animation:slideIn .25s ease-out forwards, fadeOut .3s ease-in forwards 8.7s;
}
@keyframes slideIn{ from{ transform:translateY(10px); opacity:0; } to{ transform:translateY(0); opacity:1; } }
@keyframes fadeOut{ to{ opacity:0; } }

/* ---------- 16) RESPONSIVE TWEAKS ---------- */
@media (max-width:600px){
  .w-25{ width:100%!important; }
  .emiten-info+.emiten-info{ margin-top:.5rem; }
}
@media (max-width:960px){
  #splash-logo{ max-width:30%; }
  #login-form{ width:100%!important; }
  .this-page{ width:100%!important; max-width:100%!important; }
}

/* ---------- 17) TAG CAPSULES ---------- */
.tags{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:20px 0; }
.tag{ padding:6px 14px; border-radius:20px; font-size:14px; font-weight:500; text-decoration:none; color:#fff; transition:.2s; }
.tag:hover{ transform:scale(1.05); opacity:.9; }
.tag.blue{ background:#007bff; }
.tag.green{ background:#28a745; }
.tag.orange{ background:#fd7e14; }
.tag.purple{ background:#6f42c1; }
.tag.red{ background:#dc3545; }
.tag.teal{ background:#20c997; }
.tag.pink{ background:#e83e8c; }