/* ----------------------------------
   Vars
---------------------------------- */
:root {
  --header-h: 70px; /* header height */
}
.container {
    background-color: #fff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.ddl-wrapper {
    margin-bottom: 20px;
}
@media (max-width: 640px) {
  #filter-menu {
    padding: 16px; /* less padding on small screens */
    top: 60px;     /* adjust for smaller navbars */
  }
}
.placeholder {

    position: relative; /* sit on top of the iframe area */
    top: 0;
    left: 0;
    width: 100%;
    height: 2%; /* full height of parent */
    display: flex;
    justify-content: center;
    align-items: center;
    color: #666;
    font-size: 18px;
    
    

    text-align: center;

    box-sizing: border-box;
}
.loading-modal {
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
/**** IFRAME CSS*/

/* Wrapper handles padding and shadow */
.iframe-wrapper {
    width: 100%;
    height: calc(100vh - 190px);
    
    padding: 20px; /* space around iframe */
    box-sizing: border-box; /* so padding doesn’t overflow */

    box-shadow: 0 4px 12px rgba(0,0,0,0.2); /* shadow effect */
    border-radius: 10px; /* optional rounded corners */
    background: #fff; /* optional background */
}

    /* iframe itself fills the wrapper */
    .iframe-wrapper iframe {
        width: 100%;
        height: 100%;
        border: none;
        border-radius: 8px; /* rounded iframe corners if wanted */
    }
    /****************************************************************/
.spinner {
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    margin: 0 auto 15px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
.footer {

    width: 100%;
    padding: 5px;
    background: #333;
    color: #fff;
    text-align: center;
    position: absolute;
    background-image: url('../images/MenuBKG.jpg')
    /* Note: The image URL is a relative path which may not work in this environment. */
}



/* Styles for the hamburger button and icon */
.hamburger {
    /* Use fixed positioning to keep it in place  position: fixed;*/
    top: 15px;
    left: 15px;
    z-index: 1051;
    cursor: pointer;
    padding: 10px;
    background-color: transparent;
    border: none;
    transition: transform 0.3s ease-in-out;
}

    .hamburger .icon-bar {
        display: block;
        width: 28px; /* Slightly larger for better touch target */
        height: 3px;
        background-color: white; /* Bootstrap primary color */
        border-radius: 2px;
        margin: 5px 0;
        transition: all 0.3s ease-in-out;
    }



    /***************Report Filter*/
/* Container for the filter menu */
/* Base (desktop + laptops) */
#filter-menu {
  position: fixed;
  right: 0;
  top: 80px;                       /* below your header */
  width: 100%;
  max-width: 400px;                /* drawer width on wider screens */
  height: 90vh;      /* remaining viewport height */
  background: #fff;
  box-shadow: -10px 0 20px rgba(0,0,0,0.4);
  padding: 24px 24px 32px;
  transform: translateX(100%);     /* hidden by default */
  transition: transform 0.3s ease-in-out;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  border-left: 1px solid #374151;
  overflow-y: auto;                /* scroll for small screens */
  -webkit-overflow-scrolling: touch;
  z-index: 1055;                   /* above navbar/dropdowns */
  will-change: transform;
}

    /* Class to show the menu */
    #filter-menu.is-open {
        transform: translateX(0);
    }

/* Toggle button for the menu */
#toggle-menu {
    position: fixed;
    right: 24px;
    z-index: 2000;
    background-color: #2563eb; /* bg-blue-500 */
    color: #2563eb;
    padding: 16px;
    border-radius: 9999px; /* rounded-full */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: background-color 0.2s;
    border: none;
    cursor: pointer;
}

    #toggle-menu:hover {
        background-color: #2563eb; /* hover:bg-blue-600 */
    }

/* Close button for the menu */
#close-menu {
    position: absolute;
    top: 24px;
    right: 24px;
    color: #9ca3af; /* text-gray-400 */
    transition: color 0.2s;
    background: none;
    border: none;
    cursor: pointer;
}

    #close-menu:hover {
        color: white;
    }

