/* ===== Vutex Forms — compact palette (Light + ChatGPT-Dark) ===== */

/* ---------- LIGHT ---------- */
:root[data-bs-theme='light'] {
  /* Core palette */
  --vf-bg: #f7f7f8;
  --vf-surface: #ffffff;
  --vf-surface-2: #f1f5f9;
  --vf-border: #e5e7eb;
  --vf-text: #111827;
  --vf-muted: #6b7280;
  --vf-primary: #0d6efd;
  --vf-primary-hover: #0b5ed7;
  --vf-primary-border: #0a58ca;

  /* Map to Bootstrap */
  --bs-body-bg: var(--vf-bg);
  --bs-body-color: var(--vf-text);
  --bs-border-color: var(--vf-border);
  --bs-card-bg: var(--vf-surface);
  --bs-card-color: var(--vf-text);
  --bs-tertiary-bg: var(--vf-surface-2);
  --bs-secondary-bg: var(--vf-surface);
  --bs-secondary-color: var(--vf-muted);
  --bs-primary: var(--vf-primary);
  --bs-link-color: var(--vf-primary);
}

/* ---------- DARK (ChatGPT-style) ---------- */
:root[data-bs-theme='dark'] {
  --vf-bg: #202123;
  --vf-surface: #26272b;
  --vf-surface-2: #2b2c2f;
  --vf-border: #32343a;
  --vf-text: #ececf1;
  --vf-muted: #b7b8bd;
  --vf-primary: #10a37f;
  --vf-primary-hover: #0e8f71;
  --vf-primary-border: #0f8268;

  --bs-body-bg: var(--vf-bg);
  --bs-body-color: var(--vf-text);
  --bs-border-color: var(--vf-border);
  --bs-card-bg: var(--vf-surface);
  --bs-card-color: var(--vf-text);
  --bs-tertiary-bg: var(--vf-surface-2);
  --bs-secondary-bg: var(--vf-surface);
  --bs-secondary-color: var(--vf-muted);
  --bs-primary: var(--vf-primary);
  --bs-link-color: var(--vf-primary);
}

/* ---------- STRUCTURE ---------- */
.navbar-dark.bg-dark {
  background: var(--vf-bg) !important;
}

.card {
  background: var(--vf-surface) !important;
  border-color: var(--vf-border) !important;
}

.card .card-header {
  background: var(--vf-surface-2) !important;
  border-bottom-color: var(--vf-border) !important;
}

/* ---------- FORMS ---------- */
.form-control,
.form-select {
  background: #fff !important;
  color: #111827 !important;
  border-color: var(--vf-border) !important;
}

.form-control::placeholder {
  color: #9ca3af !important;
}

:root[data-bs-theme='dark'] .form-control,
:root[data-bs-theme='dark'] .form-select {
  background: #1f2023 !important;
  color: var(--vf-text) !important;
  border-color: var(--vf-border) !important;
}

:root[data-bs-theme='dark'] .form-control::placeholder {
  color: #9aa0a6 !important;
}

/* ---------- BUTTONS ---------- */
.btn-primary {
  background: var(--vf-primary) !important;
  border-color: var(--vf-primary) !important;
}

.btn-primary:hover {
  background: var(--vf-primary-hover) !important;
  border-color: var(--vf-primary-border) !important;
}

/* Light mode: keep outline-secondary light on hover/press */
:root[data-bs-theme='light'] .btn-outline-secondary {
  color: #334155;
  border-color: #cbd5e1;
  background: transparent;
}

:root[data-bs-theme='light'] .btn-outline-secondary:hover,
:root[data-bs-theme='light'] .btn-outline-secondary:focus {
  background: #e5e7eb;
  color: #111827;
  border-color: #cbd5e1;
}

:root[data-bs-theme='light'] .btn-outline-secondary:active {
  background: #dfe3e8;
}

/* Dark mode: subtle hover for outline-secondary */
:root[data-bs-theme='dark'] .btn-outline-secondary {
  color: #cbd5e1;
  border-color: #3d4148;
  background: transparent;
}

