/* ============================================================================
   ODV Survey Theme — overrides for LimeSurvey 6 (fruity_twentythree)
   Brand source: https://odv.dev (Open DUMP Viewer for Oracle database)
   Author: ODV Portal team — generated 2026-04-26
   ----------------------------------------------------------------------------
   Goal: make the LimeSurvey form feel like an extension of the ODV portal
         without breaking the responsive base of the fruity_twentythree theme.
   Targets Bootstrap 5 + LimeSurvey 6 markup. Mobile-first.
   ============================================================================ */

/* ---------- 1. Brand tokens ---------- */
:root {
  /* Primary palette (matches Tailwind blue-* used across odv.dev) */
  --odv-primary: #1d4ed8;        /* blue-700  — header, primary buttons */
  --odv-primary-hover: #1e40af;  /* blue-800  — hover */
  --odv-primary-soft: #2563eb;   /* blue-600  — secondary surfaces */
  --odv-primary-50: #eff6ff;     /* blue-50   — selected backgrounds */
  --odv-primary-100: #dbeafe;    /* blue-100  — pill/badge bg */
  --odv-accent: #3730a3;         /* indigo-800 — gradient counterpart */

  /* Neutral text & surfaces */
  --odv-fg: #111827;             /* gray-900 */
  --odv-fg-muted: #4b5563;       /* gray-600 */
  --odv-fg-subtle: #6b7280;      /* gray-500 */
  --odv-border: #e5e7eb;         /* gray-200 */
  --odv-border-strong: #d1d5db;  /* gray-300 */
  --odv-bg: #f9fafb;             /* gray-50 page background */
  --odv-surface: #ffffff;        /* card surfaces */

  /* Status */
  --odv-success: #22c55e;        /* green-500 */
  --odv-warning: #eab308;        /* yellow-500 */
  --odv-danger:  #ef4444;        /* red-500 */

  /* Typography — Geist Sans (used on odv.dev) with reliable fallbacks */
  --odv-font-sans: "Geist", "Inter", -apple-system, BlinkMacSystemFont,
                   "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic UI",
                   "Noto Sans JP", Roboto, Helvetica, Arial, sans-serif;
  --odv-font-mono: "Geist Mono", ui-monospace, SFMono-Regular, "JetBrains Mono",
                   Menlo, Consolas, monospace;

  /* Shape & elevation */
  --odv-radius-sm: 6px;
  --odv-radius:    8px;
  --odv-radius-lg: 12px;
  --odv-shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.05);
  --odv-shadow:    0 4px 12px rgba(17, 24, 39, 0.08);
  --odv-shadow-lg: 0 10px 25px rgba(29, 78, 216, 0.15);

  /* Override Bootstrap 5 / LS theme variables that fruity_twentythree exposes */
  --bs-primary: var(--odv-primary);
  --bs-link-color: var(--odv-primary);
  --bs-link-hover-color: var(--odv-primary-hover);
  --bs-body-color: var(--odv-fg);
  --bs-body-bg: var(--odv-bg);
  --bs-border-color: var(--odv-border);
}

/* ---------- 2. Page chrome & typography ---------- */
body {
  font-family: var(--odv-font-sans);
  background-color: var(--odv-bg);
  color: var(--odv-fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings — match odv.dev (bold, tight tracking) */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--odv-font-sans);
  color: var(--odv-fg);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Code-ish content, if survey shows technical strings */
code, kbd, samp, pre { font-family: var(--odv-font-mono); }

/* ---------- 3. Survey container — flat background, no outer card ---------- */
/* Strategy: keep the page background flat (no outer card to overflow).
   Individual question cards provide visual structure. */
#outerframe, .outerframe,
#main-col,
.col-xl-8,
.col-12.col-xl-8.top-content,
.questions-list,
#questioncontainer,
.group-container {
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* Group/survey title: clean text, no card */
.group-title,
.group-name,
.survey-name,
#surveytitle {
  color: var(--odv-fg);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 1rem 0 1.5rem;
  padding: 0;
  border: 0;
  background: transparent;
}

/* Survey title bar (fruity_twentythree uses .group-title / .questiontitle) */
.group-title,
.group-name,
#surveytitle {
  color: var(--odv-fg);
  font-weight: 700;
  margin-bottom: 1rem;
  padding: 0;
  border: 0;
}

