/* =========================================================
   BRILL LimeSurvey Theme - custom.css (standardized)
   Cel: normalny rozmiar UI, dobry kontrast, spójna typografia
   ========================================================= */

/* -------------------------
   0) Design tokens
-------------------------- */
:root{
  --bg: #231f20;
  --bg-2: #121212;
  --surface: #2e2b2c;

  --fg: #ffffff;
  --fg-muted: #d3d3d3;
  --fg-dim: #9a9a9a;

  --brand: #ba141a;
  --brand-dark: #8e1014;

  --radius: 5px;
  --shadow: 0 4px 10px rgba(0,0,0,.6);

  --font: "Aptos","Arial",sans-serif;

  --fs-base: 14px;
  --lh-base: 1.45;

  --fs-question: 18px;
  --lh-question: 22px;

  --fs-group: 32px;
  --lh-group: 1.2;
}

/* -------------------------
   1) Layout: full-height + sticky footer
-------------------------- */
html, body{
  height:100%;
  margin:0;
}

body{
  display:flex;
  flex-direction:column;

  background-color: var(--bg);
  color: var(--fg);

  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}

article{ flex:1; }

footer{
  background-color: var(--bg-2);
  color: var(--fg);
  border-top: 2px solid var(--brand);
  text-align:center;
  padding:12px 0;
  font-size: 0.875rem;
  width:100%;
  box-sizing:border-box;
  position:relative;
}

/* -------------------------
   2) Ogólne elementy
-------------------------- */
a{
  color: var(--brand);
  text-decoration:none;
}
a:hover{
  color: var(--brand-dark);
  text-decoration:underline;
}

.container-md{
  background-color: var(--bg);
}

h1,h2,h3,h4,h5,h6{
  color: var(--fg);
  margin-bottom: 12px;
}

/* -------------------------
   3) Header / logo / navbar
-------------------------- */
.brand-header{
  text-align:center;
  padding:10px;
  background-color: var(--bg);
}

svg{
  max-width:40%;
  width:auto;
  height:auto;
}

.brand-logo{ margin:0 auto; }

.logo-container > img{
  padding:15px;
  padding-left:0;
}

.navbar{
  background-color: var(--bg-2) !important;
  color: var(--fg);
  padding: 8px 0;
  border-bottom: 2px solid var(--brand);
}

.nav-link{
  color: var(--fg) !important;
}

.navbar-brand.logo-container{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  margin:0;
}

.logo{
  width:auto;
  transition:max-height .3s ease;
}

#navbar-menu{
  display:flex;
  align-items:center;
  justify-content:flex-end;
}

#navbar-menu .dropdown-menu,
#main-dropdown{
  background-color: var(--surface) !important;
  border: 1px solid var(--brand);
  border-radius: var(--radius);
  padding: 5px 0;
  box-shadow: var(--shadow);
  font-size: var(--fs-base);
}

#navbar-menu .dropdown-header,
#main-dropdown .dropdown-header{
  color: var(--fg-muted);
  font-size: 12px;
  text-transform: uppercase;
  padding: 8px 15px;
}

#main-dropdown .dropdown-header{
  font-weight:700;
  border-bottom: 1px solid var(--brand);
  background-color:#3a3a3a;
  color: var(--fg);
}

#navbar-menu .dropdown-item,
#main-dropdown .dropdown-item{
  color: var(--fg);
  padding: 8px 15px;
  transition: background-color .2s ease, color .2s ease;
  background-color: var(--surface);
  font-size: var(--fs-base);
}

#navbar-menu .dropdown-item:hover,
#main-dropdown .dropdown-item:hover{
  background-color: var(--brand);
  color: var(--fg);
}

#navbar-menu .dropdown-item.disabled,
#main-dropdown .dropdown-item.disabled{
  color:#7a7a7a;
  background-color: transparent;
  cursor:not-allowed;
}

#main-dropdown{
  min-width: 250px;
  max-width: 300px;
  text-align:left;
}

