/* ==========================================================================
   FORM STYLES - LOGIN/REGISTER FORMS
   ========================================================================== */

/* Form field containers */
.form-field {
    margin-bottom: 2em;
}

/* Form labels */
.form-label {
    display: block;
    margin-bottom: 0.5em;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.075em;
    color: inherit;
}

/* Form field subtext */
.form-label-subtext {
    font-size: 0.85em;
    font-weight: 300;
    text-transform: none !important;
}

/* Checkbox Styling */
input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    margin-right: 8px !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    -webkit-appearance: checkbox !important;
    -moz-appearance: checkbox !important;
    appearance: checkbox !important;
    vertical-align: middle;
}

/* Checkbox styling */
.checkbox {
    margin-bottom: 1.5em;
}

.checkbox input[type="checkbox"] {
    margin-right: 0.5em;
    transform: scale(1.2);
}

.checkbox label {
    display: inline !important;
    margin-bottom: 0 !important;
    cursor: pointer;
    vertical-align: center;
    /*font-weight: 400;*/
}

/* Ensure checkbox labels don't get form label styling */
.checkbox label strong {
    /*font-weight: 400;*/
    text-transform: none;
    letter-spacing: normal;
    font-size: 1em;
    color: inherit;
    vertical-align: center;
}

/* Form error messages */
.form-error {
    color: #dc3545;
    font-size: 0.9em;
    margin: 0.5em 0 0 0;
}

/* Style for the Django error lists (in contact us style)*/
.errorlist {
    color: red;
    list-style: none;
    padding: 0;
    margin: 5px 0 10px 0;
    font-size: 14px;
}

.errorlist li {
    margin: 2px 0;
}

/* Style form fields that have the 'error' class (from your __init__ method) */
input.error,
select.error,
textarea.error {
    border: 1px solid red;
    background-color: #ffe6e6; /* Optional: light red background */
}

/* Optional: Style the labels of fields with errors */
label:has(+ input.error),
label:has(+ select.error),
label:has(+ textarea.error) {
    color: red;
}

.form-submit {
    text-align: center;
    margin-top: 2em;
    margin-bottom: 3em;
}

.form-submit ul {
    list-style-type: none; /* Remove bullet points from the list */
    padding: 0; /* Remove default padding */
    margin: 0; /* Remove default margin */
}

.form-submit li {
    display: inline-block; /* Make list items inline-block to allow horizontal layout */
    margin-right: 1em; /* Add some space between buttons */
}

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

.performance-date-form {
    border: 1px solid #ddd;
    padding: 15px;
    margin-bottom: 15px;
}


    /* ==========================================================================
       FORM INPUT STYLES - INPUT FIELDS, TEXTAREAS, AND SELECT DROPDOWNS
       ========================================================================== */

    /* Base form input styling for text inputs, textareas, and select dropdowns */
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="password"],
.form-field input[type="username"],
.form-field input[type="date"],
.form-field input[type="datetime-local"],
.form-field input[type="number"],
.form-field textarea,
.form-field select {
    width: 100%;
    padding: 0.75em 1em;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1em;
    font-family: inherit;
    background: #fff;
    color: inherit;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

    /* Focus states */
    .form-field input[type="text"]:focus,
    .form-field input[type="email"]:focus,
    .form-field input[type="password"]:focus,
    .form-field input[type="username"]:focus,
    .form-field input[type="date"]:focus,
    .form-field input[type="datetime-local"]:focus,
    .form-field input[type="number"]:focus,
    .form-field textarea:focus,
    .form-field select:focus {
        outline: none;
        border-color: #83d3c9;
        box-shadow: 0 0 0 4px rgba(131, 211, 201, 0.2);
    }

    /* Select dropdown specific styling */
    .form-field select {
        cursor: pointer;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right 0.7rem center;
        background-size: 1em;
        padding-right: 2.5em;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

    /* Placeholder text styling */
    .form-field input::placeholder,
    .form-field textarea::placeholder {
        color: #bab9b9; /* Change this to your desired placeholder text color */
        opacity: 1; /* Firefox (for older versions) */
    }



    /* Select dropdown options */
    .form-field select option {
        padding: 0.5em;
        background: #fff;
        color: inherit;
    }

    /* Disabled state */
    .form-field input[type="text"]:disabled,
    .form-field input[type="email"]:disabled,
    .form-field input[type="password"]:disabled,
    .form-field input[type="username"]:disabled,
    .form-field input[type="date"]:disabled,
    .form-field input[type="datetime-local"]:disabled,
    .form-field input[type="number"]:disabled,
    .form-field textarea:disabled,
    .form-field select:disabled {
        background-color: #f8f9fa;
        color: #6c757d;
        cursor: not-allowed;
    }

    /* Readonly state */
    .form-field input[type="text"]:read-only,
    .form-field input[type="email"]:read-only,
    .form-field input[type="password"]:read-only,
    .form-field input[type="username"]:read-only,
    .form-field input[type="date"]:read-only,
    .form-field input[type="datetime-local"]:read-only,
    .form-field input[type="number"]:read-only,
    .form-field textarea:read-only {
        background-color: #f8f9fa;
        color: #6c757d;
        cursor: not-allowed;
    }

    /* Error state */
    .form-field.has-error input[type="text"],
    .form-field.has-error input[type="email"],
    .form-field.has-error input[type="password"],
    .form-field.has-error input[type="username"],
    .form-field.has-error input[type="date"],
    .form-field.has-error input[type="datetime-local"],
    .form-field.has-error input[type="number"],
    .form-field.has-error textarea,
    .form-field.has-error select {
        border-color: #dc3545;
    }

    .form-field.has-error input[type="text"]:focus,
    .form-field.has-error input[type="email"]:focus,
    .form-field.has-error input[type="password"]:focus,
    .form-field.has-error input[type="username"]:focus,
    .form-field.has-error input[type="date"]:focus,
    .form-field.has-error input[type="datetime-local"]:focus,
    .form-field.has-error input[type="number"]:focus,
    .form-field.has-error textarea:focus,
    .form-field.has-error select:focus {
        border-color: #dc3545;
        box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.2);
    }

    /* Responsive adjustments for form inputs */
    @media screen and (max-width: 736px) {
        .form-field input[type="text"],
        .form-field input[type="email"],
        .form-field input[type="password"],
        .form-field input[type="username"],
        .form-field input[type="date"],
        .form-field input[type="datetime-local"],
        .form-field input[type="number"],
        .form-field textarea,
        .form-field select {
            padding: 0.6em 0.8em;
            font-size: 0.95em;
        }

        .form-field select {
            padding-right: 2.2em;
            background-size: 0.9em;
        }
    }