/* General Overrides for Flat UI */
*, body, .btn, .form-control, .panel, .navbar, .alert, .dropdown-menu, .modal-content {
    border-radius: 0 !important;  /* Remove rounded corners */
    box-shadow: none !important;  /* Remove shadow */
}

.navbar-inverse {
    background-color: #343a40 !important;  /* Dark background, similar to Bootstrap 4/5 */
    border-color: #343a40 !important;  /* Match border with background */
}

.navbar-inverse .navbar-brand {
    color: #ffffff !important;  /* White brand text */
}

.navbar-inverse .navbar-nav > li > a {
    color: #ffffff !important;  /* White navigation link text */
}

.navbar-inverse .navbar-nav > li > a:hover, 
.navbar-inverse .navbar-nav > li > a:focus {
    color: #f8f9fa !important;  /* Slightly lighter white on hover */
    background-color: transparent !important;  /* No background color change */
}

.navbar-inverse .navbar-toggle {
    border-color: #ffffff !important;  /* White border for toggle button */
}

.navbar-inverse .navbar-toggle .icon-bar {
    background-color: #ffffff !important;  /* White icon bar for toggle */
}

/* Style the dropdown submenu to match the inverse navbar background */
.navbar-inverse .dropdown-menu {
    background-color: #343a40 !important;  /* Dark background matching the main navbar */
    border: none !important;  /* Remove the border */
}

.navbar-inverse .dropdown-menu > li > a {
    color: #ffffff !important;  /* White text for submenu items */
}

.navbar-inverse .dropdown-menu > li > a:hover, 
.navbar-inverse .dropdown-menu > li > a:focus {
    background-color: #23272b !important;  /* Slightly darker background on hover */
    color: #f8f9fa !important;  /* Slightly lighter white on hover */
}

.navbar-inverse .dropdown-menu > li.divider {
    background-color: #495057 !important;  /* Divider color to match Bootstrap 4/5 */
}

/* FONT */
/* Apply Bootstrap 5-like font family across the site */
body, .navbar, .dropdown-menu, .btn, .form-control, .panel, .modal-content, .table, .alert {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
}

/* Optional: Apply specific weights to match Bootstrap 5 styling */
h1, h2, h3, h4, h5, h6, .navbar-brand, .btn {
    font-weight: 500 !important;  /* Medium weight */
}

strong, b {
    font-weight: 700 !important;  /* Bold for strong elements */
}

/* Bootstrap 5-like Primary, Secondary, and Utility Colors */
:root {
    --bs-primary: #0d6efd;     /* Bootstrap 5 primary blue */
    --bs-secondary: #6c757d;   /* Bootstrap 5 secondary gray */
    --bs-success: #198754;     /* Bootstrap 5 success green */
    --bs-info: #0dcaf0;        /* Bootstrap 5 info cyan */
    --bs-warning: #ffc107;     /* Bootstrap 5 warning yellow */
    --bs-danger: #dc3545;      /* Bootstrap 5 danger red */
    --bs-light: #f8f9fa;       /* Bootstrap 5 light gray */
    --bs-dark: #212529;        /* Bootstrap 5 dark gray */
}

/* Override primary and secondary colors */
.btn-primary, .navbar-brand > li > a {
    background-color: var(--bs-primary) !important;
    color: #ffffff !important;
    border-color: var(--bs-primary) !important;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: #0b5ed7 !important; /* Darken on hover */
    border-color: #0b5ed7 !important;
}

.btn-secondary {
    background-color: var(--bs-secondary) !important;
    color: #ffffff !important;
    border-color: var(--bs-secondary) !important;
}

.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
    background-color: #5c636a !important; /* Darken on hover */
    border-color: #5c636a !important;
}

/* Success */
.btn-success {
    background-color: var(--bs-success) !important;
    border-color: var(--bs-success) !important;
    color: #fff !important;
}

