/* =========================================================
   REINS — Tabs CSS (רכיב הטאבים, עצמאי מהמודל)
   רכיב כללי — בשימוש בתוך המודל
   (5 עמודי מערכת הדרושים: job_board, available_instructors,
   liked_jobs, liked_instructors, manage_jobs — תוכן מאורגן
   בטאבים בתוך המודל), מחוץ למודל לגמרי (הטאבים הקומפקטיים
   של "השיח בקהילה" בדף הבית — אין שם מודל בכלל), וגם בטופס
   מדריך (.reins-instructor-tabs-header / .reins-instructor-tab,
   ראו סעיף 1) — אותה שפה ויזואלית בדיוק, לכן אותו class group.

   תלוי במשתני ה-:root שמוגדרים ב-reins-general.css
   (--reins-border, --reins-radius-sm) — יש לוודא שהוא נטען
   יחד עם reins-general.css בכל עמוד (ראו inc/home/shared/css-loader.php
   ו-inc/stable-link/css-loader.php — reins-stable-link.css מסתמך על
   הקובץ הזה גם עבור טאבי טופס המדריך, לא רק עבור טאבי המודל).

   תוכן עניינים:
   1) טאבים — גרסה מרווחת (כולל טאבי טופס המדריך + תאימות ל-Astra)
   2) טאבים — מודיפייר קומפקטי (סיידבר/קהילה, User Home)

   [נגישות] opacity:.65 על טאב לא-פעיל ו-opacity:1 על hover הוסרו
   ב-2026-08 — הדילול הפר צבע מתחת ל-4.5:1 מול הרקע (WCAG 1.4.3).
   ההבחנה בין מצב פעיל/לא-פעיל/hover נשארת דרך font-weight,
   border-bottom-color ורקע ה-hover בלבד.
========================================================= */


/* =========================================================
   1) טאבים — גרסה מרווחת
   כולל override-ים לדריסות של Astra/Buttons (box-shadow,
   text-transform) — לא בלוק נפרד, כדי למנוע כפילות selector.
========================================================= */

.reins-tabs,
.reins-instructor-tabs-header{
    display:flex;
    flex-wrap:wrap;
    gap:6px;                         /* המרווח בין הכפתורים עצמם נכנס ל-padding, לא לכאן */
    margin:16px 0 20px;
    border-bottom:1px solid var(--reins-border);
    padding-bottom:0;                /* הקו התחתון עובר לכפתורים עצמם */
}

.reins-tab,
.reins-instructor-tab{
    appearance:none;
    -webkit-appearance:none;
    border:none !important;
    background:transparent !important;
    box-shadow:none !important;      /* מניעת דריסה של Astra */
    text-transform:none !important;  /* מניעת דריסה של Astra */
    cursor:pointer;

    /* פחות צפוף: ריווח פנימי אמיתי במקום padding-bottom דק */
    padding:12px 18px !important;
    margin:0;

    min-height:44px;                 /* טאץ' טארגט נוח */
    display:inline-flex;
    align-items:center;

    font-weight:500;
    color:inherit !important;
    line-height:1.3;
    border-radius:var(--reins-radius-sm) var(--reins-radius-sm) 0 0 !important;
    transition:.2s ease;

    /* קו תחתון פר-טאב, לא רק לתגית ההורה */
    border-bottom:2px solid transparent !important;
    margin-bottom:-1px; /* כדי שהקו יתלכד עם הבורדר של ה-header */
}

.reins-tab:hover,
.reins-instructor-tab:hover{
    background:rgba(0,0,0,.03) !important;
}

.reins-tab.is-active,
.reins-instructor-tab.is-active{
    font-weight:700;
    border-bottom-color:currentColor !important;
}

/* =========================================================
   2) טאבים — מודיפייר קומפקטי (סיידבר/קהילה, User Home)
========================================================= */

.reins-tabs--compact{
    flex-wrap:nowrap;
    gap:2px;
    margin:10px 0 12px;
    border-bottom:1px solid var(--reins-border);
}
.reins-tabs--compact .reins-tab{
    flex:1 1 0;
    min-width:0;
    justify-content:center;
    padding:7px 4px !important;
    min-height:auto;
    font-size:12px;
    font-weight:600;
    gap:4px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.reins-tabs--compact .reins-tab i{ font-size:12px; flex-shrink:0; }

.reins-sec{
    display:none;
}

.reins-sec.is-active{
    display:block;
}

/* --- טאבים בתוך סיידבר צר (למשל "השיח בקהילה" ב-User Home) ---
   הסיידבר בפועל נושא את הקלאס reins-user__sidebar. */

.reins-user__sidebar .reins-tabs{
    gap:2px;
    justify-content:space-between;
}

.reins-user__sidebar .reins-tab{
    padding:10px 12px !important;
    font-size:.88em;
    gap:5px; /* המרווח בין האייקון לטקסט */
}