/* =============================================================
   animated-buttons.css — shared, theme-aware button animations
   Reused across: sessions/tasks cards, cases list, financial admin,
   file manager, backups, user management.
   All colors reference the app's existing tokens so Appearance
   Settings + dark mode keep working everywhere these are used.
   ============================================================= */

/* ── Delete button (trash-can + falling label) ───────────────────────────
   Full chrome (background/padding/etc.) only applies when .del-btn is used
   standalone. When retrofitted onto a button that already carries the
   app's own .btn styling (JS-rendered rows in financial admin, file
   manager, backups...), we only add the icon + animation, and leave its
   existing appearance alone. ── */
.del-btn:not(.btn):not(.file-btn):not(.btn-action) {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  background-color: var(--color-danger, var(--danger, #ba2f24));
  color: #fff;
  border: none;
  border-radius: var(--radius-sm, .5rem);
  cursor: pointer;
  padding: .5em 1em;
  font: inherit;
  font-weight: 700;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .2s;
}
.del-btn:not(.btn):not(.file-btn):not(.btn-action):hover:not(:disabled) { background-color: color-mix(in oklab, var(--color-danger, var(--danger, #ba2f24)), #000 12%); }
.del-btn:disabled { cursor: not-allowed; opacity: .85; }
.del-btn.del-btn--sm:not(.btn):not(.file-btn):not(.btn-action) { padding: .35em .75em; font-size: .78rem; }
.del-btn.del-btn--icon-only:not(.btn):not(.file-btn):not(.btn-action) { padding: .5em; }
.del-btn.del-btn--icon-only .del-btn__label { display: none; }

/* Red coloring for del-btn when retrofitted onto a plain .btn (Bootstrap or
   custom) whose own sizing we want to keep, but which isn't already a
   danger/red variant. NOTE: deliberately NOT named "btn-danger" — base.html
   has its own separate, older auto-enhancer that scans for literal
   .btn-danger elements and injects a second icon, which would double up
   with this component. */
.del-btn.del-danger { background-color: var(--color-danger, var(--danger, #ba2f24)); color: #fff; border-color: transparent; }
.del-btn.del-danger:hover:not(:disabled) { background-color: color-mix(in oklab, var(--color-danger, var(--danger, #ba2f24)), #000 12%); }

.del-btn__icon {
  display: block;
  width: 1.6em;
  height: 1.6em;
  margin: -.2em;
  pointer-events: none;
  flex-shrink: 0;
}
.del-btn__icon-lid { transform-origin: 12px 5px; }
.del-btn__icon-can { transform-origin: 12px 18px; }

.del-btn__label {
  display: inline-block;
  white-space: nowrap;
  transform-origin: top center;
}

/* Running state: lid pops open, can tilts, contents drop, label falls in */
.del-btn[data-running="true"] .del-btn__icon-lid,
.del-btn[data-running="true"] .del-btn__icon-can {
  animation: delBtnLid 1.1s cubic-bezier(.77,0,.18,1) forwards;
}
.del-btn[data-running="true"] .del-btn__icon-can { animation-name: delBtnCan; }
.del-btn[data-running="true"] .del-btn__label { animation: delBtnLabelDrop .6s cubic-bezier(.55,0,1,.45) forwards; }

@keyframes delBtnLid {
  0%   { transform: translate(0,0) rotate(0); }
  35%  { transform: translate(-2px,-4px) rotate(-40deg); }
  60%  { transform: translate(0,-2px) rotate(9deg); }
  100% { transform: translate(0,0) rotate(0); }
}
@keyframes delBtnCan {
  0%   { transform: translate(0,0) rotate(0); }
  35%  { transform: translate(-8px,3px) rotate(40deg); }
  60%  { transform: translate(-1px,0) rotate(-4deg); }
  100% { transform: translate(0,0) rotate(0); }
}
@keyframes delBtnLabelDrop {
  0%   { transform: translateY(0) scale(1); opacity: 1; }
  60%  { transform: translateY(.5em) scale(.85); opacity: .6; }
  100% { transform: translateY(1.2em) scale(.4); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .del-btn[data-running="true"] .del-btn__icon-lid,
  .del-btn[data-running="true"] .del-btn__icon-can,
  .del-btn[data-running="true"] .del-btn__label { animation: none; }
}

/* ── Download button (arrow → check) ───────────────────────────────────
   Same rule: full chrome only when used standalone (not already .btn). ── */
.dl-btn:not(.btn):not(.file-btn):not(.btn-action) {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .6em;
  cursor: pointer;
  border: 1.5px solid var(--border-strong, var(--border));
  border-radius: var(--radius-sm, .5rem);
  background: var(--bg-card, #fff);
  color: var(--text, #111);
  padding: .5em 1em;
  font: inherit;
  font-weight: 700;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .2s, background-color .2s;
}
.dl-btn:not(.btn):not(.file-btn):not(.btn-action):hover:not(:disabled) { border-color: var(--brand); background: var(--brand-light); }
.dl-btn:disabled { cursor: not-allowed; }
.dl-btn.dl-btn--sm:not(.btn):not(.file-btn):not(.btn-action) { padding: .35em .75em; font-size: .78rem; }
.dl-btn { position: relative; }

.dl-btn__icons { position: relative; width: 1em; height: 1em; flex-shrink: 0; }
.dl-btn__icons svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  fill: none; stroke: currentColor; stroke-width: 2px;
  stroke-linecap: round; stroke-linejoin: round;
}
.dl-btn__arrow { transition: transform .3s ease, opacity .2s ease; }
.dl-btn__check {
  stroke: var(--ok, #0f7a4d);
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  opacity: 0;
}
.dl-btn[data-state="done"] .dl-btn__arrow { transform: translateY(4px) scale(.4); opacity: 0; }
.dl-btn[data-state="done"] .dl-btn__check {
  opacity: 1;
  animation: dlBtnCheck .5s cubic-bezier(.65,0,.35,1) forwards;
}
@keyframes dlBtnCheck { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .dl-btn[data-state="done"] .dl-btn__check { animation: none; stroke-dashoffset: 0; }
}