/* ============================================================
   Path: src/RichRich.Web/wwwroot/css/shared-components.css
   Session: J-33  ⚠️ MODIFIED — SS-DROPDOWN-CLIP-FIX (2026-06-30): القائمة كانت تُقصّ
   داخل .table-responsive/.rr-card (overflow) فتظهر صحيحة للصف الأول وتنحرف للسفلى.
   الحل: :has() يحرّر القصّ عند فتح قائمة + z-index أعلى + ظهور ناعم.
   LastModified: 2026-05-22
   Module: Frontend Foundation - Shared Components Styles
   ============================================================
   ستايلات كل المكوّنات المشتركة في J-33. لا ألوان ثابتة —
   كل شيء عبر CSS Variables من themes.css (J-05)، فتتبع الثيمات
   الأربعة + Day/Night تلقائياً. منطقي الاتجاه (RTL/LTR) عبر
   margin-inline / padding-inline / inset-inline.

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

/* ============================================================
   أزرار مشتركة (تُستخدم عبر المكوّنات)
   ============================================================ */
.btn-primary,
.btn-secondary,
.btn-danger,
.btn-warning,
.btn-success,
.btn-info {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    font-family: inherit;
    font-size: var(--fs-body);
    font-weight: 600;
    line-height: 1;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: filter var(--tr), background var(--tr), border-color var(--tr);
    white-space: nowrap;
}

.btn-primary  { background: var(--p);     color: #fff; }
.btn-info     { background: var(--info);  color: #fff; }
.btn-warning  { background: var(--warn);  color: #fff; }
.btn-danger   { background: var(--err);   color: #fff; }
.btn-success  { background: var(--ok);    color: #fff; }

.btn-secondary {
    background: transparent;
    color: var(--t1);
    border-color: var(--card-bdr);
}

.btn-primary:hover,
.btn-info:hover,
.btn-warning:hover,
.btn-danger:hover,
.btn-success:hover { filter: brightness(1.07); }

.btn-secondary:hover { background: var(--body-bg); }

.btn-primary:disabled,
.btn-secondary:disabled,
.btn-danger:disabled,
.btn-warning:disabled,
.btn-success:disabled,
.btn-info:disabled {
    opacity: .55;
    cursor: not-allowed;
    filter: none;
}

/* ============================================================
   KpiCard — 4 ألوان (g / o / b / pu)
   ============================================================ */
.kpi-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: var(--card-bg);
    border: 1px solid var(--card-bdr);
    border-radius: 16px;
    padding: 22px 20px 20px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
    transition: box-shadow var(--tr), transform var(--tr), border-color var(--tr);
}

.kpi-card:hover {
    box-shadow: 0 10px 28px rgba(0, 0, 0, .10);
    transform: translateY(-4px);
    border-color: transparent;
}

.kpi-icon {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 14px;
    font-size: 23px;
    flex-shrink: 0;
    transition: transform var(--tr);
}

.kpi-card:hover .kpi-icon { transform: scale(1.06); }

.kpi-body { flex: 1; min-width: 0; }

.kpi-title {
    font-size: var(--fs-body);
    color: var(--t2);
    font-weight: 500;
}

.kpi-value {
    font-size: var(--fs-h1);
    font-weight: 800;
    color: var(--t1);
    line-height: 1.15;
    margin-top: 4px;
    word-break: break-word;
}

.kpi-change {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-top: 8px;
    font-size: var(--fs-small);
    font-weight: 600;
}

.kpi-change-up   { color: var(--ok); }
.kpi-change-down { color: var(--err); }
.kpi-change-neutral { color: var(--t3); }

.kpi-change-label {
    color: var(--t3);
    font-weight: 400;
    margin-inline-start: 4px;
}

.kpi-accent-line {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 0;
    block-size: 4px;
    opacity: .9;
    transition: block-size var(--tr), opacity var(--tr);
}

.kpi-card:hover .kpi-accent-line { block-size: 6px; opacity: 1; }

/* variants: g (primary) · o (accent) · b (secondary) · pu (purple)
   الأيقونة بتدرّج خفيف + الشريط العلوي متدرّج (محاكاة فكرة الكروت). */
.kpi-icon-g  { background: linear-gradient(135deg, var(--p-light), color-mix(in srgb, var(--p) 18%, var(--p-light))); color: var(--p); }
.kpi-accent-g  { background: linear-gradient(90deg, var(--p), color-mix(in srgb, var(--p) 55%, transparent)); }

.kpi-icon-o  { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, transparent), color-mix(in srgb, var(--accent) 26%, transparent)); color: var(--accent-d); }
.kpi-accent-o  { background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, transparent)); }

.kpi-icon-b  { background: linear-gradient(135deg, color-mix(in srgb, var(--sec) 14%, transparent), color-mix(in srgb, var(--sec) 26%, transparent)); color: var(--sec); }
.kpi-accent-b  { background: linear-gradient(90deg, var(--sec), color-mix(in srgb, var(--sec) 55%, transparent)); }

