@layer components {
  /* Container Form Item */
  .rc-form-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: var(--form-item-margin-bottom);
  }

  /* =========================
     LABEL
     ========================= */
  .rc-form-item-label {
    display: flex;
    align-items: center;
    font-size: var(--form-label-font-size);
    font-weight: var(--form-label-font-weight);
    color: var(--form-label-color);
    margin-bottom: var(--form-label-margin-bottom);
    line-height: 1.4;
    transition: color 0.2s;
  }

  /* Required Asterisk (*) */
  .rc-form-item-required-mark {
    margin-left: 0.25rem;
    color: var(--color-error-500);
    font-family: SimSun, sans-serif; /* Standard font for asterisks agar vertical align bagus */
  }

  /* =========================
     MESSAGE (ERROR / WARNING)
     ========================= */
  .rc-form-item-explain {
    margin-top: var(--form-msg-margin-top);
    font-size: var(--form-msg-font-size);
    line-height: 1.4;
    min-height: 1.4em; /* Mencegah layout jumping jika error muncul/hilang */
    transition: color 0.2s;
  }

  /* =========================
     STATUS MODIFIERS
     ========================= */

  /* --- ERROR STATE --- */
  .rc-form-item.status-error .rc-form-item-label {
    color: var(--color-error-600); /* Label jadi merah saat error (opsional UI pattern) */
  }
  .rc-form-item.status-error .rc-form-item-explain {
    color: var(--color-error-500);
  }

  /* --- WARNING STATE --- */
  .rc-form-item.status-warning .rc-form-item-label {
    color: var(--color-warning-600);
  }
  .rc-form-item.status-warning .rc-form-item-explain {
    color: var(--color-warning-500);
  }
}