/* components/fieldset/fieldset.css */

/**
 * Fieldset & Form Layout Component
 * Advanced form layouts with responsive grids, sections, and dependencies
 * Full WCAG 2.2 AAA compliance
 */

/* ========================================
   CSS Custom Properties
   ======================================== */

:root {
  /* Fieldset dimensions */
  --fieldset-padding: var(--ds-space-l);
  --fieldset-padding-compact: var(--ds-space-m);
  --fieldset-margin: var(--ds-space-xl);
  --fieldset-gap: var(--ds-space-m);
  --fieldset-border-width: 1px;
  --fieldset-border-radius: var(--ds-radius-m);
  
  /* Colors */
  --fieldset-bg: var(--ds-color-surface);
  --fieldset-border-color: var(--ds-color-border);
  --fieldset-legend-bg: var(--ds-color-surface);
  --fieldset-legend-color: var(--ds-color-text);
  
  /* Section */
  --fieldset-section-bg: var(--ds-color-background);
  --fieldset-section-border: var(--ds-color-border);
  --fieldset-section-padding: var(--ds-space-m);
  
  /* Grid */
  --fieldset-grid-gap: var(--ds-space-m);
  --fieldset-grid-gap-compact: var(--ds-space-s);
  
  /* Field */
  --field-margin-bottom: var(--ds-space-m);
  --field-label-margin: var(--ds-space-xs);
  --field-help-margin: var(--ds-space-xs);
  --field-error-margin: var(--ds-space-xs);
  
  /* Progress */
  --fieldset-progress-height: 4px;
  --fieldset-progress-bg: var(--ds-color-border);
  --fieldset-progress-fill: var(--ds-color-primary);
  
  /* Transitions */
  --fieldset-transition: all 200ms ease;
}

/* ========================================
   Base Fieldset
   ======================================== */

.c-fieldset {
  margin: 0 0 var(--fieldset-margin);
  padding: 0 var(--fieldset-padding) var(--fieldset-padding) var(--fieldset-padding);
  background: var(--fieldset-bg);
  border: var(--fieldset-border-width) solid var(--fieldset-border-color);
  border-radius: var(--fieldset-border-radius);
  position: relative;
  min-width: 0; /* Allow shrinking in flex/grid for text-overflow to work */
}

.c-fieldset--borderless {
  border: none;
  padding: 0;
  background: transparent;
}

.c-fieldset--compact {
  padding: var(--fieldset-padding-compact);
}

