@charset "utf-8";
@layer reset, vendor, tokens, base, layout, components, screens, utilities, overrides;
@import url("https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.rtl.min.css") layer(vendor);
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.3.0/css/all.min.css") layer(vendor);

/* ==== /css/lib/vendor.css ==== */


/*
	ספריות צד-שלישי — כל אחת בבקשה נפרדת משלה.

	⚠️ למה לא ב-layers.css (הקבוצה הקריטית): שם הן היו @import מתוך
	   ה-<style> המוטמע, כלומר שתי בקשות שחוסמות את הציור הראשון —
	   והספלאש אינו משתמש לא ב-Bootstrap ולא באייקון אחד. המשתמש חיכה
	   לרבע מגה בייט כדי לראות לוגו ופס התקדמות.

	⚠️ למה בכל זאת @import ולא <link> בראש העמוד: ל-<link> אין תכונה
	   שמשייכת לשכבת cascade. תגית <link> רגילה נכנסת כ-CSS **לא
	   משוכבת**, שגובר על כל שכבה — כלומר Bootstrap היה מנצח את
	   components ואת screens שלנו, וחוזרים למלחמות !important.
	   layer(vendor) הוא כל העניין, והוא קיים רק בתחביר של @import.

	   המחיר של @import — גילוי מאוחר — מנוטרל ע"י תגיות preload
	   ש-asset_builder פולט לראש העמוד, שנגזרות מהקובץ הזה עצמו.
	   כלומר ההורדה מתחילה מהבייט הראשון של ה-HTML, במקביל, ובזמן
	   שה-@import נפגש איתה היא כבר במטמון.

	   ⚠️ ה-preload הוא ללא crossorigin, וזה לא השמטה: preload עם
	      crossorigin מייצר בקשת CORS, ו-@import מייצר בקשה רגילה —
	      שתי רשומות מטמון שונות, כלומר הורדה כפולה במקום אפס.
*/






/* ==== /css/lib/components/buttons.css ==== */


/*
	button — מערכת הכפתורים הגנרית.
	מבנה אחד, סקין דרך --my_* בלבד. וריאנט חדש = הצבת משתנים.
	<button class="button button--primary">...</button>
*/

