/* ═══════════════════════════════════════════════════════════════════════
   record-page.css — شاشات السجل المستقلة: الإضافة والتعديل وعرض التفاصيل.

   النوافذ المنبثقة كانت تحبس النموذج في صندوق ضيق يتمرّر داخل تمرير،
   فتضيع الحقول ولا يبقى مكان لسياق يشرح أثر ما يُكتب. الشاشة المستقلة
   تعطي النموذج عرض الصفحة، وعمودا جانبيا يقول للمستخدم ماذا يترتب على
   ما يكتبه، وشريطا علويا لاصقا يبقي زرّ الحفظ في المتناول مهما طال النزول.

   البادئة rc- (record). تعمل داخل .ui-container مثل بقية شاشات الإدارة.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    --rc-ink: #0f172a;
    --rc-mut: #64748b;
    --rc-faint: #94a3b8;
    --rc-line: #e6ebf1;
    --rc-hair: #f1f5f9;
    --rc-ground: #f7f9fc;
    --rc-surface: #ffffff;
    --rc-accent: #1d4ed8;
    --rc-accent-soft: #eff6ff;
    --rc-ok: #059669;
    --rc-ok-soft: #ecfdf5;
    --rc-warn: #b45309;
    --rc-warn-soft: #fffbeb;
    --rc-bad: #dc2626;
    --rc-bad-soft: #fef2f2;
}

/* ─────────── عرض الصفحة ───────────
   contract-management.css يحدّ كل .ui-container بـ1200px ويُحمَّل بعد الجميع،
   فكانت شاشات السجل تطفو في عمود ضيّق وسط فراغ. هذا الانتقاء أعلى تخصيصا
   فيغلبه بلا حاجة إلى ترتيب تحميل، والمحتوى يمتدّ بعرض الشاشة بهامش معقول. */
.ui-container.rc-page {
    max-width: none;
    padding-inline: 1.25rem;
}

/* ─────────── الشريط العلوي: يلاصق أعلى الشاشة فيبقى الحفظ قريبا ─────────── */
.rc-bar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: .85rem;
    flex-wrap: wrap;
    padding: .8rem 1.1rem;
    margin: 0 0 1.15rem;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(10px);
    border: 1px solid var(--rc-line);
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .05);
}

.rc-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border-radius: 10px;
    background: var(--rc-hair);
    color: var(--rc-mut);
    border: 0;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, color .15s;
}

.rc-back:hover { background: var(--rc-accent-soft); color: var(--rc-accent); }

.rc-bar__id { min-width: 0; flex: 1 1 260px; }

.rc-bar__crumb {
    font-size: .72rem;
    font-weight: 700;
    color: var(--rc-faint);
    letter-spacing: .02em;
}

.rc-bar__crumb a { color: inherit; text-decoration: none; }
.rc-bar__crumb a:hover { color: var(--rc-accent); }

.rc-bar h1 {
    margin: .1rem 0 0;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--rc-ink);
    line-height: 1.25;
    text-wrap: balance;
    overflow-wrap: anywhere;
}

.rc-bar h1 .rc-bar__sub {
    font-size: .85rem;
    font-weight: 600;
    color: var(--rc-mut);
}

.rc-bar__end {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-inline-start: auto;
}

/* ─────────── التوزيع: نموذج وسياق يرافقه ─────────── */
.rc-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(300px, 22vw, 380px);
    gap: 1.25rem;
    align-items: start;
}

.rc-main { min-width: 0; display: flex; flex-direction: column; gap: 1.15rem; }
.rc-aside { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 1rem; }

@media (max-width: 1100px) {
    .rc-grid { grid-template-columns: 1fr; }
    .rc-aside { position: static; }
}

/* ─────────── البطاقات ─────────── */
.rc-card {
    background: var(--rc-surface);
    border: 1px solid var(--rc-line);
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .04);
    overflow: hidden;
}