.kpi-icon-pu { background: linear-gradient(135deg, color-mix(in srgb, #8b5cf6 14%, transparent), color-mix(in srgb, #8b5cf6 26%, transparent)); color: #8b5cf6; }
.kpi-accent-pu { background: linear-gradient(90deg, #8b5cf6, color-mix(in srgb, #8b5cf6 55%, transparent)); }

/* KPI skeleton (Loading) */
.kpi-skeleton { display: flex; align-items: flex-start; gap: 14px; width: 100%; }
.kpi-skeleton-icon {
    width: 46px; height: 46px; border-radius: 12px;
    background: var(--card-bdr); flex-shrink: 0;
}
.kpi-skeleton-lines { flex: 1; display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }

/* ============================================================
   DataTable
   ============================================================ */
.rr-datatable {
    background: var(--card-bg);
    border: 1px solid var(--card-bdr);
    border-radius: 14px;
    overflow: hidden;
}

.rr-dt-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--card-bdr);
    flex-wrap: wrap;
}

.rr-dt-search { position: relative; flex: 1 1 240px; max-width: 360px; display: flex; align-items: center; }
.rr-dt-search .bi-search {
    position: absolute;
    inset-inline-start: 12px;
    color: var(--t3);
    pointer-events: none;
    font-size: 14px;
}
.rr-dt-search .form-control { padding-inline-start: 36px; }
.rr-dt-toolbar-actions { display: flex; gap: 8px; margin-inline-start: auto; }

.rr-dt-scroll { overflow-x: auto; }

.rr-dt-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-body);
}

.rr-dt-table thead th {
    /* TABLE-UNIFY: هيدر خفيف يتبع الثيم (معيار صفحة المسميات jt-light-head).
       --p-light يتبدّل عبر الثيمات الأربعة: أزرق/أخضر/ذهبي/أحمر خفيف. */
    background: var(--p-light);
    color: var(--p);
    font-weight: 700;
    text-align: start;
    padding: .3rem .8rem;
    border-bottom: 2px solid var(--card-bdr);
    border-inline-start: 1px solid var(--card-bdr);   /* TABLE-UNIFY: خطّ رأسيّ */
    white-space: nowrap;
    user-select: none;
}
.rr-dt-table thead th:first-child { border-inline-start: none; }

.rr-dt-table thead th.rr-dt-sortable { cursor: pointer; }
.rr-dt-table thead th.rr-dt-sortable:hover { color: var(--p); }

.rr-dt-th-inner { display: inline-flex; align-items: center; gap: 6px; }
.rr-dt-th-inner .bi { font-size: 12px; opacity: .65; }

.rr-dt-table tbody td {
    padding: .3rem .8rem;
    border-bottom: 1px solid var(--card-bdr);
    border-inline-start: 1px solid var(--card-bdr);   /* TABLE-UNIFY: خطّ رأسيّ */
    color: var(--t1);
    vertical-align: middle;
}
.rr-dt-table tbody td:first-child { border-inline-start: none; }

.rr-dt-table tbody tr:last-child td { border-bottom: none; }
.rr-dt-table tbody tr:hover { background: var(--body-bg); }

.rr-dt-empty-cell { padding: 0 !important; }
.rr-dt-skeleton-row td { padding: 14px 16px; }

.text-start  { text-align: start; }
.text-center { text-align: center; }
.text-end    { text-align: end; }

.rr-dt-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid var(--card-bdr);
    flex-wrap: wrap;
}

.rr-dt-info { font-size: var(--fs-small); color: var(--t2); }

.rr-dt-pagesize {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-small);
    color: var(--t2);
}

.form-select-sm {
    padding: 4px 8px;
    font-size: var(--fs-small);
    width: auto;
}

/* ============================================================
   Pagination
   ============================================================ */
.rr-pagination {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

.rr-page-btn {
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border: 1px solid var(--card-bdr);
    background: var(--card-bg);
    color: var(--t1);
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--fs-small);
    transition: background var(--tr), color var(--tr), border-color var(--tr);
}

.rr-page-btn:hover:not(:disabled) { border-color: var(--p); color: var(--p); }

.rr-page-btn.active {
    background: var(--p);
    border-color: var(--p);
    color: #fff;
    font-weight: 700;
}

.rr-page-btn:disabled { opacity: .4; cursor: not-allowed; }
.rr-page-ellipsis { padding: 0 4px; color: var(--t3); }

/* أيقونات الحواف منطقية الاتجاه (تنعكس في RTL) */
[dir="rtl"] .rr-page-prev .bi,
[dir="rtl"] .rr-page-next .bi { transform: scaleX(-1); }

/* ============================================================
   Form Fields — هيكل موحّد لكل الحقول
   ============================================================ */
.rr-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.rr-field-label {
    font-size: var(--fs-small);
    font-weight: 600;
    color: var(--t2);
}

.rr-field-required {
    color: var(--err);
    margin-inline-start: 3px;
}

/* حقول bootstrap-like موحّدة عبر الثيم */
.form-control,
.form-select {
    width: 100%;
    padding: 9px 12px;
    font-family: inherit;
    font-size: var(--fs-body);
    color: var(--t1);
    background: var(--input-bg, var(--card-bg));
    border: 1.5px solid var(--input-bdr, #b9c2cc);
    border-radius: 6px; /* UI-FIX-3: زوايا أحدّ وموحّدة عبر كل الحقول */
    transition: border-color var(--tr), box-shadow var(--tr);
}

.form-control:hover:not(:focus),
.form-select:hover:not(:focus) {
    border-color: var(--t3, #94a3b8);
}

.form-control::placeholder { color: var(--t3); }

.form-control:focus,
.form-select:focus {
    outline: none;
    border-color: var(--p);
    box-shadow: 0 0 0 3px var(--p-light);
}

.form-control:disabled,
.form-select:disabled {
    background: var(--body-bg);
    opacity: .7;
    cursor: not-allowed;
}

/* رسائل التحقق + التلميحات */
.rr-field-msg { font-size: var(--fs-small); line-height: 1.4; }
.rr-field-error { color: var(--err); }
.rr-field-hint { color: var(--t3); }

.rr-field-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.rr-field-counter {
    font-size: var(--fs-small);
    color: var(--t3);
    margin-inline-start: auto;
}

/* حالة الخطأ على الحقل */
.rr-field-invalid .form-control,
.rr-field-invalid .form-select,
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--err);
}
.rr-field-invalid .form-control:focus,
.form-control.is-invalid:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--err) 18%, transparent);
}

/* Checkbox / Radio */
.rr-field-checkbox { flex-direction: row; align-items: flex-start; gap: 10px; }

.rr-checkbox,
.rr-radio {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}

.form-check-input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--p);
    cursor: pointer;
    flex-shrink: 0;
}

.rr-checkbox-text,
.rr-radio-text { font-size: var(--fs-body); color: var(--t1); }
.rr-checkbox-desc { font-size: var(--fs-small); color: var(--t3); margin-top: 2px; }

.rr-radio-group { display: flex; flex-direction: column; gap: 8px; }
.rr-radio-group.rr-radio-inline { flex-direction: row; flex-wrap: wrap; gap: 18px; }

