/* ============================================================
   SOPC Employee Portal – Brand Theme (Enhanced)
   شركة السويس لتصنيع البترول
   Primary: #214AA1 (Navy) | Accent: #23B2EB (Cyan) | Blue: #0DA9DD
   ============================================================ */
:root {
    --sopc-navy: #214AA1;
    --sopc-navy-dark: #1a3a7d;
    --sopc-navy-light: #2d5ab8;
    --sopc-cyan: #23B2EB;
    --sopc-cyan-soft: rgba(35, 178, 235, 0.12);
    --sopc-blue: #0DA9DD;
    --sopc-white: #ffffff;
    --sopc-page-bg: #eef2f7;
    --sopc-page-bg-end: #e2e8f0;
    --sopc-card-shadow: 0 4px 20px rgba(33, 74, 161, 0.08);
    --sopc-card-shadow-hover: 0 12px 32px rgba(33, 74, 161, 0.12);
    --sopc-radius: 12px;
    --sopc-radius-lg: 16px;
    --sopc-radius-xl: 20px;
    --sopc-success: #0d9488;
    --sopc-success-soft: rgba(13, 148, 136, 0.12);
    --sopc-warning: #d97706;
    --sopc-danger-soft: rgba(220, 38, 38, 0.08);
    --sopc-text: #1e293b;
    --sopc-text-muted: #64748b;
}

/* Global: modern body and typography; no margin so footer can sit flush */
html,
body {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100vh;
}
body {
    font-family: 'Noto Kufi Arabic', 'Rubik', sans-serif !important;
    background-color: var(--sopc-page-bg) !important;
    color: var(--sopc-text);
    -webkit-font-smoothing: antialiased;
}
#main-wrapper {
    min-height: 100vh !important;
}

/* RTL: keep main content left of sidebar so it does not go under it (sidebar width 260px) */
html[dir="rtl"] #main-wrapper .page-wrapper {
    margin-right: 260px !important;
    margin-left: 0 !important;
}
@media (max-width: 991px) {
    html[dir="rtl"] #main-wrapper .page-wrapper {
        margin-right: 0 !important;
    }
}

/* Page content area: soft gradient + subtle depth; flex so footer stays at bottom */
#main-wrapper .page-wrapper {
    background: linear-gradient(165deg, var(--sopc-page-bg) 0%, var(--sopc-page-bg-end) 50%, var(--sopc-page-bg) 100%) !important;
    min-height: calc(100vh - 64px);
    position: relative;
    display: flex;
    flex-direction: column;
}
#main-wrapper .page-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(33, 74, 161, 0.04) 1px, transparent 0);
    background-size: 24px 24px;
    pointer-events: none;
}
#main-wrapper .page-wrapper .page-content-wrap {
    flex: 1 1 auto;
    padding-bottom: 24px !important;
    padding-top: 24px !important;
}

/* Content container: card-like feel, even border (no single-side line) */
.page-content-wrap .container {
    background: var(--sopc-white);
    border-radius: var(--sopc-radius-xl);
    border: 1px solid rgba(33, 74, 161, 0.1) !important;
    box-shadow: 0 4px 20px rgba(33, 74, 161, 0.08);
    padding: 28px 24px 32px;
    margin-bottom: 24px;
    outline: none;
}
@media (max-width: 576px) {
    .page-content-wrap .container { padding: 20px 16px 24px; }
}

/* Footer: at bottom of page (document flow), not fixed to viewport */
.footer,
footer.footer {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    margin: 0 !important;
    margin-top: auto !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
}
/* Cover any sub-pixel gap below footer (e.g. rounding / 100vh) */
.footer::after,
footer.footer::after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 12px;
    background: linear-gradient(180deg, var(--sopc-navy-dark) 0%, var(--sopc-navy-dark) 100%) !important;
    pointer-events: none;
}

/* Topbar: solid SOPC navy (no transparency), readable text */
.topbar,
.topbar .navbar-collapse,
.topbar .top-navbar,
.topbar[data-navbarbg],
#main-wrapper .topbar .top-navbar .navbar-header[data-logobg],
#main-wrapper .topbar[data-navbarbg="skin1"],
#main-wrapper .topbar .navbar-collapse[data-navbarbg="skin1"] {
    background: var(--sopc-navy) !important;
    background-image: none !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15) !important;
}

.topbar .top-navbar .navbar-nav > .nav-item:hover {
    background: var(--sopc-navy-dark) !important;
}
.topbar .navbar-brand .logo {
    border-radius: var(--sopc-radius) !important;
    padding: 4px 8px !important;
}

