/* ndevr-products-widget.css — the product DIRECTORY widget (toolbar, vendor groups, card grid, table).
   The product CARDS themselves are styled by ndevr-product-widget.css (this widget reuses .ndevr-product
   --hero verbatim); these rules only cover the directory chrome around them. Accent = --ndevr-accent,
   set on the root by the JS from the shortcode theme. */
/* Colors reference the --nd-* theme tokens from /shared/css/theme.css; every var() keeps the original dark literal as its fallback. */

.ndevr-products
{
	--ndevr-accent: var(--nd-accent-deep, #f2a900);          /* fallback accent for cards (a product's own default_color wins) */
	--ndevr-toolbar: var(--nd-accent-deep, #f2a900);         /* toolbar chrome accent (View/Grouping/Filter); set via `toolbar` attr */
	--ndevr-toolbar-on: var(--nd-accent-contrast, #232323);  /* readable text ON the toolbar accent (auto-set by the JS) */
	/* accent used AS TEXT (outlined buttons, links) — darkened in light mode for contrast, mirroring
	   the global --nd-accent-text rule. */
	--ndevr-ink: var(--ndevr-accent);
	color: var(--nd-text, #e8eaed);
	box-sizing: border-box;
}
html[data-theme="light"] .ndevr-products
{
	--ndevr-ink: color-mix(in srgb, var(--ndevr-accent) 68%, #221a06);
}
/* --ndevr-group-ink = the per-vendor brand color used AS TEXT. MUST be defined on the group section
   itself (where the JS sets --ndevr-group-accent): a custom property's var() chain is substituted on
   the element that DEFINES it, so declaring this on .ndevr-products would bake in the directory gold
   before the group's own accent exists, and the resolved value would inherit down. */
.ndevr-products__group { --ndevr-group-ink: var(--ndevr-group-accent, var(--ndevr-accent)); }
html[data-theme="light"] .ndevr-products__group
{
	--ndevr-group-ink: color-mix(in srgb, var(--ndevr-group-accent, var(--ndevr-accent)) 68%, #221a06);
}
.ndevr-products *, .ndevr-products *::before, .ndevr-products *::after { box-sizing: border-box; }
.ndevr-products__status { padding: 2rem 0; text-align: center; color: var(--nd-muted, rgba(255, 255, 255, 0.7)); }

/* ---- Toolbar ---- */
.ndevr-products__toolbar
{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 1.4rem;
	margin: 0 0 1rem;
}
.ndevr-products__ctl { display: flex; flex-direction: column; gap: 0.4rem; }
.ndevr-products__ctl-label
{
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--nd-muted, rgba(255, 255, 255, 0.55));
}

/* Segmented control (Cards/Table, Vendor/Category/Module) */
.ndevr-products__seg
{
	display: inline-flex;
	border: 1px solid var(--nd-border, rgba(255, 255, 255, 0.18));
	border-radius: 9px;
	overflow: hidden;
	background: var(--nd-tint-1, rgba(255, 255, 255, 0.03));
}
.ndevr-products__seg-btn
{
	appearance: none;
	border: none;
	background: transparent;
	color: var(--nd-text-soft, #c7ccd6);
	font: inherit;
	font-weight: 600;
	padding: 0.5rem 1rem;
	margin: 0;
	min-width: 0;
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
	transition: background 0.12s ease, color 0.12s ease;
}
.ndevr-products__seg-btn + .ndevr-products__seg-btn { border-left: 1px solid var(--nd-tint-2, rgba(255, 255, 255, 0.14)); }
.ndevr-products__seg-btn:hover { background: var(--nd-tint-1, rgba(255, 255, 255, 0.07)); }
.ndevr-products__seg-btn.is-on { background: var(--ndevr-toolbar); color: var(--ndevr-toolbar-on); }

/* Filter value chips */
.ndevr-products__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.6rem; }
.ndevr-products__chip
{
	appearance: none;
	font: inherit;
	font-size: 0.86rem;
	font-weight: 600;
	color: var(--nd-text-soft, #c7ccd6);
	background: var(--nd-tint-1, rgba(255, 255, 255, 0.05));
	border: 1px solid var(--nd-tint-2, rgba(255, 255, 255, 0.16));
	border-radius: 999px;
	padding: 0.32rem 0.85rem;
	margin: 0;
	min-width: 0;
	box-shadow: none;
	cursor: pointer;
	transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.ndevr-products__chip:hover { background: var(--nd-tint-2, rgba(255, 255, 255, 0.1)); }
.ndevr-products__chip.is-on { background: var(--ndevr-toolbar); color: var(--ndevr-toolbar-on); border-color: var(--ndevr-toolbar); }

/* ---- Vendor group ---- */
.ndevr-products__group { margin: 0 0 2.6rem; }
.ndevr-products__group-head
{
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0 0 0.9rem;
	margin: 0 0 1.4rem;
	/* per-vendor brand color (set on the group section); falls back to the directory accent. */
	border-bottom: 2px solid var(--ndevr-group-accent, var(--ndevr-accent));
	/* soft drop shadow under the separator rule so vendor sections read as distinct bands */
	box-shadow: 0 14px 16px -14px rgba(0, 0, 0, 0.5);
}
/* The logo may SHRINK (min-width:0 + flex-shrink) so a wide vendor lockup can never push the About
   button off-screen — it gets only as small as needed to keep About fully visible. */
/* drop-shadow (not box-shadow) so the shadow hugs the logo artwork's alpha, not its bounding box. */
.ndevr-products__group-logo { max-height: 50px; max-width: 210px; min-width: 0; flex: 0 1 auto; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.55)); }
.ndevr-products__group-name { font-size: 1.45rem; font-weight: 800; color: var(--nd-text-strong, #fff); min-width: 0; overflow-wrap: anywhere; }
.ndevr-products__group-info
{
	appearance: none;
	margin-left: auto;
	/* never shrink or wrap — the logo yields first so About always fits on its own line. */
	flex: 0 0 auto;
	white-space: nowrap;
	font: inherit;
	font-weight: 600;
	/* per-vendor brand color (set on the group section); falls back to the directory accent. */
	color: var(--ndevr-group-ink, var(--ndevr-group-accent, var(--ndevr-accent)));
	background: transparent;
	border: 1px solid var(--ndevr-group-ink, var(--ndevr-group-accent, var(--ndevr-accent)));
	border-radius: var(--nd-radius-sm, 8px);
	padding: 0.35rem 0.9rem;
	min-width: 0;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45);
	cursor: pointer;
}
.ndevr-products__group-info:hover { background: var(--nd-tint-1, rgba(255, 255, 255, 0.07)); }
/* Vendor-separator Edit (managers only). Matches the see-through "About" button: transparent fill with
   an accent outline + accent text. Right-aligned (margin-left:auto) so it sits at the far right. */
.ndevr-products__group-edit
{
	appearance: none;
	-webkit-appearance: none;
	margin-left: auto;
	flex: 0 0 auto;
	white-space: nowrap;
	font: inherit;
	font-weight: 600;
	color: var(--ndevr-group-ink, var(--ndevr-group-accent, var(--ndevr-accent)));
	background: transparent;
	background-image: none;
	border: 1px solid var(--ndevr-group-ink, var(--ndevr-group-accent, var(--ndevr-accent)));
	border-radius: var(--nd-radius-sm, 8px);
	padding: 0.35rem 0.9rem;
	min-width: 0;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45);
	cursor: pointer;
}
/* When an About button is present it already takes margin-left:auto; keep just a small gap before Edit. */
.ndevr-products__group-info + .ndevr-products__group-edit { margin-left: 0.5rem; }
.ndevr-products__group-edit:hover { background: var(--nd-tint-1, rgba(255, 255, 255, 0.07)); }

/* ---- Card grid (reuses .ndevr-product hero cards; equal-height per row via grid stretch) ---- */
.ndevr-products__grid
{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 1.5rem;
	align-items: stretch;
}

/* ---- Table layout ---- */
.ndevr-products__table-wrap { overflow-x: auto; border: 1px solid var(--nd-tint-2, rgba(255, 255, 255, 0.12)); border-radius: 10px; }
.ndevr-products__table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.ndevr-products__table th
{
	text-align: left;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--nd-muted, rgba(255, 255, 255, 0.6));
	padding: 0.7rem 1rem;
	background: var(--nd-tint-1, rgba(255, 255, 255, 0.04));
	border-bottom: 1px solid var(--nd-tint-2, rgba(255, 255, 255, 0.12));
}
.ndevr-products__table td
{
	padding: 0.8rem 1rem;
	border-bottom: 1px solid var(--nd-tint-1, rgba(255, 255, 255, 0.08));
	vertical-align: top;
	color: var(--nd-text-soft, #c7ccd6);
}
.ndevr-products__table tr:last-child td { border-bottom: none; }
.ndevr-products__table tbody tr:hover { background: var(--nd-tint-1, rgba(255, 255, 255, 0.03)); }
.ndevr-products__cell-name { min-width: 200px; }
.ndevr-products__name-link
{
	appearance: none;
	font: inherit;
	font-size: 1.02rem;
	font-weight: 700;
	color: var(--nd-text-strong, #fff);
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	min-width: 0;
	box-shadow: none;
	cursor: pointer;
	text-align: left;
}
.ndevr-products__name-link:hover { color: var(--ndevr-ink, var(--ndevr-accent)); }
.ndevr-products__cell-sub { font-size: 0.85rem; color: var(--nd-muted, rgba(255, 255, 255, 0.6)); margin-top: 0.2rem; max-width: 460px; }
/* "Owned" / "Manage" pills in the Product cell — match the card's corner badges (green = owned license,
   blue = manage permission; uppercase, leading glyph). Sit on their own line under the name + summary. */
.ndevr-products__badge
{
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	margin: 0.4rem 0.4rem 0 0;
	font-family: inherit;
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 999px;
	padding: 0.2rem 0.55rem;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: filter 0.12s ease, transform 0.12s ease;
}
.ndevr-products__badge:hover { filter: brightness(1.08); transform: translateY(-1px); }
.ndevr-products__badge:active { transform: translateY(0); }
.ndevr-products__badge:focus-visible { outline: 2px solid var(--nd-text-strong, #fff); outline-offset: 2px; }
.ndevr-products__owned  { background: var(--nd-owned, rgba(28, 160, 90, 0.92)); color: #eafff2; }
.ndevr-products__manage { background: var(--nd-manage, rgba(31, 124, 200, 0.92)); color: #eaf4ff; }
.ndevr-products__badge::before
{
	content: "";
	width: 0.9em; height: 0.9em;
	flex: 0 0 auto;
	background: currentColor;
}
.ndevr-products__owned::before
{
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ndevr-products__manage::before
{
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8zm9.4 4-2.1-.6a7.3 7.3 0 0 0-.6-1.5l1-1.9-1.7-1.7-1.9 1a7.3 7.3 0 0 0-1.5-.6L13.6 2h-3.2l-.6 2.1a7.3 7.3 0 0 0-1.5.6l-1.9-1L4.7 6.4l1 1.9a7.3 7.3 0 0 0-.6 1.5L3 10.4v3.2l2.1.6a7.3 7.3 0 0 0 .6 1.5l-1 1.9 1.7 1.7 1.9-1a7.3 7.3 0 0 0 1.5.6l.6 2.1h3.2l.6-2.1a7.3 7.3 0 0 0 1.5-.6l1.9 1 1.7-1.7-1-1.9a7.3 7.3 0 0 0 .6-1.5l2.1-.6z'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8zm9.4 4-2.1-.6a7.3 7.3 0 0 0-.6-1.5l1-1.9-1.7-1.7-1.9 1a7.3 7.3 0 0 0-1.5-.6L13.6 2h-3.2l-.6 2.1a7.3 7.3 0 0 0-1.5.6l-1.9-1L4.7 6.4l1 1.9a7.3 7.3 0 0 0-.6 1.5L3 10.4v3.2l2.1.6a7.3 7.3 0 0 0 .6 1.5l-1 1.9 1.7 1.7 1.9-1a7.3 7.3 0 0 0 1.5.6l.6 2.1h3.2l.6-2.1a7.3 7.3 0 0 0 1.5-.6l1.9 1 1.7-1.7-1-1.9a7.3 7.3 0 0 0 .6-1.5l2.1-.6z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ndevr-products__cell-mods { text-align: center; }
.ndevr-products__cell-act { text-align: right; white-space: nowrap; }
.ndevr-products__row-btn
{
	appearance: none;
	font: inherit;
	font-weight: 600;
	color: var(--ndevr-ink, var(--ndevr-accent));
	background: transparent;
	border: 1px solid var(--ndevr-ink, var(--ndevr-accent));
	border-radius: var(--nd-radius-sm, 8px);
	padding: 0.4rem 0.9rem;
	min-width: 0;
	box-shadow: none;
	cursor: pointer;
}
.ndevr-products__row-btn:hover { background: var(--nd-tint-1, rgba(255, 255, 255, 0.07)); }

@media (max-width: 600px)
{
	.ndevr-products__toolbar { gap: 1rem; }
	.ndevr-products__group-name { font-size: 1.2rem; }
	.ndevr-products__cell-sub { display: none; }
}