/******************
    tobi_enobyte_mini_03 — custom overrides
    Base: Fruity TwentyThree
*/

/* Background, font color & primary color */
:root {
    --bs-body-bg:         #0C1F38 !important;
    --bs-body-bg-rgb:     12, 31, 56 !important;
    --bs-body-color:      #ffffff !important;
    --bs-body-color-rgb:  255, 255, 255 !important;
    --bs-primary:         #F39C12 !important;
    --bs-primary-rgb:     243, 156, 18 !important;
    --bs-dark:            #ffffff !important;
}

body {
    background-color: #0C1F38 !important;
    color:            #ffffff !important;
}

/* Catch-all: override dark text from variation on first page and everywhere */
.form-heading,
.question-count-text,
p, span, div {
    color: inherit;
}

/* Header — gradient background like old Enobyte theme */
#survey-nav.navbar {
    background: linear-gradient(90deg, #22579E 0%, #0C1F38 100%);
    border-bottom: 0 !important;
}
/* Remove inset box-shadow line on navbar-collapse (Bootstrap default: inset 0 1px 0 rgba(255,255,255,0.1)) */
#survey-nav .navbar-collapse {
    box-shadow: none !important;
}

/* Navbar toggler — invert for dark background */
#survey-nav .navbar-toggler-icon {
    filter: invert(1);
}
#survey-nav .navbar-toggler {
    border: none;
}
#survey-nav .navbar-toggler:focus {
    box-shadow: none;
}

/* Navbar items — Enobyte-style flat layout (no hamburger menu) */
#survey-nav .navbar-action-link {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: nowrap;
}
#survey-nav .navbar-action-link .nav-item {
    white-space: nowrap;
}
#survey-nav .navbar-action-link .nav-link {
    color: white !important;
    font-family: Archivo;
    font-size: 14px !important;
    white-space: nowrap;
    padding: 0.5rem 0.75rem;
}
#survey-nav .navbar-action-link .nav-link:hover {
    color: #F39C12 !important;
}
/* Fix dropdown arrow — variation uses position:absolute for hamburger, reset for flat navbar */
#survey-nav .navbar-action-link .dropdown-toggle::after {
    position: relative;
    right: auto;
    font-size: 1rem;
    margin-left: 0.25rem;
}
#survey-nav .navbar-action-link .dropdown-menu {
    background-color: #1F365D;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
}
#survey-nav .navbar-action-link .dropdown-menu .dropdown-item,
#survey-nav .navbar-action-link .dropdown-menu > li > a {
    color: white !important;
    font-size: 14px;
}
#survey-nav .navbar-action-link .dropdown-menu .dropdown-item:hover,
#survey-nav .navbar-action-link .dropdown-menu .dropdown-item:focus,
#survey-nav .navbar-action-link .dropdown-menu .dropdown-item:active,
#survey-nav .navbar-action-link .dropdown-menu .dropdown-item.active,
#survey-nav .navbar-action-link .dropdown-menu > li > a:hover,
#survey-nav .navbar-action-link .dropdown-menu > li > a:active {
    background-color: #22579E !important;
    color: white !important;
}
/* Question index dropdown — reset list-group-item styles (Bootstrap gives white bg + borders) */
#survey-nav .navbar-action-link .dropdown-menu .list-group-item {
    background-color: transparent !important;
    border: none !important;
    padding: 0;
    margin-bottom: 0 !important;
}
#survey-nav .navbar-action-link .dropdown-menu .list-group-item a {
    color: white !important;
    font-size: 14px !important;
}
/* Index warning/danger — colored left border like original variation */
#survey-nav .navbar-action-link .dropdown-menu .list-group-item a.index-warning {
    border-left: #FFE046 solid 4px;
}
#survey-nav .navbar-action-link .dropdown-menu .list-group-item a.index-danger {
    border-left: #FF515F solid 4px;
}
#survey-nav .navbar-action-link .dropdown-menu .list-group-item a.disabled {
    color: rgba(255, 255, 255, 0.5) !important;
}
/* index-item in dropdown — remove padding/margin */
#survey-nav .navbar-action-link .index-item {
    padding-left: 0;
    margin-bottom: 0 !important;
}
#survey-nav .navbar-action-link .dropdown-menu li {
    font-size: 14px !important;
}

/* Progress bar — visible on dark background */
.progress {
    background-color: rgba(255, 255, 255, 0.2);
}
.progress-bar {
    background-color: #01B2CA;
}

