/* ─── THEME VARIABLE DECLARATIONS ─── */
:root {
    --bs-link-color-rgb: 0, 0, 0;
    
    /* Base Color Palette */
    --mcb-nav-bg: #111111;
    --mcb-nav-border-bottom: #000000;
    --mcb-text-color: #ffffff;
    
    /* 3D Structural Accents */
    --mcb-border-radius: 8px;
    --mcb-top-edge-highlight: rgba(255, 255, 255, 0.4);
    --mcb-side-edge-highlight: rgba(255, 255, 255, 0.1);
    
    /* Glossy Reflection Opacities (0.0 to 1.0) */
    --mcb-shine-top: rgba(255, 255, 255, 0.25);
    --mcb-shine-mid: rgba(255, 255, 255, 0.08);
    --mcb-shadow-mid: rgba(0, 0, 0, 0);
    --mcb-shadow-bottom: rgba(0, 0, 0, 0.4);
    
    /* Hover and Drop Shadows */
    --mcb-hover-bg: rgba(255, 255, 255, 0.15);
    --mcb-inner-glare: rgba(255, 255, 255, 0.2);
    --mcb-drop-shadow: rgba(0, 0, 0, 0.3);
    --mcb-text-shadow: rgba(0, 0, 0, 0.7);
}

/* ─── NAVIGATION BAR STYLING USING VARIABLES ─── */
#menu, .navbar {
    background-color: var(--mcb-nav-bg) !important;
    
    /* The Fake Shine using variable mappings */
    background-image: linear-gradient(
        to bottom, 
        var(--mcb-shine-top) 0%,   
        var(--mcb-shine-mid) 49%,  
        var(--mcb-shadow-mid) 50%,           
        var(--mcb-shadow-bottom) 100%         
    ) !important;

    border-radius: var(--mcb-border-radius) !important;

    /* 3D Borders */
    border-top: 1px solid var(--mcb-top-edge-highlight) !important;
    border-bottom: 2px solid var(--mcb-nav-border-bottom) !important;
    border-left: 1px solid var(--mcb-side-edge-highlight) !important;
    border-right: 1px solid var(--mcb-side-edge-highlight) !important;

    /* Drop Shadows for layout depth */
    box-shadow: 
        inset 0 1px 0 var(--mcb-inner-glare), 
        0 4px 6px var(--mcb-drop-shadow) !important; 
}

/* Navbar Text Formatting */
#menu .nav > li > a, .navbar-nav .nav-link {
    color: var(--mcb-text-color) !important;
    text-shadow: 0 -1px 0 var(--mcb-text-shadow) !important; 
}

/* Menu Hover Effect */
#menu .nav > li > a:hover, .navbar-nav .nav-link:hover {
    background-color: var(--mcb-hover-bg) !important;
    color: var(--mcb-text-color) !important;
}

/* ─── SIDEBAR ACTIVE LIST GROUP STYLING ─── */
.list-group-item.active {
    background-color: var(--mcb-nav-bg) !important;
    color: var(--mcb-text-color) !important;
    
    /* Reuses the exact same middle-split fake shine gradient */
    background-image: linear-gradient(
        to bottom, 
        var(--mcb-shine-top) 0%,   
        var(--mcb-shine-mid) 49%,  
        var(--mcb-shadow-mid) 50%,           
        var(--mcb-shadow-bottom) 100%         
    ) !important;

    /* Matching 3D structural outline details */
    border-top: 1px solid var(--mcb-top-edge-highlight) !important;
    border-bottom: 2px solid var(--mcb-nav-border-bottom) !important;
    border-left: 1px solid var(--mcb-side-edge-highlight) !important;
    border-right: 1px solid var(--mcb-side-edge-highlight) !important;

    /* Applies text shadow for the inset look and adds outer drop shadows */
    text-shadow: 0 -1px 0 var(--mcb-text-shadow) !important;
    box-shadow: 
        inset 0 1px 0 var(--mcb-inner-glare), 
        0 2px 4px var(--mcb-drop-shadow) !important;
}

/* Ensure the links inside the active item (if any) inherit the correct text color */
.list-group-item.active a {
    color: var(--mcb-text-color) !important;
}

