/* ============================================================
   MobileHub Admin — Button Effects v4 (Clean Fix)
   ONLY targets actual buttons — NOT nav links or text
   Brand: Teal #05C0B8 | Green #8BC63E
   ============================================================ */

/* ── NEVER touch nav links or sidebar items opacity ── */
a, nav a, [data-sidebar] a,
[data-sidebar="menu-button"],
.admin-nav-item,
[class*="nav-item"] {
  opacity: 1 !important;
}

/* ── Smooth transition ONLY on real buttons ── */
button {
  transition:
    background 0.22s cubic-bezier(.4,0,.2,1),
    box-shadow 0.22s cubic-bezier(.4,0,.2,1),
    transform 0.15s cubic-bezier(.34,1.56,.64,1) !important;
  will-change: transform;
}

/* ── PRIMARY — Teal gradient + glow ── */
button.bg-primary {
  background: linear-gradient(135deg, #07cec6, #05C0B8, #04aaa3) !important;
  color: #fff !important;
  font-weight: 600 !important;
  border: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.2),
    0 4px 14px -4px rgba(5,192,184,0.55) !important;
  transform: translateY(0px) !important;
}
button.bg-primary:hover {
  background: linear-gradient(135deg, #09ddd5, #07cec6, #05C0B8) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 8px 22px -4px rgba(5,192,184,0.65) !important;
  transform: translateY(-2px) !important;
}
button.bg-primary:active {
  background: linear-gradient(135deg, #038f89, #04a09a) !important;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.15) !important;
  transform: translateY(1px) !important;
}

/* ── SECONDARY — Green gradient + glow ── */
button.bg-secondary {
  background: linear-gradient(135deg, #9bd648, #8BC63E, #7db336) !important;
  color: #fff !important;
  font-weight: 600 !important;
  border: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.2),
    0 4px 14px -4px rgba(139,198,62,0.55) !important;
  transform: translateY(0px) !important;
}
button.bg-secondary:hover {
  background: linear-gradient(135deg, #a8e052, #9bd648, #8BC63E) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 8px 22px -4px rgba(139,198,62,0.65) !important;
  transform: translateY(-2px) !important;
}
button.bg-secondary:active {
  background: linear-gradient(135deg, #6fa02f, #7ab234) !important;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.15) !important;
  transform: translateY(1px) !important;
}

/* ── DESTRUCTIVE — Red gradient + glow ── */
button.bg-destructive {
  background: linear-gradient(135deg, #f87171, #ef4444, #dc2626) !important;
  color: #fff !important;
  border: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    0 4px 14px -4px rgba(220,38,38,0.5) !important;
  transform: translateY(0px) !important;
}
button.bg-destructive:hover {
  background: linear-gradient(135deg, #fca5a5, #f87171, #ef4444) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.2),
    0 8px 22px -4px rgba(220,38,38,0.6) !important;
  transform: translateY(-2px) !important;
}
button.bg-destructive:active {
  background: linear-gradient(135deg, #b91c1c, #dc2626) !important;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.2) !important;
  transform: translateY(1px) !important;
}

/* ── GRADIENT PRIMARY buttons ── */
button.gradient-primary,
button[class*="gradient-primary"] {
  background: linear-gradient(135deg, #05C0B8, #6ab82d) !important;
  color: #fff !important;
  font-weight: 600 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.2),
    0 4px 14px -4px rgba(5,192,184,0.5) !important;
  transform: translateY(0px) !important;
}
button.gradient-primary:hover,
button[class*="gradient-primary"]:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 10px 24px -4px rgba(5,192,184,0.6) !important;
  transform: translateY(-2px) !important;
  filter: brightness(1.06) !important;
}
button.gradient-primary:active,
button[class*="gradient-primary"]:active {
  transform: translateY(1px) !important;
  filter: brightness(0.95) !important;
}

/* ── FOCUS ring ── */
button:focus-visible {
  outline: none !important;
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px rgba(5,192,184,0.5) !important;
}

/* ── Active nav item glow ── */
.admin-nav-item.active,
.admin-nav-item.\!active {
  background: linear-gradient(90deg, #05C0B8, #04aaa3) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px -4px rgba(5,192,184,0.5) !important;
}