/*
Template Name: Velzon - Admin & Dashboard Template
Author: Themesbrand
Website: https://themesbrand.com/
Contact: support@themesbrand.com
File: Custom Css File
*/

/* ===============================
   SELECT2 READ-ONLY / DISABLED
   =============================== */

/* Base: all select2 containers generated from disabled-field selects */
/* Disable Select2 UI */
/* Disable Select2 container interaction */
select.disabled-field + .select2-container,
select.disabled-field ~ .select2-container,
select.disabled-field + span.select2,
select.disabled-field ~ span.select2-container {
    pointer-events: none !important; /* block interaction */
    cursor: not-allowed !important; /* change cursor */
    opacity: 1 !important; /* keep full opacity */
}

    /* Selection box style */
    select.disabled-field + .select2-container .select2-selection,
    select.disabled-field ~ .select2-container .select2-selection,
    select.disabled-field + span.select2 .select2-selection,
    select.disabled-field ~ span.select2-container .select2-selection {
        background-color: #e9ecef !important; /* standard disabled background */
        border-color: #ced4da !important; /* standard disabled border */
        color: #212529 !important; /* darker text for visibility */
        cursor: not-allowed !important;
        pointer-events: none !important;
        user-select: none !important;
        box-shadow: none !important;
    }

    /* Rendered text */
    select.disabled-field + .select2-container .select2-selection__rendered,
    select.disabled-field ~ .select2-container .select2-selection__rendered {
        color: #212529 !important; /* dark text for readability */
        cursor: not-allowed !important;
        user-select: none !important;
    }

    /* Arrow styling */
    select.disabled-field + .select2-container .select2-selection__arrow,
    select.disabled-field ~ .select2-container .select2-selection__arrow {
        pointer-events: none !important;
        opacity: 0.5 !important; /* slightly dim arrow */
        cursor: not-allowed !important;
    }

    /* Remove hover effect */
    select.disabled-field + .select2-container .select2-selection--single:hover,
    select.disabled-field ~ .select2-container .select2-selection--single:hover {
        background-color: #e9ecef !important;
    }

    /* Remove focus outline */
    select.disabled-field + .select2-container .select2-selection--single,
    select.disabled-field ~ .select2-container .select2-selection--single {
        outline: none !important;
    }

label.error {
    color: red !important;
    font-size: 12px !important;
    text-align: left !important;
    font-weight: 400;
}

.datepicker {
    z-index: 999999 !important
}
.placeholder_left::placeholder {
    text-align: left;
}
.value_right {
    text-align: right;
}

.tab_bg.active {
    background: #00d5ff2e !important;
}

@media (max-width: 991.98px) {
    /* Container holding buttons and logo */
    .navbar .container-fluid > .d-flex {
        flex-wrap: wrap; /* allow wrapping */
        justify-content: space-between;
        align-items: center;
    }

        /* Keep the three elements (arrow, logo, hamburger) in one row */
        .navbar .container-fluid > .d-flex > div:first-child,
        .navbar-brand,
        .navbar-toggler {
            flex: 1 0 auto;
            text-align: center;
        }

        /* Order the items properly */
        .navbar .container-fluid > .d-flex > div:first-child {
            order: 1; /* arrow button */
            text-align: left;
        }

    .navbar-brand {
        order: 2; /* logo */
    }

    .navbar-toggler {
        order: 3; /* hamburger toggle */
        text-align: right;
    }

    /* Collapse menu below the top row */
    #navbarSupportedContent {
        order: 4;
        width: 100%;
        margin-top: 10px;
    }

    /* Stack menu items vertically */
    .navbar-nav {
        flex-direction: column;
        width: 100%;
        padding-left: 0;
    }

    .nav-item {
        width: 100%;
        margin-bottom: 0.5rem;
    }
}

/* Desktop - keep original flex */
@media (min-width: 992px) {
    .navbar .container-fluid > .d-flex {
        flex-wrap: nowrap;
        justify-content: flex-start;
    }

        /* Reset orders */
        .navbar .container-fluid > .d-flex > div:first-child,
        .navbar-brand,
        .navbar-toggler {
            order: initial;
            text-align: initial;
            flex: initial;
        }

    /* Navbar collapse behaves normally */
    #navbarSupportedContent {
        order: initial;
        width: auto;
        margin-top: 0;
    }
}

@media (max-width: 768px) {
    .app-menu {
        transition: all 0.3s ease;
    }

        .app-menu.collapsed {
            width: 0;
            overflow: hidden;
        }
}

@media (min-width: 768px) {
    #topnav-hamburger-icon {
        display: none;
    }
}

#chart-container {
    width: 100%;
    position: relative;
}

#mylineChart {
    display: block;
    width: 100% !important;
    max-width: 100%;
    height: 400px !important; /* default */
}

@media (max-width: 768px) {
    #mylineChart {
        height: 600px !important; /* mobile view */
    }
}

#myBarChart {
    display: block;
    width: 100% !important;
    max-width: 100%;
    height: 400px !important; /* default */
}

@media (max-width: 768px) {
    #myBarChart {
        height: 600px !important; /* mobile view */
    }
}

/* Smooth dropdown animation */
.animate-dropdown {
    transform-origin: top;
    animation: dropdownFade 0.18s ease-out;
}

@keyframes dropdownFade {
    0% {
        opacity: 0;
        transform: scaleY(0.8);
    }

    100% {
        opacity: 1;
        transform: scaleY(1);
    }
}

/* Dropdown menu style */
.dropdown-menu {
    min-width: 210px;
    border-radius: 12px !important;
    padding: 8px 0 !important;
}

.dropdown-item {
    font-size: 15px;
    font-weight: 500;
    border-radius: 1px;
    transition: background-color 0.15s ease; /* smooth subtle fade */
}

    /* Light blue hover — no movement */
    .dropdown-item:hover {
        color: #24B39C;
        background-color: #e8f1ff !important; /* light clean blue */
        transform: none !important; /* no sliding */
    }


/* Arrow rotation on open */
.nav-link[aria-expanded="true"] .ri-arrow-down-s-line {
    transform: rotate(180deg);
    transition: transform 0.2s ease;
}

.nav-link .ri-arrow-down-s-line {
    transition: transform 0.2s ease;
}


/* ----------------------------------------------------
   GLOBAL NAVBAR MENU STYLE (Premium UI)
---------------------------------------------------- */

/* Ensure all menu items stay in place */
.navbar-nav .nav-item {
    position: relative;
}

/* Link styling (modern, simple, global-ready) */
.navbar-nav .nav-link {
    padding: 10px 14px !important;
    font-size: 16px;
    font-weight: 500;
    color: #1a1a1a;
    border-radius: 10px;
    transition: none !important; /* remove animation */
}

    /* REMOVE hover effect completely */
    .navbar-nav .nav-link:hover {
        color: #1a1a1a !important; /* keep original color */
        transform: none !important; /* no slide effect */
        background: transparent !important;
    }

        /* Icon hover resets */
        .navbar-nav .nav-link:hover img,
        .navbar-nav .nav-link:hover i {
            transform: none !important;
        }

    /* Active state (keep as you like) */
    .navbar-nav .nav-link.active {
        color: #0d6efd !important;
        font-weight: 600;
        background: transparent !important;
    }