:root[data-bs-theme='dark'] .btn-outline-secondary:hover,
:root[data-bs-theme='dark'] .btn-outline-secondary:focus {
  background: #2b2c2f;
  color: #ececf1;
  border-color: #4a4f57;
}

:root[data-bs-theme='dark'] .btn-outline-secondary:active {
  background: #26292e;
}

/* ---------- LISTS (hover you asked for) ---------- */
.list-group-item {
  background: var(--vf-surface) !important;
  color: var(--vf-text) !important;
  border-color: var(--vf-border) !important;
}

.list-group-item-action:hover,
.list-group-item-action:focus {
  background: var(--bs-tertiary-bg) !important;
}

.list-group-item.active {
  background: #222427 !important;
  border-color: #34373d !important;
  color: #e5e7eb !important;
}

:root[data-bs-theme='light'] .list-group-item.active {
  background: #e9eef5 !important;
  border-color: #cbd5e1 !important;
  color: #111827 !important;
}

/* ---------- TOASTS ---------- */
.toast {
  background: var(--vf-surface-2) !important;
  color: var(--vf-text) !important;
  border: none !important;
}

.toast .btn-close {
  filter: invert(1) grayscale(1);
}

/* ---------- FORM.IO (builder + renderer) ---------- */
/* Panels */
.formio-component .card,
.formio-dialog .modal-content {
  background: var(--vf-surface) !important;
  color: var(--vf-text) !important;
  border-color: var(--vf-border) !important;
}

.formio-component .card-header,
.formio-dialog .modal-header {
  background: var(--vf-surface-2) !important;
  color: var(--vf-text) !important;
  border-bottom-color: var(--vf-border) !important;
}

/* Inputs inside Form.io */
.formio-component .form-control,
.formio-component .form-select {
  background: #fff !important;
  color: #111827 !important;
  border-color: var(--vf-border) !important;
}

:root[data-bs-theme='dark'] .formio-component .form-control,
:root[data-bs-theme='dark'] .formio-component .form-select {
  background: #1f2023 !important;
  color: var(--vf-text) !important;
  border-color: var(--vf-border) !important;
}
/* -- Fix: enforce dark background on Form.io editor modal in dark mode -- */
:root[data-bs-theme='dark'] .formio-dialog .formio-dialog-content,
:root[data-bs-theme='dark'] .formio-dialog.formio-dialog-theme-default .formio-dialog-content {
  background: var(--vf-surface) !important;
  color: var(--vf-text) !important;
  border-color: var(--vf-border) !important;
}

/* Optional: ensure the editor’s side panels match dark surfaces */
:root[data-bs-theme='dark'] .component-edit-container,
:root[data-bs-theme='dark'] .component-edit-content {
  background: var(--vf-surface) !important;
}

/* Builder palette & drop zones (neutral gray, no purple) */
.formio-builder .formcomponents .btn {
  background: transparent !important;
  color: var(--vf-text) !important;
  border-color: var(--vf-border) !important;
}

.formio-builder .formcomponents .btn:hover {
  background: var(--vf-surface-2) !important;
}

:root[data-bs-theme='light'] .formio-builder .formarea .placeholder,
:root[data-bs-theme='light'] .formio-drop-zone {
  background: #eef2f6 !important;
  color: #475569 !important;
  border: 1px dashed #cbd5e1 !important;
}

:root[data-bs-theme='dark'] .formio-builder .formarea .placeholder,
:root[data-bs-theme='dark'] .formio-drop-zone {
  background: #2a2c30 !important;
  color: #cbd5e1 !important;
  border: 1px dashed #3d4148 !important;
}
/* --- Fix light-mode fields (force white inputs, readable text) --- */
:root[data-bs-theme='light'] .form-control,
:root[data-bs-theme='light'] .form-select,
:root[data-bs-theme='light'] .form-check-input,
:root[data-bs-theme='light'] textarea.form-control {
  background: #ffffff !important;
  color: #111827 !important;           /* near-black text */
  border-color: #cbd5e1 !important;    /* slate-300 */
}

