/* ==================== BASE STYLES ==================== */
html {
    font-size: 14px;
}

@media (min-width: 375px) {
    html {
        font-size: 12px;
    }
}

@media (min-width: 768px) {
    html {
        font-size: 14px;
    }
}

@media (min-width: 1100px) {
    html {
        font-size: 16px;
    }
}




/* ==================== TYPOGRAPHY ==================== */


/* Headings */
h1, h2, h3, h4, h5, h6, .title {
    font-family: var(--font-primary);
    font-weight: 600;
    text-transform: uppercase;
    /*margin: 0 0 0.5rem 0;*/
    line-height: 1.2;
    color: var(--color-black);
}

h1 {
    font-size: 2.25rem;
    letter-spacing: -0.05rem;
}

h2 {
    font-size: 1.75rem;
    letter-spacing: -0.025rem;
    line-height: 1;
}

h3 {
    font-size: 1.5rem;
    letter-spacing: -1px;
}

h4, .title {
    font-size: 1.25rem;
    letter-spacing: -1px;
}

h5 {
    font-size: 1rem;
    letter-spacing: 0.05rem;
}

h6 {
    font-size: 0.8rem;
    letter-spacing: 0.075rem;
}


.header-border {
    position: relative;
    display: inline-block;
    padding-bottom: 0.25rem;
}

.header-border::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0.2rem; /* Thickness of the line */
    background-color: var(--color-green-700); 
    border-radius: 0.125rem; /* Half of height for perfect rounded ends */
}

/* Paragraph text */
p {
    font-size: 1rem;
}

/*Links*/

a{
 color: var(--color-green-700);
}


/* Small text */
small {
    font-size: 0.875rem;
    letter-spacing: 0.75px;
}

/*
gaurav overeride class*/

.blur-main-container{
        filter: blur(5px);
        transition: filter 0.3s ease;

}


@media (min-width: 576px) {
    .container-sm, .container {
        max-width: 540px;
       
    }
}

@media (min-width: 768px) {
    .container-md, .container-sm, .container {
        max-width: 720px;
      
    }
}

@media (min-width: 992px) {
    .container-lg, .container-md, .container-sm, .container {
        max-width: 960px;
      
    }
}

@media (min-width: 1200px) {
    .container-xl, .container-lg, .container-md, .container-sm, .container {
        max-width: 1140px;
      
    }
}

@media (min-width: 1500px) {
    .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
        max-width: 100%;
    }
}



.sidenav .sidenav-menu .nav .sidenav-menu-heading {
        padding: 0.5rem 1rem 0.5rem !important;
    }


.topnav .navbar-brand img {
        height: 5.8rem; !important;
    }



#sidebarToggle:hover {
        background-color: var(--color-green-200);
        border: 1px solid #007bff;
        box-shadow: 0 0 8px rgba(0, 123, 255, 0.6);
        transition: all 0.3s ease;
}



    #reportTable_filter > label {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        width: fit-content;
        float: inline-end;
        gap: 0.5rem;
        margin: 0.5rem;
    }

    #reportTable_length > label {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: fit-content;
        float: inline-start;
        gap: 0.5rem;
        margin: 0.5rem;
    }


 

    div.dt-container .dt-search input.dt-input {
        margin-left: 0px !important;
    }

 #TableData  {
        color: black
    }

.table {
    color:black
    }

