/* Custom Neumorphism & General Styles */
:root {
    --primary-color: #0d6efd; /* Bootstrap primary */
    --secondary-color: #6c757d; /* Bootstrap secondary */
    --success-color: #198754; /* Bootstrap success */
    --danger-color: #dc3545; /* Bootstrap danger */
    --warning-color: #ffc107; /* Bootstrap warning */
    --info-color: #0dcaf0; /* Bootstrap info */

    --light-bg: #E0E5EC; /* Very light grey */
    --dark-navy-start: #0F1C2E;
    --dark-navy-end: #16263F;
    
    --neumorphic-shadow-light: 8px 8px 16px rgba(166, 166, 166, 0.2), -8px -8px 16px rgba(255, 255, 255, 0.8);
    --neumorphic-shadow-dark: 6px 6px 12px rgba(0,0,0,0.3), -6px -6px 12px rgba(255,255,255,0.05); /* For dark neumorphism */
    --neumorphic-inset-shadow-light: inset 6px 6px 12px #b0b0b0, inset -6px -6px 12px #ffffff;

    --sidebar-width: 15rem; /* Consistent with JS and HTML */
}

body {
    font-family: 'Inter', sans-serif; /* Use Inter font */
    background-color: var(--light-bg); /* Use light neumorphic background */
    color: #333;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Prevent horizontal scroll from sidebar toggle */
}

.bg-light-neumorphic {
    background-color: var(--light-bg);
}

.bg-dark-navy-header {
    background-color: var(--dark-navy-start) !important; /* Or a specific navy color */
}

/* Base card styling for neumorphism */
.card-neumorphic {
    background-color: white;
    border-radius: 1rem; /* Rounded cards */
    box-shadow: var(--neumorphic-shadow-light);
    border: none; /* Remove default border */
    transition: all 0.2s ease-in-out;
}

.card-neumorphic .card-body {
    padding: 1.5rem; /* Add consistent padding */
}

.card-neumorphic:hover {
    box-shadow: 8px 8px 16px #a6a6a6, -8px -8px 16px #ffffff; /* Subtle hover effect */
}

/* Button Neumorphism */
.btn-neumorphic-sm {
    border: none;
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    box-shadow: var(--neumorphic-shadow-light);
    transition: all 0.2s ease-in-out;
}
.btn-neumorphic-sm:hover {
    box-shadow: var(--neumorphic-inset-shadow-light);
    color: var(--primary-color); /* Default hover color */
}
.btn-neumorphic-sm:active {
    box-shadow: var(--neumorphic-inset-shadow-light);
    color: var(--primary-color); /* Default active color */
}

/* Neumorphic Color Variants */
.btn-primary.btn-neumorphic-sm { background-color: var(--primary-color); color: #fff; }
.btn-info.btn-neumorphic-sm { background-color: var(--info-color); color: #fff; }
.btn-success.btn-neumorphic-sm { background-color: var(--success-color); color: #fff; }
.btn-warning.btn-neumorphic-sm { background-color: var(--warning-color); color: #333; } /* Warning often needs dark text */
.btn-secondary.btn-neumorphic-sm { background-color: var(--secondary-color); color: #fff; }
.btn-outline-secondary.btn-neumorphic-sm { background-color: transparent; border: 1px solid var(--secondary-color); color: var(--secondary-color); }
.btn-outline-secondary.btn-neumorphic-sm:hover { color: #fff; background-color: var(--secondary-color); }

/* Navbar top bar */
#page-content-wrapper .navbar {
    background-color: var(--light-bg) !important; /* Override Bootstrap default */
    border-bottom: none !important; /* Remove default border */
    box-shadow: var(--neumorphic-shadow-light);
    border-radius: 0 0 1rem 1rem; /* Rounded bottom corners */
    margin-bottom: 1.5rem;
    padding: 1rem 1.5rem !important; /* Adjust padding */
}

/* Main content area */
.main-content-neumorphic {
    background-color: var(--light-bg);
    min-height: calc(100vh - 56px); /* Adjust based on footer height */
    padding-top: 2rem !important;
}





