/*
 * Admin Sidebar
 * Collapsible navigation sidebar for admin layout.
 * Uses CSS checkbox hack — no JavaScript required.
 */

@layer components {
  .admin-sidebar {
    color: var(--color-gray-darker);
    position: sticky;
    top: 0;
    block-size: 100dvh;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding-inline: var(--block-space-half);
    min-inline-size: 0;
    border-inline-end: var(--border-standard);
    transition: padding-inline 250ms var(--ease-out-expo);

    @media (max-width: 639px) {
      position: fixed;
      inset-block: 0;
      inset-inline-start: 0;
      inline-size: 16rem;
      z-index: var(--z-modal);
      translate: -100%;
      transition: translate 250ms var(--ease-out-expo);
      background-color: var(--color-white);
    }
  }

  .admin-sidebar__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block-end: var(--block-space);
  }

  .admin-sidebar__logo {
    display: flex;
    align-items: center;
    padding: var(--block-space-half);
    font-size: var(--text-medium);
    color: var(--color-gray-darker);
    text-decoration: none;
  }

  .admin-sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    overflow-y: auto;
  }

  .admin-sidebar__section {
    margin-block-start: var(--block-space);

    &:first-child {
      margin-block-start: 0;
    }
  }

  .admin-sidebar__heading {
    font-size: var(--text-x-small);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-gray);
    padding-inline: var(--block-space-half);
    margin-block-end: var(--block-space-quarter);
  }

  .admin-sidebar__link {
    display: flex;
    align-items: center;
    gap: var(--block-space-half);
    padding: var(--block-space-half);
    border-radius: var(--radius);
    color: var(--color-gray-dark);
    font-size: var(--text-small);
    text-decoration: none;
    transition: background-color 150ms ease, color 150ms ease;

    & .icon {
      inline-size: var(--icon-sm);
      block-size: var(--icon-sm);
      flex-shrink: 0;
    }

    @media (any-hover: hover) {
      &:hover {
        background-color: oklch(var(--lch-black) / 5%);
        color: var(--color-gray-darker);
      }
    }
  }

  .admin-sidebar__link--active {
    background-color: oklch(var(--lch-black) / 8%);
    color: var(--color-gray-darker);
  }

  .admin-sidebar__link--disabled {
    color: var(--color-gray-light);
    pointer-events: none;
  }

  .admin-sidebar__footer {
    margin-block-start: auto;
  }

  .admin-sidebar__label {
    white-space: nowrap;
    overflow: hidden;
  }

  /* Hidden checkbox that drives all toggle states */
  .admin-sidebar__toggle {
    display: none;
  }

  /* Shared toggle button styles (topbar hamburger + sidebar collapse) */
  :is(.admin-topbar__toggle, .admin-sidebar__collapse) {
    cursor: pointer;
    line-height: 0;
    color: var(--color-gray-medium);

    & .icon {
      inline-size: var(--icon-sm);
      block-size: var(--icon-sm);
    }

    @media (any-hover: hover) {
      &:hover {
        color: var(--color-gray-darker);
      }
    }
  }

  .admin-sidebar__collapse {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--block-space-half);
    border-radius: var(--radius);
  }

  /* Admin topbar (hamburger + breadcrumbs inside main) */
  .admin-topbar {
    display: flex;
    align-items: center;
    gap: var(--block-space);
    padding: var(--block-space-half) var(--block-space);
    background-color: var(--color-white);
  }

  .admin-topbar__breadcrumbs {
    display: flex;
    align-items: center;
    gap: var(--inline-space-half);
    font-size: var(--text-normal);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;

    & a {
      color: var(--color-gray);

      @media (any-hover: hover) {
        &:hover { color: var(--color-gray-darker); }
      }
    }

    & span { color: var(--color-gray-darker); }
  }

  .admin-topbar__actions {
    margin-inline-start: auto;
  }

  /* Mobile overlay backdrop */
  .admin-sidebar__overlay {
    display: none;

    @media (max-width: 639px) {
      display: block;
      position: fixed;
      inset: 0;
      z-index: calc(var(--z-modal) - 1);
      background-color: oklch(var(--lch-black) / 50%);
      opacity: 0;
      pointer-events: none;
      transition: opacity 250ms ease;
    }
  }

  /* --- Checked states --- */

  .admin-sidebar__toggle:checked ~ .admin-sidebar {
    /* Mobile: slide sidebar in */
    @media (max-width: 639px) {
      translate: 0;
    }

    /* Desktop: collapse sidebar to zero width */
    @media (min-width: 640px) {
      overflow: hidden;
      padding-inline: 0;
    }
  }

  .admin-sidebar__toggle:checked ~ .admin-sidebar__overlay {
    opacity: 1;
    pointer-events: auto;
  }

  /*
   * Only one hamburger visible at a time:
   * Mobile:  sidebar closed (unchecked) → show topbar toggle; sidebar open (checked) → hide it
   * Desktop: sidebar visible (unchecked) → hide topbar toggle; sidebar collapsed (checked) → show it
   */
  .admin-sidebar__toggle:checked ~ main .admin-topbar__toggle {
    @media (max-width: 639px) {
      display: none;
    }
  }

  .admin-sidebar__toggle:not(:checked) ~ main .admin-topbar__toggle {
    @media (min-width: 640px) {
      display: none;
    }
  }
}