/******************
    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
*/

/****************************************************
 PG-like UI overrides (custom.css)
 Loaded last – safe place for overrides.
****************************************************/

/* 0) Brand variables (zmień wartości jeśli masz inne w swoim brandbooku) */
:root{
  --pg-navy: rgb(0,55,103);
  --pg-gray: rgb(145,145,149);
  --pg-bg: #f5f6f8;
  --pg-text: #1f2a37;
  --pg-border: #d6d9dd;
  --pg-danger: #b00020; /* tylko błędy/walidacja */
}

/* 1) Global typography + background */
html body{
  font-family: Arial, Helvetica, sans-serif !important;
  color: var(--pg-text) !important;
  background: var(--pg-bg) !important;
}

/* 2) Reduce “heavy” bold labels */
html body label{
  font-weight: 400 !important;
}

/* 3) Question titles readable (semi-bold) */
html body .question-title-container,
html body .question-title-container .ls-question-text,
html body .question-title-container .question-text{
  font-weight: 600 !important;
}

/* 4) Navbar / top bar */
html body .navbar,
html body .navbar.navbar-default.navbar-fixed-top{
  background: var(--pg-navy) !important;
  border-bottom: 1px solid rgba(255,255,255,0.15) !important;
}

/* Brand text/link in navbar */
html body .navbar .navbar-brand,
html body .navbar .navbar-brand a,
html body .navbar .nav-link,
html body .navbar a{
  color: #fff !important;
}

/* 5) Links */
html body a{
  color: var(--pg-navy) !important;
}
html body a:hover,
html body a:focus{
  color: var(--pg-navy) !important;
  text-decoration: underline !important;
}

/* 6) Primary buttons (Next/Back/Submit etc.) */
html body .btn-primary,
html body .btn.btn-primary{
  background: var(--pg-navy) !important;
  border-color: var(--pg-navy) !important;
  box-shadow: none !important;
  border-radius: 2px !important;
}
html body .btn-primary:hover,
html body .btn.btn-primary:hover{
  filter: brightness(0.92) !important;
}

/* Secondary buttons */
html body .btn-secondary,
html body .btn.btn-default,
html body .btn-outline-secondary{
  background: #fff !important;
  border-color: var(--pg-gray) !important;
  color: var(--pg-text) !important;
  box-shadow: none !important;
  border-radius: 2px !important;
}

/* 7) Focus styles (ważne dla dostępności) */
html body .btn:focus,
html body .btn:active:focus,
html body a:focus,
html body input:focus,
html body select:focus,
html body textarea:focus{
  outline: none !important;
  box-shadow: 0 0 0 0.2rem rgba(0,55,103,0.25) !important;
  border-color: rgba(0,55,103,0.45) !important;
}

/* 8) Cards/questions containers – clean */
html body .question-container{
  background: #fff !important;
  border: 1px solid var(--pg-border) !important;
  border-bottom: 1px solid var(--pg-border) !important;
  border-radius: 2px !important;
}

/* spacing */
html body .question-title-container{
  padding-top: 0.9rem !important;
  padding-bottom: 0.7rem !important;
}

/* 9) Progress bar */
html body .progress{
  background: rgba(255,255,255,0.25) !important;
  border-radius: 2px !important;
}
html body .progress .progress-bar{
  background: #fff !important;
  color: var(--pg-navy) !important;
  font-weight: 600 !important;
}

/* 10) Validation / errors */
html body .text-danger,
html body .has-error .help-block,
html body .has-error .form-control{
  color: var(--pg-danger) !important;
  border-color: var(--pg-danger) !important;
}
html body .question-valid-container .text-danger{
  font-weight: 700 !important;
}

/* 11) Checkboxes / radios accent (bootswatch variants) */
html body .basic label::after,
html body .cerulean label::after,
html body .cosmos label::after,
html body .cyborg label::after,
html body .darkly label::after,
html body .flatly label::after,
html body .journal label::after,
html body .lumen label::after,
html body .paper label::after,
html body .readable label::after,
html body .sandstone label::after,
html body .simplex label::after,
html body .slate label::after,
html body .spacelab label::after,
html body .superhero label::after,
html body .united label::after,
html body .yeti label::after{
  background-color: var(--pg-navy) !important;
}

/* 12) Headings spacing */
html body h1, html body h2, html body h3,
html body .h1, html body .h2, html body .h3{
  color: var(--pg-text) !important;
}

/********************************************
 Fix: question header bar + instruction + errors
********************************************/

/* A) Usuń/wycisz ciemną belkę nagłówka pytania */
html body .question-title-container{
  background: transparent !important;
  border-bottom: 1px solid var(--pg-border) !important;
}

/* B) Pytanie: większe, lewy wyrównany */
html body .question-title-container .ls-question-text,
html body .question-title-container .question-text,
html body .question-title-container .question-title{
  color: var(--pg-navy) !important;
  font-size: 1.15rem !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  text-align: left !important;
}

/* C) Instrukcja/komunikaty w kontenerze walidacji */
html body .question-valid-container{
  text-align: left !important;
  padding: 0.25rem 0.75rem 0.5rem 0.75rem !important;
}
html body .question-valid-container .text-info,
html body .question-valid-container .text-muted{
  color: var(--pg-gray) !important;
  font-weight: 400 !important;
  font-size: 0.95rem !important;
  display: block !important;
  margin: 0.25rem 0 0 0 !important;
  text-align: left !important;
}

/* D) Błędy: czytelny box */
html body .question-valid-container .text-danger{
  display: block !important;
  background: #fff5f5 !important;
  border: 1px solid var(--pg-danger) !important;
  color: var(--pg-danger) !important;
  padding: 0.5rem 0.75rem !important;
  border-radius: 2px !important;
  font-weight: 700 !important;
  margin: 0.35rem 0 0 0 !important;
}

