/* ---------- self-hosted Noto Sans Arabic: one variable font file covers weights 100-900 (fonts/NotoSansArabic, OFL licence included) ---------- */
@font-face {
    font-family: 'Noto Sans Arabic';
    font-weight: 100 900;
    font-stretch: 62.5% 100%;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/NotoSansArabic/NotoSansArabic-Variable.ttf") format("truetype");
}

/* SMC-specific bridge between the WLMS theme and this app's existing styles.
   Load AFTER wl-theme.css and wl-panels.css.

   Site.css ("SMC UI MODERNIZATION" block) and css/NavbarModern.css were written
   before the WLMS theme and pin hardcoded navy/green colors with !important or
   higher specificity, so the theme's own (mostly non-important) rules lose to
   them. This file re-asserts the theme palette (--wl-* tokens) on exactly those
   rules. Colors / typography only — no padding, margin, width or height here,
   so Site.css keeps owning every size in the app. */

/* ---------- typography ---------- */
/* Site.css forces 'Droid Arabic Kufi' with !important on body + .form-control */
body,
.form-control {
    font-family: 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif !important;
}

/* ---------- section headings / legend ---------- */
main h4,
.panel-body > h4,
.new-request h4,
.site-panel h4 { color: var(--wl-mohp-800); }
main h4::before,
.panel-body > h4::before,
.new-request h4::before,
.site-panel h4::before { background-color: var(--wl-mohp-600); }
legend { color: var(--wl-mohp-800) !important; }

/* ---------- form fields ---------- */
.form-control:hover:not(:focus):not([disabled]):not([readonly]) {
    background-color: #fff !important;
    border-color: var(--wl-slate-300) !important;
}

/* ---------- Select2 option highlight (Site.css pins green) ---------- */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--wl-sky-50) !important;
    color: var(--wl-mohp-700) !important;
}