#main-dropdown .dropdown-item.active,
#main-dropdown .dropdown-item:focus{
  background-color: var(--brand-dark);
  color: var(--fg);
  font-weight:700;
}

@media (max-width: 768px){
  .navbar-brand.logo-container,
  #navbar-menu{ justify-content:center; }
  .logo{ max-height:40px; }
  #navbar-menu{ margin-top:10px; }
}

@media (max-width: 576px){
  .navbar-brand.logo-container,
  #navbar-menu{
    flex: 1 1 100%;
    justify-content:center;
    text-align:center;
  }
  .logo{ max-height:30px; }
  #navbar-menu{ margin-top:10px; }
}

/* -------------------------
   4) Alerty / progress
-------------------------- */
.alert-warning{
  background-color: var(--brand);
  color: var(--fg);
  border:none;
  border-radius: var(--radius);
  font-size: var(--fs-base);
}

.progress-bar{ background-color: var(--brand); }

/* -------------------------
   5) Formularze
-------------------------- */
input, select, textarea,
.form-control{
  background-color:#ffffff;
  color: var(--bg);
  border: 1px solid var(--brand);
  padding: 6px 10px;
  border-radius: var(--radius);
  font-size: var(--fs-base);
  line-height: 1.4;
}

textarea,
textarea.form-control{
  resize: vertical !important;
}

input:focus, select:focus, textarea:focus,
.form-control:focus{
  outline:none;
  border-color: var(--brand-dark);
  box-shadow:none;
}

input::placeholder,
textarea::placeholder{
  color: var(--fg-dim);
  opacity:1;
}

/* Labelki */
label,
label.control-label,
.control-label{
  color: var(--fg);
  font-size: var(--fs-base);
}

/* Input group */
.input-group{ flex-wrap:nowrap; }

.input-group-text{
  padding: 6px 10px;
  border-width: 2px;
  line-height: 16px;
}

button.input-group-text{
  height:100%;
  margin:0;
  margin-bottom:-2px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 2px solid #6f748d;
  border-left:none;
  background-color:#b8131a;
  color:#fff;
}

/* -------------------------
   6) Przyciski
-------------------------- */
.btn{
  font-size: var(--fs-base);
  padding: 6px 12px;
  border-radius: .25rem;
}

.btn-primary{
  background-color:#444444 !important;
  border:none;
  color: var(--fg);
  cursor:pointer;
  transition: background-color .2s ease, box-shadow .2s ease;
}
.btn-primary:hover{
  background-color:#666666 !important;
  box-shadow: 0 0 0 .2rem rgba(102,102,102,.25);
}
.btn-primary:focus{
  background-color:#444444 !important;
  outline:none;
  box-shadow: 0 0 0 .25rem rgba(186,20,26,.5);
}
.btn-primary.active,
.btn-primary:active{
  background-color: var(--brand) !important;
  color: var(--fg);
  outline:none;
  box-shadow: 0 0 0 .25rem rgba(186,20,26,.5);
}

.btn-check{ display:none; }

.btn-check:checked + .btn-primary{
  background-color: var(--brand) !important;
  color: var(--fg);
  box-shadow: 0 0 0 .25rem rgba(186,20,26,.5);
}

/* Nawigacja ankiety (Dalej/Wstecz) */
button.ls-move-btn{
  padding: 8px 14px;
  font-size: var(--fs-base);
  line-height:1.2;
  border-radius: .25rem;
  border:none;
}

button.ls-move-btn.btn-outline-secondary{
  border: 1px solid var(--brand);
  color: var(--brand);
  background: transparent;
}
button.ls-move-btn.btn-outline-secondary:hover{
  background-color: var(--brand);
  color: var(--fg);
}

