/* Lanjutan penyederhanaan di atas calm.css: komponen yang belum disentuh,
   tombol bantuan (tooltip tap-friendly), dan tabel yang jadi kartu di layar sempit. */

/* layout: sidebar di samping, bukan header di atas */
.app{display:flex;align-items:flex-start;min-height:100vh}
.sidebar{width:230px;flex:none;border-right:1px solid var(--line);padding:20px 16px;display:flex;flex-direction:column;gap:20px;position:sticky;top:0;height:100vh;overflow-y:auto;background:var(--panel)}
.sidebar .top{padding:0;flex-direction:column;align-items:flex-start;gap:12px}
.sidebar .brand p{font-size:12px}
.sidebar .pills{flex-direction:column;align-items:stretch;gap:3px;margin-left:0;width:100%}
.sidebar .pill{width:100%;text-align:left;border-radius:8px;padding:9px 12px;border-color:transparent;background:transparent;box-sizing:border-box}
.sidebar .pill.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.sidebar .pill:not(.on):hover{background:var(--sel)}
.sidebar .more{width:100%}
.sidebar .more summary{width:100%;box-sizing:border-box}
.sidebar .more .menu{position:static;box-shadow:none;border:0;padding:2px 0 0 12px;min-width:0;background:transparent}
.sidebar .more .menu a,.sidebar .more .menu button.themebtn{padding:7px 10px;font-size:13px;width:100%;box-sizing:border-box}
.content{flex:1;min-width:0}
@media (max-width:860px){
  .app{flex-direction:column;min-height:0}
  .sidebar{position:static;width:100%;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;overflow:visible;border-right:0;border-bottom:1px solid var(--line);gap:14px}
  .sidebar .top{flex-direction:row;align-items:center;width:auto}
  .sidebar .pills{flex-direction:row;flex-wrap:wrap;width:auto;margin-left:auto;gap:8px}
  .sidebar .pill{width:auto;text-align:center;border-color:var(--ink)}
  .sidebar .more{width:auto;position:relative}
  .sidebar .more .menu{position:absolute;right:0;top:calc(100% + 6px);z-index:20;box-shadow:0 8px 24px #0002;border:1px solid var(--line);border-radius:8px;padding:8px;background:var(--panel);min-width:190px}
  .sidebar .more .menu a,.sidebar .more .menu button.themebtn{width:auto}
}

/* tombol bantuan "?" + popover */
.help{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;border:1px solid var(--mut);background:transparent;color:var(--mut);font:600 10px var(--sans);line-height:1;cursor:pointer;padding:0;vertical-align:middle;flex:none}
.help:hover,.help[aria-expanded="true"]{border-color:var(--ink);color:var(--ink)}
.tip-pop{position:absolute;z-index:30;max-width:min(280px,84vw);background:var(--ink);color:var(--bg);font:400 12.5px/1.5 var(--sans);padding:9px 12px;border-radius:8px;box-shadow:0 8px 24px #0003}

/* tab bar halaman detail wallet */
.tabs{gap:6px;border-bottom:1px solid var(--line)}
.tab{font:600 13px var(--sans);letter-spacing:0;text-transform:none;padding:7px 14px;border-radius:8px 8px 0 0}
.tab.on{background:var(--panel2);color:var(--ink);border-bottom-color:var(--ink)}
.tab small{font-size:11px}

/* panel "Performa" (kv) di wallet */
.kv dt{font-family:var(--sans);letter-spacing:0;text-transform:none;font-size:12.5px}
.kv dd{font-family:var(--sans);font-weight:600;font-size:13.5px}

/* strip statistik atas halaman wallet */
.strip small{font-family:var(--sans);letter-spacing:0;text-transform:none;font-size:12.5px}
.strip .s{font-family:var(--sans);letter-spacing:0;text-transform:none;font-size:12px}

/* pesan info/error */
.note{font-family:var(--sans);letter-spacing:0;font-size:13.5px;line-height:1.5;border-radius:8px}

/* kartu tahap pipeline System */
.stages{border-radius:8px;overflow:hidden}
.st b{font-family:var(--sans);letter-spacing:0;text-transform:none;font-size:13px}
.st span{font-family:var(--sans);letter-spacing:0;text-transform:none;font-size:12.5px}
.pfoot{font-family:var(--sans);letter-spacing:0;text-transform:none;font-size:12.5px}

/* judul kolom tabel */
th{font-family:var(--sans)}

/* pengaturan lanjutan (settings) */
details.adv{border:1px solid var(--line);border-radius:8px;padding:10px 14px;background:var(--panel2)}
details.adv summary{cursor:pointer;font:600 13px var(--sans);display:flex;align-items:center;gap:8px;list-style:none}
details.adv summary::-webkit-details-marker{display:none}
details.adv summary::after{content:"tampilkan";margin-left:auto;color:var(--mut);font-weight:500;font-size:12.5px}
details.adv[open] summary::after{content:"sembunyikan"}
details.adv .set{margin-top:14px}

/* kamus istilah */
dialog#glossary{border:1px solid var(--line);border-radius:10px;padding:0;background:var(--bg);color:var(--ink);width:min(520px,92vw);max-height:80vh;overflow:auto}
dialog#glossary::backdrop{background:#00000055}
.gform{padding:18px 20px}
.gform dl{margin:0;display:flex;flex-direction:column;gap:12px}
.gform dt{font:600 13.5px var(--sans)}
.gform dd{margin:3px 0 0;color:var(--ink2);font-size:13px;line-height:1.5}

/* Discover Wallet: daftar list, bukan grid kartu */
.clist{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.crow{display:flex;align-items:center;gap:18px;padding:13px 16px;border-bottom:1px solid var(--line2);flex-wrap:wrap}
.crow:last-of-type{border-bottom:0}
.crow:hover{background:var(--sel)}
.crow-id{display:flex;align-items:center;gap:10px;flex:1 1 210px;min-width:0}
.crow-id a{font:700 15px var(--sans);text-decoration:none}
.crow-id .sub{color:var(--mut);font-size:12.5px}
.crow-stats{display:flex;gap:18px 22px;flex:2 1 380px;flex-wrap:wrap}
.crow-stats small{display:block;font-size:12px;color:var(--mut)}
.crow-stats b{font:700 16px var(--sans)}
.crow-sub{flex:1 1 240px;color:var(--mut);font-size:12.5px}
.crow-actions{display:flex;align-items:center;gap:10px;flex:none;margin-left:auto}
.crow-sentinel{padding:20px;text-align:center;font-size:13px}
@media (max-width:760px){
  .crow{flex-direction:column;align-items:stretch;gap:10px}
  .crow-actions{margin-left:0;justify-content:space-between}
}

/* tabel -> kartu di layar sempit */
@media (max-width:640px){
  .tw.stackable table,.tw.stackable thead,.tw.stackable tbody,.tw.stackable tr{display:block;width:100%}
  .tw.stackable thead{position:absolute;left:-9999px}
  .tw.stackable tbody tr{border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin-bottom:8px;background:var(--panel)}
  .tw.stackable td{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 2px;border-bottom:1px solid var(--line2);white-space:normal;text-align:right}
  .tw.stackable td:last-child{border-bottom:0}
  .tw.stackable td::before{content:attr(data-label);color:var(--mut);font:500 12px var(--sans);text-align:left;margin-right:auto}
}

/* kartu copy trade (halaman /copytrade) */
.clist:has(.ctc){border:0;gap:12px;overflow:visible}
.ctc{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:16px 20px;display:flex;flex-direction:column;gap:14px}
.ctc:hover{border-color:var(--ink)}
.ctc small{display:flex;align-items:center;gap:5px;font:400 12px var(--sans);color:var(--mut)}
.ctc small svg{flex:none;opacity:.8}
.ctc b{font:700 16px var(--sans);font-variant-numeric:tabular-nums}
.ctc-head{display:flex;align-items:center;gap:14px 28px;padding-bottom:14px;border-bottom:1px solid var(--line2);flex-wrap:wrap}
.ctc-id{padding-right:24px;border-right:1px solid var(--line2);min-width:0}
.ctc-addr-row{display:flex;align-items:center;gap:6px}
.ctc-addr-row>svg{color:var(--mut);flex:none}
.ctc-addr{font:700 15px var(--sans);color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.ctc-sub{color:var(--mut);font-size:12.5px;margin-top:2px}
.ctc-foot{display:flex;align-items:center;gap:14px 32px;flex-wrap:wrap}
.ctc-pnl-v{font:700 38px/1.1 var(--sans);font-variant-numeric:tabular-nums}
.ctc-act{display:flex;gap:10px;margin-left:auto;flex-wrap:wrap}
.ctc-act .btn{display:inline-flex;align-items:center;gap:6px;padding:9px 16px}
.ctc-act .btn.warn{border-color:var(--ochre);color:var(--ochre)}
.ctc-act .btn.warn:hover{background:var(--ochre);color:#fff}
@media (max-width:760px){.ctc{padding:14px}.ctc-id{border-right:0;padding-right:0;flex:1 1 100%}.ctc-act{margin-left:0;width:100%}.ctc-act .btn{flex:1;justify-content:center}.ctc-pnl-v{font-size:32px}}
.ctc[data-href]{cursor:pointer}