/* ============================================================
   Aljawadain — التنسيقات العامة
   الألوان والخطوط تُحقن كمتغيّرات CSS من قاعدة البيانات عبر
   المكوّن ThemeStyles، والقيم أدناه احتياطية فقط.
   ============================================================ */

:root {
    /* أزرق فيروزي + ذهبي (قيم احتياطية) */
    --aj-primary: #0f6073;
    --aj-primary-dark: #093d49;
    --aj-primary-light: #3d8999;
    --aj-secondary: #c19a45;
    --aj-secondary-light: #dda533;
    --aj-surface: #f8faf9;
    --aj-surface-alt: #e8eff0;
    --aj-text: #20292c;
    --aj-on-primary: #ffffff;
    --aj-on-secondary: #1b1f16;

    --aj-heading-font: "Kufam", serif;
    --aj-body-font: "Alexandria", sans-serif;
    --aj-base-font-size: 15px;
    --aj-nav-font-size: 15px;

    /* مشتقّات تتبع القالب تلقائياً في جميع الصفحات */
    --aj-muted: #657276;
    --aj-line: color-mix(in srgb, var(--aj-secondary) 32%, var(--aj-surface));
    --aj-card: color-mix(in srgb, var(--aj-surface) 92%, #ffffff);
    --aj-card-muted: var(--aj-surface-alt);

    /* ارتفاع شريط التنقل — تعتمد عليه الصورة الرئيسية لتمتد تحته */
    --aj-nav-height: 64px;

    /* نقشة الخلفية العامة — تُضبط من لوحة التحكم عبر ThemeStyles */
    --aj-bg-pattern: none;
    --aj-bg-pattern-opacity: 1;
    /* حجم البلاطة: يمنع تكبير الصور الكبيرة إلى بلاطة واحدة عملاقة. */
    --aj-bg-pattern-size: 420px;
    /* طبقة تخفيف الحدّة: شفافة تماماً افتراضياً (نقشة بكامل قوّتها). */
    --aj-bg-pattern-veil: transparent;
}

/* قبل التفاف الروابط ننتقل إلى قائمة متوسطة/صغيرة بارتفاع ثابت. */
@media (max-width: 1400px) {
    :root { --aj-nav-height: 58px; }
}

html {
    font-size: var(--aj-base-font-size);
}

html, body {
    font-family: var(--aj-body-font);
    color: var(--aj-text);
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* نقشة الخلفية العامة تُرسم على سطح الصفحة الجذري نفسه، فلا تعتمد على أي
   ترتيب طبقات أو عناصر وهمية، ولا يمكن لأي حاوية شفافة أن تحجبها.
   الحدّة تُخفَّف بطبقة من لون السطح فوق النقشة (--aj-bg-pattern-veil)
   بدل استخدام opacity، لأن opacity تحتاج عنصراً مستقلاً. */
html {
    background-color: var(--aj-surface);
    background-image:
        linear-gradient(var(--aj-bg-pattern-veil), var(--aj-bg-pattern-veil)),
        var(--aj-bg-pattern);
    background-repeat: repeat, repeat;
    background-position: top center, top center;
    background-size: auto, var(--aj-bg-pattern-size);
    background-attachment: fixed, fixed;
}

/* الجسم شفاف حتى تبقى نقشة السطح الجذري ظاهرة خلف كل الصفحات. */
body {
    background-color: transparent;
}

/* العناوين بخط Kufam */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--aj-heading-font);
    color: var(--aj-primary);
    font-weight: 600;
    letter-spacing: 0;
}

a, .btn-link {
    color: var(--aj-primary);
    text-decoration: none;
}

a:hover {
    color: var(--aj-secondary);
}

/* ---------- أدوات مساعدة ---------- */
.aj-text-gold { color: var(--aj-secondary); }
.aj-text-primary { color: var(--aj-primary); }

.aj-card {
    background: var(--aj-card);
    border: 1px solid var(--aj-line);
    border-top: 3px solid var(--aj-secondary);
    border-radius: 10px;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--aj-primary-dark) 8%, transparent);
}

/* ---------- ربط مكوّنات Bootstrap بالقالب العام ---------- */
.btn-primary {
    color: var(--aj-on-primary);
    background-color: var(--aj-primary);
    border-color: var(--aj-primary-dark);
}

