/* Main Layout */
:root {
    /* Main Colors */
    --navy-blue: #373d61;
    --gold: #febc14;
    --light-gray: #f8f9fa;
    --medium-gray: #e9ecef;
    --dark-gray: #343a40;
    --secondary-text: #6c757d;
    --white: #ffffff;
    --primary-blue: #2e3a59;
    --success-green: #28a745;
    --warning-orange: #fd7e14;
    --danger-red: #dc3545;
    --info-teal: #20c997;
    --purple: #6f42c1;
    --info: #20c997;
    --cyan: #0dcaf0;
    --border-radius: 4px;
    --box-shadow: none;
    --transition: all 0.2s ease-in-out;
}

body {
    background-color: #fcfaf8;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Header Styling */
header.bg-primary {
    background-color: var(--navy-blue) !important;
    /* Add a slightly darker bottom border */
    border-bottom: 12px solid #2c314d;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: 100%;
}

header .container {
    max-width: 1320px;
    width: 100%;
    padding-left: 2rem;
    padding-right: 2rem;
}

header h1 {
    color: var(--gold);
    font-weight: 600;
}

/* Button Styles */
.btn {
    border-radius: var(--border-radius);
    font-weight: 400;
    padding: 0.375rem 0.75rem;
    transition: var(--transition);
    max-height: 2.4em;
}

.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

.view-details-btn {
    padding: 0.2rem 0.5rem;
    font-size: 0.8rem;
}

/* Form Controls */
.form-select,
.form-control {
    border-radius: var(--border-radius);
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 0.375rem 0.75rem;
    transition: var(--transition);
}

    .form-select:focus,
    .form-control:focus {
        border-color: var(--navy-blue);
        box-shadow: 0 0 0 0.25rem rgba(46, 58, 89, 0.25);
    }

    /* Optgroup styling */
    .form-select optgroup {
        font-weight: bold;
        color: var(--navy-blue);
        background-color: var(--light-gray);
        padding: 5px;
    }

    /* Option styling */
    .form-select option {
        padding: 5px;
        background-color: var(--white);
    }

    /* Active dropdown styling with optgroups */
    .form-select:not([value=""]) optgroup {
        color: var(--light-gray);
        background-color: var(--navy-blue);
    }

    .form-select:not([value=""]) option {
        background-color: var(--navy-blue);
        color: var(--white);
    }

.form-seperator {
    margin: 2em 0 .45em 0;
    border: 1px solid #e2e1df;
    border-width: 0 0 1px 0;
}

.table-group-divider td {
    padding-top: 2em;
}