@layer components{

.button{
	--my_background_color: var(--color_white);
	--my_color: var(--text_color1);
	--my_border_color: transparent;
	--my_font_size: var(--font_size_base);
	--my_padding_block: 0.55em;
	--my_padding_inline: 1.4em;
	--my_border_radius: var(--border_radius_base);
	--my_box_shadow: var(--shadow_2);

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;

	font-family: inherit;
	font-size: var(--my_font_size);
	font-weight: var(--font_weight_semi_bold);
	line-height: var(--line_height_loose);
	text-decoration: none;
	cursor: pointer;

	padding-block: var(--my_padding_block);
	padding-inline: var(--my_padding_inline);
	color: var(--my_color);
	background: var(--my_background_color);
	border: 1px solid var(--my_border_color);
	border-radius: var(--my_border_radius);
	box-shadow: var(--my_box_shadow);

	transition: scale 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

.button:hover{
	scale: 1.03;
	box-shadow: var(--shadow_3);
}

.button:focus-visible{
	outline: 3px solid var(--color_primary);
	outline-offset: 2px;
}

.button:active{
	scale: 0.98;
}

.button__icon{
	font-size: 1.1em;
	line-height: 1;
}

/* --- מצבים --- */

.button:disabled,
.button.is_disabled{
	--my_background_color: var(--color_primary_softer);
	--my_color: var(--text_color1_brightest);
	--my_box_shadow: none;
	cursor: not-allowed;
	pointer-events: none;
	scale: 1;
}

/*
	מצב טעינה — נשלט ע"י api.setButtonLoading (js/api.js) על כל פעולה
	שעוברת בשכבת ה-api. הספינר נוסף כפסאודו-אלמנט כדי שלא נדרש שינוי
	ב-HTML של אף כפתור קיים.
*/
.button.is_loading{
	pointer-events: none;
	opacity: 0.72;
	position: relative;
}

.button.is_loading::after{
	content: "";
	inline-size: 1.05em;
	block-size: 1.05em;
	border: 2px solid currentColor;
	border-block-start-color: transparent;
	border-radius: 50%;
	animation: buttonSpinner 0.72s linear infinite;
	flex-shrink: 0;
}

@keyframes buttonSpinner{
	to{ rotate: 360deg; }
}

/* אנימציה מכובדת להעדפת מערכת — ספינר קופא, אך המצב עדיין מסומן חזותית */
@media (prefers-reduced-motion: reduce){
	.button.is_loading::after{
		animation: none;
		opacity: 0.5;
	}
}

/* --- וריאנטים סמנטיים --- */

.button--primary{
	--my_background_color: var(--color_primary);
	--my_color: var(--color_white);
}

.button--secondary{
	--my_background_color: var(--color_secondary);
	--my_color: var(--color_white);
}

.button--success{
	--my_background_color: var(--color_success);
	--my_color: var(--color_white);
}

.button--info{
	--my_background_color: var(--color_info);
	--my_color: var(--color_white);
}

.button--warning{
	--my_background_color: var(--color_warning);
	--my_color: var(--color_warning_deeper);
}

.button--error,
.button--destructive{
	--my_background_color: var(--color_danger);
	--my_color: var(--color_white);
}

/* --- משפחת outline --- */

.button--outline{
	--my_background_color: transparent;
	--my_border_color: currentColor;
	--my_box_shadow: var(--shadow_1);
}

.button--outline.button--primary{ --my_color: var(--color_primary_deep); }
.button--outline.button--secondary{ --my_color: var(--color_warning_deep); }
.button--outline.button--error{ --my_color: var(--color_danger); }

/* --- רך / קישור טקסטואלי --- */

.button--soft{
	--my_background_color: var(--color_primary_softer);
	--my_color: var(--color_primary_deep);
	--my_box_shadow: var(--shadow_1);
}

.button--link{
	--my_background_color: transparent;
	--my_box_shadow: none;
	--my_padding_block: 0.2em;
	--my_padding_inline: 0.2em;
	text-decoration: underline dotted;
}

/* --- גדלים --- */

.button--narrow{
	--my_font_size: var(--font_size_small);
	--my_padding_block: 0.35em;
	--my_padding_inline: 0.9em;
}

.button--large{
	--my_font_size: var(--font_size_large);
	--my_padding_block: 0.7em;
	--my_padding_inline: 1.8em;
}

/* --- עגול (אישור/ביטול/מחיקה) --- */

.button--round{
	--my_padding_block: 0;
	--my_padding_inline: 0;
	--my_border_radius: 100%;
	width: 2.8em;
	aspect-ratio: 1 / 1;
}

/* --- צף (FAB) --- */

.button--fab{
	--my_background_color: var(--color_primary);
	--my_color: var(--color_white);
	--my_border_radius: var(--border_radius_roundest);
	--my_box_shadow: var(--shadow_4);
	--my_font_size: var(--font_size_large);

	position: fixed;
	inset-block-end: calc( var(--space_7) + var(--space_2) );
	inset-inline-start: var(--space_3);
	z-index: 50;
}


/* --- like_burst: חלקיקים שמתפוצצים סביב כפתור "לייק" (likeBurst.js) --- */

.js_like_burst{
	position: relative;
	overflow: visible;
}

.js_like_burst.is_bursting{
	animation: likeBurstPulse 0.35s ease-out;
}

.like_burst__particles{
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.like_burst__particle{
	position: absolute;
	inset-inline-start: 50%;
	inset-block-start: 50%;
	width: 6px;
	height: 6px;
	margin: -3px;
	border-radius: 100%;
	background: var(--color_danger);
	animation-name: likeBurstFly;
	animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1);
	animation-fill-mode: forwards;
}

.like_burst__particle:nth-child(3n){ background: var(--color_warning); }
.like_burst__particle:nth-child(3n+1){ background: var(--color_secondary); }

@keyframes likeBurstPulse{
	0%{ scale: 1; }
	35%{ scale: 1.35; }
	100%{ scale: 1; }
}

@keyframes likeBurstFly{
	0%{ translate: 0 0; opacity: 1; scale: 1; }
	100%{ translate: var(--particle-x) var(--particle-y); opacity: 0; scale: 0.4; }
}


/* --- לייק — לב מלא אדום כשמסומן --- */

.button.is_liked{
	--my_color: var(--color_danger);
	--my_border_color: var(--color_danger);
}

.button.is_liked i{
	animation: likeBurstPulse 0.3s ease-out;
}

}

/*
	כפתור חסום ע"י validation.guard — נראה כמנוטרל אך **נשאר לחיץ**:
	הלחיצה פותחת מודאל שמפרט מה חסר. ⚠️ בלי pointer-events:none,
	בניגוד ל-.is_disabled — שם ההבדל.
*/
.button.is_guard_blocked{
	--my_background_color: var(--color_primary_softer);
	--my_color: var(--text_color1_brightest);
	--my_box_shadow: none;
	cursor: help;
	scale: 1;
}


/* ==== /css/lib/components/fancy_button.css ==== */


/*
	fancy_button — כפתור בחירה ראשי.
	מבנה קבוע + סקין דרך משתני --my_* בלבד.
	וריאנטים: (ברירת מחדל = primary), secondary, success, info, warning,
	error/destructive, is_disabled.

	וריאנטים ספציפיים לדומיין (תלויים בטוקנים
	שמוגדרים רק ב-app/css/app/themes) יושבים ב-
	app/css/app/components/status_variants.css — ראו ההערה שם.
*/

@layer components{

.fancy_button{
	--my_color: var(--color_primary_deeper);
	--my_background_color: var(--color_white);
	--my_border_radius: var(--border_radius_base);
	--my_box_shadow: var(--box_shadow1);
	--my_accent_color: var(--color_primary);
	--my_icon: "\e545";

	display: grid;
	grid-template-columns: 88% 13%;
	align-items: center;
	width: 85%;
	padding: 4%;
	cursor: pointer;
	margin-block: 26px;
	margin-inline: auto;
	font-size: var(--font_size);
	text-decoration: none;

	border-radius: var(--my_border_radius);
	box-shadow: var(--my_box_shadow);
	background: var(--my_background_color);
	border-inline-end: 10px solid var(--my_accent_color);

	transition: scale 0.35s ease-in-out, border-inline-end-width 0.35s ease-in-out;
}

.fancy_button:hover{
	scale: 1.03;
	border-inline-end-width: 0px;
	background: var(--my_background_color);
}

.fancy_button::after{
	font-family: "FontAwesome";
	font-weight: 900;
	content: var(--my_icon);
	font-size: calc( var(--font_size) * 2 );
	text-decoration: none;

	border-radius: 100%;
	background: var(--my_accent_color);
	overflow: hidden;
	aspect-ratio: 1 / 1;
	align-items: center;
	color: var(--color_white);
	display: flex;
	justify-content: center;
}

.fancy_button__text{
	display: flex;
	flex-direction: column;
	text-align: start;
	color: var(--text_color1_brighter);
}

.fancy_button__title{
	font-size: calc( var(--font_size) * 1.1 );
	font-weight: var(--font_weight_black);
	color: var(--my_color);
}

.fancy_button__description{
	font-size: calc( var(--font_size) * 1 );
	font-weight: var(--font_weight_thin);
}

/* --- variants --- */

.fancy_button--secondary{
	--my_color: var(--color_warning_deeper);
	--my_background_color: var(--color_warning_softer);
	--my_accent_color: var(--color_secondary);
}

.fancy_button--success{
	--my_color: var(--color_success_deep);
	--my_background_color: var(--color_success_softer);
	--my_accent_color: var(--color_success);
}

.fancy_button--info{
	--my_color: var(--color_info);
	--my_background_color: var(--color_primary_softer);
	--my_accent_color: var(--color_info);
}

.fancy_button--warning{
	--my_color: var(--color_warning_deeper);
	--my_background_color: var(--color_warning_soft);
	--my_accent_color: var(--color_warning_deep);
}

.fancy_button--error,
.fancy_button--destructive{
	--my_color: var(--color_danger_deep);
	--my_background_color: var(--color_danger_softer);
	--my_accent_color: var(--color_danger);
}

.fancy_button.is_disabled{
	--my_color: var(--text_color1_brightest);
	--my_background_color: var(--color_primary_softer);
	--my_accent_color: var(--text_color1_brightest);
	pointer-events: none;
}

}


/* ==== /css/lib/components/links.css ==== */


/* ===== links — משפחת הקישורים ===== */

@layer components{

.link{
	--my_color: var(--text_color1_brighter);
	color: var(--my_color);
	text-decoration: underline dotted;
	text-underline-offset: 3px;
	cursor: pointer;
}

.link:hover{
	text-decoration-style: solid;
}

.link:focus-visible{
	outline: 3px solid var(--color_primary);
	outline-offset: 2px;
	border-radius: 4px;
}

.link--content{
	--my_color: var(--color_primary_deep);
	text-decoration-style: solid;
}

.link--external::after{
	font-family: "FontAwesome";
	font-weight: 900;
	content: "\f35d";
	font-size: 0.75em;
	margin-inline-start: 0.35em;
}

.link--action{
	--my_color: var(--color_primary_deep);
	text-decoration: none;
	font-weight: var(--font_weight_semi_bold);
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
}

.link--back{
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-weight: var(--font_weight_semi_bold);
}

.link--back::before{
	font-family: "FontAwesome";
	font-weight: 900;
	content: "\f061"; /* חץ ימינה = "אחורה" ב-RTL */
}

.link--legal{
	font-size: var(--font_size_small);
	color: var(--color_primary_deep);
	font-weight: var(--font_weight_bold);
}

.link--destructive{
	--my_color: var(--color_danger);
}

.link.is_disabled{
	--my_color: var(--text_color1_brightest);
	pointer-events: none;
	text-decoration: none;
}

}


/* ==== /css/lib/components/forms.css ==== */


/* ===== forms — שדות קלט, טפסים ומצביהם ===== */

@layer components{

#root > #screens > .screen > .cotnent > form{
	text-align: center;
}

.field{
	display: flex;
	flex-direction: column;
	gap: 6px;
	text-align: start;
	margin-block-end: var(--space_2);
}

.field__label{
	font-size: var(--font_size_small);
	font-weight: var(--font_weight_semi_bold);
	color: var(--text_color1_bright);
}

.field__input{
	--my_box_shadow: var(--box_shadow1);
	--my_accent_color: var(--color_primary_deepest);
	border: 2px solid var(--color_primary);
	color: var(--color_primary);
	font-weight: var(--font_weight_bold);

	font-family: inherit;
	font-size: var(--font_size_base);
	background: var(--color_white);
	border-radius: var(--border_radius_base);
	padding-block: 0.55em;
	padding-inline: 0.8em;
	width: 100%;
	transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
	box-shadow: var(--my_box_shadow);
}

.field__input::placeholder{
	color: var(--text_color1_brightest);
}

.field__input:focus-visible{
	outline: none;
	border-color: var(--color_primary);
	box-shadow: 0 0 0 3px var(--color_primary_soft);
}

.field__hint{
	font-size: var(--font_size_smaller);
	color: var(--text_color1_brighter);
}

.field__error{
	display: none;
	font-size: var(--font_size_smaller);
	font-weight: var(--font_weight_semi_bold);
	color: var(--color_error);
}

/* מצב שגיאה: חיווי ויזואלי + מילולי (חובת אפיון 3.2.5.2) */
.field.is_invalid .field__input{
	border-color: var(--color_error);
	box-shadow: 0 0 0 3px rgb(238 68 51 / 0.15);
}

.field.is_invalid .field__error{
	display: block;
}

.field.is_disabled .field__label{
	color: var(--text_color1_brightest);
}

.field__input:disabled{
	background: var(--color_primary_softer);
	color: var(--text_color1_brightest);
	cursor: not-allowed;
}

/* --- שדה טלפון מפוצל: קידומת מימין, מספר משמאל, ספרות LTR --- */

.phone_field{
	display: grid;
	grid-template-columns: 30% 1fr;
	gap: var(--space_1);
	direction: ltr;
}

.phone_field .field__input{
	direction: ltr;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* --- OTP: 6 משבצות --- */

.otp_field{
	direction: ltr;
	display: flex;
	gap: var(--space_1);
	justify-content: center;
}

.otp_field__digit{
	width: 2.4em;
	aspect-ratio: 3 / 4;
	text-align: center;
	font-size: var(--font_size_large);
	font-weight: var(--font_weight_bold);
	font-variant-numeric: tabular-nums;
	color: var(--text_color1);
	background: var(--color_white);
	border: 1px solid var(--text_color1_brightest);
	border-radius: var(--border_radius_base);
	transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.otp_field__digit:focus-visible{
	outline: none;
	border-color: var(--color_primary);
	box-shadow: 0 0 0 3px var(--color_primary_soft);
}

.otp_field.is_invalid .otp_field__digit{
	border-color: var(--color_error);
}

/* --- טיימר שליחה חוזרת --- */

.resend_timer{
	display: inline-flex;
	gap: 0.5em;
	align-items: center;
	font-size: var(--font_size_small);
	color: var(--text_color1_brighter);
}

.resend_timer__count{
	direction: ltr;
	font-variant-numeric: tabular-nums;
	font-weight: var(--font_weight_bold);
}

/* --- שדה סכום ₪ --- */

.amount_field{
	position: relative;
}

.amount_field .field__input{
	direction: ltr;
	text-align: end;
	padding-inline-end: 2em;
	font-variant-numeric: tabular-nums;
}

.amount_field::after{
	content: "₪";
	position: absolute;
	inset-inline-end: 0.8em;
	inset-block-start: 50%;
	translate: 0 -50%;
	color: var(--text_color1_brighter);
	pointer-events: none;
}

/* --- מתג (Toggle) --- */

.toggle{
	display: inline-flex;
	align-items: center;
	gap: var(--space_1);
	cursor: pointer;
}

.toggle__input{
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.toggle__track{
	width: 3em;
	height: 1.6em;
	border-radius: var(--border_radius_roundest);
	background: var(--text_color1_brightest);
	position: relative;
	transition: background-color 0.2s ease-in-out;
}

.toggle__track::after{
	content: "";
	position: absolute;
	inset-block-start: 0.15em;
	inset-inline-start: 0.15em;
	width: 1.3em;
	aspect-ratio: 1 / 1;
	border-radius: 100%;
	background: var(--color_white);
	box-shadow: var(--shadow_1);
	transition: translate 0.2s ease-in-out;
}

.toggle__input:checked + .toggle__track{
	background: var(--my_checked_color, var(--color_success));
}

/* --- צבעי Toggle --- */
.toggle--primary{ --my_checked_color: var(--color_primary); }
.toggle--secondary{ --my_checked_color: var(--color_secondary); }
.toggle--success{ --my_checked_color: var(--color_success); }
.toggle--info{ --my_checked_color: var(--color_info); }
.toggle--warning{ --my_checked_color: var(--color_warning); }
.toggle--error{ --my_checked_color: var(--color_danger); }

.toggle__input:checked + .toggle__track::after{
	translate: calc( -1 * 1.4em ) 0;
}

.toggle__input:focus-visible + .toggle__track{
	outline: 3px solid var(--color_primary);
	outline-offset: 2px;
}

/* --- checkbox / radio --- */

.check_field{
	display: flex;
	align-items: flex-start;
	gap: var(--space_1);
	cursor: pointer;
	text-align: start;
	font-size: var(--font_size_small);
}

.check_field input{
	inline-size: 1.2em;
	block-size: 1.2em;
	margin-block-start: 0.15em;
	accent-color: var(--color_primary);
	flex-shrink: 0;
}

/* --- תיבת טקסט עם מונה --- */

.textarea_field .field__input{
	min-height: 6em;
	resize: vertical;
	line-height: var(--line_height_loose);
}

.textarea_field .field__counter{
	align-self: flex-end;
	font-size: var(--font_size_smallest);
	color: var(--text_color1_brightest);
	font-variant-numeric: tabular-nums;
	direction: ltr;
}

.textarea_field.is_over_limit .field__counter{
	color: var(--color_error);
	font-weight: var(--font_weight_bold);
}

.textarea_field.is_over_limit .field__input{
	border-color: var(--color_error);
}

/* --- העלאת מסמך: 4 מצבים --- */

.upload_field{
	display: flex;
	align-items: center;
	gap: var(--space_2);
	padding: var(--space_2);
	border: 2px dashed var(--text_color1_brightest);
	border-radius: var(--border_radius_base);
	background: var(--color_white);
	text-align: start;
	transition: border-color 0.2s ease-in-out;
}

.upload_field__icon{
	font-size: var(--font_size_largest);
	color: var(--color_primary);
}

.upload_field__name{
	font-weight: var(--font_weight_semi_bold);
	flex: 1;
}

.upload_field__status{
	font-size: var(--font_size_smaller);
	color: var(--text_color1_brighter);
}

.upload_field.is_uploading{
	border-style: solid;
	border-color: var(--color_info);
}

.upload_field.is_uploaded{
	border-style: solid;
	border-color: var(--color_success);
}

.upload_field.is_uploaded .upload_field__icon{
	color: var(--color_success);
}

.upload_field.is_invalid{
	border-style: solid;
	border-color: var(--color_error);
}

.upload_field.is_invalid .upload_field__icon{
	color: var(--color_error);
}


/* --- משטח לכידה: חתימה / צילום נוכחות --- */

.capture_box{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space_1);
	min-height: 150px;
	width: 100%;
	border: 2px dashed var(--text_color1_brightest);
	border-radius: var(--border_radius_base);
	background: var(--color_white);
	color: var(--text_color1_brighter);
	font-size: var(--font_size_small);
	cursor: pointer;
	transition: border-color 0.2s ease-in-out;
}

.capture_box:hover{
	border-color: var(--color_primary);
}

.capture_box__icon{
	font-size: calc( var(--font_size) * 1.8 );
	color: var(--color_primary);
	line-height: 1;
}


/* --- choice_list: רשימת בחירה (radio/checkbox) בכרטיס --- */

.choice_list{
	display: flex;
	flex-direction: column;
}

.choice_list--boxed{
	background: var(--color_primary_softer);
	border-radius: var(--border_radius_round);
	padding: var(--space_1);
}

.choice_list__option{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space_2);
	padding: var(--space_2);
	cursor: pointer;
	font-size: var(--font_size_small);
	line-height: var(--line_height_loose);
	text-align: start;
	border-radius: var(--border_radius_base);
}

.choice_list__option input{
	inline-size: 1.4em;
	block-size: 1.4em;
	accent-color: var(--color_primary);
	flex-shrink: 0;
}

/* וריאנט כרטיסים נפרדים (בחירת אזורי עבודה) */
.choice_list--cards{
	gap: var(--space_1);
}

.choice_list--cards .choice_list__option{
	background: var(--color_white);
	border-radius: var(--border_radius_round);
	box-shadow: var(--shadow_1);
}

.choice_list--cards .choice_list__option:has(input:checked){
	background: var(--color_success_softer);
	box-shadow: 0 0 0 2px var(--color_success_soft);
}

/* --- אינדיקטור בחירה מונפש (רדיו/צ'קבוקס בעיצוב אחיד עם check_animated) ---
   ה-input האמיתי נשאר בשקיפות מלאה מעל/לפני האינדיקטור לנגישות מלאה. */

.choice_list__option input.js_choice_input{
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.choice_indicator{
	flex-shrink: 0;
	width: 1.5em;
	height: 1.5em;
}

.choice_indicator__ring{
	fill: var(--color_white);
	stroke: var(--text_color1_brightest);
	stroke-width: 1.5;
	transition: stroke 0.2s ease-in-out;
	transform-origin: center;
	transform-box: fill-box;
}

/* רדיו: נקודה פנימית שקופצת פנימה בבחירה */
.choice_indicator__dot{
	fill: var(--color_primary);
	scale: 0;
	transform-origin: center;
	transform-box: fill-box;
	transition: scale 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); /* overshoot קליל — אותה משפחת תנועה כמו check_animated */
}

/* צ'קבוקס בכרטיס: וי מצויר (כמו check_animated, בגרסת badge קטנה) */
.choice_indicator__mark{
	fill: none;
	stroke: var(--color_white);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	transition: stroke-dashoffset 0.3s ease-out 0.05s;
}

.js_choice_input:checked ~ .choice_indicator .choice_indicator__ring{
	stroke: var(--color_primary);
	animation: checkAnimatedPop 0.3s ease-out;
}

.js_choice_input:checked ~ .choice_indicator .choice_indicator__dot{
	scale: 1;
}

.js_choice_input:checked ~ .choice_indicator .choice_indicator__mark{
	stroke-dashoffset: 0;
}

.js_choice_input:checked ~ .choice_indicator .choice_indicator__ring--checkbox{
	fill: var(--color_success);
	stroke: var(--color_success);
}

.js_choice_input:focus-visible ~ .choice_indicator .choice_indicator__ring{
	stroke: var(--color_primary);
	stroke-width: 2.5;
}

/* --- capture_box: וריאנטים --- */

/* עיגול הוספת תמונה (אונבורדינג שלב 3) */
.capture_box--round{
	width: min(190px, 52dvw);
	min-height: 0;
	aspect-ratio: 1 / 1;
	border-radius: 100%;
	margin-inline: auto;
	background: var(--color_primary_softer);
	border-color: var(--color_primary);
	color: var(--color_primary_deep);
	font-weight: var(--font_weight_semi_bold);
}

/* משטח חתימה גבוה (חתימה על הסכם) */
.capture_box--tall{
	min-height: 220px;
	align-items: center;
	justify-content: flex-start;
	padding-block-start: var(--space_3);
	border-style: solid;
	border-color: var(--color_primary_softer);
	color: var(--text_color1_brightest);
}


/* --- signature pad: canvas בתוך capture_box --- */

.js_signature_pad{
	position: relative;
	touch-action: none;
	cursor: crosshair;
}

.js_signature_pad .signature_pad__canvas{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.js_signature_pad .signature_pad__placeholder{
	pointer-events: none;
	transition: opacity 0.25s ease-in-out;
}

.js_signature_pad.is_signed .signature_pad__placeholder{
	opacity: 0;
}


/* --- capture_box: מצב עם תמונה שנבחרה (client-side, ראו profilePhoto.js) --- */

.capture_box.has_photo{
	border-style: solid;
	border-color: var(--color_primary_soft);
	color: transparent;
}


/* --- star_rating_input: דירוג כוכבים אינטראקטיבי (לחיצה לבחירה) --- */

.star_rating_input{
	display: flex;
	justify-content: center;
	gap: 6px;
}

.star_rating_input__star{
	background: none;
	border: none;
	padding: 4px;
	cursor: pointer;
	font-size: var(--font_size_largest);
	color: var(--color_primary_softer);
	transition: color 0.15s ease-in-out, scale 0.15s ease-in-out;
}

.star_rating_input__star.is_filled{
	color: var(--color_warning);
}

.star_rating_input__star.is_hover_preview{
	color: var(--color_warning_soft);
}

.star_rating_input__star:active{
	scale: 1.2;
}

.star_rating_input__star:focus-visible{
	outline: 2px solid var(--color_primary);
	outline-offset: 2px;
	border-radius: 4px;
}

}

/*
	רשימת הצעות להשלמת כתובת. ⚠️ position:absolute מעל השדה —
	ההורה (.field) חייב position:relative, אחרת הרשימה תיצמד
	לראש המסך ותכסה תוכן אחר.
*/
.suggestion_list{
	position: absolute;
	inset-block-start: 100%;
	inset-inline: 0;
	z-index: 20;
	flex-direction: column;
	/*
		⚠️ שלושת הטוקנים כאן היו --surface_color1, --border_color1
		   ו---shadow_lg — שלושתם אינם מוגדרים בשום מקום בפרויקט.
		   טוקן שאינו קיים נכשל בשקט: הכלל פשוט לא חל, ולכן
		   רשימת ההצעות של הכתובת הופיעה בלי רקע, בלי מסגרת
		   ובלי צל — שקופה מעל התוכן שמתחתיה.

		   נמצא ב-v119 באודיט של כלל קבצי ה-CSS, אחרי ש---radius_md
		   באותו בלוק כבר התגלה. אותה שגיאה, אותו מחבר, אותו קטע.
	*/
	background-color: var(--color_white);
	border: 1px solid var(--color_primary_soft);
	border-radius: var(--border_radius_base);
	box-shadow: var(--shadow_3);
	overflow: hidden;
	max-block-size: 260px;
	overflow-y: auto;
}

.suggestion_list__item{
	padding: var(--space_2);
	text-align: start;
	background: none;
	border: none;
	border-block-end: 1px solid var(--color_primary_soft);
	cursor: pointer;
	font-size: var(--font_size_smaller);
	color: var(--text_color1);
}

.suggestion_list__item:hover,
.suggestion_list__item:focus-visible{
	background-color: var(--color_primary_softer);
}

/* ייחוס — דרישה במדיניות השימוש של OpenStreetMap */
.suggestion_list__credit{
	padding: var(--space_1) var(--space_2);
	font-size: var(--font_size_smallest);
	color: var(--text_color1_brightest);
}

/*
	שדה המלכודת של ה-honeypot (core/plugins/honeypot).

	⚠️ לא display:none ולא hidden: בוטים רבים מדלגים על שדות שהוסתרו
	   כך, וזו בדיוק המלכודת שלא תיסגר. הסתרה חזותית בלבד — השדה
	   קיים ב-DOM, "נראה" לבוט, ובלתי נגיש לאדם: מחוץ למסך, שקוף,
	   בלי גובה ובלי אירועי מצביע.

	⚠️ בלי הכלל הזה השדה מוצג כשדה טקסט רגיל באמצע הטופס. הוא היה
	   חסר עד v110 — ה-plugin נכתב, הכיתה שלו לא.
*/
.honeypot_field{
	position: absolute;
	inset-inline-start: -9999px;
	inline-size: 1px;
	block-size: 1px;
	opacity: 0;
	pointer-events: none;
}


/* ==== /css/lib/components/check_animated.css ==== */


/*
	check_animated — תיבת סימון עם וי מצויר באנימציה (השראה: SVG checkbox).
	input[type=checkbox] אמיתי מתחת (נגיש, עובד עם מקלדת/קורא מסך) +
	SVG עיצובי מעליו. הציור מבוסס transition על stroke-dashoffset —
	לא @keyframes — כדי שיתחדש נכון בכל סימון/ביטול, בלי טריקים.
*/

@layer components{

.check_animated{
	display: flex;
	align-items: flex-start;
	gap: var(--space_1);
	cursor: pointer;
	text-align: start;
	font-size: var(--font_size_small);
	color: var(--text_color1_bright);
}

.check_animated input[type="checkbox"]{
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.check_animated__box{
	--my_size: 22px;
	flex-shrink: 0;
	width: var(--my_size);
	height: var(--my_size);
	margin-block-start: 1px;
}

.check_animated__circle{
	fill: var(--color_white);
	stroke: var(--text_color1_brightest);
	stroke-width: 1.5;
	transition: fill 0.2s ease-in-out, stroke 0.2s ease-in-out;
	transform-origin: center;
	transform-box: fill-box;
}

.check_animated__mark{
	fill: none;
	stroke: var(--color_white);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	transition: stroke-dashoffset 0.3s ease-out 0.05s;
}

/* --- מצב מסומן: המעגל "קופץ" קלות והוי נצבע --- */

.check_animated input:checked ~ .check_animated__box .check_animated__circle{
	fill: var(--color_primary);
	stroke: var(--color_primary);
	animation: checkAnimatedPop 0.3s ease-out;
}

.check_animated input:checked ~ .check_animated__box .check_animated__mark{
	stroke-dashoffset: 0;
}

.check_animated input:focus-visible ~ .check_animated__box .check_animated__circle{
	stroke: var(--color_primary);
	stroke-width: 2.5;
}

@keyframes checkAnimatedPop{
	0%{ scale: 1; }
	40%{ scale: 1.15; }
	100%{ scale: 1; }
}

}


/* ==== /css/lib/components/tags.css ==== */


/* ===== tags — תגיות, צ'יפים והודעות מצב ===== */

@layer components{

.tag{
	--my_background_color: var(--color_primary_softer);
	--my_color: var(--color_primary_deep);

	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-size: var(--font_size_smaller);
	font-weight: var(--font_weight_semi_bold);
	line-height: 1;
	padding-block: 0.45em;
	padding-inline: 0.9em;
	border-radius: var(--border_radius_roundest);
	color: var(--my_color);
	background: var(--my_background_color);
	white-space: nowrap;
}

.tag--success{ --my_background_color: var(--color_success_soft); --my_color: var(--color_success); }
.tag--info{ --my_background_color: var(--color_primary_soft); --my_color: var(--color_info); }
.tag--warning{ --my_background_color: var(--color_warning_soft); --my_color: var(--color_warning_deep); }
.tag--error{ --my_background_color: var(--color_danger_soft); --my_color: var(--color_danger); }
.tag--neutral{ --my_background_color: #EBEFF2; --my_color: var(--text_color1_brighter); }

/* --- צ'יפ סינון --- */

.chip{
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-size: var(--font_size_small);
	padding-block: 0.4em;
	padding-inline: 1em;
	border-radius: var(--border_radius_roundest);
	border: 1px solid var(--text_color1_brightest);
	background: var(--color_white);
	color: var(--text_color1_bright);
	cursor: pointer;
	transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.chip:hover{
	border-color: var(--color_primary);
}

.chip.is_selected{
	background: var(--color_primary);
	border-color: var(--color_primary);
	color: var(--color_white);
	font-weight: var(--font_weight_semi_bold);
}

.chip:focus-visible{
	outline: 3px solid var(--color_primary);
	outline-offset: 2px;
}

/* --- Badge: נקודה / מספר --- */

.badge{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.5em;
	height: 1.5em;
	padding-inline: 0.4em;
	border-radius: var(--border_radius_roundest);
	background: var(--color_danger);
	color: var(--color_white);
	font-size: var(--font_size_smallest);
	font-weight: var(--font_weight_bold);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.badge--dot{
	min-width: 0.7em;
	width: 0.7em;
	height: 0.7em;
	padding: 0;
}

/* --- הודעת מצב (4 וריאנטים) --- */

.status_message{
	--my_background_color: var(--color_primary_softer);
	--my_color: var(--color_info);

	display: flex;
	gap: var(--space_1);
	align-items: flex-start;
	text-align: start;
	padding: var(--space_2);
	border-radius: var(--border_radius_base);
	background: var(--my_background_color);
	border-inline-start: 4px solid var(--my_color);
}

.status_message__icon{
	color: var(--my_color);
	font-size: var(--font_size_large);
	line-height: 1;
}

.status_message__title{
	display: block;
	font-weight: var(--font_weight_bold);
	color: var(--my_color);
	margin-block-end: 2px;
}

.status_message__text{
	font-size: var(--font_size_small);
	color: var(--text_color1_bright);
	line-height: var(--line_height_loose);
}

.status_message--success{ --my_background_color: var(--color_success_soft); --my_color: var(--color_success); }
.status_message--warning{ --my_background_color: var(--color_warning_soft); --my_color: var(--color_warning_deep); }
.status_message--error{ --my_background_color: var(--color_danger_soft); --my_color: var(--color_danger); }

}


/* ==== /css/lib/components/cards.css ==== */


/* ===== cards — כרטיסים: בסיס, כרטיס ישות, KPI ===== */

@layer components{

.card{
	background: var(--color_white);
	border-radius: var(--border_radius_round);
	box-shadow: var(--shadow_2);
	padding: var(--space_2);
	text-align: start;
}

/* --- כרטיס KPI --- */

.kpi_card{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	text-align: center;
	min-width: 110px;
}

.kpi_card__value{
	font-size: var(--font_size_largest);
	font-weight: var(--font_weight_black);
	color: var(--color_primary_deep);
	font-variant-numeric: tabular-nums;
	direction: ltr;
}

.kpi_card__label{
	font-size: var(--font_size_smaller);
	color: var(--text_color1_brighter);
}


/* --- spec_list: שורות תווית/ערך (פרטי משמרת) --- */

.spec_list{
	display: flex;
	flex-direction: column;
}

.spec_list__row{
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--space_2);
	padding-block: 9px;
	border-block-end: 1px solid var(--color_primary_softer);
}

.spec_list__row:last-child{
	border-block-end: 0;
}

.spec_list__label{
	color: var(--text_color1_brighter);
	font-size: var(--font_size_small);
}

.spec_list__value{
	font-weight: var(--font_weight_bold);
	color: var(--text_color1);
	text-align: end;
}

.spec_list__value.is_highlight{
	color: var(--color_primary_deep);
	font-weight: var(--font_weight_black);
	direction: ltr;
	unicode-bidi: isolate;
}

/* --- doc_card: מסמך לשיתוף/העלאה --- */

.doc_card{
	display: flex;
	flex-direction: column;
	gap: var(--space_1);
}

.doc_card__head{
	display: flex;
	align-items: center;
	gap: var(--space_1);
}

.doc_card__icon{
	color: var(--color_primary_deep);
	font-size: var(--font_size_larger);
	width: 1.3em;
	text-align: center;
	flex-shrink: 0;
}

.doc_card--required .doc_card__icon{
	color: var(--color_danger);
}

.doc_card__title{
	font-weight: var(--font_weight_bold);
	flex: 1;
}

.doc_card__subtitle{
	font-size: var(--font_size_smaller);
	color: var(--text_color1_brightest);
	direction: ltr;
	unicode-bidi: isolate;
	text-align: end;
}

.doc_card .capture_box{
	min-height: 90px;
}

/* --- contact_card: איש קשר במקום --- */

.contact_card{
	display: flex;
	align-items: center;
	gap: var(--space_1);
}

.contact_card__info{
	flex: 1;
	display: flex;
	flex-direction: column;
	text-align: start;
}

.contact_card__role{
	font-size: var(--font_size_smaller);
	color: var(--text_color1_brighter);
}

.contact_card__name{
	font-weight: var(--font_weight_bold);
	font-size: var(--font_size_large);
}

.contact_card__actions{
	display: flex;
	gap: var(--space_1);
}


/* תגיות מרובות בכותרת כרטיס */
/* --- rating: כוכבים + ממוצע --- */

.rating{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--font_size_small);
	color: var(--text_color1_brighter);
}

.rating__stars{
	color: var(--color_warning);
	letter-spacing: 1px;
}

.rating__value{
	font-weight: var(--font_weight_bold);
	color: var(--text_color1);
}

/* --- gallery: תמונה ראשית + כפתור "+N" --- */

.gallery_trigger{
	position: absolute;
	inset-inline-start: var(--space_1);
	inset-block-end: var(--space_1);
	display: flex;
	align-items: center;
	gap: 6px;
	background: rgb(7 61 90 / 0.55);
	color: var(--color_white);
	border: none;
	border-radius: var(--border_radius_base);
	padding: 0.4em 0.8em;
	font-size: var(--font_size_small);
	font-weight: var(--font_weight_semi_bold);
	backdrop-filter: blur(2px);
}

.gallery_strip{
	display: flex;
	gap: 8px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	padding-block-end: 4px;
}

.gallery_strip__item{
	flex-shrink: 0;
	width: 96px;
	height: 72px;
	border-radius: var(--border_radius_base);
	background-size: cover;
	background-position: center;
	scroll-snap-align: start;
}

/* --- review: חוות דעת בודדת --- */

.review{
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-block: var(--space_1);
	border-block-end: 1px solid var(--color_primary_softer);
}

.review:last-child{ border-block-end: 0; }

.review__head{
	display: flex;
	align-items: center;
	gap: 8px;
}

.review__author{
	font-weight: var(--font_weight_semi_bold);
	font-size: var(--font_size_small);
}

.review__text{
	font-size: var(--font_size_small);
	color: var(--text_color1_brighter);
	line-height: var(--line_height_loose);
}

/* --- highlight_row: הדגשת שדה קריטי (שכר/שעות/נסיעות) --- */

.highlight_row{
	display: flex;
	align-items: center;
	gap: var(--space_1);
	padding: var(--space_1) var(--space_2);
	background: var(--color_primary_softer);
	border-radius: var(--border_radius_base);
}

.highlight_row__icon{
	color: var(--color_primary_deep);
	font-size: var(--font_size_large);
	width: 1.3em;
	text-align: center;
}

.highlight_row__label{
	flex: 1;
	font-size: var(--font_size_small);
	color: var(--text_color1_brighter);
}

.highlight_row__value{
	font-weight: var(--font_weight_black);
	font-size: var(--font_size_large);
	color: var(--color_primary_deep);
	direction: ltr;
	unicode-bidi: isolate;
}


/* --- הערת שוליים משפטית תחת "שכר משוער" --- */

/* --- compare_table: השוואת מועמדים, עמודה לכל מועמד --- */

.compare_table{
	display: flex;
	flex-direction: column;
	width: 100%;
}

.compare_table__row{
	display: grid;
	grid-template-columns: 90px repeat(auto-fit, minmax(80px, 1fr));
	align-items: center;
	gap: 4px;
	padding-block: 8px;
	border-block-end: 1px solid var(--color_primary_softer);
}

.compare_table__row--header{
	border-block-end-width: 2px;
	border-block-end-color: var(--color_primary_soft);
}

.compare_table__label{
	font-size: var(--font_size_smaller);
	color: var(--text_color1_brighter);
}

.compare_table__col{
	text-align: center;
	font-size: var(--font_size_small);
	font-weight: var(--font_weight_semi_bold);
	color: var(--text_color1);
}

.compare_table__col--header{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	font-size: var(--font_size_smallest);
	font-weight: var(--font_weight_semi_bold);
}

.compare_table__col.is_best{
	color: var(--color_success_deep);
	background: var(--color_success_softer);
	border-radius: var(--border_radius_base);
	padding-block: 2px;
}

}


/* ==== /css/lib/components/avatars.css ==== */


/* ===== avatars — תמונות פרופיל, 6 גדלים, מצבים וערימה ===== */

@layer components{

.avatar{
	--my_size: 40px;

	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--my_size);
	aspect-ratio: 1 / 1;
	border-radius: 100%;
	background: var(--color_primary_soft);
	color: var(--color_primary_deep);
	font-weight: var(--font_weight_bold);
	font-size: calc( var(--my_size) * 0.38 );
	overflow: visible;
	flex-shrink: 0;
}

.avatar img,
.avatar .avatar__image{
	width: 100%;
	height: 100%;
	border-radius: 100%;
	object-fit: cover;
}

/* Fallback אותיות ראשונות — פשוט טקסט בתוך האלמנט */

/* --- 6 גדלים --- */
.avatar--xs{ --my_size: 24px; }
.avatar--sm{ --my_size: 32px; }
.avatar--md{ --my_size: 40px; }
.avatar--lg{ --my_size: 56px; }
.avatar--xl{ --my_size: 72px; }
.avatar--xxl{ --my_size: 96px; }

/* --- חיווי אונליין/אופליין --- */

.avatar__presence{
	position: absolute;
	inset-block-end: 2%;
	inset-inline-end: 2%;
	width: 26%;
	aspect-ratio: 1 / 1;
	border-radius: 100%;
	border: 2px solid var(--color_white);
	background: var(--text_color1_brightest);
}

.avatar.is_online .avatar__presence{
	background: var(--color_success);
}

.avatar.is_offline .avatar__presence{
	background: var(--text_color1_brightest);
}

/* --- ערימת מועמדים --- */

.avatar_stack{
	display: inline-flex;
	align-items: center;
}

.avatar_stack .avatar{
	border: 2px solid var(--color_white);
}

.avatar_stack .avatar:not(:first-child){
	margin-inline-start: calc( var(--my_size, 40px) * -0.35 );
}

.avatar_stack__more{
	margin-inline-start: 0.5em;
	font-size: var(--font_size_smaller);
	color: var(--text_color1_brighter);
	font-weight: var(--font_weight_semi_bold);
}

/* --- פס שלמות פרופיל --- */

.profile_completeness{
	display: flex;
	flex-direction: column;
	gap: 6px;
	text-align: start;
}

.profile_completeness__label{
	display: flex;
	justify-content: space-between;
	font-size: var(--font_size_smaller);
	color: var(--text_color1_brighter);
}

.profile_completeness__track{
	height: 8px;
	border-radius: var(--border_radius_roundest);
	background: var(--color_primary_softer);
	overflow: hidden;
}

.profile_completeness__value{
	--my_progress: 50%;
	height: 100%;
	width: var(--my_progress);
	border-radius: inherit;
	background: linear-gradient(90deg, var(--color_primary), var(--color_primary_deep));
	transition: width 0.4s ease-in-out;
}


/* --- מצב עם תמונת פרופיל שנבחרה (client-side, ראו profilePhoto.js) --- */

.avatar.has_photo{
	color: transparent;
}

}


/* ==== /css/lib/components/overlays.css ==== */


/* ===== overlays — מודאל במבנה קבוע, Bottom sheet, Toast ===== */

@layer components{

/* --- מודאל: מבנה קבוע (אפיון 3.3.14.1) --- */

.modal{
	position: fixed;
	inset: 0;
	z-index: 100;
	display: none;
	align-items: center;
	justify-content: center;
	padding: var(--space_2);
	background: rgb(7 61 90 / 0.45);
	backdrop-filter: blur(3px);
}

.modal.is_open{
	display: flex;
}

.modal__dialog{
	width: min(440px, 100%);
	background: var(--color_white);
	border-radius: var(--border_radius_round);
	box-shadow: var(--shadow_5);
	padding: var(--space_3);
	display: flex;
	flex-direction: column;
	gap: var(--space_2);
	text-align: center;
}

/* אייקון בתוך עיגול רך — לפי העיצוב */
.modal__icon{
	--my_icon_color: var(--color_primary);
	--my_icon_background: var(--color_primary_softer);

	width: 84px;
	aspect-ratio: 1 / 1;
	border-radius: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-inline: auto;
	font-size: calc( var(--font_size) * 1.8 );
	line-height: 1;
	color: var(--my_icon_color);
	background: var(--my_icon_background);
}

.modal--error .modal__icon{ --my_icon_color: var(--color_danger); --my_icon_background: var(--color_danger_softer); }
.modal--warning .modal__icon{ --my_icon_color: var(--color_warning_deep); --my_icon_background: var(--color_warning_soft); }
.modal--success .modal__icon{ --my_icon_color: var(--color_success); --my_icon_background: var(--color_success_softer); }

.modal__title{
	font-size: var(--font_size_larger);
	font-weight: var(--font_weight_bold);
	color: var(--text_color1);
}

.modal__text{
	font-size: var(--font_size_small);
	color: var(--text_color1_brighter);
	line-height: var(--line_height_loosest);
}

/* כפתורים ברוחב מלא, בערימה — לפי העיצוב */
.modal__actions{
	display: flex;
	flex-direction: column;
	gap: var(--space_1);
	margin-block-start: var(--space_1);
}

.modal__actions .button{
	width: 100%;
}

.modal.is_open .modal__dialog{
	animation: modalIn 0.22s ease-out;
}

/* תוכן גלילה (למשל תנאי שימוש) */
.modal__body{
	text-align: start;
	font-size: var(--font_size_small);
	color: var(--text_color1_brighter);
	line-height: var(--line_height_loosest);
	max-height: 40dvh;
	overflow: auto;
}

/* פעולה מרכזית גדולה (עיגול וואטסאפ במודאל מספר חסום) */
.modal__big_action{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin-inline: auto;
	color: var(--color_success);
	font-weight: var(--font_weight_semi_bold);
	text-decoration: none;
}

.modal__big_action .modal__big_action_circle{
	width: 64px;
	aspect-ratio: 1 / 1;
	border-radius: 100%;
	background: var(--color_success);
	color: var(--color_white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: calc( var(--font_size) * 1.4 );
	box-shadow: var(--shadow_2);
}

.modal__big_action .modal__big_action_label{
	text-decoration: underline;
}

/* נעילת גלילת רקע כשמודאל פתוח */
body.has_open_modal{
	overflow: hidden;
}

/* --- Bottom sheet --- */

.bottom_sheet{
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 100;
	display: none;
	flex-direction: column;
	gap: var(--space_2);
	background: var(--color_white);
	border-start-start-radius: var(--border_radius_roundest);
	border-start-end-radius: var(--border_radius_roundest);
	box-shadow: var(--shadow_5);
	padding: var(--space_2) var(--space_3) var(--space_4);
}

.bottom_sheet.is_open{
	display: flex;
	animation: toastIn 0.25s ease-out;
}

.bottom_sheet{
	max-height: 82dvh;
	overflow: auto;
}

.bottom_sheet__handle{
	width: 44px;
	height: 5px;
	border-radius: var(--border_radius_roundest);
	background: var(--text_color1_brightest);
	margin-inline: auto;
}

.bottom_sheet__title{
	font-weight: var(--font_weight_bold);
	text-align: center;
}

.bottom_sheet__options{
	display: flex;
	flex-direction: column;
	gap: var(--space_1);
}

/* --- Toast / הודעת on-screen --- */

.toast{
	--my_color: var(--color_info);

	position: fixed;
	inset-block-end: var(--space_4);
	inset-inline: 0;
	margin-inline: auto;
	width: fit-content;
	max-width: min(90dvw, 420px);
	z-index: 110;

	display: none;
	align-items: center;
	gap: 0.6em;
	padding-block: 0.7em;
	padding-inline: 1.2em;
	border-radius: var(--border_radius_roundest);
	background: var(--color_primary_deepest);
	color: var(--color_white);
	font-size: var(--font_size_small);
	box-shadow: var(--shadow_4);
}

.toast.is_open{
	display: flex;
	animation: toastIn 0.25s ease-out;
}

.toast.is_leaving{
	opacity: 0;
	translate: 0 10px;
	transition: opacity 0.3s ease-in-out, translate 0.3s ease-in-out;
}

/* מיכל ערימת Toasts — הפלאגין מייצר אותו */
.toast_container{
	position: fixed;
	inset-inline: 0;
	inset-block-end: var(--space_4);
	z-index: 110;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space_1);
	pointer-events: none;
}

.toast_container .toast{
	position: static;
	pointer-events: auto;
	cursor: pointer;
}

.toast__icon{
	color: var(--my_color);
	font-size: 1.2em;
	line-height: 1;
}

/*
	כפתור הפעולה בתוך ה-toast. ⚠️ ה-toast עצמו הוא cursor:pointer ונסגר
	בלחיצה, ולכן הכפתור חייב להיראות כמו יעד לחיצה נפרד — מסגרת וניגוד,
	ולא רק טקסט מודגש שנבלע בהודעה.
*/
.toast__action{
	flex-shrink: 0;
	margin-inline-start: 0.4em;
	padding-block: 0.25em;
	padding-inline: 0.9em;
	border: 1px solid var(--my_color);
	border-radius: var(--border_radius_roundest);
	background: transparent;
	color: var(--my_color);
	font-family: inherit;
	font-size: inherit;
	font-weight: var(--font_weight_bold);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.toast__action:hover,
.toast__action:focus-visible{
	background: var(--my_color);
	color: var(--color_primary_deepest);
}

@media (prefers-reduced-motion: reduce){
	.toast__action{ transition: none; }
}

.toast--success{ --my_color: #7ADFA3; }
.toast--error{ --my_color: #FF8A7C; }
.toast--info{ --my_color: var(--color_primary_soft); }


/* --- photo_cropper: עריכת מיקום/זום לתמונת פרופיל (client-side, profilePhoto.js) --- */

.photo_cropper{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space_2);
}

.photo_cropper__stage{
	position: relative;
	width: fit-content;
	margin-inline: auto;
	border-radius: var(--border_radius_base);
	overflow: hidden;
	background: var(--color_primary_softer);
	box-shadow: var(--shadow_2);
}

.photo_cropper__stage canvas{
	display: block;
}

/* טבעת מנחה: זה מה שיישאר גלוי בתוך האווטאר העגול */
.photo_cropper__ring{
	position: absolute;
	inset: 0;
	pointer-events: none;
	border-radius: 100%;
	box-shadow: 0 0 0 999px rgb(255 255 255 / 0.75);
	border: 2px solid var(--color_white);
}

.photo_cropper__zoom_row{
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	color: var(--text_color1_brighter);
}

.photo_cropper__zoom_row input[type="range"]{
	flex: 1;
	accent-color: var(--color_primary);
}

.photo_cropper__hint{
	font-size: var(--font_size_smaller);
	color: var(--text_color1_brighter);
	text-align: center;
}


/* --- confetti_canvas: חגיגת סיום הרשמה (confetti.js) --- */

.confetti_canvas{
	position: fixed;
	inset: 0;
	width: 100dvw;
	height: 100dvh;
	z-index: 300; /* מעל מודאלים וטוסטים — זה הרגע להיות מעל הכל */
	pointer-events: none;
}

}


/* ==== /css/lib/components/navigation.css ==== */


/* ===== navigation — Tab bar, Header, Stepper ===== */

@layer components{

/* --- Tab bar מובייל (5 פריטים) --- */

.tab_bar{
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 60;
	display: flex;
	justify-content: space-around;
	background: var(--color_white);
	box-shadow: var(--shadow_4);
	padding-block: 6px;
	padding-block-end: max(6px, env(safe-area-inset-bottom));
}

.tab_bar__item{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	font-size: var(--font_size_smallest);
	color: var(--text_color1_brighter);
	text-decoration: none;
	padding-block: 4px;
	padding-inline: var(--space_1);
	border-radius: var(--border_radius_base);
	position: relative;
}

.tab_bar__item .icon{
	font-size: var(--font_size_large);
	line-height: 1;
}

.tab_bar__item.is_active{
	color: var(--color_primary_deep);
	font-weight: var(--font_weight_bold);
}

.tab_bar__item .badge{
	position: absolute;
	inset-block-start: 0;
	inset-inline-end: 2px;
}

.tab_bar__item:focus-visible{
	outline: 3px solid var(--color_primary);
	outline-offset: -3px;
}

/* --- Header אפליקציה --- */

.app_header{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space_2);
	padding-block: var(--space_1);
	padding-inline: var(--space_2);
	background: var(--color_white);
	box-shadow: var(--shadow_1);
}

.app_header__actions{
	display: flex;
	align-items: center;
	gap: var(--space_2);
}

/* --- Stepper: חיווי שלבים --- */

.stepper{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
}

.stepper__step{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	font-size: var(--font_size_smallest);
	color: var(--text_color1_brightest);
	min-width: 80px;
}

.stepper__dot{
	width: 2em;
	aspect-ratio: 1 / 1;
	border-radius: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color_primary_softer);
	color: var(--text_color1_brightest);
	font-weight: var(--font_weight_bold);
	font-variant-numeric: tabular-nums;
}

.stepper__connector{
	width: var(--space_5);
	height: 2px;
	background: var(--color_primary_soft);
	margin-block-end: 1.2em;
}

.stepper__step.is_done .stepper__dot{
	background: var(--color_success);
	color: var(--color_white);
}

.stepper__step.is_done{
	color: var(--color_success);
}

.stepper__step.is_active .stepper__dot{
	background: var(--color_primary);
	color: var(--color_white);
}

.stepper__step.is_active{
	color: var(--color_primary_deep);
	font-weight: var(--font_weight_bold);
}


/* --- steps_progress: פס התקדמות שלבים (אונבורדינג) --- */

.steps_progress{
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
}

.steps_progress__meta{
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-size: var(--font_size_small);
}

.steps_progress__current{
	color: var(--color_primary_deep);
	font-weight: var(--font_weight_bold);
}

.steps_progress__name{
	color: var(--text_color1_brightest);
}

.steps_progress__skip{
	color: var(--text_color1_brightest);
	text-decoration: underline dotted;
}

.steps_progress__track{
	display: flex;
	gap: 8px;
}

.steps_progress__segment{
	flex: 1;
	height: 9px;
	border-radius: var(--border_radius_roundest);
	background: var(--color_primary_softer);
}

.steps_progress__segment.is_done{
	background: var(--color_primary);
}

}


/* ==== /css/lib/components/top_progress.css ==== */


/*
	===== top_progress — פס טעינה עליון =====

	מנוהל ע"י core/plugins/topProgress.js, שמאזין לאירועי api_request_started/finished.
	יושב מעל הכל (כולל מודאלים) כי הוא חיווי מערכת, לא תוכן — אבל הוא דק
	ו-pointer-events: none, כך שאינו חוסם שום אינטראקציה.
*/

@layer components{

.top_progress{
	position: fixed;
	inset-inline: 0;
	inset-block-start: 0;
	z-index: 900;

	block-size: 3px;
	pointer-events: none;

	opacity: 0;
	transition: opacity 0.21s ease;
}

.top_progress.is_active{
	opacity: 1;
}

.top_progress__bar{
	block-size: 100%;
	inline-size: 0;

	/* RTL: הפס מתמלא מימין לשמאל, בכיוון הקריאה */
	margin-inline-start: auto;

	background: linear-gradient(
		to left,
		var(--color_primary),
		color-mix(in srgb, var(--color_primary) 55%, var(--color_info))
	);

	/* זוהר עדין בקצה המתקדם — מה שנותן את התחושה של "רץ" */
	box-shadow: 0 0 8px color-mix(in srgb, var(--color_primary) 70%, transparent);

	transition: inline-size 0.21s ease;
}

@media (prefers-reduced-motion: reduce){
	.top_progress__bar{
		transition: none;
		box-shadow: none;
	}
}

}


/* ==== /css/lib/components/skeleton.css ==== */


/*
	===== skeleton — מצבי טעינה ושגיאה של מסך =====

	מנוהל ע"י core/plugins/screenLoader.js, שמוסיף למסך אחת משלוש המחלקות:
	is_loading / is_loaded / is_failed.

	העיקרון: התוכן האמיתי כבר קיים ב-DOM (המסכים תמיד שם) — בזמן טעינה
	הוא מוחלף חזותית בשלד, ולא נמחק. כך אין קפיצת פריסה כשהתוכן מגיע.

	סימון תוכן שיוחלף בשלד: class="skeleton_target" על העוטף.
	אם לעוטף כבר יש מידה קבועה משלו (למשל תמונה עם height inline),
	מוסיפים גם class="skeleton_target--sized" כדי לא לכפות עליו
	min-block-size/min-inline-size גנריים.
*/

@layer components{

/* --- בזמן טעינה: התוכן נעלם, השלד מופיע --- */

.screen.is_loading .skeleton_target{
	visibility: hidden;
	position: relative;

	/*
		אזור שתוכנו נוקה הוא ריק, ובלי מידה מינימלית הוא קורס לגובה אפס
		והשלד לא נראה כלל. min-block-size מבטיח פס נראה; min-inline-size
		מטפל באלמנטים inline שרוחבם נגזר מהטקסט שנמחק.
	*/
	min-block-size: 1.05em;
	min-inline-size: 4em;
}

/*
	אווטארים כבר נושאים מידות משלהם — לא לכפות עליהם מינימום.
	.avatar הוא רכיב lib (avatars.css), ולכן מותר לשם כאן במפורש.

	לאלמנטים אחרים עם מידה קבועה משלהם (למשל תמונה עם height inline) —
	.skeleton_target--sized הוא הבלאי-אאוט הגנרי: כל אלמנט שכבר יודע
	את גודלו יכול לשאת אותו, בלי שהקובץ הזה יצטרך להכיר שם מחלקה
	ספציפי מ-css/app (מחלקה של ישות עסקית, שהייתה כאן קודם).
*/
.screen.is_loading .skeleton_target.avatar,
.screen.is_loading .skeleton_target.skeleton_target--sized{
	min-block-size: 0;
	min-inline-size: 0;
}

.screen.is_loading .skeleton_target::after{
	content: "";
	visibility: visible;

	position: absolute;
	inset: 0;

	border-radius: var(--border_radius_base, 8px);
	background: var(--skeleton_base);

	background-image: linear-gradient(
		to left,
		transparent 0%,
		var(--skeleton_shine) 50%,
		transparent 100%
	);
	background-size: 220% 100%;
	background-repeat: no-repeat;

	animation: skeletonSweep 1.4s ease-in-out infinite;
}

:root{
	--skeleton_base: color-mix(in srgb, var(--text_color1) 12%, transparent);
	--skeleton_shine: color-mix(in srgb, var(--color_white, #fff) 55%, transparent);
}

/* RTL: הבזק נע מימין לשמאל, בכיוון הקריאה */
@keyframes skeletonSweep{
	from{ background-position: -110% 0; }
	to{ background-position: 110% 0; }
}

/* --- מצב שגיאה --- */

.screen_error{
	display: none;
	flex-direction: column;
	align-items: center;
	gap: var(--space_1, 8px);

	padding: var(--space_2, 16px);
	text-align: center;
}

.screen.is_failed .screen_error{
	display: flex;
}

/* מצב שגיאה מסתיר גם את השלד וגם את התוכן החלקי */
.screen.is_failed .skeleton_target{
	display: none;
}

.screen_error__icon{
	font-size: 1.9em;
	color: var(--color_warning);
}

.screen_error__title{
	font-weight: var(--font_weight_bold);
}

.screen_error__text{
	font-size: var(--font_size_smaller);
	color: var(--text_color1_brighter);
}

@media (prefers-reduced-motion: reduce){
	.screen.is_loading .skeleton_target::after{
		animation: none;
	}
}

}


/* ==== /css/lib/components/footer.css ==== */


/* ===== footer — קישורים משפטיים וקרדיטים ===== */

/*
	⚠️ powered_by והלוגו אינם כאן: הם עברו ל-powered_by.css.
	   הסיבה — מסך הספלאש מציג אותם, והקובץ הזה נטען ב-css_deferred.
	   ראו את הערת הכותרת שם.
*/

@layer components{

footer.full_policy_and_credits_footer{
	--my_font_size: calc( var(--font_size) * 0.87 );

	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	text-align: center;
	line-height: calc( var(--line_height) * 1.8 );
	color: var(--text_color1_brighter);
	font-weight: var(--font_weight_light);
	font-size: var(--my_font_size);
	margin-block: 10px;
}

footer.full_policy_and_credits_footer .policy{
	width: 100%;
}

footer.full_policy_and_credits_footer .legal_links{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 5%;
}

footer.full_policy_and_credits_footer .legal_links a{
	display: inline-flex;
	align-items: center;
}

footer.full_policy_and_credits_footer .legal_links a::before{
	font-family: "FontAwesome";
	font-weight: 900;
	content: "";
	font-size: calc( var(--my_font_size) * 0.63 );
	padding-inline-end: 10px;
	text-decoration: none;
}

footer.full_policy_and_credits_footer .legal_links a.terms::before{
	content: "\f570";
}

footer.full_policy_and_credits_footer .legal_links a.privacy_policy::before{
	content: "\f52b";
}

footer.full_policy_and_credits_footer .legal_links a.accessibility_policy::before{
	content: "\f5ca";
}

footer.full_policy_and_credits_footer .powered_by{
	display: flex;
	justify-content: center;
}

}


/* ==== /css/lib/utilities.css ==== */


/*
	===== utilities — עוזרים גנריים לחלוטין =====

	⚠️ הקובץ הזה נוסף ל-lib ולא ל-app כי הוא עומד במבחן ההעתקה: אין בו
	   שם, ערך או הנחה שקשורים לדומיין כלשהו, והוא לא תלוי בטוקן של themes.
	   כלל אחד לכל שורה כאן; משהו שמתחיל להיות ספציפי — עובר ל-app.

	visually_hidden — טקסט לקורא מסך בלבד (caption של טבלה, כותרת סקציה
	שהעיצוב מוסר). לא display:none ולא visibility:hidden — שניהם מסירים
	את הטקסט גם מקורא המסך, וזו בדיוק המטרה ההפוכה.
*/

@layer utilities{

.visually_hidden:not(:focus):not(:active){
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* דילוג לתוכן — נגלה רק בפוקוס מקלדת */
.skip_link{
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	z-index: 200;
	padding-block: 0.5em;
	padding-inline: 1em;
	background: var(--color_white);
	color: var(--color_primary);
	border-radius: var(--border_radius_more_square);
	translate: 0 -150%;
	transition: translate 0.15s ease-out;
}

.skip_link:focus-visible{
	translate: 0 0;
}

@media (prefers-reduced-motion: reduce){
	.skip_link{ transition: none; }
}

}


/* ==== /css/app/components/status_badge.css ==== */


/*
	===== status_badge — תג מצב של ישות: נקודה + טקסט (+ אייקון) =====

	לא צבע בלבד: לכל מצב נקודה, טקסט ואייקון אופציונלי, כך שקורא מסך
	ומשתמש עיוור-צבעים מקבלים את אותו מידע. הוריאנטים של הדומיין
	(--active, --locked, ...) יושבים ב-status_variants.css; כאן המבנה בלבד.

	<span class="status_badge status_badge--active"><i class="fa-solid fa-circle-check status_badge__icon" aria-hidden="true"></i>פעיל</span>
*/

@layer components{

.status_badge{
	--my_background_color: var(--color_primary_softer);
	--my_color: var(--text_color1_bright);
	--my_dot_color: var(--text_color1_brightest);
	--my_border_color: transparent;
	--my_font_size: var(--font_size_smaller);
	--my_padding_block: 0.32em;
	--my_padding_inline: 0.8em;

	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	font-size: var(--my_font_size);
	font-weight: var(--font_weight_semi_bold);
	line-height: 1;
	white-space: nowrap;
	padding-block: var(--my_padding_block);
	padding-inline: var(--my_padding_inline);
	border-radius: var(--border_radius_roundest);
	color: var(--my_color);
	background: var(--my_background_color);
	border: 1px solid var(--my_border_color);
}

/* הנקודה — ::before, אין אלמנט נוסף ב-HTML */
.status_badge::before{
	content: "";
	inline-size: 0.55em;
	block-size: 0.55em;
	border-radius: 50%;
	background: var(--my_dot_color);
	flex-shrink: 0;
}

.status_badge__icon{
	font-size: 0.95em;
	line-height: 1;
	color: var(--my_dot_color);
}

/* --- גדלים --- */

.status_badge--large{
	--my_font_size: var(--font_size_small);
	--my_padding_block: 0.45em;
	--my_padding_inline: 1em;
}

.status_badge--dot_only{
	--my_padding_inline: 0.5em;
	--my_padding_block: 0.5em;
	gap: 0;
}

.status_badge--dot_only::before{
	inline-size: 0.7em;
	block-size: 0.7em;
}

/* --- מצבים --- */

/* דופק — למצב חי או קריטי; כבוי ב-reduced-motion */
.status_badge.is_pulsing::before{
	animation: statusBadgePulse 1.6s ease-in-out infinite;
	will-change: opacity, scale;
}

@keyframes statusBadgePulse{
	0%, 100%{ opacity: 1; scale: 1; }
	50%{ opacity: 0.45; scale: 1.25; }
}

@media (prefers-reduced-motion: reduce){
	.status_badge.is_pulsing::before{ animation: none; will-change: auto; }
}

.status_badge.is_muted{
	opacity: 0.6;
}

}


/* ==== /css/app/components/status_variants.css ==== */


/*
	===== status_variants — צביעת מצב לפי הדומיין של AMSSS, על גבי רכיבים גנריים =====

	רכיבי הבסיס (.tag, .button, .fancy_button, .card, .toast, .status_badge)
	חיים ב-css/lib (או ב-app/components כמבנה בלבד) עם מנגנון סקין דרך --my_*.
	כאן — ורק כאן — הוריאנטים שהפרויקט מוסיף על גביהם, וכל וריאנט שתלוי
	בטוקן שמוגדר ב-app/css/app/themes בלבד. הקובץ הזה *מרחיב* רכיבים — לא בונה חדשים.

	המצבים של AMSSS (אפיון 9.2, 9.4, 9.6, 9.10):
		מפתח:  active · locked · disabled
		חשבון: pending · active · suspended · banned/deleted
		קובץ:  active · pending_delete · deleted
		אירוע: info · warning · critical · resolved
*/

@layer components{

/* --- status_badge: מצבי הדומיין --- */

.status_badge--active{ --my_background_color: var(--color_success_soft); --my_color: var(--color_success_deep); --my_dot_color: var(--color_success); }
.status_badge--locked{ --my_background_color: var(--color_danger_soft); --my_color: var(--color_danger_deep); --my_dot_color: var(--color_danger); }
.status_badge--disabled{ --my_background_color: var(--color_primary_softer); --my_color: var(--text_color1_brighter); --my_dot_color: var(--text_color1_brightest); }
.status_badge--pending{ --my_background_color: var(--color_info_soft); --my_color: var(--color_info_deep); --my_dot_color: var(--color_info); }
.status_badge--suspended{ --my_background_color: var(--color_warning_soft); --my_color: var(--color_warning_deep); --my_dot_color: var(--color_warning); }
.status_badge--banned,
.status_badge--deleted{ --my_background_color: var(--color_primary_softer); --my_color: var(--text_color1_brightest); --my_dot_color: var(--text_color1_brightest); text-decoration: line-through; }
.status_badge--pending_delete{ --my_background_color: var(--color_warning_soft); --my_color: var(--color_warning_deep); --my_dot_color: var(--color_warning); }

.status_badge--critical{ --my_background_color: var(--color_danger_soft); --my_color: var(--color_danger_deep); --my_dot_color: var(--color_danger); --my_border_color: color-mix(in srgb, var(--color_danger) 45%, transparent); }
.status_badge--warning{ --my_background_color: var(--color_warning_soft); --my_color: var(--color_warning_deep); --my_dot_color: var(--color_warning); }
.status_badge--info{ --my_background_color: var(--color_info_soft); --my_color: var(--color_info_deep); --my_dot_color: var(--color_info); }
.status_badge--success{ --my_background_color: var(--color_success_soft); --my_color: var(--color_success_deep); --my_dot_color: var(--color_success); }
.status_badge--resolved{ --my_background_color: var(--color_primary_softer); --my_color: var(--text_color1_brighter); --my_dot_color: var(--color_success); }
.status_badge--live{ --my_background_color: var(--color_success_soft); --my_color: var(--color_success_deep); --my_dot_color: var(--color_success); }

/* --- tag של המנוע: אותם מצבים בתג הקומפקטי --- */

.tag--active{ --my_background_color: var(--color_success_soft); --my_color: var(--color_success_deep); }
.tag--locked{ --my_background_color: var(--color_danger_soft); --my_color: var(--color_danger_deep); }
.tag--pending{ --my_background_color: var(--color_info_soft); --my_color: var(--color_info_deep); }
.tag--suspended,
.tag--pending_delete{ --my_background_color: var(--color_warning_soft); --my_color: var(--color_warning_deep); }
.tag--critical{ --my_background_color: var(--color_danger_soft); --my_color: var(--color_danger_deep); }
.tag--secondary{ --my_background_color: var(--color_secondary_soft); --my_color: var(--color_secondary_deep); }

/* --- button של המנוע: וריאנט "טכני" (מפתחות, סודות) --- */

.button--technical{ --my_background_color: var(--color_secondary_soft); --my_color: var(--color_secondary_deep); --my_border_color: color-mix(in srgb, var(--color_secondary) 35%, transparent); }

/* --- card: הדגשת מצב על כרטיס --- */

.card--critical{ border-inline-start: 4px solid var(--color_danger); }
.card--warning{ border-inline-start: 4px solid var(--color_warning); }
.card--info{ border-inline-start: 4px solid var(--color_info); }
.card--success{ border-inline-start: 4px solid var(--color_success); }

/*
	--- התאמות של lib לערכת נושא כהה ---
	ערכים ליטרליים בהירים ב-lib (.tag--neutral #EBEFF2, .toast--success/--error,
	shine של skeleton) נכתבו לרקע בהיר; כאן הם מקבלים את הטוקנים של הכהה.
	זה בדיוק תפקידו של הקובץ: וריאנט על רכיב lib, מחוץ ל-lib.
*/
.tag--neutral{ --my_background_color: var(--color_primary_softer); --my_color: var(--text_color1_brighter); }
.toast--success{ --my_color: var(--color_success_soft); }
.toast--error{ --my_color: var(--color_danger_soft); }
.toast--info{ --my_color: var(--color_primary_soft); }
.is_loading .skeleton_target{ --skeleton_shine: color-mix(in srgb, var(--color_primary_deepest) 22%, transparent); }

}


/* ==== /css/app/components/kpi_card.css ==== */


/*
	===== kpi_card — מרחיב את .card.kpi_card של ה-lib למדדי AMSSS =====

	ה-lib מגדיר .kpi_card (ערך + תווית). כאן: אייקון, מגמה, רמז, ספארקליין
	ווריאנט חומרה — הכל דרך --my_accent_color. הערך מספרי — LTR, ספרות טבלאיות.

	<article class="card kpi_card kpi_card--warning">
		<span class="kpi_card__icon"><i class="fa-solid fa-key" aria-hidden="true"></i></span>
		<span class="kpi_card__value"><bdo dir="ltr">1,284</bdo></span>
		<span class="kpi_card__label">בקשות היום</span>
		<span class="kpi_card__trend kpi_card__trend--up"><i class="fa-solid fa-arrow-trend-up" aria-hidden="true"></i><bdo dir="ltr">+12%</bdo></span>
	</article>
*/

@layer components{

.kpi_card{
	--my_accent_color: var(--color_primary);
	--my_background_color: var(--color_white);
	--my_border_color: var(--color_primary_softer);
	--my_padding: var(--space_3);

	position: relative;
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas: "value icon" "label icon" "trend trend" "spark spark";
	align-items: start;
	gap: var(--space_1) var(--space_2);
	min-inline-size: 12rem;
	padding: var(--my_padding);
	background: var(--my_background_color);
	border: 1px solid var(--my_border_color);
	border-radius: var(--border_radius_base);
	overflow: hidden;
	transition: border-color 0.2s ease-in-out, translate 0.2s ease-in-out;
}

/* קו מבטא עליון — הזהות של הכרטיס */
.kpi_card::before{
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-start: 0;
	block-size: 3px;
	background: linear-gradient(90deg, var(--my_accent_color), transparent 85%);
}

.kpi_card:hover{
	border-color: color-mix(in srgb, var(--my_accent_color) 45%, transparent);
	translate: 0 -2px;
}

.kpi_card__value{
	grid-area: value;
	font-size: var(--font_size_largest);
	font-weight: var(--font_weight_bold);
	line-height: 1.1;
	color: var(--text_color1);
	font-variant-numeric: tabular-nums;
	direction: ltr;
	unicode-bidi: isolate;
	text-align: start;
}

.kpi_card__label{
	grid-area: label;
	font-size: var(--font_size_small);
	font-weight: var(--font_weight_medium);
	color: var(--text_color1_brighter);
	line-height: var(--line_height_loose);
}

.kpi_card__icon{
	grid-area: icon;
	display: inline-grid;
	place-items: center;
	inline-size: 2.6em;
	block-size: 2.6em;
	border-radius: var(--border_radius_more_square);
	font-size: var(--font_size_small);
	color: var(--my_accent_color);
	background: color-mix(in srgb, var(--my_accent_color) 14%, transparent);
}

.kpi_card__trend{
	grid-area: trend;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-size: var(--font_size_smaller);
	font-weight: var(--font_weight_semi_bold);
	color: var(--text_color1_brighter);
}

.kpi_card__trend--up{ color: var(--color_success); }
.kpi_card__trend--down{ color: var(--color_danger); }
.kpi_card__trend--flat{ color: var(--text_color1_brightest); }

.kpi_card__hint{
	grid-area: trend;
	font-size: var(--font_size_smallest);
	color: var(--text_color1_brightest);
}

/* ספארקליין — SVG אינליין ב-currentColor, 100% רוחב */
.kpi_card__sparkline{
	grid-area: spark;
	inline-size: 100%;
	block-size: 2.4em;
	color: var(--my_accent_color);
	opacity: 0.85;
}

.kpi_card__sparkline svg{
	inline-size: 100%;
	block-size: 100%;
	overflow: visible;
}

/* --- וריאנטים --- */

.kpi_card--info{ --my_accent_color: var(--color_info); }
.kpi_card--success{ --my_accent_color: var(--color_success); }
.kpi_card--warning{ --my_accent_color: var(--color_warning); }
.kpi_card--critical{ --my_accent_color: var(--color_danger); }
.kpi_card--secondary{ --my_accent_color: var(--color_secondary); }

.kpi_card--compact{
	--my_padding: var(--space_2);
	min-inline-size: 9rem;
}

.kpi_card--compact .kpi_card__value{ font-size: var(--font_size_larger); }

/* --- מצבים --- */

.kpi_card.is_loading .kpi_card__value,
.kpi_card.is_loading .kpi_card__label,
.kpi_card.is_loading .kpi_card__trend{
	color: transparent;
}

.kpi_card.is_stale{
	border-style: dashed;
}

.kpi_card.is_stale .kpi_card__value{
	color: var(--text_color1_brighter);
}

@media (prefers-reduced-motion: reduce){
	.kpi_card{ transition: none; }
	.kpi_card:hover{ translate: none; }
}

}


/* ==== /css/app/components/tech_value_block.css ==== */


/*
	===== tech_value_block — ערך טכני (מזהה, מפתח, כתובת, חתימה) עם כפתור העתקה =====

	תמיד LTR ו-monospace, גם בממשק RTL; תווית בעברית מעל/לצד; הכפתור הוא
	js_copy_value (app/js/copyValue.js) — copy → .is_copied לרגע.

	<div class="tech_value_block">
		<span class="tech_value_block__label">מזהה מפתח</span>
		<code class="tech_value_block__value" dir="ltr">ak_live_fe5b67a8972c95d066f53ad0509fad75</code>
		<button type="button" class="tech_value_block__copy js_copy_value" aria-label="העתקה">
			<i class="fa-regular fa-copy" aria-hidden="true"></i>
		</button>
	</div>
*/

@layer components{

.tech_value_block{
	--my_background_color: var(--color_primary_softer);
	--my_color: var(--text_color1);
	--my_border_color: color-mix(in srgb, var(--color_primary_deep) 18%, transparent);
	--my_label_color: var(--text_color1_brighter);
	--my_font_family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
	--my_font_size: var(--font_size_small);
	--my_padding_block: 0.55em;
	--my_padding_inline: 0.85em;

	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas: "label label" "value copy";
	align-items: center;
	gap: 0.35em 0.6em;
	max-inline-size: 100%;
	color: var(--my_color);
}

.tech_value_block__label{
	grid-area: label;
	font-size: var(--font_size_smaller);
	font-weight: var(--font_weight_semi_bold);
	color: var(--my_label_color);
}

/* הערך — LTR מבודד: הכיוון של הדף לא נוגע במחרוזת */
.tech_value_block__value{
	grid-area: value;
	direction: ltr;
	unicode-bidi: isolate;
	text-align: start;
	font-family: var(--my_font_family);
	font-size: var(--my_font_size);
	font-weight: var(--font_weight_base);
	line-height: var(--line_height_loose);
	color: var(--my_color);
	background: var(--my_background_color);
	border: 1px solid var(--my_border_color);
	border-radius: var(--border_radius_more_square);
	padding-block: var(--my_padding_block);
	padding-inline: var(--my_padding_inline);
	overflow-wrap: anywhere;
	word-break: break-all;
	user-select: all;
	min-inline-size: 0;
}

.tech_value_block__copy{
	grid-area: copy;
	display: inline-grid;
	place-items: center;
	inline-size: 2.4em;
	block-size: 2.4em;
	font-size: var(--font_size_small);
	font-family: inherit;
	color: var(--text_color1_brighter);
	background: var(--color_white);
	border: 1px solid var(--my_border_color);
	border-radius: var(--border_radius_more_square);
	cursor: pointer;
	transition: color 0.15s ease-in-out, border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

.tech_value_block__copy:hover{
	color: var(--color_primary_deep);
	border-color: var(--color_primary);
}

.tech_value_block__copy:focus-visible{
	outline: 3px solid var(--color_primary);
	outline-offset: 2px;
}

.tech_value_block__copy:disabled{
	opacity: 0.45;
	cursor: not-allowed;
}

/* --- וריאנטים --- */

/* בשורה אחת: תווית לצד הערך */
.tech_value_block--inline{
	grid-template-columns: auto 1fr auto;
	grid-template-areas: "label value copy";
}

/* רב-שורתי (חתימה, מפתח ציבורי, JSON) */
.tech_value_block--multiline .tech_value_block__value{
	white-space: pre-wrap;
	font-size: var(--font_size_smaller);
	max-block-size: 12em;
	overflow: auto;
}

/* ערך ממוסך — ····· עד לחשיפה (js_toggle_mask) */
.tech_value_block.is_masked .tech_value_block__value{
	letter-spacing: 0.15em;
	color: var(--text_color1_brighter);
}

/* --- מצבים --- */

.tech_value_block.is_copied .tech_value_block__copy{
	color: var(--color_success);
	border-color: var(--color_success);
	background: var(--color_success_soft);
}

.tech_value_block.is_copied .tech_value_block__value{
	border-color: color-mix(in srgb, var(--color_success) 55%, transparent);
}

.tech_value_block.is_disabled{
	opacity: 0.55;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce){
	.tech_value_block__copy{ transition: none; }
}

}


/* ==== /css/app/components/secret_reveal_panel.css ==== */


/*
	===== secret_reveal_panel — מסך סוד חד-פעמי (sk_live_…, מפתח כספת) =====

	"נייר" בהיר בכוונה על ממשק כהה: הרגע היחיד שבו הסוד נראה. מצבים:
	  (ברירת מחדל) הערך מטושטש עד לחשיפה  →  .is_revealed  →  .is_copied
	  .is_acknowledged (המשתמש אישר ששמר) — הפעולה הבאה נפתחת
	  .is_expired — הסוד הוסתר סופית (רענון/יציאה)
	הכפתורים: js_secret_reveal, js_copy_value, js_secret_download, js_secret_acknowledge
	(app/js/secretReveal.js, copyValue.js).
*/

@layer components{

.secret_reveal_panel{
	--my_background_color: var(--color_secret_bg);
	--my_color: var(--color_secret_ink);
	--my_accent_color: var(--color_secret_accent);
	--my_font_family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
	--my_border_radius: var(--border_radius_base);
	--my_padding: var(--space_3);

	position: relative;
	display: grid;
	gap: var(--space_2);
	padding: var(--my_padding);
	color: var(--my_color);
	background: var(--my_background_color);
	border-radius: var(--my_border_radius);
	border: 1px solid color-mix(in srgb, var(--my_accent_color) 40%, transparent);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--my_accent_color) 12%, transparent), 0 24px 48px color-mix(in srgb, var(--color_canvas) 60%, transparent);
	text-align: start;
}

/* פס אזהרה משמאל/ימין לפי כיוון */
.secret_reveal_panel::before{
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	inline-size: 5px;
	border-start-start-radius: var(--my_border_radius);
	border-end-start-radius: var(--my_border_radius);
	background: var(--my_accent_color);
}

.secret_reveal_panel__header{
	display: flex;
	align-items: center;
	gap: var(--space_1);
	font-size: var(--font_size_large);
	font-weight: var(--font_weight_bold);
	color: var(--my_color);
}

.secret_reveal_panel__header .secret_reveal_panel__icon{
	color: var(--my_accent_color);
	font-size: 1.1em;
}

.secret_reveal_panel__warning{
	display: flex;
	gap: 0.6em;
	align-items: flex-start;
	font-size: var(--font_size_small);
	line-height: var(--line_height_loosest);
	color: var(--my_color);
	padding-block: 0.6em;
	padding-inline: 0.9em;
	border-radius: var(--border_radius_more_square);
	background: color-mix(in srgb, var(--my_accent_color) 12%, transparent);
}

.secret_reveal_panel__warning strong{
	font-weight: var(--font_weight_bold);
}

.secret_reveal_panel__label{
	font-size: var(--font_size_smaller);
	font-weight: var(--font_weight_semi_bold);
	color: color-mix(in srgb, var(--my_color) 75%, transparent);
}

/* הערך: LTR, monospace, מטושטש עד לחשיפה */
.secret_reveal_panel__value{
	direction: ltr;
	unicode-bidi: isolate;
	text-align: start;
	font-family: var(--my_font_family);
	font-size: var(--font_size_base);
	line-height: var(--line_height_loose);
	color: var(--my_color);
	background: color-mix(in srgb, var(--my_color) 6%, transparent);
	border: 1px dashed color-mix(in srgb, var(--my_accent_color) 55%, transparent);
	border-radius: var(--border_radius_more_square);
	padding-block: 0.7em;
	padding-inline: 0.9em;
	overflow-wrap: anywhere;
	word-break: break-all;
	user-select: none;
	filter: blur(6px);
	transition: filter 0.25s ease-in-out;
}

.secret_reveal_panel.is_revealed .secret_reveal_panel__value{
	filter: none;
	user-select: all;
}

.secret_reveal_panel__actions{
	display: flex;
	flex-wrap: wrap;
	gap: var(--space_1);
	align-items: center;
}

/* כפתורי הפאנל — על נייר בהיר הכפתור הניטרלי של ה-lib (משטח כהה) נכון כמו שהוא;
   כאן רק וריאנט "על הנייר" לכפתור המשני */
.secret_reveal_panel__actions .button--on_paper{
	--my_background_color: transparent;
	--my_color: var(--my_accent_color);
	--my_border_color: var(--my_accent_color);
	--my_box_shadow: none;
}

.secret_reveal_panel__acknowledge{
	display: flex;
	align-items: center;
	gap: 0.6em;
	font-size: var(--font_size_small);
	font-weight: var(--font_weight_semi_bold);
	color: var(--my_color);
	cursor: pointer;
}

.secret_reveal_panel__acknowledge input{
	accent-color: var(--my_accent_color);
	inline-size: 1.2em;
	block-size: 1.2em;
}

.secret_reveal_panel__meta{
	font-size: var(--font_size_smallest);
	color: color-mix(in srgb, var(--my_color) 70%, transparent);
}

/* --- מצבים --- */

.secret_reveal_panel.is_copied .secret_reveal_panel__value{
	border-color: var(--color_success);
	border-style: solid;
}

.secret_reveal_panel.is_acknowledged{
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--color_success) 22%, transparent);
	border-color: color-mix(in srgb, var(--color_success) 55%, transparent);
}

.secret_reveal_panel.is_acknowledged::before{
	background: var(--color_success);
}

.secret_reveal_panel.is_expired .secret_reveal_panel__value{
	filter: none;
	color: transparent;
	text-shadow: none;
	background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--my_color) 18%, transparent) 0 0.6em, transparent 0.6em 0.9em);
	user-select: none;
	pointer-events: none;
}

.secret_reveal_panel.is_expired .secret_reveal_panel__actions{
	display: none;
}

.secret_reveal_panel.is_loading .secret_reveal_panel__value{
	color: transparent;
	filter: none;
	background: color-mix(in srgb, var(--my_color) 10%, transparent);
	animation: secretRevealPulse 1.2s ease-in-out infinite;
	will-change: opacity;
}

@keyframes secretRevealPulse{
	0%, 100%{ opacity: 1; }
	50%{ opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce){
	.secret_reveal_panel__value{ transition: none; }
	.secret_reveal_panel.is_loading .secret_reveal_panel__value{ animation: none; will-change: auto; }
}

}


/* ==== /css/app/components/global_alert_bar.css ==== */


/*
	===== global_alert_bar — פס התראה גלובלי בראש הממשק =====

	מצב מערכת שנוגע לכל המסכים: תחזוקה, נעילת חירום, אין חיבור, גרסה חדשה.
	אחד בכל רגע; js_dismiss_alert סוגר (app/js/globalAlertBar.js). מוצג עם
	.is_visible; role=status/alert לפי החומרה נקבע ב-HTML.

	<div class="global_alert_bar global_alert_bar--critical is_visible" role="alert">
		<span class="global_alert_bar__icon"><i class="fa-solid fa-triangle-exclamation" aria-hidden="true"></i></span>
		<span class="global_alert_bar__text">נעילת חירום פעילה — כל המפתחות נעולים</span>
		<a href="#" class="global_alert_bar__action">לפרטים</a>
		<button type="button" class="global_alert_bar__close js_dismiss_alert" aria-label="סגירת ההתראה"><i class="fa-solid fa-xmark" aria-hidden="true"></i></button>
	</div>
*/

@layer components{

.global_alert_bar{
	--my_background_color: var(--color_primary_soft);
	--my_color: var(--text_color1);
	--my_accent_color: var(--color_primary_deep);
	--my_font_size: var(--font_size_small);

	display: none;
	align-items: center;
	gap: var(--space_2);
	padding-block: 0.65em;
	padding-inline: var(--space_3);
	font-size: var(--my_font_size);
	line-height: var(--line_height_loose);
	color: var(--my_color);
	background: var(--my_background_color);
	border-block-end: 1px solid color-mix(in srgb, var(--my_accent_color) 35%, transparent);
	box-shadow: inset 0 3px 0 var(--my_accent_color);
}

.global_alert_bar.is_visible{
	display: flex;
	animation: globalAlertBarIn 0.25s ease-out;
}

.global_alert_bar.is_leaving{
	opacity: 0;
	translate: 0 -0.5em;
	transition: opacity 0.2s ease-in, translate 0.2s ease-in;
}

/* גלובלי באמת: מוצמד לראש החלון מעל המסכים */
.global_alert_bar--fixed{
	position: fixed;
	inset-inline: 0;
	inset-block-start: 0;
	z-index: 105;
	padding-block-start: calc( 0.65em + env(safe-area-inset-top) );
}

.global_alert_bar__icon{
	color: var(--my_accent_color);
	font-size: 1.2em;
	line-height: 1;
	flex-shrink: 0;
}

.global_alert_bar__text{
	flex: 1 1 auto;
	min-inline-size: 0;
}

.global_alert_bar__text strong{
	font-weight: var(--font_weight_bold);
}

.global_alert_bar__action{
	flex-shrink: 0;
	font-weight: var(--font_weight_bold);
	color: var(--my_color);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	padding-block: 0.2em;
	padding-inline: 0.6em;
	border-radius: var(--border_radius_roundest);
	border: 1px solid color-mix(in srgb, var(--my_color) 40%, transparent);
}

.global_alert_bar__action:hover,
.global_alert_bar__action:focus-visible{
	background: color-mix(in srgb, var(--my_color) 12%, transparent);
	text-decoration: none;
}

.global_alert_bar__close{
	flex-shrink: 0;
	display: inline-grid;
	place-items: center;
	inline-size: 2em;
	block-size: 2em;
	font-size: 1em;
	color: var(--my_color);
	background: transparent;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.15s ease-in-out;
}

.global_alert_bar__close:hover{
	background: color-mix(in srgb, var(--my_color) 14%, transparent);
}

.global_alert_bar__close:focus-visible{
	outline: 3px solid var(--my_color);
	outline-offset: 2px;
}

/* --- וריאנטים --- */

.global_alert_bar--info{ --my_background_color: var(--color_info_soft); --my_color: var(--color_info_deep); --my_accent_color: var(--color_info); }
.global_alert_bar--success{ --my_background_color: var(--color_success_soft); --my_color: var(--color_success_deep); --my_accent_color: var(--color_success); }
.global_alert_bar--warning{ --my_background_color: var(--color_warning_soft); --my_color: var(--color_warning_deep); --my_accent_color: var(--color_warning); }
.global_alert_bar--critical{ --my_background_color: var(--color_danger_soft); --my_color: var(--color_danger_deep); --my_accent_color: var(--color_danger); }
.global_alert_bar--offline{ --my_background_color: var(--color_primary_softer); --my_color: var(--text_color1_bright); --my_accent_color: var(--text_color1_brightest); }

@keyframes globalAlertBarIn{
	from{ opacity: 0; translate: 0 -0.5em; }
	to{ opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce){
	.global_alert_bar.is_visible{ animation: none; }
	.global_alert_bar.is_leaving{ transition: none; }
	.global_alert_bar__close{ transition: none; }
}

}


/* ==== /css/app/components/wizard_steps.css ==== */


/*
	===== wizard_steps — מחוון שלבים (אשף 6 השלבים של פתיחת חשבון) =====

	<ol class="wizard_steps" aria-label="שלבי פתיחת החשבון">
		<li class="wizard_steps__step is_done"><span class="wizard_steps__marker" aria-hidden="true"><i class="fa-solid fa-check"></i></span><span class="wizard_steps__label">פרטי החשבון</span></li>
		<li class="wizard_steps__step is_current" aria-current="step"><span class="wizard_steps__marker" aria-hidden="true">2</span><span class="wizard_steps__label">קבוצה ומדיניות</span></li>
		<li class="wizard_steps__step"><span class="wizard_steps__marker" aria-hidden="true">3</span><span class="wizard_steps__label">דומיינים</span></li>
	</ol>
	המצב (is_done / is_current / is_error) מנוהל ב-app/js/wizardSteps.js; המחבר בין השלבים הוא ::after.
*/

@layer components{

.wizard_steps{
	--my_marker_size: 2em;
	--my_line_color: var(--color_primary_softer);
	--my_done_color: var(--color_success);
	--my_current_color: var(--color_primary);
	--my_error_color: var(--color_danger);
	--my_font_size: var(--font_size_smaller);

	display: flex;
	align-items: flex-start;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: wizard;
	font-size: var(--my_font_size);
}

.wizard_steps__step{
	position: relative;
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5em;
	text-align: center;
	color: var(--text_color1_brightest);
	min-inline-size: 0;
}

/* המחבר: קו מהמרכז של שלב לשלב הבא */
.wizard_steps__step:not(:last-child)::after{
	content: "";
	position: absolute;
	inset-block-start: calc( var(--my_marker_size) / 2 );
	inset-inline-start: 50%;
	inline-size: 100%;
	block-size: 2px;
	background: var(--my_line_color);
	z-index: 0;
}

.wizard_steps__step.is_done:not(:last-child)::after{
	background: var(--my_done_color);
}

.wizard_steps__marker{
	position: relative;
	z-index: 1;
	display: inline-grid;
	place-items: center;
	inline-size: var(--my_marker_size);
	block-size: var(--my_marker_size);
	border-radius: 50%;
	font-weight: var(--font_weight_bold);
	font-variant-numeric: tabular-nums;
	color: var(--text_color1_brighter);
	background: var(--color_white);
	border: 2px solid var(--my_line_color);
	transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, scale 0.2s ease-in-out;
}

.wizard_steps__label{
	font-weight: var(--font_weight_medium);
	line-height: var(--line_height_loose);
	max-inline-size: 9em;
}

.wizard_steps__hint{
	font-size: var(--font_size_smallest);
	color: var(--text_color1_brightest);
}

/* --- מצבים --- */

.wizard_steps__step.is_done{
	color: var(--text_color1_brighter);
}

.wizard_steps__step.is_done .wizard_steps__marker{
	color: var(--color_white);
	background: var(--my_done_color);
	border-color: var(--my_done_color);
}

.wizard_steps__step.is_current{
	color: var(--text_color1);
}

.wizard_steps__step.is_current .wizard_steps__marker{
	color: var(--color_white);
	background: var(--my_current_color);
	border-color: var(--my_current_color);
	scale: 1.12;
	box-shadow: 0 0 0 5px color-mix(in srgb, var(--my_current_color) 22%, transparent);
}

.wizard_steps__step.is_current .wizard_steps__label{
	font-weight: var(--font_weight_bold);
}

.wizard_steps__step.is_error .wizard_steps__marker{
	color: var(--color_white);
	background: var(--my_error_color);
	border-color: var(--my_error_color);
}

.wizard_steps__step.is_error{
	color: var(--color_danger_deep);
}

.wizard_steps__step.is_disabled{
	opacity: 0.45;
}

/* --- וריאנטים --- */

/* אנכי — לצד הטופס במסכים רחבים */
.wizard_steps--vertical{
	flex-direction: column;
	align-items: stretch;
	gap: var(--space_2);
}

.wizard_steps--vertical .wizard_steps__step{
	flex-direction: row;
	align-items: center;
	text-align: start;
	gap: var(--space_2);
}

.wizard_steps--vertical .wizard_steps__step:not(:last-child)::after{
	inset-block-start: var(--my_marker_size);
	inset-inline-start: calc( var(--my_marker_size) / 2 - 1px );
	inline-size: 2px;
	block-size: calc( 100% + var(--space_2) - var(--my_marker_size) );
}

.wizard_steps--vertical .wizard_steps__label{
	max-inline-size: none;
}

/* קומפקטי — מספרים בלבד (מובייל); התווית רק לשלב הנוכחי */
.wizard_steps--compact .wizard_steps__label{
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.wizard_steps--compact .wizard_steps__step.is_current .wizard_steps__label{
	position: static;
	inline-size: auto;
	block-size: auto;
	clip-path: none;
	white-space: normal;
}

@media (prefers-reduced-motion: reduce){
	.wizard_steps__marker{ transition: none; }
}

}


/* ==== /css/app/components/event_summary_card.css ==== */


/*
	===== event_summary_card — כרטיס אירוע אבטחה (security_events) =====

	מרחיב .card. פס חומרה בצד ההתחלה, כותרת = סוג האירוע + זמן, מטא (מפתח,
	קבוצה, IP) כערכים טכניים קטנים, תיאור, סטטוס ההתראות בערוצים ופעולות.
	.is_resolved מעמעם; .is_new מדגיש בטבעת עדינה (שהתקבל עכשיו).

	<article class="card event_summary_card event_summary_card--critical">
		<header class="event_summary_card__header">
			<span class="status_badge status_badge--critical">critical</span>
			<h3 class="event_summary_card__title">חריגת מכסה חוזרת</h3>
			<time class="event_summary_card__time" datetime="2026-09-06T13:54:05Z">לפני 4 דקות</time>
		</header>
		<dl class="event_summary_card__meta">…</dl>
		<p class="event_summary_card__description">…</p>
		<ul class="event_summary_card__channels">…</ul>
		<footer class="event_summary_card__actions">…</footer>
	</article>
*/

@layer components{

.event_summary_card{
	--my_accent_color: var(--color_info);
	--my_background_color: var(--color_white);
	--my_border_color: var(--color_primary_softer);

	position: relative;
	display: grid;
	gap: var(--space_2);
	padding: var(--space_3);
	padding-inline-start: calc( var(--space_3) + 4px );
	background: var(--my_background_color);
	border: 1px solid var(--my_border_color);
	border-radius: var(--border_radius_base);
	text-align: start;
}

.event_summary_card::before{
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	inline-size: 4px;
	background: var(--my_accent_color);
	border-start-start-radius: var(--border_radius_base);
	border-end-start-radius: var(--border_radius_base);
}

.event_summary_card__header{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space_1) var(--space_2);
}

.event_summary_card__title{
	flex: 1 1 auto;
	margin: 0;
	font-size: var(--font_size_base);
	font-weight: var(--font_weight_bold);
	color: var(--text_color1);
	line-height: var(--line_height_loose);
}

.event_summary_card__time{
	font-size: var(--font_size_smaller);
	color: var(--text_color1_brightest);
	white-space: nowrap;
}

/* מטא: dl כרשת תווית/ערך; הערכים טכניים (LTR) */
.event_summary_card__meta{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: var(--space_1) var(--space_2);
	margin: 0;
	font-size: var(--font_size_smaller);
}

.event_summary_card__meta > div{
	display: grid;
	gap: 0.2em;
	min-inline-size: 0;
}

.event_summary_card__meta dt{
	color: var(--text_color1_brightest);
	font-weight: var(--font_weight_medium);
}

.event_summary_card__meta dd{
	margin: 0;
	color: var(--text_color1_bright);
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	direction: ltr;
	unicode-bidi: isolate;
	text-align: start;
	overflow-wrap: anywhere;
}

.event_summary_card__description{
	margin: 0;
	font-size: var(--font_size_small);
	line-height: var(--line_height_loosest);
	color: var(--text_color1_brighter);
}

/* ערוצי ההתראה — צ'יפים: sent / pending / failed */
.event_summary_card__channels{
	display: flex;
	flex-wrap: wrap;
	gap: var(--space_1);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--font_size_smallest);
}

.event_summary_card__channel{
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding-block: 0.3em;
	padding-inline: 0.7em;
	border-radius: var(--border_radius_roundest);
	color: var(--text_color1_brighter);
	background: var(--color_primary_softer);
}

.event_summary_card__channel--sent{ color: var(--color_success_deep); background: var(--color_success_softer); }
.event_summary_card__channel--pending{ color: var(--color_warning_deep); background: var(--color_warning_softer); }
.event_summary_card__channel--failed{ color: var(--color_danger_deep); background: var(--color_danger_softer); }

.event_summary_card__actions{
	display: flex;
	flex-wrap: wrap;
	gap: var(--space_1);
	padding-block-start: var(--space_1);
	border-block-start: 1px solid var(--color_primary_softer);
}

/* --- וריאנטים --- */

.event_summary_card--info{ --my_accent_color: var(--color_info); }
.event_summary_card--warning{ --my_accent_color: var(--color_warning); }
.event_summary_card--critical{ --my_accent_color: var(--color_danger); }

/* --- מצבים --- */

.event_summary_card.is_new{
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--my_accent_color) 30%, transparent);
}

