/* TAV – notiser: toasts, bannerkort, sparbock, sparpill och välkomst.
   html body-prefixet gör att notiserna klarar admin-layoutens nollställning (body.admin *). */
:root{ --tn-ease: cubic-bezier(.2,.8,.2,1); --tn-ink:#1f1a17; --tn-muted:#6b6660; }

/* ---- Toasts (uppe till höger) ---- */
html body .tav-toast-stack{position:fixed;top:18px;right:18px;z-index:3000;display:flex;flex-direction:column;gap:12px;width:min(390px,calc(100vw - 36px));pointer-events:none;margin:0;padding:0}
html body .tav-toast{pointer-events:auto;position:relative;overflow:hidden;display:flex;align-items:flex-start;gap:14px;margin:0;padding:15px 42px 17px 16px;background:rgba(255,255,255,.97);color:var(--tn-ink);border-radius:16px;border:1px solid rgba(31,26,23,.06);box-shadow:0 1px 2px rgba(15,23,42,.06),0 16px 40px rgba(15,23,42,.16);font:500 .92rem/1.45 system-ui,-apple-system,"Segoe UI",sans-serif;animation:tn-toast-in .5s var(--tn-ease) both}
html body .tav-toast::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--tn-c)}
html body .tav-toast-icon-wrap{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--tn-soft);color:var(--tn-c);font-size:1.1rem}
html body .tav-toast-body{flex:1;min-width:0;margin:0;padding:0}
html body .tav-toast-title{display:block;margin:0 0 2px;padding:0;font-weight:750;font-size:.93rem;color:var(--tn-c)}
html body .tav-toast-msg{display:block;margin:0;padding:0;color:var(--tn-ink);font-weight:500;overflow-wrap:anywhere}
html body .tav-toast-close{position:absolute;top:9px;right:9px;margin:0;padding:4px 7px;background:none;border:0;border-radius:9px;color:var(--tn-muted);cursor:pointer;line-height:1}
html body .tav-toast-close:hover{background:rgba(31,26,23,.07);color:var(--tn-ink)}
html body .tav-toast-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;margin:0;padding:0;background:var(--tn-c);opacity:.55;transform-origin:left;animation:tn-bar linear both;animation-play-state:running}
html body .tav-toast.is-paused .tav-toast-bar{animation-play-state:paused}
html body .tav-toast.is-leaving{animation:tn-toast-out .3s ease both}
.tav-toast--success{--tn-c:#1f7a4a;--tn-soft:#e3f4ea}
.tav-toast--info{--tn-c:#43577e;--tn-soft:#e9edf6}
.tav-toast--warning{--tn-c:#a86f00;--tn-soft:#fdf1d4}
.tav-toast--danger{--tn-c:#a12a1a;--tn-soft:#fbe5e1}

/* ---- Bannerkort (mitt på skärmen, för varningar och fel) ---- */
html body .tav-banner-layer{position:fixed;inset:0;z-index:3500;display:grid;place-items:center;padding:20px;margin:0;background:rgba(15,23,42,.22);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:tn-fade-in .25s ease both}
html body .tav-banner-layer.is-leaving{animation:tn-fade-out .35s ease both}
html body .tav-banner{position:relative;display:block;width:min(470px,100%);margin:0;padding:34px 30px 28px;text-align:center;background:#fff;color:var(--tn-ink);border-radius:24px;box-shadow:0 34px 90px rgba(15,23,42,.32);overflow:hidden;animation:tn-pop-in .5s var(--tn-ease) both;cursor:pointer}
html body .tav-banner::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--tn-c)}
html body .tav-banner-icon{display:grid;place-items:center;width:78px;height:78px;margin:0 auto 16px;padding:0;border-radius:50%;font-size:2.3rem;color:#fff;background:linear-gradient(145deg,var(--tn-c),color-mix(in srgb,var(--tn-c) 70%,#000));box-shadow:0 10px 26px color-mix(in srgb,var(--tn-c) 40%,transparent);animation:tn-icon-pulse .9s var(--tn-ease) .15s both}
html body .tav-banner-title{display:block;margin:0 0 8px;padding:0;font-size:1.4rem;font-weight:800;color:var(--tn-ink)}
html body .tav-banner-msg{display:block;margin:0;padding:0;font-size:1rem;line-height:1.5;color:#4b4540;font-weight:500;overflow-wrap:anywhere}
html body .tav-banner-bar{display:block;height:4px;margin:22px 0 0;padding:0;border-radius:4px;background:var(--tn-c);opacity:.5;transform-origin:left;animation:tn-bar linear both}
.tav-banner--danger{--tn-c:#a12a1a}
.tav-banner--warning{--tn-c:#b97a00}
.tav-banner--success{--tn-c:#1f7a4a}
.tav-banner--info{--tn-c:#43577e}

/* ---- Sparbock: en grön bock ritas upp när något har sparats ---- */
html body .tav-check-layer{position:fixed;inset:0;z-index:3600;display:grid;place-items:center;padding:20px;margin:0;background:rgba(15,23,42,.14);animation:tn-fade-in .2s ease both}
html body .tav-check-layer.is-leaving{animation:tn-fade-out .4s ease both}
html body .tav-check-card{display:flex;flex-direction:column;align-items:center;gap:14px;margin:0;padding:30px 36px 26px;background:#fff;border-radius:24px;box-shadow:0 30px 80px rgba(15,23,42,.25);animation:tn-pop-in .45s var(--tn-ease) both;max-width:min(420px,100%)}
html body .tav-check-svg{width:112px;height:112px;margin:0;padding:0;display:block}
html body .tav-check-ring{fill:none;stroke:#1f7a4a;stroke-width:4;stroke-linecap:round;stroke-dasharray:302;stroke-dashoffset:302;animation:tn-draw .6s var(--tn-ease) .05s forwards}
html body .tav-check-fill{fill:#e3f4ea;opacity:0;animation:tn-fill .35s ease .45s forwards}
html body .tav-check-mark{fill:none;stroke:#1f7a4a;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:70;stroke-dashoffset:70;animation:tn-draw .45s var(--tn-ease) .55s forwards}
html body .tav-check-text{margin:0;padding:0;font-size:1.1rem;font-weight:750;color:var(--tn-ink);text-align:center;overflow-wrap:anywhere;opacity:0;animation:tn-rise .5s var(--tn-ease) .8s forwards}

/* ---- Sparpill: visas medan ett formulär skickas ---- */
html body .tav-saving{position:fixed;left:50%;bottom:24px;z-index:3200;display:flex;align-items:center;gap:10px;margin:0;padding:11px 18px;transform:translateX(-50%);background:#1f1a17;color:#fff;border-radius:999px;font:600 .9rem/1 system-ui,-apple-system,"Segoe UI",sans-serif;box-shadow:0 14px 34px rgba(15,23,42,.3);animation:tn-pop-in .3s var(--tn-ease) both}
html body .tav-saving-dot{width:14px;height:14px;margin:0;border-radius:50%;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;animation:tn-spin .7s linear infinite}

/* ---- Välkomst (efter inloggning) ---- */
html body .tav-welcome{position:fixed;inset:0;z-index:4000;display:grid;place-items:center;margin:0;text-align:center;color:#fff;background:radial-gradient(120% 90% at 50% 0%,#34466a 0%,#1e2a44 55%,#120d0a 100%);overflow:hidden;animation:tn-welcome-out .7s ease 2.5s both}
html body .tav-welcome::before{content:"";position:absolute;width:160vmax;height:160vmax;border-radius:50%;border:1px solid rgba(255,255,255,.08);top:50%;left:50%;transform:translate(-50%,-50%) scale(.2);animation:tn-ring 2.4s var(--tn-ease) both}
html body .tav-welcome-inner{position:relative;display:flex;flex-direction:column;align-items:center;margin:0;padding:20px}
html body .tav-welcome-logo{width:92px;height:92px;margin:0 0 22px;padding:0;border-radius:26px;background:#fff;display:grid;place-items:center;box-shadow:0 20px 50px rgba(0,0,0,.35);animation:tn-pop-in .8s var(--tn-ease) .1s both}
html body .tav-welcome-logo img{width:72px;height:auto;display:block}
html body .tav-welcome-hello{margin:0 0 8px;padding:0;font-size:1.05rem;letter-spacing:.2em;text-transform:uppercase;color:#c9d4e8;animation:tn-rise .7s var(--tn-ease) .35s both}
html body .tav-welcome-name{margin:0;padding:0;font-size:clamp(2rem,6vw,3.4rem);font-weight:800;line-height:1.1;animation:tn-rise .8s var(--tn-ease) .6s both}
html body .tav-welcome-sub{margin:12px 0 0;padding:0;color:#aebbd6;animation:tn-rise .8s var(--tn-ease) .9s both}

/* ---- Rörelser ---- */
@keyframes tn-toast-in{from{opacity:0;transform:translateX(44px) scale(.96)}to{opacity:1;transform:none}}
@keyframes tn-toast-out{to{opacity:0;transform:translateX(34px) scale(.96)}}
@keyframes tn-bar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@keyframes tn-fade-in{from{opacity:0}to{opacity:1}}
@keyframes tn-fade-out{to{opacity:0}}
@keyframes tn-pop-in{from{opacity:0;transform:translateY(16px) scale(.9)}to{opacity:1;transform:none}}
@keyframes tn-icon-pulse{0%{transform:scale(.6)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes tn-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes tn-ring{to{transform:translate(-50%,-50%) scale(1);opacity:0}}
@keyframes tn-welcome-out{to{opacity:0;visibility:hidden}}
@keyframes tn-draw{to{stroke-dashoffset:0}}
@keyframes tn-fill{to{opacity:1}}
@keyframes tn-spin{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion: reduce){
  html body .tav-toast,html body .tav-banner,html body .tav-banner-layer,html body .tav-check-layer,html body .tav-check-card,html body .tav-welcome,html body .tav-welcome *,html body .tav-toast-bar,html body .tav-banner-bar,html body .tav-banner-icon,html body .tav-check-ring,html body .tav-check-mark,html body .tav-check-fill,html body .tav-check-text,html body .tav-saving,html body .tav-saving-dot{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important}
  html body .tav-check-ring,html body .tav-check-mark{stroke-dashoffset:0}
}
@media (max-width:600px){
  html body .tav-toast-stack{left:12px;right:12px;width:auto}
}