/* ============================================
   交��组件样式：Toast / Modal / Drawer / 加载 / 空状态
   ============================================ */

/* ---- Toast ---- */
.wb-toasts { position:fixed; top:24px; right:24px; z-index:9999; display:flex; flex-direction:column; gap:10px; pointer-events:none; }
.wb-toast { display:flex; align-items:flex-start; gap:10px; min-width:260px; max-width:420px; padding:12px 16px; border-radius:var(--vfy-radius-medium); background:var(--vfy-card); border:1px solid var(--vfy-border); box-shadow:var(--shadow-2); pointer-events:auto; animation:toast-in .25s ease; }
.wb-toast.removing { animation:toast-out .2s ease forwards; }
.wb-toast-icon { flex-shrink:0; width:20px; height:20px; margin-top:1px; }
.wb-toast-msg { flex:1; font-size:14px; line-height:1.5; color:var(--vfy-foreground); min-width:0; }
.wb-toast-close { flex-shrink:0; width:24px; height:24px; display:flex; align-items:center; justify-content:center; border:none; background:none; color:var(--vfy-muted-foreground); cursor:pointer; border-radius:var(--vfy-radius-small); font-size:16px; padding:0; margin-top:-2px; }
.wb-toast-close:hover { background:var(--vfy-muted); color:var(--vfy-foreground); }
.wb-toast--success .wb-toast-icon { color:var(--state-success); }
.wb-toast--error .wb-toast-icon { color:var(--state-error); }
.wb-toast--warn .wb-toast-icon { color:var(--state-warning); }
.wb-toast--info .wb-toast-icon { color:var(--state-info); }
@keyframes toast-in { from{opacity:0;transform:translateY(-12px)} to{opacity:1;transform:translateY(0)} }
@keyframes toast-out { from{opacity:1;transform:translateY(0)} to{opacity:0;transform:translateY(-12px)} }

/* ---- Modal ---- */
.wb-modal-overlay { position:fixed; inset:0; z-index:8000; background:rgba(15,23,42,.45); display:flex; align-items:center; justify-content:center; padding:24px; animation:modal-in .15s ease; }
.wb-modal { background:var(--vfy-card); border:1px solid var(--vfy-border); border-radius:var(--vfy-radius-large); box-shadow:var(--shadow-3); width:100%; max-width:480px; max-height:85vh; display:flex; flex-direction:column; animation:modal-slide .2s ease; }
.wb-modal--wide { max-width:720px; }
.wb-modal__head { display:flex; align-items:center; justify-content:space-between; padding:20px 24px 0; }
.wb-modal__title { font-size:18px; font-weight:600; color:var(--vfy-foreground); }
.wb-modal__close { width:32px; height:32px; display:flex; align-items:center; justify-content:center; border:none; background:none; color:var(--vfy-muted-foreground); cursor:pointer; border-radius:var(--vfy-radius-small); font-size:18px; }
.wb-modal__close:hover { background:var(--vfy-muted); }
.wb-modal__body { padding:16px 24px 20px; overflow-y:auto; font-size:15px; line-height:1.6; color:var(--vfy-foreground); }
.wb-modal__foot { display:flex; justify-content:flex-end; gap:12px; padding:16px 24px 20px; border-top:1px solid var(--vfy-border); }
.wb-modal__body .form-group { margin-bottom:14px; }
.wb-modal__body .form-group:last-child { margin-bottom:0; }
.wb-modal__body label { display:block; font-size:13px; font-weight:500; color:var(--vfy-foreground); margin-bottom:5px; }
.wb-modal__body input,.wb-modal__body select { width:100%; height:40px; padding:0 12px; border:1px solid var(--vfy-border); border-radius:var(--vfy-radius-medium); font-size:14px; font-family:inherit; background:var(--vfy-card); color:var(--vfy-foreground); box-sizing:border-box; transition:border-color .15s; }
.wb-modal__body input:focus,.wb-modal__body select:focus { outline:none; border-color:var(--vfy-ring); box-shadow:0 0 0 2px rgba(13,148,136,.15); }
@keyframes modal-in { from{opacity:0} to{opacity:1} }
@keyframes modal-slide { from{opacity:0;transform:translateY(-16px)} to{opacity:1;transform:translateY(0)} }