.event_summary_card.is_resolved{
	--my_accent_color: var(--color_success);
	opacity: 0.72;
}

.event_summary_card.is_resolved .event_summary_card__title{
	color: var(--text_color1_brighter);
}

.event_summary_card.is_loading .event_summary_card__title,
.event_summary_card.is_loading .event_summary_card__description{
	color: transparent;
}

}


/* ==== /css/app/components/recent_requests_list.css ==== */


/*
	===== recent_requests_list — 50 הבקשות האחרונות (api_request_log) =====

	רשימה צפופה, שורה לבקשה: זמן · פעולה · קובץ · משתמש קצה · סטטוס · משך.
	במסך צר השורה נערמת. שורות שגיאה מודגשות; is_loading = שלד; __empty ו-__more.

	<ol class="recent_requests_list">
		<li class="recent_requests_list__row">
			<time class="recent_requests_list__time" datetime="…">13:54:05</time>
			<span class="recent_requests_list__action">upload</span>
			<code class="recent_requests_list__file" dir="ltr">fil_1e36…ea08</code>
			<span class="recent_requests_list__end_user">user-4471</span>
			<span class="status_badge status_badge--success">201</span>
			<span class="recent_requests_list__duration"><bdo dir="ltr">12 ms</bdo></span>
		</li>
	</ol>
*/

