/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/

/* =====================================================================
   LIM-7: port of the old production news_paper template look onto LS 6.
   Reference: claude-dev/assets/msurvey-theme-reference/ (prod vs staging
   frames). Values mined from the pre-6.x template (git c8b5f728~1):
   titles #2c3e50, accent blue #317eac / #284a6e, Tahoma 15px body.
   !important is needed where the option-driven inline <style> block from
   views/subviews/header/custom_header.twig or Bootstrap utilities win
   otherwise.
   ===================================================================== */

:root {
    --mv-font: Tahoma, Verdana, Arial, Helvetica, sans-serif;
    --mv-title-color: #2c3e50;
    --mv-text-color: #444444;
    --mv-accent: #317eac;
    --mv-accent-dark: #284a6e;
    --mv-danger: #c0392b;
    --mv-separator: #e8e8e8;
    --mv-bar-bg: #ffffff;
}

/* ---------------------------------------------------------------------
   1. Chrome: turn the fixed LimeSurvey navbar into the plain grey
      top bar of the old look (no logo, centered language changer)
   --------------------------------------------------------------------- */
#survey-nav {
    position: static;
    background-color: var(--mv-bar-bg) !important;
    border-bottom: 1px solid var(--mv-separator) !important;
    box-shadow: none;
    min-height: 0;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}
/* Show the mPlatform survey title in the brand area (old-LimeSurvey look). The
   nav_bar.twig override renders aSurveyInfo.name as .survey-title-brand instead
   of a logo. Any logo variant a per-survey brandlogo option might still emit is
   hidden (!important + .logo-container beats Bootstrap's .d-md-block). */
#survey-nav .navbar-brand.logo-container,
#survey-nav .logo-container {
    display: none !important;
}
#survey-nav .navbar-brand.survey-title-brand {
    display: block !important;
    color: var(--mv-title-color);
    font-size: 18px;
    font-weight: 600;
    padding: 6px 4px;
    white-space: normal;
}
/* hide the "Syötä pääsyavain" / "Enter access code" nav link (load-a-saved-
   response token entry); mPlatform surveys are accessed via their own token,
   so it is not needed. Language changer and other nav items stay. */
#survey-nav .nav-item:has(> a[href*="filltoken=true"]) {
    display: none !important;
}
#survey-nav .navbar-collapse {
    justify-content: center;
}
#survey-nav .navbar-nav {
    margin-left: auto !important;  /* beat .ms-auto */
    margin-right: auto !important;
}

body {
    padding-top: 0 !important; /* compensation for fixed-top no longer needed */
    background-color: #ffffff;
    font-family: var(--mv-font);
    font-size: 15px;
    color: var(--mv-text-color);
}
/* Force the Tahoma/Verdana stack over LimeSurvey's Noto Sans (applied via the
   .font-noto body class, which outranks the plain `body` rule above). Form
   controls are listed explicitly because they do not inherit the body font. */
body.font-noto,
body.font-noto .question-container,
body.font-noto .ls-answers,
body.font-noto input,
body.font-noto button,
body.font-noto select,
body.font-noto textarea,
body.font-noto .btn {
    font-family: var(--mv-font) !important;
}

/* ---------------------------------------------------------------------
   2. Progress bar: slim red indicator with visible percentage,
      quiet track (old look shows a small red pill at 0%)
   --------------------------------------------------------------------- */
.top-container .progress {
    height: 16px;
    background-color: #f7f7f7;
    border-radius: 3px;
    box-shadow: none;
}
.progress .progress-bar {
    background-color: #d9534f !important;
    min-width: 2.5em; /* keep the percentage readable at 0% */
    font-size: 11px;
    line-height: 16px;
}

/* ---------------------------------------------------------------------
   3. Flat questions: no card borders/shadows, thin separators between
      questions (also enforced when DB theme options still say "on")
   --------------------------------------------------------------------- */
