/* AuDHD staging additions — audhd-shell
   Shell-level UI: home-switcher option subtitle, global triage chip strip
   variant. Loaded after audhd-overview.css; overrides apply.
   Lives in web-staging only; never deployed to prod. */


/* ── T3.10 — Home dropdown option subtitle ─────────────────────────────
   Each dropdown option now renders a two-line layout: home name (primary)
   + location/service-count subtitle (secondary). Re-stacks the existing
   single-line `.home-dropdown-option` flex row by introducing an inner
   `.home-dropdown-option-copy` column. The check icon stays on the right.

   Object-permanence hint for users with similar-sounding home names
   ("Casa Joro" vs "Casa Luma"): the location anchors each option. */
.home-dropdown-option-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.home-dropdown-option-copy .home-dropdown-option-name {
    /* Override the original flex:1 — the parent column owns sizing now. */
    flex: 0 0 auto;
}

.home-dropdown-option-meta {
    color: var(--color-text-muted, rgba(230, 236, 242, 0.55));
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ── T3.10 — Mobile home sheet meta lines ──────────────────────────────
   The sheet now stacks: name → location/services → state ("Actief" /
   "Overschakelen"). Tighten the second meta row so the trio reads as a
   single block, not three separate paragraphs. */
.home-sheet-item-meta--state {
    color: var(--color-text-soft, rgba(230, 236, 242, 0.7));
    font-size: 0.78rem;
    font-weight: 600;
}


/* ── T3.12 — Global triage chip strip (shell variant) ──────────────────
   Reuses .ah-triage-strip / .ah-triage-chip from audhd-overview.css for
   the per-chip styling. The shell-mounted variant adds breathing room
   above and a subtle separator from the page content below.

   Hidden on `/` via Vue v-if (Overview owns its own strip there).

   Why margin-top instead of padding-top: page components own their own
   top spacing. A tall margin-top here harmonizes the strip with both
   the desktop hero rows and the mobile topbar without intruding on
   page-internal layout. */
.ah-triage-strip--shell {
    margin: 0 0 1rem 0;
    padding: 0.6rem 1rem 0;
}

@media (min-width: 769px) {
    .ah-triage-strip--shell {
        /* Desktop: align to the page gutter so chips line up with the
           hero row beneath. Mobile keeps the tighter inset above. */
        padding: 0.75rem 1.5rem 0;
    }
}