/**
 * מערכת עיצוב מרכזית ל-Farm Hub: משתני CSS (צבעים, צלליות, רדיוסים) +
 * עיצוב-בסיס לרכיבי וורדפרס הגנריים (כפתורים/שדות/טבלאות/התראות) כדי שכל
 * מסך בפלאגין ייראה אחיד בלי לשכפל קוד. נטען בכל מסכי הפלאגין (ראו
 * class-farm-hub-design-tokens.php), לפני קובצי ה-CSS הספציפיים של כל מסך.
 * גופן Heebo מתארח מקומית (assets/fonts/) - לא נטען מ-Google Fonts דרך
 * הרשת, ראו @font-face למטה.
 */

:root {
	--fh-color-primary: #2D6A4F;
	--fh-color-primary-hover: #1B4332;
	--fh-color-accent: #2A9D8F;

	--fh-color-bg: #F4F6F8;
	--fh-color-card-bg: #FFFFFF;

	--fh-color-text-primary: #2B2D42;
	--fh-color-text-secondary: #6C757D;

	--fh-color-success-bg: #E8F5E9;
	--fh-color-success-text: #2E7D32;
	--fh-color-danger-bg: #FFEBEE;
	--fh-color-danger-text: #C62828;
	--fh-color-info-bg: #E3F2FD;
	--fh-color-info-text: #1565C0;
	--fh-color-warning-bg: #FFF3E0;
	--fh-color-warning-text: #E65100;
	--fh-color-substitute-bg: #EDE7F6;
	--fh-color-substitute-text: #5E35B1;

	--fh-radius-md: 12px;
	--fh-radius-sm: 8px;

	--fh-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
	--fh-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* ---------- טיפוגרפיה ---------- */

/* קבצי הגופן עצמם (לא נטענים מ-Google Fonts דרך הרשת - מתארחים מקומית
   ב-assets/fonts/). שני קבצים בלבד (לא אחד לכל משקל) - זהו גופן משתנה
   (variable font), אז font-weight מוגדר כטווח (400 700) וקובץ אחד מכסה
   את כל המשקלים. unicode-range מפריד עברית מלטינית/מספרים (כמו ש-Google
   Fonts עצמו מפצל) - כך שדף שמכיל רק עברית לא טוען את קובץ הלטינית לשווא
   ולהפך. */
@font-face {
	font-family: 'Heebo';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url( '../fonts/heebo-hebrew.woff2' ) format( 'woff2' );
	unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
	font-family: 'Heebo';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url( '../fonts/heebo-latin.woff2' ) format( 'woff2' );
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.wrap {
	font-family: 'Heebo', sans-serif;
	font-size: 16px;
	color: var(--fh-color-text-primary);
}

/* שמות בתי ספר/מורים בטבלאות רשימה (לא בלוח - שם יש היררכיה נפרדת, ראו
   farm-hub-schedule.css: שם בית ספר/כיתה מודגש, שם מורה/שעה משני ועדין) */
.wrap .farm-hub-align-right a {
	font-size: 16px;
	font-weight: 600;
}

.wrap h1 {
	font-size: 28px;
	font-weight: 700;
}

.wrap h2 {
	font-size: 18px;
	font-weight: 600;
}

/* כותרות קטנות בתוך כרטיסים/סרגלי צד - נפרד מכותרות הדף הראשיות */
.fh-card h2,
.farm-hub-schedule-sidebar h2 {
	font-size: 16px;
	font-weight: 700;
	color: #0F172A;
}

/* כותרת כרטיס "שעות תקן" - בולטת מעט יותר מכותרות כרטיס רגילות */
.fh-card h2,
.fh-card.farm-hub-quota-card h2 {
	font-size: 20px;
	font-weight: 700;
	color: #0F172A;
}

/* טקסט הסבר משני - נשאר עדין ולא מתחרה עם הרכיבים הדומיננטיים */
.wrap .description,
.wrap p.description {
	font-size: 13px;
	color: var(--fh-color-text-secondary);
}

/* ---------- רקע כללי ---------- */

#wpbody-content {
	background: var(--fh-color-bg);
}

/* ---------- טפסים ---------- */

/* וורדפרס טוען את גרסת ה-CSS הליברת ל-.form-table (תווית מיושרת שמאלה)
   כברירת מחדל, כי זה תלוי בשפת הממשק המוגדרת באתר, לא בכיוון dir="rtl"
   שאנחנו קובעים בעצמנו על .wrap. בלי השורה הזו, תוויות (שם מלא/טלפון/וכו')
   מיושרות שמאלה בכל טופס במערכת - הכי בולט בנייד, כשהתווית עוברת לשורה
   מלאה משלה מעל השדה. */
.wrap .form-table th {
	text-align: right;
}

/* ---------- כפתורים ושדות קלט ---------- */

.wrap .button,
.wrap .button-primary,
.wrap .page-title-action,
.wrap input[type="text"],
.wrap input[type="search"],
.wrap input[type="number"],
.wrap input[type="date"],
.wrap select,
.wrap textarea {
	border-radius: var(--fh-radius-sm);
}

.wrap input[type="text"],
.wrap input[type="search"],
.wrap input[type="number"],
.wrap input[type="date"],
.wrap select,
.wrap textarea {
	border: 1px solid #E2E8F0;
	padding: 10px 14px;
	font-size: 16px;
	font-weight: 500;
	line-height: normal;
}

.wrap input[type="text"]::placeholder,
.wrap input[type="search"]::placeholder,
.wrap input[type="number"]::placeholder,
.wrap textarea::placeholder {
	font-size: 15px;
	font-weight: 400;
}

/* חץ מותאם ל-select, כדי שלא יתנגש עם טקסט בעברית שמסתיים קרוב לצד שמאל ב-RTL */
.wrap select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236C757D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: left 12px center;
	background-size: 16px;
	padding-left: 32px;
}

