/* =========================================================================
   HUBT Janus theme for LimeSurvey (extends "vanilla")
   Inspired by the commercial "Janus" LimeSurvey template: a plain, calm
   single-column layout, cream/off-white question panels, a colored left
   accent border on the whole survey card, and PLAIN bold question text
   (no colored banner -- this is the main visual difference from "Backy").

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

:root {
    --janus-accent: #1f6f78;       /* xanh teal - dai mau nhan ben trai, progress bar */
    --janus-accent-dark: #14505a;
    --janus-blue: #2563eb;         /* xanh duong HUBT - nut bam, link */
    --janus-blue-dark: #1d4ed8;
    --janus-cream: #faf8f1;        /* nen kem cho khoi cau hoi */
    --janus-cream-alt: #f2efe4;    /* nen kem dam hon cho dong xen ke */
    --janus-text: #24303d;
    --janus-radius: 6px;
}

body {
    background-color: #eef1f4;
}

/* ---------- The survey card: plain white, with a colored left accent bar ---------- */
#outerframeContainer.outerframe {
    max-width: 900px;
    margin: 2.5rem auto;
    background-color: #ffffff;
    border-left: 6px solid var(--janus-accent);
    border-radius: var(--janus-radius);
    box-shadow: 0 1px 6px rgba(20, 30, 40, 0.12);
    padding: 1.75rem 2rem 1.25rem;
}

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

/* ---------- Progress bar: thin, calm teal fill ---------- */
.progress {
    height: 0.9rem;
    background-color: #e3e7ea;
    border-radius: 3px;
    overflow: hidden;
}

.progress-bar {
    background-color: var(--janus-accent);
    font-size: 0.7rem;
    line-height: 0.9rem;
}

/* ---------- Group / survey title: quiet, centered, not shouting ---------- */
.group-title {
    color: var(--janus-text);
    font-weight: 600;
    font-size: 1.4rem;
}

.group-description,
.group-description *,
.survey-description,
.survey-description * {
    color: #4b5563 !important;
}

.group-description strong,
.group-description b,
.survey-description strong,
.survey-description b {
    color: var(--janus-text) !important;
}

/* ---------- Question card: cream panel, PLAIN bold question text
   (no colored banner -- this is what sets Janus apart from Backy) ---------- */
.question-container {
    background-color: var(--janus-cream);
    border: 1px solid #eae6d8;
    border-radius: var(--janus-radius);
    overflow: hidden;
    margin-bottom: 1.25rem;
}

.question-title-container {
    padding: 0.9rem 1.1rem 0.4rem;
    margin: 0;
    background: transparent;
}

.question-title-container .question-text,
.question-text {
    color: var(--janus-text);
    font-weight: 700;
    margin: 0;
}

.answer-container {
    padding: 0.6rem 1.1rem 1.1rem;
    background: transparent;
}

/* Array/matrix tables: cream alternating rows, calm hover */
table.ls-answers thead tr.ls-heading th {
    background-color: var(--janus-cream-alt);
    color: var(--janus-text);
    font-weight: 600;
}

table.ls-answers > tbody > tr.ls-odd {
    background-color: var(--janus-cream-alt);
}

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

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

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

.btn-outline-secondary {
    color: var(--janus-accent);
    border-color: #d7dade;
    border-radius: var(--janus-radius);
    background-color: #ffffff;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background-color: #f4f6f7;
    color: var(--janus-accent-dark);
    border-color: #d7dade;
}

/* ---------- Links ---------- */
#outerframeContainer a {
    color: var(--janus-blue);
}

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

#outerframeContainer .navigator {
    border-top: 1px solid #e5e7eb;
    padding-top: 1rem;
}

/* =========================================================================
   Home / survey list page -- same calm, cream/white card look.
   ========================================================================= */
#surveys-list-container {
    max-width: 900px;
    margin: 2.5rem auto;
    background-color: #ffffff;
    border-left: 6px solid var(--janus-accent);
    border-radius: var(--janus-radius);
    box-shadow: 0 1px 6px rgba(20, 30, 40, 0.12);
    padding: 2rem 2rem 1.5rem;
}

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

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

#surveys-list-jumbotron span {
    display: block;
    margin-top: 0.75rem;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--janus-text);
}

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

#surveyListFooter {
    max-width: 900px;
    margin: 0 auto 2rem;
    text-align: center;
    color: #6b7280;
}

#surveyListFooter a {
    color: var(--janus-text);
}

#surveyListFooter img {
    max-height: 38px;
    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;
    }
}