/* ════════════════════════════════════════════════════
   apps/signals-all.css — the All-signals page and its sidebar entry (AB#13100)
   ════════════════════════════════════════════════════
   Its own sheet rather than more lines in signals.css, which is far past the
   600-line cap. The card itself is the shared control (controls/signal-card.css). */

/* ── The pane: a peer of #signal-home, #main-content and #signal-notifications;
   `_applyView` in main.js is the only thing that shows it. ── */
.signal-all {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.signal-all-page {
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column;
    gap: 14px;
    padding: 20px 24px;
    overflow: hidden;
}

.signal-all-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.signal-all-title {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}
.signal-all-count {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.signal-all-count:empty { display: none; }

/* ── Filters ── */
.signal-all-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.signal-all-search {
    flex: 1 1 200px;
    min-width: 160px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius, 8px);
    background: var(--bg-surface);
    color: var(--text-primary);
    font: inherit;
    font-size: 13px;
}
.signal-all-search:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
.signal-all-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.signal-all-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--bg-surface);
    color: var(--text-secondary);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.signal-all-chip:hover { background: var(--bg-hover); color: var(--text-primary); }
.signal-all-chip[aria-pressed="true"] {
    border-color: var(--accent);
    background: var(--accent-soft, var(--bg-hover));
    color: var(--text-primary);
}
.signal-all-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.signal-all-chip-icon { display: inline-flex; }
.signal-all-chip-icon svg { width: 13px; height: 13px; }
.signal-all-chip-count {
    min-width: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--bg-hover);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.signal-all-select {
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius, 8px);
    background: var(--bg-surface);
    color: var(--text-primary);
    font: inherit;
    font-size: 13px;
}
.signal-all-reset {
    height: 32px;
    padding: 0 10px;
    border: 0;
    border-radius: var(--radius, 8px);
    background: transparent;
    color: var(--accent);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}
.signal-all-reset:hover { background: var(--bg-hover); }
.signal-all-reset[hidden] { display: none; }

/* ── Body ── */
.signal-all-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.signal-all-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
    padding-bottom: 12px;
}
.signal-all-grid[hidden] { display: none; }
.signal-all-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 48px 16px;
    text-align: center;
}
.signal-all-state[hidden] { display: none; }
.signal-all-state-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}
.signal-all-state-desc {
    margin: 0 0 8px;
    font-size: 13px;
    color: var(--text-secondary);
}

@media (max-width: 720px) {
    .signal-all-page { padding: 14px 12px; }
    .signal-all-grid { grid-template-columns: 1fr; }
}

/* ── The sidebar's "All signals" entry under Recent (AB#13100): a divider,
   then a row styled as Chat's `.chat-sb-all-chats` so the two apps read alike. ── */
.signal-sidebar-divider {
    height: 1px;
    margin: 6px 8px 2px;
    border: 0;
    background: var(--border);
}
.signal-sidebar-all {
    display: flex;
    align-items: center;
    gap: 10px;
    width: calc(100% - 16px);
    margin: 4px 8px 0;
    padding: 9px 12px;
    border: none;
    border-radius: 8px;
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.signal-sidebar-all:hover { background: var(--bg-hover); color: var(--accent); }

/* The page this row leads to is the one on screen. Same treatment a selected
   tree row gets, so "where am I" reads the same way everywhere in this sidebar:
   the accent, and a surface that does not move on hover. Without it a reader who
   clicked here has a main pane that changed and a sidebar still pointing at the
   signal they were last in — which reads as a click that did not land. */
.signal-sidebar-all.is-active,
.signal-sidebar-all.is-active:hover {
    background: var(--bg-surface);
    color: var(--accent);
}
.signal-sidebar-all.is-active .signal-sidebar-all-icon { color: var(--accent); }
.signal-sidebar-all.is-active .signal-sidebar-all-count {
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent);
}
.signal-sidebar-all:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.signal-sidebar-all-icon {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--text-muted);
}
.signal-sidebar-all:hover .signal-sidebar-all-icon { color: var(--accent); }
.signal-sidebar-all-label { flex: 1; text-align: left; }
.signal-sidebar-all-count {
    flex-shrink: 0;
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 10px;
    background: var(--bg-hover);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    text-align: center;
}