/* =============================================================================
   A4 - form-layout, ported from HealthExpress by build/kit/port-css.py.

   Structure unchanged. Applied: 0 colour literal(s) -> on-accent, 4 rgb-channel
   tint(s) -> colour-mix, 2 hand-authored dark override(s) removed, 1 silent
   literal fallback(s) dropped, 0 black shadow(s) re-based on --ink,
   0 decorative glow(s) removed from bordered controls.

   No Bootstrap: these rules were already token-driven. Only the markup was ever
   coupled to it.
   ========================================================================== */

/* ============================================================================
   HealthExpress Theme - Form Layout
   SForm, SFormSection, SFormItem, SFormActions
   ============================================================================ */

/* ---------------------------------------------------------------------------
   Form Container
   --------------------------------------------------------------------------- */

.s-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-gap-5, 1.5rem);
}

/* ---------------------------------------------------------------------------
   Grid Layout
   --------------------------------------------------------------------------- */

.s-form-grid {
  display: grid;
  grid-template-columns: repeat(var(--s-form-columns, 1), 1fr);
  gap: var(--s-gap-4, 1rem) var(--s-gap-5, 1.5rem);
}

/* Responsive: collapse to 1 column on small screens */
@media (max-width: 576px) {
  .s-form-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------------
   Form Field
   --------------------------------------------------------------------------- */

.s-form-field {
  display: flex;
  flex-direction: column;
}

/* ---------------------------------------------------------------------------
   Labels
   --------------------------------------------------------------------------- */

.s-form-label {
  display: inline-block;
  margin-block-end: 0.375rem;
  font-size: var(--s-font-size-sm);
  font-weight: var(--s-font-weight-medium);
  color: var(--s-heading-color);
}

/* ---------------------------------------------------------------------------
   Side Labels (Horizontal Layout)
   --------------------------------------------------------------------------- */

.s-form-labels-side .s-form-field {
  flex-direction: row;
  align-items: flex-start;
  gap: 1rem;
}

.s-form-labels-side .s-form-label {
  flex-shrink: 0;
  inline-size: 10rem;
  padding-block-start: 0.5rem;
  margin-block-end: 0;
  text-align: end;
}

/* Responsive: side labels become top on mobile */
@media (max-width: 768px) {
  .s-form-labels-side .s-form-field {
    flex-direction: column;
    gap: 0;
  }

  .s-form-labels-side .s-form-label {
    inline-size: auto;
    text-align: start;
    padding-block-start: 0;
    margin-block-end: 0.375rem;
  }
}

/* ---------------------------------------------------------------------------
   View Mode Values
   --------------------------------------------------------------------------- */

.s-form-value {
  padding-block: 0.4375rem;
  padding-inline: 0;
  font-size: var(--s-font-size-base);
  color: var(--s-body-color);
  line-height: var(--s-input-line-height, 1.5);
  min-block-size: calc(1em * var(--s-input-line-height, 1.5) + 0.875rem);
}

/* Subtle background in view mode for better readability */
.s-form-view .s-form-value {
  padding-inline: 0.75rem;
  background-color: var(--s-input-disabled-bg);
  border-radius: var(--s-input-border-radius, 0.375rem);
  border: var(--s-border-width, 1px) solid transparent;
}

/* ---------------------------------------------------------------------------
   Denied / Locked Field
   --------------------------------------------------------------------------- */

.s-form-denied {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-block: 0.4375rem;
  padding-inline: 0.75rem;
  font-size: var(--s-font-size-sm);
  color: var(--s-muted-color);
  font-style: italic;
  background-color: var(--s-warning-tint);
  border: var(--s-border-width, 1px) dashed var(--s-warning-tint);
  border-radius: var(--s-input-border-radius, 0.375rem);
  min-block-size: calc(1em * var(--s-input-line-height, 1.5) + 0.875rem);
}

.s-form-denied i {
  color: var(--s-warning);
  font-size: 1rem;
}

/* ---------------------------------------------------------------------------
   Section
   --------------------------------------------------------------------------- */

.s-form-section {
  display: flex;
  flex-direction: column;
  gap: var(--s-gap-4, 1rem);
}

.s-form-section-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-block-end: 0.5rem;
  border-block-end: 1px solid var(--s-border-color);
  user-select: none;
}

.s-form-section-header i:first-child {
  color: var(--s-primary);
  font-size: 1.125rem;
}

.s-form-section-title {
  flex: 1;
  margin: 0;
  font-size: var(--s-font-size-base);
  font-weight: var(--s-font-weight-semibold, 600);
  color: var(--s-heading-color);
}

.s-form-section-chevron {
  font-size: 1.25rem;
  color: var(--s-muted-color);
  transition: transform 0.2s ease;
}

/* ---------------------------------------------------------------------------
   Actions
   --------------------------------------------------------------------------- */

.s-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--s-border-color);
}

.s-form-actions-start   { justify-content: flex-start; }
.s-form-actions-center  { justify-content: center; }
.s-form-actions-end     { justify-content: flex-end; }
.s-form-actions-between { justify-content: space-between; }

/* ---------------------------------------------------------------------------
   Form inside Card (common pattern)
   --------------------------------------------------------------------------- */

.s-card .s-form {
  gap: var(--s-gap-4, 1rem);
}

.s-card .s-form-actions {
  margin-block-start: 0.5rem;
}

/* ---------------------------------------------------------------------------
   RTL Support
   --------------------------------------------------------------------------- */

[dir="rtl"] .s-form-labels-side .s-form-label {
  text-align: start;
}