/* שדה הזנת שעה (טקסט חופשי + datalist, לא input[type=time]) - רוחב ומרווח
   נוחים כדי שהשעה לא תיחתך אחרי הגדלת הגופן הכללית של שדות הקלט. */
.wrap .farm-hub-time-input {
	min-width: 180px;
	padding: 8px 10px;
	font-size: 15px;
}

/* רכיב שעה גלובלי (▲/▼ לדילוג בשעות עגולות) - חיצים יושבים בצד שמאל של
   השדה (הצד ה"פנוי" ב-RTL, כי הטקסט המוקלד מיושר לימין), כדי שלא יחפפו
   לטקסט. הקלדה חופשית בשדה עצמו נשארת אפשרית בדיוק כמו קודם - החיצים הם
   תוספת, לא תחליף. הלוגיקה נמצאת ב-farm-hub-time-input.js (נטען גלובלית
   בכל מסך ע"י Farm_Hub_Design_Tokens::enqueue() - לא בקובץ JS ספציפי
   למודול), כדי ששדה שעה יתנהג אותו הדבר בכל מקום במערכת. */
.wrap .farm-hub-time-stepper {
	position: relative;
	display: inline-flex;
	align-items: center;
}

/* בתוך כרטיס טופס (fh-form-field, למשל חלונית אירוע בלוח השנה) השדה אמור
   למלא את כל רוחב העמודה - כמו כל שדה קלט רגיל שם - ולא להצטמצם לרוחב
   התוכן שלו כברירת מחדל של inline-flex. */
.fh-form-field .farm-hub-time-stepper {
	display: flex;
	width: 100%;
}

.wrap .farm-hub-time-stepper .farm-hub-time-input {
	padding-left: 26px;
	min-width: 180px;
}

.fh-form-field .farm-hub-time-stepper .farm-hub-time-input {
	flex: 1;
	width: 100%;
}

.farm-hub-time-stepper-buttons {
	position: absolute;
	left: 2px;
	top: 50%;
	transform: translateY( -50% );
	display: flex;
	flex-direction: column;
	line-height: 0;
}

/* חיצי הדילוג בשעות עגולות - כהים ובולטים, עם שטח לחיצה נוח (לא רק הגליף
   הקטן עצמו) ורקע במעבר עכבר, כי אלה הפעולה "החזקה" בשדה (קפיצה מלאה של
   שעה) ואמורים להיות נוחים ללחיצה גם בעכבר וגם במגע. */
.farm-hub-time-stepper-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 3px;
	background: none;
	padding: 0;
	margin: 0;
	width: 20px;
	height: 15px;
	font-size: 9px;
	line-height: 1;
	color: #374151;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.farm-hub-time-stepper-btn:hover,
.farm-hub-time-stepper-btn:focus-visible {
	background: #E2E8F0;
	color: var( --fh-color-primary );
}

/* חץ ה-datalist המובנה של הדפדפן (פותח את רשימת השעות המוצעות) - הוסר
   לחלוטין: פתיחת ההצעות מטופלת עכשיו בפוקוס/לחיצה על השדה עצמו (ראו
   farm-hub-time-input.js, showPicker()), כך שהאייקון הזה מיותר ורק היה
   מתחרה ויזואלית עם חיצי הדילוג. !important הכרחי כאן - גיליון ה-UA הפנימי
   של Chromium לפסאודו-אלמנט הזה גובר על display:none רגיל בלי זה. נתמך
   (מבחינת הסרה) רק בדפדפני Chromium - בדפדפנים אחרים ממילא אין אייקון כזה. */
.farm-hub-time-input::-webkit-calendar-picker-indicator {
	display: none !important;
}

/* ---------- שורת פעולות מעל טבלת רשימה (כפתור "+ הוסף..." + חיפוש) ---------- */

.fh-list-actions-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	margin: 16px 0;
}

/* בתוך שורת הפעולות אין צורך במרווח האנכי הנפרד שהכפתור מגדיר לעצמו כברירת
   מחדל (fh-list-actions-row כבר עם gap אחיד) - מאפסים כדי שהכפתור והחיפוש
   יתיישרו אנכית בדיוק זה מול זה. */
.fh-list-actions-row .page-title-action {
	margin: 0;
}

/* ---------- חיפוש חי מעל טבלת רשימה (בתי ספר וכו') - רכיב גלובלי לשימוש חוזר ---------- */

.fh-list-search-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.fh-list-search-icon {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY( -50% );
	font-size: 16px;
	width: 16px;
	height: 16px;
	line-height: 1;
	color: #94A3B8;
	pointer-events: none;
}