/* Keep logo on navbar: single row (no wrap), logo centered in bar */
.topbar .top-navbar {
    position: relative;
    flex-wrap: nowrap;
    min-height: 56px;
}
.topbar .top-navbar .navbar-header {
    position: static;
    width: auto;
    flex: 0 0 auto;
    min-width: 0;
}
.topbar .navbar-brand.navbar-brand-centered {
    position: absolute;
    left: 50%;
    right: auto;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
}
html[dir="rtl"] .topbar .navbar-brand.navbar-brand-centered {
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
}
.topbar .navbar-brand.navbar-brand-centered .logo {
    padding: 4px 12px !important;
}
.topbar .navbar-brand.navbar-brand-centered .sopc-logo-wrap {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.topbar .navbar-brand.navbar-brand-centered .sopc-logo-img {
    width: 40px;
    height: 40px;
    max-height: 40px;
    object-fit: contain;
}
@media (max-width: 767.98px) {
    /* Mobile: logo in flow (right side with hamburger), not centered */
    .topbar .navbar-brand.navbar-brand-centered {
        position: static !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
    }
    .topbar .navbar-brand.navbar-brand-centered .sopc-logo-img {
        width: 36px;
        height: 36px;
        max-height: 36px;
    }
    .topbar .navbar-brand.navbar-brand-centered .logo {
        padding: 2px 8px !important;
    }
    /* Spacer: pushes (profile + notification) to left, (menu + logo) to right */
    .topbar .navbar-header .mobile-header-spacer {
        flex: 1;
        min-width: 0;
    }
    /* Snapshot style: small padding from edges; top padding keeps notification badge fully visible */
    .topbar .top-navbar {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        padding-inline-start: 0px !important;
        padding-inline-end: 12px !important;
    }
    .topbar .navbar-header {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        width: 100%;
        padding-inline-start: 0 !important;
        padding-inline-end: 100% !important;
    }
    /* LTR: left = three dots + bell (order 0), right = hamburger + logo (order 2) */
    .topbar .navbar-header .mobile-notifications-dropdown,
    .topbar .navbar-header .mobile-profile-dropdown {
        order: 0;
    }
    .topbar .navbar-header .mobile-profile-dropdown {
        margin-inline-start: 0 !important;
        margin-inline-end: 0.5rem;
    }
    .topbar .navbar-header .mobile-notifications-dropdown {
        margin-inline-start: 25% !important;
        margin-inline-end: 0.5rem;
    }
    .topbar .navbar-header .mobile-header-spacer {
        order: 1;
    }
    .topbar .navbar-header .topbartoggler,
    .topbar .navbar-header .navbar-brand.navbar-brand-centered {
        order: 2;
    }
    .topbar .navbar-header .topbartoggler {
        margin-inline-end: 0.5rem;
    }
    /* RTL: left = notification + profile (order 2), right = menu + logo (order 0) */
    html[dir="rtl"] .topbar .navbar-header .mobile-notifications-dropdown,
    html[dir="rtl"] .topbar .navbar-header .mobile-profile-dropdown {
        order: 2;
    }
    html[dir="rtl"] .topbar .navbar-header .mobile-header-spacer {
        order: 1;
    }
    html[dir="rtl"] .topbar .navbar-header .topbartoggler,
    html[dir="rtl"] .topbar .navbar-header .navbar-brand.navbar-brand-centered {
        order: 0;
    }
    html[dir="rtl"] .topbar .navbar-header .mobile-notifications-dropdown {
        margin-inline-end: 0 !important;
        margin-inline-start: 0.5rem;
    }
}

/* Navbar text and icons: solid white (only in top-navbar, not inside dropdown menus) */
.topbar .top-navbar .navbar-header a,
.topbar .top-navbar .navbar-header .sidebartoggler,
.topbar .top-navbar .nav-link,
.topbar .top-navbar .navbar-nav > .nav-item > .nav-link,
.topbar .nav-toggler,
.topbar .topbartoggler,
.topbar .font-medium.d-none.d-sm-inline-block,
.topbar .top-navbar .navbar-header .mdi,
.topbar .top-navbar .navbar-nav > .nav-item > .nav-link .mdi,
.topbar .top-navbar .navbar-nav > .nav-item > .nav-link i {
    color: #ffffff !important;
}

.topbar .top-navbar .nav-link:hover,
.topbar .top-navbar .navbar-nav > .nav-item > .nav-link:hover {
    color: #ffffff !important;
}

/* User avatar area: keep text white */
.topbar .top-navbar .navbar-nav > .nav-item.dropdown > .nav-link {
    color: #ffffff !important;
}

.topbar .top-navbar .navbar-nav > .nav-item.dropdown > .nav-link .font-medium {
    color: #ffffff !important;
}

.topbar .ti-menu,
.topbar .ti-more,
.topbar .top-navbar > .navbar-header [class*="ti-"],
.topbar .top-navbar .navbar-nav > .nav-item > .nav-link [class*="ti-"] {
    color: #ffffff !important;
}

/* Dropdown menus: keep icons and text dark on white background */
.topbar .dropdown-menu .dropdown-item,
.topbar .dropdown-menu .dropdown-item i,
.topbar .dropdown-menu .dropdown-item .fa,
.topbar .dropdown-menu [class*="ti-"] {
    color: #212529 !important;
}

.topbar .dropdown-menu .dropdown-item:hover,
.topbar .dropdown-menu .dropdown-item:hover i,
.topbar .dropdown-menu .dropdown-item:hover .fa,
.topbar .dropdown-menu .dropdown-item:hover [class*="ti-"] {
    color: #212529 !important;
}

/* Nav links and text inside dropdown (e.g. "عرض كل الاشعارات") must be dark */
.topbar .dropdown-menu .nav-link,
.topbar .dropdown-menu .nav-link strong,
.topbar .dropdown-menu .nav-link i,
.topbar .dropdown-menu .nav-link .fa {
    color: #212529 !important;
}
.topbar .dropdown-menu .nav-link:hover {
    color: var(--sopc-navy, #214aa1) !important;
}
/* Notification message items: title, desc, time visible on white */
.topbar .dropdown-menu .message-item .mail-contnet,
.topbar .dropdown-menu .message-item .message-title,
.topbar .dropdown-menu .message-item .mail-desc,
.topbar .dropdown-menu .message-item .time {
    color: #212529 !important;
}

.topbar .dropdown-menu {
    border-radius: var(--sopc-radius) !important;
    box-shadow: 0 12px 32px rgba(33, 74, 161, 0.15) !important;
    border: none !important;
    padding: 8px 0 !important;
}
.topbar .dropdown-menu .message-item {
    border-radius: 8px;
    margin: 2px 8px;
    transition: background 0.2s ease;
}
.topbar .dropdown-menu .message-item:hover {
    background: var(--sopc-cyan-soft) !important;
}
.page-content-wrap hr {
    border: none;
    border-top: 1px solid rgba(33, 74, 161, 0.12);
    margin: 20px 0;
}

/* Vacation request form actions: nicer layout on mobile */
@media (max-width: 575.98px) {
    .vacation-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        justify-content: flex-start;
    }
    .vacation-actions .btn {
        flex: 1 1 100%;
        max-width: 100%;
        margin: 0 !important;
    }
}

/* Manager bulk actions (accept / reject selected): desktop + mobile */
.bulk-actions-wrap .btn {
    min-width: 180px;
}
@media (max-width: 575.98px) {
    .bulk-actions-wrap {
        justify-content: flex-start;
        gap: 0.5rem;
    }
    .bulk-actions-wrap .btn {
        flex: 1 1 100%;
        max-width: 100%;
        margin: 0 !important;
    }
}

/* Page breadcrumb header (title + action button): stack nicely on mobile */
@media (max-width: 575.98px) {
    .page-breadcrumb .row.align-items-center {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
    .page-breadcrumb .row.align-items-center > [class*="col-"] {
        width: 100%;
        max-width: 100%;
    }
    .page-breadcrumb .managers-toggle-btn {
        width: 100%;
    }
}

/* Vacation manager: show subordinates button same visual weight as bulk approve / reject */
.managers-toggle-btn {
    min-width: 180px;
}

/* Users manage page (reset_any): layout tweaks */
.users-search-card,
.users-manage-card {
    margin-top: 0.75rem;
    border-radius: var(--sopc-radius-xl, 18px);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
    border: 1px solid rgba(33, 74, 161, 0.08);
}
.users-search-card .card-body,
.users-manage-card .card-body {
    padding: 20px 22px;
}
.users-search-form .contest-input {
    font-size: 0.9rem;
}
.users-search-form .contest-label {
    font-weight: 600;
    color: var(--sopc-navy);
    margin-bottom: 4px;
}
.users-search-form .form-control.contest-input:not(textarea) {
    border-radius: 999px;
    border-color: rgba(33, 74, 161, 0.25);
    padding-inline: 1rem;
    min-height: 42px;
    height: 42px;
    background-color: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.users-search-form .form-control.contest-input:not(textarea):focus {
    border-color: var(--sopc-cyan, #23b2eb);
    box-shadow: 0 0 0 3px rgba(35, 178, 235, 0.2);
    outline: none;
}
.users-search-form .form-select.contest-input {
    border-radius: 999px;
    border-color: rgba(33, 74, 161, 0.25);
    padding-inline: 1rem;
    height: 42px;
    background-color: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}
.users-search-form .form-select.contest-input:focus {
    border-color: var(--sopc-cyan, #23b2eb);
    box-shadow: 0 0 0 3px rgba(35, 178, 235, 0.2);
    outline: none;
}
.users-search-form .btn {
    border-radius: 999px;
}
.users-manage-table th,
.users-manage-table td {
    white-space: nowrap;
}
.users-manage-table thead th {
    padding: 12px 10px;
    background: linear-gradient(135deg, var(--sopc-navy) 0%, var(--sopc-navy-dark) 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}
.users-role-select {
    min-width: 180px;
    border-radius: 999px;
    border-color: rgba(33, 74, 161, 0.25);
    padding-inline: 1rem;
    height: 40px;
    background-color: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}
.users-role-form {
    gap: 0.5rem;
}
@media (max-width: 767.98px) {
    .users-role-form {
        flex-direction: column;
        align-items: stretch;
    }
    .users-role-select {
        width: 100%;
    }
    .users-role-form .btn {
        width: 100%;
    }
}

.users-password-btn {
    border-radius: 999px;
}

.users-role-form .btn.btn-outline-primary {
    border-radius: 999px;
    padding-inline: 1.25rem;
    font-weight: 600;
    border-color: var(--sopc-blue, #23b2eb);
    color: var(--sopc-blue, #23b2eb);
}
.users-role-form .btn.btn-outline-primary:hover,
.users-role-form .btn.btn-outline-primary:focus {
    background: var(--sopc-blue, #23b2eb);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(35, 178, 235, 0.35);
}

/* Notification badge on navbar: readable on navy */
.topbar .badge-pill.badge-info.noti {
    background: #ffffff !important;
    color: var(--sopc-navy) !important;
}

/* Navbar logo: solid background (no transparency) */
.sopc-logo-wrap {
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: #ffffff !important;
    padding: 6px 10px;
    border-radius: 10px;
    margin-left: 8px !important;
}
html[dir="rtl"] .sopc-logo-wrap {
    margin-left: 0 !important;
    margin-right: 8px !important;
}

.sopc-logo-img {
    width: 36px;
    height: auto;
    max-height: 40px;
    object-fit: contain;
    border-radius: 8px;
    display: block;
}
/* User avatar in navbar: shape and border */
.topbar .top-navbar .navbar-nav .rounded-circle[width="40"],
.topbar .pro-pic img.rounded-circle {
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    object-fit: cover;
}
.dropdown-menu.user-dd .rounded-circle[width="60"] {
    border: 3px solid var(--sopc-white);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    object-fit: cover;
}

.sopc-portal-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #ffffff !important;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Sidebar: SOPC navy with cyan accents; remove blue lines at top and bottom */
.left-sidebar,
#main-wrapper .left-sidebar[data-sidebarbg="skin1"],
#main-wrapper .left-sidebar[data-sidebarbg="skin1"] ul {
    background: linear-gradient(180deg, var(--sopc-navy-dark) 0%, var(--sopc-navy) 100%) !important;
    box-shadow: 2px 0 16px rgba(0, 0, 0, 0.08) !important;
    border-top: none !important;
    border-bottom: none !important;
}

.left-sidebar .scroll-sidebar,
.scroll-sidebar {
    border-top: none !important;
    border-bottom: none !important;
}

/* Remove any blue line between topbar and sidebar / sidebar and footer */
.topbar {
    border-bottom: none !important;
}

.left-sidebar::before,
.left-sidebar::after,
.left-sidebar .scroll-sidebar::before,
.left-sidebar .scroll-sidebar::after {
    display: none !important;
}

.sidebar-nav ul .sidebar-item .sidebar-link {
    color: rgba(255, 255, 255, 0.85) !important;
    transition: all 0.2s ease !important;
}

.sidebar-nav ul .sidebar-item .sidebar-link i {
    color: var(--sopc-cyan) !important;
}

.sidebar-nav ul .sidebar-item .sidebar-link:hover,
.sidebar-nav ul .sidebar-item .sidebar-link.active,
.sidebar-nav ul .sidebar-item.selected .sidebar-link {
    background: rgba(35, 178, 235, 0.2) !important;
    color: var(--sopc-white) !important;
    opacity: 1 !important;
}

.sidebar-nav ul .sidebar-item .sidebar-link:hover i,
.sidebar-nav ul .sidebar-item .sidebar-link.active i,
.sidebar-nav ul .sidebar-item.selected .sidebar-link i {
    color: var(--sopc-cyan) !important;
}

/* Sidebar active/hover accent – RTL */
html[dir="rtl"] .sidebar-nav > #sidebarnav > .sidebar-item > .sidebar-link {
    border-right: 3px solid transparent !important;
    border-left: none !important;
}
html[dir="rtl"] .sidebar-nav > #sidebarnav > .sidebar-item > .sidebar-link:hover,
html[dir="rtl"] .sidebar-nav > #sidebarnav > .sidebar-item > .sidebar-link.active,
html[dir="rtl"] .sidebar-nav > #sidebarnav > .sidebar-item.selected > .sidebar-link {
    border-right: 3px solid var(--sopc-cyan) !important;
    border-left: none !important;
}

.sidebar-nav .nav-small-cap {
    color: rgba(255, 255, 255, 0.5) !important;
    opacity: 1 !important;
}

/* ========== Sidebar style enhancements ========== */
.left-sidebar {
    width: 260px !important;
}
.left-sidebar .scroll-sidebar {
    padding: 16px 0 24px !important;
    height: calc(100vh - 70px) !important;
}
.sidebar-nav #sidebarnav {
    padding: 0 12px !important;
}
/* Section headers (nav-small-cap) */
.sidebar-nav .nav-small-cap {
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase;
    padding: 20px 14px 8px !important;
    margin-top: 4px !important;
    color: rgba(255, 255, 255, 0.55) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.sidebar-nav .nav-small-cap:first-child {
    padding-top: 12px !important;
    margin-top: 0 !important;
}
.sidebar-nav .nav-small-cap i.mdi {
    font-size: 0.85rem !important;
    opacity: 0.7;
}
.sidebar-nav .nav-small-cap .hide-menu {
    flex: 1;
}
/* Sidebar links */
.sidebar-nav ul .sidebar-item {
    margin-bottom: 2px !important;
}
.sidebar-nav ul .sidebar-item .sidebar-link {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 14px !important;
    border-radius: 10px !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    border: none !important;
    margin: 0 4px !important;
}
.sidebar-nav ul .sidebar-item .sidebar-link i {
    font-size: 1rem !important;
    width: 1.25em !important;
    text-align: center !important;
    flex-shrink: 0 !important;
    opacity: 0.95 !important;
}
.sidebar-nav ul .sidebar-item .sidebar-link:hover,
.sidebar-nav ul .sidebar-item .sidebar-link.active,
.sidebar-nav ul .sidebar-item.selected .sidebar-link {
    background: rgba(35, 178, 235, 0.22) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}
.sidebar-nav ul .sidebar-item .sidebar-link:hover i,
.sidebar-nav ul .sidebar-item .sidebar-link.active i,
.sidebar-nav ul .sidebar-item.selected .sidebar-link i {
    color: var(--sopc-cyan) !important;
}
/* Active/hover accent bar – RTL */
html[dir="rtl"] .sidebar-nav > #sidebarnav > .sidebar-item > .sidebar-link {
    border-right: 3px solid transparent !important;
    border-left: none !important;
}
html[dir="rtl"] .sidebar-nav > #sidebarnav > .sidebar-item > .sidebar-link:hover,
html[dir="rtl"] .sidebar-nav > #sidebarnav > .sidebar-item > .sidebar-link.active,
html[dir="rtl"] .sidebar-nav > #sidebarnav > .sidebar-item.selected > .sidebar-link {
    border-right-color: var(--sopc-cyan) !important;
    border-radius: 0 10px 10px 0 !important;
}
/* LTR sidebar accent */
html:not([dir="rtl"]) .sidebar-nav > #sidebarnav > .sidebar-item > .sidebar-link {
    border-left: 3px solid transparent !important;
    border-right: none !important;
}
html:not([dir="rtl"]) .sidebar-nav > #sidebarnav > .sidebar-item > .sidebar-link:hover,
html:not([dir="rtl"]) .sidebar-nav > #sidebarnav > .sidebar-item > .sidebar-link.active,
html:not([dir="rtl"]) .sidebar-nav > #sidebarnav > .sidebar-item.selected > .sidebar-link {
    border-left-color: var(--sopc-cyan) !important;
    border-radius: 10px 0 0 10px !important;
}
/* Badges in sidebar (e.g. ads count) */
.sidebar-nav .sidebar-link .badge {
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    padding: 4px 8px !important;
    margin-right: auto !important;
    margin-left: 8px !important;
}
html[dir="rtl"] .sidebar-nav .sidebar-link .badge {
    margin-left: auto !important;
    margin-right: 8px !important;
}
/* Mini sidebar: keep icon and text readable when collapsed */
#main-wrapper[data-sidebartype="mini-sidebar"] .left-sidebar {
    width: 65px !important;
}
#main-wrapper[data-sidebartype="mini-sidebar"] .sidebar-nav .nav-small-cap .hide-menu,
#main-wrapper[data-sidebartype="mini-sidebar"] .sidebar-nav .sidebar-link .hide-menu {
    display: none !important;
}
#main-wrapper[data-sidebartype="mini-sidebar"] .sidebar-nav .sidebar-link {
    justify-content: center !important;
    padding: 12px !important;
}
#main-wrapper[data-sidebartype="mini-sidebar"] .sidebar-nav .sidebar-link i {
    margin: 0 !important;
}

