/* assets/styles.css */
html, body {
    /* background-color: rgb(220, 221, 132); */
    /* background-color: rgb(225, 230, 165); */
    /* background-color: #adb0b6; */
     background-color: #a8b0b1;
     /* background-color: #545657; */
    /* background-color: #f80707; */
    /* background-color: #A8E6CF; */
    /* background-color: #fab7b1; */
     /* background-color: "lightgrey"; */
    /* background-color: rgb(5, 5, 100); */
    /*height: 100%;*/
    height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0;
    overflow-y: hidden; /* Prevents vertical scrolling */
    overflow-x: hidden; /* Prevents horizontal scrolling */
}

.container {
    height: 100vh;
    width: 100vw; /* Set the container width globally */
    max-width: 100%; /* Prevent exceeding the viewport width */
    box-sizing: border-box; /* Include padding and border in the width calculation */
    margin: 0 auto; /* Center content */
    /*padding: 5px; */
    background-color: #a8b0b1;
    
}

/* .custom-tooltip .tooltip-inner targets the inner part of the tooltip.
transform: translate(-50%, -20px); moves the tooltip slightly to the left and up, aligning it with the top-left of the icon.
left: 0; aligns it to the left edge of the icon. */

.custom-tooltip .tooltip-inner {
    /*width: 500px;*/
    /*transform: translate(-50%, -1px); /* Adjust positioning */
    transform: translate(-1px, -5%); /* Adjust positioning */
    left: 0;  /* Align to the left */

    background-color: #f0f0f0;  /* Replace with your desired color */
    
   
    color: #000000; /* Optional: set text color for better contrast */
    border-radius: 4px; /* Optional: add rounded corners */
    padding: 2px; /* Optional: adjust padding for spacing */
    /*height:300px;*/
    min-width:20rem;
    max-width:100rem;
    padding-left: 1rem;
    padding-right: 0.2rem;
    text-align: left;
    margin-top: 500px;
    
}

/* --------------------- */

/* CSS file (assets/styles.css) */
.intro-page-bg {
    /* position: relative; */
    position: absolute;
    /* top : 10; */
    bottom : 0;
    left: 0;
    right: 0;
    width: 100vw;
    height: 75vh; /* Full viewport height */
    background: url('/assets/ipl-bg-img.png') no-repeat center center fixed;
    background-size: cover;
    /* background-size: contain; */
    opacity: 1; /* Adjust opacity here */
    overflow: hidden; /* Prevents any overflow */
    z-index: 0; /* Background layer */
    /* background-size: contain; */
    /* object-fit: contain; */
        /* Scales the image to fit without cropping */
    /* padding-top: 20px; */
            /* Adds space at the top */
    /* padding-bottom: 20px; */
        /* Adds space at the bottom */
   /* box-sizing: border-box;  */
    /* Ensures padding doesn’t cause overflow*/
   background-position: center 30%;
    /*Adjust vertical offset (20%) to shift down */

}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.9); /* White overlay with 70% opacity */
    z-index: 1;
}


/* Scrollbar track (background) */
::-webkit-scrollbar {
    width: 10px; /* Set width for vertical scrollbars */
    height: 12px; /* Set height for horizontal scrollbars */
}

/* Scrollbar background (track) */
::-webkit-scrollbar-track {

    background: #a8b0b1
    /* #f0f0f0; /* Background color */
}

/* Scrollbar thumb (the draggable part) */
::-webkit-scrollbar-thumb {
    background-color: #888; /* Thumb color */
    /*border-radius: 6px; /* Round edges */
}

/* Scrollbar thumb hover effect */
::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Darker thumb color on hover */
}
  

.ag-theme-alpine {
    
    --ag-header-height: 30px;
    --ag-header-foreground-color: white;
    --ag-header-background-color: rgb(11, 103, 240);
    --ag-header-cell-hover-background-color: rgb(80, 40, 140);
    --ag-header-cell-moving-background-color: rgb(80, 40, 140);

    /*--ag-font-size: 12px;
    --ag-weight: bold;*/
    padding: 4px;
    text-align: left; /* Center-align content */
    justify-content: left !important;
    --ag-data-color: black;

    --ag-odd-row-background-color: lightgrey;
    min-height: 20px; 

    
}