/* !important הכרחי כאן: .wrap input[type="search"] (הכלל הבסיסי המשותף)
   כולל את הסלקטור מסוג "input" בעצמו, מה שנותן לו ספציפיות גבוהה יותר
   מ-.wrap .fh-list-search-input (שתי מחלקות בלבד) - למרות שהכלל שלנו מופיע
   אחר-כך בקובץ, הוא מפסיד בלי !important כי סדר-מקור מכריע רק בתיקו. */
.wrap .fh-list-search-input {
	padding-right: 38px !important;
	min-width: 460px;
	max-width: 100%;
}

/* כפתורים ראשיים (שמירה, הוסף בית ספר/מורה/משימה וכו') - נוכחות מלאה וברורה.
   inline-flex+gap (לא margin על האייקון) כדי שכפתורי שמירה עם אייקון דיסקט
   (fh-save-icon) יתרחבו ויתיישרו נכון - לא משפיע ויזואלית על כפתורים בלי
   אייקון (טקסט בודד בתוך flex עם פריט אחד נראה זהה ל-inline-block רגיל). */
.wrap .button-primary,
.wrap .page-title-action {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--fh-color-primary);
	border-color: var(--fh-color-primary);
	color: #fff;
	padding: 8px 16px;
	box-shadow: var(--fh-shadow-sm);
	text-shadow: none;
	transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* וורדפרס ממקם page-title-action בהנחה שהוא צמוד ל-h1 (position:relative + top
   שלילי) - אצלנו יש לו לפעמים תוכן (כרטיסים) בינו לבין ה-h1, אז זה "מרים" אותו
   וגורם לחפיפה. מאפסים את המיקום כדי שהוא יתנהג כמו רכיב רגיל בזרימת העמוד. */
.wrap .page-title-action {
	position: static;
	top: auto;
	display: inline-block;
	margin: 16px 0 24px;
}

.wrap .button-primary:hover,
.wrap .button-primary:focus,
.wrap .page-title-action:hover,
.wrap .page-title-action:focus {
	background: var(--fh-color-primary-hover);
	border-color: var(--fh-color-primary-hover);
	color: #fff;
	box-shadow: var(--fh-shadow-md);
}

/* אייקון דיסקט (Farm_Hub_Design_Tokens::save_icon()) - גודל קבוע, לא גדל
   עם הכפתור. flex-shrink:0 מונע ממנו להתכווץ אם הכפתור אי-פעם צר מדי. */
.fh-save-icon {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

/* כפתורים משניים (ניווט ימים, סינון וכו') - לבנים, גבול עדין, טקסט כהה */
.wrap .button:not( .button-primary ):not( .page-title-action ) {
	background: #fff;
	border: 1px solid #CBD5E1;
	color: var(--fh-color-text-primary);
	padding: 8px 16px;
	font-size: 15px;
}

.wrap .button:not( .button-primary ):not( .page-title-action ):hover {
	background: #F8FAFC;
	border-color: #94A3B8;
}

/* קישור-כפתור עדין (נקה הבלטה, שחזור, הסר וכו') - טקסט אפור-כחלחל משני בלבד */
.wrap .button-link {
	font-size: 15px;
	color: #64748B;
}

.wrap .button-link:hover {
	color: var(--fh-color-primary);
}

/* כפתור Outline ירוק נקי לשימוש חוזר (שמירה בכרטיס שעות תקן, הבלט בלוח וכו') */
.wrap .fh-btn-outline {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #fff;
	border: 1px solid var(--fh-color-primary);
	border-radius: var(--fh-radius-sm);
	color: var(--fh-color-primary);
	font-size: 15px;
	font-weight: 600;
	padding: 8px 18px;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.2s ease;
}

.wrap .fh-btn-outline:hover {
	background: #F0FDF4;
}

/* קישור "חזרה לעמוד הבית" גלובלי (Farm_Hub_Dashboard::back_link_html) -
   כחול, לא ירוק, כדי שיבלוט בבירור כשונה מכפתורי הפעולה הרגילים בעמוד
   (שכולם ירוקים) - זה ניווט, לא פעולה. פילה קטנה ואליפטית, לא מלבן כמו
   שאר הכפתורים. */
.wrap .fh-back-home-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #fff;
	border: 1.5px solid #2271B1;
	border-radius: 20px;
	padding: 4px 14px;
	color: #2271B1;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.2s ease;
}

.wrap .fh-back-home-link:hover {
	background: #EEF6FC;
	color: #2271B1;
}

.wrap .fh-back-home-link .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

/* קישור "חזרה ל-X ספציפי" (לא לעמוד הבית) - למשל "חזרה לרשימת בתי הספר"/
   "חזרה לרשימת השיעורים"/"חזרה ל'ענף בחווה'". בכוונה **לא** באותו עיצוב
   כמו fh-back-home-link (פילה כחולה) - כדי שהשניים יישארו נבדלים ברור
   זה מזה כשהם מופיעים יחד באותו מסך (לפי בקשת גל). תמיד עם → (חץ
   ימינה) - כיוון "חזרה" האחיד בכל המערכת, לא ←.
   הסלקטור כולל את אותם :not() כמו הכלל הכללי ל-.button (למעלה בקובץ, שם
   מגדיל את כל הכפתורים המשניים ל-15px) - כדי לנצח אותו בספציפיות; זו
   בעצם הסיבה האמיתית שכפתורי "חזרה" נראו גדולים - לא קשור לקוד שכתבתי
   כרגע. בלי אותם :not() כאן, הכלל הכללי מנצח ומבטל את ההקטנה. */
