@layer components {
  /* Width of the categories sidebar when it is visible. */
  :root {
    --app-sidebar-width: 19rem;
    /* Minimum viewport width at which the sidebar is allowed to render.
       Below this, we fall back to the original header dropdown layout
       even when the user has enabled the sidebar. */
    --app-sidebar-breakpoint: 900px;
  }

  .app-sidebar {
    display: none;
    position: fixed;
    top: calc(2.5rem + var(--blitz-staging-banner-height, 0rem));
    left: 0;
    bottom: 0;
    width: var(--app-sidebar-width);
    background-color: white;
    border-right: 1px solid #e5e7eb;
    flex-direction: column;
    min-height: 0;
    z-index: 50;
    /* Mirror .app-main's padding-top so the sidebar's header row starts at
       the same y as the resource-header row. */
    padding-top: 1rem;
  }

  .app-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0 1rem;
    /* Matches the .view-toggle-btn height in the resource-header so the
       "Kategorien" row aligns with the "Alle Notizen" row. */
    min-height: 2.5rem;
    border-bottom: 1px solid #f1f5f9;
  }

  .app-sidebar-title {
    font-weight: bold;
    font-size: 1.05rem;
    line-height: 1.2;
    color: #1f2937;
    overflow: hidden;
    /* Wrap long category names onto a second line instead of truncating with
       an ellipsis on the first; only clamp once we exceed two lines. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .app-sidebar-header-actions {
    display: flex;
    align-items: center;
    gap: 0.1rem;
  }

  /* Header on the note detail page doubles as a "back to the list" link. */
  .app-sidebar-back {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    min-width: 0;
    margin-left: -0.25rem;
    padding: 0.15rem 0.35rem;
    border-radius: 6px;
    color: inherit;
    text-decoration: none;
  }

  .app-sidebar-back:hover {
    background-color: #f3f4f6;
    text-decoration: none;
  }

  .app-sidebar-back-icon {
    --icon-size: 1.1rem;
    color: #6b7280;
    flex-shrink: 0;
  }

  .app-sidebar-header-main {
    flex: 1;
    min-width: 0;
  }

  .app-sidebar-icon-btn,
  .sidebar-show-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: 6px;
    background: transparent;
    border: none;
    color: #4b5563;
    cursor: pointer;
    --icon-size: 1.4rem;
    transition: background-color 0.15s ease, color 0.15s ease;
  }

  .app-sidebar-icon-btn:hover,
  .sidebar-show-btn:hover {
    background-color: #f3f4f6;
    color: #111827;
    text-decoration: none;
  }

  .app-sidebar-filter {
    position: relative;
    /* margin-top matches .resource-header's margin-bottom so the filter's
       top edge lines up with the first row of cards in the main content. */
    margin: 1rem 0.75rem 0.25rem;
  }

  .app-sidebar-filter-icon {
    --icon-size: 1rem;
    position: absolute;
    left: 0.55rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    pointer-events: none;
  }

  .app-sidebar-filter-input {
    width: 100%;
    height: 2rem;
    padding: 0 0.6rem 0 1.8rem;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background-color: #fafafa;
    font: inherit;
    font-size: 0.85rem;
    color: #1f2937;
    outline: none;
  }

  .app-sidebar-filter-input:focus {
    border-color: #cbd5e1;
    background-color: white;
  }

  .app-sidebar-item.is-filtered-out {
    display: none;
  }

  .app-sidebar-nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0.5rem 0.25rem 0.5rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 1px;
  }

  .app-sidebar-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    border-radius: 6px;
    color: #1f2937;
    text-decoration: none;
    font-size: 0.92rem;
    min-height: 2.1rem;
  }

  .app-sidebar-item:hover {
    background-color: #f3f4f6;
    text-decoration: none;
  }

  /* Keyboard focus ring for ↑/↓ navigation — distinct from the amber
     "selected" (currently open) note. */
  .app-sidebar-item:focus-visible {
    outline: 2px solid #93c5fd;
    outline-offset: -2px;
  }

  .app-sidebar-item.selected {
    background-color: #fef3c7;
    color: #111827;
  }

  .app-sidebar-item.selected:hover {
    background-color: #fde68a;
  }

  /* Category row currently hovered while dragging an item from the list
     (move_to_category_controller). */
  .app-sidebar-item.is-drop-target {
    background-color: #dbeafe;
    box-shadow: inset 0 0 0 2px #60a5fa;
  }

  /* The card/row being dragged onto a sidebar category. */
  .is-dragged {
    opacity: 0.4;
  }

  a.app-sidebar-item,
  .app-sidebar-item-link {
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 0.4rem 0.5rem;
    color: inherit;
    text-decoration: none;
  }

  /* Only the inner link (inside a wrapping .app-sidebar-item <div>) needs to
     grow horizontally to fill the click area next to the action menu. On the
     bare <a class="app-sidebar-item"> ("Alle Notizen"), flex: 1 would make it
     stretch vertically inside the column-flex nav when few categories exist. */
  .app-sidebar-item-link {
    flex: 1;
  }

  .app-sidebar-item-link:hover {
    text-decoration: none;
  }

  .app-sidebar-item-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  .app-sidebar-item-menu {
    --icon-size: 1.1rem;
    --dropdown-menu-left: auto;
    --dropdown-menu-right: 0;
    flex-shrink: 0;
    visibility: hidden;
  }

  .app-sidebar-item:hover .app-sidebar-item-menu,
  .app-sidebar-item-menu:focus-within,
  .app-sidebar-item-menu:has(.dropdown-menu.show) {
    visibility: visible;
  }

  .app-sidebar-item-menu .dropdown-toggle-button {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 4px;
    color: #6b7280;
    background: transparent;
    border: none;
    cursor: pointer;
  }

  .app-sidebar-item-menu .dropdown-toggle-button:hover {
    background-color: rgba(0, 0, 0, 0.06);
    color: #111827;
  }

  /* The "show sidebar" button only appears when the sidebar is hidden —
     see the media query below. */
  .sidebar-show-btn {
    display: none;
  }

  /* Wide viewports: respect the user's saved preference. */
  @media (min-width: 900px) {
    .app-main[data-sidebar="visible"] .app-sidebar {
      display: flex;
    }

    .app-main[data-sidebar="hidden"] .sidebar-show-btn {
      display: inline-flex;
    }

    /* The detail page's own "back to list" link is redundant while the
       sidebar is open — the sidebar header already links back to the list. */
    .app-main[data-sidebar="visible"] .note-back,
    .app-main[data-sidebar="visible"] .video-back {
      display: none;
    }
  }

  /* Narrow viewports: collapse automatically, no matter what was saved. */
  @media (max-width: 899px) {
    .app-sidebar {
      display: none !important;
    }
  }
}