@layer components{

.recent_requests_list{
	--my_row_background_color: var(--color_white);
	--my_row_border_color: var(--color_primary_softer);
	--my_font_size: var(--font_size_smaller);
	--my_mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--my_font_size);
	border-radius: var(--border_radius_base);
	overflow: hidden;
	border: 1px solid var(--my_row_border_color);
}

.recent_requests_list__row,
.recent_requests_list__head{
	display: grid;
	grid-template-columns: 5.5em 7em minmax(8em, 1.3fr) minmax(7em, 1fr) auto 5em;
	align-items: center;
	gap: var(--space_2);
	padding-block: 0.55em;
	padding-inline: var(--space_2);
	background: var(--my_row_background_color);
	color: var(--text_color1_bright);
	min-block-size: 2.75rem;
	text-align: start;
}

.recent_requests_list__head{
	font-size: var(--font_size_smallest);
	font-weight: var(--font_weight_semi_bold);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--text_color1_brightest);
	background: var(--color_primary_softer);
	position: sticky;
	inset-block-start: 0;
	z-index: 1;
}

.recent_requests_list__row:hover{
	background: color-mix(in srgb, var(--color_primary) 8%, var(--my_row_background_color));
}

.recent_requests_list__row.is_clickable{
	cursor: pointer;
}

