/* ductsize.css
 * Replaces the inline <style> block in ductsize.php.
 * Also provides classes for SVG <text> / <line> / <path> elements so
 * those elements no longer need style="" attributes.
 */

/* ── Page background ─────────────────────────────────────── */
body {
	background-color: #f4f6f9;
}

/* ── Top navbar ──────────────────────────────────────────── */
.top-navbar {
	background-color: #0d6efd;
}
.top-navbar .navbar-brand {
	color: #fff;
	font-weight: 600;
	font-size: 1.1rem;
}

/* ── Tab strip ───────────────────────────────────────────── */
.nav-tabs {
	border-bottom: none;
	gap: 4px;
	flex-wrap: wrap;
}
.nav-tabs .nav-item {
	flex: 1 1 auto;
}
.nav-tabs .nav-link {
	color: #495057;
	border-radius: 6px 6px 0 0;
	padding: 8px 10px;
	font-size: 0.8rem;
	font-weight: 500;
	border: 1px solid transparent;
	transition: background 0.15s, color 0.15s;
	text-align: center;
	width: 100%;
	white-space: nowrap;
}
.nav-tabs .nav-link:hover {
	background-color: #e9ecef;
	color: #212529;
}
.nav-tabs .nav-link.active {
	background-color: #fff;
	color: #0d6efd;
	border-color: #dee2e6 #dee2e6 #fff;
}

/* ── Offset result cards ─────────────────────────────────── */
.offset-results {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 12px;
}
.offset-result-card {
	background: #fff;
	border: 1px solid #dee2e6;
	border-radius: 8px;
	padding: 14px 16px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.offset-result-card.primary {
	border-left: 4px solid #0d6efd;
	background: #f0f6ff;
}
.offset-result-card .result-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 3px 0;
	font-size: 0.875rem;
	border-bottom: 1px solid #f0f0f0;
}
.offset-result-card .result-row:last-child { border-bottom: none; }
.offset-result-card .result-row .rl {
	font-weight: 500;
	color: #6c757d;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.offset-result-card .result-row .rv {
	font-weight: 600;
	color: #212529;
}
.offset-result-card.owl-card .rv { color: #0d47a1; }
.offset-results-empty {
	font-size: 0.85rem;
	color: #6c757d;
	font-style: italic;
	padding: 12px 0;
}
.results-count {
	font-size: 0.78rem;
	color: #6c757d;
	margin-bottom: 6px;
}

/* ── Offset diagrams ─────────────────────────────────────── */
.offset-diagram {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 12px 8px 4px;
	text-align: center;
	overflow: hidden;           /* replaces style="overflow:hidden;" on OWL svg wrapper */
}

/* ── Tab content card ────────────────────────────────────── */
.tab-content > .tab-pane {
	background: #fff;
	border: 1px solid #dee2e6;
	border-radius: 0 0 8px 8px;
	padding: 24px;
}

/* ── Form fields ─────────────────────────────────────────── */
.form-label {
	font-weight: 500;
	font-size: 0.875rem;
	margin-bottom: 4px;
	color: #343a40;
}
.form-control,
.form-control[readonly] {
	border-radius: 6px;
	font-size: 0.9rem;
}
.form-control[readonly] {
	background-color: #e9ecef;
	font-weight: 600;
	color: #0d6efd;
}

/* ── Radio option groups ─────────────────────────────────── */
.option-group {
	background: #f8f9fa;
	border: 1px solid #e9ecef;
	border-radius: 8px;
	padding: 12px 16px;
}
.option-group legend {
	font-size: 0.8rem;
	font-weight: 600;
	color: #6c757d;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	float: none;
	width: auto;
	padding: 0 4px;
	margin-bottom: 8px;
}
.form-check-inline {
	margin-right: 16px;
}
.form-check-label {
	font-size: 0.875rem;
}

/* ── Current options badge strip ─────────────────────────── */
#ductCFMCurrentOptionsDiv,
#ductRoundCurrentOptionsDiv,
#ductRectCurrentOptionsDiv {
	background: #e7f1ff;
	border: 1px solid #b6d4fe;
	border-radius: 8px;
	padding: 10px 14px;
	font-size: 0.85rem;
	color: #084298;
}
#ductCFMCurrentOptionsDiv label,
#ductRoundCurrentOptionsDiv label,
#ductRectCurrentOptionsDiv label {
	font-weight: 600;
	margin-bottom: 2px;
}

/* ── Result output containers ────────────────────────────── */
#myDuctSizeDiv,
#myRoundDuctSizeDiv,
#myRectDuctSizeDiv {
	margin-top: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* ── nd2-card → BS5 card style ───────────────────────────── */
.nd2-card {
	background: #fff;
	border: 1px solid #dee2e6;
	border-radius: 8px;
	padding: 14px 16px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.nd2-card .card-title { margin: 0; }
.nd2-card h3.card-primary-title {
	font-size: 0.95rem;
	font-weight: 600;
	color: #212529;
	margin: 0 0 4px 0;
	line-height: 1.3;
}
.nd2-card h5.card-subtitle {
	font-size: 0.8rem;
	font-weight: 400;
	color: #6c757d;
	margin: 0;
	line-height: 1.3;
}
.nd2-card h5.card-subtitle[style*="color:red"] {
	font-size: 0.8rem;
	font-weight: 500;
}

#myDuctSizeDiv      .nd2-card:first-child,
#myRoundDuctSizeDiv .nd2-card:first-child,
#myRectDuctSizeDiv  .nd2-card:first-child {
	border-left: 4px solid #0d6efd;
	background: #f0f6ff;
}
#myDuctSizeDiv      .nd2-card:first-child h3.card-primary-title,
#myRoundDuctSizeDiv .nd2-card:first-child h3.card-primary-title,
#myRectDuctSizeDiv  .nd2-card:first-child h3.card-primary-title {
	color: #0d47a1;
}

/* ── Page wrapper spacing ────────────────────────────────── */
.page-content {
	padding-top: 16px;
	padding-bottom: 40px;
}

/* ── Small label inside angle-range fieldset ─────────────── */
/* Replaces style="font-size:0.8rem" on deAngleMin/Max and tpAngleMin/Max labels */
.form-label-sm {
	font-size: 0.8rem;
}


/* ════════════════════════════════════════════════════════════
   SVG CLASSES
   Replace style="" attributes on <text>, <line>, and <path>
   elements inside the diagram SVGs.
   ════════════════════════════════════════════════════════════ */

/* Standard diagram label — 18 px, gray, bold, tight tracking
   Usage: <text class="svg-lbl"> */
.svg-lbl {
	fill: rgb(123, 123, 124);
	font-family: Arial, sans-serif;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -1px;
	white-space: pre;
}

/* Same as svg-lbl but with explicit stroke-width: 1
   Usage: <text class="svg-lbl svg-sw1"> */
.svg-sw1 {
	stroke-width: 1;
}

/* Large diagram label — 28 px version (OWL result SVG)
   Usage: <text class="svg-lbl-lg"> */
.svg-lbl-lg {
	fill: rgb(123, 123, 124);
	font-family: Arial, sans-serif;
	font-size: 28px;
	font-weight: 700;
	white-space: pre;
}

/* Label that also needs transform-box / transform-origin reset
   Usage: <text class="svg-lbl svg-sw1 svg-origin"> */
.svg-origin {
	transform-box: fill-box;
	transform-origin: 50% 50%;
}

/* Debug / construction line in OWL result SVG
   Usage: <line class="svg-line"> */
.svg-line {
	fill: none;
	stroke: rgb(0, 0, 0);
}