:root {
    /* Light theme variables */
    --primary: #223A5E;
    --primary-container: #97BAEA;
    --on-primary: #FFFFFF;
    --on-primary-container: #000000;
    --secondary: #144955;
    --secondary-container: #A9EDFF;
    --on-secondary: #FFFFFF;
    --on-secondary-container: #000000;
    --tertiary: #208399;
    --tertiary-container: #CCF3FF;
    --on-tertiary: #FFFFFF;
    --on-tertiary-container: #000000;
    --error: #B00020;
    --error-container: #FCD9DF;
    --on-error: #FFFFFF;
    --on-error-container: #000000;
    --surface: #FCFCFC;
    --surface-container: #F3F3F3;
    --on-surface: #111111;
    --on-surface-variant: #393939;
    --outline: #919191;
    --outline-variant: #D1D1D1;
}

/* Dark theme */
/*@media (prefers-color-scheme: dark) {
    :root {
        --primary: #748BAC;
        --primary-container: #1B2E4B;
        --on-primary: #FFFFFF;
        --on-primary-container: #FFFFFF;
        --secondary: #539EAF;
        --secondary-container: #004E5D;
        --on-secondary: #FFFFFF;
        --on-secondary-container: #FFFFFF;
        --tertiary: #219AB5;
        --tertiary-container: #0F5B6A;
        --on-tertiary: #FFFFFF;
        --on-tertiary-container: #FFFFFF;
        --error: #CF6679;
        --error-container: #B1384E;
        --on-error: #000000;
        --on-error-container: #FFFFFF;
        --surface: #080808;
        --surface-container: #151515;
        --on-surface: #F1F1F1;
        --on-surface-variant: #CACACA;
        --outline: #777777;
        --outline-variant: #414141;
    }
}*/

/* Bootstrap overrides */
.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary);
}

    .btn-primary:hover {
        background-color: var(--primary-container);
        border-color: var(--primary-container);
        color: var(--on-primary-container);
    }

.btn-secondary {
    background-color: var(--secondary);
    border-color: var(--secondary);
    color: var(--on-secondary);
}

    .btn-secondary:hover {
        background-color: var(--secondary-container);
        border-color: var(--secondary-container);
        color: var(--on-secondary-container);
    }

.navbar-dark {
    background-color: var(--primary) !important;
}

.card {
    background-color: var(--surface);
    border-color: var(--outline-variant);
}

.card-header {
    background-color: var(--surface-container);
    border-bottom-color: var(--outline-variant);
}

.table {
    color: var(--on-surface);
}

.badge.bg-primary {
    background-color: var(--primary) !important;
    color: var(--on-primary);
}

.badge.bg-secondary {
    background-color: var(--secondary) !important;
    color: var(--on-secondary);
}

.badge.bg-success {
    background-color: var(--tertiary) !important;
    color: var(--on-tertiary);
}

.badge.bg-danger {
    background-color: var(--error) !important;
    color: var(--on-error);
}

.alert-info {
    background-color: var(--tertiary-container);
    border-color: var(--tertiary);
    color: var(--on-tertiary-container);
}

.nav-tabs .nav-link {
    color: var(--on-surface);
}

    .nav-tabs .nav-link.active {
        background-color: var(--surface);
        border-color: var(--outline-variant);
        border-bottom-color: var(--surface);
        color: var(--primary);
    }

.input-group-text {
    background-color: var(--surface-container);
    border-color: var(--outline-variant);
    color: var(--on-surface);
}

.form-control {
    background-color: var(--surface);
    border-color: var(--outline-variant);
    color: var(--on-surface);
}

    .form-control:focus {
        background-color: var(--surface);
        border-color: var(--primary);
        box-shadow: 0 0 0 0.25rem rgba(34, 58, 94, 0.25);
    }

/* Dark mode specific overrides */
@media (prefers-color-scheme: dark) {
    body {
        background-color: var(--surface);
        color: var(--on-surface);
    }

    .table {
        --bs-table-color: var(--on-surface);
        --bs-table-bg: var(--surface);
        --bs-table-border-color: var(--outline-variant);
    }

    .form-control:readonly {
        background-color: var(--surface-container);
    }
}