/* Legend */
.c-fieldset__legend {
  display: inline-flex;
  /* align-items: center; */
  max-width: 100%;

  padding: 0 var(--ds-space-s);
  margin: 0 0 var(--ds-space-m);
  font-size: var(--ds-font-size-l);
  font-weight: var(--ds-font-weight-semibold);
  color: var(--fieldset-legend-color);
  background: var(--fieldset-legend-bg);
  display: inline-block;
  position: relative;
  left: calc(-1 * var(--ds-space-s));

/* ustawienia pod ellipsis */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.c-fieldset__legend-text {
  font-size: var(--ds-font-size-l);
  font-weight: var(--ds-font-weight-semibold);
  color: var(--fieldset-legend-color);

  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.c-fieldset--borderless .c-fieldset__legend {
  padding: 0;
  left: 0;
  font-size: var(--ds-font-size-xl);
  margin-bottom: var(--ds-space-l);
  max-width: 100%;
}

/* Description */
.c-fieldset__description {
  margin: calc(-1 * var(--ds-space-s)) 0 var(--ds-space-m);
  font-size: var(--ds-font-size-m);
  color: var(--ds-color-text-weak);
  line-height: var(--ds-line-height-m);
}

/* Required indicator */
.c-fieldset__required {
  margin-left: var(--ds-space-xs);
  color: var(--ds-color-danger);
  font-weight: normal;
  font-size: var(--ds-font-size-m);
}


/* ========================================
   Form Typography / Utilities
   ======================================== */
/* .c-form {
  margin-bottom: var(--ds-space-m);  
}
.c-form h2,
.c-form h3,
.c-form h4,
.c-form h5 {
} */
.c-form h2,
.c-form h3,
.c-form h4,
.c-form h5 {
  gap: 0 !important; 
  display: flex;
  align-items: center;
}
.c-form h2 svg,
.c-form h3 svg,
.c-form h4 svg,
.c-form h5 svg {
  margin-right: var(--ds-space-s);
}
.c-form .no-gap {
  margin-top: calc(var(--fieldset-grid-gap) * -1);
}
.c-form h2 {
  margin: 0 0 var(--ds-space-s);
  padding-bottom: var(--ds-space-s);
  font-size: var(--ds-font-size-l);
  font-weight: var(--ds-font-weight-semibold);
  color: var(--ds-color-text);
}
.c-form h3 {
  margin: 0 0 var(--ds-space-s);
  padding-bottom: var(--ds-space-s);
  font-size: var(--ds-font-size-l);
  font-weight: var(--ds-font-weight-medium);
  color: var(--ds-color-text);
}
.c-form h4 {
  margin: 0 0 var(--ds-space-s);
  padding-bottom: var(--ds-space-s);
  font-size: var(--ds-font-size-s);
  font-weight: var(--ds-font-weight-medium);
  color: var(--ds-color-text);
}
.c-form h5 {
  margin: 0 0 var(--ds-space-s);
  padding-bottom: var(--ds-space-s);
  font-size: var(--ds-font-size-s);
  font-weight: var(--ds-font-weight-normal);
  color: var(--ds-color-text);
}


.c-form h2 svg,
.c-form h3 svg,
.c-form h4 svg,
.c-form h5 svg {
    width: var(--input-font-size-m);
    height: var(--input-font-size-m);
    stroke: var(--input-text-color);
    stroke-width: var(--input-icon-stroke-width);
}
.c-form-text {
  margin: 0 0 var(--ds-space-s) 0; 
  padding-bottom: var(--ds-space-s); 
  /* padding-bottom: var(--ds-space-s); */
  font-size: var(--ds-font-size-s);
  font-weight: var(--ds-font-weight-normal);
  color: var(--ds-color-text);
  line-height: 1.3; 
}

/* ========================================
   Form Grid Layouts
   ======================================== */




.c-form-grid {
  display: grid;
  gap: var(--fieldset-grid-gap);
  width: 100%;
}

/* Column layouts */
.c-form-grid--1 {
  grid-template-columns: 1fr;
}

.c-form-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

.c-form-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.c-form-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Auto-fit grid */
.c-form-grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* Compact spacing */
.c-form-grid--compact {
  gap: var(--fieldset-grid-gap-compact);
}

/* Align variants */
.c-form-grid--align-end {
  align-items: end;
}

.c-form-grid--align-center {
  align-items: center;
}

.c-form-grid--align-stretch {
  align-items: stretch;
}


/* Horizontal form layout */
/* .c-form-grid--horizontal {
  display: grid;
  gap: var(--fieldset-grid-gap);
  width: 100%;
} */

.c-form-grid--horizontal .c-form-grid__group {
    display: grid;
    grid-template-columns: 200px 1fr;
    align-items: start;
    gap: var(--fieldset-grid-gap);
    min-width: 0; /* Allow shrinking in grid for text-overflow to work */
    /* margin-bottom: var(--ds-space-m); */
}

/* Full width group - spans entire grid width */
.c-form-grid--horizontal .c-form-grid__group--full {
    grid-template-columns: 200px minmax(0, 1fr); /* minmax(0, 1fr) allows shrinking for text-overflow */
}

/* Ensure child elements can shrink for text-overflow */
.c-form-grid--horizontal .c-form-grid__group--full > div {
    min-width: 0;
    /* overflow: hidden; */
}

/* .c-form-grid--horizontal .c-form-grid__group:last-child {
  margin-bottom: 0;
} */

@media (min-width: 768px) {
  .c-form-grid--horizontal .c-form-grid__group .c-input__label {
      margin-top: calc((var(--input-height-m) / 2) - var(--fieldset-grid-gap));
  }
}
.c-form-grid--horizontal .c-form-grid__actions {
    grid-template-columns: 200px 1fr;
    display: grid;
    gap: var(--fieldset-grid-gap);
}

.c-form-grid--horizontal .c-form-grid__actions > div {
    grid-column: 2;
}

@media (max-width: 768px) {
    .c-form-grid--horizontal .c-form-grid__group {
        grid-template-columns: 1fr;
        gap: var(--fieldset-grid-gap-compact);
    }

    .c-form-grid--horizontal .c-form-grid__actions {
        grid-template-columns: 1fr;
    }

    .c-form-grid--horizontal .c-form-grid__actions > div {
        grid-column: 1;
    }

}

/* .c-form-section.c-form-section--horizontal .c-form-section__group {
    display: grid;
    grid-template-columns: 200px 1fr;
    align-items: start;
    gap: var(--fieldset-grid-gap);
    margin-bottom: var(--ds-space-m);
}
.c-form-section.c-form-section--horizontal .c-form-section__group:last-child {
  margin-bottom: 0; 
}

.c-form-section.c-form-section--horizontal .c-form-section__actions {
    grid-template-columns: 200px 1fr;
    display: grid;
    gap: var(--fieldset-grid-gap);
}

.c-form-section.c-form-section--horizontal .c-form-section__actions > div {
    grid-column: 2;
} */


/* Inline form */
.form-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--fieldset-grid-gap);
}

