/* ============================================================
   Path: src/RichRich.Web/wwwroot/css/settings.css
   Session: J-35a
   LastModified: 2026-05-23
   Module: M01 Settings (Frontend) — page + matrix + diff styles
   ============================================================
   🆕 NEW FILE — J-35a

   أنماط صفحات الإعدادات. تعتمد كلياً على CSS variables للثيمات
   (--p / --accent / --card-bg / --card-bdr / --t1..t3 / --ok..info)
   فتعمل عبر الثيمات الأربعة دون تعديل. RTL/LTR يُدار عبر الاتجاه
   الموروث (logical properties حيث أمكن).

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

   المرجع: 05_UI_UX_Design.md § 6.3
   ============================================================ */

/* ── page header (مشترك لكل صفحات الإعدادات) ── */
.page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
.page-title {
    font-size: var(--fs-h1, 1.5rem);
    font-weight: 700;
    color: var(--t1);
    margin: 0;
}
.page-sub {
    color: var(--t3);
    font-size: var(--fs-small, .875rem);
    margin: .25rem 0 0;
}
.page-head-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ── card ── */
.rr-card {
    background: var(--card-bg);
    border: 1px solid var(--card-bdr);
    border-radius: .75rem;
    overflow: hidden;
}
.rr-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .875rem 1.125rem;
    border-bottom: 1px solid var(--card-bdr);
}
.rr-card-head h5 { color: var(--t1); font-weight: 600; }
.rr-card-body { padding: 1.125rem; }
.rr-form-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.rr-inline-check { display: inline-flex; align-items: center; gap: .4rem; margin: 0; }

.rr-badge-system {
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent);
    font-size: .7rem;
}

/* ── settings key/value grids ── */
.rr-settings-grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .6rem 1.5rem;
    margin: 0 0 1rem;
}
.rr-settings-grid dt { color: var(--t3); font-weight: 500; }
.rr-settings-grid dd { color: var(--t1); margin: 0; }

/* ── tabs ── */
.rr-tabs { display: flex; gap: .25rem; border-bottom: 2px solid var(--card-bdr); }
.rr-tab {
    background: none;
    border: none;
    padding: .6rem 1rem;
    color: var(--t3);
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color var(--tr, .2s), border-color var(--tr, .2s);
}
.rr-tab:hover { color: var(--t1); }
.rr-tab.active { color: var(--p); border-bottom-color: var(--p); }

/* ── permissions matrix ── */
.rr-perm-matrix { width: 100%; }
.rr-pm-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .75rem;
    flex-wrap: wrap;
}
.rr-pm-count { color: var(--t3); font-size: var(--fs-small, .875rem); }
.rr-pm-bulk { display: flex; gap: .5rem; }
.rr-pm-scroll { overflow-x: auto; border: 1px solid var(--card-bdr); border-radius: .5rem; }
.rr-pm-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small, .875rem); }
.rr-pm-table th,
.rr-pm-table td {
    padding: .55rem .65rem;
    border-bottom: 1px solid var(--card-bdr);
    text-align: center;
}
.rr-pm-module-head,
.rr-pm-module-cell { text-align: start; white-space: nowrap; }
.rr-pm-module-cell { display: flex; align-items: center; gap: .5rem; }
.rr-pm-module-name { color: var(--t1); font-weight: 500; }
.rr-pm-action-head {
    color: var(--t2);
    font-weight: 600;
    white-space: nowrap;
}
.rr-pm-action-head span { display: block; margin-bottom: .25rem; }
.rr-pm-table thead th { position: sticky; top: 0; background: var(--card-bg); z-index: 1; }
.rr-pm-table tbody tr:hover { background: color-mix(in srgb, var(--p) 5%, transparent); }
.rr-pm-na { color: var(--t3); opacity: .4; }

/* ── audit log ── */
.rr-audit-id { font-size: .78rem; color: var(--t2); }

