/* =========================================================
   /src/css/components/buttons/buttons.css
   3Y Design System: Buttons
   ========================================================= */

/* --- 1. BASE BUTTON --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display, sans-serif);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid transparent;
  white-space: nowrap;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* --- 2. SIZES --- */
/* Standard (Default) */
.btn {
  padding: 0.75rem 1.5rem;
  font-size: 0.95rem;
  border-radius: 8px; /* Default radius */
}

/* Small (Settings, Tables) */
.btn-sm {
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  border-radius: 6px;
}

/* Pill Shape (For CTAs and Modern look) */
.btn-pill {
  border-radius: 50px;
}

/* Full Width (Mobile/Modals) */
.btn-full {
  width: 100%;
}

/* --- 3. VARIANTS --- */

/* === PRIMARY (The "CTA") ===
   Default: black background, white text.
   Hover:   lime background, dark text, lift + glow.

   The hover fill uses !important and also covers the hero
   "Go to Dashboard" (#btn-dashboard). That button gets its black
   fill at runtime (it has no CSS rule of its own), so without
   !important the lime can't override the inline background while the
   dark text still applies — leaving dark-on-black, i.e. the text
   "disappears" on hover. Forcing the fill keeps it readable. */
.btn-primary,
.cta-button {
  background-color: var(--black, #181818);
  color: #ffffff !important;
  border-color: transparent;
}

.btn-primary:hover:not(:disabled),
.cta-button:hover:not(:disabled),
#btn-dashboard:hover:not(:disabled) {
  background-color: var(--lime-green, #8DC143) !important;
  color: var(--black, #181818) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(141, 193, 67, 0.4);
}

.btn-primary:active,
.cta-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(141, 193, 67, 0.2);
}

/* Design-system alias: ensure .btn.btn-primary beats the bare .btn
   defined elsewhere. (Hover is handled by the rule above.) */
.btn.btn-primary,
button.btn.btn-primary {
  background-color: var(--black, #181818);
  color: #ffffff;
  border-color: transparent;
}

/* === PRIMARY INVERSE (For Dark Backgrounds) ===
   Default: white background, black text.
   Hover:   lime green background, dark text, glow.
*/
.btn-primary-inverse {
  background-color: #ffffff;
  color: var(--black, #181818) !important;
  border-color: transparent;
}

.btn-primary-inverse:hover {
  background-color: var(--lime-green, #8DC143);
  color: var(--black, #181818) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(141, 193, 67, 0.4);
}

.btn-primary-inverse:active {
  transform: translateY(0);
}

/* === SECONDARY (Settings, Actions) ===
   Default: white, bordered.
   Hover:   light green tint, dark green text.
*/
.btn-secondary {
  background-color: transparent;
  color: var(--text-dark, #111827);
  border: 1px solid var(--border-color, #e5e7eb);
  background: #ffffff; /* Explicit white bg so content doesn't bleed */
}

.btn-secondary:hover {
  background-color: var(--primary-tint, #F0FDF4) !important;
  color: #166534 !important; /* Dark Green Text */
  border-color: #BBF7D0 !important; /* Soft Green Border */
  box-shadow: 0 4px 12px -2px rgba(141, 193, 67, 0.2);
  transform: translateY(-1px);
}

.btn-secondary:active {
  transform: translateY(0);
  background-color: #DCFCE7 !important;
}

/* === GHOST (Text-Only / Cancel) ===
   Turns into a visible button on hover.
*/
.btn-ghost {
  background: transparent;
  border: 1px solid transparent; /* Keeps sizing consistent if we add border later */
  box-shadow: none;
  color: var(--text-gray, #6B7280);

  /* Match height/padding of primary buttons so they align */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.25rem;
  height: auto;
  min-height: 44px; /* Touch target size */

  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 8px;
}

.btn-ghost:hover {
  background-color: rgba(0, 0, 0, 0.06); /* Visible light gray */
  color: var(--black, #111827); /* Darken text to black */
  text-decoration: none;
}

.btn-ghost:active {
  background-color: rgba(0, 0, 0, 0.12);
  transform: scale(0.98);
}

.btn-ghost:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: transparent;
  color: var(--text-gray);
}

/* =========================================================
   DARK THEME (button-specific)
   ---------------------------------------------------------
   .btn-secondary is the shared "white pill" button (Manage plan,
   View invoice, the Change buttons, the API Actions button, ...).
   Its base rule hardcodes a white fill + light hover tint, so it
   stayed white on every dark page. Repoint it onto the semantic
   token layer in dark only; scoped under :root[data-theme="dark"]
   so source order can't undo it and light mode is untouched.

   App-shell primary/ghost dark treatment may live in app-scoped
   CSS. Public-page primary buttons are handled below so Help and
   other public dark surfaces do not need local button overrides.
   ========================================================= */
:root[data-theme="dark"] .btn-secondary {
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
}

:root[data-theme="dark"] .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.10) !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-brand) !important;
  box-shadow: 0 4px 12px -2px rgba(141, 193, 67, 0.25);
}

:root[data-theme="dark"] .btn-secondary:active {
  background: rgba(255, 255, 255, 0.14) !important;
}

:root[data-theme="dark"] body:not(.app-body) .btn.btn-primary,
:root[data-theme="dark"] body:not(.app-body) button.btn.btn-primary,
:root[data-theme="dark"] body:not(.app-body) a.btn.btn-primary {
  background-color: #ffffff !important;
  color: #181818 !important;
  border-color: transparent;
}

:root[data-theme="dark"] body:not(.app-body) .btn.btn-primary:hover:not(:disabled),
:root[data-theme="dark"] body:not(.app-body) button.btn.btn-primary:hover:not(:disabled),
:root[data-theme="dark"] body:not(.app-body) a.btn.btn-primary:hover:not(:disabled),
:root[data-theme="dark"] body:not(.app-body) .btn.btn-primary:focus-visible,
:root[data-theme="dark"] body:not(.app-body) button.btn.btn-primary:focus-visible,
:root[data-theme="dark"] body:not(.app-body) a.btn.btn-primary:focus-visible {
  background-color: var(--lime-green, #8dc143) !important;
  color: var(--black, #181818) !important;
}