/* Fonts — Archivo & Outfit from Enobyte */
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 400;
    src: url('https://enobyte.com/typo3conf/ext/theme/Resources/Public/fonts/archivo-v16-latin-regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 700;
    src: url('https://enobyte.com/typo3conf/ext/theme/Resources/Public/fonts/archivo-v16-latin-700.woff2') format('woff2');
}
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 400;
    src: url('https://enobyte.com/typo3conf/ext/theme/Resources/Public/fonts/outfit-v5-latin-regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 700;
    src: url('https://enobyte.com/typo3conf/ext/theme/Resources/Public/fonts/outfit-v5-latin-700.woff2') format('woff2');
}

h1, h2, h3, .h1, .h2, .h3 {
    font-family: Outfit !important;
    color: white;
    line-height: 1.2;
}
label {
    color: white;
}
dl {
    color: white;
}
p {
    font-size: 17px !important;
    font-family: Archivo !important;
}
a {
    color: #01B2CA !important;
    font-family: Archivo !important;
    font-size: 17px !important;
}
button {
    font-family: Archivo !important;
}
li {
    font-family: Archivo !important;
    font-size: 17px !important;
}
.alert {
    font-family: Archivo !important;
}

/* Mandatory asterisk — red + smaller, like original Enobyte theme */
.text-danger.fa-asterisk,
.question-container .asterisk {
    color: #dc3545 !important;
    font-size: .675em;
}

/* Question text — larger than default */
.question-container .ls-label-question {
    font-size: 28px;
    line-height: 36px;
}
/* Some questions author their text as a paragraph (<p>…</p>). The global
   `p { font-size: 17px !important }` would otherwise shrink those to body size,
   so restore the question size (needs !important to beat that global rule). */
.question-container .ls-label-question p {
    font-size: 28px !important;
    line-height: 36px;
}

/* Survey title in Enobyte cyan */
.survey-name {
    color: #01B2CA;
}

/* Survey description & welcome text — override variation's grey #6E748C */
.survey-description,
.survey-welcome {
    color: white;
}
.question-count-text {
    color: white;
}
#datasecurity_notice,
#datasecurity_notice_label,
.datasecurity-checkbox-label {
    color: white;
}
.privacy .checkbox-item label::before {
    border-color: #F39C12;
}

/* Font weights — fruity uses 600 (semi-bold) everywhere, Enobyte uses 400 (normal) */
.h1, .h2 {
    font-weight: 400;
}
.h3 {
    font-weight: 400;
}
label {
    font-weight: 400;
}
.ls-answers label, .answer-item label, .control-label {
    font-weight: 400;
}
.large-heading {
    font-weight: 400;
}
dl dt {
    font-weight: 400;
}
a {
    font-weight: 400;
}
.ls-answers .ls-heading th, .ls-answers th {
    font-weight: 400;
}
.group-container .group-title {
    font-weight: 400;
}
.question-container .help-block {
    font-weight: 400;
}
.completed-wrapper .completed-heading {
    font-weight: 400;
}
.alert > .alert-header {
    font-weight: 400;
}
.form-change-lang .control-label {
    font-weight: 400;
}
.dropdown-menu .dropdown-item {
    font-weight: 400;
}
.datasecurity-checkbox-label a.show-policy {
    font-weight: 400;
}
.public-stats .statsSurveyTitle {
    font-weight: 400;
}
.privacy-header {
    font-weight: 400;
}
#survey-nav .dropdown-header {
    font-weight: 400;
}
.ls-answers label.btn {
    font-weight: 400;
}

/* Text colors — replacing variation's #6E748C / #1E1E1E / #212529 */

/* Group & question headings */
.group-container .group-title {
    color: #01B2CA;
}
.question-container .ls-question-message {
    color: white;
}

/* Labels */
.ls-answers label, .answer-item label, .control-label {
    color: white;
}
.control-label {
    color: white;
}
.form-change-lang .language-icon, .form-change-lang .control-label {
    color: white;
}
/* Language changer dropdown — match header menu colors */
.form-change-lang #language-changer-select {
    color: white;
    background-color: #1F365D;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.4em 0.5em;
    line-height: 1.4;
}
.form-change-lang #lang-select {
    background-color: #1F365D;
}
.form-change-lang #lang-select::after {
    color: white;
}
.form-change-lang #language-changer-select option {
    background-color: #1F365D;
    color: white;
}
.form-change-lang .ls-language-changer-item {
    background-color: #1F365D !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
}
.form-change-lang .ls-language-changer-item:hover,
.form-change-lang .ls-language-changer-item:focus {
    background-color: #22579E !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
}
.datasecurity-checkbox-label {
    color: white;
}

