/* ─────────────────────────────────────────────────────────
   SlabExchange — LimeSurvey theme (v6-vanilla)
   ───────────────────────────────────────────────────────── */

:root, [data-bs-theme] {
  --sx-bg:         #0a0e15;
  --sx-bg-elev:    #12171f;
  --sx-border:     #1e2632;
  --sx-text:       #e6ebf2;
  --sx-text-muted: #8a95a5;
  --sx-accent:     #40f0ff;
  --sx-accent-dim: #2ea5b0;

  --bs-body-bg:            var(--sx-bg);
  --bs-body-color:         var(--sx-text);
  --bs-primary:            var(--sx-accent);
  --bs-primary-rgb:        64, 240, 255;
  --bs-link-color:         var(--sx-accent);
  --bs-link-hover-color:   var(--sx-accent-dim);
  --bs-border-color:       var(--sx-border);
  --bs-body-secondary-bg:  var(--sx-bg-elev);
}

html, body {
  background: var(--sx-bg);
  color: var(--sx-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ── Typography ─────────────────────────────────────── */
h1, h2, h3, .group-title, .section-title {
  color: var(--sx-text);
  font-weight: 700;
}

h4, h5, label, .form-label {
  color: var(--sx-text);
  font-weight: 600;
}

.text-muted, small, .help-block, .hint,
.question-help, .answer-help {
  color: var(--sx-text-muted);
}

.group-description, .group-description *,
.section-description, .section-description *,
.description, .description *,
.groupdescription, .info,
[class*="group-description"] p,
[class*="section-description"] p {
  color: var(--sx-accent) !important;
}


.text-primary { color: var(--sx-accent) !important; }

/* Welcome message paragraphs — forced white so cyan can't cascade in */
#welcome p, #welcome li,
.welcome-container p, .welcome-container li,
.surveyfirstpage p, .surveyfirstpage li,
.welcome-message p, .welcome-message li,
[class*="welcome"] > p, [class*="welcome"] > ul li {
  color: var(--sx-text) !important;
}

/* ── Cards / panels — dark bg ────────────────────────── */
.card, .card-header, .card-body, .card-footer,
.panel, .group-container, .question-container,
.list-group, .list-group-item,
.jumbotron, .bg-light, .bg-white, .well {
  background: var(--sx-bg-elev) !important;
  border: 1px solid var(--sx-border) !important;
  border-radius: 8px !important;
  color: var(--sx-text) !important;
}

.list-group-item { border-radius: 6px !important; margin-bottom: 4px; }
.list-group-item.active, .list-group-item.current {
  border-color: var(--sx-accent) !important;
  background: rgba(64, 240, 255, 0.06) !important;
  color: var(--sx-accent) !important;
}
.list-group-item.disabled, .list-group-item:disabled {
  background: transparent !important;
  color: var(--sx-text-muted) !important;
  border-color: var(--sx-border) !important;
}

/* ── Buttons — outline w/ glow ─────────────────────── */
.btn, .btn-primary, .btn-secondary,
button[type="submit"], input[type="submit"] {
  background: transparent !important;
  border: 1px solid var(--sx-accent) !important;
  color: var(--sx-accent) !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  padding: 0.55em 1.4em !important;
  transition: all 180ms ease !important;
}
.btn:hover, button[type="submit"]:hover, input[type="submit"]:hover {
  background: rgba(64, 240, 255, 0.08) !important;
  color: var(--sx-accent) !important;
  box-shadow: 0 0 12px rgba(64, 240, 255, 0.35) !important;
  transform: translateY(-1px);
}

/* Modal Close button — same outline style */
.modal-footer .btn, .modal-header .btn-close {
  background: transparent !important;
  color: var(--sx-accent) !important;
}

/* ── Radios ─────────────────────────────────────────── */
input[type="radio"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 18px !important; height: 18px !important;
  border: 2px solid var(--sx-border) !important;
  border-radius: 50% !important;
  background: var(--sx-bg) !important;
  position: relative !important;
  cursor: pointer !important;
  vertical-align: middle !important;
  margin-right: 6px !important;
}
input[type="radio"]:checked { border-color: var(--sx-accent) !important; }
input[type="radio"]:checked::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important; left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 8px !important; height: 8px !important;
  border-radius: 50% !important;
  background: var(--sx-accent) !important;
  box-shadow: 0 0 6px rgba(64, 240, 255, 0.55) !important;
}

.form-check-input[type="radio"]:checked {
  background-color: var(--sx-bg) !important;
  background-image: none !important;
  border-color: var(--sx-accent) !important;
}

.form-check-input[type="checkbox"]:checked {
  background-color: var(--sx-accent) !important;
  background-image: none !important;
  border-color: var(--sx-accent) !important;
}

/* ── Checkboxes ─────────────────────────────────────── */
input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 18px !important; height: 18px !important;
  border: 2px solid var(--sx-border) !important;
  border-radius: 4px !important;
  background: var(--sx-bg) !important;
  position: relative !important;
  cursor: pointer !important;
  vertical-align: middle !important;
  margin-right: 6px !important;
}
input[type="checkbox"]:checked {
  background: var(--sx-accent) !important;
  border-color: var(--sx-accent) !important;
  box-shadow: 0 0 6px rgba(64, 240, 255, 0.55) !important;
}
input[type="checkbox"]:checked::after {
  content: '✓' !important;
  position: absolute !important;
  top: 50% !important; left: 50% !important;
  transform: translate(-50%, -50%) !important;
  color: var(--sx-bg) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

/* ── Text inputs ────────────────────────────────────── */
input[type="text"], input[type="number"], input[type="email"],
textarea, select, .form-control {
  background: var(--sx-bg) !important;
  border: 1px solid var(--sx-border) !important;
  color: var(--sx-text) !important;
  border-radius: 6px !important;
}
input:focus, textarea:focus, .form-control:focus {
  border-color: var(--sx-accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(64, 240, 255, 0.15) !important;
}

/* ── Progress bar ────────────────────────────────────── */
.progress { background: var(--sx-bg-elev) !important; border-radius: 6px !important; }
.progress-bar { background: var(--sx-accent) !important; }

/* ── Links ───────────────────────────────────────────── */
a { color: var(--sx-accent) !important; }
a:hover { color: var(--sx-accent-dim) !important; }

/* ── Mandatory asterisk ──────────────────────────────── */
.asterisk, .required, .text-danger { color: var(--sx-accent-dim) !important; }

/* ── Mandatory info hint — CYAN outline, not red alert ── */
.mandatoryerror, .mandatory-required, .required-message,
.questionerror.mandatory {
  background: transparent !important;
  border: 1px solid rgba(64, 240, 255, 0.3) !important;
  color: var(--sx-accent) !important;
  border-radius: 6px !important;
  padding: 0.5em 1em !important;
}

/* ── Alerts — only Bootstrap alert-* variants, nothing broader ── */
.alert-warning {
  background: var(--sx-bg-elev) !important;
  border: 1px solid rgba(255, 165, 0, 0.5) !important;
  color: #ffb570 !important;
  border-radius: 6px !important;
}
.alert-danger {
  background: var(--sx-bg-elev) !important;
  border: 1px solid rgba(255, 100, 100, 0.5) !important;
  color: #ff8791 !important;
  border-radius: 6px !important;
}
.alert-info, .alert-success {
  background: var(--sx-bg-elev) !important;
  border: 1px solid var(--sx-accent) !important;
  color: var(--sx-text) !important;
  border-radius: 6px !important;
}

/* ── Modal (validation popup, dialogs) ──────────────── */
.modal, .modal-dialog {
  color: var(--sx-text) !important;
}
.modal-content, .modal-header, .modal-body, .modal-footer {
  background: var(--sx-bg-elev) !important;
  color: var(--sx-text) !important;
  border-color: var(--sx-border) !important;
}
.modal-header, .modal-footer { border-color: var(--sx-border) !important; }
.modal-backdrop { background-color: #000 !important; }

/* ── Hide "powered by" footer ────────────────────────── */
.footer-lscore, .powered-by-limesurvey { display: none !important; }

/* Array / matrix question rows — cyan-tinted hover instead of white */
table.ls-answers tr:hover,
.table-hover tbody tr:hover,
.array-flexible-row:hover,
.subquestion-list tr:hover,
.answers-list tr:hover {
  background-color: rgba(64, 240, 255, 0.06) !important;
  color: var(--sx-text) !important;
  --bs-table-hover-bg: rgba(64, 240, 255, 0.06);
  --bs-table-hover-color: var(--sx-text);
}

/* Alternating array rows — keep dark instead of light-striped */
.array1, .array2,
.table-striped tbody tr:nth-of-type(odd),
.table-striped tbody tr:nth-of-type(even) {
  background-color: var(--sx-bg-elev) !important;
  color: var(--sx-text) !important;
}

/* Array column headers (Likert numbers 1-5 etc.) — white for readability */
table.ls-answers thead th,
table.ls-answers thead td,
table.ls-answers th,
.array thead,
.array-answers-header,
.array-answers-header th,
.answers-header,
.answers-header-text,
.array-flexible-row th,
.subquestion-list thead th {
  color: var(--sx-text) !important;
  font-weight: 600 !important;
}