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

/* ── Tabs ────────────────────────────────────────────────────────────────── */
.tbb-molar-tabs {
	display:       flex;
	gap:           .375rem;
	background:    var(--tbb-bg-subtle);
	border:        1px solid var(--tbb-border);
	border-radius: var(--tbb-radius-sm);
	padding:       .3rem;
	margin-bottom: 1.75rem;
}

.tbb-molar-tab {
	flex:        1;
	padding:     .65rem 1rem;
	font-size:   1.3rem;
	font-weight: 600;
	color:       var(--tbb-text-muted);
	background:  transparent;
	border:      none;
	border-radius: 6px;
	cursor:      pointer;
	transition:  background var(--tbb-transition), color var(--tbb-transition),
	             box-shadow var(--tbb-transition);
	font-family: var(--tbb-font);
	white-space: nowrap;
	line-height: 1.4;
}

.tbb-molar-tab:hover {
	background: var(--tbb-bg);
	color:      var(--tbb-text);
}

.tbb-molar-tab--active {
	background:  #fff;
	color:       var(--tbb-primary);
	box-shadow:  0 1px 4px rgba(0,0,0,.1);
}

/* ── Mode toggles (radio rows) ───────────────────────────────────────────── */
.tbb-molar-mode-toggle {
	display:     flex;
	flex-wrap:   wrap;
	gap:         .5rem 1.5rem;
	align-items: center;
}

.tbb-molar-solve-toggle {
	display:     flex;
	flex-wrap:   wrap;
	gap:         .5rem 1.25rem;
	align-items: center;
	margin-top:  .4rem;
}

.tbb-molar-radio-label {
	display:     inline-flex;
	align-items: center;
	gap:         .45rem;
	font-size:   1.3rem;
	font-weight: 500;
	color:       var(--tbb-text);
	cursor:      pointer;
	user-select: none;
}

.tbb-molar-radio-label input[type="radio"] {
	width:        1.1rem;
	height:       1.1rem;
	accent-color: var(--tbb-primary);
	cursor:       pointer;
	margin:       0;
	flex-shrink:  0;
}

/* ── Shared input + select styles ────────────────────────────────────────── */
.tbb-molarity-calculator .tbb-molar-input,
.tbb-molarity-calculator .tbb-molar-search-input,
.tbb-molarity-calculator .tbb-molar-unit-select {
	display:       block;
	box-sizing:    border-box;
	padding:       .875rem 1.1rem;
	font-size:     1.3rem;
	line-height:   1.6;
	min-height:    52px;
	color:         var(--tbb-text);
	background:    var(--tbb-bg);
	border:        1.5px solid var(--tbb-border);
	border-radius: var(--tbb-radius-sm);
	transition:    border-color var(--tbb-transition), box-shadow var(--tbb-transition);
	font-family:   var(--tbb-font);
	-webkit-appearance: none;
	-moz-appearance:    textfield;
}

.tbb-molarity-calculator .tbb-molar-input,
.tbb-molarity-calculator .tbb-molar-search-input {
	width:     100% !important;
	max-width: 100% !important;
	min-width: 0;
}