/* Currency / Phone — حقول مركّبة */
.rr-currency-group,
.rr-phone-group {
    display: flex;
    align-items: stretch;
    height: 42px; /* UI-FIX-3: نفس ارتفاع حقل النص */
    border: 1.5px solid var(--input-bdr, #b9c2cc); /* UI-FIX-3: نفس حدّ حقل النص */
    border-radius: 6px;                            /* UI-FIX-3: نفس زواياه الحادّة */
    overflow: hidden;
    background: var(--input-bg, var(--card-bg));
    transition: border-color var(--tr), box-shadow var(--tr);
}

.rr-currency-group:focus-within,
.rr-phone-group:focus-within {
    border-color: var(--p);
    box-shadow: 0 0 0 3px var(--p-light);
}

.rr-currency-symbol {
    display: grid;
    place-items: center;
    padding: 0 12px;
    background: var(--body-bg);
    color: var(--t2);
    font-weight: 600;
    font-size: var(--fs-small);
    white-space: nowrap;
}

.rr-currency-input,
.rr-phone-number {
    flex: 1;
    border: none;
    background: transparent;
    padding: 9px 12px;
    color: var(--t1);
    font-family: inherit;
    font-size: var(--fs-body);
}
.rr-currency-input:focus,
.rr-phone-number:focus { outline: none; }

.rr-phone-code {
    border: none;
    background: var(--body-bg);
    color: var(--t1);
    padding: 0 10px;
    font-family: inherit;
    font-size: var(--fs-body);
    border-inline-end: 1px solid var(--card-bdr);
    cursor: pointer;
}
.rr-phone-code:focus { outline: none; }

/* DateRange */
.rr-daterange { display: flex; align-items: center; gap: 8px; }
.rr-daterange-part { flex: 1; }
.rr-daterange-sep { color: var(--t3); font-size: var(--fs-small); }
.rr-daterange-tag { font-size: var(--fs-small); color: var(--t3); margin-bottom: 2px; }

/* File drop */
.rr-file-native { display: none; }

.rr-file-drop {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border: 2px dashed var(--card-bdr);
    border-radius: 10px;
    background: var(--body-bg);
    cursor: pointer;
    transition: border-color var(--tr), background var(--tr);
}
.rr-file-drop:hover,
.rr-file-drop.is-dragover { border-color: var(--p); background: var(--p-light); }

.rr-file-icon { font-size: 28px; color: var(--p); }
.rr-file-prompt { font-size: var(--fs-body); color: var(--t1); }
.rr-file-hint { font-size: var(--fs-small); color: var(--t3); }
.rr-file-name { font-weight: 600; color: var(--t1); }
.rr-file-size { font-size: var(--fs-small); color: var(--t3); margin-inline-start: 6px; }

/* ============================================================
   SearchSelect (single) — combobox
   ============================================================ */
.rr-searchselect { position: relative; }

.rr-ss-control,
.rr-ms-control {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    /* UI-FIX-3: ارتفاع صريح = .form-control (line-height 1.5 × 14 = 21 + padding 18 + border 3 = 42px).
       يطابق حقل النص تماماً بلا اعتماد على تداخل حشو input الداخلي. */
    height: 42px;
    min-height: 42px;
    padding: 0 12px;
    background: var(--input-bg, var(--card-bg));
    border: 1.5px solid var(--input-bdr, #b9c2cc);
    border-radius: 6px; /* UI-FIX-3: نفس زوايا حقل النص الحادّة */
    cursor: text;
    transition: border-color var(--tr), box-shadow var(--tr);
}
.rr-ss-control:hover:not(:focus-within),
.rr-ms-control:hover:not(:focus-within) {
    border-color: var(--t3, #94a3b8);
}
.rr-ss-control:focus-within,
.rr-ms-control:focus-within {
    border-color: var(--p);
    box-shadow: 0 0 0 3px var(--p-light);
}

.rr-ss-input,
.rr-ms-search {
    flex: 1;
    min-width: 60px;
    height: 100%; /* UI-FIX-3: يملأ ارتفاع الـ control بلا حشو رأسي إضافي */
    border: none;
    background: transparent;
    color: var(--t1);
    font-family: inherit;
    font-size: var(--fs-body);
    padding: 0 2px;
}
.rr-ss-input:focus,
.rr-ms-search:focus { outline: none; }

.rr-ss-menu,
.rr-ms-menu {
    position: absolute;
    inset-inline: 0;
    top: calc(100% + 4px);
    z-index: 1200;
    max-height: 260px;
    overflow-y: auto;
    background: var(--card-bg);
    border: 1px solid var(--card-bdr);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    padding: 4px;
    /* SS-DROPDOWN-FIX: ظهور ناعم احترافي عند الفتح. */
    animation: rr-ss-pop .14s ease;
    list-style: none;
    margin: 0;
}
@keyframes rr-ss-pop {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   SS-DROPDOWN-CLIP-FIX: الحلّ الجذري (CSS خالص، لا يعتمد على JS).
   السبب الأصلي: القائمة (position:absolute) تُقصّ داخل حاويات
   overflow (.table-responsive = overflow-x:auto، .rr-card = overflow:hidden)،
   فتظهر صحيحة للصف الأول وتُقصّ/تنحرف للصفوف السفلى.
   الحلّ: عند فتح أي قائمة (.rr-searchselect.is-open أو .rr-multiselect.is-open)،
   حرّر القصّ عن الحاويات القاصّة الحاوية لها حتى تظهر القائمة كاملة في مكانها.
   ============================================================ */
.rr-card:has(.rr-searchselect.is-open),
.rr-card:has(.rr-multiselect.is-open),
.table-responsive:has(.rr-searchselect.is-open),
.table-responsive:has(.rr-multiselect.is-open) {
    overflow: visible !important;
}

/* SS-DROPDOWN-CSS-ONLY: طبقة شفّافة خلف القائمة تلتقط النقر خارجها فتغلقها
   (بديل click-outside الذي كان في JS). لا تحجب الحقل نفسه (القائمة فوقها). */
.rr-ss-overlay {
    position: fixed;
    inset: 0;
    z-index: 1150;
    background: transparent;
}
/* الحقل المفتوح يبقى فوق الـ overlay (ليُمكن الكتابة في البحث). */
.rr-searchselect.is-open,
.rr-multiselect.is-open {
    position: relative;
    z-index: 1200;
}

.rr-ss-option,
.rr-ms-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 6px;
    color: var(--t1);
    font-size: var(--fs-body);
    cursor: pointer;
}
.rr-ms-options { list-style: none; margin: 0; padding: 0; }

.rr-ss-option:hover:not(.disabled),
.rr-ms-option:hover:not(.disabled),
.rr-ss-option.active,
.rr-ms-option.active { background: var(--p-light); color: var(--p-dark); }
.rr-ss-option.selected,
.rr-ms-option.selected { font-weight: 600; color: var(--p-dark); }
.rr-ss-option.disabled,
.rr-ms-option.disabled { opacity: .5; cursor: not-allowed; }

.rr-ss-empty,
.rr-ms-empty { padding: 12px; text-align: center; color: var(--t3); font-size: var(--fs-small); }

.rr-ss-chevron,
.rr-ms-chevron {
    color: var(--t3);
    font-size: 12px;
    margin-inline-start: auto;
    flex-shrink: 0;
}

.rr-searchselect.is-open .rr-ss-control,
.rr-multiselect.is-open .rr-ms-control {
    border-color: var(--p);
    box-shadow: 0 0 0 3px var(--p-light);
}

/* ============================================================
   MultiSelect — chips
   ============================================================ */
.rr-multiselect { position: relative; }

.rr-ms-chips { display: contents; }

.rr-ms-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 6px 3px 10px;
    background: var(--p-light);
    color: var(--p-dark);
    border-radius: 6px;
    font-size: var(--fs-small);
    font-weight: 600;
}

.rr-ms-chip-remove {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    border-radius: 4px;
    font-size: 11px;
}
.rr-ms-chip-remove:hover { background: color-mix(in srgb, var(--p) 25%, transparent); }

.rr-ms-placeholder { color: var(--t3); font-size: var(--fs-body); padding: 4px 2px; }

/* ============================================================
   EmptyState
   ============================================================ */
.rr-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 48px 24px;
    gap: 6px;
}
.rr-empty-icon { font-size: 48px; color: var(--t3); margin-bottom: 6px; }
.rr-empty-title { font-size: var(--fs-h3); font-weight: 700; color: var(--t1); }
.rr-empty-desc { font-size: var(--fs-body); color: var(--t2); max-width: 420px; }
.rr-empty-action { margin-top: 14px; }

/* ============================================================
   SkeletonLoader — shimmer
   ============================================================ */
.rr-skeleton { display: flex; flex-direction: column; gap: 10px; }

.sk-line,
.sk-block {
    position: relative;
    overflow: hidden;
    background: var(--card-bdr);
    border-radius: 6px;
}

.sk-line { height: 12px; }
.sk-line-sm { width: 40%; }
.sk-line-md { width: 65%; }
.sk-line-lg { width: 100%; }
.sk-block { height: 120px; }

.sk-line::after,
.sk-block::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg,
        transparent,
        color-mix(in srgb, var(--card-bg) 70%, transparent),
        transparent
    );
    animation: rr-shimmer 1.4s infinite;
}