/* Mobile: show full sidebar with text when sidebar is open (tabs text visible) */
@media (max-width: 991px) {
    #main-wrapper.show-sidebar .left-sidebar {
        width: 260px !important;
    }
    #main-wrapper.show-sidebar .sidebar-nav .nav-small-cap .hide-menu,
    #main-wrapper.show-sidebar .sidebar-nav .sidebar-link .hide-menu {
        display: inline !important;
    }
    #main-wrapper.show-sidebar .sidebar-nav .nav-small-cap {
        justify-content: flex-start !important;
        padding: 20px 14px 8px !important;
    }
    #main-wrapper.show-sidebar .sidebar-nav .sidebar-link {
        justify-content: flex-start !important;
        padding: 12px 14px !important;
    }
    #main-wrapper.show-sidebar .sidebar-nav .sidebar-link i {
        margin: 0 !important;
        margin-inline-end: 12px !important;
    }
}
@media (max-width: 766px) {
    #main-wrapper.show-sidebar .left-sidebar {
        width: 260px !important;
    }
}

/* Primary buttons and badges */
.btn-primary,
.bg-primary,
.badge-primary,
.badge-info,
.dropdown-menu .drop-title.bg-primary,
.dropdown-menu .d-flex.bg-primary,
.label-primary {
    background: linear-gradient(135deg, var(--sopc-cyan) 0%, var(--sopc-blue) 100%) !important;
    border-color: var(--sopc-blue) !important;
    color: var(--sopc-white) !important;
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--sopc-blue) 0%, var(--sopc-navy) 100%) !important;
    border-color: var(--sopc-navy) !important;
    color: var(--sopc-white) !important;
    box-shadow: 0 4px 14px rgba(35, 178, 235, 0.4) !important;
}

.progress-bar.bg-info,
.progress-bar.bg-primary {
    background: linear-gradient(90deg, var(--sopc-cyan), var(--sopc-blue)) !important;
}

/* Cards: clean and elevated */
.card {
    border-radius: var(--sopc-radius-lg) !important;
    border: none !important;
    box-shadow: var(--sopc-card-shadow) !important;
    transition: box-shadow 0.2s ease, transform 0.2s ease !important;
}

.card:hover {
    box-shadow: var(--sopc-card-shadow-hover) !important;
}

.card-body {
    border-radius: var(--sopc-radius-lg) !important;
}

/* Breadcrumb */
.page-breadcrumb {
    padding: 12px 0 !important;
}

.page-breadcrumb .page-title {
    color: var(--sopc-navy) !important;
    font-weight: 600 !important;
}

/* ----- Page titles (h3.page-title and .page-title) ----- */
.page-content-wrap .page-title,
.page-content-wrap h3.page-title,
.page-content-wrap h2.page-title {
    color: var(--sopc-navy) !important;
    font-weight: 700 !important;
    font-size: 1.5rem !important;
    letter-spacing: -0.02em;
    padding-bottom: 12px;
    margin-bottom: 20px !important;
    border-bottom: 3px solid var(--sopc-cyan);
    border-radius: 0 0 4px 0;
    display: inline-block;
}

/* ----- Buttons: success, secondary, outline ----- */
.btn-success {
    background: linear-gradient(135deg, var(--sopc-success) 0%, #0f766e 100%) !important;
    border: none !important;
    color: var(--sopc-white) !important;
    font-weight: 600 !important;
    padding: 10px 20px !important;
    border-radius: var(--sopc-radius) !important;
    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.35) !important;
    transition: all 0.2s ease !important;
}
.btn-success:hover {
    background: linear-gradient(135deg, #0f766e 0%, #115e59 100%) !important;
    color: var(--sopc-white) !important;
    box-shadow: 0 6px 18px rgba(13, 148, 136, 0.4) !important;
    transform: translateY(-1px);
}

.btn-secondary {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%) !important;
    border: none !important;
    color: var(--sopc-white) !important;
    font-weight: 500 !important;
    padding: 10px 20px !important;
    border-radius: var(--sopc-radius) !important;
    transition: all 0.2s ease !important;
}
.btn-secondary:hover {
    background: linear-gradient(135deg, #475569 0%, #334155 100%) !important;
    color: var(--sopc-white) !important;
    transform: translateY(-1px);
}

.btn-outline-secondary {
    border: 2px solid #94a3b8 !important;
    color: #475569 !important;
    background: transparent !important;
    border-radius: var(--sopc-radius) !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}
.btn-outline-secondary:hover {
    border-color: var(--sopc-navy) !important;
    color: var(--sopc-navy) !important;
    background: var(--sopc-cyan-soft) !important;
}

/* Approve (outline success) and Reject (outline danger) – bulk actions */
.btn-outline-success {
    border: 2px solid var(--sopc-success) !important;
    color: var(--sopc-success) !important;
    background: var(--sopc-success-soft) !important;
    border-radius: var(--sopc-radius) !important;
    font-weight: 600 !important;
    padding: 10px 20px !important;
    transition: all 0.2s ease !important;
}
.btn-outline-success:hover {
    background: var(--sopc-success) !important;
    color: var(--sopc-white) !important;
    border-color: var(--sopc-success) !important;
}
.btn-outline-danger {
    border: 2px solid #dc2626 !important;
    color: #dc2626 !important;
    background: rgba(220, 38, 38, 0.08) !important;
    border-radius: var(--sopc-radius) !important;
    font-weight: 600 !important;
    padding: 10px 20px !important;
    transition: all 0.2s ease !important;
}
.btn-outline-danger:hover {
    background: #dc2626 !important;
    color: var(--sopc-white) !important;
    border-color: #dc2626 !important;
}

/* Bulk action row (approve/reject selected) – ensure visible below table */
.table-responsive-lg .row.mb-3,
.table-responsive .row.mb-3 {
    margin-top: 20px !important;
    padding-top: 16px !important;
    border-top: 1px solid rgba(33, 74, 161, 0.12);
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}
.table-responsive-lg .row.mb-3 .btn,
.table-responsive .row.mb-3 .btn {
    margin-left: 0 !important;
    margin-right: 0.5rem !important;
}
html[dir="rtl"] .table-responsive-lg .row.mb-3 .btn,
html[dir="rtl"] .table-responsive .row.mb-3 .btn {
    margin-right: 0 !important;
    margin-left: 0.5rem !important;
}

/* ----- Alerts: rounded, accent border ----- */
.alert {
    border-radius: var(--sopc-radius) !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.alert-success {
    background: var(--sopc-success-soft) !important;
    color: #0f766e !important;
    border-right: 4px solid var(--sopc-success) !important;
}
html[dir="ltr"] .alert-success { border-right: none; border-left: 4px solid var(--sopc-success) !important; }
.alert-danger {
    background: var(--sopc-danger-soft) !important;
    color: #b91c1c !important;
    border-right: 4px solid #dc2626 !important;
}
html[dir="ltr"] .alert-danger { border-right: none; border-left: 4px solid #dc2626 !important; }
.alert-info {
    background: var(--sopc-cyan-soft) !important;
    color: var(--sopc-navy) !important;
    border-right: 4px solid var(--sopc-cyan) !important;
}
html[dir="ltr"] .alert-info { border-right: none; border-left: 4px solid var(--sopc-cyan) !important; }

/* Footer – match sidebar so no blue conflict (same navy gradient) */
.footer,
footer.footer {
    background: linear-gradient(180deg, var(--sopc-navy-dark) 0%, var(--sopc-navy) 50%, var(--sopc-navy-dark) 100%) !important;
    color: rgba(255, 255, 255, 0.92) !important;
    padding: 16px 24px !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1) !important;
    overflow: visible !important;
}

.footer,
.footer *,
footer.footer,
footer.footer * {
    color: rgba(255, 255, 255, 0.92) !important;
}

/* Ensure no theme bright blue overrides footer */
#main-wrapper .footer,
#main-wrapper footer.footer {
    background: linear-gradient(180deg, var(--sopc-navy-dark) 0%, var(--sopc-navy) 50%, var(--sopc-navy-dark) 100%) !important;
}

/* ========== Footer – mobile: at bottom of page (same as desktop) ========== */
@media (max-width: 991px) {
    .footer,
    footer.footer {
        padding: 14px 16px !important;
        padding-bottom: calc(14px + env(safe-area-inset-bottom, 0)) !important;
        font-size: 0.85rem !important;
        line-height: 1.5 !important;
        text-align: center !important;
        min-height: 52px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

@media (max-width: 576px) {
    .footer,
    footer.footer {
        padding: 12px 16px !important;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0)) !important;
        font-size: 0.8rem !important;
        min-height: 48px !important;
    }
}

/* Tables: subtle header and modern shape, no heavy outside border */
.table {
    border-radius: var(--sopc-radius) !important;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(33, 74, 161, 0.06);
    border: none !important;
    border-collapse: collapse;
}
.table thead th {
    background: linear-gradient(135deg, var(--sopc-navy) 0%, var(--sopc-navy-dark) 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border: none !important;
    padding: 14px 12px !important;
    font-size: 0.95rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.table thead th a,
.table thead th .sopc-th-link,
.table thead th .notice-th-link {
    color: #ffffff !important;
    text-decoration: none;
}
.table thead th a:hover,
.table thead th .sopc-th-link:hover,
.table thead th .notice-th-link:hover {
    color: var(--sopc-cyan) !important;
    text-decoration: underline;
}
.table thead th .fa,
.table thead th i {
    color: #ffffff !important;
    opacity: 0.95;
}
.table tbody td {
    padding: 12px !important;
    vertical-align: middle !important;
    border-color: rgba(33, 74, 161, 0.1) !important;
}
/* Remove outer border from first/last column so no double line with container */
.table thead th:first-child,
.table tbody td:first-child {
    border-left: none !important;
}
.table thead th:last-child,
.table tbody td:last-child {
    border-right: none !important;
}
html[dir="rtl"] .table thead th:first-child,
html[dir="rtl"] .table tbody td:first-child {
    border-right: none !important;
    border-left: none !important;
}
html[dir="rtl"] .table thead th:last-child,
html[dir="rtl"] .table tbody td:last-child {
    border-left: none !important;
    border-right: none !important;
}
.table-hover tbody tr:hover {
    background-color: var(--sopc-cyan-soft) !important;
}
/* table-info variant: cyan tint for body */
.table-info {
    background-color: var(--sopc-white) !important;
}
.table-info thead th {
    background: linear-gradient(135deg, var(--sopc-cyan) 0%, var(--sopc-blue) 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.table-info thead th a,
.table-info thead th .sopc-th-link,
.table-info thead th .notice-th-link {
    color: #ffffff !important;
}
.table-info thead th a:hover,
.table-info thead th .sopc-th-link:hover,
.table-info thead th .notice-th-link:hover {
    color: rgba(255, 255, 255, 0.95) !important;
    text-decoration: underline;
}
/* Ensure all table column headers use white text (any table in the app) */
table thead th {
    color: #ffffff !important;
    font-weight: 700 !important;
}
table thead th a,
table thead th .sopc-th-link,
table thead th .notice-th-link {
    color: #ffffff !important;
}
table thead th a:hover,
table thead th .sopc-th-link:hover,
table thead th .notice-th-link:hover {
    color: var(--sopc-cyan) !important;
}

.table-responsive,
.table-responsive-lg {
    border-radius: var(--sopc-radius) !important;
    overflow-x: auto !important;
    overflow-y: visible;
    border: none !important;
}
.table-responsive .table,
.table-responsive-lg .table {
    margin-bottom: 0;
}

/* Keep table inside container box and use full width */
.page-content-wrap .container .table-responsive,
.page-content-wrap .container .table-responsive-lg {
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}
.page-content-wrap .container .table-responsive .table,
.page-content-wrap .container .table-responsive-lg .table {
    width: 100% !important;
    max-width: 100%;
    table-layout: auto;
}

/* Form controls: prevent text clipping (Arabic and others) */
.form-control,
.custom-select,
select.form-control {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    line-height: 1.5 !important;
    min-height: 38px !important;
    height: auto !important;
}

.form-control-lg,
select.form-control-lg {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    min-height: 48px !important;
}

/* Form controls focus */
.form-control:focus,
.custom-select:focus {
    border-color: var(--sopc-cyan) !important;
    box-shadow: 0 0 0 3px rgba(35, 178, 235, 0.2) !important;
}

/* Modals */
.modal-content {
    border-radius: var(--sopc-radius-lg) !important;
    border: none !important;
    box-shadow: 0 20px 60px rgba(33, 74, 161, 0.2) !important;
}

.modal-header {
    background: linear-gradient(135deg, var(--sopc-navy) 0%, var(--sopc-blue) 100%) !important;
    color: var(--sopc-white) !important;
    border-radius: var(--sopc-radius-lg) var(--sopc-radius-lg) 0 0 !important;
}

/* ============================================================
   Existing component overrides (SOPC palette)
   ============================================================ */

div #first-line-data{
    margin-left: 5px;
    box-shadow: var(--sopc-card-shadow);
    border-radius: var(--sopc-radius-lg);
    margin-right: 5px;
}

div #abs-tbl{
    box-shadow: rgb(0 0 0 / 19%) -2px 4px 20px, rgb(0 0 0 / 23%) 0px 6px 6px 0px;
    border-radius: 20px;
    background-color: white;
}

div #abs-card{
    background-color: transparent;
}

div #abs-title{
    margin: auto;
    border-radius: 10px;
    box-shadow: var(--sopc-card-shadow);
    padding: 10px 40px;
    background: linear-gradient(135deg, var(--sopc-navy) 0%, var(--sopc-cyan) 100%) !important;
    color: var(--sopc-white) !important;
}
div #abs-body-card{
    padding-bottom: 10px;
}


