/* ===== ICON BUTTON COMPONENT ===== */

/* --- EJS icon-action-btn --- */
.icon-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  background: transparent;
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--text-secondary);
  transition: all 0.15s ease;
  padding: 0;
  position: relative;
  z-index: 0;
  contain: layout style paint;
}

.icon-action-btn::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -2;
  opacity: 0;
  transition: opacity .35s;
  pointer-events: none;
  border-radius: calc(var(--radius) + 1px);
  background: radial-gradient(250px circle at var(--gx, 50%) var(--gy, 50%), rgba(var(--glow-rgb), .25), transparent 40%);
}

.icon-action-btn::after {
  content: '';
  position: absolute;
  inset: 1px;
  z-index: -1;
  pointer-events: none;
  border-radius: calc(var(--radius) - 1px);
  background: transparent;
}

.icon-action-btn:hover::before {
  opacity: 1;
}

[data-theme="light"] .icon-action-btn::before,
[data-theme="light"] .icon-action-btn::after {
  display: none;
}

[data-theme="light"] .icon-action-btn {
  contain: unset;
}

.icon-action-btn:hover {
  background: var(--primary-bg-dark);
  color: var(--text-primary);
  border-color: var(--border);
}

.icon-action-btn--edit:hover {
  color: var(--primary);
  border-color: rgba(var(--glow-rgb), 0.3);
  background: var(--primary-bg-dark);
}

.icon-action-btn--primary {
  color: var(--brand-green);
  border-color: rgba(var(--glow-rgb), 0.35);
}

.icon-action-btn--primary:hover {
  color: #fff;
  background: var(--brand-gradient);
  border-color: rgba(var(--glow-rgb), 0.45);
}

.icon-action-btn--primary:hover svg {
  stroke: #fff;
}

.icon-action-btn--delete:hover {
  color: var(--danger);
  border-color: rgba(239, 68, 68, 0.3);
  background: rgba(239, 68, 68, 0.08);
}

.icon-action-btn--danger {
  color: var(--danger);
  border-color: rgba(239, 68, 68, 0.35);
}

.icon-action-btn--danger:hover {
  color: #fff;
  background: linear-gradient(135deg, #ef4444, #f97316);
  border-color: rgba(239, 68, 68, 0.55);
}

.icon-action-btn--danger:hover svg {
  stroke: #fff;
}

.icon-action-btn--print:hover {
  color: var(--warning);
  border-color: rgba(251, 191, 36, 0.3);
  background: rgba(251, 191, 36, 0.08);
}

/* Size: sm */
.icon-action-btn--sm {
  width: 28px;
  height: 28px;
}

/* --- Admin action-icon-btn (legacy) --- */
.action-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--text-secondary);
  transition: all 0.15s ease;
  position: relative;
  z-index: 0;
  contain: layout style paint;
}

.action-icon-btn::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -2;
  opacity: 0;
  transition: opacity .35s;
  pointer-events: none;
  border-radius: calc(var(--radius) + 1px);
  background: radial-gradient(250px circle at var(--gx, 50%) var(--gy, 50%), rgba(var(--glow-rgb), .25), transparent 40%);
}

.action-icon-btn::after {
  content: '';
  position: absolute;
  inset: 1px;
  z-index: -1;
  pointer-events: none;
  border-radius: calc(var(--radius) - 1px);
  background: transparent;
}

.action-icon-btn:hover::before {
  opacity: 1;
}

[data-theme="light"] .action-icon-btn::before,
[data-theme="light"] .action-icon-btn::after {
  display: none;
}

[data-theme="light"] .action-icon-btn {
  contain: unset;
}

.action-icon-btn:hover {
  background: var(--border-light);
}

.action-icon-btn.view-btn:hover {
  color: var(--primary);
}

.action-icon-btn.suspend-btn:hover {
  color: var(--warning);
  background: rgba(245, 158, 11, .08);
}

.action-icon-btn.delete-btn:hover {
  color: var(--danger);
  background: rgba(239, 68, 68, .08);
}

/* --- icon-btn glow --- */
.icon-btn:hover {
  background: rgba(255, 255, 255, .06);
}

[data-theme="light"] .icon-btn:hover {
  background: var(--border-light);
}