/* ══════════════════════════════════════════════════════════════════
   VASUKI — UX POLISH LAYER
   Loaded AFTER css/style.css. Pure presentation: no markup / logic deps.
   Adds: motion tokens, page transitions, staggered reveals, refined
   sidebar / topbar / cards / buttons / inputs / tables, toasts, modals,
   drawers, skeletons and full prefers-reduced-motion support.
   ══════════════════════════════════════════════════════════════════ */

:root{
  --ease-out: cubic-bezier(.22,1,.36,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --ease-io: cubic-bezier(.65,0,.35,1);
  --dur-1:.14s; --dur-2:.22s; --dur-3:.38s;
  --r-sm:7px; --r-md:11px; --r-lg:16px;
  --sh-1:0 1px 2px rgba(15,23,42,.06),0 1px 3px rgba(15,23,42,.05);
  --sh-2:0 4px 14px -2px rgba(15,23,42,.10),0 2px 6px -1px rgba(15,23,42,.06);
  --sh-3:0 18px 40px -12px rgba(15,23,42,.28),0 6px 14px -6px rgba(15,23,42,.14);
  --ring:0 0 0 3px rgba(37,99,235,.28);
}
[data-theme="dark"]{
  --sh-1:0 1px 2px rgba(0,0,0,.35);
  --sh-2:0 6px 18px -4px rgba(0,0,0,.5);
  --sh-3:0 22px 50px -12px rgba(0,0,0,.65);
  --ring:0 0 0 3px rgba(59,130,246,.38);
}

html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body{font-feature-settings:"cv11","ss01"}
::selection{background:rgba(37,99,235,.22)}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--rim2);border-radius:99px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--ink4);background-clip:content-box;border:2px solid transparent}

/* ── Keyboard focus: always visible, never on mouse click ───────── */
:focus{outline:none}
:focus-visible{outline:none;box-shadow:var(--ring)!important;border-radius:var(--r-sm)}

/* ── Page transition + staggered content reveal ─────────────────── */
@keyframes vx-page-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes vx-rise{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.page.active{animation:vx-page-in var(--dur-3) var(--ease-out) backwards}
.page.active .pg > *{animation:vx-rise .5s var(--ease-out) both}
.page.active .pg > *:nth-child(1){animation-delay:.02s}
.page.active .pg > *:nth-child(2){animation-delay:.07s}
.page.active .pg > *:nth-child(3){animation-delay:.12s}
.page.active .pg > *:nth-child(4){animation-delay:.17s}
.page.active .pg > *:nth-child(5){animation-delay:.22s}
.page.active .pg > *:nth-child(n+6){animation-delay:.26s}

/* ── Sidebar ────────────────────────────────────────────────────── */
.sidebar{box-shadow:4px 0 24px -12px rgba(0,0,0,.45)}
.sb-nav{padding:8px 10px}
.ngrp{padding:16px 10px 6px;letter-spacing:1.8px}
.ni{position:relative;border-left:none!important;border-radius:9px;margin:1px 0;padding:9px 12px;
    transition:background var(--dur-2) var(--ease-out),color var(--dur-2),transform var(--dur-2) var(--ease-out)}
.ni::before{content:"";position:absolute;left:-10px;top:50%;width:3px;height:0;border-radius:0 3px 3px 0;
    background:linear-gradient(180deg,#60a5fa,#2563eb);transform:translateY(-50%);
    transition:height var(--dur-2) var(--ease-spring)}
.ni:hover{background:rgba(255,255,255,.08);transform:translateX(2px)}
.ni:hover .nico{transform:scale(1.15) rotate(-4deg)}
.ni.active{background:linear-gradient(90deg,rgba(59,130,246,.30),rgba(59,130,246,.08));color:#fff;
    box-shadow:inset 0 0 0 1px rgba(147,197,253,.18)}
.ni.active::before{height:60%}
.ni:active{transform:scale(.98)}
.nico{transition:transform var(--dur-2) var(--ease-spring)}
.nbadge{box-shadow:0 0 0 2px rgba(10,15,28,.9)}

/* ── Topbar ─────────────────────────────────────────────────────── */
.topbar{backdrop-filter:saturate(1.4) blur(8px);position:relative;z-index:5}
.tbt{letter-spacing:.2px;animation:vx-rise .4s var(--ease-out) both}

/* ── Cards ──────────────────────────────────────────────────────── */
.card{border-radius:var(--r-md);box-shadow:var(--sh-1);
    transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out),border-color var(--dur-2)}
.card:hover{box-shadow:var(--sh-2);border-color:var(--rim2)}
.card.vx-lift:hover,.kc:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.kc{transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out),border-color var(--dur-2)}

