.formio-builder .btn, 
.formio-builder .btn-primary, 
.formio-builder .btn-default {
  font-size: 0.85rem !important;
  padding: 0.25rem 0.5rem !important;
  border-radius: 0.375rem !important;
  min-width: 0 !important;
  min-height: 0 !important;
  line-height: 1.2 !important;
  margin-bottom: 0.25rem !important;
}

/* Ensure icons are displayed properly */
.formio-builder .bx,
.formio-builder [class^="bx-"],
.formio-builder [class*=" bx-"] {
  font-family: "boxicons" !important;
  font-weight: normal !important;
  font-style: normal !important;
  display: inline-block !important;
  line-height: 1 !important;
  text-rendering: auto !important;
  -webkit-font-smoothing: antialiased !important;
}

.formio-builder .formio-component {
  margin-bottom: 0.25rem !important;
}

.formio-builder .formio-builder-panel-premium,
.formio-builder .formio-builder-panel-data {
  display: none !important;
}

/* Force the builder to be a horizontal flex container */
.formio.builder.formbuilder {
  display: flex !important;
  flex-direction: row !important;
  height: 100%;
}

/* Sidebar: fixed width, scrollable if needed */
.formio.builder.formbuilder .formcomponents {
  min-width: 260px;
  max-width: 320px;
  flex: 0 0 260px;
  margin-right: 1rem;
  overflow-y: auto;
  height: 100%;
}

/* Form area: take the rest of the space */
.formio.builder.formbuilder .formarea {
  flex: 1 1 0%;
  min-width: 0;
  overflow-y: auto;
  height: 100%;
}

/* Form scaling factor - change this value to scale entire form */
:root {
  --formio-scale: 0.8; /* 1.0 is original size */
}

/* Form Renderer Styles - Scalable Layout */
.formio-form .formio-component {
  margin-bottom: calc(1rem * var(--formio-scale)) !important;
}

.formio-form .form-group {
  margin-bottom: calc(1rem * var(--formio-scale)) !important;
}

/* Scalable font sizes - based on original baseline */
.formio-form label,
.formio-form .control-label {
  font-size: calc(1rem * var(--formio-scale)) !important;
  font-weight: 500 !important;
  margin-bottom: calc(0.25rem * var(--formio-scale)) !important;
}

.formio-form input,
.formio-form textarea,
.formio-form select,
.formio-form .form-control {
  font-size: calc(1rem * var(--formio-scale)) !important;
  padding: calc(0.5rem * var(--formio-scale)) calc(0.75rem * var(--formio-scale)) !important;
  border-radius: calc(0.375rem * var(--formio-scale)) !important;
  min-height: calc(2.5rem * var(--formio-scale)) !important;
}

/* Scalable floating/embedded labels style */
.formio-form .form-floating {
  position: relative !important;
}

.formio-form .form-floating > .form-control {
  padding: calc(1rem * var(--formio-scale)) calc(0.75rem * var(--formio-scale)) calc(0.25rem * var(--formio-scale)) calc(0.75rem * var(--formio-scale)) !important;
}

.formio-form .form-floating > label {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  height: 100% !important;
  padding: calc(1rem * var(--formio-scale)) calc(0.75rem * var(--formio-scale)) !important;
  pointer-events: none !important;
  border: 1px solid transparent !important;
  transform-origin: 0 0 !important;
  transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out !important;
  font-size: calc(0.875rem * var(--formio-scale)) !important;
  color: #6b7280 !important;
}

.formio-form .form-floating > .form-control:not(:-moz-placeholder) ~ label {
  opacity: 0.65 !important;
  transform: scale(0.85) translateY(calc(-0.5rem * var(--formio-scale))) translateX(calc(0.15rem * var(--formio-scale))) !important;
}

.formio-form .form-floating > .form-control:focus ~ label,
.formio-form .form-floating > .form-control:not(:placeholder-shown) ~ label {
  opacity: 0.65 !important;
  transform: scale(0.85) translateY(calc(-0.5rem * var(--formio-scale))) translateX(calc(0.15rem * var(--formio-scale))) !important;
}

/* Scalable checkboxes and radios */
.formio-form .form-check {
  min-height: calc(1.25rem * var(--formio-scale)) !important;
  margin-bottom: calc(0.5rem * var(--formio-scale)) !important;
}

