/* ==========================================================================
   ZaphodOnline — Standardized Button System (button.css)
   ========================================================================== */

:root {
  /* Core Color Palette */
  --btn-light: #EAF6E1;
  --btn-corp: #98D165;
  --btn-action: #57B846;
  --btn-charcoal: #333333;
  --btn-muted: #6B6B6B;
  --btn-workspace: #F2F2F2;
  --btn-border: #D0D0D0;
  --btn-white: #FFFFFF;
  --btn-warning: #F2C94C;
  --btn-error: #D13F3F;
  --btn-critical: #B22222;

  /* State Colors: Hover */
  --btn-green-hover: #419E34;
  --btn-yellow-hover: #D9AD31;
  --btn-red-hover: #B93434;

  /* State Colors: Pressed */
  --btn-green-pressed: #337D29;
  --btn-yellow-pressed: #B88E18;
  --btn-red-pressed: #962929;

  /* Global Button Radius (Invariant 4px standard) */
  --btn-radius: 4px;

  /* Tooltip and Overlay Radii */
  --btn-r-medium: 8px;

  /* Transition Speeds */
  --btn-transition: background-color 90ms linear, border-color 90ms linear, color 90ms linear, box-shadow 90ms linear;
}

/* ==========================================================================
   1. Base Button Structure
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-style: solid;
  border-width: 1px;
  border-color: transparent;
  border-radius: var(--btn-radius);
  font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-sizing: border-box;
  user-select: none;
  transition: var(--btn-transition);
}

/* Global Focus-Visible State */
.btn:focus-visible,
.restricted-wrap:focus-visible {
  outline: 2px solid var(--btn-charcoal);
  outline-offset: 2px;
}

/* ==========================================================================
   2. Size Ladder (XS / S / M / L / XL)
   ========================================================================== */

/* XS: 24px height · 10px font / 14px line-height · 8px horizontal padding */
.btn-xs {
  height: 24px;
  padding: 0 8px;
  font-size: 10px;
  line-height: 14px;
  gap: 4px;
}

/* S: 32px height · 12px font / 16px line-height · 12px horizontal padding */
.btn-s {
  height: 32px;
  padding: 0 12px;
  font-size: 12px;
  line-height: 16px;
  gap: 4px;
}

/* M (Default): 40px height · 14px font / 20px line-height · 16px horizontal padding */
.btn-m,
.btn:not([class*="btn-x"]):not([class*="btn-s"]):not([class*="btn-l"]) {
  height: 40px;
  padding: 0 16px;
  font-size: 14px;
  line-height: 20px;
  gap: 8px;
}

/* L: 48px height · 16px font / 22px line-height · 16px horizontal padding */
.btn-l {
  height: 48px;
  padding: 0 16px;
  font-size: 16px;
  line-height: 22px;
  gap: 8px;
}

/* XL: 56px height · 16px font / 22px line-height · 24px horizontal padding */
.btn-xl {
  height: 56px;
  padding: 0 24px;
  font-size: 16px;
  line-height: 22px;
  gap: 8px;
}

/* Invariant radius overrides for brand CTAs */
.btn-brand-l,
.btn-brand-xl {
  border-radius: var(--btn-radius);
}

/* Full Width Utility */
.btn-block {
  width: 100%;
}

/* ==========================================================================
   3. Button Semantic Types & Interactive States
   ========================================================================== */

/* --- Primary (Action Green) --- */
.btn-primary,
.btn.primary {
  background-color: var(--btn-action);
  border-color: var(--btn-action);
  color: var(--btn-white);
}

.btn-primary:hover:not(:disabled):not(.btn-disabled):not(.disabled):not(.btn-restricted):not(.restricted),
.btn.primary:hover:not(:disabled):not(.btn-disabled):not(.disabled):not(.btn-restricted):not(.restricted),
.btn.primary.state-hover {
  background-color: var(--btn-green-hover);
  border-color: var(--btn-green-hover);
}

