/* formio-sola.css — scoped styling for Form.IO in DMS.
   Renderer scope: .formio-sola (metadata forms in upload/properties/split-edit dialogs).
   Builder scope:  #viewContentTypeForm (the content-type form designer page). */

/* ---------- Renderer (metadata forms) ---------- */
.formio-sola .formio-form {
  font-size: 0.875rem;
}
.formio-sola .form-control,
.formio-sola .form-select {
  font-size: 0.875rem;
}
.formio-sola .form-control:focus,
.formio-sola .form-select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.15);
}
.formio-sola .col-form-label,
.formio-sola label {
  font-weight: 500;
  font-size: 0.8125rem;
  color: #374151;
}
.formio-sola .field-required::after {
  color: #dc2626;
}
.formio-sola .formio-component {
  margin-bottom: 0.75rem;
}
.formio-sola .formio-errors .error {
  font-size: 0.75rem;
}
.formio-sola .form-text {
  font-size: 0.75rem;
}

/* RTL: mirror the layout but keep numeric/date/phone/url inputs LTR for legibility. */
.formio-sola[dir="rtl"] {
  text-align: right;
}
.formio-sola[dir="rtl"] .form-check {
  padding-right: 1.5em;
  padding-left: 0;
}
.formio-sola[dir="rtl"] .form-check .form-check-input {
  float: right;
  margin-right: -1.5em;
  margin-left: 0;
}
.formio-sola[dir="rtl"] .formio-component-number input,
.formio-sola[dir="rtl"] .formio-component-currency input,
.formio-sola[dir="rtl"] .formio-component-phoneNumber input,
.formio-sola[dir="rtl"] .formio-component-url input,
.formio-sola[dir="rtl"] .formio-component-email input,
.formio-sola[dir="rtl"] .formio-component-datetime input,
.formio-sola[dir="rtl"] .formio-component-day input,
.formio-sola[dir="rtl"] .formio-component-day select {
  direction: ltr;
  text-align: right;
}

/* Empty state */
.formio-sola-empty {
  padding: 0.75rem;
  border: 1px dashed #d1d5db;
  border-radius: 6px;
  color: #6b7280;
  font-size: 0.8125rem;
  text-align: center;
}

/* ---------- Builder page ---------- */
#viewContentTypeForm .formio-builder {
  min-height: 100%;
}
#viewContentTypeForm .formio-builder-form {
  padding: 1rem;
}
#viewContentTypeForm .json-view {
  font-family: 'Monaco', 'Menlo', monospace;
  font-size: 0.75rem;
  background: #1e1e1e;
  color: #d4d4d4;
  padding: 1rem;
  border-radius: 8px;
  overflow: auto;
  max-height: 60vh;
}

/* Form.io builder sidebar fixes (ported from SOLA.Workflow, BS5 accordion) */
#viewContentTypeForm .builder-sidebar,
#viewContentTypeForm .formcomponents {
  padding: 0.5rem;
}
#viewContentTypeForm .builder-sidebar .card,
#viewContentTypeForm .formcomponents .card {
  border: none;
  margin-bottom: 0.25rem;
}
#viewContentTypeForm .builder-sidebar .card-header,
#viewContentTypeForm .formcomponents .card-header {
  padding: 0.5rem 0.75rem;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 4px !important;
  cursor: pointer !important;
  user-select: none;
}
#viewContentTypeForm .builder-sidebar .card-header:hover,
#viewContentTypeForm .formcomponents .card-header:hover {
  background: #e9ecef;
}
#viewContentTypeForm .builder-sidebar .card-header.bg-primary,
#viewContentTypeForm .builder-sidebar .card-header.bg-default,
#viewContentTypeForm .formcomponents .card-header.bg-primary,
#viewContentTypeForm .formcomponents .card-header.bg-default {
  background: #2563eb !important;
  border-color: #2563eb;
  color: #fff;
}
#viewContentTypeForm .builder-sidebar .card-body,
#viewContentTypeForm .formcomponents .card-body {
  padding: 0.5rem;
  border: 1px solid #dee2e6;
  border-top: none;
  border-radius: 0 0 4px 4px;
}
#viewContentTypeForm .builder-sidebar .collapse,
#viewContentTypeForm .formcomponents .collapse {
  display: none;
}
#viewContentTypeForm .builder-sidebar .collapse.show,
#viewContentTypeForm .formcomponents .collapse.show {
  display: block;
}
#viewContentTypeForm .builder-sidebar [ref="group-panel-premium"],
#viewContentTypeForm .formcomponents [ref="group-panel-premium"] {
  display: none !important;
}

/* The builder canvas stays LTR even under the Arabic shell (dragula drag mirrors misplace under rtl);
   Arabic is verified through the Preview dialog instead. */
#viewContentTypeForm .builder-canvas-wrap {
  direction: ltr;
  text-align: left;
}

/* Component settings dialog (rendered by the builder inside the page) */
#viewContentTypeForm .formio-dialog {
  z-index: 10010;
}
#viewContentTypeForm .formio-dialog .formio-dialog-content {
  max-width: 900px;
}

/* Arabic tab inputs inside the component settings dialog */
.formio-dialog input[dir="rtl"],
.formio-dialog textarea[dir="rtl"] {
  text-align: right;
}