/* רשת-ביטחון בלי JS: מצב עריכה (#farm-hub-branches-edit-mode) מודפס
   תמיד hidden בשרת - היפוך ל-hidden=false קורה רק בלחיצה על הכפתור
   (farm-hub-branches.js). אם הסקריפט נכשל לטעון (404, שגיאה, קונפליקט),
   טופס העריכה היה נשאר בלתי-נגיש לצמיתות. גרסה קודמת כאן הניחה ברירת
   מחדל *פתוחה* עד שה-JS "מוכיח" שהוא רץ - אותה בעיית הבהוב שגל תפס
   בדשבורד (fh-dashboard-js-failed, farm-hub-dashboard.css) - שני הטבלאות
   (תצוגה+עריכה) היו נראות לרגע ביחד בכל טעינת עמוד. עכשיו הכיוון הפוך:
   ברירת המחדל נשארת [hidden] תמיד (בלי הבהוב), ו-fh-branches-js-failed -
   מחלקה שנוספת ל-body רק אם הדפדפן *בפועל* מזהה כישלון טעינה (onerror
   על תגית ה-<script>, Farm_Hub_Design_Tokens::inject_js_failure_class()) -
   היא זו שפותחת את הרשת-ביטחון. CSS מסוג author-origin גובר על ברירת
   המחדל [hidden] של הדפדפן (display:none), בלי צורך ב-!important. */
body.fh-branches-js-failed #farm-hub-branches-edit-mode {
	display: block;
}

/* לא width:100% (ברירת המחדל של wp-list-table.widefat) - עם תיבות טקסט
   קטנות ומוגבלות ברוחב, זה גרם לפער ריק וגדול בין העמודות. רוחב לפי
   תוכן בפועל, כך שהעמודות צמודות זו לזו. */
table.farm-hub-branches-table.widefat {
	width: auto;
}

/* מסך צר: אותה סיבה בדיוק כמו ב"מורים מחליפים"/"תפקידים" - width:auto
   מתאים לצפיפות-מכוונת בדסקטופ, אבל במסך צר זה גורם לטבלה "לצוף" צרה
   יותר מכל שאר האלמנטים בעמוד. */
@media ( max-width: 782px ) {
	table.farm-hub-branches-table.widefat {
		width: 100%;
	}
}

.farm-hub-branches-table th,
.farm-hub-branches-table td {
	text-align: right;
	vertical-align: top;
	padding: 10px 12px;
}

/* עמודת מספור - CSS counter, לא מספר שמחושב ב-PHP, כדי שיישאר נכון
   אוטומטית גם אחרי הוספה/הסרה של שורות ב-JS (בלי טעינה מחדש מהשרת). */
.farm-hub-branches-table tbody {
	counter-reset: farm-hub-branch-row;
}

.farm-hub-branch-row {
	counter-increment: farm-hub-branch-row;
}

/* לא צריך יותר !important כאן - הטבלאות כבר לא נושאות wp-list-table (ראו
   class-farm-hub-branches-views.php), אז כלל ה-::before הריק שוורדפרס-core
   הוסיף פעם למסך צר (list-tables.css) כלל לא חל יותר. */
.farm-hub-branch-row-number::before {
	content: counter( farm-hub-branch-row );
}

/* גלילה אופקית מוכלת - רק מצב-עריכה (7 עמודות כולל select-ים רחבים,
   ראו render_form ב-class-farm-hub-branches-views.php). טבלאות התצוגה
   (מנהל/מורה) צרות/קצרות מספיק שלא זקוקות לזה בכלל, אותו עיקרון בדיוק
   כמו "תפקידים" (farm-hub-roles.css). */
.farm-hub-branches-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* שדה שם הענף - רוחב מוגבל (לא נמתח למלא את התא), מספיק לשם ענף רגיל. */
.farm-hub-branches-table td:first-child input[type="text"] {
	width: 100%;
	max-width: 220px;
	min-width: 140px;
	font-weight: 600;
}

/* שדה האימוג'י - צר מאוד בכוונה (לא כמו שדה שם הענף), מספיק בדיוק
   לתו/שניים-שלושה של אימוג'י, לא לטקסט חופשי ארוך. text-align:center
   כי תוכן קצר וממורכז נראה טוב יותר מיושר-ימין ריק לצדו. */
.farm-hub-branches-table td:nth-child( 3 ) input[type="text"] {
	width: 60px;
	text-align: center;
	font-size: 18px;
}

/* עטיפת שדה האייקון + כפתור הפאנל - position:relative כדי שהפאנל
   הצף (position:absolute) ימוקם ביחס אליה, לא ביחס לכל העמוד. */
.farm-hub-branch-icon-cell {
	position: relative;
	display: flex;
	align-items: center;
	gap: 4px;
}

.farm-hub-branch-icon-picker-btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	padding: 4px;
	color: #94A3B8;
	cursor: pointer;
}

