/* Global Styles */
body {
    font-family: 'Inter', sans-serif;
    background-color: #FAFAFA; /* Light gray background */
}
html, body {
    height: 100%; /* Ensure html and body take full height */
}

/* Common Card Styling - digunakan untuk login, register, dan dashboard cards */
.app-card {
    background-color: #E8F1F5;
    border-radius: 0.75rem; /* Reduced rounded corners */
    box-shadow: 0 15px 20px rgba(0, 0, 0, 0.08); /* Lighter shadow */
    padding: 2.5rem; /* Consistent padding inside card */
    border: none; /* Remove default card border */
}

/* Form Control Styling */
.form-control-custom {
    border-radius: 0.5rem; /* Reduced rounded input */
    padding: 0.85rem 1.25rem;
    border: 1px solid #d1d5db; /* Light gray border */
    transition: all 0.3s ease;
}
.form-control-custom:focus {
    border-color: #3b82f6; /* Blue border on focus */
    box-shadow: 0 0 0 0.25rem rgba(59, 130, 246, 0.25); /* Blue shadow on focus */
}
.form-label-custom { /* Used in register page, can be used elsewhere */
    font-weight: 500; /* fw-medium equivalent */
    color: #596168; /* text-secondary equivalent */
    margin-bottom: 0.5rem; /* mb-2 equivalent */
    display: block; /* Ensure label takes full width */
}

/* Button Styling */
.btn-primary-custom {
    background-color: #005691; /* Darker blue */
    /* border-color: #005691; */
    /* text-align: center; */
    border-radius: 0.5rem; /* Reduced rounded corners */
    padding: 0.85rem 2.5rem;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(37, 99, 235, 0.2); /* Lighter shadow */
    color: white;
    font-weight: bold;
    width: 40%;
}
.btn-primary-custom:hover {
    background-color: #004A7C; /* Even darker blue on hover */
    /* border-color: #1d4ed8; */
    transform: translateY(-1px); /* Subtle lift */
    box-shadow: 0 5px 12px rgba(37, 99, 235, 0.3);
}

#scan {
    letter-spacing: 3px;
}

/* Alert & Validation Styling */
.alert {
    border-radius: 0.5rem; /* Consistent rounded corners for alerts */
    font-size: 0.9rem;
}
.alert ul {
    margin-bottom: 0;
    padding-left: 1.25rem; /* Indent list items */
}
.invalid-feedback {
    display: block; /* Make sure it's visible when needed */
    margin-top: 0.5rem;
}

/* Logo Styling */
.logo-container {
    position: absolute;
    top: 2rem;
    left: 2rem;
    z-index: 1000;
    background-color: transparent !important; /* Ensure no background */
    box-shadow: none !important; /* Ensure no shadow */
    padding: 0; /* Remove any default padding */
}
.logo-img {
    height: 4rem; /* Consistent height */
}

/* Table Styling */
.table-custom {
    border-radius: 0.75rem; /* Reduced rounded corners */
    overflow: hidden; /* Ensures rounded corners apply to content */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}
.table-custom thead {
    background-color: #0d6efd; /* Bootstrap primary blue */
    color: white;
}
.table-custom th, .table-custom td {
    padding: 1rem;
    vertical-align: middle;
}
.table-custom tbody tr:nth-of-type(odd) {
    background-color: #f8f9fa; /* Lighter stripe */
}
.table-custom tbody tr:hover {
    background-color: #e9ecef; /* Hover effect */
}

/* Mobile Event Card Styles */
.event-card {
    background-color: #ffffff;
    border-radius: 0.75rem; /* Reduced rounded corners */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    padding: 1.25rem;
    margin-bottom: 1rem;
}
.event-card-title {
    font-weight: 600;
    font-size: 1.125rem; /* Custom font size */
    color: #333;
    margin-bottom: 0.5rem;
}
.event-card-detail {
    font-size: 0.95rem; /* Custom font size */
    color: #666;
    margin-bottom: 0.25rem;
}
.event-card-detail strong {
    color: #222;
}