.form-inline .c-input,
.form-inline .c-select,
.form-inline .c-textarea {
    flex: 1;
    min-width: 200px;
}
.form-inline .c-button {
    margin-top: calc(var(--input-label-font-size) + var(--ds-space-xs) + var(--ds-space-xs));
}

/* ========================================
   Form Fields
   ======================================== */

.c-field {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--field-margin-bottom);
  position: relative;
}

.c-field:last-child {
  margin-bottom: 0;
}

/* Field label */
.c-field__label {
  display: block;
  margin-bottom: var(--field-label-margin);
  font-size: var(--ds-font-size-m);
  font-weight: var(--ds-font-weight-medium);
  color: var(--ds-color-text);
}

.c-field__label-required {
  color: var(--ds-color-danger);
  margin-left: var(--ds-space-xxs);
}

/* Field control wrapper */
.c-field__control {
  position: relative;
  width: 100%;
}

/* Field help text */
.c-field__help {
  margin-top: var(--field-help-margin);
  font-size: var(--ds-font-size-s);
  color: var(--ds-color-text-weak);
  line-height: var(--ds-line-height-s);
}

/* Field error */
.c-field__error {
  margin-top: var(--field-error-margin);
  font-size: var(--ds-font-size-s);
  color: var(--ds-color-danger);
  line-height: var(--ds-line-height-s);
  display: none;
}

.c-field--error .c-field__error {
  display: block;
}

/* Field states */
.c-field--disabled {
  opacity: 0.6;
  pointer-events: none;
}

.c-field--readonly .c-field__control {
  pointer-events: none;
}

.c-field--hidden {
  display: none;
}

/* Inline field */
.c-field--inline {
  flex-direction: row;
  align-items: center;
  gap: var(--ds-space-m);
}

.c-field--inline .c-field__label {
  margin-bottom: 0;
  flex-shrink: 0;
  min-width: 120px;
}

.c-field--inline .c-field__control {
  flex: 1;
}

/* Field with floating label */
.c-field--floating {
  position: relative;
  padding-top: var(--ds-space-m);
}

.c-field--floating .c-field__label {
  position: absolute;
  top: 50%;
  left: var(--ds-space-m);
  transform: translateY(-50%);
  transition: var(--fieldset-transition);
  pointer-events: none;
  background: var(--fieldset-bg);
  padding: 0 var(--ds-space-xs);
  z-index: 1;
}

.c-field--floating.c-field--focused .c-field__label,
.c-field--floating.c-field--filled .c-field__label {
  top: 0;
  transform: translateY(-50%);
  font-size: var(--ds-font-size-s);
  color: var(--ds-color-primary);
}

/* ========================================
   Field Grid Spans
   ======================================== */

.c-field--span-2 {
  grid-column: span 2;
}

.c-field--span-3 {
  grid-column: span 3;
}

.c-field--span-4 {
  grid-column: span 4;
}

.c-field--span-full {
  grid-column: 1 / -1;
}


/* ========================================
   Form Sections
   ======================================== */

.c-form-section {
  margin-bottom: var(--ds-space-xl);
  padding: var(--fieldset-section-padding);
  background: var(--fieldset-section-bg);
  border: 1px solid var(--fieldset-section-border);
  border-radius: var(--ds-radius-m);
  position: relative;
}

.c-form-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--ds-space-m);
  padding-bottom: var(--ds-space-s);
  border-bottom: 1px solid var(--fieldset-section-border);
}

