/* css/ui.css — v1 — কাজ: শুধু দুই প্যানেলের শেয়ার করা UI — কাস্টম Confirm/Alert ডায়ালগ, টোস্ট, পাসওয়ার্ড দেখার আই বাটন,
   থিম বাটনের আইকন বদল। রঙ আসে প্রতিটা পেজের নিজের CSS ভ্যারিয়েবল (--card, --text, --muted, --soft, --primary…) থেকে। */

/* থিম বাটনের আইকন: ডার্ক হলে সূর্য, লাইট হলে চাঁদ */
html[data-theme="dark"] [data-theme-toggle] .i-moon{display:none;}
html:not([data-theme="dark"]) [data-theme-toggle] .i-sun{display:none;}

/* পাসওয়ার্ড দেখা/লুকানো */
.pw-wrap{position:relative;display:block;}
.pw-wrap input{padding-right:48px !important;}
.pw-eye{position:absolute;top:50%;right:5px;transform:translateY(-50%);width:38px;height:38px;border:none;background:none;
  color:var(--muted,#6b7280);cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:10px;padding:0;}
.pw-eye:hover{color:var(--text,#171923);}
.pw-eye:focus-visible{outline:2px solid var(--primary,#3b2fd6);}
.pw-eye svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.pw-eye .i-off{display:none;}
.pw-eye.on .i-on{display:none;}
.pw-eye.on .i-off{display:block;}

/* কাস্টম Confirm / Alert ডায়ালগ */
.ds-overlay{position:fixed;inset:0;z-index:3000;background:rgba(10,10,24,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:18px;animation:dsFade .16s ease;}
.ds-overlay.closing{animation:dsFadeOut .14s ease forwards;}
.ds-dialog{background:var(--card,#fff);color:var(--text,#171923);border-radius:22px;width:100%;max-width:360px;padding:24px 20px 18px;
  text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.35);animation:dsPop .22s cubic-bezier(.2,.9,.3,1.15);font-family:inherit;}
.ds-ic{width:56px;height:56px;border-radius:50%;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;}
.ds-ic svg{width:27px;height:27px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.ds-ic.danger{background:rgba(220,38,38,.13);color:#dc2626;}
.ds-ic.info{background:rgba(91,63,230,.14);color:#6d5cf0;}
.ds-ic.ok{background:rgba(22,163,74,.14);color:#16a34a;}
.ds-title{margin:0 0 6px;font-size:1.12rem;font-weight:800;}
.ds-msg{margin:0 0 20px;color:var(--muted,#6b7280);font-size:.93rem;line-height:1.65;overflow-wrap:anywhere;}
.ds-actions{display:flex;gap:10px;}
.ds-actions button{flex:1;padding:12px 10px;border-radius:13px;border:none;font:inherit;font-weight:700;font-size:.95rem;cursor:pointer;transition:transform .12s,filter .15s;}
.ds-actions button:active{transform:scale(.97);}
.ds-actions button:focus-visible{outline:3px solid #a5b4fc;outline-offset:2px;}
.ds-btn-cancel{background:var(--soft,#f0f4ff);color:var(--text,#171923);}
.ds-btn-ok{background:linear-gradient(90deg,var(--primary,#3b2fd6),var(--primary2,#7b2fd6));color:#fff;}
.ds-btn-ok.danger{background:#dc2626;}
@keyframes dsFade{from{opacity:0}to{opacity:1}}
@keyframes dsFadeOut{to{opacity:0}}
@keyframes dsPop{from{opacity:0;transform:translateY(10px) scale(.94)}to{opacity:1;transform:none}}

/* টোস্ট (উপরে ছোট বার্তা) */
.ds-toasts{position:fixed;left:50%;transform:translateX(-50%);top:calc(14px + env(safe-area-inset-top,0px));z-index:3100;
  display:flex;flex-direction:column;gap:8px;width:min(92vw,420px);pointer-events:none;}
.ds-toast{pointer-events:auto;background:#1f2240;color:#fff;border-radius:14px;padding:12px 14px;font-size:.9rem;line-height:1.5;
  box-shadow:0 10px 30px rgba(0,0,0,.3);border-left:4px solid #6366f1;animation:dsToastIn .24s ease;font-family:inherit;overflow-wrap:anywhere;}
.ds-toast.error{border-left-color:#ef4444;}
.ds-toast.ok{border-left-color:#22c55e;}
.ds-toast.out{animation:dsToastOut .2s ease forwards;}
@keyframes dsToastIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes dsToastOut{to{opacity:0;transform:translateY(-8px)}}

@media (prefers-reduced-motion:reduce){
  .ds-overlay,.ds-dialog,.ds-toast{animation:none !important;}
}