/* ==========================
   GraphiSports Toolbar Theme
   Version 1.0 — 2025
   ========================== */

button {
  font-weight: 700;
  font-size: 14px;
  padding: 9px 16px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 0 3px 8px rgba(0,0,0,0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  color: #fff;
}

/* 🔵 Primary */
button.primary {
  background: linear-gradient(180deg, #4ea1ff, #2264c7);
}
button.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 10px rgba(78,161,255,0.8);
}

/* 🟢 OK / Success */
button.ok {
  background: linear-gradient(180deg, #25c59e, #128e70);
}
button.ok:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 10px rgba(37,197,158,0.8);
}

/* 🔴 Danger / Delete */
button.danger {
  background: linear-gradient(180deg, #ff6b6b, #d43a3a);
}
button.danger:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 10px rgba(255,107,107,0.8);
}

/* ⚪ Default (π.χ. New Team, Duplicate, Logos) */
button:not(.primary):not(.ok):not(.danger) {
  background: #1e2533;
  border: 1px solid #232838;
  color: #e8ecf3;
}
button:not(.primary):not(.ok):not(.danger):hover {
  filter: brightness(1.2);
  transform: translateY(-1px);
  box-shadow: 0 0 6px rgba(255,255,255,0.1);
}

/* 🌈 Glow sweep animation */
button::after {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 60%;
  height: 100%;
  background: rgba(255, 255, 255, 0.15);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
}
button:hover::after {
  left: 120%;
}

/* 🖱️ Active state */
button:active {
  transform: translateY(1px);
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* 🧭 Toolbar container */
.toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 24px 16px;
  padding: 10px 14px;
  background: linear-gradient(180deg, #151922, #0f1115);
  border-radius: 14px;
  box-shadow: inset 0 1px 3px rgba(255,255,255,0.05),
              0 4px 12px rgba(0,0,0,0.4);
}