button.ls-move-btn.btn-primary{
  background-color: var(--brand);
  color: var(--fg);
}
button.ls-move-btn.btn-primary:hover{
  background-color: var(--brand-dark);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active{
  border-color: var(--brand) !important;
  outline:none;
  box-shadow: 0 0 0 .2rem rgba(186,20,26,.25);
}

/* -------------------------
   7) Tabele
-------------------------- */
table th{
  background-color: var(--brand);
  color: var(--fg);
  text-align:center;
}

table td{
  background-color: var(--bg);
  color: var(--fg);
  border: 1px solid var(--brand);
  text-align:left;
}

/* -------------------------
   8) Sekcje ankiety: tytuł/opis/welcome
-------------------------- */
.survey-name,
.survey-description,
.survey-welcome{
  margin-bottom: 16px;
}

.survey-name{
  color: var(--fg);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
}

.survey-description{
  color: var(--fg-muted);
  font-size: var(--fs-base);
  font-weight: 400;
}

.survey-welcome{
  color: var(--fg);
  font-size: var(--fs-base);
}

.number-of-questions{
  color: var(--fg-muted);
  font-size: 13px;
  font-style: italic;
  margin-top: 10px;
}

/* -------------------------
   9) GRUPY: tytuł grupy
   (Twoje wymaganie: 32px, 200, padding-bottom 20px)
-------------------------- */
.group-title{
  font-size: var(--fs-group) !important;
  font-weight: 200 !important;
  line-height: var(--lh-group) !important;
  margin: 18px 0 10px !important;
  padding-bottom: 20px !important;
  color: var(--fg) !important;
}

/* -------------------------
   10) PYTANIA: spójny tytuł pytania
   (Twoje wymaganie: 24px/600/32px)
-------------------------- */
.question-container{
  margin-bottom: 18px;
}

/* kontener tytułu pytania */
.question-title-container{
  font-family: var(--font);
  font-size: var(--fs-question);
  font-weight: 600;
  line-height: var(--lh-question);
  color: var(--fg);
}

/* numer pytania */
.question-number{
  font-size: var(--fs-question) !important;
  color:#999999 !important;
  margin-right: .5rem;
  font-weight: 700;
}

/* code pytania */
.question-code{
  color:#cccccc;
  margin-right: .5rem;
  font-size: var(--fs-base);
}

/* tekst pytania (wrapper) */
.question-text{
  font-size: var(--fs-question);
  font-weight: 600;
  line-height: var(--lh-question);
  color: var(--fg);
}

/* faktyczny label pytania w środku */
.question-text .ls-label-question{
  font-family: var(--font) !important;
  font-size: var(--fs-question) !important;
  font-weight: 600 !important;
  line-height: var(--lh-question) !important;
  color: var(--fg) !important;
}

/* asterisk */
.asterisk{
  color: var(--brand);
  font-size: 12px;
  vertical-align: super;
}

.ri-more-fill{ color: var(--brand) !important; }

/* -------------------------
   11) Komunikaty pod pytaniem (help/valid)
-------------------------- */
.question-valid-container,
.question-valid-container.text-info,
.question-valid-container .ls-questionhelp,
.question-valid-container .ls-question-message,
.ls-em-tip,
.em_default,
.ls-em-success{
  color: var(--fg-muted) !important;
}

.question-valid-container .ls-question-message{
  background: transparent !important;
  border: none !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  margin-top: 6px !important;
}

/* -------------------------
   12) Checkbox/label linki
-------------------------- */
.checkbox-label a,
.control-label a{
  color: var(--brand) !important;
  text-decoration: underline;
}

.checkbox-label a:hover,
.control-label a:hover{
  color: #ff4b4f !important;
}

/* -------------------------
   13) "INNE" (other) - pole w nowej linii na całą szerokość
   Target: .othertext-label-checkox-container + .other-text-item
-------------------------- */
.question-item.answer-item.checkbox-text-item .row{
  align-items: flex-start;
}

/* wymuszenie łamania na nową linię */
.question-item.answer-item.checkbox-text-item .row{
  flex-wrap: wrap;
}

/* kolumna z checkboxem/etykietą: zostaje auto */
.question-item.answer-item.checkbox-text-item .row > .col-auto:first-child{
  flex: 0 0 auto;
}

/* kolumna z inputem other: nowa linia + 100% */
.question-item.answer-item.checkbox-text-item .row > .col-auto:nth-child(2){
  flex: 0 0 100%;
  max-width: 100%;
  margin-top: 8px;
}

/* input w other na całą szerokość */
.question-item.answer-item.checkbox-text-item .other-text-item,
.question-item.answer-item.checkbox-text-item .other-text-item .form-control{
  width: 100% !important;
}

/* estetyka label "Inne:" */
.othertext-label-checkox-container .checkbox-label{
  font-size: var(--fs-base) !important;
  color: var(--fg) !important;
  font-weight: 400 !important;
}

/* -------------------------
   14) Tooltip / popover
-------------------------- */
.tooltip .tooltip-inner{
  background-color: var(--bg-2) !important;
  color: var(--fg) !important;
  font-size: 12px !important;
  padding: 6px 8px !important;
}

.tooltip.bs-tooltip-top .tooltip-arrow::before,
.tooltip.bs-tooltip-bottom .tooltip-arrow::before,
.tooltip.bs-tooltip-start .tooltip-arrow::before,
.tooltip.bs-tooltip-end .tooltip-arrow::before{
  border-top-color: var(--bg-2) !important;
  border-bottom-color: var(--bg-2) !important;
  border-left-color: var(--bg-2) !important;
  border-right-color: var(--bg-2) !important;
}

.popover{
  background-color: var(--bg-2) !important;
  color: var(--fg) !important;
  border: 1px solid var(--brand) !important;
}
.popover .popover-body{
  color: var(--fg) !important;
  font-size: 12px !important;
}

/* -------------------------
   15) Modal
-------------------------- */
.modal-dialog{
  max-width: 500px;
  margin: 1.75rem auto;
}
.modal-content{
  background-color: #fff;
  border: 1px solid #dee2e6;
  border-radius: .5rem;
  box-shadow: 0 3px 9px rgba(0,0,0,.5);
}
.modal-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: .9rem 1rem;
  border-bottom: 1px solid #dee2e6;
  background-color: #f8f9fa;
  color:#000;
}
.modal-header .modal-title{
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}
.modal-header .btn-close{
  background-color: transparent;
  border: none;
}
.modal-body{
  padding: 1.2rem;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  text-align: justify;
  color: var(--bg);
}
.modal-footer{
  display:flex;
  justify-content:flex-end;
  padding: .75rem;
  border-top: 1px solid #dee2e6;
  background-color: #f8f9fa;
}
.modal-footer .btn{ margin-left: .5rem; }

