/* nrTable (assets/js/nr-table.js): one toolkit for the portal's tables.
   A toolbar above the table (search pill, filter dropdowns, "Showing x–y of z", Show
   per page, Download CSV), sortable column headers with a caret, a sticky gradient
   header inside a scrolling card, loading dimming, and the marketplace pager under it.
   The same vocabulary as the Call Logs tab: Poppins, brand blue #4260CB, pill inputs,
   soft dropdown panels. Every class starts with nt-. */

.nt-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid #eef0f8; font-family: 'Poppins', sans-serif; }
.nt-toolbar__left, .nt-toolbar__right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.nt-toolbar__right { margin-left: auto; }

/* Search */
.nt-search { display: flex; align-items: center; gap: 10px; height: 42px; width: 260px; max-width: 100%; padding: 0 14px; border: 1.5px solid #e3e8f5; border-radius: 30px; background: #fff; color: #8c94b0; transition: border-color .15s; }
.nt-search:focus-within { border-color: #4260CB; }
.nt-search svg { width: 15px; height: 15px; flex-shrink: 0; stroke-width: 2.5; }
.nt-search input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: 'Poppins', sans-serif; font-size: 14px; color: #222328; }
.nt-search input::placeholder { color: #9aa3bd; }
.nt-search__clear { border: none; background: transparent; color: #8c94b0; cursor: pointer; padding: 0; display: none; line-height: 1; font-size: 16px; }
.nt-search.has-value .nt-search__clear { display: inline; }

/* Dropdowns (filters, Show) */
.nt-dd { position: relative; }
.nt-dd__btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; height: 42px; min-width: 0; padding: 0 14px; border: 1.5px solid #e3e8f5; border-radius: 30px; background: #fff; cursor: pointer; font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 500; color: #222328; white-space: nowrap; transition: border-color .15s, background .15s; }
.nt-dd__btn:hover { border-color: #c7d2f5; }
.nt-dd.is-set .nt-dd__btn { border-color: #4260CB; color: #4260CB; }
.nt-dd.open .nt-dd__btn { border-color: #4260CB; }
.nt-dd__label { overflow: hidden; text-overflow: ellipsis; }
.nt-dd__caret { display: inline-flex; color: #8c94b0; transition: transform .2s; }
.nt-dd__caret svg { width: 11px; height: 7px; }
.nt-dd.open .nt-dd__caret { transform: rotate(180deg); }
.nt-dd__panel { display: none; position: absolute; top: calc(100% + 8px); left: 0; min-width: 100%; z-index: 40; background: #fff; border-radius: 14px; box-shadow: 0 14px 44px rgba(42, 82, 190, .2); padding: 6px; max-height: 300px; overflow: auto; }
.nt-dd--right .nt-dd__panel { left: auto; right: 0; }
/* At the foot of a card the panel opens upward, so a card that clips its overflow cannot cut it */
.nt-dd--up .nt-dd__panel { top: auto; bottom: calc(100% + 8px); }
.nt-dd.open .nt-dd__panel { display: block; }
.nt-dd__opt { display: block; width: 100%; text-align: left; border: none; background: transparent; cursor: pointer; padding: 9px 14px; border-radius: 9px; white-space: nowrap; font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 500; color: #333; }
.nt-dd__opt:hover { background: #f0f4ff; }
.nt-dd__opt.is-active { background: rgba(66, 96, 203, .1); color: #4260CB; font-weight: 600; }
.nt-dd__opt small { display: block; font-weight: 400; font-size: 12px; color: #8c94b0; }

/* View pills with counts (the Sell sheet's) */
.nt-views { display: inline-flex; padding: 4px; border-radius: 999px; background: #eef3ff; gap: 2px; }
.nt-view { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: none; border-radius: 999px; background: transparent; cursor: pointer; font-family: 'Poppins', sans-serif; font-size: 13.5px; font-weight: 500; color: #4260CB; white-space: nowrap; transition: background .15s, color .15s; }
.nt-view.is-active { background: #fff; color: #222328; font-weight: 600; box-shadow: 0 2px 10px rgba(42, 82, 190, .12); }
.nt-view__n { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #4260CB; color: #fff; font-size: 11.5px; font-weight: 600; }
.nt-view.is-active .nt-view__n { background: #eef2ff; color: #4260CB; }

/* The Columns picker */
.nt-cols { position: relative; }
.nt-cols__panel { display: none; position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; min-width: 200px; background: #fff; border-radius: 14px; box-shadow: 0 14px 44px rgba(42, 82, 190, .2); padding: 8px; }
.nt-cols.open .nt-cols__panel { display: block; }
.nt-cols__opt { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; font-size: 14px; color: #333; cursor: pointer; white-space: nowrap; }
.nt-cols__opt:hover { background: #f0f4ff; }
.nt-cols__opt input { width: 16px; height: 16px; accent-color: #4260CB; }
.nt-hidden { display: none !important; }
/* Compact rows */
.nt-compact.is-on { background: #eef2ff; border-color: #4260CB; }
.nt-table--compact tbody td { padding-top: 6px !important; padding-bottom: 6px !important; }
/* The copy icon on a number, shown on hover */
.nt-copy { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-left: 4px; border: none; border-radius: 50%; background: transparent; color: #8c94b0; cursor: pointer; vertical-align: middle; opacity: 0; transition: opacity .15s, background .15s, color .15s; }
.nt-copy svg { width: 13px; height: 13px; stroke-width: 2.6; }
tr:hover .nt-copy, .nt-copy:focus-visible { opacity: 1; }
.nt-copy:hover { background: #eef2ff; color: #4260CB; }
/* "?" beside a header: the explanation on hover or focus */
.nt-help { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; margin-left: 3px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .7); color: #fff; font-size: 10px; font-weight: 700; cursor: help; vertical-align: 1px; }
.nt-help::after { content: attr(data-help); position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%); width: 240px; padding: 10px 12px; border-radius: 10px; background: #222328; color: #fff; font-size: 12.5px; font-weight: 400; line-height: 1.45; text-transform: none; letter-spacing: 0; white-space: normal; box-shadow: 0 10px 30px rgba(21, 32, 80, .25); opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 30; }
.nt-help:hover::after, .nt-help:focus::after { opacity: 1; }
th:last-child .nt-help::after { left: auto; right: 0; transform: none; }

/* Showing x–y of z, the Show per page, the buttons */
.nt-showing { font-size: 13.5px; color: #6b7391; white-space: nowrap; }
.nt-showing b { color: #222328; font-weight: 600; }
.nt-show { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: #8c94b0; }
.nt-show .nt-dd__btn { height: 38px; min-width: 76px; padding: 0 12px; }
.nt-btn { display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 16px; border: 1px solid #4260CB; border-radius: 30px; background: #fff; color: #4260CB; cursor: pointer; text-decoration: none; font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 500; white-space: nowrap; transition: background .15s; }
.nt-btn:hover { background: #f0f4ff; color: #4260CB; }
.nt-btn svg { width: 16px; height: 16px; stroke-width: 2.5; }
.nt-btn--ghost { border-color: transparent; color: #4260CB; padding: 0 10px; }
.nt-reset { border: none; background: transparent; color: #4260CB; font-family: 'Poppins', sans-serif; font-size: 13.5px; font-weight: 600; cursor: pointer; padding: 0; white-space: nowrap; }
.nt-reset:hover { text-decoration: underline; }
.nt-reset[hidden] { display: none; }

/* Sortable headers: a caret that shows on hover and stays on the sorted column */
.nt-scroll { overflow: auto; }
.nt-scroll thead th { position: sticky; top: 0; z-index: 2; }
th.nt-sortable { cursor: pointer; user-select: none; }
th.nt-sortable .nt-th { display: inline-flex; align-items: center; gap: 6px; }
th.nt-sortable .nt-th svg { width: 11px; height: 11px; opacity: 0; transition: opacity .15s, transform .15s; }
th.nt-sortable:hover .nt-th svg { opacity: .55; }
th.nt-sortable.is-sorted .nt-th svg { opacity: 1; }
th.nt-sortable.is-sorted.is-asc .nt-th svg { transform: rotate(180deg); }

/* States */
.nt-loading tbody { opacity: .55; transition: opacity .15s; }
.nt-empty { padding: 36px 16px; text-align: center; color: #8c94b0; font-size: 14px; }
.nt-empty b { display: block; color: #222328; font-weight: 600; margin-bottom: 4px; }
.nt-error { margin: 14px 18px; padding: 12px 14px; border-radius: 12px; background: #fdeceb; color: #b3261e; font-size: 14px; }
.nt-error[hidden] { display: none; }
/* Foot: Showing · pager · Show, then the tip */
.nt-foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 14px 18px; border-top: 1px solid #eef0f8; font-family: 'Poppins', sans-serif; }
/* Each piece keeps its column even when the pager is hidden (one page), so Show stays at the right */
.nt-foot .nt-showing { white-space: normal; grid-column: 1; }
.nt-foot .nt-pager { margin: 0; padding: 0; border: 0; grid-column: 2; }
.nt-foot .nt-pager .nr-pager__info { display: none; }
.nt-foot .nt-pager[hidden] { display: block; visibility: hidden; }
.nt-foot .nt-show { justify-self: end; grid-column: 3; }
.nt-tip { margin: 0; padding: 0 18px 14px; font-size: 12.5px; color: #8c94b0; font-family: 'Poppins', sans-serif; }
.nt-tip kbd { display: inline-block; padding: 1px 6px; border-radius: 5px; background: #eef2ff; color: #4260CB; font-family: 'Poppins', sans-serif; font-size: 11.5px; font-weight: 600; }
.nt-pager[hidden] { display: none; }

@media (max-width: 767.98px) {
	.nt-toolbar { padding: 12px 14px; }
	.nt-search { width: 100%; }
	.nt-toolbar__left { width: 100%; }
	.nt-toolbar__right { width: 100%; justify-content: space-between; margin-left: 0; }
	.nt-showing { width: 100%; }
	.nt-scroll thead th { position: static; }
	.nt-views { width: 100%; justify-content: space-between; }
	.nt-view { flex: 1; justify-content: center; padding: 0 6px; font-size: 12.5px; }
	.nt-foot { grid-template-columns: 1fr; justify-items: center; padding: 12px 14px; }
	.nt-foot .nt-showing { text-align: center; grid-column: 1; }
	.nt-foot .nt-pager { grid-column: 1; }
	.nt-foot .nt-show { justify-self: center; grid-column: 1; }
	.nt-copy { opacity: 1; }
}

/* Inside the standalone portal cards (Orders, Offer Status, My Requests, Profile) */
.po-card .nt-toolbar { padding: 0 0 16px; border-bottom: 0; }
.po-card .nt-foot { padding: 16px 0 0; border-top: 0; }
.po-card .nt-tip { padding: 10px 0 0; }
.pp-table-wrap .nt-toolbar { padding: 14px 16px; }
.pp-table-wrap .nt-foot { padding: 12px 16px; }
.pp-table-wrap .nt-tip { padding: 0 16px 12px; }