/**
 * @file
 * EP Button Styles - All button styles
 * 
 * Purpose: Centralized button styles for all EP modules
 * Location: /themes/custom/occasia_elegant/css/ep/components/ep-buttons.css
 * Category: components/ (reusable UI components)
 * 
 * This file contains:
 * - Primary button styles (square edges, subtle, classy)
 * - Secondary button styles (square edges)
 * - Icon buttons (add, delete, edit)
 * - Button sizes (small, medium, large)
 * - Button states (hover, active, disabled)
 * 
 * Design: Ivory fill, ink border — primary and secondary share the same appearance
 * Requirement: All buttons must have square edges (border-radius: 0)
 * 
 * Decision Rule: If it's a reusable UI component → components/
 * 
 * See: /bitnami/drupal/modules/.cursor/THEME_STRUCTURE.md for structure documentation
 */

/**
 * Base Button Styles
 * 
 * All buttons start with these base styles - subtle, classy, square edges
 * 
 * NOTE: Secondary header buttons are excluded - they have their own styling
 */

/* Exclude secondary header buttons from EP button styles */
.ep-event-secondary-header .ep-button,
.ep-event-secondary-header button,
.ep-event-secondary-header a.button {
  /* Secondary header buttons use their own styles - do not override */
  /* Styles are in /themes/custom/occasia_elegant/css/secondary-header.css */
}

.ep-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ep-spacing-xs);
  padding: var(--ep-spacing-xs) var(--ep-spacing-sm);
  font-family: var(--ep-font-family-base);
  font-size: var(--ep-button-font-size);
  font-weight: var(--ep-font-weight-medium);
  line-height: var(--ep-line-height-normal);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: var(--ep-button-border-width) solid var(--ep-button-border-color);
  border-radius: var(--ep-border-radius);
  background-color: var(--ep-button-bg);
  color: var(--ep-color-text-primary);
  transition: all var(--ep-transition-base);
  user-select: none;
  box-sizing: border-box;
  min-height: 28px;
}

.ep-button:hover {
  background-color: var(--ep-button-hover-bg);
  border-color: var(--ep-button-border-color);
  color: var(--ep-color-text-primary);
  text-decoration: none;
}

