/* ═══════════════════════════════════════════════════════════════════════
   MEMBER · SHELL — kerangka navigasi: sidebar desktop, dock ponsel, halaman "luar"
   ═══════════════════════════════════════════════════════════════════════
   Menggantikan member-desktop.css dan member-nav-unified.css (diarsipkan di
   resources/arsip/member-legacy/). Struktur (grid, posisi, mode ringkas) disalin dari
   keduanya; WARNA seluruhnya memakai token dari tokens.css, tidak ada nilai warna tertulis.

   Dua keluarga halaman memakai shell ini:
   1. Halaman dalam kerangka  → <div id="st-app"> (user/master.blade.php)
   2. Halaman "luar"          → body.st-luar-app / body.st-luar-gulir (/chart, /terminal-trading)
      memuat nav sendiri lewat partials/member-nav-luar-css. Keduanya HARUS tampak sama.

   Markup: user/layouts/desktop-nav.blade.php (sidebar), user/layouts/navbar.blade.php (dock).
   Mode ringkas sidebar: atribut html[data-member-compact="1"] dipasang public/assets/js/member-desktop.js.
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────── Sidebar desktop ───────── */
.st-desktop-nav{display:none}

@media(min-width:1100px){
  body #st-app{grid-template-columns:var(--st-desktop-width) minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr)!important}
  body #st-app>.st-main{grid-column:2;grid-row:1;min-width:0;min-height:0}
  body #st-app>.st-tabs{display:none!important}
  body #st-app .st-scroll{padding-bottom:24px}
  body #st-app .st-wrap{max-width:1100px;width:100%}

  /* Kulit sidebar — dalam kerangka (#st-app) dan di halaman luar (body>) memakai aturan yang sama */
  :is(#st-app>.st-desktop-nav,body>.st-desktop-nav){
    display:flex;flex-direction:column;min-height:0;overflow-y:auto;box-sizing:border-box;
    padding:0 17px 22px;scrollbar-width:thin;
    background:var(--st-side-bg);border-right:1px solid var(--st-side-line);color:var(--st-ink-2);
    font-family:var(--st-font);
  }
  body #st-app>.st-desktop-nav{grid-column:1;grid-row:1}

  /* Sel merek setinggi bilah atas (83px) supaya garisnya menyambung */
  .st-desktop-brand{display:flex;flex-direction:column;justify-content:center;gap:3px;flex:none;box-sizing:border-box;height:83px;margin:0 -17px 14px;padding:0 28px;border-bottom:1px solid var(--st-side-line);color:var(--st-accent);text-decoration:none;font-size:31px;font-weight:600;letter-spacing:-.05em;line-height:1;text-transform:lowercase}
  .st-brand-teks{display:block}
  .st-desktop-brand small{font-size:9px;font-weight:500;letter-spacing:.08em;color:var(--st-muted);text-transform:lowercase}
  .st-desktop-nav nav{display:grid;gap:7px}
  .st-desktop-nav nav a{display:flex;align-items:center;gap:13px;padding:12px 15px;min-height:47px;border-radius:12px;color:var(--st-muted);text-decoration:none;font-size:13px;font-weight:550}
  .st-desktop-nav nav a svg{width:19px;height:19px;flex-shrink:0}
  .st-desktop-nav nav a:hover{background:var(--st-accent-soft);color:var(--st-side-on-ink)}
  .st-desktop-nav nav a[aria-current=page]{background:var(--st-side-on-bg);color:var(--st-side-on-ink);box-shadow:inset 3px 0 var(--st-accent)}
  .st-desktop-divider{margin:19px 15px 10px;padding-top:19px;border-top:1px solid var(--st-side-line);font-size:8px;letter-spacing:.2em;color:var(--st-muted);font-weight:600}

  /* Tombol ciutkan: ikon kecil di sel merek (tetap berfungsi; mode ringkas memindahkannya ke bawah merek) */
  /* HANYA yang di dalam kerangka: sidebar halaman luar sudah position:fixed (aturan body:is(.st-luar-*) di atas) dan tidak boleh ditimpa */
  #st-app>.st-desktop-nav{position:relative}
  .st-desktop-toggle{position:absolute;top:30px;right:12px;z-index:2;width:28px;height:28px;min-height:0;margin:0;padding:0;justify-content:center;border-color:transparent;background:transparent}
  .st-desktop-toggle span{display:none}
  .st-desktop-brand{padding-right:48px}
  /* Profil dijangkau lewat "Akun saya" di bilah atas; sidebar dalam kerangka tidak lagi memuat baris akun */
  body #st-app>.st-desktop-nav .st-desktop-account{display:none}

  /* Kartu pendamping (maskot) */
  .st-desktop-companion{position:relative;flex:none;min-height:116px;margin-top:auto;padding:18px 12px 14px;background:var(--st-accent-soft);border:1px solid var(--st-hair);border-radius:15px;overflow:hidden}
  .st-desktop-companion img{position:absolute;right:-3px;top:8px;width:86px;height:86px;object-fit:contain}
  .st-desktop-companion p{position:relative;max-width:90px;margin:0;font-size:14px;font-weight:700;line-height:1.35;letter-spacing:-.02em;color:var(--st-side-on-ink)}
  .st-desktop-companion small{display:block;margin-top:13px;font-size:8px;color:var(--st-muted)}

  /* Baris nama+jam khusus ponsel; di desktop profil dijangkau lewat "Akun saya" */
  body #st-app .st-akun-hp{display:none}

  /* Bilah atas (judul halaman) */
  body #st-app .st-top{display:flex;align-items:center;justify-content:space-between;gap:20px;flex:none;box-sizing:border-box;min-height:83px;padding:17px 34px;background:var(--st-panel);border-bottom:1px solid var(--st-hair)}
  .st-top-eyebrow{display:block;font-size:8px;letter-spacing:.2em;color:var(--st-muted)}
  body #st-app .st-top h1{margin:6px 0 0;font-size:21px;letter-spacing:-.03em;font-weight:500;color:var(--st-ink)}
  body #st-app .st-top .st-when{display:none}
  .st-top-akun{display:inline-flex;align-items:center;gap:14px;padding:11px 15px;border:1px solid var(--st-hair);border-radius:10px;background:var(--st-accent-soft);color:var(--st-accent);text-decoration:none;font-size:11px;font-weight:700}
  .st-top-akun:hover{filter:brightness(.97)}

  .st-desktop-account{display:flex;gap:9px;align-items:center;flex:none;margin-top:14px;padding:12px 6px 0;color:var(--st-ink);text-decoration:none}
  .st-desktop-account>span:last-child{min-width:0}
  .st-desktop-account strong{display:block;max-width:142px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:inherit}
  .st-desktop-account small{display:block;margin-top:3px;color:var(--st-muted);font-size:10px}
  .st-desktop-avatar{width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--st-hair);border-radius:50%;background:var(--st-accent-soft);color:var(--st-accent);flex-shrink:0;font-size:12px;font-weight:700}
  .st-desktop-nav a:focus-visible{outline:3px solid var(--st-accent);outline-offset:2px}

  /* Halaman luar: sidebar tetap di kiri, isi digeser selebar sidebar */
  body:is(.st-luar-app,.st-luar-gulir):not(.embed){padding-left:var(--st-desktop-width)!important;padding-bottom:0!important;box-sizing:border-box;--st-luar-navh:0px!important}
  body:is(.st-luar-app,.st-luar-gulir):not(.embed)>.st-desktop-nav{position:fixed;inset:0 auto 0 0;z-index:65;width:var(--st-desktop-width)}
  body:is(.st-luar-app,.st-luar-gulir) .st-luar-tabs{display:none!important}
  body.st-luar-app:not(.embed) #app{width:100%;height:var(--app-h,100dvh)!important}
  body.embed>.st-desktop-nav{display:none!important}

  /* Mode ringkas (hanya ikon) */
  html[data-member-compact="1"] .st-desktop-nav{padding-left:8px!important;padding-right:8px!important}
  html[data-member-compact="1"] .st-desktop-brand{margin-left:-8px;margin-right:-8px;padding:0;align-items:center;font-size:20px}
  html[data-member-compact="1"] .st-brand-teks span,
  html[data-member-compact="1"] .st-desktop-brand small,html[data-member-compact="1"] .st-desktop-companion{display:none}
  html[data-member-compact="1"] .st-desktop-nav nav a span,
  html[data-member-compact="1"] .st-desktop-divider,
  html[data-member-compact="1"] .st-desktop-account>span:last-child,
  html[data-member-compact="1"] .st-desktop-toggle span{display:none}
  html[data-member-compact="1"] .st-desktop-nav nav a{justify-content:center;padding:12px;gap:0}
  html[data-member-compact="1"] .st-desktop-nav nav+nav{margin-top:16px}
  html[data-member-compact="1"] .st-desktop-account{justify-content:center;padding-left:0;padding-right:0}
  html[data-member-compact="1"] .st-desktop-toggle{position:static;margin:0 auto 12px;border-color:var(--st-side-line)}
  html[data-member-compact="1"] .st-desktop-brand{padding-right:0}
  html[data-member-compact="1"] .st-desktop-toggle svg{transform:rotate(180deg)}
}