.wrap a.button.fh-back-link:not( .button-primary ):not( .page-title-action ) {
	padding: 0 10px;
	min-height: 30px;
	line-height: 2.15384615;
	font-size: 13px;
}

/* פילה קטנה לניווט "קודם/הבא" (בין ימים, חודשים וכו') - במקור נבנתה רק
   ללוח השנה (farm-hub-calendar-month-nav), הועברה לכאן כרכיב משותף כדי
   שגם מסכים אחרים (למשל היומי) ייראו אחיד, לפי בקשת גל. לא class="button" -
   העיצוב כאן עצמאי ומלא, לא תוספת לכפתור WP רגיל. */
.wrap .fh-nav-pill {
	display: inline-flex;
	align-items: center;
	background: #fff;
	border: 1px solid #CBD5E1;
	border-radius: 20px;
	padding: 5px 14px;
	font-size: 13px;
	font-weight: 600;
	color: var(--fh-color-text-secondary);
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.wrap .fh-nav-pill:hover {
	background: #F0FDF4;
	border-color: var(--fh-color-primary);
	color: var(--fh-color-primary);
}

/* כפתור פעולה מלא לפעולות הסרה/מחיקה בולטות (למשל "הסרת כיתה מהמשבצת") -
   אותו מראה נקי ומעוגל כמו button-primary הירוק, אבל באדום, כדי לסמן
   בבירור שזו פעולת מחיקה. */
.wrap .fh-btn-danger {
	background: var(--fh-color-danger-text);
	border: 1px solid var(--fh-color-danger-text);
	border-radius: var(--fh-radius-sm);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	padding: 8px 18px;
	cursor: pointer;
	box-shadow: var(--fh-shadow-sm);
	transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.wrap .fh-btn-danger:hover {
	background: #A31D1D;
	border-color: #A31D1D;
	box-shadow: var(--fh-shadow-md);
}

/* גרסת Outline (משנית) של כפתור מחיקה - רקע שקוף, מסגרת וטקסט אדום עדין.
   לשימוש כשפעולת מחיקה נדרשת בחלון שבו יש כפתור פעולה ראשי אחר (כמו
   "שמירה") שצריך להישאר הפוקוס הוויזואלי המרכזי. */
.wrap .fh-btn-danger-outline {
	background: transparent;
	border: 1px solid #FCA5A5;
	border-radius: var(--fh-radius-sm);
	color: var(--fh-color-danger-text);
	font-size: 15px;
	font-weight: 600;
	padding: 8px 18px;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.wrap .fh-btn-danger-outline:hover {
	background: var(--fh-color-danger-bg);
	border-color: var(--fh-color-danger-text);
}

.wrap input[type="text"]:focus,
.wrap input[type="search"]:focus,
.wrap input[type="number"]:focus,
.wrap input[type="date"]:focus,
.wrap select:focus,
.wrap textarea:focus {
	border-color: var(--fh-color-primary);
	box-shadow: 0 0 0 1px var(--fh-color-primary);
}

/* פעולות מחיקה בטבלאות - טקסט אדום עדין, מודגש יותר במעבר עכבר */
.wrap .fh-link-danger {
	color: #EF4444;
	font-weight: 500;
	text-decoration: none;
}

.wrap .fh-link-danger:hover {
	color: #C62828;
	text-decoration: underline;
}

/* ---------- טבלאות ---------- */

.wrap table.widefat {
	border: none;
	border-collapse: separate;
	border-spacing: 0;
	border-radius: var(--fh-radius-md);
	overflow: hidden;
	box-shadow: var(--fh-shadow-sm);
}

.wrap table.widefat thead th {
	background-color: #F1F5F9;
	color: #1E293B;
	font-size: 16px;
	font-weight: 600;
	padding: 14px 18px;
	border-bottom: 2px solid #E2E8F0;
}

/* דפדפנים ממרכזים <th> כברירת מחדל - בלי זה הכותרת לא מיושרת עם התוכן
   שמתחתיה, שמיושר לימין דרך dir="rtl" של הטבלה. לא חל על טבלאות עם
   מנגנון יישור מכוון משלהן (כותרת ותוכן ממורכזים יחד): farm-hub-rtl-table
   (בתי ספר/מורים/מחליפים/מאגר משימות, עם farm-hub-align-right כחריגה
   מפורשת לעמודות ספציפיות) ו-farm-hub-classes-table (ניהול כיתות) - דריסה
   שלהן רק תשבור את היישור שכבר עובד שם נכון. farm-hub-daily-table (מערכת
   יומית) לא צריכה חריגה - גם היא וגם הכלל הגלובלי הזה מיישרים ימינה,
   אין ביניהם ניגוד. */
.wrap table.widefat:not(.farm-hub-rtl-table):not(.farm-hub-classes-table) thead th {
	text-align: right;
}

/* farm-hub-rtl-table - מנגנון יישור (כותרת+תוכן ממורכזים יחד) המשותף
   לכל מסכי הניהול שמשתמשים במחלקה הזו (בתי ספר/מורים/מחליפים/מאגר
   משימות/האזור האישי למורים) - היה מוטבע בנפרד כ-<style> בכל אחד
   מארבעת מסכי הניהול הישנים, אוחד לכאן. שורת ה-width/min-width של כל
   מסך נשארת מקומית בקובץ שלו (ערך שונה לכל מסך). */
.wrap .farm-hub-rtl-table th,
.wrap .farm-hub-rtl-table td {
	text-align: center;
	padding-left: 20px;
	padding-right: 20px;
}

.wrap .farm-hub-rtl-table th.farm-hub-align-right,
.wrap .farm-hub-rtl-table td.farm-hub-align-right {
	text-align: right;
}

.wrap table.widefat tbody td {
	padding: 14px 18px;
	border-bottom: 1px solid #F1F5F9;
}

.wrap table.widefat tbody tr {
	background: var(--fh-color-card-bg);
	transition: background 0.2s ease;
}

.wrap table.widefat.striped tbody tr:nth-child(odd) {
	background: #FAFBFC;
}

/* הדגשת ריחוף גלובלית - קו צבעוני בצד המוביל של השורה (box-shadow, לא
   border, כדי שלא יזיז תוכן), במקום שינוי background-color כמו קודם.
   זה רכיב יחיד וגלובלי, כדי שכל טבלה בכל מסך (קיים או עתידי) תקבל אותה
   הדגשה בלי לשכפל קוד - בדיוק העיקרון של farm-hub-confirm.js/
   farm-hub-unsaved-guard.js. שני יתרונות על פני הגרסה הקודמת:
   1) לא מתנגש עם שום צביעת-רקע דינמית אחרת של השורה (קבוצות בית-ספר,
      סטטוס תשלום, הבלטת-חיפוש) - זה בדיוק מה שגרם ל"הבהוב" שתוקן במסכי
      ניהול-כיתות/מערכת-יומית (ראו farm-hub-classes.js/farm-hub-daily.js,
      initColorLock) - שינוי רקע בריחוף התנגש עם הרקע שה-JS קובע, ויצר רגע
      קצר של חוסר-סנכרון ביציאה מהשורה. עכשיו, כשריחוף לא נוגע ברקע כלל,
      אין עם מה להתנגש - אין צורך גם לשנות את פתרון ה-JS הקיים שם.
   2) לא יוצר בלבול בין שורה בהירה לכהה בטבלאות עם פסים (striped) - בגרסה
      הקודמת ריחוף על שורה בהירה הפך אותה לזהה בגוון לשורה כהה. */
.wrap table.widefat tbody tr:hover td:first-child {
	box-shadow: inset -4px 0 0 var(--fh-color-primary);
}

/* ---------- גלולות סינון (Filter Pills) ---------- */

.fh-filter-pills {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 8px;
}

/* גלולות הסינון מוצגות כטאבים: לא-פעילה = לבנה עם גבול אפור עדין,
   פעילה (fh-pill-active, מוגדר ע"י JS) = רקע ירוק מלא עם טקסט לבן. */
.fh-pill {
	background-color: #fff;
	border: 1px solid #CBD5E1;
	border-radius: 20px;
	padding: 8px 16px;
	font-size: 15px;
	font-weight: 500;
	color: #1E293B;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.fh-pill:hover {
	background-color: #F0FDF4;
	border-color: var(--fh-color-primary);
}

.fh-pill.fh-pill-active {
	background-color: var(--fh-color-primary);
	border-color: var(--fh-color-primary);
	color: #fff;
	font-weight: 600;
}

/* ---------- התראות ---------- */

.wrap .notice.notice-success {
	background: var(--fh-color-success-bg);
	border-right-color: var(--fh-color-success-text);
	border-radius: var(--fh-radius-sm);
	box-shadow: var(--fh-shadow-sm);
}

/* ---------- כרטיס כללי (לשימוש חוזר: הגדרות תקן, חלוניות וכו') ---------- */

.fh-card {
	background: var(--fh-color-card-bg);
	border-radius: var(--fh-radius-md);
	box-shadow: var(--fh-shadow-sm);
	padding: 20px 24px;
}

/* עיגול קטן עם מספר (למשל הודעות חדשות) - רכיב גלובלי לשימוש חוזר בכל
   מקום שצריך badge כמותי ליד אייקון/טקסט (לא ספציפי ללוח הודעות אחד). */
.fh-badge-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 15px;
	height: 15px;
	padding: 0 3px;
	border-radius: 999px;
	background: #DC2626;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
}

/* ---------- כרטיס טופס + רשת שדות (עריכת בית ספר, הזנות ביומי וכו') ---------- */

.fh-form-card {
	border-radius: var(--fh-radius-md);
	box-shadow: 0 4px 20px rgba( 0, 0, 0, 0.05 );
	padding: 24px;
	max-width: 900px;
}

.fh-form-grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 16px 24px;
	margin-bottom: 20px;
}

.fh-form-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.fh-form-field label {
	font-weight: 600;
	font-size: 16px;
	color: var(--fh-color-text-secondary);
}

.fh-form-field input,
.fh-form-field select,
.fh-form-field textarea {
	width: 100%;
}

.fh-form-field-inline {
	display: flex;
	gap: 8px;
}

/* מסך צר: בלי flex-wrap, שני שדות ה-date (עם placeholder רחב כמו
   dd/מ"מ/YYYY) לא מצטמצמים מתחת לרוחב-התוכן הטבעי שלהם (min-width:auto
   מובנה של flex item) - השדה השני פשוט נדחק מחוץ למסך. נערמים אנכית
   במקום זה - אותה עמודה, שני שדות מלאי-רוחב אחד מתחת לשני. */
@media ( max-width: 600px ) {
	.fh-form-field-inline {
		flex-direction: column;
	}
}

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

.fh-form-field-full {
	grid-column: 1 / -1;
}

@media ( max-width: 900px ) {
	.fh-form-grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 600px ) {
	.fh-form-grid {
		grid-template-columns: 1fr;
	}

	.fh-form-field-wide {
		grid-column: 1;
	}
}

/* ---------- אייקוני כותרת בכרטיסי מדד ---------- */

.fh-kpi-icon {
	font-size: 16px;
	width: 16px;
	height: 16px;
	line-height: 1;
	vertical-align: middle;
	color: var(--fh-color-accent);
}

.wrap .page-title-action .fh-btn-icon {
	font-size: 14px;
	width: 14px;
	height: 14px;
	line-height: 1;
	vertical-align: middle;
}

/* ---------- רשימות טקסט בסרגל הצד (שיבוץ מערכת) ---------- */

.farm-hub-schedule-summary-label {
	font-size: 14px;
	font-weight: 600;
	color: #1E293B;
}

.farm-hub-schedule-summary-value {
	font-size: 15px;
	font-weight: 600;
	color: var(--fh-color-primary);
}

/* חריגה ממכסה - מנצחת את הצבע הירוק הרגיל של הערך */
.farm-hub-schedule-summary-row.farm-hub-schedule-over-quota .farm-hub-schedule-summary-value {
	color: var(--fh-color-danger-text);
}

/* ---------- תגיות/Pills (יתרה/חריגה וכו') ---------- */

.fh-badge {
	display: inline-block;
	border-radius: 20px;
	padding: 4px 12px;
	font-weight: 600;
	font-size: 13px;
}

.fh-badge-success {
	background: var(--fh-color-success-bg);
	color: var(--fh-color-success-text);
}

.fh-badge-danger {
	background: var(--fh-color-danger-bg);
	color: var(--fh-color-danger-text);
}

.fh-badge-info {
	background: var(--fh-color-info-bg);
	color: var(--fh-color-info-text);
}

.fh-badge-warning {
	background: var(--fh-color-warning-bg);
	color: var(--fh-color-warning-text);
}

/* גרסה קטנה של fh-badge, אות בודדת בלבד (ל=מלווה/מ=מוביל) - לשימוש חוזר
   בכל מקום שמציג רשימת אנשים עם תפקידיהם (למשל "צוות נוסף" ב"הכיתות שלי"),
   לא רק את "תפקיד" עצמו. אותם צבעים בדיוק (fh-badge-success/fh-badge-info) -
   מוביל=ירוק, מלווה=כחול תמיד, בכל מסך - כדי שלא יהיו שני מיפויי-צבע
   סותרים לאותו תפקיד באותה מערכת. */
.fh-role-letter {
	border-radius: 10px;
	padding: 1px 6px;
	font-size: 11px;
	margin-right: 4px;
}

/* ---------- חלונית אישור גלובלית (data-confirm, farm-hub-confirm.js) ---------- */

.fh-confirm-dialog {
	width: min( 380px, 90vw );
	border: none;
	border-radius: var( --fh-radius-md );
	box-shadow: var( --fh-shadow-md );
	padding: 24px;
}

.fh-confirm-dialog::backdrop {
	background: rgba( 0, 0, 0, 0.4 );
}

/* white-space:pre-line - חלוניות עם כמה שורות התנגשות מחוברות ב-'\n'
   (למשל farm-hub-schedule.js/farm-hub-daily.js) מוצגות כרשימה אמיתית,
   שורה מתחת לשורה - בלי זה, טקסט רגיל "בולע" ירידות שורה ומציג הכל
   כמשפט אחד רציף. */
.fh-confirm-dialog-message {
	margin: 0 0 20px;
	font-size: 16px;
	color: var( --fh-color-text-primary );
	white-space: pre-line;
}

.fh-confirm-dialog-actions {
	display: flex;
	justify-content: flex-start;
	gap: 8px;
}

/* עיצוב אחיד לכל חלוניות האישור במערכת, בלי יוצא מן הכלל: "כן" ניטרלי/
   ממוסגר (לא בולט), ו"לא" ירוק ומלא (בולט). הסיבה: "כן" הוא כמעט תמיד
   הפעולה שמסירה/מבטלת משהו - לא רוצים שהוא יבלוט ויעודד לחיצה מהירה בלי
   מחשבה. "לא" (הבחירה הבטוחה) הוא הכפתור הבולט, כדי לתת רגע לעצור ולשקול. */
.fh-confirm-dialog-confirm {
	background: #fff !important;
	border-color: #CBD5E1 !important;
	color: var( --fh-color-text-primary ) !important;
}

.fh-confirm-dialog-confirm:hover,
.fh-confirm-dialog-confirm:focus {
	background: #F8FAFC !important;
	border-color: #94A3B8 !important;
}

.fh-confirm-dialog-cancel {
	background: var( --fh-color-primary ) !important;
	border-color: var( --fh-color-primary ) !important;
	color: #fff !important;
}

.fh-confirm-dialog-cancel:hover,
.fh-confirm-dialog-cancel:focus {
	background: var( --fh-color-primary-hover ) !important;
	border-color: var( --fh-color-primary-hover ) !important;
}

/* מחליף את מתאר ה-focus הכחול הגנרי של הדפדפן (וגם את box-shadow הכחול
   שליבת וורדפרס מוסיפה ל-.button-primary:focus) בטבעת עדינה שתואמת את
   הצבע הסמנטי של כל כפתור. משתמשים גם ב-:focus וגם ב-:focus-visible (לא
   רק focus-visible) כי בחלק מהדפדפנים לחיצת עכבר לא מפעילה focus-visible,
   ואז ה-box-shadow הכחול של וורדפרס היה עדיין מככב על אף התיקון. */
.fh-confirm-dialog-confirm:focus,
.fh-confirm-dialog-confirm:focus-visible {
	outline: none !important;
	box-shadow: 0 0 0 3px rgba( 148, 163, 184, 0.35 ) !important;
}

.fh-confirm-dialog-cancel:focus,
.fh-confirm-dialog-cancel:focus-visible {
	outline: none !important;
	box-shadow: 0 0 0 3px rgba( 45, 106, 79, 0.35 ) !important;
}

/* ---------- חלונית הודעה גלובלית (מידע בלבד, farm-hub-alert.js) ---------- */

.fh-alert-dialog {
	width: min( 380px, 90vw );
	border: none;
	border-radius: var( --fh-radius-md );
	box-shadow: var( --fh-shadow-md );
	padding: 24px;
}

.fh-alert-dialog::backdrop {
	background: rgba( 0, 0, 0, 0.4 );
}

.fh-alert-dialog-message {
	margin: 0 0 20px;
	font-size: 16px;
	color: var( --fh-color-text-primary );
	white-space: pre-line;
}

.fh-alert-dialog-actions {
	display: flex;
	justify-content: flex-start;
}

.fh-alert-dialog-ok:focus,
.fh-alert-dialog-ok:focus-visible {
	outline: none !important;
	box-shadow: 0 0 0 3px rgba( 45, 106, 79, 0.35 ) !important;
}

/* ---------- אייקון עזרה + חלונית מידע (farm-hub-help-popover.js) ---------- */

/* עיגול קטן ומעומעם - לא בולט כמו כפתור פעולה, כי זו עזרה אופציונלית,
   לא פעולה עיקרית במסך. מיקומו בתוך כל כרטיס נקבע ע"י כל מסך בנפרד
   (position:relative על הכרטיס + position:absolute כאן) - הרכיב עצמו
   אגנוסטי למיקום. */
.farm-hub-help-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 1px solid #CBD5E1;
	background: #fff;
	color: var( --fh-color-text-secondary );
	cursor: pointer;
	padding: 0;
	flex-shrink: 0;
}