/* Heading styles */
h2 {
    font-size: 1.875rem; /* text-3xl */
    font-weight: 700; /* font-bold */
    color: #60a5fa; /* text-blue-400 */
    margin-bottom: 1.5rem; /* mb-6 */
}

h4 {
    font-size: 1.125rem; /* text-lg */
    font-weight: 600; /* font-semibold */
    margin-bottom: 0.5rem; /* mb-2 */
    color: #d1d5db; /* text-gray-300 */
}

/* Hide native radio buttons and use custom styles for the label */
input[type="radio"] {
    display: none;
}

.radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem; /* gap-2 */
}

.radio-label {
    cursor: pointer;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    background-color: #374151; /* bg-gray-700 */
    transition: background-color 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

    .radio-label:hover {
        background-color: #4b5563; /* hover:bg-gray-600 */
    }

    /* Styling for the custom radio button circle */
    .radio-label::before {
        content: '';
        display: inline-block;
        width: 1rem;
        height: 1rem;
        border-radius: 50%;
        border: 2px solid #a0aec0; /* border-gray-400 */
        background-color: #374151; /* bg-gray-700 */
    }

/* Style the label when the radio button is checked */
input[type="radio"]:checked + .radio-label {
    background-color: #3b82f6; /* bg-blue-500 */
    color: white;
}

    /* Fill the custom circle when checked */
    input[type="radio"]:checked + .radio-label::before {
        background-color: white;
        border-color: white;
    }

/* Form control styles for inputs and selects */
.form-control {
    width: 100%;
    background-color: #374151; /* bg-gray-700 */
    color: white;
    border-radius: 0.375rem; /* rounded-md */
    padding: 0.75rem; /* p-3 */
    border: 1px solid #4b5563; /* border-gray-600 */
    outline: none;
    transition: box-shadow 0.2s, border-color 0.2s;
}

    .form-control:focus {
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5); /* focus:ring-2 focus:ring-blue-500 */
    }

/* Go Button styles */
#btnGo {
    background-color: #3b82f6; /* bg-blue-500 */
    color: white;
    font-weight: 700; /* font-bold */
    padding: 12px 24px; /* py-3 px-6 */
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: background-color 0.2s;
    border: none;
    cursor: pointer;
}

    #btnGo:hover {
        background-color: #2563eb; /* hover:bg-blue-600 */
    }

/* Utility classes */
.hidden {
    display: none;
}

.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.gap-4 {
    gap: 1rem;
}

.w-full {
    width: 100%;
}
    /*****************************/
/* Hamburger animation: transforms to an 'X' */
.hamburger-open .top-bar {
    transform: rotate(45deg) translate(5px, 5px);
}
.navbar-logo-center {
    float: left;
    /* height: 50px; */
    padding: 15px 15px;
    font-size: 18px;
    line-height: 20px;
}
html, body {
    height: 100%;
    margin: 0;
    position: relative;
}

.hamburger-open .middle-bar {
    opacity: 0;
}
.page {
    min-height: 100vh; /* full viewport height */
    display: flex;
    flex-direction: column;
}
.page-main {
    flex: 1; /* pushes footer down */
}
.hamburger-open .bottom-bar {
    transform: rotate(-45deg) translate(5px, -5px);
}
@media (max-width: 768px) {
    .navbar-title {
        font-size: 16px; /* shrink title text */
    }

    .hamburger {
        padding: 6px;
    }
}

    .navbar-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 99%;
    }

    .navbar-title {
        flex: 1; /* allow it to grow between logo & hamburger */
        text-align: left;
        margin: 0;
        font-size: 22px; /* adjust for desktop */
        font-weight: 800;
        font-family: 'Raleway', sans-serif;
        color: #c78e62;
        white-space: nowrap;
    }
    /* Styles for the side menu panel */
    .side-menu {
        height: 100%;
        width: 0;
        position: fixed;
        z-index: 1050;
        top: 0;
        left: 0;
        background-color: #fff;
        overflow-x: hidden;
        transition: 0.1s;
        padding-top: 60px;
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
    }