.btn-primary:active:not(:disabled):not(.btn-disabled):not(.disabled):not(.btn-restricted):not(.restricted),
.btn.primary:active:not(:disabled):not(.btn-disabled):not(.disabled):not(.btn-restricted):not(.restricted),
.btn.primary.state-pressed {
  background-color: var(--btn-green-pressed);
  border-color: var(--btn-green-pressed);
}

/* --- Secondary (White with Action Green border) --- */
.btn-secondary,
.btn.secondary {
  background-color: var(--btn-white);
  border-color: var(--btn-action);
  color: var(--btn-action);
}

.btn-secondary:hover:not(:disabled):not(.btn-disabled):not(.disabled):not(.btn-restricted):not(.restricted),
.btn.secondary:hover:not(:disabled):not(.btn-disabled):not(.disabled):not(.btn-restricted):not(.restricted),
.btn.secondary.state-hover {
  background-color: var(--btn-light);
  border-color: var(--btn-action);
  color: var(--btn-action);
}

.btn-secondary:active:not(:disabled):not(.btn-disabled):not(.disabled):not(.btn-restricted):not(.restricted),
.btn.secondary:active:not(:disabled):not(.btn-disabled):not(.disabled):not(.btn-restricted):not(.restricted),
.btn.secondary.state-pressed {
  background-color: var(--btn-light);
  border-color: var(--btn-green-pressed);
  color: var(--btn-green-pressed);
}

