/* ============================================================
   GreenLinks — Master Layout Stylesheet
   ============================================================
   Table of Contents:
   1.  Fonts
   2.  Design Tokens (CSS Custom Properties)
   3.  Base Styles (body, links, headings)
   4.  RTL Support
   5.  Layout (container, container-fluid)
   6.  Components
       6.1  Buttons
       6.2  Alerts
       6.3  Forms & Inputs
       6.4  Cards
       6.5  Dropdowns & Chevron
       6.6  Tables
       6.7  Progress Bars & List Groups
       6.8  Pagination
   7.  Navbar
       7.1  Base navbar
       7.2  Brand
       7.3  Language switch
       7.4  Active links
   8.  Footer
   9.  Utility Classes
   10. Dark Mode
   11. Responsive
   12. Print
   13. Vendor / ABP Fixes
   ============================================================ */


/* ==========================================================
   1. FONTS
   ========================================================== */

/* Cairo Variable (RTL) */
@font-face {
    font-family: 'Cairo';
    src: url('/fonts/Cairo-VariableFont_slnt,wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* Inter Variable (LTR) */
@font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

/* Inter Italic (LTR) */
@font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype-variations');
    font-weight: 100 800;
    font-style: italic;
    font-display: swap;
}


/* ==========================================================
   2. DESIGN TOKENS (CSS Custom Properties)
   ========================================================== */

:root {
    /* ----- Primary Brand ----- */
    --bs-primary: #198754;
    --bs-primary-rgb: 25, 135, 84;
    --bs-primary-hover: #157347;
    --bs-primary-light: #5eead4;
    --bs-primary-soft: #ecfdf5;

    /* ----- Secondary / Dark ----- */
    --bs-secondary: #0f172a;
    /* Slate 900 */
    --bs-secondary-rgb: 15, 23, 42;
    --text-main: #1e293b;
    /* Slate 800 */
    --text-muted: #64748b;
    /* Slate 500 */

    /* ----- Accent / Info (Emerald) ----- */
    --bs-info: #10b981;
    /* Emerald 500 */
    --bs-info-rgb: 16, 185, 129;
    --bs-info-dark: #059669;
    /* Emerald 600 */

    /* ----- State Colors ----- */
    --bs-success: #10b981;
    --bs-success-rgb: 16, 185, 129;
    --bs-warning: #facc15;
    /* Yellow 400 */
    --bs-warning-rgb: 250, 204, 21;
    --bs-danger: #ef4444;
    /* Red 500 */
    --bs-danger-rgb: 239, 68, 68;

    /* ----- Text ----- */
    --bs-body-color: #1e293b;
    /* Slate 800 */
    --bs-body-color-rgb: 30, 41, 59;
    --bs-secondary-color: #64748b;
    /* Slate 500 */
    --bs-muted: #94a3b8;
    /* Slate 400 */

    /* ----- Backgrounds ----- */
    --bs-body-bg: #f8fafc;
    /* Slate 50 */
    --bs-body-bg-rgb: 248, 250, 252;
    --bs-light-bg: #f8fafc;
    --bs-dark-bg: #0f172a;

    /* ----- Borders ----- */
    --bs-border-color: #e2e8f0;
    /* Slate 200 */
    --bs-border-color-translucent: rgba(226, 232, 240, 0.75);
    --border: #e2e8f0;

    /* ----- Links ----- */
    --bs-link-color: #0d9488;
    --bs-link-color-rgb: 13, 148, 136;
    --bs-link-hover-color: #0f766e;

    /* ----- Cards ----- */
    --bs-card-bg: #ffffff;
    --bs-card-cap-bg: #ffffff;

    /* ----- Shadows (Glow Teal System) ----- */
    --bs-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 0 0 0 rgba(13, 148, 136, .15);
    --bs-box-shadow-sm: 0 1px 3px rgba(0, 0, 0, .1);
    --bs-box-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 0 40px rgba(13, 148, 136, .15);
    --bs-shadow1: 0 4px 14px rgba(13, 148, 136, 0.3);

    /* ----- Gradients ----- */
    --gradient-primary: linear-gradient(135deg, #0d9488 0%, #10b981 100%);
    --gradient-hero: linear-gradient(135deg, #ecfdf5 0%, #f0fdfa 50%, #e0f2fe 100%);

    /* ----- Fonts ----- */
    --bs-font-sans-serif: 'Inter', system-ui, -apple-system, sans-serif;
    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    /* ----- Border Radius ----- */
    --bs-border-radius-sm: 8px;
    --bs-border-radius: 12px;
    --bs-border-radius-lg: 16px;
    --bs-border-radius-xl: 24px;
    --bs-border-radius-xxl: 32px;
    --bs-border-radius-pill: 50rem;

    /* ----- Transition ----- */
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ==========================================================
   3. BASE STYLES
   ========================================================== */

body {
    font-family: var(--bs-font-sans-serif);
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    line-height: 1.6;
}

a {
    color: var(--bs-link-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--bs-link-hover-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--bs-body-color);
    font-weight: 600;
}


/* ==========================================================
   4. RTL SUPPORT
   ========================================================== */

/* RTL Font Override */
[dir="rtl"] {
    --bs-font-sans-serif: 'Cairo', sans-serif;
}

/* Flip chevron in RTL */
[dir="rtl"] .rtl-flip {
    transform: rotate(180deg);
}

[dir="rtl"] {

    /* Reverse dropdowns for RTL */
    .dropdown-menu-end {
        right: auto !important;
        left: 0 !important;
    }

    /* Adjust text alignment */
    .text-start {
        text-align: right !important;
    }

    .text-end {
        text-align: left !important;
    }

    /* Form controls */
    .form-check {
        padding-right: 1.5em;
        padding-left: 0;
    }

    .form-check-input {
        margin-right: -1.5em;
        margin-left: 0;
    }

    .form-check-label {
        margin-right: 0.5rem;
        margin-left: 0;
    }
}


/* ==========================================================
   5. LAYOUT
   ========================================================== */

.container {
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 0 2rem !important;
}

.container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* ==========================================================
   6. COMPONENTS
   ========================================================== */

/* ----------------------------------------------------------
   6.1 Buttons
   ---------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.75rem;
    border-radius: 99px;
    font-weight: 700;
    font-size: 0.95rem;
    border: none;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
}

.btn-outline {
    background: transparent;
    border: 2px solid var(--border);
    color: var(--text-main);
}

.btn-outline:hover {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
    background: rgba(13, 148, 136, 0.05);
}

.btn-primary {
    background: var(--gradient-primary);
    color: white;
    box-shadow: var(--bs-shadow1);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(13, 148, 136, 0.4);
}

.btn-white {
    background: white;
    color: var(--bs-primary);
    box-shadow: var(--bs-box-shadow);
}

.btn-white:hover {
    transform: translateY(-2px);
    box-shadow: var(--bs-box-shadow-lg);
    color: var(--bs-primary);
}

.btn-outline-primary {
    background: transparent;
    border: 2px solid #10b981;
    color: #10b981;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.75rem;
    border-radius: 99px;
    font-weight: 700;
    transition: var(--transition);
}

.btn-outline-primary:hover {
    background-color: #10b981;
    border: 2px solid #10b981;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.btn-outline-primary:active,
.btn-outline-primary.active,
.show>.btn-outline-primary.dropdown-toggle {
    background-color: #059669 !important;
    border-color: #059669 !important;
    color: #ffffff !important;
}

/* Fix the Delete button hover state */
.dropdown-item.text-danger:hover,
.dropdown-item.text-danger:active,
.dropdown-item.text-danger:focus {
    background-color: #fff5f5 !important;
    color: #dc3545 !important;
}

/* Show Password button radius */
[dir="rtl"] button:has(> i.fa-eye),
[dir="rtl"] button:has(> i.fa-eye-slash) {
    border-top-left-radius: var(--bs-border-radius);
    border-bottom-left-radius: var(--bs-border-radius);
}

button:has(> i.fa-eye),
button:has(> i.fa-eye-slash) {
    border-top-right-radius: var(--bs-border-radius);
    border-bottom-right-radius: var(--bs-border-radius);
}


/* ----------------------------------------------------------
   6.2 Alerts
   ---------------------------------------------------------- */

.alert-primary {
    --bs-alert-bg: #E8F0F9;
    --bs-alert-border-color: #1D467D;
    --bs-alert-color: #1D467D;
}

.alert-success {
    --bs-alert-bg: #ECFDF5;
    --bs-alert-border-color: var(--bs-success);
    --bs-alert-color: #065F46;
}

.alert-danger {
    --bs-alert-bg: #FCE8EA;
    --bs-alert-border-color: var(--bs-danger);
    --bs-alert-color: #991B1B;
}

.alert-warning {
    --bs-alert-bg: #FEF3C7;
    --bs-alert-border-color: var(--bs-warning);
    --bs-alert-color: #92400E;
}


/* ----------------------------------------------------------
   6.3 Forms & Inputs
   ---------------------------------------------------------- */

.form-control:focus,
.form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem rgba(29, 70, 125, 0.25);
}

.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.form-check-input:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem rgba(29, 70, 125, 0.25);
}


/* ----------------------------------------------------------
   6.4 Cards
   ---------------------------------------------------------- */

.card {
    --bs-card-bg: var(--bs-card-bg);
    --bs-card-border-color: var(--bs-border-color);
    --bs-card-border-radius: 0.75rem;
    --bs-card-box-shadow: var(--bs-box-shadow);
    background-color: var(--bs-card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-card-border-radius);
    box-shadow: var(--bs-card-box-shadow);
}


/* ----------------------------------------------------------
   6.5 Dropdowns & Chevron
   ---------------------------------------------------------- */

/* --- Dropdown base --- */
.dropdown-menu {
    --bs-dropdown-bg: #FFFFFF;
    --bs-dropdown-link-color: var(--bs-body-color);
    --bs-dropdown-link-hover-color: var(--bs-primary);
    --bs-dropdown-link-hover-bg: var(--bs-primary-soft);
    --bs-dropdown-link-active-color: #FFFFFF;
    --bs-dropdown-link-active-bg: var(--bs-primary);
    padding: 0;
}

.dropdown-item {
    padding: 12px 28px;
    overflow: hidden;
}

/* Border radius on first/last items */
.dropdown-menu>.dropdown-item:first-child,
.dropdown-menu>.dropdown-submenu:first-child>.btn {
    border-top-left-radius: var(--bs-border-radius);
    border-top-right-radius: var(--bs-border-radius);
}

.dropdown-menu>.dropdown-item:last-child,
.dropdown-menu>.dropdown-submenu:last-child>.dropdown-menu>.dropdown-item:last-child {
    border-bottom-left-radius: var(--bs-border-radius);
    border-bottom-right-radius: var(--bs-border-radius);
}

/* Items inside <li> (for <ul> attachment menu) */
.dropdown-menu>li:first-child .dropdown-item,
.dropdown-menu>li:first-child button {
    border-top-left-radius: var(--bs-border-radius);
    border-top-right-radius: var(--bs-border-radius);
}

.dropdown-menu>li:last-child .dropdown-item,
.dropdown-menu>li:last-child button {
    border-bottom-left-radius: var(--bs-border-radius);
    border-bottom-right-radius: var(--bs-border-radius);
}

/* Dropdown icon transitions */
.dropdown-item:active i,
.dropdown-item:focus i {
    color: var(--bs-primary) !important;
}

.dropdown-item i {
    transition: color 0.2s ease;
}

/* --- Navbar-specific dropdowns --- */
.navbar .dropdown-menu {
    box-shadow: 0 30px 60px -20px rgba(13, 148, 136, .25);
    transform-origin: top center;
    animation: dropdownIn .25s ease forwards;
}

.navbar .dropdown-item,
.navbar>.btn {
    transition: var(--transition);
}

.navbar .dropdown-item:hover,
.navbar .dropdown-submenu>.btn:hover {
    background: var(--bs-primary-soft);
    color: var(--bs-primary);
}

.navbar .btn.dropdown-toggle {
    border-radius: 0;
}

/* Prevent ABP dropdown from escaping viewport and prevent width jumping */
.navbar .dropdown-menu[aria-labelledby="dropdownMenuLink"] {
    min-width: 250px;
    /* Fixed minimum width so expanding Admin menu doesn't resize box */
    max-width: calc(100vw - 1rem);
    overflow-x: hidden;
    inset-inline-end: 0 !important;
    inset-inline-start: auto !important;
}

/* Force nested submenus inside the User Profile to expand in-place (accordion style) on DESKTOP ONLY */
@media (min-width: 992px) {
    .navbar .dropdown-menu[aria-labelledby="dropdownMenuLink"] .dropdown-submenu .dropdown-menu {
        position: static !important;
        float: none !important;
        width: auto !important;
        margin-top: 0 !important;
        background-color: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        display: none !important;
    }

    .navbar .dropdown-menu[aria-labelledby="dropdownMenuLink"] .dropdown-submenu .dropdown-menu.show {
        display: block !important;
    }

    /* Keep nested items flush with parent items */
    .navbar .dropdown-menu[aria-labelledby="dropdownMenuLink"] .dropdown-submenu .dropdown-item {
        padding-left: 1rem !important;
    }

    [dir="rtl"] .navbar .dropdown-menu[aria-labelledby="dropdownMenuLink"] .dropdown-submenu .dropdown-item {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Reset the toggle button inside the Profile dropdown to full width */
    .navbar .dropdown-menu[aria-labelledby="dropdownMenuLink"] .dropdown-submenu>.btn {
        padding: 0.6rem 1rem !important;
        background-color: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        color: var(--bs-body-color) !important;
        text-align: inherit !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        font-family: inherit !important;
        font-size: inherit !important;
        font-weight: inherit !important;
        border-radius: 0 !important;
    }

    .navbar .dropdown-menu[aria-labelledby="dropdownMenuLink"] .dropdown-submenu>.btn:hover,
    .navbar .dropdown-menu[aria-labelledby="dropdownMenuLink"] .dropdown-submenu>.btn:active {
        color: var(--bs-primary) !important;
        background-color: var(--bs-light) !important;
    }

    /* Fix Chevron rotation for in-place accordion inside profile */
    .navbar .dropdown-menu[aria-labelledby="dropdownMenuLink"] .dropdown-toggle::after {
        transform: rotate(0deg) !important;
        /* Down */
        transition: transform 0.25s ease !important;
    }

    .navbar .dropdown-menu[aria-labelledby="dropdownMenuLink"] .dropdown.show>.dropdown-toggle::after,
    .navbar .dropdown-menu[aria-labelledby="dropdownMenuLink"] .dropdown-toggle[aria-expanded="true"]::after {
        transform: rotate(180deg) !important;
        /* Up */
    }
}

@keyframes dropdownIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* --- Custom Chevron (Bold & Wide) --- */
.dropdown-toggle::after {
    content: "";
    display: inline-block;
    margin-left: 8px;
    vertical-align: middle;
    position: relative;
    top: -1px;
    width: 12px;
    height: 7px;
    background: currentColor;
    clip-path: polygon(0 0, 50% 100%, 100% 0, 78% 0, 50% 62%, 22% 0);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
    transform: rotate(0deg);
    /* LTR Default (Closed) -> Points Down */
    opacity: 0.85;
}

.dropdown-toggle:hover::after,
.dropdown-toggle:focus::after {
    opacity: 1;
}

.dropdown.show>.dropdown-toggle::after,
.dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
    opacity: 1;
}

.dropdown-toggle[data-arrow="false"]::after {
    display: none !important;
}

[dir="rtl"] .dropdown-toggle::after {
    margin-left: 0;
    margin-right: 8px;
    transform: rotate(0deg);
    /* RTL Default (Closed) -> Points Down */
}

[dir="rtl"] .dropdown.show>.dropdown-toggle::after,
[dir="rtl"] .dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
    /* RTL Opened -> Points Up */
}


/* ----------------------------------------------------------
   6.6 Tables
   ---------------------------------------------------------- */

.table {
    --bs-table-color: var(--bs-body-color);
    --bs-table-border-color: var(--bs-border-color);
}

.table-primary {
    --bs-table-bg: var(--bs-primary-soft);
    --bs-table-color: var(--bs-primary);
}

.dataTable_footer {
    margin-top: 2rem;
}

/* DataTables RTL alignment */
[dir="rtl"] .dataTable th .dt-column-header {
    text-align: right !important;
}

[dir="rtl"] table.dataTable th {
    text-align: right !important;
}


/* ----------------------------------------------------------
   6.7 Progress Bars & List Groups
   ---------------------------------------------------------- */

.progress {
    --bs-progress-bar-bg: var(--bs-primary);
}

.list-group-item.active {
    --bs-list-group-active-bg: var(--bs-primary);
    --bs-list-group-active-border-color: var(--bs-primary);
}


/* ----------------------------------------------------------
   6.8 Pagination
   ---------------------------------------------------------- */

.page-link {
    color: var(--bs-primary);
}

.page-link:hover {
    color: var(--bs-primary-hover);
    background-color: var(--bs-primary-soft);
}

.page-item.active .page-link {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}


/* ==========================================================
   7. NAVBAR
   ========================================================== */

/* ----------------------------------------------------------
   7.1 Base Navbar
   ---------------------------------------------------------- */

.navbar {
    --bs-navbar-color: var(--bs-body-color);
    --bs-navbar-hover-color: var(--bs-primary);
    --bs-navbar-active-color: var(--bs-primary);
    --bs-navbar-brand-color: var(--bs-body-color);
    --bs-navbar-brand-hover-color: var(--bs-primary);
    background-color: #FFFFFF !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.nav-link.active {
    color: #FFFFFF !important;
    background-color: var(--bs-primary) !important;
    border-radius: var(--bs-border-radius);
}

.navbar-toggler {
    border: none !important;
    outline: none !important;
    -webkit-appearance: none;
    box-shadow: none !important;
}

.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}


