/* Modern re-skin of the site header/navbar (dark navy + gold + emerald accents).
   Overrides Content/style.min.css's header/.navbar-default rules in place —
   markup, links, dropdown items and logo image are untouched. */

header .site-head {
    background: #ffffff;
    border-bottom: 2px solid rgba(197, 155, 39, 0.6);
    box-shadow: 0 2px 10px rgba(2, 6, 23, 0.08);
}

header .site-head .navbar-brand {
    display: inline-block;
    background-color: #ffffff;
    padding: 6px;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(2, 6, 23, 0.08);
}

header .site-head .navbar-brand img {
    display: block;
}

/* The old .custom-container/.logo/.mcit layout relied on position:absolute +
   top:48%/transform:translateY(-50%) (see style.min.css) to vertically center
   two floated blocks — a pre-flexbox centering hack that no longer works now
   that .mcit stacks two rows (the relocated .header-utility cluster above the
   council-identity text). Laid out with plain floats + a clearfix instead of
   flexbox: .logo/.mcit already carry Bootstrap's .pull-right/.pull-left in
   the markup, so this just clears the old absolute-position/centering rules
   and lets them stack in normal block flow. */
header .site-head .custom-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px 20px !important;
    box-sizing: border-box !important;
    /* style.min.css sets overflow:hidden here (an old float-clearfix
       substitute) — that was clipping the user-menu/notifications dropdowns
       that live inside .mcit, cutting off everything but a sliver of text.
       The ::after clearfix below replaces the need for overflow:hidden. */
    overflow: visible !important;
}

header .site-head .custom-container::after {
    content: "";
    display: table;
    clear: both;
}

header .logo,
header .mcit,
header .logo p,
header .mcit p {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    min-width: 0;
    transform: none;
}

/* When logged out, .mcit has no .header-utility row above the council text
   (see _LoginPartial's @if (user != null) guard), so it sits noticeably
   higher than when logged in — nudge it down to roughly match. */
header .mcit.mcit-logged-out {
    margin-top: 20px;
}

/* Vertically center the "جمهورية مصر العربية / وزارة الصحة والسكان" text
   against the logo image using table/table-cell — the classic pre-flexbox
   centering technique — rather than flexbox. */
header .logo {
    display: table;
    border-spacing: 12px 0;
}

header .logo .navbar-brand {
    display: table-cell;
    vertical-align: middle;
}

header .logo p {
    display: table-cell;
    vertical-align: middle;
}

/* Weight hierarchy matching the reference: the country name reads bolder
   than the ministry/council line beneath it, instead of both lines sharing
   the same site-wide forced bold weight. */
header .logo p span,
header .mcit p span {
    display: block;
    color: #334155;
    font-weight: 600;
}

header .logo p span:first-child {
    color: #0f172a;
    font-weight: 800;
}

header .mcit p span:first-child {
    color: #15803d;
    font-weight: 800;
}

header .mcit p span:nth-child(2) {
    color: #64748b;
    font-weight: 600;
}

/* ── Header utility cluster (notifications + "مرحباً" user menu) ─────────
   Relocated from the old standalone .top-nav strip (dark bg, white text)
   into the white .site-head, above the council-identity text — same markup
   and dropdown behavior, restyled for a light background. */
header .mcit .header-utility {
    margin-bottom: 6px;
}

header .mcit .header-utility .menu-nav {
    float: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

header .mcit .header-utility .menu-nav > li {
    float: none;
    padding: 0;
    margin: 0 !important;
}

header .mcit .header-utility .alert-area .alert-icon > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #fdecef;
    color: #c8102e;
    font-size: 13px;
    transition: background-color 0.2s ease;
}

header .mcit .header-utility .alert-area .alert-icon > a:hover {
    background: #fbdde2;
}

header .mcit .header-utility .alert-area .alert-icon img {
    display: none;
}

header .mcit .header-utility .alert-area .alert-icon .alert-count {
    position: absolute;
    top: -4px;
    left: -4px;
    background-color: #c8102e;
}

header .mcit .header-utility .user-area > a {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 4px 10px 4px 8px;
    color: #334155 !important;
    font-size: 11px;
    font-weight: 700;
}

header .mcit .header-utility .user-area > a:hover {
    background: #e9eef3;
}

