/* ============================================
   Projects Module Styles - Enhanced
   ============================================
   עיצוב ספציפי למודול Projects
   מעודכן לשימוש ב-Enhanced Design System
   - שימוש ב-CSS Variables (tokens)
   - תמיכה ב-Dark Mode
   - תמיכה ב-RTL מתקדמת
   ============================================ */

/* ===== KPI Cards ===== */
/* הוסר - KPIs מעוצבים ב-unified-kpi.css ו-kpi-v2.css גלובלית */

@layer modules {
  /* ============================================
     Project View – פרויקט: דף צפייה
     ============================================ */

  /* מעטפת כללית */
  .project-view-wrapper {
    padding-bottom: var(--spacing-8);
    background: var(--bg-secondary);
    max-width: var(--container);
    margin: 0 auto;
    margin-top: 1.5rem;
    padding-top: 0;
    padding: 0 var(--spacing-4) var(--spacing-8);
  }

  /* ===== HEADER – משתמש בעיצוב הגלובלי מ-forms.css ===== */
  /* כל העיצובים של .project-header נמצאים ב-components/forms.css (.contractor-header-custom / .form-header-custom) */

  .badge-circle-icon {
    font-size: var(--text-xs);
  }

  /* כפתור שיתוף במייל */
  .share-email-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--spacing-8);
    height: var(--spacing-8);
    padding: 0;
    border-radius: var(--radius-full);
  }
  
  /* תיקון: כפתור שיתוף במייל בכותרת גלובלית - ללא הגבלת גודל */
  .page-header-actions .share-email-btn,
  .page-header-action-btn.premium-link-style.share-email-btn {
    width: auto;
    height: auto;
    min-width: auto;
    min-height: auto;
    padding: 0.5rem 0.75rem;
    border-radius: 10px;
    gap: 0.4rem;
  }
  
  .page-header-actions .share-email-btn span,
  .page-header-action-btn.premium-link-style.share-email-btn span {
    display: inline-block;
    white-space: nowrap;
  }

  /* ניווט לרשימה / פרויקטים קודמים/הבאים */
  .navigation-buttons .btn {
    border-radius: var(--radius-full);
  }


  /* ===== תיבת הסבר על הדף ===== */
  /* ===== Info Boxes ===== */
  /* הוסר - info boxes מעוצבים גלובלית */

  /* ===== KPI Cards ===== */
  /* הוסר - KPIs מעוצבים ב-unified-kpi.css ו-kpi-v2.css גלובלית */

  /* אייקון עזרה קטן */
  .kpi-help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--spacing-4);
    height: var(--spacing-4);
    border-radius: var(--radius-full);
    background: var(--border-primary);
    color: var(--text-secondary);
    font-size: var(--text-xs);
    cursor: default;
    margin-inline-start: var(--space-1);
  }

  /* Tooltip מותאם KPI */
  .kpi-tooltip {
    position: absolute;
    z-index: 9999;
    background: var(--text-primary);
    color: var(--text-inverse);
    padding: var(--space-2) var(--spacing-1);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    max-width: calc(var(--spacing-24) * 2.7);
    line-height: var(--leading-normal);
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
  }

  .kpi-tooltip.show {
    opacity: 1;
    transform: translateY(0);
  }

  /* ===== טאבים ===== */
  /* .section-explanation - הועבר ל-components/forms.css גלובלית */

  /* פס הטאבים - משתמש בעיצוב הגלובלי מ-forms.css */
  /* הערה: .project-tabs משתמש בעיצוב הגלובלי מ-forms.css (.nav-tabs-custom) */
  /* כל העיצובים הוסרו - משתמשים בעיצוב הגלובלי */

  /* ===== כותרות פנימיות - משתמש בעיצוב הגלובלי מ-forms.css ===== */
  /* כל העיצובים של .section-title נמצאים ב-components/forms.css */

  /* קופסת מידע שדה-ערך */
  /* ===== Info Boxes ===== */
  /* הוסר - info boxes מעוצבים גלובלית */

  /* ===== תיקיות מסמכים בפרויקט ===== */
  .folder-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-1);
    padding: 0.7rem 0.4rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-primary);
    background: var(--card-bg);
    cursor: pointer;
    transition: var(--transition-base);
    text-align: center;
  }

  .folder-item i {
    font-size: 1.5rem;
  }

  .folder-item span {
    font-size: 0.82rem;
    color: var(--text-primary);
  }

  .folder-item:hover {
    transform: translateY(-2px);
    border-color: var(--primary-200);
    box-shadow: var(--shadow-hover);
    background: var(--bg-muted);
  }

  .folder-item-disabled {
    cursor: default;
    opacity: 0.5;
    background: var(--bg-muted);
  }

  /* ===== טבלאות – קבלנים, עובדים, יומני עבודה, מסמכים ===== */
  /* ===== Tables ===== */
  /* הוסר - tables מעוצבים ב-tables.css גלובלית */

  /* רוחב עמודות ליישור טבלאות */
  .col-wide {
    min-width: calc(var(--spacing-24) + var(--spacing-8));
  }

  .col-narrow {
    min-width: calc(var(--spacing-24) + var(--spacing-6));
  }

  .col-status {
    min-width: calc(var(--spacing-24) + var(--spacing-4));
  }

  .col-actions {
    min-width: calc(var(--spacing-24) - var(--spacing-2));
  }

  /* כפתורי פעולות בטבלה */
  .table .btn-group .btn {
    border-radius: var(--radius-full);
    padding-inline: var(--space-2);
    padding-block: var(--space-1);
    font-size: var(--text-sm);
  }

  .table .btn-group .btn i {
    font-size: 0.85rem;
  }

  /* שורת "אין נתונים" יפה יותר */
  .table tbody tr td.text-center.text-muted {
    font-size: 0.9rem;
  }

  /* ===== כרטיסי פיננסי ===== */
  .financial-card {
    background: var(--card-bg);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-primary);
    box-shadow: var(--shadow-soft);
  }

  .financial-card h6 {
    font-size: 0.92rem;
  }

  .financial-card .form-label {
    font-size: 0.78rem;
  }

  .financial-card h4 {
    font-size: 1.15rem;
  }

  /* progress בר פיננסי */
  .progress.progress-lg {
    height: var(--spacing-4);
    border-radius: var(--radius-pill);
    background: var(--border-primary);
  }

  .progress.progress-lg .progress-bar {
    font-size: 0.75rem;
  }

  /* ===== מודל PDF מותאם ===== */
  /* הערה: .custom-modal-overlay, .custom-modal, .resize-handle, .pdf-toolbar מוגדרים כבר ב-components/modals.css - הוסרו כפילויות */
  /* הערה: .pdf-container נשמר כי זה ספציפי למודול */
  .pdf-container {
    position: relative;
    flex: 1;
    background: var(--text-primary);
  }

  .pdf-container iframe {
    width: 100%;
    height: 100%;
    border: none;
  }

  /* ===== מודאל שיתוף במייל ===== */
  #emailShareModal .modal-content {
    border-radius: var(--radius-xl);
  }

  #emailShareModal .modal-header {
    border-bottom: 1px solid var(--border-primary);
  }

  #emailShareModal .modal-title i {
    color: var(--primary-500);
  }


  /* ===== רספונסיביות ===== */
  @media (max-width: 991.98px) {
    .project-header {
      padding: 1.2rem;
    }

    .project-header h1 {
      font-size: 1.4rem;
    }

    /* הוסר - kpi-card מעוצב גלובלית */

    .project-tabs {
      border-radius: var(--radius-lg);
      overflow-x: auto;
      white-space: nowrap;
    }

    .project-tabs .nav-link {
      padding-inline: 0.7rem;
      font-size: 0.82rem;
    }

    .custom-modal {
      width: 94vw;
      height: 78vh;
    }
  }

  @media (max-width: 575.98px) {
    /* ===== Info Boxes ===== */
    /* הוסר - info boxes מעוצבים גלובלית */

    /* .table thead - הועבר ל-tables.css */
    /* .table tbody td - הועבר ל-tables.css */
    /* כאן רק שינויים ספציפיים למודול אם נדרש */
  }

  /* ===== End of view.html styles ===== */

  /* ===== Edit/Add Forms Styles ===== */
  /* הערה: :root ו-body הוסרו - משתמשים בהגדרות הגלובליות */

  /* הוסר - .page-wrapper מעוצב ב-components/forms.css גלובלית */

  .project-card {
    background: var(--card-bg);
    border-radius: var(--card-radius);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(148, 163, 184, 0.15);
    max-width: calc(var(--spacing-24) * 12.5);
    width: 100%;
    overflow: hidden;
  }

  .card-header-custom {
    background: linear-gradient(135deg, var(--primary-500), var(--info-400));
    color: var(--text-inverse);
    padding: 1.75rem 1.75rem 1.25rem;
  }

  .card-header-custom h1 {
    font-size: 1.6rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

  .card-header-custom p {
    margin: 0.35rem 0 0;
    opacity: 0.92;
    font-size: 0.95rem;
}

  .badge-status {
    background: rgba(255, 255, 255, 0.16);
    border-radius: var(--radius-full);
    padding: var(--space-2) var(--spacing-2);
    font-size: var(--text-sm);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.75rem;
  }

  /* Badge Status Variants - Project Status */
  .badge-status-planning {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    border: 1px solid transparent;
    background-color: var(--info-600);
    color: var(--text-inverse);
  }

  .badge-status-in_progress {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    border: 1px solid transparent;
    background-color: var(--primary-600);
    color: var(--text-inverse);
  }

  .badge-status-completed {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    border: 1px solid transparent;
    background-color: var(--success-600);
    color: var(--text-inverse);
  }

  .badge-status-on_hold {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    border: 1px solid transparent;
    background-color: var(--warning-600);
    color: var(--text-inverse);
  }

  .badge-status-secondary {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    border: 1px solid transparent;
    background-color: var(--secondary-600);
    color: var(--text-inverse);
  }

  /* Badge Status Variants - Permits */
  .badge-status-pending {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    border: 1px solid transparent;
    background-color: var(--warning-600);
    color: var(--text-inverse);
  }

  .badge-status-approved {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    border: 1px solid transparent;
    background-color: var(--success-600);
    color: var(--text-inverse);
  }

  .badge-status-expired {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    border: 1px solid transparent;
    background-color: var(--error-600);
    color: var(--text-inverse);
  }

  .badge-status-not_required {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    border: 1px solid transparent;
    background-color: var(--secondary-600);
    color: var(--text-inverse);
  }

  /* Badge Priority Variants */
  .badge-priority-secondary {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    border: 1px solid transparent;
    background-color: var(--secondary-600);
    color: var(--text-inverse);
  }

  .badge-priority-info {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    border: 1px solid transparent;
    background-color: var(--info-600);
    color: var(--text-inverse);
  }

  .badge-priority-warning {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    border: 1px solid transparent;
    background-color: var(--warning-600);
    color: var(--text-inverse);
  }

  .badge-priority-danger {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    border: 1px solid transparent;
    background-color: var(--danger-600);
    color: var(--text-inverse);
  }

  /* Text Secondary Muted */
  .text-secondary-muted {
    color: var(--text-secondary);
  }

  /* Bootstrap Grid Support - col-4 (3 בשורה) - ספציפי לפרויקטים */
  .project-view-wrapper .row.g-3,
  .card-body .row.g-3,
  #tab-details .row.g-3,
  #tab-details .card-body .row.g-3 {
    display: flex;
    flex-wrap: wrap;
    /* ⚠️ הוסר margin שלילי - אסור לפי חוק זהב #2 */
    /* margin-left: -0.75rem; */
    /* margin-right: -0.75rem; */
    gap: var(--spacing-4); /* ✅ תיקון - שימוש ב-gap במקום margin שלילי */
  }

  .project-view-wrapper .row.g-3 .col-4,
  .card-body .row.g-3 .col-4,
  #tab-details .row.g-3 .col-4,
  #tab-details .card-body .row.g-3 .col-4 {
    position: relative;
    width: 100%;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
    box-sizing: border-box;
  }

  .card-body-custom {
    padding: 1.75rem;
  }

  /* הוסר - .form-label ו-.form-control מעוצבים ב-components/forms.css גלובלית */

  /* הוסר - .input-group-text מעוצב ב-components/forms.css גלובלית */

  /* ===== Date Input Calendar Icon - אייקון לוח שנה בהיר ===== */
  .card-body-custom input[type="date"],
  .form-card .card-body-custom input[type="date"] {
    padding-left: 1rem;
    padding-right: 2.5rem;
  }

  html[dir="rtl"] .card-body-custom input[type="date"],
  html[dir="rtl"] .form-card .card-body-custom input[type="date"] {
    padding-right: 1rem;
    padding-left: 2.5rem;
  }

  .card-body-custom input[type="date"]::-webkit-calendar-picker-indicator,
  .form-card .card-body-custom input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.3) brightness(1.2);
    cursor: pointer;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }

  html[dir="rtl"] .card-body-custom input[type="date"]::-webkit-calendar-picker-indicator,
  html[dir="rtl"] .form-card .card-body-custom input[type="date"]::-webkit-calendar-picker-indicator {
    margin-right: 0.5rem;
    margin-left: 0.5rem;
  }

  .card-body-custom input[type="date"]::-moz-calendar-picker-indicator,
  .form-card .card-body-custom input[type="date"]::-moz-calendar-picker-indicator {
    filter: invert(0.3) brightness(1.2);
    cursor: pointer;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }

  html[dir="rtl"] .card-body-custom input[type="date"]::-moz-calendar-picker-indicator,
  html[dir="rtl"] .form-card .card-body-custom input[type="date"]::-moz-calendar-picker-indicator {
    margin-right: 0.5rem;
    margin-left: 0.5rem;
  }

  .card-body-custom input[type="date"]::calendar-picker-indicator,
  .form-card .card-body-custom input[type="date"]::calendar-picker-indicator {
    filter: invert(0.3) brightness(1.2);
    cursor: pointer;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }

  html[dir="rtl"] .card-body-custom input[type="date"]::calendar-picker-indicator,
  html[dir="rtl"] .form-card .card-body-custom input[type="date"]::calendar-picker-indicator {
    margin-right: 0.5rem;
    margin-left: 0.5rem;
  }

  /* ===== Section Title - משתמש בעיצוב הגלובלי מ-forms.css ===== */
  /* כל העיצובים של .section-title נמצאים ב-components/forms.css */

  /* ===== Forms ===== */
  /* ===== Forms - משתמש בעיצוב הגלובלי מ-forms.css ===== */
  /* הערה: כל העיצובים של .form-label, .form-control, .form-select, .form-group, .form-section נמצאים ב-components/forms.css */
  /* העיצוב הגלובלי נטען מ-components/forms.css - אין צורך בעיצוב ספציפי כאן */

  /* רק עיצובים ספציפיים למודול פרויקטים שלא נמצאים בגלובלי */
  .form-check-label {
    font-size: 0.88rem;
}

  /* הוסר - .card-footer-custom מעוצב ב-components/forms.css גלובלית */

  /* ===== כפתור Primary Modern משופר - עיצוב איכותי ובולט ===== */
  .form-card .card-footer-custom .btn-primary-modern,
  .card-footer-custom .btn-primary-modern,
  .btn.btn-primary-modern {
    background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-500) 100%);
    border: 2px solid var(--primary-500);
    color: var(--text-inverse);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.75rem 1.75rem;
    border-radius: 0.75rem;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    min-width: calc(var(--spacing-24) + var(--spacing-12));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }

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

  .form-card .card-footer-custom .btn-primary-modern:hover,
  .card-footer-custom .btn-primary-modern:hover,
  .btn.btn-primary-modern:hover {
    background: linear-gradient(135deg, var(--primary-700) 0%, var(--primary-600) 100%);
    border-color: var(--primary-600);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4), 0 4px 8px rgba(59, 130, 246, 0.2);
  }

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

  .form-card .card-footer-custom .btn-primary-modern:active,
  .card-footer-custom .btn-primary-modern:active,
  .btn.btn-primary-modern:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
  }

  .form-card .card-footer-custom .btn-primary-modern:focus,
  .card-footer-custom .btn-primary-modern:focus,
  .btn.btn-primary-modern:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3), 0 4px 12px rgba(59, 130, 246, 0.3);
  }

  .form-card .card-footer-custom .btn-primary-modern i,
  .card-footer-custom .btn-primary-modern i,
  .btn.btn-primary-modern i {
    font-size: 1rem;
    transition: transform 0.3s ease;
  }

  .form-card .card-footer-custom .btn-primary-modern:hover i,
  .card-footer-custom .btn-primary-modern:hover i,
  .btn.btn-primary-modern:hover i {
    transform: scale(1.1);
  }
  
  /* ===== כפתורי Outline Secondary עם אפקט מסגרת כחולה ===== */
  .btn-outline-secondary-modern,
  .btn-outline-secondary.btn-outline-secondary-modern {
    background: transparent;
    border: 2px solid var(--primary-500);
    color: var(--primary-600);
    font-weight: 600;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  }

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

  .btn-outline-secondary-modern:hover,
  .btn-outline-secondary.btn-outline-secondary-modern:hover {
    background: var(--primary-50);
    border-color: var(--primary-600);
    color: var(--primary-700);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  }

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

  .btn-outline-secondary-modern:active,
  .btn-outline-secondary.btn-outline-secondary-modern:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.2);
  }

  .btn-outline-secondary-modern:focus,
  .btn-outline-secondary.btn-outline-secondary-modern:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
  }

  /* הוסר - .small-hint מעוצב ב-components/forms.css גלובלית */

  /* ===== Form Validation ===== */
  /* הוסר - .is-invalid ו-.invalid-feedback מעוצבים ב-components/forms.css גלובלית */

  /* .form-section-explanation - הועבר ל-components/forms.css גלובלית */
  /* .project-header-custom - הועבר ל-components/forms.css גלובלית */
  /* .form-header-explanation - הועבר ל-components/forms.css גלובלית */


  /* ===== Index Page Styles ===== */
