/* ══════════════════════════════════════════════════════════════════
   Sentinel Design System — SurveyJS Theme Override
   ══════════════════════════════════════════════════════════════════

   This stylesheet overrides SurveyJS defaultV2.css to match the
   Sentinel brand: Signal Green (#3DD598), Forest (#0C2A20), and
   Geist typography. Apply this AFTER survey-core/defaultV2.css.

   Usage:
   <link href="~/lib/survey-core/defaultV2.min.css" rel="stylesheet" />
   <link href="~/css/sentinel-survey-theme.css" rel="stylesheet" />

   ══════════════════════════════════════════════════════════════════ */

/* ── Design Tokens ───────────────────────────────────────────────── */
:root {
  /* Core Palette */
  --sn-forest:       #0C2A20;
  --sn-forest-2:     #13382C;
  --sn-moss:         #1E5D44;
  --sn-signal:       #3DD598;
  --sn-signal-dk:    #159C6E;
  --sn-signal-lt:    #D9F2E5;
  --sn-lime:         #C9E86A;

  /* Neutrals */
  --sn-slate:        #6B7A78;
  --sn-slate-2:      #3E4A48;
  --sn-slate-lt:     #B8C0BE;
  --sn-bone:         #F5F3EC;
  --sn-paper:        #ECEAE1;
  --sn-chalk:        #FBFAF5;
  --sn-graphite:     #4A5A55;
  --sn-hairline:     #D8D4C4;
  --sn-hairline-dk:  #1E3329;

  /* Status Colors */
  --sn-outbreak:     #E04D2B;
  --sn-watch:        #E0A43A;
  --sn-clear:        #3DD598;
  --sn-info:         #6B8CF5;

  /* Typography */
  --sn-font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --sn-font-mono: "Geist Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Spacing */
  --sn-space-1: 4px;
  --sn-space-2: 8px;
  --sn-space-3: 12px;
  --sn-space-4: 16px;
  --sn-space-6: 24px;
  --sn-space-8: 32px;

  /* Radius */
  --sn-radius-sm: 4px;
  --sn-radius-md: 6px;
  --sn-radius-lg: 8px;

  /* Shadows */
  --sn-shadow-sm: 0 1px 3px rgba(12,42,32,.08), 0 1px 2px rgba(12,42,32,.04);
  --sn-shadow-md: 0 4px 12px rgba(12,42,32,.08), 0 2px 4px rgba(12,42,32,.04);
  --sn-shadow-focus: 0 0 0 3px rgba(61,213,152,.25);

  /* Transitions */
  --sn-transition-fast: 120ms cubic-bezier(.16,1,.3,1);
  --sn-transition-base: 200ms cubic-bezier(.16,1,.3,1);
}

/* ── Base Typography ──────────────────────────────────────────────── */
.sv-root-modern,
.sv_main,
.sd-root-modern {
  font-family: var(--sn-font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "ss02", "cv11";
  color: var(--sn-forest);
  background: var(--sn-bone);
}

.sv_main .sv-string-viewer,
.sv_main .sv-question__title,
.sv_main .sv-question__description,
.sv_main .sv-panel__title,
.sv_main .sv-page__title {
  font-family: var(--sn-font-sans);
  letter-spacing: -0.01em;
}

/* Mono font for case IDs, codes, timestamps */
.sv_main input[type="text"][readonly],
.sv_main .sv-question--readonly input,
code,
.sv-panel__title--with-number,
.sv-question__num {
  font-family: var(--sn-font-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
}

/* ── Container & Page Background ──────────────────────────────────── */
.sv_main {
  background-color: var(--sn-bone) !important;
  padding: var(--sn-space-6);
}

.sv_main .sv-container-modern {
  background: transparent;
}

/* Pages */
.sv_main .sv-page {
  background: var(--sn-chalk);
  border: 1px solid var(--sn-hairline);
  border-radius: var(--sn-radius-lg);
  padding: var(--sn-space-8);
  box-shadow: var(--sn-shadow-sm);
  margin-bottom: var(--sn-space-6);
}

/* ── Headings & Titles ────────────────────────────────────────────── */
.sv_main .sv-title {
  font-size: 40px;
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.1;
  color: var(--sn-forest);
  margin-bottom: var(--sn-space-4);
}

.sv_main .sv-page__title {
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--sn-forest);
  margin-bottom: var(--sn-space-3);
}

.sv_main .sv-panel__title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--sn-forest);
  margin-bottom: var(--sn-space-3);
  border-bottom: 1px solid var(--sn-hairline);
  padding-bottom: var(--sn-space-2);
}

