/* ==========================================================================
   EXYS UI v2 — camada de design (Onda 147)
   Carregada DEPOIS de app.css. Só adiciona: componentes novos + refinamentos
   seguros. Nenhuma regra remove comportamento existente.
   ========================================================================== */
:root{
  --x-r:14px; --x-r-sm:10px; --x-r-lg:20px;
  --x-e1:0 1px 2px rgba(10,15,30,.05), 0 1px 1px rgba(10,15,30,.03);
  --x-e2:0 2px 6px rgba(10,15,30,.06), 0 10px 24px -14px rgba(10,15,30,.22);
  --x-e3:0 4px 12px rgba(10,15,30,.07), 0 24px 48px -24px rgba(10,15,30,.30);
  --x-ring:0 0 0 3px var(--brandm);
  --x-spring:cubic-bezier(.22,.85,.24,1);
  --x-ease:cubic-bezier(.4,0,.2,1);
  --x-hair:color-mix(in srgb, var(--line) 72%, transparent);
  --x-glass:color-mix(in srgb, var(--surface) 78%, transparent);
  --x-shine:linear-gradient(100deg, transparent 20%, color-mix(in srgb, #fff 62%, transparent) 50%, transparent 80%);
}
:root[data-theme="dark"],html.dark,:root.dark{
  --x-e2:0 2px 6px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.7);
  --x-glass:color-mix(in srgb, var(--surface) 72%, transparent);
  --x-shine:linear-gradient(100deg, transparent 20%, rgba(255,255,255,.07) 50%, transparent 80%);
}
::selection{background:var(--brandm);color:var(--ink)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}
*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--muted) 28%,transparent) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--muted) 26%,transparent);border-radius:99px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--muted) 45%,transparent);background-clip:content-box}

/* ---------- 1. superfície ---------- */
.x-card{background:var(--surface);border:1px solid var(--x-hair);border-radius:var(--x-r);box-shadow:var(--x-e1);
  transition:box-shadow .22s var(--x-ease),border-color .22s var(--x-ease),transform .22s var(--x-spring)}
.x-card:hover{box-shadow:var(--x-e2);border-color:color-mix(in srgb,var(--brand) 22%,var(--line))}
.x-card.pad{padding:16px 18px}
.x-card.flat{box-shadow:none;background:var(--card)}
.x-glass{background:var(--x-glass);backdrop-filter:blur(14px) saturate(1.25);-webkit-backdrop-filter:blur(14px) saturate(1.25);
  border:1px solid var(--x-hair);border-radius:var(--x-r);box-shadow:var(--x-e2)}
.x-hero{position:relative;overflow:hidden;border-radius:var(--x-r-lg);padding:24px 26px;color:var(--onbrand);
  background:linear-gradient(125deg,var(--brandd),var(--brand) 46%,color-mix(in srgb,var(--brand) 55%,var(--accent)));box-shadow:var(--x-e3)}
.x-hero::after{content:"";position:absolute;inset:-40% -10% auto auto;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.22),transparent 62%);pointer-events:none}
.x-hero h1,.x-hero h2{color:inherit;font-size:22px;line-height:1.2;letter-spacing:-.02em}
.x-hero p{color:color-mix(in srgb,var(--onbrand) 78%,transparent);margin-top:6px;font-size:13px}

/* ---------- 2. tipografia de tela ---------- */
.x-eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.x-h1{font-family:var(--fd);font-size:23px;font-weight:700;letter-spacing:-.025em;line-height:1.15}
.x-h2{font-family:var(--fd);font-size:15px;font-weight:600;letter-spacing:-.01em}
.x-sub{font-size:12.5px;color:var(--muted);line-height:1.5}
.x-num{font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* ---------- 3. KPI ---------- */
.x-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:12px;margin:16px 0 18px}
.x-kpi{position:relative;background:var(--surface);border:1px solid var(--x-hair);border-radius:var(--x-r);padding:14px 15px;
  box-shadow:var(--x-e1);transition:transform .26s var(--x-spring),box-shadow .26s var(--x-ease),border-color .26s}
.x-kpi:hover{transform:translateY(-2px);box-shadow:var(--x-e2);border-color:color-mix(in srgb,var(--brand) 26%,var(--line))}
.x-kpi .lab{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--muted);letter-spacing:.01em}
.x-kpi .lab i{color:var(--brand)}
.x-kpi .val{font-family:var(--fd);font-size:26px;font-weight:700;margin-top:8px;letter-spacing:-.035em;line-height:1}
.x-kpi .val small{font-size:13px;font-weight:600;color:var(--muted);letter-spacing:0}
.x-kpi .foot{margin-top:7px;font-size:11px;color:var(--faint)}
.x-kpi .bar{position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:0 0 var(--x-r) var(--x-r);
  background:linear-gradient(90deg,var(--brand),var(--accent));opacity:.0;transition:opacity .26s}