#dashboard-first-icon{
    font-size: 20px;
    color: var(--sopc-white) !important;
    background: linear-gradient(135deg, var(--sopc-navy) 0%, var(--sopc-cyan) 100%) !important;
    padding: 6px 10px;
    box-shadow: var(--sopc-card-shadow);
    border-radius: 10px;
}

#payroll-list-card-body{
    box-shadow: rgb(0 0 0 / 19%) -2px 4px 20px, rgb(0 0 0 / 23%) 0px 6px 6px 0px;
    border-radius: 20px;
}

#icons-titles{
    margin-top:7px;
}

#first-line-card-body{
    padding-top:10px;
    padding-bottom: 20px;
}

#printableArea{
    box-shadow: rgb(0 0 0 / 19%) -2px 4px 20px, rgb(0 0 0 / 23%) 0px 6px 6px 0px;
    border-radius: 20px;
}
/* Less space between hr and salary tables */
#printableArea #payroll .col-md-12:first-child {
    padding-top: 0;
}

#payroll-table-parent {
    box-shadow: rgb(0 0 0 / 19%) -2px 4px 20px, rgb(0 0 0 / 23%) 0px 6px 6px 0px;
    margin-bottom: 0;
    margin-top: 0 !important;
    padding: 0 !important;
}
#payroll-table-parent .table {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
#payroll-table-parent .table > tbody > tr > td,
#payroll-table-parent .table > tr > td {
    vertical-align: top !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
#payroll-table-parent #tbl_deductions,
#payroll-table-parent #tbl_additions {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
/* Remove any extra space above payroll table headers */
#payroll-table-parent #tbl_deductions thead th,
#payroll-table-parent #tbl_additions thead th {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

/* Payroll salary tables – font enhancement */
#payroll-table-parent #tbl_deductions,
#payroll-table-parent #tbl_additions {
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 500;
}
#payroll-table-parent #tbl_deductions thead th,
#payroll-table-parent #tbl_additions thead th {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
}
#payroll-table-parent #tbl_deductions tbody td,
#payroll-table-parent #tbl_additions tbody td {
    font-size: 0.95rem;
    font-weight: 500;
    padding: 10px 12px !important;
    line-height: 1.45;
    color: var(--sopc-text);
}
#payroll-table-parent #tbl_deductions tbody td.text-right,
#payroll-table-parent #tbl_additions tbody td.text-right {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--sopc-navy);
}

#payroll-tables{
    border: 2px solid darkslategray;
}

.blockquote, hr {
    margin-top: 1px;
    margin-bottom: 1px;
}

#set-salary-title{
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 10px;
    border-radius: 10px;
    margin-bottom: 0;
    color: var(--sopc-navy) !important;
    font-weight: 600 !important;
    box-shadow: var(--sopc-card-shadow);
}

#tripImage{
    border-radius: 20px;
    transition: 0.5s;
    width: 100px;
}

#tripImage:hover{
    transform :scale(2);
}


div.dataTables_wrapper div.dataTables_paginate ul.pagination{
    margin-left: 5px;
}


#cke_ckeditor{
    width:100%;
}

/* Preloader: SOPC brand – refined shape and color */
.preloader {
    background: rgba(238, 242, 247, 0.95) !important;
}
.preloader .loader.loader-around-logo .spinner {
    border-top-color: var(--sopc-cyan) !important;
    border-right-color: var(--sopc-cyan-soft) !important;
    border-bottom-color: transparent !important;
    border-left-color: transparent !important;
    box-shadow: 0 -4px 14px rgba(35, 178, 235, 0.4) !important;
}
.preloader .loader.loader-around-logo::after {
    box-shadow: 0 2px 0 var(--sopc-navy) inset !important;
}
.preloader .loader.loader-around-logo {
    background: var(--sopc-white);
    border-radius: 50%;
    padding: 20px;
    box-shadow: 0 12px 40px rgba(33, 74, 161, 0.15);
}
.preloader .loader .logo.logo-preloader {
    border-radius: 10px;
}

/* ============================================================
   Login & Auth pages – SOPC branded
   ============================================================ */
.auth-wrapper {
    min-height: 100vh;
    padding: 24px;
    /* Background image set in login.blade.php via inline style (asset('assets/images/back.webp')) */
}

.auth-box {
    width: 100%;
    max-width: 420px;
    background: var(--sopc-white) !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
    padding: 40px 36px !important;
    opacity: 1 !important;
}

.auth-logo {
    text-align: center;
    padding: 20px 0 24px;
    border-bottom: 1px solid rgba(33, 74, 161, 0.1);
    margin-bottom: 28px;
}

.auth-logo-img {
    width: 72px;
    height: auto;
    max-height: 72px;
    object-fit: contain;
    display: block;
    margin: 0 auto 12px;
}

.auth-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--sopc-navy) !important;
    margin-bottom: 4px !important;
}

.auth-subtitle {
    font-size: 0.8rem;
    color: #64748b;
    margin: 0 !important;
}

.auth-input-group .input-group-text,
.auth-input-icon {
    background: rgba(33, 74, 161, 0.08) !important;
    border: 1px solid rgba(33, 74, 161, 0.15) !important;
    border-left: none !important;
    color: var(--sopc-navy) !important;
    border-radius: 10px 0 0 10px !important;
}

html[dir="rtl"] .auth-input-group .input-group-text,
html[dir="rtl"] .auth-input-icon {
    border-radius: 0 10px 10px 0 !important;
    border-left: 1px solid rgba(33, 74, 161, 0.15) !important;
    border-right: none !important;
}

.auth-input-group .form-control {
    border: 1px solid rgba(33, 74, 161, 0.15) !important;
    border-radius: 0 10px 10px 0 !important;
}

html[dir="rtl"] .auth-input-group .form-control {
    border-radius: 10px 0 0 10px !important;
}

.auth-input-group .form-control:focus {
    border-color: var(--sopc-cyan) !important;
    box-shadow: 0 0 0 3px rgba(35, 178, 235, 0.2) !important;
}

.auth-submit-btn {
    background: linear-gradient(135deg, var(--sopc-cyan) 0%, var(--sopc-blue) 100%) !important;
    border: none !important;
    color: var(--sopc-white) !important;
    font-weight: 600 !important;
    padding: 14px 24px !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 14px rgba(35, 178, 235, 0.4) !important;
    transition: all 0.2s ease !important;
}

.auth-submit-btn:hover {
    background: linear-gradient(135deg, var(--sopc-blue) 0%, var(--sopc-navy) 100%) !important;
    color: var(--sopc-white) !important;
    box-shadow: 0 6px 20px rgba(35, 178, 235, 0.45) !important;
    transform: translateY(-1px);
}

/* Auth preloader (login page) */
.preloader-auth .loader {
    background: linear-gradient(135deg, var(--sopc-navy) 0%, var(--sopc-blue) 100%);
    padding: 20px;
}
.preloader-auth .loader .logo {
    z-index: 2;
}

/* ============================================================
   Modern login page – split layout, card form
   ============================================================ */
.login-page-body {
    font-family: "Noto Kufi Arabic", sans-serif;
    min-height: 100vh;
    margin: 0;
}
.login-page {
    display: flex;
    min-height: 100vh;
    flex-wrap: wrap;
}
.login-page__brand {
    flex: 1 1 42%;
    min-height: 100vh;
    min-width: 280px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}
