/*
 * 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-color-rgb: var(--link-color-rgb);
    --bs-link-hover-color: var(--link-hover-color);
    --bs-link-hover-color-rgb: var(--link-hover-color-rgb);

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

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

/* Buttons: consistent radius via design token + smooth color/transform transitions.
   The transform on :active gives a tactile "press" feel without disturbing layout. */
.btn {
    --bs-btn-border-radius: var(--radius-sm);
    --bs-btn-border-radius-lg: var(--radius-md);
    --bs-btn-border-radius-sm: var(--radius-xs);
    transition: var(--transition-colors),
                box-shadow var(--duration-base) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
}

.btn:active:not(:disabled) {
    transform: translateY(1px);
}

.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(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary-light);
    --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);
}

/* Buttons in modal/card footers stretch to equal width when marked flex-fill */
.modal-footer > .btn.flex-fill,
.card-footer > .btn.flex-fill {
    flex: 1 1 0 !important;
}

/* ==========================================================================
   Links
   ========================================================================== */

/* Baseline link color for plain anchors — wrapped in :where() so its specificity
   is 0, allowing any class-targeted link rule (.fullpage-top-left a, .app-footer
   a, etc.) to override without needing to match this rule's :not() chain. */
:where(a:not(.nav-link):not(.btn)) {
    color: var(--bs-link-color);
    text-decoration: none;
}

:where(a:not(.nav-link):not(.btn):hover) {
    color: var(--bs-link-hover-color);
    text-decoration: none;
}

/* .btn-link kept at normal specificity so it actually overrides Bootstrap's
   default underlined link button (which sets --bs-btn-text-decoration: underline). */
.btn-link {
    --bs-btn-text-decoration: none;
    color: var(--bs-link-color);
    text-decoration: none;
}

.btn-link:hover {
    --bs-btn-text-decoration: none;
    color: var(--bs-link-hover-color);
    text-decoration: none;
}

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

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

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

.alert {
    border-radius: var(--radius-md);
}

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

/* Tinted-danger: modern, more readable than solid red+white. Icon stays in
   danger color via .alert .material-symbols-outlined inheriting --bs-alert-color. */
.alert-danger {
    color: var(--danger-dark);
    background-color: #fdecee;
    border-color: #f5c2c7;
}

.alert-primary {
    --bs-alert-color: var(--primary);
    --bs-alert-bg: var(--primary-light);
    --bs-alert-border-color: var(--info-border);
}

.alert-warning {
    --bs-alert-color: #664d03;
    --bs-alert-bg: #fff8db;
    --bs-alert-border-color: #ffe69c;
}

.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,
.form-select {
    --bs-border-radius: var(--radius-sm);
    --bs-border-radius-lg: var(--radius-md);
    transition: var(--transition-colors), box-shadow var(--duration-base) var(--ease-out);
}

.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-check-label {
    cursor: pointer;
}

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

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

/* Checkboxes - Primary Color */
.form-check-input[type="checkbox"]:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* Radio buttons - Primary Color */
.form-check-input[type="radio"]: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);
}

/* Vertical separators between table columns for better readability */
.table th + th,
.table td + td {
    border-left: 1px solid var(--bs-border-color);
}

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

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

/* Large badge to match lg input/button height */
.badge-lg {
    padding: 0.5rem 1rem;
    font-size: 1.25rem;
    line-height: 1.5;
}

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

/* Single badge in a table cell takes full width */
td > .badge:only-child {
    display: block;
}

/* ==========================================================================
   List Groups
   ========================================================================== */

.list-group-item.active {
    --bs-list-group-active-bg: var(--bs-primary);
    --bs-list-group-active-border-color: var(--bs-primary);
}

/* ==========================================================================
   Form Select: auto-width variant
   ========================================================================== */

/* Prevents form-select from stretching inside input-groups */
.form-select.select-auto {
    flex: 0 1 auto;
    width: auto;
}

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

/* DatePicker: compact width when used inside an input group */
.input-group > .datepicker-auto-width,
.input-group > .datepicker-auto-width.form-control {
    flex: 0 0 auto;
    width: 13rem;
}

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

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

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

.modal-content {
    border-radius: var(--radius-lg);
    border-color: var(--bs-border-color);
    box-shadow: var(--shadow-xl);
}

.modal-backdrop.show {
    opacity: 0.45;
}

/* Draggable modal header (initModalDrag is attached via onmousedown) */
.modal-header {
    cursor: move;
}

.modal-header .btn-close {
    cursor: pointer;
}

/* Reset cursor inside nested modals — otherwise the parent header's `cursor: move`
   leaks into a nested AssetPermissionPicker rendered in the parent's modal-header. */
.modal-header .modal {
    cursor: auto;
}

/* Modal XXL (wider than Bootstrap's modal-xl) */
@media (min-width: 1400px) {
    .modal-xxl {
        --bs-modal-width: 90%;
        max-width: 90%;
    }
}

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

.card {
    --bs-card-border-radius: var(--radius-md);
    --bs-card-inner-border-radius: calc(var(--radius-md) - 1px);
    border-color: var(--bs-border-color);
    box-shadow: var(--shadow-sm);
}

.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;
}

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

/* No-chevron variant for survey section accordions */
.accordion-button.no-chevron,
.accordion-button.no-chevron:not(.collapsed) {
    background-color: var(--primary-light);
    color: var(--bs-body-color);
    font-weight: bold;
    box-shadow: none;
}

.accordion-button.no-chevron::after {
    display: none;
}

/* Muted variant: same background in both expanded and collapsed state */
.accordion-button.accordion-muted,
.accordion-button.accordion-muted.collapsed {
    background-color: var(--bs-accordion-active-bg);
}

/* AI assistant right-panel accordion: headers in app primary color, plus/minus
   indicator instead of the default chevron. Targets only this accordion so other
   accordions in the app keep the Bootstrap defaults. Collapsed headers share the
   same background and primary color as the expanded one — only the expanded
   header is bold. */
#expert-right-panel-accordion .accordion-button {
    --bs-accordion-active-color: var(--bs-primary);
    --bs-accordion-btn-focus-box-shadow: none;
}

#expert-right-panel-accordion .accordion-button.collapsed {
    background-color: var(--bs-accordion-active-bg);
    color: var(--bs-primary);
}

#expert-right-panel-accordion .accordion-button:not(.collapsed) {
    font-weight: 700;
}

/* Plus/Minus indicator only for the three top-level sections — the nested
   "Weitere Perspektiven" accordion uses .accordion-muted and keeps the default chevron. */
#expert-right-panel-accordion .accordion-button:not(.accordion-muted)::after {
    background-image: none;
    font-family: 'Material Symbols Outlined';
    font-size: 1.25rem;
    line-height: 1;
    width: 1.25rem;
    height: 1.25rem;
    transform: none;
    transition: none;
    color: var(--bs-primary);
    content: 'add';
    /* Material Symbols ligature requires these to render the icon */
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 1;
}

#expert-right-panel-accordion .accordion-button:not(.accordion-muted):not(.collapsed)::after {
    content: 'remove';
}

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

code {
    color: inherit;
}