.x-kpi:hover .bar{opacity:1}
.x-kpi.hl{background:linear-gradient(160deg,color-mix(in srgb,var(--brand) 10%,var(--surface)),var(--surface) 62%)}

/* ---------- 4. botões e controles ---------- */
.btn{transition:background .16s,border-color .16s,color .16s,transform .12s var(--x-spring),box-shadow .16s}
.btn:active:not(:disabled){transform:translateY(1px) scale(.985)}
.btn.pri{background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 92%,#fff),var(--brand));border-color:var(--brandd)}
.btn.pri:hover{background:linear-gradient(180deg,var(--brand),var(--brandh))}
.btn.ghost{background:transparent;border-color:transparent}
.btn.ghost:hover{background:var(--brandl);border-color:transparent}
.x-seg{display:inline-flex;padding:3px;gap:2px;background:color-mix(in srgb,var(--muted) 9%,transparent);border-radius:11px;border:1px solid var(--x-hair)}
.x-seg button{border:0;background:transparent;color:var(--muted);font-size:12px;font-weight:600;padding:6px 12px;border-radius:8px;
  display:inline-flex;align-items:center;gap:5px;transition:.18s var(--x-ease)}
.x-seg button:hover{color:var(--ink2)}
.x-seg button.on{background:var(--surface);color:var(--ink);box-shadow:var(--x-e1)}
.x-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;margin:0 0 14px;
  background:var(--surface);border:1px solid var(--x-hair);border-radius:12px;box-shadow:var(--x-e1)}
.x-toolbar .grow{flex:1 1 auto}
.x-pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:3px 9px;border-radius:99px;
  background:color-mix(in srgb,var(--muted) 10%,transparent);color:var(--muted)}
.x-pill.b{background:var(--brandl);color:var(--brandd)}
.x-pill.g{background:color-mix(in srgb,var(--green) 14%,transparent);color:var(--green)}
.x-pill.a{background:color-mix(in srgb,var(--amber) 16%,transparent);color:var(--amber)}
.x-pill.r{background:color-mix(in srgb,var(--red) 13%,transparent);color:var(--red)}

/* ---------- 5. quadro kanban ---------- */
.x-board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(268px,1fr);gap:14px;overflow-x:auto;padding:4px 2px 14px;
  scroll-snap-type:x proximity;overscroll-behavior-x:contain}
.x-col{display:flex;flex-direction:column;min-height:160px;border-radius:var(--x-r);background:color-mix(in srgb,var(--muted) 7%,transparent);
  border:1px solid var(--x-hair);scroll-snap-align:start;transition:background .2s,border-color .2s}
.x-col.over{background:var(--brandl);border-color:var(--brandm)}
.x-colhead{display:flex;align-items:center;gap:8px;padding:11px 13px 9px;position:sticky;top:0;z-index:2;border-radius:var(--x-r) var(--x-r) 0 0}
.x-colhead .dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto;background:var(--muted)}
.x-colhead .nm{font-size:12px;font-weight:700;letter-spacing:.01em;color:var(--ink2)}
.x-colhead .ct{margin-left:auto;font-size:11px;font-weight:700;color:var(--muted);background:var(--surface);
  border:1px solid var(--x-hair);border-radius:99px;padding:1px 7px;min-width:20px;text-align:center}
.x-collist{display:flex;flex-direction:column;gap:9px;padding:0 9px 10px;min-height:60px}
.x-cardit{background:var(--surface);border:1px solid var(--x-hair);border-radius:var(--x-r-sm);padding:11px 12px;box-shadow:var(--x-e1);
  cursor:grab;transition:transform .18s var(--x-spring),box-shadow .18s,border-color .18s;position:relative;overflow:hidden}
.x-cardit:hover{transform:translateY(-1px);box-shadow:var(--x-e2);border-color:color-mix(in srgb,var(--brand) 25%,var(--line))}
.x-cardit:active{cursor:grabbing}
.x-cardit.drag{opacity:.45;transform:rotate(1.5deg) scale(.98)}
.x-cardit .t{font-size:12.8px;font-weight:600;color:var(--ink);line-height:1.35}
.x-cardit .m{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:11px;color:var(--muted);flex-wrap:wrap}
.x-cardit .tag{font-size:10px;font-weight:700;padding:1px 6px;border-radius:5px;background:var(--brandl);color:var(--brandd)}
.x-cardit::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--brand);opacity:0;transition:opacity .18s}
.x-cardit:hover::before{opacity:1}
.x-addcard{display:flex;align-items:center;justify-content:center;gap:6px;margin:0 9px 10px;padding:8px;border:1px dashed var(--line);
  border-radius:9px;background:transparent;color:var(--muted);font-size:12px;font-weight:600;transition:.16s}