.rc-card__h {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .8rem 1.1rem;
    border-bottom: 1px solid var(--rc-hair);
    background: linear-gradient(180deg, #fcfdff, #f8fafc);
}

.rc-card__h i, .rc-card__h .bi { color: var(--rc-accent); font-size: 1rem; }

.rc-card__h h2 {
    margin: 0;
    font-size: .95rem;
    font-weight: 800;
    color: var(--rc-ink);
}

.rc-card__h small {
    font-size: .74rem;
    font-weight: 600;
    color: var(--rc-faint);
}

.rc-card__h .rc-card__end { margin-inline-start: auto; display: flex; gap: .4rem; align-items: center; }

.rc-card__b { padding: 1.1rem; }

/* ─────────── الحقول ───────────
   كان التوزيع شبكة auto-fit، لكن وجود حقل بعرض الصف (rc-f--wide) يمنع
   المسارات الفارغة من الانطواء، فبطاقة فيها حقلان تترك ثلث الصف فراغا.
   المرونة توزّع ما فضل على حقول السطر نفسه، فيمتلئ الصف دائما مهما كان عددها. */
.rc-fields {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem 1rem;
}

.rc-f { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.rc-f--wide { flex-basis: 100%; }

.rc-lbl {
    font-size: .76rem;
    font-weight: 700;
    color: var(--rc-mut);
    display: flex;
    align-items: center;
    gap: .3rem;
}

.rc-lbl .rc-req { color: var(--rc-bad); font-weight: 800; }

.rc-f .ui-input,
.rc-f .ui-select,
.rc-f textarea,
.rc-f input[type="text"],
.rc-f input[type="number"],
.rc-f input[type="date"],
.rc-f input[type="email"] {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--rc-line);
    border-radius: 10px;
    padding: .5rem .75rem;
    font-size: .92rem;
    color: var(--rc-ink);
    background: var(--rc-surface);
    transition: border-color .15s, box-shadow .15s;
}

.rc-f textarea { min-height: 92px; resize: vertical; line-height: 1.6; }

.rc-f .ui-input:focus,
.rc-f textarea:focus,
.rc-f input:focus {
    outline: none;
    border-color: var(--rc-accent);
    box-shadow: 0 0 0 3px rgba(29, 78, 216, .12);
}

.rc-hint { font-size: .72rem; color: var(--rc-faint); line-height: 1.5; }

/* مفتاح الحالة: الشكل يقول التشغيل قبل أن يقرأ المستخدم الكلمة */
.rc-switch {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .5rem .8rem;
    border: 1px solid var(--rc-line);
    border-radius: 10px;
    background: var(--rc-ground);
    cursor: pointer;
    min-height: 42px;
}

.rc-switch input { width: 2.4rem; height: 1.25rem; margin: 0; cursor: pointer; }
.rc-switch span { font-size: .88rem; font-weight: 700; color: var(--rc-ink); }

/* ─────────── التنبيهات داخل الصفحة ─────────── */
.rc-alert {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .7rem .9rem;
    border-radius: 11px;
    font-size: .86rem;
    font-weight: 600;
    line-height: 1.6;
    border: 1px solid transparent;
}

.rc-alert--bad { background: var(--rc-bad-soft); color: #991b1b; border-color: #fecaca; }
.rc-alert--ok { background: var(--rc-ok-soft); color: #065f46; border-color: #a7f3d0; }
.rc-alert--warn { background: var(--rc-warn-soft); color: #92400e; border-color: #fde68a; }
.rc-alert--info { background: var(--rc-accent-soft); color: #1e40af; border-color: #bfdbfe; }
.rc-alert .bi { font-size: 1.05rem; line-height: 1.5; flex: 0 0 auto; }

/* ─────────── العمود الجانبي ─────────── */
.rc-note {
    background: var(--rc-surface);
    border: 1px solid var(--rc-line);
    border-radius: 14px;
    padding: .95rem 1.05rem;
}

.rc-note h3 {
    margin: 0 0 .5rem;
    font-size: .82rem;
    font-weight: 800;
    color: var(--rc-ink);
    display: flex;
    align-items: center;
    gap: .4rem;
}

.rc-note h3 .bi { color: var(--rc-accent); }
.rc-note p { margin: 0 0 .5rem; font-size: .8rem; color: var(--rc-mut); line-height: 1.75; }
.rc-note p:last-child { margin-bottom: 0; }

.rc-note ul { margin: 0; padding-inline-start: 1.05rem; }
.rc-note li { font-size: .8rem; color: var(--rc-mut); line-height: 1.8; }

/* ─────────── شاشة التفاصيل ─────────── */
.rc-hero {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.2rem 1.3rem;
    background: linear-gradient(135deg, #0f172a, #1e3a8a);
    color: #fff;
    border-radius: 14px;
    margin-bottom: 1.15rem;
}

.rc-hero__ico {
    width: 54px;
    height: 54px;
    flex: 0 0 auto;
    border-radius: 14px;
    background: rgba(255, 255, 255, .13);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.rc-hero__id { min-width: 0; flex: 1 1 240px; }
.rc-hero__id h2 { margin: 0; font-size: 1.4rem; font-weight: 800; overflow-wrap: anywhere; }
.rc-hero__id p { margin: .2rem 0 0; font-size: .85rem; color: rgba(255, 255, 255, .72); }

.rc-hero__end { margin-inline-start: auto; display: flex; gap: .5rem; flex-wrap: wrap; }

.rc-kv {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
}

.rc-kv__i {
    flex: 1 1 210px;
    background: var(--rc-ground);
    border: 1px solid var(--rc-hair);
    border-radius: 11px;
    padding: .6rem .85rem;
    min-width: 0;
}

.rc-kv__i--wide { flex-basis: 100%; }

.rc-kv__i span {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    color: var(--rc-faint);
}

.rc-kv__i b {
    display: block;
    margin-top: .12rem;
    font-size: .95rem;
    font-weight: 700;
    color: var(--rc-ink);
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}

.rc-kv__i a { color: var(--rc-accent); text-decoration: none; }
.rc-kv__i a:hover { text-decoration: underline; }

/* أرقام ملخّصة: الرقم أولا لأنه ما يُقرأ */
.rc-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: .7rem;
}

.rc-stat {
    background: var(--rc-surface);
    border: 1px solid var(--rc-line);
    border-radius: 12px;
    padding: .75rem .9rem;
}

.rc-stat b {
    display: block;
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--rc-ink);
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.rc-stat span { display: block; font-size: .74rem; font-weight: 700; color: var(--rc-mut); margin-top: .12rem; }
.rc-stat small { display: block; font-size: .68rem; color: var(--rc-faint); margin-top: .1rem; }

/* شارات الحالة */
.rc-tag {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .18rem .65rem;
    border-radius: 99px;
    font-size: .75rem;
    font-weight: 800;
    line-height: 1.6;
}

.rc-tag--on { background: var(--rc-ok-soft); color: var(--rc-ok); }
.rc-tag--off { background: var(--rc-hair); color: var(--rc-mut); }
.rc-tag--warn { background: var(--rc-warn-soft); color: var(--rc-warn); }
.rc-tag--bad { background: var(--rc-bad-soft); color: var(--rc-bad); }
.rc-tag--info { background: var(--rc-accent-soft); color: var(--rc-accent); }

.rc-hero .rc-tag { background: rgba(255, 255, 255, .16); color: #fff; }

/* جدول مصغّر داخل بطاقة تفاصيل */
.rc-tbl { width: 100%; border-collapse: collapse; font-size: .86rem; }
.rc-tbl th {
    text-align: inherit;
    padding: .5rem .7rem;
    font-size: .73rem;
    font-weight: 800;
    color: var(--rc-mut);
    background: var(--rc-ground);
    border-bottom: 1px solid var(--rc-line);
    white-space: nowrap;
}
.rc-tbl td { padding: .55rem .7rem; border-bottom: 1px solid var(--rc-hair); color: var(--rc-ink); }
.rc-tbl tr:last-child td { border-bottom: 0; }
.rc-tbl .rc-num { font-variant-numeric: tabular-nums; font-weight: 700; }

.rc-empty {
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--rc-faint);
    font-size: .85rem;
}

.rc-empty .bi { display: block; font-size: 1.8rem; margin-bottom: .35rem; opacity: .5; }

/* ─────────── هيكل الانتظار: يرسم شكل الصفحة لا كلمة «جار التحميل» ─────────── */
.rc-skel { display: flex; flex-direction: column; gap: 1rem; }
.rc-skel__b {
    background: linear-gradient(90deg, #f1f5f9 25%, #e8eef5 37%, #f1f5f9 63%);
    background-size: 400% 100%;
    animation: rc-sh 1.3s ease-in-out infinite;
    border-radius: 12px;
}

@keyframes rc-sh { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

@media (prefers-reduced-motion: reduce) {
    .rc-skel__b { animation: none; }
}

/* ─────────── الطباعة: الشريط والأزرار لا تُطبع ─────────── */
@media print {
    .rc-bar, .rc-aside, .rc-hero__end { display: none !important; }
    .rc-grid { grid-template-columns: 1fr; }
    .rc-card { break-inside: avoid; box-shadow: none; }
}