@layer components {
  /* Two-column app layout
  /* ======================================================================== */

  .app-layout {
    display: grid;
    grid-template-columns: 1fr;
    min-block-size: 0; /* prevent grid blowout */
  }

  .app-layout > .page {
    padding-inline: var(--main-padding);
  }

  .app-layout:has(.sidebar) .container {
    margin-inline: 0;
  }

  @media (min-width: 640px) and (max-width: 1023px) {
    .app-layout {
      flex: 1;
      min-block-size: 0;
      overflow: hidden;
    }

    .app-layout > .page {
      overflow-y: auto;
      padding-inline: var(--block-space);
      padding-block-end: 9em;
    }
  }

  @media (min-width: 1024px) {
    .app-layout {
      &:has(.sidebar) {
        grid-template-columns: var(--sidebar-width) 1fr;
        flex: 1;
        min-block-size: 0;
        overflow: hidden;
      }

      & > .page {
        padding-inline: var(--block-space);
        overflow-y: auto;
        padding-block-end: 9em;
      }
    }
  }

  /* On mobile: show sidebar OR content, not both.
  /* body.has-content = user is on a content page → hide sidebar, show main.
  /* Without .has-content (dashboard) → show sidebar, hide main.
  /* ======================================================================== */

  @media (max-width: 1023px) {
    body.has-content .sidebar {
      display: none;
    }

    body:not(.has-content) .app-layout:has(.sidebar) > .page {
      display: none;
    }
  }

  /* Sidebar
  /* ======================================================================== */

  .sidebar {
    border-inline-end: 1px solid var(--color-ink-lighter);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  @media (min-width: 1024px) {
    .sidebar {
      overflow-y: auto;
    }
  }

  @media (max-width: 1023px) {
    .sidebar {
      border-inline-end: none;
      min-block-size: calc(100dvh - 6rem); /* fill below header */
    }
  }

  .sidebar__nav {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
    padding-block-end: calc(var(--footer-height) + env(safe-area-inset-bottom) + var(--block-space));
  }

  /* Sections
  /* ------------------------------------------------------------------------ */

  .sidebar__section {
    padding-block-end: var(--block-space-half);
  }

  /* List & items
  /* ------------------------------------------------------------------------ */

  .sidebar__list {
    display: flex;
    flex-direction: column;
    gap: var(--block-space);
    list-style: none;
    margin: 0;
    padding: 0 var(--inline-space);
  }

  .sidebar__link {
    align-items: center;
    background-color: var(--color-ink-lighter);
    border: 0;
    border-radius: 0.75rem;
    box-shadow: var(--shadow);
    color: var(--color-ink);
    cursor: pointer;
    display: flex;
    font-size: var(--text-normal);
    font-weight: 600;
    gap: 0.75rem;
    inline-size: 100%;
    padding: 0.75rem 1rem;
    text-align: start;
    text-decoration: none;
    transition: 100ms ease-out;
    transition-property: background-color, box-shadow, filter, transform;

    @media (any-hover: hover) {
      &:hover {
        filter: brightness(0.92);
      }
    }

    &:active {
      transform: scale(0.98);
    }

    &:focus-visible {
      outline: none;
    }
  }

  /* Domain-colored background variants (matching menubtn colors) */
  .sidebar__link--blue       { background-color: var(--color-blue-lightest); }
  .sidebar__link--servicing  { background-color: var(--color-servicing); }
  .sidebar__link--farrowing  { background-color: var(--color-farrowing); }
  .sidebar__link--weaning    { background-color: var(--color-weaning); }
  .sidebar__link--treatment  { background-color: var(--color-treatment); }
  .sidebar__link--medicine   { background-color: var(--color-medicine); }
  .sidebar__link--slaughter  { background-color: var(--color-slaughter-light); }
  .sidebar__link--overview   { background-color: var(--color-overview); }
  .sidebar__link--offspring  { background-color: var(--color-offspring); }

  .sidebar__link--disabled {
    color: var(--color-ink-medium);
    cursor: default;

    @media (any-hover: hover) {
      &:hover {
        filter: none;
      }
    }

    &:active {
      transform: none;
    }
  }

  /* Mobile-only link (e.g., Dashboard) — hidden on desktop where sidebar is always visible */
  .sidebar__link--mobile-only {
    @media (min-width: 1024px) {
      display: none;
    }
  }

  /* Desktop-only accordion foldout for sidebar menu entries (Piglets/Medicine/Settings).
     Mobile uses the sibling .sidebar__link--mobile-only link instead. */
  .sidebar__foldout {
    display: none;

    @media (min-width: 1024px) {
      display: block;
    }
  }

  /* Submenu rendered as a plain indented item list (not buttons). Scoped here so the
     standalone mobile menu pages and the my/menu popup keep the menubtn button look. */
  .sidebar__foldout-body {
    padding-block-start: var(--block-space-half);
    padding-inline-start: calc(1.25em + 0.75rem); /* align under the label, past icon + gap */
  }

  .sidebar__foldout-body .menubtn {
    background: none;
    box-shadow: none;
    border-radius: 0.4rem; /* only shapes the hover highlight */
    color: var(--color-ink);
    font-size: var(--text-small);
    font-weight: 500;
    gap: 0.5rem;
    padding: 0.3rem 0.5rem;

    @media (any-hover: hover) {
      &:hover {
        background: var(--color-ink-lighter);
        filter: none;
      }
    }

    &:active {
      transform: none;
    }
  }

  .sidebar__foldout-body .menubtn--add {
    flex: 0 0 auto;
    color: var(--color-ink-medium);
  }

  .sidebar__foldout-body h2 {
    color: var(--color-ink-medium);
    font-size: var(--text-small);
  }

  /* Subtle expand animation (progressive enhancement — snaps where ::details-content
     or interpolate-size is unsupported). */
  .sidebar__foldout {
    interpolate-size: allow-keywords;
  }

  .sidebar__foldout::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size 200ms ease, content-visibility 200ms allow-discrete;
  }

  .sidebar__foldout[open]::details-content {
    block-size: auto;
  }

  .sidebar__icon {
    flex-shrink: 0;
    inline-size: 1.25em;
    text-align: center;
  }

  /* Real Danish flag (Dannebrog) instead of the 🇩🇰 emoji, which Windows'
     Segoe UI Emoji refuses to render as a flag and falls back to "DK". */
  .sidebar__flag {
    block-size: 0.9em;
    inline-size: auto;
    vertical-align: middle;
    border-radius: 1px;
  }

  .sidebar__label {
    flex: 1;
    min-inline-size: 0;
  }

  /* Farrowing urgency badge dots
  /* ------------------------------------------------------------------------ */

  .sidebar__item--badges {
    position: relative;
  }

  .sidebar__item--badges > turbo-frame {
    align-items: center;
    display: flex;
    inset-block: 0;
    inset-inline-end: 1rem;
    pointer-events: none;
    position: absolute;
  }

  .sidebar__badges {
    display: flex;
    gap: 0.25rem;
  }

  .sidebar__badge {
    align-items: center;
    border-radius: 50%;
    color: white;
    display: inline-flex;
    font-size: 0.65rem;
    font-weight: 700;
    block-size: 1.35rem;
    inline-size: 1.35rem;
    justify-content: center;
    line-height: 1;
  }

  .sidebar__badge--green  { background-color: var(--color-farrowing-ok); }
  .sidebar__badge--yellow { background-color: var(--color-farrowing-warning); }
  .sidebar__badge--red    {
    background-color: var(--color-farrowing-urgent);
    animation: sidebar-badge-pulse 2s ease-in-out infinite;
  }

  @keyframes sidebar-badge-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
  }

  /* Settings section & foldout summary chrome
  /* ------------------------------------------------------------------------ */

  .sidebar__section--settings {
    margin-block-start: auto;
    padding-block-end: 0;
  }

  .sidebar__divider {
    border: none;
    border-block-start: 1px solid var(--color-ink-lighter);
    margin: 0 var(--inline-space) var(--block-space);
  }

  .sidebar__foldout > summary {
    list-style: none;
  }

  .sidebar__foldout > summary::-webkit-details-marker {
    display: none;
  }

  .sidebar__link--settings {
    background-color: var(--color-ink-lighter);
  }

  .sidebar__chevron {
    margin-inline-start: auto;
    transition: transform 200ms ease;
  }

  .sidebar__foldout[open] > summary .sidebar__chevron {
    transform: rotate(90deg);
  }
}