/* Event Action Buttons (Dashboard) */
.event-action-buttons .btn {
    border-radius: 0.3rem; /* Slightly less rounded for small buttons */
    font-weight: 500;
    padding: 0.4rem 0.8rem; /* Adjust padding for small buttons */
}
.event-action-buttons .btn-success {
    background-color: #28a745; /* Bootstrap default success */
    border-color: #28a745;
}
.event-action-buttons .btn-success:hover {
    background-color: #218838;
    border-color: #1e7e34;
}
.event-action-buttons .btn-secondary {
    background-color: #6c757d; /* Bootstrap default secondary */
    border-color: #6c757d;
}
.event-action-buttons .btn-secondary:hover {
    background-color: #5a6268;
    border-color: #545b62;
}

/* Page Specific Layout Containers */
/* For Login Page - main wrapper for two columns */
.main-content-wrapper {
    min-height: 100vh; /* Ensures wrapper takes full viewport height */
    background-color: #E8F1F5; /* Consistent with body background */
}
.login-section { /* Left column of login page */
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}
.events-section { /* Right column of login page */
    background-color: #E8F1F5; /* Light cyan background */
    padding: 2rem;
    overflow-y: auto; /* Enable scrolling for content */
    display: flex; /* Make it a flex container */
    flex-direction: column; /* Stack content vertically */
    /* Add the following for vertical centering on desktop */
    justify-content: center; /* Center content vertically */
}

/* For Register and Dashboard Pages - single centered card layout */
.centered-page-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background-color: #FAFAFA; /* Consistent with body background */
}

.events-section .h4 {
    /* These flex properties are now primarily handled by Bootstrap classes d-flex, align-items-center, justify-content-between */
    /* Ensure no conflicting properties here that might override Bootstrap's flexbox behavior */
    flex-wrap: wrap; /* Still useful to allow wrapping on very small screens */
}

/* Style for the new date/time span */
#currentDateTime {
    font-size: 0.9rem; /* Slightly smaller than the heading */
    font-weight: normal; /* Override bold from h2 */
    color: #6c757d; /* A muted text color */
    /* Removed margin-left as justify-content-between handles spacing */
    white-space: nowrap; /* Prevent time from breaking into multiple lines */
}

/* Responsive adjustments */
@media (max-width: 991.98px) { /* Below large breakpoint (for mobile) */
    .logo-container {
        position: relative; /* Position relative on mobile */
        top: auto;
        left: auto;
        width: 100%;
        background-color: #FAFAFA;
        display: flex;
        justify-content: center;
        align-items: center;
        /* text-align: center; */
        /* margin-bottom: 2rem;  */
        padding: 1.5rem;
    }
    .btn-primary-custom {
        width: 50%;
    }

    .main-content-wrapper {
        flex-direction: column; /* Stack columns vertically */
    }
    .login-section, .events-section {
        min-height: 50vh; /* Each section takes at least half viewport height on mobile */
        padding: 1.5rem; /* Slightly less padding on mobile */
    }
    .events-section {

        justify-content: flex-start; /* Or initial, or unset */
    }
    .app-card { /* Apply to all cards on mobile */
        padding: 2rem;
    }
    .display-5-custom { /* Adjust heading size for login page mobile */
        font-size: calc(1.425rem + 2.1vw); /* Bootstrap's responsive font size calculation */
    }
    /* Ensure events section content stretches vertically */
    .events-section .container-fluid { /* If you wrap content in a container-fluid */
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }
    .centered-page-container {
        padding: 1.5rem; /* Adjust padding for mobile */
    }
    /* For dashboard/register card on mobile */
    .dashboard-card, .register-card { /* Ensure consistent padding on mobile */
        padding: 2rem;
    }

    .events-section .h4 {
        flex-direction: column; /* Stack items vertically on mobile */
        align-items: flex-start; /* Align stacked items to the left */
        justify-content: flex-start; /* Align content to the start on mobile */
    }

    #currentDateTime {
        margin-left: 0; /* Ensure no left margin on mobile */
        margin-top: 0.5rem; /* Add top margin to separate from heading */
        font-size: 0.85rem; /* Make it even smaller on mobile */
    }
}


/* Common Card Styling - used for login, register, and dashboard cards */
.app-card {
    background-color: #E8F1F5;
    border-radius: 0.75rem; /* Reduced rounded corners */
    box-shadow: 0 15px 20px rgba(0, 0, 0, 0.08); /* Lighter shadow */
    padding: 2.5rem; /* Consistent padding inside card */
    border: none; /* Remove default card border */
    display: flex; /* Make it a flex container */
    flex-direction: column; /* Stack content vertically */
    justify-content: center; /* Center content vertically within the card */
    /* Remove any explicit max-width here if it's causing issues */
}