/* ----------------------------------------------------------
   7.2 Brand
   ---------------------------------------------------------- */

.brand-container {
    text-align: center;
}

.brand-logo {
    height: 50px;
}

.brand-text {
    font-weight: 900;
    font-size: 1.75rem;
    letter-spacing: -0.03em;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}


/* ----------------------------------------------------------
   7.3 Language Switch
   ---------------------------------------------------------- */

.nav-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0px 15px;
}

.lang-switch {
    display: flex;
    background: #f1f5f9;
    border-radius: 99px;
    padding: 4px;
    gap: 2px;
}

.lang-btn {
    text-decoration: none;
    border: none;
    background: transparent;
    padding: 6px 14px;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-muted);
    border-radius: 99px;
    cursor: pointer;
    transition: var(--transition);
}

.lang-btn:hover {
    color: var(--primary);
}

.lang-btn.active {
    background: white;
    color: var(--bs-primary);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}


/* ----------------------------------------------------------
   7.4 Active Links
   ---------------------------------------------------------- */

.active-link {
    position: relative;
    font-weight: 600;
}

.active-link::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--gradient-primary);
    border-radius: 99px;
}

.active-parent>.dropdown>.nav-link {
    font-weight: 600;
}


/* ==========================================================
   8. FOOTER
   ========================================================== */