.recent_requests_list__row.is_clickable:focus-visible{
	outline: 3px solid var(--color_primary);
	outline-offset: -3px;
}

.recent_requests_list__time{
	font-family: var(--my_mono);
	font-variant-numeric: tabular-nums;
	color: var(--text_color1_brightest);
	direction: ltr;
	unicode-bidi: isolate;
	text-align: start;
}

.recent_requests_list__action{
	font-weight: var(--font_weight_semi_bold);
	color: var(--text_color1);
}

.recent_requests_list__file,
.recent_requests_list__duration{
	font-family: var(--my_mono);
	direction: ltr;
	unicode-bidi: isolate;
	text-align: start;
	color: var(--text_color1_brighter);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.recent_requests_list__end_user{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--text_color1_brighter);
}

.recent_requests_list__duration{
	font-variant-numeric: tabular-nums;
	text-align: end;
}

/* --- מצבי שורה --- */

.recent_requests_list__row--error{
	box-shadow: inset 4px 0 0 var(--color_danger);
}

.recent_requests_list__row--blocked{
	box-shadow: inset 4px 0 0 var(--color_warning);
}

.recent_requests_list__row.is_new{
	animation: recentRequestIn 0.6s ease-out;
}

@keyframes recentRequestIn{
	from{ background: color-mix(in srgb, var(--color_primary) 25%, var(--my_row_background_color)); }
	to{ background: var(--my_row_background_color); }
}

