/* =========================================================================
   الهوية البصرية (٢٠٢٦-٠٩-٢٣)

   الخط: Cairo — محلّيٌّ في wwwroot/fonts (رخصة OFL، Cairo-OFL.txt)، فلا
   يُطلب شيء من الإنترنت. ملف عربي وملفّان لاتينيان، والمتصفح يحمّل ما يحتاجه
   من كلٍّ بحسب الحروف في الصفحة (unicode-range).

   الألوان: متغيّرات لا قيم مبعثرة. --ims-primary يأخذه النظام من «هوية الجهة»
   إن ضُبط هناك (MainLayout يكتبه فوق هذا الافتراضي)، فيتغيّر لون الأزرار
   والعناوين والشريط في موضعٍ واحد.
   ========================================================================= */
@font-face {
    font-family: "Cairo";
    font-style: normal;
    font-display: swap;
    font-weight: 200 1000;
    src: url("fonts/cairo-arabic-wght-normal.woff2") format("woff2-variations");
    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: "Cairo";
    font-style: normal;
    font-display: swap;
    font-weight: 200 1000;
    src: url("fonts/cairo-latin-ext-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Cairo";
    font-style: normal;
    font-display: swap;
    font-weight: 200 1000;
    src: url("fonts/cairo-latin-wght-normal.woff2") format("woff2-variations");
    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 {
    --ims-primary: #1d4e89;
    --ims-sidebar: #16212e;
    --ims-page-bg: #f3f5f8;
    --ims-font: "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;

    --bs-font-sans-serif: var(--ims-font);
    --bs-body-font-family: var(--ims-font);
    --bs-primary: var(--ims-primary);
    --bs-link-color: var(--ims-primary);
    --bs-link-hover-color: color-mix(in srgb, var(--ims-primary) 75%, black);
}

.btn-primary {
    --bs-btn-bg: var(--ims-primary);
    --bs-btn-border-color: var(--ims-primary);
    --bs-btn-hover-bg: color-mix(in srgb, var(--ims-primary) 85%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--ims-primary) 85%, black);
    --bs-btn-active-bg: color-mix(in srgb, var(--ims-primary) 75%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--ims-primary) 75%, black);
    --bs-btn-disabled-bg: var(--ims-primary);
    --bs-btn-disabled-border-color: var(--ims-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--ims-primary);
    --bs-btn-border-color: var(--ims-primary);
    --bs-btn-hover-bg: var(--ims-primary);
    --bs-btn-hover-border-color: var(--ims-primary);
    --bs-btn-active-bg: var(--ims-primary);
    --bs-btn-active-border-color: var(--ims-primary);
}

.bg-primary { background-color: var(--ims-primary) !important; }
.text-primary { color: var(--ims-primary) !important; }
.border-primary { border-color: var(--ims-primary) !important; }

.sidebar.bg-dark { background-color: var(--ims-sidebar) !important; }

/* جداول أوضح: عناوين أثقل، وسطورٌ متباعدة قليلاً */
.table > thead th { font-weight: 700; white-space: nowrap; }
.card { border-radius: .6rem; }

html, body {
    margin: 0;
    font-family: var(--ims-font);
    background: var(--ims-page-bg);
    color: #1f2933;
}

.layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 100vh;
}

aside {
    background: #1b3a4b;
    color: #fff;
    padding: 1.25rem;
}

aside a {
    display: block;
    color: #d9e2ec;
    text-decoration: none;
    margin-top: 0.75rem;
}

main {
    padding: 2rem;
}

/* =========================================================================
   قواعد الطباعة — عامّة لكل الشاشات

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

   القاعدة: ما لا يُقرأ على الورق لا يُطبع. الشريط الجانبي والأزرار
   أدوات تنقّل، والورقة لا يُتنقّل فيها.
   ========================================================================= */
/* =========================================================================
   إطار الطباعة (MainLayout) — على الشاشة كتلٌ عادية لا أثر لها،
   ورأسه وذيله مخفيّان
   ========================================================================= */
.print-frame,
.print-frame > tbody,
.print-frame > tbody > tr,
.print-frame > tbody > tr > td {
    display: block;
    width: 100%;
}

.print-frame > thead,
.print-frame > tfoot {
    display: none;
}

@media print {

    /* في الصفحة التي فيها شريط تصنيف ثابت يصير الإطار جدولاً حقيقياً:
       رأسه وذيله يتكرّران على كل ورقة، وفيهما فراغٌ بارتفاع الشريط
       يقع الشريط فوقه بدل أن يقع فوق العناوين والنصّ */
    body:has(.classification-bar) .print-frame {
        display: table;
        width: 100%;
        border-collapse: collapse;
    }

    body:has(.classification-bar) .print-frame > thead { display: table-header-group; }
    body:has(.classification-bar) .print-frame > tfoot { display: table-footer-group; }
    body:has(.classification-bar) .print-frame > tbody { display: table-row-group; }
    body:has(.classification-bar) .print-frame > * > tr { display: table-row; }

    body:has(.classification-bar) .print-frame > * > tr > td {
        display: table-cell;
        padding: 0;
        border: 0;
    }

    .print-frame-space { height: 11mm; }
}