.formio-form .form-check-input {
  width: calc(1rem * var(--formio-scale)) !important;
  height: calc(1rem * var(--formio-scale)) !important;
  margin-top: calc(0.125rem * var(--formio-scale)) !important;
  min-width: calc(1rem * var(--formio-scale)) !important;
  min-height: calc(1rem * var(--formio-scale)) !important;
  max-width: calc(1rem * var(--formio-scale)) !important;
  max-height: calc(1rem * var(--formio-scale)) !important;
  padding: 0 !important;
}

.formio-form .form-check-input:hover {
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3) !important;
}

.formio-form .form-check-input:focus {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5) !important;
}

.formio-form .form-check-label {
  font-size: calc(0.875rem * var(--formio-scale)) !important;
  padding-left: calc(0.25rem * var(--formio-scale)) !important;
}

/* Scalable radio buttons specifically */
.formio-form input[type="radio"] {
  width: calc(1rem * var(--formio-scale)) !important;
  height: calc(1rem * var(--formio-scale)) !important;
  margin-right: calc(0.5rem * var(--formio-scale)) !important;
  margin-left: calc(0.5rem * var(--formio-scale)) !important;
  margin-bottom: calc(0.25rem * var(--formio-scale)) !important;
  border-radius: 50% !important;
  min-width: calc(1rem * var(--formio-scale)) !important;
  min-height: calc(1rem * var(--formio-scale)) !important;
  max-width: calc(1rem * var(--formio-scale)) !important;
  max-height: calc(1rem * var(--formio-scale)) !important;
  padding: 0 !important;
}

.formio-form input[type="radio"]:hover {
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3) !important;
}

.formio-form input[type="radio"]:focus {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5) !important;
}

.formio-form .radio label,
.formio-form .form-radio label {
  font-size: calc(0.875rem * var(--formio-scale)) !important;
  padding-left: calc(0.25rem * var(--formio-scale)) !important;
}

.formio-form .radio,
.formio-form .form-radio {
  margin-bottom: calc(0.5rem * var(--formio-scale)) !important;
}

/* Scale radio button groups */
.formio-form .form-group.form-field-type-radio .form-control {
  padding: calc(0.375rem * var(--formio-scale)) !important;
}

.formio-form .form-group.form-field-type-radio label {
  font-size: calc(0.875rem * var(--formio-scale)) !important;
  margin-bottom: calc(0.25rem * var(--formio-scale)) !important;
}

/* Scalable panel headers and labels */
.formio-form .panel-title,
.formio-form .panel-heading,
.formio-form .formio-component-panel .panel-title,
.formio-form .formio-component-panel .panel-heading {
  font-size: calc(1.125rem * var(--formio-scale)) !important;
  padding: calc(0.75rem * var(--formio-scale)) calc(1rem * var(--formio-scale)) !important;
  margin-bottom: calc(0.5rem * var(--formio-scale)) !important;
}

.formio-form .panel,
.formio-form .formio-component-panel .panel {
  margin-bottom: calc(1rem * var(--formio-scale)) !important;
}

.formio-form .panel-body,
.formio-form .formio-component-panel .panel-body {
  padding: calc(1rem * var(--formio-scale)) !important;
}

/* Scalable fieldset legends */
.formio-form fieldset legend,
.formio-form .formio-component-fieldset legend {
  font-size: calc(1.125rem * var(--formio-scale)) !important;
  padding: calc(0.25rem * var(--formio-scale)) calc(0.5rem * var(--formio-scale)) !important;
  margin-bottom: calc(0.5rem * var(--formio-scale)) !important;
}

/* Scalable Data Map component */
.formio-form .formio-component-datamap .table th,
.formio-form .formio-component-datamap .table thead th {
  font-size: calc(0.875rem * var(--formio-scale)) !important;
  padding: calc(0.5rem * var(--formio-scale)) !important;
}

.formio-form .formio-component-datamap .table td {
  padding: calc(0.375rem * var(--formio-scale)) !important;
}

.formio-form .formio-component-datamap .btn {
  font-size: calc(0.75rem * var(--formio-scale)) !important;
  padding: calc(0.25rem * var(--formio-scale)) calc(0.5rem * var(--formio-scale)) !important;
}

/* Scalable HTML Element and Content components */
.formio-form .formio-component-htmlelement,
.formio-form .formio-component-content {
  font-size: calc(1rem * var(--formio-scale)) !important;
  padding: calc(0.5rem * var(--formio-scale)) !important;
  margin-bottom: calc(0.75rem * var(--formio-scale)) !important;
}

.formio-form .formio-component-htmlelement h1,
.formio-form .formio-component-content h1 {
  font-size: calc(2rem * var(--formio-scale)) !important;
  margin-bottom: calc(0.5rem * var(--formio-scale)) !important;
}

