/* ==========================================================
   الخطوط — منصة الجودة والحوكمة
   assets/css/fonts.css

   الخط: IBM Plex Sans Arabic (رخصة SIL OFL — assets/fonts)
   وهو الخط المعتمد في دليل تصميم المنصات الحكومية السعودية،
   واضح في الجداول والأرقام والنماذج على الشاشات الصغيرة.

   لماذا ملفات محلية لا Google Fonts؟
   سياسة أمان المحتوى (CSP) في includes/security-headers.php
   تسمح بالموارد من نفس النطاق فقط، فكان رابط Google Fonts
   يُحجب ويظهر Tahoma الافتراضي في كل الصفحات. الاستضافة المحلية
   تعمل مع CSP، أسرع، ولا تسرّب بيانات الزوار لطرف ثالث.

   يُحمَّل هذا الملف تلقائيًا في كل صفحة عبر brandIconTags()
   في includes/branding.php.
   ========================================================== */

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2') format('woff2');
    unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/ibm-plex-sans-arabic-latin-400-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2') format('woff2');
    unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/ibm-plex-sans-arabic-latin-500-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2') format('woff2');
    unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/ibm-plex-sans-arabic-latin-600-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2') format('woff2');
    unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/ibm-plex-sans-arabic-latin-700-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}


/* ----------------------------------------------------------
   الأساس الطباعي الموحد
---------------------------------------------------------- */

:root {
    --font-sans: 'IBM Plex Sans Arabic', Tahoma, Arial, sans-serif;
    --font-mono: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--font-sans);
    font-kerning: normal;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* عناصر النماذج لا ترث الخط افتراضيًا في المتصفحات */
button,
input,
select,
textarea,
optgroup {
    font-family: inherit;
}

/* أرقام متساوية العرض في الجداول والمؤشرات لمحاذاة الأعمدة */
table,
td,
th,
time,
.number,
.stat-value,
.kpi-value {
    font-variant-numeric: tabular-nums;
}

code,
kbd,
pre,
samp {
    font-family: var(--font-mono);
}

input::placeholder,
textarea::placeholder {
    font-family: inherit;
    opacity: .75;
}


/* ==========================================================
   عناصر الواجهة المشتركة (assets/js/app-shell.js)
   سهم العودة + زر دليل الاستخدام
   ========================================================== */

.app-shell-start {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.app-shell-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.app-shell-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 40px;
    min-width: 40px;
    padding: 0 12px;
    border: 1px solid #d9e7ee;
    border-radius: 11px;
    background: #ffffff;
    color: #163b68;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(15, 42, 67, .06);
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    -webkit-tap-highlight-color: transparent;
}

.app-shell-btn:hover {
    background: #eef8f8;
    border-color: #9fdcdc;
    color: #0f7f80;
}

.app-shell-btn:focus-visible {
    outline: 2px solid #16a6a8;
    outline-offset: 2px;
}

.app-shell-btn svg {
    flex-shrink: 0;
}

.app-shell-guide {
    color: #0f7f80;
}

/* شريط أعلى المحتوى في الصفحات التي لا ترويسة لها */
.app-shell-bar {
    display: flex;
    justify-content: flex-start;
    margin: 0 0 16px;
}

/* قائمة الإدارة الجانبية داكنة: الشريط أعلى المحتوى الفاتح */
.main > .app-shell-bar {
    margin-bottom: 18px;
}

/* روابط الترويسة (الخروج، العودة للرئيسية) لا تنكسر على سطرين */
.topbar-inner > a,
.header-container > a,
.topbar-actions > a {
    white-space: nowrap;
}

/* ==========================================================
   هوية المنصة والأيقونات
   ========================================================== */

/* شعار المنصة داخل مربع الهوية في ترويسات الصفحات */
.brand-icon {
    overflow: hidden;
}

.brand-icon > .brand-mark-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: #ffffff;
}

/* شعار مصغّر فوق اسم المنصة في قائمة الإدارة الجانبية */
.sidebar .brand .admin-brand-logo {
    display: block;
    width: 44px;
    height: 44px;
    margin-bottom: 10px;
    border-radius: 12px;
    background: #ffffff;
    object-fit: contain;
}

/* أيقونات SVG (includes/icons.php) */
.ui-icon {
    display: inline-block;
    flex-shrink: 0;
    vertical-align: middle;
}

.empty-icon {
    color: #16a6a8;
    line-height: 0;
}

.empty-icon .ui-icon {
    opacity: .9;
}


@media (max-width: 480px) {

    /* في الجوال يُخفى الوصف الصغير تحت اسم المنصة لإفساح المكان
       لسهم العودة وزر الدليل، ويبقى الاسم والشعار */
    .app-shell-start .brand strong + span,
    .app-shell-start .landing-logo strong + span {
        display: none;
    }
}

@media (max-width: 640px) {

    .app-shell-start {
        gap: 8px;
    }

    .app-shell-group {
        gap: 6px;
    }

    .app-shell-btn {
        height: 38px;
        min-width: 38px;
        padding: 0;
        width: 38px;
    }

    .app-shell-label {
        display: none;
    }
}

@media print {

    .app-shell-group,
    .app-shell-bar {
        display: none !important;
    }
}

/* أيقونة إظهار/إخفاء كلمة المرور */
.pw-eye,
.pw-eye-off {
    display: inline-flex;
    line-height: 0;
}

.pw-eye[hidden],
.pw-eye-off[hidden] {
    display: none;
}