/* E) Odpowiedzi: label normal weight */
html body .answer-container label{
  font-weight: 400 !important;
}

/* F) Wymuś brak tła w nagłówku pytania */
html body .question-container .question-title-container,
html body .question-container .question-title-container *{
  background: transparent !important;
}

/********************************************
 Fix: visible selection for scale buttons (1–5)
********************************************/

/* Base style (unselected) */
html body .ls-answers .btn-group label.btn,
html body .ls-answers .btn-group .btn{
  background: var(--pg-navy) !important;
  color: #fff !important;
  border: 1px solid var(--pg-navy) !important;
  box-shadow: none !important;
  opacity: 0.75;
}

/* Hover */
html body .ls-answers .btn-group label.btn:hover{
  opacity: 0.9;
}

/* SELECTED STATE */
html body .ls-answers input[type="radio"]:checked + label.btn,
html body .ls-answers input[type="checkbox"]:checked + label.btn{
  background: #002b52 !important;
  border-color: #001f3d !important;
  color: #ffffff !important;
  opacity: 1 !important;
  box-shadow: inset 0 0 0 2px #ffffff !important;
}

/* Keyboard focus */
html body .ls-answers input[type="radio"]:focus + label.btn,
html body .ls-answers input[type="checkbox"]:focus + label.btn{
  outline: none !important;
  box-shadow:
    inset 0 0 0 2px #ffffff,
    0 0 0 3px rgba(0,55,103,0.4) !important;
}

/* Slightly larger buttons */
html body .ls-answers .btn-group label.btn{
  min-width: 64px;
  font-weight: 700;
}

/********************************************
 Remove dark bars under question (tips/validation lines)
********************************************/

html body .question-valid-container,
html body .question-help-container,
html body .question-help-container .ls-questionhelp,
html body .question-valid-container .ls-questionhelp{
  background: transparent !important;
  border: none !important;
}

html body .question-valid-container .help-block,
html body .question-help-container .help-block,
html body .question-valid-container .text-info,
html body .question-valid-container .text-muted{
  background: transparent !important;
  border: none !important;
  padding: 0.25rem 0 !important;
  margin: 0.25rem 0 0 0 !important;
  text-align: left !important;
  color: var(--pg-gray) !important;
}

/********************************************
 Force question title text color (fix "white questions")
********************************************/

html body .question-title-container,
html body .question-title-container *,
html body .question-title,
html body .question-title *,
html body .ls-question-text,
html body .ls-question-text *,
html body .question-text,
html body .question-text *{
  color: var(--pg-navy) !important;
}

html body .question-container .card-header,
html body .question-container .card-header *,
html body .question-container .panel-heading,
html body .question-container .panel-heading *{
  color: var(--pg-navy) !important;
  background: transparent !important;
}

/********************************************
 Remove vertical borders on answer area
********************************************/
html body .answer-container,
html body .question-help-container{
  border-left: none !important;
  border-right: none !important;
}

/********************************************
 Navigator: Previous left, Next right (one row)
********************************************/

/* Kontener nawigacji */
html body #navigator-container{
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;

  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;

  margin-top: 1rem !important;
  padding-top: 0.5rem !important;
}

/* Wrappery przycisków (najczęściej: previous/next/submit) */
html body #navigator-container .ls-move-previous,
html body #navigator-container .ls-move-next,
html body #navigator-container .ls-move-submit{
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;         /* kluczowe: nie 100% */
  flex: 0 0 auto !important;
}

/* Next/Submit zawsze po prawej */
html body #navigator-container .ls-move-next,
html body #navigator-container .ls-move-submit{
  margin-left: auto !important;
}

/* Same przyciski */
html body #navigator-container .btn,
html body .ls-button-submit,
html body .ls-button-next,
html body .ls-button-previous{
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;

  align-items: center !important;
  justify-content: center !important;

  min-height: 44px !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  width: auto !important;         /* kluczowe: nie full width */
}

/* Mobile: nadal jeden wiersz (jeśli wolisz kolumnę na mobile, usuń ten blok i ustaw flex-direction: column) */
@media (max-width: 576px){
  html body #navigator-container{
    flex-direction: row !important;
  }
}

/* Zachowaj styl primary nav buttons */
html body #navigator-container .btn-primary,
html body .ls-button-next.btn-primary,
html body .ls-button-submit.btn-primary{
  background: var(--pg-navy) !important;
  border-color: var(--pg-navy) !important;
  color: #fff !important;
}
/* Hide ONLY the mandatory asterisk (do not hide the whole question) */
html body .asterisk,
html body .question-title-container .asterisk,
html body .ls-question-mandatory-asterisk,
html body span.asterisk,
html body sup.asterisk {
  display: none !important;
}

/* Mobile: add safe side padding (gutters) so text doesn't touch screen edges */
@media (max-width: 576px){

  /* Main page wrappers used by LimeSurvey templates */
  html body .container,
  html body .container-fluid,
  html body #outerframeContainer,
  html body #outerframeContainer .container,
  html body #outerframeContainer .container-fluid,
  html body #survey-container,
  html body #surveyContainer{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* If template uses rows that kill gutters */
  html body .row{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Make question cards breathe a bit */
  html body .question-container{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
/* Make question text normal; keep bold only where explicitly set in HTML (e.g., <strong>) */
html body .question-title-container .ls-question-text,
html body .question-title-container .question-text,
html body .question-title-container .question-title{
  font-weight: 400 !important;
}

/* But keep <strong>/<b> emphasized */
html body .question-title-container strong,
html body .question-title-container b{
  font-weight: 700 !important;
}