/*
 * Bootstrap Override Styles
 *
 * This file contains all CSS rules that override or extend Bootstrap classes.
 * App-specific styles belong in app.css.
 */

/* ==========================================================================
   Bootstrap CSS Variables Override
   Mapping from _colors.css variables to Bootstrap variables
   ========================================================================== */

:root {
    /* Bootstrap Theme Colors */
    --bs-primary: var(--primary);
    --bs-primary-rgb: var(--primary-rgb);
    --bs-primary-light: var(--primary-light);
    --bs-primary-hover: var(--primary-hover);
    --bs-primary-dark: var(--primary-dark);

    --bs-secondary: var(--secondary);
    --bs-secondary-rgb: var(--secondary-rgb);

    --bs-success: var(--success);
    --bs-success-rgb: var(--success-rgb);

    --bs-danger: var(--danger);
    --bs-danger-rgb: var(--danger-rgb);

    --bs-info: var(--info);
    --bs-info-rgb: var(--info-rgb);

    --bs-warning: var(--warning);
    --bs-warning-rgb: var(--warning-rgb);

    --bs-link-color: var(--link-color);
    --bs-link-hover-color: var(--link-hover-color);

    /* Selection / Subtle Backgrounds */
    --bs-primary-bg-subtle: var(--selected-bg);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn-primary {
    --bs-btn-color: var(--white);
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: var(--white);
    --bs-btn-hover-bg: var(--bs-primary-hover);
    --bs-btn-hover-border-color: var(--bs-primary-hover);
    --bs-btn-active-color: var(--white);
    --bs-btn-active-bg: var(--bs-primary-dark);
    --bs-btn-active-border-color: var(--bs-primary-dark);
    --bs-btn-disabled-color: var(--white);
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
    --bs-btn-disabled-opacity: 0.65;
}

.btn-primary:disabled,
.btn-primary.disabled {
    color: var(--white);
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    opacity: 0.65;
}

.btn-secondary {
    --bs-btn-color: var(--white);
    --bs-btn-bg: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-hover-color: var(--white);
    --bs-btn-hover-bg: var(--secondary-hover);
    --bs-btn-hover-border-color: var(--secondary-hover);
    --bs-btn-active-color: var(--white);
    --bs-btn-active-bg: var(--secondary-dark);
    --bs-btn-active-border-color: var(--secondary-dark);
    --bs-btn-disabled-color: var(--white);
    --bs-btn-disabled-bg: var(--bs-secondary);
    --bs-btn-disabled-border-color: var(--bs-secondary);
    --bs-btn-disabled-opacity: 0.65;
}

.btn-success {
    --bs-btn-color: var(--white);
    --bs-btn-bg: var(--bs-success);
    --bs-btn-border-color: var(--bs-success);
    --bs-btn-hover-color: var(--white);
    --bs-btn-hover-bg: var(--success-hover);
    --bs-btn-hover-border-color: var(--success-hover);
    --bs-btn-active-color: var(--white);
    --bs-btn-active-bg: var(--success-dark);
    --bs-btn-active-border-color: var(--success-dark);
    --bs-btn-disabled-color: var(--white);
    --bs-btn-disabled-bg: var(--bs-success);
    --bs-btn-disabled-border-color: var(--bs-success);
    --bs-btn-disabled-opacity: 0.65;
}

.btn-danger {
    --bs-btn-color: var(--white);
    --bs-btn-bg: var(--bs-danger);
    --bs-btn-border-color: var(--bs-danger);
    --bs-btn-hover-color: var(--white);
    --bs-btn-hover-bg: var(--danger-hover);
    --bs-btn-hover-border-color: var(--danger-hover);
    --bs-btn-active-color: var(--white);
    --bs-btn-active-bg: var(--danger-dark);
    --bs-btn-active-border-color: var(--danger-dark);
    --bs-btn-disabled-color: var(--white);
    --bs-btn-disabled-bg: var(--bs-danger);
    --bs-btn-disabled-border-color: var(--bs-danger);
    --bs-btn-disabled-opacity: 0.65;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus {
    box-shadow: 0 0 0 0.1rem var(--white), 0 0 0 0.25rem var(--bs-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: var(--white);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-active-color: var(--white);
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-disabled-color: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

/* ==========================================================================
   Alerts
   ========================================================================== */

.alert {
    display: flex;
    align-items: center;
}

.alert .material-symbols-outlined {
    margin-right: 0.75rem;
    flex-shrink: 0;
}

.alert-success {
    color: var(--info-text);
    background-color: var(--info-bg);
    border-color: var(--info-border);
}

.alert-danger {
    color: var(--white);
    background-color: var(--bs-danger);
    border-color: var(--bs-danger);
}

.alert-primary {
    --bs-alert-color: var(--primary-dark);
    --bs-alert-bg: var(--primary-bg-subtle);
    --bs-alert-border-color: rgba(var(--primary-rgb), 0.3);
}

.alert-warning {
    --bs-alert-color: #664d03;
    --bs-alert-bg: #fff3cd;
    --bs-alert-border-color: #ffecb5;
}

.alert-info {
    color: var(--info-text);
    background-color: var(--info-bg);
    border-color: var(--info-border);
}

.bg-info {
    color: var(--white) !important;
}

/* ==========================================================================
   Forms
   ========================================================================== */

.form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem var(--white), 0 0 0 0.25rem var(--bs-primary);
}

.form-control::placeholder {
    opacity: 0.5;
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.form-label {
    color: inherit;
}

.validation-message {
    padding: 0.5rem 0.75rem;
}

.darker-border-checkbox.form-check-input {
    border-color: var(--gray-border-medium);
}

/* Form Switch - Primary Color */
.form-switch .form-check-input {
    border-color: var(--bs-primary);
}

.form-switch .form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* ==========================================================================
   Tables
   ========================================================================== */

.table td,
.table th {
    vertical-align: middle;
}

.table-hover > tbody > tr:hover > * {
    --bs-table-hover-bg: rgba(var(--bs-primary-rgb), 0.3);
}

/* ==========================================================================
   Badges
   ========================================================================== */

.badge {
    font-size: var(--font-size-base);
    font-weight: normal;
}

.table td:has(.badge) {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* ==========================================================================
   Input Groups
   ========================================================================== */

.input-group > .form-control:focus {
    box-shadow: none;
    outline: 0.15rem solid var(--bs-primary);
    outline-offset: 0;
    position: relative;
    z-index: 5;
}

.input-group .btn .material-symbols-outlined {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

/* ==========================================================================
   Modals
   ========================================================================== */

.modal {
    z-index: 10050 !important;
}

.modal-backdrop {
    z-index: 10040 !important;
}

/* ==========================================================================
   Cards
   ========================================================================== */

.card-header {
    --bs-card-cap-bg: var(--selected-bg);
}

/* ==========================================================================
   Nav Tabs
   ========================================================================== */

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    margin-bottom: -1px;
    border-bottom-color: var(--white);
}

.nav-tabs .nav-link .badge {
    font-size: 0.75rem;
    padding: 0.2rem 0.4rem;
    vertical-align: middle;
}

/* ==========================================================================
   Code
   ========================================================================== */

code {
    color: inherit;
}