/* ============================================
   Cards - כרטיסים אחידים
   תוכנית שידרוג עיצוב Enterprise מקיף
   ============================================
   
   קובץ מאוחד - 6 סוגי כרטיסים בסיסיים:
   1. Base Card (.card)
   2. KPI Card (.kpi-card)
   3. Info Card (.info-card)
   4. Stat Card (.stat-card)
   5. Feature Card (.feature-card)
   6. Dashboard Card (.dashboard-card)
   
   מבנה אחיד: header, body, footer
   
   תאריך יצירה: 2025-01-27
   גרסה: 1.0.0
   ============================================ */

@layer components {
  /* Card Header Color Variants */
  .card-header-primary {
    background: linear-gradient(to left, rgba(59, 130, 246, 0.3) 0%, rgba(59, 130, 246, 0.5) 30%, rgba(37, 99, 235, 0.7) 60%, rgba(37, 99, 235, 0.9) 85%, var(--primary-500) 100%) ;
    color: var(--text-inverse) ;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4) ;
    border: none ;
    padding: 1rem 1.25rem ;
    border-radius: 16px 16px 0 0 ;
    position: relative;
  }
  
  .card-header-success {
    background-color: var(--success-600);
    color: var(--text-inverse);
  }
  
  .card-header-warning {
    background-color: var(--warning-500);
    color: var(--text-main);
  }
  
  .card-header-info {
    background-color: var(--info-600);
    color: var(--text-inverse);
  }
  
  .card-header-error {
    background-color: var(--error-600);
    color: var(--text-inverse);
  }
  
  .card-header-secondary {
    background-color: var(--secondary-600);
    color: var(--text-inverse);
  }
  
  .card-header-secondary-900 {
    background-color: var(--secondary-900);
    color: var(--text-inverse);
  }
  
  .card-header-error {
    background-color: var(--error-600);
    color: var(--text-inverse);
  }
  
  /* Card Header with Gradient */
  .card-header-gradient-primary {
    background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%);
    color: var(--text-inverse);
  }
  /* ===== Base Card - עיצוב פרימיום ===== */
  /* נגישות: טקסט בהיר על רקע כהה - ניגודיות מינימלית 4.5:1 */
  .card {
    background: var(--bg-surface, var(--color-surface, #273245));
    color: var(--text-inverse, var(--text-main, #ffffff)); /* טקסט בהיר על רקע כהה */
    border-radius: 16px;
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1));
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    padding: var(--space-5);
    margin-bottom: var(--space-4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    width: 100%; /* ✅ גמיש - לא יוצר גלישה */
    max-width: 100%; /* ✅ גמיש - לא יוצר גלישה */
    box-sizing: border-box; /* ✅ כולל border ו-padding בחישוב */
  }
  
  /* Interactive Card - כרטיס אינטראקטיבי */
  .card.interactive-card {
    cursor: pointer;
  }
  
  .card.interactive-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
    transition: left 0.5s ease;
    z-index: 1;
    pointer-events: none;
  }
  
  .card.interactive-card:hover::before {
    left: 100%;
  }
  
  .card:hover,
  .card.interactive-card:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
    border-color: var(--primary-300, rgba(59, 130, 246, 0.3));
    transform: translateY(-4px);
  }
  
  .card-header {
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1));
  }

  /* חריגה ל-project-header-custom - עיצוב גלובלי לטפסים */
  .card-header.project-header-custom,
  .form-card .card-header.project-header-custom,
  .card.form-card .card-header.project-header-custom,
  .card-header.form-header-custom,
  .form-card .card-header.form-header-custom,
  .card.form-card .card-header.form-header-custom {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
  }
  
  .card-body {
    padding: 0;
  }
  
  .card-footer {
    padding-top: var(--space-3);
    margin-top: var(--space-3);
    border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1));
  }
  
  /* ===== Card Title & Text ===== */
  /* נגישות: טקסט בהיר על רקע כהה - ניגודיות מינימלית 4.5:1 */
  .card-title {
    font-size: var(--fs-lg);
    font-weight: var(--font-semibold);
    color: var(--text-inverse, var(--text-main, #ffffff)); /* טקסט בהיר על רקע כהה */
    margin: 0 0 var(--space-2) 0;
    line-height: var(--leading-tight);
  }
  
  .card-text {
    font-size: var(--fs-base);
    color: var(--text-secondary, rgba(255, 255, 255, 0.8)); /* טקסט בהיר על רקע כהה */
    margin: 0;
    line-height: var(--leading-normal);
  }
  
  /* ===== Form Card - עיצוב גלובלי לטפסים ===== */
  /* עיצוב אחיד לכל הטפסים - לפי מודול פרויקטים */
  /* דריסה מלאה של .card הכללי - רקע כהה תואם לעיצוב הקיים */
  .form-card,
  .card.form-card,
  body .form-card,
  body .card.form-card,
  .app .form-card,
  .app .card.form-card,
  main .form-card,
  main .card.form-card,
  #main .form-card,
  #main .card.form-card,
  .content-wrapper .form-card,
  .content-wrapper .card.form-card,
  .page-wrapper .form-card,
  .page-wrapper .card.form-card {
    background: var(--bg-surface, var(--card-bg, #273245)); /* רקע כהה תואם לעיצוב הקיים */
    color: var(--text-inverse, var(--text-main, #ffffff)); /* טקסט בהיר על רקע כהה */
    border-radius: 16px;
    box-shadow: var(--shadow-card, 0 6px 16px rgba(15, 23, 42, 0.08));
    overflow: hidden;
    border: none; /* הסרת גבול לבן */
  }
  
  /* ===== Responsive Design - רספונסיביות למובייל ===== */
  @media (max-width: 768px) {
    .card {
      padding: var(--space-4);
      margin-bottom: var(--space-3);
    }
    
    .kpi-card {
      padding: var(--space-4);
    }
  }
  
  /* ===== KPI Card ===== */
  /* עיצוב גלובלי לפי הקובץ הישן - רקע אפור/כהה עם gradient */
  /* עיצוב זה חל על כל ה-KPI cards בכל הדפים */
  .kpi-card {
    border-radius: var(--radius-card);
    /* רקע אפור/כהה קבוע - כמו בקובץ הישן */
    background: linear-gradient(135deg, rgba(44, 62, 80, 0.25) 0%, rgba(52, 73, 94, 0.25) 25%, rgba(44, 62, 80, 0.25) 50%, rgba(26, 37, 47, 0.25) 75%, rgba(44, 62, 80, 0.25) 100%);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1);
    padding: var(--spacing-4) var(--spacing-5);
    position: relative;
    overflow: hidden;
    overflow-x: visible; /* ✅ גמיש - לא חותך תוכן במובייל */
    overflow-y: hidden;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.3s ease;
    color: var(--text-inverse); /* טקסט בהיר על רקע כהה */
    opacity: 1;
    margin-bottom: var(--space-4);
    width: 100%;
    max-width: none;
    min-width: 0;
    box-sizing: border-box;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
  }
  
  /* אפקט רקע עגול בפינה */
  .kpi-card::after {
    content: "";
    position: absolute;
    inset-inline-end: -40px;
    inset-block-start: -40px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    opacity: 0.22;
    pointer-events: none;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.4), transparent 60%);
  }
  
  .kpi-card:hover,
  .kpi-card:focus {
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2);
    transform: translateY(-5px) scale(1.02);
    opacity: 1;
    transition: all 0.3s ease;
    /* אפקט hover - מעט יותר כהה מהרקע הקבוע */
    background: linear-gradient(135deg, rgba(44, 62, 80, 0.35) 0%, rgba(52, 73, 94, 0.35) 25%, rgba(44, 62, 80, 0.35) 50%, rgba(26, 37, 47, 0.35) 75%, rgba(44, 62, 80, 0.35) 100%);
    border-color: rgba(255, 255, 255, 0.25);
  }
  
  .kpi-card:focus {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
  }
  
  .kpi-card-header {
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-2);
  }
  
  .kpi-card-body {
    padding: 0;
  }
  
  .kpi-card-footer {
    padding-top: var(--space-2);
    margin-top: var(--space-2);
  }
  
  /* ===== KPI Card Elements - עיצוב משופר לפי הקובץ הישן ===== */
  /* Icon Wrapper */
  .kpi-icon-wrapper {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
  }
  
  .kpi-icon-wrapper i {
    font-size: 1.8rem;
    color: var(--text-inverse);
  }
  
  /* צבעי אייקונים לפי סוג כרטיס */
  .kpi-card.stat-card-primary .kpi-icon-wrapper,
  .stat-card-primary .kpi-icon-wrapper {
    background: linear-gradient(135deg, var(--primary-600), var(--primary-500));
    box-shadow: 0 8px 20px rgba(79, 70, 229, 0.3);
  }
  
  .kpi-card.stat-card-success .kpi-icon-wrapper,
  .stat-card-success .kpi-icon-wrapper {
    background: linear-gradient(135deg, var(--success-600), var(--success-500));
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3);
  }
  
  .kpi-card.stat-card-info .kpi-icon-wrapper,
  .stat-card-info .kpi-icon-wrapper {
    background: linear-gradient(135deg, var(--info-600), var(--info-500));
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
  }
  
  .kpi-card.stat-card-warning .kpi-icon-wrapper,
  .stat-card-warning .kpi-icon-wrapper {
    background: linear-gradient(135deg, var(--warning-600), var(--warning-500));
    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.3);
  }
  
  .kpi-card.stat-card-danger .kpi-icon-wrapper,
  .stat-card-danger .kpi-icon-wrapper {
    background: linear-gradient(135deg, var(--error-600), var(--error-500));
    box-shadow: 0 8px 20px rgba(239, 68, 68, 0.3);
  }
  
  /* Label - טקסט בהיר על רקע כהה */
  .kpi-card .kpi-label {
    font-size: 0.85rem;
    color: var(--text-inverse);
    font-weight: 500;
    margin-bottom: 0.5rem;
    text-align: right;
    direction: rtl;
    width: 100%;
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    overflow: hidden;
    word-break: break-word;
  }
  
  /* Value - טקסט בהיר על רקע כהה */
  .kpi-card .kpi-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-inverse);
    margin-bottom: 0.25rem;
    line-height: 1.2;
    text-align: right;
    direction: rtl;
    width: 100%;
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    overflow: hidden;
    overflow-x: visible; /* ✅ גמיש - לא חותך תוכן במובייל */
    overflow-y: hidden;
    word-break: break-word;
    white-space: normal; /* ✅ גמיש - טקסט יכול להישבר במובייל */
  }
  
  /* Subtitle - טקסט בהיר על רקע כהה */
  .kpi-card .kpi-subtitle {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    text-align: right;
    direction: rtl;
    margin-top: 0.25rem;
    opacity: 0.9;
    width: 100%;
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    overflow: hidden;
    word-break: break-word;
  }
  
  /* אפקט hover על אייקון */
  .kpi-card:hover .kpi-icon-wrapper,
  .stat-card:hover .kpi-icon-wrapper {
    transform: scale(1.05);
    transition: all 0.3s ease;
  }
  
  /* ===== Info Card ===== */
  /* נגישות: טקסט בהיר על רקע כהה - ניגודיות מינימלית 4.5:1 */
  .info-card {
    background: var(--bg-surface, var(--color-surface, #273245));
    color: var(--text-inverse, var(--text-main, #ffffff)); /* טקסט בהיר על רקע כהה */
    border-radius: 16px;
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1));
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  
  .info-card.interactive-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
    transition: left 0.5s ease;
    z-index: 1;
    pointer-events: none;
  }
  
  .info-card.interactive-card:hover::before {
    left: 100%;
  }
  
  .info-card:hover,
  .info-card.interactive-card:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
    border-color: var(--primary-300, rgba(59, 130, 246, 0.3));
    transform: translateY(-4px);
  }
  
  .info-card-icon {
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--info-500), var(--info-700));
    padding: 1.5rem;
    border-radius: 16px;
    color: white;
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .info-card-content {
    flex: 1;
  }
  
  .info-card-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-inverse);
    margin: 0 0 0.5rem 0;
  }
  
  .info-card-text {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.6;
  }
  
  .info-card-header {
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-2);
  }
  
  .info-card-body {
    padding: 0;
  }
  
  .info-card-footer {
    padding-top: var(--space-2);
    margin-top: var(--space-2);
  }
  
  /* ===== Stat Card ===== */
  /* עיצוב גלובלי לפי הקובץ הישן - רקע אפור/כהה עם gradient */
  /* עיצוב זה חל על כל ה-stat cards בכל הדפים */
  /* תיקון: selector ספציפי יותר כדי לא להיות מושפע מ-.card הכללי */
  article.stat-card,
  .stats-grid .stat-card,
  .stat-card:not(.card) {
    border-radius: var(--radius-card);
    /* רקע אפור/כהה קבוע - כמו בקובץ הישן */
    background: linear-gradient(135deg, rgba(44, 62, 80, 0.25) 0%, rgba(52, 73, 94, 0.25) 25%, rgba(44, 62, 80, 0.25) 50%, rgba(26, 37, 47, 0.25) 75%, rgba(44, 62, 80, 0.25) 100%);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1);
    padding: var(--space-5);
    position: relative;
    overflow: hidden;
    overflow-x: visible; /* ✅ גמיש - לא חותך תוכן במובייל */
    overflow-y: hidden;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.3s ease;
    color: var(--text-inverse); /* טקסט בהיר על רקע כהה */
    text-align: center;
    opacity: 1;
    margin-bottom: var(--space-4);
    width: 100%;
    max-width: none;
    min-width: 0;
    box-sizing: border-box;
    flex: 1 1 auto;
    min-height: auto;
    height: auto;
    /* הוסר - transform גרם לעיוות בעיצוב */
    transform: none;
    transform-origin: center center;
  }
  
  /* אפקט רקע עגול בפינה */
  .stat-card::after {
    content: "";
    position: absolute;
    inset-inline-end: -40px;
    inset-block-start: -40px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    opacity: 0.22;
    pointer-events: none;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.4), transparent 60%);
  }
  
  /* תיקון: selector ספציפי יותר ל-hover */
  article.stat-card:hover,
  article.stat-card:focus,
  .stats-grid .stat-card:hover,
  .stats-grid .stat-card:focus,
  .stat-card:not(.card):hover,
  .stat-card:not(.card):focus {
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2);
    transform: translateY(-5px) scale(1.02);
    opacity: 1;
    transition: all 0.3s ease;
    /* אפקט hover - מעט יותר כהה מהרקע הקבוע */
    background: linear-gradient(135deg, rgba(44, 62, 80, 0.35) 0%, rgba(52, 73, 94, 0.35) 25%, rgba(44, 62, 80, 0.35) 50%, rgba(26, 37, 47, 0.35) 75%, rgba(44, 62, 80, 0.35) 100%);
    border-color: rgba(255, 255, 255, 0.25);
  }
  
  /* תיקון: selector ספציפי יותר ל-focus */
  article.stat-card:focus,
  .stats-grid .stat-card:focus,
  .stat-card:not(.card):focus {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
  }
  
  /* Stat Value & Label - מניעת overflow */
  .stat-card .stat-value,
  .stat-value {
    width: 100%;
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    overflow: hidden;
    word-break: break-word;
  }
  
  .stat-card .stat-label,
  .stat-label {
    width: 100%;
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    overflow: hidden;
    word-break: break-word;
  }
  
  /* שילוב של kpi-card ו-stat-card - עיצוב משותף */
  .kpi-card.stat-card {
    transition: all 0.3s ease;
    opacity: 1;
  }
  
  .kpi-card.stat-card:hover,
  .kpi-card.stat-card:focus {
    transform: translateY(-5px) scale(1.02);
    opacity: 1;
    transition: all 0.3s ease;
    background: linear-gradient(135deg, rgba(44, 62, 80, 0.35) 0%, rgba(52, 73, 94, 0.35) 25%, rgba(44, 62, 80, 0.35) 50%, rgba(26, 37, 47, 0.35) 75%, rgba(44, 62, 80, 0.35) 100%);
    border-color: rgba(255, 255, 255, 0.25);
  }
  
  .stat-card-header {
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-2);
  }
  
  .stat-card-body {
    padding: 0;
  }
  
  .stat-card-footer {
    padding-top: var(--space-2);
    margin-top: var(--space-2);
  }
  
  /* ===== Stat Card Internal Structure - מבנה פנימי של Stat Card ===== */
  /* תיקון: הוספת הגדרות למבנה הפנימי של KPIs ב-worklogs/list */
  /* selector ספציפי יותר כדי לא להיות מושפע מ-overrides אחרים */
  article.stat-card .stat-card-inner,
  .stats-grid .stat-card .stat-card-inner,
  .stat-card:not(.card) .stat-card-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: 100%;
    height: 100%;
  }
  
  article.stat-card .stat-card-top,
  .stats-grid .stat-card .stat-card-top,
  .stat-card:not(.card) .stat-card-top {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
    width: 100%;
  }
  
  article.stat-card .stat-icon,
  .stats-grid .stat-card .stat-icon,
  .stat-card:not(.card) .stat-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--text-inverse);
    flex-shrink: 0;
    transition: all 0.3s ease;
  }
  
  article.stat-card-primary .stat-icon,
  .stats-grid .stat-card-primary .stat-icon,
  .stat-card-primary:not(.card) .stat-icon {
    background: linear-gradient(135deg, var(--primary-600), var(--primary-500));
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
  }
  
  article.stat-card-success .stat-icon,
  .stats-grid .stat-card-success .stat-icon,
  .stat-card-success:not(.card) .stat-icon {
    background: linear-gradient(135deg, var(--success-600), var(--success-500));
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
  }
  
  article.stat-card-warning .stat-icon,
  .stats-grid .stat-card-warning .stat-icon,
  .stat-card-warning:not(.card) .stat-icon {
    background: linear-gradient(135deg, var(--warning-600), var(--warning-500));
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
  }
  
  article.stat-card-success-alt .stat-icon,
  .stats-grid .stat-card-success-alt .stat-icon,
  .stat-card-success-alt:not(.card) .stat-icon {
    background: linear-gradient(135deg, var(--info-500), var(--info-400));
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
  }
  
  article.stat-card .stat-meta,
  .stats-grid .stat-card .stat-meta,
  .stat-card:not(.card) .stat-meta {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    text-align: right;
    direction: rtl;
  }
  
  article.stat-card .stat-label,
  .stats-grid .stat-card .stat-label,
  .stat-card:not(.card) .stat-label {
    font-size: var(--fs-sm);
    font-weight: var(--font-semibold);
    color: var(--text-inverse);
    margin-bottom: var(--space-1);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    position: relative;
  }
  
  article.stat-card .stat-caption,
  .stats-grid .stat-card .stat-caption,
  .stat-card:not(.card) .stat-caption {
    font-size: var(--fs-xs);
    color: rgba(255, 255, 255, 0.7);
    opacity: 0.9;
  }
  
  article.stat-card .stat-value-grid,
  .stats-grid .stat-card .stat-value-grid,
  .stat-card:not(.card) .stat-value-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    width: 100%;
  }
  
  article.stat-card .stat-value,
  .stats-grid .stat-card .stat-value,
  .stat-card:not(.card) .stat-value {
    font-size: 2rem;
    font-weight: var(--font-bold);
    color: var(--text-inverse);
    line-height: 1.2;
    text-align: right;
    direction: rtl;
  }
  
  /* תיקון: הסרת transform שמשבש את העיצוב - selector ספציפי יותר */
  article.stat-card,
  .stats-grid .stat-card,
  .stat-card:not(.card) {
    transform: none;
    width: 100%;
    padding: var(--space-5);
  }
  
  article.stat-card:hover,
  article.stat-card:focus,
  .stats-grid .stat-card:hover,
  .stats-grid .stat-card:focus,
  .stat-card:not(.card):hover,
  .stat-card:not(.card):focus {
    transform: translateY(-5px) scale(1.02);
  }
  
  /* ===== Feature Card ===== */
  /* נגישות: טקסט בהיר על רקע כהה - ניגודיות מינימלית 4.5:1 */
  .feature-card {
    background: var(--bg-surface, var(--color-surface, #273245));
    color: var(--text-inverse, var(--text-main, #ffffff)); /* טקסט בהיר על רקע כהה */
    border-radius: 16px;
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1));
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    padding: var(--space-5);
    margin-bottom: var(--space-4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    text-align: center;
  }
  
  .feature-card.interactive-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
    transition: left 0.5s ease;
    z-index: 1;
    pointer-events: none;
  }
  
  .feature-card.interactive-card:hover::before {
    left: 100%;
  }
  
  .feature-card:hover,
  .feature-card.interactive-card:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
    border-color: var(--primary-300, rgba(59, 130, 246, 0.3));
    transform: translateY(-4px);
  }
  
  .feature-card-icon {
    background: linear-gradient(135deg, var(--primary-500), var(--primary-700));
    padding: 1.5rem;
    border-radius: 16px;
    color: white;
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem auto;
    width: fit-content;
  }
  
  .feature-card-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-inverse);
    margin: 0 0 0.5rem 0;
  }
  
  .feature-card-text {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin: 0 0 1rem 0;
    line-height: 1.6;
  }
  
  .feature-card-header {
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }
  
  .feature-card-body {
    padding: 0;
  }
  
  .feature-card-footer {
    padding-top: var(--space-3);
    margin-top: var(--space-3);
    /* הסרת border כבד - החלפה במרווח */
  }
  
  /* ===== Dashboard Card ===== */
  /* נגישות: טקסט בהיר על רקע כהה - ניגודיות מינימלית 4.5:1 */
  .dashboard-card {
    background: var(--bg-surface, var(--color-surface, #273245));
    color: var(--text-inverse, var(--text-main, #ffffff)); /* טקסט בהיר על רקע כהה */
    border-radius: 16px;
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1));
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
  }
  
  .dashboard-card.interactive-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
    transition: left 0.5s ease;
    z-index: 1;
    pointer-events: none;
  }
  
  .dashboard-card.interactive-card:hover::before {
    left: 100%;
  }
  
  .dashboard-card:hover,
  .dashboard-card.interactive-card:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
    border-color: var(--primary-300, rgba(59, 130, 246, 0.3));
    transform: translateY(-4px);
  }
  
  .dashboard-card-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-inverse);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  
  .dashboard-card-body {
    padding: 0;
    color: var(--text-secondary);
    font-size: 0.9375rem;
    line-height: 1.6;
  }
  
  /* ===== Premium Project Card - כרטיס פרויקט פרימיום ===== */
  .premium-project-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid var(--border-subtle);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  }
  
  .premium-project-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.03), transparent);
    transition: left 0.6s ease;
    z-index: 1;
    pointer-events: none;
  }
  
  .premium-project-card:hover::before {
    left: 100%;
  }
  
  .premium-project-card:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
  }
  
  .premium-project-card:hover > div:first-child {
    background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%);
  }
  
  .dashboard-card-header {
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-3);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .dashboard-card-body {
    padding: 0;
  }
  
  .dashboard-card-footer {
    padding-top: var(--space-3);
    margin-top: var(--space-3);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
  }
  
  /* ===== Overflow Rules for Cards ===== */
  /* card-header עם d-flex צריכים overflow: visible כדי למנוע סרגל גלילה מיותר */
  .card-header.d-flex,
  .card-header[class*="d-flex"],
  .card-header.flex-column,
  .card-header.flex-row,
  .card-header[class*="flex-"],
  .card-header .d-flex,
  .card-header [class*="d-flex"] {
    overflow-x: visible;
    overflow-y: visible;
    max-width: none;
  }
  
  /* וידוא שכל ה-cards לא יוצרים גלישה */
  .card,
  .kpi-card,
  .stat-card,
  .info-card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  
  /* תיקון: הסרת סרגל גלילה מ-kpi-value */
  .kpi-value,
  .stat-value,
  .projects-page .kpi-value,
  .project-view-wrapper .kpi-value,
  [class*="projects"] .kpi-value {
    overflow-x: hidden;
    overflow-y: hidden;
    overflow: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  
  .kpi-value::-webkit-scrollbar,
  .stat-value::-webkit-scrollbar,
  .projects-page .kpi-value::-webkit-scrollbar,
  .project-view-wrapper .kpi-value::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
  
  /* Override לכל ה-parents שלא יחסמו את הגלילה */
  .card .card-body,
  .card-body {
    overflow-x: visible;
    overflow-y: visible;
  }

  /* ===== KPI/Stat Card Enhancements (מאוחד מ-unified-kpi.css ו-kpi-v2.css) ===== */
  
  /* פס עליון לכרטיסים */
  .stats-card::before,
  .gradient-card::before,
  .kpi-card::before,
  .stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    height: 3px;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }

  /* אייקונים בכרטיסי סטטיסטיקה */
  /* נגישות: טקסט בהיר על רקע כהה - ניגודיות מינימלית 4.5:1 */
  .stat-card .stat-icon,
  .stat-card .stat-header .stat-icon {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--text-inverse); /* טקסט בהיר על רקע כהה */
    margin: 0 auto var(--space-4) auto;
    flex-shrink: 0;
    position: relative;
    box-shadow: var(--shadow);
    transition: all var(--transition-base);
    font-weight: var(--font-semibold);
  }

  .stat-card:hover .stat-icon,
  .stat-card:hover .stat-header .stat-icon {
    transform: translateY(-2px) scale(1.05);
    box-shadow: var(--shadow-md);
  }

  .stat-card .stat-header {
    margin-bottom: var(--space-3);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* אינדיקטור מגמה */
  /* נגישות: טקסט בהיר על רקע כהה - ניגודיות מינימלית 4.5:1 */
  .stat-card .stat-trend-up {
    background: var(--accent-success);
    color: var(--text-inverse); /* טקסט בהיר על רקע כהה */
  }

  .stat-card .stat-trend-down {
    background: var(--accent-danger);
    color: var(--text-inverse); /* טקסט בהיר על רקע כהה */
  }

  .stat-card .stat-trend {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    font-size: var(--fs-xs);
    font-weight: var(--font-medium);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    margin-top: var(--space-2);
    width: fit-content;
    margin-inline-start: auto;
    margin-inline-end: auto;
  }

  /* צבעים לפי סוג - פס עליון */
  .stats-primary::before,
  .gradient-card-1::before,
  .kpi-primary::before,
  .stat-card-primary::before,
  .kpi-card.stat-card-primary::before {
    background: linear-gradient(90deg, var(--primary-400), var(--primary-600));
  }

  .stats-success::before,
  .gradient-card-2::before,
  .kpi-success::before,
  .stat-card-success::before,
  .kpi-card.stat-card-success::before {
    background: linear-gradient(90deg, var(--accent-success), var(--success-600));
  }

  .stats-warning::before,
  .gradient-card-3::before,
  .kpi-warning::before,
  .stat-card-warning::before {
    background: linear-gradient(90deg, var(--accent-warning), var(--warning-600));
  }

  .stats-info::before,
  .gradient-card-4::before,
  .kpi-info::before,
  .stat-card-info::before {
    background: linear-gradient(90deg, var(--accent-info), var(--info-600));
  }

  /* אייקונים - צבעים לפי סוג */
  .stat-card-primary .stat-icon,
  .stat-card-primary .stat-header .stat-icon {
    background: linear-gradient(135deg, var(--primary-600), var(--primary-700), var(--primary-800));
    box-shadow: var(--shadow-md);
  }

  .stat-card-primary:hover .stat-icon,
  .stat-card-primary:hover .stat-header .stat-icon {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px) scale(1.05);
  }

  .stat-card-success .stat-icon,
  .stat-card-success .stat-header .stat-icon {
    background: linear-gradient(135deg, var(--accent-success), var(--success-600), var(--success-700));
    box-shadow: var(--shadow-md);
  }

  .stat-card-success:hover .stat-icon,
  .stat-card-success:hover .stat-header .stat-icon {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px) scale(1.05);
  }

  .stat-card-info .stat-icon,
  .stat-card-info .stat-header .stat-icon {
    background: linear-gradient(135deg, var(--accent-info), var(--info-600), var(--info-700));
    box-shadow: var(--shadow-md);
  }

  .stat-card-info:hover .stat-icon,
  .stat-card-info:hover .stat-header .stat-icon {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px) scale(1.05);
  }

  .stat-card-warning .stat-icon,
  .stat-card-warning .stat-header .stat-icon {
    background: linear-gradient(135deg, var(--accent-warning), var(--warning-600), var(--warning-700));
    box-shadow: var(--shadow-md);
  }

  .stat-card-warning:hover .stat-icon,
  .stat-card-warning:hover .stat-header .stat-icon {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px) scale(1.05);
  }

  .stat-card-danger .stat-icon,
  .stat-card-danger .stat-header .stat-icon {
    background: linear-gradient(135deg, var(--accent-danger), var(--error-500), var(--error-600));
    box-shadow: var(--shadow-md);
  }

  .stat-card-danger:hover .stat-icon,
  .stat-card-danger:hover .stat-header .stat-icon {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px) scale(1.05);
  }

  /* אייקונים כלליים */
  /* נגישות: טקסט בהיר על רקע כהה - ניגודיות מינימלית 4.5:1 */
  .stats-icon,
  .card-icon,
  .kpi-icon,
  .stat-icon {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-2xl);
    color: var(--text-inverse); /* טקסט בהיר על רקע כהה */
    margin-bottom: var(--space-3);
    margin-inline-start: 0;
    margin-inline-end: auto;
  }

  .stats-primary .stats-icon,
  .gradient-card-1 .card-icon,
  .kpi-primary .kpi-icon {
    background: linear-gradient(135deg, var(--primary-400), var(--primary-600));
  }

  .stats-success .stats-icon,
  .gradient-card-2 .card-icon,
  .kpi-success .kpi-icon {
    background: linear-gradient(135deg, var(--accent-success), var(--success-600));
  }

  .stats-warning .stats-icon,
  .gradient-card-3 .card-icon,
  .kpi-warning .kpi-icon {
    background: linear-gradient(135deg, var(--accent-warning), var(--warning-600));
  }

  .stats-info .stats-icon,
  .gradient-card-4 .card-icon,
  .kpi-info .kpi-icon {
    background: linear-gradient(135deg, var(--accent-info), var(--info-600));
  }

  /* Responsive */
  @media (max-width: 768px) {
    .stats-card,
    .gradient-card,
    .kpi-card,
    .stat-card {
      padding: calc(var(--space-4) * 0.9375);
    }

    .stats-number,
    .card-number,
    .kpi-value,
    .stat-value {
      font-size: var(--text-2xl);
    }

    .stats-label,
    .card-label,
    .kpi-label,
    .stat-label {
      font-size: var(--fs-xs);
    }

    .stats-icon,
    .card-icon,
    .kpi-icon,
    .stat-icon {
      width: 48px;
      height: 48px;
      font-size: calc(var(--text-xl) * 0.916);
      border-radius: var(--radius-lg);
    }
  }

  @media (max-width: 480px) {
    .stats-card,
    .gradient-card,
    .kpi-card,
    .stat-card {
      padding: var(--space-3);
    }

    .stats-number,
    .card-number,
    .kpi-value,
    .stat-value {
      font-size: var(--text-xl);
    }

    .stats-label,
    .card-label,
    .kpi-label,
    .stat-label {
      font-size: calc(var(--fs-xs) * 0.916);
    }

    .stats-icon,
    .card-icon,
    .kpi-icon,
    .stat-icon {
      width: 36px;
      height: 36px;
      font-size: var(--text-lg);
    }
  }
}