.sv_main .sv-question__title {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--sn-graphite);
  margin-bottom: var(--sn-space-2);
}

.sv_main .sv-question__description {
  font-size: 13px;
  color: var(--sn-graphite);
  line-height: 1.6;
  margin-top: var(--sn-space-1);
}

/* ── Inputs & Form Controls ───────────────────────────────────────── */
.sv_main input[type="text"],
.sv_main input[type="number"],
.sv_main input[type="email"],
.sv_main input[type="tel"],
.sv_main input[type="date"],
.sv_main input[type="time"],
.sv_main textarea,
.sv_main select,
.sv_main .sv-dropdown {
  font-family: var(--sn-font-sans);
  font-size: 14px;
  color: var(--sn-forest);
  background: #fff;
  border: 1px solid var(--sn-hairline);
  border-radius: var(--sn-radius-md);
  padding: 0 12px;
  height: 36px;
  transition: border-color var(--sn-transition-fast), 
              box-shadow var(--sn-transition-fast);
}

.sv_main textarea {
  min-height: 80px;
  padding: 10px 12px;
  resize: vertical;
}

.sv_main input:focus,
.sv_main textarea:focus,
.sv_main select:focus,
.sv_main .sv-dropdown:focus {
  outline: none;
  border-color: var(--sn-signal-dk);
  box-shadow: var(--sn-shadow-focus);
}

.sv_main input::placeholder,
.sv_main textarea::placeholder {
  color: var(--sn-slate);
  opacity: 1;
}

/* Error states */
.sv_main input.sv-input--error,
.sv_main textarea.sv-input--error,
.sv_main select.sv-input--error {
  border-color: var(--sn-outbreak);
  box-shadow: 0 0 0 3px rgba(224, 77, 43, 0.2);
}

.sv_main .sv-question__erbox {
  font-family: var(--sn-font-mono);
  font-size: 12px;
  color: var(--sn-outbreak);
  background: #FBE2D8;
  border: 1px solid #F2BBA4;
  border-radius: var(--sn-radius-sm);
  padding: var(--sn-space-2) var(--sn-space-3);
  margin-top: var(--sn-space-2);
}

/* ── Checkboxes & Radio Buttons ───────────────────────────────────── */
.sv_main .sv-checkbox__svg,
.sv_main .sv-radio__svg {
  border: 1.5px solid var(--sn-hairline);
  background: #fff;
  transition: all var(--sn-transition-fast);
}

.sv_main .sv-checkbox--checked .sv-checkbox__svg,
.sv_main .sv-radio--checked .sv-radio__svg {
  border-color: var(--sn-signal-dk);
  background: var(--sn-signal-dk);
}

.sv_main .sv-checkbox__svg:hover,
.sv_main .sv-radio__svg:hover {
  border-color: var(--sn-signal);
}

/* Checkmark icon */
.sv_main .sv-checkbox--checked .sv-checkbox__svg path,
.sv_main .sv-radio--checked .sv-radio__svg circle {
  fill: #fff;
}

/* Item labels */
.sv_main .sv-checkbox__label,
.sv_main .sv-radio__label {
  font-size: 14px;
  color: var(--sn-forest);
  line-height: 1.5;
  margin-left: var(--sn-space-2);
}