.question-container {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0;
    border-bottom: 1px solid var(--mv-separator) !important;
    background-color: #ffffff !important;
}
.group-container,
div[id^="group-"] > div {
    background-color: transparent;
    border: none;
    box-shadow: none;
}

/* ---------------------------------------------------------------------
   4. Typography: bold dark-navy question titles, red asterisk
   --------------------------------------------------------------------- */
/* question text: navy and small; bold weight is NOT forced here — in the
   old look only the question line itself is bold, which comes from the
   survey-authored markup (<strong>/<b> in the question text) */
.question-title-container,
.question-title-container .ls-label-question,
.question-text {
    color: var(--mv-title-color);
    font-size: 14px;
}
.question-title-container .asterisk,
.question-title-container .text-danger {
    color: #cc0000 !important;
}
#surveynametitle,
.survey-name,
.group-title {
    color: var(--mv-title-color);
}

/* ---------------------------------------------------------------------
   5. Accent swap green -> blue for informational/interactive elements
      (submit button stays green in both looks)
   --------------------------------------------------------------------- */
/* Navigation / submit buttons stay green (production look). The sea_green
   variation was written for Bootstrap 3/4 and only colours .btn-primary on
   hover/active; the resting state falls back to Bootstrap 5's default blue
   (--bs-primary), so set the base green here. Colours taken from the sea_green
   variation (#328637 base, #246128 hover, #0f3e12 border). */
.btn-primary,
#ls-button-submit.btn-primary {
    background-color: #328637 !important;
    border-color: #0f3e12 !important;
    color: #ffffff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
#ls-button-submit.btn-primary:hover,
#ls-button-submit.btn-primary:focus {
    background-color: #246128 !important;
    border-color: #0f3e12 !important;
    color: #ffffff !important;
}
/* question help rows incl. their "?" icon */
.ls-questionhelp,
.ls-questionhelp:before,
.question-valid-container .text-info,
.question-valid-container .text-info:before {
    color: var(--mv-accent) !important;
}
/* Hide the auto-generated static Expression Manager hint boxes — numeric range
   ("must be between 0 and 10"), integer-only ("only whole numbers"), "only
   numbers", and "choose a suitable option" — to match the production look.
   Two rules working together:
   1) Hide the whole .ls-questionhelp[id^=vmsg] wrapper (incl. its "?" icon), so
      no empty icon lingers once the inner text is gone. Genuine validation
      errors (em_dberror / em_defaultvalueerror) keep their box via :not().
   2) Also zero the inner tips directly, covering any tip outside that wrapper.
   Author-written question help (.ls-questionhelp without a vmsg id) is untouched;
   the slider/number widgets already enforce range/step, so no real feedback is
   lost. */
/* NOTE: on validation failure LS does not swap classes — the same tip div
   GAINS .ls-em-error (e.g. "ls-em-tip em_value_range ls-em-error"). The
   error state must therefore be excluded here, or real error texts get
   hidden along with the idle tips. */
.ls-questionhelp[id^="vmsg"]:has(.em_default, .em_value_range, .em_value_integer):not(:has(.em_dberror, .em_defaultvalueerror, .ls-em-error)) {
    display: none !important;
}
.ls-em-tip.em_default:not(.ls-em-error),
.ls-em-tip.em_value_range:not(.ls-em-error),
.ls-em-tip.em_value_integer:not(.ls-em-error) {
    display: none !important;
}
/* checked radio / checkbox marks (awesome-bootstrap-checkbox pattern):
   the radio dot is a background-colored ::after circle, the checkbox
   mark is a font glyph colored via `color` */
.radio-item input[type="radio"]:checked + label::after {
    background-color: var(--mv-accent) !important;
    color: var(--mv-accent) !important;
}
.checkbox-item input[type="checkbox"]:checked + label::after,
.checkbox-item input[type="radio"]:checked + label::after,
.checkbox-item input[type="checkbox"]:checked + label.checkbox-label::after,
.checkbox-item input[type="checkbox"]:checked + label.control-label::after {
    color: var(--mv-accent) !important;
    background-color: transparent !important;
}
/* the checked checkbox BOX stays white with a visible border — only the
   mark is blue. Two things fight this: stock styling fills the box solid
   with a white glyph, and theme.css removes the border on checked
   ("Remove borders when checkbox is checked"). Restore both. */
