@layer components {
  /* Status badges for offline staging entries
  /* ------------------------------------------------------------------------ */
  .badge {
    display: inline-block;
    padding: 0.1em 0.6em;
    border-radius: 0.25em;
    font-size: var(--text-small);
    white-space: nowrap;
    background: var(--color-ink-lightest);
    color: var(--color-ink);
  }

  .badge--applied {
    background: var(--color-farrowing-ok-bg);
    color: var(--color-farrowing-ok);
  }

  .badge--pending {
    background: var(--color-farrowing-warning-bg);
    color: var(--color-farrowing-warning);
  }

  .badge--needs_attention {
    background: var(--color-negative-light);
    color: var(--color-negative);
  }

  /* Inline notice (e.g. resolution problem on a needs_attention entry)
  /* ------------------------------------------------------------------------ */
  .notice {
    padding: var(--block-space-half) var(--block-space);
    border-radius: 0.25em;
  }

  .notice--alert {
    background: var(--color-negative-light);
    color: var(--color-negative);
  }

  /* Status filter tabs on the staging index
  /* ------------------------------------------------------------------------ */
  .filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--block-space-half);
  }

  /* Offline indicator banner — shown when the device is offline or has unsent captures
  /* ------------------------------------------------------------------------ */
  /* Rendered as a full-width sidebar-style button (.sidebar__link) at the top of the page.
  /* Matches the horizontal inset .sidebar__list gives its buttons. */
  .offline-banner {
    padding: var(--block-space-half) var(--inline-space);
  }

  .sidebar__link--offline {
    background-color: var(--color-farrowing-warning);
  }

  .offline-banner__count {
    margin-inline-start: auto;
    font-size: var(--text-small);
    font-weight: 600;
  }

  /* Footer bar for the offline mini-app — same five slots as the main bar (so it lines up), but
  /* visible on desktop too (the stock .bar is mobile-only, and the offline pages have no @herd
  /* header actions to fall back on). */
  .offline-bar {
    @media (min-width: 640px) {
      display: grid;
    }
  }

  /* On-device offline diagnostic, shown only via ?swdebug (see sw_debug_controller). */
  .sw-debug {
    position: fixed;
    inset-block-end: 0;
    inset-inline: 0;
    z-index: var(--z-popup, 1000);
    max-block-size: 80vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--block-space-half) var(--inline-space);
    background: var(--color-ink);
    color: var(--color-canvas);
    font-size: var(--text-small);
    opacity: 0.92;
  }

  .sw-debug pre {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
  }
}