/* ── Buttons ──────────────────────────────────────────────────────── */
.sv_main .sv-btn,
.sv_main button,
.sv_main .sv-action-bar-item,
.sv_main .sd-btn {
  font-family: var(--sn-font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  height: 36px;
  padding: 0 16px;
  border-radius: var(--sn-radius-md);
  border: 1px solid transparent;
  transition: all var(--sn-transition-fast);
  cursor: pointer;
}

/* Primary / Complete Button (Signal Green) */
.sv_main .sv-btn--primary,
.sv_main .sv-footer__complete-btn,
.sv_main .sd-btn--primary {
  background: var(--sn-signal-dk);
  color: #fff;
  border-color: var(--sn-signal-dk);
}

.sv_main .sv-btn--primary:hover,
.sv_main .sv-footer__complete-btn:hover {
  background: #088960;
  border-color: #088960;
}

/* Secondary / Navigation Buttons (Forest) */
.sv_main .sv-btn--secondary,
.sv_main .sv-footer__prev-btn,
.sv_main .sv-footer__next-btn {
  background: var(--sn-forest);
  color: var(--sn-bone);
  border-color: var(--sn-forest);
}

.sv_main .sv-btn--secondary:hover {
  background: var(--sn-forest-2);
}

/* Ghost / Cancel Buttons */
.sv_main .sv-btn--ghost,
.sv_main .sv-footer__cancel-btn,
.sv_main .sd-btn--secondary {
  background: transparent;
  border-color: var(--sn-hairline);
  color: var(--sn-forest);
}

.sv_main .sv-btn--ghost:hover {
  background: var(--sn-chalk);
  border-color: var(--sn-slate-lt);
}

/* Disabled state */
.sv_main .sv-btn:disabled,
.sv_main button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ── Progress Bar ─────────────────────────────────────────────────── */
.sv_main .sv-progress {
  background: var(--sn-paper);
  border-radius: var(--sn-radius-sm);
  height: 6px;
  overflow: hidden;
  margin-bottom: var(--sn-space-6);
}

.sv_main .sv-progress__bar {
  background: var(--sn-signal-dk);
  height: 100%;
  transition: width 400ms cubic-bezier(.65,0,.35,1);
  border-radius: var(--sn-radius-sm);
}

.sv_main .sv-progress__text {
  font-family: var(--sn-font-mono);
  font-size: 11px;
  color: var(--sn-graphite);
  letter-spacing: 0.04em;
  margin-bottom: var(--sn-space-2);
}

/* ── Dropdown / Select Styling ────────────────────────────────────── */
.sv_main .sv-dropdown__filter-string-input {
  font-family: var(--sn-font-sans);
  font-size: 14px;
  padding: var(--sn-space-2) var(--sn-space-3);
  border: 1px solid var(--sn-hairline);
  border-radius: var(--sn-radius-md);
}

.sv_main .sv-list__item {
  font-size: 14px;
  padding: var(--sn-space-2) var(--sn-space-3);
  border-radius: var(--sn-radius-sm);
  transition: background var(--sn-transition-fast);
}

.sv_main .sv-list__item:hover {
  background: var(--sn-signal-lt);
}

.sv_main .sv-list__item--selected {
  background: var(--sn-signal-dk);
  color: #fff;
}

/* ── Matrix Questions ─────────────────────────────────────────────── */
.sv_main .sv-matrix,
.sv_main .sv-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
}

.sv_main .sv-matrix__cell,
.sv_main .sv-table__cell {
  padding: 11px 14px;
  border-bottom: 1px solid var(--sn-hairline);
  text-align: left;
}

.sv_main .sv-matrix thead th,
.sv_main .sv-table thead th {
  font-family: var(--sn-font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sn-graphite);
  background: var(--sn-paper);
  border-bottom: 2px solid var(--sn-hairline);
}

.sv_main .sv-matrix tbody tr:hover {
  background: var(--sn-chalk);
}

