/* tp-ui.css (10/23/2026): the three shared page components, usable in both looks (linked from TPMaster.master and
   TPMasterV2.master). Class based, not scoped to body.tp-v2, so a page keeps the same top in the classic look and in the
   new look. Tokens come from tp-tokens.css (--tp-green and friends) with fallbacks.
     1. Page header   .tp-ph    h1, one muted line under it (the count), primary action on the right, ghost secondaries
     2. Toolbar       .tp-tb    ONE card, ONE row (wraps on phones): search with icon, selects, segmented pills, Clear link
     3. Pager         .tp-pg    bottom only: "Showing 1-5 of 110" and Previous / Next
   Plus the buttons they use (.tp-btn) and the segmented toggle (.tp-seg, moved here from tp-dms.css). */

/* buttons */
.tp-btn, .tp-btn:visited, a.tp-btn, a.tp-btn:visited, input.tp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 6px; font-weight: 600; font-size: 14px; padding: 8px 16px; border: 1px solid var(--tp-green, #10b981); background: var(--tp-green, #10b981); color: #fff; cursor: pointer; text-decoration: none; line-height: 1.3; white-space: nowrap; font-family: inherit; text-shadow: none; box-shadow: none; }
.tp-btn:hover, .tp-btn:focus, a.tp-btn:hover, a.tp-btn:focus { background: var(--tp-green-dark, #059669); border-color: var(--tp-green-dark, #059669); color: #fff; text-decoration: none; outline: none; }
.tp-btn.ghost, .tp-btn.ghost:visited, a.tp-btn.ghost, a.tp-btn.ghost:visited, input.tp-btn.ghost { background: #fff; border-color: #e2e8f0; color: #334155; }
.tp-btn.ghost:hover, .tp-btn.ghost:focus, a.tp-btn.ghost:hover, a.tp-btn.ghost:focus { background: #fff; border-color: #2d80d2; color: #2d80d2; }
.tp-btn.danger, .tp-btn.danger:visited, a.tp-btn.danger { background: #fff; border-color: #fecaca; color: #b91c1c; }
.tp-btn.danger:hover, .tp-btn.danger:focus, a.tp-btn.danger:hover { background: #fef2f2; border-color: #fca5a5; color: #991b1b; }
.tp-btn.sm, input.tp-btn.sm { padding: 5px 11px; font-size: 13px; }
.tp-btn.link, .tp-btn.link:visited, a.tp-btn.link { background: none; border-color: transparent; color: #2d80d2; padding: 4px 6px; }
.tp-btn.link:hover, .tp-btn.link:focus, a.tp-btn.link:hover { background: none; border-color: transparent; color: #1d5fa3; text-decoration: underline; }
.tp-btn.aspNetDisabled, .tp-btn[disabled], .tp-btn.aspNetDisabled:hover, .tp-btn[disabled]:hover { opacity: .45; pointer-events: none; cursor: default; }
.tp-hide { display: none !important; }
/* anything drawn on a green (primary) background is white, including fa icons that would inherit a link color */
.tp-btn:not(.ghost):not(.link):not(.danger) i, .tp-btn:not(.ghost):not(.link):not(.danger) .fa, .tp-btn:not(.ghost):not(.link):not(.danger) span, .tp-tb-go i, .tp-tb-go .fa, .tp-tb-go span, .tp-seg-btn.is-on i, .tp-seg-btn.is-on .fa, .tp-seg input.btn.btn-success, .tp-btn:not(.ghost):not(.link):not(.danger), a.tp-btn:not(.ghost):not(.link):not(.danger):hover { color: #fff !important; }

/* 1. page header */
.tp-ph { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; margin: 0 0 14px; }
.tp-ph-main { min-width: 0; flex: 1 1 320px; }
.tp-ph h1 { margin: 0; font-size: 26px; line-height: 1.2; color: #0f172a; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.tp-ph h1 i { color: var(--tp-green-dark, #059669); font-size: 22px; }
.tp-ph-sub { color: #64748b; font-size: 14px; margin-top: 4px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.tp-ph-sub br { display: none; }
.tp-ph-sub b, .tp-ph-sub .tp-ph-num { color: #0f172a; font-weight: 700; }
.tp-ph-sub .tp-ph-hint { color: #2f6fae; font-weight: 600; } /* Company Lookup hint on an empty keyword search (10/25/2026) */
.tp-ph-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 2px; }

/* 2. toolbar: one card, one wrapping row */
.tp-tb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 14px; margin: 0 0 14px; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; box-shadow: 0 1px 3px rgba(0, 0, 0, .04); }
.tp-tb::before, .tp-tb::after { display: none; }
.tp-tb-search { position: relative; display: flex; align-items: center; flex: 1 1 240px; min-width: 200px; max-width: 420px; }
.tp-tb-search > i { position: absolute; left: 12px; color: #94a3b8; font-size: 14px; pointer-events: none; }
.tp-tb-search .tp-tb-input, .tp-tb-search input[type='text'] { width: 100%; height: 38px; padding: 7px 50px 7px 34px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 14px; color: #334155; background: #fff; box-shadow: none; font-family: inherit; margin: 0; }
.tp-tb-search .tp-tb-input:focus, .tp-tb-search input[type='text']:focus { outline: none; border-color: var(--tp-green, #10b981); box-shadow: 0 0 0 3px rgba(16, 185, 129, .16); }
.tp-tb-go, .tp-tb-go:visited { position: absolute; right: 0; top: 0; bottom: 0; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: auto; border-radius: 0 8px 8px 0; background: var(--tp-green, #10b981); color: #fff; font-size: 14px; line-height: 1; text-decoration: none; }
.tp-tb-go i { display: block; line-height: 1; }
.tp-tb-go:hover, .tp-tb-go:focus { background: var(--tp-green-dark, #059669); color: #fff; text-decoration: none; }
.tp-tb-select, select.tp-tb-select { height: 38px; padding: 6px 30px 6px 10px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 13.5px; color: #334155; background: #fff; box-shadow: none; font-family: inherit; margin: 0; min-width: 140px; max-width: 100%; }
.tp-tb-select:focus { outline: none; border-color: var(--tp-green, #10b981); box-shadow: 0 0 0 3px rgba(16, 185, 129, .16); }
.tp-tb-ic, .tp-tb-ic:visited { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; color: #64748b; font-size: 15px; text-decoration: none; }
.tp-tb-ic:hover, .tp-tb-ic:focus { border-color: #2d80d2; color: #2d80d2; text-decoration: none; }
.tp-tb-ic.is-on { border-color: var(--tp-green, #10b981); color: var(--tp-green-ink, #047857); background: var(--tp-green-soft, #ecfdf5); }
.tp-tb-group { display: inline-flex; align-items: center; gap: 4px; }
.tp-tb-clear, .tp-tb-clear:visited { color: #64748b; font-size: 13.5px; font-weight: 600; text-decoration: none; padding: 6px 4px; white-space: nowrap; }
.tp-tb-clear:hover, .tp-tb-clear:focus { color: #b91c1c; text-decoration: underline; }
.tp-tb-spacer { flex: 1 1 auto; }
.tp-tb-status { flex: 1 1 100%; font-size: 13px; color: #64748b; }
.tp-tb-status:empty { display: none; }

/* segmented toggle (Marketplace pill style); the LinkButtons keep their ids and handlers, code sets is-on / is-disabled */
.tp-seg { display: inline-flex; align-items: center; border: 1px solid #e2e8f0; border-radius: 999px; background: #f8fafc; padding: 3px; gap: 2px; }
.tp-seg-btn, .tp-seg-btn:visited { flex: 1 1 auto; text-align: center; padding: 6px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: #475569; text-decoration: none; line-height: 1.3; white-space: nowrap; }
.tp-seg-btn:hover, .tp-seg-btn:focus { color: #0f172a; background: #eef2f7; text-decoration: none; }
.tp-seg-btn.is-on, .tp-seg-btn.is-on:hover, .tp-seg-btn.is-on:focus { background: var(--tp-green, #10b981); color: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .12); }
.tp-seg-btn.is-on.is-archive, .tp-seg-btn.is-on.is-archive:hover { background: #c63939; }
.tp-seg-btn.is-disabled, .tp-seg-btn.is-disabled:hover, .tp-seg-btn.aspNetDisabled { color: #94a3b8; background: transparent; cursor: not-allowed; }
.tp-seg-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #64748b; margin: 0 0 6px 2px; }

/* 3. pager, bottom only */
.tp-pg { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0 6px; }
.tp-pg-text { color: #64748b; font-size: 13.5px; }
.tp-pg-text b { color: #0f172a; }
.tp-pg-btns { display: flex; gap: 8px; margin-left: auto; }

@media (max-width: 760px) {
    .tp-ph h1 { font-size: 22px; }
    .tp-tb { padding: 10px 12px; }
    .tp-tb-search { flex: 1 1 100%; max-width: none; }
    .tp-tb-select { flex: 1 1 140px; min-width: 0; }
    .tp-seg-btn { padding: 6px 10px; font-size: 13px; }
    .tp-pg-btns { margin-left: 0; width: 100%; justify-content: space-between; }
}

/* Handoff 31 item 2 (10/28/2026, Tim): every member page on the Marketplace grey. The new-look frames (body.tp-v2, body.tp-mp2)
   already paint #f8fafc; this covers the pages still on the classic master, where TPMaster.master adds tp-member for a signed-in
   member. The same token the Marketplace uses. */
body.tp-member { background: #f8fafc; }

/* 11/01/2026: the "Keep posting" box a read-only member (no-card trial over) sees on classic pages (profile.aspx) */
.tp-keep { border: 1px solid #fde68a; background: #fffbeb; border-radius: 12px; padding: 16px 18px; margin: 12px 0 18px; }
.tp-keep-head { display: flex; align-items: center; gap: 10px; font-size: 16px; color: #1f2a37; }
.tp-keep-ic { display: inline-flex; width: 28px; height: 28px; border-radius: 8px; background: #fef3c7; color: #b45309; align-items: center; justify-content: center; flex: none; }
.tp-keep p { margin: 8px 0 12px; color: #334155; font-size: 14.5px; line-height: 1.45; }
.tp-keep .btn.teal { background: #0d9488; border-color: #0d9488; color: #fff; }
.tp-keep .btn.teal:hover { background: #0f766e; color: #fff; }