/**
 * Innseals O-Ring Calculator – frontend styles.
 * All colours/sizes pull from CSS custom properties so admins can theme them.
 *
 * Border variables come pre-composed from PHP as either "Wpx style rgba()" or "none".
 *   --innseals-border-panel
 *   --innseals-border-figure
 *   --innseals-border-field
 *   --innseals-border-d2field
 *   --innseals-border-d1note
 */

.innseals-oring {
	box-sizing: border-box;
	color: var(--innseals-text, #1f2937);
	background: var(--innseals-bg, #ffffff);
	font-family: var(--innseals-font-family, inherit);
	font-size: var(--innseals-font-size, 15px);
	line-height: 1.5;
	padding: var(--innseals-spacing, 16px);
	border-radius: var(--innseals-radius, 8px);
	container-type: inline-size;
	container-name: innseals;
}

.innseals-oring *,
.innseals-oring *::before,
.innseals-oring *::after {
	box-sizing: border-box;
}

.innseals-oring sub {
	font-size: 0.7em;
	vertical-align: sub;
	line-height: 0;
}

.innseals-intro {
	margin: 0 0 var(--innseals-spacing, 16px) 0;
	color: var(--innseals-muted, #6b7280);
}

/* -------- Grid -------- */

.innseals-grid {
	display: grid;
	gap: var(--innseals-spacing, 16px);
	grid-template-columns: 1fr;
}

@container innseals (min-width: 600px) {
	.innseals-grid[data-cols-max="2"],
	.innseals-grid[data-cols-max="3"],
	.innseals-grid[data-cols-max="4"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@container innseals (min-width: 920px) {
	.innseals-grid[data-cols-max="3"],
	.innseals-grid[data-cols-max="4"] {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@container innseals (min-width: 1240px) {
	.innseals-grid[data-cols-max="4"] {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@supports not (container-type: inline-size) {
	@media (min-width: 700px) {
		.innseals-grid[data-cols-max="2"],
		.innseals-grid[data-cols-max="3"],
		.innseals-grid[data-cols-max="4"] {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}
	@media (min-width: 1000px) {
		.innseals-grid[data-cols-max="3"],
		.innseals-grid[data-cols-max="4"] {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}
	}
	@media (min-width: 1300px) {
		.innseals-grid[data-cols-max="4"] {
			grid-template-columns: repeat(4, minmax(0, 1fr));
		}
	}
}

/* -------- Panel -------- */

.innseals-panel {
	background: var(--innseals-group-bg, #f3f4f6);
	border: var(--innseals-border-panel, 1px solid #d1d5db);
	border-radius: var(--innseals-radius, 8px);
	padding: var(--innseals-spacing, 16px);
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;

	/* Each panel is its own container so it can decide for itself when to stack
	   (figure on top, inputs below, both 100% wide). This works correctly even
	   when several panels share a row on desktop or appear inside narrow widgets. */
	container-type: inline-size;
	container-name: innseals-panel;
}

.innseals-panel__head {
	border-bottom: var(--innseals-border-panel, 1px solid #d1d5db);
	padding-bottom: 8px;
}

.innseals-panel__title {
	margin: 0;
	font-size: calc(var(--innseals-font-size, 15px) + 2px);
	font-weight: 600;
	color: var(--innseals-text, #1f2937);
	line-height: 1.2;
}

.innseals-panel__body {
	display: grid;
	gap: var(--innseals-spacing, 16px);
	align-items: start;
	grid-template-columns: 50% minmax(0, 1fr);
}

/* Per-panel split: figure column gets the configured percentage; the rest
   (minus gap) goes to the inputs column. */
.innseals-panel--oring   .innseals-panel__body { grid-template-columns: var(--innseals-figcol-oring,   50%) minmax(0, 1fr); }
.innseals-panel--kolben  .innseals-panel__body { grid-template-columns: var(--innseals-figcol-kolben,  50%) minmax(0, 1fr); }
.innseals-panel--stange  .innseals-panel__body { grid-template-columns: var(--innseals-figcol-stange,  50%) minmax(0, 1fr); }
.innseals-panel--flansch .innseals-panel__body { grid-template-columns: var(--innseals-figcol-flansch, 50%) minmax(0, 1fr); }

.innseals-oring--inputs-below .innseals-panel__body,
.innseals-oring--compact      .innseals-panel__body {
	grid-template-columns: 1fr !important;
}

/* Stack panel body when the panel itself becomes narrow (mobile, narrow sidebar,
   or simply a multi-column desktop layout where a single column is too tight).
   In stacked mode the figure occupies the full panel width and the inputs follow underneath. */
@container innseals-panel (max-width: 420px) {
	.innseals-panel__body {
		grid-template-columns: 1fr !important;
	}
	.innseals-panel__figure-stack { width: 100%; }
	.innseals-figure { padding: 12px; }
	.innseals-figure img {
		width: 100%;
		max-width: 100%;
		max-height: none; /* let the SVG scale to whatever the panel allows */
		height: auto;
	}
}

/* Viewport-based fallback for very old browsers without container query support. */
@supports not (container-type: inline-size) {
	@media (max-width: 600px) {
		.innseals-panel__body { grid-template-columns: 1fr !important; }
		.innseals-figure img  { width: 100%; max-height: none; }
	}
}

.innseals-panel__figure-stack {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.innseals-figure {
	margin: 0;
	background: var(--innseals-bg, #ffffff);
	border: var(--innseals-border-figure, 1px solid #d1d5db);
	border-radius: calc(var(--innseals-radius, 8px) - 2px);
	padding: 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

.innseals-figure img {
	max-width: 100%;
	max-height: var(--innseals-img-h, 220px);
	height: auto;
	display: block;
}

/* Images fill their (panel-relative) figure column. */
.innseals-figure__img--oring,
.innseals-figure__img--qs,
.innseals-figure__img--kolben,
.innseals-figure__img--stange,
.innseals-figure__img--flansch { max-width: 100%; }

.innseals-figure figcaption {
	font-size: var(--innseals-label-size, 13px);
	color: var(--innseals-muted, #6b7280);
	text-align: center;
}

.innseals-panel__inputs {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

/* -------- Fields -------- */

.innseals-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.innseals-field__label {
	font-size: var(--innseals-label-size, 13px);
	color: var(--innseals-muted, #6b7280);
	font-weight: 500;
	letter-spacing: 0.01em;
}

/* d1 note – uses its own border variable */
.innseals-field__d1note {
	font-size: var(--innseals-label-size, 13px);
	color: var(--innseals-muted, #6b7280);
	font-style: italic;
	padding: 6px 10px;
	background: var(--innseals-bg, #ffffff);
	border: var(--innseals-border-d1note, 1px dashed #d1d5db);
	border-radius: calc(var(--innseals-radius, 8px) - 2px);
}

/* d1 display variants */
.innseals-oring--d1-label_only .innseals-field[data-key="d1"] .innseals-field__d1note { display: none; }
.innseals-oring--d1-hidden     .innseals-field[data-key="d1"] { display: none; }

/* readonly text field (r1) */
.innseals-field__control {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 6px;
	align-items: center;
}

.innseals-input {
	font: inherit;
	color: var(--innseals-field-text, #111827);
	background: var(--innseals-field-bg, #f9fafb);
	border: var(--innseals-border-field, 1px solid #d1d5db);
	border-radius: calc(var(--innseals-radius, 8px) - 2px);
	padding: 8px 10px;
	min-width: 0;
	width: 100%;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.innseals-input:focus {
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--innseals-accent, #0a66c2) 25%, transparent);
}

.innseals-input--readonly {
	background: var(--innseals-bg, #ffffff);
	color: var(--innseals-text, #1f2937);
	cursor: default;
}

/* Primary input (d2): own colours + own border */
.innseals-input--primary {
	background: var(--innseals-d2-bg, #fff8db);
	color: var(--innseals-d2-text, #111827);
	border: var(--innseals-border-d2field, 2px solid #0a66c2);
	font-weight: 600;
}

.innseals-unit {
	font-size: var(--innseals-label-size, 13px);
	color: var(--innseals-muted, #6b7280);
	white-space: nowrap;
}

/* -------- Combobox -------- */

.innseals-combo {
	position: relative;
	min-width: 0;
}

.innseals-combo__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	gap: 4px;
	align-items: center;
}

.innseals-combo__toggle {
	font: inherit;
	cursor: pointer;
	background: var(--innseals-field-bg, #f9fafb);
	border: var(--innseals-border-field, 1px solid #d1d5db);
	border-radius: calc(var(--innseals-radius, 8px) - 2px);
	padding: 6px 8px;
	color: var(--innseals-muted, #6b7280);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	min-height: 34px;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.innseals-combo__toggle:hover {
	color: var(--innseals-accent, #0a66c2);
}

.innseals-combo__list {
	list-style: none;
	margin: 4px 0 0;
	padding: 4px 0;
	background: var(--innseals-dropdown-bg, #ffffff);
	color: var(--innseals-dropdown-text, var(--innseals-text, #1f2937));
	border: var(--innseals-border-field, 1px solid #d1d5db);
	border-radius: calc(var(--innseals-radius, 8px) - 2px);
	box-shadow: 0 8px 24px -6px rgba(0,0,0,0.22);
	max-height: var(--innseals-dropdown-h, 360px);
	overflow-y: auto;
	position: absolute;
	z-index: 10;
	left: 0;
	right: 0;
	top: 100%;
}

.innseals-combo__option {
	padding: 7px 10px;
	cursor: pointer;
	font-variant-numeric: tabular-nums;
	color: inherit;
	user-select: none;
}

.innseals-combo__option.is-active,
.innseals-combo__option:hover {
	background: var(--innseals-dropdown-hover, color-mix(in srgb, var(--innseals-accent, #0a66c2) 15%, transparent));
}

.innseals-combo__option:active {
	background: color-mix(in srgb, var(--innseals-accent, #0a66c2) 28%, transparent);
}

/* Snap toast */
.innseals-combo__toast {
	position: absolute;
	z-index: 11;
	left: 0;
	right: 0;
	top: 100%;
	margin-top: 6px;
	padding: 8px 10px;
	border-radius: calc(var(--innseals-radius, 8px) - 2px);
	background: var(--innseals-accent, #0a66c2);
	color: var(--innseals-accent-text, #ffffff);
	font-size: var(--innseals-label-size, 13px);
	box-shadow: 0 6px 18px -8px rgba(0,0,0,0.3);
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.innseals-combo__toast.is-in  { opacity: 1; transform: translateY(0); }
.innseals-combo__toast.is-out { opacity: 0; transform: translateY(-4px); }

/* -------- Actions -------- */

.innseals-actions {
	margin-top: var(--innseals-spacing, 16px);
	display: flex;
	gap: 8px;
}

.innseals-reset {
	font: inherit;
	cursor: pointer;
	padding: 8px 14px;
	border-radius: calc(var(--innseals-radius, 8px) - 2px);
	border: 1px solid var(--innseals-accent, #0a66c2);
	background: var(--innseals-accent, #0a66c2);
	color: var(--innseals-accent-text, #ffffff);
	transition: opacity 0.15s ease;
}

.innseals-reset:hover { opacity: 0.85; }

.innseals-data { display: none !important; }

/* -------- Compact layout -------- */

.innseals-oring--compact .innseals-grid { grid-template-columns: 1fr !important; }
.innseals-oring--compact .innseals-figure img { max-height: calc(var(--innseals-img-h, 220px) * 0.7); }

/* -------- Print -------- */

@media print {
	.innseals-oring { background: #fff; color: #000; }
	.innseals-actions { display: none; }
	.innseals-combo__toggle { display: none; }
	.innseals-combo__list { display: none; }
}