[dir="rtl"] .sk-line::after,
[dir="rtl"] .sk-block::after { animation-name: rr-shimmer-rtl; }

@keyframes rr-shimmer { 100% { transform: translateX(100%); } }
@keyframes rr-shimmer-rtl { 100% { transform: translateX(-100%); } 0% { transform: translateX(100%); } }

.rr-sk-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px;
    background: var(--card-bg);
    border: 1px solid var(--card-bdr);
    border-radius: 14px;
}
.rr-sk-table-row {
    display: flex;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--card-bdr);
}
.rr-sk-table-row > * { flex: 1; }

/* ============================================================
   SearchInput
   ============================================================ */
.rr-search-input { position: relative; display: flex; align-items: center; }

.rr-search-input .form-control {
    padding-inline-start: 36px;
    padding-inline-end: 32px;
}

.rr-search-icon {
    position: absolute;
    inset-inline-start: 12px;
    color: var(--t3);
    pointer-events: none;
    font-size: 14px;
}

.rr-search-clear {
    position: absolute;
    inset-inline-end: 8px;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: none;
    background: transparent;
    color: var(--t3);
    cursor: pointer;
    border-radius: 4px;
    font-size: 12px;
}
.rr-search-clear:hover { background: var(--body-bg); color: var(--t1); }

/* ============================================================
   Toasts
   ============================================================ */
.rr-toast-container {
    position: fixed;
    top: 18px;
    inset-inline-end: 18px;
    z-index: 1300;   /* MOVE-ACCOUNT-HF: فوق الدرج (1095)/المودال — كانت 1080 فتُغطّى */
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 360px;
    max-width: calc(100vw - 36px);
    pointer-events: none;
}

.rr-toast {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 14px 16px;
    background: var(--card-bg);
    border: 1px solid var(--card-bdr);
    border-inline-start: 4px solid var(--t3);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
    overflow: hidden;
    pointer-events: auto;
    animation: rr-toast-in .25s ease;
}

@keyframes rr-toast-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.rr-toast-icon { font-size: 20px; line-height: 1.3; flex-shrink: 0; }
.rr-toast-content { flex: 1; min-width: 0; }
.rr-toast-title { font-weight: 700; color: var(--t1); font-size: var(--fs-body); }
.rr-toast-message { color: var(--t2); font-size: var(--fs-small); margin-top: 2px; word-wrap: break-word; }

.rr-toast-close {
    border: none;
    background: transparent;
    color: var(--t3);
    cursor: pointer;
    font-size: 13px;
    padding: 2px;
    flex-shrink: 0;
}
.rr-toast-close:hover { color: var(--t1); }

.rr-toast-progress {
    position: absolute;
    bottom: 0;
    inset-inline-start: 0;
    height: 3px;
    width: 100%;
    transform-origin: inline-start;
    animation: rr-toast-progress linear forwards;
}
@keyframes rr-toast-progress { from { transform: scaleX(1); } to { transform: scaleX(0); } }

.rr-toast-success { border-inline-start-color: var(--ok); }
.rr-toast-success .rr-toast-icon { color: var(--ok); }
.rr-toast-success .rr-toast-progress { background: var(--ok); }

.rr-toast-error { border-inline-start-color: var(--err); }
.rr-toast-error .rr-toast-icon { color: var(--err); }
.rr-toast-error .rr-toast-progress { background: var(--err); }

.rr-toast-warning { border-inline-start-color: var(--warn); }
.rr-toast-warning .rr-toast-icon { color: var(--warn); }
.rr-toast-warning .rr-toast-progress { background: var(--warn); }

.rr-toast-info { border-inline-start-color: var(--info); }
.rr-toast-info .rr-toast-icon { color: var(--info); }
.rr-toast-info .rr-toast-progress { background: var(--info); }

/* ============================================================
   ConfirmModal
   ============================================================ */
