/* ==========================================================================
   TBB Lab Calculators — Buffer Calculator Stylesheet
   Calculator-specific styles only. Common styles in tbb-calculators-common.css
   ========================================================================== */

/* ── All inputs and selects — force full width ───────────────────────────── */
#tbb-buffer-calculator-wrap input[type="text"],
#tbb-buffer-calculator-wrap input[type="number"],
#tbb-buffer-calculator-wrap select {
	display:       block !important;
	width:         100% !important;
	max-width:     100% !important;
	min-width:     100% !important;
	padding:       .8rem 1rem !important;
	font-size:     1.5rem !important;
	line-height:   1.4 !important;
	font-family:   var(--tbb-font) !important;
	color:         var(--tbb-text) !important;
	background:    var(--tbb-bg) !important;
	border:        1px solid var(--tbb-border) !important;
	border-radius: var(--tbb-radius-sm) !important;
	box-sizing:    border-box !important;
	transition:    border-color var(--tbb-transition), box-shadow var(--tbb-transition);
}

#tbb-buffer-calculator-wrap input[type="text"]:focus,
#tbb-buffer-calculator-wrap input[type="number"]:focus,
#tbb-buffer-calculator-wrap select:focus {
	outline:      none !important;
	border-color: var(--tbb-primary) !important;
	box-shadow:   0 0 0 3px rgba(215,95,0,.15) !important;
}

/* ── Labels ──────────────────────────────────────────────────────────────── */
#tbb-buffer-calculator-wrap .tbb-calc-label,
#tbb-buffer-calculator-wrap label {
	display:       block;
	font-weight:   600;
	font-size:     1.35rem;
	color:         var(--tbb-text);
	margin-bottom: .5rem;
}

/* ── Field spacing ───────────────────────────────────────────────────────── */
#tbb-buffer-calculator-wrap .tbb-calc-field {
	margin-bottom: 1.5rem;
}

/* ── Standalone inputs — force wide via element ID ──────────────────────── */
#tbb-buffer-calculator-wrap #tbb-buffer-ph,
#tbb-buffer-calculator-wrap #bufferSelect {
	width:     100% !important;
	min-width: 100% !important;
	max-width: 100% !important;
}

/* ── Inline row: number input + compact unit select ──────────────────────── */
#tbb-buffer-calculator-wrap .tbb-buffer-input-row {
	display:     flex !important;
	gap:         .6rem !important;
	align-items: stretch !important;
}

#tbb-buffer-calculator-wrap .tbb-buffer-input-row input[type="number"] {
	flex:      1 1 0% !important;
	width:     auto !important;
	min-width: 0 !important;
	max-width: none !important;
}

#tbb-buffer-calculator-wrap .tbb-buffer-input-row select {
	flex:      0 0 9rem !important;
	width:     9rem !important;
	min-width: 9rem !important;
	max-width: 9rem !important;
}

/* ── Dynamic custom fields (injected by JS) ──────────────────────────────── */
#tbb-buffer-calculator-wrap #customBufferFields label {
	display:     block;
	font-weight: 600;
	font-size:   1.35rem;
	color:       var(--tbb-text);
	margin-top:  1rem;
	margin-bottom: .5rem;
}

#tbb-buffer-calculator-wrap #customBufferFields label:first-child {
	margin-top: 0;
}

#tbb-buffer-calculator-wrap .custom-mw {
	background:    var(--tbb-bg-subtle);
	border:        1px solid var(--tbb-border);
	border-radius: var(--tbb-radius-sm);
	padding:       .75rem 1rem;
	margin-top:    .5rem;
}

/* ── Result area ─────────────────────────────────────────────────────────── */
#tbb-buffer-calculator-wrap #result {
	min-height:    4rem;
	padding:       1.25rem 1.5rem;
	border:        1px solid var(--tbb-border) !important;
	border-radius: var(--tbb-radius-sm);
	background:    var(--tbb-bg-subtle);
	font-size:     1.4rem;
	line-height:   1.7;
	color:         var(--tbb-text);
	width:         100%;
	box-sizing:    border-box;
}

#tbb-buffer-calculator-wrap #result p  { margin: 0 0 .6rem; }
#tbb-buffer-calculator-wrap #result ul { margin: 0 0 .8rem; padding-left: 1.5rem; }
#tbb-buffer-calculator-wrap #result li { margin-bottom: .3rem; }
#tbb-buffer-calculator-wrap #result h4 { margin: .8rem 0 .4rem; font-size: 1.35rem; }
#tbb-buffer-calculator-wrap #result dl { margin: 0; }
#tbb-buffer-calculator-wrap #result dt { font-weight: 600; margin-top: .5rem; font-size: 1.3rem; }
#tbb-buffer-calculator-wrap #result dd { margin: 0 0 .3rem 1rem; font-size: 1.3rem; color: var(--tbb-text-muted); }