.login-page__brand-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg, var(--sopc-navy-dark) 0%, var(--sopc-navy) 50%, #1e3a6e 100%);
    z-index: 0;
}
.login-page__brand-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url('../images/back.webp') center/cover no-repeat;
    opacity: 0.12;
    z-index: 0;
}
.login-page__brand-inner {
    position: relative;
    z-index: 1;
    text-align: center;
    color: var(--sopc-white);
    max-width: 360px;
}
.login-page__logo {
    width: 100px;
    height: 100px;
    object-fit: contain;
    margin-bottom: 1.5rem;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.2));
}
.login-page__brand-title {
    font-size: 1.85rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    letter-spacing: 0.02em;
}
.login-page__brand-subtitle {
    font-size: 1rem;
    font-weight: 500;
    opacity: 0.92;
    margin: 0 0 2.5rem 0;
}
.login-page__brand-footer {
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,0.2);
}
.login-page__brand-badge {
    font-size: 0.8rem;
    opacity: 0.85;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.login-page__form-wrap {
    flex: 1 1 58%;
    min-width: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: linear-gradient(180deg, #f0f4f8 0%, #e8eef5 100%);
}
.login-page__form-card {
    width: 100%;
    max-width: 420px;
    background: var(--sopc-white);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(33, 74, 161, 0.12), 0 4px 20px rgba(0,0,0,0.06);
    padding: 2.25rem 2rem;
    border: 1px solid rgba(33, 74, 161, 0.08);
}
.login-page__form-header {
    margin-bottom: 1.75rem;
}
.login-page__form-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--sopc-navy);
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.login-page__form-title i {
    color: var(--sopc-cyan);
}
.login-page__form-desc {
    font-size: 0.95rem;
    color: var(--sopc-text-muted);
    margin: 0;
}
.login-page__alert {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
}
.login-page__alert--error {
    background: rgba(220, 38, 38, 0.08);
    color: #b91c1c;
    border: 1px solid rgba(220, 38, 38, 0.2);
}
.login-page__alert--error i {
    flex-shrink: 0;
    margin-top: 0.1rem;
}
.login-page__alert--success {
    background: rgba(13, 148, 136, 0.08);
    color: var(--sopc-success);
    border: 1px solid rgba(13, 148, 136, 0.2);
}
.login-page__field {
    margin-bottom: 1.35rem;
}
.login-page__label {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--sopc-text);
    margin: 0 0 0.65rem 0;
}
.login-page__input-wrap {
    display: flex;
    align-items: stretch;
    border-radius: 12px;
    background: #eef1f5;
    border: 1px solid rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.login-page__input-wrap:focus-within {
    border-color: var(--sopc-cyan);
    box-shadow: 0 0 0 3px rgba(35, 178, 235, 0.12);
    background: #f5f7fa;
}
.login-page__input {
    flex: 1;
    min-width: 0;
    padding: 0.9rem 1rem;
    border: none;
    background: transparent;
    font-size: 1rem;
    color: var(--sopc-text);
    font-family: inherit;
}
.login-page__input::placeholder {
    color: var(--sopc-text-muted);
}
.login-page__input:focus {
    outline: none;
}
.login-page__input-icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    flex-shrink: 0;
    background: #e2e6eb;
    color: var(--sopc-text-muted);
    font-size: 1.05rem;
}
.login-page__input-wrap:focus-within .login-page__input-icon-box {
    background: #d8dde4;
    color: var(--sopc-cyan);
}
.login-page__input-icon-box i {
    font-size: 1.1rem;
}
.login-page__actions {
    margin-top: 1.75rem;
}
.login-page__btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.95rem 1.5rem;
    font-size: 1.05rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--sopc-white);
    background: linear-gradient(135deg, var(--sopc-navy) 0%, var(--sopc-cyan) 100%);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    box-shadow: 0 4px 14px rgba(35, 178, 235, 0.35);
}
.login-page__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(35, 178, 235, 0.4);
    color: var(--sopc-white);
}
.login-page__btn:active {
    transform: translateY(0);
}
@media (max-width: 768px) {
    .login-page__brand {
        min-height: 220px;
        padding: 1.5rem 1rem;
    }
    .login-page__logo {
        width: 72px;
        height: 72px;
        margin-bottom: 1rem;
    }
    .login-page__brand-title {
        font-size: 1.4rem;
    }
    .login-page__brand-subtitle {
        margin-bottom: 1rem;
    }
    .login-page__form-wrap {
        padding: 1.5rem 1rem;
    }
    .login-page__form-card {
        padding: 1.75rem 1.5rem;
    }
}

/* ============================================================
   Notice form (الإبلاغ عن المخاطر) – modern layout
   ============================================================ */
.notice-form-card {
    max-width: 900px;
    margin: 0 auto;
}

.notice-form-card .card-body {
    padding: 28px 24px 32px;
}

.notice-form-page-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--sopc-navy);
    margin: 0 0 20px 0;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(33, 74, 161, 0.15);
}

.notice-form-header {
    text-align: center;
    padding: 24px 0 32px;
    margin-bottom: 28px;
    border-bottom: 2px solid rgba(33, 74, 161, 0.12);
}

.notice-form-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--sopc-navy);
    margin-bottom: 8px;
}

.notice-form-subtitle {
    font-size: 1rem;
    color: var(--sopc-blue);
    font-weight: 600;
    margin-bottom: 4px;
}

.notice-form-tagline {
    font-size: 0.95rem;
    color: #64748b;
    margin: 0;
}

.notice-form .notice-field {
    margin-bottom: 1.5rem;
}

.notice-form .notice-label {
    display: block;
    font-weight: 600;
    color: var(--sopc-navy);
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.notice-form .notice-input,
.notice-form .notice-textarea {
    border-radius: 10px;
    border: 1px solid rgba(33, 74, 161, 0.2);
    padding: 14px 16px;
    min-height: 48px;
    line-height: 1.5;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.notice-form select.notice-input,
.notice-form .form-control-lg.notice-input {
    padding-top: 14px;
    padding-bottom: 14px;
    height: auto;
    min-height: 48px;
}

.notice-form .notice-input:focus,
.notice-form .notice-textarea:focus {
    border-color: var(--sopc-cyan);
    box-shadow: 0 0 0 3px rgba(35, 178, 235, 0.2);
    outline: none;
}

.notice-form .notice-textarea {
    resize: vertical;
    min-height: 80px;
}

.notice-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
}

.notice-checkbox-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 10px 16px;
    border-radius: 10px;
    border: 1px solid rgba(33, 74, 161, 0.15);
    background: rgba(33, 74, 161, 0.04);
    transition: all 0.2s ease;
}

.notice-checkbox-item:hover {
    border-color: var(--sopc-cyan);
    background: rgba(35, 178, 235, 0.08);
}

.notice-checkbox-item input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.notice-checkbox-box {
    position: relative;
    width: 22px;
    height: 22px;
    border: 2px solid rgba(33, 74, 161, 0.4);
    border-radius: 6px;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.notice-checkbox-item input:checked + .notice-checkbox-box {
    background: linear-gradient(135deg, var(--sopc-cyan), var(--sopc-blue));
    border-color: var(--sopc-blue);
}

.notice-checkbox-item input:checked + .notice-checkbox-box::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 6px;
    height: 11px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.notice-file-wrap {
    position: relative;
}

.notice-file-input {
    padding: 12px 16px;
}

.notice-file-hint {
    display: block;
    margin-top: 6px;
    color: #64748b;
    font-size: 0.85rem;
}

.notice-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 2rem;
    padding-top: 24px;
    border-top: 1px solid rgba(33, 74, 161, 0.1);
    justify-content: flex-start;
}

html[dir="rtl"] .notice-form-actions {
    justify-content: flex-end;
}

.notice-submit-btn {
    padding: 14px 28px;
    border-radius: 12px;
    font-weight: 600;
}

.notice-form-actions .btn-outline-secondary {
    border-radius: 12px;
    border-color: rgba(33, 74, 161, 0.3);
    color: var(--sopc-navy);
}

.notice-form-actions .btn-outline-secondary:hover {
    background: rgba(33, 74, 161, 0.08);
    border-color: var(--sopc-navy);
    color: var(--sopc-navy);
}

/* ============================================================
   Notices index – filter card & table
   ============================================================ */
.notices-filter-card .card-body {
    padding: 20px;
}

.notice-filter-label {
    font-weight: 600;
    color: var(--sopc-navy);
    font-size: 0.9rem;
    display: block;
    margin-bottom: 0.35rem;
}

/* Notices filter inputs – same style as notice form */
.notices-filter-form .notices-filter-input,
.notices-filter-form .form-control.notices-filter-input,
.notices-filter-form .form-select.notices-filter-input {
    border-radius: 10px;
    border: 1px solid rgba(33, 74, 161, 0.2);
    padding: 12px 16px;
    min-height: 44px;
    line-height: 1.5;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.notices-filter-form .notices-filter-input:focus,
.notices-filter-form .form-control.notices-filter-input:focus,
.notices-filter-form .form-select.notices-filter-input:focus {
    border-color: var(--sopc-cyan);
    box-shadow: 0 0 0 3px rgba(35, 178, 235, 0.2);
    outline: none;
}

/* المعرضون للخطر – collapsed dropdown with checkboxes */
.notices-at-risk-dropdown {
    position: relative;
}

.notices-at-risk-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    text-align: right;
    cursor: pointer;
    background: #fff;
    border: 1px solid rgba(33, 74, 161, 0.2);
    border-radius: 10px;
    padding: 12px 16px;
    min-height: 44px;
    font-size: inherit;
    color: inherit;
}

.notices-at-risk-trigger:hover {
    border-color: rgba(33, 74, 161, 0.4);
}

.notices-at-risk-trigger:focus {
    border-color: var(--sopc-cyan);
    box-shadow: 0 0 0 3px rgba(35, 178, 235, 0.2);
    outline: none;
}

.notices-at-risk-trigger-open {
    border-color: var(--sopc-cyan);
    box-shadow: 0 0 0 3px rgba(35, 178, 235, 0.2);
}

.notices-at-risk-summary {
    flex: 1;
}

.notices-at-risk-chevron {
    font-size: 0.75rem;
    opacity: 0.7;
    transition: transform 0.2s ease;
}

.notices-at-risk-trigger-open .notices-at-risk-chevron {
    transform: rotate(180deg);
}

.notices-at-risk-panel {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    margin-top: 4px;
    padding: 8px;
    background: #fff;
    border: 1px solid rgba(33, 74, 161, 0.2);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 100;
    max-height: 260px;
    overflow-y: auto;
}

.notices-at-risk-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin: 0;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.15s ease;
}

.notices-at-risk-option:hover {
    background: rgba(33, 74, 161, 0.06);
}

.notices-at-risk-option input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--sopc-cyan);
    cursor: pointer;
    flex-shrink: 0;
}

.notices-at-risk-option span {
    font-weight: 500;
    color: var(--sopc-navy);
}

.notices-filter-form .notices-filter-btn {
    border-radius: 10px;
    padding: 12px 16px;
    font-weight: 600;
}

/* Filter actions: align to left, add top space */
/* Action buttons row: full width below filters, one horizontal line, left-aligned in RTL */
.notices-filter-form .notices-filter-actions-col {
    padding-top: 0.25rem;
}
.notices-filter-form .notices-filter-actions-btns {
    gap: 1.5rem;
}
.permission-filter-actions {
    gap: 0.75rem 1rem;
}
html[dir="rtl"] .notices-filter-form .notices-filter-actions-col .d-flex {
    justify-content: flex-end;
}
html:not([dir="rtl"]) .notices-filter-form .notices-filter-actions-col .d-flex {
    justify-content: flex-start;
}

.notices-filter-form .btn-outline-secondary.notices-filter-btn {
    border-color: rgba(33, 74, 161, 0.3);
    color: var(--sopc-navy);
}

.notices-filter-form .btn-outline-secondary.notices-filter-btn:hover {
    background: rgba(33, 74, 161, 0.08);
    border-color: var(--sopc-navy);
    color: var(--sopc-navy);
}

/* Mobile: more vertical space between filter rows */
@media (max-width: 991px) {
    .notices-filter-form .row.g-3 {
        row-gap: 1.5rem;
    }
}
@media (max-width: 575px) {
    .notices-filter-form .row.g-3 {
        row-gap: 1.75rem;
    }
    .notices-filter-card .card-body {
        padding: 1.25rem;
    }
}

/* Export to Excel button – branded style */
.notices-export-excel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    font-weight: 600;
    border-radius: 10px;
    background: var(--sopc-cyan);
    color: #fff;
    border: none;
    text-decoration: none;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}
.notices-export-excel-btn:hover {
    background: #1a9fd4;
    color: #fff;
    box-shadow: 0 2px 8px rgba(35, 178, 235, 0.35);
}
.notices-export-excel-btn:focus {
    color: #fff;
    box-shadow: 0 0 0 3px rgba(35, 178, 235, 0.3);
}
.notices-export-excel-btn:disabled,
.notices-export-excel-btn.notices-export-loading {
    opacity: 0.8;
    pointer-events: none;
}

.notices-table-card .card-body {
    padding: 24px;
}