/* ─── DROPDOWN MENU SELECTION STYLING ─── */
/* Targets menu links when hovered, focused, or actively clicked */
#menu .dropdown-menu a:hover, 
#menu .dropdown-menu a:focus, 
#menu .dropdown-menu a:active,
.dropdown-item:hover, 
.dropdown-item:focus, 
.dropdown-item:active {
    background-color: var(--mcb-nav-bg) !important;
    color: var(--mcb-text-color) !important;
    
    /* Reuses your signature dark 3D split-shine effect */
    background-image: linear-gradient(
        to bottom, 
        var(--mcb-shine-top) 0%,   
        var(--mcb-shine-mid) 49%,  
        var(--mcb-shadow-mid) 50%,           
        var(--mcb-shadow-bottom) 100%         
    ) !important;

    /* Subtle 3D look inside the menu container */
    border-top: 1px solid var(--mcb-top-edge-highlight) !important;
    border-bottom: 1px solid var(--mcb-nav-border-bottom) !important;
    text-shadow: 0 -1px 0 var(--mcb-text-shadow) !important;
    
    /* Smooth out any browser selection outlines */
    outline: none !important;
}

/* Ensure the dropdown container background itself fits the dark aesthetic */
#menu .dropdown-menu, .dropdown-menu {
    background-color: #ffffff !important; /* Keeps container clean, but items go dark on interaction */
    border: 1px solid var(--mcb-nav-border-bottom) !important;
    box-shadow: 0 4px 10px var(--mcb-drop-shadow) !important;
}

/* ─── GLOBAL BUTTON GLOSSY 3D STYLING ─── */
.btn {
    background-color: var(--mcb-nav-bg) !important;
    color: var(--mcb-text-color) !important;
    
    /* Reuses the exact same middle-split fake shine gradient */
    background-image: linear-gradient(
        to bottom, 
        var(--mcb-shine-top) 0%,   
        var(--mcb-shine-mid) 49%,  
        var(--mcb-shadow-mid) 50%,           
        var(--mcb-shadow-bottom) 100%         
    ) !important;

    /* 3D structural outline details */
    border-top: 1px solid var(--mcb-top-edge-highlight) !important;
    border-bottom: 3px solid var(--mcb-nav-border-bottom) !important; /* Slightly thicker bottom for button depth */
    border-left: 1px solid var(--mcb-side-edge-highlight) !important;
    border-right: 1px solid var(--mcb-side-edge-highlight) !important;

    /* Text formatting and shadows */
    text-shadow: 0 -1px 0 var(--mcb-text-shadow) !important;
    box-shadow: 
        inset 0 1px 0 var(--mcb-inner-glare), 
        0 2px 4px var(--mcb-drop-shadow) !important;
        
    transition: filter 0.15s ease-in-out !important;
}

/* Ensure icons inside buttons inherit the correct light colour */
.btn i, .btn c {
    color: var(--mcb-text-color) !important;
}

/* ─── BUTTON HOVER & ACTIVE STATES ─── */
/* Instead of manually redefining colors, we use brightness filters to make them react to hovers */
.btn:hover, .btn:focus {
    background-color: var(--mcb-nav-bg) !important;
    color: var(--mcb-text-color) !important;
    filter: brightness(1.2) !important; /* Safely brightens the gloss on hover */
    box-shadow: 
        inset 0 1px 0 var(--mcb-inner-glare), 
        0 4px 6px var(--mcb-drop-shadow) !important; 
}

/* The click effect: mimics physically pushing the button down */
.btn:active, .btn.active {
    filter: brightness(0.9) !important; /* Dims the shine slightly */
    border-top: 2px solid var(--mcb-nav-border-bottom) !important; /* Simulates depth compression */
    border-bottom: 1px solid var(--mcb-top-edge-highlight) !important;
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.4) !important; /* Inverts shadow inward */
}

/* ─── PAGINATION (PAGE NUMBERS) GLOSSY 3D STYLING ─── */
.pagination .page-link {
    background-color: var(--mcb-nav-bg) !important;
    color: var(--mcb-text-color) !important;
    
    /* Reuses the exact same middle-split fake shine gradient */
    background-image: linear-gradient(
        to bottom, 
        var(--mcb-shine-top) 0%,   
        var(--mcb-shine-mid) 49%,  
        var(--mcb-shadow-mid) 50%,           
        var(--mcb-shadow-bottom) 100%         
    ) !important;

    /* 3D structural borders to separate the numbers cleanly */
    border-top: 1px solid var(--mcb-top-edge-highlight) !important;
    border-bottom: 2px solid var(--mcb-nav-border-bottom) !important;
    border-left: 1px solid var(--mcb-side-edge-highlight) !important;
    border-right: 1px solid var(--mcb-side-edge-highlight) !important;

    /* Shadows and text adjustments */
    text-shadow: 0 -1px 0 var(--mcb-text-shadow) !important;
    box-shadow: 
        inset 0 1px 0 var(--mcb-inner-glare), 
        0 1px 3px var(--mcb-drop-shadow) !important;
        
    transition: filter 0.15s ease-in-out !important;
}