.rr-modal-backdrop {
    position: fixed;
    inset: 0;
    /* J-PERIOD-CLOSE-FIX: رُفِع من 1090 إلى 1100 ليظهر modal التأكيد فوق
       rr-drawer-backdrop (1095) — كان التأكيد يظهر خلف درج فحص الجاهزية. */
    z-index: 1100;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(0, 0, 0, .5);
    animation: rr-fade-in .2s ease;
}
@keyframes rr-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ⚠️ MODAL-SIBLING-FIX (بلاغ طه: «المودال يبدو خلف الخلفية الشفافة»)
   خمس شاشات تكتب الخلفية والمودال **شقيقين** لا متداخلين:

       <div class="rr-modal-backdrop" @onclick="Close"></div>
       <div class="rr-modal">…</div>

   والخلفية z-index:1100 بينما المودال بلا z-index ⇒ يقع **خلفها**
   فيُرى باهتاً ولا يُنقر. (النمط الصحيح يضع المودال داخل الخلفية،
   فيرثه ويظهر فوقها.)

   العلاج هنا لا في الملفات الخمسة: قاعدةٌ واحدة تجعل كل .rr-modal
   فوق الخلفية أياً كان موضعه في الشجرة — فلا يتكرّر العطب في شاشةٍ
   سادسة تُكتب غداً بالنمط نفسه.

   الشاشات المتأثرة: StockTake · Kitchens · Tables/Map ·
   Pos/PaymentPanel · Pos/CustomizationModal */

/* ⚠️ FA-CONTRA-1 (بلاغ طه): overflow:hidden كان يقصّ القوائم المنسدلة
   عند حدّ المودال — تنقطع الخيارات مع نهايته فلا تُقرأ ولا تُختار.
   clip-path مع border-radius يحفظ الزوايا المستديرة بلا قصّ الأبناء. */
/* ⚠️ MODAL-SIBLING-FIX-2 (بلاغ طه: «المودال يظهر في الزاوية»):
   خمس شاشات تكتب الخلفية والمودال **شقيقين** لا متداخلين، فلا يطاله
   توسيط الخلفية (place-items:center) ولا ترتيبها — يسقط أسفل الصفحة
   وخلفها.

   العلاج: تثبيت المودال بنفسه وتوسيطه بـ translate، فيقع وسط الشاشة
   سواء كُتب داخل الخلفية أو شقيقاً لها. قاعدةٌ واحدة تُصلح النمطين —
   والشاشة السادسة التي تُكتب غداً تعمل بلا تدخّل.

   ⚠️ والحركة أُعيدت كتابتها: كانت تنتهي عند transform:translateY(0)
   فتمحو التوسيط بعد ربع ثانية — المودال يظهر وسط الشاشة ثم يقفز. */
.rr-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    width: calc(100% - 40px);
    max-width: 440px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    z-index: 1101;
    background: var(--card-bg);
    border: 1px solid var(--card-bdr);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
    animation: rr-modal-in .25s ease;
    transform: translate(-50%, -50%);
}
@keyframes rr-modal-in {
    from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)) scale(.98); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* الرأس والذيل يقصّان زواياهما وحدهما بعد رفع overflow عن الحاوية. */
.rr-modal-header {
    border-radius: 14px 14px 0 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px 0;
}

.rr-modal-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 22px;
    flex-shrink: 0;
}
.rr-modal-icon-info    { background: color-mix(in srgb, var(--info) 15%, transparent); color: var(--info); }
.rr-modal-icon-success { background: color-mix(in srgb, var(--ok) 15%, transparent);   color: var(--ok); }
.rr-modal-icon-warning { background: color-mix(in srgb, var(--warn) 15%, transparent); color: var(--warn); }
.rr-modal-icon-danger  { background: color-mix(in srgb, var(--err) 15%, transparent);  color: var(--err); }

.rr-modal-title { font-size: var(--fs-h3); font-weight: 700; color: var(--t1); flex: 1; }

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

.rr-modal-body { padding: 12px 20px 20px; }
.rr-modal-message { color: var(--t2); font-size: var(--fs-body); line-height: 1.6; }

.rr-modal-typed-label { display: block; margin-top: 14px; margin-bottom: 6px; font-size: var(--fs-small); color: var(--t2); }

.rr-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 0 20px 20px;
}

