/* vm_poptavka front styles: align inline fields and radios */

/* Inline text field layout used by vprvyrnaz.tpl, vprtextpopzak.tpl, vprvyrkodbar.tpl */
.vm-inline-field {
  display: flex;
  align-items: center;
  gap: .5rem; /* visual separation between label and input */
  flex-wrap: nowrap;
  width: auto;
  max-width: 100%;
}
.vm-inline-field .vm-label {
  min-width: 240px; /* makes labels equal width => horizontal alignment */
  white-space: nowrap;
  margin: 0; /* reset default label margins if any */
}
.vm-inline-field .vm-input {
  flex: 0 0 auto;
}

/* Radios: place label closer to the control and keep them on one line */
.vm-field-radio .form-check,
.vm-field-radio-inline .form-check {
  display: inline-flex;
  align-items: center;
  margin-right: 1rem; /* space between options */
}
.vm-field-radio .form-check .form-check-input,
.vm-field-radio-inline .form-check .form-check-input {
  margin: 0 .4rem 0 0; /* small right gap only */
}

/* Ensure gap for the custom quantity inline textbox label */
.vm-field-multi-check-text .vm-custom label {
  margin-right: .5rem;
}

/* Fallback spacing for inline checkbox before label (e.g., "Znám kód výrobku…") */
.vm-inline-field input.form-check-input[type="checkbox"] {
  /* Reset Bootstrap's negative left margin and keep a right gap */
  margin: 0 .6rem 0 0;
  float: none; /* prevent overlap caused by Bootstrap float */
  position: static; /* ensure normal flow */
  flex: 0 0 auto; /* don't shrink */
}
/* Ensure a minimum gap even if flex gap is overridden */
.vm-inline-field input[type="checkbox"] + .vm-label {
  margin-left: .25rem;
}

/* Mobile fallback */
@media (max-width: 576px) {
  .vm-inline-field { flex-wrap: wrap; }
  .vm-inline-field .vm-label { min-width: 100%; }
}


/* Visual theme for vm_poptavka: fonts, colors, borders, subtle elevation */
.vm-poptavka-form {
  /* Accessible, calm palette (inspiration from vm_jidelnicky screenshot) */
  --vm-bg: #ffffff;
  --vm-surface: #f8fafc; /* light slate */
  --vm-primary: #2563eb; /* blue-600 */
  --vm-primary-600: #1d4ed8; /* blue-700 */
  --vm-muted: #6b7280; /* gray-500 */
  --vm-border: #e5e7eb; /* gray-200 */
  --vm-radius: 12px;
  --vm-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(2,6,23,.06);
}

/* Card-like groups for better scanability */
.vm-poptavka-form .vp-group {
  background: var(--vm-bg);
  border: 1px solid var(--vm-border);
  border-radius: var(--vm-radius);
  box-shadow: var(--vm-shadow);
  padding: 16px;
  margin-bottom: 18px;
}

/* Field blocks */
.vm-poptavka-form .form-group {
  background: var(--vm-bg);
  border: 1px solid var(--vm-border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
}

/* Labels and help texts */
.vm-poptavka-form .form-label,
.vm-poptavka-form label.vm-label {
  font-weight: 600;
  color: #0f172a; /* slate-900 */
  margin-bottom: .25rem;
}
.vm-poptavka-form .form-text,
.vm-poptavka-form .text-muted { color: var(--vm-muted); }

/* Inputs */
.vm-poptavka-form .form-control {
  border-radius: 10px;
  border: 1px solid var(--vm-border);
  background: var(--vm-surface);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.vm-poptavka-form .form-control:focus {
  border-color: var(--vm-primary);
  box-shadow: 0 0 0 .2rem rgba(37,99,235,.15);
  background: #fff;
}
#btn-new-poptavka { background-color:#2563eb !important; }
.vm-poptavka-form ::placeholder { color: var(--vm-muted); opacity: 1; }

/* Radios & checkboxes */
.vm-poptavka-form .form-check-input {
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0;
  accent-color: var(--vm-primary);
  border-color: var(--vm-border);
}
.vm-poptavka-form .form-check-label { margin-left: .25rem; }

/* Keep our inline field spacing but remove extra padding inside the chip */
.vm-poptavka-form .vm-inline-field { padding: 0; }

/* Buttons */
.vm-poptavka-form .btn-primary {
  background: var(--vm-primary);
  border-color: var(--vm-primary);
  border-radius: 10px;
  box-shadow: 0 1px 1px rgba(0,0,0,.05);
}
.vm-poptavka-form .btn-primary:hover,
.vm-poptavka-form .btn-primary:focus {
  background: var(--vm-primary-600);
  border-color: var(--vm-primary-600);
}

/* Clear button: grey background, black text */
.vm-poptavka-form .vm-btn-clear {
  background-color: #e5e7eb; /* gray-200 */
  border-color: #e5e7eb;
  color: #111827; /* gray-900 */
  border-radius: 10px;
}
.vm-poptavka-form .vm-btn-clear:hover,
.vm-poptavka-form .vm-btn-clear:focus {
  background-color: #d1d5db; /* gray-300 */
  border-color: #d1d5db;
  color: #000000;
}

/* Alerts */
.vm-poptavka-form .alert { border-radius: var(--vm-radius); }

/* Mobile spacing tweaks */
@media (max-width: 576px) {
  .vm-poptavka-form .form-group { padding: 10px 12px; }
}


/* Actions row alignment: push Clear (Vyčisit) to the right on desktop */
.vm-poptavka-form .form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  width: 100%;
}
@media (min-width: 576px) {
  .vm-poptavka-form .form-actions #btnClear {
    margin-left: auto; /* reliably moves Clear to the far right */
  }
}