/* basic classes for the core application */
/* Reset some default styles */
html {
    font-size: 14px; /* Base font size */
}

body {
    font-family: sans-serif;
    background-color: #f4f4f4;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    &:has(.backbone-page) {
        font-size: 0.9em; /* Smaller font size for Backbone pages */
        .container {
            max-width: 100%; /* Full width for Backbone pages */
        }
    }
    &:has(.new_volunteer, .backbone-page, .login-form) {
        .banner {
            display: none; /* Hides the banner when form is present */
        }
    } /* else show banner and hide separator */
}

.banner {
    height: auto;
    background: url("/assets/img/banner.png") top center no-repeat;
    background-size: contain; /* Ensures the banner covers the entire area */
    padding-top: 13.63%; /* Aspect ratio for the banner */
    @media (max-width: 800px) {
        background: url("/assets/img/banner-mobile.png") top center no-repeat; /* Mobile banner */
        background-size: contain; /* Ensures the banner covers the entire area */
        padding-top: 35.71%; /* Aspect ratio for the banner */
    }

}



nav {
    height: 81px;
    display: flex;
    justify-content: space-around;
    /* align icon on the left and nav items on the right */
    align-items: center; /* Center items vertically */
    background: #13084A; /* Fallback for browsers that don't support gradients */
    color: #fff;
    a {
        margin-right: 15px;
        text-decoration: none;
        color: #333;
        display: inline-block;
    }

    .nav-item {
        padding: 10px 15px;
        border-radius: 4px;
        background-color: #e9ecef; /* Light background for nav items */
        color: #333;
        flex: 0 0 auto; /* Prevents nav items from stretching */

        &:hover {
            background-color: #007bff; /* Change background on hover */
            color: white; /* Change text color on hover */
        }
    }

    .nav-logo {
        height: 81px;
        z-index: 2;
    }

    @media (max-width: 800px) {
        flex-direction: column;
        height: auto;
        .nav-logo, .nav-item {
            margin: 5px 0; /* Adjust margin for smaller screens */
            text-align: center; /* Center text on smaller screens */
            width: 100%; /* Full width for nav items */
            height: auto;
            padding: 10px 0;
        }
    }
}

h1 {
    color: #333;
}

.container {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    max-width: 1200px; /* Limit container width for readability */
    margin: 0 auto; /* Center the container */
}

.page-title {
    display: block;
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
}

/* Shared form patterns */
.new_volunteer,
.login-form,
form {
    display: flex;
    flex-direction: column; /* Stacks the form inputs vertically */
    gap: 15px; /* Spacing between form input groups */
    margin: 0 auto; /* Center the form */
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #fff;
}

.input,
.input,
form .form-group {
    display: flex;
    flex-direction: column; /* Label on top, input below */
    gap: 5px; /* Spacing between label and input */
}

.input label,
.input label,
form .form-group label {
    font-weight: bold;
    margin-bottom: 5px; /* Space between label and input field */
}

.input input[type="text"],
.input input[type="email"],
.input input[type="tel"],
.input textarea,
.input input[type="file"],
.input input[type="text"],
.input input[type="password"],
form .form-group input[type="text"],
form .form-group input[type="email"],
form .form-group input[type="tel"],
form .form-group input[type="password"],
form .form-group textarea,
form .form-group input[type="file"] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

.input textarea,
form .form-group textarea {
    resize: vertical; /* Allows vertical resizing only */
    min-height: 150px; /* Minimum height for textareas */
}

.form-actions {
    display: flex;
    justify-content: flex-end; /* Aligns the button to the right */
    margin-top: 20px;
}

.btn {
    padding: 10px 20px;
    background-color: #007bff; /* Example button color */
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
}

.btn:hover {
    background-color: #0056b3;
}

.pane {
    display: flex;
    flex-direction: column; /* Stacks items vertically */
    gap: 15px; /* Spacing between pane items */

    .pane-header {
        font-weight: bold;
        color: #333;
        margin-bottom: 10px; /* Space below the header */
    }

    &.full-width {
        width: 100%; /* Full width for specific elements */
    }
}


