unavailable-item {
color: #555 !important; /* ברירת מחדל של Bootstrap /
/ שנה את זה ל: /
/ color: #555 !important; / / דוגמה לגוון כהה יותר */
}

.missing-essential-staff {
    border: 2px solid red !important;
    box-shadow: 0 0 5px rgba(255, 0, 0, 0.5);
}




/* קוד לצורך בניית אפקט החלקה */
/* קונטיינר שמחזיק את כל העמודות זו לצד זו */
.swipe-container {
    display: flex; /* מסדר את הילדים (העמודות) בשורה */
    overflow-x: auto; /* מאפשר גלילה אופקית */
    scroll-snap-type: x mandatory; /* הקסם קורה כאן: מכריח את הגלילה "להיצמד" לפריט הקרוב */
    -webkit-overflow-scrolling: touch; /* משפר את חווית הגלילה במכשירי אפל */
    scroll-behavior: smooth; /* גלילה חלקה */
}

/* כל עמודה של כיתה */
.swipe-item {
    flex: 0 0 100%; /* כל פריט תופס 100% מרוחב הקונטיינר */
    width: 100%;
    scroll-snap-align: start; /* כל פריט ייצמד לתחילת אזור הגלילה */
    border-left: 1px solid #eee; /* קו הפרדה עדין בין הכיתות */
}

/* מחווני ניווט (נקודות) */
.indicator-dot {
    height: 10px;
    width: 10px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    margin: 0 4px;
    transition: background-color 0.3s ease;
}

.indicator-dot.active {
    background-color: #0d6efd; /* צבע כחול של Bootstrap */
}

.quick-nav-container {
    background-color: #f8f9fa; /* צבע רקע בהיר כדי להבדיל מהתוכן */
    border-bottom: 1px solid #dee2e6;
    padding: 0.5rem 0;
}

.quick-nav {
    display: flex;
    overflow-x: auto; /* מאפשר גלילה אופקית אם יש הרבה כפתורים */
    -ms-overflow-style: none;  /* מסתיר פס גלילה ב-IE ו-Edge */
    scrollbar-width: none;  /* מסתיר פס גלילה ב-Firefox */
}

/* מסתיר פס גלילה בדפדפני Webkit (כרום, ספארי) */
.quick-nav::-webkit-scrollbar {
    display: none;
}

.quick-nav-button {
    flex-shrink: 0; /* מונע מהכפתורים להתכווץ */
    padding: 0.5rem 1rem;
    font-size: 1rem;
    font-weight: 500;
    color: #6c757d; /* צבע אפור טקסט */
    background-color: transparent;
    border: none;
    border-bottom: 3px solid transparent; /* קו תחתון שקוף כברירת מחדל */
    white-space: nowrap; /* מונע מהטקסט להישבר לשתי שורות */
    transition: all 0.2s ease-in-out;
}

/* עיצוב הכפתור הפעיל */
.quick-nav-button.active {
    color: #0d6efd; /* צבע כחול של Bootstrap */
    border-bottom-color: #0d6efd;
}