@layer components {
  /* ========================================================================
     PAGE TITLE
     ======================================================================== */

  .page-title {
    font-weight: var(--font-weight-bold);
    font-size: var(--text-xx-large);
    margin-block-end: var(--space-md);
  }

  /* ========================================================================
     FORM FIELDS
     ======================================================================== */

  .form-field {
    display: block;
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-md);
    border: var(--border);
    padding: var(--space-sm) var(--space-md);
    margin-block-start: var(--space-sm);
    width: 100%;
  }

  .form-field:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  /* ========================================================================
     ALERT COMPONENTS
     ======================================================================== */

  .alert {
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    display: inline-block;
    font-weight: var(--font-weight-semibold);
  }

  .alert-error {
    background-color: oklch(var(--lch-error-lightest));
    color: var(--color-negative);
  }

  .alert-success {
    background-color: oklch(var(--lch-success-lightest));
    color: var(--color-positive);
  }

  /* ========================================================================
     BUTTON COMPONENTS
     ======================================================================== */

  /* Primary button: Main actions */
  .btn-primary {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    border-radius: var(--radius-lg);
    padding: 0.45rem 1.1rem;
    height: 36px;
    background-color: var(--color-primary);
    color: white;
    font-weight: var(--font-weight-semibold);
    font-size: 0.95rem;
    line-height: 1;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    transition: background-color var(--duration-fast) var(--ease-in-out);
  }

  .btn-primary:link,
  .btn-primary:visited {
    color: white;
    text-decoration: none;
  }

  .btn-primary:hover {
    background-color: var(--color-link-hover);
  }

  .btn-primary:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  .btn-primary:disabled,
  .btn-primary[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--color-text-lighter);
    box-shadow: none;
  }

  .btn-primary * {
    color: white !important;
    text-decoration: none !important;
  }

  /* Secondary button: Alternate actions */
  .btn-secondary {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    padding: 0.45rem 1.1rem;
    height: 36px;
    background-color: transparent;
    color: var(--color-text);
    border: var(--border);
    cursor: pointer;
    font-weight: var(--font-weight-semibold);
    font-size: 0.95rem;
    line-height: 1;
    text-decoration: none;
    transition: background-color var(--duration-fast) var(--ease-in-out);
  }

  .btn-secondary:hover {
    background-color: var(--color-background-secondary);
  }

  .btn-secondary:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  .btn-secondary:disabled,
  .btn-secondary[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* Danger button: Destructive actions */
  .btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    border-radius: var(--radius-lg);
    padding: 0.45rem 1.1rem;
    background-color: var(--color-negative);
    color: var(--color-text-inverse);
    font-weight: var(--font-weight-semibold);
    font-size: 0.95rem;
    line-height: 1;
    height: 36px;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    transition: background-color var(--duration-fast) var(--ease-in-out);
  }

  .btn-danger:hover {
    filter: brightness(0.95);
  }

  .btn-danger:disabled,
  .btn-danger[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
  }

  /* ========================================================================
     FORM ACTIONS CONTAINER
     ======================================================================== */

  .form-actions {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    flex-wrap: wrap;
    margin-block-start: var(--space-lg);
  }

  @media (max-width: 640px) {
    .form-actions {
      flex-direction: column;
      align-items: stretch;
    }

    .form-actions .btn-primary,
    .form-actions .btn-secondary {
      width: 100%;
    }

    .form-actions .btn-secondary {
      margin-block-start: var(--space-sm);
    }
  }

  /* ========================================================================
     INLINE FORM (for button_to helpers)
     ======================================================================== */

  .inline-form {
    display: inline;
    margin: 0;
    padding: 0;
  }

  .inline-form input[type="submit"],
  .inline-form button {
    margin: 0;
  }

  /* ========================================================================
     TERTIARY BUTTON: Ghost/text-only variant
     ======================================================================== */

  .btn-tertiary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: 0.45rem var(--space-sm);
    height: 36px;
    background-color: transparent;
    color: var(--color-text-muted);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-semibold);
    font-size: 0.95rem;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-in-out),
                color var(--duration-fast) var(--ease-in-out);
  }

  .btn-tertiary:hover {
    background-color: var(--color-background-default);
    color: var(--color-text);
  }

  .btn-tertiary:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  .btn-tertiary:disabled,
  .btn-tertiary[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* Ensure specific action buttons (eg. Find PBS matches) are visible
     even when using the tertiary/ghost variant. This targets the
     #find-pbs-btn element only so we don't change global button styles. */
  #find-pbs-btn {
    background-color: var(--color-background-default);
    color: var(--color-text);
    border: var(--border);
    box-shadow: var(--shadow-sm);
  }

  #find-pbs-btn:hover {
    filter: brightness(0.98);
  }

  #find-pbs-btn:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  /* PBS formats list (accessible single-select list) */
  .pbs-formats-list {
    list-style: disc;
    padding-inline-start: 1.25rem;
    margin-block-start: var(--space-xs);
    margin-block-end: 0;
  }

  .pbs-formats-list .pbs-format-item {
    padding: 0.25rem 0.35rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
  }

  .pbs-formats-list .pbs-format-item:hover,
  .pbs-formats-list .pbs-format-item:focus {
    background-color: var(--color-background-secondary);
    outline: none;
  }

  .pbs-formats-list .pbs-format-item.selected {
    font-weight: var(--font-weight-semibold);
    background-color: oklch(var(--lch-primary-light));
  }

  /* ========================================================================
     FORM CONTROL: Alias for .form-field (compatibility)
     ======================================================================== */

  .form-control {
    display: block;
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-md);
    border: var(--border);
    padding: var(--space-sm) var(--space-md);
    margin-block-start: var(--space-sm);
    width: 100%;
  }

  .form-control:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  /* ========================================================================
     INPUT GROUP: Inline input + button combos
     ======================================================================== */

  .input-group {
    display: flex;
    align-items: stretch;
    gap: 0;
  }

  .input-group .form-field,
  .input-group .form-control {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
    border-inline-end: none;
    flex: 1;
    margin: 0;
  }

  .input-group .btn-primary,
  .input-group .btn-secondary {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    flex-shrink: 0;
  }

  /* ========================================================================
     FORM CHECK: Checkbox and radio styling
     ======================================================================== */

  .form-check {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-height: auto;
    padding-inline-start: 0;
    margin-block-end: var(--space-sm);
  }

  .form-check-inline {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    margin-inline-end: var(--space-md);
  }

  .form-check-input {
    appearance: auto;
    inline-size: 1rem;
    block-size: 1rem;
    min-height: auto;
    min-width: auto;
    flex-shrink: 0;
    accent-color: var(--color-primary);
    cursor: pointer;
  }

  .form-check-label {
    font-weight: var(--font-weight-normal);
    color: var(--color-text);
    cursor: pointer;
    margin: 0;
  }
}