@layer components {
  /* Generic form panel — used across edit/show forms */
  .edit-panel,
  .sa-panel,
  .cf-panel,
  .ic-panel {
    border: var(--border);
    overflow: hidden;
    margin-block-end: var(--space-5);
  }

  .ic-panel { margin-block-end: var(--space-4); }

  /* Panel header — dark background */
  .edit-panel__hd,
  .sa-panel__hd,
  .cf-panel__hd,
  .ic-panel__hd {
    background: var(--color-accent-bar);
    color: var(--color-ink-inverted);
    padding: var(--space-1-5) var(--space-5);
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .ic-panel__hd {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .ic-panel__hd a {
    color: var(--color-ink-inverted);
    opacity: 0.75;
    font-size: var(--text-2xs);
    text-decoration: none;
  }
  .ic-panel__hd a:hover { opacity: 1; }

  /* Panel body — padding + flex layout for sa-panel and cf-panel */
  .edit-panel__body,
  .cf-panel__body,
  .ic-panel__body {
    padding: var(--panel-pad-y) var(--space-5);
  }

  .sa-panel__body,
  .cf-panel__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  /* Section labels within panels */
  .edit-section-label,
  .sa-section-label {
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-ink-muted);
    padding-block-end: var(--space-2);
    border-block-end: var(--border-light);
    margin-block-end: var(--space-4);
  }

  .sa-section-label {
    margin-block-end: var(--space-3);
    margin-block-start: var(--space-2);
  }

  /* Confirmation/alert box */
  .delete-confirm-box {
    border: 1px solid var(--color-negative-border);
    background: var(--color-negative-bg);
    padding: var(--space-4);
    display: none;
    gap: var(--space-3);
    flex-direction: column;
  }
  .delete-confirm-box.is-visible { display: flex; }
  .delete-confirm-box__title {
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--color-negative);
  }
  .delete-confirm-box__actions {
    display: flex;
    gap: var(--space-2);
    align-items: center;
  }

  /* Radio group */
  .radio-group {
    display: flex;
    gap: var(--space-5);
    align-items: center;
    padding-block: var(--space-1-5);
  }
  .radio-group label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    cursor: pointer;
  }

  /* Checkbox group — selezione multipla (es. compagnie fiduciarie/convenzionate) */
  .checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    padding-block: var(--space-1-5);
  }
  .checkbox-group__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    cursor: pointer;
  }

  /* DPR banner alert */
  .dpr-banner {
    background: var(--color-warning);
    color: var(--color-warning-text);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--radius-sm);
    text-align: center;
  }

  /* Read-only field display */
  .edit-readonly {
    padding: var(--control-pad-y) var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
    background: var(--color-surface);
    border: var(--border);
    border-radius: var(--radius);
    line-height: var(--leading-snug);
  }

  /* Small-caps section label (danger zone, note panels, ...) */
  .eyebrow-label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
  }

  /* Delete confirmation row toggled via inline JS (element.style.display) —
     must stay a plain display:none, not .hidden's !important, or the JS
     toggle would be unable to override it. */
  .delete-confirm-inline {
    display: none;
    align-items: center;
    gap: var(--space-3);
  }

  /* Insurance company / generic data grid */
  .ic-grid {
    display: grid;
    grid-template-columns: 12rem 1fr;
    gap: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
  }

  /* Address row: street + street number */
  .ic-grid-address {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-3);
    align-items: end;
  }

  /* Postal code / city / province row */
  .ic-grid-cap {
    display: grid;
    grid-template-columns: 6rem 1fr 4rem;
    gap: var(--space-3);
  }

  .ic-label {
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-ink-muted);
    padding-block: var(--space-1);
  }
  .ic-label::after { content: ":"; }

  .ic-val {
    padding-block: var(--space-1);
    font-weight: var(--weight-medium);
  }
  .ic-val--empty {
    color: var(--color-ink-subtle);
    font-style: italic;
  }

  /* ── The opening wizard, four steps (Practice::Opening) ── */
  .opening-steps {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-6);
    margin: 0 0 var(--space-5);
    padding: 0;
    list-style: none;
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
  }

  .opening-steps__step {
    display: flex;
    align-items: center;
    gap: var(--space-2);

    &.is-current { color: var(--color-primary); font-weight: var(--weight-semibold); }
    &.is-done { color: var(--color-ink); }
  }

  /* A step reached leads back to itself. */
  .opening-steps__link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: inherit;
    text-decoration: none;

    &:hover { color: var(--color-primary); }
  }

  .opening-steps__number {
    display: grid;
    place-items: center;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    border: var(--border);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);

    .is-current & { border-color: var(--color-primary); background: var(--color-primary-bg); }
    .is-done & { background: var(--color-surface-alt); }
  }

  /* The wizard with the panel of what is missing beside it. */
  .opening-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
    max-inline-size: var(--content-width);

    @media (min-width: 64rem) {
      grid-template-columns: minmax(0, var(--wizard-width)) minmax(var(--wizard-aside-width), 1fr);
    }
  }

  .opening-layout__aside { align-self: start; position: sticky; inset-block-start: var(--space-4); }

  .opening-panel__body { padding: var(--space-4); }
  .opening-panel__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
  .opening-panel__item { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--text-sm); }
  .opening-panel__heading { margin: var(--space-4) 0 var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-bold); }
  .opening-panel__date { color: var(--color-ink-muted); }

  /* The summary of the opening: each step with the link to correct it. */
  .opening-summary {
    .pv-panel__hd a { color: inherit; font-size: var(--text-sm); }
    dd { margin: 0; }
  }

  /* The vehicles step: rows, the form of a new one, the plate matches. */
  .vehicle-row--editing, .vehicle-new { padding: var(--space-3) var(--space-4); }
  .vehicle-new { border-block-start: var(--border); }
  .vehicle-new__title { margin: 0 0 var(--space-2); font-size: var(--text-sm); }
  .vehicle-row__uci {
    margin-inline-start: var(--space-2);
    color: var(--color-warning);
    font-weight: var(--weight-semibold);
  }
  .vehicle-form__insured { display: flex; align-items: center; gap: var(--space-2); }
  /* The UCI indication follows the checkbox: no rule in the browser. */
  .vehicle-form__uci { display: none; }
  .vehicle-form:has(.vehicle-form__insured input[type="checkbox"]:not(:checked)) .vehicle-form__uci { display: block; }
  /* The people steps: rows, the form of a new person, the insurance. */
  .person-row--editing, .person-new, .insurance-position { padding: var(--space-3) var(--space-4); }
  .person-new, .insurance-positions { border-block-start: var(--border); }
  .person-new__title { margin: 0 0 var(--space-2); font-size: var(--text-sm); }
  /* One insurance position of a side: a form of its own, separated from the next. */
  .pv-panel__section > .person-new__title { padding: var(--space-3) var(--space-4) 0; }
  .insurance-position + .insurance-position { border-block-start: var(--border); }
  .insurance-position__remove { margin-block-start: var(--space-2); }
  .insurance-position__title { margin: 0 0 var(--space-2); font-size: var(--text-sm); }
  /* A form of a step holding changes not yet saved (unsaved-changes). */
  .form__unsaved {
    margin: 0;
    padding: var(--space-2) var(--space-3);
    border: var(--border);
    border-color: var(--color-warning-border);
    background: var(--color-warning-bg);
    color: var(--color-warning);
    font-size: var(--text-sm);
  }
  .form__unsaved[hidden] { display: none; }
  /* The side panels stack on narrow screens: the form actions wrap. */
  .vehicle-form .form__actions, .person-form .form__actions { flex-wrap: wrap; }
  .plate-matches__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding-block: var(--space-1);
    font-size: var(--text-sm);
  }

  /* "Essenziale": the fields beyond the essentials wait for "Tutti i campi". */
  .case-fields--essential .field--extra { display: none; }
  /* A pair whose other half is hidden takes the whole row. */
  .case-fields--essential .form__grid--2:has(> .field--extra) { grid-template-columns: 1fr; }

  .case-fields__toggle {
    display: flex;
    gap: var(--space-1);

    [aria-pressed="true"] { background: var(--color-primary-bg); color: var(--color-primary); border-color: var(--color-primary); }
  }
}