/* placeholders and select options */
:root[data-bs-theme='light'] .form-control::placeholder,
:root[data-bs-theme='light'] .form-select::placeholder {
  color: #9ca3af !important;           /* slate-400 */
}

/* focus ring / border in light */
:root[data-bs-theme='light'] .form-control:focus,
:root[data-bs-theme='light'] .form-select:focus,
:root[data-bs-theme='light'] textarea.form-control:focus {
  background: #ffffff !important;
  color: #111827 !important;
  border-color: #86b7fe !important;    /* bootstrap focus blue */
  box-shadow: 0 0 0 .2rem rgba(13,110,253,.15) !important;
}

/* checkboxes & radios in light */
:root[data-bs-theme='light'] .form-check-input:checked {
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
}
:root[data-bs-theme='light'] .form-check-input:not(:checked) {
  background-color: #ffffff !important;
}

/* disable any accidental dark overrides on light cards that wrap forms */
:root[data-bs-theme='light'] .card,
:root[data-bs-theme='light'] .card .card-header {
  background: #ffffff !important;
  color: #111827 !important;
  border-color: #e5e7eb !important;
}
/* Light mode navbar — not white, readable text/buttons */
:root[data-bs-theme='light'] .navbar-dark.bg-dark,
:root[data-bs-theme='light'] nav.navbar {
  background-color: #2a2c30 !important;   /* soft gray */
  border-bottom: 1px solid #dbe1e8 !important;
}

:root[data-bs-theme='light'] .navbar-dark .navbar-brand {
  color: #fff !important;                   /* site name = white */
}

/* Login button on render when in light mode */
:root[data-bs-theme='light'] .navbar-dark .btn-light {
  color: #111827 !important;
  background: #ffffff !important;
  border-color: #e5e7eb !important;
}

/* Softer shadow for consistency */
:root[data-bs-theme='light'] .nav-shadow {
  box-shadow: 0 6px 18px rgba(0,0,0,.08) !important;
}
/* ===== Form.io edit dialogs — force dark (kill all white bits) ===== */
:root[data-bs-theme='dark'] .formio-dialog,
:root[data-bs-theme='dark'] .formio-dialog .modal-content,
:root[data-bs-theme='dark'] .formio-dialog .modal-header,
:root[data-bs-theme='dark'] .formio-dialog .modal-body,
:root[data-bs-theme='dark'] .formio-dialog .modal-footer{
  background: var(--vf-surface) !important;
  color: var(--vf-text) !important;
  border-color: var(--vf-border) !important;
}

/* Tabs in the dialog */
:root[data-bs-theme='dark'] .formio-dialog .nav-tabs .nav-link{
  background: transparent !important;
  color: var(--vf-muted) !important;
  border-color: var(--vf-border) !important;
}
:root[data-bs-theme='dark'] .formio-dialog .nav-tabs .nav-link.active{
  background: var(--vf-surface-2) !important;
  color: var(--vf-text) !important;
  border-color: var(--vf-border) !important;
}
:root[data-bs-theme='dark'] .formio-dialog .tab-content{
  background: var(--vf-surface) !important;
}

/* Inputs inside the dialog */
:root[data-bs-theme='dark'] .formio-dialog .form-control,
:root[data-bs-theme='dark'] .formio-dialog .form-select{
  background:#1f2023 !important;
  color:var(--vf-text) !important;
  border-color:var(--vf-border) !important;
}
:root[data-bs-theme='dark'] .formio-dialog .form-control::placeholder{
  color:#9aa0a6 !important;
}

/* Dropdown menus (Bootstrap) */
:root[data-bs-theme='dark'] .formio-dialog .dropdown-menu{
  background:#1f2023 !important;
  color:var(--vf-text) !important;
  border-color:var(--vf-border) !important;
}
:root[data-bs-theme='dark'] .formio-dialog .dropdown-item{
  color:var(--vf-text) !important;
}
:root[data-bs-theme='dark'] .formio-dialog .dropdown-item:hover,
:root[data-bs-theme='dark'] .formio-dialog .dropdown-item:focus{
  background:#2b2c2f !important;
}

