/* ============================================================
   Path: src/RichRich.Web/wwwroot/css/templates.css
   Session: J-35c
   LastModified: 2026-05-23
   Module: M16 Notifications (Frontend) — Templates page styles
   ============================================================
   🆕 NEW FILE — J-35c

   أنماط خاصة بصفحة قوالب الإشعارات:
     - RrDrawer  : لوحة جانبية تنزلق من حافة النهاية المنطقية (RTL-aware).
     - rr-switch : مفتاح تبديل التفعيل في صف الجدول.
     - rr-vars   : محرّر قائمة المتغيّرات.

   كل الألوان من CSS variables (themes.css) لدعم الثيمات الأربعة
   + الوضع الداكن دون تكرار. يستخدم الخصائص المنطقية (inset-inline)
   لينعكس تلقائياً في RTL/LTR.
   ============================================================ */

/* ── Drawer ───────────────────────────────────────────────── */
.rr-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1095;
    background: rgba(0, 0, 0, .5);
    animation: rr-fade-in .2s ease;
}

.rr-drawer {
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    width: 100%;
    max-width: 550px;
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    border-inline-start: 1px solid var(--card-bdr);
    box-shadow: -12px 0 40px rgba(0, 0, 0, .25);
    animation: rr-drawer-in .28s ease;
}

.rr-drawer-wide { max-width: 640px; }

/* 🆕 LINE-UI-FIX: مقاس ثالث لنماذج الأسطر (طلب/أمر شراء، استلام، فاتورة
   مورد، سند دفع). 550px الافتراضية لا تكفي 5 أعمدة إدخال: مجموع العروض
   المطلوبة يتجاوز المتاح، فيسحق المتصفح كل عمود بلا min-width. */
.rr-drawer-xwide { max-width: 920px; }

/* على الشاشات الضيقة يعود الدرج لكامل العرض (max-width لا يمنع التقلّص). */
@media (max-width: 960px) {
    .rr-drawer-xwide { max-width: 100%; }
}

@keyframes rr-drawer-in {
    from { transform: translateX(var(--rr-drawer-from, 100%)); opacity: .6; }
    to   { transform: translateX(0); opacity: 1; }
}

/* في RTL تنزلق من اليسار منطقياً — نعكس اتجاه البداية. */
[dir="rtl"] .rr-drawer { --rr-drawer-from: -100%; }

.rr-drawer-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--card-bdr);
}

.rr-drawer-title { flex: 1; }

.rr-drawer-heading {
    margin: 0;
    font-size: var(--fs-h3);
    font-weight: 700;
    color: var(--t1);
}

.rr-drawer-close {
    border: none;
    background: transparent;
    color: var(--t3);
    cursor: pointer;
    font-size: 16px;
    padding: 4px;
}
.rr-drawer-close:hover { color: var(--t1); }

.rr-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.rr-drawer-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid var(--card-bdr);
}

/* ── Toggle switch ────────────────────────────────────────── */
.rr-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    cursor: pointer;
    margin: 0;
}
.rr-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.rr-switch-slider {
    position: absolute;
    inset: 0;
    background: var(--t3);
    border-radius: 22px;
    transition: background .2s ease;
}
.rr-switch-slider::before {
    content: "";
    position: absolute;
    height: 16px;
    width: 16px;
    inset-block-start: 3px;
    inset-inline-start: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform .2s ease;
}
.rr-switch input:checked + .rr-switch-slider { background: var(--ok); }
.rr-switch input:checked + .rr-switch-slider::before { transform: translateX(18px); }
[dir="rtl"] .rr-switch input:checked + .rr-switch-slider::before { transform: translateX(-18px); }
.rr-switch input:focus-visible + .rr-switch-slider {
    outline: 2px solid var(--p);
    outline-offset: 2px;
}

/* ── Variables editor ─────────────────────────────────────── */
.rr-vars { display: flex; flex-direction: column; gap: 8px; }

.rr-vars-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.rr-vars-empty {
    margin: 0;
    padding: 10px 12px;
    font-size: var(--fs-small);
    color: var(--t3);
    background: color-mix(in srgb, var(--t3) 8%, transparent);
    border-radius: 8px;
}

.rr-vars-list { display: flex; flex-direction: column; gap: 8px; }

.rr-vars-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rr-vars-token {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    font-weight: 700;
    color: var(--p);
    background: color-mix(in srgb, var(--p) 12%, transparent);
    border-radius: 6px;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 640px) {
    .rr-drawer, .rr-drawer-wide { max-width: 100%; }
}