:root {
    /* ألوان نظام ميزان المستوحاة من الهوية البصرية */
    --mizan-primary: #1b365d; /* اللون الأزرق الداكن الرئيسي */
    --mizan-secondary: #007acc; /* اللون الأزرق الحيوي للاشتراكات والروابط */
    --mizan-accent: #c5a059; /* لون اللمسات الذهبية/البرونزية للتوازن */
    --mizan-bg: #f8fafc; /* خلفية عامة خفيفة ونظيفة */
    --mizan-surface: #ffffff; /* خلفية البطاقات والعناصر البيضاء */
    --mizan-text: #1e293b; /* لون النصوص الأساسي المريح للعين */
    --mizan-border: #cbd5e1; /* لون الحدود الفاصلة */
    /* إعدادات الخط (IBM Plex Sans Arabic) مع بدائل الأمان */
    --mizan-font-family: 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    /* المسافات والبدل القياسية للنظام (Spacing & Padding) */
    --mizan-spacing-xs: 0.25rem;
    --mizan-spacing-sm: 0.5rem;
    --mizan-spacing-md: 1rem;
    --mizan-spacing-lg: 1.5rem;
    --mizan-spacing-xl: 2rem;
    /* الارتفاعات والـ Paddings الخاصة بالعناصر الأساسية */
    --mizan-input-padding-y: 0.5rem;
    --mizan-input-padding-x: 0.75rem;
    --mizan-border-radius: 0.375rem;
}

html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    margin: 0;
    font-family: var(--mizan-font-family);
    background-color: var(--mizan-bg);
    color: var(--mizan-text);
    direction: rtl;
    text-align: right;
}

/* تخصيص التركيز (Focus) ليتناسب مع هوية ميزان */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--mizan-secondary);
    border-color: var(--mizan-secondary);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ==========================================================
   تنسيقات النافبار والفوتر الداكنة لنظام ميزان (Nested CSS)
   ========================================================== */

.mizan-dark-navbar {
    background-color: var(--mizan-primary, #1b365d) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    & .navbar-brand {
        color: #ffffff !important;

        &:hover {
            color: var(--mizan-accent, #c5a059) !important;
        }
    }

    & .nav-link {
        color: rgba(255, 255, 255, 0.8) !important;
        transition: color 0.2s ease;

        &:hover {
            color: var(--mizan-accent, #c5a059) !important;
        }
    }

    & .navbar-toggler {
        border-color: rgba(255, 255, 255, 0.2);
        background-color: rgba(255, 255, 255, 0.05);

        & .navbar-toggler-icon {
            filter: invert(1);
        }
    }
}

.mizan-dark-footer {
    background-color: var(--mizan-primary, #1b365d);
    color: #ffffff;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.85rem;

    & .mizan-footer-link {
        transition: color 0.2s ease;

        &:hover {
            color: var(--mizan-accent, #c5a059) !important;
        }
    }
}

/* ==========================================================
   تنسيقات البطاقات والعناصر العامة (Nested CSS)
   ========================================================== */

.card {
    border: none;
    background-color: var(--mizan-surface, #ffffff);
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);

    &.mizan-hover-card {
        position: relative;
        overflow: hidden;
        border: 1px solid rgba(203, 213, 225, 0.4) !important;
        text-decoration: none !important;

        &::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--mizan-secondary, #007acc), var(--mizan-accent, #c5a059));
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        & .icon-box {
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 0.625rem;
            background-color: #f1f5f9;
            color: var(--mizan-primary, #1b365d);
            transition: all 0.35s ease;
        }

        & .card-title {
            font-size: 1.1rem;
            color: var(--mizan-primary, #1b365d);
            transition: color 0.2s ease;
        }

        & .card-text {
            font-size: 0.875rem;
            line-height: 1.5;
            color: #64748b;
        }

        &:hover {
            transform: translateY(-6px);
            box-shadow: 0 14px 25px -5px rgba(27, 54, 93, 0.12), 0 8px 10px -6px rgba(27, 54, 93, 0.08) !important;
            border-color: rgba(0, 122, 204, 0.3) !important;

            &::before {
                opacity: 1;
            }

            & .icon-box {
                background: linear-gradient(135deg, var(--mizan-secondary, #007acc), var(--mizan-primary, #1b365d));
                color: #ffffff !important;
                transform: scale(1.08) rotate(3deg);
                box-shadow: 0 8px 15px rgba(0, 122, 204, 0.25);
            }

            & .card-title {
                color: var(--mizan-secondary, #007acc);
            }
        }
    }
}

h5.text-uppercase {
    letter-spacing: 0.05em;
    font-size: 0.85rem !important;
    color: #64748b !important;
    position: relative;
    padding-right: 0.75rem;
    border-right: 3px solid var(--mizan-secondary, #007acc);
}