/* Ensure all secondary buttons enforce matching block dimensions */
.button-secondary,
.btn-secondary {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* Match the exact Hero / Action Secondary Button sizes */
.hero-actions .button-secondary,
.hero-actions .btn-secondary {
    padding: 0 24px;
    font-size: 16px;
    line-height: 22px;
}

/* Match full-width Secondary Form / Card Buttons */
.login-card .create-account-button,
.login-card .btn-secondary {
    width: 100%;
    height: 48px;
    min-height: 48px;
    padding: 0 16px;
    font-size: 16px;
}

.support-card .btn-secondary {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 16px !important;
    margin-top: 20px !important;
    font-size: 16px !important;
    line-height: 22px !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
}

/* --- Ghost (Transparent Utility) --- */
.btn-ghost,
.btn.ghost {
  background-color: transparent;
  border-color: transparent;
  color: var(--btn-charcoal);
}

/* Ghost on Workspace Grey Background (Default Workspace Context) */
.btn-ghost:hover:not(:disabled):not(.btn-disabled):not(.disabled):not(.btn-restricted):not(.restricted),
.btn.ghost:hover:not(:disabled):not(.btn-disabled):not(.disabled):not(.btn-restricted):not(.restricted),
.btn-ghost.on-grey:hover,
.on-grey .btn-ghost:hover,
.surface.grey .btn-ghost:hover,
.ghost-hover-on-grey {
  background-color: var(--btn-white);
  border-color: var(--btn-border);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* Ghost on White Content Surface / Tables */
.surface.white .btn-ghost:hover,
.workspace .btn-ghost:hover,
.panel .btn-ghost:hover,
td .btn-ghost:hover,
.dense-row .btn-ghost:hover,
.ghost-hover-on-white {
  background-color: var(--btn-workspace);
  border-color: transparent;
  box-shadow: none;
}

.btn-ghost:active:not(:disabled):not(.btn-disabled):not(.disabled):not(.btn-restricted):not(.restricted),
.btn.ghost:active:not(:disabled):not(.btn-disabled):not(.disabled):not(.btn-restricted):not(.restricted),
.btn.ghost.state-pressed,
.surface.white .btn-ghost:active,
.surface.grey .btn-ghost:active {
  background-color: var(--btn-light);
  border-color: transparent;
  box-shadow: none;
}

/* --- Warning (Yellow / Charcoal) --- */
.btn-warning,
.btn.warning {
  background-color: var(--btn-warning);
  border-color: var(--btn-warning);
  color: var(--btn-charcoal);
}

.btn-warning:hover:not(:disabled):not(.btn-disabled):not(.disabled):not(.btn-restricted):not(.restricted),
.btn.warning:hover:not(:disabled):not(.btn-disabled):not(.disabled):not(.btn-restricted):not(.restricted),
.btn.warning.state-hover {
  background-color: var(--btn-yellow-hover);
  border-color: var(--btn-yellow-hover);
}

.btn-warning:active:not(:disabled):not(.btn-disabled):not(.disabled):not(.btn-restricted):not(.restricted),
.btn.warning:active:not(:disabled):not(.btn-disabled):not(.disabled):not(.btn-restricted):not(.restricted),
.btn.warning.state-pressed {
  background-color: var(--btn-yellow-pressed);
  border-color: var(--btn-yellow-pressed);
}

/* --- Danger (Error Red / White) --- */
.btn-danger,
.btn.danger {
  background-color: var(--btn-error);
  border-color: var(--btn-error);
  color: var(--btn-white);
}

.btn-danger:hover:not(:disabled):not(.btn-disabled):not(.disabled):not(.btn-restricted):not(.restricted),
.btn.danger:hover:not(:disabled):not(.btn-disabled):not(.disabled):not(.btn-restricted):not(.restricted),
.btn.danger.state-hover {
  background-color: var(--btn-red-hover);
  border-color: var(--btn-red-hover);
}

.btn-danger:active:not(:disabled):not(.btn-disabled):not(.disabled):not(.btn-restricted):not(.restricted),
.btn.danger:active:not(:disabled):not(.btn-disabled):not(.disabled):not(.btn-restricted):not(.restricted),
.btn.danger.state-pressed {
  background-color: var(--btn-red-pressed);
  border-color: var(--btn-red-pressed);
}

/* ==========================================================================
   4. Unavailable States (Disabled vs Restricted)
   ========================================================================== */

/* --- Disabled (Condition Missing: Neutral Grey / White) --- */
.btn:disabled,
.btn.disabled,
.btn-disabled {
  opacity: 1;
  background-color: var(--btn-white) !important;
  border-color: var(--btn-border) !important;
  color: var(--btn-muted) !important;
  cursor: not-allowed !important;
  pointer-events: none;
  box-shadow: none !important;
}

/* --- Restricted (Role Permission Missing: Charcoal Border + Tooltip) --- */
.btn.restricted,
.btn-restricted {
  background-color: var(--btn-white) !important;
  border-color: var(--btn-charcoal) !important;
  color: var(--btn-charcoal) !important;
  cursor: not-allowed;
  box-shadow: none !important;
}

.restricted-wrap {
  position: relative;
  display: inline-flex;
  border-radius: var(--btn-radius);
}

.restricted-wrap:focus-visible {
  outline: 2px solid var(--btn-charcoal);
  outline-offset: 2px;
}

/* Standardized Restricted Permission Tooltip */
.restricted-tip,
.permission-tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  width: max-content;
  max-width: 280px;
  padding: 8px 12px;
  border-radius: var(--btn-r-medium);
  background-color: var(--btn-charcoal);
  color: var(--btn-white);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  opacity: 0;
  pointer-events: none;
  transition: opacity 90ms linear;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.restricted-wrap:hover .restricted-tip,
.restricted-wrap:focus .restricted-tip,
.restricted-wrap:hover .permission-tooltip,
.restricted-wrap:focus .permission-tooltip {
  opacity: 1;
}

/* ==========================================================================
   5. Icon Specifications
   ========================================================================== */

.icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  font-weight: 600;
}

.icon-xs { width: 12px; height: 12px; font-size: 12px; line-height: 12px; }
.icon-s, .icon-m { width: 16px; height: 16px; font-size: 16px; line-height: 16px; }
.icon-l { width: 20px; height: 20px; font-size: 20px; line-height: 20px; }
.icon-xl { width: 24px; height: 24px; font-size: 24px; line-height: 24px; }