/* ============================================================
   FECdesk Button Styles v1.0
   Consistent, polished button look across the dashboard
   ============================================================ */

/* ---- Button Design Tokens ---- */
:root {
  --btn-primary: #3b82f6;
  --btn-primary-hover: #2563eb;
  --btn-primary-dark: #1d4ed8;
  --btn-primary-light: #eff6ff;
  --btn-secondary: #10b981;
  --btn-secondary-hover: #059669;
  --btn-danger: #ef4444;
  --btn-danger-hover: #dc2626;
  --btn-danger-light: #fef2f2;
  --btn-accent: #f59e0b;
  --btn-accent-hover: #d97706;
  --btn-radius-sm: 6px;
  --btn-radius-md: 8px;
  --btn-radius-lg: 12px;
  --btn-radius-full: 9999px;
  --btn-transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --btn-shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --btn-shadow-primary: 0 2px 8px rgba(59, 130, 246, 0.3);
  --btn-shadow-primary-hover: 0 4px 12px rgba(59, 130, 246, 0.4);
}

/* ---- Primary Buttons (blue bg) ---- */
/* Only target buttons that have EXACTLY bg-primary as a class (not hover: or bg-primary/xx variants) */
button.bg-primary,
button[class~="bg-primary"] {
  background: var(--btn-primary) !important;
  border-radius: var(--btn-radius-lg) !important;
  font-weight: 600 !important;
  transition: all var(--btn-transition) !important;
}

button.bg-primary:hover,
button[class~="bg-primary"]:hover {
  background: var(--btn-primary-hover) !important;
  transform: translateY(-1px);
}

button.bg-primary:active,
button[class~="bg-primary"]:active {
  transform: translateY(0) scale(0.98);
}

/* ---- Gradient Buttons ---- */
button[class*="bg-gradient"] {
  background: linear-gradient(135deg, var(--btn-primary), var(--btn-primary-dark)) !important;
  border-radius: var(--btn-radius-lg) !important;
  font-weight: 600 !important;
  box-shadow: var(--btn-shadow-primary) !important;
  transition: all var(--btn-transition) !important;
}

button[class*="bg-gradient"]:hover {
  box-shadow: var(--btn-shadow-primary-hover) !important;
  transform: translateY(-1px);
}

button[class*="bg-gradient"]:active {
  transform: translateY(0);
}

/* ---- Danger / Error Buttons ---- */
button[class~="bg-error"],
button.bg-error {
  background: var(--btn-danger) !important;
  color: white !important;
  border-radius: var(--btn-radius-lg) !important;
  font-weight: 600 !important;
  transition: all var(--btn-transition) !important;
}

button[class~="bg-error"]:hover,
button.bg-error:hover {
  background: var(--btn-danger-hover) !important;
  transform: translateY(-1px);
}

/* ---- Ghost / Outline Buttons ---- */
button[class~="border"][class~="text-primary"] {
  border-color: var(--btn-primary) !important;
  color: var(--btn-primary) !important;
  border-radius: var(--btn-radius-lg) !important;
  font-weight: 500 !important;
  transition: all var(--btn-transition) !important;
}

button[class~="border"][class~="text-primary"]:hover {
  background: var(--btn-primary-light) !important;
}

/* ---- New Event Button (main CTA) ---- */
#newEventBtn {
  background: var(--btn-primary) !important;
  border-radius: var(--btn-radius-full) !important;
  font-weight: 600 !important;
  font-size: 0.8125rem !important;
  padding: 8px 20px !important;
  box-shadow: var(--btn-shadow-primary) !important;
  transition: all var(--btn-transition) !important;
}

#newEventBtn:hover {
  background: var(--btn-primary-hover) !important;
  box-shadow: var(--btn-shadow-primary-hover) !important;
  transform: translateY(-1px);
}

#newEventBtn:active {
  transform: translateY(0);
}