.formio-form .formio-component-htmlelement h2,
.formio-form .formio-component-content h2 {
  font-size: calc(1.5rem * var(--formio-scale)) !important;
  margin-bottom: calc(0.5rem * var(--formio-scale)) !important;
}

.formio-form .formio-component-htmlelement h3,
.formio-form .formio-component-content h3 {
  font-size: calc(1.25rem * var(--formio-scale)) !important;
  margin-bottom: calc(0.5rem * var(--formio-scale)) !important;
}

.formio-form .formio-component-htmlelement h4,
.formio-form .formio-component-content h4 {
  font-size: calc(1.125rem * var(--formio-scale)) !important;
  margin-bottom: calc(0.5rem * var(--formio-scale)) !important;
}

.formio-form .formio-component-htmlelement h5,
.formio-form .formio-component-content h5 {
  font-size: calc(1rem * var(--formio-scale)) !important;
  margin-bottom: calc(0.5rem * var(--formio-scale)) !important;
}

.formio-form .formio-component-htmlelement h6,
.formio-form .formio-component-content h6 {
  font-size: calc(0.875rem * var(--formio-scale)) !important;
  margin-bottom: calc(0.5rem * var(--formio-scale)) !important;
}

.formio-form .formio-component-htmlelement p,
.formio-form .formio-component-content p {
  font-size: calc(1rem * var(--formio-scale)) !important;
  margin-bottom: calc(0.75rem * var(--formio-scale)) !important;
  line-height: calc(1.5 * var(--formio-scale)) !important;
}

.formio-form .formio-component-htmlelement ul,
.formio-form .formio-component-htmlelement ol,
.formio-form .formio-component-content ul,
.formio-form .formio-component-content ol {
  font-size: calc(1rem * var(--formio-scale)) !important;
  margin-bottom: calc(0.75rem * var(--formio-scale)) !important;
  padding-left: calc(1.5rem * var(--formio-scale)) !important;
}

.formio-form .formio-component-htmlelement li,
.formio-form .formio-component-content li {
  margin-bottom: calc(0.25rem * var(--formio-scale)) !important;
}

/* Scalable submit button styling */
.formio-form .btn-default,
.formio-form .btn-primary,
.formio-form .btn-danger {
  font-size: calc(0.875rem * var(--formio-scale)) !important;
  padding: calc(0.5rem * var(--formio-scale)) calc(1rem * var(--formio-scale)) !important;
  margin-top: calc(1rem * var(--formio-scale)) !important;
}

/* Don't interfere with Formio's column system */

/* Scalable select dropdowns */
.formio-form select.form-control {
  height: calc(2.5rem * var(--formio-scale)) !important;
  line-height: calc(1.5 * var(--formio-scale)) !important;
}

/* Scalable date picker widgets */
.formio-form .flatpickr-calendar,
.formio-form .flatpickr-months,
.formio-form .flatpickr-weekdays,
.formio-form .flatpickr-days,
.formio-form .flatpickr-time {
  font-size: calc(0.875rem * var(--formio-scale)) !important;
}

.formio-form .flatpickr-calendar {
  width: calc(307.875px * var(--formio-scale)) !important;
}

.formio-form .flatpickr-months .flatpickr-month,
.formio-form .flatpickr-current-month {
  height: calc(28px * var(--formio-scale)) !important;
  line-height: calc(28px * var(--formio-scale)) !important;
}

.formio-form .flatpickr-weekdays,
.formio-form .flatpickr-days {
  width: 100% !important;
}

.formio-form .flatpickr-day {
  height: calc(39px * var(--formio-scale)) !important;
  line-height: calc(39px * var(--formio-scale)) !important;
  max-width: calc(39px * var(--formio-scale)) !important;
  width: calc(14.2857% * var(--formio-scale)) !important;
  font-size: calc(0.875rem * var(--formio-scale)) !important;
}

.formio-form .flatpickr-weekday {
  height: calc(28px * var(--formio-scale)) !important;
  line-height: calc(28px * var(--formio-scale)) !important;
  font-size: calc(0.75rem * var(--formio-scale)) !important;
}

.formio-form .flatpickr-time input {
  font-size: calc(1rem * var(--formio-scale)) !important;
  height: calc(40px * var(--formio-scale)) !important;
  line-height: calc(40px * var(--formio-scale)) !important;
}

