/* Admin students dashboard: search + status tabs + expandable rows +
 * pagination. The list is rendered and paginated server-side; tab links and
 * the Pagy nav drive a Turbo frame. The CSS here is purely presentational.
 * Descendants are scoped by nesting and carry short, local names rather than
 * an `admin-students-`-prefixed echo of the root. */

.admin-students {
  @apply flex flex-col gap-4;

  & .header {
    @apply flex flex-col gap-1;

    & h1 {
      @apply text-2xl font-semibold text-slate-900;
    }

    & .subtitle {
      @apply text-sm text-slate-600;
    }
  }

  /* Status filter, responsive:
   *   < sm : a native <select> (`.tabs-select`) that navigates to tab URLs.
   *   >= sm: underline tab links with a count badge (`.tablist`).
   * Each option/link points at `?tab=<key>`; the active link is marked with
   * aria-current="page" and styled off that so the visual matches AT. */
  & .tabs {
    @apply mb-4;

    & .tabs-select {
      @apply block sm:hidden;
    }

    /* The bottom divider lives on the tablist; the active tab's 2px underline
     * overlaps it via the nav's -mb-px so the two read as one line. */
    & .tablist {
      @apply hidden border-b border-slate-200 sm:block;

      & nav {
        @apply -mb-px flex space-x-6 overflow-x-auto;
      }

      & .tab {
        @apply flex cursor-pointer items-center whitespace-nowrap border-b-2 border-transparent px-1 py-4 text-sm font-medium text-slate-500 no-underline transition-colors hover:border-slate-300 hover:text-slate-700 focus:outline-none focus-visible:rounded focus-visible:ring-2 focus-visible:ring-heroku-30;

        & .count {
          @apply ml-3 hidden rounded-full bg-slate-100 px-2.5 py-0.5 text-xs font-medium text-slate-900 md:inline-block;
        }

        /* Style off `aria-current="page"` directly so the visual matches what
         * assistive tech announces — no separate active class to keep in sync. */
        &[aria-current="page"] {
          @apply border-heroku-30 text-heroku-30;

          & .count {
            @apply bg-heroku-95 text-heroku-30;
          }
        }
      }
    }
  }

  & .list {
    @apply flex flex-col gap-2;

    & .row {
      /* `overflow-hidden` clips the expanded `.body` background + its top
       * divider to the row's rounded corners (otherwise the slate-50 fill
       * squares off the bottom corners). The row's own hover shadow is
       * unaffected — an element's own overflow never clips its own shadow. */
      @apply overflow-hidden rounded-md border border-slate-200 bg-white transition-shadow;

      &:hover {
        @apply border-slate-300 shadow-sm;
      }

      & details {
        /* Suppress the default <summary> marker; we draw our own chevron. */
        & > summary::-webkit-details-marker {
          display: none;
        }

        & > summary {
          @apply flex cursor-pointer items-center justify-between gap-3 px-4 py-3 text-sm font-medium text-slate-900;
          list-style: none;

          &::before {
            content: "";
            @apply mr-1 inline-block h-2 w-2 shrink-0 rotate-45 border-b-2 border-r-2 border-slate-400 transition-transform;
          }

          & .email {
            @apply flex-1 truncate;
          }

          & .badges {
            @apply flex shrink-0 items-center gap-2;
          }
        }

        &[open] > summary::before {
          @apply rotate-225;
        }

        & .body {
          @apply flex flex-col gap-3 border-t border-slate-100 bg-slate-50 px-4 py-3;

          & .profile-link {
            @apply self-start text-sm;
          }
        }
      }
    }
  }

  & .empty {
    @apply rounded-md border border-dashed border-slate-300 bg-white px-4 py-6 text-center text-sm text-slate-600;
  }

  /* Pagination footer: range info (left) + grouped page nav (right) on >= sm;
   * a plain Previous / Next pair on mobile. Markup is in
   * `dashboard/_pagination.html.erb`. */
  & .pagination {
    @apply mt-4 flex items-center justify-between border-t border-slate-200 pt-4;

    /* Mobile: Previous / Next only. */
    & .pagination-compact {
      @apply flex flex-1 justify-between sm:hidden;

      & .page-btn {
        @apply relative inline-flex items-center rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 no-underline hover:bg-slate-50;

        &.next {
          @apply ml-3;
        }

        &.is-disabled {
          @apply cursor-default text-slate-300 hover:bg-white;
        }
      }
    }

    /* Desktop: range info + grouped numbered nav. */
    & .pagination-full {
      @apply hidden sm:flex sm:flex-1 sm:items-center sm:justify-between;
    }

    & .pagination-range {
      @apply text-sm text-slate-700;

      & strong {
        @apply font-medium text-slate-900;
      }
    }

    /* The grouped nav: segments share borders via inset rings + -space-x-px,
     * with rounded ends, mirroring the Tailwind reference. */
    & .pagination-pages {
      @apply isolate inline-flex -space-x-px rounded-md shadow-xs;

      & .page-arrow {
        @apply relative inline-flex items-center px-2 py-2 text-slate-400 no-underline inset-ring inset-ring-slate-300 hover:bg-slate-50 focus:z-20 focus:outline-offset-0;

        & .icon {
          @apply size-5;
        }

        &.prev {
          @apply rounded-l-md;
        }

        &.next {
          @apply rounded-r-md;
        }

        &.is-disabled {
          @apply cursor-default text-slate-200 hover:bg-transparent;
        }
      }

      & .page-num {
        @apply relative inline-flex items-center px-4 py-2 text-sm font-semibold text-slate-900 no-underline inset-ring inset-ring-slate-300 hover:bg-slate-50 focus:z-20 focus:outline-offset-0;

        &.is-current {
          @apply z-10 bg-heroku-30 text-white inset-ring-0 hover:bg-heroku-30 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-heroku-30;
        }
      }

      & .page-gap {
        @apply relative inline-flex items-center px-4 py-2 text-sm font-semibold text-slate-700 inset-ring inset-ring-slate-300;
      }
    }
  }
}