/* ---------- buttons (Site.css pins every .btn-* color with !important) ---------- */
.btn-default {
    background: #fff !important;
    border-color: var(--wl-slate-200) !important;
    color: var(--wl-slate-700) !important;
}
.btn-default:hover, .btn-default:focus {
    background: var(--wl-slate-50) !important;
    border-color: var(--wl-slate-300) !important;
    color: var(--wl-slate-800) !important;
}
.btn-primary {
    background: linear-gradient(90deg, var(--wl-mohp-700), var(--wl-mohp-600)) !important;
    border-color: var(--wl-mohp-700) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(3, 105, 161, .25);
}
.btn-primary:hover, .btn-primary:focus {
    background: linear-gradient(90deg, var(--wl-mohp-800), var(--wl-mohp-700)) !important;
    border-color: var(--wl-mohp-800) !important;
}
.btn-success { background: var(--wl-emerald) !important; border-color: var(--wl-emerald) !important; color: #fff !important; }
.btn-success:hover, .btn-success:focus { background: var(--wl-emerald-dark) !important; border-color: var(--wl-emerald-dark) !important; }
.btn-danger { background: var(--wl-red) !important; border-color: var(--wl-red) !important; color: #fff !important; }
.btn-danger:hover, .btn-danger:focus { background: var(--wl-red-dark) !important; border-color: var(--wl-red-dark) !important; }
.btn-warning { background: var(--wl-amber) !important; border-color: var(--wl-amber) !important; color: #fff !important; }
.btn-warning:hover, .btn-warning:focus { background: var(--wl-amber-dark) !important; border-color: var(--wl-amber-dark) !important; }
.btn-info { background: var(--wl-mohp-500) !important; border-color: var(--wl-mohp-500) !important; color: #fff !important; }
.btn-info:hover, .btn-info:focus { background: var(--wl-mohp-600) !important; border-color: var(--wl-mohp-600) !important; }

/* theme intent: a button attached to an input renders as a quiet white addon,
   whatever .btn-* class it carries (beats the !important rules above) */
.input-group-btn > .btn {
    background: #fff !important;
    border-color: var(--wl-slate-200) !important;
    color: var(--wl-slate-500) !important;
    box-shadow: none;
}
.input-group-btn > .btn:hover,
.input-group-btn > .btn:focus {
    background: var(--wl-sky-50) !important;
    border-color: var(--wl-mohp-500) !important;
    color: var(--wl-mohp-700) !important;
}

/* ---------- tables (Site.css selectors carry an id via :not(#decreeTable)) ---------- */
.table:not(#decreeTable) > thead > tr > th,
.table:not(#decreeTable) > tbody > tr > th { background-color: var(--wl-mohp-800) !important; }
.table:not(#decreeTable) > tbody > tr > td { color: var(--wl-slate-800) !important; }
.table-hover > tbody > tr:hover > td:not([style*="lightcoral"]):not(.lightcoral) { background-color: var(--wl-sky-50) !important; }

/* ---------- panels (Site.css pins border/shadow/heading with !important) ---------- */
.panel {
    border: 1px solid rgba(15, 23, 42, .06) !important;
    box-shadow: 0 4px 20px -4px rgba(15, 23, 42, .08), 0 1px 3px rgba(15, 23, 42, .04) !important;
}
.panel-default > .panel-heading {
    background-color: #fff !important;
    border-bottom: 1px solid rgba(15, 23, 42, .06) !important;
    color: var(--wl-mohp-800) !important;
}

/* ---------- pagination (Site.css pins green active / grey hover) ---------- */
.pagination > li > a:hover,
.pagination > li > span:hover {
    background-color: var(--wl-sky-50) !important;
    border-color: var(--wl-mohp-500) !important;
    color: var(--wl-mohp-700) !important;
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover {
    background-color: var(--wl-mohp-700) !important;
    border-color: var(--wl-mohp-700) !important;
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(3, 105, 161, .3) !important;
}

/* ---------- modals ---------- */
.modal-header { background-color: var(--wl-mohp-800) !important; }

/* ---------- header / nav (NavbarModern.css is dark navy + green) ---------- */
header .site-head .logo p span,
header .site-head .mcit p span { color: var(--wl-mohp-800); font-weight: 700; }
header .mcit .header-utility .user-area .text { color: var(--wl-mohp-700); }

.CustomNav .navbar-default .navbar-nav > li > a { color: #e0f2fe; }
header .navbar-default .navbar-nav > li > a:hover,
header .navbar-default .navbar-nav > li > a:focus,
header .navbar-default .navbar-nav > .open > a,
header .navbar-default .navbar-nav > .open > a:hover,
header .navbar-default .navbar-nav > .open > a:focus { background-color: rgba(255, 255, 255, .12) !important; }
header .navbar-default .navbar-nav > .active > a,
header .navbar-default .navbar-nav > .active > a:hover,
header .navbar-default .navbar-nav > .active > a:focus { background-color: rgba(255, 255, 255, .15) !important; }
header .navbar-default .navbar-toggle:hover,
header .navbar-default .navbar-toggle:focus { background-color: rgba(255, 255, 255, .12); }

/* NavbarModern paints dropdowns dark; the theme's dropdown is a white card */
header .navbar-default .dropdown-menu,
header .navbar-default .dropdown-submenu .dropdown-menu,
header .navbar-default .navbar-nav .dropdown-submenu .dropdown-menu { background-color: #fff; }

/* ---------- form text size (Noto Sans Arabic runs small at the old 13px) ----------
   Font-size only; the 38px control heights from Site.css are unchanged. */
.form-control,
.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-results__option { font-size: 16px !important; }
.form-group label { font-size: 14px; }

/* ---------- readonly / disabled readability ----------
   Dark text on a slightly darker field: legible, but still distinct from an
   editable (white) field. Replaces the pale #94a3b8 / slate-500 text. */
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
    background-color: var(--wl-slate-100) !important;
    color: var(--wl-slate-800) !important;
    -webkit-text-fill-color: var(--wl-slate-800);
    border-color: var(--wl-slate-300) !important;
    opacity: 1 !important;
}
.select2-container.select2-container--disabled .select2-selection--single {
    background-color: var(--wl-slate-100) !important;
    border-color: var(--wl-slate-300) !important;
}
.select2-container--disabled .select2-selection--single .select2-selection__rendered {
    color: var(--wl-slate-800) !important;
}

/* ---------- keep lightcoral cells lightcoral (hover / striping must not repaint them) ----------
   Cells flagged with an inline background-color:lightcoral. Case-insensitive match,
   and selector specificity high enough to out-rank every hover/stripe rule above
   and in Site.css. */
html body .table > tbody > tr > td[style*="lightcoral" i],
html body .table > tbody > tr:hover > td[style*="lightcoral" i],
html body .table-striped > tbody > tr:nth-of-type(odd) > td[style*="lightcoral" i],
html body .table-striped > tbody > tr:nth-of-type(even) > td[style*="lightcoral" i],
html body .table-hover > tbody > tr:hover > td[style*="lightcoral" i] {
    background-color: lightcoral !important;
}

/* ---------- header / navbar / footer: font-size +1px only (no other changes) ---------- */
.CustomNav .navbar-default .navbar-nav > li > a { font-size: 17px !important; }
header .navbar-default .dropdown-menu > li > a { font-size: 17px !important; }

header .logo p span:first-child { font-size: 16px; }
header .logo p span:nth-child(2) { font-size: 15px; }
header .logo p span:nth-child(3) { font-size: 14px; }
header .mcit p span { font-size: 15px; }
header .mcit p span:nth-child(2) { font-size: 14px; }
header .mcit .header-utility .user-area > a { font-size: 12px; }
header .mcit .header-utility .user-area .dropdown-menu > li > a { font-size: 13px; }

footer .copyrights { font-size: 16px; }