/*
 * LimeSurvey custom.css – Familienkarte
 * Farbpalette:
 * Grün   #397E3C
 * Blau   #2B77A6
 * Rot    #B53145
 * Orange #E4562D
 * Lila   #5F2C5D
 *
 * Ausgelegt als Override für das LimeSurvey "Apple"-Theme.
 */

:root {
    --fk-green: #397E3C;
    --fk-blue: #2B77A6;
    --fk-red: #B53145;
    --fk-orange: #E4562D;
    --fk-purple: #5F2C5D;

    --fk-green-rgb: 57, 126, 60;
    --fk-blue-rgb: 43, 119, 166;
    --fk-red-rgb: 181, 49, 69;
    --fk-orange-rgb: 228, 86, 45;
    --fk-purple-rgb: 95, 44, 93;

    /* Bootstrap/LimeSurvey-Farben auf Familienkarte abbilden */
    --bs-primary: var(--fk-green);
    --bs-primary-rgb: var(--fk-green-rgb);

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

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

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

    --bs-success: var(--fk-green);
    --bs-success-rgb: var(--fk-green-rgb);
}


/* =========================================================
   ÜBERSCHRIFTEN
   ========================================================= */

body .survey-name,
body .survey-name h1,
body h1,
body .h1 {
    color: var(--fk-green) !important;
}

body .group-title,
body .group-title h2,
body h2,
body .h2 {
    color: var(--fk-blue) !important;
}

body .question-title-container,
body .question-title-container .question-title,
body .question-title,
body h3,
body .h3 {
    color: var(--fk-red) !important;
}

body h4,
body .h4 {
    color: var(--fk-orange) !important;
}

body h5,
body .h5,
body h6,
body .h6 {
    color: var(--fk-purple) !important;
}


/* =========================================================
   LINKS
   ========================================================= */

body a,
body .nav-link {
    color: var(--fk-blue);
}

body a:hover,
body a:focus,
body .nav-link:hover,
body .nav-link:focus {
    color: #225F85;
}


/* =========================================================
   PRIMÄRE BUTTONS / NAVIGATION
   ========================================================= */

body .btn-primary,
body .btn-primary:disabled,
body .btn-primary.disabled {
    color: #fff !important;
    background-color: var(--fk-green) !important;
    border-color: var(--fk-green) !important;
}

body .btn-primary:hover {
    color: #fff !important;
    background-color: #306B33 !important;
    border-color: #306B33 !important;
}

body .btn-primary:focus,
body .btn-primary:focus-visible {
    color: #fff !important;
    background-color: var(--fk-green) !important;
    border-color: var(--fk-green) !important;
    box-shadow: 0 0 0 .25rem rgba(var(--fk-blue-rgb), .25) !important;
}

body .btn-primary:active,
body .btn-primary.active,
body .show > .btn-primary.dropdown-toggle {
    color: #fff !important;
    background-color: #295C2C !important;
    border-color: #295C2C !important;
}


/* Auswahlbuttons, Ja/Nein, Bootstrap-Buttons */
body .btn-check + .btn {
    color: var(--fk-blue) !important;
    background-color: #fff !important;
    border-color: var(--fk-blue) !important;
}

body .btn-check + .btn-primary:hover,
body .btn-check:active + .btn-primary,
body .btn-check:checked + .btn-primary,
body .btn-check:checked + .btn-primary:focus,
body .btn-check:focus:checked + .btn-primary {
    color: #fff !important;
    background-color: var(--fk-green) !important;
    border-color: var(--fk-green) !important;
    box-shadow: none !important;
}

body .btn-check:focus + .btn-primary {
    color: var(--fk-blue) !important;
    background-color: #fff !important;
    border: 2px solid var(--fk-blue) !important;
    box-shadow: 0 0 0 .25rem rgba(var(--fk-blue-rgb), .18) !important;
}


/* =========================================================
   FORMULARE / INPUTS
   ========================================================= */

