/* Sales hub (saleshub.js) tabs, plus the Sales to confirm additions (sales.js). Uses the portal --sh-* tokens. */
.sh-root { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.sh-tabs { display: flex; gap: 6px; flex-wrap: wrap; position: sticky; top: 0; z-index: 2; padding: 4px 0; background: var(--sh-surface, transparent); }
.sh-tab { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px; border: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; background: var(--sh-surface-container); color: var(--sh-on-surface-variant); }
.sh-tab .material-symbols-outlined { font-size: 18px; }
.sh-tab.on { background: var(--sh-primary-container); color: var(--sh-on-primary-container); }
.sh-badge { min-width: 20px; padding: 1px 6px; border-radius: 999px; font-size: 11px; line-height: 16px; text-align: center; background: var(--sh-error); color: #fff; }
.sh-pane[hidden] { display: none; }

/* Sales to confirm */
.sb-evs { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 4px; }
.sb-ev { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--sh-on-surface-variant); text-decoration: none; }
a.sb-ev:hover { color: var(--sh-on-surface); text-decoration: underline; }
.sb-ev .material-symbols-outlined, .sb-note .material-symbols-outlined { font-size: 16px; }
.sb-note { display: flex; gap: 6px; align-items: flex-start; }
.sb-sale.overdue { box-shadow: var(--sh-shadow), inset 4px 0 0 #d98a00; }
.sb-sale-hd { align-items: flex-start; }
.sb-pick { display: flex; align-items: center; padding: 6px 10px 0 0; cursor: pointer; }
.sb-pick input { width: 18px; height: 18px; cursor: pointer; }
.sb-tools { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.sb-search { flex: 1 1 220px; min-width: 0; }
.sb-sel { flex: 0 0 auto; max-width: 220px; }
.sb-bulk { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.sb-bulk label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; cursor: pointer; }
.sb-ask { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.sb-ask label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: var(--sh-on-surface-variant); }
.sb-ask textarea { resize: vertical; font-weight: 400; }
.sb-ask-b { display: flex; gap: 8px; }
.sb-ltable { width: 100%; }
.sb-lrow { cursor: pointer; }
.sb-lrow:hover td { background: var(--sh-surface); }
.sb-ldetail { padding: 0 !important; background: var(--sh-surface); }
.sb-ldetail .sb-sale { margin: 8px; }
@media (max-width: 640px) { .sh-tab span:not(.material-symbols-outlined):not(.sh-badge) { display: none; } .sh-tab.on span:not(.material-symbols-outlined):not(.sh-badge) { display: inline; } }