@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-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: var(--focus-ring-size) solid var(--focus-ring-color);
      outline-offset: var(--focus-ring-offset);
    }
  }

  /* 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--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;
    }
  }

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

  .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 foldout
  /* ------------------------------------------------------------------------ */

  .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__settings {
    padding-inline: var(--inline-space);
  }

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

  .sidebar__settings > summary::-webkit-details-marker,
  .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__settings[open] > summary .sidebar__chevron,
  .sidebar__foldout[open] > summary .sidebar__chevron {
    transform: rotate(90deg);
  }

  .sidebar__settings-list {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--block-space-half);
    list-style: none;
    margin: 0;
    padding: var(--block-space-half) 0 0;
  }

  .sidebar__settings-link {
    color: var(--color-ink);
    font-size: var(--text-small);
    font-weight: 500;
    text-decoration: none;
    padding: 0.35rem 0.75rem;
    border-radius: 0.5rem;
    transition: background-color 100ms ease;

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

    &:focus-visible {
      outline: var(--focus-ring-size) solid var(--focus-ring-color);
      outline-offset: var(--focus-ring-offset);
    }
  }
}