/* Choices.js / Selectize style selects (Form.io uses these in editors) */
:root[data-bs-theme='dark'] .formio-dialog .choices,
:root[data-bs-theme='dark'] .formio-dialog .choices__inner,
:root[data-bs-theme='dark'] .formio-dialog .choices__list--dropdown{
  background:#1f2023 !important;
  color:var(--vf-text) !important;
  border-color:var(--vf-border) !important;
}
:root[data-bs-theme='dark'] .formio-dialog .choices__item--selectable.is-highlighted{
  background:#2b2c2f !important;
  color:var(--vf-text) !important;
}

/* Tables / panels inside the dialog */
:root[data-bs-theme='dark'] .formio-dialog .table{
  color:var(--vf-text) !important;
  background: transparent !important;
}
:root[data-bs-theme='dark'] .formio-dialog .table td,
:root[data-bs-theme='dark'] .formio-dialog .table th{
  border-color:var(--vf-border) !important;
  background: transparent !important;
}
:root[data-bs-theme='dark'] .formio-dialog .panel,
:root[data-bs-theme='dark'] .formio-dialog .well{
  background:var(--vf-surface) !important;
  color:var(--vf-text) !important;
  border-color:var(--vf-border) !important;
}
/* ==== Form.io edit dialogs – enforce full dark, kill all white ==== */
:root[data-bs-theme='dark'] .formio-dialog,
:root[data-bs-theme='dark'] .formio-dialog .modal-content,
:root[data-bs-theme='dark'] .formio-dialog .modal-header,
:root[data-bs-theme='dark'] .formio-dialog .modal-body,
:root[data-bs-theme='dark'] .formio-dialog .modal-footer,
:root[data-bs-theme='dark'] .formio-dialog .editForm,
:root[data-bs-theme='dark'] .formio-dialog .preview-panel,
:root[data-bs-theme='dark'] .formio-dialog .formio-preview,
:root[data-bs-theme='dark'] .formio-dialog .formio,
:root[data-bs-theme='dark'] .formio-dialog .formio-form {
  background: var(--vf-surface) !important;
  color: var(--vf-text) !important;
  border-color: var(--vf-border) !important;
}

/* Tabs */
:root[data-bs-theme='dark'] .formio-dialog .nav-tabs .nav-link{ 
  background: transparent !important; color: var(--vf-muted) !important; border-color: var(--vf-border) !important;
}
:root[data-bs-theme='dark'] .formio-dialog .nav-tabs .nav-link.active{
  background: var(--vf-surface-2) !important; color: var(--vf-text) !important; border-color: var(--vf-border) !important;
}

