/**
 * @file
 * EP Icon Styles - Icon definitions and usage
 * 
 * Purpose: Centralized icon system for all EP modules
 * Location: /themes/custom/occasia_elegant/css/ep/components/ep-icons.css
 * Category: components/ (reusable UI components)
 * 
 * This file contains:
 * - Icon class definitions
 * - Icon sizing and colors
 * - Icon usage patterns
 * 
 * Standard: Font Awesome (already in use across site)
 * Reference: Timeline module's `+` button and trash icon (🗑) should be used as standard
 * Requirement: Replace all hardcoded icons (emoji, text characters) with centralized system
 * 
 * Decision Rule: If it's a reusable UI component → components/
 * 
 * See: /bitnami/drupal/modules/.cursor/THEME_STRUCTURE.md for structure documentation
 */

/**
 * Base Icon Styles
 * 
 * All icons use Font Awesome classes for consistency
 * Icon colors are easy to change via CSS variables
 */

.ep-icon {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  color: var(--ep-color-icon); /* Easy to change site-wide */
}

.ep-icon:hover {
  color: var(--ep-color-icon-hover);
}

/* Font Awesome icons also use icon color */
i[class*="fa-"] {
  color: var(--ep-color-icon); /* Easy to change site-wide */
}

i[class*="fa-"]:hover {
  color: var(--ep-color-icon-hover);
}

/**
 * Icon Sizes
 */

.ep-icon--small {
  font-size: var(--ep-font-size-sm); /* 14px */
}

.ep-icon--medium {
  font-size: var(--ep-font-size-base); /* 16px */
}

.ep-icon--large {
  font-size: var(--ep-font-size-lg); /* 18px */
}

.ep-icon--xl {
  font-size: var(--ep-font-size-xl); /* 20px */
}

/**
 * Standard EP Icons
 * 
 * Use these classes for consistent icon usage across the site
 * All icons use Font Awesome - easy to add more by adding new classes below
 */

/* Add Icon - Use Timeline's + button style */
.ep-icon--add::before {
  content: "\f067"; /* Font Awesome plus icon */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

.ep-icon--add {
  /* Can also use Font Awesome class directly: <i class="fas fa-plus"></i> */
}

/* Calendar Icon */
.ep-icon--calendar::before {
  content: "\f073"; /* Font Awesome calendar icon */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

/* Delete/Trash Icon - Use Timeline's trash icon style */
.ep-icon--delete::before,
.ep-icon--trash::before {
  content: "\f2ed"; /* Font Awesome trash icon */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

.ep-icon--delete,
.ep-icon--trash {
  /* Can also use Font Awesome class directly: <i class="fas fa-trash"></i> */
  /* Or emoji: 🗑 (for backward compatibility during migration) */
}

/* Edit Icon */
.ep-icon--edit::before {
  content: "\f044"; /* Font Awesome edit icon */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

/* Save Icon */
.ep-icon--save::before {
  content: "\f0c7"; /* Font Awesome save icon */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

/* Cancel Icon */
.ep-icon--cancel::before {
  content: "\f00d"; /* Font Awesome times/close icon */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

/* View/Eye Icon */
.ep-icon--view::before,
.ep-icon--eye::before {
  content: "\f06e"; /* Font Awesome eye icon */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

/* Info Icon */
.ep-icon--info::before {
  content: "\f05a"; /* Font Awesome info-circle icon */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

.ep-icon--info {
  /* Can also use Font Awesome class directly: <i class="fas fa-info-circle"></i> */
}

/**
 * Clickable info help trigger — pairs with ep-icon ep-icon--info.
 *
 * Use:
 * <button type="button" class="ep-info-trigger" aria-label="...">
 *   <i class="ep-icon ep-icon--info ep-icon--small" aria-hidden="true"></i>
 * </button>
 *
 * Hover tooltips use ep-tooltip + ep-icon--info instead (see contacts Files card).
 */
.ep-info-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--ep-color-icon);
  line-height: 1;
}

.ep-info-trigger:hover,
.ep-info-trigger:focus-visible {
  color: var(--ep-color-icon-hover);
  outline: 2px solid var(--ep-color-input-focus);
  outline-offset: 2px;
}

.ep-info-trigger .ep-icon {
  color: inherit;
}

/* Invoice Icon - for budget lines sourced from invoices */
/* Uses fa-file-alt (f15c) - in Font Awesome 5 Free; file-invoice is Pro-only */
.ep-icon--invoice::before {
  content: "\f15c"; /* Font Awesome file-alt (document with lines) */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

/**
 * Icon Usage Patterns
 * 
 * Use icons in buttons, links, etc.
 */

/* Icon in Button */
.ep-button .ep-icon,
.ep-button i[class*="fa-"] {
  margin: 0;
  vertical-align: middle;
}

/* Icon-only Button */
.ep-button--icon-only {
  padding: var(--ep-spacing-xs);
  min-width: 32px;
  min-height: 32px;
}

.ep-button--icon-only .ep-icon,
.ep-button--icon-only i[class*="fa-"] {
  margin: 0;
}

/**
 * Backward Compatibility
 * 
 * Support for emoji icons during migration
 * Timeline uses 🗑 emoji - will be replaced with Font Awesome
 */

.ep-icon-emoji-trash {
  /* Emoji trash icon - will be replaced */
  font-size: var(--ep-font-size-base);
}

/**
 * How to Add New Icons
 * 
 * 1. Find Font Awesome icon code: https://fontawesome.com/icons
 * 2. Add new class below following the pattern:
 * 
 * .ep-icon--your-icon-name::before {
 *   content: "\fXXX"; // Font Awesome unicode
 *   font-family: "Font Awesome 5 Free";
 *   font-weight: 900;
 * }
 * 
 * 3. Use in templates: <i class="ep-icon ep-icon--your-icon-name"></i>
 *    Or: <i class="fas fa-your-icon"></i> (Font Awesome class)
 */