.farm-hub-help-trigger:hover,
.farm-hub-help-trigger:focus {
	border-color: var( --fh-color-accent );
	color: var( --fh-color-accent );
}

.farm-hub-help-trigger .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

/* white-space:pre-line - כמו fh-confirm-dialog-message, כדי שירידות שורה
   בטקסט ה-data-help יוצגו כרשימה אמיתית, לא יבלעו למשפט אחד רציף. */
.fh-help-popover {
	position: fixed;
	z-index: 100000;
	width: min( 340px, 90vw );
	background: #fff;
	border-radius: var( --fh-radius-md );
	box-shadow: var( --fh-shadow-md );
	padding: 16px 18px;
	font-size: 14px;
	line-height: 1.6;
	color: var( --fh-color-text-primary );
	white-space: pre-line;
}

/* ---------- חלונית "שינויים לא שמורים" (farm-hub-unsaved-guard.js) ---------- */

.fh-unsaved-dialog {
	width: min( 420px, 90vw );
	border: none;
	border-radius: var( --fh-radius-md );
	box-shadow: var( --fh-shadow-md );
	padding: 24px;
}

.fh-unsaved-dialog::backdrop {
	background: rgba( 0, 0, 0, 0.4 );
}

.fh-unsaved-dialog-message {
	margin: 0 0 20px;
	font-size: 16px;
	color: var( --fh-color-text-primary );
}