header .mcit .header-utility .user-area .user-img {
    position: static;
    float: none;
    max-width: 20px;
    max-height: 20px;
    margin: 0;
    box-shadow: none;
}

header .mcit .header-utility .user-area .text {
    margin-left: 0;
    color: #15803d;
    font-family: monospace;
}

header .mcit .header-utility .user-area .caret {
    color: #94a3b8;
}

/* User menu dropdown (صفحة الإعدادات / تغيير اللغة / تسجيل الخروج) — was a
   plain blue-bordered list with mismatched glyphicon-cog on every row
   (including logout). Cleaner card, icon per action, red-tinted logout row. */
header .mcit .header-utility .user-area .dropdown-menu {
    min-width: 190px;
    padding: 6px;
    margin-top: 10px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(2, 6, 23, 0.14);
}

header .mcit .header-utility .user-area .dropdown-menu > li > a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border-bottom: none;
    border-radius: 7px;
    color: #334155;
    font-size: 12px;
    font-weight: 600;
    width: 100%;
}

header .mcit .header-utility .user-area .dropdown-menu > li > a:hover {
    background: #f1f5f9;
    color: #0f172a;
}

header .mcit .header-utility .user-area .dropdown-menu > li > a i {
    width: 14px;
    text-align: center;
    color: #94a3b8;
}

header .mcit .header-utility .user-area .dropdown-menu .logout-link {
    color: #b91c1c;
}

header .mcit .header-utility .user-area .dropdown-menu .logout-link i {
    color: #b91c1c;
}

header .mcit .header-utility .user-area .dropdown-menu .logout-link:hover {
    background: #fef2f2;
    color: #991b1b;
}

/* Arrow pointer (.arrow.right, style.min.css) recolored to match the new
   light card instead of the old blue-bordered dropdown. */
header .mcit .header-utility .user-area .arrow.right:before {
    border-bottom-color: #e2e8f0;
}

header .mcit .header-utility .user-area .arrow.right:after {
    border-bottom-color: #ffffff;
}

.navbar-default {
    background: linear-gradient(to left, #020617, #0f172a 55%, #020617);
    border-color: transparent;
}

.navbar-default .navbar-nav > li > a {
    color: #cbd5e1;
    border-radius: 10px;
    margin: 8px 2px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #ffffff;
    background-color: rgba(148, 163, 184, 0.15) !important;
}

.navbar-default .navbar-nav > .active > a {
    color: #ffffff;
    background-color: #15803d;
}

.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: #ffffff;
    background-color: #15803d !important;
}

.navbar-default .navbar-nav > .open > a {
    background-color: rgba(148, 163, 184, 0.15) !important;
    color: #ffffff;
}

.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
    color: #ffffff;
}

.navbar-default .navbar-nav .navbar-collapse,
.navbar-default .navbar-nav .navbar-form {
    border-color: #15803d;
}

.navbar-default .navbar-toggle {
    border: none;
}

.navbar-default .navbar-toggle:hover {
    background-color: #15803d;
}

.navbar-default .navbar-toggle:focus {
    background-color: #166534;
}

.navbar-default .dropdown-menu {
    background-color: #0f172a;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(2, 6, 23, 0.35);
}

/* Rounded corners via the first/last item instead of overflow:hidden on the
   menu itself — overflow:hidden here was clipping nested dropdown-submenu
   flyouts (e.g. "إعدادات عامة"), making them toggle open but stay invisible. */
.navbar-default .dropdown-menu > li:first-child > a {
    border-top-left-radius: 9px;
    border-top-right-radius: 9px;
}

.navbar-default .dropdown-menu > li:last-child > a {
    border-bottom-left-radius: 9px;
    border-bottom-right-radius: 9px;
}

.navbar-default .dropdown-menu > li > a {
    color: #cbd5e1;
}

.navbar-default .dropdown-menu > li > a:hover,
.navbar-default .dropdown-menu > li > a:focus {
    color: #ffffff;
    background-color: rgba(21, 128, 61, 0.35);
}

.navbar-default .dropdown-submenu .dropdown-menu {
    background-color: #0f172a;
}

footer {
    background: linear-gradient(to left, #020617, #1e293b 55%, #020617);
    border-top: 2px solid rgba(197, 155, 39, 0.6);
    color: #cbd5e1;
}

footer .copyrights {
    color: #fff;
}