/* =====================================================================
   AWARE7 Corporate Design für LimeSurvey 6 (erweitert fruity_twentythree)

   Zurückhaltende Token-Schicht gemäß zentraler design.md: Layout,
   Abstände und Typografie des TwentyThree-Themes bleiben unverändert,
   angepasst werden Farben und Interaktionszustände.
   Die Markenfarbfamilie (Mint-Green) kommt aus css/variations/theme_a7.css.
   ===================================================================== */

:root {
    /* AWARE7-Design-Tokens */
    --a7-primary: #01A8B3;              /* Mint-Green, Markenfarbe */
    --a7-primary-hover: #018F98;
    --a7-action-primary: #006E82;       /* barrierefreie Aktionsfarbe, weißer Text */
    --a7-action-primary-hover: #005A6B;
    --a7-action-danger: #B4232C;
    --a7-action-danger-hover: #941B23;
    --a7-secondary: #107CAC;            /* Deep-Blue */
    --a7-warning: #E54B4B;              /* Light-Red */
    --a7-neutral: #EFEFEF;
    --a7-text: #333333;                 /* nie reines Schwarz auf Screens */
    --a7-text-light: #475569;
    --a7-dark: #0F172A;
    --a7-light-gray: #CBD5E1;
    --a7-bg-alt: #F8FAFC;
    --a7-white: #FFFFFF;
    --a7-ring: #E2E8F0;
    --a7-green: #2EAE6A;
    --a7-blue: #107CAC;
    --a7-tint-red: #FCEDED;
    --a7-tint-orange: #FEF5E7;
    --a7-tint-green: #EAF7F0;
    --a7-tint-blue: #E7F1F7;

    /* Bootstrap-Farbrollen auf die Tokens mappen */
    --bs-primary: var(--a7-primary);
    --bs-primary-rgb: 1, 168, 179;
    --bs-secondary: var(--a7-secondary);
    --bs-secondary-rgb: 16, 124, 172;
    --bs-danger: var(--a7-warning);
    --bs-danger-rgb: 229, 75, 75;
    --bs-success: var(--a7-green);
    --bs-success-rgb: 46, 174, 106;
    --bs-info: var(--a7-blue);
    --bs-info-rgb: 16, 124, 172;
    --bs-body-color: var(--a7-text);
    --bs-body-color-rgb: 51, 51, 51;
}

body {
    color: var(--a7-text);
}

/* Links: barrierefreies Teal statt zu hellem Mint */
a {
    color: var(--a7-action-primary);
}

a:hover {
    color: var(--a7-action-primary-hover);
}

/* ------------------------------------------------------------------ */
/* Fokus: 2px Ring, 2px Offset, immer sichtbar                         */
/* ------------------------------------------------------------------ */

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
[tabindex]:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    outline: 2px solid var(--a7-action-primary) !important;
    outline-offset: 2px;
    box-shadow: none !important;
}

/* ------------------------------------------------------------------ */
/* Buttons: Zustandsfarben gemäß Token, Geometrie bleibt TwentyThree   */
/* ------------------------------------------------------------------ */

/* Primäre Aktion: action-primary mit weißem Text (WCAG AA) */
.btn-primary,
.btn-primary:visited,
.btn-primary:focus {
    color: var(--a7-white);
    background-color: var(--a7-action-primary);
    border-color: var(--a7-action-primary);
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
    color: var(--a7-white);
    background-color: var(--a7-action-primary-hover);
    border-color: var(--a7-action-primary-hover);
}

.btn-primary:disabled,
.btn-primary.disabled {
    color: var(--a7-text-light);
    background-color: var(--a7-neutral);
    border-color: var(--a7-neutral);
}

/* Destruktive Aktion */
.btn-danger {
    color: var(--a7-white);
    background-color: var(--a7-action-danger);
    border-color: var(--a7-action-danger);
}

.btn-danger:hover,
.btn-danger:active,
.btn-danger.active {
    color: var(--a7-white);
    background-color: var(--a7-action-danger-hover);
    border-color: var(--a7-action-danger-hover);
}

.btn-link {
    color: var(--a7-action-primary);
}

.btn-link:hover {
    color: var(--a7-action-primary-hover);
}

/* ------------------------------------------------------------------ */
/* Formulare                                                           */
/* ------------------------------------------------------------------ */

.form-control:focus,
.form-select:focus {
    border-color: var(--a7-action-primary);
}

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

/* Auswahlzustände (Radio, Checkbox, Button-Auswahl): barrierefreies
   Teal statt hellem Mint - weißer bzw. kleiner Text auf Mint-Green
   verfehlt WCAG AA */

.radio-item input[type=radio]:checked + label,
.checkbox-item input[type=checkbox]:checked + label {
    color: var(--a7-action-primary);
}

body .answer-item label::after,
.radio-item label::after,
.radio-item input[type=radio] + label::after,
.radio-item input[type=radio]:checked + label::after {
    background-color: var(--a7-action-primary);
}

.radio-item input[type=radio]:checked + label::before,
.checkbox-item input[type=checkbox]:checked + label::before {
    border-color: var(--a7-action-primary);
}

.checkbox-item input[type=checkbox]:checked + label::after {
    color: var(--a7-action-primary);
}

input[type=checkbox]:checked:after,
.checkbox input[type=checkbox]:checked:after,
.checkbox-inline input[type=checkbox]:checked:after {
    background-color: var(--a7-action-primary);
    border-color: var(--a7-action-primary);
}

.btn-check:checked + .btn-primary,
.btn-check:checked + .btn-primary:focus,
.btn-check:focus:checked + .btn-primary {
    color: var(--a7-white);
    background-color: var(--a7-action-primary);
    border-color: var(--a7-action-primary);
    box-shadow: none;
}

.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary {
    color: var(--a7-white);
    background-color: var(--a7-action-primary);
    border-color: var(--a7-action-primary);
}

.input-group-text,
label .input-group-text {
    color: var(--a7-white);
    background-color: var(--a7-action-primary);
    border-color: var(--a7-action-primary);
}

/* ------------------------------------------------------------------ */
/* Fortschrittsbalken: Mint-Green als Markenakzent                     */
/* ------------------------------------------------------------------ */

.progress-bar {
    background-color: var(--a7-primary);
}

/* ------------------------------------------------------------------ */
/* Alerts: ruhige Tint-Hintergründe mit lesbarem Text                  */
/* ------------------------------------------------------------------ */

.alert-danger, .alert-error {
    background-color: var(--a7-tint-red);
    border-color: var(--a7-tint-red);
    color: var(--a7-text);
}

.alert-warning {
    background-color: var(--a7-tint-orange);
    border-color: var(--a7-tint-orange);
    color: var(--a7-text);
}

.alert-success {
    background-color: var(--a7-tint-green);
    border-color: var(--a7-tint-green);
    color: var(--a7-text);
}

.alert-info {
    background-color: var(--a7-tint-blue);
    border-color: var(--a7-tint-blue);
    color: var(--a7-text);
}

/* ------------------------------------------------------------------ */
/* Schwebende Ebenen: einzige erlaubte Schatten                        */
/* ------------------------------------------------------------------ */

.dropdown-menu {
    border: 1px solid var(--a7-ring);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.10);
}

.modal-content {
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15);
}

.tooltip-inner {
    background-color: var(--a7-dark);
    color: var(--a7-neutral);
}

/* ------------------------------------------------------------------ */
/* Reduzierte Bewegung                                                 */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}