/* Tombol ciutkan sidebar (ada di markup di semua lebar; tampil hanya bersama sidebar) */
.st-desktop-toggle{display:flex;align-items:center;gap:10px;background:transparent;border:1px solid var(--st-hair);color:var(--st-ink-2);border-radius:var(--st-r);min-height:36px;margin:0 8px 16px;padding:7px 10px;cursor:pointer;font:11px var(--st-font)}
.st-desktop-toggle svg{width:18px;height:18px;flex-shrink:0}
.st-desktop-toggle:focus-visible{outline:3px solid var(--st-accent);outline-offset:2px}

/* ───────── Dock ponsel (< 1200px) — dalam kerangka (.st-tabs) dan halaman luar (.st-luar-tabs) ───────── */
@media(max-width:1199px){
  :root{--st-luar-row:62px;--st-dock-gap:10px}

  :is(#st-app>.st-tabs,body nav.st-luar-tabs){
    display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;
    width:100%!important;max-width:none!important;height:auto!important;min-height:0!important;
    margin:0!important;padding:6px 8px max(8px,env(safe-area-inset-bottom,0px))!important;
    box-sizing:border-box;isolation:isolate;overflow:visible;
    border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;
  }
  body nav.st-luar-tabs{left:0!important;right:0!important;bottom:0!important;transform:none!important}

  /* Pelat dock */
  :is(#st-app>.st-tabs,body nav.st-luar-tabs)::before{
    content:"";display:block!important;position:absolute;inset:0!important;
    width:auto!important;transform:none!important;pointer-events:none;
    border-radius:0!important;background:var(--st-panel)!important;
    border:0!important;border-top:1px solid var(--st-hair)!important;box-shadow:none!important;
  }

  /* Satu tab */
  :is(#st-app>.st-tabs,body nav.st-luar-tabs)>a{
    position:relative!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
    min-width:0;height:56px!important;gap:4px!important;padding:0!important;border-radius:16px!important;
    background:transparent!important;box-shadow:none!important;color:var(--st-muted)!important;
    font-family:var(--st-font);font-size:10px!important;font-weight:600;line-height:14px;z-index:1;text-decoration:none;
  }
  :is(#st-app>.st-tabs,body nav.st-luar-tabs)>a .st-tab-l{font-size:10px!important;line-height:14px!important;letter-spacing:0;color:inherit!important}
  :is(#st-app>.st-tabs,body nav.st-luar-tabs)>a svg{
    position:relative!important;top:auto!important;left:auto!important;transform:none!important;
    width:20px!important;height:20px!important;padding:0!important;border:0!important;border-radius:0!important;
    background:none!important;color:inherit!important;fill:none!important;box-shadow:none!important;box-sizing:border-box;
  }

  /* Penanda halaman aktif */
  :is(#st-app>.st-tabs,body nav.st-luar-tabs)>a::before{content:"";display:block!important;position:absolute;inset:2px 3px!important;border-radius:16px!important;opacity:0;transform:none;pointer-events:none}
  :is(#st-app>.st-tabs,body nav.st-luar-tabs)>a.on{color:var(--st-accent)!important;font-weight:800!important}
  :is(#st-app>.st-tabs,body nav.st-luar-tabs)>a.on::before{opacity:1!important;background:var(--st-accent-soft)!important;box-shadow:none!important}
  :is(#st-app>.st-tabs,body nav.st-luar-tabs)>a.on :is(svg,.st-tab-l){color:var(--st-accent)!important}
  :is(#st-app>.st-tabs,body nav.st-luar-tabs)>a:focus-visible{outline:2px solid var(--st-accent);outline-offset:-2px}
}

/* ───────── Transisi antarhalaman ───────── */
@view-transition{navigation:auto}
::view-transition-old(root){animation:140ms ease-out both st-page-out}
::view-transition-new(root){animation:240ms cubic-bezier(.2,.75,.25,1) both st-page-in}
@keyframes st-page-out{to{opacity:.96;transform:translateY(-2px)}}
@keyframes st-page-in{from{opacity:0;transform:translateY(7px)}}
@media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation-duration:.01ms}}

/* Lencana NEW pada menu sidebar (Game) */
.st-desktop-new{margin-left:auto;padding:3px 5px;border-radius:4px;background:var(--st-accent-soft);color:var(--st-accent);font-size:7px;font-weight:700;letter-spacing:.8px}
html[data-member-compact="1"] .st-desktop-new{display:none}

/* ───────── Bilah atas halaman luar (Chart, Terminal) — desktop ───────── */
.st-top-luar{display:none}
@media(min-width:1100px){
  /* Chart (.st-luar-app) TANPA bilah atas: butuh ruang penuh untuk grafik. Bilah hanya untuk halaman gulir (Terminal). */
  body.st-luar-gulir:not(.embed)>.st-top-luar{
    position:fixed;top:0;left:var(--st-desktop-width);right:0;z-index:64;display:flex;align-items:center;justify-content:space-between;gap:20px;
    box-sizing:border-box;height:83px;padding:17px 34px;background:var(--st-panel);border-bottom:1px solid var(--st-hair);font-family:var(--st-font);
  }
  .st-top-luar h1{margin:6px 0 0;font-size:21px;letter-spacing:-.03em;font-weight:500;color:var(--st-ink)}
  body.st-luar-gulir:not(.embed){padding-top:83px!important}
}

/* ───────── Widget WhatsApp melayang di halaman luar member (Terminal, dll.) ─────────
   Markup di master publik memakai gradasi hijau inline dan kelas emerald; kelas st-luar-* hanya dipasang untuk member,
   sehingga tampilan tamu tidak berubah. */
body:is(.st-luar-app,.st-luar-gulir,.st-luar-tamu) #wa-toggle{background:var(--st-panel)!important;border-color:var(--st-hair)!important;box-shadow:0 8px 24px rgba(48,69,43,.18)!important}
body:is(.st-luar-app,.st-luar-gulir,.st-luar-tamu) #wa-toggle [style*="linear-gradient"]{background:var(--st-accent)!important}
body:is(.st-luar-app,.st-luar-gulir,.st-luar-tamu) #wa-toggle [class*="bg-green"]{background-color:var(--st-accent)!important}
body:is(.st-luar-app,.st-luar-gulir,.st-luar-tamu) #wa-toggle [class*="text-emerald"],body:is(.st-luar-app,.st-luar-gulir,.st-luar-tamu) #wa-toggle [class*="text-green"]{color:var(--st-accent)!important}
body:is(.st-luar-app,.st-luar-gulir,.st-luar-tamu) #wa-dropdown{background:var(--st-panel)!important;border-color:var(--st-hair)!important}
body:is(.st-luar-app,.st-luar-gulir,.st-luar-tamu) #wa-dropdown button[type="submit"]{background:var(--st-accent)!important;color:var(--st-on-accent)!important}

/* ───────── TAMU (belum login): halaman yang sama tanpa sidebar dan dock; kop = merek (klik: ke Beranda) + tombol "Masuk" ───────── */
body.st-tamu #st-app{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr)!important}
body.st-tamu #st-app>.st-main{grid-column:1;grid-row:1;min-width:0;min-height:0}
body.st-tamu #st-app .st-top-tamu{display:flex;align-items:center;justify-content:space-between;gap:14px;flex:none;box-sizing:border-box;min-height:68px;padding:12px 34px;background:var(--st-panel);border-bottom:1px solid var(--st-hair);font-family:var(--st-font)}
.st-tamu-brand{display:flex;flex-direction:column;gap:3px;color:var(--st-accent);text-decoration:none;line-height:1}
.st-tamu-logo{font-size:25px;font-weight:600;letter-spacing:-.05em;text-transform:lowercase}
.st-tamu-brand small{font-size:9px;font-weight:500;letter-spacing:.08em;color:var(--st-muted);text-transform:lowercase}
.st-tamu-brand:focus-visible{outline:3px solid var(--st-accent);outline-offset:4px;border-radius:6px}
body.st-tamu #st-app .st-top-tamu .st-top-akun{display:inline-flex;align-items:center;gap:8px;flex:none;padding:10px 15px;border:1px solid var(--st-hair);border-radius:10px;background:var(--st-accent-soft);color:var(--st-accent);text-decoration:none;font-size:11px;font-weight:700;white-space:nowrap}
body.st-tamu #st-app .st-top-tamu .st-top-akun:hover{filter:brightness(.97)}
body.st-tamu #st-app .st-top-tamu .st-top-akun:focus-visible{outline:3px solid var(--st-accent);outline-offset:2px}
@media(max-width:1099px){
  body.st-tamu #st-app .st-top-tamu{min-height:0;padding:12px 16px}
  body.st-tamu #st-app .st-top-tamu .st-top-akun{padding:9px 14px}
}

/* ───────── TAMU di halaman luar (Terminal): seperti member tanpa sidebar dan dock; tombol "Masuk" di kop ───────── */
body.st-luar-tamu{--st-desktop-width:0px;padding-top:83px!important;padding-bottom:0!important}
body.st-luar-tamu>.st-top-luar{position:fixed;top:0;left:0;right:0;z-index:64;display:flex;align-items:center;justify-content:space-between;gap:16px;box-sizing:border-box;height:83px;padding:17px 34px;background:var(--st-panel);border-bottom:1px solid var(--st-hair);font-family:var(--st-font)}
body.st-luar-tamu>.st-top-luar .st-top-eyebrow{display:block;font-size:8px;letter-spacing:.2em;line-height:1.2;color:var(--st-muted)}
body.st-luar-tamu>.st-top-luar h1{margin:6px 0 0;font-size:21px;font-weight:500;letter-spacing:-.03em;color:var(--st-ink)}
body.st-luar-tamu>.st-top-luar .st-top-akun{display:inline-flex;align-items:center;gap:8px;flex:none;padding:11px 15px;border:1px solid var(--st-hair);border-radius:10px;background:var(--st-accent-soft);color:var(--st-accent);text-decoration:none;font-size:11px;font-weight:700;white-space:nowrap}
body.st-luar-tamu>.st-top-luar .st-top-akun:focus-visible{outline:3px solid var(--st-accent);outline-offset:2px}
@media(max-width:1099px){
  body.st-luar-tamu{padding-top:62px!important}
  body.st-luar-tamu>.st-top-luar{height:62px;padding:10px 16px}
  body.st-luar-tamu>.st-top-luar h1{margin-top:4px;font-size:19px}
  body.st-luar-tamu>.st-top-luar .st-top-akun{padding:9px 14px}
}