@layer components {
  /*
   * Pure CSS dropdown using hidden checkbox
   *
   * How it works:
   * 1. Hidden checkbox controls open/closed state
   * 2. Label wraps the trigger - clicking toggles checkbox
   * 3. :checked sibling selector shows/hides menu
   * 4. Clicking trigger again unchecks -> closes menu
   * 5. Clicking outside uses an overlay to uncheck
   */
  .dropdown { position: relative; }

  /* Hidden checkbox that controls state */
  .dropdown__toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  /* The clickable trigger area */
  .dropdown__trigger {
    display: flex;
    align-items: center;
    gap: var(--inline-space);
    padding: var(--block-space-sm) 0;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    inline-size: 100%;
    text-align: start;
  }

  .dropdown__trigger-text {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-inline-size: 0;
  }

  .dropdown__arrow {
    transition: transform 0.2s ease-out;
    color: var(--color-ink-muted);
  }

  /* Overlay to close dropdown when clicking outside */
  .dropdown__overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10;
  }

  .dropdown__menu {
    position: absolute;
    inset-block-end: 100%;
    inset-inline: 0;
    margin-block-end: var(--block-space-sm);
    background-color: var(--color-canvas);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 6px -1px oklch(0% 0 0 / 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(var(--block-space-sm));
    transition: opacity 0.15s, visibility 0.15s, transform 0.15s;
    z-index: 11;
  }

  /* When checkbox is checked: show overlay and menu */
  .dropdown__toggle:checked ~ .dropdown__overlay {
    display: block;
  }

  .dropdown__toggle:checked ~ .dropdown__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .dropdown__toggle:checked ~ .dropdown__trigger .dropdown__arrow {
    transform: rotate(180deg);
  }

  .dropdown__item {
    display: flex;
    align-items: center;
    gap: var(--inline-space);
    padding: var(--block-space-sm) var(--inline-space);
    color: var(--color-ink);
    text-decoration: none;
    font-size: var(--text-sm);
    background: none;
    border: none;
    inline-size: 100%;
    text-align: start;
    cursor: pointer;
  }

  .dropdown__item:hover { background-color: var(--color-canvas-alt); }
  .dropdown__item--danger { color: var(--color-red); }

  .dropdown__header {
    display: flex;
    flex-direction: column;
    padding: var(--block-space-sm) var(--inline-space);
    border-block-end: 1px solid var(--color-border);
  }

  .dropdown__header-name {
    font-weight: 600;
    font-size: var(--text-sm);
  }

  .dropdown__header-email {
    font-size: var(--text-xs);
    color: var(--color-ink-muted);
  }

  /*
   * Dropdown menu (CSS-only using details/summary)
   * Used for action menus in tables
   */
  .dropdown-menu {
    position: relative;
    display: inline-block;
  }

  .dropdown-menu__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    background-color: var(--color-canvas);
    color: var(--color-ink-muted);
    cursor: pointer;
    list-style: none;
    transition: background-color 0.1s ease, color 0.1s ease, border-color 0.1s ease;
  }

  .dropdown-menu__trigger::-webkit-details-marker {
    display: none;
  }

  .dropdown-menu__trigger:hover {
    background-color: var(--color-canvas-alt);
    border-color: var(--color-border-strong);
    color: var(--color-ink);
  }

  .dropdown-menu__content {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-end: 0;
    z-index: var(--z-dropdown, 100);
    min-width: 10rem;
    margin-block-start: var(--block-space-xs);
    padding: var(--block-space-xs) 0;
    background-color: var(--color-canvas);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px oklch(0% 0 0 / 0.15);
  }

  .dropdown-menu__item {
    display: flex;
    align-items: center;
    gap: var(--inline-space);
    padding: var(--block-space-sm) var(--inline-space);
    color: var(--color-ink);
    text-decoration: none;
    font-size: var(--text-sm);
    font-family: inherit;
    background: none;
    border: none;
    inline-size: 100%;
    text-align: start;
    cursor: pointer;
    transition: background-color 0.1s ease;
  }

  .dropdown-menu__item:focus {
    outline: none;
    background-color: var(--color-canvas-alt);
  }

  /* Forms generated by button_to inside dropdown menus */
  .dropdown-menu__content form {
    display: contents;
  }

  .dropdown-menu__item:hover {
    background-color: var(--color-canvas-alt);
    text-decoration: none;
  }

  .dropdown-menu__item--danger {
    color: var(--color-red);
  }

  .dropdown-menu__item--danger:hover {
    background-color: oklch(from var(--color-red) l c h / 0.1);
  }

  .dropdown-menu__item--disabled {
    color: var(--color-ink-muted);
    cursor: not-allowed;
    opacity: 0.5;
  }

  .dropdown-menu__item--disabled:hover {
    background-color: transparent;
  }

  .dropdown-menu__item i {
    width: 1rem;
    text-align: center;
  }

  /*
   * Dropdown menu - upward variant for items near bottom
   */
  .dropdown-menu--up .dropdown-menu__content {
    inset-block-start: auto;
    inset-block-end: 100%;
    margin-block-start: 0;
    margin-block-end: var(--block-space-xs);
  }

  /*
   * Auto-flip dropdowns in scrollable table containers for last 3 rows
   */
  .data-table-container .data-table__row:nth-last-child(-n+3) .dropdown-menu .dropdown-menu__content {
    inset-block-start: auto;
    inset-block-end: 100%;
    margin-block-start: 0;
    margin-block-end: var(--block-space-xs);
  }
}