/* Dynamic form spacing and material tweaks to match popup theme */
.full-width { width: 100%; display: block; }

mat-form-field.full-width { margin-bottom: 12px; }

/* Reduce label size slightly to fit popup */
mat-form-field .mat-form-field-label { font-size: 0.95rem; color: var(--light-gray-70); }

/* Make input text contrast better */
.mat-input-element,
input.mat-mdc-input-element,
textarea.mat-mdc-input-element,
.mat-mdc-input-element {
  color: var(--white-1) !important;
}

/* Smaller helper/hint text */
.mat-hint { color: var(--light-gray-70); font-size: 0.85rem; }

/* Error styling consistent with theme */
mat-error { color: #ff8a80; font-size: 0.9rem; }

/* Outline border always visible, highlight on focus */
::ng-deep .mdc-notched-outline__leading,
::ng-deep .mdc-notched-outline__notch,
::ng-deep .mdc-notched-outline__trailing {
  border-color: var(--light-gray-70) !important;
}

::ng-deep .mat-mdc-form-field.mat-focused .mdc-notched-outline__leading,
::ng-deep .mat-mdc-form-field.mat-focused .mdc-notched-outline__notch,
::ng-deep .mat-mdc-form-field.mat-focused .mdc-notched-outline__trailing {
  border-color: var(--orange-yellow-crayola) !important;
}

/* Make array item fields inline on larger screens */
.array-item-fields { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.array-item-fields mat-form-field { flex: 1 1 auto; margin-bottom: 0; min-width: 120px; }

/* Stack array item fields vertically on small screens */
@media (max-width: 580px) {
    .array-item-fields {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .array-item-fields mat-form-field {
        width: 100%;
    }
}

/* Hide subscript wrapper inside array items so fields align */
.array-item ::ng-deep .mat-mdc-form-field-subscript-wrapper {
  display: none;
}

/* Remove link at bottom-right of each array card */
.array-item-actions {
  display: flex;
  justify-content: center;
  margin-top: 4px;
}

.remove-link {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.8rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: color 0.2s ease, background 0.2s ease;

  &:hover {
    color: hsl(0deg 75% 60%);
    background: rgba(255, 70, 70, 0.1);
  }
}

/* Force material label/input colors to match dark popup theme (covers MDC + legacy classes) */
.themed-popup {
    ::ng-deep .mat-form-field-label,
    ::ng-deep .mat-mdc-floating-label,
    ::ng-deep .mat-form-field .mat-form-field-label {
        color: var(--light-gray-70) !important;
    }

    ::ng-deep .mat-input-element,
    ::ng-deep input.mat-input-element,
    ::ng-deep .mat-mdc-text-field-input,
    ::ng-deep textarea.mat-input-element {
        color: var(--white-1) !important;
    }

    ::ng-deep .mat-select-value-text,
    ::ng-deep .mat-mdc-select-value-text {
        color: var(--white-1) !important;
    }

    ::ng-deep input::placeholder,
    ::ng-deep textarea::placeholder {
        color: var(--light-gray-70) !important;
        opacity: 1 !important;
    }
}
.form-array {
    margin-bottom: 20px;
    padding: 10px 0;
}

.array-item {
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px;
    border-radius: 10px;
    margin-bottom: 16px;
}

.sub-field {
    margin-bottom: 14px;
}

.add-btn {
    width: 100%;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--orange-yellow-crayola);
    border: 1px dashed rgba(227, 179, 65, 0.3);
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.2s ease, border-color 0.2s ease;

    &:hover {
        background: rgba(227, 179, 65, 0.1);
        border-color: rgba(227, 179, 65, 0.5);
    }
}

.remove-btn {
    margin-top: 8px;
    background: #ff4747;
    color: #fff;
    padding: 6px;
    border-radius: 6px;
}