/* --- מצבי רשימה --- */

.recent_requests_list__empty{
	display: grid;
	place-items: center;
	gap: var(--space_1);
	padding: var(--space_5);
	color: var(--text_color1_brightest);
	background: var(--my_row_background_color);
	text-align: center;
}

.recent_requests_list__empty i{
	font-size: 1.8em;
	opacity: 0.6;
}

.recent_requests_list__more{
	display: flex;
	justify-content: center;
	padding: var(--space_2);
	background: var(--my_row_background_color);
}

.recent_requests_list.is_loading .recent_requests_list__row > *{
	color: transparent;
}

/* --- מסך צר: השורה נערמת --- */

@media (max-width: 767px){
	.recent_requests_list__head{ display: none; }

	.recent_requests_list__row{
		grid-template-columns: 1fr auto;
		grid-template-areas: "action status" "file file" "meta meta";
		row-gap: 0.25em;
	}

	.recent_requests_list__action{ grid-area: action; }
	.recent_requests_list__file{ grid-area: file; }
	.recent_requests_list__row .status_badge{ grid-area: status; justify-self: end; }
	.recent_requests_list__time,
	.recent_requests_list__end_user,
	.recent_requests_list__duration{
		grid-area: meta;
		display: inline;
		text-align: start;
	}
	.recent_requests_list__end_user::before,
	.recent_requests_list__duration::before{ content: " · "; }
}

@media (prefers-reduced-motion: reduce){
	.recent_requests_list__row.is_new{ animation: none; }
}

}


/* ==== /css/app/components/policy_form.css ==== */


/*
	===== policy_form — טופס מדיניות קבוצה / פתיחת חשבון (מרחיב .app_form) =====

	סקציות (fieldset/legend), רשת של שני עמודות במסך רחב, תגי "מומלץ" ליד
	הערכים המומלצים של האפיון, שורת מכסות (דקה/שעה/יממה), אזור מסוכן.
	השדות עצמם הם .field של ה-lib (תווית, קלט, שגיאה, .is_invalid).

	<form class="app_form policy_form">
		<fieldset class="policy_form__section">
			<legend class="policy_form__legend">קישורי צפייה</legend>
			<div class="policy_form__grid">
				<div class="field"><label class="field__label" for="…">TTL <span class="policy_form__recommended">מומלץ 60</span></label>…</div>
			</div>
		</fieldset>
	</form>
*/

@layer components{

.policy_form{
	--my_section_gap: var(--space_4);
	--my_section_border_color: var(--color_primary_softer);

	display: grid;
	gap: var(--my_section_gap);
	inline-size: 100%;
	max-inline-size: 60rem;
	text-align: start;
}

.policy_form__section{
	display: grid;
	gap: var(--space_2);
	margin: 0;
	padding: var(--space_3);
	border: 1px solid var(--my_section_border_color);
	border-radius: var(--border_radius_base);
	background: var(--color_white);
	min-inline-size: 0;
}

.policy_form__legend{
	float: inline-start;
	inline-size: 100%;
	margin-block-end: var(--space_1);
	padding: 0;
	font-size: var(--font_size_large);
	font-weight: var(--font_weight_bold);
	color: var(--text_color1);
}

.policy_form__legend + *{
	clear: both;
}

.policy_form__intro{
	margin: 0;
	font-size: var(--font_size_small);
	color: var(--text_color1_brighter);
	line-height: var(--line_height_loosest);
}

.policy_form__grid{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: var(--space_2) var(--space_3);
}

.policy_form__grid .field{
	margin-block-end: 0;
	min-inline-size: 0;
}

/* תג "מומלץ" — ליד התווית; הערך המומלץ של האפיון */
.policy_form__recommended{
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	margin-inline-start: 0.5em;
	padding-block: 0.15em;
	padding-inline: 0.55em;
	font-size: var(--font_size_smallest);
	font-weight: var(--font_weight_semi_bold);
	line-height: 1;
	color: var(--color_success_deep);
	background: var(--color_success_soft);
	border-radius: var(--border_radius_roundest);
	vertical-align: middle;
}

.policy_form__hint{
	display: block;
	margin-block-start: 0.35em;
	font-size: var(--font_size_smaller);
	color: var(--text_color1_brightest);
	line-height: var(--line_height_loose);
}

/* שורת מכסות: שלושה שדות עם סיומת יחידה */
.policy_form__limits_row{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space_1);
}

.policy_form__unit{
	display: block;
	margin-block-start: 0.3em;
	font-size: var(--font_size_smallest);
	color: var(--text_color1_brightest);
	text-align: center;
}

/* שדה מספרי — LTR, ספרות טבלאיות */
.policy_form input[type="number"],
.policy_form .field__input--numeric{
	direction: ltr;
	text-align: start;
	font-variant-numeric: tabular-nums;
}

/* שורת מתג + הסבר */
.policy_form__switch_row{
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: var(--space_2);
	padding-block: var(--space_1);
	border-block-end: 1px solid var(--my_section_border_color);
}

.policy_form__switch_row:last-child{
	border-block-end: 0;
}

.policy_form__switch_label{
	font-size: var(--font_size_small);
	font-weight: var(--font_weight_semi_bold);
	color: var(--text_color1_bright);
}

/* אזור מסוכן */
.policy_form__section--danger{
	--my_section_border_color: color-mix(in srgb, var(--color_danger) 45%, transparent);
	background: var(--color_danger_softer);
}

.policy_form__section--danger .policy_form__legend{
	color: var(--color_danger_deep);
}

.policy_form__footer{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: var(--space_2);
}

.policy_form__dirty_note{
	margin-inline-end: auto;
	font-size: var(--font_size_smaller);
	color: var(--color_warning_deep);
	display: none;
}

/* --- מצבים --- */

.policy_form.is_dirty .policy_form__dirty_note{
	display: block;
}

.policy_form.is_saving{
	pointer-events: none;
	opacity: 0.7;
}

.policy_form.is_disabled .policy_form__section{
	opacity: 0.55;
	pointer-events: none;
}

.policy_form .field.is_invalid .field__input{
	border-color: var(--color_danger);
}

}


/* ==== /css/app/components/side_nav.css ==== */


/*
	===== side_nav — ניווט צדדי קבוע (רחב) / Offcanvas (צר) =====

	מקור אחד לכל המסכים (app/js/sideNav.js, כמו tabBar). מבנה:
	כותרת (לוגו) · קבוצות פריטים עם כותרת · פריט עם אייקון, תווית ותג ספירה ·
	פוטר (חשבון, יציאה). מצבים: .is_active לפריט הנוכחי (aria-current),
	.is_collapsed (אייקונים בלבד), .is_open (Offcanvas פתוח) + .side_nav_backdrop.

	<nav class="side_nav" aria-label="ניווט ראשי">
		<div class="side_nav__header">…</div>
		<ul class="side_nav__group">
			<li><a href="#dashboard_screen" class="side_nav__item is_active" aria-current="page">
				<span class="side_nav__icon"><i class="fa-solid fa-gauge-high" aria-hidden="true"></i></span>
				<span class="side_nav__label">סקירה</span></a></li>
		</ul>
	</nav>
*/

