/* ===============================
   Theme Variables
=============================== */
:root {
    --primary-blue: #728FCE; /* Shiny Blue - change once here for entire theme */
    --primary-blue-dark: #5A71B0; /* Darker shade for hover - adjust if needed */
    --off-white: #F8F9FA; /* Off-white background / text - change for light theme */
    --text-dark: #212529; /* Main text color */
}

/* ===============================
   Full-page layout
=============================== */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--off-white); /* Page background */
    color: var(--text-dark); /* Default text color */
    font-family: "Segoe UI", Arial, sans-serif;
    overflow: hidden; /* Prevent global scroll, scroll handled in main */
}

    /* Container for main content + footer */
    body > .container-fluid {
        display: flex;
        flex-direction: column;
        height: 85%; /* Fill viewport height */
    }

/* ===============================
   Main content 3D effect + inner scroll
=============================== */
main {
    flex: 1 1 auto;
    margin-bottom: 0;
    flex: 1;
    /*overflow-y: auto;
    overflow-x: hidden;*/
    background: var(--off-white);
    border-radius: 12px;
    padding: 20px;
    /* Subtle 3D shadow */
    box-shadow: 0 2px 6px rgba(0,0,0,0.08), 0 -1px 3px rgba(0,0,0,0.03) inset;
    /* Thin gray border */
    border: 1px solid #d1d1d1; /* light gray */
}

    /* Optional: custom scrollbar for main */
    main::-webkit-scrollbar {
        width: 8px; /* Scrollbar thickness */
    }

    main::-webkit-scrollbar-track {
        background: #e8e8e8;
        border-radius: 4px;
    }

    main::-webkit-scrollbar-thumb {
        background-color: var(--primary-blue); /* Match theme */
        border-radius: 4px;
    }

/* ===============================
   Footer 3D effect
=============================== */
/* Footer stays at bottom */
footer {
    flex-shrink: 0; /* never shrink */
    background: var(--off-white);
    border-radius: 10px 10px 0 0;
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.6), 0 -2px 8px rgba(0,0,0,0.15);
    padding: 0px 20px;
}

/* ===============================
   Navbar
=============================== */
.navbar {
    background-color: var(--primary-blue);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

    /* Navbar brand text */
    .navbar .navbar-brand {
        color: var(--off-white) !important; /* Brand text color */
        font-weight: 600;
        text-decoration: none;
    }

    /* Profile text inside navbar (dropdown toggle) */
    .navbar .dropdown-toggle {
        color: var(--off-white) !important;
        font-weight: 500;
        text-decoration: none;
    }

        .navbar .dropdown-toggle:hover {
            color: #FFFFFE; /* Slightly brighter on hover */
        }

    /* Navbar links & icons */
    .navbar .nav-link {
        color: var(--off-white);
        font-weight: 500;
        transition: all 0.2s ease-in-out;
    }

        .navbar .nav-link:hover,
        .navbar .nav-link.active {
            color: #FFFFFE;
        }

.nav-link i {
    margin-right: 5px; /* Icon spacing */
}

/* Dropdown menus */
.navbar .dropdown-menu {
    background-color: var(--primary-blue); /* Same as navbar */
    border: none;
    border-radius: 6px;
    min-width: 200px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.navbar .dropdown-item {
    color: var(--off-white);
    transition: all 0.2s ease-in-out;
}

    .navbar .dropdown-item:hover {
        background-color: var(--primary-blue-dark); /* Hover effect */
        color: #FFFFFE;
    }

/* ===============================
   Profile card dropdown (right side)
=============================== */
.dropdown-menu.profile-card {
    background-color: var(--off-white);
    border: 1px solid var(--primary-blue);
    border-radius: 8px;
    min-width: 220px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    right: 0 !important;
    left: auto !important; /* Align to right of screen */
}

    .dropdown-menu.profile-card .btn-primary {
        background-color: var(--primary-blue);
        border-color: var(--primary-blue);
    }

        .dropdown-menu.profile-card .btn-primary:hover {
            background-color: var(--primary-blue-dark);
            border-color: var(--primary-blue-dark);
        }

    .dropdown-menu.profile-card .btn-secondary {
        background-color: #E0E0E0;
        color: var(--text-dark);
    }

        .dropdown-menu.profile-card .btn-secondary:hover {
            background-color: #D6D6D6;
        }

/* Show profile card on hover (desktop only) */
@media (min-width: 992px) {
    .dropdown:hover .dropdown-menu.profile-card {
        display: block;
        margin-top: 0;
    }
}

/* ===============================
   Mobile adjustments
=============================== */
@media (max-width: 575px) {
    /* Profile dropdown fixed full-screen */
    .dropdown-menu.profile-card {
        position: fixed !important;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
        border-radius: 0;
        border: none;
        box-shadow: none;
        overflow-y: auto;
        z-index: 1050;
    }
}

/* ===============================
   Hover dropdown menus on desktop only
=============================== */
@media (min-width: 992px) {
    .navbar .dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0;
    }
}

/* ===============================
   Optional: changeable properties
=============================== */
/* 
   1. --primary-blue: main theme color for navbar & buttons
   2. --primary-blue-dark: hover/darker shade
   3. --off-white: background of main content and footer
   4. --text-dark: main text color
   5. main border-radius & box-shadow: adjust for stronger 3D effect
   6. main::-webkit-scrollbar-thumb: change color to match theme
   7. footer box-shadow: adjust depth
*/