/* =========================================================================
   HUBT Backy theme for LimeSurvey (extends "vanilla")
   Inspired by the commercial "Backy" LimeSurvey template:
   a glass-like card floating over a full-bleed sky background, a solid
   blue gradient banner for the question prompt, a thin percentage
   progress bar, and rounded blue/outline buttons.

   Change the variables below to retint the whole theme.
   ========================================================================= */

:root {
    --backy-blue: #2f7fb3;
    --backy-blue-dark: #205e87;
    --backy-blue-light: #5fa8d3;
    --backy-card-bg: #eef4f9;
    --backy-radius: 6px;
}

html, body {
    height: 100%;
}

body {
    background: linear-gradient(180deg, #bcd9ee 0%, #8fbfdd 35%, #5f9dc4 70%, #3f7ca3 100%) fixed;
    background-attachment: fixed;
}

/* ---------- The floating "glass card" that holds the whole survey ---------- */
#outerframeContainer.outerframe {
    max-width: 960px;
    margin: 3rem auto;
    background-color: var(--backy-card-bg);
    border-radius: var(--backy-radius);
    box-shadow: 0 10px 35px rgba(15, 40, 60, 0.35);
    padding: 1.75rem 2rem 1.25rem;
}

@media (max-width: 767px) {
    #outerframeContainer.outerframe {
        margin: 0.75rem;
        padding: 1.1rem 1rem 1rem;
    }
}

/* ---------- Progress bar: thin track, blue fill with the % label inside ---------- */
.progress {
    height: 1.5rem;
    background-color: #dde3e8;
    border-radius: 3px;
    overflow: hidden;
}

.progress-bar {
    background-color: var(--backy-blue);
    font-weight: 600;
    font-size: 0.8rem;
}

/* ---------- Group / survey title ---------- */
.group-title {
    color: #33475b;
    font-weight: 700;
}

/* Force readable dark text for the survey's own welcome/description
   content. LimeSurvey wraps the welcome-page survey description in
   Bootstrap's ".text-info" utility class (a light blue), and authors
   often paste text with their own inline color on top of that -- both
   need to be overridden regardless of source. */
.group-description,
.group-description *,
.survey-description,
.survey-description * {
    color: #2b2f36 !important;
}

.group-description strong,
.group-description b,
.group-description u,
.survey-description strong,
.survey-description b,
.survey-description u {
    color: #1a3a5c !important;
}

/* ---------- Question card ---------- */
.question-container {
    background-color: #ffffff;
    border-radius: var(--backy-radius);
    box-shadow: 0 1px 4px rgba(15, 40, 60, 0.12);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

/* The signature Backy look: question text sits on a solid blue gradient
   banner spanning the full width of the question card. */
.question-title-container {
    background: linear-gradient(135deg, var(--backy-blue) 0%, var(--backy-blue-dark) 100%);
    padding: 1rem 1.25rem;
    margin: 0;
}

.question-title-container .question-text,
.question-text {
    color: #ffffff;
    font-weight: 600;
    margin: 0;
}

.question-title-container .ls-label-mandatory,
.question-title-container .ls-help,
.question-title-container small {
    color: #ffffff;
}

.answer-container {
    padding: 1.25rem;
    background-color: #ffffff;
}

/* Array/matrix table headers: keep them plain (not part of the blue
   banner) -- only the question prompt itself gets the blue treatment. */
table.ls-answers thead tr.ls-heading th {
    background-color: #f7f9fb;
    color: #33475b;
    font-weight: 600;
}

table.ls-answers > tbody > tr:hover {
    background-color: #eaf2f8;
}

/* ---------- Buttons ---------- */
.btn-primary {
    background-color: var(--backy-blue);
    border-color: var(--backy-blue);
    border-radius: var(--backy-radius);
    font-weight: 500;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--backy-blue-dark);
    border-color: var(--backy-blue-dark);
}

.btn-outline-secondary {
    color: var(--backy-blue);
    border-color: #c7d3dc;
    border-radius: var(--backy-radius);
    background-color: #ffffff;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background-color: #f0f4f7;
    color: var(--backy-blue-dark);
    border-color: #c7d3dc;
}

/* ---------- Links (Resume later / Question index / Exit and clear survey) ---------- */
#outerframeContainer a {
    color: var(--backy-blue);
}

#outerframeContainer a:hover {
    color: var(--backy-blue-dark);
}

/* ---------- Slider question handles, to echo Backy's dark round handle ---------- */
.ui-slider .ui-slider-handle,
.noUi-handle {
    background-color: #33475b !important;
    border-color: #33475b !important;
}

/* ---------- Footer ---------- */
#outerframeContainer .navigator {
    border-top: 1px solid #d9e1e8;
    padding-top: 1rem;
}

/* =========================================================================
   Home / survey list page (layout_survey_list.twig) -- same glass-card
   look as the question pages, so the whole site feels consistent.
   ========================================================================= */
#surveys-list-container {
    max-width: 960px;
    margin: 3rem auto;
    background-color: var(--backy-card-bg);
    border-radius: var(--backy-radius);
    box-shadow: 0 10px 35px rgba(15, 40, 60, 0.35);
    padding: 2rem 2rem 1.5rem;
}

@media (max-width: 767px) {
    #surveys-list-container {
        margin: 0.75rem;
        padding: 1.25rem 1rem;
    }
}

#surveys-list-jumbotron img {
    max-height: 110px;
    width: auto;
}

#surveys-list-jumbotron span {
    display: block;
    margin-top: 0.75rem;
    font-size: 1.4rem;
    font-weight: 700;
    color: #33475b;
}

#surveys-list-container .btn-primary {
    margin-bottom: 0.5rem;
}

#surveyListFooter {
    max-width: 960px;
    margin: 0 auto 2rem;
    text-align: center;
    color: #eaf2f8;
}

#surveyListFooter a {
    color: #ffffff;
}

#surveyListFooter img {
    max-height: 40px;
    width: auto;
}

/* Logo now visible on mobile navbar too (click to exit/reset survey session) -- keep it compact there. */
@media (max-width: 767px) {
    .logo-container > img {
        max-height: 32px;
        padding: 6px 10px;
    }
}