/* ========== CRITICAL: Override conflicting app.css navbar styles ========== */
/* Override any navbar padding from app.css */
.navbar,
nav.navbar,
.navbar.navbar-expand-lg,
.navbar.navbar-light,
.navbar.sticky-top {
    padding: 0.5rem 0 !important;
    min-height: auto !important;
    max-height: 80px !important;
    height: auto !important;
}

/* ========== CRITICAL: Override Bootstrap CSS Variables First ========== */
:root {
    /* Override Bootstrap primary color */
    --bs-primary: #4B9BD6 !important;
    --bs-primary-rgb: 75, 155, 214 !important;
    --bs-primary-text-emphasis: #1e4a82 !important;
    --bs-primary-bg-subtle: #e6f2fb !important;
    --bs-primary-border-subtle: #b3d5f0 !important;
    
    /* Override Bootstrap link colors */
    --bs-link-color: #4B9BD6 !important;
    --bs-link-color-rgb: 75, 155, 214 !important;
    --bs-link-hover-color: #3A84C0 !important;
    --bs-link-hover-color-rgb: 58, 132, 192 !important;
    
    /* Override Bootstrap navbar variables */
    --bs-navbar-color: #FFFFFF !important;
    --bs-navbar-hover-color: #b6862a !important; /* Gold hover color */
    --bs-navbar-active-color: #b6862a !important; /* Gold active color */
    --bs-navbar-brand-color: #FFFFFF !important;
    --bs-navbar-brand-hover-color: #b6862a !important; /* Gold hover color */
    
    /* Custom design guide variables */
    --primary-color: #4B9BD6 !important;
    --primary-hover: #3A84C0 !important;
    --navbar-bg: #3B82F6 !important;
    --navbar-text: #FFFFFF !important;
    --navbar-hover: #b6862a !important; /* Gold hover color */
    
    /* Override any gradient variables that might affect navbar */
    --gradient: none !important;
    --bs-gradient: none !important;
}

/* ========== Global Navbar Overrides - Maximum Specificity ========== */
/* Force navbar background to #3B82F6 (Blue) - Multiple selectors for maximum override */
html body .navbar,
html body .navbar.navbar-light,
html body .navbar.navbar-dark,
html body .navbar.bg-primary,
html body .navbar.navbar-light.bg-primary,
html body .navbar.navbar-dark.bg-primary,
html body .navbar.navbar-expand-lg,
html body .navbar.sticky-top,
html body nav.navbar,
html body nav.navbar.navbar-light,
html body nav.navbar.bg-primary,
html body nav.navbar.navbar-expand-lg,
body .navbar,
body .navbar.navbar-light,
body .navbar.bg-primary,
body .navbar.navbar-expand-lg {
    background-color: #3B82F6 !important;
    background: #3B82F6 !important;
    background-image: none !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
    padding: 0.5rem 0 !important;
    min-height: auto !important;
    max-height: 80px !important;
    height: auto !important;
}

/* Override any inline style backgrounds */
html body .navbar[style*="background"],
html body nav.navbar[style*="background"] {
    background-color: #3B82F6 !important;
    background: #3B82F6 !important;
    background-image: none !important;
}

/* Navbar brand with white background - MAXIMUM SPECIFICITY for all pages */
html body .navbar .navbar-brand,
html body nav.navbar .navbar-brand,
body .navbar .navbar-brand,
body nav.navbar .navbar-brand,
.navbar .navbar-brand,
nav.navbar .navbar-brand {
    background-color: #FFFFFF !important;
    padding: 0.4rem 0.8rem !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    position: relative !important;
    border-radius: 0 !important;
    --arrow-size: 20px !important; /* Base arrow width */
    overflow: visible !important; /* Allow arrow to extend outside */
    align-self: stretch !important; /* Stretch to match navbar height */
    height: 100% !important; /* Ensure brand matches navbar height */
    max-height: 80px !important; /* Match navbar max-height */
    min-height: 60px !important; /* Minimum height to match navbar */
    display: flex !important;
    align-items: center !important;
}