.modal-logo-preview {
        display: inline-block !important;
        width: 100px !important;
        height: 100px !important;
        max-width: none !important; /* prevents it from shrinking */
    }

    /* ==================== SECTIONS ==================== */
    /*.section-wrapper {
    display: grid;
    gap: 2rem;
    justify-items: start;
    margin-block:-2rem;
}*/
    /*.section{
    width:100%;
}*/
    .section-header {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .section-body {
        width: 100%;
        margin-block: 0.5rem;
    }



    /* ==================== INPUT ==================== */
.input-boxes {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.input-box, input{
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border-radius: 1rem;
    width: 100%;
}



.form-control

    .form-control, .form-select, .form-input {
    border: solid 2px var(--color-grey-400);
    border-radius: var(--radius-sm);
        font-size: 1rem;
    padding: 0.5rem 1rem;
        transition: background 0.3s ease;
    }

        .form-control:focus, .form-select:focus, .form-input:focus, .page-link:focus {
            border: solid 2px var(--color-green-400);
        box-shadow: none;
        }

    .dataTables_wrapper .dataTables_filter input {
        border: solid 2px var(--color-grey-400);
        border-radius: var(--radius-sm);
        font-size: 1rem;
        padding: 0.5rem 1rem;
        transition: background 0.3s ease;
    }

        .dataTables_wrapper .dataTables_filter input:focus {
            border: solid 2px var(--color-green-400);
        box-shadow:none;
        }


    /*sliders*/

    .switch {
        position: relative;
        display: inline-block;
        width: 50px;
        height: 26px;
    }

        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        transition: .4s;
    }

        .slider:before {
            position: absolute;
            content: "";
            height: 21px;
            width: 21px;
            left: 2px;
            bottom: 2px;
            background-color: white;
            transition: .4s;
        }

    input:checked + .slider {
        background-color: var(--color-green-600);
    }

        input:checked + .slider:before {
            transform: translateX(26px);
        }

    .slider.round {
        border-radius: 34px;
    }

        .slider.round:before {
            border-radius: 50%;
        }



    /* ==================== BUTTON ==================== */
    .btn .btn-success :hover {
        background-color: white;
        color: red;
        font-weight: bold;
    }


    .button, .form-input {
        border-radius: var(--radius-sm);
        font-size: 1rem;
        padding: 1rem 2rem;
        max-width: 395px;
        transition: background 0.3s ease;
    }

    .button, .page-link {
        width: auto;
        min-width: 125px;
        background: var(--color-green-700);
        border: solid 3px var(--color-green-700);
        font-weight: 600;
        color: var(--color-white);
        text-decoration: none;
        cursor: pointer;
    }

        .button:hover {
            background: var(--color-green-500);
            color: var(--color-green-900);
        }


    .button-link a {
        color: var(--color-green-900);
    }

    .page-link {
        background: transparent !important;
        border-radius: var(--radius-sm) !important;
        border: solid 1px var(--color-green-800) !important;
        color: black !important;
        border: none;
        font-weight: 300 !important;
        margin: 0;
    }

    .paginate_button {
        border-radius: var(--radius-sm) !important;
        padding: 0 !important;
    }

        .paginate_button:hover {
            background: var(--color-green-500) !important;
        }

        .paginate_button:active {
            border: solid 2px var(--color-green-400) !important;
        }


    /* ==================== COMPONENT STYLES ==================== */


    /* Toolbar */
    /* .toolbar {
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 99;
        height: var(--spacing-body);
        background: var(--color-white);
        border-bottom: solid 1px var(--color-green-200);
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 0.25rem;
    }
*/

    .button-toggle {
        border: solid 1px transparent;
        padding: 0.5rem 1rem;
        border-radius: var(--radius-sm);
        font-size: 1.5rem;
        color: var(--color-green-700);
        cursor: pointer;
    }

        .button-toggle:hover {
            background: var(--color-green-100);
        }


    .toolbar-user {
        list-style: none;
        padding: 0 1rem;
        margin: 0;
    }

        .toolbar-user img {
            max-width: 32px;
        }


    .dropdown-menu {
        border-radius: var(--radius-sm);
        box-shadow: var(--shadow-sm);
    }

    .dropdown-header {
        display: flex;
        padding: 1rem;
        color: var(--color-black);
        font-weight: 500;
        font-size: 1rem;
        text-transform: uppercase;
    }



    .dropdown-item {
        padding: 1rem;
    }


    /* Navigation */


    .navbar-nav a {
        color: var(--color-green-900);
    }

    /* Main Layout Container */


    #content {
        background: var(--color-grey-200);
        padding-bottom: 3rem;
    }

    #content-wrapper1 {
        margin-top: var(--spacing-body);
        padding-block: 2rem;
    }



    /* ==================== SIDEBAR ==================== */
    .sidenav {
        background-color: var(--color-white);
        padding: 0.25rem;
        box-shadow: var(--shadow-md);
        transition: all 0.3s ease-in-out;
    }

    /* Section Headings */
    .sidenav-light .sidenav-menu .sidenav-heading {
        color: var(--color-green-800);
    }

    /* Nav Items */
    .sidenav-light .sidenav-menu .nav-item {
        color: var(--color-green-800);
        /*list-style: none;*/
    }


    .fixed-sidebar {
        height: 100vh;
        overflow: hidden !important;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1030;
        width: 200px;
    }


    /* Links */
    .sidenav-light .sidenav-menu .nav-link {
        display: flex;
        gap: 0.5rem;
        align-items: center;
        justify-content: flex-start;
        padding: 1rem 2rem;
        color: var(--color-green-900);
        text-decoration: none;
        transition: background-color 0.2s ease, color 0.2s ease;
        border-radius: var(--radius-sm);
    }

    .nav-label {
        line-height: 1;
    }




    .sidenav-light .sidenav-menu .nav-link:hover,
    .sidenav-light .sidenav-menu .nav-link:focus {
        background-color: var(--color-green-200);
        color: var(--color-green-800);
    }

    /* Collapse Menu Content */
    .sidenav .collapse-inner {
        padding: 0.5rem 1rem;
        background: white;
    }


    .sidenav .collapse-item {
        display: block;
        padding: 0.5rem 1rem;
        font-size: var(--text-sm);
        color: var(--color-green-900);
        border-radius: var(--radius-md);
        text-decoration: none;
        transition: background 0.2s ease;
    }

        .sidenav .collapse-item:hover {
            background-color: var(--color-green-200);
            color: var(--color-green-800);
        }

    .active {
        background: var(--color-green-100);
        border-radius: var(--radius-sm);
    }

    /* ==================== FOOTER ==================== */

    footer img {
        max-width: 50px;
    }


    /* ==================== NAV RESPONSIVE here==================== */


    /* Content Area */
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 400px;
        width: 100%;
        /*max-height:500px;*/
    }




    /* KPI Card Elements */

    /* KPI Card Row */
    .card-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
        width: 100%;
    }

        /* Default: 5 cards per row */
        .card-row .card-kpi {
            flex: 1 1 calc(20% - 0.5rem); /* 100% / 5 = 20% minus gap */
            max-width: calc(20% - 0.5rem);
        }

    /* Mobile: 2 cards per row */
    @media (max-width: 768px) {
        .card-row .card-kpi {
            flex: 1 1 calc(50% - 0.5rem);
            max-width: calc(50% - 0.5rem);
        }
    }

    .card {
        width: 100%;
        background-color: var(--color-white);
        border-radius: var(--radius-sm);
        box-shadow: var(--shadow-sm);
        padding: 1rem;
    }

    .card-column .card-kpi-value {
        font-size: 1.5rem;
    }

    .card-column {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .card-kpi {
        min-width: 150px;
        max-width: 250px;
        gap: 0.5rem;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .card-kpi-header {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .card-kpi-icon {
        width: 20px;
        height: 20px;
        border-radius: var(--radius-full);
        display: flex;
        padding: 0.25rem;
        justify-content: center;
        align-items: center;
        font-size: 1rem;
    }

    .card-kpi-title {
        font-size: 0.875rem;
        text-transform: capitalize;
    }

    .card-kpi-body {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }

    .card-kpi-value {
        font-size: 2rem;
        line-height: 1;
        font-weight: 700;
        color: var(--text-color-dark);
        letter-spacing: -1px;
    }

    .card-kpi-change {
        display: flex;
        gap: 0.25rem;
        align-items: center;
    }

        .card-kpi-change i {
            font-size: 0.75rem;
        }


        /* Change colors based on status */
        .card-kpi-change.positive {
            color: var(--color-green-600);
        }

        .card-kpi-change.negative {
            color: var(--color-red-600);
        }

        .card-kpi-change.neutral {
            color: var(--color-yellow-600);
        }



    /* Canvas */
    canvas {
        max-width: 100%;
        height: 100%;
        width: 90% !important;
    }



    /* ==================== TABLES ==================== */


    .thumbnail {
        margin: auto;
        cursor: pointer;
    }

  /*  table .image-container:hover .popup-image {
        display: block;
    }*/


    .table-logo {
        width: 40px;
        height: 40px;
        margin: auto;
        object-fit: contain;
        border-radius: var(--radius-full);
    }

    table .fa-solid {
        font-size: 1.25rem;
        color: var(--color-green-800);
        cursor: pointer;
        margin: auto;
    }

    .powerbi-link img {
        width: 1.5rem;
        aspect-ratio: 1/1;
        margin: auto
    }

    .pagination {
        gap: 0.5rem;
    }

    /* Style for the popup image container */
    .popup-image {
        /*   position: absolute;
        z-index: 1000;
        background-color: #fff;
        border: 1px solid #ccc;
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
       
        display: none; */

        position: absolute; /* changed from absolute */
      /*  top: 50%;
        left: 50%;*/
        transform: translate(-50%, -50%);
        z-index: 1050;
        background-color: #fff;
        border: 1px solid #ccc;
        padding: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        display: none;
        max-width: 90vw;
        max-height: 90vh;
        overflow: auto;
    }

    /* Style for the logo image in the popup */
    .popup-thumbnail {
        z-index: 1000;
        position: absolute;
        width: 200px;
        height: auto;
        object-fit: contain;
    }


    /*    tooltip style start */
    .tooltip-wrapper {
        position: relative;
        display: inline-block;
        cursor: pointer;
    }

    /* Truncated file name styling */
    .truncated-name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 250px;
        display: inline-block;
        vertical-align: middle;
    }

    /* Tooltip styling */
    .tooltip-text {
        visibility: hidden;
        background-color: rgba(0, 0, 0, 0.8);
        color: #fff;
        text-align: center;
        padding: 5px 8px;
        border-radius: 4px;
        position: absolute;
        z-index: 100;
        white-space: nowrap;
        top: 100%; /* Position the tooltip below the truncated name */
        left: 50%;
        transform: translateX(-50%);
        opacity: 0;
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    /*MODAL*/

    .modal-content {
        border-radius: var(--radius-md) !important;
        padding: 1rem;
        border: none;
    }
	
	

/*   modal dark when open checkusers model and uplaod newreport modal  */
/*  start */
.modal-backdrop {
    z-index: 1040 !important;
}

.modal {
    z-index: 1050 !important;
}

/* For stacked modals */
.modal-backdrop.stacked {
    z-index: 1060 !important;
}

#usersModal,
#uploadModal {
    z-index: 1070 !important; /* top modals */
}

/*     end*/