.formio-form .flatpickr-time .flatpickr-time-separator,
.formio-form .flatpickr-time .flatpickr-am-pm {
  font-size: calc(1rem * var(--formio-scale)) !important;
  height: calc(40px * var(--formio-scale)) !important;
  line-height: calc(40px * var(--formio-scale)) !important;
}

/* Scale navigation arrows */
.formio-form .flatpickr-prev-month,
.formio-form .flatpickr-next-month {
  width: calc(28px * var(--formio-scale)) !important;
  height: calc(28px * var(--formio-scale)) !important;
}

.formio-form .flatpickr-prev-month svg,
.formio-form .flatpickr-next-month svg {
  width: calc(14px * var(--formio-scale)) !important;
  height: calc(14px * var(--formio-scale)) !important;
}

/* Scoped Bootstrap/Tailwind grid conflict resolution - only affects Formio components */

/* Ensure Tailwind grid classes work properly within Formio contexts */
.formio-builder [class*="grid-cols-"],
.formio-form [class*="grid-cols-"],
.formio-dialog [class*="grid-cols-"] {
  display: grid !important;
}

/* Generate grid template columns for common patterns - Formio scoped */
.formio-builder .grid-cols-1,
.formio-form .grid-cols-1,
.formio-dialog .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }

.formio-builder .grid-cols-2,
.formio-form .grid-cols-2,
.formio-dialog .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

.formio-builder .grid-cols-3,
.formio-form .grid-cols-3,
.formio-dialog .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }

.formio-builder .grid-cols-4,
.formio-form .grid-cols-4,
.formio-dialog .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }

.formio-builder .grid-cols-5,
.formio-form .grid-cols-5,
.formio-dialog .grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }

.formio-builder .grid-cols-6,
.formio-form .grid-cols-6,
.formio-dialog .grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }

.formio-builder .grid-cols-12,
.formio-form .grid-cols-12,
.formio-dialog .grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }

/* Generate column span classes - Formio scoped */
.formio-builder .col-span-6,
.formio-form .col-span-6,
.formio-dialog .col-span-6 { grid-column: span 6 / span 6 !important; }

.formio-builder .col-span-12,
.formio-form .col-span-12,
.formio-dialog .col-span-12 { grid-column: span 12 / span 12 !important; }

/* Responsive column span classes - Formio scoped */
.formio-builder .sm\:col-span-6,
.formio-form .sm\:col-span-6,
.formio-dialog .sm\:col-span-6 { grid-column: span 6 / span 6 !important; }

.formio-builder .sm\:col-span-12,
.formio-form .sm\:col-span-12,
.formio-dialog .sm\:col-span-12 { grid-column: span 12 / span 12 !important; }

/* Override Bootstrap's flex-based grid system when Tailwind grid classes are used - Formio scoped */
.formio-builder [class*="grid-cols-"] [class*="col-span-"],
.formio-builder [class*="grid-cols-"] [class*="sm:col-span-"],
.formio-form [class*="grid-cols-"] [class*="col-span-"],
.formio-form [class*="grid-cols-"] [class*="sm:col-span-"],
.formio-dialog [class*="grid-cols-"] [class*="col-span-"],
.formio-dialog [class*="grid-cols-"] [class*="sm:col-span-"] {
  width: auto !important;
  flex: none !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Fix Boxicons tooltip icon visibility */
.bx-question-mark:before {
  content: "?";
}

/* Force tooltip visibility regardless of dynamic loading */
i[ref="tooltip"],
[ref="tooltip"],
i[data-tooltip],
[data-tooltip] {
  background-color: rgb(156 163 175) !important;
  color: rgb(255 255 255) !important;
  width: 1rem !important;
  height: 1rem !important;
  font-size: calc(1rem * var(--formio-scale)) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  transform: translateY(-0.125rem) !important;
  border-radius: 50% !important;
  margin: 0 0 0 0.25rem !important;
  min-width: 1rem !important;
  min-height: 1rem !important;
  position: relative !important;
}

/* Ensure question mark content appears */
i[ref="tooltip"]:before,
[ref="tooltip"]:before,
i[data-tooltip]:before,
[data-tooltip]:before {
  content: "?" !important;
  font-style: normal !important;
  font-weight: normal !important;
}

/* Form.io component edit Help button positioning - scoped to FormIO dialogs */
.formio-dialog .component-edit-container .col-span-6.flex.justify-end.items-center.pr-15 .reset-link {
  padding-right: 3rem !important;
}

/* Ensure buttons don't cause overflow */
.formio-form .btn-group.pull-right{
  float: left !important;
}