/* Layout overrides live in the utilities layer so they beat
   .max-width-container's margin-left: auto, which is also in utilities. */
@layer utilities {
  @media (min-width: 900px) {
    .app-main[data-sidebar="visible"] {
      margin-left: var(--app-sidebar-width);
      max-width: calc(var(--content-max-width, 100%) - var(--app-sidebar-width));
    }

    /* When the sidebar is visible, anchor the header to the viewport's left
       edge (so the archive group sits flush left) but cap its right edge at
       --content-max-width — the same right edge as .app-main. That keeps the
       profile avatar visually aligned with the rightmost content column. */
    body:has(.app-main[data-sidebar="visible"]) .app-header > .max-width-container {
      max-width: var(--content-max-width);
      margin-left: 0;
      margin-right: auto;
    }

    /* Freeze the archive group at a width that lands the first resource-nav
       icon under the "Alle Notizen" text. Math:
         resource_nav_left = parent_padding(1rem) + group_width + gap(1rem)
         icon_x            = resource_nav_left + nav_button_padding(0.5rem)
         "Alle Notizen" x  = sidebar_width + main_padding(1rem) + resource_margin(5px)
       Solving for group_width gives:
         group_width = sidebar_width - 1.5rem + 5px. */
    body:has(.app-main[data-sidebar="visible"]) .header-archive-group {
      width: calc(var(--app-sidebar-width) - 1.5rem + 5px);
    }
  }
}