/* Arrow separator after navbar-brand - creates ">" design pointing right */
/* Arrow aligns perfectly with navbar-brand height - FULL HEIGHT for consistency */
html body .navbar .navbar-brand::after,
html body nav.navbar .navbar-brand::after,
body .navbar .navbar-brand::after,
body nav.navbar .navbar-brand::after,
.navbar .navbar-brand::after,
nav.navbar .navbar-brand::after {
    content: '' !important;
    position: absolute !important;
    right: calc(-1 * var(--arrow-size)) !important;
    top: 0 !important; /* Start from top of navbar-brand */
    bottom: 0 !important; /* End at bottom of navbar-brand */
    width: var(--arrow-size) !important;
    height: 100% !important; /* Full height to match navbar-brand */
    margin: 0 !important;
    padding: 0 !important;
    background-color: #FFFFFF !important;
    clip-path: polygon(0 0, 100% 50%, 0 100%) !important;
    z-index: 10 !important;
    display: block !important;
    box-sizing: border-box !important;
}

/* Remove the before pseudo-element - not needed - MAXIMUM SPECIFICITY */
html body .navbar .navbar-brand::before,
html body nav.navbar .navbar-brand::before,
body .navbar .navbar-brand::before,
body nav.navbar .navbar-brand::before,
.navbar .navbar-brand::before,
nav.navbar .navbar-brand::before {
    display: none !important;
}

/* Logo image size */
html body .navbar .logo-img,
html body .navbar .navbar-brand .logo-img,
html body .logo-img,
body .logo-img,
.logo-img {
    height: 70px !important;
    max-height: 70px !important;
    margin-right: 10px !important;
    width: auto !important;
    min-height: 70px !important;
}

/* Site name color - blue on white background */
html body .navbar .site-name,
html body .navbar .navbar-brand .site-name {
    color: #3B82F6 !important;
    font-weight: bold !important;
    font-size: 1.2rem !important;
}

/* Hover effect on navbar-brand */
html body .navbar .navbar-brand:hover .site-name {
    color: #1e4a82 !important;
}

/* Responsive adjustments for mobile - CRITICAL: Keep logo small on ALL breakpoints */
@media (max-width: 1400px) {
    html body .navbar .logo-img,
    html body .navbar .navbar-brand .logo-img,
    html body .logo-img,
    body .logo-img,
    .logo-img,
    img.logo-img {
        height: 70px !important;
        max-height: 70px !important;
        min-height: 70px !important;
        margin-right: 10px !important;
        width: auto !important;
    }
}

@media (max-width: 1024px) {
    html body .navbar .logo-img,
    html body .navbar .navbar-brand .logo-img,
    html body .logo-img,
    body .logo-img,
    .logo-img,
    img.logo-img {
        height: 70px !important;
        max-height: 70px !important;
        min-height: 70px !important;
        margin-right: 10px !important;
        width: auto !important;
    }
}

@media (max-width: 991px) {
    /* Hide arrow on mobile collapsed navbar - MAXIMUM SPECIFICITY */
    html body .navbar .navbar-brand::after,
    html body nav.navbar .navbar-brand::after,
    body .navbar .navbar-brand::after,
    body nav.navbar .navbar-brand::after,
    .navbar .navbar-brand::after,
    nav.navbar .navbar-brand::after {
        display: none !important; /* Hide arrow on mobile collapsed navbar */
    }
    
    html body .navbar .navbar-brand {
        margin-right: auto !important;
    }
    
    /* Ensure logo stays small on mobile */
    html body .navbar .logo-img,
    html body .navbar .navbar-brand .logo-img,
    html body .logo-img,
    body .logo-img,
    .logo-img,
    img.logo-img {
        height: 70px !important;
        max-height: 70px !important;
        min-height: 70px !important;
        margin-right: 10px !important;
        width: auto !important;
    }
}

@media (max-width: 768px) {
    html body .navbar .logo-img,
    html body .navbar .navbar-brand .logo-img,
    html body .logo-img,
    body .logo-img,
    .logo-img,
    img.logo-img {
        height: 70px !important;
        max-height: 70px !important;
        min-height: 70px !important;
        margin-right: 10px !important;
        width: auto !important;
    }
}

@media (max-width: 576px) {
    html body .navbar .logo-img,
    html body .navbar .navbar-brand .logo-img,
    html body .logo-img,
    body .logo-img,
    .logo-img,
    img.logo-img {
        height: 70px !important;
        max-height: 70px !important;
        min-height: 70px !important;
        margin-right: 10px !important;
        width: auto !important;
    }
}

