/* ============================================================
   Lixy Store — UI kit styles: toast, modal, skeleton, motion.
   Pasangan dari static/js/ui.js. Semua token diambil dari app.css,
   tidak ada warna baru yang diperkenalkan di sini.
   ============================================================ */

/* ---------- 1. TOAST ---------- */
/* z-index di atas .mdl-ov (10001) dan .auth-ov (10002): toast dipakai
   untuk melaporkan hasil aksi yang dipicu DARI dalam kedua overlay itu
   (login gagal, konfirmasi hapus). Di bawah keduanya, pesannya terkubur
   di balik scrim gelap overlay dan praktis tidak terbaca. */
.toast-root{position:fixed;top:16px;right:16px;z-index:10010;display:flex;flex-direction:column;gap:9px;pointer-events:none;max-width:min(380px,calc(100vw - 32px))}
.toast{pointer-events:auto;position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:10px;
  padding:12px 12px 13px;background:var(--card);border:1px solid var(--brd2);border-radius:var(--r2);
  box-shadow:var(--el3);overflow:hidden;font-size:13px;line-height:1.5;color:var(--tx2)}
/* Pita warna di tepi kiri: satu-satunya pembeda varian selain ikon,
   jadi status tetap terbaca tanpa bergantung pada warna saja. */
.toast::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--cr)}
.toast-i{width:16px;height:16px;flex-shrink:0;margin-top:2px;color:var(--cr)}
.toast-b{min-width:0;word-break:break-word;padding-right:2px}
.toast-x{background:0;border:0;padding:2px;margin:-2px -2px 0 0;color:var(--mu);cursor:pointer;
  border-radius:5px;line-height:0;flex-shrink:0;transition:color var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease)}
.toast-x svg{width:12px;height:12px}
.toast-x:hover{color:var(--tx);background:var(--raised)}
/* Bar sisa waktu. transform-origin kiri supaya menyusut ke arah baca. */
.toast-bar{position:absolute;left:0;bottom:0;height:2px;width:100%;transform-origin:left;background:var(--cr);opacity:.5}

.toast-success::before,.toast-success .toast-bar{background:var(--g)}
.toast-success .toast-i{color:var(--g)}
.toast-error::before,.toast-error .toast-bar{background:var(--r)}
.toast-error .toast-i{color:var(--r)}
.toast-warn::before,.toast-warn .toast-bar{background:var(--y)}
.toast-warn .toast-i{color:var(--y)}
.toast-info::before,.toast-info .toast-bar{background:var(--cr)}

@media(max-width:700px){
.toast-root{top:auto;bottom:max(12px,env(safe-area-inset-bottom));left:12px;right:12px;max-width:none;flex-direction:column-reverse}
.mobo-sheet{position:fixed;inset:auto 0 0 0;max-height:min(78dvh,520px);overflow:auto;-webkit-overflow-scrolling:touch}
}

