/* ───────────────────────────────────────────────────────────────
   Shared button polish — shimmer sweep + lift + press feedback for
   every .tb-btn across the app (customer/customers/boards/estimates).
   This stylesheet should be linked AFTER each page's own <style>
   block so cascade order lets these rules win without !important
   (except for position/overflow, which need to override however the
   page declared .tb-btn).

   Touches:
   - 1px lift on hover
   - Diagonal light-sweep across the button on hover
   - Brighter sweep on filled variants (.primary, .danger, .success)
   - Quick scale-down on press for tactile feedback
   ─────────────────────────────────────────────────────────────── */

.tb-btn {
  /* Required for the absolute pseudo-element + clean clipping of the sweep */
  position: relative !important;
  overflow: hidden !important;
  transition: background .15s, border-color .15s, color .15s,
              box-shadow .25s, transform .18s ease !important;
}

/* Shimmer sweep — diagonal highlight that animates left → right on hover */
.tb-btn::before {
  content: '';
  position: absolute; top: 0; bottom: 0; left: -100%; width: 55%;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .14) 50%, transparent 70%);
  transition: left .65s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
  z-index: 1;
}
.tb-btn:hover::before { left: 130%; }

/* Hover lift */
.tb-btn:hover {
  transform: translateY(-1px);
}

/* Filled variants get a brighter sweep + slightly more lift + soft shadow */
.tb-btn.primary::before,
.tb-btn.danger::before,
.tb-btn.success::before {
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .32) 50%, transparent 70%);
}
.tb-btn.primary:hover,
.tb-btn.danger:hover,
.tb-btn.success:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(20, 35, 60, .15);
}

/* Press feedback — slight squish */
.tb-btn:active {
  transform: translateY(0) scale(.97) !important;
  transition-duration: .08s !important;
}

/* Disabled buttons skip the effects */
.tb-btn:disabled,
.tb-btn[disabled] {
  transform: none !important;
}
.tb-btn:disabled::before,
.tb-btn[disabled]::before { display: none; }

/* ─── Icon sizing inside small action buttons ─────────────────────
   The .row-action class is a 30×30 icon button used for delete/edit
   actions in tables/lists. Its SVGs were authored at width=13/14
   inline, which made the icons look tiny against the button bg
   (~43% fill). This forces a sane 17×17 size (≈57% of a 30px button)
   for a proportional look. Same treatment for similar 28-32px
   action buttons (.modal-close, .file-card-del). */

.row-action svg,
.modal-close svg,
.file-card-del svg,
.theme-toggle svg,
.row-actions .ra-btn svg {
  width: 20px !important;
  height: 20px !important;
  stroke-width: 1.6;
}

/* Bump the button so the larger icon has breathing room — wider than tall
   for a small pill shape that reads better than a tight square. */
.row-action {
  width: 42px !important;
  height: 34px !important;
}

/* ───────────────────────────────────────────────────────────────
   v357.808: .btn-pop — the house press animation.

   Julie's standing preference: every NEW button in the CRM should
   feel like the "+" quick-add in the top nav (.etn-add-btn in
   estimate-nav.js). Lifted verbatim from it so they stay identical:

     - a soft background tint on hover
     - a scale(.94) press on :active
     - cubic-bezier(.34, 1.4, .58, 1) on the transform — the 1.4
       overshoots past 1 on release, which is what produces the
       little spring back rather than a flat linear return

   Add the class to any new button. It only sets transition +
   :active, so it composes with whatever colours the button already
   has and won't fight a page's own hover rule.

   Respects prefers-reduced-motion: the tint stays, the pop is
   dropped for anyone who has asked the OS for less movement.
   ─────────────────────────────────────────────────────────────── */

.btn-pop {
  transition: background .15s, border-color .15s, color .15s,
              transform .12s cubic-bezier(.34, 1.4, .58, 1);
}
.btn-pop:active { transform: scale(.94); }

@media (prefers-reduced-motion: reduce) {
  .btn-pop { transition: background .15s, border-color .15s, color .15s; }
  .btn-pop:active { transform: none; }
}