/* Explain: Styles for mobile screen layout, including card views and adjusted search bars. */
/* מסכי הניהול בטלפון (עד 768px) – עיצוב בלבד: סרגל החיפוש האחיד בשתי שורות, כרטיסים במקום טבלה במסכים שיש בהם תצוגת כרטיסיות,
   „בחירה מרובה” כאייקון קטן, ובעמודי המערכת כפתור הנגישות עובר לתפריט הצד כדי שלא יכסה רשימות וכפתורים.
   הכללים נשענים על הרכיבים האחידים של מסכי הניהול ולא משנים לוגיקה או נתונים. במחשב שום דבר לא משתנה */

@media (max-width: 767.98px) {
    /* סרגל החיפוש והסינון האחיד: שדה החיפוש ברוחב מלא בשורה משלו */
    div[role="search"] > :has(input[type="search"]) {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    div[role="search"] > :has(input[type="search"]) > :has(input[type="search"]) {
        flex: 1 1 100%;
        width: 100%;
        min-width: 0;
    }

    div[role="search"] input[type="search"] {
        min-height: 2.75rem;
    }

    /* „חיפוש מתקדם” ו„ייצוא” בשורה שמתחת לחיפוש וחולקים את הרוחב; כפתור אייקון נשאר בגודלו */
    div[role="search"] > :has(input[type="search"]) > div:not(:has(input[type="search"])) {
        flex: 1 1 100%;
        width: 100%;
        gap: 0.5rem;
    }

    div[role="search"] > :has(input[type="search"]) > div:not(:has(input[type="search"])) > :not(template, [data-icon-btn]) {
        flex: 1 1 0;
        min-width: 0;
    }

    div[role="search"] > :has(input[type="search"]) > div:not(:has(input[type="search"])) .btn:not([data-icon-btn]) {
        width: 100%;
        min-height: 2.75rem;
    }

    /* מתג רשימה / כרטיסיות לא מוצג בטלפון */
    div:has(> button[\@click^="toggleView"]) {
        display: none;
    }

    /* במסכים שיש בהם תצוגת כרטיסיות: הרשימה מוצגת תמיד ככרטיסים, בלי טבלה שנגללת לצדדים. הבחירה השמורה במחשב לא משתנה */
    [x-show*="viewMode === 'list'"] {
        display: none !important;
    }

    [x-show*="viewMode === 'grid'"] {
        display: grid !important;
    }

    /* „בחירה מרובה” שליד המתג: אייקון קטן בצד במקום כפתור ברוחב מלא. הכיתוב נשאר זמין לקוראי מסך */
    div:has(> button[\@click^="toggleView"]) ~ button[\@click^="toggleSelectionMode"] {
        align-self: flex-end;
        width: 2.75rem;
        min-width: 2.75rem;
        height: 2.75rem;
        min-height: 2.75rem;
        padding: 0;
        gap: 0;
        justify-content: center;
    }

    div:has(> button[\@click^="toggleView"]) ~ button[\@click^="toggleSelectionMode"] > i {
        margin: 0;
    }

    div:has(> button[\@click^="toggleView"]) ~ button[\@click^="toggleSelectionMode"] > span {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    /* עמודי המערכת: כפתור הנגישות הצף מוסתר, ותפריט הנגישות נפתח מהפריט „נגישות” בתפריט הצד (☰) */
    body.has-sidebar .a11y-trigger {
        display: none;
    }
}

/* פריט הנגישות שבתחתית סרגל הצד מיועד למסך צר בלבד. במסך רחב יש את כפתור הנגישות הצף,
   ולכן הפריט מוסתר – כדי שלא יופיעו שני סימני נגישות באותו מסך */
@media (min-width: 768px) {
    #sidebar-a11y-item {
        display: none !important;
    }
}