/* ============================================================
   مكتبة ذوي الشهداء الرقمية — ملف الأنماط
   مؤسسة الشهداء / مديرية الشؤون التعليمية والثقافية

   الهوية: الكحلي العميق + السماوي + الذهبي (ألوان الشعار الرسمي)
   ألوان الهوية تُقرأ من شاشة إعدادات النظام عبر المتغيرات
   navy / teal / gold، فلا تُكتب قيمها هنا بشكل ثابت.
   ============================================================ */

/* ===== الخط: Cairo محلي (يعمل بلا إنترنت) ===== */
@font-face {
    font-family: "Cairo";
    src: url("../fonts/cairo-arabic-400.woff2") format("woff2");
    font-weight: 400; font-style: normal; font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
    font-family: "Cairo";
    src: url("../fonts/cairo-arabic-600.woff2") format("woff2");
    font-weight: 600; font-style: normal; font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
    font-family: "Cairo";
    src: url("../fonts/cairo-arabic-700.woff2") format("woff2");
    font-weight: 700; font-style: normal; font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
    font-family: "Cairo";
    src: url("../fonts/cairo-latin-400.woff2") format("woff2");
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Cairo";
    src: url("../fonts/cairo-latin-600.woff2") format("woff2");
    font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Cairo";
    src: url("../fonts/cairo-latin-700.woff2") format("woff2");
    font-weight: 700; font-style: normal; font-display: swap;
}

/* الخط القديم يبقى معرّفاً لمن يختاره من شاشة الإعدادات */
@font-face {
    font-family: "PT Bold Heading";
    /* منصّب على الجهاز، أو من مجلد خطوط النظام، أو من موقع المكتبات على نفس السيرفر */
    src: local("PT Bold Heading"), local("PTBoldHeading"), local("PT Bold Heading Regular"),
         url("../fonts/PT-Bold-Heading.woff2") format("woff2"),
         url("../fonts/PT-Bold-Heading.ttf")  format("truetype"),
         url("/fonts/PT-Bold-Heading.ttf")  format("truetype");
    font-weight: normal; font-style: normal; font-display: swap;
}

/* ============================================================
   المتغيرات
   ============================================================ */
:root {
    --navy:       #06344C;
    --navy-dark:  #042637;
    --navy-light: #0B4A68;
    --teal:       #00B5BE;
    --teal-dark:  #009BA3;
    --gold:       #C9A24A;
    --gold-light: #E3C26E;

    --ink:        #0A2B3A;
    --slate:      #5A7480;
    --line:       #DCE9ED;
    --surface:    #FFFFFF;
    --page-bg:    #EDF5F7;

    /* المنحنيات */
    --r-sm:   12px;
    --r-md:   18px;
    --r-lg:   26px;
    --r-xl:   34px;
    --pill:  999px;

    /* الظلال */
    --sh-1: 0 1px 2px rgba(6,52,76,.05), 0 8px 20px -10px rgba(6,52,76,.22);
    --sh-2: 0 2px 6px rgba(6,52,76,.07), 0 20px 44px -18px rgba(6,52,76,.32);
    --sh-3: 0 30px 64px -28px rgba(6,52,76,.48);

    /* اللمعان: طبقة ضوء تُركَّب فوق أي لون */
    --gloss: linear-gradient(165deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,.07) 45%, rgba(0,0,0,.06) 100%);
    --gloss-soft: linear-gradient(170deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.35) 60%, rgba(255,255,255,0) 100%);
}

/* ============================================================
   الأساس
   ============================================================ */
* { -webkit-font-smoothing: antialiased; }