.rr-btn-confirm-info    { background: var(--info); color: #fff; }
.rr-btn-confirm-success { background: var(--ok);   color: #fff; }
.rr-btn-confirm-warning { background: var(--warn); color: #fff; }
.rr-btn-confirm-danger  { background: var(--err);  color: #fff; }
.rr-btn-confirm:hover:not(:disabled) { filter: brightness(1.07); }
.rr-btn-confirm:disabled { opacity: .55; cursor: not-allowed; }

/* ============================================================
   Charts
   ============================================================ */
.chart-rr {
    width: 100%;
    background: var(--card-bg);
    border: 1px solid var(--card-bdr);
    border-radius: 14px;
    padding: 14px;
}
.chart-rr-canvas { width: 100%; }

/* ============================================================
   Dashboard Layout (UAT G-7) — طبقة تخطيط اللوحات
   ------------------------------------------------------------
   كانت كلاسات التخطيط (dash-*, kpi-grid) مستخدمة في الـ razor
   بلا قواعد CSS، فظهرت الكروت متراكمة عمودياً. هذه الطبقة تضيف
   شبكة متجاوبة، رأساً أنيقاً، وحاويات بطاقات — بالمتغيّرات الموجودة
   و logical properties (RTL/LTR) للاتساق التام مع باقي النظام.
   ============================================================ */

/* الحاوية الجذر — تباعد رأسي منتظم بين الأقسام */
.dash {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-block: 4px 32px;
    padding-inline: 4px;
}

/* ── رأس اللوحة (ترحيب + شارة الدور + إجراءات) ── */
.dash-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-block-end: 4px;
    border-block-end: 1px solid var(--card-bdr);
}

.dash-title {
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 800;
    color: var(--t1);
    line-height: 1.2;
    margin: 0;
}

.dash-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-block-start: 6px;
    padding: 3px 12px;
    font-size: var(--fs-small);
    font-weight: 700;
    color: var(--p);
    background: var(--p-light);
    border-radius: 999px;
}

.dash-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ── شبكة بطاقات KPI — متجاوبة auto-fit ── */
.kpi-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* أعمدة ثابتة على الشاشات الواسعة (مع انهيار متجاوب) */
@media (min-width: 992px) {
    .kpi-grid-3 { grid-template-columns: repeat(3, 1fr); }
    .kpi-grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ── حاوية بطاقة محتوى (جداول/أقسام) ── */
.dash-card {
    background: var(--card-bg);
    border: 1px solid var(--card-bdr);
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
    transition: box-shadow var(--tr);
}

.dash-card:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, .06); }

.dash-card-title {
    font-size: var(--fs-h3);
    font-weight: 700;
    color: var(--t1);
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* شريط لوني صغير قبل عنوان القسم (لمسة بصرية) */
.dash-card-title::before {
    content: "";
    inline-size: 4px;
    block-size: 20px;
    border-radius: 4px;
    background: var(--p);
}

/* ── صف الرسوم البيانية (عمودان يتجاوبان لعمود) ── */
.dash-charts-row {
    display: grid;
    gap: 18px;
    grid-template-columns: 1fr;
}

@media (min-width: 992px) {
    .dash-charts-row { grid-template-columns: repeat(2, 1fr); }
}

/* أنماط خاصة بلوحات بعينها (هوية بصرية خفيفة) */
.dash-employee .dash-title,
.dash-executive .dash-title { letter-spacing: -0.01em; }

/* ============================================================
   UI-FIX-1 — محاذاة عناصر صفّ الفلاتر الأفقي (align-items-end)
   ------------------------------------------------------------
   الجذر: .rr-field فيه margin-bottom:16px (مطلوب للنماذج العمودية)
   لكنه يكسر align-items-end في الصفوف الأفقية. الحل مقصور على
   .row.align-items-end حتى لا يمسّ النماذج العمودية المتراصّة.
   ============================================================ */
.row.align-items-end > [class*="col"] > .rr-field {
    margin-bottom: 0;
}
.row.align-items-end > [class*="col"] {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.row.align-items-end > [class*="col"] > .btn {
    align-self: stretch;
}
.row.align-items-end > [class*="col"] > .rr-field-checkbox {
    margin-bottom: 0;
    justify-content: flex-end;
}

/* J-ASSET-UI-FIX: modal أوسع للنماذج ذات الصفوف (الفئات) */
.rr-modal.rr-modal-wide {
    max-width: 720px;
    max-height: 90vh;
    overflow-y: auto;
}

/* ============================================================
   J-INV-FILTERS-INLINE: شريط فلاتر أفقي مشترك (كان غير معرّف فيظهر
   عموديّاً). يُستخدم في تقارير المخزون والوصفات والمطابخ. الحقول تتوزّع
   في صف واحد بعرض متساوٍ، وتنهار عموديّاً على الشاشات الصغيرة.
   ============================================================ */
.rr-inline-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
.rr-inline-filters > .form-select,
.rr-inline-filters > .form-control {
    flex: 1 1 180px;
    min-width: 160px;
}
@media (max-width: 575.98px) {
    .rr-inline-filters > .form-select,
    .rr-inline-filters > .form-control {
        flex-basis: 100%;
    }
}

/* J-STOCKTAKE-FILTERS-FIX: داخل شريط أدوات DataTable تكون الحاوية ضيّقة
   (toolbar-actions بـ margin-inline-start:auto)، فالنمو (flex-grow) + wrap
   يكسر الفلاتر رأسيّاً. هنا نثبّت عرضها ونمنع الالتفاف لتبقى في صف أفقي. */
.rr-dt-toolbar-actions .rr-inline-filters {
    flex-wrap: nowrap;
}
.rr-dt-toolbar-actions .rr-inline-filters > .form-select,
.rr-dt-toolbar-actions .rr-inline-filters > .form-control {
    flex: 0 0 auto;
    min-width: 150px;
}

/* ============================================================
   TABLE-UNIFY-2 (قرار طه 2026-07-18): تحسينات عامّة لكل الجداول
   — بما فيها الجدول المعياري (dtbl) — padding أخفّ + ارتفاع أزرار موحّد.
   ============================================================ */
.btn, .touchable {
    min-height: 30px;
    min-width: 40px;
}
.dtbl tbody td {
    padding: .3rem .8rem !important;
}

/* ============================================================
   TABLE-UNIFY-3: توحيد نظام rr-table (18 صفحة) — كان بلا CSS مخصّص
   (يرث بوتستراب .table). نمنحه هيدر خفيف يتبع الثيم + خطوط + padding،
   مطابقاً للمعيار (dtbl/rr-dt-table).
   ============================================================ */
.rr-table thead th {
    background: var(--p-light);
    color: var(--p);
    font-weight: 700;
    text-align: start;
    padding: .3rem .8rem;
    border-bottom: 2px solid var(--card-bdr);
    border-inline-start: 1px solid var(--card-bdr);
    white-space: nowrap;
}
.rr-table thead th:first-child { border-inline-start: none; }

.rr-table tbody td {
    padding: .3rem .8rem;
    border-bottom: 1px solid var(--card-bdr);
    border-inline-start: 1px solid var(--card-bdr);
    color: var(--t1);
    vertical-align: middle;
}
.rr-table tbody td:first-child { border-inline-start: none; }
.rr-table tbody tr:hover { background: var(--body-bg); }

/* ============================================================
   TABLE-UNIFY-4: صنف rr-utbl (unified table) — موجّه.
   يُطبَّق يدويّاً على جداول بوتستراب الخام (.table table-hover/sm…)
   لتوحيدها مع المعيار، بلا لمس .table العامّ (فاليوميتان وأيّ جدول
   حسّاس يسلَمان — نطاق مضبوط تماماً).
   الاستعمال: <table class="table rr-utbl ...">
   ============================================================ */
.rr-utbl {
    background: var(--card-bg);   /* TABLE-UNIFY-4b: خلفية بيضاء لا شفّافة */
}
.rr-utbl thead th {
    background: var(--p-light);
    color: var(--p);
    font-weight: 700;
    text-align: start;
    padding: .55rem .9rem;   /* TABLE-UNIFY-4b: padding أكبر لـ rr-utbl */
    border-bottom: 2px solid var(--card-bdr);
    border-inline-start: 1px solid var(--card-bdr);
    white-space: nowrap;
    vertical-align: middle;
}
.rr-utbl thead th:first-child { border-inline-start: none; }

.rr-utbl tbody td {
    padding: .55rem .9rem;   /* TABLE-UNIFY-4b: padding أكبر */
    border-bottom: 1px solid var(--card-bdr);
    border-inline-start: 1px solid var(--card-bdr);
    color: var(--t1);
    vertical-align: middle;
    background: var(--card-bg);   /* خلفية بيضاء */
}
.rr-utbl tbody td:first-child { border-inline-start: none; }
.rr-utbl tbody tr:hover td { background: var(--body-bg); }

/* ============================================================
   LINE-UI-FIX — حقول الإدخال داخل خلايا جداول الأسطر
   ============================================================
   .rr-field يحمل margin-bottom:16px (مناسب في النماذج العمودية،
   لكنه هامش ميت داخل خلية جدول يجعل كل سطر أطول بلا داعٍ).
   ============================================================ */
.rr-utbl td .rr-field,
.dtbl td .rr-field {
    margin-bottom: 0;
}

/* أرقام (كمية/سعر/مبلغ) تُقرأ من اليمين — محاذاة النهاية أسهل للمقارنة
   بين الأسطر، وتعمل في RTL وLTR معاً عبر text-align:end. */
.rr-line-num .form-control {
    text-align: end;
}

/* ============================================================
   LINE-ALIGN-FIX — تلميح تحت حقل داخل خليّة جدول
   ============================================================
   مع align-top تبقى كل مربّعات الإدخال على خطّ واحد، ويُدلّى التلميح
   أسفل خليّته. نُضيّق مقاسه وتباعده كي لا يُطيل الصفّ أكثر من اللازم.
   ============================================================ */
.rr-utbl td .rr-field-hint,
.dtbl td .rr-field-hint {
    margin-top: 3px;
    font-size: 0.72rem;
    line-height: 1.25;
}

/* ═══════════════ ATT-GRID: شبكة الحضور الشهريّة ═══════════════
   موظّفون × أيّام. الخانات مربّعة صغيرة ليتّسع الشهر كاملاً على
   شاشة واحدة بلا تمرير أفقيّ مفرط.
   ⚠️ ألوان من متغيّرات الثيم (--ok/--warn/--danger) — تتبدّل مع
      الثيمات الأربعة تلقائيّاً. */

.att-grid { table-layout: auto; }

.att-grid .att-emp-col {
    position: sticky;
    inset-inline-start: 0;
    background: var(--surface);
    z-index: 2;
    min-width: 11rem;
    white-space: nowrap;
}

.att-grid .att-day-head {
    padding: .25rem .15rem;
    text-align: center;
    font-size: .72rem;
    font-weight: 600;
    min-width: 1.6rem;
}

.att-grid .att-day {
    padding: .15rem;
    text-align: center;
}

.att-grid .att-weekend { background: color-mix(in srgb, var(--muted) 8%, transparent); }

.att-grid .att-sum-col {
    text-align: center;
    white-space: nowrap;
    min-width: 4.5rem;
}

.att-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border: 0;
    border-radius: .25rem;
    font-size: .7rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.att-cell.att-ok {
    background: color-mix(in srgb, var(--ok) 18%, transparent);
    color: var(--ok);
}

.att-cell.att-late {
    /* ⚠️ ACC-HINT-STATE-1: كان --danger وهو **غير معرَّف** — فخليّة
       «متأخّر» كانت بلا لونٍ إطلاقاً. عطبٌ سابقٌ كشفه فحصُ المتغيّرات.
       والجارة att-ok تستعمل --ok صحيحاً. */
    background: color-mix(in srgb, var(--err) 18%, transparent);
    color: var(--err);
}

.att-cell.att-open {
    background: color-mix(in srgb, var(--warn) 22%, transparent);
    color: var(--warn);
}

.att-cell.att-absent {
    background: color-mix(in srgb, var(--muted) 22%, transparent);
    color: var(--muted);
}

/* ⚠️ ATT-GRID-FIX: اليوم بلا سجلّ يجب أن يكون **مرئيّاً** لا شبه غائب —
   الغياب معلومة لا فراغ. (بلاغ طه: «ليس من المنطق أن يُخفى الغياب».) */
.att-cell.att-none {
    background: color-mix(in srgb, var(--muted) 10%, transparent);
    color: var(--muted);
    cursor: default;
    opacity: .7;
}

.att-cell:focus-visible { outline: 2px solid var(--p); outline-offset: 1px; }

/* ═══════════════════════════════════════════════════════════════════
   HINT-BOX (بلاغ طه): شرح الحقل داخل صندوق خفيف بدل نصٍّ رماديّ عائم.

   🔑 اللون من --info عبر color-mix ⇒ يتبع الثيم الذي يختاره المستخدم
      تلقائيّاً (أربعة ثيمات + dark mode)، بلا قيمةٍ صريحة واحدة.

   ⚠️ 6% لا 14%: هذا **تلميح** لا تنبيه. الـalert القائم في نفس الصفحة
      (ملاحظة تقسيم البدلات) أبرز عمداً — تلميحٌ يشرح ≠ تنبيهٌ يحذّر،
      وتوحيدهما كان يُلغي التمييز الذي يقرأه المستخدم بلمحة.

   ⚠️ ولا حدود ملوّنة: الحدّ يجعله ينافس الحقل نفسه في جذب النظر.
   ═══════════════════════════════════════════════════════════════════ */
.rr-hint {
    margin-top: .375rem;
    padding: .4rem .6rem;
    font-size: .8125rem;
    line-height: 1.55;
    color: var(--muted);
    background: color-mix(in srgb, var(--info) 6%, transparent);
    border-radius: .375rem;
    display: flex;
    align-items: flex-start;
    gap: .4rem;
}

/* الأيقونة لا تتمدّد ولا تنكمش مع النصّ الطويل. */
.rr-hint > i {
    flex: 0 0 auto;
    margin-top: .15rem;
    color: var(--info);
    opacity: .85;
}

/* ── ACC-HINT-UNSET: حسابٌ لم يُضبط بعد ──
   تذكيرٌ لا خطأ: الحقل قد يكون اختياريّاً عمداً (الحساب المعلّق للمقاولات
   مثلاً). فالإطار يلفت النظر ولا يمنع الحفظ ولا يُلوّن الحقل نفسه.
   الألوان من متغيّرات الثيم فتتبدّل مع الوضع الليليّ. */
.rr-hint.rr-hint-unset {
    /* 🔴 ACC-HINT-STATE-1 (بلاغ طه): «يجب أن تكون خلفية نصف وصف الإعداد
       الذي لم يتم إعداده بلون أحمر باهت أو خفيف… والذي تمّ إعداده بأخضر
       باهت خفيف».

       ⚠️ وكانت 6% — أضعفُ من أن تُرى (‏لقطةُ طه تُثبته: أيقونةُ تعجّبٍ
         بلا لونٍ محسوس). فرُفعت إلى 12%: تُلاحَظ ولا تصرخ. */
    /* 🔴 والمتغيّر --err لا --danger: الأخير **غير معرَّف** في themes.css،
       فكان color-mix يفشل والخلفيّةُ تختفي تماماً. وهو سببُ ما رآه طه:
       أيقونةُ تعجّبٍ بلا لون. والثيم يُعرّف --ok · --err · --info · --warn. */
    border: 1px solid color-mix(in srgb, var(--err) 45%, transparent);
    background: color-mix(in srgb, var(--err) 12%, transparent);
}

.rr-hint.rr-hint-unset > i {
    color: var(--err);
    opacity: 1;
}

/* ── ACC-HINT-SET: حسابٌ مضبوط ──
   🔑 والتأكيد الإيجابيّ لا يقلّ نفعاً عن التحذير: الأخضر يقول «هذا تمّ»،
   فيمسح المستخدم الصفحة بصريّاً ويعرف ما بقي — بدل قراءة كلّ حقل.

   ⚠️ وأخفّ من الأحمر (8% لا 12%): الحالة الطبيعيّة لا تُنافس التي تحتاج
     عملاً. ولا حدّ لها — الحدّ يجعل الصفحة كلّها مؤطَّرة فيضيع التمييز. */
.rr-hint.rr-hint-set {
    background: color-mix(in srgb, var(--ok) 8%, transparent);
}

.rr-hint.rr-hint-set > i {
    color: var(--ok);
    opacity: 1;
}

/* ============================================================
   🆕 FORM-DESIGN-1 (J-77): أنماط نماذج الإدخال الكثيفة.
   ============================================================
   المشكلة التي تعالجها: نموذج الصنف كان **حقولاً على شبكة** — كلّ
   حقلٍ بوزنٍ بصريّ واحد، وبلا ما يقول أيّها يرتبط بأيّ.

   🔑 والفكرة: النموذج يُظهر **العلاقات** لا يجمع قيماً.
     • الوحدات الثلاث **سلسلة تحويل** لا خمسة صناديق
     • الحدود الثلاثة **نقاطٌ على مقياس** تصاعديّ
     • حجم العبوة ووحدته **مفهومٌ واحد** لا حقلان
   ============================================================ */

/* ─── عنوان القسم: كان <h6> بلا نمط إطلاقاً ─── */
.rr-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 26px 0 14px;
    font-size: var(--fs-small);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--t2);
}

/* الخطّ الممتدّ يفصل الأقسام بلا وزنٍ بصريّ ثقيل. */
.rr-section-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--card-bdr);
}