/* ── Rating Component ─────────────────────────────────────────────── */
.sv_main .sv-rating__item {
  border: 1px solid var(--sn-hairline);
  background: #fff;
  color: var(--sn-forest);
  border-radius: var(--sn-radius-sm);
  padding: var(--sn-space-2) var(--sn-space-3);
  transition: all var(--sn-transition-fast);
}

.sv_main .sv-rating__item:hover {
  border-color: var(--sn-signal);
  background: var(--sn-signal-lt);
}

.sv_main .sv-rating__item--selected {
  background: var(--sn-signal-dk);
  border-color: var(--sn-signal-dk);
  color: #fff;
}

/* ── Panels ───────────────────────────────────────────────────────── */
.sv_main .sv-panel {
  background: #fff;
  border: 1px solid var(--sn-hairline);
  border-radius: var(--sn-radius-lg);
  padding: var(--sn-space-6);
  margin-bottom: var(--sn-space-4);
}

.sv_main .sv-panel--collapsed {
  background: var(--sn-paper);
}

/* ── Navigation (Pagination) ──────────────────────────────────────── */
.sv_main .sv-footer {
  display: flex;
  gap: var(--sn-space-3);
  justify-content: flex-end;
  padding-top: var(--sn-space-6);
  border-top: 1px solid var(--sn-hairline);
  margin-top: var(--sn-space-6);
}

/* ── Required Indicator ───────────────────────────────────────────── */
.sv_main .sv-question__title--required::after {
  content: " *";
  color: var(--sn-outbreak);
  font-weight: 600;
}

/* ── Boolean (Switch) Component ───────────────────────────────────── */
.sv_main .sv-boolean__switch {
  background: var(--sn-slate-lt);
  border-radius: 999px;
  transition: background var(--sn-transition-fast);
}

.sv_main .sv-boolean--checked .sv-boolean__switch {
  background: var(--sn-signal-dk);
}

.sv_main .sv-boolean__slider {
  background: #fff;
  box-shadow: var(--sn-shadow-sm);
}

/* ── File Upload Component ────────────────────────────────────────── */
.sv_main .sv-file {
  border: 2px dashed var(--sn-hairline);
  border-radius: var(--sn-radius-lg);
  padding: var(--sn-space-6);
  background: var(--sn-chalk);
  text-align: center;
  transition: all var(--sn-transition-fast);
}

.sv_main .sv-file:hover {
  border-color: var(--sn-signal);
  background: var(--sn-signal-lt);
}

.sv_main .sv-file__drag-area-placeholder {
  font-size: 14px;
  color: var(--sn-graphite);
}