.checkbox-item input[type="checkbox"]:checked + label::before,
.checkbox-item input[type="checkbox"]:checked + label.checkbox-label::before,
.checkbox-item input[type="checkbox"]:checked + label.control-label::before {
    background-color: #ffffff !important;
    border: 1px solid var(--mv-accent) !important;
}
/* darker unselected radio/checkbox ring than the pale awesome-bootstrap
   default, matching the production look ("pallurat tummempia") */
.radio-item input[type="radio"] + label::before,
.checkbox-item input[type="checkbox"] + label::before {
    border-color: #6c757d;
}
/* ring of the selected control follows the accent too */
.radio-item input[type="radio"]:checked + label::before,
.checkbox-item input[type="checkbox"]:checked + label::before {
    border-color: var(--mv-accent);
}
/* input focus: blue instead of green */
.form-control:focus,
input[type="text"]:focus,
textarea:focus {
    border-color: var(--mv-accent) !important;
    box-shadow: 0 0 0 0.15rem rgba(49, 126, 172, 0.25) !important;
    outline: none;
}
a {
    color: var(--mv-accent);
}
a:hover,
a:focus {
    color: var(--mv-accent-dark);
}

/* ---------------------------------------------------------------------
   6. Array questions: borderless table with the old-look grey answer
      band (core renders them with Bootstrap .table-bordered)
   --------------------------------------------------------------------- */
.answer-container .ls-table-wrapper,
.answer-container table.ls-answers,
.answer-container table.table-bordered,
.answer-container table.ls-answers > :not(caption),
.answer-container table.table-bordered > :not(caption),
.answer-container table.ls-answers > :not(caption) > *,
.answer-container table.table-bordered > :not(caption) > *,
.answer-container table.ls-answers > * > tr > th,
.answer-container table.ls-answers > * > tr > td,
.answer-container table.table-bordered > * > tr > th,
.answer-container table.table-bordered > * > tr > td {
    border: 0 !important;
    background-color: transparent;
}
/* full width, natural column sizing like the old look */
.answer-container table.ls-answers {
    width: 100%;
    table-layout: auto;
}
/* header labels: normal weight, centered above the band, no mid-word
   breaking */
table.ls-answers .ls-heading th,
table.ls-answers .ls-heading td {
    font-weight: normal !important;
    color: var(--mv-text-color);
    font-size: 14px;
    text-align: center;
    vertical-align: bottom;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
    padding: 4px 6px;
}
/* answer rows: zebra striping (alternating white / soft grey) with no row
   separators, like production. ls-odd/ls-even come from core answer_row.twig.
   Must outrank the border/background reset above. */
.answer-container table.ls-answers > tbody > tr > th,
.answer-container table.ls-answers > tbody > tr > td {
    border-top: 0 !important;
    border-bottom: 0 !important;
    vertical-align: middle;
}
.answer-container table.ls-answers > tbody > tr.ls-odd > th,
.answer-container table.ls-answers > tbody > tr.ls-odd > td {
    background-color: #ffffff !important;
}
.answer-container table.ls-answers > tbody > tr.ls-even > th,
.answer-container table.ls-answers > tbody > tr.ls-even > td {
    background-color: #f2f2f2 !important;
}
.answer-container table.ls-answers > tbody > tr > th.answertext {
    text-align: left;
    font-weight: normal;
    color: var(--mv-text-color);
}
/* repeated heading rows in long arrays live inside tbody (one per ~25
   rows, core repeatheadings feature) — render them as headings, not as
   grey answer bands, so the option names stay visible at intervals */