.rr-section-title:first-of-type { margin-top: 4px; }

/* ─── سلسلة التحويل: العنصر المميِّز ───
   ⚠️ المعاملات **بين** الوحدات لا بجانبها: `كرتون ← ١٢ ← علبة`.
      فالرقم مضروبٌ لا حقلٌ مستقلّ، والعرض يقول ذلك. */
.rr-unit-chain {
    display: flex;
    align-items: flex-start;
    gap: 0;
    flex-wrap: wrap;
}

.rr-unit-chain > .rr-chain-unit { flex: 1 1 140px; min-width: 120px; }

/* المعامل أضيق ومنخفض الوزن — وسيطٌ لا طرف. */
.rr-unit-chain > .rr-chain-factor { flex: 0 0 92px; }

.rr-unit-chain > .rr-chain-factor .form-control {
    text-align: center;
    background: var(--p-light);
    border-color: var(--p-light);
    font-weight: 600;
}

.rr-unit-chain > .rr-chain-factor .rr-field-label {
    text-align: center;
    color: var(--t3);
    font-weight: 500;
}

/* السهم يحمل اتّجاه القراءة — يُقلَب في RTL تلقائيّاً برمز مختلف. */
.rr-chain-arrow {
    flex: 0 0 22px;
    align-self: center;
    margin-top: 10px;
    text-align: center;
    color: var(--t3);
    font-size: 15px;
    user-select: none;
}