/* ---------- 2. MODAL ---------- */
.mdl-ov{position:fixed;inset:0;z-index:10001;display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(9,11,12,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.mdl{width:100%;max-width:400px;background:var(--card);border:1px solid var(--brd2);border-radius:var(--r3);
  padding:22px;box-shadow:var(--el3)}
.mdl-danger{border-color:rgba(222,122,117,.42)}
.mdl-h{font-size:14px;font-weight:700;color:var(--tx);margin-bottom:8px;letter-spacing:.01em}
.mdl-danger .mdl-h{color:var(--r)}
.mdl-m{font-size:13px;color:var(--tx2);line-height:1.6;white-space:pre-line}
.mdl-f{margin-top:14px}
.mdl-a{display:flex;gap:8px;margin-top:18px}
.mdl-a button{flex:1}
.no-scroll{overflow:hidden}

/* ---------- 3. SKELETON & SPINNER ---------- */
.skel{display:block;height:10px;border-radius:var(--rp);
  background:linear-gradient(90deg,var(--raised) 25%,var(--brd2) 50%,var(--raised) 75%);
  background-size:200% 100%;animation:shimmer 1.4s linear infinite}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
.skel-row td{padding:11px 12px}

.spin{display:inline-block;width:12px;height:12px;margin-right:7px;vertical-align:-1px;
  border:2px solid currentColor;border-right-color:transparent;border-radius:50%;
  animation:spin .62s linear infinite;opacity:.85}
@keyframes spin{to{transform:rotate(360deg)}}
button.is-busy{cursor:progress}

/* ---------- 4. RIPPLE ---------- */
button{overflow:hidden}
.rip{position:absolute;border-radius:50%;background:currentColor;pointer-events:none;opacity:0}

/* ---------- 5. REVEAL ---------- */
[data-reveal]{opacity:0;transform:translateY(20px);
  transition:opacity .62s var(--out-expo),transform .62s var(--out-expo)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal=left]{transform:translateX(-24px)}
[data-reveal=right]{transform:translateX(24px)}
[data-reveal=scale]{transform:scale(.94)}

/* ---------- 6. MICRO-INTERACTION pada komponen yang sudah ada ---------- */

/* Tombol: angkat sedikit saat hover, spring saat dilepas. Sebelumnya
   hanya ada translateY(1px) pada :active tanpa umpan balik hover. */
button{transition:background-color var(--t-fast) var(--ease),
  transform var(--t-fast) var(--spring),box-shadow var(--t-fast) var(--ease),
  opacity var(--t-fast) var(--ease)}
button:hover:not(:disabled):not(.tb):not(.seg-b){transform:translateY(-1px);box-shadow:var(--el2)}
button:active:not(:disabled){transform:translateY(1px) scale(.985);box-shadow:none}
.btn1:hover:not(:disabled),.btn7:hover:not(:disabled){box-shadow:var(--glow)}

/* Kartu: sedikit terangkat, border menyala. */
.card{transition:border-color var(--t-med) var(--ease),transform var(--t-med) var(--out-expo),
  box-shadow var(--t-med) var(--ease)}
.card:hover{transform:translateY(-2px);box-shadow:var(--el2)}

/* Input: label ikut menyala saat field fokus. */
input:focus,textarea:focus,select:focus{box-shadow:0 0 0 3px rgba(84,171,155,.22),var(--el1)}

/* Tab: garis bawah yang meluncur, bukan sekadar ganti warna latar. */
.tb{position:relative;transition:color var(--t-fast) var(--ease),
  background-color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.tb::after{content:'';position:absolute;left:50%;right:50%;bottom:-11px;height:2px;
  background:var(--cr);border-radius:2px;transition:left var(--t-med) var(--out-expo),right var(--t-med) var(--out-expo)}
.tb.sel::after{left:14%;right:14%}

/* Pane: masuk lebih halus daripada slideIn 6px yang lama.
   Visibilitas (.pane / .pane.sel display) tetap di app.css. */
.pane.sel{animation:paneIn .42s var(--out-expo)}
@keyframes paneIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Baris tabel: indikator tepi kiri saat hover, menggantikan
   perubahan latar yang nyaris tak terlihat. */
tbody tr{transition:background-color var(--t-fast) var(--ease)}
tbody tr td:first-child{position:relative}
tbody tr td:first-child::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--cr);transform:scaleY(0);transform-origin:center;
  transition:transform var(--t-fast) var(--ease)}
tbody tr:hover td:first-child::before{transform:scaleY(1)}

/* Chip status aktif: denyut halo, bukan sekadar opacity berkedip. */
.tag-on{position:relative}
.tag-on::after{content:'';position:absolute;inset:-1px;border-radius:var(--rp);
  border:1px solid var(--g);opacity:0;animation:halo 2.4s var(--ease) infinite}
@keyframes halo{0%{opacity:.5;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.16)}}

/* Terminal log: garis atas menyala saat ada aktivitas baru. */
.term{transition:border-color var(--t-med) var(--ease)}
.term:focus{border-color:var(--brd2)}

/* Segmented control: thumb bergeser halus. */
.seg-b{transition:color var(--t-fast) var(--ease),background-color var(--t-med) var(--out-expo)}

/* ---------- 7. VIEW TRANSITIONS ---------- */
html:not(.calm) ::view-transition-old(root){animation:vtOut .2s var(--in-out) forwards}
html:not(.calm) ::view-transition-new(root){animation:vtIn .34s var(--out-expo)}
@keyframes vtOut{to{opacity:0;transform:translateY(-6px)}}
@keyframes vtIn{from{opacity:0;transform:translateY(8px)}}

/* ---------- 8. REDUCED MOTION ---------- */
/* Dikunci ke .calm, bukan ke media query — lihat catatan di app.css. */
html.calm .skel{animation:none;background:var(--raised)}
html.calm .spin{animation-duration:1.6s}
html.calm .tag-on::after{animation:none;opacity:0}
html.calm [data-reveal]{opacity:1;transform:none;transition:none}
html.calm button:hover:not(:disabled){transform:none}
html.calm .card:hover{transform:none}
html.calm .toast{box-shadow:var(--el2)}