.ag-theme-alpine .ag-header-cell {
    font-size: 10px;
    font-weight: bold;
    padding: 2px;
    text-align: left; /* Center-align content */
    justify-content: left !important;

    
}
.ag-theme-alpine .ag-header-cell-text {
    visibility: visible !important;
    opacity: 1 !important;
    text-align: left; /* Center-align content */
    justify-content: left !important;
}
.header-text-wrap {
    white-space: normal;
   /*white-space: nowrap;*/
    word-wrap: break-word;
    /*text-align: center; /* Optional: Center-align the header text */
    background-color: #4e9eee;
    --ag-header-background-color: #4e9eee;
    --ag-header-cell-hover-background-color: rgb(80, 40, 140);
    --ag-header-cell-moving-background-color: rgb(109, 89, 139);
    min-height: 20px; 
    
    /* Adjust based on your needs */
}

.group-header-text-wrap {
    white-space: normal;
   /*white-space: nowrap;*/
    word-wrap: break-word;
    /*text-align: center; /* Optional: Center-align the header text */
    background-color: #cc90e4;
    --ag-header-background-color: #cc90e4;
    --ag-header-cell-hover-background-color: rgb(80, 40, 140);
    --ag-header-cell-moving-background-color: rgb(109, 89, 139);
    min-height: 20px; 
    
    /* Adjust based on your needs */
}
/* ##################################### */
/* Container for graphs */
/* Container for all page elements */
/* General page container styling */
/* General page styling */
/* General container styling for responsiveness */
.graph-container {
    width: 100%;
    margin: 10px auto;
    padding: 10px;
    overflow-x: hidden; /* Enable horizontal scrolling for wide content */
    overflow-y: hidden;
    box-sizing: border-box; /* Include padding and border in width calculation */

    max-width: 100%; /* Ensure the container doesn’t exceed the screen width */
    
}

/* Responsive styling for graphs */
.graph-container .dash-graph {
    height: auto; /* Let height adjust based on content */
    width: 100%; /* Full width for graphs */
    margin: 0 auto;
    overflow-x: clip; /* Prevent content overflow */
}

/* General container for tables */
.table-container {
    width: 100vw; /* Set the container width globally */
    /*max-width: 100%; /* Prevent exceeding the viewport width */
    overflow-x: auto; /* Enable horizontal scrolling */
    white-space: nowrap; /* Prevent table columns from wrapping */
    /*padding: 10px; */
    /*margin: 10px auto; */
    box-sizing: border-box;
    /*width: 100%; /* Ensure the table container fits the viewport width */
}

/* Plotly Table styling */
.table-container table {
    border-collapse: collapse; /* Clean border lines */
    margin: 0 auto; /* Center the table */
    width: 100vw; /* Use full width of the container */
    /*max-width: 100%; /* Prevent the table from exceeding the container width */
    white-space: nowrap; /* Prevent text wrapping in table cells */
    overflow-x: auto; /* Enable scrolling for content overflow */
}



/* Styling for Plotly Graph Objects (go.Table) */
.graph-container table {
    width: 100vw; /* Make table take up full width */
    border-collapse: collapse; /* Ensure proper spacing */
    margin: 0px auto; /* Center table */
    overflow-x: auto; /* Allow horizontal scrolling for wide tables */

    
}

/* Table cells (th for headers, td for data) */
.table-container table th, 
.table-container table td {
    text-align: center; /* Center-align content */
    padding: 4px; /* Add spacing for better readability */
    font-size: 12px; /* Set consistent font size */
    border: 1px solid #ddd; /* Light border for clarity */

    }

/* Header-specific styles */
.table-container table th {
    background-color: #007bff; /* Header background */
    color: white; /* Header text color */
    font-weight: bold;
}

/* Dropdown container styling */
.dash-dropdown {
    width: 100%;
    margin: 10px 0;
    display: flex;
    justify-content: center;
}

.dash-dropdown select {
    width: 250px; /* Fixed width for dropdown */
    padding: 8px; /* Padding for better usability */
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Responsive adjustments */
@media (max-width: 768px) {

    .table-container table th, 
    .table-container table td {
        font-size: 10px; /* Reduce font size for smaller screens */
        padding: 2px; /* Adjust padding for better fit */
    }    
    .table-container {
        padding: 2px;
    }
    
    .table-container table th {
        font-size: 10px; /* Reduce font size for smaller screens */
        padding: 2px; /* Adjust padding for better fit */
    }

    .graph-container .dash-graph {
        height: 50vh; /* Adjust graph height for smaller screens */
    }

    .dash-dropdown select {
        width: 200px; /* Smaller width for mobile screens */
        font-size: 12px;
    }

    /* .graph-container table th,
    .graph-container table td {
        font-size: 12px; /* Smaller font for table content */
    /*    padding: 5px; /* Reduce padding */
    /*} */
}

/* Page container for overall layout */
.page-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100vw;
    overflow: hidden; /* Prevent extra outer scrollbars */
}