/* הסברים */
  /* ===== Info Boxes ===== */
  /* הוסר - info boxes מעוצבים גלובלית */

  /* ===== Dashboard Styles ===== */
  /* הערה: .kpi-help-icon ו-.kpi-tooltip מוגדרים כבר בתחילת הקובץ (שורות 62-96) - הוסרו כפילויות */


  /* ===== Contracts Page Styles ===== */
  /* הערה: .kpi-help-icon ו-.kpi-tooltip מוגדרים כבר בתחילת הקובץ (שורות 62-96) - הוסרו כפילויות */

  /* ===== Print Page Styles ===== */
  /* הערה: עיצובי print ל-body הועברו ל-overrides.css */
  @media print {
    .no-print {
      display: none;
    }
  }

  .header {
    text-align: center;
    border-bottom: 3px solid var(--primary-500);
    padding-bottom: 20px;
    margin-bottom: 30px;
  }

  .project-title {
    font-size: var(--fs-h2);
    font-weight: var(--font-bold);
    color: var(--primary-500);
    margin-bottom: var(--spacing-2);
  }

  .project-code {
    font-size: var(--fs-h4);
    color: var(--text-secondary);
  }

  .section {
    margin-bottom: var(--spacing-7);
    page-break-inside: avoid;
  }

  /* הערה: .section-title הועבר ל-components/forms.css */

  .info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-5);
  }

  .info-item {
    margin-bottom: 10px;
  }

  .info-label {
    font-weight: bold;
    color: var(--text-primary);
  }

  .info-value {
    color: var(--text-primary);
  }

  /* ===== Stats Grid ===== */
  /* הערה: .stats-grid הועבר ל-components/cards.css */
  /* ===== Stat Card ===== */
  /* הערה: .stat-card הועבר ל-components/cards.css */
  /* הערה: .stat-label הועבר ל-components/cards.css - משתמש בעיצוב הגלובלי */

  .footer {
    margin-top: calc(var(--spacing-24) + var(--spacing-2));
    text-align: center;
    font-size: var(--fs-body-small);
    color: var(--text-secondary);
  }

  .print-button {
    position: fixed;
    top: var(--spacing-5);
    right: var(--spacing-5);
    background: var(--primary-500);
    color: var(--text-inverse);
    border: none;
    padding: var(--spacing-2) var(--spacing-5);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--fs-base);
  }

  .print-button:hover {
    background: var(--primary-600);
  }

  .back-button {
    position: fixed;
    top: var(--spacing-5);
    left: var(--spacing-5);
    background: var(--text-secondary);
    color: var(--text-inverse);
    border: none;
    padding: var(--spacing-2) var(--spacing-5);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--fs-base);
    text-decoration: none;
  }

  .back-button:hover {
    background: var(--text-secondary);
    color: white;
    text-decoration: none;
  }

  /* ===== Status Badges - הועבר ל-components-enhanced.css ===== */
  /* כל העיצובים של .status-badge, .status-active נמצאים ב-components-enhanced.css */

  .status-completed {
    background-color: var(--primary-100);
    color: var(--primary-800);
  }

  .status-planning {
    background-color: var(--warning-100);
    color: var(--warning-800);
  }

  .status-on-hold {
    background-color: var(--error-100);
    color: var(--error-800);
  }