@layer components{

.side_nav{
	--my_background_color: var(--color_surface_raised);
	--my_color: var(--text_color1_brighter);
	--my_active_color: var(--text_color1);
	--my_active_background_color: var(--color_primary_soft);
	--my_accent_color: var(--color_primary);
	--my_border_color: var(--color_primary_softer);
	--my_width: 16rem;
	--my_collapsed_width: 4.5rem;

	display: flex;
	flex-direction: column;
	gap: var(--space_2);
	inline-size: var(--my_width);
	flex-shrink: 0;
	block-size: 100%;
	padding-block: var(--space_3);
	padding-inline: var(--space_2);
	background: var(--my_background_color);
	border-inline-end: 1px solid var(--my_border_color);
	overflow-y: auto;
	overscroll-behavior: contain;
	transition: inline-size 0.2s ease-in-out, translate 0.25s ease-in-out;
}

.side_nav__header{
	display: flex;
	align-items: center;
	gap: var(--space_1);
	padding-inline: 0.4em;
	padding-block-end: var(--space_2);
	border-block-end: 1px solid var(--my_border_color);
}

.side_nav__title{
	flex: 1 1 auto;
	min-inline-size: 0;
	font-size: var(--font_size_small);
	font-weight: var(--font_weight_bold);
	color: var(--text_color1);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* כפתור הכיווץ — במסך רחב בלבד (במסך צר התפריט הוא Offcanvas) */
.side_nav__collapse{
	display: none;
	place-items: center;
	inline-size: 2em;
	block-size: 2em;
	font-size: var(--font_size_smaller);
	color: var(--text_color1_brighter);
	background: transparent;
	border: 1px solid var(--my_border_color);
	border-radius: var(--border_radius_more_square);
	cursor: pointer;
	flex-shrink: 0;
}

.side_nav__collapse:hover{
	color: var(--text_color1);
	border-color: var(--color_primary);
}

.side_nav__collapse:focus-visible{
	outline: 3px solid var(--my_accent_color);
	outline-offset: 2px;
}

.side_nav__group{
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.side_nav__group_title{
	padding-inline: 0.8em;
	padding-block: var(--space_1) 0.3em;
	font-size: var(--font_size_smallest);
	font-weight: var(--font_weight_semi_bold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text_color1_brightest);
}

.side_nav__item{
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.75em;
	padding-block: 0.6em;
	padding-inline: 0.8em;
	border-radius: var(--border_radius_more_square);
	font-size: var(--font_size_small);
	font-weight: var(--font_weight_medium);
	color: var(--my_color);
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.side_nav__item:hover{
	color: var(--my_active_color);
	background: color-mix(in srgb, var(--my_accent_color) 12%, transparent);
}

.side_nav__item:focus-visible{
	outline: 3px solid var(--my_accent_color);
	outline-offset: -3px;
}

.side_nav__icon{
	inline-size: 1.4em;
	font-size: 1.05em;
	line-height: 1;
	text-align: center;
	flex-shrink: 0;
	color: inherit;
}

.side_nav__label{
	flex: 1 1 auto;
	min-inline-size: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ספירה (אירועים פתוחים, בקשות בהמתנה) */
.side_nav__count{
	flex-shrink: 0;
	min-inline-size: 1.6em;
	padding-block: 0.15em;
	padding-inline: 0.45em;
	font-size: var(--font_size_smallest);
	font-weight: var(--font_weight_bold);
	font-variant-numeric: tabular-nums;
	text-align: center;
	border-radius: var(--border_radius_roundest);
	color: var(--color_white);
	background: var(--my_accent_color);
}

.side_nav__count--critical{ background: var(--color_danger); }
.side_nav__count--warning{ background: var(--color_warning); color: var(--color_warning_deeper); }

.side_nav__footer{
	margin-block-start: auto;
	padding-block-start: var(--space_2);
	border-block-start: 1px solid var(--my_border_color);
	display: grid;
	gap: var(--space_1);
}

.side_nav__account{
	display: flex;
	align-items: center;
	gap: 0.6em;
	padding-inline: 0.4em;
	font-size: var(--font_size_smaller);
	color: var(--text_color1_brighter);
	min-inline-size: 0;
}

.side_nav__account_name{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* --- מצבים --- */

.side_nav__item.is_active{
	color: var(--my_active_color);
	background: var(--my_active_background_color);
	font-weight: var(--font_weight_bold);
}

/* פס המבטא של הפריט הנוכחי — בצד ההתחלה, מתהפך אוטומטית ב-RTL */
.side_nav__item.is_active::before{
	content: "";
	position: absolute;
	inset-block: 0.35em;
	inset-inline-start: 0;
	inline-size: 3px;
	border-radius: 3px;
	background: var(--my_accent_color);
}

.side_nav__item.is_disabled{
	opacity: 0.45;
	pointer-events: none;
}

/* מכווץ — אייקונים בלבד */
.side_nav.is_collapsed{
	inline-size: var(--my_collapsed_width);
}

.side_nav.is_collapsed .side_nav__label,
.side_nav.is_collapsed .side_nav__group_title,
.side_nav.is_collapsed .side_nav__account_name,
.side_nav.is_collapsed .app_name,
.side_nav.is_collapsed .app_slogan{
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.side_nav.is_collapsed .side_nav__item{
	justify-content: center;
}

.side_nav.is_collapsed .side_nav__header{
	justify-content: center;
}

/* החץ מתהפך כשהתפריט מכווץ — סימן לכיוון הפעולה */
.side_nav.is_collapsed .side_nav__collapse{
	rotate: 180deg;
}

.side_nav.is_collapsed .side_nav__count{
	position: absolute;
	inset-block-start: 0.2em;
	inset-inline-end: 0.2em;
	min-inline-size: auto;
	padding: 0.2em;
	font-size: 0;
	line-height: 0;
}

/* --- Offcanvas במסך צר --- */

.side_nav_backdrop{
	display: none;
	position: fixed;
	inset: 0;
	z-index: 99;
	background: color-mix(in srgb, var(--color_canvas) 72%, transparent);
}

.side_nav_backdrop.is_open{
	display: block;
}

@media (min-width: 992px){
	.side_nav__collapse{
		display: inline-grid;
	}
}

@media (max-width: 991px){
	.side_nav{
		position: fixed;
		inset-block: 0;
		inset-inline-start: 0;
		z-index: 100;
		translate: -100% 0;
		box-shadow: var(--shadow_5);
		padding-block-start: calc( var(--space_3) + env(safe-area-inset-top) );
	}

	[dir="rtl"] .side_nav{
		translate: 100% 0;
	}

	.side_nav.is_open{
		translate: 0 0;
	}

	.side_nav.is_collapsed{
		inline-size: var(--my_width);
	}
}

@media (prefers-reduced-motion: reduce){
	.side_nav{ transition: none; }
	.side_nav__item{ transition: none; }
}

}


/* ==== /css/app/components/data_table.css ==== */


/*
	===== data_table — טבלת נתונים: כותרת דביקה, סינון, מיון, עימוד =====

	הרכיב הכבד של הלוחות (מפתחות, קבצים, אירועים, בקשות). מבנה:
	.data_table_wrapper > .data_table__toolbar + .data_table__scroll > table.data_table
	+ .data_table__pagination. מיון: כפתור בתוך th (js_sort_column) עם aria-sort.
	שורה נלחצת: tr.is_clickable (tabindex=0). טעינה: .is_loading + .skeleton_target.
	ריק / שגיאה: .data_table__empty / .data_table__error.
	במסך צר: .data_table--stacked הופך שורה לכרטיס (data-label על כל td).
*/

@layer components{

.data_table_wrapper{
	--my_background_color: var(--color_white);
	--my_border_color: var(--color_primary_softer);
	--my_head_background_color: var(--color_primary_softer);
	--my_row_hover_color: color-mix(in srgb, var(--color_primary) 9%, transparent);
	--my_selected_color: var(--color_primary_soft);
	--my_max_block_size: 32rem;

	display: grid;
	gap: 0;
	background: var(--my_background_color);
	border: 1px solid var(--my_border_color);
	border-radius: var(--border_radius_base);
	overflow: hidden;
	min-inline-size: 0;
}

/* --- שורת הכלים: חיפוש, צ'יפים, פעולות --- */

.data_table__toolbar{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space_1) var(--space_2);
	padding: var(--space_2);
	border-block-end: 1px solid var(--my_border_color);
}

.data_table__search{
	flex: 1 1 14rem;
	min-inline-size: 0;
}

.data_table__filters{
	display: flex;
	flex-wrap: wrap;
	gap: var(--space_1);
	align-items: center;
}

.data_table__count{
	font-size: var(--font_size_smaller);
	color: var(--text_color1_brightest);
	font-variant-numeric: tabular-nums;
	margin-inline-start: auto;
}

.data_table__actions{
	display: flex;
	gap: var(--space_1);
	flex-wrap: wrap;
}

/* --- אזור הגלילה: הכותרת נשארת דבוקה --- */

.data_table__scroll{
	max-block-size: var(--my_max_block_size);
	overflow: auto;
	overscroll-behavior: contain;
}

.data_table{
	inline-size: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: var(--font_size_smaller);
	text-align: start;
}

.data_table caption{
	padding: var(--space_2);
	font-size: var(--font_size_small);
	font-weight: var(--font_weight_semi_bold);
	color: var(--text_color1_brighter);
	text-align: start;
	caption-side: top;
}

.data_table thead th{
	position: sticky;
	inset-block-start: 0;
	z-index: 2;
	padding-block: 0.7em;
	padding-inline: var(--space_2);
	font-size: var(--font_size_smallest);
	font-weight: var(--font_weight_semi_bold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: start;
	white-space: nowrap;
	color: var(--text_color1_brighter);
	background: var(--my_head_background_color);
	border-block-end: 1px solid var(--my_border_color);
}

.data_table tbody td{
	padding-block: 0.65em;
	padding-inline: var(--space_2);
	color: var(--text_color1_bright);
	border-block-end: 1px solid color-mix(in srgb, var(--my_border_color) 70%, transparent);
	vertical-align: middle;
	line-height: var(--line_height_loose);
}

.data_table tbody tr:last-child td{
	border-block-end: 0;
}

.data_table tbody tr:hover td{
	background: var(--my_row_hover_color);
}

/* --- מיון --- */

.data_table__sort{
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	color: inherit;
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
}

.data_table__sort::after{
	content: "\f0dc";           /* fa-sort */
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 0.9em;
	opacity: 0.45;
}

.data_table th[aria-sort="ascending"] .data_table__sort::after{ content: "\f0de"; opacity: 1; color: var(--color_primary_deep); }
.data_table th[aria-sort="descending"] .data_table__sort::after{ content: "\f0dd"; opacity: 1; color: var(--color_primary_deep); }

.data_table__sort:focus-visible{
	outline: 3px solid var(--color_primary);
	outline-offset: 2px;
}

/* --- תאים מיוחדים --- */

.data_table__cell--numeric{
	font-variant-numeric: tabular-nums;
	direction: ltr;
	unicode-bidi: isolate;
	text-align: end;
}

.data_table__cell--technical{
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	direction: ltr;
	unicode-bidi: isolate;
	text-align: start;
	overflow-wrap: anywhere;
}

.data_table__cell--actions{
	inline-size: 1%;
	white-space: nowrap;
}

/* --- מצבי שורה --- */

.data_table tbody tr.is_clickable{
	cursor: pointer;
}

.data_table tbody tr.is_clickable:focus-visible{
	outline: 3px solid var(--color_primary);
	outline-offset: -3px;
}

.data_table tbody tr.is_selected td{
	background: var(--my_selected_color);
}

.data_table tbody tr.is_muted td{
	color: var(--text_color1_brightest);
}

.data_table tbody tr.is_critical td:first-child{
	box-shadow: inset 4px 0 0 var(--color_danger);
}

/* --- מצבי טבלה --- */

.data_table_wrapper.is_loading .data_table tbody td{
	color: transparent;
}

.data_table__empty,
.data_table__error{
	display: grid;
	place-items: center;
	gap: var(--space_1);
	padding: var(--space_5);
	text-align: center;
	color: var(--text_color1_brightest);
}

.data_table__error{
	color: var(--color_danger_deep);
}

.data_table__empty i,
.data_table__error i{
	font-size: 2em;
	opacity: 0.7;
}

/* --- עימוד --- */

.data_table__pagination{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space_1);
	padding: var(--space_2);
	border-block-start: 1px solid var(--my_border_color);
	font-size: var(--font_size_smaller);
	color: var(--text_color1_brighter);
}

.data_table__pagination_pages{
	display: flex;
	gap: 0.3em;
	align-items: center;
}

.data_table__page{
	min-inline-size: 2.2em;
	padding-block: 0.3em;
	padding-inline: 0.5em;
	font: inherit;
	font-variant-numeric: tabular-nums;
	color: var(--text_color1_brighter);
	background: transparent;
	border: 1px solid var(--my_border_color);
	border-radius: var(--border_radius_more_square);
	cursor: pointer;
}

.data_table__page:hover{
	color: var(--text_color1);
	border-color: var(--color_primary);
}

.data_table__page:focus-visible{
	outline: 3px solid var(--color_primary);
	outline-offset: 2px;
}

.data_table__page.is_active{
	color: var(--color_white);
	background: var(--color_primary);
	border-color: var(--color_primary);
	font-weight: var(--font_weight_bold);
}

.data_table__page:disabled{
	opacity: 0.4;
	cursor: not-allowed;
}

/* --- מסך צר: שורה = כרטיס (data-label) --- */

@media (max-width: 767px){
	.data_table--stacked thead{
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}

	.data_table--stacked tbody tr{
		display: grid;
		gap: 0.25em;
		padding-block: var(--space_1);
		border-block-end: 1px solid var(--my_border_color);
	}

	.data_table--stacked tbody td{
		display: grid;
		grid-template-columns: 8em 1fr;
		gap: var(--space_1);
		border-block-end: 0;
		padding-block: 0.25em;
	}

	.data_table--stacked tbody td::before{
		content: attr(data-label);
		font-size: var(--font_size_smallest);
		font-weight: var(--font_weight_semi_bold);
		color: var(--text_color1_brightest);
	}

	.data_table--stacked .data_table__cell--numeric{ text-align: start; }
}

}


/* ==== /css/app/components/connection_status.css ==== */


/*
	===== connection_status — חיווי חיבור ותור פעולות ממתינות =====

	מנוהל ע"י js/connectionStatus.js, שמאזין לאירועי online/offline
	ולתור של js/api.js. שני מצבים:
	- is_offline: אין רשת כלל
	- is_pending: יש רשת, אבל נותרו פעולות בתור (או שהן נשלחות עכשיו)

	הפס יושב מעל התוכן ומתחת למודאלים — הוא מידע, לא חסימה.
*/

@layer components{

.connection_status{
	position: fixed;
	inset-inline: 0;
	inset-block-start: 0;
	z-index: 380; /* מתחת ל-cookie_consent (400) ולמודאלים — חיווי, לא חסימה */

	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space_1);

	padding-block: 6px;
	padding-inline: var(--space_2);

	font-size: var(--font_size_smaller);
	font-weight: var(--font_weight_bold);
	text-align: center;

	background: var(--color_warning);
	color: var(--text_color1);

	translate: 0 -100%;
	transition: translate 0.42s ease;
}

.connection_status.is_visible{
	translate: 0 0;
}

.connection_status.is_offline{
	background: var(--color_warning);
}

.connection_status.is_pending{
	background: var(--color_info);
	color: var(--color_white);
}

.connection_status__icon{
	font-size: 1.05em;
	line-height: 1;
	flex-shrink: 0;
}

.connection_status__count{
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-inline-size: 1.6em;
	padding-inline: 5px;
	border-radius: 999px;

	background: rgb(255 255 255 / 0.28);
	font-variant-numeric: tabular-nums;
}

/* גוף הדף נדחף למטה כשהפס גלוי — כדי שלא יכסה כותרת מסך */
body.has_connection_status{
	padding-block-start: 1.9em;
}

@media (prefers-reduced-motion: reduce){
	.connection_status{
		transition: none;
	}
}

}


/* ==== /css/app/components/cookie_consent.css ==== */


/* ===== cookie_consent_banner — הודעת אחסון מקומי (cookieConsent.js) ===== */

@layer components{

.cookie_consent_banner{
	position: fixed;
	inset-inline: var(--space_2);
	inset-block-end: var(--space_2);
	z-index: 400; /* מעל כל דבר אחר, כולל קונפטי — זו הודעת גילוי נאות */

	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space_2);

	background: var(--color_primary_deepest);
	color: var(--color_white);
	border-radius: var(--border_radius_round);
	box-shadow: var(--shadow_5);
	padding: var(--space_2);

	translate: 0 150%;
	transition: translate 0.35s ease-out;
}

.cookie_consent_banner.is_visible{
	translate: 0 0;
}

.cookie_consent_banner.is_dismissed{
	translate: 0 150%;
	pointer-events: none;
}

.cookie_consent_banner__text{
	flex: 1;
	min-width: 220px;
	font-size: var(--font_size_smaller);
	line-height: var(--line_height_loose);
	color: rgb(255 255 255 / 0.9);
}

.cookie_consent_banner__text .link{
	color: var(--color_white);
	font-weight: var(--font_weight_semi_bold);
}

/*
	תנועה מופחתת: הפס עדיין מופיע ונעלם — רק בלי ההחלקה. ביטול המעבר
	ולא ההצגה, כי ההודעה עצמה היא דרישה משפטית ולא קישוט.
*/
@media (prefers-reduced-motion: reduce){
	.cookie_consent_banner{ transition: none; }
}

}


/* ==== /css/app/screens/signup.css ==== */


/* ===== מסך הכניסה (signup_menu) ===== */

@layer screens{

.screen_signup > .content{
	justify-content: center;
	gap: var(--space_4);
}

.screen_signup .content .logo{
	--logo_size: var(--logo_size_biggest);
}

.screen_signup .content .entry_actions{
	inline-size: min(440px, 100%);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--space_2);
	text-align: center;
}

.screen_signup .content .entry_actions .fancy_button{
	margin-inline: 0;
}

}


/* ==== /css/app/screens/email.css ==== */


/* ===== screen_email — מסך הכניסה: כתובת הדוא"ל ===== */

@layer screens{

.screen_email .content{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space_3);
	max-inline-size: 30rem;
	margin-inline: auto;
	text-align: center;
}

.screen_email .email_form{
	inline-size: 100%;
}

.screen_email .field__input{
	direction: ltr;
	text-align: start;
}

.screen_email .email_form__note{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	margin-block-start: var(--space_2);
	font-size: var(--font_size_smaller);
	color: var(--text_color1_brightest);
}

.screen_email .link--back{
	align-self: flex-start;
}

}


/* ==== /css/app/screens/otp.css ==== */


/* ===== מסך אימות קוד (OTP) ===== */

@layer screens{

.screen_otp > .content{
	justify-content: center;
	gap: var(--space_3);
}

.screen_otp .otp_form{
	inline-size: min(440px, 100%);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space_2);
	text-align: center;
}

.screen_otp .otp_form .button--large{
	inline-size: 100%;
}

}


/* ==== /css/app/screens/console.css ==== */


/*
	===== screen_console — לוח הבקרה: פריסת התפריט + התוכן =====

	רק פריסה וסידור: כל מה שנראה כאן הוא רכיב מ-ui_elements (side_nav,
	kpi_card, data_table, ...). מסך אינו מגדיר צבעים או רכיבים חדשים.
*/

@layer screens{

.screen_console .content{
	padding: 0;
	max-inline-size: none;
	inline-size: 100%;
	display: flex;
	flex-direction: column;
	min-block-size: 100dvh;
}

.screen_console .console_layout{
	display: flex;
	align-items: stretch;
	flex: 1 1 auto;
	min-block-size: 0;
}

.screen_console .console_main{
	flex: 1 1 auto;
	min-inline-size: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space_4);
	padding-block: var(--space_3) var(--space_6);
	padding-inline: var(--space_3);
	overflow-x: hidden;
}

/* --- שורת הכותרת --- */

.screen_console .console_topbar{
	display: flex;
	align-items: center;
	gap: var(--space_2);
	flex-wrap: wrap;
}

.screen_console .console_topbar__title{
	flex: 1 1 12rem;
	min-inline-size: 0;
}

.screen_console .console_topbar .section_title{
	margin-block-end: 0.2em;
	font-size: var(--font_size_larger);
	color: var(--text_color1);
}

.screen_console .console_topbar .section_subtitle{
	margin: 0;
	font-size: var(--font_size_smaller);
	color: var(--text_color1_brightest);
}

.screen_console .console_topbar__actions{
	display: flex;
	align-items: center;
	gap: var(--space_1);
}

/* כפתור פתיחת התפריט — רק במסך צר */
.screen_console .console_topbar__menu{
	display: none;
}

/* --- סקציות --- */

.screen_console .console_section{
	display: grid;
	gap: var(--space_2);
	scroll-margin-block-start: var(--space_4);
}

.screen_console .console_section__title{
	margin: 0;
	font-size: var(--font_size_base);
	font-weight: var(--font_weight_bold);
	color: var(--text_color1_bright);
}

.screen_console .console_kpi_grid{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: var(--space_2);
}

.screen_console .console_capabilities__grid{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: var(--space_2);
	margin-block-start: var(--space_2);
}

.screen_console .console_events_list{
	display: grid;
	gap: var(--space_2);
}

.screen_console .console_secret{
	max-inline-size: 46rem;
}

/* --- מסך צר: התפריט הופך ל-Offcanvas --- */

@media (max-width: 991px){
	.screen_console .console_topbar__menu{
		display: inline-flex;
	}

	.screen_console .console_main{
		padding-inline: var(--space_2);
	}
}

}


/* ==== /css/lib/ui_kit.css ==== */


/*
	ui_kit.css — שלד עמוד ה-ui_elements בלבד. לא נטען באפליקציה.
*/

@layer overrides{

body.ui_kit_page{
	background: linear-gradient(var(--color_warning_softer), var(--color_primary_soft));
	min-height: 100dvh;
	color: var(--text_color1);
	padding-block-end: var(--space_7);
}

.ui_kit{
	max-width: 1080px;
	margin-inline: auto;
	padding-inline: var(--space_2);
}

.ui_kit__header{
	text-align: center;
	padding-block: var(--space_4) var(--space_2);
}

.ui_kit__warning{
	max-width: 640px;
	margin-inline: auto;
	margin-block: var(--space_2);
}

.ui_kit__toc{
	display: flex;
	flex-wrap: wrap;
	gap: var(--space_1);
	justify-content: center;
	margin-block: var(--space_2) var(--space_4);
}

/* --- סקציה --- */

.kit_section{
	background: var(--color_white);
	border-radius: var(--border_radius_round);
	box-shadow: var(--shadow_2);
	padding: var(--space_3);
	margin-block-end: var(--space_3);
	text-align: start;
}

.kit_section__header{
	display: flex;
	align-items: center;
	gap: var(--space_1);
	flex-wrap: wrap;
	margin-block-end: var(--space_1);
	padding-block-end: var(--space_1);
	border-block-end: 1px solid var(--color_primary_softer);
}

.kit_section__title{
	font-size: var(--font_size_larger);
	font-weight: var(--font_weight_bold);
	color: var(--color_primary_deepest);
}

.kit_section__ref{
	font-size: var(--font_size_smallest);
	color: var(--text_color1_brightest);
	direction: ltr;
}

.kit_section__note{
	font-size: var(--font_size_small);
	color: var(--text_color1_brighter);
	margin-block-end: var(--space_2);
	line-height: var(--line_height_loosest);
}

/* --- דוגמית --- */

.kit_specimen{
	margin-block: var(--space_2);
}

.kit_specimen__label{
	display: block;
	font-size: var(--font_size_smallest);
	font-weight: var(--font_weight_semi_bold);
	color: var(--text_color1_brightest);
	margin-block-end: 6px;
}

.kit_specimen__label code{
	direction: ltr;
	unicode-bidi: isolate;
	font-family: monospace;
	background: var(--color_primary_softer);
	padding: 1px 6px;
	border-radius: 4px;
	color: var(--color_primary_deep);
}

.kit_row{
	display: flex;
	flex-wrap: wrap;
	gap: var(--space_1);
	align-items: center;
}

.kit_grid{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--space_2);
}

/* --- דוגמיות צבע / צל / רדיוס / מרווח --- */

.kit_swatch{
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: var(--font_size_smallest);
}

.kit_swatch__color{
	height: 52px;
	border-radius: var(--border_radius_base);
	border: 1px solid rgb(7 61 90 / 0.08);
}

.kit_swatch code{
	direction: ltr;
	unicode-bidi: isolate;
	font-family: monospace;
	color: var(--text_color1_brighter);
}

.kit_box{
	width: 92px;
	height: 64px;
	background: var(--color_white);
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-block-end: 4px;
	font-size: var(--font_size_smallest);
	color: var(--text_color1_brightest);
}

.kit_space_bar{
	background: var(--color_primary);
	height: 14px;
	border-radius: 3px;
}

/* --- נטרול רכיבים "צפים" לצורך תצוגה בקיט --- */

.kit_static .modal,
.kit_static .bottom_sheet,
.kit_static .toast,
.kit_static .tab_bar,
.kit_static .connection_status,
.kit_static .cookie_consent_banner,
.kit_static .button--fab{
	position: static;
	display: flex;
	inset: auto;
	translate: none;
	margin-inline: 0;
}

.kit_static .modal{
	border-radius: var(--border_radius_round);
	padding: var(--space_3);
}

.kit_static{
	display: flex;
	flex-direction: column;
	gap: var(--space_2);
	background: var(--color_primary_softer);
	border-radius: var(--border_radius_base);
	padding: var(--space_2);
}

/* --- רשימת "מה אסור" --- */

.kit_rules{
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--space_1);
	counter-reset: rule;
}

.kit_rules li{
	display: flex;
	gap: var(--space_1);
	align-items: flex-start;
	font-size: var(--font_size_small);
	line-height: var(--line_height_loosest);
	color: var(--text_color1_bright);
}

.kit_rules li::before{
	counter-increment: rule;
	content: counter(rule);
	flex-shrink: 0;
	width: 1.7em;
	aspect-ratio: 1 / 1;
	border-radius: 100%;
	background: var(--color_danger);
	color: var(--color_white);
	font-weight: var(--font_weight_bold);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--font_size_smallest);
}

/* --- placeholder לרכיב שטרם נבנה --- */

.kit_todo{
	border: 2px dashed var(--text_color1_brightest);
	border-radius: var(--border_radius_base);
	padding: var(--space_2);
	font-size: var(--font_size_small);
	color: var(--text_color1_brighter);
	line-height: var(--line_height_loosest);
}

}


/* ==== /css/lib/animate_me.css ==== */


/*
	animate_me — מנוע אנימציות מבוסס משתני CSS.
	API: 4 סלוטים (animation1..animation4), כל סלוט נשלט דרך
	--animationN-name / -duration / -delay / -repeat / -timing-function /
	-direction / -fill-mode / -play-state.
	דילאיים וערכים מספריים מוגדרים אינליין (style="--animation1-delay: 2s")
	או בפריסטים — אין סולמות מחלקות לערכים מספריים.
	הקובץ מתנהג כספרייה: משתני הקיפרפריימים (--scaleFrom וכו') הם
	camelCase בכוונה, כגבול API של ה"ספרייה".
*/

@layer utilities{

/* --- כיבוי אנימציות: העדפת משתמש, הדפסה, או מחלקת no_animations --- */

@media print, (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto !important;
	}

	*,
	*::before,
	*::after {
		animation-delay: 0s !important;
		animation-duration: 0.001s !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001s !important;
	}
}