.btn-primary:hover,
.btn-primary:focus {
    color: var(--aj-on-primary);
    background-color: var(--aj-primary-dark);
    border-color: var(--aj-primary-dark);
}

.table {
    --bs-table-color: var(--aj-text);
    --bs-table-bg: var(--aj-card);
    --bs-table-border-color: var(--aj-line);
    --bs-table-striped-color: var(--aj-text);
    --bs-table-striped-bg: var(--aj-card-muted);
    --bs-table-hover-color: var(--aj-text);
    --bs-table-hover-bg: color-mix(in srgb, var(--aj-secondary) 10%, var(--aj-card));
}

.card,
.modal-content,
.dropdown-menu {
    --bs-card-bg: var(--aj-card);
    --bs-card-color: var(--aj-text);
    --bs-card-border-color: var(--aj-line);
    --bs-modal-bg: var(--aj-card);
    --bs-modal-color: var(--aj-text);
    --bs-modal-border-color: var(--aj-line);
    --bs-dropdown-bg: var(--aj-card);
    --bs-dropdown-color: var(--aj-text);
    --bs-dropdown-link-color: var(--aj-text);
    --bs-dropdown-link-hover-bg: var(--aj-card-muted);
}

.form-control,
.form-select {
    color: var(--aj-text);
    background-color: var(--aj-card);
    border-color: var(--aj-line);
}

.btn:focus, .btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--aj-secondary) 45%, transparent);
}

h1:focus { outline: none; }

.valid.modified:not([type=checkbox]) { outline: 1px solid var(--aj-primary-light); }
.invalid { outline: 1px solid #c0392b; }
.validation-message { color: #c0392b; }

/* ---------- شريط التمرير ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: color-mix(in srgb, var(--aj-surface) 80%, #000); }
::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--aj-primary) 70%, transparent);
    border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--aj-secondary); }
/* Global program-error notifications: compact, top aligned, and self-dismissed after 10 seconds. */
.aj-errorToastHost {
    position: fixed;
    z-index: 20000;
    top: 1rem;
    left: 50%;
    display: grid;
    width: min(460px, calc(100vw - 2rem));
    gap: .55rem;
    transform: translateX(-50%);
    pointer-events: none;
}

.aj-errorToast {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .7rem;
    padding: .78rem .9rem;
    border: 1px solid rgba(218, 102, 102, .7);
    border-radius: 13px;
    background: rgba(63, 17, 20, .96);
    color: #fff5f2;
    box-shadow: 0 16px 45px rgba(0, 0, 0, .32);
    backdrop-filter: blur(16px);
    animation: aj-error-toast-in .25s ease both;
    pointer-events: auto;
}

.aj-errorToast > span { color: #ffb1a9; }
.aj-errorToast p { margin: 0; font-size: .78rem; line-height: 1.75; }
.aj-errorToast button { border: 0; background: transparent; color: #fff; font-size: 1.2rem; cursor: pointer; }
.aj-errorToast.is-leaving { animation: aj-error-toast-out .22s ease both; }
.aj-programErrorPopup {
    position: fixed !important;
    z-index: 19999 !important;
    top: 1rem !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: min(460px, calc(100vw - 2rem)) !important;
    margin: 0 !important;
    border: 1px solid rgba(218, 102, 102, .7) !important;
    border-radius: 13px !important;
    background: rgba(63, 17, 20, .96) !important;
    color: #fff5f2 !important;
    box-shadow: 0 16px 45px rgba(0, 0, 0, .32) !important;
    transform: translateX(-50%) !important;
    animation: aj-error-toast-in .25s ease both !important;
}
.aj-programErrorPopup.is-leaving { animation: aj-error-toast-out .22s ease both !important; }
@keyframes aj-error-toast-in { from { opacity: 0; transform: translateY(-14px) scale(.98); } }
@keyframes aj-error-toast-out { to { opacity: 0; transform: translateY(-10px) scale(.98); } }

/* Added only while safe content is fully outside the viewport. Position remains
   unchanged; scroll-reveal.js applies directional translate during playback. */
.aj-scroll-reveal-pending { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
    .aj-scroll-reveal-pending { opacity: 1; translate: none; }
}