.sv_main .sv-file__choose-btn {
  background: var(--sn-signal-dk);
  color: #fff;
  border: none;
  border-radius: var(--sn-radius-md);
  padding: var(--sn-space-2) var(--sn-space-4);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.sv_main .sv-file__choose-btn:hover {
  background: #088960;
}

/* ── Signature Pad ────────────────────────────────────────────────── */
.sv_main .sv-signaturepad {
  border: 1px solid var(--sn-hairline);
  border-radius: var(--sn-radius-lg);
  background: #fff;
}

.sv_main .sv-signaturepad__clear-btn {
  font-family: var(--sn-font-mono);
  font-size: 11px;
  color: var(--sn-outbreak);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: transparent;
  border: 1px solid var(--sn-hairline);
  border-radius: var(--sn-radius-sm);
  padding: var(--sn-space-1) var(--sn-space-2);
  cursor: pointer;
}

.sv_main .sv-signaturepad__clear-btn:hover {
  background: #FBE2D8;
  border-color: #F2BBA4;
}

/* ── Image Picker ─────────────────────────────────────────────────── */
.sv_main .sv-imagepicker__item {
  border: 2px solid var(--sn-hairline);
  border-radius: var(--sn-radius-lg);
  overflow: hidden;
  transition: all var(--sn-transition-fast);
}

.sv_main .sv-imagepicker__item:hover {
  border-color: var(--sn-signal);
  box-shadow: var(--sn-shadow-md);
}

.sv_main .sv-imagepicker__item--checked {
  border-color: var(--sn-signal-dk);
  box-shadow: 0 0 0 3px var(--sn-signal-lt);
}

/* ── Status Chips (Custom) ────────────────────────────────────────── */
.sv_main .sn-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: var(--sn-radius-sm);
  font-family: var(--sn-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
}

.sv_main .sn-chip__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.sv_main .sn-chip--outbreak {
  background: #FBE2D8;
  color: #7A2A15;
  border-color: #F2BBA4;
}

.sv_main .sn-chip--outbreak .sn-chip__dot {
  background: var(--sn-outbreak);
}

.sv_main .sn-chip--watch {
  background: #FBEDD1;
  color: #6A4410;
  border-color: #EBD196;
}

.sv_main .sn-chip--watch .sn-chip__dot {
  background: var(--sn-watch);
}

.sv_main .sn-chip--clear {
  background: var(--sn-signal-lt);
  color: #0A3F2C;
  border-color: #9BE8C6;
}

.sv_main .sn-chip--clear .sn-chip__dot {
  background: var(--sn-signal-dk);
}

/* ── Survey Creator Theme (Designer Mode) ─────────────────────────── */
.sd-root-modern {
  --primary: var(--sn-signal-dk);
  --primary-light: var(--sn-signal-lt);
  --primary-foreground: #fff;
  --secondary: var(--sn-forest);
  --background: var(--sn-bone);
  --background-dim: var(--sn-paper);

  font-family: var(--sn-font-sans);
  color: var(--sn-forest);
}

.sd-root-modern .sd-btn--action {
  background: var(--sn-signal-dk);
  color: #fff;
  border-color: var(--sn-signal-dk);
  border-radius: var(--sn-radius-md);
  font-weight: 500;
}

.sd-root-modern .sd-btn--action:hover {
  background: #088960;
}

.sd-root-modern .sd-header {
  background: var(--sn-chalk);
  border-bottom: 1px solid var(--sn-hairline);
}

.sd-root-modern .sd-toolbar {
  background: var(--sn-paper);
  border-right: 1px solid var(--sn-hairline);
}

/* Property grid in creator */
.sd-root-modern .spg-panel {
  background: #fff;
  border: 1px solid var(--sn-hairline);
  border-radius: var(--sn-radius-lg);
  padding: var(--sn-space-4);
}

.sd-root-modern .spg-panel__title {
  font-family: var(--sn-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sn-graphite);
  border-bottom: 1px solid var(--sn-hairline);
  padding-bottom: var(--sn-space-2);
  margin-bottom: var(--sn-space-3);
}

/* ── Responsive Adjustments ───────────────────────────────────────── */
@media (max-width: 768px) {
  .sv_main {
    padding: var(--sn-space-4);
  }

  .sv_main .sv-page {
    padding: var(--sn-space-4);
  }

  .sv_main .sv-title {
    font-size: 32px;
  }

  .sv_main .sv-page__title {
    font-size: 24px;
  }

  .sv_main .sv-footer {
    flex-direction: column;
    gap: var(--sn-space-2);
  }

  .sv_main .sv-footer button {
    width: 100%;
  }
}

/* ── Print Styles ─────────────────────────────────────────────────── */
@media print {
  .sv_main {
    background: #fff;
    padding: 0;
  }

  .sv_main .sv-page {
    box-shadow: none;
    border: 1px solid #ddd;
    page-break-inside: avoid;
  }

  .sv_main .sv-footer,
  .sv_main .sv-progress {
    display: none;
  }
}

/* ── Accessibility Enhancements ───────────────────────────────────── */
.sv_main *:focus-visible {
  outline: 2px solid var(--sn-signal-dk);
  outline-offset: 2px;
}

.sv_main .sv-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .sv_main input,
  .sv_main textarea,
  .sv_main select,
  .sv_main button {
    border-width: 2px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .sv_main *,
  .sv_main *::before,
  .sv_main *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   End of Sentinel SurveyJS Theme
   ══════════════════════════════════════════════════════════════════ */