/*
 * Bootstrap Override Styles
 *
 * Diese Datei enthält alle CSS-Regeln, die bestehende Bootstrap-Klassen
 * überschreiben oder erweitern. App-spezifische Styles gehören in app.css.
 */

/* ==========================================================================
   Bootstrap CSS Variables Override
   Mapping von _colors.css Variablen auf Bootstrap Variablen
   ========================================================================== */

: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);

    /* Alert Colors */
    --alert-primary-text: var(--primary-dark);
    --alert-primary-bg: #e8d5f5;
    --alert-primary-border: #d9b8ed;
}

/* ==========================================================================
   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-primary-light {
    --bs-btn-color: var(--white);
    --bs-btn-bg: var(--bs-primary-light);
    --bs-btn-border-color: var(--bs-primary-light);
    --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-dark);
    --bs-btn-active-border-color: var(--bs-primary-dark);
    --bs-btn-disabled-color: var(--white);
    --bs-btn-disabled-bg: var(--bs-primary-light);
    --bs-btn-disabled-border-color: var(--bs-primary-light);
    --bs-btn-disabled-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: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-primary {
    color: var(--alert-primary-text);
    background-color: var(--alert-primary-bg);
    border-color: var(--alert-primary-border);
}

.alert-primary-light {
    color: var(--gray-dark);
    background-color: #f5edfa;
    border-color: #e8d5f5;
}

.alert-info {
    color: var(--gray-dark);
    background-color: var(--alert-primary-bg);
    border-color: var(--alert-primary-border);
}

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

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

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

/* ==========================================================================
   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);
}

/* Note: SVG in data-URLs cannot use CSS variables - color must match --bs-primary */
.form-switch .form-check-input:not(:checked) {
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%236f1bc2'/%3e%3c/svg%3e");
}

/* ==========================================================================
   Navigation - Pills
   ========================================================================== */

.nav-pills .nav-link.active,
.nav-pills .nav-link.active:hover,
.nav-pills .nav-link.active:focus,
.nav-pills .nav-link.active:active {
    color: var(--pill-text) !important;
    background-color: var(--pill-bg) !important;
}

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

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

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

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

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

.badge.bg-primary-light {
    background-color: var(--alert-primary-bg);
    color: var(--alert-primary-text);
}

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

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

/* ==========================================================================
   Accordion
   ========================================================================== */

.accordion-button {
    background-color: var(--alert-primary-bg);
}

.accordion-button:not(.collapsed) {
    background-color: var(--alert-primary-bg);
    color: var(--bs-primary-dark);
}

.accordion-button:focus {
    box-shadow: 0 0 0 0.1rem var(--white), 0 0 0 0.25rem var(--bs-primary);
}

/* ==========================================================================
   Modals - Ensure modals appear above terminal offcanvas
   ========================================================================== */

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

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

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

code {
    color: inherit;
}