/********************************/
/*                              */
/*      Teqa Color: #002f60     */
/*                              */
/********************************/

body {
    background-color: #f8f9fa;
}

/* Header styles */
.header {
    /*background-color: #cacecf;*/
    /*background-color: #EEF2F3;*/

    background-color: #e3e9eb;
    border-bottom: 10px solid #002f60;
}

.logo-container {
    margin: 0 60px;
    padding: 8px 15px;
    display: inline-flex;
    align-items: center;
    height: 100%;
}

.logo-img {
    height: 85px;
    width: auto;
}

/* user info, i.e. username */
.user-info {
    color: #3a4f63;
}

.user-info .logout-link,
.user-info .logout-icon {
    color: #3a4f63 !important;
}

.logout-link {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    text-decoration: none;
}

.logout-link {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    text-decoration: none;
}


h2 {
    margin: 0;
    font-size: 24px;
}

span {
    font-size: 18px;
}

a i {
    font-size: 18px;
}

/* Navbar styles */
.navbar {
    padding-left: 20px;
    background-color: #3a4f63;
}

/* Navbar base styles */
.navbar {
    background-color: #3a4f63;
}

    .navbar .nav-link {
        color: #fff;
        margin: 0 10px;
    }

        .navbar .nav-link:hover,
        .navbar .nav-link:focus {
            /* background-color: #2c3e50; */
            background-color: #bfcbd6;
            color: #465c71;
            border-radius: 4px;
        }

/* Dropdown menu base styles */
.dropdown-menu {
    left: 5%;
    background-color: #3a4f63;
    border: none;
    padding: 0;
    margin-top: 0.5rem;
    display: none; /* Hide all dropdown menus by default */
}

    .dropdown-menu .dropdown-item {
        color: #fff;
        padding: 0.5rem 1rem;
        border-radius: 4px;
    }

        .dropdown-menu .dropdown-item:hover,
        .dropdown-menu .dropdown-item:focus {
            background-color: #bfcbd6; /* Set background color on hover or focus */
            color: #465c71;
            outline: none; /* Remove default focus outline */
            border-radius: 4px;
        }

/* Submenu styles */
.dropdown-submenu {
    position: relative;
}

    .dropdown-submenu > .dropdown-menu {
        top: 0;
        left: 100%; /* Align to the right of the parent menu */
        margin-top: 0px;
        display: none; /* Hide submenus by default */
    }

/* Show dropdown on focus-within for both desktop and mobile */
.nav-item:focus-within > .dropdown-menu {
    background-color: #3a4f63;
    display: block;
}

.dropdown-submenu:hover > .dropdown-menu {
    background-color: #3a4f63;
    display: block;
}

/* Ensure the submenu aligns properly on desktop */
@media (min-width: 992px) {
    .dropdown-submenu > .dropdown-menu {
        left: 100%; /* Submenu appears to the right of the parent */
    }
}

/* On mobile, make submenus appear below parent */
@media (max-width: 991px) {
    .dropdown-submenu > .dropdown-menu {
        left: 40%;
        top: 100%; /* Submenu appears below the parent on mobile */
    }

    /* Full-width dropdowns on mobile */
    .dropdown-menu {
        width: 100%;
    }
}

/* style for header columns */
th {
    user-select: none;
}

    th::after {
        margin-left: 5px;
    }

/* for text boxes */
.form-control.is-valid {
    border-color: #198754; /* Green border for success */
    background-color: #d4edda; /* Light green background */
}

    .form-control.is-valid:focus {
        box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25);
    }

.form-control.is-invalid {
    border-color: #dc3545; /* Red border for error */
    background-color: #f8d7da; /* Light red background */
}

    .form-control.is-invalid:focus {
        box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
    }

.form-control.invalid-feedback {
    color: #dc3545;
}

/* styling for EQA cards (tiles) */
.card {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.2s;
    text-align: left;
    width: 100%;
}

.eqa-name {
    font-size: small;
    font-weight: bold;
}

.eqa-area {
    font-size: small;
    color: #6c757d; /* muted text */
}

/* style for operations button */
.operation-icon {
    cursor: pointer;
    margin-right: 10px;
}

/* style for teqa button */
.btn-teqa {
    background-color: #002f60;
    border-color: #002f60;
    padding: 6px 25px;
    color:#ffffff;
}

    .btn-teqa:hover {
        background-color: #00448c;
        border-color: #00448c;
        color: #ffffff;
    }

    .btn-teqa:checked {
        background-color: #00448c;
        border-color: #00448c;
    }

/* Style for the scrollable block */
#language-name-block {
    border: 1px solid #ced4da; /* Bootstrap's default border color */
    padding: 15px;
    border-radius: 5px;
    max-height: 225px; /* Adjust the height limit here */
    overflow-y: auto;
    margin: 0 10px 20px; /* Space between block and next form element */
}

/* style for bordered block in analyte form */
.bordered-block {
    margin: 0 10px 10px;
    border: 1px solid #ced4da;
    padding: 15px;
    border-radius: 5px;
}

/* Styles for dashbaord */
.dashboard-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
    padding: 20px;
    margin-bottom: 20px;
}

.dashboard-header {
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 15px;
}

.action-buttons {
    margin-top: 15px;
}

    .action-buttons .btn {
        margin-right: 10px;
    }

.dropdown-group {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px;
}

    .dropdown-group select {
        flex-grow: 1;
    }

/* Styles for result entry */
.sample-section {
    border: 1px solid #ccc;
    padding: 15px;
    margin-bottom: 10px;
    position: relative;
    border-radius: 5px;
}

.close-btn {
    margin-left: 10px;
}

.grid-container {
    display: grid;
    grid-template-columns: 35% 1fr 80px auto;
    gap: 10px;
    align-items: center;
}

/* Custom styling for Select2 */
.select2-container {
    width: 100% !important;
}

.select2-container .select2-selection--single {
    height: calc(2.25rem + 2px); /* Matches Bootstrap's .form-control height */
    padding: 0.375rem 0.75rem; /* Matches .form-control padding */
    font-size: 1rem; /* Matches font size */
    line-height: 1.5; /* Matches line height */
    border: 1px solid #ced4da; /* Matches border style */
    border-radius: 0.375rem; /* Matches border radius */
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.5; /* Aligns text vertically */
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%; /* Ensures the arrow aligns properly */
}


/* custom CSS for loading modal */
/* Darker, more opaque backdrop for loading modal */
#loadingModal.show {
    background-color: rgba(0, 0, 0, 0.3) !important; /* darker semi-transparent overlay */
}

/* Ensure text inside loading modal stays visible */
#loadingModal #loadingMessage {
    color: #fff !important; /* white text */
}

/*custom CSS form forget password link*/
.forgot-password-link {
    color: #0d6efd;
    text-decoration: none;
    font-weight: 500;
}

.forgot-password-link:hover {
    text-decoration: underline;
}
}


/*custom styling for table of label Configs*/
.analyte-table {
    table-layout: fixed;
    width: 100%;
}

.analyte-column {
    overflow: hidden; /* HARD STOP at column edge */
    vertical-align: middle;
}

.analyte-cell {
    min-width: 0; /* REQUIRED for truncation in flexbox */
}

.analyte-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}