body {
    font-family: "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;
    font-size: 21px;
    color: var(--ink);
    background-color: var(--page-bg);
    background-image:
        radial-gradient(900px 420px at 85% -120px, rgba(0,181,190,.16), transparent 70%),
        radial-gradient(760px 380px at 10% -60px,  rgba(201,162,74,.12), transparent 70%),
        linear-gradient(180deg, #F3FAFB 0%, var(--page-bg) 42%, #E4F0F3 100%);
    background-attachment: fixed;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

a { text-decoration: none; }

::selection { background: var(--teal); color: #fff; }

:focus-visible {
    outline: 3px solid var(--teal);
    outline-offset: 2px;
    border-radius: 6px;
}

/* ============================================================
   الترويسة الرسمية
   ============================================================ */
.app-header {
    position: relative;
    color: #fff;
    padding: 0 0 6px;
    border-radius: 0 0 var(--r-xl) var(--r-xl);
    background-color: var(--navy);
    background-image:
        radial-gradient(620px 300px at 50% -40px, rgba(0,181,190,.38), transparent 68%),
        linear-gradient(168deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.03) 38%, rgba(0,0,0,.30) 100%);
    box-shadow: var(--sh-2);
    overflow: hidden;
}
/* لمعة علوية رفيعة تعطي إحساس السطح المصقول */
.app-header::before {
    content: "";
    position: absolute; inset: 0 0 auto 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
}

.header-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 30px;
    padding: 20px 18px 8px;
    flex-wrap: wrap;
    position: relative;
}
.header-spacer { width: 150px; }

.header-emblem {
    height: 150px;
    width: auto;
    filter: drop-shadow(0 8px 22px rgba(0,0,0,.55));
}

.head-calligraphy {
    height: 62px;
    width: auto;
    margin: 8px 0 6px;
    border-radius: var(--r-sm);
    box-shadow: 0 6px 18px -8px rgba(0,0,0,.7);
}

.header-text { text-align: center; }

.head-line {
    font-size: 17px;
    opacity: .78;
    letter-spacing: .4px;
}
.head-title {
    font-size: 42px;
    font-weight: 700;
    letter-spacing: .5px;
    line-height: 1.25;
    color: var(--gold-light);
    text-shadow: 0 3px 16px rgba(201,162,74,.35), 0 2px 3px rgba(0,0,0,.45);
}
.head-sub {
    font-size: 23px;
    font-weight: 600;
    color: var(--teal);
    text-shadow: 0 2px 10px rgba(0,181,190,.35);
}

/* اسم النظام داخل لوح زجاجي */
.head-system {
    width: fit-content;
    max-width: calc(100% - 36px);
    margin: 6px auto 12px;
    padding: 9px 30px;
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    letter-spacing: .3px;
    border-radius: var(--pill);
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.20);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
    backdrop-filter: blur(6px);
}

/* الشريط الزخرفي: يختفي خلف شريط التنقل العائم، وتحمل بطاقات الصفحات
   شريط الهوية (سماوي/ذهبي) بدلاً عنه. يظهر في الطباعة فقط عند الحاجة. */
.header-strip { display: none; }

/* ============================================================
   شريط التنقل — شريط عائم بحواف دائرية
   ============================================================ */
.app-nav {
    position: relative;
    z-index: 5;
    width: min(1620px, calc(100% - 28px));
    margin: -24px auto 0;
    padding: 5px 10px;
    border-radius: var(--pill);
    background-color: var(--navy-dark);
    background-image: var(--gloss);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: var(--sh-2), inset 0 1px 0 rgba(255,255,255,.18);
}
.app-nav .nav-link {
    font-size: 19px;
    font-weight: 600;
    white-space: nowrap;
    color: #D9EDF1 !important;
    padding: 7px 14px;
    margin: 2px 1px;
    border-radius: var(--pill);
    transition: background-color .18s ease, color .18s ease;
}
.app-nav .nav-link:hover {
    color: #fff !important;
    background: rgba(255,255,255,.12);
}
.app-nav .nav-link.active {
    color: #fff !important;
    background-color: var(--teal);
    background-image: var(--gloss);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
.app-nav .navbar-toggler {
    border: 1px solid rgba(255,255,255,.25);
    border-radius: var(--r-sm);
}
/* اسم المستخدم */
.app-nav .nav-user {
    color: var(--gold-light) !important;
    font-weight: 700;
}

/* ============================================================
   البطاقات
   ============================================================ */
.card {
    border: 1px solid rgba(6,52,76,.07);
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--surface);
    box-shadow: var(--sh-1);
}
.card-header {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    border: none;
    padding: 15px 22px;
    background-color: var(--navy);
    background-image: var(--gloss);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
    position: relative;
}
.card-header::after {
    content: "";
    position: absolute; inset: auto 0 0 0; height: 3px;
    background: linear-gradient(90deg, var(--teal), var(--gold));
}
.card-body { padding: 22px; }

/* ============================================================
   بطاقات الصفحة الرئيسية
   ============================================================ */
