/* Used at the top of each page */

.tl-page-banner {
    background-color: rgb(233, 233, 233);
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 1.5em;
    font-weight: bold;
}

/* Used in ComplaintForm.razor */

.tl-icon-container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 100%;
    margin-left: 1rem;
    margin-right: 1rem
}

.tl-selected {
    background-color: #ddf0eb; 
}

/* StatisticsTable.razor */

.tl-styled-table {
    border-collapse: collapse; /* Removes the double borders */
    width: 95%; 
}

.tl-styled-table th, .tl-styled-table td {
    padding: 3px; /* Adds space between cells */
    border: 1px solid #ddd; /* Adds borders */
    text-align: center; /* Aligns text to the left */
}

/* Used in the Location.razor */

.tl-input-normal {
    color: black;
}

.tl-input-error {
    color: red;
}
.tl-text-col {
    width: 25ch; 
    margin-top: 10px;    
}.tl-var-col {
    width: 25ch; 
    margin-top: 25px;    
}
.tl-input-col {
    width: 25ch; 
    margin-top: 5px;    
}
.tl-input-row {
    display: flex;
    align-items: center;
}

/* TooLoud Buttons */

/* Base class for all buttons */
.tl-btn {
    align-items: center; /* Vertically center content in both columns */
    border-radius: 12px;
    background-color: rgb(250, 250, 250);
    border: 2px solid black;
    color: black;
    padding: 10px; /* Adjust padding for better spacing */
    text-decoration: none;
    font-size: 1rem; /* Adjust font size */
    margin: 4px 2px;
    transition-duration: 0.2s;
    cursor: pointer;
    margin-bottom: 4px;
    width: 100%; /* Make the button full width */

    /* On non-touch devices, button format when the mouse is hovering over the button */
    &:hover {
        background-color: rgb(200, 228, 245);
        border: grey solid 2px;
        color: black;
        font-size: 1rem;
        font-weight: bold;
    }
    /* Reduce button functionality when button is disabled */
    &:disabled {
        pointer-events: none; /* Prevent interaction */
        background-color: #ccc; /* Light gray background for disabled state */
        color: #666; /* Gray text for disabled state */
        cursor: not-allowed; /* Show a "not-allowed" cursor */
        border-color: #aaa; /* Optional: lighter border for disabled state */
    }
    /* Remove hover and focus styles for disabled buttons */
    &:disabled:hover,
    &:disabled:focus {
        outline: none; /* Remove focus outline */
        box-shadow: none; /* Remove any hover/focus shadow */
    }
    /* Add active state for better feedback when clicking */
    &:active {
        transform: scale(0.9); /* Slightly shrink the button for a "pressed" effect */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Optional: Add a shadow for the pressed state */
    }
}
/* Any button that doesn't have an icon */
.tl-btn.std-btn {
    display: flex;
    justify-content: center; /* Center the button horizontally */
}
/* Index page buttons (or any button with an icon on the left plus text) */
.tl-btn.icon-btn {
    display: grid; /* Use CSS Grid for layout */
    grid-template-columns: auto 1fr; /* Two columns: auto for icon, flexible for text */
    gap: 10px; /* Space between the icon and text */
}

/* Used inside an icon the button text to position the icon */
.icon-col {
    display: flex;
    justify-content: center; /* Center the icon horizontally */
    align-items: center; /* Center the icon vertically */
}
/* Used inside an icon the button text to position the text */
.text-col {
    display: flex;
    flex-direction: column; /* Stack text vertically */
    justify-content: center; /* Center text vertically */
    align-items: center; 
    text-align: left; /* Ensure text is left-aligned */
}


.tl-back-btn {
    border-radius: 10px;
    background-color: #008CBA;
    border: none;
    color: white;
    padding: 4px 4px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 2px 2px;
    transition-duration: 0.4s;
    cursor: pointer;
    
    &:hover {
        background-color: lightskyblue;
        border: grey solid 1px;
        color: black;
    }
}

/* Help styling */

.tl-helpbox {
    position: fixed;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -40%);
    width: 80%;
    height: 4em;
    background-color: white;
    color: black;
    border: 1px solid black;
    text-align: center;
    z-index: 1000;
    overflow: auto;
    font-size: 1rem;
}

/* Used in LocationStatsArray.razor */

.tl-styled-table {
    border-collapse: collapse;
    width: 100%;
}

.tl-styled-table th, .tl-styled-table td {
    padding: 8px;
    border: 1px solid #ddd;
    text-align: center;
}

/* Used in SetDefaultLocation.razor */
.tl-map-container {
    height: 50vh;
    width: 100%;
    border: none;
}