/* Komponen UI yang benar-benar reusable lintas app (saat ini: theme toggle) */
  /* ---------- THEME TOGGLE ---------- */
  /* 3 mode (Gelap Galaxy / Terang / Gelap Simple) -- dulu switch pill geser 2 posisi (ON/OFF),
     metafora "switch" fisik ITU BINARY, dipaksa jadi 3 posisi bikin posisi tengah ambigu. Diganti
     tombol BULAT SATU IKON yang berganti tiap diklik (siklus) -- ikon+warna di tombol ITU SENDIRI
     langsung nunjukin mode yang aktif SEKARANG, tidak perlu nebak dari posisi thumb. Ukuran &
     posisi sengaja lebih kecil dari pill lama (58px -> 40px), jadi tetap muat nyaman di ruang
     90px yang sudah disisakan .app-header/.topbar (layout.css/admin-panel.css/teamsar.css) --
     tidak perlu ubah spacing di tempat lain.*/
  .theme-toggle{position:fixed;top:calc(14px + env(safe-area-inset-top));right:14px;z-index:200;width:40px;height:40px;border-radius:50%;background:var(--glass-bg-soft);border:1px solid var(--glass-border-soft);-webkit-backdrop-filter:var(--glass-blur-soft);backdrop-filter:var(--glass-blur-soft);padding:0;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);cursor:pointer;}
  .theme-toggle:hover{border-color:var(--maroon-bright);}
  .tt-thumb{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--maroon),var(--maroon-bright));display:flex;align-items:center;justify-content:center;font-size:13px;transition:transform .3s var(--ease-bounce),background .3s var(--ease);box-shadow:0 2px 6px rgba(0,0,0,.35);}
  .theme-toggle:active .tt-thumb{transform:scale(.88);}
  :root[data-theme="light"] .tt-thumb{background:linear-gradient(135deg,#F2B134,#FFDD7A);}
  :root[data-theme="simple"] .tt-thumb{background:linear-gradient(135deg,#2A2A2E,#4A4A50);}
  @media(max-width:520px){ .theme-toggle{top:calc(20px + env(safe-area-inset-top));right:10px;} }

  /* ---------- TOAST ---------- */
  .toast{position:fixed;bottom:24px;left:50%;background:var(--glass-bg);border:1px solid var(--glass-border);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);color:var(--ink);padding:11px 20px;border-radius:8px;font-size:13px;z-index:100;box-shadow:var(--shadow-lg);opacity:0;transform:translate(-50%,16px);pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease);}
  .toast.show{opacity:1;transform:translate(-50%,0);}

  /* ---------- TOGGLE INTIP PIN/PASSWORD (dipakai lintas Index/Admin/Teamsar) ----------
     padding-right pakai !important -- .field input didefinisikan terpisah per app
     (client-portal.css/admin-panel.css/teamsar.css, masing-masing beda spesifisitas &
     urutan load), jadi cara paling aman biar tombol tidak numpuk teks di semua kasus
     (termasuk .login-box .field input di admin-panel.css) tanpa perlu utak-atik 3 file itu. */
  .pw-field-wrap{position:relative;}
  .pw-field-wrap input{padding-right:42px !important;}
  .pw-toggle-btn{position:absolute;top:50%;right:4px;transform:translateY(-50%);background:none;border:none;padding:8px;font-size:16px;line-height:1;cursor:pointer;opacity:.6;transition:opacity .15s;}
  .pw-toggle-btn:hover{opacity:1;}