/* Form Control Styling */
.form-control-custom {
    border-radius: 0.5rem; /* Reduced rounded input */
    padding: 0.85rem 1.25rem; /* Default padding */
    border: 1px solid #d1d5db; /* Light gray border */
    transition: all 0.3s ease;
    text-align: left; /* Ensure text is left-aligned by default */
}
.form-control-custom:focus {
    border-color: #3b82f6; /* Blue border on focus */
    box-shadow: 0 0 0 0.25rem rgba(59, 130, 246, 0.25); /* Blue shadow on focus */
}

/* Wrapper for password input and toggle */
.password-input-wrapper {
    position: relative;
    display: block; /* Ensure it takes full width */
}

/* For Password Toggle - Positioned inside the input field on the right */
.password-toggle {
    position: absolute;
    right: 1.25rem; /* Matches the right padding of form-control-custom for visual alignment */
    top: 50%;
    transform: translateY(-50%); /* Centering vertically */
    cursor: pointer;
    color: #999; /* Adjust color */
    font-size: 1.1rem;
    z-index: 2; /* Ensure it's above the input field */
}
.password-toggle:hover {
    color: #555; /* Darken on hover */
}

/* Adjust input padding when toggle is present to prevent text overlap */
.form-control-custom.pe-5 {
    padding-right: 3rem !important; /* Increase right padding to clear the icon */
}

/* Ensure invalid feedback has a designated space and smooth transition */
.invalid-feedback {
    visibility: hidden; /* Hidden by default, but occupies space if height is not 0 */
    height: 0; /* Collapse height when hidden */
    opacity: 0; /* Start transparent */
    transition: all 0.3s ease-out; /* Smooth transition for visibility, height, and opacity */
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.8rem; /* Smaller font size for error messages */
    color: var(--bs-form-invalid-color, #dc3545); /* Bootstrap's red color for errors, with fallback */
    text-align: left; /* Ensure error message text is left-aligned */
    overflow: hidden; /* Hide content when height is 0 */
}

/* When input is invalid, reveal the feedback */
/* Corrected selectors to target the immediate invalid-feedback */
.form-control-custom.is-invalid + .invalid-feedback, /* For name input */
.password-input-wrapper > .form-control-custom.is-invalid + .invalid-feedback { /* For password input */
    visibility: visible;
    height: auto; /* Allow height to adjust to content */
    opacity: 1;
    transition: all 0.3s ease-in; /* Faster transition when appearing */
}


/* Specific adjustments for input error */
.form-control-custom.is-invalid {
    border-color: #dc3545; /* Red border for invalid input */
    background-image: none !important; /* Remove Bootstrap's default invalid icon if it conflicts */
}

/* For inputs with password toggle and invalid state, ensure padding is correct */
.form-control-custom.is-invalid.pe-5 {
    padding-right: 3rem !important; /* Reapply increased padding for password field if invalid */
}

/* Remove default browser validation popups */
.form-control-custom:invalid {
    box-shadow: none;
}

.top-left-welcome-text {
    position: absolute;
    top: 20px; /* Adjust as needed */
    left: 20px; /* Adjust as needed */
    color: #333; /* Darker color for visibility */
    z-index: 1000; /* Ensure it's above other elements */
}

.top-right-events-text {
    position: absolute;
    top: 20px; /* Adjust as needed */
    right: 20px; /* Adjust as needed */
    color: #333; /* Darker color for visibility */
    text-align: right; /* Align text to the right */
    z-index: 1000; /* Ensure it's above other elements */
}

/* Mobile responsive adjustments */
@media (max-width: 991.98px) {
    .app-card {
        min-height: unset; /* Remove min-height constraint on mobile */
        height: auto; /* Allow height to adjust to content */
        width: 100%; /* Explicitly make it take full width on mobile */
        max-width: none !important; /* IMPORTANT: Override any potential inline or higher-specificity max-width */
        padding: 1.5rem; /* Adjust padding for mobile view, make it consistent with login-section */
        justify-content: flex-start; /* Align content to the top on mobile */
    }
    .top-left-welcome-text,
    .top-right-events-text {
        position: relative; /* Make them flow naturally on smaller screens */
        text-align: center;
        top: auto;
        left: auto;
        right: auto;
        margin-bottom: 15px; /* Add some space */
    }
}