/* Mobile-friendly styles small screen*/
@media only screen and (max-width: 600px) {
    #chartHeader {
        text-align: center; /* Center align the header text */
        margin-bottom: 20px; /* Add spacing below the header */
    }

    #chartContainer {
        text-align: center;
    }

    #chartHeader h2 {
        margin: 0 auto;
    }

    #dropdownContainer {
        display: flex;
        flex-direction: column; /* Stack dropdown elements vertically on smaller screens */
        align-items: center;
    }

    #dropdownContainer label, #dropdownContainer select, #dropdownContainer button {
        width: 100%; /* Make dropdown elements full-width on smaller screens */
        margin-bottom: 10px; /* Add spacing between elements */
    }
    .tooltip-text {
        display: none;
        position: absolute;
        bottom: -20px;
        background-color: #fff;
        color: #000;
        border-radius: 5px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        white-space: pre-line; /* Allow line breaks */
        width: 100vw; /* Set width to 100% of viewport width on small screens */
        left: -70vw; /* Adjust left to start from the left edge */
        transform: none; /* Remove the horizontal translation */
    }
    /* Set 100% width for buttons on small screens */
    .action-button, .delete-button, .updatechart-button {
        width: 100%;
        margin-bottom: 10px;
    }
    .table-container {
        overflow-x: auto;
        max-width: 100%; /* Set the desired maximum width */
    }
}

/* Larger screens */
@media only screen and (min-width: 601px) {
    #dropdownContainer {
        flex-direction: row; /* Display dropdown elements in a row on larger screens */
        justify-content: center; /* Center items horizontally on larger screens */
        align-items: center; /* Center items vertically on larger screens */
    }

    #dropdownContainer label, #dropdownContainer select {
        width: auto; /* Reset width for labels and selects on larger screens */
        margin-bottom: 0; /* Remove margin for labels and selects on larger screens */
    }

    #dropdownContainer button, .action-button, .updatechart-button {
        width: auto; /* Reset width for buttons on larger screens */
    }
    .tooltip-text {
        display: none;
        position: absolute;
        bottom: -20px;
        left: 50%;
        transform: translateX(-50%);
        background-color: #fff;
        color: #000;
        padding: 10px;
        border-radius: 5px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        white-space: pre-wrap; /* Allow line breaks and respect whitespace */
        width: 200px; /* Set a default width */
    }
    
}

.tooltip-icon {
    display: inline-block;
    margin-right: 5px; /* Adjust spacing between icon and text */
    cursor: help;
}



/* Style the table as needed */
#qrcodes {
    border-collapse: collapse;
    width: 100%;
    /* Add other table styles as needed */
}


/* Apply styles to both table headers (th) and table data cells (td) */
#qrcodes th, #qrcodes td {
    border: 1px solid lightblue; /* Use 'solid' for border style */
    padding: 8px;
    text-align: left;
}

/* Style only table headers (th) */
#qrcodes th {
    background-color: #f2f2f2;
    white-space: nowrap; /* Prevent line break */
}

/* Center the button container vertically and horizontally */
.button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

/* Style for action buttons */
.action-button, .delete-button, .updatechart-button {
    background-color: #D82818;
    color: white;
    padding: 10px 20px; /* Adjust padding as needed */
    border: none;
    cursor: pointer;
    font-size: 16px;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    margin-right: 10px; /* Add margin to create space between buttons */
}

.action-button:last-child {
    margin-right: 0; /* Remove margin from the last button */
}

.action-button:hover {
    background-color: #FF0000; /* Change the background color on hover if desired */
}

dialog {
    border: none;
    border-radius: 5px;
}

dialog img {
    max-width: 100%;
}

/* Additional styles as needed */


/* Additional mobile-friendly adjustments */
#chartHeader {
    text-align: center; /* Center align the header text */
    margin-bottom: 20px; /* Add spacing below the header */
}
#chartContainer {
        text-align: center;
    }

.tooltip-container {
    position: relative;
    display: inline-block;
}

.tooltip-icon {
    cursor: pointer;
}



.tooltip-container:hover .tooltip-text {
    display: block;
}
.qr-template-selected {
    border: 2px solid green; /* Adjust the border size and color as needed */
    box-shadow: 0 0 5px green; /* Optional: adds a glow effect */
}
.template-option.selected {
    border: 2px solid green;
}
.templates-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Adjust the gap between items as needed */
    justify-content: center; /* Center the items horizontally */
    align-items: center; /* Align items vertically */
}

.qr-template {
    cursor: pointer; /* Optional: Change cursor on hover */
    transition: transform 0.2s; /* Optional: Adds a simple animation on hover */
}

.qr-template img {
    max-width: 100px; /* Adjust based on desired size */
    max-height: 100px; /* Adjust based on desired size */
    width: auto; /* Maintain aspect ratio */
    height: auto; /* Maintain aspect ratio */
    border-radius: 5px; /* Optional: Adds rounded corners to images */
}

.qr-template:hover {
    transform: scale(1.05); /* Optional: Slightly enlarge template images on hover */
}

/* Additional styles specific to your design preferences */
#requests-scans,
#unique-visitors {
    color: #ff6666; /* Softer red color */
}

/* Additional styles for better spacing and readability */
#dropdownContainer label,
#dropdownContainer select,
#dropdownContainer button,
.tooltip-text {
    margin: 5px;
}
.dropdown {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.dropdown-content {
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-item {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid #ddd;
    display: flex;
    align-items: center;
}

.dropdown-item:last-child {
    border-bottom: none;
}

.dropdown-item img {
    margin-right: 10px;
}

.dropdown-item:hover {
    background-color: #f1f1f1;
}

.dropdown-selected {
    padding: 10px;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
}