/* Dashboard Stats - Contracts Page */
  .dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
  }

  .dashboard-stat-box {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    padding: var(--spacing-6);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
  }

  .dashboard-stat-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  .stat-title {
    position: relative;
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
  }

  /* הערה: .stat-value הועבר ל-components/cards.css - משתמש בעיצוב הגלובלי */
  /* .stat-value {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
  }

  /* הערה: .stat-desc הועבר ל-components/cards.css - משתמש בעיצוב הגלובלי */
  /* .stat-desc {
    display: block;
    font-size: 0.8rem;
    color: var(--text-secondary);
  } */

  /* הערה: .stat-icon הועבר ל-components/cards.css - משתמש בעיצוב הגלובלי */
  /* .stat-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    display: block;
  } */

  /* הערה: .stat-value צבעים לפי רקע הועבר ל-components/cards.css - משתמש בעיצוב הגלובלי */
  /* .bg-blue .stat-value { color: var(--primary-500); } */
  /* .bg-green .stat-value { color: var(--success-500); } */
  /* .bg-cyan .stat-value { color: var(--info-500); } */
  /* .bg-yellow .stat-value { color: var(--warning-500); } */

/* Progress Bar - Contracts Table */
  .table .progress {
    height: var(--spacing-5);
    background-color: var(--bg-muted);
    border-radius: var(--radius-sm);
    overflow: hidden;
  }

  /* ===== Progress ===== */
  /* הערה: .progress-bar ו-.progress מעוצבים ב-components-enhanced.css גלובלית - הוסרו כפילויות */
  /* הערה: .table .progress-bar נשמר כי זה ספציפי לטבלאות במודול */

/* List View Toggle */
  #list-view {
    display: none;
  }

  #list-view.show {
    display: block;
  }

/* Print Page Styles */
  .info-item {
    margin-bottom: 0.75rem;
  }

  .info-item.mt-5 {
    margin-top: 1.25rem;
  }

  /* הערה: .stat-label הועבר ל-components/cards.css - משתמש בעיצוב הגלובלי */
  /* .stat-label {
    position: relative;
  } */

/* Projects Index Page */
  .projects-page ul.mb-0 {
    padding-right: 1.5rem;
  }

  .projects-page small.d-block {
    opacity: 0.8;
  }

  #projects-table-view {
    display: none;
  }

  #projects-table-view.show {
    display: block;
  }

/* Projects View Page - Icon Sizes */
  .share-email-btn i,
  .btn-outline-primary.shadow-sm i {
    font-size: 1.1rem;
  }

/* Projects View Page - KPI Labels */
  .project-view-wrapper h6.fw-bold.mb-1 {
    position: relative;
  }