body .form-control,
body .form-select {
    border-color: #7D8790;
}

body .form-control:focus,
body .form-select:focus {
    border-color: var(--fk-blue) !important;
    box-shadow: 0 0 0 .25rem rgba(var(--fk-blue-rgb), .20) !important;
}


/* Checkboxen und Radiobuttons */
body .form-check-input:focus {
    border-color: var(--fk-blue) !important;
    box-shadow: 0 0 0 .25rem rgba(var(--fk-blue-rgb), .20) !important;
}

body .form-check-input:checked,
body .form-check-input[type="checkbox"]:indeterminate {
    background-color: var(--fk-green) !important;
    border-color: var(--fk-green) !important;
}


/* Validierung */
body .has-success .form-control,
body .has-success .form-control:focus {
    border-color: var(--fk-green) !important;
    box-shadow: 4px 4px 0 rgba(var(--fk-green-rgb), .30) !important;
}

body .has-warning .form-control,
body .has-warning .form-control:focus {
    border-color: var(--fk-orange) !important;
    box-shadow: 4px 4px 0 rgba(var(--fk-orange-rgb), .30) !important;
}

body .has-error .form-control,
body .has-error .form-control:focus,
body .input-error .form-control,
body .input-error .form-control:focus {
    border-color: var(--fk-red) !important;
    box-shadow: 4px 4px 0 rgba(var(--fk-red-rgb), .30) !important;
}

body .text-danger,
body .help-block.text-danger,
body .ls-questionhelp.text-danger {
    color: var(--fk-red) !important;
}


/* =========================================================
   FORTSCHRITTSBALKEN
   ========================================================= */

body .progress {
    background-color: #E3E7E4 !important;
}

body .progress-bar,
body .top-container .progress-bar {
    color: #fff !important;
    background-color: var(--fk-green) !important;
}


/* =========================================================
   ALERTS / HINWEISE
   ========================================================= */

body .alert-primary,
body .alert-success {
    color: #fff !important;
    background-color: var(--fk-green) !important;
    border-color: var(--fk-green) !important;
}

body .alert-info {
    color: #fff !important;
    background-color: var(--fk-purple) !important;
    border-color: var(--fk-purple) !important;
}

body .alert-warning {
    color: #212529 !important;
    background-color: #F8D8CD !important;
    border-color: var(--fk-orange) !important;
}

body .alert-danger {
    color: #212529 !important;
    background-color: #F1D6DA !important;
    border-color: var(--fk-red) !important;
}

body .alert a,
body .alert .alert-link {
    color: inherit !important;
    font-weight: 700;
}


/* =========================================================
   BOOTSTRAP-HILFSKLASSEN
   ========================================================= */

body .text-primary { color: var(--fk-green) !important; }
body .text-success { color: var(--fk-green) !important; }
body .text-info    { color: var(--fk-purple) !important; }
body .text-warning { color: var(--fk-orange) !important; }
body .text-danger  { color: var(--fk-red) !important; }

body .bg-primary { background-color: var(--fk-green) !important; }
body .bg-success { background-color: var(--fk-green) !important; }
body .bg-info    { background-color: var(--fk-purple) !important; }
body .bg-warning { background-color: var(--fk-orange) !important; }
body .bg-danger  { background-color: var(--fk-red) !important; }


/* =========================================================
   PAGINATION
   ========================================================= */

body .page-link {
    color: var(--fk-blue);
}

body .page-link:hover,
body .page-link:focus {
    color: #225F85;
    border-color: var(--fk-blue);
    box-shadow: 0 0 0 .25rem rgba(var(--fk-blue-rgb), .15);
}

body .page-item.active .page-link {
    color: #fff;
    background-color: var(--fk-green);
    border-color: var(--fk-green);
}


/* =========================================================
   SONSTIGE AKZENTE
   ========================================================= */

body ::selection {
    color: #fff;
    background-color: var(--fk-purple);
}

body hr {
    color: var(--fk-blue);
}