/* ---- Btns (shared) ---- */
.wb-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; height:38px; padding:0 18px; border-radius:var(--vfy-radius-medium); font-size:14px; font-weight:600; font-family:inherit; cursor:pointer; border:1px solid transparent; white-space:nowrap; transition:.15s; }
.wb-btn svg { width:16px; height:16px; }
.wb-btn-primary { background:var(--vfy-primary); color:var(--vfy-primary-foreground); }
.wb-btn-primary:hover { background:var(--vfy-primary-700); }
.wb-btn-secondary { background:transparent; color:var(--vfy-foreground); border-color:var(--vfy-border); font-weight:500; }
.wb-btn-secondary:hover { background:var(--vfy-muted); }
.wb-btn-danger { background:var(--state-error); color:#fff; }
.wb-btn-danger:hover { background:#DC2626; }
.wb-btn:disabled { opacity:.5; cursor:not-allowed; }
.wb-btn:focus-visible { outline:2px solid var(--vfy-ring); outline-offset:2px; }

/* ---- Admin mobile drawer ---- */
.wb-drawer-overlay { position:fixed; inset:0; z-index:7000; background:rgba(15,23,42,.35); opacity:1; transition:opacity .25s; }
.wb-drawer-overlay.closing { opacity:0; }
.wb-drawer { position:fixed; top:0; left:0; bottom:0; z-index:7001; width:240px; background:var(--vfy-card); border-right:1px solid var(--vfy-border); transform:translateX(0); transition:transform .25s cubic-bezier(.2,.8,.2,1); }
.wb-drawer.closing { transform:translateX(-100%); }

/* ---- Header hamburger (mobile only) ---- */
.wb-hamburger { display:none; }
@media (max-width:900px) { .wb-hamburger { display:flex; } }

/* ---- Skeleton ---- */
.wb-skeleton { background:linear-gradient(90deg,var(--vfy-muted) 25%,var(--vfy-border) 50%,var(--vfy-muted) 75%); background-size:200% 100%; animation:sk-pulse 1.5s ease infinite; border-radius:var(--vfy-radius-small); }
.wb-skeleton--text { height:14px; width:100%; }
.wb-skeleton--title { height:20px; width:60%; }
.wb-skeleton--num { height:28px; width:80px; }
@keyframes sk-pulse { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ---- Empty state ---- */
.wb-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:48px 24px; color:var(--vfy-muted-foreground); text-align:center; gap:12px; }
.wb-empty-icon { opacity:.4; }
.wb-empty-text { font-size:15px; }
.wb-empty-hint { font-size:13px; color:var(--vfy-neutral-400); }

/* ---- Notification panel ---- */
.wb-notif-panel { position:absolute; top:100%; right:0; margin-top:8px; width:360px; max-width:calc(100vw - 32px); background:var(--vfy-popover); border:1px solid var(--vfy-border); border-radius:var(--vfy-radius-medium); box-shadow:var(--shadow-2); max-height:380px; overflow-y:auto; z-index:5000; }
.wb-notif-panel__head { padding:12px 16px; font-size:14px; font-weight:600; color:var(--vfy-foreground); border-bottom:1px solid var(--vfy-border); }
.wb-notif-item { padding:10px 16px; font-size:13px; line-height:1.5; color:var(--vfy-foreground); border-bottom:1px solid var(--vfy-border); cursor:default; }
.wb-notif-item:last-child { border-bottom:none; }
.wb-notif-time { font-size:12px; color:var(--vfy-muted-foreground); margin-top:2px; }
.wb-notif-empty { padding:24px 16px; text-align:center; font-size:14px; color:var(--vfy-muted-foreground); }

/* ---- User popover ---- */
.wb-user-popover { position:absolute; top:100%; right:0; margin-top:8px; min-width:180px; background:var(--vfy-popover); border:1px solid var(--vfy-border); border-radius:var(--vfy-radius-medium); box-shadow:var(--shadow-2); z-index:5000; padding:8px; }
.wb-user-popover__item { display:block; width:100%; padding:8px 12px; border:none; background:none; color:var(--vfy-foreground); font-size:14px; text-align:left; cursor:pointer; border-radius:var(--vfy-radius-small); font-family:inherit; }
.wb-user-popover__item:hover { background:var(--vfy-muted); }
.wb-user-popover__item--danger { color:var(--state-error); }
.wb-user-popover__sep { height:1px; background:var(--vfy-border); margin:4px 0; }

/* ---- Responsive ---- */
@media (max-width:900px) {
  .admin-sidebar { display:none; }
  .admin-content { width:100% !important; }
  .wb-drawer .admin-sidebar { display:flex; width:240px; flex:none; }
}
@media (max-width:640px) {
  .wb-toasts { top:12px; right:12px; left:12px; }
  .wb-toast { min-width:0; }
  .wb-modal { max-width:calc(100vw - 32px); border-radius:var(--vfy-radius-medium); }
}