/* ---- Secondary / Tertiary Buttons (green - activate, status) ---- */
button.bg-tertiary-container,
button[class~="bg-tertiary-container"],
button[class~="bg-tertiary"] {
  background: var(--btn-secondary) !important;
  color: white !important;
  border-radius: var(--btn-radius-lg) !important;
  font-weight: 600 !important;
  transition: all var(--btn-transition) !important;
}

button[class~="bg-tertiary"]:hover,
button[class~="bg-tertiary-container"]:hover {
  background: var(--btn-secondary-hover) !important;
}

/* ---- Button Icon Spacing ---- */
button .material-symbols-outlined + span,
button span + .material-symbols-outlined {
  margin-left: 4px;
}

/* ---- View Toggle Buttons (Monthly/Weekly/Daily) ---- */
#viewToggle {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: var(--btn-radius-full) !important;
  padding: 3px !important;
}

#viewToggle button {
  border-radius: var(--btn-radius-full) !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  padding: 6px 18px !important;
  transition: all var(--btn-transition) !important;
  color: #475569 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#viewToggle button.bg-white,
#viewToggle button[style*="background"] {
  background: white !important;
  color: var(--btn-primary) !important;
  box-shadow: var(--btn-shadow-sm) !important;
  font-weight: 600 !important;
}

/* ---- Settings Tab Buttons ---- */
.settings-tab {
  border-radius: var(--btn-radius-md) !important;
  font-size: 0.8125rem !important;
  transition: all var(--btn-transition) !important;
  padding: 8px 16px !important;
}

.settings-tab.active {
  background: white !important;
  color: var(--btn-primary) !important;
  box-shadow: var(--btn-shadow-sm) !important;
  font-weight: 600 !important;
}

.settings-tab:not(.active):hover {
  background: rgba(255,255,255,0.6) !important;
}

/* ---- Gallery Filter Buttons ---- */
.gallery-filter-btn {
  border-radius: var(--btn-radius-md) !important;
  font-size: 0.8125rem !important;
  transition: all var(--btn-transition) !important;
}

.gallery-filter-btn.bg-white,
.gallery-filter-btn[class*="shadow"] {
  background: white !important;
  color: var(--btn-primary) !important;
  box-shadow: var(--btn-shadow-sm) !important;
}

/* ---- Analytics Period Buttons ---- */
.period-btn {
  border-radius: var(--btn-radius-full) !important;
  transition: all var(--btn-transition) !important;
}

.period-btn.active {
  background: var(--btn-primary) !important;
  color: white !important;
}

/* ---- Export Buttons ---- */
.export-btn {
  background: white !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: var(--btn-radius-lg) !important;
  color: #475569 !important;
  transition: all var(--btn-transition) !important;
}

.export-btn:hover {
  border-color: var(--btn-primary) !important;
  color: var(--btn-primary) !important;
  background: var(--btn-primary-light) !important;
}

/* ---- Termini Sub-tab Buttons ---- */
.termini-subtab {
  border-radius: var(--btn-radius-md) !important;
  font-size: 0.8125rem !important;
  transition: all var(--btn-transition) !important;
}

.termini-subtab.bg-white,
.termini-subtab[class*="shadow"] {
  background: white !important;
  color: var(--btn-primary) !important;
  box-shadow: var(--btn-shadow-sm) !important;
}

/* ---- Gallery Copy Link Buttons ---- */
#galleriesGrid button[class~="bg-primary"] {
  border-radius: var(--btn-radius-full) !important;
  font-size: 0.75rem !important;
  padding: 4px 12px !important;
}

/* ---- Numpad Buttons (Login) ---- */
.numpad-btn {
  border-radius: var(--btn-radius-lg) !important;
  transition: all var(--btn-transition) !important;
  font-weight: 600 !important;
}

.numpad-btn:hover {
  background: var(--btn-primary-light) !important;
}

.numpad-btn:active {
  background: #dbeafe !important;
  transform: scale(0.95) !important;
}

/* ---- Mobile Responsive ---- */
@media (max-width: 768px) {
  #settingsTabs .settings-tab {
    white-space: nowrap !important;
    padding: 6px 12px !important;
    font-size: 0.75rem !important;
  }
}