.wpsct-wrap {
--wpsct-border: #dbe3df;
--wpsct-bg: #fff;
--wpsct-soft: #f4f8f5;
--wpsct-text: #111;
--wpsct-muted: #66736c;
--wpsct-accent: #156327;
color: var(--wpsct-text);
font-size: 15px;
}
.wpsct-title {
margin: 0 0 14px;
}
.wpsct-toolbar {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 14px;
margin: 0 0 16px;
flex-wrap: wrap;
}
.wpsct-search-label {
display: grid;
gap: 6px;
font-weight: 700;
}
.wpsct-search {
width: min(520px, 82vw);
border: 1px solid var(--wpsct-border);
background: #fff;
padding: 12px 13px;
border-radius: 0;
font: inherit;
outline: none;
}
.wpsct-search:focus {
border-color: var(--wpsct-accent);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--wpsct-accent) 18%, transparent);
}
.wpsct-actions {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
}
.wpsct-count {
color: var(--wpsct-muted);
font-size: 0.92em;
}
.wpsct-download,
.wpsct-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 36px;
padding: 8px 12px;
background: var(--wpsct-accent);
color: #fff !important;
text-decoration: none !important;
font-weight: 700;
border: 1px solid var(--wpsct-accent);
border-radius: 0;
line-height: 1.1;
white-space: nowrap;
}
.wpsct-download:hover,
.wpsct-btn:hover {
filter: brightness(0.94);
}
.wpsct-table-scroll {
overflow-x: auto;
border: 1px solid var(--wpsct-border);
background: var(--wpsct-bg);
}
.wpsct-table {
width: 100%;
border-collapse: collapse;
min-width: 920px;
}
.wpsct-table th,
.wpsct-table td {
border-bottom: 1px solid var(--wpsct-border);
padding: 11px 12px;
vertical-align: top;
text-align: left;
}
.wpsct-table th {
background: var(--wpsct-soft);
font-weight: 800;
position: sticky;
top: 0;
z-index: 1;
}
.wpsct-sort {
appearance: none;
border: 0;
background: transparent;
color: inherit;
cursor: pointer;
font: inherit;
font-weight: 800;
padding: 0 18px 0 0;
position: relative;
text-align: left;
}
.wpsct-sort::after {
content: "↕";
position: absolute;
right: 0;
color: var(--wpsct-muted);
}
.wpsct-sort[aria-sort="ascending"]::after {
content: "↑";
color: var(--wpsct-accent);
}
.wpsct-sort[aria-sort="descending"]::after {
content: "↓";
color: var(--wpsct-accent);
}
.wpsct-table tr[hidden],
.wpsct-no-results[hidden] {
display: none !important;
}
.wpsct-table tbody tr:hover {
background: #fafcfb;
}
.wpsct-empty {
color: #9aa39e;
}
.wpsct-no-results {
margin: 12px 0 0;
color: var(--wpsct-muted);
}
@media (max-width: 760px) {
.wpsct-toolbar,
.wpsct-actions {
align-items: stretch;
width: 100%;
}
.wpsct-search-label,
.wpsct-search,
.wpsct-download {
width: 100%;
}
.wpsct-table-scroll {
overflow: visible;
border: 0;
background: transparent;
}
.wpsct-table {
min-width: 0;
border-collapse: separate;
border-spacing: 0 12px;
}
.wpsct-table thead {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.wpsct-table,
.wpsct-table tbody,
.wpsct-table tr,
.wpsct-table td {
display: block;
width: 100%;
}
.wpsct-table tr {
border: 1px solid var(--wpsct-border);
background: #fff;
padding: 8px 10px;
}
.wpsct-table td {
border: 0;
padding: 9px 0;
}
.wpsct-table td::before {
content: attr(data-label);
display: block;
margin-bottom: 4px;
color: var(--wpsct-muted);
font-size: 0.82em;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.03em;
}
}