/* Header and Footer */
.page-container .header,
.page-container .footer {
    background-color: #f8f9fa; /* Light gray for header/footer */
    text-align: center;
    padding: 10px;
    flex-shrink: 0;
}

/* Main Content */
.page-container .main-content {
    flex-grow: 1; /* Take up remaining space */
    overflow-y: auto; /* Scroll content vertically if necessary */
    padding: 10px;

}

/* Table Wrapper */
.table-wrapper {
    overflow-x: auto; /* Horizontal scroll for wide tables */
    white-space: nowrap; /* Prevent table wrapping */
    padding: 10px;
    margin: 0 auto;
    width: 100%; /* Full width */
}








@media (max-width: 768px) {
    .header-text-wrap {
        /*white-space: normal; /* Prevent wrapping on small screens */
        word-wrap: break-word;
        /*overflow: hidden;*/
        /*text-overflow: ellipsis*/
        min-width: 400px;
        max-width: 500px;
        /*min-height: 50px;
        /* white-space: inherit; */
    }
}

@media (max-width: 932px) {
    .header-text-wrap {
       /* white-space: normal; /* Prevent wrapping on small screens */
        word-wrap: break-word;
       /* overflow: hidden;
        text-overflow: ellipsis;*/
        min-width: 400px;
        max-width: 500px;
        /*min-height: 50px;*/
    }
}

@keyframes blinker {
    50% {
      opacity: 0;
    }
  }



  .fade-in {
    animation: fadeInPage 1.0s ease-in;
  }
  
  @keyframes fadeInPage {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  

  /* Show message only when loading spinner is visible */
/* Position the loading message inside the spinner overlay */
.dash-spinner::after {
    content: "Loading IPLtainment magic... 🏏 Please wait";
    position: fixed;
    top: calc(50% + 40px); /* Appears below the spinner */
    left: 50%;
    transform: translateX(-50%);
    z-index: 1001;
    font-size: 16px;
    font-weight: bold;
    color: darkblue;
    text-align: center;
    animation: fadeIn 1.4s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes fadeIn {
    from { opacity: 0.4; }
    to   { opacity: 1; }
}



  /* .fade-in {
    opacity: 0;
    animation: fadeInAnimation ease 1s;
    animation-fill-mode: forwards;
  }
  
  @keyframes fadeInAnimation {
    0% {
      opacity: 0;
      transform: translateY(10px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  } */
  

/* Content styling with higher z-index to stay above the background */
/* .content { */
    /* position: relative; */
    /* z-index: 2;  */
        /* Ensures content is above the background */
    /* padding: 20px; */
    /* text-align: center;  */
        /* Center-align the content */
    /* color: #333; Text color */
/* } */



/* Centered window for introduction text */
/* .intro-window { */
    /* position: absolute; */
    /* top: 50%; */
    /* left: 50%; */
    /* transform: translate(-50%, -50%);  */
        /* Centers the window */
    /* max-width: 600px; */
    /* padding: 30px; */
    /* background-color: rgba(255, 255, 255, 0.8);  */
        /* Semi-transparent background */
    /* border-radius: 8px; */
    /* box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2); */
    /* z-index: 2; */
    /* text-align: center; */
    /* color: #333; */
/* } */

/* Optional: additional centering to push the window vertically to the middle of the page */
/* .intro-page-bg { */
    /* display: flex; */
    /* align-items: center;
    justify-content: center; */
/* } */







/*# CSS
# In your external CSS file, add the following styles:
"""*/
/* .footer { */
    /* margin-top: auto;  */
        /*Push the footer to the bottom*/
     /* background-color: #f8f9fa; */
     /* Background color for the footer */
    /* text-align: right; */
        /* Center the text */
    /* padding: 10px 0; */
            /* Padding for top and bottom */
    /* height: 80px; */
            /* Fixed height for the footer */
/* } */

/* """" */

/* # CSS
""" */
/* .footer { */
    /*margin-top: auto;*/ /* Push the footer to the bottom */
    /*background-color: #f8f9fa;*/ /* Background color for the footer */
    /*text-align: center;*/ /* Center the text */
    /*height: 80px;*/ /* Fixed height for the footer */
    /* padding: 20px 0;*/ /* Custom padding for top and bottom */
    /*width: 100%;*/ /* Full width */
    /*box-shadow: 0 -2px 5px rgba(0,0,0,0.1);*/ /* Optional shadow for visual effect */
/* } */
/* "" */