.x-addcard:hover{border-color:var(--brand);color:var(--brand);background:var(--brandl)}

/* ---------- 6. carregamento ---------- */
@keyframes x-shimmer{from{background-position:180% 0}to{background-position:-80% 0}}
.x-skel{position:relative;overflow:hidden;border-radius:7px;background:color-mix(in srgb,var(--muted) 13%,transparent);
  background-image:var(--x-shine);background-size:220% 100%;animation:x-shimmer 1.35s linear infinite;min-height:11px}
.x-skel.l{height:13px;margin:5px 0}.x-skel.s{height:9px;margin:5px 0;width:62%}.x-skel.b{height:34px;border-radius:9px;margin:6px 0}
.x-skelbox{padding:4px 0}
@media (prefers-reduced-motion:reduce){.x-skel{animation:none}}
.x-loadbar{position:fixed;top:0;left:0;height:2px;width:0;z-index:9999;background:linear-gradient(90deg,var(--brand),var(--accent));
  box-shadow:0 0 10px var(--glow);transition:width .3s var(--x-ease),opacity .4s}
.x-loadbar.done{opacity:0}
@keyframes x-spin{to{transform:rotate(360deg)}}
.x-spin{width:14px;height:14px;border:2px solid var(--brandm);border-top-color:var(--brand);border-radius:50%;animation:x-spin .7s linear infinite;display:inline-block}

/* ---------- 7. movimento de entrada ---------- */
@keyframes x-fade-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes x-fade{from{opacity:0}to{opacity:1}}
.x-reveal{animation:x-fade-up .42s var(--x-spring) both}
.x-reveal.d1{animation-delay:.04s}.x-reveal.d2{animation-delay:.08s}.x-reveal.d3{animation-delay:.12s}
.x-reveal.d4{animation-delay:.16s}.x-reveal.d5{animation-delay:.2s}
.x-fadein{animation:x-fade .35s var(--x-ease) both}
@media (prefers-reduced-motion:reduce){
  .x-reveal,.x-fadein{animation:none}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}
@supports (view-transition-name:none){
  ::view-transition-old(root){animation:x-fade .18s var(--x-ease) reverse both}
  ::view-transition-new(root){animation:x-fade .24s var(--x-ease) both}
}

/* ---------- 8. estados vazios e progresso ---------- */
.x-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:26px 18px;text-align:center;
  color:var(--muted);font-size:12.5px;border:1px dashed var(--line);border-radius:var(--x-r);background:color-mix(in srgb,var(--surface) 55%,transparent)}
.x-empty i{color:color-mix(in srgb,var(--muted) 55%,transparent)}
.x-empty b{color:var(--ink2);font-size:13px}
.x-prog{height:6px;border-radius:99px;background:color-mix(in srgb,var(--muted) 14%,transparent);overflow:hidden}
.x-prog>span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--brand),var(--accent));
  transition:width .6s var(--x-spring)}

/* ---------- 9. toast ---------- */
.x-toasts{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:8px;z-index:10000;pointer-events:none}
.x-toast{pointer-events:auto;display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--x-hair);
  border-left:3px solid var(--brand);border-radius:11px;padding:10px 14px;box-shadow:var(--x-e3);font-size:12.5px;
  animation:x-fade-up .3s var(--x-spring) both;max-width:340px}
.x-toast.ok{border-left-color:var(--green)}.x-toast.err{border-left-color:var(--red)}.x-toast.warn{border-left-color:var(--amber)}

/* ---------- 10. refinamentos seguros de componentes existentes ---------- */
.card,.kcard{border-color:var(--x-hair)}
.card{box-shadow:var(--x-e1)}
.kcard{background:var(--surface);box-shadow:var(--x-e1);transition:box-shadow .2s var(--x-ease),transform .2s var(--x-spring),border-color .2s}
.kcard:hover{box-shadow:var(--x-e2);transform:translateY(-1px)}
.stats4>.stat,.stat{box-shadow:var(--x-e1);border-color:var(--x-hair)}
.main{max-width:1240px}
.crumbs{font-size:11px;font-weight:600;letter-spacing:.03em;text-transform:none;color:var(--faint);margin-bottom:4px}
.topline h1{letter-spacing:-.025em}
table{border-color:var(--x-hair)}
tbody tr{transition:background .13s}
tbody tr:hover{background:color-mix(in srgb,var(--brand) 4%,transparent)}
@media (max-width:820px){
  .x-board{grid-auto-columns:minmax(248px,86vw)}
  .main{padding:18px 16px}
}