/* Inputs */
:root[data-bs-theme='dark'] .formio-dialog .form-control,
:root[data-bs-theme='dark'] .formio-dialog .form-select{
  background:#1f2023 !important; color:var(--vf-text) !important; border-color:var(--vf-border) !important;
}
:root[data-bs-theme='dark'] .formio-dialog .form-control::placeholder{ color:#9aa0a6 !important; }

/* Tables (column editor grids, etc.) */
:root[data-bs-theme='dark'] .formio-dialog .table{ background: transparent !important; color: var(--vf-text) !important; }
:root[data-bs-theme='dark'] .formio-dialog .table td,
:root[data-bs-theme='dark'] .formio-dialog .table th{
  background: transparent !important; border-color: var(--vf-border) !important; color: var(--vf-text) !important;
}

/* Panels inside dialog */
:root[data-bs-theme='dark'] .formio-dialog .panel,
:root[data-bs-theme='dark'] .formio-dialog .well,
:root[data-bs-theme='dark'] .formio-dialog .card{
  background: var(--vf-surface) !important; color: var(--vf-text) !important; border-color: var(--vf-border) !important;
}
:root[data-bs-theme='dark'] .formio-dialog .card-header{ background: var(--vf-surface-2) !important; }

/* Choices/Selectize dropdowns used by Form.io editors */
:root[data-bs-theme='dark'] .formio-dialog .choices,
:root[data-bs-theme='dark'] .formio-dialog .choices__inner,
:root[data-bs-theme='dark'] .formio-dialog .choices__list--dropdown{
  background:#1f2023 !important; color:var(--vf-text) !important; border-color:var(--vf-border) !important;
}
:root[data-bs-theme='dark'] .formio-dialog .choices__item--selectable.is-highlighted{
  background:#2b2c2f !important; color:var(--vf-text) !important;
}

/* Code editors that Form.io may embed (Ace / CodeMirror) */
:root[data-bs-theme='dark'] .formio-dialog .ace_editor,
:root[data-bs-theme='dark'] .formio-dialog .ace_content,
:root[data-bs-theme='dark'] .formio-dialog .ace_gutter,
:root[data-bs-theme='dark'] .formio-dialog .ace_scroller,
:root[data-bs-theme='dark'] .formio-dialog .CodeMirror,
:root[data-bs-theme='dark'] .formio-dialog .CodeMirror-gutters {
  background:#1f2023 !important; color:var(--vf-text) !important; border-color:var(--vf-border) !important;
}

/* Any hardcoded .bg-white coming from library markup */
:root[data-bs-theme='dark'] .formio-dialog .bg-white{ background: var(--vf-surface) !important; }

/* //--Start Audit Maps CSS (TABLE) */
.vutex-line-table{
  width:100%;
  table-layout:fixed;
  border-collapse:separate;
  border-spacing:6px; /* gap between squares */
  margin:0;
}
.vutex-line-table td.cell{
  position:relative;
  height:34px;
  text-align:center;
  vertical-align:middle;
  border:1px solid var(--bs-border-color);
  border-radius:.35rem;
  padding:0;
  font-weight:600;
  font-size:.85rem;
  user-select:none;
}
.vutex-line-table td.cell.hit{ background:rgba(25,135,84,.25); border-color:var(--bs-success); }
.vutex-line-table td.cell .count{ position:absolute; top:-6px; right:-6px; font-size:.65rem; }
/* smaller on narrow screens */
@media (max-width:600px){
  .vutex-line-table td.cell{ height:28px; font-size:.75rem; }
}
/* //--End Audit Maps CSS (TABLE) */



/* ───────── Dark mode fixes for Form.io Select (Choices.js) ───────── */
[data-bs-theme="dark"] .formio-component-select .choices__inner {
  background-color: #111827 !important;  /* bg-slate-900-ish */
  color: #e5e7eb !important;             /* text-slate-200 */
  border-color: #4b5563 !important;
}

[data-bs-theme="dark"] .formio-component-select .choices__list--dropdown,
[data-bs-theme="dark"] .formio-component-select .choices__list--dropdown .choices__item {
  background-color: #111827 !important;
  color: #e5e7eb !important;
}

[data-bs-theme="dark"] .formio-component-select .choices__list--dropdown .choices__item--selectable.is-highlighted {
  background-color: #1f2937 !important;  /* slightly lighter for hover */
  color: #f9fafb !important;
}

[data-bs-theme="dark"] .formio-component-select .choices__input {
  background-color: #111827 !important;
  color: #e5e7eb !important;
}

[data-bs-theme="dark"] .formio-component-select .choices__placeholder {
  color: #9ca3af !important; /* muted placeholder */
}
/* Audit IP map extra rows */
.vutex-line-table .map-label-row {
  font-size: 0.75rem;
  font-weight: 500;
  color: #6b7280; /* muted gray */
  padding-top: 4px;
  padding-bottom: 2px;
  text-align: left;
}

.vutex-line-table .row-sub .cell,
.vutex-line-table .row-styling .cell {
  /* keep same height as main cells but they looked extra tall, so we can trim slightly */
  padding-top: 4px;
  padding-bottom: 4px;
}

.vutex-line-table .cell.cell-empty {
  background: transparent;
  border-color: transparent;
  cursor: default;
}