.menu-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 236px;
    padding: 30px 20px 26px;
    text-align: center;
    color: var(--navy);
    background: var(--surface);
    border: 1px solid rgba(6,52,76,.07);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-1);
    overflow: hidden;
    transition: transform .22s ease, box-shadow .22s ease;
}
/* شريط الهوية العلوي */
.menu-card::before {
    content: "";
    position: absolute; inset: 0 0 auto 0; height: 6px;
    background: linear-gradient(90deg, var(--teal), var(--gold));
    transition: height .22s ease;
}
/* وهج خفيف خلف الأيقونة */
.menu-card::after {
    content: "";
    position: absolute;
    top: -80px; left: 50%;
    width: 260px; height: 190px;
    transform: translateX(-50%);
    background: radial-gradient(closest-side, rgba(0,181,190,.16), transparent 70%);
    pointer-events: none;
}
.menu-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--sh-2);
    color: var(--navy-dark);
}
.menu-card:hover::before { height: 9px; }

.menu-card .icon {
    font-size: 42px;
    line-height: 1;
    width: 92px; height: 92px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 16px;
    border-radius: 28px;
    background-color: #DFF3F7;
    background-image: var(--gloss-soft);
    border: 1px solid rgba(0,181,190,.22);
    box-shadow: 0 10px 24px -14px rgba(6,52,76,.55), inset 0 1px 0 #fff;
}
.menu-card .title {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.4;
}
.menu-card .count {
    margin-top: 12px;
    display: inline-block;
    padding: 5px 18px;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    border-radius: var(--pill);
    background-color: var(--teal);
    background-image: var(--gloss);
    box-shadow: 0 10px 20px -12px rgba(0,181,190,.9), inset 0 1px 0 rgba(255,255,255,.4);
}

/* ============================================================
   الجداول
   ============================================================ */