/* General Form Styling */
.new_volunteer {
    max-width: 600px; /* Limit form width for readability */

    img {
        width: 100px; /* Fixed width for profile image */
        height: 100px; /* Fixed height for profile image */
        border-radius: 50%; /* Makes the image circular */
        object-fit: cover; /* Ensures the image covers the area without distortion */
        margin-bottom: 20px; /* Space below the image */
    }
    /* Styling for each input group */
    .input {
        margin-bottom: 40px; /* Space between input groups */
    }



    /* Hint text styling */
    .hint, .hint-text {
        font-size: 0.85em;
        color: #666;
        margin-top: 5px;
    }

    /* Specific styling for checkbox and radio groups */
    .checkbox-options,
    .radio-options {
        display: flex;
        flex-wrap: wrap; /* Allows items to wrap to the next line */
        gap: 10px; /* Spacing between individual checkboxes/radios */
        margin-top: 5px;
    }

    .checkbox label,
    .radio label {
        display: flex; /* Aligns checkbox/radio input with its label */
        align-items: center;
        gap: 5px; /* Space between the actual input and its text */
        font-weight: normal; /* Override bold from .input label */
        &:hover {
            cursor: pointer; /* Change cursor to pointer on hover */
        }
    }

    /* Styling for the single checkbox (terms accepted) */
    .checkbox-alone label {
        display: flex;
        align-items: center;
        gap: 5px;
        font-weight: normal;
    }

    abbr {
        text-decoration: none; /* Removes default underline */
        color: orangered;
        cursor: help; /* Changes cursor to indicate help text */
        &:hover {
            color: red; /* Changes color on hover */
            text-decoration: underline; /* Underlines on hover for emphasis */
        }
    }
}

.team-badge {
    display: inline-block;
    padding: 5px 10px;
    background-color: rgba(98, 102, 108, 0.75); /* Example badge color */
    color: white;
    border-radius: 4px;
    font-size: 0.9em; /* Slightly smaller font size for badges */
    margin-bottom: 10px; /* Space below the badge */
}

.teams-list{
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap to the next line */
    margin: 20px auto;
    gap: 1%;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 0 20px;
    .team-item {
        flex: 0 0 30%;
    }
}

/* Login form style */
.login-form {
    max-width: 400px; /* Limit form width for readability */

    .form-actions {
        flex-direction: column;
        align-items: center;
    }
}

.login-error {
    color: red;
    text-align: center;
    margin-top: 10px;
}

/* Backbone page styles */
.backbone-page {
    display: flex;
    flex-direction: row; /* Stacks the content vertically */
    align-items: flex-start;   /* Aligns items to the top */
    gap: 20px; /* Spacing between sections */
    padding: 20px;
    background-color: #fff;
    flex-wrap: wrap;

    h1 {
        color: #333;
        margin-bottom: 20px; /* Space below the header */
    }

    .pane {
        width: 45%; /* Sets a fixed width for the pane */

        &.full-width {
            width: 100%; /* Full width for specific elements */
        }
        .add-new {
            display: flex;
            justify-content: flex-end; /* Aligns the button to the right */
            margin-top: 10px;
        }

        @media (max-width: 800px) {
            flex-direction: column;
            width: 100%; /* Full width on smaller screens */
        }

    }

    table {
        width: 100%;
        border-collapse: collapse; /* Removes space between table cells */
        th, td {
            padding: 5px;
            border: 1px solid #ddd; /* Adds a border to table cells */
            text-align: start; /* Aligns text to the left */
        }
        th {
            background-color: #f4f4f4; /* Light background for header */
            font-weight: bold; /* Makes header text bold */
        }
        tr
        {
            &:nth-child(even) {
                background-color: #f9f9f9; /* Zebra striping for rows */
            }
            &:hover {
                background-color: #f1f1f1; /* Highlight row on hover */
            }
        }
        .vol-mugshot {
            width: 30px; /* Fixed width for mugshot */
            height: 30px; /* Fixed height for mugshot */
            border-radius: 50%; /* Makes the image circular */
            object-fit: cover; /* Ensures the image covers the area without distortion */


        }

        @media (max-width: 800px) {
            font-size: 0.8em;
        }
    }

    form {
        max-width: 900px; /* Limit form width for readability */
        width: 90vw;

        @media (max-width: 800px) {
            width: 100%; /* Full width on smaller screens */
            padding: 0.5rem;
        }
    }
}