/* Navbar links - base style */
html body .navbar .nav-link,
html body .navbar .navbar-nav .nav-link,
html body .navbar-light .nav-link,
html body .navbar-light .navbar-nav .nav-link {
    color: #FFFFFF !important;
    padding: 0.3rem 0.6rem !important;
    font-size: 0.9rem !important;
}

/* Navbar links - hover and focus with underline - Gold color */
html body .navbar .nav-link:hover,
html body .navbar .nav-link:focus,
html body .navbar .navbar-nav .nav-link:hover,
html body .navbar .navbar-nav .nav-link:focus {
    color: #b6862a !important; /* Gold hover color */
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    background-color: transparent !important;
}

/* Active nav link */
html body .navbar .nav-link.active,
html body .navbar .navbar-nav .nav-link.active,
html body .navbar-light .nav-link.active,
html body .navbar-light .navbar-nav .nav-link.active {
    color: #FFFFFF !important;
}

/* Dropdown menus */
html body .navbar .dropdown-menu {
    border: 1px solid rgba(30, 64, 175, 0.3) !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    background-color: #3B82F6 !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2) !important;
}

html body .navbar .dropdown-item {
    color: #FFFFFF !important;
}

html body .navbar .dropdown-item:hover,
html body .navbar .dropdown-item:focus {
    color: #b6862a !important; /* Gold hover color */
    background-color: rgba(182, 134, 42, 0.2) !important; /* Gold background with transparency */
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
}

/* Dropdown divider */
html body .navbar .dropdown-divider {
    border-top-color: rgba(255, 255, 255, 0.2) !important;
}

/* Navbar toggler for mobile */
html body .navbar-light .navbar-toggler,
html body .navbar .navbar-toggler {
    border-color: #FFFFFF !important;
    border-width: 2px !important;
    border-radius: 4px !important;
    padding: 0.4rem 0.6rem !important;
    background-color: #FFFFFF !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

html body .navbar-light .navbar-toggler:hover,
html body .navbar .navbar-toggler:hover {
    background-color: #f0f0f0 !important;
    border-color: #FFFFFF !important;
}

html body .navbar-light .navbar-toggler:focus,
html body .navbar .navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5) !important;
    outline: none !important;
    background-color: #f0f0f0 !important;
}

html body .navbar-light .navbar-toggler:active,
html body .navbar .navbar-toggler:active {
    background-color: #e0e0e0 !important;
}