/* ── JSON diff ── */
.rr-json-diff { font-size: var(--fs-small, .875rem); }
.rr-jd-table { width: 100%; border-collapse: collapse; }
.rr-jd-table th,
.rr-jd-table td {
    padding: .5rem .65rem;
    border-bottom: 1px solid var(--card-bdr);
    text-align: start;
    vertical-align: top;
    word-break: break-word;
}
.rr-jd-table th { color: var(--t2); font-weight: 600; }
.rr-jd-key { font-family: monospace; color: var(--t2); }
.rr-jd-old { color: var(--err); }
.rr-jd-new { color: var(--ok); }
.rr-jd-changed { background: color-mix(in srgb, var(--warn) 8%, transparent); }
.rr-jd-added { background: color-mix(in srgb, var(--ok) 8%, transparent); }
.rr-jd-removed { background: color-mix(in srgb, var(--err) 8%, transparent); }
.rr-jd-raw { display: flex; gap: 1rem; flex-wrap: wrap; }
.rr-jd-raw-col { flex: 1 1 240px; }
.rr-jd-raw-col h6 { color: var(--t2); }
.rr-jd-raw-col pre {
    background: var(--body-bg);
    border: 1px solid var(--card-bdr);
    border-radius: .4rem;
    padding: .65rem;
    max-height: 320px;
    overflow: auto;
    white-space: pre-wrap;
    color: var(--t1);
}

/* ── side drawer (audit diff) ── */
.rr-drawer-backdrop {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, .4);
    z-index: 1040;
}
.rr-drawer {
    position: fixed;
    top: 0; bottom: 0; inset-inline-end: 0;
    width: min(560px, 92vw);
    background: var(--card-bg);
    border-inline-start: 1px solid var(--card-bdr);
    box-shadow: -4px 0 24px rgba(0, 0, 0, .15);
    z-index: 1050;
    display: flex;
    flex-direction: column;
    animation: rr-drawer-in var(--tr, .2s) ease-out;
}
@keyframes rr-drawer-in { from { transform: translateX(8%); opacity: .6; } to { transform: none; opacity: 1; } }
.rr-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.125rem;
    border-bottom: 1px solid var(--card-bdr);
}
.rr-drawer-head h5 { margin: 0; color: var(--t1); }
.rr-drawer-body { padding: 1.125rem; overflow-y: auto; }
.rr-audit-meta {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .4rem 1rem;
    margin-bottom: 1rem;
}
.rr-audit-meta dt { color: var(--t3); }
.rr-audit-meta dd { color: var(--t1); margin: 0; word-break: break-all; }