footer[aria-labelledby="footer-heading"] {
    background: var(--bs-secondary);
    color: #FFFFFF;
    padding: 4rem 0 2rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
}

.footer-col h4 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: #FFFFFF;
}

.footer-col p {
    color: #94a3b8;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.footer-links {
    list-style: none;
    padding: 0;
}

.footer-links li {
    margin-bottom: 0.75rem;
}

.footer-links a {
    color: #94a3b8;
    text-decoration: none;
    transition: var(--transition);
}

.footer-links a:hover {
    color: var(--primary-light);
}

.footer-bottom {
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #94a3b8;
    font-size: 0.9rem;
}

.footer-bottom a {
    color: inherit;
    text-decoration: none;
}

.footer-bottom a:hover {
    color: var(--primary-light);
}


/* ==========================================================
   9. UTILITY CLASSES
   ========================================================== */

/* Background Colors */
.bg-primary-soft {
    background-color: var(--bs-primary-soft) !important;
}

.bg-light-custom {
    background-color: var(--bs-light-bg) !important;
}

/* Text Colors */
.text-primary-hover:hover {
    color: var(--bs-primary-hover) !important;
}

.text-muted-custom {
    color: var(--bs-muted) !important;
}

/* Borders */
.border-primary-soft {
    border-color: var(--bs-primary-soft) !important;
}