/* Hide the empty fixed-top navbar — it only contains a "..." button which
   duplicates the inline language switcher. Removes the empty header strip. */
header#survey-nav.navbar.fixed-top { display: none; }
body.fruity_twentythree { padding-top: 1rem !important; }

/* ---------- 4. Question sections (inside the single outer card) ---------- */
.question-container {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 1rem 0;
  margin: 0;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  box-shadow: none;
  border-bottom: 1px solid var(--odv-border);
  transition: background-color 0.15s ease;
}
.question-container:last-of-type,
.question-container:has(+ .group-container),
.question-container:last-child {
  border-bottom: 0;
}
.question-container:focus-within {
  background-color: var(--odv-primary-50);
  border-radius: var(--odv-radius);
  margin-left: -0.75rem;
  margin-right: -0.75rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.question-title-container .question-title,
.question-title {
  color: var(--odv-fg);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.5;
}
.question-help-container,
.question-help-container .ls-questionhelp,
.questionhelp {
  color: var(--odv-fg-muted);
  font-size: 0.875rem;
}

/* Required asterisk */
.asterisk, .ls-asterisk { color: var(--odv-danger); font-weight: 700; }

/* ---------- 5. Form controls — input / textarea / select ---------- */
.form-control,
input.form-control,
textarea.form-control,
select.form-control,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="date"],
textarea,
select {
  font-family: inherit;
  font-size: 1rem;
  color: var(--odv-fg);
  background-color: var(--odv-surface);
  border: 1px solid var(--odv-border-strong);
  border-radius: var(--odv-radius);
  padding: 0.625rem 0.85rem;
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-control:hover,
input:hover, textarea:hover, select:hover { border-color: var(--odv-primary-soft); }

.form-control:focus,
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--odv-primary);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15);
}

textarea.form-control { min-height: 7rem; line-height: 1.6; }

/* ---------- 6. Radios & checkboxes — modern, accessible ---------- */
/* fruity_twentythree generates .answer-item with input + label sibling */
.answer-item,
.answer-item-radio,
.answer-item-checkbox {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid transparent;
  border-radius: var(--odv-radius);
  margin-bottom: 0.35rem;
  transition: background 0.12s ease, border-color 0.12s ease;
  cursor: pointer;
}
.answer-item:hover,
.answer-item-radio:hover,
.answer-item-checkbox:hover {
  background: var(--odv-primary-50);
  border-color: var(--odv-primary-100);
}
.answer-item input[type="radio"],
.answer-item input[type="checkbox"],
input[type="radio"].form-check-input,
input[type="checkbox"].form-check-input {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--odv-primary);
  cursor: pointer;
  flex-shrink: 0;
}
.answer-item label,
.form-check-label {
  cursor: pointer;
  margin: 0;
  color: var(--odv-fg);
  line-height: 1.5;
}

/* Checked-state visual treatment */
.answer-item:has(input:checked),
.form-check:has(input:checked) {
  background: var(--odv-primary-50);
  border-color: var(--odv-primary);
}

/* ---------- 7. Buttons ---------- */
.btn {
  font-family: inherit;
  font-weight: 600;
  border-radius: var(--odv-radius);
  padding: 0.625rem 1.25rem;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  transition: background-color 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease;
  border: none;
  box-shadow: var(--odv-shadow-sm);
}
.btn:active { transform: translateY(1px); }

/* Primary — main "Next" / "Submit" */
.btn-primary,
button[type="submit"],
.btn.ls-move-next-btn,
.btn.ls-move-submit-btn {
  background-color: var(--odv-primary);
  color: #fff;
}
.btn-primary:hover,
button[type="submit"]:hover,
.btn.ls-move-next-btn:hover,
.btn.ls-move-submit-btn:hover {
  background-color: var(--odv-primary-hover);
  color: #fff;
  box-shadow: var(--odv-shadow-lg);
}
.btn-primary:focus-visible,
button[type="submit"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.35);
}

