/**
 * Storelly Product Builder — Plugin Language surfaces.
 *
 * Two surfaces:
 *   - .spbwc-lang-block  : always-visible card on Overview + Settings. Extends
 *                          the shared .spbwc-block component (storelly-admin-ui.css)
 *                          — same chrome, head, badge, body, foot. This file only
 *                          adds the bits unique to the language widget:
 *                          the 3-column metric grid, the collapsible "all locales"
 *                          details panel, and the foot's two-column action layout.
 *   - .spbwc-i18n-notice : dismissible welcome notice on the WP Dashboard. Uses
 *                          WP core's `.notice` chrome and only adds light token
 *                          touches (brand border-left, dismiss link styling).
 *
 * Every color, spacing, radius, font value flows through the design tokens in
 * _tokens.css. Zero hardcoded hex; zero inline style="" attrs in the PHP.
 *
 * Load order: depends on `spbwc-admin-ui` (which already pulls in `spbwc-tokens`).
 * Lazy-enqueued by SPBWC_I18n_Notice::ensure_css().
 */

/* =====================================================================
   Welcome notice (WP Dashboard only)
   ===================================================================== */

.spbwc-i18n-notice {
	border-left-color: var(--st-brand) !important;
}

.spbwc-i18n-notice__title {
	display: flex;
	align-items: center;
	gap: var(--nbd-space-2);
	margin: 0 0 var(--nbd-space-1) 0;
	font-size: var(--text-md, 14px);
	font-weight: var(--font-bold, 600);
	color: var(--nbd-st-text);
}

.spbwc-i18n-notice__title .dashicons {
	color: var(--st-brand);
	font-size: 18px;
	width: 18px;
	height: 18px;
}

.spbwc-i18n-notice__body {
	margin: 0 0 var(--nbd-space-3) 0;
	max-width: 780px;
	color: var(--nbd-st-text-soft);
	line-height: 1.55;
}

.spbwc-i18n-notice__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nbd-space-2);
	margin: 0;
	align-items: center;
}

.spbwc-i18n-notice__actions .dashicons-external {
	font-size: 14px;
	width: 14px;
	height: 14px;
	vertical-align: middle;
	margin-left: 2px;
}

.spbwc-i18n-notice__dismiss-link {
	color: var(--nbd-st-text-mute);
	text-decoration: none;
	margin-left: auto;
	font-size: var(--text-sm, 13px);
}

.spbwc-i18n-notice__dismiss-link:hover,
.spbwc-i18n-notice__dismiss-link:focus {
	color: var(--nbd-st-text-soft);
	text-decoration: underline;
}

/* =====================================================================
   Language block — extends .spbwc-block, only the deltas live here
   ===================================================================== */

/* Top-of-page spacing — matches the rhythm used by other blocks in
   the Overview view. */
.spbwc-lang-block {
	margin-top: var(--nbd-space-4);
}

/* 3-column metric grid: Current locale · Layout direction · Bundled languages */
.spbwc-lang-block__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--nbd-space-5);
}

.spbwc-lang-block__cell {
	display: flex;
	flex-direction: column;
	gap: var(--nbd-space-1);
}

.spbwc-lang-block__cell-label {
	font-size: var(--text-xs, 11px);
	text-transform: uppercase;
	color: var(--nbd-st-text-mute);
	letter-spacing: 0.04em;
	font-weight: var(--font-bold, 600);
}

.spbwc-lang-block__cell-value {
	font-size: var(--text-lg, 15px);
	font-weight: var(--font-bold, 600);
	color: var(--nbd-st-text);
}

.spbwc-lang-block__cell-value--code {
	font-family: var(--font-mono, Menlo, Consolas, "SF Mono", monospace);
}

/* Foot: actions on the left, link/meta on the right — mirrors the
   space-between layout of .spbwc-block__foot but with two flexible
   action groups instead of a single foot-link. */
.spbwc-lang-block__foot {
	flex-wrap: wrap;
	gap: var(--nbd-space-3);
}

.spbwc-lang-block__actions,
.spbwc-lang-block__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--nbd-space-3);
}

.spbwc-lang-block__meta {
	margin-left: auto;
}

/* The "See all" toggle is a real <button>, so we strip native button
   chrome to inherit the .spbwc-block__foot-link look. */
.spbwc-lang-block__see-all {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	cursor: pointer;
}

/* Collapsible "all 15 locales" details panel inside the body. */
.spbwc-lang-block__details {
	margin-top: var(--nbd-space-4);
	padding: var(--nbd-space-4);
	background: var(--nbd-st-bg-soft);
	border: 1px solid var(--nbd-st-border-subtle);
	border-radius: var(--nbd-radius);
	font-size: var(--text-sm, 13px);
	line-height: 1.8;
	color: var(--nbd-st-text-soft);
}

.spbwc-lang-block__details strong {
	display: block;
	color: var(--nbd-st-text);
	margin-bottom: var(--nbd-space-2);
	font-size: var(--text-sm, 13px);
}

.spbwc-lang-block__details code {
	background: var(--nbd-st-bg);
	border: 1px solid var(--nbd-st-border-subtle);
	padding: 1px 6px;
	border-radius: var(--nbd-radius-sm);
	font-size: var(--text-xs, 12px);
	font-family: var(--font-mono, Menlo, Consolas, "SF Mono", monospace);
	color: var(--nbd-st-text-brand);
}

.spbwc-lang-block__details[hidden] {
	display: none;
}