/**
 * Form Renderer Styles
 * Clean production-ready styles without drag/drop UI elements
 */

/* Form Container */
.form-renderer-container {
  padding: 2rem;
  background-color: var(--sf-bg-color);
}

/* Form */
.form-renderer {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* ============================================================
   TEMPLATE-BASED LAYOUT SYSTEM
   Only applies when UI schema is NOT provided (auto-generated)
   ============================================================ */

/* Two-Column Layout */
.form-renderer.twolayout {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

/* Three-Column Layout */
.form-renderer.threelayout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

/* Four-Column Layout */
.form-renderer.fourlayout {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.form-renderer.twolayout > .form-group:has(.e-btn),
.form-renderer.threelayout > .form-group:has(.e-btn),
.form-renderer.fourlayout > .form-group:has(.e-btn) {
  align-self: flex-end;
}

.form-renderer.twolayout > .form-group:has(.e-message),
.form-renderer.threelayout > .form-group:has(.e-message),
.form-renderer.fourlayout > .form-group:has(.e-message) {
  align-self: flex-end;
}

.form-renderer.twolayout > .form-group:has(.e-checkbox),
.form-renderer.threelayout > .form-group:has(.e-checkbox),
.form-renderer.fourlayout > .form-group:has(.e-checkbox) {
  align-self: flex-end;
}

.form-renderer.twolayout > .form-group:has(.e-switch),
.form-renderer.threelayout > .form-group:has(.e-switch),
.form-renderer.fourlayout > .form-group:has(.e-switch) {
  align-self: flex-end;
}

/* Submit/Reset buttons handling:
   - If they're at the end, display side by side
   - If not at the end, display normally
*/
/* When submit button is the only button at the end */
.form-renderer.twolayout > .form-group:last-child:has(.form-submit-type):not(:has(.form-reset-type)),
.form-renderer.threelayout > .form-group:last-child:has(.form-submit-type):not(:has(.form-reset-type)),
.form-renderer.fourlayout > .form-group:last-child:has(.form-submit-type):not(:has(.form-reset-type)) {
  grid-column: 1 / -1; 
}

/* When both reset and submit are the last two children, display them in adjacent cells side by side */
.form-renderer.twolayout > .form-group:nth-last-child(2):has(.form-reset-type),
.form-renderer.twolayout > .form-group:nth-last-child(2):has(.form-reset-type) ~ .form-group:last-child:has(.form-submit-type),
.form-renderer.threelayout > .form-group:nth-last-child(2):has(.form-reset-type),
.form-renderer.threelayout > .form-group:nth-last-child(2):has(.form-reset-type) ~ .form-group:last-child:has(.form-submit-type),
.form-renderer.fourlayout > .form-group:nth-last-child(2):has(.form-reset-type),
.form-renderer.fourlayout > .form-group:nth-last-child(2):has(.form-reset-type) ~ .form-group:last-child:has(.form-submit-type) {
  grid-column: auto;
}

/* Responsive: Collapse to fewer columns on tablets */
@media (max-width: 1024px) {
  .form-renderer.fourlayout {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .form-renderer.threelayout {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Responsive: Single column on mobile */
@media (max-width: 768px) {
  .form-renderer.twolayout,
  .form-renderer.threelayout,
  .form-renderer.fourlayout {
    grid-template-columns: 1fr;
  }
}

/* Form Group */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Field Wrapper */
.field-wrapper {
  display: flex;
  width: 100%;
}

.field-wrapper.label-top {
  flex-direction: column;
  gap: 0.5rem;
}

.field-wrapper.label-bottom {
  flex-direction: column-reverse;
  gap: 0.5rem;
}

.field-wrapper.label-left {
  flex-direction: row;
  align-items: center;
  gap: 1rem;
}

.field-wrapper.label-right {
  flex-direction: row-reverse;
  align-items: center;
  gap: 1rem;
  justify-content: flex-end;
}

/* Input grows in left/right label layouts */
.field-wrapper.label-left .field-input,
.field-wrapper.label-right .field-input {
  flex: 1;
  min-width: 0;
}

.field-wrapper:has(.e-small) .field-label {
  font-size: .75rem;
}

.field-wrapper:has(.e-small) .field-description {
  font-size: 0.625rem;
}

.field-wrapper:has(.e-bigger) .field-label {
  font-size: 1rem;
}

.field-wrapper:has(.e-bigger) .field-description {
  font-size: 0.875rem;
}

/* Label */
.field-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--sf-text-color);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  font-family: var(--sf-font-family);
}

.field-label .required-asterisk {
  color: #ef4444;
  margin-left: 2px;
}

.field-label .tooltip-icon {
  cursor: help;
  color: var(--sf-tooltip-text-color);
  font-size: 0.875rem;
}

/* Input Field */
.field-input {
  width: 100%;
}

.field-input .e-image-editor {
  min-height: 250px;
}

.field-input .e-switch-wrapper,
.field-input .e-checkbox-wrapper {
  margin: 5px 0;
}

/* Error Message */
.field-error {
  color: #ef4444;
  font-size: 0.75rem;
  margin-top: 0.25rem;
  display: block;
}

/* Radio Button Group */
.e-radio-group {
  display: flex;
  flex-direction: column;
}

.e-radio-group .e-radio + label {
  margin-left: 0.5rem;
}

/* Layout Components - Clean Styles */

/* Panel (Fieldset) */
.form-panel-renderer {
  border: none;
  border-radius: 8px;
  padding: 0;
}

.form-panel-renderer:has(.panel-legend) {
  border: 1px solid var(--sf-layout-border-color);
  padding: 1.5rem;
  font-family: var(--sf-font-family)
}

.form-panel-renderer legend {
  font-size: 1.5rem;
  font-weight: 600;
  padding-bottom: 1.5rem;
}

.form-panel-renderer .panel-legend {
  font-size: 1.5rem;
  font-weight: 600;
  padding: 0 0.5rem;
}


.panel-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.card-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Table Layout */
.form-table-renderer {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
}

.form-table-renderer.table-border {
  border: 1px solid var(--sf-layout-border-color);
}

.form-table-renderer {
  display: table;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0px; 
  overflow-x: auto;
  overflow-y: hidden; 
}

.form-table-renderer .e-form-table-row {
  display: table-row;
  background: transparent;
}

.form-table-renderer .e-form-table-cell {
  display: table-cell;
  padding: 12px;
  vertical-align: top;
}

.table-border .e-form-table-cell {
  border-bottom: 1px solid var(--sf-layout-border-color);
  border-right: 1px solid var(--sf-layout-border-color);
}

.e-form-table-cell:last-child {
  border-right: none;
}

.form-table-renderer .e-form-table-row:last-child .e-form-table-cell {
  border-bottom: none;
}

.e-form-table-cell > .form-table-renderer,
.e-form-table-cell > .form-tabs-renderer,
.e-form-table-cell > .form-card-renderer,
.e-form-table-cell > .form-panel-renderer,
.e-form-table-cell > .form-group
 {
    margin-bottom: 1.5rem;
}


.e-form-table-cell > .form-table-renderer:last-child,
.e-form-table-cell > .form-tabs-renderer:last-child,
.e-form-table-cell > .form-card-renderer:last-child,
.e-form-table-cell > .form-panel-renderer:last-child,
.e-form-table-cell > .form-group:last-child
{
  margin-bottom: 0;
}


/* Column helper classes (col, col-1..col-12) — copied from preview styles
   Scoped under .form-table-renderer so renderer respects `col-{n}` classes
   without changing the renderer's flex-based layout. These only set widths.
*/
.form-table-renderer .col,
.form-table-renderer [class^="col-"] {
  min-height: 100%;
  vertical-align: top;
}

.form-table-renderer .col { width: auto; }
.form-table-renderer .col-1 { width: 8.33333333%; }
.form-table-renderer .col-2 { width: 16.66666667%; }
.form-table-renderer .col-3 { width: 25%; }
.form-table-renderer .col-4 { width: 33.33333333%; }
.form-table-renderer .col-5 { width: 41.66666667%; }
.form-table-renderer .col-6 { width: 50%; }
.form-table-renderer .col-7 { width: 58.33333333%; }
.form-table-renderer .col-8 { width: 66.66666667%; }
.form-table-renderer .col-9 { width: 75%; }
.form-table-renderer .col-10 { width: 83.33333333%; }
.form-table-renderer .col-11 { width: 91.66666667%; }
.form-table-renderer .col-12 { width: auto; }

/* Tabs Layout */
.form-tabs-renderer {
  width: 100%;
}

.tab-content-renderer {
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Submit Button */
.form-submit-button {
  margin-top: 1.5rem;
  align-self: flex-start;
}

/* Syncfusion Component Overrides */
.field-input .e-input-group,
.field-input .e-control-wrapper {
  width: 100%;
}

.field-input .e-float-input {
  width: 100%;
}

/* Unsupported Component */
.unsupported-component {
  padding: 1rem;
  background-color: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 4px;
  color: #856404;
  font-size: 0.875rem;
}

/* Dark Mode Support */
[data-theme="dark"] .form-renderer-container {
  background-color: #1e1e1e;
}

[data-theme="dark"] .field-label {
  color: #e0e0e0;
}

[data-theme="dark"] .form-panel-renderer,
[data-theme="dark"] .form-table-renderer {
  border-color: #3d3d3d;
}

[data-theme="dark"] .e-form-table-row {
  border-color: #3d3d3d;
}

[data-theme="dark"] .e-form-table-cell {
  border-color: #3d3d3d;
}

.e-tooltip .e-msg-icon::before {
  content: "\e800";
  font-family: "e-icons";
  color: var(--color-sf-msg-icon-color);
  font-size: 16px;
  height: 16px;
  margin: 3px 4px;
  display: flex;
  line-height: 16px;
}

.form-title h1,
.form-title h2,
.form-title h3 {
  margin-top: 0;
}

.form-title {
  text-align: center;
}

.e-card .e-card-content {
  padding: 12px 18px 12px 18px;
}

/* Responsive */
@media (max-width: 768px) {
  .form-renderer-container {
    padding: 1rem;
  }
  
  .field-wrapper.label-left,
  .field-wrapper.label-right {
    flex-direction: column;
    align-items: stretch;
  }
  
  .field-wrapper.label-left .field-input,
  .field-wrapper.label-right .field-input {
    width: 100%;
  }
  
  /* Convert table layout to flex layout for mobile */
  .form-table-renderer .table-grid {
    display: flex;
    flex-direction: column;
    border-spacing: 0;
    gap: 0.75rem;
  }
  
  .form-table-renderer .row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    width: 100%;
  }
  
  .form-table-renderer .e-form-table-cell {
    display: block;
    flex: 1 1 auto;
    min-width: 250px; /* minimum width before wrapping to next row */
    padding: 12px;
  }
  
  /* Override column width classes on mobile - let content flow naturally */
  .form-table-renderer .col,
  .form-table-renderer [class^="col-"] {
    width: auto !important;
    min-width: 250px;
    flex: 1 1 auto;
  }
  
  .table-border .e-form-table-cell  {
    border-right: none;
    border-bottom: 1px solid var(--sf-layout-border-color);
    border-radius: 4px;
  }
  
  .form-table-renderer .e-form-table-cell:last-child {
    border-bottom: 1px solid var(--sf-layout-border-color);
  }
  
  .form-table-renderer .row:last-child .e-form-table-cell {
    border-bottom: none;
  }
}