/* ============================================================================
   Hub button family (APP-79 wave 5, findings #16 and #18)

   ONE secondary-button look for every toolbar, taken from the Dashboard header
   (.dmod-hbtn): surface pill, hairline border, the shared control radius, bold
   label, mint count badge with dark text. Conversations, Handovers, Support and
   the Dashboard's own Recent Conversations strip all resolve to it, either by
   carrying .hub-btn or, where a page's ids and JS hooks are welded to older
   classes, by the scoped overrides in section 2.
   ========================================================================== */

/* ---- 1. the primitive ---------------------------------------------------- */
.hub-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.54688rem;
    font: inherit;
    font-size: 0.97656rem;
    font-weight: var(--hub-weight-strong);
    line-height: 1.2;
    padding: 0.625rem 1.09375rem;
    border-radius: var(--hub-ctl-radius);
    border: 0.07813rem solid var(--hub-hairline);
    background: var(--surface);
    color: var(--text-primary);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.hub-btn:hover { background: var(--surface-hover); color: var(--text-primary); text-decoration: none; }
/* focus ring: the shared one in theme.css (APP-79 S14) */
.hub-btn i, .hub-btn svg { font-size: 1.01563rem; line-height: 1; }

/* icon-only: a square of the same height */
.hub-btn--icon { width: 2.5rem; height: 2.5rem; padding: 0; }

/* the one filled button per toolbar (View All): brand mint, dark label */
.hub-btn--primary { background: var(--color-primary); border-color: transparent; color: var(--text-primary); }
.hub-btn--primary:hover { background: var(--color-primary); filter: brightness(0.96); }

/* count badge inside a button */
.hub-count {
    background: var(--color-primary);
    color: var(--text-primary);
    font-size: 0.78125rem;
    font-weight: var(--hub-weight-heavy);
    border-radius: 999px;
    padding: 0.07813rem 0.54688rem;
    line-height: 1.4;
}

/* ---- 2. pages whose controls keep their old class names ------------------- */

/* Data Explorer top bar: Legend and Filters are .hub-btn; the count badge takes the same
   constant mint and ink as the Conversations and Dashboard filter badges. */
.health-top-bar .hub-count {
    background: var(--hub-mint);
    color: var(--hub-mint-ink);
}

/* Conversations toolbar: Filters, Sort, Export, per-page select. */
.search-controls .filter-button,
.search-controls .export-button,
.search-controls #limit-select {
    height: auto;
    padding: 0.625rem 1.09375rem;
    border-radius: var(--hub-ctl-radius);
    border: 0.07813rem solid var(--hub-hairline);
    background: var(--surface);
    color: var(--text-primary);
    font-size: 0.97656rem;
    font-weight: var(--hub-weight-strong);
    box-shadow: none;
}
/* The background shorthand above also cleared the select's own arrow, so "100 per page" read as
   a label. Put a chevron back, drawn like the Filter chevron on Handovers. */
.search-controls #limit-select {
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%231a1a1a' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='M3.5 6l4.5 4.5L12.5 6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.9375rem center;
    background-size: 0.875rem;
}
[data-theme="dark"] .search-controls #limit-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23f8f9fa' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='M3.5 6l4.5 4.5L12.5 6'/%3e%3c/svg%3e");
}
.search-controls .filter-button:hover,
.search-controls .export-button:not(:disabled):hover,
.search-controls #limit-select:hover { background-color: var(--surface-hover); border-color: var(--hub-hairline); color: var(--text-primary); cursor: pointer; }
.search-controls .filter-button i { color: var(--text-primary); }
.search-controls .filter-count-badge {
    /* S3: same constant mint + constant ink as the Dashboard's .dmod-count and the Handover
       badge, at the same weight, so one badge does not change colour between pages. */
    background: var(--hub-mint);
    color: var(--hub-mint-ink);
    font-weight: var(--hub-weight-heavy);
    border-radius: 999px;
    padding: 0.07813rem 0.54688rem;
}

/* Handovers toolbar: the icon buttons in the header group and the grey filled Filter /
   Knowledge buttons (the escalated count moved under the title, handover.css).
   LFLOW-1322: the dialer button (#handover-outbound-toggle) belongs to the same group. It
   shipped without this rule in 1.3.74 and so kept the round 2.25rem shape handover.css
   gives it, next to three squarish 2.5rem neighbours. A button added to that header group
   needs its id here, or it will not match the others. */
#handover-outbound-toggle,
#handover-sound-toggle,
#handover-dashboard-toggle,
#handover-refresh-btn {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--hub-ctl-radius);
    background: var(--surface);
    border: 0.07813rem solid var(--hub-hairline);
}
#handover-refresh-btn::after { border-radius: inherit; }   /* the sync arc follows the corner */
/* The id rule above out-ranks handover.css, so restate the "click once to allow sound"
   amber outline (LFLOW-1146) at the same specificity. */
#handover-sound-toggle.needs-gesture { border-color: #b7791f; }
[data-theme="dark"] #handover-sound-toggle.needs-gesture { border-color: #fbbf24; }
/* Same reason, for the dialer's "a call is running" accent: the panel can be closed during
   a call, and the button is then the only sign that one is still up. */
#handover-outbound-toggle.is-on { border-color: var(--color-primary); }
.toolbar-actions .filter-btn.filter-trigger,
.filter-btn.knowledge-browse-trigger {
    background: var(--surface);
    border: 0.07813rem solid var(--hub-hairline);
    border-radius: var(--hub-ctl-radius);
    padding: 0.625rem 1.09375rem;
    font-size: 0.97656rem;
    font-weight: var(--hub-weight-strong);
    color: var(--text-primary);
}
[data-theme="dark"] .toolbar-actions .filter-btn.filter-trigger,
[data-theme="dark"] .filter-btn.knowledge-browse-trigger {
    background: var(--surface);
    border-color: var(--hub-hairline);
    color: var(--text-primary);
}
.toolbar-actions .filter-btn.filter-trigger:hover,
.filter-btn.knowledge-browse-trigger:hover { background: var(--surface-hover); }
/* APP-79 #18: icon + label like Filter beside it, packed from the left rather than
   spread across the button's 120px minimum by .filter-btn's space-between. */
.filter-btn.knowledge-browse-trigger { justify-content: flex-start; gap: 0.625rem; }

/* Support: the two filter dropdowns are the shared multi-select; its trigger takes
   the button look (the page had native OS selects, a fourth dropdown style). */
.support-filter-controls .custom-multiselect { width: auto; min-width: 12rem; }
.support-filter-controls .custom-multiselect-trigger {
    padding: 0.625rem 2.25rem 0.625rem 1.09375rem;
    border-radius: var(--hub-ctl-radius);
    border: 0.07813rem solid var(--hub-hairline);
    background-color: var(--surface);
    color: var(--text-primary);
    font-size: 0.97656rem;
    font-weight: var(--hub-weight-strong);
    line-height: 1.2;
}
.support-filter-controls .custom-multiselect-trigger:hover { background-color: var(--surface-hover); border-color: var(--hub-hairline); }