/* ============================================
   Buttons - כפתורים אחידים
   תוכנית שידרוג עיצוב Enterprise מקיף
   ============================================
   
   קובץ מאוחד - 8 סוגי כפתורים בסיסיים:
   1. Primary
   2. Secondary
   3. Danger
   4. Success
   5. Warning
   6. Info
   7. Icon
   8. Ghost
   
   גדלים: sm, רגיל (ברירת מחדל), lg
   מצבים: hover, active, disabled, focus
   
   תאריך יצירה: 2025-01-27
   גרסה: 1.0.0
   ============================================ */

@layer components {
  /* ===== Base Button Styles ===== */
  .btn,
  button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    font-size: var(--fs-base);
    font-weight: 500;
    line-height: 1.5;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
    user-select: none;
    box-shadow: none;
    /* Touch Target - מינימום 44x44px למובייל */
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Touch Targets למובייל */
  @media (max-width: 768px) {
    .btn,
    button {
      min-height: 48px;
      padding: var(--space-3) var(--space-5);
    }
  }
  
  .btn:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
  }
  
  .btn:focus:not(:focus-visible) {
    outline: none;
  }
  
  /* High Contrast Mode - ניגודיות גבוהה */
  @media (prefers-contrast: high) {
    .btn:focus,
    .btn:focus-visible {
      outline: 3px solid var(--primary-700);
      outline-offset: 3px;
      background-color: var(--primary-50);
    }
  }
  
  /* Reduced Motion - תמיכה בהפחתת תנועה */
  @media (prefers-reduced-motion: reduce) {
    .btn {
      transition: none;
    }
    
    .btn:hover {
      transform: none;
    }
  }
  
  .btn:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
  }
  
  .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    transform: scale(1.0);
  }
  
  /* ===== Overflow Rules for Buttons ===== */
  /* כפתורים צריכים overflow: visible כדי למנוע סרגל גלילה מיותר */
  .btn,
  button,
  a.btn,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  .btn-group,
  .btn-group *,
  .btn-action,
  .btn-action *,
  .btn-share,
  .btn-share *,
  .btn-delete,
  .btn-delete *,
  .btn-edit,
  .btn-edit *,
  .btn-view,
  .btn-view *,
  .btn-add,
  .btn-add *,
  .btn-print,
  .btn-print * {
    overflow-x: visible;
    overflow-y: visible;
    max-width: none;
    white-space: nowrap;
    word-wrap: normal;
  }
  
  /* תיקון: כפתורים לא צריכים overflow hidden */
  button,
  button *,
  .btn,
  .btn * {
    overflow-x: visible;
    overflow-y: visible;
  }
  
  /* טאבים - חריגה מלאה */
  .nav-tabs,
  .nav-tabs *,
  .nav-tab,
  .nav-tab *,
  .hub-tab,
  .hub-tab *,
  button.hub-tab,
  button[class*="hub-tab"] {
    max-width: none;
    overflow-x: visible;
    overflow-y: visible;
    flex-shrink: 0;
    white-space: nowrap;
    word-wrap: normal;
  }
  
  [role="tab"],
  [role="tab"] * {
    max-width: none;
    overflow-x: visible;
    overflow-y: visible;
    word-wrap: normal;
  }
  
  /* כפתורים עם text-overflow: ellipsis - למצבים ספציפיים */
  /* ⚠️ הוסר overflow-x: hidden - overflow: hidden כולל גם overflow-x */
  button,
  .btn,
  input[type="button"],
  input[type="submit"],
  input[type="reset"] {
    white-space: normal;   /* מאפשר ירידת שורה במקום גלילה */
    overflow: hidden;       /* שלא יופיע סרגל גלילה */
    /* overflow-x: hidden; - הוסר - overflow: hidden כולל גם overflow-x */
    /* overflow-y: hidden; - הוסר - overflow: hidden כולל גם overflow-y */
    text-overflow: ellipsis;          /* אם משהו חורג – שלוש נקודות */
    max-width: 100%;
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    word-wrap: break-word;
  }
  
  /* כפתורים בתוך table-actions - דריסה ספציפית */
  /* ⚠️ הוסר overflow-x: hidden - overflow: hidden כולל גם overflow-x */
  .table td .table-actions .btn,
  .responsive-table td .table-actions .btn,
  .employees-table td .table-actions .btn,
  .contracts-table td .table-actions .btn,
  .materials-table td .table-actions .btn,
  .worklogs-table td .table-actions .btn,
  .projects-table td .table-actions .btn,
  .reports-table td .table-actions .btn,
  .safety-table td .table-actions .btn,
  .email-table td .table-actions .btn,
  .contractors-table td .table-actions .btn,
  table td .table-actions .btn {
    white-space: normal;
    overflow: hidden;
    /* overflow-x: hidden; - הוסר - overflow: hidden כולל גם overflow-x */
    /* overflow-y: hidden; - הוסר - overflow: hidden כולל גם overflow-y */
    max-width: 100%;
    text-overflow: ellipsis;
    word-wrap: break-word;
  }
  
  /* כפתורים בתוך action-buttons - דריסה ספציפית */
  /* ⚠️ הוסר overflow-x: hidden - overflow: hidden כולל גם overflow-x */
  .action-buttons .btn:not(.btn-action),
  .action-buttons button:not(.btn-action),
  .action-buttons a.btn:not(.btn-action) {
    white-space: normal;
    overflow: hidden;
    /* overflow-x: hidden; - הוסר - overflow: hidden כולל גם overflow-x */
    /* overflow-y: hidden; - הוסר - overflow: hidden כולל גם overflow-y */
    max-width: 100%;
    text-overflow: ellipsis;
    word-wrap: break-word;
  }
  
  /* כפתורי btn-action בתוך action-buttons - שמירה על העיצוב הגלובלי */
  .action-buttons .btn-action {
    white-space: nowrap;
    overflow: visible;
    max-width: none;
    word-wrap: normal;
  }
  
  /* כפתורים בתוך btn-group - דריסה ספציפית */
  .btn-group .btn,
  .btn-group button,
  .btn-group a.btn,
  .table td .btn-group .btn,
  .employees-table td .btn-group .btn,
  .contracts-table td .btn-group .btn,
  .materials-table td .btn-group .btn,
  .worklogs-table td .btn-group .btn,
  .projects-table td .btn-group .btn,
  .reports-table td .btn-group .btn,
  .safety-table td .btn-group .btn,
  .email-table td .btn-group .btn,
  .contractors-table td .btn-group .btn,
  table td .btn-group .btn {
    white-space: normal;
    overflow: hidden;
    /* overflow-x: hidden; - הוסר - overflow: hidden כולל גם overflow-x */
    overflow-y: hidden;
    max-width: 100%;
    text-overflow: ellipsis;
    word-wrap: break-word;
  }
  
  /* אייקונים בתוך כפתורים */
  button i,
  .btn i,
  button .fa,
  .btn .fa,
  button [class*="icon"],
  .btn [class*="icon"],
  button svg,
  .btn svg {
    flex-shrink: 0;
    line-height: 1;
    overflow: visible;
    max-width: none;
  }
  
  /* מניעת overflow על containers שמכילים כפתורים */
  .btn-group,
  .action-buttons,
  .table-actions,
  .page-header-actions,
  .card-header,
  .card-footer,
  .toolbar,
  .btn-toolbar {
    overflow-x: visible;
    overflow-y: visible;
  }
  
  /* אבל הכפתורים עצמם לא יוצרים overflow */
  .btn-group button,
  .btn-group .btn,
  .btn-group a.btn,
  .action-buttons button,
  .action-buttons .btn,
  .action-buttons a.btn,
  .table-actions button,
  .table-actions .btn,
  .table-actions a.btn {
    overflow: hidden;
    /* overflow-x: hidden; - הוסר - overflow: hidden כולל גם overflow-x */
    overflow-y: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    white-space: normal;
    word-wrap: break-word;
  }
  
  /* ===== 1. Primary Button ===== */
  /* עיצוב מודרני מ-worklogs/add.html - כפתורים בתחתית הדף */
  .btn-primary {
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md, 8px);
    font-weight: 500;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    border: none;
    text-decoration: none;
    background: var(--primary-600, #2563eb);
    color: var(--text-inverse, #ffffff);
  }
  
  .btn-primary:hover {
    background: var(--primary-700, #1d4ed8);
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  }
  
  .btn-primary:active {
    background: var(--primary-800, #1e40af);
    transform: translateY(0);
  }
  
  .btn-primary:focus-visible {
    outline: 2px solid var(--primary-500, #3b82f6);
    outline-offset: 2px;
  }
  
  /* ===== 2. Secondary Button ===== */
  /* בדיוק כמו premium-link-style - רקע שקוף, border כחול */
  .btn-secondary {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.6rem;
    border-radius: 10px;
    transition: all 0.3s ease;
    color: rgba(255, 255, 255, 0.9);
    gap: 4px;
    height: auto;
    line-height: 1.4;
    direction: rtl;
    text-align: right;
    font-weight: 500;
    font-size: 0.7rem;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    flex-shrink: 0;
    background: transparent;
    border: 1px solid rgba(52, 152, 219, 0.3);
    cursor: pointer;
    text-decoration: none;
    transform: scale(1.05);
  }

  /* הוסר - .btn-secondary::before גרם לאפקט לא רצוי */

  .btn-secondary:hover {
    background: rgba(52, 152, 219, 0.2);
    color: rgba(255, 255, 255, 1);
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0 6px 20px rgba(52, 152, 219, 0.3);
  }

  .btn-secondary:active {
    background: rgba(52, 152, 219, 0.3);
    transform: scale(1.0);
  }

  .btn-secondary i {
    font-size: 0.75rem;
    width: 16px;
    text-align: center;
  }
  
  /* ===== 3. Danger Button ===== */
  /* עיצוב מודרני מ-worklogs/add.html - כפתורים בתחתית הדף */
  .btn-danger {
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md, 8px);
    font-weight: 500;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    border: none;
    text-decoration: none;
    background: var(--error-600, #dc2626);
    color: var(--text-inverse, #ffffff);
  }
  
  .btn-danger:hover {
    background: var(--error-700, #b91c1c);
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  }
  
  .btn-danger:active {
    background: var(--error-800, #991b1b);
    transform: translateY(0);
  }
  
  .btn-danger:focus-visible {
    outline: 2px solid var(--error-500, #ef4444);
    outline-offset: 2px;
  }
  
  /* ===== 4. Success Button ===== */
  /* עיצוב מודרני מ-worklogs/add.html - כפתורים בתחתית הדף */
  .btn-success {
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md, 8px);
    font-weight: 500;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    border: none;
    text-decoration: none;
    background: var(--success-600, #059669);
    color: var(--text-inverse, #ffffff);
  }
  
  .btn-success:hover {
    background: var(--success-700, #047857);
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  }
  
  .btn-success:active {
    background: var(--success-800, #065f46);
    transform: translateY(0);
  }
  
  .btn-success:focus-visible {
    outline: 2px solid var(--success-500, #10b981);
    outline-offset: 2px;
  }
  
  /* ===== 5. Warning Button ===== */
  /* עיצוב מודרני מ-worklogs/add.html - כפתורים בתחתית הדף */
  .btn-warning {
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md, 8px);
    font-weight: 500;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    border: none;
    text-decoration: none;
    background: var(--warning-600, #d97706);
    color: var(--text-inverse, #ffffff);
  }
  
  .btn-warning:hover {
    background: var(--warning-700, #b45309);
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  }
  
  .btn-warning:active {
    background: var(--warning-800, #92400e);
    transform: translateY(0);
  }
  
  .btn-warning:focus-visible {
    outline: 2px solid var(--warning-500, #f59e0b);
    outline-offset: 2px;
  }
  
  /* ===== 6. Info Button ===== */
  /* עיצוב מודרני מ-worklogs/add.html - כפתורים בתחתית הדף */
  .btn-info {
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md, 8px);
    font-weight: 500;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    border: none;
    text-decoration: none;
    background: var(--info-600, #0284c7);
    color: var(--text-inverse, #ffffff);
  }
  
  .btn-info:hover {
    background: var(--info-700, #0369a1);
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  }
  
  .btn-info:active {
    background: var(--info-800, #075985);
    transform: translateY(0);
  }
  
  .btn-info:focus-visible {
    outline: 2px solid var(--info-500, #0ea5e9);
    outline-offset: 2px;
  }
  
  /* ===== 7. Icon Button ===== */
  /* נגישות: טקסט כהה על רקע בהיר - ניגודיות מינימלית 4.5:1 */
  .btn-icon {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: var(--radius-md);
    border: 1px solid var(--secondary-300);
    background: var(--surface-50);
    color: var(--secondary-600); /* טקסט כהה על רקע בהיר */
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  
  .btn-icon:hover {
    background: var(--surface-100);
    color: var(--primary-500);
    border-color: var(--primary-300);
    transform: scale(1.05) translateY(-2px);
  }
  
  .btn-icon:active {
    background: var(--surface-200);
    transform: scale(1.0);
  }
  
  /* ===== 8. Ghost Button ===== */
  /* נגישות: טקסט כהה (יורש מההורה) - ניגודיות מינימלית 4.5:1 */
  .btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--secondary-700); /* טקסט כהה (יורש מההורה) */
  }
  
  .btn-ghost:hover {
    background: var(--surface-100);
    color: var(--primary-500);
    transform: scale(1.05) translateY(-2px);
  }
  
  .btn-ghost:active {
    background: var(--surface-200);
    transform: scale(1.0);
  }
  
  /* ===== Button Sizes ===== */
  .btn-sm {
    padding: var(--space-1) var(--space-3);
    font-size: var(--fs-sm);
  }
  
  .btn {
    /* רגיל - ברירת מחדל */
    padding: var(--space-2) var(--space-4);
    font-size: var(--fs-base);
  }
  
  .btn-lg {
    padding: var(--space-3) var(--space-6);
    font-size: var(--fs-lg);
  }
  
  /* ===== Icon Button Sizes ===== */
  .btn-icon.btn-sm {
    width: 32px;
    height: 32px;
  }
  
  .btn-icon.btn-lg {
    width: 48px;
    height: 48px;
  }
  
  /* ===== Outline Buttons ===== */
  /* עיצוב מודרני מ-worklogs/add.html - כפתורים בתחתית הדף */
  .btn-outline-primary {
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md, 8px);
    font-weight: 500;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    text-decoration: none;
    background: transparent;
    border: 1px solid var(--primary-600, #2563eb);
    color: var(--primary-600, #2563eb);
  }
  
  .btn-outline-primary:hover {
    background: var(--primary-600, #2563eb);
    border-color: var(--primary-600, #2563eb);
    color: var(--text-inverse, #ffffff);
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  }
  
  .btn-outline-primary:active {
    background: var(--primary-700, #1d4ed8);
    border-color: var(--primary-700, #1d4ed8);
    transform: translateY(0);
  }
  
  .btn-outline-primary:focus-visible {
    outline: 2px solid var(--primary-500, #3b82f6);
    outline-offset: 2px;
  }
  
  .btn-outline-secondary {
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md, 8px);
    font-weight: 500;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    text-decoration: none;
    background: transparent;
    color: var(--text-primary, #1f2937);
    border: 1px solid var(--border-primary, #dee2e6);
    box-shadow: none;
  }
  
  .btn-outline-secondary:hover {
    background: var(--bg-secondary, #f8f9fa);
    border-color: var(--primary-500, #3b82f6);
    color: var(--primary-600, #2563eb);
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  
  .btn-outline-secondary:active {
    background: var(--bg-secondary, #f8f9fa);
    border-color: var(--primary-600, #2563eb);
    color: var(--primary-700, #1d4ed8);
    transform: translateY(0);
  }
  
  .btn-outline-secondary:focus-visible {
    outline: 2px solid var(--primary-500, #3b82f6);
    outline-offset: 2px;
  }
  
  .btn-outline-danger {
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md, 8px);
    font-weight: 500;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    text-decoration: none;
    background: transparent;
    border: 1px solid var(--error-600, #dc2626);
    color: var(--error-600, #dc2626);
  }
  
  .btn-outline-danger:hover {
    background: var(--error-600, #dc2626);
    border-color: var(--error-600, #dc2626);
    color: var(--text-inverse, #ffffff);
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  }
  
  .btn-outline-danger:active {
    background: var(--error-700, #b91c1c);
    border-color: var(--error-700, #b91c1c);
    transform: translateY(0);
  }
  
  .btn-outline-danger:focus-visible {
    outline: 2px solid var(--error-500, #ef4444);
    outline-offset: 2px;
  }
  
  .btn-outline-info {
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md, 8px);
    font-weight: 500;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    text-decoration: none;
    background: transparent;
    border: 1px solid var(--info-600, #0284c7);
    color: var(--info-600, #0284c7);
  }
  
  .btn-outline-info:hover {
    background: var(--info-600, #0284c7);
    border-color: var(--info-600, #0284c7);
    color: var(--text-inverse, #ffffff);
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  }
  
  .btn-outline-info:active {
    background: var(--info-700, #0369a1);
    border-color: var(--info-700, #0369a1);
    transform: translateY(0);
  }
  
  .btn-outline-info:focus-visible {
    outline: 2px solid var(--info-500, #0ea5e9);
    outline-offset: 2px;
  }
  
  .btn-outline-success {
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md, 8px);
    font-weight: 500;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    text-decoration: none;
    background: transparent;
    border: 1px solid var(--success-600, #059669);
    color: var(--success-600, #059669);
  }
  
  .btn-outline-success:hover {
    background: var(--success-600, #059669);
    border-color: var(--success-600, #059669);
    color: var(--text-inverse, #ffffff);
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  }
  
  .btn-outline-success:active {
    background: var(--success-700, #047857);
    border-color: var(--success-700, #047857);
    transform: translateY(0);
  }
  
  .btn-outline-success:focus-visible {
    outline: 2px solid var(--success-500, #10b981);
    outline-offset: 2px;
  }
  
  .btn-outline-warning {
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md, 8px);
    font-weight: 500;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    text-decoration: none;
    background: transparent;
    border: 1px solid var(--warning-600, #d97706);
    color: var(--warning-600, #d97706);
  }
  
  .btn-outline-warning:hover {
    background: var(--warning-600, #d97706);
    border-color: var(--warning-600, #d97706);
    color: var(--text-inverse, #ffffff);
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  }
  
  .btn-outline-warning:active {
    background: var(--warning-700, #b45309);
    border-color: var(--warning-700, #b45309);
    transform: translateY(0);
  }
  
  .btn-outline-warning:focus-visible {
    outline: 2px solid var(--warning-500, #f59e0b);
    outline-offset: 2px;
  }

  /* ============================================
     Action Buttons - כפתורי פעולה אחידים
     עיצוב בדיוק כמו page-header-action-btn premium-link-style מדף TEST
     ============================================ */
  
  /* בסיס לכפתורי פעולה - בדיוק כמו premium-link-style */
  .btn-action {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.6rem;
    border-radius: 10px;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
    color: rgba(255, 255, 255, 0.9);
    gap: 4px;
    height: auto;
    line-height: 1.4;
    direction: rtl;
    text-align: right;
    font-weight: 500;
    font-size: 0.7rem;
    position: relative;
    white-space: nowrap;
    flex-shrink: 0;
    background: transparent;
    border: 1px solid rgba(52, 152, 219, 0.3);
    cursor: pointer;
    transform: scale(1.05);
  }

  /* אפקט gradient שעובר על הכפתור ב-hover */
  /* הוסר - .btn-action::before גרם לאפקט רופף מרחוק */
  /* .btn-action::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent) !important;
    transition: left 0.5s ease !important;
  }

  .btn-action:hover::before {
    left: 100% !important;
  } */

  .btn-action:hover {
    background: rgba(52, 152, 219, 0.2);
    color: rgba(255, 255, 255, 1);
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0 6px 20px rgba(52, 152, 219, 0.3);
  }

  .btn-action i {
    font-size: 0.75rem;
    width: 16px;
    text-align: center;
  }

  /* כפתורי btn-action.btn-share בתוך page-header-actions - עיצוב מפורש */
  .page-header-actions .btn-action.btn-share,
  .page-header-actions a.btn-action.btn-share,
  .page-header-actions button.btn-action.btn-share {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.6rem;
    border-radius: 10px;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
    color: rgba(255, 255, 255, 0.9);
    gap: 4px;
    height: auto;
    line-height: 1.4;
    direction: rtl;
    text-align: right;
    font-weight: 500;
    font-size: 0.7rem;
    position: relative;
    white-space: nowrap;
    flex-shrink: 0;
    background: transparent;
    border: 1px solid rgba(52, 152, 219, 0.3);
    cursor: pointer;
    transform: scale(1.05);
    text-decoration: none;
  }

  .page-header-actions .btn-action.btn-share:hover,
  .page-header-actions a.btn-action.btn-share:hover,
  .page-header-actions button.btn-action.btn-share:hover {
    background: rgba(52, 152, 219, 0.2);
    color: rgba(255, 255, 255, 1);
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0 6px 20px rgba(52, 152, 219, 0.3);
  }

  .page-header-actions .btn-action.btn-share i,
  .page-header-actions a.btn-action.btn-share i,
  .page-header-actions button.btn-action.btn-share i {
    font-size: 0.75rem;
    width: 16px;
    text-align: center;
  }

  /* כפתורי btn-action.btn-success בתוך page-header-actions - עיצוב זהה ל-btn-share */
  .page-header-actions .btn-action.btn-success,
  .page-header-actions a.btn-action.btn-success,
  .page-header-actions button.btn-action.btn-success {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.6rem;
    border-radius: 10px;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
    color: rgba(255, 255, 255, 0.9);
    gap: 4px;
    height: auto;
    line-height: 1.4;
    direction: rtl;
    text-align: right;
    font-weight: 500;
    font-size: 0.7rem;
    position: relative;
    white-space: nowrap;
    flex-shrink: 0;
    background: transparent;
    border: 1px solid rgba(52, 152, 219, 0.3);
    cursor: pointer;
    transform: scale(1.05);
    text-decoration: none;
  }

  .page-header-actions .btn-action.btn-success:hover,
  .page-header-actions a.btn-action.btn-success:hover,
  .page-header-actions button.btn-action.btn-success:hover {
    background: rgba(52, 152, 219, 0.2);
    color: rgba(255, 255, 255, 1);
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0 6px 20px rgba(52, 152, 219, 0.3);
  }

  .page-header-actions .btn-action.btn-success i,
  .page-header-actions a.btn-action.btn-success i,
  .page-header-actions button.btn-action.btn-success i {
    font-size: 0.75rem;
    width: 16px;
    text-align: center;
  }

  /* כל הכפתורים - בדיוק כמו premium-link-style (רקע שקוף, border כחול) */
  /* העיצוב הבסיסי של .btn-action כבר מוגדר למעלה (שורות 804-855) */
  /* כל הכפתורים עם class .btn-action יראו בדיוק כמו כפתור "שלח" (btn-share) */

  /* ============================================
     page-header-action-btn - כפתורים בכותרת
     ============================================ */
  
  /* כפתורי page-header-action-btn - בדיוק כמו premium-link-style */
  .page-header-action-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.6rem;
    border-radius: 10px;
    transition: all 0.3s ease;
    color: rgba(255, 255, 255, 0.9);
    gap: 4px;
    height: auto;
    line-height: 1.4;
    direction: rtl;
    text-align: right;
    font-weight: 500;
    font-size: 0.7rem;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    flex-shrink: 0;
    background: transparent;
    border: 1px solid rgba(52, 152, 219, 0.3);
    cursor: pointer;
    text-decoration: none;
  }

  /* הוסר - .page-header-action-btn::before גרם לאפקט לא רצוי */

  .page-header-action-btn:hover {
    background: rgba(52, 152, 219, 0.2);
    color: rgba(255, 255, 255, 1);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(52, 152, 219, 0.3);
  }

  .page-header-action-btn i {
    font-size: 0.75rem;
    width: 16px;
    text-align: center;
  }

  /* ============================================
     Modern Buttons - כפתורים מודרניים
     עיצוב מ-worklogs/add.html
     ============================================ */
  
  /* כפתור ראשי מודרני */
  .btn-primary-modern,
  .btn-outline-secondary-modern {
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md, 8px);
    font-weight: 500;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    border: none;
    text-decoration: none;
  }
  
  .btn-primary-modern {
    background: var(--primary-600, #2563eb);
    color: var(--text-inverse, #ffffff);
  }
  
  .btn-primary-modern:hover {
    background: var(--primary-700, #1d4ed8);
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  }
  
  .btn-primary-modern:active {
    background: var(--primary-800, #1e40af);
    transform: translateY(0);
  }
  
  .btn-primary-modern:focus-visible {
    outline: 2px solid var(--primary-500, #3b82f6);
    outline-offset: 2px;
  }
  
  /* כפתור outline מודרני */
  .btn-outline-secondary-modern {
    background: transparent;
    color: var(--text-primary, #1f2937);
    border: 1px solid var(--border-primary, #dee2e6);
  }
  
  .btn-outline-secondary-modern:hover {
    background: var(--bg-secondary, #f8f9fa);
    border-color: var(--primary-500, #3b82f6);
    color: var(--primary-600, #2563eb);
  }
  
  .btn-outline-secondary-modern:active {
    background: var(--bg-secondary, #f8f9fa);
    border-color: var(--primary-600, #2563eb);
    color: var(--primary-700, #1d4ed8);
  }
  
  .btn-outline-secondary-modern:focus-visible {
    outline: 2px solid var(--primary-500, #3b82f6);
    outline-offset: 2px;
  }
  
  /* ============================================
     כפתורים ב-card-footer-custom - עיצוב אחיד
     ============================================ */
  
  /* דריסה של base button styles בתוך card-footer-custom */
  .card-footer-custom .btn,
  .card-footer-custom button,
  .form-card .card-footer-custom .btn,
  .form-card .card-footer-custom button {
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md, 8px);
    font-weight: 500;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: auto;
    min-width: auto;
  }
  
  /* כפתורים בתחתית טפסים - עיצוב מודרני מ-worklogs/add.html */
  /* דריסה של base button styles */
  .card-footer-custom .btn.btn-primary,
  .card-footer-custom button.btn.btn-primary,
  .form-card .card-footer-custom .btn.btn-primary,
  .form-card .card-footer-custom button.btn.btn-primary,
  .card-footer-custom .btn-primary,
  .card-footer-custom button.btn-primary,
  .form-card .card-footer-custom .btn-primary,
  .form-card .card-footer-custom button.btn-primary {
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md, 8px);
    font-weight: 500;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    border: none;
    text-decoration: none;
    background: var(--primary-600, #2563eb);
    color: var(--text-inverse, #ffffff);
    min-height: auto;
    min-width: auto;
  }
  
  .card-footer-custom .btn.btn-primary:hover,
  .card-footer-custom button.btn.btn-primary:hover,
  .form-card .card-footer-custom .btn.btn-primary:hover,
  .form-card .card-footer-custom button.btn.btn-primary:hover,
  .card-footer-custom .btn-primary:hover,
  .card-footer-custom button.btn-primary:hover,
  .form-card .card-footer-custom .btn-primary:hover,
  .form-card .card-footer-custom button.btn-primary:hover {
    background: var(--primary-700, #1d4ed8);
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  }
  
  .card-footer-custom .btn.btn-primary:active,
  .card-footer-custom button.btn.btn-primary:active,
  .form-card .card-footer-custom .btn.btn-primary:active,
  .form-card .card-footer-custom button.btn.btn-primary:active,
  .card-footer-custom .btn-primary:active,
  .card-footer-custom button.btn-primary:active,
  .form-card .card-footer-custom .btn-primary:active,
  .form-card .card-footer-custom button.btn-primary:active {
    background: var(--primary-800, #1e40af);
  }
  
  /* ===== תיקון כפתורים ב-employee-actions-body ===== */
  .employee-actions-body .page-header-action-btn.premium-link-style,
  .employee-actions-body .page-header-action-btn.premium-link-style.btn-action-item,
  .employee-actions-body a.page-header-action-btn.premium-link-style,
  .employee-actions-body button.page-header-action-btn.premium-link-style {
    padding: 0.875rem 1.25rem;
    min-height: 44px;
    height: auto;
    font-size: 0.95rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    line-height: 1.4;
    white-space: normal;
    flex-shrink: 1;
  }
  
  .employee-actions-body .page-header-action-btn.premium-link-style i,
  .employee-actions-body .page-header-action-btn.premium-link-style.btn-action-item i {
    font-size: 0.9rem;
    width: auto;
    min-width: 18px;
  }
    transform: translateY(0);
  }
  
  .card-footer-custom .btn.btn-outline-secondary,
  .card-footer-custom a.btn.btn-outline-secondary,
  .form-card .card-footer-custom .btn.btn-outline-secondary,
  .form-card .card-footer-custom a.btn.btn-outline-secondary,
  .card-footer-custom .btn-outline-secondary,
  .card-footer-custom a.btn-outline-secondary,
  .form-card .card-footer-custom .btn-outline-secondary,
  .form-card .card-footer-custom a.btn-outline-secondary {
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md, 8px);
    font-weight: 500;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    text-decoration: none;
    background: transparent;
    color: var(--text-primary, #1f2937);
    border: 1px solid var(--border-primary, #dee2e6);
    min-height: auto;
    min-width: auto;
  }
  
  .card-footer-custom .btn.btn-outline-secondary:hover,
  .card-footer-custom a.btn.btn-outline-secondary:hover,
  .form-card .card-footer-custom .btn.btn-outline-secondary:hover,
  .form-card .card-footer-custom a.btn.btn-outline-secondary:hover,
  .card-footer-custom .btn-outline-secondary:hover,
  .card-footer-custom a.btn-outline-secondary:hover,
  .form-card .card-footer-custom .btn-outline-secondary:hover,
  .form-card .card-footer-custom a.btn-outline-secondary:hover {
    background: var(--bg-secondary, #f8f9fa);
    border-color: var(--primary-500, #3b82f6);
    color: var(--primary-600, #2563eb);
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  
  .card-footer-custom .btn.btn-outline-secondary:active,
  .card-footer-custom a.btn.btn-outline-secondary:active,
  .form-card .card-footer-custom .btn.btn-outline-secondary:active,
  .form-card .card-footer-custom a.btn.btn-outline-secondary:active,
  .card-footer-custom .btn-outline-secondary:active,
  .card-footer-custom a.btn-outline-secondary:active,
  .form-card .card-footer-custom .btn-outline-secondary:active,
  .form-card .card-footer-custom a.btn-outline-secondary:active {
    background: var(--bg-secondary, #f8f9fa);
    border-color: var(--primary-600, #2563eb);
    color: var(--primary-700, #1d4ed8);
    transform: translateY(0);
  }
  
  .card-footer-custom .btn.btn-primary:focus-visible,
  .card-footer-custom button.btn.btn-primary:focus-visible,
  .form-card .card-footer-custom .btn.btn-primary:focus-visible,
  .form-card .card-footer-custom button.btn.btn-primary:focus-visible,
  .card-footer-custom .btn-primary:focus-visible,
  .card-footer-custom button.btn-primary:focus-visible,
  .form-card .card-footer-custom .btn-primary:focus-visible,
  .form-card .card-footer-custom button.btn-primary:focus-visible,
  .card-footer-custom .btn.btn-outline-secondary:focus-visible,
  .card-footer-custom a.btn.btn-outline-secondary:focus-visible,
  .form-card .card-footer-custom .btn.btn-outline-secondary:focus-visible,
  .form-card .card-footer-custom a.btn.btn-outline-secondary:focus-visible,
  .card-footer-custom .btn-outline-secondary:focus-visible,
  .card-footer-custom a.btn-outline-secondary:focus-visible,
  .form-card .card-footer-custom .btn-outline-secondary:focus-visible,
  .form-card .card-footer-custom a.btn-outline-secondary:focus-visible {
    outline: 2px solid var(--primary-500, #3b82f6);
    outline-offset: 2px;
  }

  /* Responsive - כפתורים מודרניים */
  @media (max-width: 768px) {
    .btn-primary-modern,
    .btn-outline-secondary-modern {
      width: 100%;
      justify-content: center;
    }
    
    /* Responsive - כפתורים גלובליים */
    .btn-primary,
    .btn-danger,
    .btn-success,
    .btn-warning,
    .btn-info,
    .btn-outline-primary,
    .btn-outline-secondary,
    .btn-outline-danger,
    .btn-outline-info,
    .btn-outline-success,
    .btn-outline-warning,
    .card-footer-custom .btn-primary,
    .card-footer-custom .btn-outline-secondary {
      width: 100%;
      justify-content: center;
    }
  }

}