.farm-hub-branch-icon-picker-btn:hover,
.farm-hub-branch-icon-picker-btn:focus-visible {
	color: var( --fh-color-primary );
}

.farm-hub-branch-icon-picker-btn .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
}

/* פאנל בחירת האימוג'ים - צף מעל שאר הטבלה (z-index), כדי לא לדחוף
   שורות אחרות כשהוא נפתח. מיושר לימין התא (right:0), מתאים ל-RTL. */
.farm-hub-branch-icon-picker[hidden] {
	display: none;
}

.farm-hub-branch-icon-picker {
	position: fixed;
	z-index: 20;
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 2px;
	background: #FFFFFF;
	border: 1px solid #E2E8F0;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.12 );
	padding: 6px;
	margin-top: 4px;
}

.farm-hub-branch-icon-picker button {
	background: none;
	border: none;
	font-size: 18px;
	line-height: 1;
	padding: 6px;
	border-radius: 6px;
	cursor: pointer;
}

.farm-hub-branch-icon-picker button:hover,
.farm-hub-branch-icon-picker button:focus-visible {
	background: #F0FDF4;
}

/* כפתור "ללא אייקון" - צבע אפור מנוטרל (לא צבעוני כמו האימוג'ים), כדי
   שיקרא מיד כפעולת "נקה/הסר" ולא כעוד אימוג'י ברשימה. סלקטור עם
   button.class (לא רק .class) - כדי לגבור על .farm-hub-branch-icon-picker
   button הכללי יותר (אותה משפחת באג ספציפיות שכבר נתקלנו בה השבוע). */
.farm-hub-branch-icon-picker button.farm-hub-branch-icon-picker-clear {
	color: #94A3B8;
	font-size: 13px;
	font-weight: 700;
	border-left: 1px solid #E2E8F0;
}

.farm-hub-branch-icon-picker button.farm-hub-branch-icon-picker-clear:hover,
.farm-hub-branch-icon-picker button.farm-hub-branch-icon-picker-clear:focus-visible {
	color: #B91C1C;
}

/* רשימת שמות (רכז/צוות) בתוך תא אחד - כל שם בשורה עצמאית: מקף הסרה
   מימין (ראשון ב-DOM, כך שב-RTL הוא נופל מימין אוטומטית) + שדה השם תופס
   את שאר הרוחב, אותו עיקרון בדיוק כמו עמודת "מלווים" במערכת היומית. */
.farm-hub-branch-name-row {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-bottom: 4px;
}

.farm-hub-branch-name-row:last-child {
	margin-bottom: 0;
}

/* שם בודד ברשימת רכז/צוות - רוחב קבוע ומוגבל (לא flex:1, שהיה נמתח
   למלא את כל רוחב התא) - מספיק בדיוק לשם אחד. ה-select רחב יותר
   מה-input (היה, לפני המעבר ל-select) - כדי שיישאר מקום גם לחץ
   הפתיחה (padding-left:32px ב-.wrap select) בלי לחתוך שם ארוך. */
.farm-hub-branch-name-row input[type="text"] {
	flex: 0 1 200px;
	min-width: 120px;
}

.farm-hub-branch-name-row select {
	flex: 0 1 220px;
	min-width: 160px;
}

.farm-hub-branch-remove-name {
	flex: 0 0 auto;
	background: none;
	border: none;
	padding: 0 4px;
	color: #B91C1C;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.8;
	cursor: pointer;
}

.farm-hub-branch-remove-name:hover {
	color: #7F1616;
}

/* "+" להוספת שם - אותו מראה מינימלי-אפור כמו "+ הוסף מלווה" במערכת
   היומית, כדי לא להתחרות ויזואלית עם תוכן התא. */
.farm-hub-branch-add-name {
	display: block;
	background: none;
	border: none;
	padding: 2px 4px 0;
	color: #94A3B8;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	margin-top: 2px;
}

.farm-hub-branch-add-name:hover {
	color: #64748B;
}

/* קישור-אייקון ל"ענף בחווה" (עמודה נפרדת, ליד "הסר") - אותו מראה בדיוק
   כמו fh-bulletin-viewall-icon בלוח ההודעות, לעקביות. רוחב לפי תוכן (לא
   28px קבוע) - כדי שיהיה מקום גם ל-badge של הודעות חדשות (fh-badge-count)
   כשיש כאלה, בלי לחתוך אותו. */
.fh-branch-board-link-icon {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 5px 7px;
	border-radius: 999px;
	color: #94A3B8;
}

.fh-branch-board-link-icon:hover,
.fh-branch-board-link-icon:focus-visible {
	color: var( --fh-color-primary );
	background: #F0FDF4;
}

.fh-branch-board-link-icon .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
}

#farm-hub-add-branch-row {
	margin-top: 16px;
}

#farm-hub-branch-name-row-template,
#farm-hub-branch-row-template {
	display: none;
}