@tailwind utilities;

body, html {
    height: 100%;
    margin: 0;
    font-family: 'Santral', sans-serif;
}

/* Styles from your login.css */
body {
    padding: 0;
}

.login-container {
    display: flex;
    min-height: 100vh;
    overflow: hidden;
}

.image-container {
    width: 75%;
    display: none; /* Hidden by default, shown via media query */
}

@media (min-width: 768px) { /* md: in Tailwind */
    .image-container {
        display: flex;
        align-items: stretch; /* Changed from flex to stretch to match behavior */
    }
}

.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-height: 100vh;
}

.form-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%; /* Takes full width on small screens */
    gap: 2vh;
    padding: 5%;
}

@media (min-width: 768px) { /* md: in Tailwind */
    .form-container {
        width: 25%; /* On medium screens and up */
        min-width: 300px; /* Ensures a minimum width */
    }
}


.form-container h6 {
    margin-top: 0.5rem; /* mt-2 in Tailwind */
    font-size: 1.1rem; /* Consider text-lg or text-xl in Tailwind */
    /* text-gray-700 (example, choose color) */
}

.logo {
    max-width: 100%;
    /* height: auto; (Tailwind default for img) */
}

.login-form {
    width: 100%;
}

.form-group {
    margin-bottom: 1rem; /* mb-4 in Tailwind */
}

.form-control {
    height: 6vh; /* May need adjustment or use padding like Tailwind inputs */
    width: 100%; /* w-full in Tailwind */
    box-sizing: border-box;
    padding: 3%;
    font-size: 0.9rem;
}

.form-button {
    margin-top: 1rem; /* mt-4 in Tailwind */
    text-align: center;
}

.login-button {
    color: white; /* text-white */
    background-color: #E52329; /* bg-red-600 (approx) */
    /* width: 15vw; */ /* Consider responsive width classes or fixed width */
    min-width: 120px;
    height: 4vh; /* May need adjustment or use padding */
    min-height: 30px;
    border: none; /* border-none */
    border-radius: 50px; /* rounded-full */
    cursor: pointer; /* cursor-pointer */
    padding: 0.5rem 1.5rem;
    font-size: 0.875rem; /* text-sm */
    font-weight: 600; /* font-semibold */
}

.alert {
    width: 100%; /* w-full */
    margin-top: 1rem; /* mt-4 */
    text-align: center;
    padding: 10px; /* p-2.5 (approx) */
    margin-bottom: 15px; /* mb-4 (approx) */
    border: 1px solid transparent;
    border-radius: 4px; /* rounded-sm or rounded */
}
.alert-danger {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}
.alert-info {
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
}
.alert-success {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}

.disclaimer {
    text-align: center;
    margin-top: 1rem; /* mt-4 */
    font-size: 0.875rem; /* text-sm */
    /* color: #6B7280; // text-gray-500 (example) */
}

.invalid-feedback {
    color: #a94442; /* text-red-700 (approx) */
    /* display: none; // Handled by Tailwind's hidden or direct rendering logic */
    width: 100%; /* w-full */
    margin-top: 0.25rem; /* mt-1 */
    font-size: 80%; /* text-xs (approx) */
}

.form-control.is-invalid {
    border-color: #a94442 !important; /* Ensure it overrides Tailwind if needed */
    /* Tailwind: border-red-500 */
}
.form-control.is-invalid ~ .invalid-feedback,
.invalid-feedback[style*="display: block"] /* For the checkbox error */
{
    display: block;
}

/* Ensure checkbox and its label are aligned and spaced */
.checkbox {
    display: flex;
    align-items: center;
    margin-top: 1rem; /* mt-4 */
    margin-bottom: 1rem; /* mb-4 */
}
.checkbox input[type="checkbox"] {
    margin-right: 0.5rem; /* mr-2 */
}
.checkbox label {
    font-size: 0.875rem; /* text-sm */
    /* color: #374151; // text-gray-700 (example) */
}
.checkbox label a {
    color: #E52329; /* text-red-600 (approx) */
    text-decoration: underline; /* underline */
}

/* Additional style for sr-only if not provided by Tailwind base */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}