.fh-unsaved-dialog-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* ---------- שורת כותרת עם כפתור הדפסה (fh-page-header) - רכיב מיקום גלובלי ---------- */

/* שורה עליונה אחידה: כותרת העמוד (h1 + קישור "עמוד הבית" מתחתיו) בצד
   ימין, כפתור הדפסה בצד שמאל - ב-RTL זה קורה אוטומטית לפי סדר הילדים
   (הראשון מימין), בלי row-reverse. flex-start כדי שהכפתור יתיישר לגובה
   הכותרת עצמה, לא למרכז הבלוק כולו (שגבוה יותר בגלל קישור "עמוד הבית"). */
.fh-page-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
}

/* ---------- כפתור הדפסה גלובלי (fh-print-btn, farm-hub-print.js) ---------- */

/* עיצוב בלבד - לא מיקום. כל מסך ממקם אותו איפה שמתאים לפריסה שלו (בתוך
   שורת ניווט קיימת, או פינה קבועה) - זו אחריות ה-CSS הספציפי של אותו מסך,
   לא של הרכיב המשותף. כך רכיב אחד משרת גם מסכים עם שורת כלים קיימת (כמו
   מערכת יומית) וגם מסכים שירצו מיקום קבוע בפינה, בלי לשכפל את הסטייל. */
