﻿/* ============================================================
   ‏نماذج خدمات المواطنين الداخلية (معتمد 2026-09-19)

   ‏الصفحات الداخلية مستندات مستقلّة تُعرض داخل إطار، ومبنيّة على
   ‏جداول تخطيط من 2019 برؤوس بنّية وحقول بلا تنسيق. وإعادة كتابة
   ‏markup لأربع صفحاتٍ مجموعها ١٥٥٠ سطراً خطرٌ بلا داعٍ، فالتنسيق
   ‏هنا يستهدف البِنية القائمة كما هى: جدولٌ، وصفٌّ رأسٍ ملوَّن،
   ‏وحقولٌ داخل خلايا.

   ‏والنتيجة أنّ الصفحة تتبع هوية الموقع دون أن يُمَسّ منطقها.
============================================================ */

:root {
    --cs-primary:      #051d40;
    --cs-primary-dark: #03142d;
    --cs-gold:         #c19508;
    --cs-gold-dark:    #ae8100;
    --cs-bg:           #ffffff;
    --cs-surface-alt:  #faf6ee;
    --cs-border:       #e6dfd0;
    --cs-text:         #201f1e;
    --cs-muted:        #4d4d4d;
    --cs-subhead:      #faf6ee;
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--cs-bg);
    color: var(--cs-text);
    font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
    font-size: 14px;
    line-height: 1.9;
}

body > form,
body > div {
    padding: 1.2rem 1.35rem 1.6rem;
}

/* ‏الجداول كانت تُستعمل للتخطيط، فتُجعل مرنة بدل عرضٍ ثابت يقتصّ
   ‏النصّ على الشاشات الضيّقة — وهو ما كان يحدث فعلاً. */
table {
    width: 100% !important;
    max-width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}
td, th { padding: .4rem .5rem; vertical-align: middle; }

/* ‏العنوان التمهيدى: كان h2 بنّياً بحجم large */
h2, .auto-style8 {
    font-size: 1.05rem !important;
    font-weight: 700;
    color: var(--cs-primary) !important;
    line-height: 1.9;
    margin: 0 0 .9rem;
}

/* ‏أشرطة الأقسام: كانت خلفيةً بنّية بنصّ أبيض */
td[style*="background-color: #A96A3F"],
td[style*="background-color:#A96A3F"],
td[style*="background-color: #CC6600"],
td[style*="background-color:#CC6600"],
td[bgcolor="#CC6600"],
.header1 {
    background: var(--cs-primary) !important;
    color: #fff !important;
    font-weight: 700;
    border-bottom: 2px solid var(--cs-gold);
    border-radius: 8px;
    padding: .55rem .9rem !important;
}
td[style*="background-color: #A96A3F"] *,
td[style*="background-color:#A96A3F"] *,
td[style*="background-color: #CC6600"] *,
td[style*="background-color:#CC6600"] * { color: #fff !important; }

/* ‏عناوين الحقول */
td[style*="color: #0000FF"],
td[style*="color:#0000FF"],
span[style*="color: #0000FF"] {
    color: var(--cs-primary) !important;
    font-weight: 600;
}

/* ‏الحقول */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea,
select {
    width: 100%;
    max-width: 320px;
    box-sizing: border-box;
    font-family: inherit;
    font-size: .9rem;
    color: var(--cs-text);
    background: #fff;
    border: 1px solid var(--cs-border);
    border-radius: 8px;
    padding: .45rem .7rem;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    border-color: var(--cs-gold);
    box-shadow: 0 0 0 3px rgba(193,149,8,.15);
}
textarea { max-width: 100%; min-height: 90px; line-height: 1.8; }

input[type="radio"], input[type="checkbox"] { accent-color: var(--cs-primary); margin-inline-end: .35rem; }

/* ‏الأزرار: كان زرّ الحفظ شريطاً رمادياً عريضاً */
input[type="submit"],
input[type="button"],
button {
    font-family: inherit;
    font-size: .92rem;
    font-weight: 700;
    color: #fff;
    background: var(--cs-primary);
    border: 1px solid var(--cs-gold);
    border-radius: 10px;
    padding: .5rem 1.6rem;
    min-width: 0 !important;
    width: auto !important;
    cursor: pointer;
    transition: background .2s, color .2s, transform .15s;
}
input[type="submit"]:hover,
input[type="button"]:hover,
button:hover {
    background: var(--cs-gold);
    color: #231b02;
    transform: translateY(-1px);
}
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
button:focus-visible { outline: 3px solid var(--cs-gold-dark); outline-offset: 2px; }

/* ‏رسائل التحقّق */
span[style*="color:Red"], span[style*="color: Red"], .val-msg {
    color: #c0392b !important;
    font-size: .82rem;
}

/* ‏شبكات العرض: نفس لغة بطاقات الموقع */
.grid1, table.grid1 {
    border: 1px solid var(--cs-border);
    border-radius: 10px;
    overflow: hidden;
}
.grid1 th, .header1 th { background: var(--cs-primary); color: #fff; }
.grid1 td { border-bottom: 1px solid var(--cs-border); }
.rows1 td { background: #fff; }
.Arows1 td { background: var(--cs-surface-alt); }

/* ‏على الشاشات الضيّقة: الجداول تُمرَّر أفقياً بدل أن تكسر الصفحة */
@media (max-width: 640px) {
    body > form, body > div { padding: .9rem; }
    table { display: block; overflow-x: auto; }
    input[type="text"], select, textarea { max-width: 100%; }
}

/* ‏الاتجاه: الصفحات الداخلية كانت ترث rtl من Content/Default.css المحذوف،
   ‏فبدونه تنقلب أعمدة الجدول وتقع العناوين فى الجهة الخطأ. والوسم dir
   ‏مضافٌ فى الصفحات نفسها، وهذا ضمانٌ ثانٍ. */
html, body { direction: rtl; text-align: right; }

/* ‏بقيّة ألوان 2019 فى المتن: أزرقان باهتان للرؤوس الفرعية، ورماديات
   ‏للتظليل. تُنقل إلى لوحة الموقع بدل تركها. */
td[style*="#66CCFF"],
td[style*="#BBDDFF"] {
    background: var(--cs-surface-alt) !important;
    color: var(--cs-primary) !important;
    font-weight: 700;
    border-inline-start: 3px solid var(--cs-gold);
}
td[style*="#F3F3F3"],
td[style*="#DDDDDD"],
td[style*="#DFDFDF"],
td[style*="#CCCCCC"],
td[style*="#C3C3C3"] {
    background: var(--cs-surface-alt) !important;
}
td[style*="#F7F5E8"],
td[style*="#E8E5D4"],
td[style*="#F3F2E7"] {
    background: #fff !important;
}

/* ‏النصوص البنّية المتبقّية داخل المتن */
[style*="color: #CC6600"], [style*="color:#CC6600"],
[style*="color: #A96A3F"], [style*="color:#A96A3F"] {
    color: var(--cs-primary) !important;
}

/* ‏فاصلٌ بين الأقسام كى لا تلتصق البطاقات */
td[style*="background-color: #A96A3F"],
td[style*="background-color:#A96A3F"] { margin-top: 1rem; }