/* Table headings */
.ls-answers .ls-heading th, .ls-answers th {
    color: white !important;
    font-family: Archivo;
    font-size: 17px !important;
    font-weight: 400;
}

/* Matrix / checkbox-array tables — match original Enobyte theme */
.ls-answers td.answertext {
    color: white !important;
    font-family: Archivo;
    font-size: 17px !important;
    line-height: 1.5;
}
.ls-answers.table-bordered,
.ls-answers.table-bordered > :not(caption) > *,
.ls-answers.table-bordered > :not(caption) > * > * {
    border-color: transparent !important;
}
.ls-answers thead {
    border-top: 1px solid white !important;
}
.ls-answers tbody {
    border-top: 1px solid white !important;
}
.ls-answers .ls-even {
    background-color: rgba(255, 255, 255, 0.1) !important;
}
.ls-answers .ls-odd {
    background-color: transparent !important;
}
.ls-answers.table-hover > tbody > tr:hover > * {
    background-color: #22579E !important;
    color: white !important;
    --bs-table-hover-bg: #22579E;
    --bs-table-hover-color: white;
    --bs-table-accent-bg: #22579E;
}
.ls-answers .checkbox-item input[type=checkbox] {
    accent-color: #F39C12;
}

/* Question help text — slightly increased line spacing */
.ls-questionhelp {
    line-height: 1.2;
}

/* Checkbox/answer item labels — slightly more line spacing */
.checkbox-item .checkbox-label {
    line-height: 1.1;
}

/* Body text (fruity variation overrides body color again) */
dl dt {
    color: white;
}
.has-link a {
    color: #01B2CA;
}
.text-muted {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Form controls */
.form-control {
    color: white;
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Navigation & dropdowns */
#survey-nav .navbar-toggler .ri-more-fill {
    color: white;
}
#survey-nav .dropdown-menu > li > a {
    color: white;
}
.dropdown-menu > li > a {
    color: white;
}
.dropdown-header, .dropdown-item {
    color: white;
}

/* Button label text */
.btn-check + .btn {
    color: white;
}
.btn-check:focus + .btn-primary {
    color: white;
}
/* Back/Previous button — same style as Next/Submit (btn-primary) */
.btn-outline-secondary {
    background-color: #FFB800;
    border-color:     #FFB800;
    color:            #1F365D !important;
    border-radius:    0;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
    background-color: #1F365D;
    border-color:     #1F365D;
    color:            #ffffff !important;
}

/* Completed / end page */
.completed-wrapper .completed-heading {
    color: #01B2CA;
}
.completed-wrapper .completed-Content {
    color: white;
}
.quotamessage {
    color: white;
}

/* Modal — Enobyte dark blue style */
.modal-content {
    background-color: #1F365D;
    color: white;
}
.modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.modal-title {
    color: white;
}
.modal-body {
    color: white;
}
.modal-header .btn-close {
    filter: invert(1);
}

/* Stats & print */
.public-stats .statsSurveyTitle {
    color: white;
}
.public-stats .statsNumRecords {
    color: white;
}
.printanswers-container span {
    color: white;
}

/* Ranking / sortable */
.select-sortable-lists:not(.ranking-advanced-style) .ranking-available-items .sortable-item {
    color: white;
}
.select-sortable-lists:not(.ranking-advanced-style) .ranking-sorted-items .sortable-item .selector__dragHandle {
    color: white;
}
.ranking-advanced-style .ranking-advanced-available-items .sortable-rank-subtitle {
    color: white;
}
.ranking-advanced-style .ranking-advanced-available-items .selector__index_row {
    color: white;
}

/* Error page */
body.error-page .error-title p {
    color: white !important;
}

/* Buttons */
.btn-primary {
    background-color: #FFB800;
    border-color:     #FFB800;
    color:            #1F365D;
    border-radius:    0;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #1F365D;
    border-color:     #1F365D;
    color:            #ffffff;
}

.btn-check:checked + .btn-primary {
    background-color: #93B3D9;
    border-color:     #93B3D9;
    color:            #1F365D;
}

/* Selected options (radio, checkbox) */
.form-check-input:checked {
    background-color: #F39C12;
    border-color:     #F39C12;
}