.c-form-section__title {
  font-size: var(--ds-font-size-l);
  font-weight: var(--ds-font-weight-semibold);
  color: var(--ds-color-text);
  margin: 0;
}

.c-form-section__subtitle {
  font-size: var(--ds-font-size-s);
  color: var(--ds-color-text-weak);
  margin-top: var(--ds-space-xxs);
}

.c-form-section__actions {
  display: flex;
  gap: var(--ds-space-s);
}

.c-form-section__body {
  position: relative;
}

/* Collapsible section */
.c-form-section--collapsible .c-form-section__header {
  cursor: pointer;
  user-select: none;
}

.c-form-section--collapsible .c-form-section__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: transform 200ms ease;
}

.c-form-section--collapsible .c-form-section__toggle svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.c-form-section--collapsed .c-form-section__toggle {
  transform: rotate(-90deg);
}

.c-form-section--collapsed .c-form-section__body {
  display: none;
}

/* Section states */
.c-form-section--disabled {
  opacity: 0.6;
  pointer-events: none;
}

.c-form-section--highlighted {
  border-color: var(--ds-color-primary);
  background: var(--ds-color-primary-weak);
}

/* ========================================
   Form Row
   ======================================== */

.c-form-row {
  display: flex;
  gap: var(--fieldset-grid-gap);
  margin-bottom: var(--field-margin-bottom);
}

.c-form-row:last-child {
  margin-bottom: 0;
}

.c-form-row > * {
  flex: 1;
}

.c-form-row--align-end {
  align-items: flex-end;
}

.c-form-row--align-center {
  align-items: center;
}


























/* ========================================
   Form Progress
   ======================================== */

.c-form-progress {
  margin-bottom: var(--ds-space-l);
}

.c-form-progress__bar {
  height: var(--fieldset-progress-height);
  background: var(--fieldset-progress-bg);
  border-radius: var(--fieldset-progress-height);
  overflow: hidden;
  position: relative;
}

.c-form-progress__fill {
  height: 100%;
  background: var(--fieldset-progress-fill);
  border-radius: var(--fieldset-progress-height);
  transition: width 300ms ease;
  position: relative;
}

.c-form-progress__steps {
  display: flex;
  justify-content: space-between;
  margin-top: var(--ds-space-s);
}

.c-form-progress__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-space-xs);
  flex: 1;
  position: relative;
}

.c-form-progress__step-indicator {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ds-color-surface);
  border: 2px solid var(--fieldset-progress-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ds-font-size-s);
  font-weight: var(--ds-font-weight-semibold);
  color: var(--ds-color-text-weak);
  transition: var(--fieldset-transition);
  z-index: 1;
}

.c-form-progress__step--active .c-form-progress__step-indicator {
  border-color: var(--fieldset-progress-fill);
  background: var(--fieldset-progress-fill);
  color: white;
}

.c-form-progress__step--completed .c-form-progress__step-indicator {
  border-color: var(--ds-color-success);
  background: var(--ds-color-success);
  color: white;
}

.c-form-progress__step-label {
  font-size: var(--ds-font-size-s);
  color: var(--ds-color-text-weak);
  text-align: center;
}

.c-form-progress__step--active .c-form-progress__step-label {
  color: var(--ds-color-text);
  font-weight: var(--ds-font-weight-medium);
}

/* Step connector lines */
.c-form-progress__step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 16px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--fieldset-progress-bg);
  z-index: 0;
}

.c-form-progress__step--completed:not(:last-child)::after {
  background: var(--ds-color-success);
}

/* ========================================
   Form Actions
   ======================================== */

.c-form-actions {
  display: flex;
  gap: var(--ds-space-m);
  margin-top: var(--ds-space-xl);
  padding-top: var(--ds-space-l);
  border-top: 1px solid var(--fieldset-section-border);
}

.c-form-actions--right {
  justify-content: flex-end;
}

.c-form-actions--center {
  justify-content: center;
}

.c-form-actions--space-between {
  justify-content: space-between;
}