/* ── Buttons ────────────────────────────────────────────────────── */
.btn{position:relative;overflow:hidden;border-radius:var(--r-sm);
    transition:transform var(--dur-1) var(--ease-out),box-shadow var(--dur-2),background var(--dur-2),border-color var(--dur-2),color var(--dur-2)}
.btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:var(--sh-2)}
.btn:active:not(:disabled){transform:translateY(0) scale(.97);box-shadow:none}
.btn-p{background:linear-gradient(180deg,#3b82f6,#2563eb);border-color:#2563eb;box-shadow:0 1px 2px rgba(37,99,235,.35)}
.btn-p:hover:not(:disabled){background:linear-gradient(180deg,#4f8ff7,#2b6ae8);box-shadow:0 6px 16px -4px rgba(37,99,235,.55)}
.vx-ripple{position:absolute;border-radius:50%;pointer-events:none;background:currentColor;opacity:.22;
    transform:scale(0);animation:vx-ripple .6s var(--ease-out) forwards}
@keyframes vx-ripple{to{transform:scale(1);opacity:0}}
.btn.vx-busy{pointer-events:none;opacity:.8}
.btn.vx-busy::after{content:"";display:inline-block;width:11px;height:11px;margin-left:8px;border-radius:50%;
    border:2px solid currentColor;border-right-color:transparent;animation:vkspin .7s linear infinite;vertical-align:-2px}

/* ── Inputs ─────────────────────────────────────────────────────── */
.inp,select.inp,textarea.inp{border-radius:var(--r-sm);transition:border-color var(--dur-2),box-shadow var(--dur-2),background var(--dur-2)}
.inp:hover{border-color:var(--rim2)}
.inp:focus{border-color:var(--gold);box-shadow:var(--ring);background:var(--surface)}
.il{letter-spacing:.9px}

/* ── Tables ─────────────────────────────────────────────────────── */
table{border-collapse:separate;border-spacing:0}
tbody tr{transition:background var(--dur-1)}
tbody tr:hover{background:var(--hover-tint)}

/* ── Pills / filter chips ───────────────────────────────────────── */
.fp{transition:all var(--dur-2) var(--ease-out)}
.fp:hover{transform:translateY(-1px)}
.fp:active{transform:scale(.96)}
.ti{position:relative}
.ti::after{content:"";position:absolute;left:12%;right:12%;bottom:-1px;height:2px;background:var(--gold);
    transform:scaleX(0);transition:transform var(--dur-2) var(--ease-out);border-radius:2px}
.ti.active::after{transform:scaleX(1)}

/* ── App loader / login polish ──────────────────────────────────── */
#appLoader{transition:opacity .26s var(--ease-io);backdrop-filter:blur(6px)}

/* ── Skeleton loading (add class .vx-skel to any placeholder) ───── */
.vx-skel{position:relative;overflow:hidden;background:var(--raised);border-radius:var(--r-sm);min-height:14px}
.vx-skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:vx-shimmer 1.3s infinite}
[data-theme="dark"] .vx-skel::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent)}
@keyframes vx-shimmer{to{transform:translateX(100%)}}

/* ── Toasts ─────────────────────────────────────────────────────── */
#vx-toasts{position:fixed;right:18px;bottom:18px;z-index:10050;display:flex;flex-direction:column;gap:10px;pointer-events:none;max-width:min(380px,calc(100vw - 36px))}
.vx-toast{pointer-events:auto;display:flex;gap:11px;align-items:flex-start;background:var(--surface);color:var(--ink);
    border:1px solid var(--rim);border-left:4px solid var(--gold);border-radius:var(--r-md);padding:11px 14px;
    box-shadow:var(--sh-3);font-size:12.5px;line-height:1.45;animation:vx-toast-in .42s var(--ease-spring) both}
.vx-toast.out{animation:vx-toast-out .28s var(--ease-io) forwards}
.vx-toast .t-ico{font-size:15px;line-height:1.2}
.vx-toast b{display:block;font-weight:700;margin-bottom:1px}
.vx-toast.ok{border-left-color:var(--jade)}.vx-toast.err{border-left-color:var(--ruby2)}.vx-toast.warn{border-left-color:#f59e0b}
@keyframes vx-toast-in{from{opacity:0;transform:translateX(30px) scale(.94)}to{opacity:1;transform:none}}
@keyframes vx-toast-out{to{opacity:0;transform:translateX(30px) scale(.94)}}

/* ── Modal (confirm / info) ─────────────────────────────────────── */
.vx-overlay{position:fixed;inset:0;z-index:10040;background:rgba(8,12,24,.55);backdrop-filter:blur(4px);
    display:flex;align-items:center;justify-content:center;padding:18px;animation:vx-fade .2s ease both}
.vx-overlay.out{animation:vx-fade-out .18s ease forwards}
.vx-modal{width:100%;max-width:420px;background:var(--surface);color:var(--ink);border:1px solid var(--rim);border-radius:var(--r-lg);
    box-shadow:var(--sh-3);padding:22px;animation:vx-pop .38s var(--ease-spring) both}
.vx-modal h3{font-family:var(--fh);font-size:18px;font-weight:600;margin-bottom:6px;color:var(--ink)}
.vx-modal p{font-size:12.5px;color:var(--ink2);line-height:1.55}
.vx-modal .vx-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
.vx-btn-danger{background:linear-gradient(180deg,#ef4444,#dc2626)!important;border-color:#dc2626!important;color:#fff!important}
@keyframes vx-fade{from{opacity:0}to{opacity:1}}
@keyframes vx-fade-out{to{opacity:0}}
@keyframes vx-pop{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:none}}

/* ── Slide-over drawer ──────────────────────────────────────────── */
.vx-drawer-wrap{position:fixed;inset:0;z-index:10030;display:none}
.vx-drawer-wrap.open{display:block}
.vx-drawer-wrap .vx-scrim{position:absolute;inset:0;background:rgba(8,12,24,.5);backdrop-filter:blur(3px);opacity:0;transition:opacity var(--dur-3) var(--ease-out)}
.vx-drawer-wrap.show .vx-scrim{opacity:1}
.vx-drawer{position:absolute;top:0;right:0;bottom:0;width:min(520px,100vw);background:var(--surface);color:var(--ink);
    border-left:1px solid var(--rim);box-shadow:var(--sh-3);display:flex;flex-direction:column;
    transform:translateX(100%);transition:transform .42s var(--ease-out)}
.vx-drawer-wrap.show .vx-drawer{transform:none}
.vx-drawer-hd{padding:18px 22px;border-bottom:1px solid var(--rim);display:flex;align-items:center;justify-content:space-between;gap:10px}
.vx-drawer-hd h3{font-family:var(--fh);font-size:19px;font-weight:600}
.vx-drawer-bd{padding:20px 22px;overflow-y:auto;flex:1}
.vx-drawer-ft{padding:14px 22px;border-top:1px solid var(--rim);display:flex;gap:8px;justify-content:flex-end;background:var(--raised)}
.vx-x{width:30px;height:30px;border-radius:50%;border:none;background:transparent;color:var(--ink3);font-size:16px;cursor:pointer;transition:all var(--dur-2)}
.vx-x:hover{background:var(--raised);color:var(--ink);transform:rotate(90deg)}

/* ── Reusable small components ──────────────────────────────────── */
.vx-badge{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:99px;font-size:10.5px;font-weight:700;letter-spacing:.2px;white-space:nowrap}
.vx-badge.green{background:rgba(34,197,94,.14);color:var(--jade2)}
.vx-badge.red{background:rgba(239,68,68,.13);color:var(--ruby2)}
.vx-badge.gray{background:rgba(120,130,150,.16);color:var(--ink3)}
.vx-badge.blue{background:rgba(37,99,235,.12);color:var(--gold2)}
.vx-badge.amber{background:rgba(245,158,11,.16);color:#b45309}
.vx-badge.violet{background:rgba(124,58,237,.13);color:var(--violet)}
.vx-dot{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block}
.vx-dot.live{animation:throb 1.6s ease-in-out infinite}

/* ── Reduced motion: respect the OS setting everywhere ──────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
@media (max-width:640px){
  #vx-toasts{left:12px;right:12px;bottom:12px;max-width:none}
  .vx-drawer{width:100vw}
}