.tbb-molarity-calculator .tbb-molar-input:focus,
.tbb-molarity-calculator .tbb-molar-search-input:focus {
	outline:      none;
	border-color: var(--tbb-primary);
	box-shadow:   0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* Readonly auto-fill */
.tbb-molarity-calculator .tbb-molar-input--readonly {
	background: var(--tbb-bg-subtle);
	color:      var(--tbb-text-muted);
	cursor:     default;
}

/* Solve-for (disabled, unknown field) */
.tbb-molarity-calculator .tbb-molar-input--solve {
	background:  #fff8e6;
	border-color: #fcd34d;
	color:       var(--tbb-text-muted);
	font-style:  italic;
	cursor:      default;
}

.tbb-molarity-calculator .tbb-molar-input--solve::placeholder {
	color:      #d97706;
	font-style: italic;
	font-weight: 700;
	opacity:    1;
}

/* ── Input + unit row ───────────────────────────────────────────────────── */
.tbb-molar-input-row {
	display: flex;
	gap:     .625rem;
	width:   100%;
}

.tbb-molar-input-row .tbb-molar-input {
	flex:      1 1 0;
	min-width: 0;
}

.tbb-molarity-calculator .tbb-molar-unit-select {
	flex:                0 0 auto;
	width:               auto;
	min-width:           80px;
	padding-right:       2rem;
	background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat:   no-repeat;
	background-position: right .75rem center;
	-webkit-appearance:  none;
	-moz-appearance:     none;
	appearance:          none;
	cursor:              pointer;
}

.tbb-molarity-calculator .tbb-molar-unit-select:focus {
	outline:      none;
	border-color: var(--tbb-primary);
	box-shadow:   0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* ── Compound combobox ──────────────────────────────────────────────────── */
.tbb-molar-combobox {
	position: relative;
}

.tbb-molar-search-wrap {
	position: relative;
}

.tbb-molarity-calculator .tbb-molar-search-input {
	padding-right: 2.5rem;
}

.tbb-molar-search-icon {
	position:       absolute;
	right:          1rem;
	top:            50%;
	transform:      translateY(-50%);
	color:          var(--tbb-text-muted);
	font-size:      .75rem;
	pointer-events: none;
}

/* ── Dropdown ───────────────────────────────────────────────────────────── */
.tbb-molar-dropdown {
	position:            absolute;
	top:                 calc(100% + 3px);
	left:                0;
	right:               0;
	z-index:             9999;
	background:          var(--tbb-bg);
	border:              1.5px solid var(--tbb-primary);
	border-radius:       var(--tbb-radius-sm);
	box-shadow:          var(--tbb-shadow-lg);
	max-height:          260px;
	overflow-y:          auto;
	overscroll-behavior: contain;
}

.tbb-molar-dropdown-item {
	padding:    .65rem 1.1rem;
	font-size:  1.25rem;
	line-height: 1.5;
	color:      var(--tbb-text);
	cursor:     pointer;
	transition: background var(--tbb-transition);
}

.tbb-molar-dropdown-item:hover,
.tbb-molar-dropdown-item--active {
	background: var(--tbb-primary-light);
	color:      var(--tbb-primary);
}

.tbb-molar-dropdown-empty {
	padding:    .75rem 1.1rem;
	font-size:  1.25rem;
	color:      var(--tbb-text-muted);
	text-align: center;
}

.tbb-molar-highlight {
	background:  transparent;
	color:       var(--tbb-primary);
	font-weight: 700;
}

/* ── Result card ────────────────────────────────────────────────────────── */
.tbb-molar-results {
	display:        flex;
	flex-direction: column;
	gap:            1.25rem;
}

.tbb-molar-result-card {
	background:    linear-gradient(135deg, var(--tbb-primary-light) 0%, #e0edff 100%);
	border:        1.5px solid #bfdbfe;
	border-radius: var(--tbb-radius);
	padding:       1.5rem 2rem;
	text-align:    center;
}

.tbb-molar-result-label {
	font-size:      1.2rem;
	font-weight:    600;
	color:          var(--tbb-primary);
	text-transform: uppercase;
	letter-spacing: .06em;
	margin-bottom:  .5rem;
}

.tbb-molar-result-value-row {
	display:     inline-flex;
	align-items: baseline;
	gap:         .4rem;
}

.tbb-molar-result-value {
	font-size:   2.25rem;
	font-weight: 700;
	color:       var(--tbb-text);
	line-height: 1.2;
}

.tbb-molar-result-unit {
	font-size:   1.3rem;
	font-weight: 500;
	color:       var(--tbb-text-muted);
}

/* ── Step-by-step breakdown ─────────────────────────────────────────────── */
.tbb-molar-steps {
	background:    var(--tbb-bg-subtle);
	border:        1px solid var(--tbb-border);
	border-radius: var(--tbb-radius-sm);
	padding:       1.25rem 1.5rem;
	font-size:     1.3rem;
	line-height:   1.7;
	color:         var(--tbb-text);
}

.tbb-molar-steps p {
	margin: 0 0 .5rem;
}

.tbb-molar-steps p:last-child {
	margin-bottom: 0;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media ( max-width: 600px ) {
	.tbb-molar-tabs {
		flex-direction: column;
		gap:            .25rem;
	}

	.tbb-molar-mode-toggle,
	.tbb-molar-solve-toggle {
		flex-direction: column;
		gap:            .5rem;
	}

	.tbb-molar-result-value {
		font-size: 1.75rem;
	}

	.tbb-molarity-calculator .tbb-molar-unit-select {
		min-width: 70px;
	}
}