.notices-table {
    margin-bottom: 0;
}

.notices-table thead th {
    white-space: nowrap;
    padding: 14px 12px;
    background: linear-gradient(135deg, var(--sopc-navy) 0%, var(--sopc-navy-dark) 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Employee managers: red «إزالة التعيين» column (danger / unassign) */
.employee-managers-page .notices-table thead th.employee-manager-remove-th {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    border-inline-end: 1px solid rgba(255, 255, 255, 0.2);
}

.employee-managers-page .notices-table thead th.employee-manager-remove-th .employee-manager-remove-th-label {
    color: rgba(255, 255, 255, 0.98) !important;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.employee-managers-page .notices-table thead th.employee-manager-remove-th .employee-manager-remove-th-checkbox.form-check-input {
    border-color: rgba(255, 255, 255, 0.85);
    background-color: #ffffff;
    margin-top: 0.35rem;
}

.employee-managers-page .notices-table thead th.employee-manager-remove-th .employee-manager-remove-th-checkbox.form-check-input:checked {
    background-color: #dc2626;
    border-color: #ffffff;
}

.notice-th-link {
    color: var(--sopc-navy);
    text-decoration: none;
    font-weight: 600;
}

.notice-th-link:hover {
    color: var(--sopc-cyan);
}

.notices-table tbody td {
    padding: 12px;
    vertical-align: middle;
}

/* Vacation manager: fixed first column (checkbox) */
.vacation-manager-table .col-check-fixed {
    position: sticky !important;
    z-index: 2 !important;
    width: 2.5rem !important;
    min-width: 2.5rem !important;
    max-width: 2.5rem !important;
    background: #fff !important;
    box-sizing: border-box !important;
    padding: 12px 8px !important;
    vertical-align: middle !important;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.08);
}
.vacation-manager-table thead .col-check-fixed {
    background: linear-gradient(135deg, var(--sopc-navy) 0%, var(--sopc-navy-dark) 100%) !important;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
}
.vacation-manager-table tbody tr:hover .col-check-fixed {
    background: rgba(33, 74, 161, 0.06) !important;
}
html[dir="rtl"] .vacation-manager-table .col-check-fixed {
    left: auto !important;
    right: 0 !important;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.08);
}
html[dir="rtl"] .vacation-manager-table thead .col-check-fixed {
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
}
html:not([dir="rtl"]) .vacation-manager-table .col-check-fixed {
    left: 0 !important;
    right: auto !important;
}

/* Vacation manager: bulk action buttons – space between */
.bulk-actions-wrap .btn:first-child {
    margin-inline-end: 1rem !important;
}

/* Vacation manager: approve/reject buttons – same shape, size and shadow */
.vacation-manager-table .approveLink,
.vacation-manager-table .rejectLink {
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    padding: 6px 10px;
    min-width: 2.25rem;
    min-height: 2.25rem;
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.vacation-manager-table .approveLink:hover,
.vacation-manager-table .rejectLink:hover {
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
}
.vacation-manager-table .approveLink i,
.vacation-manager-table .rejectLink i {
    font-size: 1rem;
}

/* Show-detail button in table */
.notices-detail-btn {
    background: var(--sopc-cyan);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 6px 12px;
    font-weight: 600;
    font-size: 0.85rem;
}
.notices-detail-btn:hover {
    background: #1a9fd4;
    color: #fff;
}

/* Modal: full notice details */
.notices-detail-modal-content .modal-header {
    background: var(--sopc-navy);
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.notices-detail-modal-content .modal-header .btn-close {
    filter: invert(1);
}
.notices-detail-modal-content .modal-title {
    font-weight: 700;
}
.notices-detail-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.notices-detail-row {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    line-height: 1.6;
}
.notices-detail-row:last-child {
    border-bottom: none;
}
.notices-detail-label {
    font-weight: 700;
    color: var(--sopc-navy);
    display: inline-block;
    min-width: 140px;
}
.notices-detail-row span:not(.notices-detail-label) {
    white-space: pre-wrap;
    word-break: break-word;
}

.notices-pagination-info {
    font-size: 0.9rem;
}

/* Modern notices pagination – no English "Showing" (use Arabic block only), SOPC style */
.notices-pagination-nav {
    display: flex;
    align-items: center;
}

.notices-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.notices-pagination .page-item {
    margin: 0;
}

.notices-pagination .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--sopc-navy);
    background: #fff;
    border: 1px solid rgba(33, 74, 161, 0.2);
    border-radius: 10px;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.notices-pagination .page-link:hover:not(.disabled):not([aria-hidden="true"]) {
    background: rgba(35, 178, 235, 0.1);
    border-color: var(--sopc-cyan);
    color: var(--sopc-navy);
}

.notices-pagination .page-item.active .page-link {
    background: var(--sopc-cyan);
    border-color: var(--sopc-cyan);
    color: #fff;
}

.notices-pagination .page-item.disabled .page-link {
    color: #adb5bd;
    background: #f1f3f5;
    border-color: #e9ecef;
    cursor: not-allowed;
}

.notices-pagination-links .pagination,
.notices-pagination-links .notices-pagination {
    margin-bottom: 0;
}

/* ============================================================
   Contests index – same style as notices table
   ============================================================ */
/* Contests index – filter card */
.contests-filter-card {
    border: 1px solid rgba(33, 74, 161, 0.15);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.contests-filter-card .card-body {
    padding: 20px;
}
.contests-filter-label {
    font-weight: 600;
    color: var(--sopc-navy);
}
.contests-filter-input {
    border-radius: 8px;
    border: 1px solid rgba(33, 74, 161, 0.25);
}
.contests-filter-input:focus {
    border-color: var(--sopc-cyan);
    box-shadow: 0 0 0 3px rgba(35, 178, 235, 0.2);
}
.contests-filter-btn {
    border-radius: 8px;
    font-weight: 600;
}
.contests-filter-actions {
    gap: 12px !important;
}

.contests-th-link {
    color: var(--sopc-navy);
    text-decoration: none;
    font-weight: 600;
}
.contests-th-link:hover {
    color: var(--sopc-cyan);
}

/* Action buttons – spacing so they don't overlap */
.contests-actions-cell {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.contests-actions-cell .contests-action-btn {
    flex-shrink: 0;
}
.contests-action-form {
    display: inline-flex;
    margin: 0;
}

.contests-create-btn {
    display: inline-flex;
    align-items: center;
    padding: 12px 20px;
    font-weight: 600;
    border-radius: 10px;
    background: var(--sopc-cyan);
    color: #fff;
    border: none;
    text-decoration: none;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}
.contests-create-btn:hover {
    background: #1a9fd4;
    color: #fff;
    box-shadow: 0 2px 8px rgba(35, 178, 235, 0.35);
}

.contests-table-card {
    border-radius: 12px;
    border: 1px solid rgba(33, 74, 161, 0.12);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.contests-table-card .card-body {
    padding: 24px;
}

.contests-table {
    margin-bottom: 0;
}

.contests-table thead th {
    white-space: nowrap;
    padding: 14px 12px;
    font-weight: 700;
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--sopc-navy) 0%, var(--sopc-navy-dark) 100%) !important;
    border: none !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.contests-table thead th a {
    color: #ffffff !important;
}
.contests-table thead th a:hover {
    color: var(--sopc-cyan) !important;
    text-decoration: underline;
}

.contests-table tbody td {
    padding: 12px;
    vertical-align: middle;
}

.contests-media-wrap {
    max-width: 150px;
}

.contests-media {
    max-height: 100px;
    border-radius: 8px;
    object-fit: cover;
}

.contests-media-img {
    max-width: 150px;
}

.contests-action-btn {
    border-radius: 8px;
    padding: 6px 12px;
    font-weight: 600;
    font-size: 0.85rem;
    border: none;
}

.contests-action-results {
    background: var(--sopc-cyan);
    color: #fff;
}

.contests-action-results:hover {
    background: #1a9fd4;
    color: #fff;
}

.contests-action-edit {
    background: rgba(255, 193, 7, 0.9);
    color: #1a1a1a;
}

.contests-action-edit:hover {
    background: #e6ac00;
    color: #1a1a1a;
}

.contests-action-delete {
    background: rgba(220, 53, 69, 0.9);
    color: #fff;
}

.contests-action-delete:hover {
    background: #c82333;
    color: #fff;
}

.contests-pagination-info {
    font-size: 0.9rem;
}

/* ============================================================
   Contest form (create / edit) – same style as notice form
   ============================================================ */
/* Reset password (own) – /user/reset – centered, inputs stacked */
.reset-password-wrap {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 24px 0 48px;
}

.reset-password-card {
    width: 100%;
    max-width: 420px;
    border-radius: 12px;
    border: 1px solid rgba(33, 74, 161, 0.12);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.reset-password-card .card-body {
    padding: 28px 24px 32px;
}

.reset-password-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--sopc-navy);
    margin: 0 0 8px 0;
}

.reset-password-desc {
    font-size: 0.95rem;
}

.reset-password-form .reset-password-field {
    margin-bottom: 1.25rem;
}

.reset-password-form .reset-password-field:last-of-type {
    margin-bottom: 0;
}

.reset-password-actions {
    margin-top: 1.5rem;
    padding-top: 8px;
}

html[dir="rtl"] .reset-password-actions {
    text-align: right;
}

/* Reset any password page – /user/reset_any */
.reset-any-card {
    max-width: 720px;
    border-radius: 12px;
    border: 1px solid rgba(33, 74, 161, 0.12);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.reset-any-card .card-body {
    padding: 28px 24px 32px;
}

.reset-any-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--sopc-navy);
    margin: 0 0 8px 0;
}

.reset-any-desc {
    font-size: 0.95rem;
}

.reset-any-actions {
    padding-top: 8px;
}

html[dir="rtl"] .reset-any-actions {
    text-align: right;
}

.contest-form-card {
    max-width: 900px;
    margin: 0 auto;
    border-radius: 12px;
    border: 1px solid rgba(33, 74, 161, 0.12);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.contest-form-card .card-body {
    padding: 28px 24px 32px;
}

.contest-form-page-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--sopc-navy);
    margin: 0 0 20px 0;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(33, 74, 161, 0.15);
}

.contest-form .contest-field {
    margin-bottom: 1.5rem;
}

.contest-label {
    display: block;
    font-weight: 600;
    color: var(--sopc-navy);
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.contest-form .contest-input,
.contest-form .contest-textarea {
    border-radius: 10px;
    border: 1px solid rgba(33, 74, 161, 0.2);
    padding: 12px 16px;
    min-height: 44px;
    line-height: 1.5;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contest-form .contest-input:focus,
.contest-form .contest-textarea:focus {
    border-color: var(--sopc-cyan);
    box-shadow: 0 0 0 3px rgba(35, 178, 235, 0.2);
    outline: none;
}

.contest-form .contest-textarea {
    min-height: 100px;
    resize: vertical;
}

.contest-file-wrap .contest-file-input {
    padding: 10px 14px;
}

.contest-file-hint {
    display: block;
    margin-top: 6px;
    font-size: 0.85rem;
    color: #64748b;
}

.contest-current-media .contest-media-preview {
    max-width: 280px;
    max-height: 160px;
    border-radius: 10px;
    object-fit: cover;
}

.contest-section-header {
    margin-top: 2rem;
    margin-bottom: 1rem;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(33, 74, 161, 0.12);
}

.contest-section-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--sopc-navy);
    margin: 0;
}

.contest-question-group {
    border-radius: 10px;
    border: 1px solid rgba(33, 74, 161, 0.15);
    background: rgba(33, 74, 161, 0.02);
}

.contest-question-group .card-body {
    padding: 20px;
}

.contest-form .answer-group {
    gap: 12px;
}

.contest-form .answer-group .contest-input {
    min-width: 0;
}

/* Contest answer row: radio + "صحيحة" on one line (override Bootstrap .form-check-input position: absolute) */
.contest-radio-label {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    font-weight: 500;
    color: var(--sopc-navy);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 90px;
    line-height: 1;
}

.contest-radio-label .form-check-input,
.contest-radio-label input[type="radio"] {
    position: static !important;
    margin: 0 !important;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    accent-color: var(--sopc-cyan);
    cursor: pointer;
    vertical-align: middle;
}

.contest-radio-text {
    display: inline-block;
    line-height: 18px;
    vertical-align: middle;
}

.contest-btn-remove {
    color: #dc3545;
    background: rgba(220, 53, 69, 0.1);
    border: none;
    padding: 6px 10px;
    border-radius: 8px;
}

.contest-btn-remove:hover {
    background: rgba(220, 53, 69, 0.2);
    color: #dc3545;
}

.contest-question-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.contest-form-actions {
    margin-bottom: 0;
}

.contest-form-submit {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 1rem;
    border-top: 1px solid rgba(33, 74, 161, 0.12);
}

html[dir="rtl"] .contest-form-submit {
    justify-content: flex-end;
}

.contest-submit-btn {
    background: var(--sopc-cyan) !important;
    border-color: var(--sopc-cyan) !important;
    padding: 12px 24px;
    font-weight: 600;
    border-radius: 10px;
}

.contest-submit-btn:hover {
    background: #1a9fd4 !important;
    border-color: #1a9fd4 !important;
    color: #fff;
}

/* ============================================================
   Contest results page – table style like contests index
   ============================================================ */
.contest-results-card {
    border-radius: 12px;
    border: 1px solid rgba(33, 74, 161, 0.12);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.contest-results-card .card-body {
    padding: 28px 24px 32px;
}

.contest-results-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--sopc-navy);
    margin: 0 0 24px 0;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(33, 74, 161, 0.15);
}

