/* Explain: Base reset, typography, role visibility, and 16px touch form fields. */
* {
    box-sizing: border-box;
}

html {
    background: var(--background-color);
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
    direction: rtl;
    text-align: right;
    overflow-wrap: break-word;
    -webkit-tap-highlight-color: transparent;
    font-weight: 500; /* משקל בינוני – הגופן הדק נראה מטושטש בגדלים קטנים */
    text-rendering: optimizeLegibility;
}

/* קריאות: הכהיית גווני האפור הבהירים על רקע בהיר (מעברי ריחוף ממשיכים לעבוד) */
body .text-slate-400 {
    color: #66768b;
}

body .text-slate-500 {
    color: #4a5a6e;
}

body .text-slate-600 {
    color: #3a485a;
}

input::placeholder,
textarea::placeholder {
    color: #6f7f93;
    opacity: 1;
}

/* מדיה לעולם לא חורגת מרוחב המסך */
img, video, canvas, iframe {
    max-width: 100%;
}

/* תגיות סטטוס בטבלאות: הכיתוב נשאר בשורה אחת בתוך המסגרת, גם כשהעמודה צרה */
table .badge {
    white-space: nowrap;
}

[x-cloak] {
    display: none !important;
}

/* גופן הכותרות */
.font-heading {
    font-family: var(--font-heading);
}

/* מערכת הרשאות לפי תפקידים */
body.role-guest .require-instructor,
body.role-guest .require-team-manager,
body.role-guest .require-admin,
body.role-viewer .require-instructor,
body.role-viewer .require-team-manager,
body.role-viewer .require-admin,
body.role-instructor .require-team-manager,
body.role-instructor .require-admin,
body.role-team_manager .require-admin {
    display: none !important;
}

/* שדות טופס במסך מגע: לפחות 16px, כדי שאייפון לא יגדיל את המסך בלחיצה על שדה (ההגדלה הידנית פתוחה ב-viewport).
   שדה שכבר מוגדר בגודל 16px ומעלה נשאר כמו שהוא, ומצב "גודל טקסט" של תפריט הנגישות ממשיך להגדיל גם את השדות */
@media (pointer: coarse) {
    input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], [type="button"], [type="submit"], [type="reset"], [type="image"], [type="hidden"]):not([class~="text-base"], [class~="text-lg"], [class~="text-xl"], [class~="text-2xl"], [class~="text-2xl!"], [class~="text-3xl"]),
    select:not([class~="text-base"], [class~="text-lg"], [class~="text-xl"]),
    textarea:not([class~="text-base"], [class~="text-lg"], [class~="text-xl"]) {
        font-size: max(16px, 1rem);
    }
}