/* Default (desktop/larger screens) */
.side-menu-open {
    width: 400px; /* desktop width */
}

/* Tablet */
@media (max-width: 991px) {
    .side-menu-open {
        width: 350px; /* medium width */
    }
}

/* Mobile */
@media (max-width: 767px) {
    .side-menu-open {
        width: 80%; /* or a fixed 250px */
        max-width: 300px;
    }
}





.side-menu-user {
    padding: 15px;
    background: #2c3e50; /* dark header bg */
    color: #fff;
    border-bottom: 1px solid #444;
}

    .side-menu-user .user-info {
        display: flex;
        align-items: center;
    }

    .side-menu-user .user-icon .glyphicon {
        color: lawngreen;
        font-size: 20px;
        margin-right: 10px;
    }

    .side-menu-user .user-text {
        font-size: 14px;
    }

    .side-menu-user .welcome {
        margin-right: 5px;
        opacity: 0.8;
    }

    .side-menu-user .user-actions {
        margin-top: 10px;
    }

        .side-menu-user .user-actions a,
        .side-menu-user .user-actions .fa {
            color: #fff;
            font-size: 16px;
            margin-right: 15px;
            transition: color 0.2s ease;
        }

            .side-menu-user .user-actions a:hover,
            .side-menu-user .user-actions .fa:hover {
                color: #c78e62; /* your brand accent */
            }

    .side-menu .close-btn {
        position: absolute;
        top: 15px;
        right: 25px;
        font-size: 30px;
        color: #888;
        cursor: pointer;
        transition: background-color 0.1s ease;
    }

        .side-menu .close-btn:hover {
            color: #337ab7;
        }

    .side-menu .nav-pills > li {
        padding: 0 15px;
    }

        .side-menu .nav-pills > li > a {
            /* color: #555;
        padding: 15px 20px;*/
            border-radius: 0;
            transition: background-color 0.2s;
            /* font-size: 16px;*/
        }

            .side-menu .nav-pills > li > a:hover {
                background-color: #f0f0f0;
            }

        .side-menu .nav-pills > li.active > a,
        .side-menu .nav-pills > li.active > a:hover {
            color: #fff;
            background-color: #337ab7;
        }

    /* Styles for the semi-transparent overlay */
    .menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
        z-index: 1049; /* Below the side menu */
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.5s, visibility 0s 0.5s;
    }

        .menu-overlay.show {
            opacity: 1;
            visibility: visible;
            transition-delay: 0s;
        }

    /* Adjust content when menu is open */
    .content-push {
        transition: margin-left 0.5s;
    }


    /* Adjust content when menu is open */





    content {
        padding-bottom: 70px;
        /* Height of the footer element */
    }
    /* ----------------------------------
   Header
---------------------------------- */
    .main-header {
        background-color: #fff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        z-index: 1001;
        /*  --display: flex;      */ /* was commented out; needed for alignment */
        align-items: center;
        justify-content: space-between;
        /*  padding: 12px 20px;*/
        min-height: var(--header-h);
    }

        .main-header .navbar-brand img {
            height: 40px;
        }

    .navbar-nav {
        display: flex;
        flex-wrap: wrap; /* prevents overflow */
    }

        .navbar-nav.navbar-right {
            margin-left: auto; /* pushes right */
            margin-right: 0 !important; /* prevent extra spacing */
        }

    #MainContent_drpLoggerSection {
        margin-right: 0 !important;
    }
    /* Define custom CSS classes for the colored list items */
    .status-list {
        list-style-type: none; /* Remove default bullet points */
        font-size: 1.25rem; /* Increase font size */
        font-family: 'Inter', sans-serif;
        display: flex; /* Make the list items a horizontal flex container */
        justify-content: center; /* Horizontally center the flex items */
        gap: 1.5rem; /* Add spacing between the list items */
        padding: 0;
        margin: 0;
    }

        .status-list li {
            position: relative;
            padding-left: 1.5em; /* Add space for custom bullet */
            margin-bottom: 0; /* Remove vertical margin */
            white-space: nowrap; /* Prevent items from wrapping to a new line */
        }

            /* Create the colored bullet points using a pseudo-element */
            .status-list li::before {
                content: '•'; /* Use a large dot or any character */
                position: absolute;
                left: 0;
                top: 50%; /* Position the top of the dot at the vertical center of the line */
                transform: translateY(-50%); /* Shift the dot up by half of its own height to perfectly center it */
                font-size: 1.5em;
            }


    .green-status::before {
        color: #10B981;
    }

    .orange-status::before {
        color: #F59E0B;
    }

    .red-status::before {
        color: #EF4444;
    }

    .main-header h3 {
        color: #c78e62;
        font-size: 25px;
        font-weight: 800;
        margin: 0;
    }

    .navbar-toggle {
        display: none; /* shown on mobile via media query */
        background-color: transparent;
        border: 1px solid #ccc;
        padding: 9px 10px;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.2s ease-in-out;
    }

    .navbar {
        margin-bottom: 5px !important;
    }

    .navbar-toggle .icon-bar {
        display: block;
        background-color: #888;
        height: 2px;
        width: 22px;
        margin: 4px 0;
    }

    /* ----------------------------------
   Main layout
---------------------------------- */
    .main-container {
        display: flex;
        height: calc(100vh - var(--header-h)); /* fills viewport under header */
        min-height: 400px;
    }

    /* ----------------------------------
   Sidebar
---------------------------------- */
    .sidebar {
        width: 280px;
        background-color: #ffffff;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
        padding: 20px 0;
        overflow-y: auto; /* scroll if links overflow */
        flex: 0 0 280px; /* prevents shrinking on desktop */
        transition: transform 0.3s ease-in-out;
        will-change: transform;
    }

    .banner-navbar {
        background-image: url('../images/MenuBKG.jpg');
        background-repeat: repeat;
        /* adjust height to match your image */
    }

    .sidebar .nav-pills {
        display: flex; /* ensure vertical stack is stable */
        flex-direction: column;
        margin: 0;
    }

    @media (max-width: 768px) {
        .hamburger {
            margin-right: 10px;
        }

        .sidebar .nav-pills > li {
            width: 100%;
            margin-bottom: 8px;
            padding: 0 10px;
        }

            .sidebar .nav-pills > li > a,
            .sidebar .dropdown-menu > li > a {
                border-radius: 12px;
                color: #495057;
                padding: 12px 18px;
                transition: all 0.2s ease-in-out;
                display: flex;
                align-items: center;
                text-decoration: none;
            }

                .sidebar .nav-pills > li > a:hover,
                .sidebar .nav-pills > li > a:focus {
                    background-color: #e9ecef;
                    color: #3b82f6;
                    transform: translateY(-2px);
                    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
                    text-decoration: none;
                }

        .nav-pills > li.active > a,
        .nav-pills > li.active > a:hover,
        .nav-pills > li.active > a:focus {
            background-color: #007bff;
            background-image: linear-gradient(to right, #007bff, #5aa5ff);
            color: #fff;
            box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3);
            transform: none;
        }

        .sidebar .nav-pills > li.active > a, .sidebar .nav-pills > li.active > a:hover, .sidebar .nav-pills > li.active > a:focus {
            background-color: #007bff;
            background-image: linear-gradient(to right, #007bff, #5aa5ff);
            color: #fff;
            box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3);
            transform: none;
        }

        .sidebar .nav-pills > li > a .fa {
            margin-right: 12px;
            font-size: 1.2em;
        }

        /* Dropdown inside sidebar */
        .sidebar .dropdown > a {
            position: relative;
            cursor: pointer;
        }

        .sidebar .dropdown .caret {
            position: absolute;
            right: 18px;
            top: 50%;
            transform: translateY(-50%);
            transition: transform 0.3s ease-in-out;
        }

        .sidebar .dropdown.open .caret {
            transform: translateY(-50%) rotate(180deg);
        }

        .sidebar .dropdown-menu {
            position: static; /* inline under parent in sidebar */
            display: none;
            float: none;
            box-shadow: none;
            border: none;
            padding: 0;
            margin: 5px 0 10px 25px;
            background: none;
        }

        .sidebar .dropdown.open .dropdown-menu {
            display: block;
        }

        .sidebar .dropdown-menu > li {
            margin-bottom: 5px;
            padding: 0;
        }

            .sidebar .dropdown-menu > li > a {
                border-radius: 8px; /* slightly less rounded than main links */
                padding-left: 45px;
                font-size: 0.95em;
                background-color: transparent;
                color: #6c757d;
            }

                .sidebar .dropdown-menu > li > a:hover,
                .sidebar .dropdown-menu > li > a:focus {
                    background-color: #e9ecef;
                    color: #3b82f6;
                    transform: none;
                    box-shadow: none;
                    text-decoration: none;
                }

        /* ----------------------------------
   Content area
---------------------------------- */
        .content-area {
            flex: 1 1 auto;
            padding: 25px;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }

        /* ----------------------------------
   Bootstrap tabs fix
---------------------------------- */
        .tab-content > .tab-pane {
            display: none;
        }

        .tab-content > .active {
            display: block; /* show the active pane */
        }

        /* ----------------------------------
   Responsive
---------------------------------- */
        @media (max-width: 768px) {
            .navbar-toggle {
                display: block; /* show hamburger on mobile */
            }

            .main-container {
                height: auto; /* allow natural height when stacked layouts happen */
            }

            .sidebar {
                position: fixed;
                top: var(--header-h); /* sit below header */
                left: 0;
                height: calc(100vh - var(--header-h)); /* fill under header */
                z-index: 1000;
                transform: translateX(-100%); /* start hidden */
            }

                .sidebar.show-sidebar {
                    transform: translateX(0); /* slide in */
                }

            .content-area {
                padding: 20px;
            }
        }

        .custom-dropdown-container {
            position: relative;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        /* Style for the visible button part of the dropdown */
        .select-button {
            background-color: #ffffff;
            border: 1px solid #cccccc;
            padding: 10px 15px;
            border-radius: 8px; /* Custom rounding */
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: border-color 0.2s;
        }

            /* Hover effect for the select button */
            .select-button:hover {
                border-color: #337ab7; /* Bootstrap's primary blue */
            }

        /*
            Style for the dropdown list of options.
            It's positioned absolutely and has a matching shadow.
        */
        .select-list {
            position: absolute;
            top: 100%; /* Position right below the button */
            left: 0;
            right: 0;
            margin-top: 8px;
            background-color: #ffffff;
            border: 1px solid #cccccc;
            border-radius: 8px; /* Custom rounding */
            list-style: none; /* Remove list bullets */
            padding: 0;
            margin-bottom: 0;
            max-height: 192px; /* Set a max height for scrolling */
            overflow-y: auto;
            z-index: 1000;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }

            /* Style for each option item in the list */
            .select-list li {
                padding: 8px 15px;
                cursor: pointer;
                transition: background-color 0.2s;
            }

                /* Hover effect for each list item */
                .select-list li:hover {
                    background-color: #f5f5f5; /* Light gray hover */
                }

        /* Utility class to hide the dropdown list */
        .hidden {
            display: none;
        }

        /* Utility class for rotating the arrow icon */
        .rotate-180 {
            transform: rotate(180deg);
        }