html body .navbar-light .navbar-toggler-icon,
html body .navbar .navbar-toggler-icon {
    width: 24px !important;
    height: 24px !important;
    background-size: 24px 24px !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(59, 130, 246, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    display: block !important;
}

/* Mobile-specific navbar toggler styles */
@media (max-width: 991px) {
    html body .navbar-light .navbar-toggler,
    html body .navbar .navbar-toggler {
        margin-left: auto !important;
        margin-right: 0 !important;
        order: 2 !important;
    }
    
    html body .navbar .navbar-brand {
        order: 1 !important;
        margin-right: auto !important;
    }
    
    html body .navbar-collapse {
        order: 3 !important;
        width: 100% !important;
        flex-basis: 100% !important;
        flex-grow: 1 !important;
    }
}

/* ========== Primary Color Helpers ========== */
.bg-primary {
    background-color: #4B9BD6 !important;
}

.text-primary {
    color: #4B9BD6 !important;
}

.border-primary {
    border-color: #4B9BD6 !important;
}

/* ========== Buttons ========== */
.btn-primary {
    background-color: #4B9BD6 !important;
    border-color: #4B9BD6 !important;
    color: #FFFFFF !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #3A84C0 !important;
    border-color: #3A84C0 !important;
    color: #FFFFFF !important;
}

.btn-secondary {
    background-color: #1A1A1A !important;
    border-color: #1A1A1A !important;
    color: #FFFFFF !important;
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: #4A4A4A !important;
    border-color: #4A4A4A !important;
}

/* ========== Cards / Boxes ========== */
.card,
.news-card,
.mine-card,
.form-card,
.chart-container,
.filter-card {
    background-color: #FFFFFF !important;
    color: #1A1A1A !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
}

/* ========== Footer Styles ========== */
footer {
    background-color: #1A1A1A !important;
    color: #FFFFFF !important;
}

footer a {
    color: #FFFFFF !important;
    text-decoration: none;
}

footer a:hover,
footer a:focus {
    color: #4B9BD6 !important;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ========== RTL (Right-to-Left) Support for Navbar ========== */
/* This is used for changing direction in code - RTL navbar menu displays from right to left */
/* Menu order in RTL (right to left): Home (far right), About, Services, Mines, Jobs, News & Multimedia, Contact, Language (far left) */

/* RTL Navbar Nav - Ensure proper flow from right to left */
/* This is used for changing direction in code - RTL navbar menu displays from right to left */
[dir="rtl"] html body .navbar-nav,
[dir="rtl"] .navbar-nav {
    flex-direction: row !important; /* Do NOT reverse - HTML order is already correct for RTL */
    direction: rtl !important; /* This ensures items flow from right to left */
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-inline-start: auto !important; /* Push to start (right side in RTL) */
    margin-inline-end: 0 !important;
}

/* RTL Navbar Collapse */
[dir="rtl"] html body .navbar-collapse,
[dir="rtl"] .navbar-collapse {
    justify-content: flex-start !important; /* Align navbar items to the right side (start of RTL flow) */
    text-align: right !important;
}

/* RTL Navbar Items */
[dir="rtl"] html body .navbar-nav .nav-item,
[dir="rtl"] .navbar-nav .nav-item {
    margin-left: 0 !important;
    margin-right: 0.5rem !important;
}

/* RTL Navbar Links */
[dir="rtl"] html body .navbar-nav .nav-link,
[dir="rtl"] .navbar-nav .nav-link {
    text-align: right !important;
}

/* RTL Navbar Brand */
[dir="rtl"] html body .navbar-brand,
[dir="rtl"] .navbar-brand {
    flex-direction: row-reverse !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* RTL Arrow separator - flip the arrow to point left - MAXIMUM SPECIFICITY */
[dir="rtl"] html body .navbar .navbar-brand::after,
[dir="rtl"] html body nav.navbar .navbar-brand::after,
[dir="rtl"] body .navbar .navbar-brand::after,
[dir="rtl"] body nav.navbar .navbar-brand::after,
[dir="rtl"] .navbar .navbar-brand::after,
[dir="rtl"] nav.navbar .navbar-brand::after,
[dir="rtl"] .navbar-brand::after {
    right: auto !important;
    left: calc(-1 * var(--arrow-size)) !important;
    clip-path: polygon(100% 0, 0 50%, 100% 100%) !important; /* Flipped arrow pointing left */
    top: 0 !important; /* Start from top */
    bottom: 0 !important; /* End at bottom */
    height: 100% !important; /* Full height */
}

/* Remove before pseudo-element for RTL - MAXIMUM SPECIFICITY */
[dir="rtl"] html body .navbar .navbar-brand::before,
[dir="rtl"] html body nav.navbar .navbar-brand::before,
[dir="rtl"] body .navbar .navbar-brand::before,
[dir="rtl"] body nav.navbar .navbar-brand::before,
[dir="rtl"] .navbar .navbar-brand::before,
[dir="rtl"] nav.navbar .navbar-brand::before,
[dir="rtl"] .navbar-brand::before {
    display: none !important;
}

/* RTL Logo Image */
[dir="rtl"] .logo-img,
[dir="rtl"] html body .navbar .logo-img,
[dir="rtl"] html body .navbar .navbar-brand .logo-img {
    margin-right: 0 !important;
    margin-left: 10px !important;
    height: 70px !important;
    max-height: 70px !important;
    width: auto !important;
}

/* RTL Navbar Toggler */
[dir="rtl"] html body .navbar-toggler,
[dir="rtl"] .navbar-toggler {
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* RTL Language Switcher */
[dir="rtl"] .language-switcher-basic {
    margin-left: 0 !important;
    margin-right: 0.5rem !important;
}

/* Responsive adjustments for mobile - RTL - MAXIMUM SPECIFICITY */
@media (max-width: 991px) {
    [dir="rtl"] html body .navbar .navbar-brand::after,
    [dir="rtl"] html body nav.navbar .navbar-brand::after,
    [dir="rtl"] body .navbar .navbar-brand::after,
    [dir="rtl"] body nav.navbar .navbar-brand::after,
    [dir="rtl"] .navbar .navbar-brand::after,
    [dir="rtl"] nav.navbar .navbar-brand::after,
    [dir="rtl"] .navbar-brand::after {
        display: none !important; /* Hide arrow on mobile collapsed navbar */
    }
    
    [dir="rtl"] html body .navbar .navbar-brand {
        margin-left: auto !important;
        margin-right: 0 !important;
    }
}