/* ─── HOVER & ACTIVE (CURRENT PAGE) STATES ─── */
/* Brightens unselected page numbers when you hover over them */
.pagination .page-item:not(.active) .page-link:hover {
    filter: brightness(1.25) !important;
    color: var(--mcb-text-color) !important;
}

/* The active/current page number: looks slightly "pressed down" or distinct */
.pagination .page-item.active .page-link {
    filter: brightness(1.4) !important; /* Makes the current page highly visible and glowing */
    border-top: 2px solid var(--mcb-nav-border-bottom) !important;
    border-bottom: 1px solid var(--mcb-top-edge-highlight) !important;
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.4) !important; /* Inward shadow for depth */
}

/* Fix for disabled arrow buttons (e.g., when on page 1, the 'Previous' arrow) */
.pagination .page-item.disabled .page-link {
    filter: brightness(0.6) !important; /* Dims the glossy element down */
    opacity: 0.5;
    pointer-events: none; /* Prevents clicking */
}

/* ─── INVERTED PAGINATION (UNCLICKED PAGES) ─── */
.pagination .page-link {
    background-color: #f8f9fa !important; /* Light silver/white base */
    color: #212529 !important; /* Dark charcoal text */
    
    /* Inverted fake shine: white gloss splitting into a soft gray shadow */
    background-image: linear-gradient(
        to bottom, 
        rgba(255, 255, 255, 0.6) 0%,   
        rgba(255, 255, 255, 0.2) 49%,  
        rgba(0, 0, 0, 0.02) 50%,           
        rgba(0, 0, 0, 0.08) 100__
    ) !important;

    /* Light 3D borders using a soft gray instead of white highlight */
    border-top: 1px solid rgba(255, 255, 255, 0.8) !important;
    border-bottom: 2px solid #ced4da !important;
    border-left: 1px solid #dee2e6 !important;
    border-right: 1px solid #dee2e6 !important;

    /* Clean text shadow and a soft drop shadow */
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) !important; 
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.5), 
        0 1px 2px rgba(0, 0, 0, 0.05) !important;
        
    transition: all 0.15s ease-in-out !important;
}

/* ─── HOVER STATE (UNCLICKED PAGES) ─── */
/* Darkens the light buttons slightly when hovered to give visual feedback */
.pagination .page-item:not(.active) .page-link:hover {
    background-color: #e9ecef !important;
    color: #000000 !important;
    filter: brightness(0.95) !important;
}

/* ─── ACTIVE STATE (THE CURRENTLY CLICKED PAGE) ─── */
/* Restores your signature dark 3D glossy look for the active page */
.pagination .page-item.active .page-link {
    background-color: var(--mcb-nav-bg) !important;
    color: var(--mcb-text-color) !important;
    
    background-image: linear-gradient(
        to bottom, 
        var(--mcb-shine-top) 0%,   
        var(--mcb-shine-mid) 49%,  
        var(--mcb-shadow-mid) 50%,           
        var(--mcb-shadow-bottom) 100__
    ) !important;

    border-top: 2px solid var(--mcb-nav-border-bottom) !important;
    border-bottom: 1px solid var(--mcb-top-edge-highlight) !important;
    border-left: 1px solid var(--mcb-side-edge-highlight) !important;
    border-right: 1px solid var(--mcb-side-edge-highlight) !important;

    text-shadow: 0 -1px 0 var(--mcb-text-shadow) !important;
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.4) !important; 
    filter: none !important; /* Bypasses light brightness filters */
}

/* ─── DISABLED STATE ─── */
.pagination .page-item.disabled .page-link {
    background-color: #e9ecef !important;
    color: #adb5bd !important;
    opacity: 0.6;
    pointer-events: none;
    box-shadow: none !important;
    border: 1px solid #dee2e6 !important;
}