.table-responsive {
    border-radius: var(--r-md);
    overflow-x: auto;           /* الجدول العريض يتحرك أفقياً على الهاتف */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--line);
    box-shadow: 0 10px 26px -20px rgba(6,52,76,.5);
}
.table { font-size: 20px; margin-bottom: 0; }
.table thead th {
    font-size: 20px;
    font-weight: 700;
    padding: 14px 12px;
    color: #fff;
    border: none;
    vertical-align: middle;
    background-color: var(--navy);
    background-image: var(--gloss);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.table td, .table th { padding: 13px 12px; }
.table tbody tr { border-color: var(--line); }
.table tbody tr:nth-child(even) { background: #F7FBFC; }
.table-hover tbody tr:hover { background: #E4F5F7; }
.table-bordered td, .table-bordered th { border-color: var(--line); }

/* ============================================================
   النماذج
   ============================================================ */
.form-label {
    font-size: 20px;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 6px;
}
.form-control, .form-select {
    font-size: 20px;
    padding: 11px 16px;
    border-radius: var(--r-sm);
    border: 1px solid #C9DDE3;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus, .form-select:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 .25rem rgba(0,181,190,.18);
}
.form-control::placeholder { color: #9AB2BA; }

.section-title {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    padding: 11px 22px;
    margin: 24px 0 16px;
    border-radius: var(--pill);
    background-color: var(--navy);
    background-image: linear-gradient(90deg, rgba(255,255,255,.14), rgba(255,255,255,0) 45%);
    box-shadow: var(--sh-1), inset 0 1px 0 rgba(255,255,255,.2);
    position: relative;
    padding-inline-start: 34px;
}
.section-title::before {
    content: "";
    position: absolute;
    inset-inline-start: 14px; top: 50%;
    transform: translateY(-50%);
    width: 8px; height: 60%;
    border-radius: var(--pill);
    background: linear-gradient(180deg, var(--teal), var(--gold));
}

/* ============================================================
   الأزرار
   ============================================================ */
.btn {
    font-size: 20px;
    font-weight: 600;
    padding: 10px 24px;
    border-radius: var(--pill);
    border: none;
    box-shadow: 0 10px 22px -14px rgba(6,52,76,.8), inset 0 1px 0 rgba(255,255,255,.28);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.btn:active { transform: translateY(0); }
.btn-sm { font-size: 15px; padding: 5px 12px; white-space: nowrap; }
.table td .btn, .table td form { margin: 2px 1px; vertical-align: middle; }
/* خلية الإجراءات: الأزرار في سطر واحد */
.table td:last-child { white-space: nowrap; }

.btn-primary  { background-color: var(--navy);  background-image: var(--gloss); color: #fff; }
.btn-primary:hover  { background-color: var(--navy-dark); }
.btn-success  { background-color: var(--teal);  background-image: var(--gloss); color: #fff; }
.btn-success:hover  { background-color: var(--teal-dark); }
.btn-warning  { background-color: var(--gold);  background-image: var(--gloss); color: #3A2A05; }
.btn-warning:hover  { background-color: #B5893A; color: #fff; }
.btn-info     { background-color: var(--navy-light); background-image: var(--gloss); color: #fff; }
.btn-danger   { background-color: #C0392B; background-image: var(--gloss); color: #fff; }
.btn-secondary{ background-color: #607D8B; background-image: var(--gloss); color: #fff; }
.btn-outline-secondary {
    background: #fff; color: var(--navy);
    border: 1px solid #C9DDE3; box-shadow: none;
}

/* ============================================================
   شاشة الدخول
   ============================================================ */
.login-wrap { max-width: 460px; margin: 54px auto; }
.login-card {
    position: relative;
    padding: 32px 32px 34px;
    color: #fff;
    border-radius: var(--r-xl);
    border: 1px solid rgba(255,255,255,.16);
    background-color: var(--navy);
    background-image:
        radial-gradient(420px 220px at 50% -40px, rgba(0,181,190,.45), transparent 70%),
        linear-gradient(165deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.04) 42%, rgba(0,0,0,.28) 100%);
    box-shadow: var(--sh-3), inset 0 1px 0 rgba(255,255,255,.26);
    overflow: hidden;
}
.login-card::before {
    content: "";
    position: absolute; inset: 0 0 auto 0; height: 5px;
    background: linear-gradient(90deg, var(--teal), var(--gold));
}
.login-logo {
    display: block;
    height: 130px; width: auto;
    margin: 6px auto 10px;
    filter: drop-shadow(0 10px 26px rgba(0,0,0,.6));
}
.login-calligraphy {
    display: block;
    height: 52px; width: auto;
    margin: 0 auto 18px;
    border-radius: var(--r-sm);
}
.login-title {
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    color: var(--gold-light);
    margin-bottom: 22px;
}
.login-card .form-label { font-size: 20px; color: #D9EDF1; }
.login-card .form-control {
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.22);
    color: #fff;
}
.login-card .form-control::placeholder { color: rgba(255,255,255,.55); }
.login-card .form-control:focus {
    background: rgba(255,255,255,.16);
    border-color: var(--teal);
    color: #fff;
    box-shadow: 0 0 0 .25rem rgba(0,181,190,.25);
}

/* ============================================================
   التذييل
   ============================================================ */
.app-footer {
    margin-top: auto;
    padding: 16px;
    font-size: 17px;
    text-align: center;
    color: #C3DEE4;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    background-color: var(--navy-dark);
    background-image: var(--gloss);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}

/* ============================================================
   التنبيهات والشارات
   ============================================================ */
.alert {
    font-size: 20px;
    border: none;
    border-radius: var(--r-md);
    padding: 15px 22px;
    box-shadow: var(--sh-1);
    border-inline-start: 6px solid transparent;
}
.alert-success { background: #E6F8F4; color: #0A5A4B; border-inline-start-color: #16A085; }
.alert-danger  { background: #FDECEA; color: #8E2B22; border-inline-start-color: #C0392B; }
.alert-info    { background: #E7F6F8; color: #0A4559; border-inline-start-color: var(--teal); }
.alert-warning { background: #FCF4E3; color: #6B4E12; border-inline-start-color: var(--gold); }

.badge {
    font-size: 16px;
    font-weight: 600;
    padding: 6px 13px;
    border-radius: var(--pill);
}

/* ============================================================
   بوابة المستفيدين
   ============================================================ */
.portal-bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 18px 26px;
    margin-bottom: 24px;
    color: #fff;
    border-radius: var(--r-lg);
    background-color: var(--navy);
    background-image:
        radial-gradient(520px 200px at 90% -60px, rgba(0,181,190,.35), transparent 70%),
        var(--gloss);
    box-shadow: var(--sh-2), inset 0 1px 0 rgba(255,255,255,.2);
    overflow: hidden;
}
.portal-bar::before {
    content: "";
    position: absolute;
    inset-inline-start: 0; top: 18%;
    width: 6px; height: 64%;
    border-radius: var(--pill);
    background: linear-gradient(180deg, var(--gold-light), var(--gold));
}
.portal-bar-title { font-size: 24px; font-weight: 700; }

.stat-box {
    position: relative;
    height: 100%;
    padding: 22px 16px 20px;
    text-align: center;
    background: var(--surface);
    border: 1px solid rgba(6,52,76,.07);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-1);
    overflow: hidden;
}
.stat-box::before {
    content: "";
    position: absolute; inset: 0 0 auto 0; height: 5px;
    background: linear-gradient(90deg, var(--teal), var(--gold));
}
.stat-num {
    font-size: 44px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--navy);
}
.stat-lbl {
    font-size: 18px;
    color: var(--slate);
    margin-top: 6px;
}

.portal-table td { vertical-align: middle; }
.portal-table tbody tr:hover { background: #E4F5F7; }

.adv-toggle {
    color: var(--teal) !important;
    font-weight: 700;
    font-size: 19px;
}
.adv-toggle:hover { color: var(--navy) !important; text-decoration: underline; }
.adv-box { border-top: 2px dashed #BCD9DE; }

.pagination { gap: 6px; }
.pagination .page-link {
    font-size: 18px;
    color: var(--navy);
    border: 1px solid var(--line);
    border-radius: var(--r-sm) !important;
    padding: 8px 16px;
}
.pagination .page-item.active .page-link {
    color: #fff;
    border-color: transparent;
    background-color: var(--teal);
    background-image: var(--gloss);
    box-shadow: 0 8px 18px -10px rgba(0,181,190,.9);
}

/* ============================================================
   شاشة إعدادات النظام
   ============================================================ */
.setting-row {
    padding: 16px 6px;
    border-bottom: 1px solid #E7F1F3;
    border-radius: var(--r-sm);
    transition: background-color .15s ease;
}
.setting-row:last-child { border-bottom: none; }
.setting-row:hover { background: #F3FAFB; }
.setting-hint {
    font-size: 15px;
    color: var(--slate);
    margin-top: 4px;
    line-height: 1.6;
}
.form-check-input:checked {
    background-color: var(--teal);
    border-color: var(--teal);
}
.form-switch .form-check-input { width: 3em; height: 1.5em; }
.form-control-color { max-width: 70px; padding: 4px; }

/* ============================================================
   نصوص عامة
   ============================================================ */
.small, small { font-size: 17px !important; }
.text-muted   { font-size: 18px; color: var(--slate) !important; }
h5, .h5 { font-size: 26px; font-weight: 700; }
h6, .h6 { font-size: 22px; font-weight: 600; }

/* ============================================================
   الشاشات الصغيرة
   ============================================================ */
@media (max-width: 991.98px) {
    .app-nav {
        border-radius: var(--r-lg);
        width: calc(100% - 24px);
        padding: 8px 14px;
    }
}
@media (max-width: 768px) {
    body { font-size: 19px; }
    .header-emblem    { height: 100px; }
    .head-calligraphy { height: 42px; }
    .header-spacer    { display: none; }
    .head-title       { font-size: 30px; }
    .head-sub         { font-size: 19px; }
    .head-system      { font-size: 20px; padding: 7px 18px; }
    .app-header       { border-radius: 0 0 var(--r-lg) var(--r-lg); }
    .menu-card        { min-height: 200px; }
    .menu-card .icon  { width: 76px; height: 76px; font-size: 34px; border-radius: 22px; }
    .menu-card .title { font-size: 22px; }

    /* الجداول على الهاتف: خط أصغر، والعناوين لا تنكسر، والجدول يتحرك أفقياً */
    .table, .table thead th { font-size: 16px; }
    .table thead th         { white-space: nowrap; }
    .table td               { min-width: 90px; }
    .table td .btn          { white-space: nowrap; }
    .card-header            { flex-wrap: wrap; gap: 10px; }
    .card-header > span:last-child { display: flex; flex-wrap: wrap; gap: 6px; }
}

/* ============================================================
   احترام تقليل الحركة
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
    .menu-card:hover, .btn:hover { transform: none; }
}

/* ============================================================
   الطباعة
   ============================================================ */
@media print {
    body {
        background: #fff !important;
        font-size: 15px;
    }
    .app-nav, .app-footer, .no-print, .header-strip,
    .portal-bar, .portal-stats, .pagination { display: none !important; }
    .app-header {
        background: #fff !important;
        color: #000 !important;
        border-radius: 0;
        border-bottom: 2px solid var(--navy);
        box-shadow: none;
    }
    .head-title, .head-sub, .head-system {
        color: var(--navy) !important;
        text-shadow: none;
        background: none;
        border: none;
    }
    .header-emblem    { height: 100px; }
    .head-calligraphy { height: 40px; }
    .header-spacer    { display: none; }
    .card, .menu-card, .stat-box, .table-responsive {
        box-shadow: none;
        border: 1px solid #C7D7DC;
    }
    .card-header, .table thead th {
        background: #E8F1F4 !important;
        color: #000 !important;
        box-shadow: none;
    }
}