.profile-page {
    display: flex;
    flex-direction: row; /* Stacks the content vertically */
    align-items: flex-start;   /* Aligns items to the top */
    gap: 3.5%; /* Spacing between sections */
    padding: 20px;
    background-color: #fff;
    flex-wrap: wrap;

    .pane {

        width: 47%; /* Sets a fixed width for the pane */
        padding: 0.5rem;
        margin: 0.5rem 0;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow for depth */
        @media (max-width: 800px) {
            width: 100%; /* Full width on smaller screens */
        }

        &.full-width {
            width: 100%; /* Full width for specific elements */
        }


        .profile-header {
            display: flex;
            flex-direction: row;
            align-items: center; /* Center items vertically */
            gap: 20px; /* Space between image and text */
            margin-bottom: 20px; /* Space below the header */
            .profile-image {
                width: 100px; /* Fixed width for profile image */
                height: 100px; /* Fixed height for profile image */
                border-radius: 50%; /* Makes the image circular */
                object-fit: cover; /* Ensures the image covers the area without distortion */
            }
            .profile-info {
                h2 {
                    margin: 0; /* Removes default margin */
                    color: #333;
                }
                p {
                    margin: 5px 0; /* Space between paragraphs */
                    color: #666;
                }
            }
        }
    }
    form {
        max-width: 900px; /* Limit form width for readability */
        width: 90vw;

        @media (max-width: 800px) {
            width: 100%; /* Full width on smaller screens */
            padding: 0.5rem;
        }
    }
}
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
    cursor: default;
}

.tooltiptext {
    visibility: hidden;
    min-width: 130px;
    background-color: rgba(0, 0, 0, 0.75);
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

.small {
    font-size: 0.8em; /* Smaller font size */
}
.green {
    color: green; /* Green text color */
}
.light-green {
    color: darkseagreen; /* Light green text color */
}
.red {
    color: red; /* Red text color */
}

.bg-green {
    background-color: darkseagreen; /* Green background color */
    color: white; /* White text for contrast */
    padding: 5px 10px; /* Some padding for better appearance */
    border-radius: 4px; /* Rounded corners */
}

.bg-red {
    background-color: red; /* Red background color */
    color: white; /* White text for contrast */
    padding: 5px 10px; /* Some padding for better appearance */
    border-radius: 4px; /* Rounded corners */
}

.bg-yellow {
    background-color: yellow; /* Yellow background color */
    color: black; /* Black text for contrast */
    padding: 5px 10px; /* Some padding for better appearance */
    border-radius: 4px; /* Rounded corners */
}

.bg-lightblue {
    background-color: lightblue; /* Light blue background color */
    color: black; /* Black text for contrast */
    padding: 5px 10px; /* Some padding for better appearance */
    border-radius: 4px; /* Rounded corners */
}

.border-green {
    border: 2px solid darkseagreen; /* Green border */
    padding: 5px; /* Some padding for better appearance */
    border-radius: 4px; /* Rounded corners */
}
.border-red {
    border: 2px solid red; /* Red border */
    padding: 5px; /* Some padding for better appearance */
    border-radius: 4px; /* Rounded corners */
}
.border-yellow {
    border: 2px solid yellow; /* Yellow border */
    padding: 5px; /* Some padding for better appearance */
    border-radius: 4px; /* Rounded corners */
}
.border-lightblue {
    border: 2px solid lightblue; /* Light blue border */
    padding: 5px; /* Some padding for better appearance */
    border-radius: 4px; /* Rounded corners */
}

/* Password Strength Indicator Styles */
.password-strength-indicator {
    margin-top: 8px;
    margin-bottom: 12px;
}

.password-strength-indicator .strength-bar {
    height: 4px;
    background: #e0e0e0;
    border-radius: 2px;
    margin-bottom: 8px;
    overflow: hidden;
}

.password-strength-indicator .strength-bar-fill {
    height: 100%;
    width: 0%;
    transition: all 0.3s ease;
    border-radius: 2px;
}

.password-strength-indicator .strength-requirements {
    font-size: 0.85em;
    color: #666;
    line-height: 1.6;
}

.password-strength-indicator .requirement {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
    transition: color 0.3s ease;
}

.password-strength-indicator .requirement-icon {
    display: inline-block;
    width: 18px;
    margin-right: 6px;
    font-weight: bold;
}

.password-strength-indicator .requirement-text {
    flex: 1;
}

.password-strength-indicator .strength-text {
    font-size: 0.9em;
    margin-top: 8px;
    font-weight: bold;
    text-align: center;
}