.fh-print-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: var(--fh-color-primary);
	border: 1px solid var(--fh-color-primary);
	border-radius: var(--fh-radius-sm);
	color: #fff;
	padding: 8px 16px;
	font-size: 15px;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.fh-print-btn:hover {
	background: var(--fh-color-primary-hover);
	border-color: var(--fh-color-primary-hover);
}

.fh-print-btn .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
	line-height: 1;
}

/* ---------- הדפסה גלובלית - כללי בסיס לכל מסך שמוסיף fh-print-btn ---------- */

/* farm-hub-no-print: מחלקת עזר גלובלית - כל אלמנט איתה נעלם בהדפסה (שורות
   ניווט, כפתורים, הודעות וכו'). כל מסך יכול להשתמש בה על אלמנטים משלו,
   בנוסף לכללים הגנריים הקבועים כאן (תפריט/סרגל-כלים/פוטר של וורדפרס,
   ושדות טופס "שטוחים" בלי מסגרת) - שלא צריך לשכפל בכל קובץ CSS של מסך. */
/* כל כפתור/קישור תפעולי (הוספה, מחיקה, שמירה, ניווט, "הבלט בלוח" וכו') לפי
   המחלקות המשותפות שלו - לא לפי שם מסך - כדי שהחריגה תחול אוטומטית בכל
   מסך, קיים או עתידי, בלי לפרט כל כפתור בנפרד. [data-confirm] כמו רשת
   ביטחון נוספת לקישורי מחיקה שלא משתמשים באחת המחלקות הרגילות (למשל
   בלוח השנה). שדות קלט/צ'קבוקס לא ברשימה כי הם עשויים להכיל נתון אמיתי
   (למשל "תשלום מנייה") - "השטחה" שלהם (למטה) שומרת עליהם, לא מסתירה. */