.ep-button:active {
  background-color: var(--ep-button-active-bg);
  border-color: var(--ep-button-border-color) !important;
  border-width: var(--ep-button-border-width) !important;
  border-style: solid !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Remove focus outline on mouse clicks, but keep for keyboard navigation */
.ep-button:focus:not(:focus-visible) {
  outline: none !important;
  border-color: var(--ep-button-border-color) !important;
  border-width: var(--ep-button-border-width) !important;
  border-style: solid !important;
  box-shadow: none !important;
}

.ep-button:focus:active:not(:focus-visible) {
  border-color: var(--ep-button-border-color) !important;
  border-width: var(--ep-button-border-width) !important;
  border-style: solid !important;
  outline: none !important;
  box-shadow: none !important;
}

.ep-button:focus-visible {
  outline: 2px solid var(--ep-color-input-focus);
  outline-offset: 2px;
  border-color: var(--ep-button-border-color) !important;
  border-width: var(--ep-button-border-width) !important;
  border-style: solid !important;
}

.ep-button:disabled,
.ep-button.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/**
 * Primary & secondary modifiers
 *
 * Same appearance — modifiers kept for markup compatibility only.
 */

.ep-button--primary,
.ep-button--secondary {
  background-color: var(--ep-button-bg);
  border-color: var(--ep-button-border-color);
  border-width: var(--ep-button-border-width);
  color: var(--ep-color-text-primary);
}

.ep-button--primary:hover,
.ep-button--secondary:hover {
  background-color: var(--ep-button-hover-bg);
  border-color: var(--ep-button-border-color);
  color: var(--ep-color-text-primary);
}

.ep-button--primary:active,
.ep-button--secondary:active,
.ep-button--primary:focus:not(:focus-visible),
.ep-button--secondary:focus:not(:focus-visible),
.ep-button--primary:focus:active:not(:focus-visible),
.ep-button--secondary:focus:active:not(:focus-visible) {
  background-color: var(--ep-button-active-bg);
  border-color: var(--ep-button-border-color) !important;
  border-width: var(--ep-button-border-width) !important;
  border-style: solid !important;
  outline: none !important;
  box-shadow: none !important;
}


/**
 * Button Sizes
 *
 * Default .ep-button matches budget module actions (compact).
 * Use --large for prominent CTAs (auth, empty-state hero actions).
 */

.ep-button--small {
  padding: var(--ep-spacing-xs) var(--ep-spacing-sm);
  font-size: var(--ep-font-size-sm);
  min-height: 28px;
}

.ep-button--large {
  padding: var(--ep-spacing-sm) var(--ep-spacing-md);
  font-size: var(--ep-font-size-base);
  min-height: 38px;
}

/**
 * Icon-Only Buttons
 * 
 * When a button contains ONLY an icon (no text), show just the icon
 * No button background, no border - just the icon itself
 */

.ep-button--icon-only {
  background: none !important;
  border: none !important;
  padding: var(--ep-spacing-xs);
  min-width: auto;
  min-height: auto;
  color: var(--ep-color-icon); /* Use icon color variable - easy to change */
  box-shadow: none;
}

.ep-button--icon-only:hover {
  background: none !important;
  border: none !important;
  color: var(--ep-color-icon-hover); /* Use icon hover color */
  opacity: 0.8;
  box-shadow: none;
}

/* Remove focus outline on mouse clicks, but keep for keyboard navigation */
.ep-button--icon-only:focus:not(:focus-visible) {
  background: none !important;
  border: none !important;
  outline: none !important;
  color: var(--ep-color-icon-hover);
  opacity: 0.8;
  box-shadow: none;
}

.ep-button--icon-only:focus-visible {
  outline: 2px solid var(--ep-color-input-focus);
  outline-offset: 2px;
}

.ep-button--icon-only:active {
  background: none !important;
  border: none !important;
  color: var(--ep-color-icon-active); /* Use icon active color */
  opacity: 0.6;
}

.ep-button--icon-only .ep-icon,
.ep-button--icon-only i[class*="fa-"] {
  font-size: var(--ep-font-size-lg);
  line-height: 1;
  display: inline-block;
}

/**
 * Button with Icon AND Text
 * 
 * Buttons that contain icons alongside text - keep button styling
 */

.ep-button:not(.ep-button--icon-only) .ep-icon,
.ep-button:not(.ep-button--icon-only) i[class*="fa-"] {
  font-size: inherit;
  line-height: 1;
}

/**
 * Drupal Form Buttons
 * 
 * Make Drupal's default .button class use EP button styles within EP forms
 * This ensures form submit buttons automatically get EP styling
 */

form.ep-form .form-actions .button,
.ep-form .form-actions .button,
form.ep-form .form-actions a.ep-button,
.ep-form .form-actions a.ep-button,
form.ep-form .button,
.ep-form .button,
form.ep-form .button.button--primary,
.ep-form .button.button--primary,
form.ep-form .button.button--secondary,
.ep-form .button.button--secondary,
form.ep-form input[type="submit"],
.ep-form input[type="submit"],
form.ep-form button[type="submit"],
.ep-form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ep-spacing-xs);
  padding: var(--ep-spacing-xs) var(--ep-spacing-sm);
  font-family: var(--ep-font-family-base);
  font-size: var(--ep-button-font-size);
  font-weight: var(--ep-font-weight-medium);
  line-height: var(--ep-line-height-normal);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: var(--ep-button-border-width) solid var(--ep-button-border-color);
  border-radius: var(--ep-border-radius);
  background-color: var(--ep-button-bg);
  color: var(--ep-color-text-primary);
  transition: all var(--ep-transition-base);
  user-select: none;
  box-sizing: border-box;
  min-height: 28px;
}

/* Add Contact / Add Guests dropdown triggers */
.ep-contact-add-button > button.ep-button,
.ep-contact-add-button button.ep-button {
  border: var(--ep-button-border-width) solid var(--ep-button-border-color) !important;
  background-color: var(--ep-button-bg) !important;
  color: var(--ep-color-text-primary) !important;
  text-transform: none;
  letter-spacing: normal;
  box-shadow: none;
  transform: none;
}

.ep-contact-add-button > button.ep-button:hover,
.ep-contact-add-button button.ep-button:hover,
.ep-contact-add-button > button.ep-button:focus,
.ep-contact-add-button button.ep-button:focus,
.ep-contact-add-button > button.ep-button:active,
.ep-contact-add-button button.ep-button:active {
  background-color: var(--ep-button-hover-bg) !important;
  border-color: var(--ep-button-border-color) !important;
  color: var(--ep-color-text-primary) !important;
  box-shadow: none;
  transform: none;
}

