/* =============================================================================
   COMPONENT: care-catalog — super-admin platform catalog editor.
   Matches .page / .page-section rhythm used by Care Plan, To-dos, Calendar.
   ========================================================================== */
@layer components {
  .catalog-section {
    --catalog-toolbar-w: calc(4 * 2rem + 3 * var(--space-3xs));
    --catalog-icon-size: 2.25rem;
    --catalog-label-gap: var(--space-sm);
    --catalog-item-indent: calc(var(--catalog-icon-size) + var(--catalog-label-gap));
  }

  .catalog-section__card {
    overflow: hidden;
  }

  .catalog-section__banner {
    background: var(--surface);
    border-block-end: var(--border-width) solid var(--color-border);
  }

  .catalog-section__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--catalog-toolbar-w);
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
  }

  .catalog-section__label {
    grid-column: 1;
    display: flex;
    align-items: center;
    gap: var(--catalog-label-gap);
    min-inline-size: 0;
  }

  .catalog-section__toolbar {
    grid-column: 2;
  }

  .catalog-section__icon {
    flex: none;
    inline-size: var(--catalog-icon-size);
    block-size: var(--catalog-icon-size);
  }

  .catalog-section__title {
    margin: 0;
    min-inline-size: 0;
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: var(--color-text);
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .catalog-section__empty {
    margin: 0;
    padding: var(--space-md);
    padding-inline-start: calc(var(--space-md) + var(--catalog-item-indent));
    font-size: var(--text-sm);
    border-block-end: var(--border-width) solid var(--color-border);
  }

  .catalog-items {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--surface-raised);
  }

  .catalog-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--catalog-toolbar-w);
    align-items: center;
    gap: var(--space-sm);
    inline-size: 100%;
    min-block-size: var(--touch-target);
    padding: var(--space-sm) var(--space-md);
    padding-inline-start: calc(var(--space-md) + var(--catalog-item-indent));
  }

  .catalog-item + .catalog-item {
    border-block-start: var(--border-width) solid var(--color-border);
  }

  .catalog-item__title {
    grid-column: 1;
    min-inline-size: 0;
    font-size: var(--text-sm);
    font-weight: var(--weight-normal);
    line-height: var(--leading-normal);
    color: var(--color-text);
    overflow-wrap: anywhere;
  }

  .catalog-item__toolbar {
    grid-column: 2;
  }

  .catalog-toolbar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3xs);
    justify-self: end;
    inline-size: var(--catalog-toolbar-w);
  }

  .catalog-tool-form {
    display: flex;
    margin: 0;
    align-items: center;
  }

  .catalog-tool {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2rem;
    block-size: 2rem;
    min-inline-size: 2rem;
    min-block-size: 2rem;
    padding: 0;
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    line-height: 1;
    color: var(--color-text-muted);
    background: var(--surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    white-space: nowrap;

    &::before {
      content: "";
      position: absolute;
      inset: calc((2rem - var(--touch-target)) / 2);
    }

    &:hover {
      color: var(--accent);
      border-color: var(--color-border-strong);
      background: var(--accent-tint);
    }

    &:focus-visible {
      outline: none;
      box-shadow: var(--focus-ring);
    }
  }

  .catalog-section__add {
    padding: var(--space-sm) var(--space-md);
    border-block-start: var(--border-width) dashed var(--color-border);
    background: var(--surface-sunken);
  }

  .catalog-add-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--catalog-toolbar-w);
    align-items: center;
    gap: var(--space-sm);
  }

  .catalog-add-form__field {
    grid-column: 1;
    min-inline-size: 0;
    padding-inline-start: var(--catalog-item-indent);
  }

  .catalog-add-form__input {
    display: block;
    inline-size: 100%;
    min-inline-size: 0;
    min-block-size: var(--touch-target);
    margin: 0;
  }

  .catalog-add-form__submit {
    grid-column: 2;
    justify-self: end;
    white-space: nowrap;
  }

  .catalog-add-section__form {
    padding: var(--space-lg);
  }

  @media (min-width: 48rem) {
    .catalog-section {
      --catalog-icon-size: 2.75rem;
    }

    /* One card-level grid so every row shares the same toolbar column. */
    .catalog-section__card {
      display: grid;
      grid-template-columns: minmax(0, 1fr) var(--catalog-toolbar-w);
      column-gap: var(--space-sm);
      padding-inline: var(--space-lg);
    }

    .catalog-section__banner,
    .catalog-items,
    .catalog-section__add {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: subgrid;
    }

    .catalog-section__head,
    .catalog-item,
    .catalog-add-form {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: subgrid;
      align-items: center;
      column-gap: var(--space-sm);
    }

    .catalog-section__head {
      padding: var(--space-md) 0;
    }

    .catalog-section__title {
      font-size: var(--text-base);
    }

    .catalog-item {
      padding: var(--space-sm) 0;
      padding-inline-start: var(--catalog-item-indent);
      min-block-size: 2.75rem;
    }

    .catalog-section__empty {
      padding: var(--space-md) 0;
      padding-inline-start: var(--catalog-item-indent);
    }

    .catalog-section__add {
      padding: var(--space-sm) 0;
    }

    .catalog-add-form__field {
      padding-inline-start: var(--catalog-item-indent);
    }

    .catalog-add-form__input,
    .catalog-add-form__submit {
      min-block-size: 2rem;
    }
  }
}