/* select.css
   شكل موحّد لكل القوايم المنسدلة (<select>) في السيستم - نفس شكل فلاتر Group Overview:
   لوحة داكنة بحواف مدوّرة، علامة ✓ جنب الاختيار الحالي، وخيار "الكل" فوق مفصول بخط.
   بيتحمّل من pwa_head.php فبيطبق على كل الصفحات.

   الـ <select> نفسه زي ما هو (كيبورد، قارئ الشاشة، وأحداث change في الـ JS) - ده ستايل بس.
   شغال في Chrome/Edge 135+ (appearance: base-select)، والمتصفحات اللي مابتدعمهوش بتفضل على
   الشكل العادي من غير أي كسر. شكل الخانة نفسها وهي مقفولة (المقاس والـ padding) بيفضل زي
   ما كل صفحة محدداه، والتوحيد هنا للقايمة اللي بتفتح والسهم وحالات hover/open.

   :not([multiple]):not([size]) عشان القوايم اللي بتعرض كذا سطر مفتوح مش بتتأثر، وكمان
   بيدي الـ selectors دي أولوية أعلى من "select option" اللي في ملفات الصفحات. */

@supports (appearance: base-select) {
    select:not([multiple]):not([size]),
    select:not([multiple]):not([size])::picker(select) { appearance: base-select; }

    select:not([multiple]):not([size]) {
        display: inline-flex; align-items: center; justify-content: space-between; gap: 10px;
        cursor: pointer; color-scheme: dark;
        transition: border-color 0.2s ease, background 0.2s ease;
    }
    select:not([multiple]):not([size]):hover { border-color: rgba(212, 163, 115, 0.6); }
    select:not([multiple]):not([size]):open { border-color: #d4a373; background: rgba(20, 14, 9, 0.6); }
    select:not([multiple]):not([size])::picker-icon {
        color: #d4a373; font-size: 0.65rem;
        transition: rotate 0.2s ease;
    }
    select:not([multiple]):not([size]):open::picker-icon { rotate: 180deg; }

    select:not([multiple]):not([size])::picker(select) {
        margin-block: 6px; padding: 6px; min-width: anchor-size(width);
        max-height: min(340px, 60vh); overflow-y: auto;
        background: rgba(32, 22, 14, 0.98); color: #f3e7d6;
        border: 1px solid rgba(212, 163, 115, 0.3); border-radius: 12px;
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
        opacity: 0; translate: 0 -4px;
        transition: opacity 0.16s ease, translate 0.16s ease, overlay 0.16s allow-discrete, display 0.16s allow-discrete;
    }
    select:not([multiple]):not([size]):open::picker(select) { opacity: 1; translate: 0 0; }
    @starting-style { select:not([multiple]):not([size]):open::picker(select) { opacity: 0; translate: 0 -4px; } }

    select:not([multiple]):not([size]) option {
        display: flex; align-items: center; gap: 10px;
        padding: 8px 10px; border-radius: 8px;
        background: transparent; color: #f3e7d6; font-size: 0.9em;
        cursor: pointer; transition: background 0.15s ease;
    }
    select:not([multiple]):not([size]) option:hover,
    select:not([multiple]):not([size]) option:focus-visible { background: rgba(212, 163, 115, 0.16); outline: none; }
    select:not([multiple]):not([size]) option:checked { background: rgba(212, 163, 115, 0.22); color: #f0c896; font-weight: bold; }
    select:not([multiple]):not([size]) option:disabled { color: #a8957c; cursor: default; }
    select:not([multiple]):not([size]) option::checkmark { content: '✓'; order: 1; margin-inline-start: auto; color: #d4a373; font-weight: bold; }

    /* خيار "الكل" (قيمته فاضية أو all) لو هو الأول: ذهبي ومفصول عن الباقي بخط زي "All Branches" */
    select:not([multiple]):not([size]) option:first-child:is([value=""], [value="all"]) { color: #d4a373; font-weight: bold; }
    select:not([multiple]):not([size]) option:first-child:is([value=""], [value="all"]):not(:only-child) { margin-bottom: 4px; position: relative; }
    select:not([multiple]):not([size]) option:first-child:is([value=""], [value="all"]):not(:only-child)::after {
        content: ''; position: absolute; left: 4px; right: 4px; bottom: -3px; height: 1px; background: rgba(255, 255, 255, 0.1);
    }
}