@media print {
	.farm-hub-no-print,
	.page-title-action,
	.fh-list-actions-row,
	.fh-filter-pills,
	.farm-hub-schedule-search,
	.description,
	.fh-link-danger,
	.fh-btn-outline,
	.fh-btn-danger,
	.fh-btn-danger-outline,
	.button,
	.button-link,
	.submit,
	[data-confirm],
	#adminmenumain,
	#wpadminbar,
	#wpfooter,
	#screen-meta-links,
	#screen-meta,
	.notice {
		display: none !important;
	}

	#wpcontent,
	#wpbody-content,
	.wrap {
		margin: 0 !important;
		padding: 0 !important;
	}

	select,
	input[type="text"],
	textarea {
		border: none !important;
		background: transparent !important;
		box-shadow: none !important;
		padding: 0 !important;
		resize: none !important;
	}
}

/* farm-hub-print-only: ההפך המדויק מ-farm-hub-no-print למעלה - אלמנט
   שמוסתר במסך ומופיע רק בהדפסה. משמש כשווידג'ט טופס אמיתי (למשל textarea)
   מצייר בהדפסה חיצי-גלילה/מסגרת שדפדפנים/דרייברי-הדפסה שונים לא תמיד
   מכבדים לגביהם CSS רגיל (overflow/resize) - הפתרון: מסתירים את הווידג'ט
   עצמו בהדפסה (farm-hub-no-print עליו) ומציגים במקומו טקסט שטוח בתוך
   <div> עם המחלקה הזו, שאין לו בכלל "צורה" של ווידג'ט לצייר. ראו שדה
   "משימה" ב-class-farm-hub-daily-views.php. */
.farm-hub-print-only {
	display: none;
}

@media print {
	.farm-hub-print-only {
		display: block;
	}
}

/* ---------- אנימציית "פעימה" משותפת - להבלטה בלוח/בטבלה (שיבוץ מערכת, מערכת יומית) ---------- */

@keyframes farm-hub-pulse {
	0%, 100% {
		box-shadow: 0 0 0 0 rgba( 42, 157, 143, 0.4 );
	}

	50% {
		box-shadow: 0 0 0 6px rgba( 42, 157, 143, 0 );
	}
}

/* ---------- "חלון" גלילה + חצי ניווט - רכיב גלובלי לשימוש חוזר ----------
   "חלון" בגובה קבוע (fh-scroll-nav-viewport, הגובה עצמו נקבע לכל שימוש
   בנפרד) + חצים שגוללים פריט אחד בכל לחיצה, לא תנועה אוטומטית - ראו
   farm-hub-scroll-nav.js. משמש כרגע את "לוח הודעות" ו"תזכורות/משימות"
   בעמוד הבית של המורה - נבנה פעם אחת, לא משוכפל. */
.fh-scroll-nav {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

.fh-scroll-nav-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 18px;
	border: none;
	background: transparent;
	color: #CBD5E1;
	cursor: pointer;
	padding: 0;
}

.fh-scroll-nav-btn:hover,
.fh-scroll-nav-btn:focus-visible {
	color: var( --fh-color-primary );
}

.fh-scroll-nav-btn .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
}

.fh-scroll-nav-viewport {
	width: 100%;
	overflow-y: hidden;
	scroll-behavior: smooth;
}

.fh-scroll-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
}