/* ============================================
   Global Unified Components & Rules
   ============================================
   כל הרכיבים והחוקים הגלובליים האחידים
   משמשים בכל המודולים ללא יוצא מן הכלל
   ============================================ */

@layer components {
  
  /* ============================================
     Icons Language - שפת אייקונים אחידה
     ============================================
     כל האייקונים במערכת משתמשים באותה שפה:
     - פלוס (+) = תמיד "חדש"
     - עיפרון (edit) = עריכה
     - עין (eye) = צפייה
     - פח (trash) = מחיקה
     - פליי/פאוז = הפעלת/השהיית סטטוס
     ============================================ */
  
  /* אייקון "חדש" - תמיד פלוס */
  .icon-new,
  .btn-new i,
  [data-action="new"] i,
  [data-action="add"] i {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
  }
  
  .icon-new::before,
  .btn-new i::before,
  [data-action="new"] i::before,
  [data-action="add"] i::before {
    content: "\f067"; /* fa-plus */
  }
  
  /* אייקון "עריכה" - תמיד עיפרון */
  .icon-edit,
  .btn-edit i,
  [data-action="edit"] i {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
  }
  
  .icon-edit::before,
  .btn-edit i::before,
  [data-action="edit"] i::before {
    content: "\f044"; /* fa-edit */
  }
  
  /* אייקון "צפייה" - תמיד עין */
  .icon-view,
  .btn-view i,
  [data-action="view"] i {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
  }
  
  .icon-view::before,
  .btn-view i::before,
  [data-action="view"] i::before {
    content: "\f06e"; /* fa-eye */
  }
  
  /* אייקון "מחיקה" - תמיד פח */
  .icon-delete,
  .btn-delete i,
  [data-action="delete"] i {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
  }
  
  .icon-delete::before,
  .btn-delete i::before,
  [data-action="delete"] i::before {
    content: "\f1f8"; /* fa-trash */
  }
  
  /* אייקון "הפעלה" - תמיד פליי */
  .icon-activate,
  .btn-activate i,
  [data-action="activate"] i {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
  }
  
  .icon-activate::before,
  .btn-activate i::before,
  [data-action="activate"] i::before {
    content: "\f04b"; /* fa-play */
  }
  
  /* אייקון "השהיה" - תמיד פאוז */
  .icon-deactivate,
  .btn-deactivate i,
  [data-action="deactivate"] i {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
  }
  
  .icon-deactivate::before,
  .btn-deactivate i::before,
  [data-action="deactivate"] i::before {
    content: "\f04c"; /* fa-pause */
  }
  
  /* ============================================
     Typography - טיפוגרפיה אחידה
     ============================================
     כל הכותרות והטקסטים משתמשים בגודל אחיד
     ============================================ */
  
  /* H1 - תמיד אותו גודל */
  h1,
  .h1 {
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
  }
  
  /* H2/H3 - כותרות בלוקים - אותו גודל וצבע */
  h2,
  .h2 {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
  }
  
  h3,
  .h3 {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    line-height: var(--leading-tight);
  }
  
  /* טקסט משני - תמיד אותו צבע אפור ואותו גודל */
  .text-muted,
  .text-secondary,
  .description,
  .subtitle {
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: var(--leading-normal);
  }
  
  /* ============================================
     Spacing - מרווחים אחידים
     ============================================
     כל המרווחים משתמשים במערכת אחידה
     ============================================ */
  
  /* Padding קבוע לכרטיס */
  .kpi-card,
  .entity-card,
  .card {
    padding: var(--space-6);
  }
  
  /* מרווח בין כרטיסים */
  .cards-grid,
  .kpi-grid {
    gap: var(--space-4);
  }
  
  /* margin-top לכותרת דף */
  .page-header {
    margin-top: var(--space-4);
    margin-bottom: var(--space-8);
  }
  
  /* ============================================
     Hover Behavior - התנהגות hover אחידה
     ============================================
     כל ה-hover משתמש באותה התנהגות
     ============================================ */
  
  /* טבלאות - תמיד צבע רקע עדין באפור/כחול בהיר */
  .table tbody tr:hover {
    background: var(--primary-soft);
    transition: background-color var(--transition-fast);
  }
  
  /* כרטיסים - קצת shadow + translateY קטן */
  .kpi-card:hover,
  .entity-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-strong);
    transition: all var(--transition-base);
  }
  
  /* ============================================
     Status Colors - צבעי סטטוס אחידים
     ============================================
     Active → ירוק, Inactive → אדום, Pending → כתום
     ============================================ */
  
  /* Active - תמיד ירוק */
  .status-active,
  .badge-active,
  [data-status="active"] {
    background: var(--success-soft);
    color: var(--success);
    border-color: var(--success);
  }
  
  /* Inactive - תמיד אדום */
  .status-inactive,
  .badge-inactive,
  [data-status="inactive"] {
    background: var(--danger-soft);
    color: var(--danger);
    border-color: var(--danger);
  }
  
  /* Pending - תמיד כתום */
  .status-pending,
  .badge-pending,
  [data-status="pending"] {
    background: var(--warning-soft);
    color: var(--warning);
    border-color: var(--warning);
  }
  
  /* ============================================
     Buttons Behavior - התנהגות כפתורים אחידה
     ============================================
     בטבלאות: תמיד בצד ימין/שמאל קבוע
     בכרטיסים: תמיד בשורה האחרונה (footer)
     ============================================ */
  
  /* כפתורי פעולה בטבלאות - תמיד בצד ימין (RTL) */
  .table-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    justify-content: flex-end;
  }
  
  /* כפתורי פעולה בכרטיסים - תמיד ב-footer */
  .entity-card-footer,
  .card-footer {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    justify-content: flex-end;
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-subtle);
    margin-top: auto;
  }
  
  /* ============================================
     Toasts - הודעות מערכת אחידות
     ============================================
     מיקום קבוע, עיצוב אחיד, זמן תצוגה אחיד, אנימציה אחידה
     ============================================ */
  
  .toast-container {
    position: fixed;
    top: var(--space-4);
    left: var(--space-4);
    z-index: var(--z-tooltip);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  
  .toast {
    animation: slideInRight 0.3s ease-out;
    min-width: 300px;
    max-width: 400px;
  }
  
  @keyframes slideInRight {
    from {
      transform: translateX(100%);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }
}