/* =============================================================
   BUTTONS
   -------------------------------------------------------------
   Modernizes shape, motion, focus and states for Bootstrap/
   AdminLTE buttons. Semantic COLORS are preserved (btn-info,
   btn-danger, … keep their meaning); we only refine the feel.
   btn-info is this app's primary action (used the most).
   ============================================================= */

/* ---- Base --------------------------------------------------- */
.btn {
  border-radius: var(--radius-small);
  font-weight: var(--fw-medium);
  transition: transform var(--speed-fast) var(--ease),
              box-shadow var(--speed-fast) var(--ease),
              background-color var(--speed-fast) var(--ease),
              border-color var(--speed-fast) var(--ease),
              color var(--speed-fast) var(--ease);
}
.btn:hover  { transform: translateY(-1px); box-shadow: var(--shadow-small); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn:disabled,
.btn.disabled {
  transform: none;
  box-shadow: none;
  opacity: .6;
  cursor: not-allowed;
}

/* ---- Focus rings (per variant → keeps the button's own hue) -- */
.btn:focus,
.btn.focus { box-shadow: none; outline: none; }
.btn-info:focus,      .btn-info.focus      { box-shadow: 0 0 0 3px var(--info-soft); }
.btn-primary:focus,   .btn-primary.focus   { box-shadow: 0 0 0 3px var(--primary-soft); }
.btn-danger:focus,    .btn-danger.focus    { box-shadow: 0 0 0 3px var(--danger-soft); }
.btn-success:focus,   .btn-success.focus   { box-shadow: 0 0 0 3px var(--success-soft); }
.btn-warning:focus,   .btn-warning.focus   { box-shadow: 0 0 0 3px var(--warning-soft); }
.btn-secondary:focus, .btn-secondary.focus,
.btn-outline-secondary:focus,
.btn-default:focus,   .btn-default.focus   { box-shadow: 0 0 0 3px rgba(108, 117, 125, .25); }
.btn-outline-danger:focus { box-shadow: 0 0 0 3px var(--danger-soft); }

/* ---- Outline buttons : subtle fill on hover ------------------ */
.btn[class*="btn-outline-"] { transition: background-color var(--speed-fast) var(--ease),
                                          color var(--speed-fast) var(--ease),
                                          transform var(--speed-fast) var(--ease),
                                          box-shadow var(--speed-fast) var(--ease); }

/* ---- Sizes -------------------------------------------------- */
.btn-sm { border-radius: calc(var(--radius-small) - 1px); }
.btn-lg { border-radius: var(--radius-medium); }
.btn-xs { border-radius: calc(var(--radius-small) - 2px); padding: .15rem .5rem; font-size: var(--fs-xs); }

/* ---- Block / groups ----------------------------------------- */
.btn-block { box-shadow: var(--shadow-small); }
.btn-block:hover { box-shadow: var(--shadow-medium); }
.btn-group > .btn { transform: none; }        /* no lift inside a group (avoids gaps) */
.btn-group > .btn:hover { z-index: 2; }

/* ---- Pill --------------------------------------------------- */
.btn.rounded-pill { border-radius: var(--radius-pill); }

/* ---- Icon + text alignment (only when both present) --------- */
.btn > i + span,
.btn > span + i { margin-inline-start: .35rem; }

/* ---- Loading helper : add class="is-loading" ----------------- */
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 1em; height: 1em;
  margin: -.5em 0 0 -.5em;
  border: 2px solid rgba(255, 255, 255, .5);
  border-top-color: #fff;
  border-radius: var(--radius-pill);
  animation: ds-spin var(--speed-slow) linear infinite;
}