/* Shadows */
.shadow-primary {
    box-shadow: var(--bs-box-shadow) !important;
}


/* ==========================================================
   10. DARK MODE
   ========================================================== */

[data-bs-theme="dark"] {
    --bs-body-color: #E5E7EB;
    --bs-body-bg: #111827;
    --bs-card-bg: #1F2937;
    --bs-border-color: #374151;
    --bs-primary: #3B82F6;
    --bs-primary-soft: #1E3A8A;
    --bs-light-bg: #1F2937;
}


/* ==========================================================
   11. RESPONSIVE
   ========================================================== */

@media (max-width: 991.98px) {
    :root {
        --bs-border-radius-lg: 0.5rem;
        --bs-card-border-radius: 0.5rem;
    }

    .navbar-nav li {
        margin: 10px 0;
    }

    .nav-actions {
        margin: 0px 0px;
    }

    /* Constrain the mobile menu height to prevent scrolling the whole page */
    .navbar-collapse {
        max-height: calc(100vh - 5rem);
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* Make standard click dropdowns behave as in-place accordions on Mobile/Tablet */
    .navbar .dropdown-menu {
        display: none !important;
        /* Force toggle display to let Bootstrap handle show/hide */
        position: static !important;
        float: none !important;
        width: auto !important;
        margin-top: 0 !important;
        background-color: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    .navbar .dropdown-menu.show {
        display: block !important;
    }

    /* Shifted items fix on mobile/tablet (flush alignment, not shifted) */
    .navbar .dropdown-item {
        padding: 0.6rem 0 !important;
        /* Remove horizontal shifting completely */
        color: var(--bs-body-color) !important;
        background-color: transparent !important;
    }

    .navbar .dropdown-item:hover,
    .navbar .dropdown-item:active {
        background-color: transparent !important;
        color: var(--bs-primary) !important;
        /* Elegant color transition without bulky boxes */
    }

    /* Indent nested sub-menus slightly on mobile/tablet for visual hierarchy */
    .navbar .dropdown-submenu .dropdown-menu {
        padding-left: 1rem !important;
        padding-right: 0 !important;
    }

    [dir="rtl"] .navbar .dropdown-submenu .dropdown-menu {
        padding-left: 0 !important;
        padding-right: 1rem !important;
    }

    /* Style sub-menu toggle buttons inside dropdowns to match dropdown-items exactly on mobile/tablet */
    .navbar .dropdown-submenu>.btn {
        padding: 0.6rem 0 !important;
        /* Keep flush and unshifted */
        background-color: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        color: var(--bs-body-color) !important;
        text-align: inherit !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        font-family: inherit !important;
        font-size: inherit !important;
        font-weight: inherit !important;
        border-radius: 0 !important;
    }

    .navbar .dropdown-submenu>.btn:hover,
    .navbar .dropdown-submenu>.btn:active {
        color: var(--bs-primary) !important;
        background-color: transparent !important;
    }

    /* RTL/LTR Closed and Open chevron adaptations on mobile/tablet */
    .navbar .dropdown-toggle::after {
        transform: rotate(0deg) !important;
        /* Default Closed -> Points Down */
        transition: transform 0.25s ease !important;
    }

    .navbar .dropdown.show>.dropdown-toggle::after,
    .navbar .dropdown-toggle[aria-expanded="true"]::after {
        transform: rotate(180deg) !important;
        /* Opened -> Points Up */
    }

    [dir="rtl"] .navbar .dropdown-toggle::after {
        transform: rotate(0deg) !important;
        /* Default Closed -> Points Down */
    }

    [dir="rtl"] .navbar .dropdown.show>.dropdown-toggle::after,
    .navbar .dropdown-toggle[aria-expanded="true"]::after {
        transform: rotate(180deg) !important;
        /* Opened -> Points Up */
    }
}

/* --- Desktop Nav Spacing & "More" Dropdown Toggle --- */
@media (min-width: 992px) {

    /* Hide the designated overflow items from the main list */
    li.nav-item.nav-overflow-item {
        display: none !important;
    }

    /* Show the dedicated More menu */
    .desktop-more-menu {
        display: block !important;
    }

    .navbar .dropdown-menu {
        top: 100% !important;
        margin-top: 14px !important;
    }

    .navbar .dropdown-submenu>.dropdown-menu {
        top: -0.5rem !important;
        margin-top: 0 !important;
    }
}

@media (max-width: 991.98px) {

    /* Hide the desktop "More" menu entirely on mobile/tablet */
    .desktop-more-menu {
        display: none !important;
    }
}





@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
}


/* ==========================================================
   12. PRINT
   ========================================================== */

@media print {
    :root {
        --bs-body-bg: #FFFFFF !important;
        --bs-body-color: #000000 !important;
        --bs-card-bg: #FFFFFF !important;
    }

    .navbar,
    .btn,
    .no-print {
        display: none !important;
    }
}


/* ==========================================================
   13. VENDOR / ABP FIXES
   ========================================================== */

/* Toast close button fix (RTL) */
[dir="rtl"] .abp-toast-close-button {
    position: absolute;
    top: 0;
    right: 100%;
    display: flex;
    transform: translateX(100%);
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0px 5px 0 0;
    width: 25px;
    height: 100%;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
}:root{--bs-primary:#198754;--bs-primary-rgb:25,135,84;--bs-primary-hover:#157347}.btn-primary{background-color:var(--bs-primary);border-color:var(--bs-primary)}.message-area{height:100vh;overflow:hidden;padding:30px 0;background:#f5f5f5}.chat-area{position:relative;width:100%;background-color:#fff;border-radius:.3rem;height:80vh;overflow:hidden;min-height:calc(100% - 1rem)}.chatlist{outline:0;height:100%;overflow:hidden;width:300px;float:left;padding:15px}.chat-area .modal-content{border:0;border-radius:0;outline:0;height:100%}.chat-area .modal-dialog-scrollable{height:100%!important}.chatbox{width:auto;overflow:hidden;height:100%;border-left:1px solid #ccc}.chatbox .modal-dialog,.chatlist .modal-dialog{max-width:100%;margin:0}.msg-search{display:flex;align-items:center;justify-content:space-between}.chat-area .form-control{display:block;width:80%;padding:.375rem .75rem;font-size:14px;font-weight:400;line-height:1.5;color:#222;background-color:#fff;background-clip:padding-box;border:1px solid #ccc;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.chat-area .form-control:focus{outline:0;box-shadow:inherit}a.add img{height:36px}.chat-area .nav-tabs{border-bottom:1px solid #dee2e6;align-items:center;justify-content:space-between;flex-wrap:inherit}.chat-area .nav-tabs .nav-item{width:100%}.chat-area .nav-tabs .nav-link{width:100%;color:#180660;font-size:14px;font-weight:500;line-height:1.5;text-transform:capitalize;margin-top:5px;margin-bottom:-1px;background:0 0;border:1px solid transparent;border-top-left-radius:.25rem;border-top-right-radius:.25rem}.chat-area .nav-tabs .nav-item.show .nav-link,.chat-area .nav-tabs .nav-link.active{color:#222;background-color:#fff;border-color:transparent transparent #000}.chat-area .nav-tabs .nav-link:focus,.chat-area .nav-tabs .nav-link:hover{border-color:transparent transparent #000;isolation:isolate}.chat-list h3{color:#222;font-size:16px;font-weight:500;line-height:1.5;text-transform:capitalize;margin-bottom:0}.chat-list p{color:#343434;font-size:14px;font-weight:400;line-height:1.5;text-transform:capitalize;margin-bottom:0}.chat-list a.d-flex{margin-bottom:15px;position:relative;text-decoration:none}.chat-list .active{display:block;content:'';clear:both;position:absolute;bottom:3px;left:34px;height:12px;width:12px;background:#00db75;border-radius:50%;border:2px solid #fff}.msg-head h3{color:#222;font-size:18px;font-weight:600;line-height:1.5;margin-bottom:0}.msg-head p{color:#343434;font-size:14px;font-weight:400;line-height:1.5;text-transform:capitalize;margin-bottom:0}.msg-head{padding:15px;border-bottom:1px solid #ccc}.moreoption{display:flex;align-items:center;justify-content:end}.moreoption .navbar{padding:0}.moreoption li .nav-link{color:#222;font-size:16px}.moreoption .dropdown-toggle::after{display:none}.moreoption .dropdown-menu[data-bs-popper]{top:100%;left:auto;right:0;margin-top:.125rem}.msg-body ul{overflow:hidden}.msg-body ul li{list-style:none;margin:15px 0}.msg-body ul li.sender{display:block;width:100%;position:relative}.msg-body ul li.sender:before{display:block;clear:both;content:'';position:absolute;top:-6px;left:-7px;width:0;height:0;border-style:solid;border-width:0 12px 15px 12px;border-color:transparent transparent #f5f5f5 transparent;-webkit-transform:rotate(-37deg);-ms-transform:rotate(-37deg);transform:rotate(-37deg)}.msg-body ul li.sender p{color:#000;font-size:14px;line-height:1.5;font-weight:400;padding:15px;background:#f5f5f5;display:inline-block;border-bottom-left-radius:10px;border-top-right-radius:10px;border-bottom-right-radius:10px;margin-bottom:0}.msg-body ul li.sender p b{display:block;color:#180660;font-size:14px;line-height:1.5;font-weight:500}.msg-body ul li.reply{display:block;width:100%;text-align:right;position:relative}.msg-body ul li.reply:before{display:block;clear:both;content:'';position:absolute;bottom:15px;right:-7px;width:0;height:0;border-style:solid;border-width:0 12px 15px 12px;border-color:transparent transparent #4b7bec transparent;-webkit-transform:rotate(37deg);-ms-transform:rotate(37deg);transform:rotate(37deg)}.msg-body ul li.reply p{color:#fff;font-size:14px;line-height:1.5;font-weight:400;padding:15px;background:#4b7bec;display:inline-block;border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-left-radius:10px;margin-bottom:0}.msg-body ul li.reply p b{display:block;color:#061061;font-size:14px;line-height:1.5;font-weight:500}.msg-body ul li.reply:after{display:block;content:'';clear:both}.time{display:block;color:#000;font-size:12px;line-height:1.5;font-weight:400}li.reply .time{margin-right:20px}.divider{position:relative;z-index:1;text-align:center}.msg-body h6{text-align:center;font-weight:normal;font-size:14px;line-height:1.5;color:#222;background:#fff;display:inline-block;padding:0 5px;margin-bottom:0}.divider:after{display:block;content:'';clear:both;position:absolute;top:12px;left:0;border-top:1px solid #ebebeb;width:100%;height:100%;z-index:-1}.send-box{padding:15px;border-top:1px solid #ccc}.send-box form{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}.send-box .form-control{display:block;width:85%;padding:.375rem .75rem;font-size:14px;font-weight:400;line-height:1.5;color:#222;background-color:#fff;background-clip:padding-box;border:1px solid #ccc;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.send-box button{border:0;background:#3867d6;padding:.375rem 5px;color:#fff;border-radius:.25rem;font-size:14px;font-weight:400;width:24%;margin-left:1%}.send-box button i{margin-right:5px}.send-btns .button-wrapper{position:relative;width:125px;height:auto;text-align:left;margin:0 auto;display:block;background:#f6f7fa;border-radius:3px;padding:5px 15px;float:left;margin-right:5px;margin-bottom:5px;overflow:hidden}.send-btns .button-wrapper span.label{position:relative;z-index:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;cursor:pointer;color:#343945;font-weight:400;text-transform:capitalize;font-size:13px}#upload{display:inline-block;position:absolute;z-index:1;width:100%;height:100%;top:0;left:0;opacity:0;cursor:pointer}.send-btns .attach .form-control{display:inline-block;width:120px;height:auto;padding:5px 8px;font-size:13px;font-weight:400;line-height:1.5;color:#343945;background-color:#f6f7fa;background-clip:padding-box;border:1px solid #f6f7fa;border-radius:3px;margin-bottom:5px}.send-btns .button-wrapper span.label img{margin-right:5px}.button-wrapper{position:relative;width:100px;height:100px;text-align:center;margin:0 auto}button:focus{outline:0}.add-apoint{display:inline-block;margin-left:5px}.add-apoint a{text-decoration:none;background:#f6f7fa;border-radius:8px;padding:8px 8px;font-size:13px;font-weight:400;line-height:1.2;color:#343945}.add-apoint a svg{margin-right:5px}.chat-icon{display:none}.closess i{display:none}@media(max-width:767px){.chat-icon{display:block;margin-right:5px}.chatlist{width:100%}.chatbox{width:100%;position:absolute;left:1000px;right:0;background:#fff;transition:all .5s ease;border-left:0}.showbox{left:0!important;transition:all .5s ease}.msg-head h3{font-size:14px}.msg-head p{font-size:12px}.msg-head .flex-shrink-0 img{height:30px}.send-box button{width:28%}.send-box .form-control{width:70%}.chat-list h3{font-size:14px}.chat-list p{font-size:12px}.msg-body ul li.sender p{font-size:13px;padding:8px;border-bottom-left-radius:6px;border-top-right-radius:6px;border-bottom-right-radius:6px}.msg-body ul li.reply p{font-size:13px;padding:8px;border-top-left-radius:6px;border-top-right-radius:6px;border-bottom-left-radius:6px}}