@media print {

    /* أدوات الواجهة تختفي */
    .sidebar,
    .no-print,
    .btn,
    nav.nav {
        display: none !important;
    }

    /* الصفحة تصير عموداً واحداً بعرض الورقة */
    .page {
        display: block !important;
    }

    html, body, main, .page {
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
    }

    body {
        font-size: 11pt;
    }

    main {
        padding: 0 !important;
    }

    /* العناصر الملتصقة أعلى الشاشة تعود إلى مكانها الطبيعي،
       وإلا تكرّرت أو غطّت المحتوى على الورق */
    .sticky-top,
    .src-header,
    .view-header {
        position: static !important;
    }

    /* الظلال حبرٌ مهدور */
    .shadow, .shadow-sm, .shadow-lg {
        box-shadow: none !important;
    }

    .card {
        border: 1px solid #ccc !important;
        box-shadow: none !important;
    }

    /* لا يُقطع قسم أو صف بين صفحتين */
    section, .card, tr, .print-section {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    table {
        font-size: 10pt;
    }

    /* الرابط على الورق نصّ: لونه وخطّه السفلي ضجيج */
    a {
        text-decoration: none !important;
        color: #000 !important;
    }

    @page {
        margin: 15mm 10mm;
    }
}

/* =============================================================================
   الخريطة التفصيلية (OpenStreetMap) — خلفيةٌ هادئة تحت البيانات
   =============================================================================
   رماديّات للطرق عمداً: ألوان الكيانات المرسومة فوقها (أزرق، كهرماني،
   أخضر مزرق، أرجواني) يجب أن تبقى أوّل ما تقع عليه العين. */
.dm-water { fill: none; stroke: #8cb8e8; stroke-width: 1.1px; }
.dm-road { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.dm-road-1 { stroke: #6b7280; stroke-width: 2.2px; }
.dm-road-2 { stroke: #9ca3af; stroke-width: 1.4px; }
.dm-road-3 { stroke: #c3c7ce; stroke-width: 1px; }
.dm-road-4 { stroke: #c9b99a; stroke-width: .9px; stroke-dasharray: 3 2; }
.dm-place circle { fill: #475569; stroke: #fff; stroke-width: 1px; }
.dm-place text {
    fill: #334155; font-family: inherit;
    paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round;
}
.dm-rank-1 text { font-weight: 700; fill: #1f2937; }
.dm-rank-3 text, .dm-rank-4 text { fill: #64748b; }
.dm-rank-3 circle, .dm-rank-4 circle { fill: #94a3b8; }
.dm-peak circle { fill: #92400e; }
.dm-peak text { fill: #92400e; font-style: italic; }
.dm-bounds { fill: none; stroke: #94a3b8; stroke-width: 1.2px; stroke-linejoin: round; }

/* =============================================================================
   الخانات — حدودٌ واضحة يُرى منها أين تبدأ الخانة وأين تنتهي
   =============================================================================
   حدود Bootstrap الافتراضية (1px رمادي فاتح) تذوب في الخلفية على شاشات
   المكاتب، فلا يعرف الموظف أين يكتب. فالحدّ هنا أسمك وأغمق، ويتغيّر عند
   المرور والتركيز، والخانة المركَّز عليها تُلوِّن عنوانها — فيُعرف في أي
   خانة يكتب دون أن يبحث عن المؤشّر.
   ============================================================================= */
.form-control,
.form-select {
    border: 2px solid #7d8aa0 !important;
    border-radius: .55rem;
    background-color: #fff;
    color: #0f172a;
    min-height: 2.75rem;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .9), 0 1px 3px rgba(15, 23, 42, .10);
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
textarea.form-control { min-height: 6rem; }
.form-control-sm, .form-select-sm { min-height: 2.2rem; }

.form-control:hover:not(:disabled):not([readonly]),
.form-select:hover:not(:disabled) {
    border-color: #475569 !important;
    background-color: #fbfcfe;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--ims-primary) !important;
    background-color: #fff;
    box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--ims-primary) 22%, transparent),
                0 2px 6px rgba(15, 23, 42, .10);
}

/* ألوان التنبيه من Bootstrap (خانة إلزامية لم تُملأ…) تبقى فوق الحدّ العادي */
.form-control.border-danger, .form-select.border-danger, .form-control.is-invalid, .form-select.is-invalid {
    border-color: #dc2626 !important;
    background-color: #fffafa;
}
.form-control.border-warning, .form-select.border-warning { border-color: #d97706 !important; }
.form-control.border-success, .form-select.border-success, .form-control.is-valid, .form-select.is-valid { border-color: #16a34a !important; }

.form-control::placeholder { color: #9aa3b2; opacity: 1; }

/* ما يملؤه النظام (رقم مرجعي، رمز) — حدٌّ متقطّع وخلفية رمادية: لا يُكتب فيه */
.form-control[readonly],
.form-control:disabled,
.form-select:disabled {
    background-color: #eef1f5 !important;
    border-style: dashed !important;
    border-color: #9aa5b5 !important;
    color: #475569;
    box-shadow: none;
}

/* تحقّق Blazor: الخانة الناقصة حمراء، والمعدَّلة الصحيحة خضراء خفيفة */
.form-control.invalid,
.form-select.invalid {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 .18rem rgba(220, 38, 38, .15);
}
.form-control.modified.valid,
.form-select.modified.valid { border-color: #16a34a !important; }

.form-label {
    font-weight: 600;
    color: #334155;
    margin-bottom: .3rem;
    transition: color .15s ease;
}

/* عنوان الخانة التي يُكتب فيها الآن يتلوّن بلون الجهة */
[class*="col-"]:focus-within > .form-label,
.mb-3:focus-within > .form-label {
    color: var(--ims-primary);
}

.form-check-input {
    border: 2px solid #7d8aa0;
    width: 1.1em;
    height: 1.1em;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.form-switch .form-check-input { width: 2.2em; }
.form-check-input:checked {
    background-color: var(--ims-primary);
    border-color: var(--ims-primary);
}
.form-check-input:focus {
    border-color: var(--ims-primary);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--ims-primary) 20%, transparent);
}

.form-text { color: #64748b; }

/* بطاقة النموذج (الإدخال والتعديل): شريط لونيّ في أعلاها وظلٌّ أوضح */
.card.border-primary {
    border-width: 1.5px !important;
    box-shadow: 0 6px 24px rgba(15, 23, 42, .08) !important;
    overflow: hidden;
}
.card.border-primary > .card-header:not(.bg-primary):not(.text-white) {
    background: linear-gradient(90deg, color-mix(in srgb, var(--ims-primary) 10%, #fff), #fff) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--ims-primary) 25%, #fff);
}
.card.border-primary > .card-header.bg-primary {
    background: linear-gradient(90deg, var(--ims-primary), color-mix(in srgb, var(--ims-primary) 70%, #0ea5e9)) !important;
}
.card.border-primary::before {
    content: "";
    display: block;
    height: 4px;
    background: linear-gradient(90deg, var(--ims-primary), color-mix(in srgb, var(--ims-primary) 45%, #38bdf8));
}

/* عناوين الأقسام داخل النماذج («المصدر والتقييم»، «الأطراف»…) */
.card-body span.fw-bold.text-primary {
    display: inline-block;
    padding-inline-start: .6rem;
    border-inline-start: 4px solid var(--ims-primary);
    line-height: 1.4;
}

/* =============================================================================
   الحركة — هادئة وقصيرة: تدلّ ولا تُلهي
   =============================================================================
   - البطاقات تظهر بانزلاقٍ خفيف متتابع عند فتح الصفحة.
   - الأزرار ترتفع قليلاً عند المرور وتنضغط عند النقر.
   - التنبيهات تنزلق إلى مكانها فتُلاحَظ.
   ومن طلب في نظامه «تقليل الحركة» لا يرى شيئاً منها، ولا شيء منها يُطبع.
   ============================================================================= */
@keyframes ims-rise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}
@keyframes ims-drop {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
    .content .card,
    main .card {
        animation: ims-rise .35s cubic-bezier(.2, .7, .2, 1) both;
    }
    .row > [class*="col"]:nth-child(2) > .card, .row > [class*="col"]:nth-child(2) .card { animation-delay: .04s; }
    .row > [class*="col"]:nth-child(3) > .card, .row > [class*="col"]:nth-child(3) .card { animation-delay: .08s; }
    .row > [class*="col"]:nth-child(4) > .card, .row > [class*="col"]:nth-child(4) .card { animation-delay: .12s; }
    .row > [class*="col"]:nth-child(n+5) > .card { animation-delay: .16s; }

    .alert { animation: ims-drop .25s ease-out both; }

    .btn {
        transition: transform .12s ease, box-shadow .12s ease, background-color .15s ease,
                    border-color .15s ease, color .15s ease;
    }
    .btn:not(:disabled):not(.btn-link):hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(15, 23, 42, .12);
    }
    .btn:not(:disabled):not(.btn-link):active {
        transform: translateY(0) scale(.98);
        box-shadow: none;
    }

    .list-group-item-action { transition: background-color .12s ease, padding .12s ease; }
    .list-group-item-action:hover { padding-inline-start: 1.25rem; }
}

/* صفوف الجداول: تمييز الصف تحت المؤشّر */
.table > tbody > tr { transition: background-color .12s ease; }
.table > tbody > tr:hover > * { background-color: color-mix(in srgb, var(--ims-primary) 5%, transparent); }

/* البطاقات القابلة للنقر في لوحة التحكم وغيرها */
a.card, a > .card { transition: transform .15s ease, box-shadow .15s ease; }
a.card:hover, a:hover > .card { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(15, 23, 42, .12) !important; }

@media print {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .card.border-primary::before { display: none; }
    .form-control, .form-select { box-shadow: none !important; }
}

/* =============================================================================
   بطاقات الأعداد (البلاغات، المعلومات، الإحالات، سجل التدقيق) — بمظهر لوحة التحكم
   =============================================================================
   شريط لوني في جانب البطاقة، وعنوان داكن مقروء، ورقم كبير. لون الشريط
   يُؤخذ من لون الرقم نفسه، فلا يحتاج كل موضع إلى تعريف لونه. */
.stat-card {
    --stat: #475569;
    border: 1px solid #e2e8f0 !important;
    border-inline-start: 5px solid var(--stat) !important;
    border-radius: .75rem;
    background: #fff;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .07);
    text-align: start;
    transition: transform .18s ease, box-shadow .18s ease;
}
.stat-card .card-body { padding: .95rem 1.1rem; }
.stat-card:has(.text-primary) { --stat: var(--ims-primary); }
.stat-card:has(.text-warning) { --stat: #d97706; }
.stat-card:has(.text-success) { --stat: #15803d; }
.stat-card:has(.text-danger)  { --stat: #dc2626; }
.stat-card:has(.text-info)    { --stat: #0891b2; }
.stat-card .stat-label {
    color: #1f2937;
    font-weight: 700;
    font-size: .95rem;
    margin-bottom: .35rem;
}
.stat-card .stat-num {
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1.05;
    color: #0f172a;
}
/* ألوان Bootstrap الفاتحة (الأصفر خاصة) تذوب على الأبيض — تُغمَّق هنا */
.stat-card .stat-num.text-primary   { color: var(--ims-primary) !important; }
.stat-card .stat-num.text-warning   { color: #b45309 !important; }
.stat-card .stat-num.text-success   { color: #15803d !important; }
.stat-card .stat-num.text-danger    { color: #b91c1c !important; }
.stat-card .stat-num.text-info      { color: #0e7490 !important; }
.stat-card .stat-num.text-secondary { color: #334155 !important; }
button.stat-card:hover, a.stat-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(15, 23, 42, .12); }
.stat-card.stat-selected {
    background: color-mix(in srgb, var(--stat) 7%, #fff);
    box-shadow: 0 0 0 2px var(--stat), 0 4px 14px rgba(15, 23, 42, .10);
}

/* بطاقات لوحة التحكم — العنوان والرقم أوضح */
.dash-card .small.text-muted.mb-1 { color: #1f2937 !important; font-weight: 700; font-size: .95rem; }

/* =============================================================================
   جداول القوائم — خطوط أوضح، وأرقام وتواريخ لا تنكسر
   ============================================================================= */
.table { color: #111827; }
/* رؤوس الجداول الفاتحة فقط — الرؤوس الداكنة (table-dark) تبقى بنصّها الأبيض */
.table > thead.table-light th,
.table > thead:not([class]) th {
    color: #1f2937;
    font-weight: 700;
    border-bottom: 2px solid #cbd5e1;
}
.ims-list > thead th { white-space: nowrap; }
.ims-list td { padding-top: .6rem; padding-bottom: .6rem; }
.ims-list .btn-sm { white-space: nowrap; }

@media print {
    .stat-card { box-shadow: none; border-color: #999 !important; }
}

/* =============================================================================
   شريط النسخة التجريبية (IMS_DEMO=1) — ظاهر على الشاشة وعلى كل ورقة مطبوعة
   ============================================================================= */
.ims-demo-banner {
    background: repeating-linear-gradient(135deg, #fde68a 0 14px, #fcd34d 14px 28px);
    color: #78350f;
    border-bottom: 2px solid #b45309;
    padding: .55rem 1rem;
    text-align: center;
    font-size: .95rem;
    position: sticky;
    top: 0;
    z-index: 1030;
}
@media print {
    .ims-demo-banner { position: static; background: #fde68a !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}