/* Secondary — "Previous" */
.btn-secondary,
.btn.ls-move-previous-btn,
.btn-outline-secondary {
  background-color: var(--odv-surface);
  color: var(--odv-fg);
  border: 1px solid var(--odv-border-strong);
}
.btn-secondary:hover,
.btn.ls-move-previous-btn:hover,
.btn-outline-secondary:hover {
  background-color: #f3f4f6;
  color: var(--odv-fg);
  border-color: var(--odv-border-strong);
}

/* Danger — clear/exit */
.btn-danger,
.btn.ls-move-clearall-btn {
  background-color: var(--odv-danger);
  color: #fff;
}
.btn-danger:hover { background-color: #dc2626; }

/* Navigation row spacing on mobile */
.navigator,
.navigator-container,
#navigator-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  padding-top: 1rem;
  border-top: 1px solid var(--odv-border);
}

/* ---------- 8. Progress bar ---------- */
.progress {
  background-color: var(--odv-border);
  border-radius: 999px;
  height: 0.55rem;
  overflow: hidden;
}
.progress-bar {
  background: linear-gradient(90deg, var(--odv-primary) 0%, var(--odv-accent) 100%);
  border-radius: 999px;
  transition: width 0.4s ease;
}

/* ---------- 9. Tables (array-type questions) ---------- */
table.subquestion-list,
table.questions-list,
.ls-answers table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  border-radius: var(--odv-radius);
  overflow: hidden;
  border: 1px solid var(--odv-border);
}
table.subquestion-list th,
.ls-answers table th {
  background-color: #f3f4f6;
  color: var(--odv-fg);
  font-weight: 600;
  border-bottom: 1px solid var(--odv-border);
  padding: 0.65rem 0.75rem;
  font-size: 0.875rem;
}
table.subquestion-list td,
.ls-answers table td {
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--odv-border);
  vertical-align: middle;
}
table.subquestion-list tr:last-child td { border-bottom: none; }
table.subquestion-list tbody tr:hover td { background-color: var(--odv-primary-50); }

/* ---------- 10. Alerts / messages ---------- */
.alert {
  border-radius: var(--odv-radius);
  border: 1px solid transparent;
  padding: 0.85rem 1rem;
  font-size: 0.925rem;
}
.alert-info,
.alert-primary {
  background-color: var(--odv-primary-50);
  border-color: var(--odv-primary-100);
  color: var(--odv-primary-hover);
}
.alert-success {
  background-color: #ecfdf5;
  border-color: #a7f3d0;
  color: #047857;
}
.alert-danger,
.alert-warning {
  background-color: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c;
}
.has-error .form-control,
.has-error input,
.has-error select,
.has-error textarea {
  border-color: var(--odv-danger);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

/* ---------- 11. Mobile-first refinements ---------- */
@media (max-width: 640px) {
  body { font-size: 16px; } /* prevent iOS zoom on focus */
  .question-container { padding: 1rem 0.85rem; }
  .question-title { font-size: 1rem; }
  .btn {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
  }
  .navigator { flex-direction: column-reverse; }
  .form-control,
  input, textarea, select {
    font-size: 16px; /* iOS will not zoom if >=16px */
  }
  table.subquestion-list,
  .ls-answers table {
    font-size: 0.875rem;
  }
}

/* ---------- 12. Misc polish ---------- */
a { color: var(--odv-primary); text-decoration: none; }
a:hover { color: var(--odv-primary-hover); text-decoration: underline; }

hr { border-color: var(--odv-border); opacity: 1; }

/* Hide LimeSurvey "powered by" footer chrome but keep accessible */
.ls-no-print, #footer .small { color: var(--odv-fg-subtle); font-size: 0.8rem; }

/* End-of-survey thank-you panel */
.completed-text,
#completed-text,
.completed-quota-text {
  background: var(--odv-surface);
  border: 1px solid var(--odv-border);
  border-radius: var(--odv-radius-lg);
  padding: 2rem 1.5rem;
  text-align: center;
  box-shadow: var(--odv-shadow);
}