/* Projects View Page - Progress Bars */
  .project-view-wrapper .progress {
    height: var(--spacing-5);
    background-color: var(--bg-muted);
    border-radius: var(--radius-sm);
    overflow: hidden;
  }

  .project-view-wrapper .progress-lg {
    height: calc(var(--spacing-5) + var(--space-1));
  }

  /* סרגל פעולות עליון */
  /* הערה: .employee-actions-bar ו-.project-actions-bar מוגדרים כבר ב-base.css (שורות 435-649) - הוסרו כפילויות */

  /* ============================================
     Projects Index Page – Premium Layout
     מותאם ל-RTL, Bootstrap 5 + Tailwind utility classes
     ============================================ */

  /* -------- בסיס עמוד -------- */
  .projects-page {
    /* שימוש ב-tokens גלובליים במקום משתנים מותאמים אישית */
    background: transparent;
    min-height: calc(100vh - 90px);
  }

  /* -------- כותרת עליונה -------- */
  .projects-header {
    border-radius: var(--border-radius-2xl);
    background: linear-gradient(135deg, var(--primary-50) 0%, var(--bg-tertiary) 100%);
    color: var(--text-primary);
    box-shadow: 0 6px 16px rgba(33, 150, 243, 0.15);
    border-right: 4px solid var(--primary-500);
    border-top: 1px solid rgba(33, 150, 243, 0.2);
    border-bottom: 1px solid rgba(33, 150, 243, 0.2);
    border-left: 1px solid rgba(33, 150, 243, 0.2);
    padding: 1.1rem 1.3rem;
    position: relative;
    overflow: hidden;
  }

  .projects-header::before {
    content: none;
    display: none;
  }

  .projects-header-main {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    align-items: center;
    justify-content: space-between;
    z-index: 1;
  }

  .projects-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
  }

  .projects-title {
    font-size: var(--fs-h3);
    font-weight: var(--fs-h3-weight);
    display: flex;
    align-items: center;
    margin: 0;
    color: var(--text-primary);
  }

  .projects-title-icon {
    font-size: 1.4rem;
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--border-radius-full);
    background: var(--primary-50);
    color: var(--primary-600);
    box-shadow: 0 0 0 1px rgba(191, 219, 254, 0.9),
                0 6px 14px rgba(148, 163, 184, 0.5);
  }

  .projects-subtitle {
    margin: 0;
    font-size: var(--fs-body-small);
    color: var(--text-secondary);
  }

  .projects-header-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
  }

  /* לחצן הוספה קטן - שמירה על gradients מהגלובלי */
  /* הערה: עיצוב ה-gradients מוגדר גלובלית ב-components/buttons.css */
  .projects-header-actions .btn-action.btn-add {
    width: var(--spacing-7);
    height: var(--spacing-7);
  }

  .projects-header-actions .btn-action.btn-add i {
    font-size: var(--text-xs);
  }

  /* ===== Icon Ghost Button ===== */
  /* הערה: .btn-icon-ghost מוגדר כבר ב-components/buttons.css - הוסרה כפילות */
  /* נשמר רק .projects-header-actions .btn-icon-ghost כי זה ספציפי למודול */
  .projects-header-actions .btn-icon-ghost {
    background: var(--bg-muted);
    color: var(--text-primary);
    border-color: var(--border-secondary);
  }

  .projects-header-actions .btn-icon-ghost:hover {
    background: var(--border-primary);
    color: var(--text-primary);
    border-color: var(--text-tertiary);
  }

  /* -------- פילטרים מהירים (צ'יפים) -------- */
  .projects-quick-filters {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.8rem;
  }

  /* פילטרים מהירים מודרניים וקומפקטיים */
  .filter-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--spacing-2);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    border: 1px solid var(--secondary-600);
    color: var(--text-inverse);
    text-decoration: none;
    background: var(--secondary-800);
    transition: all var(--transition-fast);
    font-weight: var(--font-medium);
    min-height: var(--spacing-6);
  }

  .filter-chip i {
    font-size: 0.65rem;
    line-height: 1;
  }

  .filter-chip:hover {
    background: var(--secondary-700);
    border-color: var(--secondary-500);
    color: var(--text-inverse);
    transform: translateY(-1px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  }

  /* פילטר פעיל - עם צבעים לפי סטטוס */
  .filter-chip-active {
    background: var(--secondary-700);
    color: var(--text-inverse);
    font-weight: 600;
    border-width: 1.5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }

  /* "הכל" פעיל */
  .projects-quick-filters > a:first-child.filter-chip-active {
    border-color: var(--text-secondary);
    color: var(--text-primary);
  }

  /* תכנון - כחול */
  .projects-quick-filters > a[href*="status=planning"]:not(.filter-chip-active) {
    border-color: var(--primary-100);
    color: var(--primary-500);
  }

  .projects-quick-filters > a[href*="status=planning"]:not(.filter-chip-active):hover {
    background: var(--primary-50);
    border-color: var(--primary-500);
  }

  .projects-quick-filters > a[href*="status=planning"].filter-chip-active {
    border-color: var(--primary-600);
    color: var(--primary-700);
    background: var(--primary-50);
  }

  /* בביצוע - ירוק */
  .projects-quick-filters > a[href*="status=in_progress"]:not(.filter-chip-active) {
    border-color: var(--success-100);
    color: var(--success-500);
  }

  .projects-quick-filters > a[href*="status=in_progress"]:not(.filter-chip-active):hover {
    background: var(--success-50);
    border-color: var(--success-500);
  }

  .projects-quick-filters > a[href*="status=in_progress"].filter-chip-active {
    border-color: var(--success-600);
    color: var(--success-700);
    background: var(--success-50);
  }

  /* מושהה - כתום */
  .projects-quick-filters > a[href*="status=on_hold"]:not(.filter-chip-active) {
    border-color: var(--warning-300);
    color: var(--warning-600);
  }

  .projects-quick-filters > a[href*="status=on_hold"]:not(.filter-chip-active):hover {
    background: var(--warning-50);
    border-color: var(--warning-600);
  }

  .projects-quick-filters > a[href*="status=on_hold"].filter-chip-active {
    border-color: var(--warning-700);
    color: var(--warning-800);
    background: var(--warning-50);
  }

  /* הושלמו - טורקיז */
  .projects-quick-filters > a[href*="status=completed"]:not(.filter-chip-active) {
    border-color: var(--info-200);
    color: var(--info-500);
  }

  .projects-quick-filters > a[href*="status=completed"]:not(.filter-chip-active):hover {
    background: var(--info-50);
    border-color: var(--info-500);
  }

  .projects-quick-filters > a[href*="status=completed"].filter-chip-active {
    border-color: var(--info-600);
    color: var(--info-700);
    background: var(--info-50);
  }

  /* בוטלו - אדום */
  .projects-quick-filters > a[href*="status=cancelled"]:not(.filter-chip-active) {
    border-color: var(--error-200);
    color: var(--error-500);
  }

  .projects-quick-filters > a[href*="status=cancelled"]:not(.filter-chip-active):hover {
    background: var(--error-50);
    border-color: var(--error-500);
  }

  .projects-quick-filters > a[href*="status=cancelled"].filter-chip-active {
    border-color: var(--error-600);
    color: var(--error-700);
    background: var(--error-50);
  }

  /* -------- סטטיסטיקות / KPI -------- */
  /* הערה: .stats-grid ו-.stat-card הועברו ל-components/cards.css */
  /* כל העיצובים של .stat-card, .stat-card-inner, .stat-icon, .stat-label, .stat-value וכו' נמצאים ב-components/cards.css */

  /* -------- חיפוש וסינון -------- */
  .search-filter-card {
    border-radius: var(--radius-card);
    border: 1px solid var(--color-border);
    box-shadow: 0 6px 18px rgba(148, 163, 184, 0.15);
    overflow: hidden;
  }

  .search-filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.8rem;
  }

  .search-filter-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }

  .search-filter-title i {
    color: var(--primary-600);
  }

  .search-filter-form {
    margin-top: 0.3rem;
  }

  .search-filter-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .filter-field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
  }

  .filter-field-wide {
    grid-column: span 2;
  }

  .filter-field .form-label {
    margin-bottom: 0;
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-weight: 500;
  }

  .filter-field .form-select,
  .filter-field .form-control {
    font-size: 0.78rem;
    padding-block: 0.25rem;
    padding-inline: 0.45rem;
    border-radius: 0.5rem;
  }

  .input-with-icon {
    position: relative;
  }

  .input-icon {
    position: absolute;
    inset-inline-start: 0.5rem;
    inset-block: 50%;
    transform: translateY(-50%);
    font-size: 0.78rem;
    color: var(--color-dark);
    opacity: 0.7;
  }

  .input-with-icon .form-control {
    padding-inline-start: 1.65rem;
  }

  .filter-actions {
    display: flex;
    align-items: flex-end;
  }

  .filter-actions .btn {
    font-size: 0.78rem;
    border-radius: 0.55rem;
  }

  /* -------- כרטיסי פרויקטים -------- */
  /* הערה: .projects-grid, .project-card וכל הילדים שלהם הועברו לגלובלי ב-modules.css */
  /* העיצוב הגלובלי נטען מ-modules.css - אין צורך בעיצוב ספציפי כאן */

  /* רק עיצובים ספציפיים למודול פרויקטים שלא נמצאים בגלובלי */
  .link-project-name {
    font-weight: 600;
    text-decoration: none;
  }

  /* ===== PRO FILTER TOOLBAR ===== */
  .projects-filter-toolbar {
    border-radius: var(--radius-card);
    border: 1px solid var(--color-border);
    box-shadow: 0 5px 20px rgba(15, 23, 42, 0.12);
    background: var(--text-inverse);
  }

  .projects-filter-toolbar .card-body {
    padding-block: 0.55rem;
    padding-inline: 0.8rem;
  }

  .filter-toolbar-title {
    font-size: 0.9rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
  }

  .filter-toolbar-title i {
    font-size: 0.85rem;
    color: var(--primary-600);
  }

  .filter-toolbar-meta {
    font-size: 0.75rem;
    color: var(--color-dark);
    opacity: 0.7;
  }

  .pro-filter-pills {
    max-width: 100%;
  }

  .pro-filter-pill {
    font-size: 0.72rem;
    padding: 0.1rem 0.5rem;
    border-radius: var(--radius-pill);
    background: var(--primary-50);
    color: var(--primary-800);
    border: 1px solid var(--primary-100);
    white-space: nowrap;
  }

  .filter-toolbar-form .filter-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 0.1rem;
  }

  .filter-toolbar-form .form-control,
  .filter-toolbar-form .form-select {
    font-size: 0.78rem;
    padding-block: 0.25rem;
    padding-inline: 0.45rem;
    border-radius: 0.6rem;
  }

  .filter-input-with-icon {
    position: relative;
  }

  .filter-input-icon {
    position: absolute;
    inset-inline-start: 0.5rem;
    inset-block: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    color: var(--color-dark);
    opacity: 0.7;
  }

  .filter-input-with-icon .form-control {
    padding-inline-start: 1.7rem;
  }

  /* Segmented status */
  .pro-filter-status-group {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
  }

  .pro-status-segment {
    background: var(--bg-muted);
    padding: 0.1rem;
    border-radius: var(--radius-pill);
    box-shadow: inset 0 0 0 1px var(--border-primary);
    overflow-x: auto;
  }

  .pro-status-segment .filter-status-btn {
    border-radius: var(--radius-pill);
    border: none;
    padding: 0.2rem 0.6rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    background: transparent;
    white-space: nowrap;
  }

  .pro-status-segment .filter-status-btn i {
    font-size: 0.75rem;
  }

  .pro-status-segment .btn-check:checked + .filter-status-btn {
    background: var(--primary-600);
    color: var(--primary-50);
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.6);
  }

  .pro-status-segment .filter-status-btn:hover {
    background: var(--border-primary);
  }

  .pro-advanced-toggle {
    font-size: 0.78rem;
    border-radius: var(--radius-pill);
    padding-block: 0.25rem;
    padding-inline: 0.55rem;
  }

  .filter-submit-btn {
    border-radius: var(--radius-pill);
    font-size: 0.78rem;
    padding-block: 0.25rem;
    padding-inline: 0.75rem;
  }

  .pro-clear-filters {
    font-size: 0.75rem;
  }

  /* ===== Projects Search Engine – קומפקטי מקצועי ===== */
  .projects-search-engine {
    border-radius: var(--radius-card);
    border: 1px solid var(--color-border);
    background: var(--text-inverse);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
  }

  .projects-search-engine .card-body {
    padding-block: 0.55rem;
    padding-inline: 0.75rem;
  }

  .projects-search-form {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
  }

  .projects-search-main {
    min-height: 0;
  }

  .search-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
  }

  /* חיפוש ראשי */
  .search-input-wrapper {
    position: relative;
  }

  .search-input-icon {
    position: absolute;
    inset-inline-start: 0.5rem;
    inset-block: 50%;
    transform: translateY(-50%);
    font-size: 0.8rem;
    color: var(--color-dark);
    opacity: 0.7;
  }

  .search-input-wrapper .form-control {
    padding-inline-start: 1.8rem;
    font-size: 0.8rem;
    border-radius: var(--radius-pill);
    border-color: var(--border-primary);
  }

  .search-input-wrapper .form-control:focus {
    border-color: var(--primary-600);
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.25);
  }

  /* צ'יפים לסטטוס */
  .projects-search-status {
    min-width: calc(var(--spacing-24) * 2.5);
  }

  .status-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    background: transparent;
    border-radius: 0;
    padding: 0;
    border: none;
  }

  /* לחצני סטטוס מודרניים וקומפקטיים */
  .status-chip {
    border: 1px solid var(--border-primary);
    background: var(--text-inverse);
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--spacing-2);
    font-size: var(--text-xs);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition-fast);
    font-weight: var(--font-medium);
    min-height: var(--spacing-6);
  }

  .status-chip i {
    font-size: 0.65rem;
    line-height: 1;
  }

  .status-chip:hover {
    background: var(--bg-muted);
    border-color: var(--border-secondary);
    color: var(--text-primary);
    transform: translateY(-1px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  }

  /* סטטוס פעיל - עם צבעים שונים לפי סוג */
  .status-chip-active {
    background: var(--text-inverse);
    color: var(--text-primary);
    font-weight: 600;
    border-width: 1.5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }

  /* סטטוס "הכל" פעיל */
  .status-chip[value=""]:not(.status-chip-active),
  .status-chip[value=""]:not(.status-chip-active):hover {
    border-color: var(--border-primary);
  }

  .status-chip[value=""].status-chip-active {
    border-color: var(--text-secondary);
    color: var(--text-primary);
  }

  /* תכנון - כחול */
  .status-chip[value="planning"]:not(.status-chip-active) {
    border-color: var(--primary-100);
    color: var(--primary-500);
  }

  .status-chip[value="planning"]:not(.status-chip-active):hover {
    background: var(--primary-50);
    border-color: var(--primary-500);
  }

  .status-chip[value="planning"].status-chip-active {
    border-color: var(--primary-600);
    color: var(--primary-700);
    background: var(--primary-50);
  }

  /* בביצוע - ירוק */
  .status-chip[value="in_progress"]:not(.status-chip-active) {
    border-color: var(--success-100);
    color: var(--success-500);
  }

  .status-chip[value="in_progress"]:not(.status-chip-active):hover {
    background: var(--success-50);
    border-color: var(--success-500);
  }

  .status-chip[value="in_progress"].status-chip-active {
    border-color: var(--success-600);
    color: var(--success-700);
    background: var(--success-50);
  }

  /* מושהה - כתום */
  .status-chip[value="on_hold"]:not(.status-chip-active) {
    border-color: var(--warning-300);
    color: var(--warning-600);
  }

  .status-chip[value="on_hold"]:not(.status-chip-active):hover {
    background: var(--warning-50);
    border-color: var(--warning-600);
  }

  .status-chip[value="on_hold"].status-chip-active {
    border-color: var(--warning-700);
    color: var(--warning-800);
    background: var(--warning-50);
  }

  /* הושלם - טורקיז */
  .status-chip[value="completed"]:not(.status-chip-active) {
    border-color: var(--info-200);
    color: var(--info-500);
  }

  .status-chip[value="completed"]:not(.status-chip-active):hover {
    background: var(--info-50);
    border-color: var(--info-500);
  }

  .status-chip[value="completed"].status-chip-active {
    border-color: var(--info-600);
    color: var(--info-700);
    background: var(--info-50);
  }

  /* בוטל - אדום */
  .status-chip[value="cancelled"]:not(.status-chip-active) {
    border-color: var(--error-200);
    color: var(--error-500);
  }

  .status-chip[value="cancelled"]:not(.status-chip-active):hover {
    background: var(--error-50);
    border-color: var(--error-500);
  }

  .status-chip[value="cancelled"].status-chip-active {
    border-color: var(--error-600);
    color: var(--error-700);
    background: var(--error-50);
  }

  /* כפתורי פעולה */
  /* לחצני חיפוש מודרניים וקומפקטיים - קטנים ומעוצבים */
  .projects-search-actions .btn-action.btn-advanced,
  .projects-search-actions .btn-action.btn-filter {
    width: calc(var(--spacing-5) + var(--space-1));
    height: calc(var(--spacing-5) + var(--space-1));
    background: var(--text-inverse);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: none;
    font-size: 0;
    min-width: calc(var(--spacing-5) + var(--space-1));
    font-weight: normal;
  }

  /* לחצן מתקדם - אפור עדין */
  .projects-search-actions .btn-action.btn-advanced {
    color: var(--text-secondary);
    border-color: var(--border-primary);
  }

  .projects-search-actions .btn-action.btn-advanced:hover {
    background: var(--bg-muted);
    border-color: var(--border-secondary);
    color: var(--text-primary);
    transform: translateY(-1px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  }

  .projects-search-actions .btn-action.btn-advanced:active {
    background: var(--bg-tertiary);
    transform: scale(0.95);
  }

  /* לחצן סנן - כחול עדין */
  .projects-search-actions .btn-action.btn-filter {
    color: var(--primary-500);
    border-color: var(--primary-100);
  }

  .projects-search-actions .btn-action.btn-filter:hover {
    background: var(--primary-50);
    border-color: var(--primary-500);
    color: var(--primary-600);
    transform: translateY(-1px);
    box-shadow: 0 1px 2px rgba(59, 130, 246, 0.15);
  }

  .projects-search-actions .btn-action.btn-filter:active {
    background: var(--primary-100);
    transform: scale(0.95);
  }

  .projects-search-actions .btn-action i {
    font-size: var(--text-xs);
    line-height: 1;
    display: block;
    margin: 0;
  }

  /* gap קטן יותר בין הלחצנים */
  .projects-search-actions {
    gap: 0.25rem;
    align-items: center;
  }

  /* תאימות לאחור */
  .projects-search-actions .advanced-toggle,
  .projects-search-actions .main-search-submit {
    font-size: 0.78rem;
    padding-block: 0.25rem;
    padding-inline: 0.7rem;
    border-radius: var(--radius-pill);
  }

  .projects-search-actions .advanced-toggle i {
    font-size: 0.78rem;
  }

  /* אזור מתקדם */
  .projects-search-advanced .form-select {
    font-size: 0.78rem;
    padding-block: 0.25rem;
    padding-inline: 0.45rem;
    border-radius: 0.6rem;
  }

  .clear-filters-link {
    font-size: 0.75rem;
  }

  /* שורת סיכום */
  .projects-search-summary {
    font-size: 0.76rem;
    color: var(--color-dark);
    opacity: 0.7;
  }

  .projects-search-summary strong {
    color: var(--text-primary);
  }

  /* -------- עיצוב inline styles שהוסרו -------- */
  
  /* עיצוב cursor pointer */
  .cursor-pointer {
    cursor: pointer;
  }

  /* -------- עיצוב PDF viewer -------- */
  .pdf-modal-body {
    height: calc(100vh - 120px);
    overflow-x: auto;
    overflow-y: hidden;
    position: relative;
  }

  .pdf-viewer {
    width: 100%;
    height: 100%;
    border: none;
  }

  .pdf-error {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    padding: var(--spacing-5);
    background: var(--text-inverse);
    border: 2px solid var(--error-600);
    border-radius: var(--radius-md);
  }

  /* -------- רספונסיביות (Mobile-First) -------- */
  /* ברירת מחדל - מובייל (1 עמודה) */
  .stats-grid {
    display: grid;
    grid-template-columns: 1fr; /* ✅ Mobile-First */
    gap: var(--space-4);
  }

  .projects-grid {
    display: grid;
    grid-template-columns: 1fr; /* ✅ Mobile-First */
    gap: var(--space-4);
  }

  .search-filter-grid {
    display: grid;
    grid-template-columns: 1fr; /* ✅ Mobile-First */
    gap: var(--space-4);
  }

  @media (min-width: 768px) {
    .stats-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr)); /* טאבלט */
    }

    .projects-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr)); /* טאבלט */
    }

    .search-filter-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr)); /* טאבלט */
    }

    .filter-field-wide {
      grid-column: span 2;
    }

    .projects-title {
      font-size: 1.5rem;
    }
  }

  @media (min-width: 1024px) {
    .stats-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr)); /* דסקטופ */
    }

    .search-filter-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr)); /* דסקטופ */
    }
  }

  @media (min-width: 1200px) {
    .projects-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr)); /* דסקטופ גדול */
    }
  }

  @media (max-width: 767.98px) {
    .pro-filter-status-group {
      width: 100%;
    }

    .pro-status-segment {
      width: 100%;
    }

    .projects-filter-toolbar .card-body {
      padding-block: 0.7rem;
    }

    .projects-search-main {
      flex-direction: column;
      align-items: stretch;
    }

    .projects-search-status {
      width: 100%;
    }

    .status-chip-group {
      justify-content: flex-start;
    }

    .projects-search-actions {
      align-items: stretch;
    }
  }
  
  /* ============================================
     Nav Tabs - תפריט הטאבים רחב לרוחב הדף
     ============================================ */
  
  /* וידוא שה-parent container לא חותך את התוכן */
  .col-lg-7,
  .col-lg-9,
  .project-view-wrapper,
  .projects-page {
    overflow-x: visible;
    overflow-y: visible;
  }
  
  /* הרחבת nav-tabs-wrapper גם ב-mobile */
  @media (max-width: 1023px) {
    .nav-tabs-wrapper {
      width: calc(100% + 15%);
      max-width: calc(100% + 15%);
      /* ⚠️ הוסר margin שלילי - אסור לפי חוק זהב #2 */
      /* margin-left: -7.5%; */
      /* margin-right: -7.5%; */
      /* ✅ תיקון - שימוש ב-padding בקונטיינר הפנימי במקום margin שלילי */
      overflow-x: visible;
      overflow-y: visible;
    }
    
    .grid,
    [class*="grid"] {
      overflow-x: visible;
      overflow-y: visible;
    }
  }
  
  /* וידוא שהתפריט הטאבים לוקח את כל הרוחב של ה-wrapper */
  .nav-tabs-wrapper .nav-tabs-custom {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
  
  /* ============================================
     KPIs בדף projects - תיקונים ספציפיים
     ============================================ */
  
  /* תיקון: KPIs בדף projects מקבלים את העיצוב הגלובלי בלבד - ללא עיצוב מיוחד */
  .projects-page .kpi-card,
  .projects-page .stat-card,
  .project-view-wrapper .kpi-card,
  .project-view-wrapper .stat-card,
  [class*="projects"] .kpi-card,
  [class*="projects"] .stat-card {
    /* כל העיצובים מגיעים מ-components/cards.css - ללא עיצוב מיוחד */
    max-width: none;
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
    /* הסרת inline styles שה-JavaScript מוסיף */
    opacity: 1;
    transform: none;
    transition: all 0.3s ease;
    /* מניעת הצגה כפולה */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
  }
  
  /* תיקון: מניעת הצגה כפולה של תוכן */
  .projects-page .kpi-card::before,
  .projects-page .stat-card::before,
  .project-view-wrapper .kpi-card::before,
  .project-view-wrapper .stat-card::before {
    content: '';
  }
  
  .projects-page .kpi-card::after,
  .projects-page .stat-card::after,
  .project-view-wrapper .kpi-card::after,
  .project-view-wrapper .stat-card::after {
    content: '';
  }
  
  /* תיקון: מניעת הצגה כפולה של label, value, subtitle */
  .projects-page .kpi-label::before,
  .projects-page .kpi-value::before,
  .projects-page .kpi-subtitle::before,
  .project-view-wrapper .kpi-label::before,
  .project-view-wrapper .kpi-value::before,
  .project-view-wrapper .kpi-subtitle::before {
    content: none;
  }
  
  .projects-page .kpi-label::after,
  .projects-page .kpi-value::after,
  .projects-page .kpi-subtitle::after,
  .project-view-wrapper .kpi-label::after,
  .project-view-wrapper .kpi-value::after,
  .project-view-wrapper .kpi-subtitle::after {
    content: none;
  }
  
  /* תיקון: הסרת הגבלות גודל על grid של KPIs בדף projects */
  .projects-page .grid .kpi-card,
  .projects-page .grid .stat-card,
  .project-view-wrapper .grid .kpi-card,
  .project-view-wrapper .grid .stat-card,
  [class*="projects"] .grid .kpi-card,
  [class*="projects"] .grid .stat-card {
    max-width: none;
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
    /* הסרת inline styles שה-JavaScript מוסיף */
    opacity: 1;
    transform: none;
    transition: all 0.3s ease;
  }
  
  /* תיקון: KPIs ופעולות מהירות במובייל - 2 בשורה */
  @media (max-width: 1023px) {
    .projects-page .kpi-grid,
    .projects-page .kpi-cards-grid,
    .projects-page .stats-grid,
    .projects-page .quick-stats,
    .projects-page .quick-actions-grid,
    .project-view-wrapper .kpi-grid,
    .project-view-wrapper .kpi-cards-grid,
    .project-view-wrapper .stats-grid,
    .project-view-wrapper .quick-stats,
    .project-view-wrapper .quick-actions-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 0.75rem;
    }
    
    /* פעולות מהירות - grid עם Tailwind classes - 2 בשורה */
    .projects-page .quick-actions .grid,
    .projects-page .quick-actions > .grid,
    .projects-page .quick-actions [class*="grid"],
    .project-view-wrapper .quick-actions .grid,
    .project-view-wrapper .quick-actions > .grid,
    .project-view-wrapper .quick-actions [class*="grid"] {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 0.75rem;
    }
    
    /* פעולות מהירות - כפתורים בתוך grid-cols-12 - 2 בשורה */
    .projects-page .quick-actions .grid-cols-12 > [class*="col-span"],
    .projects-page .quick-actions .grid > [class*="col-span"],
    .projects-page .quick-actions [class*="grid-cols"] > [class*="col-span"],
    .projects-page .quick-actions [class*="col-span-"],
    .project-view-wrapper .quick-actions .grid-cols-12 > [class*="col-span"],
    .project-view-wrapper .quick-actions .grid > [class*="col-span"],
    .project-view-wrapper .quick-actions [class*="grid-cols"] > [class*="col-span"],
    .project-view-wrapper .quick-actions [class*="col-span-"] {
      grid-column: span 6 / span 6; /* 2 בשורה (6 מתוך 12) */
      max-width: 50%;
      flex: 0 0 50%;
    }
  }
  
  /* תיקון: הסרת הגבלות על col-span */
  .projects-page .col-span-1 .kpi-card,
  .projects-page .col-span-1 .stat-card,
  .project-view-wrapper .col-span-1 .kpi-card,
  .project-view-wrapper .col-span-1 .stat-card {
    max-width: none;
    width: 100%;
    min-width: 0;
    /* הסרת inline styles שה-JavaScript מוסיף */
    opacity: 1;
    transform: none;
    transition: all 0.3s ease;
  }
  
  /* תיקון: וידוא ש-container-fluid לא מוזז */
  .projects-page .container-fluid,
  .project-view-wrapper .container-fluid {
    transform: none;
    left: auto;
    right: auto;
    margin-left: 0;
    margin-right: 0;
    position: relative;
  }
  
  /* תיקון: דריסת כללי flex-direction שגורמים לבעיה */
  .projects-page [dir="rtl"] .d-flex,
  .projects-page [dir="rtl"] .flex,
  .projects-page [dir="rtl"] .flex-row,
  .project-view-wrapper [dir="rtl"] .d-flex,
  .project-view-wrapper [dir="rtl"] .flex,
  .project-view-wrapper [dir="rtl"] .flex-row {
    flex-direction: row;
  }
  
  /* ============================================
     Nav Tabs - תפריט הטאבים רחב לרוחב הדף
     ============================================ */
  
  /* וידוא שה-parent container לא חותך את התוכן */
  .col-lg-7,
  .col-lg-9,
  .project-view-wrapper,
  .projects-page {
    overflow-x: visible;
    overflow-y: visible;
  }
  
  /* הרחבת nav-tabs-wrapper גם ב-mobile */
  @media (max-width: 1023px) {
    .nav-tabs-wrapper {
      width: calc(100% + 15%);
      max-width: calc(100% + 15%);
      /* ⚠️ הוסר margin שלילי - אסור לפי חוק זהב #2 */
      /* margin-left: -7.5%; */
      /* margin-right: -7.5%; */
      /* ✅ תיקון - שימוש ב-padding בקונטיינר הפנימי במקום margin שלילי */
      overflow-x: visible;
      overflow-y: visible;
    }
    
    .grid,
    [class*="grid"] {
      overflow-x: visible;
      overflow-y: visible;
    }
  }
  
  /* וידוא שהתפריט הטאבים לוקח את כל הרוחב של ה-wrapper */
  .nav-tabs-wrapper .nav-tabs-custom {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
  
  /* וידוא שה-wrapper לא מוגבל על ידי container-fluid */
  .container-fluid .nav-tabs-wrapper {
    width: calc(100% + 15%);
    max-width: calc(100% + 15%);
    margin-left: -7.5%;
    margin-right: -7.5%;
    position: relative;
    overflow-x: visible;
    overflow-y: visible;
  }
  
  /* הרחבת nav-tabs-wrapper מעבר ל-container */
  .container-fluid .lg\:col-span-9 .nav-tabs-wrapper,
  .container-fluid [class*="col-span-9"] .nav-tabs-wrapper,
  .container-fluid .grid .nav-tabs-wrapper,
  .container-fluid [class*="grid"] .nav-tabs-wrapper {
    width: calc(100% + 15%);
    max-width: calc(100% + 15%);
    margin-left: -7.5%;
    margin-right: -7.5%;
    overflow-x: visible;
    overflow-y: visible;
  }
  
  /* וידוא ש-container-fluid לא חותך את nav-tabs-wrapper */
  .container-fluid {
    overflow-x: visible;
    overflow-y: visible;
    padding-left: 0;
    padding-right: 0;
  }
  
  /* וידוא ש-lg:col-span-9 לא חותך את nav-tabs-wrapper */
  .lg\:col-span-9,
  [class*="col-span-9"] {
    overflow-x: visible;
    overflow-y: visible;
    padding-left: 0;
    padding-right: 0;
    width: 100% ;
    max-width: 100% ;
  }
  
  /* הרחבת tab-pane ו-row כדי שיתפסו את כל הרוחב */
  #tab-details {
    width: 100% ;
    max-width: 100% ;
    padding-left: 0 ;
    padding-right: 0 ;
  }
  
  #tab-details > .row.g-4 {
    width: 100% ;
    max-width: 100% ;
    margin-left: 0 ;
    margin-right: 0 ;
    padding-left: 0 ;
    padding-right: 0 ;
  }
  
  /* הרחבת col-md-9 ל-70% (הוקטן ב-10% נוסף מ-80%) */
  #tab-details .col-md-7 {
    width: 58.333333% ;
    max-width: 58.333333% ;
    flex: 0 0 58.333333% ;
    padding-left: 0.75rem ;
    padding-right: 0.75rem ;
  }
  
  /* הרחבת col-md-5 ל-41.67% */
  #tab-details .col-md-5 {
    width: 41.666667% ;
    max-width: 41.666667% ;
    flex: 0 0 41.666667% ;
    padding-left: 0.75rem ;
    padding-right: 0.75rem ;
  }
  
  /* וידוא ש-lg:col-span-9 לא מגביל את הרוחב */
  .lg\:col-span-9 #tab-details,
  [class*="col-span-9"] #tab-details,
  .lg\:col-span-9 .tab-content,
  [class*="col-span-9"] .tab-content,
  .lg\:col-span-9 .tab-pane,
  [class*="col-span-9"] .tab-pane {
    width: 100% ;
    max-width: 100% ;
    padding-left: 0 ;
    padding-right: 0 ;
  }
  
  /* וידוא ש-tab-content לא מגביל את הרוחב */
  .tab-content,
  .tab-pane {
    width: 100% ;
    max-width: 100% ;
    padding-left: 0 ;
    padding-right: 0 ;
  }
  
  /* ============================================
     Sidebar Layout - סיידבר ליד תוכן הטאבים
     ============================================ */
  
  /* סיידבר בכל הטאבים - וידוא שהם יופיעו בצד */
  .tab-pane > .row.g-4 {
    display: flex ;
    flex-wrap: nowrap ;
    flex-direction: row ;
    align-items: flex-start ;
    margin-left: 0 ;
    margin-right: 0 ;
  }
  
  /* וידוא שרק הטאב הפעיל מציג את הסיידבר */
  .tab-pane:not(.active) {
    display: none ;
  }
  
  .tab-pane.active {
    display: block ;
  }
  
  /* מניעת סרגלי גלילה כפולים בסיידבר */
  .tab-pane .col-md-3 .card {
    overflow: visible ;
    max-height: none ;
  }
  
  .tab-pane .col-md-3 .card-body {
    overflow: visible ;
    max-height: none ;
  }
  
  .tab-pane .entity-discussion {
    overflow: visible ;
    max-height: none ;
  }
  
  .tab-pane > .row.g-4 > .col-md-7,
  .tab-pane > .row.g-4 > .col-12 {
    width: 100% ;
    max-width: 100% ;
    flex: 0 0 100% ;
    flex-shrink: 0 ;
    flex-grow: 0 ;
    box-sizing: border-box ;
  }
  
  /* ⚠️ הוסר overflow-x: hidden - אסור על wrappers לפי חוק זהב #9 */
  /* טיפול בגלישות נעשה ברמת הרכיב/מודול הספציפי */
  .tab-pane > .row.g-4 > .col-md-5 {
    width: 41.666667% ;
    max-width: 41.666667% ;
    flex: 0 0 41.666667% ;
    flex-shrink: 0 ;
    flex-grow: 0 ;
    box-sizing: border-box ;
    /* overflow-x: hidden; - הוסר - אסור על wrapper */
    overflow-y: visible;
  }
  
  .tab-pane > .row.g-4 > .col-md-5 .card,
  .tab-pane > .row.g-4 > .col-md-5 .card-body {
    max-width: 100% ;
    width: 100% ;
    /* overflow-x: hidden; - הוסר - אסור על wrapper */
    box-sizing: border-box ;
  }
  
  /* במסכים בינוניים ומעלה - וידוא שהם באותה שורה */
  @media (min-width: 768px) {
    .tab-pane > .row.g-4 {
      display: flex ;
      flex-wrap: nowrap ; /* דסקטופ - שורה אחת */
      flex-direction: row ;
      width: 100% ;
    }
    
    .tab-pane > .row.g-4 > .col-md-7,
    .tab-pane > .row.g-4 > .col-12 {
      flex: 0 0 100% ;
      max-width: 100% ;
      width: 100% ;
      padding-left: calc(var(--bs-gutter-x) * 0.5) ;
      padding-right: calc(var(--bs-gutter-x) * 0.5) ;
    }
    
    .tab-pane > .row.g-4 > .col-md-5 {
      flex: 0 0 41.666667% ;
      max-width: 41.666667% ;
      width: 41.666667% ;
      padding-left: calc(var(--bs-gutter-x) * 0.5) ;
      padding-right: calc(var(--bs-gutter-x) * 0.5) ;
    }
  }
  
  /* במסכים קטנים - ערימה אנכית */
  @media (max-width: 767px) {
    .tab-pane > .row.g-4 {
      flex-wrap: wrap ;
    }
    
    .tab-pane > .row.g-4 > .col-md-7,
    .tab-pane > .row.g-4 > .col-md-5,
    .tab-pane > .row.g-4 > .col-12 {
      flex: 0 0 100% ;
      max-width: 100% ;
      width: 100% ;
    }
  }
  
  /* ============================================
     Sidebar Layout - סיידבר ליד פרטי הפרויקט
     ============================================ */
  
  /* וידוא שהסיידבר והבלוק של פרטי הפרויקט יהיו באותה שורה */
  #tab-details > .row.g-4 {
    display: flex ;
    flex-wrap: wrap ; /* ✅ גמיש - מתקפל במובייל */
    align-items: stretch ;
    margin-left: 0 ;
    margin-right: 0 ;
    width: 100% ;
    max-width: 100% ;
    padding-left: 0 ;
    padding-right: 0 ;
  }
  
  #tab-details > .row.g-4 > .col-md-3,
  #tab-details > .row.g-4 > .col-md-9 {
    display: flex ;
    flex-direction: column ;
    padding-left: 0.75rem ;
    padding-right: 0.75rem ;
    max-width: none ;
    overflow-x: visible ;
  }
  
  /* וידוא שהסיידבר לא מוגבל */
  #tab-details > .row.g-4 > .col-md-3 {
    min-width: 0;
    width: auto;
  }
  
  #tab-details > .row.g-4 > .col-md-3 .card,
  #tab-details > .row.g-4 > .col-md-3 .card-body {
    max-width: none;
    width: 100%;
    overflow-x: visible;
  }
  
  /* במסכים בינוניים ומעלה - וידוא שהם באותה שורה */
  @media (min-width: 768px) {
    #tab-details > .row.g-4 {
      flex-wrap: nowrap;
    }
    
    #tab-details > .row.g-4 > .col-md-3 {
      flex: 0 0 30%;
      max-width: 30%;
      width: 30%;
    }
    
    #tab-details > .row.g-4 > .col-md-9 {
      flex: 0 0 70%;
      max-width: 70%;
      width: 70%;
    }
  }
  
  /* במסכים קטנים - ערימה אנכית */
  @media (max-width: 767px) {
    #tab-details > .row.g-4 {
      flex-wrap: wrap;
    }
    
    #tab-details > .row.g-4 > .col-md-3,
    #tab-details > .row.g-4 > .col-md-9 {
      flex: 0 0 100%;
      max-width: 100%;
      width: 100%;
    }
  }

  /* ===== תיקון: וידוא שהטבלאות ממלאות את כל הרוחב ===== */
  /* וידוא שה-card-body ממלא את כל הרוחב */
  .project-view-wrapper .card-body,
  .project-view-wrapper .tab-pane .card-body {
    width: 100% ;
    max-width: 100% ;
    padding-left: 0 ;
    padding-right: 0 ;
  }

  /* וידוא שה-table-responsive ממלא את כל הרוחב */
  .project-view-wrapper .table-responsive,
  .project-view-wrapper .tab-pane .table-responsive {
    width: 100% ;
    max-width: 100% ;
    overflow-x: auto;
  }

  /* וידוא שהטבלאות ממלאות את כל הרוחב */
  .project-view-wrapper .table,
  .project-view-wrapper .tab-pane .table {
    width: 100% ;
    max-width: 100% ;
    table-layout: auto;
  }

  /* וידוא שה-card ממלא את כל הרוחב */
  .project-view-wrapper .card,
  .project-view-wrapper .tab-pane .card {
    width: 100% ;
    max-width: 100% ;
  }

  /* וידוא שה-row ממלא את כל הרוחב */
  .project-view-wrapper .tab-pane > .row.g-4,
  .project-view-wrapper .tab-pane .row.g-4 {
    width: 100% ;
    max-width: 100% ;
    margin-left: 0 ;
    margin-right: 0 ;
  }

  /* וידוא שה-col-12 ממלא את כל הרוחב */
  .project-view-wrapper .tab-pane .col-12 {
    width: 100% ;
    max-width: 100% ;
    flex: 0 0 100% ;
  }

  /* ===== Project Card Overflow ===== */
  .project-card-overflow {
    overflow: hidden;
  }

  /* ============================================
     Premium Tabs & Details Sections - כמו בדף העובדים
     ============================================ */
  
  /* ============================================
     Premium Tabs & Details Sections - גלובלי
     הערה: כל העיצובים של premium-tabs, premium-tab-content, 
     details-content, details-section וכו' הועברו ל-shared-components.css
     כגלובליים לכל האתר. ראה: app/static/css/shared-components.css
     ============================================ */
}