/* ─── جملة المعاينة: أهمّ ما في القسم ───
   🔑 تقول للمستخدم فوراً إن كانت المعاملات صحيحة — قبل الحفظ. */
.rr-chain-preview {
    margin-top: 10px;
    padding: 9px 13px;
    border-inline-start: 3px solid var(--p-mid);
    background: var(--p-light);
    border-radius: 0 6px 6px 0;
    font-size: var(--fs-small);
    color: var(--t1);
}

[dir="rtl"] .rr-chain-preview { border-radius: 6px 0 0 6px; }

.rr-chain-preview b { font-weight: 700; }

.rr-chain-preview.is-empty {
    border-inline-start-color: var(--card-bdr);
    background: transparent;
    color: var(--t3);
}

/* ─── مجموعة الحقل الملتصق: قيمة + وحدة كمفهومٍ واحد ─── */
.rr-joined { display: flex; align-items: flex-end; gap: 0; }
.rr-joined > * { flex: 1 1 auto; }

.rr-joined > *:first-child .form-control,
.rr-joined > *:first-child .form-select {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

.rr-joined > *:last-child .form-control,
.rr-joined > *:last-child .form-select {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    margin-inline-start: -1px;
}

/* ─── مقياس الحدود: يُظهر التصاعد min ≤ reorder ≤ max ─── */
.rr-threshold-scale {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    font-size: var(--fs-small);
    color: var(--t3);
}

.rr-threshold-scale::before,
.rr-threshold-scale::after {
    content: "";
    height: 2px;
    border-radius: 2px;
}

.rr-threshold-scale::before { flex: 1; background: linear-gradient(to left, var(--warn, #f59e0b), var(--err)); }
.rr-threshold-scale::after  { flex: 1; background: linear-gradient(to left, var(--p-mid), var(--warn, #f59e0b)); }

@media (max-width: 767.98px) {
    .rr-unit-chain > .rr-chain-factor { flex: 0 0 76px; }
    .rr-chain-arrow { flex: 0 0 16px; }
}