/* Khanal Group motion kit. Source of truth: shared-ui/kg-motion.css (+ kg-motion.js); shared-ui/sync.sh copies both into every app.
 * Calm and quick: 150-300 ms, transform and opacity only, nothing moves under prefers-reduced-motion: reduce.
 * Colours come from the app (--kg-brand, --line, --card, --ink, --bad); every page works without this file. */
:root{--kgm-ac:var(--kg-brand,#5b3bd4);--kgm-e:cubic-bezier(.2,.7,.2,1)}
/* tabs: one underline that slides between tabs (kg-motion.js places it) */
.kgm-tabs{position:relative}.kgm-tabs a.on,.kgm-tabs a[aria-current=page]{border-bottom-color:transparent!important}
.kgm-ink{position:absolute;left:0;bottom:0;width:0;height:2px;border-radius:2px;background:var(--vhi,var(--kgm-ac));pointer-events:none;transform-origin:0 0}
/* a submit button while its form is on the way: same size, a small spinner instead of the label */
.kgm-busy{position:relative;color:transparent!important;cursor:progress}
.kgm-busy::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;box-sizing:border-box;border-radius:50%;border:2px solid var(--kgm-ink,currentColor);border-right-color:transparent}
input.kgm-busy{color:inherit!important;opacity:.6}
/* messages: errors keep a close button; only success messages fade by themselves */
.flash.err,.flash.bad,.kgm-flash.err{position:relative;padding-right:42px}
button.kgm-x{position:absolute;top:50%;right:6px;width:30px;height:30px;margin:-15px 0 0;padding:0;border:0;border-radius:7px;background:transparent;color:inherit;font:400 20px/1 system-ui,sans-serif;cursor:pointer;opacity:.7;display:grid;place-items:center;box-shadow:none}
button.kgm-x:hover{opacity:1;background:color-mix(in srgb,currentColor 12%,transparent)}
.kgm-gone{overflow:hidden;opacity:0}
/* tables and changed records */
.tbl tbody tr:hover,.wrap table tbody tr:hover{background:color-mix(in srgb,var(--kgm-ac) 4%,transparent)}
.kgm-changed{background:color-mix(in srgb,var(--kgm-ac) 13%,transparent)}
.dot.kgm-attn{color:var(--bad,#b42318)}
/* confirm dialog */
.kgm-dlg{width:min(420px,calc(100vw - 32px));max-width:none;padding:20px 20px 16px;border:1px solid var(--line,#dde0ea);border-radius:12px;background:var(--card,#fff);color:var(--ink,#14162e);box-shadow:0 24px 60px rgba(10,12,40,.28)}
.kgm-dlg::backdrop{background:rgba(10,12,34,.45)}
.kgm-dlg p{margin:0 0 18px;font-size:15px;line-height:1.5;white-space:pre-line}
.kgm-row{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.kgm-dlg button{width:auto;height:auto;min-height:40px;margin:0;padding:0 16px;border:1px solid var(--line,#ccd);border-radius:9px;background:transparent;color:inherit;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;box-shadow:none}
.kgm-dlg button:hover{background:color-mix(in srgb,currentColor 7%,transparent)}
.kgm-dlg button.kgm-ok{border-color:transparent;background:var(--violet,var(--v,var(--kgm-ac)));color:#fff}
.kgm-dlg button.kgm-ok.kgm-danger{background:var(--bad,#b42318)}
.kgm-dlg button.kgm-ok:hover{filter:brightness(1.1)}
/* empty states: a small tray in the product colour */
.empty::before{content:"";display:block;width:46px;height:38px;margin:0 auto 10px;background:var(--kgm-ac);opacity:.55;-webkit-mask:var(--kgm-tray) center/contain no-repeat;mask:var(--kgm-tray) center/contain no-repeat}
:root{--kgm-tray:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 40'%3E%3Cpath d='M7 22h11l2 5h8l2-5h11v11a3 3 0 0 1-3 3H10a3 3 0 0 1-3-3z' fill-opacity='.3'/%3E%3Cpath d='M7 22 13 6h22l6 16v11a3 3 0 0 1-3 3H10a3 3 0 0 1-3-3zm0 0h11l2 5h8l2-5h11M19 12h10M17 17h14' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
td.empty::before{width:38px;height:31px;margin-bottom:6px}
/* loading placeholder */
.kgm-skel,[data-kid-out][aria-busy=true]::after{border-radius:6px;background:linear-gradient(90deg,var(--line,#e1e3ec) 30%,color-mix(in srgb,var(--line,#e1e3ec) 35%,transparent) 50%,var(--line,#e1e3ec) 70%) 0 0/200% 100%}
[data-kid-out][aria-busy=true]::after{content:"";display:block;height:12px;max-width:320px;margin-top:8px}
@media (prefers-reduced-motion:no-preference){
@keyframes kgm-in{from{opacity:0;transform:translateY(4px)}}
@keyframes kgm-fade{from{opacity:0}}
@keyframes kgm-drop{from{opacity:0;transform:translateY(-6px)}}
@keyframes kgm-pop{from{opacity:0;transform:scale(.96)}}
@keyframes kgm-grow{from{transform:scaleX(0)}}
@keyframes kgm-spin{to{transform:rotate(360deg)}}
@keyframes kgm-hl{to{background-color:transparent}}
@keyframes kgm-pulse{from{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 38%,transparent)}to{box-shadow:0 0 0 6px transparent}}
@keyframes kgm-sh{to{background-position:-200% 0}}
/* the page settles in */
.content,main.shell,.adm-main,.panel>.form,main.wrap,.solo{animation:kgm-in .22s var(--kgm-e) backwards}
.flash,.kgm-flash{animation:kgm-drop .24s var(--kgm-e) backwards}
.kgm-gone{transition:opacity .2s,height .2s,margin .2s,padding .2s,border-width .2s}
details[open]>:not(summary){animation:kgm-in .18s var(--kgm-e)}
.kgm-dlg[open]{animation:kgm-pop .18s var(--kgm-e)}.kgm-dlg[open]::backdrop{animation:kgm-fade .18s}
/* things you can open lift a little */
a.card,a.stat,a.kpi,a.app{transition:transform .15s var(--kgm-e),box-shadow .15s,border-color .15s}
a.card:hover,a.stat:hover,a.kpi:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(20,22,46,.09)}
.btn:active:not([disabled]),button:active:not([disabled]):not(.kgm-x){scale:.98}
.brand .mk,.brand .mark{transition:transform .15s var(--kgm-e),box-shadow .15s}
.brand:hover .mk,.brand:hover .mark{transform:translateY(-1px) scale(1.05)}
.kgm-busy::after{animation:kgm-spin .7s linear infinite}
.kgm-ink.kgm-on{transition:transform .22s var(--kgm-e),width .22s var(--kgm-e)}
.t tbody tr,.tbl tbody tr,.wrap table tbody tr{transition:background-color .15s}
.kgm-changed{animation:kgm-hl .3s ease-out 1.6s forwards}
.kgm-attn{animation:kgm-pulse 1.6s ease-out 3}
.prog .bar i,.meter .bar i,.tlt .pl b,.kgm-bar{transform-origin:0 50%;animation:kgm-grow .3s var(--kgm-e) .05s backwards}
.kgm-skel,[data-kid-out][aria-busy=true]::after{animation:kgm-sh 1.2s linear infinite}
}
@media print{.kgm-ink,.kgm-x,.kgm-dlg,.empty::before{display:none!important}}