/* Ensure delete button matches save button height and all properties */
form.ep-form .form-actions .button--danger,
.ep-form .form-actions .button--danger,
form.ep-form .form-actions a.button--danger,
.ep-form .form-actions a.button--danger,
form.ep-form .form-actions .button.button--danger,
.ep-form .form-actions .button.button--danger,
form.ep-form .form-actions a.button.button--danger,
.ep-form .form-actions a.button.button--danger,
form.ep-form .form-actions .button.delete,
.ep-form .form-actions .button.delete,
form.ep-form .form-actions a.delete,
.ep-form .form-actions a.delete,
form.ep-form .form-actions button.delete,
.ep-form .form-actions button.delete {
  /* Match all EP button properties exactly */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--ep-spacing-xs);
  padding: var(--ep-spacing-xs) var(--ep-spacing-sm) !important;
  font-family: var(--ep-font-family-base);
  font-size: var(--ep-button-font-size);
  font-weight: var(--ep-font-weight-medium);
  line-height: var(--ep-line-height-normal) !important;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: var(--ep-button-border-width) solid var(--ep-button-border-color);
  border-radius: var(--ep-border-radius);
  box-sizing: border-box !important;
  min-height: 28px !important;
  user-select: none;
  background-color: var(--ep-button-bg);
  color: var(--ep-color-text-primary);
}

form.ep-form .form-actions .button:hover,
.ep-form .form-actions .button:hover,
form.ep-form .form-actions a.ep-button:hover,
.ep-form .form-actions a.ep-button:hover,
form.ep-form .button:hover,
.ep-form .button:hover,
form.ep-form .button.button--primary:hover,
.ep-form .button.button--primary:hover,
form.ep-form .button.button--secondary:hover,
.ep-form .button.button--secondary:hover,
form.ep-form input[type="submit"]:hover,
.ep-form input[type="submit"]:hover,
form.ep-form button[type="submit"]:hover,
.ep-form button[type="submit"]:hover {
  background-color: var(--ep-button-hover-bg);
  border-color: var(--ep-button-border-color);
  color: var(--ep-color-text-primary);
  text-decoration: none;
}

form.ep-form .form-actions .button:active,
.ep-form .form-actions .button:active,
form.ep-form .form-actions a.ep-button:active,
.ep-form .form-actions a.ep-button:active,
form.ep-form .button:active,
.ep-form .button:active,
form.ep-form .button.button--primary:active,
.ep-form .button.button--primary:active,
form.ep-form .button.button--secondary:active,
.ep-form .button.button--secondary:active,
form.ep-form input[type="submit"]:active,
.ep-form input[type="submit"]:active,
form.ep-form button[type="submit"]:active,
.ep-form button[type="submit"]:active {
  background-color: var(--ep-button-active-bg);
  border-color: var(--ep-button-border-color) !important;
  outline: none !important;
  box-shadow: none !important;
}

/**
 * Legacy Button Support
 * 
 * Support for existing button classes during migration
 * These will be removed once all modules are migrated
 */

.btn.ep-button,
button.ep-button,
a.ep-button {
  /* Ensure buttons work as both buttons and links */
}

/* Ensure ALL buttons (including links styled as buttons) maintain borders in all states */
button.ep-button:active,
a.ep-button:active,
button.ep-button:focus:not(:focus-visible),
a.ep-button:focus:not(:focus-visible),
button.ep-button:focus:active:not(:focus-visible),
a.ep-button:focus:active:not(:focus-visible) {
  border-color: var(--ep-button-border-color) !important;
  border-width: var(--ep-button-border-width) !important;
  border-style: solid !important;
  outline: none !important;
  box-shadow: none !important;
}

/**
 * Site-wide Drupal & Bootstrap button aliases
 *
 * Ensures legacy .button / .btn markup gets ink-border styling without
 * requiring ep-button class on every control. Excludes text back-links,
 * icon-only controls, and special affordances (ghost/dashed).
 */