.answer-container table.ls-answers > tbody > tr.ls-heading > th,
.answer-container table.ls-answers > tbody > tr.ls-heading > td,
.answer-container table.ls-answers > tbody > tr.ls-heading-repeat > th,
.answer-container table.ls-answers > tbody > tr.ls-heading-repeat > td {
    background-color: transparent !important;
    border: 0 !important;
    font-weight: normal !important;
    color: var(--mv-text-color);
    font-size: 14px;
    text-align: center;
    vertical-align: bottom;
    padding: 12px 6px 4px;
}

/* ---------------------------------------------------------------------
   7. Question help below the answers like the old look, independent of
      the DB-stored questionhelptextposition option; .question-container
      is a Bootstrap row (flex), so flex order is enough
   --------------------------------------------------------------------- */
.question-container > .question-help-container {
    order: 10;
}

/* ---------------------------------------------------------------------
   8. Mandatory asterisk after the question title (old look). The stock
      .asterisk div precedes the title text; hide it and append the star
      to the title instead. :has() needs a modern browser — same baseline
      LS6 itself targets.
   --------------------------------------------------------------------- */
.question-title-container .asterisk {
    display: none;
}
.question-title-container:has(.asterisk) .ls-label-question > p:last-child::after,
.question-title-container:has(.asterisk) .ls-label-question:not(:has(> p))::after {
    content: " *";
    color: #cc0000;
    font-weight: 700;
}

/* ---------------------------------------------------------------------
   9. Compact radio/checkbox option lists like the old look. Scoped to
      div items so array-table cells (td.answer-item) keep their band.
   --------------------------------------------------------------------- */
div.answer-item.radio-item,
div.answer-item.checkbox-item {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0.15em !important;
    padding-bottom: 0.15em !important;
}
div.answer-item.radio-item label,
div.answer-item.checkbox-item label {
    margin-bottom: 0;
}

/* ---------------------------------------------------------------------
   10. Sliders: old blue bootstrap-slider skin with the numeric value
       bubble above the handle (LS6 bundles the same bootstrap-slider
       lib the old template skinned)
   --------------------------------------------------------------------- */
.slider-track {
    background-color: #ececec;
    background-image: none;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    height: 8px;
    border-radius: 4px;
}
/* !important throughout: LS6 bundles bootstrap-slider's own CSS (green
   selection, black value bubble) and loads it after this file, so the accent
   colors only win with !important. */
.slider-selection {
    background-color: #c5e0f5 !important;
    background-image: none !important;
    box-shadow: none;
}
.slider-handle {
    background-color: var(--mv-accent) !important;
    background-image: none !important;
    border: none;
    border-radius: 50%;
    width: 18px;
    height: 18px;
}
/* the value bubble: keep it visible while interacting and style it blue */
.slider .tooltip {
    opacity: 1;
}
/* bootstrap-slider also renders min/max tooltips; the opacity:1 above would
   make their stray arrows show near the handle. Keep only the main bubble. */
.slider .tooltip-min,
.slider .tooltip-max {
    display: none !important;
}
.slider .tooltip-inner {
    background-color: var(--mv-accent) !important;
    color: #ffffff !important;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 3px;
}
.slider .tooltip .tooltip-arrow,
.slider .tooltip .arrow::before {
    border-top-color: var(--mv-accent) !important;
}

/* ---------------------------------------------------------------------
   11. Survey messages: quiet plain text instead of orange alert boxes
       ("Kysely ei ole toistaiseksi aktivoitu", "Vastauksia ei
       tallennettu", ...)
   --------------------------------------------------------------------- */
#outerframeContainer .alert.alert-warning,
#outerframeContainer .alert.alert-danger,
#outerframeContainer .alert.alert-info {
    background: transparent !important;
    border: none !important;
    box-shadow: none;
    text-align: center;
}
#outerframeContainer .alert.alert-warning,
#outerframeContainer .alert.alert-info {
    color: #8a8a8a;
}
#outerframeContainer .alert.alert-danger {
    color: var(--mv-danger);
}
#outerframeContainer .alert .btn-close {
    display: none;
}