.contest-results-empty {
    border-radius: 10px;
    padding: 24px;
}

.contest-results-table {
    margin-bottom: 0;
}

.contest-results-table thead th {
    white-space: nowrap;
    padding: 14px 12px;
    font-weight: 700;
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--sopc-navy) 0%, var(--sopc-navy-dark) 100%) !important;
    border: none !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.contest-results-table thead th a {
    color: #ffffff !important;
}
.contest-results-table thead th a:hover {
    color: var(--sopc-cyan) !important;
    text-decoration: underline;
}

.contest-results-table tbody td {
    padding: 12px;
    vertical-align: middle;
}

.contest-results-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

html[dir="rtl"] .contest-results-actions {
    justify-content: flex-end;
}

.contest-results-export-btn {
    display: inline-flex;
    align-items: center;
    padding: 12px 20px;
    font-weight: 600;
    border-radius: 10px;
    background: var(--sopc-cyan);
    color: #fff;
    border: none;
}

.contest-results-export-btn:hover {
    background: #1a9fd4;
    color: #fff;
}

/* ============================================================
   Missions / Trainings / Appraisals – shared list table style
   ============================================================ */
.sopc-list-card {
    border-radius: 12px;
    border: 1px solid rgba(33, 74, 161, 0.12);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.sopc-list-card .card-body {
    padding: 24px;
}

.sopc-list-table {
    margin-bottom: 0;
}

.sopc-list-table thead th {
    white-space: nowrap;
    padding: 14px 12px;
    font-weight: 700;
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--sopc-navy) 0%, var(--sopc-navy-dark) 100%) !important;
    border: none !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.sopc-list-table thead th .sopc-th-link {
    color: #ffffff !important;
}
.sopc-list-table thead th .sopc-th-link:hover {
    color: var(--sopc-cyan) !important;
    text-decoration: underline;
}
.sopc-list-table thead th .fa,
.sopc-list-table thead th i {
    color: #ffffff !important;
    opacity: 0.95;
}

.sopc-th-link {
    color: var(--sopc-navy);
    text-decoration: none;
    font-weight: 700;
}
/* When inside table header, .sopc-th-link is styled above via .sopc-list-table thead th .sopc-th-link */
.sopc-th-link:hover {
    color: var(--sopc-cyan);
}

.sopc-list-table tbody td {
    padding: 12px;
    vertical-align: middle;
}

/* Ads table – media column */
.ads-table-media {
    display: block;
    max-width: 120px;
    border-radius: 8px;
}
.ads-table-img {
    max-height: 70px;
    object-fit: cover;
}
.ads-table-video {
    max-height: 70px;
    width: 120px;
}

/* ============================================================
   Ads view (public list) – /ads/view
   ============================================================ */
.ads-view-empty-card {
    border-radius: 12px;
    border: 1px solid rgba(33, 74, 161, 0.12);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.ads-view-empty-icon {
    font-size: 3rem;
    color: rgba(33, 74, 161, 0.25);
}

.ads-view-empty-title {
    font-weight: 700;
    color: var(--sopc-navy);
}

.ads-view-grid {
    row-gap: 1.75rem;
}

.ads-view-card {
    border-radius: 12px;
    border: 1px solid rgba(33, 74, 161, 0.12);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.ads-view-card:hover {
    box-shadow: 0 4px 16px rgba(33, 74, 161, 0.12);
    border-color: rgba(33, 74, 161, 0.2);
}

.ads-view-media-wrap {
    background: #f8fafc;
    overflow: hidden;
}
.ads-view-media-wrap-clickable {
    cursor: pointer;
}

.ads-view-media-link {
    display: block;
    line-height: 0;
}

.ads-view-media {
    display: block;
    width: 100%;
    height: auto;
}

.ads-view-img {
    max-height: 220px;
    object-fit: cover;
    width: 100%;
}

.ads-view-video {
    width: 100%;
    max-height: 220px;
    background: #000;
}

.ads-view-card .card-body {
    padding: 20px 24px 24px;
}

.ads-view-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--sopc-navy);
    margin: 0 0 10px 0;
}

.ads-view-note {
    font-size: 0.95rem;
    color: #64748b;
    line-height: 1.5;
    flex-grow: 1;
}

.ads-view-dates {
    border-top: 1px solid rgba(33, 74, 161, 0.1);
}

.ads-view-date-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--sopc-cyan);
}

.sopc-list-table tfoot .sopc-list-note {
    padding: 14px 12px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--sopc-navy);
    background: rgba(239, 68, 68, 0.08);
    border-top: 2px solid rgba(239, 68, 68, 0.2);
}

.sopc-pagination-info {
    font-size: 0.9rem;
}

.sopc-pagination-links {
    display: flex;
    justify-content: flex-end;
}

html[dir="rtl"] .sopc-pagination-links {
    justify-content: flex-start;
}

/* DataTables inside sopc card – align with our theme */
.sopc-list-card .dataTables_wrapper .dataTables_length,
.sopc-list-card .dataTables_wrapper .dataTables_filter,
.sopc-list-card .dataTables_wrapper .dataTables_info {
    color: var(--sopc-navy);
}

.sopc-list-card .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--sopc-cyan) !important;
    border-color: var(--sopc-cyan) !important;
    color: #fff !important;
}

.sopc-list-card .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: rgba(35, 178, 235, 0.15) !important;
    border-color: var(--sopc-cyan) !important;
    color: var(--sopc-navy) !important;
}

/* ============================================================
   Contests available page – list of active contests
   ============================================================ */
.contests-available-card {
    border-radius: 12px;
    border: 1px solid rgba(33, 74, 161, 0.12);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.contests-available-card:hover {
    box-shadow: 0 4px 16px rgba(33, 74, 161, 0.12);
    border-color: rgba(33, 74, 161, 0.2);
}

/* Vertical spacing: larger gaps between rows and inside cards */
.contests-available-grid {
    row-gap: 1.75rem;
}

.contests-available-card .card-body {
    padding: 28px 26px 28px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.contests-available-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--sopc-navy);
    margin: 0 0 18px 0;
}

.contests-available-desc {
    font-size: 0.95rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0 0 22px 0;
    flex-grow: 1;
    min-height: 2.4em;
}

.contests-available-dates {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.contests-available-date-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 8px;
}

.contests-available-date-from {
    background: rgba(34, 197, 94, 0.12);
    color: #15803d;
}

.contests-available-date-to {
    background: rgba(239, 68, 68, 0.1);
    color: #b91c1c;
}

.contests-available-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    font-weight: 600;
    border-radius: 10px;
    background: var(--sopc-cyan);
    color: #fff;
    border: none;
    text-decoration: none;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.contests-available-btn:hover {
    background: #1a9fd4;
    color: #fff;
    box-shadow: 0 2px 8px rgba(35, 178, 235, 0.35);
}

.contests-available-empty-icon {
    font-size: 3rem;
    color: rgba(33, 74, 161, 0.25);
}

.contests-available-empty-title {
    font-weight: 700;
    color: var(--sopc-navy);
}

/* ============================================================
   Contest show page – take the contest
   ============================================================ */
.contest-show-alert {
    border-radius: 10px;
}

.contest-show-header-card {
    border-radius: 12px;
    border: 1px solid rgba(33, 74, 161, 0.12);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.contest-show-header-card .card-body {
    padding: 24px;
}

.contest-show-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--sopc-navy);
    margin: 0 0 12px 0;
}

.contest-show-desc {
    font-size: 1rem;
    line-height: 1.6;
}

.contest-show-media-card {
    border-radius: 12px;
    border: 1px solid rgba(33, 74, 161, 0.12);
    overflow: hidden;
}

.contest-show-media-card .card-body {
    padding: 0;
}

.contest-show-media {
    display: block;
    width: 100%;
    max-width: 100%;
}

.contest-show-video {
    max-height: 400px;
    background: #000;
}

.contest-show-img {
    border-radius: 0;
    max-height: 400px;
    object-fit: contain;
}

.contest-show-question-card {
    border-radius: 12px;
    border: 1px solid rgba(33, 74, 161, 0.15);
    background: rgba(33, 74, 161, 0.02);
}

.contest-show-question-card .card-body {
    padding: 20px 24px;
}

.contest-show-question-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--sopc-navy);
    margin: 0 0 16px 0;
    line-height: 1.5;
}

.contest-show-question-num {
    color: var(--sopc-cyan);
    margin-inline-end: 6px;
}

.contest-show-required {
    color: #dc3545;
}