.btn:not(.btn-cta):not(.btn-close):not(.btn-link):not(.navbar-toggler),
.button:not(.ep-button--icon-only):not(.ep-contact-back-button):not(.ep-guest-back-button):not(.button--ghost),
a.button:not(.ep-button--icon-only):not(.ep-contact-back-button):not(.ep-guest-back-button):not(.ep-checklist-back-link):not(.ep-layout-form__back-link):not(.ep-layout-canvas__back-link),
input.button:not(.ep-button--icon-only),
input.form-submit:not(.ep-button--icon-only),
button.button:not(.ep-button--icon-only):not(.btn-close):not(.navbar-toggler),
button.form-submit:not(.ep-button--icon-only),
.button--primary,
.button--secondary,
.button--danger,
.button--small:not(.ep-contact-back-button):not(.ep-guest-back-button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ep-spacing-xs);
  padding: var(--ep-spacing-xs) var(--ep-spacing-sm);
  font-family: var(--ep-font-family-base, 'DM Sans', sans-serif);
  font-size: var(--ep-button-font-size);
  font-weight: var(--ep-font-weight-medium);
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: var(--ep-button-border-width) solid var(--ep-button-border-color);
  border-radius: var(--ep-border-radius);
  background-color: var(--ep-button-bg);
  color: var(--ep-color-text-primary);
  transition: all var(--ep-transition-base);
  user-select: none;
  box-sizing: border-box;
  min-height: 28px;
}

.button--small:not(.ep-contact-back-button):not(.ep-guest-back-button),
.btn.btn-sm:not(.btn-cta):not(.btn-close):not(.btn-link) {
  padding: var(--ep-spacing-xs) var(--ep-spacing-sm);
  font-size: var(--ep-font-size-sm);
  min-height: 28px;
}

.btn:not(.btn-cta):not(.btn-close):not(.btn-link):not(.navbar-toggler):hover,
.button:not(.ep-button--icon-only):not(.ep-contact-back-button):not(.ep-guest-back-button):not(.button--ghost):hover,
a.button:not(.ep-button--icon-only):not(.ep-contact-back-button):not(.ep-guest-back-button):not(.ep-checklist-back-link):hover,
input.button:not(.ep-button--icon-only):hover,
input.form-submit:not(.ep-button--icon-only):hover,
button.button:not(.ep-button--icon-only):hover,
button.form-submit:not(.ep-button--icon-only):hover,
.button--primary:hover,
.button--secondary:hover,
.button--danger:hover,
.button--small:not(.ep-contact-back-button):not(.ep-guest-back-button):hover {
  background-color: var(--ep-button-hover-bg);
  border-color: var(--ep-button-border-color);
  color: var(--ep-color-text-primary);
  text-decoration: none;
}

.btn:not(.btn-cta):not(.btn-close):not(.btn-link):not(.navbar-toggler):active,
.button:not(.ep-button--icon-only):not(.ep-contact-back-button):not(.ep-guest-back-button):not(.button--ghost):active,
.button--primary:active,
.button--secondary:active,
.button--danger:active,
.btn:not(.btn-cta):not(.btn-close):not(.btn-link):not(.navbar-toggler):focus:not(:focus-visible),
.button:not(.ep-button--icon-only):not(.ep-contact-back-button):not(.ep-guest-back-button):not(.button--ghost):focus:not(:focus-visible),
input.button:focus:not(:focus-visible),
input.form-submit:focus:not(:focus-visible),
button.button:focus:not(:focus-visible),
button.form-submit:focus:not(:focus-visible),
.btn:not(.btn-cta):not(.btn-close):not(.btn-link):not(.navbar-toggler):focus:active:not(:focus-visible),
.button:not(.ep-button--icon-only):not(.ep-contact-back-button):not(.ep-guest-back-button):not(.button--ghost):focus:active:not(:focus-visible),
input.button:focus:active:not(:focus-visible),
input.form-submit:focus:active:not(:focus-visible),
button.button:focus:active:not(:focus-visible),
button.form-submit:focus:active:not(:focus-visible) {
  background-color: var(--ep-button-active-bg);
  border-color: var(--ep-button-border-color) !important;
  border-width: var(--ep-button-border-width) !important;
  border-style: solid !important;
  border-left: var(--ep-button-border-width) solid var(--ep-button-border-color) !important;
  border-right: var(--ep-button-border-width) solid var(--ep-button-border-color) !important;
  border-top: var(--ep-button-border-width) solid var(--ep-button-border-color) !important;
  border-bottom: var(--ep-button-border-width) solid var(--ep-button-border-color) !important;
  outline: none !important;
  box-shadow: none !important;
}