.c-form-actions--sticky {
  position: sticky;
  bottom: 0;
  background: var(--fieldset-bg);
  padding: var(--ds-space-m);
  margin: calc(-1 * var(--fieldset-padding));
  margin-top: var(--ds-space-xl);
  box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

/* ========================================
   Conditional Fields
   ======================================== */

.c-field--conditional {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  margin: 0;
  transition: max-height 300ms ease, opacity 200ms ease, margin 200ms ease;
}

.c-field--conditional.is-visible {
  max-height: 500px;
  opacity: 1;
  margin-bottom: var(--field-margin-bottom);
}

/* ========================================
   Field Dependencies
   ======================================== */

.c-field--dependent {
  position: relative;
  padding-left: var(--ds-space-l);
}

.c-field--dependent::before {
  content: '';
  position: absolute;
  left: var(--ds-space-s);
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--ds-color-border);
}

.c-field--dependent.is-active::before {
  background: var(--ds-color-primary);
}

/* ========================================
   Inline Validation
   ======================================== */

.c-field__validation {
  display: flex;
  align-items: center;
  gap: var(--ds-space-xs);
  margin-top: var(--field-help-margin);
  font-size: var(--ds-font-size-s);
  opacity: 0;
  transition: opacity 200ms ease;
}

.c-field--validating .c-field__validation {
  opacity: 1;
  color: var(--ds-color-text-weak);
}

.c-field--valid .c-field__validation {
  opacity: 1;
  color: var(--ds-color-success);
}

.c-field--invalid .c-field__validation {
  opacity: 1;
  color: var(--ds-color-danger);
}

.c-field__validation-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.c-field__validation-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

/* Loading spinner for validation */
.c-field--validating .c-field__validation-icon svg {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ========================================
   Accessibility
   ======================================== */

/* Focus visible */
.c-form-section:focus-within {
  outline: var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);
  outline-offset: var(--ds-focus-ring-offset);
}

/* Screen reader only */
.c-fieldset__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .c-fieldset {
    border-width: 2px;
  }
  
  .c-form-section {
    border-width: 2px;
  }
  
  .c-field--error .c-field__control {
    outline: 2px solid var(--ds-color-danger);
  }
}

/* ========================================
   Responsive
   ======================================== */

@media (max-width: 768px) {
  /* Stack all columns on mobile */
  .c-form-grid--2,
  .c-form-grid--3,
  .c-form-grid--4 {
    grid-template-columns: 1fr;
  }
  
  /* Reset spans on mobile */
  .c-field--span-2,
  .c-field--span-3,
  .c-field--span-4 {
    grid-column: auto;
  }
  
  /* Stack inline fields */
  .c-field--inline {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .c-field--inline .c-field__label {
    min-width: auto;
    margin-bottom: var(--field-label-margin);
  }
  
  /* Stack form row */
  .c-form-row {
    flex-direction: column;
  }
  
  /* Adjust padding */
  .c-fieldset {
    padding: var(--fieldset-padding-compact);
  }
  
  /* Smaller progress indicators */
  .c-form-progress__step-indicator {
    width: 28px;
    height: 28px;
    font-size: var(--ds-font-size-xs);
  }
  
}
/* Hide step labels on very small screens */
@media (max-width: 480px) {
  .c-form-progress__step-label {
    display: none;
  }
}

/* Tablet adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
  /* 4 columns become 2 on tablet */
  .c-form-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Adjust spans for tablet */
  .c-field--span-4 {
    grid-column: span 2;
  }
}

/* Print styles */
@media print {
  .c-fieldset {
    border: 1px solid #000;
    page-break-inside: avoid;
  }

  .c-form-actions--sticky {
    position: static;
    box-shadow: none;
    border-top: 1px solid #000;
  }

  .c-form-section--collapsed .c-form-section__body {
    display: block;
  }
}

/* ========================================
   Repeater Component
   ======================================== */

.c-repeater {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-s);
}

.c-repeater__items {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-s);
}

.c-repeater__item {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-space-s);
}

/* Flex sizing for repeater item children */
.c-repeater__item > .c-input:first-child {
  flex: 1;
}

.c-repeater__item > .c-input:nth-child(2) {
  flex: 2;
}

/* Single input item (e.g., date repeater) */
.c-repeater__item > .c-input:only-of-type {
  flex: 1;
}

/* Remove button styling */
.c-repeater__remove {
  flex-shrink: 0;
  align-self: center;
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .c-repeater__item {
    flex-direction: column;
    align-items: stretch;
  }

  .c-repeater__item > .c-input:first-child,
  .c-repeater__item > .c-input:nth-child(2),
  .c-repeater__item > .c-input:only-of-type {
    flex: none;
    width: 100%;
  }

  .c-repeater__remove {
    align-self: flex-end;
  }
}