/* Lightweight UI color enhancements for forms/buttons with dark-mode support */
:root {
  --ui-bg: #ffffff;
  --ui-surface: #f8fafc; /* slate-50/100 */
  --ui-border: #cfd8e3;  /* slate-300 */
  --ui-text: #0f172a;    /* slate-900 */
  --ui-muted: #64748b;   /* slate-500 */
  --ui-primary: #0d6efd; /* bootstrap primary */
  --ui-primary-hover: #0b5ed7;
  --ui-primary-contrast: #ffffff;
  --ui-focus-ring: rgba(13,110,253,0.35);
}

/* Explicit dark theme when data-theme="dark" is set on html/body */
:root[data-theme="dark"],
html[data-theme="dark"],
body[data-theme="dark"] {
  --ui-bg: #0b1220;      /* deep slate */
  --ui-surface: #0f172a; /* slate-900 */
  --ui-border: #334155;  /* slate-700 */
  --ui-text: #e2e8f0;    /* slate-200 */
  --ui-muted: #94a3b8;   /* slate-400 */
  --ui-primary: #3b82f6; /* tailwind blue-500 */
  --ui-primary-hover: #60a5fa; /* blue-400 */
  --ui-primary-contrast: #0b1220; /* text on lighter blue */
  --ui-focus-ring: rgba(59,130,246,0.45);
}

/* Auto dark if user prefers dark and no explicit light theme is set */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ui-bg: #0b1220;
    --ui-surface: #0f172a;
    --ui-border: #334155;
    --ui-text: #e2e8f0;
    --ui-muted: #94a3b8;
    --ui-primary: #3b82f6;
    --ui-primary-hover: #60a5fa;
    --ui-primary-contrast: #0b1220;
    --ui-focus-ring: rgba(59,130,246,0.45);
  }
}

/* Base text/background helpers (non-invasive) */
body {
  color: var(--ui-text);
  background-color: transparent; /* keep page background as is */
}

/* Form controls */
.form-control,
.form-select,
input.form-control,
select.form-select,
textarea.form-control,
input:not([type="checkbox"]):not([type="radio"]).form-control {
  background-color: var(--ui-bg);
  color: var(--ui-text);
  border: 1px solid var(--ui-border);
  border-radius: .5rem;
  transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease, color .12s ease;
}

.form-control::placeholder,
textarea.form-control::placeholder {
  color: var(--ui-muted);
  opacity: .9;
}

.input-group .input-group-text {
  background-color: var(--ui-surface);
  color: var(--ui-muted);
  border: 1px solid var(--ui-border);
}

.form-control:focus,
.form-select:focus {
  outline: none;
  border-color: var(--ui-primary);
  box-shadow: 0 0 0 .2rem var(--ui-focus-ring);
}

/* Checkboxes / radios (best-effort without changing markup) */
.form-check-input {
  border: 1px solid var(--ui-border);
  background-color: var(--ui-bg);
}
.form-check-input:checked {
  background-color: var(--ui-primary);
  border-color: var(--ui-primary);
}

/* Buttons */
.btn-primary {
  background-color: var(--ui-primary) !important;
  border-color: var(--ui-primary) !important;
  color: var(--ui-primary-contrast) !important;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--ui-primary-hover) !important;
  border-color: var(--ui-primary-hover) !important;
}
.btn-primary:focus-visible {
  box-shadow: 0 0 0 .2rem var(--ui-focus-ring) !important;
}

.btn-outline-secondary {
  color: var(--ui-text) !important;
  border-color: var(--ui-border) !important;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  background-color: var(--ui-surface) !important;
  border-color: var(--ui-muted) !important;
  color: var(--ui-text) !important;
}
.btn-outline-secondary:focus-visible {
  box-shadow: 0 0 0 .2rem var(--ui-focus-ring) !important;
}

/* Compact hero overlays readability */
.hero .hero-title, .hero .hero-subtitle {
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

/* Cards minor border harmonization */
.card, .event-card {
  border-color: var(--ui-border);
}

/* Quill editor harmonization */
.ql-toolbar.ql-snow,
.ql-container.ql-snow {
  border-color: var(--ui-border);
  background-color: var(--ui-bg);
  color: var(--ui-text);
}
.ql-editor {
  color: var(--ui-text);
}
.ql-editor.ql-blank::before {
  color: var(--ui-muted);
}