/* -------------------------
   16) Strony błędów
-------------------------- */
body.error-page{ background: var(--bg) !important; }
body.error-page .error-title p{ color: var(--fg) !important; }
body.error-page .error-content{ color: #dddddd !important; }

.error-image{
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

@media (max-width: 768px){
  .error-image{ max-width: 80%; }
}

/* -------------------------
   17) Skala 1–10 (BRILL)
-------------------------- */
.scale10{
  --brand-red: var(--brand);
  --fg: var(--fg);
  --seg: #383637;
  --sep: rgba(255,255,255,.08);
}

.scale10 label.btn{
  background: var(--seg) !important;
  color: var(--fg) !important;
  box-shadow: none !important;
  transition: background .15s ease;
}

.scale10 label.btn.filled{
  background: var(--brand-red) !important;
  color:#fff !important;
}

.scale10 label.btn:not(.filled):hover{
  background-color:#505050 !important;
  color:#fff !important;
  cursor:pointer;
  transform:none !important;
}

.scale10 label.btn.filled:hover{
  background-color:#930f12 !important;
  cursor:pointer;
  transform:none !important;
}

.scale10 .answer-container{ padding:0 !important; }
.scale10 .container-fluid{ padding-left:0 !important; padding-right:0 !important; }
.scale10 .ls-answers.answers-list{ margin:0 !important; }

.scale10 .ls-answers > .row{
  display:flex;
  flex-wrap:nowrap;
  gap:0;
  background:transparent !important;
  border: 2px solid var(--brand-red) !important;
  border-radius: 14px !important;
  overflow:hidden !important;
  box-shadow:none !important;
  margin-top:.6rem !important;
}

.scale10 .bootstrap-buttons-div{
  padding:0 !important;
  flex: 1 1 10% !important;
  max-width: 10% !important;
}

.scale10 .btn.btn-primary{
  margin:0 !important;
  height: 40px !important;
  line-height: 40px !important;
  font-size: var(--fs-base) !important;
  border:0 !important;
  border-radius:0 !important;
  font-weight:600;
  letter-spacing:.2px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: background .15s ease;
  box-shadow:none !important;
}

.scale10 .bootstrap-buttons-div:first-of-type .btn{
  border-top-left-radius:12px !important;
  border-bottom-left-radius:12px !important;
}
.scale10 .bootstrap-buttons-div:last-of-type .btn{
  border-top-right-radius:12px !important;
  border-bottom-right-radius:12px !important;
}

.scale10 .btn:focus-visible{
  outline: 2px solid rgba(255,255,255,.28);
  outline-offset: -2px;
}

.scale10 .btn-check + .btn-primary{ background: var(--seg) !important; }
.scale10 .btn-check:checked + .btn-primary{ background: var(--brand-red) !important; }

@media (max-width:576px){
  .scale10 .ls-answers > .row{ flex-wrap: wrap !important; }
  .scale10 .bootstrap-buttons-div{ flex: 0 0 20% !important; max-width: 20% !important; }

  .scale10 .bootstrap-buttons-div:nth-child(1) .btn{ border-top-left-radius: 12px !important; }
  .scale10 .bootstrap-buttons-div:nth-child(5) .btn{ border-top-right-radius: 12px !important; }
  .scale10 .bootstrap-buttons-div:nth-child(6) .btn{ border-bottom-left-radius: 12px !important; }
  .scale10 .bootstrap-buttons-div:last-of-type .btn{ border-bottom-right-radius: 12px !important; }
}

/* =========================
   OTHER (checkbox-text-item)
   wracamy do standardowej wysokości input (1 linia)
   ========================= */

.question-item.answer-item.checkbox-text-item .other-text-item .form-control{
  height: 38px !important;          /* standardowa wysokość input */
  min-height: 38px !important;
  line-height: 1.35 !important;
  padding: 6px 10px !important;
  box-sizing: border-box;
}



/* TEXTAREA (text-item) – niższe + resize działa */
.ls-answers.answer-item.text-item textarea.form-control{
  min-height: 56px;            /* startowy “cel” */
  resize: vertical !important; /* uchwyt działa */
  overflow: auto;

  line-height: 1.35;
  padding: 6px 10px;
  box-sizing: border-box;
}


/* =========================
   UJEDNOLICENIE: help + valid/tip pod pytaniem
   (wyszarzone + kursywa)
   ========================= */

.question-help-container .ls-questionhelp,
.question-valid-container .ls-questionhelp,
.question-valid-container .ls-question-message,
.ls-question-message.ls-em-tip,
.ls-question-message.em_default,
.ls-question-message.ls-em-success{
  color: #bdbdbd !important;
  font-style: italic !important;
  font-size: 13px !important;
  line-height: 1.35 !important;

  background: transparent !important;
  border: none !important;
}

.question-help-container{
  margin-top: 6px !important;
}

.question-valid-container{
  margin-top: 6px !important;
}

/* =========================
   OTHER checkbox label – przywrócenie stylu globalnego
   ========================= */

.question-item.answer-item.checkbox-text-item 
label.checkbox-label.control-label.answertext{
    font-weight: 600 !important;
    font-size: var(--fs-base) !important;
    line-height: var(--lh-base) !important;
    color: var(--fg) !important;
}

/* zachowanie paddingu jak w normalnych checkboxach */
.question-item.answer-item.checkbox-text-item 
.checkbox-item label{
    display: inline-block;
    vertical-align: middle;
    position: relative;
    padding-left: 20px;
}