/* ── languages list ── */
.rr-lang-list { display: flex; flex-direction: column; gap: .5rem; }
.rr-lang-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem 1rem;
    border: 1px solid var(--card-bdr);
    border-radius: .5rem;
}
.rr-lang-row.active { border-color: var(--p); background: color-mix(in srgb, var(--p) 5%, transparent); }
.rr-lang-info { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.rr-lang-name { font-weight: 600; color: var(--t1); }
.rr-lang-code { color: var(--t3); font-size: .8rem; }

/* ── translations table ── */
.rr-translations-table .rr-tr-key { font-size: .78rem; color: var(--t2); }

/* ============================================================
   J-36c-ux (v2): Permissions Accordion — بطاقات منفصلة + checkboxes واضحة
   إصلاح: تباين الخلفيات (كانت كلها بيضاء)، فصل البطاقات بظلّ ومسافة،
   إبراز الـ checkboxes بـ accent-color = لون العلامة التجارية.
   ============================================================ */
.rr-perm-acc { display: flex; flex-direction: column; gap: 1rem; }

/* شريط الأدوات */
.rr-pa-toolbar {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    padding: .75rem 1rem;
    background: var(--card-bg, #fff);
    border: 1px solid var(--card-bdr, #e8e8e8);
    border-radius: .6rem;
}
.rr-pa-search { position: relative; flex: 1 1 240px; min-width: 200px; }
.rr-pa-search .bi {
    position: absolute; inset-inline-start: .7rem; top: 50%;
    transform: translateY(-50%); color: var(--t2, #6c757d);
    pointer-events: none; font-size: .9rem;
}
.rr-pa-search input { padding-inline-start: 2.1rem; }
.rr-pa-count {
    font-size: .85rem; font-weight: 600; color: var(--t2, #6c757d);
    white-space: nowrap;
}
.rr-pa-bulk { display: flex; gap: .4rem; margin-inline-start: auto; }

/* قائمة البطاقات — مسافة واضحة بين كل موديول */
.rr-pa-list { display: flex; flex-direction: column; gap: .85rem; }

/* بطاقة الموديول — منفصلة بوضوح (ظلّ + حدّ + زاوية) */
.rr-pa-card {
    border: 1px solid var(--card-bdr, #e8e8e8);
    border-radius: .6rem;
    overflow: hidden;
    background: var(--card-bg, #fff);
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    transition: box-shadow .15s ease;
}
.rr-pa-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.10); }

/* رأس الموديول — خلفية مميّزة قليلاً لتمييزه عن المحتوى */
.rr-pa-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: .85rem 1.1rem; cursor: pointer; user-select: none;
    background: var(--body-bg, #f4f5f7);
    transition: background .15s ease;
}
.rr-pa-head:hover { background: var(--card-bdr, #e8e8e8); }
.rr-pa-head-main { display: flex; align-items: center; gap: .7rem; }
.rr-pa-mod-name { font-weight: 700; font-size: .98rem; color: var(--t1, #1a1a1a); }
.rr-pa-badge {
    font-size: .74rem; font-weight: 700; padding: .15rem .6rem; border-radius: 1rem;
    background: var(--p, #c8102e); color: #fff; min-width: 2.5rem; text-align: center;
}
.rr-pa-head > .bi { color: var(--t2, #6c757d); font-size: .9rem; }

/* جسم البطاقة — شبكة الصلاحيات، خلفية بيضاء صريحة + فاصل علوي */
.rr-pa-body {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: .55rem .9rem;
    padding: 1rem 1.1rem 1.15rem;
    border-top: 2px solid var(--p, #c8102e);
    background: var(--card-bg, #fff);
}

/* عنصر الصلاحية — خلية واضحة بحدّ خفيف */
.rr-pa-perm {
    display: flex; align-items: center; gap: .6rem;
    font-size: .9rem; cursor: pointer; margin: 0;
    padding: .45rem .6rem;
    border: 1px solid var(--card-bdr, #e8e8e8);
    border-radius: .4rem;
    transition: background .12s ease, border-color .12s ease;
}
.rr-pa-perm:hover { background: var(--body-bg, #f4f5f7); border-color: var(--p, #c8102e); }
.rr-pa-perm-label { line-height: 1.25; color: var(--t1, #1a1a1a); }

/* ★ الـ checkboxes واضحة الآن: حجم أكبر + لون العلامة عند التحديد */
.rr-perm-acc input[type="checkbox"] {
    width: 1.15rem; height: 1.15rem;
    accent-color: var(--p, #c8102e);
    cursor: pointer; flex-shrink: 0;
    margin: 0;
}

/* الموبايل */
@media (max-width: 576px) {
    .rr-pa-body { grid-template-columns: 1fr 1fr; }
    .rr-pa-bulk { margin-inline-start: 0; width: 100%; }
}

/* ============================================================
   JOBTITLE-1e-4-style2: هيدر خفيف يتبع الثيم لجدول المسميات.
   بدل الأزرق الداكن (--acc-p-dark)، خلفية --acc-p-light ونصّ --acc-p:
     Fresh=أخضر خفيف · Official=أزرق خفيف · Luxury=ذهبي خفيف · Fast=أحمر خفيف.
   مقصور على .jt-light-head (لا يمسّ بقيّة جداول dtbl).
   ============================================================ */
.jt-light-head.dtbl thead tr {
    background: var(--acc-p-light) !important;
}
.jt-light-head.dtbl thead th {
    background: var(--acc-p-light) !important;
    color: var(--acc-p) !important;
    border-bottom: 2px solid var(--acc-bdr) !important;
    border-left-color: var(--acc-bdr) !important;
}