.contest-show-answers {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contest-show-radio-label {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    font-weight: 500;
    color: var(--sopc-navy);
    cursor: pointer;
    line-height: 1.4;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(33, 74, 161, 0.15);
    background: #fff;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.contest-show-radio-label:hover {
    border-color: rgba(35, 178, 235, 0.4);
    background: rgba(35, 178, 235, 0.04);
}

.contest-show-radio-label input[type="radio"] {
    position: static !important;
    margin: 0 !important;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    accent-color: var(--sopc-cyan);
    cursor: pointer;
}

.contest-show-radio-text {
    flex: 1;
}

.contest-show-actions {
    margin-top: 24px;
    margin-bottom: 32px;
}

.contest-show-submit-btn {
    display: inline-flex;
    align-items: center;
    padding: 14px 28px;
    font-weight: 600;
    font-size: 1.05rem;
    border-radius: 10px;
    background: var(--sopc-cyan);
    color: #fff;
    border: none;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.contest-show-submit-btn:hover {
    background: #1a9fd4;
    color: #fff;
    box-shadow: 0 2px 12px rgba(35, 178, 235, 0.4);
}

html[dir="rtl"] .contest-show-actions {
    text-align: right;
}

/* ============================================================
   Layout: topbar as main menu (sidebar hidden, no space reserved)
   ============================================================ */
#main-wrapper.layout-topbar .left-sidebar,
.layout-topbar .left-sidebar {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    visibility: hidden !important;
}
html[dir="rtl"] .layout-topbar .left-sidebar,
html[dir="rtl"] #main-wrapper.layout-topbar .left-sidebar {
    left: auto !important;
    right: -9999px !important;
}
#main-wrapper.layout-topbar .page-wrapper,
.layout-topbar .page-wrapper {
    margin-right: 0 !important;
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}
html[dir="rtl"] #main-wrapper.layout-topbar .page-wrapper,
html[dir="rtl"] .layout-topbar .page-wrapper {
    margin-right: 0 !important;
    margin-left: 0 !important;
}
.layout-topbar .navbar-brand .sidebartoggler {
    display: none !important;
}
.layout-topbar .nav-toggler {
    display: none !important;
}

/* Mobile: three-dots dropdown in header (profile, password, notifications, logout) */
.topbar .navbar-header .dropdown .nav-link,
.topbar .navbar-header .dropdown .nav-link i,
.topbar .navbar-header .dropdown .nav-link .fa-ellipsis-vertical {
    color: #ffffff !important;
}
.topbar .navbar-header .dropdown .dropdown-menu {
    min-width: 12rem;
}
/* Prevent dropdown and notification badge from being clipped */
.topbar .navbar-header,
.topbar .navbar-header .mobile-profile-dropdown,
.topbar .navbar-header .mobile-notifications-dropdown,
.topbar .top-navbar {
    overflow: visible !important;
}
/* Mobile notifications bell: white icon like three-dots */
.topbar .navbar-header .mobile-notifications-dropdown .nav-link,
.topbar .navbar-header .mobile-notifications-dropdown .nav-link i,
.topbar .navbar-header .mobile-notifications-dropdown .mdi {
    color: #ffffff !important;
}
/* Mobile: match desktop – bell then badge, same order and look as desktop nav-item */
.topbar .navbar-header .mobile-notifications-dropdown {
    padding: 6px 8px;
    overflow: visible !important;
}
.topbar .navbar-header .mobile-notifications-dropdown .nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 2.5rem;
    padding: 6px 8px;
    overflow: visible !important;
    direction: ltr; /* always bell then badge, like desktop */
}
.topbar .navbar-header .mobile-notifications-dropdown .nav-link .mdi.mdi-bell-outline {
    font-size: 1.375rem; /* font-22 ≈ 22px like desktop */
    flex-shrink: 0;
}
/* Badge: same as desktop – white bg, navy number, pill shape (global .noti applies) */
.topbar .navbar-header .mobile-notifications-dropdown .nav-link .badge.noti {
    position: static;
    margin: 0;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}
.topbar .navbar-header .mobile-notifications-menu {
    min-width: 18rem;
    max-height: 85vh;
    overflow-y: auto;
}
.topbar .navbar-header .mobile-profile-menu {
    min-width: 14rem;
    padding: 0.5rem 0;
}
/* On mobile: notifications and profile dropdowns take full width (override Popper) */
@media (max-width: 767.98px) {
    .topbar .navbar-header .mobile-notifications-dropdown .dropdown-menu,
    .topbar .navbar-header .mobile-notifications-menu,
    .topbar .navbar-header .mobile-profile-dropdown .dropdown-menu,
    .topbar .navbar-header .mobile-profile-menu {
        position: fixed !important;
        top: 64px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: auto !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        transform: none !important;
        margin: 0 !important;
        border-radius: 0 0 var(--sopc-radius, 12px) var(--sopc-radius, 12px) !important;
        max-height: calc(100vh - 64px) !important;
    }
}
.topbar .navbar-header .mobile-profile-menu .dropdown-item {
    padding: 0.6rem 1rem;
    display: flex;
    align-items: center;
    color: #212529 !important;
    white-space: nowrap;
}
.topbar .navbar-header .mobile-profile-menu .dropdown-item i {
    color: #212529 !important;
}
.topbar .navbar-header .mobile-profile-menu .dropdown-item:hover,
.topbar .navbar-header .mobile-profile-menu .dropdown-item:focus {
    background: var(--sopc-cyan-soft) !important;
    color: var(--sopc-navy) !important;
}
.topbar .navbar-header .mobile-profile-menu .dropdown-divider {
    margin: 0.35rem 0;
}
.topbar .navbar-header .mobile-profile-menu form button.dropdown-item {
    width: 100%;
    text-align: right;
    border: none;
    background: transparent;
    cursor: pointer;
}
html[dir="ltr"] .topbar .navbar-header .mobile-profile-menu form button.dropdown-item {
    text-align: left;
}

/* Navbar collapse: show topbar menu on desktop only; mobile uses drawer */
.layout-topbar .navbar-collapse {
    flex-basis: 100%;
    flex-grow: 1;
}
.layout-topbar .navbar-collapse .topbar-menu-nav {
    display: flex !important;
}
@media (max-width: 767.98px) {
    .layout-topbar .navbar-collapse.collapse,
    .layout-topbar .navbar-collapse.collapse.show {
        display: none !important;
    }
}

/* ========== Mobile menu: off-canvas drawer ========== */
.mobile-drawer-overlay,
.mobile-drawer {
    display: none;
}
@media (max-width: 767.98px) {
    .mobile-drawer-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 1040;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.25s ease, visibility 0.25s ease;
        pointer-events: none;
    }
    /* Mobile drawer: always open from the right on mobile */
    .mobile-drawer {
        display: block;
        position: fixed;
        top: 0;
        bottom: 0;
        left: auto;
        right: 0;
        width: 85%;
        max-width: 320px;
        background: var(--sopc-white, #fff);
        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
        z-index: 1050;
        overflow-y: auto;
        transition: transform 0.3s ease;
        transform: translateX(100%);
    }
    body.mobile-drawer-open .mobile-drawer-overlay {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    body.mobile-drawer-open .mobile-drawer {
        transform: translateX(0);
    }

    .mobile-drawer__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 1.25rem;
        background: var(--sopc-navy, #214aa1);
        color: #fff;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    .mobile-drawer__title {
        font-weight: 600;
        font-size: 1.1rem;
    }
    .mobile-drawer__close {
        width: 40px;
        height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: none;
        background: rgba(255, 255, 255, 0.15);
        color: #fff;
        border-radius: 8px;
        font-size: 1.25rem;
        cursor: pointer;
        transition: background 0.2s ease;
    }
    .mobile-drawer__close:hover {
        background: rgba(255, 255, 255, 0.25);
    }

    .mobile-drawer__nav {
        padding: 0.75rem 0;
    }
    .mobile-drawer__nav .topbar-menu-nav {
        flex-direction: column !important;
        align-items: stretch !important;
        margin: 0 !important;
        gap: 0 !important;
        padding: 0 !important;
    }
    .mobile-drawer__nav .topbar-menu-nav .nav-item {
        border-bottom: 1px solid rgba(33, 74, 161, 0.08);
    }
    .mobile-drawer__nav .topbar-menu-nav .nav-item.dropdown {
        display: block !important;
    }
    .mobile-drawer__nav .topbar-menu-nav .nav-link.topbar-link {
        color: var(--sopc-navy, #214aa1) !important;
        padding: 0.85rem 1.25rem !important;
        justify-content: flex-start;
        border-radius: 0;
        font-weight: 500;
    }
    .mobile-drawer__nav .topbar-menu-nav .nav-link.topbar-link span {
        display: inline !important;
    }
    .mobile-drawer__nav .topbar-menu-nav .nav-link.topbar-link:hover,
    .mobile-drawer__nav .topbar-menu-nav .nav-link.topbar-link:focus {
        background: var(--sopc-cyan-soft, rgba(35, 178, 235, 0.12)) !important;
        color: var(--sopc-navy) !important;
    }
    .mobile-drawer__nav .topbar-menu-nav .nav-link.topbar-link.active {
        background: rgba(35, 178, 235, 0.2) !important;
        color: var(--sopc-navy) !important;
    }
    .mobile-drawer__nav .topbar-menu-nav .dropdown-menu {
        position: static !important;
        float: none !important;
        transform: none !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        margin: 0 !important;
        margin-top: 0.35rem !important;
        padding: 0.25rem 0 0.5rem 0.5rem !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        border-right: 2px solid rgba(33, 74, 161, 0.2);
        width: 100% !important;
        display: none;
    }
    .mobile-drawer__nav .topbar-menu-nav .dropdown-menu.show {
        display: block !important;
    }
    html[dir="rtl"] .mobile-drawer__nav .topbar-menu-nav .dropdown-menu {
        border-right: none;
        border-left: 2px solid rgba(33, 74, 161, 0.2);
        padding: 0 0.5rem 0 0 !important;
    }
    .mobile-drawer__nav .topbar-menu-nav .dropdown-item {
        padding: 0.6rem 1rem 0.6rem 2rem !important;
        font-size: 0.9rem;
    }
    html[dir="rtl"] .mobile-drawer__nav .topbar-menu-nav .dropdown-item {
        padding: 0.6rem 2rem 0.6rem 1rem !important;
    }
    .mobile-drawer__nav .topbar-menu-nav .dropdown-item:hover,
    .mobile-drawer__nav .topbar-menu-nav .dropdown-item:focus {
        background: var(--sopc-cyan-soft) !important;
    }
    .mobile-drawer__nav .topbar-menu-nav .dropdown-toggle::after {
        margin-right: auto;
        margin-left: 0.5rem;
    }
    html[dir="rtl"] .mobile-drawer__nav .topbar-menu-nav .dropdown-toggle::after {
        margin-right: 0.5rem;
        margin-left: auto;
    }
}

/* Topbar menu: sections and dropdowns */
.topbar-menu-nav {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    margin-right: auto;
    margin-left: 0;
}
html[dir="rtl"] .topbar-menu-nav {
    margin-right: 0;
    margin-left: auto;
}
.topbar-menu-nav .nav-item {
    position: relative;
}
.topbar-menu-nav .nav-link.topbar-link {
    color: rgba(255, 255, 255, 0.9) !important;
    padding: 0.5rem 0.65rem;
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s ease, color 0.2s ease;
}
.topbar-menu-nav .nav-link.topbar-link:hover,
.topbar-menu-nav .nav-link.topbar-link:focus {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.15);
}
.topbar-menu-nav .nav-link.topbar-link.active {
    background: rgba(35, 178, 235, 0.35);
    color: #fff !important;
}
.topbar-menu-nav .dropdown-menu {
    margin-top: 4px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(33, 74, 161, 0.1);
    padding: 6px 0;
}
.topbar-menu-nav .dropdown-item {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}
.topbar-menu-nav .dropdown-item:hover,
.topbar-menu-nav .dropdown-item:focus {
    background: var(--sopc-cyan-soft);
    color: var(--sopc-navy);
}
.topbar-menu-nav .dropdown-item.active {
    background: rgba(35, 178, 235, 0.2);
    color: var(--sopc-navy);
    font-weight: 600;
}
@media (max-width: 991px) {
    .topbar-menu-nav {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        margin: 0;
    }
    .topbar-menu-nav .nav-link.topbar-link span {
        display: inline !important;
    }
    .topbar-menu-nav .nav-link.topbar-link {
        padding: 0.6rem 0.75rem;
    }
}