@layer components {
  /* The fixed application chrome. Scoped to .app-header so the bare <header>
     element stays free for use inside components and dialogs.
     `top` follows the blitz staging banner (0rem when no banner is shown). */
  .app-header {
    position: fixed;
    top: var(--blitz-staging-banner-height, 0rem);
    left: 0;
    width: 100%;
    z-index: 100;
    background-color: white;
    border-bottom: 1px solid lightgray;
  }

  /* Exact height — 2.5rem including the bottom border. The body offset
     (base.css) and the note's sticky formatting bar (notes.css) both assume
     2.5rem; with a content-driven height the header rendered a few px taller
     on iOS and the sticky bar tucked underneath it. */
  .app-header > div {
    display: flex;
    align-items: center;
    gap: 1rem;
    box-sizing: border-box;
    height: calc(2.5rem - 1px);
    padding: 0 1rem;
  }

  .header-logo {
    text-decoration: none;
    font-size: 1.5rem;
    display: flex;
    gap: 5px;
    align-items: center;
    & a:hover {
      text-decoration: none;
    }
  }

  .header-archive {
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: bold;
    white-space: nowrap;
    overflow: clip;
    min-width: 0;
    --icon-size: .9rem;
  }

  /* Caret stays full size; only the name shrinks. */
  .header-archive > .icon {
    flex-shrink: 0;
  }

  .header-resource-nav {
    --icon-size: 1.65rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
  }

  .header-resource-nav > a,
  .app-header .global-search-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 2.2rem;
    padding: 0.3rem 0.5rem;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #4b5563;
    font-size: 0.95rem;
    font-weight: 650;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    --icon-size: 1.65rem;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  }

  .header-resource-nav > a:hover,
  .app-header .global-search-trigger:hover {
    background: #f3f4f6;
    color: #111827;
    text-decoration: none;
  }

  .header-resource-nav > a.selected {
    background: #fef3c7;
    border-color: #fde68a;
    color: #111827;
  }

  .header-resource-nav > a.selected:hover {
    background: #fde68a;
  }

  .header-resource-text,
  header .global-search-trigger-label {
    min-width: 0;
  }

  @media (max-width: 760px) {
    .header-resource-nav > a,
    .app-header .global-search-trigger {
      width: 2.2rem;
      padding-inline: 0;
    }

    .header-resource-text,
    header .global-search-trigger-label {
      position: absolute;
      inline-size: 1px;
      block-size: 1px;
      margin: -1px;
      padding: 0;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
      border: 0;
    }
  }

  /* Below the footer-nav breakpoint, the resource links live in the footer.
     Hide the top nav to make room; the search trigger stays in the header. */
  @media (max-width: 640px) {
    .header-resource-nav {
      display: none;
    }

    .app-header > div {
      gap: 0.5rem;
      padding-inline: 0.5rem;
    }

    /* Match the header's tighter horizontal padding so the title, filters and
       cards all share the same left / right edges on phones. */
    .app-main {
      padding-inline: 0.5rem;
    }
  }

  .header-category {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 1.2rem;
    font-weight: bold;
    white-space: nowrap;
    overflow: clip;
    --icon-size: .9rem;
  }

  /* Desktop shows the full "Notizen in …" phrase; mobile shows only the
     bare category name to save space. */
  .header-category-name {
    display: none;
  }

  /* Allowed to shrink (flex: 0 1 auto via the default) so a long archive name
     truncates via the inner .header-archive-text ellipsis instead of pushing
     the search icon and avatar off the right edge. min-width: 0 lets it shrink
     below its content width. */
  .header-archive-group {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
  }

  /* Books icon stays full size; only the archive name shrinks. */
  .header-archive-group > .icon {
    flex-shrink: 0;
  }

  .header-archive-dropdown {
    --dropdown-menu-top: 2.5rem;
    --dropdown-menu-left: -1rem;
    flex: 1 1 0;
    min-width: 0;
  }

  /* Override Blitz's .dropdown-toggle width: fit-content so the toggle can
     shrink instead of pushing the archive-actions dropdown out of view. */
  .header-archive-dropdown .dropdown-toggle {
    width: 100%;
    min-width: 0;
  }

  .header-archive-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  .header-archive-actions-dropdown {
    margin-left: -0.5rem;
    flex-shrink: 0;
  }

  .resource-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-left: 5px;
    margin-bottom: 1rem;
  }

  /* The view / sort / favorites / search controls sit on their own full-width
     row below the category dropdown. flex-basis: 100% forces the wrap. */
  .resource-filters {
    flex: 1 1 100%;
    display: flex;
    align-items: center;
  }

  .header-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
  }

  .btn-category {
    background-color: #ffdc8a;
    padding: 0.35rem 0.6rem;
    font-size: 0.8rem;
    white-space: nowrap;
    border: none;

    &:hover {
      background-color: #ffdc8a;
    }
  }

  .btn-reorder {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.6rem;
    font-size: 0.8rem;
    white-space: nowrap;
    border: none;
    background-color: #d9f99d;
    color: #1f2937;
    --icon-size: 1rem;

    &:hover {
      background-color: #bef264;
    }
  }

  .btn-reorder .reorder-start,
  .btn-reorder .reorder-done {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
  }

  .btn-reorder .reorder-done {
    display: none;
  }

  [data-image-reorder-active-value="true"] .btn-reorder {
    background-color: #0f766e;
    color: white;
  }

  [data-image-reorder-active-value="true"] .btn-reorder .reorder-start {
    display: none;
  }

  [data-image-reorder-active-value="true"] .btn-reorder .reorder-done {
    display: inline-flex;
  }

  .category-dropdown-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .category-dropdown {
    --dropdown-menu-left: -15px;
  }

  .global-search-dialog {
    max-height: min(80dvh, calc(100dvh - var(--global-search-top) - 2rem));
  }

  .global-search-panel {
    max-height: inherit;
  }

  .header-profile-dropdown {
    --dropdown-menu-left: auto;
    --dropdown-menu-right: -15px;
    --icon-size: 2rem;
    margin-left: auto;
  }

  .header-profile-dropdown a {
    --icon-size: 1.5rem;
    display: flex;
    gap: .5rem;
  }

  @media (max-width: 760px) {
    .resource-header {
      align-items: flex-start;
      flex-wrap: wrap;
      gap: 0.35rem;
      /* Drop the desktop 5px indent so the title row lines up flush with the
         cards below it. */
      margin-left: 0;
      margin-bottom: 0.45rem;
    }

    /* Keep the stacking order: dropdown, then filters, then action buttons. */
    .resource-filters {
      order: 2;
    }

    .header-actions {
      order: 3;
    }

    .category-dropdown-container {
      flex: 1 1 100%;
      min-width: 0;
      flex-wrap: wrap;
      gap: 0.25rem;
    }

    /* Let the title dropdown take all the row's free space so the name uses
       the full available width and the actions dropdown sits at the right
       edge (mirrors the .header-archive-dropdown pattern). */
    .category-dropdown {
      flex: 1 1 0;
      min-width: 0;
      --dropdown-menu-left: 0;
      --dropdown-menu-right: auto;
      --dropdown-menu-max-height: calc(100dvh - 9rem);
    }

    .category-dropdown .dropdown-toggle {
      width: 100%;
      min-width: 0;
    }

    .category-actions-dropdown {
      flex-shrink: 0;
    }

    .category-dropdown .dropdown-menu {
      width: calc(100vw - 2rem);
      max-width: calc(100vw - 2rem);
    }

    .category-dropdown .dropdown-filter {
      min-width: 0;
    }

    .category-dropdown .dropdown-menu a {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* No hard cap — the flex chain above constrains the width, so the name
       only truncates when it genuinely runs out of room next to the actions
       button (the caret stays pinned right after the name). */
    .header-category {
      max-width: none;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .header-category-text {
      display: none;
    }

    .header-category-name {
      display: block;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  /* Below the footer-nav breakpoint, the footer "+Neu" dropdown takes over
     all resource-creation actions, so the resource-specific +Notiz /
     +Kategorie / +Foto buttons in the header are redundant. Hide them to
     give the view / sort / search row the full width. The reorder button
     (only present on the images grid) stays visible. */
  @media (max-width: 640px) {
    .header-actions .btn-primary,
    .header-actions .btn-category {
      display: none;
    }

    .global-search-dialog {
      width: calc(100vw - 1rem);
      max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 1rem);
      margin-block-start: calc(env(safe-area-inset-top, 0px) + 0.5rem);
    }

    .global-search-panel {
      max-height: inherit;
    }

    .global-search-results {
      min-height: 0;
    }
  }
}