/* =======================
   Dark theme form overrides
   Scope to any of these parents you already use for dark mode:
   ======================= */
.dark .form-flex-wrapper,
body.dark .form-flex-wrapper,
[data-theme="dark"] .form-flex-wrapper {
  /* theme tokens (tweak to taste) */
  --bg: #121318;
  --panel: #1b1e24;
  --panel-2: #20242b;
  --border: #2b313a;
  --text: #e8ebf1;
  --muted: #9aa5b1;
  --placeholder: #7d8591;
  --accent: #7c8cff;  /* primary */
  --accent-2: #a077ff;/* secondary (optional) */
  --danger: #ff6b6b;
  --focus: 0 0 0 3px rgba(124,140,255,.35);
}

/* Layout columns (no HTML changes) */
.dark .form-flex-wrapper,
body.dark .form-flex-wrapper,
[data-theme="dark"] .form-flex-wrapper {
  gap: 2rem;
  align-items: start;
  margin-bottom:20px;
}

/* Labels */
.dark .form-field label.formLabel,
body.dark .form-field label.formLabel,
[data-theme="dark"] .form-field label.formLabel {
  color: var(--muted);
  /*font-weight: 600;*/
  letter-spacing: .02em;
}

/* Inputs/selects/textarea */
.dark .form-field input,
.dark .form-field select,
.dark .form-field textarea,
body.dark .form-field input,
body.dark .form-field select,
body.dark .form-field textarea,
[data-theme="dark"] .form-field input,
[data-theme="dark"] .form-field select,
[data-theme="dark"] .form-field textarea {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .65rem .9rem;
  line-height: 1.2;
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.dark .form-field input::placeholder,
.dark .form-field textarea::placeholder,
body.dark .form-field input::placeholder,
body.dark .form-field textarea::placeholder,
[data-theme="dark"] .form-field input::placeholder,
[data-theme="dark"] .form-field textarea::placeholder {
  color: var(--placeholder);
}

/* Focus */
.dark .form-field input:focus,
.dark .form-field select:focus,
.dark .form-field textarea:focus,
body.dark .form-field input:focus,
body.dark .form-field select:focus,
body.dark .form-field textarea:focus,
[data-theme="dark"] .form-field input:focus,
[data-theme="dark"] .form-field select:focus,
[data-theme="dark"] .form-field textarea:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: var(--focus);
}

/* Color input (Accent Colour) */
.dark input[type="color"],
body.dark input[type="color"],
[data-theme="dark"] input[type="color"] {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  height: 34px;
  width: 56px;
  padding: 0;
}

/* Right column: image block */

.dark .form-image img#existing_strLogo_preview,
body.dark .form-image img#existing_strLogo_preview,
[data-theme="dark"] .form-image img#existing_strLogo_preview {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: .5rem;
  display: block;
}


/* “Upload” label that wraps a hidden <input type="file"> */
.dark .custom-file-upload,
body.dark .custom-file-upload,
[data-theme="dark"] .custom-file-upload {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

/* Inline crop panel + modal gallery dark treatment */
.dark .image-cropper-panel,
body.dark .image-cropper-panel,
[data-theme="dark"] .image-cropper-panel {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem;
  color: var(--text);
}
.dark .image-gallery-modal > div,
body.dark .image-gallery-modal > div,
[data-theme="dark"] .image-gallery-modal > div {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
}
.dark .image-gallery-modal img,
body.dark .image-gallery-modal img,
[data-theme="dark"] .image-gallery-modal img {
  border-color: var(--border) !important;
}

/* Spacing nudges for a polished look */
.dark .form-field,
body.dark .form-field,
[data-theme="dark"] .form-field { gap: .4rem; margin-bottom:10px;}
.dark .form-image { margin-top: .25rem; }