/* assets/core_css/main.css */

/* Global body background */
body {
    background: #f5f7fa;
}

/* Topbar spacer (fixed navbar height) */
main {
    padding-top: 70px !important;
}

/* Sidebar behavior on desktop (≥992px) */
@media (min-width: 992px) {
    #sidebarOffcanvas {
        transform: none !important;
        visibility: visible !important;
        display: flex !important;
        top: 56px;                    /* Matches navbar height */
        height: calc(100vh - 56px);
        position: fixed !important;
    }

    main {
        margin-left: 260px;           /* Space for sidebar width */
    }
}

/* Active nav link */
.nav-link.active {
    background: #0d6efd !important;
    color: white !important;
}

/* Sidebar hover effect */
.sidebar .nav-link:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* ──────────────────────────────────────────────── */
/* Idle timeout modal - force bright/readable look   */
/* ──────────────────────────────────────────────── */

/* Modal popup itself (white background, full brightness) */
.idle-modal-bright {
    background-color: white !important;
    color: black !important;
    filter: brightness(1) !important;
    opacity: 1 !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
}

.idle-modal-bright .swal2-title,
.idle-modal-bright .swal2-html-container,
.idle-modal-bright label,
.idle-modal-bright input {
    color: black !important;
}

.idle-modal-bright input.swal2-input {
    background: white !important;
    border: 1px solid #ccc !important;
    color: black !important;
}

.idle-modal-bright .swal2-actions button {
    filter: brightness(1) !important;
}

/* Fix Modal appearing under or behind Navigation */
.modal {
    z-index: 1060 !important; /* Higher than topbar/sidebar */
}
.modal-backdrop {
    z-index: 1055 !important;
}

/* Ensure Modal Title is visible and not cut off */
.modal-header {
    background-color: #0d6efd; /* Primary Color */
    color: white;
    border-bottom: 2px solid rgba(0,0,0,0.1);
}

.modal-title {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* 1. Force Modal to be on top of Topbar (1100) and Sidebar */
.modal {
    z-index: 2000 !important;
}
.modal-backdrop {
    z-index: 1950 !important;
}

/* 2. Vertically and Horizontally Center the Modal */
.modal-dialog {
    display: flex;
    align-items: center;
    min-height: calc(100% - 3.5rem);
}

/* 3. Prevent Modal Header from overlapping with Navbar text */
.modal-content {
    border: none;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2) !important;
    border-radius: 12px;
    overflow: hidden;
}

/* 4. Fix for Mobile: Ensure top of modal isn't cut off */
@media (max-width: 576px) {
    .modal-dialog {
        margin: 0.5rem;
        min-height: calc(100% - 1rem);
    }
}

/* Ensure datepicker popup is above all other UI elements */
.datepicker-dropdown {
    z-index: 9999 !important;
}

/* Fix Datepicker Horizontal Layout Conflict */
.datepicker table tr td, 
.datepicker table tr th {
    width: 35px !important;
    height: 35px !important;
    text-align: center !important;
}

/* Ensure the Month/Year views don't stretch horizontally */
.datepicker-months table, 
.datepicker-years table {
    width: 100% !important;
}

.datepicker-months td span, 
.datepicker-years td span {
    display: block !important;
    width: 25% !important;
    float: left !important;
    height: 50px !important;
    line-height: 50px !important;
    margin: 0 !important;
    cursor: pointer !important;
}

/* Fix Giant Reset Button */
.btn-reset-logs {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.85rem !important;
    border-radius: 50% !important;
}

/* Change I-beam to hand pointer for date inputs */
#minDate, #maxDate, .input-daterange input {
    cursor: pointer !important;
    background-color: #fff !important; /* Ensure background stays white */
}

/* Also apply to the reset button and toggle labels for consistency */
.btn-reset-logs, 
.form-check-label, 
.form-check-input {
    cursor: pointer !important;
}

/* Optional: Add a slight hover effect to the date inputs */
#minDate:hover, #maxDate:hover {
    border-color: #0d6efd !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.1) !important;
}

/* Password Criteria Styles */
.criteria-item {
    font-size: 0.8rem;
    transition: all 0.3s ease;
    color: #6c757d; /* Default Grey */
}
.criteria-item.valid {
    color: #198754 !important; /* Green */
    font-weight: bold;
}
.criteria-item i {
    margin-right: 5px;
}

/* Faint Button State */
#changePwBtn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    filter: grayscale(1);
}

/* Ensure SweetAlert is above the Bootstrap Modal */
.swal2-container {
    z-index: 3000 !important;
}

/* Profile Card Styling */
.profile-info-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #6c757d;
    margin-bottom: 2px;
}
.profile-info-value {
    font-weight: 600;
    color: #212529;
    font-size: 1rem;
}
.profile-header-bg {
    background: linear-gradient(135px, #0d6efd 0%, #003d99 100%);
    height: 100px;
    border-radius: 12px 12px 0 0;
}
.profile-avatar-wrapper {
    margin-top: -50px;
}