/* minimal styling; customize as needed */
/* Hide Slim Select search input on strict fields (we tag the wrapper in JS) */
.ss-main[data-ss-strict="1"] .ss-search { display: none !important; }
.ss-main[data-ss-strict="1"] .ss-content { padding-top: 0.25rem; }

/* Optional polish */
.ss-main { max-width: 100%; }
/* Help text shown above fields (from site.yaml → help_text) */
.crt-help { 
	font-size: .8em; 
	color: #666; 
	margin: .25rem 0 .25rem; 
	font-style:italic; 
	max-width: 80%;
	white-space: pre-line; /* honors \n as line breaks */
}
.ss-main[data-ss-strict="1"] .ss-search { display: none !important; }
.ss-main[data-ss-strict="1"] .ss-content { padding-top: .25rem; }
.page-intro { margin-bottom: 1rem; }
.crt-number {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.crt-number input[type="number"] {
  max-width: 14rem;
}
.crt-unit {
  opacity: 0.7;
  font-size: 0.9em;
}

.form-field {
	margin-bottom: 15px;
}

.control-label {
	width: unset !important;
}

.form-field.has-error > label { color: #c0392b; }
.form-field .crt-error {
  color: #c0392b;
  font-size: 0.9em;
  margin-top: 4px;
}

/* highlight SlimSelect shell when invalid */
.ss-main.has-error {
  border-color: #c0392b;
  box-shadow: 0 0 0 2px rgba(192,57,43,0.12);
  border-radius: 8px;
}

/* optional: native select fallback */
.form-field.has-error select.form-control:not([multiple]) {
  border-color: #c0392b;
}

/* reuse your theme's .button look for file inputs */
.form .has-button input[type="file"] {
  /* optional: keep consistent sizing */
  font: inherit;
}

/* If JS didn't add .button yet, make .dz-button resemble it */
.dropzone .dz-button {
  display: inline-block;
  padding: 0.5rem 0.9rem;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  background: var(--button-bg, #444);
  color: var(--button-fg, #fff);
  line-height: 1.2;
}

.dropzone .dz-button:hover { filter: brightness(1.1); }
.dropzone .dz-button:focus  { outline: 2px solid rgba(0,0,0,0.15); outline-offset: 2px; }

/* ---------- Slim Select (dark mode) ---------- */
body.dark-mode {
  /* tweak these if you want a different palette */
  --ss-bg: #000000;
  --ss-fg: #e8eaed;
  --ss-muted: #9aa0a6;
  --ss-border: #2a2f36;
  --ss-hover-bg: #1b1f24;
  --ss-accent: #8ab4f8;
  --ss-badge-bg: #2b3139;
  --ss-badge-fg: #e8eaed;
  --ss-badge-x: #b0b7c3;
  --ss-danger: #f28b82;
  --ss-shadow: 0 10px 28px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.55);
}

/* control shell */
body.dark-mode .ss-main,
body.dark-mode .ss-single-selected,
body.dark-mode .ss-multi-selected {
  background: var(--ss-bg);
  color: var(--ss-fg);
  border-color: var(--ss-border);
}

/* placeholder text (single & multi) */
body.dark-mode .ss-main .placeholder,
body.dark-mode .ss-single-selected .placeholder,
body.dark-mode .ss-multi-selected .placeholder {
  color: var(--ss-muted);
}

/* arrow / clear icons */
body.dark-mode .ss-main .ss-arrow,
body.dark-mode .ss-main .ss-clear {
  color: var(--ss-muted);
  opacity: .9;
}
body.dark-mode .ss-main .ss-arrow svg path {
  stroke: var(--ss-muted);
}

/* open/focus ring */
body.dark-mode .ss-open .ss-single-selected,
body.dark-mode .ss-open .ss-multi-selected,
body.dark-mode .ss-main:focus-within {
  border-color: var(--ss-accent);
  box-shadow: 0 0 0 2px rgba(138,180,248,.22);
}

/* dropdown panel */
body.dark-mode .ss-content {
  background: var(--ss-bg);
  color: var(--ss-fg);
  border-color: var(--ss-border);
  box-shadow: var(--ss-shadow);
}

/* option rows */
body.dark-mode .ss-content .ss-list .ss-option {
  color: var(--ss-fg);
  background: transparent;
}
body.dark-mode .ss-content .ss-list .ss-option:hover,
body.dark-mode .ss-content .ss-list .ss-option.ss-highlighted {
  background: var(--ss-hover-bg);
}
body.dark-mode .ss-content .ss-list .ss-option.ss-selected {
  background: rgba(138,180,248,.12);
  color: var(--ss-fg);
}

/* group headers & disabled options */
body.dark-mode .ss-content .ss-list .ss-option.ss-disabled,
body.dark-mode .ss-content .ss-list .ss-option.ss-group {
  color: var(--ss-muted);
  background: transparent;
}

/* search input inside dropdown */
body.dark-mode .ss-search input {
  background: #0f1216;
  color: var(--ss-fg);
  border-color: var(--ss-border);
}
body.dark-mode .ss-search input::placeholder {
  color: var(--ss-muted);
}

/* “addable” row (v1 / v2) */
body.dark-mode .ss-addable {
  background: #11161b;
  color: var(--ss-fg);
  border-top: 1px solid var(--ss-border);
}
body.dark-mode .ss-addable:hover {
  background: var(--ss-hover-bg);
}

/* multi-value badges/chips */
body.dark-mode .ss-values .ss-value {
  background: var(--ss-badge-bg);
  color: var(--ss-badge-fg);
  border: 1px solid transparent;
}
body.dark-mode .ss-values .ss-value .ss-value-delete,
body.dark-mode .ss-values .ss-value .ss-value-text + .ss-value-delete {
  color: var(--ss-badge-x);
}
body.dark-mode .ss-values .ss-value:hover .ss-value-delete {
  color: var(--ss-danger);
}

/* disabled control */
body.dark-mode .ss-disabled,
body.dark-mode .ss-main.ss-disabled {
  background: #0f1216;
  color: #7a8596;
  border-color: #262b33;
  opacity: 1;
}

/* validation error state (works with your JS adding .has-error) */
body.dark-mode .ss-main.has-error,
body.dark-mode .has-error .ss-main {
  border-color: var(--ss-danger) !important;
  box-shadow: 0 0 0 2px rgba(242,139,130,.25) !important;
}
body.dark-mode .crt-error { color: var(--ss-danger); }

/* scrollbars in dropdown (WebKit) */
body.dark-mode .ss-content::-webkit-scrollbar { width: 10px; }
body.dark-mode .ss-content::-webkit-scrollbar-thumb { background: #2f3640; border-radius: 8px; }
body.dark-mode .ss-content::-webkit-scrollbar-track { background: transparent; }

/* ---------- Form controls (dark mode) ---------- */
body.dark-mode {
  /* palette (tweak as desired) */
  --field-bg: #000000;
  --field-fg: #e8eaed;
  --field-border: #2a2f36;
  --field-hover: #1b1f24;
  --label-fg: #cfd3d7;
  --muted: #9aa0a6;
  --accent: #8ab4f8;
  --danger: #f28b82;
  --success: #81c995;
}

/* labels / legends */
body.dark-mode .form .form-label label,
body.dark-mode .form legend {
  color: var(--label-fg);
}

/* text-ish inputs, textarea, native select (non-Slim fallback) */
body.dark-mode .form input[type="text"],
body.dark-mode .form input[type="email"],
body.dark-mode .form input[type="number"],
body.dark-mode .form input[type="url"],
body.dark-mode .form input[type="search"],
body.dark-mode .form input[type="password"],
body.dark-mode .form textarea,
body.dark-mode .form select {
  background: var(--field-bg);
  color: var(--field-fg);
  border: 1px solid var(--field-border);
  box-shadow: none;
}
body.dark-mode .form input[type="text"]:hover,
body.dark-mode .form input[type="email"]:hover,
body.dark-mode .form input[type="number"]:hover,
body.dark-mode .form input[type="url"]:hover,
body.dark-mode .form input[type="search"]:hover,
body.dark-mode .form input[type="password"]:hover,
body.dark-mode .form textarea:hover,
body.dark-mode .form select:hover {
  background: var(--field-hover);
  border-color: var(--field-border);
}
body.dark-mode .form input[type="text"]:focus,
body.dark-mode .form input[type="email"]:focus,
body.dark-mode .form input[type="number"]:focus,
body.dark-mode .form input[type="url"]:focus,
body.dark-mode .form input[type="search"]:focus,
body.dark-mode .form input[type="password"]:focus,
body.dark-mode .form textarea:focus,
body.dark-mode .form select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(138,180,248,.22);
}

/* placeholders */
body.dark-mode .form input::placeholder,
body.dark-mode .form textarea::placeholder {
  color: var(--muted);
  opacity: 1;
}

/* disabled / readonly */
body.dark-mode .form input[disabled],
body.dark-mode .form textarea[disabled],
body.dark-mode .form select[disabled],
body.dark-mode .form input[readonly],
body.dark-mode .form textarea[readonly],
body.dark-mode .form select[readonly] {
  background: #0c0f13;
  color: #88909a;
  border-color: #262c33;
}

/* checkboxes / radios */
body.dark-mode .form input[type="checkbox"],
body.dark-mode .form input[type="radio"] {
  accent-color: var(--accent);
  background: var(--field-bg);
  border-color: var(--field-border);
}
body.dark-mode .form input[type="checkbox"]:focus-visible,
body.dark-mode .form input[type="radio"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* required asterisk + inline errors */
body.dark-mode .form .required { color: var(--danger); }
body.dark-mode .form .crt-error { color: var(--danger); }

/* error state on fields (your JS adds .has-error on the .form-field) */
body.dark-mode .form .form-field.has-error input,
body.dark-mode .form .form-field.has-error textarea,
body.dark-mode .form .form-field.has-error select {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 2px rgba(242,139,130,.25) !important;
}

/* help text blocks (your injected .crt-help) */
body.dark-mode .form .crt-help {
  color: var(--muted);
  background: transparent;
  border-left: 3px solid #26303a;
  padding-left: 10px;
  margin-top: 6px;
}

/* number-with-unit wrapper from submit.js */
body.dark-mode .crt-number {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--field-border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--field-bg);
}
body.dark-mode .crt-number input[type="number"] {
  border: none !important;
  background: transparent;
  color: var(--field-fg);
  box-shadow: none;
}
body.dark-mode .crt-number .crt-unit {
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  background: #11161b;
  color: var(--muted);
  border-left: 1px solid var(--field-border);
}

/* (optional) Dropzone container to match fields */
body.dark-mode .form .dropzone.files-upload {
  background: var(--field-bg);
  border: 1px dashed var(--field-border);
}
body.dark-mode .form .dropzone .dz-message .dz-button {
  color: var(--field-fg);
}

/* Slim Select addable highlight (works w/ v1 & v2) */
.ss-content .ss-addable,
.ss-content .ss-addable .ss-addable-option {
  background: var(--bs-primary-bg-subtle, #e7f1ff);
  color: var(--bs-primary-text-emphasis, #084298);
  border: 1px solid var(--bs-primary-border-subtle, #b6d4fe);
  border-radius: .5rem;
  padding: .375rem .5rem;
  margin: .375rem .5rem;
  font-weight: 600;
  cursor: pointer;
}

/* The inline input used by addable */
.ss-content .ss-addable input {
  background: transparent;
  border: 0;
  outline: 0;
  color: inherit;
  width: 100%;
}

/* Hover / focus state */
.ss-content .ss-addable:hover,
.ss-content .ss-addable:focus-within,
.ss-content .ss-addable .ss-addable-option:hover,
.ss-content .ss-addable .ss-addable-option:focus {
  background: var(--bs-primary, #0d6efd);
  color: #fff;
  border-color: var(--bs-primary, #0d6efd);
}

/* Optional “+” cue */
.ss-content .ss-addable::before {
  content: "Add New";
  margin-right: .5rem;
  font-size: 12px;
  color: inherit;
}

/* Ensure the message/notice never blocks clicking the thumbnail X */
.dropzone .dz-message,
.dropzone .dz-error-message,
.dropzone .dz-success-mark,
.dropzone .dz-error-mark {
  pointer-events: none;
}

/* Keep previews above any helper text / messages */
.crt-dz .dz-preview { position: relative; z-index: 2; }
.crt-dz .dz-message { position: static; z-index: 1; margin-top: .5rem; }

/* When at max, visually indicate disabled add, but keep remove clickable */
.crt-dz.crt-dz-maxed { cursor: not-allowed; }
.crt-dz.crt-dz-maxed .dz-button { display: none; } /* hide the big add button if present */

.dz-error-message {
  margin-top: 14px;
}