.btn-success:hover {
    background-color: #157347 !important;
}

/* Info */
.btn-info {
    background-color: var(--bs-info) !important;
    border-color: var(--bs-info) !important;
}

.btn-info:hover {
    background-color: #31d2f2 !important;
}

/* Warning */
.btn-warning {
    background-color: var(--bs-warning) !important;
    border-color: var(--bs-warning) !important;
}

.btn-warning:hover {
    background-color: #e0a800 !important;
}

/* Danger */
.btn-danger {
    background-color: var(--bs-danger) !important;
    border-color: var(--bs-danger) !important;
}

.btn-danger:hover {
    background-color: #bb2d3b !important;
}

/* Light */
.btn-light {
    background-color: var(--bs-light) !important;
    border-color: var(--bs-light) !important;
    color: #000 !important;
}

.btn-light:hover {
    background-color: #e2e6ea !important;
}

/* Dark */
.btn-dark {
    background-color: var(--bs-dark) !important;
    border-color: var(--bs-dark) !important;
}

.btn-dark:hover {
    background-color: #1c1f23 !important;
}

/* Navbar Color Overrides */
.navbar-inverse {
    background-color: var(--bs-dark) !important;
    border-color: var(--bs-dark) !important;
}

.navbar-inverse .navbar-nav > li > a:hover {
    background-color: var(--bs-dark) !important;  /* Highlight with primary color */
}

/* Form control overrides */
.form-control {
    border-color: var(--bs-secondary) !important;
}

/* Alerts */
.alert-primary {
    background-color: var(--bs-primary) !important;
    color: #ffffff !important;
}

.alert-secondary {
    background-color: var(--bs-secondary) !important;
}

.alert-success {
    background-color: var(--bs-success) !important;
    color: #ffffff !important;
}

.alert-info {
    background-color: var(--bs-info) !important;
}

.alert-warning {
    background-color: var(--bs-warning) !important;
}

.alert-danger {
    background-color: var(--bs-danger) !important;
    color: #ffffff !important;

}

/**NAV RIGHT **/

/* Default layout for small screens - navbar behaves normally */
.navbar-right-side {
    width: 100%;
    background-color: #343a40;
}

/* For larger screens, move the navbar to the right and adjust content */
@media (min-width: 768px) {
    .navbar-right-side {
        position: fixed;
        top: 0;
        right: 0;
        height: 100%;                    /* Full height */
        width: 250px;                     /* Width of the sidebar */
        background-color: #343a40;        /* Sidebar background */
        padding-top: 20px;
        z-index: 1030;                    /* Ensure it stays on top */
        overflow-y: auto;                 /* Scrollable if content overflows */
        border-left: 1px solid #e0e0e0;   /* Optional border */
    }

    /* Adjust main content */
    .main-content {
        margin-right: 250px;              /* Shift content to the left by sidebar width */
                        /* Optional padding for spacing */
    }

    /* Stack navbar items vertically */
    .navbar-right-side .navbar-nav {
        float: none !important;
        width: 100%;
    }

    .navbar-right-side .navbar-nav > li {
        float: none;
        display: block;                   /* Stack items vertically */
    }

    .navbar-right-side .navbar-nav > li > a {
        color: #ffffff !important;
        padding: 15px 20px;
        text-align: left;
        border-bottom: 1px solid #444;    /* Separator between items */
    }

    .navbar-right-side .dropdown-menu {
        position: static !important;
        float: none;
        width: 100%;
        background-color: #343a40;
        border: none;
    }

    .navbar-right-side .dropdown-menu > li > a {
        color: #ffffff !important;
    }
}

/* Hover effect */
.navbar-right-side .navbar-nav > li > a:hover {
    background-color: #495057 !important; /* Darken background on hover */
    color: #f8f9fa !important;
}

.res_popup_details .user {
    font-weight: normal;
}

.res_popup_details .title {
    font-weight: bold;
}