/* ============================================================
   Path: src/RichRich.Web/wwwroot/css/identity.css
   Session: TOPBAR-CS-MOVE — Original from J-35b
   LastModified: 2026-07-15
   ⚠️ MODIFIED — TOPBAR-CS-MOVE (طلب طه): أبعاد المبدّل تطابق حقل
      البحث (flex:1 · max-width:380px · height:34px) + قواعد استجابة.
   Module: M02 Identity (Frontend) — company switcher styles
   ============================================================
   🆕 NEW FILE — J-35b

   أنماط مبدّل الشركة (multi-entity) في الشريط العلوي. تعتمد على
   CSS variables للثيمات (--p / --card-bg / --card-bdr / --t1..t3)
   فتعمل عبر الثيمات الأربعة. RTL-safe (logical properties).

   ⚠️ يُربط في App.razor (درس J-34 #7: أي CSS جديد يُربط فوراً).

   المرجع: 05_UI_UX_Design.md § 6.3 · TopBar (tb-right)
   ============================================================ */

/* TOPBAR-CS-MOVE (طلب طه): المبدّل صار في مكان حقل البحث بالشريط العلوي —
   يطابق أبعاده (flex:1 · max-width:380px · height:34px) ليصطفّا بصريّاً. */
.rr-company-switcher {
    position: relative;
    display: flex;
    flex: 1;
    max-width: 380px;
}

.rr-cs-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: 0 .75rem;
    background: transparent;
    border: 1px solid var(--card-bdr);
    border-radius: .5rem;
    color: var(--t1);
    font-size: var(--fs-small, .875rem);
    cursor: pointer;
    transition: background var(--tr, .2s), border-color var(--tr, .2s);
    width: 100%;
    height: 34px;
}
.rr-cs-btn:hover:not(:disabled) {
    background: color-mix(in srgb, var(--p) 6%, transparent);
    border-color: var(--p);
}
.rr-cs-btn:disabled { opacity: .6; cursor: progress; }
.rr-cs-current {
    max-width: none;
    flex: 1;
    text-align: start;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}
.rr-cs-caret { font-size: .7rem; color: var(--t3); margin-inline-start: auto; }

.rr-cs-backdrop { position: fixed; inset: 0; z-index: 1040; }

.rr-cs-menu {
    position: absolute;
    top: calc(100% + .35rem);
    inset-inline-end: 0;
    min-width: 240px;
    max-height: 60vh;
    overflow-y: auto;
    background: var(--card-bg);
    border: 1px solid var(--card-bdr);
    border-radius: .6rem;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .16);
    z-index: 1050;
    padding: .35rem;
    animation: rr-cs-in var(--tr, .15s) ease-out;
}
@keyframes rr-cs-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.rr-cs-menu-head {
    padding: .4rem .6rem;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--t3);
}

.rr-cs-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .55rem .6rem;
    background: transparent;
    border: none;
    border-radius: .45rem;
    color: var(--t1);
    cursor: pointer;
    text-align: start;
    transition: background var(--tr, .2s);
}
.rr-cs-item:hover:not(:disabled) { background: color-mix(in srgb, var(--p) 8%, transparent); }
.rr-cs-item.active { background: color-mix(in srgb, var(--p) 12%, transparent); }
.rr-cs-item:disabled { opacity: .6; cursor: progress; }
.rr-cs-item-name { font-weight: 500; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-cs-item-code { font-size: .72rem; color: var(--t3); }
.rr-cs-check { color: var(--p); }

/* TOPBAR-CS-MOVE: يطابق سلوك .tb-search الاستجابي (layout.css) بعد أن حلّ
   محلّه — مع فارق مقصود: البحث يُخفى ≤768px، والمبدّل **يبقى** (معرفة الشركة
   النشطة ضرورية دائماً) لكن يتقلّص إلى عرض المحتوى. */
@media (max-width: 1024px) {
    .rr-company-switcher { max-width: 220px; }
}

@media (max-width: 768px) {
    .rr-company-switcher { flex: 0 1 auto; max-width: 150px; }
    .rr-cs-btn { padding: 0 .5rem; }
}