/**
 * Mechanc — Product Table & List Builder skin.
 *
 * The plugin ships a light-only table: near-white cells, black text, white
 * filter chrome. On the dark default that renders as a white slab in the middle
 * of the page.
 *
 * Everything here is written against design-system tokens rather than literal
 * colours, so the table follows whichever theme is active instead of needing a
 * second dark-mode copy. Values mirror `.dtable` in design-system.css (the
 * mockup's own data-table).
 *
 * ──────── On the !important ────────
 * The plugin serves ~239 KB of CSS, styles rows through per-instance generated
 * classes (`.wcpt-1775108415`), and sets the quantity stepper's background
 * inline from its table builder. Those cannot be outranked by authoring a
 * higher-specificity selector, because the generated class names change when
 * the table is rebuilt. Overriding is the only stable option here.
 *
 * ──────── Lifespan ────────
 * Deliberately a stopgap. The plan is WooCommerce Product Table PRO plus the
 * grid extension and a filter plugin, to get the list/grid toggle from
 * complete.html. Expect to replace this file wholesale at that point — it is
 * scoped entirely under `.wcpt`, so deleting it leaves nothing behind.
 */

/* ──────── Root ────────
   The plugin's chrome inherits black from its own reset; give the whole
   subtree the design's body colour so anything not restated below is already
   close, and only the exceptions need naming. */
.wcpt {
	color: var(--text-secondary);
}

/* ──────── Table shell ────────
   The design has no table surface of its own: rows sit directly on the page
   and are separated by rules, so the cells go transparent rather than being
   repainted a dark colour. That is also what keeps this working in light mode. */
.wcpt .wcpt-table {
	background: transparent !important;
	border-collapse: separate;
	border-spacing: 0;
}

.wcpt .wcpt-heading {
	background: var(--pulse) !important;
	color: var(--accent-cyan) !important;
	border-bottom: 1px solid var(--border-accent) !important;
	font-family: var(--font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	white-space: nowrap;
}

.wcpt .wcpt-heading .wcpt-text {
	color: inherit !important;
}

.wcpt .wcpt-cell {
	background: transparent !important;
	color: var(--text-secondary) !important;
	border-bottom: 1px solid var(--border) !important;
	vertical-align: middle;
}

.wcpt .wcpt-row:hover .wcpt-cell {
	background: var(--bg-card-hover) !important;
}

.wcpt .wcpt-row:last-child .wcpt-cell {
	border-bottom: none !important;
}

/* Product names already resolve to the accent through inheritance; state it so
   a plugin update cannot quietly take it back. */
.wcpt .wcpt-cell a {
	color: var(--accent-cyan);
}

.wcpt .wcpt-cell a:hover {
	color: var(--text-primary);
}

.wcpt .wcpt-price,
.wcpt .wcpt-amount,
.wcpt .wcpt-currency,
.wcpt .wcpt-regular-price {
	color: var(--text-primary) !important;
	font-family: var(--font-mono);
}

/* ──────── Filter, sort and pagination chrome ────────
   Cards rather than transparent: these are controls, and the design gives
   controls a surface to sit on. */
.wcpt .wcpt-filter-heading,
.wcpt .wcpt-clear-filter,
.wcpt .wcpt-clear-filters-wrapper,
.wcpt .wcpt-selected-filter,
.wcpt .wcpt-dropdown,
.wcpt .wcpt-dropdown-sub-menu,
.wcpt .wcpt-pagination,
.wcpt .wcpt-active {
	background: var(--bg-card) !important;
	color: var(--text-secondary) !important;
	border-color: var(--border) !important;
}

.wcpt .wcpt-dropdown-option {
	color: var(--text-secondary) !important;
}

.wcpt .wcpt-dropdown-option:hover {
	background: var(--bg-card-hover) !important;
	color: var(--text-primary) !important;
}

.wcpt .wcpt-result-count,
.wcpt .wcpt-result-message,
.wcpt .wcpt-filter-label,
.wcpt .wcpt-filter-row,
.wcpt .wcpt-hr-parent-term {
	color: var(--text-secondary) !important;
}

.wcpt .wcpt-icon,
.wcpt .wcpt-feather-icon,
.wcpt .wcpt-pagination-chevron {
	color: currentColor !important;
}

/* ──────── Quantity stepper ────────
   Background is set inline by the table builder, hence the override. */
.wcpt .wcpt-quantity {
	background: var(--bg-deep) !important;
	border: 1px solid var(--border) !important;
	color: var(--text-primary) !important;
}

.wcpt .wcpt-quantity input,
.wcpt .wcpt-qty-controller {
	background: transparent !important;
	color: var(--text-primary) !important;
	border-color: var(--border) !important;
}

/* ──────── Product thumbnails ────────
   The catalogue photographs are cut out on white. On the dark theme they read
   as bright squares, so give them the same rounded tile the design uses for
   product imagery instead of letting them float. */
.wcpt .wcpt-product-image-wrapper img {
	border-radius: var(--radius);
	background: var(--bg-card);
}

/* ──────── Lite upsell notice ────────
   Admin-only, and it carries its own inline `background:#f0f6fc`. It goes away
   with PRO; until then it should not be a white slab on a dark page. */
.wcpt-lite-archive-admin-notice {
	background: var(--bg-card) !important;
	border-left-color: var(--accent-cyan) !important;
	color: var(--text-secondary) !important;
	border-radius: var(--radius);
}

.wcpt-lite-archive-admin-notice strong {
	color: var(--text-primary);
}

.wcpt-lite-archive-admin-notice a {
	color: var(--accent-cyan);
}