.no_animations {
	scroll-behavior: auto !important;
}

.no_animations *,
.no_animations *::before,
.no_animations *::after {
	animation-delay: 0s !important;
	animation-duration: 0.001s !important;
	animation-iteration-count: 1 !important;
	transition-duration: 0.001s !important;
}

/* --- keyframes --- */

@keyframes animateMe__none{
	from{ perspective: initial; }
	to{ perspective: initial; }
}

@keyframes animateMe__scale{
	from{ scale: var(--scaleFrom, 1); }
	to{ scale: var(--scaleTo, 2); }
}

@keyframes animateMe__lineHeight{
	from{ line-height: var(--lineHeightFrom, 100%); }
	to{ line-height: var(--lineHeightTo, 150%); }
}

@keyframes animateMe__opacity{
	from{ opacity: var(--opacityFrom, 1); }
	to{ opacity: var(--opacityTo, 0); }
}

@keyframes animateMe__rotate{
	0%{ rotate: var(--rotateFrom, 0deg); }
	100%{ rotate: var(--rotateTo, 30deg); }
}

@keyframes animateMe__translate{
	0%{ translate: var(--translateXFrom, 0) var(--translateYFrom, 0); }
	100%{ translate: var(--translateXTo, 30%) var(--translateYTo, 30%); }
}

@keyframes animateMe__bouncing{
	0%, 25%, 40%{
		transform:
			translateY(var(--translateYFrom, 0))
			rotate(var(--rotateFrom, 0deg))
			scale(var(--scaleFrom, 1));
	}
	60%{
		transform:
			translateY(calc( var(--translateYTo, 15%) * 1.2 ))
			rotate(var(--rotateTo, -6deg))
			scale(calc( var(--scaleTo, 1.1) / 1.2 ));
	}
	80%{
		transform:
			translateY(calc( var(--translateYTo, 15%) * -2 ))
			rotate(var(--rotateTo, 6deg))
			scale(calc( var(--scaleTo, 1.1) * 1.05 ));
	}
	100%{
		transform:
			translateY(var(--translateYFrom, 0))
			rotate(var(--rotateFrom, 0deg))
			scale(var(--scaleFrom, 1));
	}
}

@keyframes animateMe__spinZ{
	0%, 100%{ transform: scaleX(1); }
	50%{ transform: scaleX(0.18); }
}

/* --- ברירות מחדל לארבעת הסלוטים --- */

:root{
	--animation1-name: animateMe__none;
	--animation2-name: animateMe__none;
	--animation3-name: animateMe__none;
	--animation4-name: animateMe__none;

	--animation1-duration: 1s;
	--animation2-duration: 1s;
	--animation3-duration: 1s;
	--animation4-duration: 1s;

	--animation1-repeat: infinite;
	--animation2-repeat: infinite;
	--animation3-repeat: infinite;
	--animation4-repeat: infinite;

	--animation1-delay: 0s;
	--animation2-delay: 0s;
	--animation3-delay: 0s;
	--animation4-delay: 0s;

	--animation1-timing-function: ease-in-out;
	--animation2-timing-function: ease-in-out;
	--animation3-timing-function: ease-in-out;
	--animation4-timing-function: ease-in-out;

	--animation1-direction: alternate;
	--animation2-direction: alternate;
	--animation3-direction: alternate;
	--animation4-direction: alternate;

	--animation1-fill-mode: both;
	--animation2-fill-mode: both;
	--animation3-fill-mode: both;
	--animation4-fill-mode: both;

	--animation1-play-state: paused;
	--animation2-play-state: paused;
	--animation3-play-state: paused;
	--animation4-play-state: paused;
}

.animate_me{
	backface-visibility: hidden;

	animation:
		var(--animation1-name)
		var(--animation1-duration)
		var(--animation1-timing-function)
		var(--animation1-delay)
		var(--animation1-repeat)
		var(--animation1-direction)
		var(--animation1-fill-mode)
		var(--animation1-play-state),

		var(--animation2-name)
		var(--animation2-duration)
		var(--animation2-timing-function)
		var(--animation2-delay)
		var(--animation2-repeat)
		var(--animation2-direction)
		var(--animation2-fill-mode)
		var(--animation2-play-state),

		var(--animation3-name)
		var(--animation3-duration)
		var(--animation3-timing-function)
		var(--animation3-delay)
		var(--animation3-repeat)
		var(--animation3-direction)
		var(--animation3-fill-mode)
		var(--animation3-play-state),

		var(--animation4-name)
		var(--animation4-duration)
		var(--animation4-timing-function)
		var(--animation4-delay)
		var(--animation4-repeat)
		var(--animation4-direction)
		var(--animation4-fill-mode)
		var(--animation4-play-state);
}

span.animate_me,
strong.animate_me,
del.animate_me,
ins.animate_me,
mark.animate_me,
a.animate_me,
code.animate_me,
img.animate_me,
label.animate_me,
i.animate_me{
	display: inline-block;
}

/* --- הפעלה כשנכנסים ל-viewport (עובד עם js_watch_visibility) --- */

.animate_me.animate_on_visible{
	--animation1-play-state: paused;
	--animation2-play-state: paused;
	--animation3-play-state: paused;
	--animation4-play-state: paused;
}

.animate_me.animate_on_visible.is_visible{
	--animation1-play-state: running;
	--animation2-play-state: running;
	--animation3-play-state: running;
	--animation4-play-state: running;
}

/* --- שליטת ריצה --- */

.animate_me.loop{
	--animation1-direction: alternate !important;
	--animation2-direction: alternate !important;
	--animation3-direction: alternate !important;
	--animation4-direction: alternate !important;
}

.animate_me.stopped,
.animate_me.paused{
	--animation1-play-state: paused !important;
	--animation2-play-state: paused !important;
	--animation3-play-state: paused !important;
	--animation4-play-state: paused !important;
}

.animate_me.play,
.animate_me.running{
	--animation1-play-state: running !important;
	--animation2-play-state: running !important;
	--animation3-play-state: running !important;
	--animation4-play-state: running !important;
}

/* --- בחירת keyframes לכל סלוט --- */

.animate_me.animation1-scale{ --animation1-name: animateMe__scale; }
.animate_me.animation2-scale{ --animation2-name: animateMe__scale; }
.animate_me.animation3-scale{ --animation3-name: animateMe__scale; }
.animate_me.animation4-scale{ --animation4-name: animateMe__scale; }

.animate_me.animation1-translate{ --animation1-name: animateMe__translate; }
.animate_me.animation2-translate{ --animation2-name: animateMe__translate; }
.animate_me.animation3-translate{ --animation3-name: animateMe__translate; }
.animate_me.animation4-translate{ --animation4-name: animateMe__translate; }

.animate_me.animation1-rotate{ --animation1-name: animateMe__rotate; }
.animate_me.animation2-rotate{ --animation2-name: animateMe__rotate; }
.animate_me.animation3-rotate{ --animation3-name: animateMe__rotate; }
.animate_me.animation4-rotate{ --animation4-name: animateMe__rotate; }

.animate_me.animation1-opacity{ --animation1-name: animateMe__opacity; }
.animate_me.animation2-opacity{ --animation2-name: animateMe__opacity; }
.animate_me.animation3-opacity{ --animation3-name: animateMe__opacity; }
.animate_me.animation4-opacity{ --animation4-name: animateMe__opacity; }

.animate_me.animation1-bouncing{ --animation1-name: animateMe__bouncing; }
.animate_me.animation2-bouncing{ --animation2-name: animateMe__bouncing; }
.animate_me.animation3-bouncing{ --animation3-name: animateMe__bouncing; }
.animate_me.animation4-bouncing{ --animation4-name: animateMe__bouncing; }

/* --- חזרות --- */

.animate_me.animation1-repeat-infinite{ --animation1-repeat: infinite; }
.animate_me.animation2-repeat-infinite{ --animation2-repeat: infinite; }
.animate_me.animation3-repeat-infinite{ --animation3-repeat: infinite; }
.animate_me.animation4-repeat-infinite{ --animation4-repeat: infinite; }

.animate_me.animation1-repeat-1{ --animation1-repeat: 1; }
.animate_me.animation2-repeat-1{ --animation2-repeat: 1; }
.animate_me.animation3-repeat-1{ --animation3-repeat: 1; }
.animate_me.animation4-repeat-1{ --animation4-repeat: 1; }

/* --- play state --- */

.animate_me.animation1-play-state-running{ --animation1-play-state: running; }
.animate_me.animation2-play-state-running{ --animation2-play-state: running; }
.animate_me.animation3-play-state-running{ --animation3-play-state: running; }
.animate_me.animation4-play-state-running{ --animation4-play-state: running; }

/* --- משכים סמנטיים --- */

.animate_me.animation1-duration-slowest{ --animation1-duration: 10s; }
.animate_me.animation1-duration-slower{ --animation1-duration: 7s; }
.animate_me.animation1-duration-slow{ --animation1-duration: 5s; }
.animate_me.animation1-duration-normal{ --animation1-duration: 3s; }
.animate_me.animation1-duration-fast{ --animation1-duration: 2s; }
.animate_me.animation1-duration-faster{ --animation1-duration: 1s; }
.animate_me.animation1-duration-fastest{ --animation1-duration: 0.5s; }

.animate_me.animation2-duration-slowest{ --animation2-duration: 10s; }
.animate_me.animation2-duration-slower{ --animation2-duration: 7s; }
.animate_me.animation2-duration-slow{ --animation2-duration: 5s; }
.animate_me.animation2-duration-normal{ --animation2-duration: 3s; }
.animate_me.animation2-duration-fast{ --animation2-duration: 2s; }
.animate_me.animation2-duration-faster{ --animation2-duration: 1s; }
.animate_me.animation2-duration-fastest{ --animation2-duration: 0.5s; }

.animate_me.animation3-duration-slowest{ --animation3-duration: 10s; }
.animate_me.animation3-duration-slower{ --animation3-duration: 7s; }
.animate_me.animation3-duration-slow{ --animation3-duration: 5s; }
.animate_me.animation3-duration-normal{ --animation3-duration: 3s; }
.animate_me.animation3-duration-fast{ --animation3-duration: 2s; }
.animate_me.animation3-duration-faster{ --animation3-duration: 1s; }
.animate_me.animation3-duration-fastest{ --animation3-duration: 0.5s; }

.animate_me.animation4-duration-slowest{ --animation4-duration: 10s; }
.animate_me.animation4-duration-slower{ --animation4-duration: 7s; }
.animate_me.animation4-duration-slow{ --animation4-duration: 5s; }
.animate_me.animation4-duration-normal{ --animation4-duration: 3s; }
.animate_me.animation4-duration-fast{ --animation4-duration: 2s; }
.animate_me.animation4-duration-faster{ --animation4-duration: 1s; }
.animate_me.animation4-duration-fastest{ --animation4-duration: 0.5s; }

}


/* ==== /css/lib/animations.css ==== */


/* ===== פריסטים גנריים של animate_me (לא ספציפיים למסך) ===== */

@layer utilities{

.animate_me.spin{
	--scaleFrom: 1;
	--scaleTo: 1.1;

	--rotateFrom: 0deg;
	--rotateTo: 360deg;

	--animation1-name: animateMe__rotate;
	--animation1-duration: 60s;
	--animation1-timing-function: linear;
	--animation1-direction: normal;

	--animation2-name: animateMe__scale;
	--animation2-duration: 30s;
	--animation2-delay: 3s;
	--animation2-timing-function: ease-in-out;
	--animation2-direction: normal;

	will-change: transform;
}

.animate_me.roll_in{
	--animation1-name: animateMe__scale;
	--animation1-duration: 3s;
	--animation1-timing-function: ease-in-out;
	--animation1-direction: normal;

	--animation2-name: animateMe__opacity;
	--animation2-duration: 3s;
	--animation2-timing-function: ease-in-out;
	--animation2-direction: normal;

	--animation3-name: animateMe__rotate;
	--animation3-duration: 3s;
	--animation3-timing-function: ease-in-out;
	--animation3-direction: normal;

	--animation4-name: animateMe__translate;
	--animation4-duration: 3s;
	--animation4-timing-function: ease-in-out;
	--animation4-direction: normal;

	--animation1-repeat: 1;
	--animation2-repeat: 1;
	--animation3-repeat: 1;
	--animation4-repeat: 1;
}

.animate_me.breathing{
	--scaleFrom: 0.91;
	--scaleTo: 1;

	--animation1-name: animateMe__scale;
	--animation1-duration: 4.2s;
	--animation1-direction: alternate;
	--animation1-timing-function: ease-in-out;

	will-change: transform;
}

.animate_me.ripple{
	--scaleFrom: 0;
	--scaleTo: 1.8;
	--opacityFrom: 0.14;
	--opacityTo: 0;

	--animation1-name: animateMe__scale;
	--animation1-duration: 6s;
	--animation1-direction: normal;
	--animation1-timing-function: ease-out;

	--animation2-name: animateMe__opacity;
	--animation2-duration: 6s;
	--animation2-direction: normal;
	--animation2-timing-function: ease-out;

	will-change: transform, opacity;
}

.animate_me.fadeOut{
	--opacityFrom: 1;
	--opacityTo: 0;

	--animation1-repeat: 1;
	--animation1-name: animateMe__opacity;
	--animation1-duration: 0.22s; /* מהיר מספיק שלא יורגש כהשהיה, איטי מספיק שלא יורגש כקפיצה */
	--animation1-direction: normal;
	--animation1-timing-function: ease-in;
}

.animate_me.fadeIn{
	--opacityFrom: 0;
	--opacityTo: 1;

	--animation1-repeat: 1;
	--animation1-name: animateMe__opacity;
	--animation1-duration: 0.28s;
	--animation1-direction: normal;
	--animation1-timing-function: ease-out;
}


/* --- keyframes של רכיבי הטעינה --- */

/* --- כניסה מדורגת לילדי טופס/רשימה (animateThen.js: staggerScreenIn) --- */

.stagger_in_item{
	animation: staggerFieldIn 0.4s ease-out backwards;
}

@keyframes staggerFieldIn{
	from{ opacity: 0; translate: 0 10px; }
	to{ opacity: 1; translate: 0 0; }
}

@keyframes loaderRing{
	to{ rotate: 360deg; }
}

@keyframes skeletonShimmer{
	to{ translate: 100% 0; }
}


/* --- keyframes של מודאל ו-Toast --- */

@keyframes modalIn{
	from{ opacity: 0; scale: 0.94; }
	to{ opacity: 1; scale: 1; }
}

@keyframes toastIn{
	from{ opacity: 0; translate: 0 14px; }
	to{ opacity: 1; translate: 0 0; }
}

}


/* ==== /css/app/decorations.css ==== */


/*
	===== decorations — אמנות הרקע של AMSSS (#background) ופריסטי ה-idle שלה =====

	שפת הרקע: "חדר בקרה בלילה" — קנבס כחול-שחור, שני זוהרים רדיאליים
	רחוקים (המבטא הראשי והמשני), ורשת עדינה מאוד. שלוש שכבות בלבד, אפס
	תמונות, אפס אלמנטים נוספים ב-HTML (layer1/2/3 הן חוזה של layout.css).

	⚠️ הרקע חייב להישאר שקט: הוא מתחת לטבלאות ולערכים טכניים. עוצמות
	   נמוכות (5%–12%) והתנועה איטית מאוד; ב-prefers-reduced-motion — סטטי.
	   הפריסטים כאן מכוילים לאלמנטים האלה בלבד; פריסט גנרי → lib/animations.css.
*/

@layer utilities{

/* הקנבס עצמו — הצבע היחיד שמאחורי הכל */
body{
	background-color: var(--color_canvas);
}

#root > #background{
	background-color: var(--color_canvas);
}

/* שכבה 1 — זוהר המבטא הראשי, מלמעלה בצד ההתחלה */
#root > #background .layers .layer1{
	background-image: radial-gradient(60dvw 46dvh at 78% -8%, color-mix(in srgb, var(--color_primary) 34%, transparent) 0%, transparent 68%);
	opacity: 0.55;
}

/* שכבה 2 — זוהר משני, מלמטה בצד הסיום */
#root > #background .layers .layer2{
	background-image: radial-gradient(52dvw 40dvh at 12% 104%, color-mix(in srgb, var(--color_secondary) 30%, transparent) 0%, transparent 70%);
	opacity: 0.45;
}

/* שכבה 3 — רשת: קווי שיער בשני כיוונים, נמוגה בקצוות */
#root > #background .layers .layer3{
	--my_grid_size: 44px;
	--my_grid_color: color-mix(in srgb, var(--color_primary_deep) 7%, transparent);

	background-image:
		linear-gradient(to bottom, var(--my_grid_color) 1px, transparent 1px),
		linear-gradient(to right, var(--my_grid_color) 1px, transparent 1px);
	background-size: var(--my_grid_size) var(--my_grid_size);
	/* ה-mask משתמש בשחור אטום כ"גלוי" — ערך אלפא, לא צבע נראה; ולכן טוקן הדיו */
	-webkit-mask-image: radial-gradient(120dvw 100dvh at 50% 40%, var(--color_black) 25%, transparent 78%);
	mask-image: radial-gradient(120dvw 100dvh at 50% 40%, var(--color_black) 25%, transparent 78%);
	opacity: 0.7;
}

/* ============================================================
	פריסטים מכוילים (idle) — לשכבות הרקע בלבד
============================================================ */

/*
	glow_drift — נשימה איטית של הזוהר: שינוי אטימות וזחילה קטנה.
	will-change רק כאן, כי זה פריסט infinite (מסמך ה-Framework, "אנימציות").
*/
.glow_drift{
	animation: glowDrift 26s ease-in-out infinite alternate;
	will-change: opacity, translate;
}

@keyframes glowDrift{
	from{ opacity: 0.42; translate: 0 0; }
	to{ opacity: 0.62; translate: -2dvw 1.5dvh; }
}

/* glow_drift_slow — לשכבה השנייה, כיוון הפוך וקצב שונה (שלא ינשמו יחד) */
.glow_drift_slow{
	animation: glowDriftSlow 34s ease-in-out infinite alternate;
	will-change: opacity, translate;
}

@keyframes glowDriftSlow{
	from{ opacity: 0.34; translate: 0 0; }
	to{ opacity: 0.5; translate: 2.5dvw -1dvh; }
}

/* grid_pan — הרשת זזה תא אחד; הלולאה חלקה כי המרחק = גודל התא */
.grid_pan{
	animation: gridPan 60s linear infinite;
	will-change: background-position;
}

@keyframes gridPan{
	from{ background-position: 0 0, 0 0; }
	to{ background-position: 44px 44px, 44px 44px; }
}

/*
	scan_sweep — מעבר אור דק אחת לכמה שניות, כמו סריקה בחדר בקרה.
	על שכבה 3 בלבד, ורק כשהמשתמש לא ביקש פחות תנועה.
*/
.scan_sweep::after{
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--color_primary_deep) 10%, transparent) 48%, transparent 52%);
	translate: 0 -100%;
	animation: scanSweep 14s ease-in-out infinite;
	will-change: translate;
}

@keyframes scanSweep{
	0%{ translate: 0 -100%; }
	55%, 100%{ translate: 0 100%; }
}

@media (prefers-reduced-motion: reduce){
	.glow_drift,
	.glow_drift_slow,
	.grid_pan{
		animation: none;
		will-change: auto;
	}

	.scan_sweep::after{
		display: none;
	}
}

}


/* ==== /css/lib/responsive.css ==== */


/* ===== התאמות רספונסיביות ופלטפורמה ===== */

@layer overrides{

@media all and (orientation: portrait) {
	:root {
		--page_padding_block: 28dvw;
		--page_padding_inline: 2dvh;
		--font_size: 19px;

		--logo_size: clamp(70px, 9dvh, 80px);
	}

	.section_title{
		margin-block-start: 21px;
		margin-block-end: 5px;
	}

	.fancy_button {
		grid-template-columns: 80% 20%;
	}
}

}