/* Santek B2B: styles for the injected /cart Container Plan panel.
   Reuses webshop's own .frappe-card wrapper so the panel looks native; everything
   below is scoped under santek-* classes so it can't leak into/clash with webshop's
   own styles on other pages (this file loads site-wide, guarded by the JS's own
   pathname check, so it must stay inert everywhere else).

   Visual language ported from the user's original standalone calculator
   (cbm_calculator.css's --steel-background .gaugewrap/.cbox/.cfill), reskinned to a
   white/light theme per explicit request instead of the original's dark steel panel —
   same striped-container metaphor and centered fill percentage. Iterated live
   against the real /cart page in Chrome before being written here.

   Retrofitted fully onto the Dark/Light Glass system (DESIGN.md) -- previously this
   panel kept a deliberately separate "steel/graph-paper instrument" identity, with
   its light-mode base hardcoded and only a dark-mode override block on top. Now
   every value routes through the same --santek-*, --text-*, --border-color, --fg-color
   custom properties portal_theme.css redefines per theme (same var(--token,
   #fallback) mechanism packaging_designs_portal.css and timeline.css already use),
   so the panel is a themed member of the shared system in both modes, and the old
   dark-only override block is gone -- it's redundant once the base rules are
   theme-reactive themselves. One real fix along the way: .santek-cp-model-btn.active
   was filling with raw Santek Navy in light mode, a large filled/clickable surface
   using brand ink -- exactly what DESIGN.md's Ink-vs-Interactive Rule forbids. Dark
   mode already (correctly) used the Signal Blue accent there; light mode now
   matches it instead of the other way around. */

.santek-container-plan { margin-bottom: 20px; }
.santek-container-plan h5 {
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--text-muted, #8d99a6);
	font-weight: 800;
	margin-bottom: 16px;
}

.santek-ctn-note { font-size: 12px; margin-top: 4px; }
.santek-ctn-muted { color: var(--text-muted, #8d99a6); }

.btn-xs { padding: 2px 8px; font-size: 12px; line-height: 1.5; border-radius: 4px; }

.santek-cp-stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	margin-bottom: 16px;
}
.santek-cp-stat { background: var(--fg-color, #F7F8F9); border-radius: 10px; padding: 12px 14px; }
.santek-cp-k { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted, #8d99a6); font-weight: 700; }
.santek-cp-v {
	font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 24px;
	font-weight: 700;
	color: var(--text-color, #1c2126);
	margin-top: 3px;
}

.santek-cp-model {
	display: inline-flex;
	width: max-content;
	max-width: 100%;
	border: 1.5px solid var(--border-color, #E3E6EA);
	border-radius: 8px;
	overflow: hidden;
	margin-bottom: 14px;
}
.santek-cp-model-btn {
	border: 0;
	border-radius: 0;
	background: var(--santek-input-bg, #fff);
	color: var(--text-muted, #8d99a6);
	font-weight: 700;
	padding: 7px 12px;
	white-space: nowrap;
}
.santek-cp-model-btn.active { background: var(--santek-accent, #3f8ae0); color: #fff; }

/* Three container-size pickers inline, side by side (was stacked one-per-row) --
   each a narrow card: size label on top, a tight -/count/+ stepper below. */
.santek-cp-plan { display: flex; flex-direction: row; gap: 6px; margin-bottom: 14px; }
.santek-cp-pick {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	border: 1.5px solid var(--border-color, #E3E6EA);
	border-radius: 8px;
	padding: 6px 4px;
}
.santek-cp-picklbl {
	font-size: 10px;
	font-weight: 700;
	color: var(--text-muted, #8d99a6);
	text-transform: uppercase;
	letter-spacing: .03em;
	white-space: nowrap;
}
.santek-cp-pickrow { display: flex; align-items: center; gap: 5px; }
.santek-cp-picknum { font-size: 13px; font-weight: 700; color: var(--text-color, #1c2126); min-width: 12px; text-align: center; }
.santek-cp-dec, .santek-cp-inc {
	border: 1px solid var(--border-color, #E3E6EA);
	border-radius: 6px;
	width: 20px;
	height: 20px;
	padding: 0;
	font-size: 12px;
	background: var(--santek-input-bg, #fff);
	line-height: 1;
}
.santek-cp-dec:hover, .santek-cp-inc:hover { background: var(--fg-color, #F7F8F9); }

/* The big container-fill visualization -- a container's internal cube, filling
   left-to-right, a "door" edge on the left, percentage centered regardless of fill.
   The fill itself uses Teal Signal (see DESIGN.md Colors) rather than Signal Blue --
   a deliberately different interactive tint for "how much is filled" (a quantity
   readout) than for "click me" (the buy/commerce accent), so the two never look
   like the same kind of affordance. */
.santek-cvis {
	position: relative;
	height: 88px;
	margin: 4px 0 8px;
	border: 2px solid var(--border-color, #C7CDD3);
	border-radius: 8px;
	overflow: hidden;
	background: repeating-linear-gradient(90deg, var(--fg-color, #F4F5F7) 0 22px, var(--santek-input-bg, #EAECEF) 22px 24px);
}
.santek-cvis::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 14px;
	background: var(--santek-input-bg, #DDE1E5);
	border-right: 2px solid var(--border-color, #C7CDD3);
	z-index: 3;
}
.santek-cp-fill {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg, #146785, color-mix(in srgb, #146785 80%, transparent));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .3s cubic-bezier(.4, 0, .2, 1);
	box-shadow: inset -14px 0 20px -10px rgba(0, 0, 0, .18);
	z-index: 2;
}
/* Over capacity -- the same status-error red timeline.css's own dot/banner and
   packaging_designs_portal.css's "not ready" dot already use, not a third,
   independently-tuned red. */
.santek-cp-fill.santek-cp-over {
	background: linear-gradient(180deg, var(--red-500, #c62828), color-mix(in srgb, var(--red-500, #c62828) 80%, transparent));
}
.santek-cp-pct {
	position: absolute;
	z-index: 5;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
	font-weight: 700;
	font-size: 26px;
	color: var(--text-color, #1c2126);
}
.santek-cvis-doorlbl {
	position: absolute;
	left: 20px;
	bottom: 4px;
	font-size: 8px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--text-muted, #8d99a6);
	z-index: 5;
}

.santek-cp-readout { font-size: 12px; color: var(--text-muted, #8d99a6); margin-bottom: 10px; }

/* The unmeasured-cartons caution. Warning-coloured rather than muted on purpose: it
   qualifies every figure above it, so a reader who misses it reads all four stats too
   low. The explicit [hidden] rule is not redundant -- this block sets `display`, which
   would otherwise beat the browser's own [hidden] default. */
.santek-cp-unsized {
	display: block;
	font-size: 12px;
	color: var(--text-on-yellow, #7a5c00);
	background: var(--yellow-50, #fffbe6);
	border: 1px solid var(--yellow-200, #ffe58f);
	border-radius: 6px;
	padding: 6px 10px;
	margin-bottom: 10px;
}
.santek-cp-unsized[hidden] { display: none; }

@media (max-width: 767px) {
	.santek-cp-stats { grid-template-columns: repeat(2, 1fr); }
}