/* ───────────────────────────────────────────────────────────────
   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;
}