/* Answer item checkbox/radio fill (overrides hardcoded green) */
body .answer-item label::after {
    background-color: #F39C12;
}

/* Radio items — override green from theme variation */
.radio-item label::after {
    background-color: #F39C12;
}
.radio-item input[type=radio] + label::after {
    background-color: #F39C12;
}
.radio-item input[type=radio]:checked + label::before {
    border-color: #F39C12;
}
.radio-item input[type=radio]:checked + label::after {
    background-color: #F39C12;
}
.radio-item input[type=radio]:checked + label {
    color: #F39C12;
}

/* Checkbox items — override green from theme variation */
.checkbox-item input[type=checkbox]:checked + label {
    color: #F39C12;
}
.checkbox-item input[type=checkbox]:checked + label::before {
    border-color: #F39C12;
}
.checkbox-item input[type=checkbox]:checked + label::after {
    color: #F39C12;
}

/* btn-check + btn-primary states (multiple choice buttons) */
.btn-check + .btn-primary:hover {
    background-color: #1F365D;
    border-color:     #1F365D;
    color:            #ffffff;
}
.btn-check + .btn-primary:active,
.btn-check + .btn-primary.active,
.btn-check + .btn-primary:active:focus,
.btn-check:active + .btn-primary {
    background-color: #F39C12;
    border-color:     #F39C12;
    color:            #1F365D;
}

/* Image select items */
li.imageselect-listitem .imageselect-container input.imageselect-checkbox:checked + label {
    border-color: #F39C12 !important;
}
li.imageselect-listitem .imageselect-container input.imageselect-checkbox:checked + label + .imageselect-radiobutton:after {
    background-color: #F39C12;
}
li.imageselect-listitem .imageselect-container input.imageselect-checkbox:checked + label + .imageselect-radiobutton:before {
    border-color: #F39C12;
}
input.imageselect-checkbox:checked ~ .imageselect-select::before {
    border-color: #F39C12;
}

/* ============================================================
   Button-style answer arrays (yes/no, gender, button lists,
   button-rendered multiple choice)
   ------------------------------------------------------------
   The Apple variation renders unselected btn-check buttons white
   with grey text (.btn-check + .btn) — which our white text override
   then makes invisible — and selected/focused ones green (#14AE5C,
   via the high-specificity .btn-check:focus:checked rule). Re-map
   every state to the Enobyte palette, matching the existing
   btn-primary (orange) / checked (light blue) treatment.
   ============================================================ */

/* Unselected button — orange like every other Enobyte button */
.btn-check + .btn-primary,
.btn-check:focus + .btn-primary {
    background-color: #FFB800;
    border-color:     #FFB800;
    color:            #1F365D;
}

/* Selected button — Enobyte light blue, incl. the focused state
   right after a click (beats the variation's 0,4,0 specificity) */
.btn-check:checked + .btn-primary,
.btn-check:checked + .btn-primary:focus,
.btn-check:focus:checked + .btn-primary,
.btn-check:checked:focus + .btn-primary {
    background-color: #93B3D9;
    border-color:     #93B3D9;
    color:            #1F365D;
}

/* ============================================================
   Yes/No buttons — explicit colour cycle (scoped to .yesno-button,
   overrides the generic button-answer styling above):
     • unselected → white on dark blue (#1F365D)
     • selected   → orange (#FFB800)
     • hovered    → matte light blue (#93B3D9)
   All three looks already exist elsewhere in the theme; this just
   re-assigns which yes/no state shows which.
   ============================================================ */

/* Unselected (incl. keyboard focus) — white on dark blue */
.yesno-button .btn-check + .btn-primary,
.yesno-button .btn-check:focus + .btn-primary {
    background-color: #1F365D;
    border-color:     #1F365D;
    color:            #ffffff;
}

/* Selected — orange (incl. the checked+focus state right after a click) */
.yesno-button .btn-check:checked + .btn-primary,
.yesno-button .btn-check:checked + .btn-primary:focus,
.yesno-button .btn-check:focus:checked + .btn-primary,
.yesno-button .btn-check:checked:focus + .btn-primary {
    background-color: #FFB800;
    border-color:     #FFB800;
    color:            #1F365D;
}

/* Hover — matte light blue, for any button the mouse is over */
.yesno-button .btn-check + .btn-primary:hover,
.yesno-button .btn-check:checked + .btn-primary:hover {
    background-color: #93B3D9;
    border-color:     #93B3D9;
    color:            #1F365D;
}